/* ──────────────────────────────────────────────────────────────────────────
 * admin-console.css — re-skin the operator console (/admin, /support-console)
 * to the neuralduct hub look (plenum.css). Loaded AFTER dashboard.css so these
 * :root token overrides win. The admin panel is token-driven, so remapping the
 * surface/text/accent tokens re-skins cards/tables/modals/tabs at once; a few
 * component rules flatten gradients and adopt the hub's ice-blue.
 *
 * Themed like the hub: the LIGHT palette lives on :root, the DARK palette under
 * :root[data-theme="dark"]. The before-paint script in admin.html/support-console.html
 * sets data-theme from localStorage['plenum_theme'] (the hub's chosen theme), so
 * these pages follow whatever the user picked in the workspace.
 * ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* hub light palette (plenum.css default :root) */
  --bg: #f4f6fa; --surface: #e9edf3; --card: #ffffff; --elev-3: #eef2f7;
  --border: rgba(19,23,34,0.09); --border-strong: rgba(19,23,34,0.15);
  --text: #131722; --text-primary: #131722; --text-secondary: #4a5568; --text-muted: #8a94a4;
  --accent: #1493e6; --accent-hover: #0f76bf; --accent-blue: #1493e6;
  --accent-soft: rgba(20,147,230,0.12); --accent-edge: rgba(20,147,230,0.38);
  --radius: 11px;
  /* hub depth: soft ink shadows, no bright inset edge */
  --shadow-3: 0 1px 2px rgba(28,26,22,.05), 0 14px 30px -10px rgba(28,26,22,.14);
  --edge-light: none;
}

:root[data-theme="dark"] {
  /* hub dark palette (plenum.css [data-theme="dark"]) */
  --bg: #0e0f12; --surface: #15171c; --card: #1b1e25; --elev-3: #23272f;
  --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.13);
  --text: #f2f4f8; --text-primary: #f2f4f8; --text-secondary: #aeb6c4; --text-muted: #8a94a4;
  --accent: #33b1ff; --accent-hover: #5cc0ff; --accent-blue: #33b1ff;
  --accent-soft: rgba(51,177,255,0.14); --accent-edge: rgba(51,177,255,0.42);
  --shadow-3: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -10px rgba(0,0,0,.55);
}

/* The dashboard shell sets body { height:100vh; overflow:hidden } (it scrolls
 * inside a fixed layout). The standalone console is a normal scrolling page. */
html, body { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
body { font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }
.section-title { font-weight: 700; letter-spacing: -.02em; }

/* Flatten cards / tables / modals to the hub's calm surfaces (no gradients / heavy edges) */
.stat-card, .chart-card, .table-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: none;
  background-image: none;
  border-radius: var(--r-lg, 15px);
}
.stat-card:hover, .chart-card:hover { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.stat-value { letter-spacing: -.02em; }

/* Tab bar → hub feel: ice-blue active underline, flat */
.admin-tabs { border-bottom: 1px solid var(--border); }
.admin-tab { color: var(--text-muted); background: none; border: none; border-radius: 8px 8px 0 0; }
.admin-tab:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.admin-tab.active { color: var(--accent); background: none; box-shadow: inset 0 -2px 0 var(--accent); }

/* Buttons → hub ice-blue primary */
.btn-primary { background: var(--accent); border-color: var(--accent); color: #04121d; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Inputs / selects → flat hub surfaces */
.filter-select, .filter-search-wrap input, .modal-box input, .modal-box select, .modal-box textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
}

/* Modals → hub pop */
.modal-box { background: var(--card); border: 1px solid var(--border); box-shadow: 0 18px 46px -12px rgba(0,0,0,.66); }