/**
 * SuperAdmin dashboard - genuinely new CSS only. Every shared primitive
 * (sidebar, topbar, KPI cards, tables, badges, tooltips, empty states)
 * comes from dashboard.css, loaded before this file - per CLAUDE.md's
 * own reuse-first instruction, this file exists only for the handful of
 * things that don't already have an equivalent: the Admin Mode footer
 * card, the topbar title/subtitle, the two range/compare selects, the
 * secondary KPI row's reduced prominence, and each not-yet-built tab's
 * honest placeholder text.
 */

/* ---- Sidebar: Admin Mode footer card + "View as Merchant" link ---- */

.admin-mode-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.admin-mode-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8B87A0; margin-bottom: 4px;
}
.admin-mode-role { font-size: 13px; font-weight: 700; color: #fff; }
.admin-mode-env { font-size: 12px; color: #9C99B0; margin-top: 2px; }

/* .sidebar-link's own base rule already covers layout/spacing/color
   regardless of tag (button or anchor) - this link only needs its
   default underline removed. */
.admin-view-as-merchant-link { text-decoration: none; }

/* ---- Topbar: title/subtitle (replaces the merchant dashboard's own
   greeting slot) + the two admin-only range/compare selects ---- */

.admin-topbar-title-wrap { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.admin-topbar-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.admin-topbar-subtitle { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

.admin-topbar-right { gap: 10px; }

.admin-range-select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
}

/* Global search + notifications, wired up 2026-08-23 - both real now
   (search: cross-account accounts/videos/Players; notifications: the
   existing Accounts Needing Attention queue, reused rather than a
   second parallel "problems" list - see admin.js's own header comment
   on renderAdminNotifDropdown()). */
.admin-topbar-search { width: 220px; }
/* .search-result-thumb-account has no equivalent in dashboard.css's own
   SEARCH_TYPE_ICONS color set (video/product/action/playlist/player) -
   this admin surface is the first caller to search Accounts as their
   own real result type. */
.search-result-thumb-account { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; }
.search-result-type-account { background: var(--accent-soft); color: var(--accent-dark); }

/* Found during the Milestone 4 responsive audit: a real, significant
   (363px) page-wide horizontal overflow at mobile widths, traced to
   .admin-topbar-right specifically (measured 557px wide at a 375px
   viewport - not the sidebar, which is correctly off-canvas via the
   merchant dashboard's own shared 900px hamburger-drawer CSS). The
   merchant dashboard's own topbar never has this problem because its
   own .topbar-right only ever holds a search box (hidden below 900px,
   see dashboard.css), a notif bell, and an account cluster - this
   page's own two real, functional range/compare <select>s are new
   content that dashboard.css's shared rule was never sized for. */
@media (max-width: 900px) {
  /* .admin-topbar-search used to just be hidden here, matching
     dashboard.css's own identical treatment of .topbar-search at the
     same breakpoint - correct while this box was still disabled/inert,
     but wrong once search became real (2026-08-23): hiding a genuinely
     useful control on mobile isn't the same tradeoff as hiding a dead
     one. It now wraps onto the same row as the two selects instead of
     disappearing - a fixed 220px width doesn't fit a narrow phone
     either, so it drops to auto/min-width:0 here like they do. */
  /* display: flex is required here, not just width/flex/min-width -
     dashboard.css's own .topbar-search rule at this exact breakpoint
     sets display: none (correct for the merchant dashboard, where this
     box is genuinely unused on mobile), and nothing in this rule's own
     property list would otherwise override it - confirmed live before
     fixing: this element measured a real 0x0 rect despite every other
     property here computing correctly. */
  .admin-topbar-search { display: flex; width: auto; flex: 1 1 160px; min-width: 0; }
  /* The input inside keeps its own intrinsic width otherwise, which ran
     12px past a 375px screen once the scope select joined this row
     (2026-09-29). */
  .admin-topbar-search input { min-width: 0; width: 100%; }
  /* .topbar itself (dashboard.css) has no flex-wrap of its own - without
     it, .admin-topbar-right's flex-basis:100% below claims a full-width
     "row" in principle but still gets squeezed onto the same visual line
     as the hamburger/title siblings, overflowing by exactly their
     combined width. Scoped here (not a dashboard.css change) since
     admin.css is never loaded by the merchant dashboard - no cross-page
     effect to worry about. */
  .topbar { flex-wrap: wrap; }
  /* The two real selects wrap onto their own row rather than being
     force-shrunk past legibility or clipped - .topbar-right's own
     flex-shrink:0 is deliberate on the merchant dashboard (protects a
     real merchant's account email from being crushed - see that file's
     own comment), so this scoped override only ever applies inside
     admin.html's own page (admin.css is never loaded by the merchant
     dashboard at all, so there's no cross-page leakage risk to guard
     against here). */
  /* flex-wrap alone doesn't force this - confirmed live before landing
     on this fix: the base .topbar-right rule (dashboard.css) sets
     flex-shrink:0, which lets .admin-topbar-right claim however much
     width its own children want as a flex ITEM of .topbar, regardless of
     flex-wrap on its own children - it never feels wrap pressure unless
     its OWN assigned width is actually constrained first. flex-basis:
     100% forces it onto its own full-width row beneath the title, at
     which point wrapping its children onto a second internal row (via
     flex-wrap above) has real width pressure to respond to. */
  .admin-topbar-right { flex-wrap: wrap; row-gap: 8px; flex-basis: 100%; flex-shrink: 1; }
  .admin-range-select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
}
@media (max-width: 480px) {
  /* The topbar's own 28px horizontal padding (dashboard.css) is fine at
     900px but eats a real, disproportionate share of a genuinely narrow
     phone's width once the two selects are also wrapping onto their own
     row - scoped tighter than the 900px breakpoint above since this is
     purely a spacing refinement, not the structural wrap/hide fix. */
  .topbar { padding: 12px 16px; }
}

/* ---- KPI row 2 (Platform Consumption) - "slightly reduce its visual
   prominence" per the approved spec, relative to the Account KPI row
   above it. Same .dash-kpi-card markup/shape, just scoped down a touch
   rather than a second, parallel card design. ---- */

.admin-kpi-grid-secondary { margin-top: 18px; }
.admin-kpi-grid-secondary .dash-kpi-card { padding: 16px 18px; }
.admin-kpi-grid-secondary .dash-kpi-icon { width: 30px; height: 30px; }
.admin-kpi-grid-secondary .dash-kpi-value { font-size: 20px; }

/* ---- Not-yet-built tabs (Accounts/Usage/Platform Analytics/System
   Health) - an honest "this is coming, not silently broken" state,
   never a fabricated table/chart. ---- */

.admin-coming-soon {
  margin: 60px auto;
  max-width: 420px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
}

/* ---- Milestone 2: Account Growth / Customer Activation / Accounts
   Needing Attention - a 3-column row, Growth widest (it holds a real
   chart), Activation and Attention narrower. Stacks to one column on
   narrower viewports, same breakpoint dash-two-col-row already uses
   elsewhere in this dashboard. ---- */

.admin-panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
/* Milestone 3 row shapes - same .admin-panel-row grid/gap/stacking
   base, different column split per row's own real content. */
.admin-panel-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.admin-panel-row-adoption { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr); }

@media (max-width: 1100px) {
  /* Found during the Milestone 4 responsive audit: this exact codebase's
     own repeatedly-documented "a same-specificity rule declared later in
     the file wins regardless of which one sits inside the narrower media
     query" gotcha (already hit for the Player Details modal, the Traffic
     tab's own notice banner, etc.) - .admin-panel-row-2/-adoption are
     declared textually AFTER this block, at equal (0,1,0) specificity to
     the plain .admin-panel-row selector, so their own multi-column values
     were silently winning at every viewport width, including mobile,
     regardless of this rule. Confirmed live via getComputedStyle before
     fixing, not assumed: at a real 375px viewport, .admin-panel-row-2
     measured "154.5px 154.5px" (still 2 real columns) and
     .admin-panel-row-adoption measured "105px 105px 80px" (still 3) -
     the latter's own fixed-width Player Type Adoption row labels
     (.admin-player-adoption-label, 110px) couldn't compress into an
     ~80-105px column, producing a real, visible 72px page overflow; the
     former's content happened to compress small enough that the
     identical underlying defect stayed invisible. All three selectors
     are listed explicitly here so none of them can win on source order. */
  .admin-panel-row,
  .admin-panel-row-2,
  .admin-panel-row-adoption {
    grid-template-columns: 1fr;
  }
}

.admin-panel-subtitle { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; }

/* -- Account Growth -- */

.admin-growth-summary {
  display: flex;
  gap: 22px;
  margin: 4px 0 10px;
}
.admin-growth-summary-item { display: flex; flex-direction: column; gap: 1px; }
.admin-growth-summary-value { font-size: 18px; font-weight: 700; color: var(--ink); }
.admin-growth-summary-label { font-size: 11.5px; color: var(--ink-faint); }

.admin-growth-chart-wrap { width: 100%; overflow-x: auto; }
.admin-growth-chart-wrap svg { width: 100%; height: auto; display: block; }

.admin-growth-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.admin-growth-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.admin-growth-legend-swatch { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* -- Customer Activation - real product-analytics rows, not a
   traditional funnel graphic: label + count, a horizontal progress
   bar, a percentage, a subtle downward arrow connecting each stage to
   the next. -- */

.admin-activation-stages { display: flex; flex-direction: column; }
.admin-activation-stage { padding: 10px 0; }
.admin-activation-stage-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.admin-activation-stage-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.admin-activation-stage-count { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.admin-activation-stage-count strong { color: var(--ink); font-weight: 700; }
.admin-activation-bar-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.admin-activation-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.admin-activation-arrow {
  display: flex; justify-content: center; color: var(--ink-faint); font-size: 13px; padding: 2px 0;
}
.admin-activation-arrow:last-child { display: none; }

/* -- Accounts Needing Attention - the same icon+message+dismiss row
   shape .notif-item already established for the Setup Issues bell
   panel, minus the dismiss button (this queue is a live founder-facing
   snapshot, not a per-merchant dismissible list) and rendered inline
   in a panel instead of a topbar dropdown. -- */

.admin-attention-list { display: flex; flex-direction: column; gap: 2px; }
.admin-attention-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
}
.admin-attention-row:last-child { border-bottom: none; }
.admin-attention-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.admin-attention-icon svg { width: 14px; height: 14px; }
.admin-attention-icon-error { background: #FDEDED; color: var(--danger); }
.admin-attention-icon-warning { background: #FFF4E5; color: #B75E00; }
.admin-attention-icon-inactive { background: #F1F0F5; color: var(--ink-faint); }
.admin-attention-text { min-width: 0; flex: 1; }
.admin-attention-account { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.admin-attention-message { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.admin-attention-severity-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
}
.admin-attention-severity-error { background: #FDEDED; color: var(--danger); }
.admin-attention-severity-warning { background: #FFF4E5; color: #B75E00; }
.admin-attention-severity-inactive { background: #F1F0F5; color: var(--ink-faint); }

/* ---- Milestone 3: Platform Health / Time to Value / Feature Adoption /
   Player Type Adoption / Content on HoverReel ---- */

/* -- Platform Health - a real SVG ring (stroke-dasharray progress
   trick), score + state, then the 4 dimensions each as a colored dot +
   label + real percentage, matching the mock's "Activation Good /
   Engagement Strong..." qualitative-label spirit without hiding the
   real number behind it. -- */

.admin-health-body { display: flex; gap: 22px; align-items: center; }
.admin-health-ring-wrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.admin-health-ring-wrap svg { width: 100%; height: 100%; }
.admin-health-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.admin-health-score { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.admin-health-score-max { font-size: 11px; color: var(--ink-faint); }
.admin-health-state {
  margin-top: 8px; text-align: center; font-size: 11.5px; font-weight: 700; text-transform: capitalize;
}
.admin-health-dimensions { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.admin-health-dim-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.admin-health-dim-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-health-dim-label { color: var(--ink); font-weight: 600; min-width: 90px; }
.admin-health-dim-value { color: var(--ink-soft); }
.admin-health-dim-unknown { color: var(--ink-faint); font-style: italic; }

/* -- Time to Value -- */

.admin-ttv-primary { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 14px; }
.admin-ttv-primary-value { font-size: 28px; font-weight: 800; color: var(--ink); }
.admin-ttv-primary-label { font-size: 11.5px; color: var(--ink-faint); }
.admin-ttv-milestones { display: flex; flex-direction: column; gap: 9px; }
.admin-ttv-milestone-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.admin-ttv-milestone-label { color: var(--ink-soft); }
.admin-ttv-milestone-value { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* -- Feature Adoption reuses .admin-activation-stage/-bar-track/-fill
   verbatim from Milestone 2 - same shape, different data, no new CSS
   needed for the rows themselves. -- */

/* -- Player Type Adoption - compact rows + bars, deliberately not a
   spreadsheet table per the approved spec. -- */

.admin-player-adoption-rows { display: flex; flex-direction: column; gap: 10px; }
.admin-player-adoption-row { display: flex; align-items: center; gap: 10px; }
.admin-player-adoption-label { font-size: 12.5px; font-weight: 600; color: var(--ink); width: 110px; flex-shrink: 0; }
.admin-player-adoption-bar-track { flex: 1; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; min-width: 0; }
.admin-player-adoption-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.admin-player-adoption-meta { font-size: 11.5px; color: var(--ink-faint); width: 108px; text-align: right; flex-shrink: 0; }

/* -- Content on HoverReel - deliberately visually secondary (smaller
   type, muted labels) per the approved spec. -- */

.admin-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-content-tile { display: flex; flex-direction: column; gap: 2px; }
.admin-content-tile-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.admin-content-tile-value { font-size: 18px; font-weight: 700; color: var(--ink); }
.admin-content-tile-sub { font-size: 11px; color: var(--ink-faint); }
/* Account detail modal's own warn state (failed videos, stalled videos,
   over-budget Bunny spend) - a real CSS class, not an inline style=""
   attribute, since this dashboard's CSP has no unsafe-inline for
   style-src. */
.admin-content-tile-value-warn { color: var(--danger); }

/* ============================================================
   Milestone 4 - Viewer Engagement, Platform Usage, Recent Platform
   Activity, Account Health table. The first four Overview-tab panels'
   own CSS is above this line, unchanged; everything below backs one of
   the previously-placeholder tab-panes (Accounts/Usage/Platform
   Analytics/System Health) instead.
   ============================================================ */

.admin-page-head { margin-bottom: 18px; }
.admin-page-head .dash-subhead { margin-bottom: 4px; }

/* -- Platform Usage - two real capacity bars -- */

.admin-usage-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.admin-usage-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.admin-usage-card-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.admin-usage-card-figures { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.admin-usage-card-value { font-size: 22px; font-weight: 800; color: var(--ink); }
.admin-usage-card-total { font-size: 13px; color: var(--ink-faint); }
.admin-usage-bar-track { height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.admin-usage-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.admin-usage-bar-fill.admin-usage-over { background: var(--danger); }
.admin-usage-card-pct { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }
.admin-usage-note { font-size: 12px; color: var(--ink-faint); max-width: 640px; }

/* -- Viewer Engagement - reuses the merchant Insights tab's own
   .quality-title/.quality-value "large value, small label" tile shape
   (dashboard.css) rather than a new component. -- */

.admin-engagement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.admin-engagement-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.admin-engagement-raw-row { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12.5px; color: var(--ink-soft); }
.admin-engagement-raw-row strong { color: var(--ink); }

/* -- Recent Platform Activity - reuses the .notif-item family verbatim
   (dashboard.css, the merchant notification-bell panel) plus one new
   piece this cross-account feed needs that a single-account panel never
   did: a small colored account-name badge per row. -- */

.admin-activity-list { display: flex; flex-direction: column; gap: 2px; }
.admin-activity-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.admin-activity-row:last-child { border-bottom: none; }
.admin-activity-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.admin-activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.admin-activity-account { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
.admin-activity-message { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.admin-activity-detail { font-size: 11.5px; color: var(--ink-faint); }
.admin-activity-time { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* -- Account Health table - the .data-table/.table-wrap shell already
   exists (dashboard.css); only a few small additions are genuinely new
   here. -- */

#adminAccountsTable th[data-sort-key] { cursor: pointer; user-select: none; }
#adminAccountsTable th[data-sort-key]:hover { color: var(--ink); }
#adminAccountsTable th.admin-sort-active { color: var(--accent); }
.admin-issue-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--danger); color: #fff; }
.admin-issue-badge-warning { background: #B75E00; }
.admin-cell-muted { color: var(--ink-faint); }
.admin-plan-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--accent-soft); color: var(--accent); }

/* A brief highlight flash for the Account Health table row a search
   result or a notification-bell item navigates to - the one real
   per-entity destination this admin surface has (see adminAnalytics.js's
   own comment on why a video/Player result also lands here, not on a
   detail view that doesn't exist). Removed again by JS after ~2s, not
   left as a permanent visual state. */
#adminAccountsTableBody tr.admin-row-highlight { background: var(--accent-soft); transition: background 0.3s ease; }

/* Account rows are real click targets now (added 2026-09-04) - opens
   the account detail modal. */
#adminAccountsTableBody tr[data-account-id] { cursor: pointer; }
#adminAccountsTableBody tr[data-account-id]:hover { background: var(--paper); }

/* -- Account detail modal -- */

.modal-admin-account-detail { width: min(760px, calc(100vw - 48px)); max-height: 88vh; }
.admin-account-detail-subline { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.admin-account-detail-stats { margin-bottom: 22px; grid-template-columns: repeat(4, 1fr); }
.admin-account-detail-content { grid-template-columns: repeat(3, 1fr); }
.admin-account-detail-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-account-detail-section .dash-subhead { margin-bottom: 10px; }
#adminAccountDetailBlocked .data-table,
#adminAccountDetailUsersTable { font-size: 12.5px; }

@media (max-width: 700px) {
  .admin-account-detail-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-account-detail-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .admin-usage-cards { grid-template-columns: 1fr; }
  .admin-engagement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Loading states (part of the Milestone 4 polish pass) - reuses
   dashboard.css's own .insights-skeleton shimmer verbatim (already the
   established loading-state primitive across this codebase's Insights
   tabs), just sized per this page's own panel shapes rather than a new
   loading mechanism. Each of the 4 lazy-loaded tabs previously showed a
   genuinely blank container for however long its fetch took - invisible
   on a fast local network, but a real gap on a slower real connection. -- */

.admin-skeleton-card { height: 84px; border-radius: var(--radius); }
.admin-skeleton-tile { height: 64px; border-radius: var(--radius); }
.admin-skeleton-row { height: 46px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.admin-skeleton-td { height: 14px; width: 70%; }
.admin-content-tile-sub { font-size: 11px; color: var(--ink-soft); }

/* Shown instead of the dashboard when this SuperAdmin session hasn't
   used two-factor (2026-09-28) - see showTwoFactorGate() in admin.js. */
.admin-2fa-gate { max-width: 440px; margin: 15vh auto 0; padding: 28px; }
.admin-2fa-gate h1 { margin: 0 0 10px; font-size: 20px; }
.admin-2fa-gate p { margin: 0 0 20px; line-height: 1.5; }

/* ---- Beta Activation (2026-09-29) ---- */
.admin-activation-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.admin-toggle-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.admin-toggle-label input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.admin-activation-count { font-size: 12.5px; color: var(--ink-faint); }
.admin-journey-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.admin-journey-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.admin-journey-chip b { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-journey-chip span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.admin-journey-chip:hover { border-color: var(--accent-soft-border); }
.admin-journey-chip.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin-journey-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-journey-table tbody tr { cursor: pointer; }
.admin-journey-dots { display: inline-flex; gap: 5px; align-items: center; }
.admin-journey-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted-bg); border: 1.5px solid var(--line); }
.admin-journey-dot.is-reached { background: var(--ok); border-color: var(--ok); }
.admin-journey-dot.is-skipped { background: var(--card); border: 1.5px dashed var(--ok); }
.admin-journey-timeline { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.admin-journey-timeline li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; position: relative; }
.admin-journey-timeline li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--muted-bg); border: 1.5px solid var(--line); }
.admin-journey-timeline li.is-reached::before { background: var(--ok); border-color: var(--ok); }
.admin-journey-timeline li.is-skipped::before { background: var(--card); border: 1.5px dashed var(--ok); }
.admin-journey-timeline li.is-next { border-color: var(--warn); background: var(--warn-bg); }
/* The dashboard's label rule stacks a checkbox over its text - keep these inline. */
label.admin-toggle-label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--ink); }
.admin-journey-caption { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 0 0 8px; }
@media (min-width: 1100px) { .admin-journey-stages { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ---- Overview, redesigned 2026-09-29 (mockup "A") ---- */
.admin-headline-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.panel.admin-headline { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin: 0; }
.admin-headline-label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.admin-headline-label .info-icon { flex: 0 0 auto; margin: 0; }
.admin-headline-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.admin-headline-value b { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.admin-headline-of { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.admin-delta { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-delta.is-up { color: var(--ok); }
.admin-delta.is-down { color: var(--bad); }
.admin-headline-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; height: 48px; }
.admin-headline-bar { display: block; min-height: 2px; background: var(--accent-soft-border); border-radius: 3px 3px 0 0; }
.admin-headline-bar.is-now { background: var(--accent); }
.admin-headline-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); }
.admin-panel-row.admin-week-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.admin-count-pill { display: inline-flex; min-width: 20px; justify-content: center; padding: 1px 7px; margin-left: 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--muted-bg); color: var(--ink-soft); vertical-align: 2px; }
.admin-count-pill[hidden] { display: none; }
.admin-week-list { display: flex; flex-direction: column; }
.admin-week-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; }
.admin-week-list > .admin-week-row:first-child { border-top: 0; }
button.admin-week-row { cursor: pointer; border-radius: 0; }
button.admin-week-row:hover .admin-week-main b { color: var(--accent); }
button.admin-week-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-week-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-week-main b { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-week-main span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.admin-week-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.admin-week-side small { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.admin-tag-problem { background: var(--bad-bg); color: var(--bad); }
.admin-tag-stuck { background: var(--warn-bg); color: var(--warn); }
.admin-tag-quiet { background: var(--muted-bg); color: var(--ink-soft); }
.admin-tag-live { background: var(--ok-bg); color: var(--ok); }
.admin-quiet-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.admin-quiet-strip div { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.admin-quiet-strip b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-quiet-strip span { font-size: 11.5px; color: var(--ink-soft); }
.admin-more-link { margin-top: 12px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.admin-more-link:hover { text-decoration: underline; }
.admin-page-head-spaced { margin-top: 28px; }
/* Shown only on Platform Analytics - the hidden attribute needs saying
   out loud, since these selects set their own flex at small widths. */
.admin-range-select[hidden] { display: none; }

/* ---- Account page, 2026-09-29 (mockup "B") ---- */
.admin-back-link { display: inline-flex; align-self: flex-start; margin: 0 0 10px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.admin-back-link:hover { color: var(--accent); }
.admin-account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-account-name { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.admin-account-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.admin-account-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.admin-account-main, .admin-account-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.admin-account-main > .panel, .admin-account-side > .panel, .admin-account-pair > .panel { margin: 0; }
.admin-account-side { position: sticky; top: 16px; }
.admin-account-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.admin-account-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-account-svg { display: block; width: 100%; height: auto; overflow: visible; }
.admin-chart-grid { stroke: var(--line); stroke-width: 1; }
.admin-chart-label { fill: var(--ink-faint); font-size: 11px; }
.admin-chart-views { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.admin-chart-clicks { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linejoin: round; }
.admin-chart-dot-views { fill: var(--accent); }
.admin-chart-dot-clicks { fill: var(--ok); }
.admin-chart-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.admin-chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.admin-chart-key-views { background: var(--accent); }
.admin-chart-key-clicks { background: var(--ok); }
.admin-compact-table td, .admin-compact-table th { padding: 8px 10px; }
.admin-compact-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-cell-sub { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 400; }
.admin-page-url { font-weight: 500; }
.admin-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13px; }
.admin-facts dt { color: var(--ink-soft); }
.admin-facts dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.admin-facts dd.is-warn { color: var(--warn); }
.admin-note-form { display: flex; flex-direction: column; gap: 8px; }
.admin-note-form textarea { width: 100%; min-height: 72px; resize: vertical; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); }
.admin-note-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin-note-form .btn-primary { align-self: flex-end; }
.admin-note-error { margin: 0; font-size: 12.5px; color: var(--bad); }
.admin-notes { display: flex; flex-direction: column; margin-top: 12px; }
.admin-note { padding: 10px 0; border-top: 1px solid var(--line); }
.admin-note p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-note-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-faint); }
.admin-note-delete { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--ink-faint); cursor: pointer; }
.admin-note-delete:hover, .admin-note-delete[data-armed="1"] { color: var(--bad); }
.admin-notes-empty { margin: 0; padding-top: 10px; font-size: 12.5px; }
.admin-account-gs { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .admin-headline-grid, .admin-account-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-quiet-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-account-cols { grid-template-columns: minmax(0, 1fr); }
  .admin-account-side { position: static; }
}
@media (max-width: 700px) {
  .admin-panel-row.admin-week-panels, .admin-account-pair { grid-template-columns: minmax(0, 1fr); }
  .admin-quiet-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Video processing at Bunny (System Health, 2026-10-06). */
.admin-processing { margin-bottom: 28px; }
.admin-processing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-processing-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-processing-now { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.admin-processing-now.is-ok { background: var(--ok-bg); color: var(--ok); }
.admin-processing-now.is-slow { background: var(--bad-bg); color: var(--bad); }
.admin-processing-now span { overflow-wrap: anywhere; }
.admin-processing-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-processing-actions .btn-small { margin-top: 0; }
.admin-processing-copied { font-size: 12px; color: var(--ink-soft); }
.admin-processing-subhead { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
.admin-processing-subhead span { font-weight: 500; color: var(--ink-soft); }
.admin-processing-table tr.is-slow td:last-child { color: var(--bad); font-weight: 700; }
.admin-processing-table .admin-cell-sub { overflow-wrap: anywhere; }
.admin-processing-estimates { margin-top: 20px; }
.admin-processing-estimates summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.admin-processing-estimates .admin-panel-subtitle { margin: 8px 0 10px; }

/* Users and sign-in help on the account page (2026-10-06). */
.admin-login-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px; border-top: 1px solid var(--line); }
#adminAccountDetailUsersBody > .admin-login-row:first-child { border-top: 0; }
.admin-login-row .admin-week-main b { overflow-wrap: anywhere; }
.admin-login-locked { color: var(--bad); }
.admin-login-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-login-actions .btn-small { margin-top: 0; }
.admin-login-note { font-size: 12px; margin: 0; }
.admin-login-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.admin-login-confirm[hidden] { display: none; }
.admin-login-confirm-text { margin: 0; font-size: 12.5px; line-height: 1.45; }
.admin-login-confirm-input, .admin-login-email-input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.admin-login-result { font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-login-result:empty { display: none; }
.admin-login-result.is-ok { color: var(--ok); }
.admin-login-result.is-error { color: var(--bad); }
.admin-login-result .btn-small { margin-top: 0; }
.admin-login-password { font-size: 14px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); user-select: all; }

/* Rename the business from the account page (2026-10-06). */
.admin-account-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.admin-rename-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.admin-rename-btn:hover { text-decoration: underline; }
.admin-rename-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; }
.admin-rename-form[hidden] { display: none; }
.admin-rename-form input { flex: 1 1 260px; min-width: 0; max-width: 420px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.admin-rename-form .btn-small { margin-top: 0; }
.admin-rename-form .admin-login-result { flex-basis: 100%; margin: 0; }

/* New account (Accounts tab) and bandwidth bonus (account page), 2026-10-06. */
.admin-page-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-page-head-row .btn-small { margin-top: 0; }
.admin-new-account { margin-bottom: 18px; }
.admin-new-account-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.admin-new-account-form .admin-processing-subhead { margin: 0; }
.admin-new-account-form .admin-panel-subtitle { margin: 0; }
.admin-new-account-form label:not(.admin-toggle-label) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.admin-new-account-form input[type="text"], .admin-new-account-form input[type="email"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; font-weight: 400; }
.admin-new-account-done { display: flex; flex-direction: column; gap: 10px; }
.admin-new-account-link { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.admin-bandwidth-budget { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.admin-bandwidth-budget:empty { display: none; }
.admin-bandwidth-status { margin: 0; font-size: 13px; color: var(--ok); }
.admin-bandwidth-status.is-over { color: var(--bad); }
/* flex-direction: row - the base form rule in dashboard.css is a column. */
.admin-bandwidth-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
.admin-bandwidth-form .btn-small { margin-top: 0; }
.admin-bandwidth-set { display: inline-flex; flex-direction: row; align-items: center; gap: 2px; font-size: 13px; margin: 0 0 0 6px; }
.admin-bandwidth-set input { width: 64px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; }

/* Weekly summary email panel on the account page (2026-10-06). */
.admin-digest { display: flex; flex-direction: column; gap: 10px; }
.admin-digest .admin-facts dd { overflow-wrap: anywhere; margin: 0; }
.admin-digest-week { margin: 0; font-size: 13px; line-height: 1.45; }
.admin-digest a.btn-small { margin-top: 0; text-decoration: none; display: inline-flex; align-items: center; }