/* ============================================================
   ADMIN BAR — secondary bar under the topbar (admin only)
   ------------------------------------------------------------
   The admin bar attaches directly beneath .topbar. Both bars now
   live inside .topbar-stack, which is the sticky element and
   slides away as one unit on scroll-down (see js/adminbar.js).
   Right now it houses per-section admin actions on the right; the
   left region is intentionally reserved for future info.
   ============================================================ */

/* The stack is the new sticky / sliding unit (was .topbar itself). */
.topbar-stack {
  position: sticky;
  top: 0;
  z-index: 90;
  transition: transform 240ms var(--mn-ease);
  will-change: transform;
  /* Frosted glass: heavily blur whatever scrolls behind the stack, and
     saturate it so the page's colours still bleed through the thin tint
     the two bars lay over the top (see their translucent backgrounds). */
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}
.topbar-stack.is-hidden {
  transform: translateY(-110%);
}

/* .topbar no longer sticks on its own — it just anchors its
   absolutely-positioned left/right zones. */
.topbar {
  position: relative;
  top: auto;
}

/* ---------- Secondary admin bar ---------- */
.admin-bar {
  border-bottom: 1px solid var(--panel-border);
  /* Thin translucent tint — the stack's backdrop blur does the heavy
     lifting, so keep this light to let colour bleed through. */
  background: color-mix(in srgb, var(--topbar-bg) 55%, transparent);
}

/* Same lighter tint on the topbar itself so both bars read as one sheet
   of frosted glass. Left untouched in fullscreen-player mode, which has
   its own topbar treatment. */
body:not(.gp-fs-open) .topbar-stack .topbar {
  background: color-mix(in srgb, var(--topbar-bg) 55%, transparent);
}

/* Fullscreen player: the admin bar sits directly above the player panel, so it
   takes the SAME treatment the topbar gets in layout.css — an opaque sheet
   keyed to the player's own background. The default 55% page tint would let the
   player's dark backdrop bleed through and read as a stray colour, which is
   exactly what it did before this rule existed. */
body.gp-fs-open .admin-bar {
  background: color-mix(in srgb, var(--gp-fs-bg) 88%, white 12%);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.admin-bar[hidden] {
  display: none;
}

.admin-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px; /* match the topbar's height so the two bars line up */
  padding: 0.5rem 1rem;
}

/* Three zones: heading (left) | info (centre) | actions (right).
   Left and right share an equal flex basis so the centre stays visually
   centred relative to the viewport, mirroring the topnav. */
.admin-bar-left,
.admin-bar-actions {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-bar-left {
  justify-content: flex-start;
  /* Nudge right to line up with the Mello logo, which is inset by the
     brand button's own padding-left (0.65rem) above. */
  padding-left: 0.7rem;
}
.admin-bar-actions {
  justify-content: flex-end;
}
.admin-bar-center {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

/* Per-view heading — only the active section's shows. */
.admin-heading {
  display: none;
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-heading.is-active {
  display: inline-block;
}

/* Centre info groups — only the active section's shows (visible to all). */
.admin-info-group {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.admin-info-group.is-active {
  display: flex;
}

/* Trending topic pills (social view). Non-interactive for now. */
.trend-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  opacity: 0.7;
}
/* No trends → hide the indicator too. */
.admin-info-group[data-section="live"]:has(.trend-pills:empty) .trend-label {
  display: none;
}
.trend-pills {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
}
.trend-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* News centre info: fuel price + refresh reuse the trending-pill look.
   Scoped under the group so these beat news.css (which loads later). */
.admin-info-group[data-section="news"] .fuel-price-badge {
  margin: 0;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1; /* match the refresh pill (news.css sets 1.4) */
  opacity: 0.9;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* Zero the group gap so the fuel price sits dead-centre when the refresh
   button is collapsed; the button carries its own (animated) left margin. */
.admin-info-group[data-section="news"] {
  gap: 0;
}
.admin-info-group[data-section="news"] .news-update-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  background: color-mix(in srgb, currentColor 12%, transparent);
  /* Collapsed & inert until an update is available. It stays in the flow
     (not display:none) so it can slide/expand in — but max-width:0 +
     pointer-events:none mean it takes no space and can't be hovered. */
  max-width: 0;
  margin-left: 0;
  padding: 0.22rem 0;
  border: 1px solid transparent;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width 280ms ease, margin-left 280ms ease, padding 280ms ease,
    opacity 200ms ease, border-color 200ms ease;
}
.admin-info-group[data-section="news"] .news-update-btn.is-visible {
  max-width: 12rem;
  margin-left: 0.5rem;
  padding: 0.22rem 0.62rem;
  opacity: 0.9;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  pointer-events: auto;
}
.admin-info-group[data-section="news"] .fuel-price-badge:hover,
.admin-info-group[data-section="news"] .fuel-price-badge:focus-within,
/* Only a VISIBLE (expanded) update button reacts to hover/focus — otherwise a
   collapsed (max-width:0) button that keeps focus after a tap would be forced
   back to opacity:1 and render its 1–2px sliver as a lingering vertical line. */
.admin-info-group[data-section="news"] .news-update-btn.is-visible:hover,
.admin-info-group[data-section="news"] .news-update-btn.is-visible:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  outline: none;
}

/* Timestamp hidden for now — kept in the DOM so news.js still updates it. */
#newsLastUpdated {
  display: none;
}

/* Per-section action groups — only the active section's group shows, and
   only for admins (body.is-admin is toggled in main.js on auth). */
.admin-bar .admin-group {
  display: none;
}
body.is-admin .admin-bar .admin-group.is-active {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The home header only held the (now-relocated) action buttons and a
   commented-out title, so it would otherwise leave a phantom gap.
   Remove this rule if the home title is re-enabled. */
.mn-home .mn-home-header {
  display: none;
}

/* The home group reuses .mn-home-actions (so links.js keeps
   injecting the refresh button into it); neutralise its auto
   margin / width so it sits cleanly inside the cluster. */
.admin-bar .mn-home-actions {
  margin-left: 0;
  max-width: none;
}

/* Mobile: keep the buttons as a horizontal scroll row that slides
   away with the stack, rather than folding into a menu. The left
   info region yields its space to the buttons for now. */
@media (max-width: 640px) {
  .admin-bar-inner {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }
  /* Small screens: trending pills clip to what fits (JS). On news, keep the
     fuel price visible (room to spare) but leave the refresh pill off mobile. */
  .admin-info-group[data-section="news"] .news-update-btn {
    display: none;
  }
  .admin-bar-center {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .admin-heading {
    font-size: 1.15rem;
  }
  .admin-bar-left {
    flex: 0 1 auto;
    padding-left: 0.92rem;
  }
  .admin-bar-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-bar-actions::-webkit-scrollbar {
    display: none;
  }
}