/* The admin console's own styles (public/admin.html). Loaded AFTER app.css,
     which carries the brand base both pages share; nothing here is loaded by
     the remote. Table/stat/pill styles stay scoped to #viewAdmin so they cannot
     restyle the shared primitives they sit beside. */
  .adm-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .adm-bar .grow { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; }
  .adm-onboard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
  .adm-onboard label { font-size: 13px; font-weight: 600; min-width: 170px; }
  .adm-onboard input { background: var(--card2); border: 1px solid var(--line); border-radius: 9px;
    padding: 7px 10px; color: var(--text); font-family: inherit; font-size: 13px; }
  #admBudget { width: 90px; font-variant-numeric: tabular-nums; }
  #admInvite { flex: 1; min-width: 200px; max-width: 320px; }
  .adm-note { font-size: 12px; margin: 4px 0 10px; }
  #viewAdmin .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
  #viewAdmin .stat { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
  #viewAdmin .stat .n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
  #viewAdmin .stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
  #viewAdmin table { width: 100%; border-collapse: collapse; font-size: 13px; }
  #viewAdmin th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
  #viewAdmin td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
  #viewAdmin tr:last-child td { border-bottom: 0; }
  #viewAdmin .empty { padding: 6px 10px; }
  /* break-word, not anywhere: anywhere shrinks the cell's min-content width to
     one character, so table auto-layout crushes the ID column into a vertical
     letter-stack when Name/Email hold long unbreakable strings (Apple
     private-relay emails). The pane scrolls horizontally instead. */
  #viewAdmin .mono { overflow-wrap: break-word; }
  /* Users table identity stack: name headline, email + id as muted sub-lines. */
  #viewAdmin .au-name { font-weight: 600; }
  #viewAdmin .au-sub { color: var(--muted); margin-top: 2px; }
  #viewAdmin .au-id { font-size: 11px; }
  #viewAdmin .pill.active, #viewAdmin .pill.on { color: var(--ok); border-color: var(--ok); background: transparent; }
  #viewAdmin .pill.used, #viewAdmin .pill.off { color: var(--muted); border-color: var(--line); background: var(--card2); }
  #viewAdmin .pill.expired { color: var(--err); border-color: var(--err); background: transparent; }

  /* ---- admin CONSOLE shell (2026-09-14 redesign) ----
     The console takes the whole viewport, with its own 224px rail and a 56px
     workspace header; the sign-in card behind it is app.css's .wrap/.login. */
  .adm-shell { position: fixed; inset: 0; z-index: 40; display: flex; background: var(--bg); }
  .adm-rail { width: 224px; flex: none; height: 100%; overflow-y: auto;
    background: var(--rail); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 18px 12px 14px; }
  .adm-rail-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 18px; }
  .adm-rail-logo { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
  .adm-rail-logo .dot { color: var(--accent); }
  .adm-rail-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; margin-top: 2px; }
  .adm-nav { display: flex; flex-direction: column; gap: 2px; }
  .adm-nav-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 8px 12px; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: 13px;
    color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer; }
  .adm-nav-btn:hover { color: var(--text); background: var(--card2); }
  .adm-nav-btn.on { color: var(--text); background: var(--card2); }
  .adm-nav-btn.on svg { color: var(--accent); }
  .adm-nav-btn svg { width: 16px; height: 16px; flex: none; }
  .adm-nav-cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
  .adm-nav-cnt.hot { color: #fff; background: var(--accent); border-radius: 999px; padding: 0 7px; line-height: 17px; }
  .adm-nav-cnt:empty { display: none; }
  .adm-nav-sep { height: 1px; background: var(--line); margin: 8px 8px; flex: none; }
  .adm-rail-spacer { flex: 1; }
  .adm-rail-status { padding: 10px 8px 0; margin-top: 10px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; color: var(--faint); }
  .adm-rail-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
  .adm-rail-status-line { display: flex; align-items: center; gap: 8px; }
  .adm-rail-back { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
    font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    background: transparent; border: 0; padding: 8px; margin-top: 6px; cursor: pointer; text-decoration: none; }
  .adm-rail-back + .adm-rail-back { margin-top: 0; }
  .adm-rail-back:hover { color: var(--accent); }
  .adm-rail-back svg { width: 14px; height: 14px; flex: none; }

  .adm-workspace { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
  .adm-header { height: 56px; flex: none; display: flex; align-items: center; gap: 14px;
    padding: 0 24px; border-bottom: 1px solid var(--line); }
  .adm-header-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
  .adm-live { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); white-space: nowrap; }
  .adm-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
  .adm-header-spacer { flex: 1; }
  .adm-header-divider { width: 1px; height: 22px; background: var(--line); flex: none; }
  .adm-header-who { display: flex; align-items: center; gap: 8px; }
  .adm-header-who .avatar { width: 28px; height: 28px; font-size: 12px; }
  .adm-header-name { font-size: 12px; font-weight: 600; color: var(--strong); white-space: nowrap; }

  .adm-view { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px;
    display: flex; flex-direction: column; gap: 16px; }
  /* Section cards inside the console reuse .scard's look but sit in a flex
     column with a deliberate gap, so kill its own bottom margin here. */
  .adm-view .scard { margin-bottom: 0; }

  /* ---- Overview section ---- */
  .adm-ov-attn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .adm-ov-attn-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
  .adm-ov-attn-card.link { cursor: pointer; }
  .adm-ov-attn-card.link:hover { border-color: var(--line2); }
  .adm-ov-attn-ic { width: 34px; height: 34px; border-radius: 8px; flex: none;
    display: flex; align-items: center; justify-content: center; }
  .adm-ov-attn-ic svg { width: 17px; height: 17px; }
  .adm-ov-attn-body { flex: 1; min-width: 0; }
  .adm-ov-attn-t { font-weight: 700; font-size: 13px; color: var(--text); }
  .adm-ov-attn-s { color: var(--muted); font-size: 12px; margin-top: 1px; }

  .adm-ov-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .adm-ov-kpi { padding: 14px 16px; }
  .adm-ov-kpi .n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
    font-variant-numeric: tabular-nums; color: var(--text); }
  .adm-ov-kpi .l { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
  .adm-ov-kpi .d { font-size: 11px; color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }

  .adm-ov-row2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: stretch; }
  .adm-ov-chart, .adm-ov-swarm { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
  .adm-ov-chart-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .adm-ov-chart-sub { font-size: 12px; color: var(--faint); }
  .adm-ov-chart-sum { display: flex; gap: 14px; font-size: 11.5px; color: var(--faint); margin-left: auto; white-space: nowrap; }
  .adm-ov-chart-sum b { color: var(--strong); font-weight: 700; }
  .adm-ov-chart-body { display: flex; gap: 10px; flex: 1; }
  .adm-ov-bars-wrap { position: relative; flex: 1; height: 150px; }
  .adm-ov-gridline { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
  .adm-ov-gridline.base { background: var(--line2); }
  .adm-ov-bars { display: flex; align-items: flex-end; gap: 3px; position: absolute; inset: 0; }
  .adm-ov-bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-width: 3px; }
  .adm-ov-bar-label { position: absolute; transform: translateX(-50%); font-size: 11px; font-weight: 700;
    color: var(--strong); background: var(--card); padding: 0 4px; margin-top: -8px; white-space: nowrap; }
  .adm-ov-yaxis { width: 32px; height: 150px; flex: none; position: relative;
    font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .adm-ov-yaxis span { position: absolute; }
  .adm-ov-xaxis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); padding-right: 42px; }
  .adm-ov-chart-empty, .adm-ov-swarm-empty { padding: 24px 4px; color: var(--muted); font-size: 12.5px; }

  .adm-ov-swarm-head { display: flex; align-items: baseline; gap: 10px; }
  .adm-ov-swarm-bar { display: flex; gap: 2px; height: 22px; border-radius: 4px; overflow: hidden; }
  .adm-ov-swarm-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .adm-ov-swarm-legend .lbl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
  .adm-ov-swarm-legend .lbl i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
  .adm-ov-swarm-legend .pct { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; color: var(--text); }
  .adm-ov-swarm-legend .sub { font-size: 11px; color: var(--faint); }
  .adm-ov-swarm-foot { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
    border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
  .adm-ov-swarm-foot b { color: var(--text); font-weight: 700; }

  .adm-ov-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .adm-ov-table-card { padding: 14px 8px 6px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-x: auto; }
  .adm-ov-table-head { display: flex; align-items: baseline; gap: 10px; padding: 0 10px; flex-wrap: wrap; }
  .adm-ov-table-head .sub { font-size: 12px; color: var(--faint); }
  .adm-ov-table-head a { font-size: 12px; font-weight: 600; margin-left: auto; }

  /* ---- Users section: roster + a fixed-width onboarding side panel ---- */
  .adm-users-wrap { display: flex; gap: 16px; flex: 1; min-height: 0; }
  .adm-users-roster { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .adm-users-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
  .adm-users-filters .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: none; }
  .adm-users-sorted { font-size: 12px; color: var(--faint); margin-left: auto; white-space: nowrap; }
  .adm-users-table-wrap { flex: 1; overflow: auto; padding: 10px 0 0; }
  .adm-users-side { width: 320px; flex: none; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
  .adm-users-side .scard { display: flex; flex-direction: column; }
  .adm-inv-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
  .adm-inv-main { flex: 1; min-width: 0; }
  #viewAdmin .adm-inv-email { font-size: 13px; overflow-wrap: anywhere; }
  .adm-inv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
  .adm-inv-row button { flex: none; }
  #viewAdmin tr.adm-waiting { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .adm-relay-meter { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .adm-relay-meter .bar { width: 70px; height: 6px; border-radius: 3px; background: var(--card2);
    border: 1px solid var(--line); overflow: hidden; flex: none; }
  .adm-relay-meter .bar > div { height: 100%; background: var(--accent); }
  .adm-relay-meter .bar > div.over { background: var(--err); }

  #admRooms, #admLinks, #admUsers, #admBugs, #admConnPairs, #admConnRecent { overflow-x: auto; }
  /* The adoption tables run 8–14 columns (the retention matrix one per week). */
  #admAdoptWeeks, #admAdoptCohorts, #admAdoptMonths, #admAdoptDays, #admAdoptDevices, #admAdoptSignins { overflow-x: auto; }
  /* A version and an OS name are atomic — "1.0.0-beta.54" broken across two
     lines at the hyphen reads as two different builds, which is the one thing
     this column exists to tell you. The section already scrolls sideways. */
  #admBugs .bug-build { white-space: nowrap; }

  /* Admin console: below 900px the 224px rail collapses to a horizontal
     scrolling strip on top — the same pattern as the remote's .rail, at its own
     breakpoint because the console is wider chrome (KPI/table grids) than the
     dashboard's own rail+list layout. */
  @media (max-width: 900px) {
    .adm-shell { flex-direction: column; }
    .adm-rail { width: 100%; height: auto; flex-direction: row; align-items: center;
      overflow-x: auto; overflow-y: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
    .adm-rail-brand { padding: 0 10px 0 0; flex: none; }
    .adm-nav { flex-direction: row; }
    .adm-nav-btn { flex: none; white-space: nowrap; }
    .adm-nav-sep { display: none; }
    .adm-rail-spacer, .adm-rail-status { display: none; }
    .adm-rail-back { flex: none; width: auto; white-space: nowrap; margin-top: 0; }
    .adm-workspace { height: auto; flex: 1; min-height: 0; }
    .adm-ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adm-ov-row2, .adm-ov-row3 { grid-template-columns: 1fr; }
    .adm-users-wrap { flex-direction: column; }
    .adm-users-side { width: 100%; }
  }
  @media (max-width: 640px) {
    .adm-ov-attn, .adm-ov-kpis { grid-template-columns: 1fr; }
    .adm-header { padding: 0 14px; gap: 10px; }
    .adm-header-title { display: none; }
    .adm-view { padding: 14px 14px 18px; }
  }