/* Footer stack + section jump bars. Loaded after theme.css. */

.jump-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 20px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--divider);
}

.swarm .jump-bar,
.family .jump-bar,
.footer .jump-bar {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.jump-bar a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.55;
  white-space: nowrap;
}

.jump-bar a:hover,
.jump-bar a.is-here {
  opacity: 1;
}

.stack-footer {
  padding: 36px 0 48px;
}

.stack-footer .section-header h3 {
  color: var(--light-primary);
  border-bottom-color: #6d4c41;
}

.stack-label {
  margin: 22px 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-primary);
  font-weight: 700;
}

ul.stack-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

ul.stack-row > li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

ul.stack-row a,
ul.stack-row > li > span {
  --stack-title: #d56b1d;
  --stack-bg: #3b1d07;
  --stack-trim: #884412;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  min-height: 58px;
  padding: 8px 14px;
  background: var(--stack-bg);
  border: 1px solid var(--stack-trim);
  border-radius: 3px;
  color: var(--stack-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  line-height: 1.2;
}

ul.stack-row a:hover {
  filter: brightness(1.12);
  border-color: var(--stack-title);
}

.stack-footer img,
ul.stack-row img {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  flex: 0 0 36px !important;
}

/* Service Title / Background / Trim — same tokens as the operator GUI
   (webui/app/app.css --svc-* and modules/dl_queue.py STACK_PALETTE).
   Sonarr-dark pair (#002630 / #003644) is the L template. */
.stack-servarr a, .stack-servarr > span,
.stack-boxarr a, .stack-boxarr > span,
.stack-unboxarr a, .stack-unboxarr > span { --stack-title: #d56b1d; --stack-bg: #3b1d07; --stack-trim: #884412; }
.stack-sonarr a, .stack-sonarr > span { --stack-title: #75b6c7; --stack-bg: #002630; --stack-trim: #003644; }
.stack-radarr a, .stack-radarr > span { --stack-title: #c7af75; --stack-bg: #302200; --stack-trim: #443000; }
.stack-lidarr a, .stack-lidarr > span { --stack-title: #75c7a3; --stack-bg: #00301b; --stack-trim: #004426; }
.stack-readarr a, .stack-readarr > span { --stack-title: #c77577; --stack-bg: #300001; --stack-trim: #440001; }
.stack-kapowarr a, .stack-kapowarr > span { --stack-title: #c7ba75; --stack-bg: #302900; --stack-trim: #443a00; }
.stack-romarr a, .stack-romarr > span { --stack-title: #bb75c7; --stack-bg: #290030; --stack-trim: #3a0044; }
.stack-whisparr a, .stack-whisparr > span { --stack-title: #c7759d; --stack-bg: #300018; --stack-trim: #440021; }

/* Same L template; hue from the service. Not in STACK_PALETTE. */
.stack-prowlarr a, .stack-prowlarr > span { --stack-title: #c78675; --stack-bg: #301000; --stack-trim: #442000; }
.stack-usarr a, .stack-usarr > span { --stack-title: #75a8c7; --stack-bg: #001830; --stack-trim: #002844; }
.stack-bazarr a, .stack-bazarr > span { --stack-title: #c7c075; --stack-bg: #302800; --stack-trim: #443c00; }
.stack-jellyseerr a, .stack-jellyseerr > span { --stack-title: #a075c7; --stack-bg: #1a0030; --stack-trim: #2a0044; }
.stack-listseer a, .stack-listseer > span { --stack-title: #75c7c4; --stack-bg: #00302e; --stack-trim: #004442; }
.stack-tdarr a, .stack-tdarr > span { --stack-title: #75c7c7; --stack-bg: #002830; --stack-trim: #003844; }
.stack-qbittorrent a, .stack-qbittorrent > span { --stack-title: #75c775; --stack-bg: #003000; --stack-trim: #004400; }
.stack-docker a, .stack-docker > span { --stack-title: #759fc7; --stack-bg: #001a30; --stack-trim: #002a44; }
.stack-kavita a, .stack-kavita > span { --stack-title: #75c7b0; --stack-bg: #003028; --stack-trim: #004438; }
.stack-emby a, .stack-emby > span { --stack-title: #75c77a; --stack-bg: #003008; --stack-trim: #004410; }
.stack-jellyfin a, .stack-jellyfin > span { --stack-title: #75c0c7; --stack-bg: #002830; --stack-trim: #003c44; }
.stack-plex a, .stack-plex > span { --stack-title: #c7b875; --stack-bg: #302800; --stack-trim: #443c00; }
.stack-navidrome a, .stack-navidrome > span { --stack-title: #7590c7; --stack-bg: #001030; --stack-trim: #001c44; }

@media (max-width: 640px) {
  ul.stack-row {
    grid-template-columns: 1fr;
  }
}