/* ============================================================
   TUSM Design System  (Phase 1 — foundation)
   Single source of truth for tokens + base components.
   Light-first; dark theme via [data-theme="dark"].
   Brand = deep crimson (#a41615); status-red (FAIL) is a
   DISTINCT brighter red (#dc2626) so brand != danger.
   ============================================================ */

:root {
  /* ---- Neutrals (slate) ---- */
  --slate-50:#f8fafc;  --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* ---- Brand: crimson ---- */
  --brand-50:#fbeaea;  --brand-100:#f7d5d4; --brand-200:#eeacaa; --brand-300:#e07e7c;
  --brand-500:#c01f1d; --brand-600:#a41615; --brand-700:#8a1212; --brand-800:#6f0f0e;
  --brand:var(--brand-600);
  --brand-hover:var(--brand-700);
  --brand-contrast:#ffffff;
  --brand-ring:rgba(164,22,21,.12);

  /* ---- Status semantics (kept distinct from brand-red) ---- */
  --success:#16a34a; --success-bg:#dcfce7;
  --danger:#dc2626;  --danger-bg:#fee2e2;   /* FAIL — brighter than brand */
  --warning:#d97706; --warning-bg:#fef3c7;  /* MANUAL / warning */
  --info:#2563eb;    --info-bg:#dbeafe;
  --neutral:#64748b; --neutral-bg:#f1f5f9;  /* UNTESTED / muted */

  /* ---- Surfaces & text (light) ---- */
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f8fafc;
  --surface-dark:#0f172a; --surface-dark-2:#1e293b;
  --text:#334155; --text-strong:#0f172a; --text-muted:#64748b; --text-invert:#f1f5f9;
  --border:#e2e8f0; --border-strong:#cbd5e1;

  /* ---- Radius / shadow / motion ---- */
  --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 10px 15px -3px rgba(15,23,42,.06), 0 4px 6px -2px rgba(15,23,42,.04);
  --shadow-lg:0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.06);
  --ease:cubic-bezier(.4,0,.2,1); --dur:.18s;
}

/* ---- Dark theme (scaffold; toggle ships in Phase 6) ---- */
[data-theme="dark"] {
  --bg:#0b1220; --surface:#111a2e; --surface-2:#0f172a;
  --text:#cbd5e1; --text-strong:#f8fafc; --text-muted:#94a3b8; --text-invert:#f8fafc;
  --border:#1e293b; --border-strong:#334155;
  --success-bg:#0c2a18; --danger-bg:#3a0f0f; --warning-bg:#3a2a0a;
  --info-bg:#0e1f3d; --neutral-bg:#1e293b;
}

/* ============================ Base ============================ */
body {
  background:var(--bg); color:var(--text);
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 { font-weight:700; letter-spacing:-.01em; color:var(--text-strong); }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-hover); }
code, kbd, .text-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tabular-nums { font-variant-numeric:tabular-nums; }

/* Inline code / env-var tokens — a neutral, professional "chip" instead of
   Bootstrap's default pink (#d63384). Auto-themes via tokens. `pre code` (real
   code blocks) is left untouched. */
:not(pre) > code {
  color:var(--text-strong); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.08em .4em; font-size:.85em; font-weight:500;
}
kbd {
  color:var(--text-invert); background:var(--surface-dark-2);
  border-radius:var(--radius-sm); padding:.08em .45em; font-size:.85em;
}

/* ============================ Navbar (top) ============================ */
.navbar {
  background:linear-gradient(90deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%) !important;
  box-shadow:var(--shadow); padding:.75rem 0; border-bottom:2px solid var(--brand);
}
.navbar-brand { font-weight:800; letter-spacing:-.5px; }

/* ============================ Cards ============================ */
.card {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); background:var(--surface);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Gentle elevation on hover — activates the transition the card already declares.
   Subtle by design (2px lift) so form/table cards feel responsive, not bouncy. */
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
/* Opt-in: add class="card card-elevated" for a stronger, clickable-card lift. */
.card-elevated { box-shadow:var(--shadow); }
.card-elevated:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  border-top-left-radius:var(--radius-lg) !important; border-top-right-radius:var(--radius-lg) !important;
  font-weight:600; color:var(--text-strong); padding:1rem 1.25rem;
}
.ciso-card { background:linear-gradient(145deg, var(--surface-dark-2) 0%, var(--surface-dark) 100%); color:#fff; border:none; }

/* ============================ Buttons ============================ */
.btn { border-radius:var(--radius-sm); font-weight:500; padding:.5rem 1rem; transition:all var(--dur) var(--ease); }
.btn-primary { background:var(--brand); border-color:var(--brand); color:var(--brand-contrast); }
.btn-primary:hover, .btn-primary:focus {
  background:var(--brand-hover); border-color:var(--brand-hover); color:#fff;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(164,22,21,.25);
}
.btn-outline-primary { color:var(--brand); border-color:var(--brand); }
.btn-outline-primary:hover { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ============================ Tables ============================ */
.table { font-size:.875rem; }
.table-dark { background:var(--surface-dark); color:#f1f5f9; }
.table-dark th { font-weight:600; letter-spacing:.5px; text-transform:uppercase; font-size:.75rem; border-bottom:none; }
.table-hover tbody tr:hover { background:var(--surface-2); }

/* ============================ Badges & forms ============================ */
.badge { font-weight:600; padding:.4em .6em; border-radius:var(--radius-sm); }
.form-control, .form-select { border-radius:var(--radius-sm); border-color:var(--border-strong); box-shadow:none; font-size:.875rem; }
.form-control:focus, .form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }

/* ============================ Status semantics ============================ */
/* Single source for PASS / FAIL / MANUAL / UNTESTED — use everywhere. */
.tusm-status { display:inline-block; font-weight:600; border-radius:var(--radius-sm); padding:.3em .6em; font-size:.75rem; }
.tusm-status--pass     { color:var(--success); background:var(--success-bg); }
.tusm-status--fail     { color:var(--danger);  background:var(--danger-bg); }
.tusm-status--manual   { color:var(--warning); background:var(--warning-bg); }
.tusm-status--untested { color:var(--neutral); background:var(--neutral-bg); }

/* ============================ Page header ============================ */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-h1 { font-size:1.5rem; font-weight:700; margin:0; color:var(--text-strong); }
.page-h1 i { color:var(--brand); }
.page-sub { color:var(--text-muted); font-size:.9rem; margin:.25rem 0 0; }
.page-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ============================ Stat / KPI cards ============================ */
.stat-card { display:flex; align-items:center; gap:1rem; padding:1.15rem 1.25rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); height:100%; }
.stat-icon { width:48px; height:48px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; }
.stat-value { font-size:1.6rem; font-weight:800; line-height:1.1; color:var(--text-strong); letter-spacing:-.02em; }
.stat-label { font-size:.78rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-sub { font-size:.78rem; color:var(--text-muted); margin-top:.15rem; }
.stat-brand   .stat-icon { background:var(--brand-50);   color:var(--brand); }
.stat-success .stat-icon { background:var(--success-bg); color:var(--success); }
.stat-danger  .stat-icon { background:var(--danger-bg);  color:var(--danger); }
.stat-warning .stat-icon { background:var(--warning-bg); color:var(--warning); }
.stat-info    .stat-icon { background:var(--info-bg);    color:var(--info); }
.stat-neutral .stat-icon { background:var(--neutral-bg); color:var(--neutral); }

/* ============================ Status pills & severity chips ============================ */
.tusm-status i { font-size:.85em; margin-right:.15em; }
.sev-chip { display:inline-block; font-size:.72rem; font-weight:700; padding:.25em .65em; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.03em; }
.sev-critical { background:#7f1d1d; color:#fff; }
.sev-high     { background:var(--danger-bg);  color:var(--danger); }
.sev-medium   { background:var(--warning-bg); color:var(--warning); }
.sev-low      { background:var(--info-bg);    color:var(--info); }
.sev-info     { background:var(--neutral-bg); color:var(--neutral); }

/* ============================ Empty state ============================ */
.empty-state { text-align:center; padding:3rem 1.5rem; color:var(--text-muted); }
.empty-state > i { font-size:2.5rem; color:var(--border-strong); display:block; margin-bottom:.75rem; }
.empty-state h5 { color:var(--text-strong); margin-bottom:.35rem; }
.empty-state p { font-size:.875rem; max-width:380px; margin:0 auto; }

/* ============================ Skeleton loader ============================ */
.skeleton-line { height:14px; border-radius:6px; margin:.55rem 0;
  background:linear-gradient(90deg, var(--border) 25%, var(--surface-2) 37%, var(--border) 63%);
  background-size:400% 100%; animation:tusm-shimmer 1.4s ease infinite; }
.skeleton-line:nth-child(2) { width:85%; }
.skeleton-line:nth-child(3) { width:70%; }
@keyframes tusm-shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }

/* ============================ DataTables theme ============================ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:.35rem .6rem; font-size:.85rem; }
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); outline:none; }
table.dataTable thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; border-radius:var(--radius-sm); }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background:var(--brand-50) !important; border-color:var(--brand-100) !important; color:var(--brand) !important; }
.dataTables_wrapper .dataTables_info { color:var(--text-muted); font-size:.82rem; }

/* ============================ Auth layout (login/signup/MFA) ============================ */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(164,22,21,.18), transparent 60%), linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%); }
.auth-card { width:100%; max-width:420px; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:2rem; }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; font-size:1.4rem; letter-spacing:-.5px; color:var(--text-strong); margin-bottom:.25rem; }
.auth-brand i { color:var(--brand); }
.auth-sub { text-align:center; color:var(--text-muted); font-size:.875rem; margin-bottom:1.5rem; }

/* ============================ App shell (sidebar + topbar) ============================ */
.app-shell { min-height:100vh; }

.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:248px; z-index:1040;
  background:linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%);
  color:#cbd5e1; display:flex; flex-direction:column; overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-head {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand {
  display:flex; align-items:center; gap:.55rem; padding:1.1rem 1.25rem;
  font-weight:800; font-size:1.25rem; letter-spacing:-.5px; color:#fff;
}
.sidebar-brand i { color:var(--brand-300); font-size:1.4rem; }
.sidebar-collapse-btn {
  display:none; background:none; border:none; color:#94a3b8; cursor:pointer;
  font-size:1rem; padding:.4rem .75rem; line-height:1;
}
.sidebar-collapse-btn:hover { color:#fff; }
.sidebar-collapse-btn i { transition:transform var(--dur) var(--ease); }
.sidebar-section { padding:.85rem 1.4rem .35rem; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:#94a3b8; }
.sidebar-nav { list-style:none; padding:.25rem .6rem; margin:0; flex:1 0 auto; }
.sidebar-nav li { margin:.1rem 0; }
.sidebar-nav a {
  display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:var(--radius-sm);
  color:#cbd5e1; font-weight:500; font-size:.9rem;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-nav a i { font-size:1.05rem; width:1.25rem; text-align:center; flex-shrink:0; }
.sidebar-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active { background:var(--brand); color:#fff; box-shadow:0 2px 10px rgba(164,22,21,.45); }
.sidebar-foot { padding:.9rem 1.4rem; font-size:.7rem; color:#94a3b8; border-top:1px solid rgba(255,255,255,.08); }

.app-main { margin-left:248px; min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:1rem;
  padding:.6rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.topbar .page-title { font-weight:700; font-size:1.05rem; color:var(--text-strong); }
.topbar-spacer { flex:1 1 auto; }
.sidebar-toggle { display:none; background:none; border:none; font-size:1.4rem; line-height:1; color:var(--text); padding:.1rem .3rem; }
.main-content { padding:1.5rem 0 3rem; flex:1 0 auto; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1035; }

@media (max-width: 991.98px) {
  .sidebar { transform:translateX(-100%); transition:transform var(--dur) var(--ease); }
  .sidebar.show { transform:none; }
  .app-main { margin-left:0; }
  .sidebar-toggle { display:inline-flex; }
  .sidebar-backdrop.show { display:block; }
}

/* Collapsible icon-only rail (desktop ≥992px; collapse state persisted on <html>) */
@media (min-width: 992px) {
  .sidebar, .app-main { transition:width var(--dur) var(--ease), margin-left var(--dur) var(--ease); }
  .sidebar-collapse-btn { display:inline-flex; }
  html.sidebar-collapsed .sidebar { width:64px; }
  html.sidebar-collapsed .app-main { margin-left:64px; }
  html.sidebar-collapsed .sidebar .nav-text,
  html.sidebar-collapsed .sidebar-section,
  html.sidebar-collapsed .sidebar-foot { display:none; }
  html.sidebar-collapsed .sidebar-head { flex-direction:column; gap:.35rem; padding:.5rem 0; }
  html.sidebar-collapsed .sidebar-brand { padding:.4rem 0; justify-content:center; gap:0; }
  html.sidebar-collapsed .sidebar-nav { padding:.25rem .3rem; }
  html.sidebar-collapsed .sidebar-nav a { justify-content:center; gap:0; padding:.6rem 0; }
  html.sidebar-collapsed .sidebar-collapse-btn i { transform:rotate(180deg); }
  /* Collapsed labels: the native title="" tooltip provides the hover label.
     (A CSS flyout child here would extend past the 64px rail and, because the
     sidebar's overflow-y:auto forces overflow-x:auto, add a horizontal scrollbar.) */
}

/* ============================ Global loader ============================ */
#global-loader {
  /* inset:0 already fills the viewport; 100vw includes the scrollbar gutter and
     causes a spurious horizontal scrollbar when the loader is shown. */
  position:fixed; inset:0; background:rgba(255,255,255,.9);
  z-index:9999; display:none; flex-direction:column; justify-content:center; align-items:center; backdrop-filter:blur(4px);
}
.spinner-border { width:4rem; height:4rem; margin-bottom:1.5rem; border-width:.25em; color:var(--brand); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ============================ Accessibility ============================ */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
a:focus-visible, .sidebar-nav a:focus-visible, .dropdown-item:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--radius-sm); }
.skip-link { position:absolute; left:-9999px; top:0; z-index:2000; background:var(--brand); color:#fff; padding:.55rem 1rem; border-radius:0 0 var(--radius-sm) 0; font-weight:600; }
.skip-link:focus { left:0; }

/* ============================ Segmented toggle (crimson, theme-aware) ============================ */
/* Inactive = surface bg + crimson text/border; Active = crimson fill + white. Works light & dark via tokens. */
.tusm-seg { display:inline-flex; border:1.5px solid var(--brand); border-radius:var(--radius-sm); overflow:hidden; vertical-align:middle; }
.tusm-seg .seg-btn { border:none; border-left:1.5px solid var(--brand); padding:.35rem .85rem; font-size:.8rem; font-weight:600; background:var(--surface); color:var(--brand); cursor:pointer; white-space:nowrap; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.tusm-seg .seg-btn:first-child { border-left:none; }
.tusm-seg .seg-btn:hover { background:var(--surface-2); }
.tusm-seg .seg-btn.active { background:var(--brand); color:#fff; }
.tusm-seg--fill { display:flex; width:100%; }
.tusm-seg--fill .seg-btn { flex:1; text-align:center; }

/* ============================ Utilities ============================ */
.text-brand { color:var(--brand) !important; }
/* Regulatory-lens filter: many toggles must wrap as compact pills, not a single overflowing row */
#complianceToggles { row-gap:.35rem; }
#complianceToggles .btn { font-size:.78rem; padding:.28rem .6rem; border-radius:var(--radius-sm); }

/* ============================ Theme toggle ============================ */
.theme-toggle { background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius-sm); width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.theme-toggle:hover { color:var(--brand); border-color:var(--brand); }

/* ============================ Dark theme — Bootstrap utility overrides ============================ */
/* Templates lean on hardcoded bg-white / bg-light / text-dark / table-light; remap them to tokens. */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card-header.bg-white { background:var(--surface) !important; color:var(--text); }
[data-theme="dark"] .bg-light { background:var(--surface-2) !important; color:var(--text); }
[data-theme="dark"] .text-dark { color:var(--text-strong) !important; }
[data-theme="dark"] .text-muted { color:var(--text-muted) !important; }
[data-theme="dark"] .table { color:var(--text); --bs-table-bg:transparent; }
/* .table-light is an absolute light variant (light bg + dark text) that data-bs-theme
   does NOT recolor — remap its Bootstrap table vars + force the cells so headers/rows go light. */
[data-theme="dark"] .table-light { --bs-table-bg:var(--surface-2); --bs-table-color:var(--text); --bs-table-border-color:var(--border); }
[data-theme="dark"] .table-light th, [data-theme="dark"] .table-light td,
[data-theme="dark"] .table-light tr { background-color:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border) !important; }
/* systems.html OSI menu (incl. the VAPT item): inline hover/active use absolute light bg → light text would vanish on it in dark */
[data-theme="dark"] .osi-layer:hover, [data-theme="dark"] .osi-layer.active { background-color:var(--surface-2) !important; color:var(--text-strong) !important; border-left-color:var(--brand) !important; }
[data-theme="dark"] .table-hover tbody tr:hover { background:var(--surface-2); }
[data-theme="dark"] .dropdown-menu { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .dropdown-item { color:var(--text); }
[data-theme="dark"] .dropdown-item:hover { background:var(--surface-2); color:var(--text-strong); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
[data-theme="dark"] .form-control::placeholder { color:var(--text-muted); }
[data-theme="dark"] .modal-content, [data-theme="dark"] .list-group-item { background:var(--surface); color:var(--text); border-color:var(--border); }
[data-theme="dark"] .btn-light { background:var(--surface-2); color:var(--text); border-color:var(--border); }
/* btn-dark / btn-outline-dark are absolute-dark (near-black) and vanish on the dark
   surface — remap to a visible neutral (e.g. "Deploy via AD GPO", GPO package button). */
[data-theme="dark"] .btn-dark { background:var(--border-strong); color:var(--text-strong); border-color:var(--border-strong); }
[data-theme="dark"] .btn-dark:hover { background:#475569; border-color:#64748b; color:#fff; }
[data-theme="dark"] .btn-outline-dark { color:var(--text); border-color:var(--border-strong); }
[data-theme="dark"] .btn-outline-dark:hover { background:var(--surface-2); color:var(--text-strong); border-color:var(--border-strong); }
[data-theme="dark"] .alert-light { background:var(--surface-2); color:var(--text); border-color:var(--border); }
[data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color:var(--border) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color:var(--text) !important; }
[data-theme="dark"] .stat-card { background:var(--surface); border-color:var(--border); }
/* headings + card-header titles must read light on dark surfaces */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color:var(--text-strong); }
[data-theme="dark"] .card-header { background:var(--surface); color:var(--text-strong); }
[data-theme="dark"] .card-header.bg-white, [data-theme="dark"] .card-header.bg-white span,
[data-theme="dark"] .card-header.bg-white strong { color:var(--text-strong); }
/* inventory toolbar / type-toggle hardcode #fff & greys in their inline <style> — re-theme here */
[data-theme="dark"] .inv-toolbar { background:var(--surface) !important; border-color:var(--border) !important; }
[data-theme="dark"] .inv-toolbar input, [data-theme="dark"] .inv-toolbar select { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
[data-theme="dark"] .inv-toolbar .divider { background:var(--border); }
[data-theme="dark"] .target-type-toggle .ttb { background:var(--surface); }
[data-theme="dark"] .inventory-progress-bar { background:var(--border); }