/* ══════════════════════════════════════════════════════════════════════════
   admin.css — the operator console (/admin, /support-console) re-skinned onto
   the neuralduct hub system.

   Loaded AFTER plenum.css + hub-page.css (which supply the shell: topbar, the
   .page grid, .side sub-nav, .card / .btn / .in primitives, and the warm-grey /
   ice-blue / Sora token set). This sheet re-skins the console-specific
   components console.js still renders by class name — stat bands, analytics
   charts, data tables, filters, pagination, modals, the settings pane, setup
   boxes, badges — in those same tokens. It REPLACES dashboard.css +
   tailwind.css + the old admin-console.css (re-skin, never port).

   Every JS hook is preserved: the top nav is still .admin-tabs / .admin-tab
   with data-atab, so showAdminTab / mobilizeAdminTabs drive it untouched; we
   just lay the row out as a vertical hub side-nav on desktop and fall back to
   console.js's <select> on mobile. Follows light/dark via the same data-theme
   the pre-paint script sets (plenum.css owns both palettes).
   ══════════════════════════════════════════════════════════════════════════ */

/* On-brand semantic status colours — the console leans on green/amber/red/blue
   status pills. plenum maps "positive" onto cold-blue, so we name a small,
   theme-aware set here rather than resurrect the old Tailwind purples/indigos. */
:root{
  --a-ok:#15a34a; --a-ok-wash:rgba(21,163,74,.10); --a-ok-edge:rgba(21,163,74,.24);
  --a-warn:#b45309; --a-warn-wash:rgba(180,83,9,.10); --a-warn-edge:rgba(180,83,9,.24);
  --a-bad:var(--hot); --a-bad-wash:color-mix(in srgb,var(--hot) 10%,transparent); --a-bad-edge:color-mix(in srgb,var(--hot) 26%,transparent);
  --a-info:var(--accent); --a-info-wash:var(--accent-soft); --a-info-edge:var(--accent-ring);
  --a-neutral-wash:var(--panel-2);
}
:root[data-theme="dark"]{
  --a-ok:#3ddc84; --a-ok-wash:rgba(61,220,132,.12); --a-ok-edge:rgba(61,220,132,.28);
  --a-warn:#f5a623; --a-warn-wash:rgba(245,166,35,.12); --a-warn-edge:rgba(245,166,35,.28);
}

/* Compatibility aliases — console.js (a verbatim port of the old dashboard.js
   admin panel) and the inline styles in admin.html / support-console.html still
   reference the pre-hub token names (--text-muted, --border, --danger, …). Map
   them onto the plenum palette so every generated element brands correctly and
   follows light/dark, without editing ~200 inline style strings. (This replaces
   the ad-hoc :root override the old admin-console.css / inline <style> did.) */
:root{
  --text:var(--ink); --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --bg:var(--paper); --bg-secondary:var(--panel-2);
  --card:var(--panel); --card2:var(--panel-2); --surface:var(--panel-2); --elev-3:var(--panel);
  --border:var(--hair); --border-strong:var(--hair-2);
  --accent-hover:var(--accent-2); --accent-blue:var(--accent); --accent-fg:#fff; --accent-edge:var(--accent-ring);
  --danger:var(--neg); --radius:var(--r);
  --card-shadow:var(--sh-1); --card-shadow-hover:var(--sh-2);
}

/* ── page shell tweaks ───────────────────────────────────────────────────────
   The console is wider than Settings (dense tables want room), and its panes
   are console.js-toggled <div>s, not hub-page .pane sections. */
.page{max-width:1280px}
.panes{min-width:0}
.admin-tab-pane{min-width:0}

/* ── left sub-nav: reuse the .side column, style .admin-tabs as a nav list ──── */
#adminNav{gap:12px}
.side .admin-tabs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:none;flex-wrap:nowrap}
.side .admin-tab{
  display:flex;align-items:center;gap:11px;width:100%;height:38px;padding:0 12px;margin:0;
  border-radius:10px;border:1px solid transparent;background:none;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:500;color:var(--ink-2);text-align:left;
  transition:background var(--dur) var(--out),color var(--dur) var(--out),border-color var(--dur) var(--out)}
.side .admin-tab i{font-size:16px;color:var(--ink-3);transition:color var(--dur) var(--out)}
.side .admin-tab:hover{background:var(--panel-2);color:var(--ink);border-bottom-color:transparent}
.side .admin-tab:hover i{color:var(--ink-2)}
.side .admin-tab.active{background:var(--accent-wash);color:var(--accent-2);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--panel));background-image:none}
.side .admin-tab.active i{color:var(--accent-2)}
.side .admin-tab .notif-badge{margin-left:auto}

/* console.js builds this <select> from .admin-tabs for narrow screens */
.admin-tabs-select{display:none;width:100%;height:38px;padding:0 34px 0 12px;border-radius:9px;
  border:1px solid var(--hair-2);background:var(--panel);color:var(--ink);font-family:inherit;
  font-size:var(--t-sm);font-weight:600;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}

/* ── section sub-headers (inside panes) ──────────────────────────────────────
   (The old gradient .section-title / .section-subtitle now live in .page-head;
   these keep support-console's flat header working too.) */
.section-title{font-size:var(--t-2xl);font-weight:600;letter-spacing:var(--track-tight);line-height:1.1;margin-bottom:6px}
.section-subtitle{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:22px}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:var(--sp-4,16px)}
.section-header h3{font-size:var(--t-md);font-weight:600;letter-spacing:var(--track-snug);display:flex;align-items:center;gap:2px}
.section-header h3 i{color:var(--ink-3)}

/* ── stat band ───────────────────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat-card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--sh-1);transition:border-color var(--dur) var(--out)}
.stat-card:hover{border-color:var(--hair-2)}
.stat-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:var(--t-micro);font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--track-cap)}
.stat-icon{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;
  font-size:14px;background:var(--accent-wash);color:var(--accent-2)}
/* keep the old si-* hooks working, but retint onto the on-brand set */
.si-blue{background:var(--a-info-wash);color:var(--accent-2)}
.si-purple{background:var(--accent-wash);color:var(--accent-2)}
.si-green{background:var(--a-ok-wash);color:var(--a-ok)}
.si-amber{background:var(--a-warn-wash);color:var(--a-warn)}
.si-red{background:var(--a-bad-wash);color:var(--a-bad)}
.stat-value{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;letter-spacing:-.01em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.stat-value.sm{font-size:var(--t-2xl)}
.stat-sub{font-size:var(--t-xs);color:var(--ink-3);margin-top:6px}
.stat-unit{font-family:var(--font);font-size:.46em;font-weight:500;color:var(--ink-3);margin-left:3px}

/* ── charts ──────────────────────────────────────────────────────────────── */
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:22px}
.chart-card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh-1)}
.chart-title{font-size:var(--t-base);font-weight:600;letter-spacing:var(--track-snug);margin-bottom:3px}
.chart-subtitle{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:14px}
.chart-wrap{position:relative;height:200px}
.chart-wrap-tall{position:relative;height:260px}

/* ── tables ──────────────────────────────────────────────────────────────── */
.table-card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1)}
.table-wrap{overflow-x:auto}
.table-card table,table.data-table{width:100%;border-collapse:collapse;font-size:var(--t-base)}
.table-card th,table.data-table th{text-align:left;padding:11px 16px;white-space:nowrap;
  font-size:var(--t-micro);font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--track-cap);
  border-bottom:1px solid var(--hair);background:var(--panel-2)}
.table-card td,table.data-table td{padding:11px 16px;border-bottom:1px solid var(--hair);color:var(--ink)}
.table-card tr:last-child td{border-bottom:none}
.table-card tbody tr{transition:background var(--dur) var(--out)}
.table-card tbody tr:hover td{background:var(--panel-2)}
.nd-cell-empty{text-align:center;padding:28px;color:var(--ink-3)}

/* ── buttons: keep plenum's .btn base sizing, re-skin the console variants ─── */
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:var(--sh-2)}
.btn-secondary{background:var(--panel);color:var(--ink-2);border-color:var(--hair-2);box-shadow:var(--sh-1)}
.btn-secondary:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-danger{background:var(--a-bad);color:#fff;border-color:transparent;box-shadow:var(--sh-1)}
.btn-danger:hover{background:color-mix(in srgb,var(--a-bad) 88%,#000);box-shadow:var(--sh-2)}
.btn-sm{height:29px;padding:0 10px;font-size:var(--t-xs)}
.btn-danger-sm{display:inline-flex;align-items:center;gap:5px;height:29px;padding:0 10px;
  border-radius:9px;font-family:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;
  background:var(--a-bad-wash);color:var(--a-bad);border:1px solid var(--a-bad-edge);transition:background var(--dur) var(--out)}
.btn-danger-sm:hover{background:color-mix(in srgb,var(--a-bad) 18%,transparent)}
.btn-danger-sm i{font-size:14px}

/* ── filters / search row ────────────────────────────────────────────────── */
.project-filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.filter-search-wrap{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;height:36px;
  padding:0 12px;background:var(--panel);border:1px solid var(--hair-2);border-radius:9px;
  transition:border-color var(--dur) var(--out),box-shadow var(--dur) var(--out)}
.filter-search-wrap i{color:var(--ink-3);font-size:16px;flex-shrink:0}
.filter-search-wrap input{flex:1;min-width:0;background:transparent;border:none;outline:none;
  color:var(--ink);font-family:inherit;font-size:var(--t-sm)}
.filter-search-wrap input::placeholder{color:var(--ink-3)}
.filter-search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.filter-select{height:36px;padding:0 32px 0 12px;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:9px;color:var(--ink);font-family:inherit;font-size:var(--t-sm);cursor:pointer;flex-shrink:0;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.filter-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* ── pagination ──────────────────────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:5px;padding:12px 16px;justify-content:flex-end;
  border-top:1px solid var(--hair)}
.page-btn{height:29px;padding:0 10px;background:var(--panel);border:1px solid var(--hair-2);border-radius:8px;
  color:var(--ink-2);font-family:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;transition:all var(--dur) var(--out)}
.page-btn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── modals ──────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--ink) 42%,transparent);backdrop-filter:blur(3px)}
.modal-box{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-pop)}
.modal-box h3{display:flex;align-items:center;gap:8px;font-size:var(--t-lg);font-weight:600;
  letter-spacing:var(--track-snug);margin-bottom:18px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.form-group{margin-bottom:14px}
.form-group label,.modal-box label{display:block;margin-bottom:6px;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-2);letter-spacing:var(--track-snug);text-transform:none}

/* form controls — mirror hub-page .in on every console input */
.modal-box input[type=text],.modal-box input[type=email],.modal-box input[type=number],
.modal-box input[type=password],.modal-box input[type=date],.modal-box input[type=tel],
.modal-box input[type=datetime-local],.modal-box input[type=search],
.modal-box select,.modal-box textarea{
  width:100%;height:38px;padding:0 12px;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:9px;color:var(--ink);font-family:inherit;font-size:var(--t-sm);transition:border-color var(--dur) var(--out),box-shadow var(--dur) var(--out)}
.modal-box textarea{height:auto;min-height:80px;padding:10px 12px;line-height:1.55;resize:vertical}
.modal-box select{cursor:pointer}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.modal-box input:hover,.modal-box select:hover,.modal-box textarea:hover{border-color:var(--ink-3)}
.field-error-msg{display:none;margin-top:5px;font-size:var(--t-xs);font-weight:600;color:var(--a-bad)}
input.input-invalid,select.input-invalid{border-color:var(--a-bad)!important;box-shadow:0 0 0 3px var(--a-bad-wash)!important}

/* ── bulk-select toolbar ─────────────────────────────────────────────────── */
.bulk-toolbar{display:none;align-items:center;gap:8px;padding:8px 12px;margin-bottom:10px;
  background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--panel));border-radius:9px}
.bulk-toolbar.visible{display:flex}
.bulk-count{flex:1;font-size:var(--t-sm);color:var(--ink-2)}

/* ── activity feed ───────────────────────────────────────────────────────── */
.activity-feed{display:flex;flex-direction:column;gap:8px}
.activity-item{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:var(--t-base);
  background:var(--panel);border:1px solid var(--hair);border-radius:11px;box-shadow:var(--sh-1)}
.activity-icon{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-2)}
.activity-text{flex:1;min-width:0}
.activity-time{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}

/* ── badges & status pills ───────────────────────────────────────────────── */
.inline-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;
  font-size:var(--t-micro);font-weight:700}
.inline-badge.active{background:var(--a-ok-wash);color:var(--a-ok);border:1px solid var(--a-ok-edge)}
.inline-badge.inactive{background:var(--a-bad-wash);color:var(--a-bad);border:1px solid var(--a-bad-edge)}
.inline-badge.builtin{background:var(--a-info-wash);color:var(--accent-2);border:1px solid var(--a-info-edge)}
.role-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--t-micro);font-weight:700}
.role-badge.admin{background:var(--a-warn-wash);color:var(--a-warn);border:1px solid var(--a-warn-edge)}
.role-badge.user{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair-2)}
.notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 4px;margin-left:4px;border-radius:9px;background:var(--a-bad);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1;vertical-align:middle}

/* status <select> pills (project status) */
.status-select{appearance:none;-webkit-appearance:none;padding:2px 8px;border-radius:10px;cursor:pointer;
  border:1px solid;font-family:inherit;font-size:var(--t-micro);font-weight:700;letter-spacing:.02em}
.status-select:focus{outline:none}
.status-select:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.status-select.draft{background:var(--panel-2);color:var(--ink-2);border-color:var(--hair-2)}
.status-select.in-progress{background:var(--a-warn-wash);color:var(--a-warn);border-color:var(--a-warn-edge)}
.status-select.submitted{background:var(--a-info-wash);color:var(--accent-2);border-color:var(--a-info-edge)}
.status-select.complete{background:var(--a-ok-wash);color:var(--a-ok);border-color:var(--a-ok-edge)}

/* row toggle switch (feature overrides) */
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;cursor:pointer;border-radius:22px;background:var(--hair-2);
  border:1px solid var(--hair-2);transition:background var(--dur) var(--out),border-color var(--dur) var(--out)}
.toggle-slider::before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;border-radius:50%;
  background:var(--panel);box-shadow:var(--sh-1);transition:transform var(--dur) var(--out)}
.toggle-switch input:checked + .toggle-slider{background:var(--accent);border-color:var(--accent)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);background:#fff}

/* ── settings + feature flags panes ──────────────────────────────────────────
   system_settings drawn as two panes (console.js: renderSettingsPane /
   renderFlags). fx-* is the Feature flags list plus the few bits both share
   (key, tag, caps label, tally); st-* is the Settings form sections. */
.fx-tally{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.fx-tally b{font-weight:600;color:var(--ink-2)}
.fx-key{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);letter-spacing:0}
.fx-tag{display:inline-flex;align-items:center;height:17px;padding:0 6px;margin-left:8px;border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;
  background:var(--a-warn-wash);color:var(--a-warn);border:1px solid var(--a-warn-edge)}
.fx-tag.quiet{background:var(--panel-2);color:var(--ink-3);border-color:var(--hair-2)}
.fx-cap{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.fx-empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:var(--t-sm)}
.fx-empty button{background:none;border:none;font:inherit;font-weight:600;color:var(--accent-2);cursor:pointer}

/* the filter bar sticks under what is left of the topbar (--fx-top, set by
   console.js _flagStick), and the area rail under the bar */
.fx-bar{position:sticky;top:var(--fx-top,0px);z-index:20;margin:0 -6px;padding:10px 6px 12px;background:var(--paper)}
.fx-bar-row{display:flex;gap:8px;align-items:center}
.fx-bar .filter-search-wrap kbd{font-family:var(--mono);font-size:10px;color:var(--ink-3);border:1px solid var(--hair-2);
  border-radius:5px;padding:1px 5px;background:var(--panel-2)}
.fx-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fx-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--hair-2);background:var(--panel);font-family:inherit;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);
  transition:background var(--dur) var(--out),border-color var(--dur) var(--out),color var(--dur) var(--out)}
.fx-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.fx-chip b{font-family:var(--mono);font-weight:500;font-size:var(--t-micro);color:var(--ink-3)}
.fx-chip.on{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 30%,var(--panel));color:var(--nr-on-wash)}
.fx-chip.on b{color:var(--nr-on-wash)}
.fx-chip-sep{width:1px;height:18px;background:var(--hair-2);align-self:center;margin:0 4px}
.fx-chip:focus-visible,.fx-area:focus-visible,.fx-main:focus-visible,.fx-need:focus-visible,.st-navlink:focus-visible{outline:none;box-shadow:var(--ring)}

.fx-layout{display:grid;grid-template-columns:184px minmax(0,1fr);gap:20px;align-items:start}
.fx-areas{position:sticky;top:var(--fx-rail-top,110px);display:flex;flex-direction:column;gap:1px;
  max-height:calc(100vh - var(--fx-rail-top,110px) - 24px);overflow-y:auto;padding-right:2px}
.fx-area{display:flex;align-items:center;gap:8px;flex-shrink:0;height:31px;padding:0 10px;border-radius:8px;border:1px solid transparent;
  background:none;cursor:pointer;font-family:inherit;font-size:var(--t-sm);font-weight:500;color:var(--ink-2);text-align:left;white-space:nowrap}
.fx-area:hover{background:var(--panel-2);color:var(--ink)}
.fx-area span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fx-area b{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;color:var(--ink-3)}
.fx-area.on{background:var(--accent-wash);color:var(--nr-on-wash);border-color:color-mix(in srgb,var(--accent) 22%,var(--panel));font-weight:600}
.fx-area.on b{color:var(--nr-on-wash)}
.fx-area.zero{color:var(--ink-3)}
.fx-area.zero b{opacity:.55}
.fx-areas hr{border:none;height:1px;background:var(--hair);margin:6px 4px;flex-shrink:0}

/* .table-card clips (overflow:hidden); nothing in the list sticks, so it can stay */
.fx-cols,.fx-row{display:grid;grid-template-columns:40px minmax(0,1fr) 132px 96px 70px 16px;gap:12px;align-items:center;padding:0 14px}
.fx-cols{height:34px;background:var(--panel-2);border-bottom:1px solid var(--hair)}
.fx-list.one-area .fx-cols,.fx-list.one-area .fx-row{grid-template-columns:40px minmax(0,1fr) 96px 70px 16px}
.fx-list.one-area .fx-c-area{display:none}
.fx-item{border-bottom:1px solid var(--hair)}
.fx-item:last-child{border-bottom:none}
.fx-row{min-height:52px;cursor:pointer;transition:background var(--dur) var(--out)}
.fx-row:hover,.fx-item.open .fx-row{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.fx-item.child .fx-main{padding-left:18px;position:relative}
.fx-item.child .fx-main::before{content:"";position:absolute;left:4px;top:4px;bottom:50%;width:8px;
  border-left:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);border-bottom-left-radius:4px}
.fx-main{min-width:0;display:block;padding:7px 0;background:none;border:none;border-radius:6px;cursor:pointer;font-family:inherit;text-align:left;color:inherit}
.fx-name{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.fx-main .fx-key{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.fx-c-area{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-stage{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);white-space:nowrap}
.fx-stage::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;box-sizing:border-box}
.fx-stage.rolling::before{background:var(--a-warn)}
.fx-stage.launched{color:var(--ink-3);font-weight:500}
.fx-stage.launched::before{background:var(--a-ok)}
.fx-stage.off::before{border:1.5px solid var(--ink-3)}
.fx-when{font-size:var(--t-xs);color:var(--ink-3);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fx-chev{color:var(--ink-3);font-size:14px;transition:transform var(--dur) var(--out)}
.fx-item.open .fx-chev{transform:rotate(180deg)}

.fx-detail{padding:2px 20px 18px 66px}
.fx-desc{max-width:74ch;font-size:var(--t-sm);line-height:1.62;color:var(--ink-2)}
.fx-desc b{font-weight:600;color:var(--ink)}
.fx-block{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:baseline;margin-top:12px;max-width:calc(74ch + 88px)}
.fx-block p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.fx-needs{display:flex;gap:6px;flex-wrap:wrap}
.fx-need{display:inline-flex;align-items:center;gap:7px;height:25px;padding:0 9px;border-radius:7px;cursor:pointer;
  border:1px solid var(--hair-2);background:var(--panel);font-family:inherit;font-size:var(--t-xs);font-weight:500;color:var(--ink-2)}
.fx-need:hover{border-color:var(--ink-3);color:var(--ink)}
.fx-need::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-ok)}
.fx-need.is-off{border-color:var(--a-warn-edge);background:var(--a-warn-wash);color:var(--a-warn);font-weight:600}
.fx-need.is-off::before{background:var(--a-warn)}
.fx-note{margin-top:12px;padding:9px 12px;max-width:calc(74ch + 88px);border-radius:9px;font-size:var(--t-xs);line-height:1.55;
  background:var(--a-warn-wash);border:1px solid var(--a-warn-edge);color:var(--ink-2)}
.fx-meta{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--hair-2);
  font-size:var(--t-xs);color:var(--ink-3)}
.fx-meta code{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2);background:var(--panel-2);border:1px solid var(--hair);
  border-radius:6px;padding:2px 7px}
.fx-meta button{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-xs);font-weight:600;color:var(--accent-2)}
.fx-meta button:hover{text-decoration:underline}
.fx-history{display:flex;flex-direction:column;gap:3px;flex-basis:100%}
.fx-history:empty{display:none}
.fx-history span{display:inline-flex;align-items:center;gap:6px}
.fx-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 4px 0;font-size:var(--t-xs);color:var(--ink-3)}
@keyframes fx-flash{from{background:var(--accent-wash)}to{background:transparent}}
.fx-item.flash .fx-row,.st-row.flash{animation:fx-flash 1.4s var(--out)}

.st-layout{display:grid;grid-template-columns:184px minmax(0,1fr);gap:20px;align-items:start}
.st-nav{position:sticky;top:78px;display:flex;flex-direction:column;gap:1px}
.st-navlink{display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:31px;padding:6px 10px;border-radius:8px;border:none;background:none;
  cursor:pointer;font-family:inherit;font-size:var(--t-sm);font-weight:500;line-height:1.3;color:var(--ink-2);text-align:left}
.st-navlink:hover{background:var(--panel-2);color:var(--ink)}
.st-navlink span{flex:1}
.st-navlink b{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;color:var(--ink-3)}
.st-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.st-card{scroll-margin-top:16px}
.st-head{padding:15px 18px 13px;border-bottom:1px solid var(--hair)}
.st-head h4{font-size:var(--t-md);font-weight:600;letter-spacing:var(--track-snug)}
.st-head p{margin-top:2px;font-size:var(--t-sm);color:var(--ink-3)}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--hair)}
.st-row:last-child{border-bottom:none}
.st-row.child{padding-left:40px;background:color-mix(in srgb,var(--ink) 1.8%,transparent)}
.st-row.danger{box-shadow:inset 3px 0 0 var(--hot)}
.st-row.wide{grid-template-columns:minmax(0,1fr)}
.st-label{font-size:var(--t-base);font-weight:600;color:var(--ink)}
.st-label .fx-key{margin-left:8px;font-weight:400}
.st-desc{margin-top:2px;max-width:64ch;font-size:var(--t-sm);line-height:1.5;color:var(--ink-3)}
.st-desc code{font-family:var(--mono);font-size:var(--t-xs)}
.st-ctl{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.st-in{height:34px;padding:0 11px;box-sizing:border-box;background:var(--panel);border:1px solid var(--hair-2);border-radius:9px;
  color:var(--ink);font-family:inherit;font-size:var(--t-sm)}
.st-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.st-in.num{width:92px;text-align:right;font-family:var(--mono)}
.st-in.txt{width:210px;font-family:var(--mono);font-size:var(--t-xs)}
.st-in.st-area{display:block;width:100%;height:auto;min-height:120px;margin:10px 0 8px;padding:10px 12px;
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.55;resize:vertical}
.st-unit{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}
/* Save / Revert appear only once the value differs from what is stored */
.st-save{display:none}
.st-row.dirty .st-save{display:inline-flex}
.st-row.dirty .st-in{border-color:var(--accent)}
.st-packs{margin-top:10px;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.st-packs table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.st-packs th{text-align:left;padding:8px 12px;background:var(--panel-2);border-bottom:1px solid var(--hair);
  font-size:var(--t-micro);font-weight:700;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.st-packs td{padding:8px 12px;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.st-packs tr:last-child td{border-bottom:none}
.st-packs td.m{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2)}
.st-json{margin-top:10px}
.st-json summary{cursor:pointer;font-size:var(--t-xs);font-weight:600;color:var(--accent-2)}
.st-hidden{display:none!important}

/* ── setup / DDL disclosure box ──────────────────────────────────────────── */
.setup-box{margin-bottom:14px;border-radius:var(--r);line-height:1.6;font-size:var(--t-sm);color:var(--ink-2);
  background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--panel))}
.setup-box strong{color:var(--ink)}
.setup-box code{padding:1px 5px;border-radius:4px;font-size:var(--t-xs);word-break:break-all;
  background:var(--panel-2);border:1px solid var(--hair);font-family:var(--mono)}
.setup-box-header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;cursor:pointer;user-select:none;border-radius:var(--r)}
.setup-box-header:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.setup-box-chevron{flex-shrink:0;font-size:14px;transition:transform var(--dur) var(--out)}
.setup-box.open .setup-box-chevron{transform:rotate(180deg)}
.setup-box-body{padding:0 16px 14px}

/* ── equipment filter pills ──────────────────────────────────────────────── */
.equip-type-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.equip-type-tab{padding:6px 14px;border-radius:20px;cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--hair-2);transition:all var(--dur) var(--out)}
.equip-type-tab:hover{color:var(--ink);border-color:var(--ink-3)}
.equip-type-tab.active{background:var(--accent-wash);color:var(--accent-2);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--panel))}

/* ── nested segmented sub-nav (Beta sub-tabs use .admin-tabs inside a pane) ── */
.admin-tab-pane .admin-tabs{display:inline-flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;padding:4px;
  width:fit-content;background:var(--panel-2);border:1px solid var(--hair);border-radius:11px;border-bottom:1px solid var(--hair)}
.admin-tab-pane .admin-tab{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;
  padding:6px 14px;border-radius:8px;border:1px solid transparent;background:transparent;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.admin-tab-pane .admin-tab i{font-size:14px;color:var(--ink-3)}
.admin-tab-pane .admin-tab:hover{background:var(--panel);color:var(--ink)}
.admin-tab-pane .admin-tab.active{background:var(--accent);color:#fff;background-image:none}
.admin-tab-pane .admin-tab.active i{color:#fff}

/* ── loading primitives (console.js renders these by name) ───────────────── */
.skeleton{border-radius:6px;background:linear-gradient(90deg,var(--panel-2) 0%,color-mix(in srgb,var(--ink) 6%,var(--panel-2)) 50%,var(--panel-2) 100%);
  background-size:200% 100%;animation:admin-shimmer 1.5s infinite}
@keyframes admin-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spinner{width:32px;height:32px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--accent) 20%,transparent);border-top-color:var(--accent);
  animation:admin-spin .7s linear infinite}
.spin,.ti-spin{display:inline-block;animation:admin-spin .8s linear infinite}
@keyframes admin-spin{to{transform:rotate(360deg)}}

/* ── compact row-action cluster (Users/Projects tables) ──────────────────────
   Uniform 30px icon buttons on one line (hub Team-row pattern) instead of a
   wrapping row of labelled pills. Destructive actions stay red-tinted at rest
   so an operator can't confuse them with the benign ones. .icon-btn itself
   comes from hub-page.css. */
.row-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.icon-btn.danger{background:var(--a-bad-wash);color:var(--a-bad);border-color:var(--a-bad-edge)}
.icon-btn.danger:hover{background:color-mix(in srgb,var(--a-bad) 18%,transparent);border-color:var(--a-bad);color:var(--a-bad)}
@media (min-width:761px){ .row-actions{flex-wrap:nowrap} }

/* native checkboxes → accent tick */
.admin-tab-pane input[type=checkbox],.table-card input[type=checkbox],.modal-box input[type=checkbox]{
  accent-color:var(--accent);width:16px;height:16px;cursor:pointer}

/* ── support console ticket list ─────────────────────────────────────────── */
.sc-wrap{min-width:0}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .charts-grid{grid-template-columns:1fr}
  .fx-cols,.fx-row{grid-template-columns:40px minmax(0,1fr) 96px 70px 16px}
  .fx-c-area{display:none}
  .stats-row{grid-template-columns:repeat(3,1fr)!important}
}
@media (max-width:760px){
  /* console.js hides .admin-tabs and shows the <select> at narrow widths */
  #adminNav{position:static}
  .side .admin-tabs{display:none}
  .admin-tabs-select{display:block}
  /* flags + settings: the rails become a swipeable row above the list, and the
     filter bar stops sticking (it would cover a third of a phone screen) */
  .fx-layout,.st-layout{grid-template-columns:minmax(0,1fr)}
  .fx-areas,.st-nav{position:static;flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:4px}
  .fx-areas hr{display:none}
  .fx-bar{position:static}
  .fx-bar-row{flex-wrap:wrap}
  .fx-bar .filter-search-wrap{min-width:0;flex:1 1 100%}
  .fx-bar .filter-search-wrap kbd{display:none}
  .fx-bar .filter-select{flex:1}
  .fx-cols{display:none}
  .fx-row,.fx-list.one-area .fx-row{grid-template-columns:40px minmax(0,1fr) 16px}
  .fx-row .fx-stage,.fx-row .fx-when{display:none}
  .fx-detail{padding-left:14px}
  .fx-block{grid-template-columns:minmax(0,1fr);gap:4px}
  .st-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .st-ctl{justify-content:flex-start;flex-wrap:wrap}
  .stats-row{grid-template-columns:repeat(2,1fr)!important}
  /* keep a nested sub-nav (Beta, Flywheel) as pills, not a select — and not
     both: console.js builds a <select> for every .admin-tabs it finds */
  .admin-tab-pane .admin-tabs{display:inline-flex}
  .admin-tab-pane .admin-tabs-select{display:none}
  /* 16px inputs to stop iOS zoom-on-focus */
  input,select,textarea{font-size:16px!important}
}
@media (max-width:480px){
  .stats-row{grid-template-columns:1fr!important}
}

/* ── Flywheel: a table grouped by app — one header row per group ─────────── */
.table-card tr.fw-group td,.table-card tr.fw-group:hover td{background:var(--panel-2);padding:8px 16px;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-2)}
.fw-group-meta{margin-left:10px;font-weight:400;color:var(--ink-3)}
.fw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
/* On a phone every row is a card; the group row is the label above its cards. */
@media (max-width:760px){
  .table-cards-mobile tr.fw-group{padding:8px 2px 0;margin-bottom:6px;background:none;border:none;border-radius:0}
  .table-cards-mobile tr.fw-group td,.table-cards-mobile tr.fw-group:hover td{display:block;padding:0;
    text-align:left;background:none}
  .table-cards-mobile tr.fw-group td::before{content:none}
  .fw-group-meta{display:block;margin:2px 0 0 15px}
}

/* ── mobile card-tables (console.js adds .table-cards-mobile) ─────────────── */
@media (max-width:760px){
  .table-cards-mobile table{display:block}
  .table-cards-mobile thead{display:none}
  .table-cards-mobile tbody{display:block}
  .table-cards-mobile tr{display:block;position:relative;padding:12px 14px;padding-right:38px;
    margin-bottom:10px;background:var(--panel);border:1px solid var(--hair);border-radius:12px}
  .table-cards-mobile tr:hover td{background:none}
  .table-cards-mobile td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:5px 0;border:none;text-align:right}
  .table-cards-mobile td::before{content:attr(data-label);flex-shrink:0;text-align:left;padding-top:2px;
    font-size:var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
  .table-cards-mobile td[data-label="Actions"]{flex-direction:column;align-items:stretch;text-align:left;
    margin-top:4px;padding-top:8px;border-top:1px solid var(--hair)}
  .table-cards-mobile td[data-label="Actions"]::before{padding-top:0;margin-bottom:4px}
  .table-cards-mobile td.td-select{position:absolute;top:8px;right:8px;padding:0;display:block}
  .table-cards-mobile td.td-select::before{content:none}
}

/* ── toasts (core/toast.js — was styled by the dropped dashboard.css) ─────── */
.toast-container{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:1200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:440px;padding:11px 15px;
  background:var(--ink);color:var(--paper);border-radius:11px;font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-pop);pointer-events:auto;cursor:pointer;
  animation:admin-toast-in .22s var(--spring)}
.toast.exiting{animation:admin-toast-out .26s var(--out) forwards}
.toast i{font-size:16px;flex-shrink:0;color:var(--accent)}
.toast-info i{color:var(--accent)}
.toast-success i{color:var(--a-ok)}
.toast-warning i{color:var(--amber)}
.toast-error i{color:var(--hot)}
.toast-msg{min-width:0}
.toast-actions{display:flex;gap:6px;margin-left:6px}
.toast-action{background:color-mix(in srgb,var(--paper) 16%,transparent);color:var(--paper);
  border:1px solid color-mix(in srgb,var(--paper) 26%,transparent);border-radius:7px;
  padding:4px 10px;font-family:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer}
.toast-action:hover{background:color-mix(in srgb,var(--paper) 26%,transparent)}
@keyframes admin-toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes admin-toast-out{to{opacity:0;transform:translateY(10px) scale(.98)}}