/* ══════════════════════════════════════════════════════════════════════════
   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 pane (system settings) ─────────────────────────────────────── */
.settings-layout{display:flex;gap:0;min-height:480px}
.settings-sidebar{width:168px;flex-shrink:0;border-right:1px solid var(--hair);padding:8px 0;
  position:sticky;top:78px;align-self:flex-start}
.settings-sidebar-link{display:block;padding:7px 14px;border-left:2px solid transparent;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color var(--dur) var(--out),background var(--dur) var(--out)}
.settings-sidebar-link:hover{color:var(--ink);background:var(--panel-2)}
.settings-sidebar-link.active{color:var(--accent-2);border-left-color:var(--accent);background:var(--accent-wash)}
.settings-content{flex:1;min-width:0}
.settings-search-wrap{position:relative;padding:12px 14px;border-bottom:1px solid var(--hair)}
.settings-search-icon{position:absolute;left:24px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:14px;pointer-events:none}
.settings-search{width:100%;box-sizing:border-box;height:34px;padding:0 12px 0 32px;
  background:var(--panel);border:1px solid var(--hair-2);border-radius:9px;color:var(--ink);
  font-family:inherit;font-size:var(--t-sm)}
.settings-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.settings-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--hair)}
.settings-row:last-child{border-bottom:none}
.settings-key{font-size:var(--t-base);font-weight:600;color:var(--ink)}
.settings-key-code{margin-left:7px;font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  color:var(--accent-2);opacity:0;vertical-align:middle;transition:opacity var(--dur) var(--out)}
.settings-row:hover .settings-key-code{opacity:.75}
.settings-desc{margin-top:3px;font-size:var(--t-sm);color:var(--ink-3);line-height:1.55}
.settings-val-input{width:160px;box-sizing:border-box;height:34px;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)}
.settings-val-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.settings-saved-flash{white-space:nowrap;font-size:var(--t-xs);color:var(--a-ok);font-weight:600}
/* collapsible flag groups */
.settings-accordion{border-bottom:1px solid var(--hair)}
.settings-accordion:last-child{border-bottom:none}
.settings-accordion-header{display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;cursor:pointer;user-select:none;background:var(--panel-2)}
.settings-accordion-header:hover{background:color-mix(in srgb,var(--ink) 4%,var(--panel-2))}
.settings-accordion-title{display:flex;align-items:center;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--ink-3)}
.settings-accordion-chevron{color:var(--ink-3);font-size:var(--t-base);transition:transform var(--dur) var(--out)}
.settings-accordion.open .settings-accordion-chevron{transform:rotate(180deg)}
.settings-accordion-body{display:none}
.settings-accordion.open .settings-accordion-body{display:block}
.settings-row.hidden-by-search{display:none}
.settings-default-label{font-size:var(--t-xs);color:var(--ink-3);opacity:.6;white-space:nowrap}
.settings-child-row{padding-left:36px;background:color-mix(in srgb,var(--ink) 2%,transparent)}
.settings-child-row .settings-key{font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.settings-no-results{display:none;padding:24px 16px;text-align:center;color:var(--ink-3);font-size:var(--t-base)}

/* ── 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}
  .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}
  .settings-sidebar{display:none}
  .settings-layout{flex-direction:column}
  .settings-row{grid-template-columns:1fr!important;gap:8px}
  .stats-row{grid-template-columns:repeat(2,1fr)!important}
  /* keep the nested Beta sub-nav as pills, not a select */
  .admin-tab-pane .admin-tabs{display:inline-flex}
  /* 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}
}

/* ── 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)}}