/* ============================================================
   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);
}
.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);
}

/* 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: keep the centre for trending pills, but drop the news
     info (petrol/timestamp) to save space. Pills clip to what fits (JS). */
  .admin-info-group[data-section="news"].is-active {
    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;
  }
}