/* ============================================================
   NPW Analytics Dashboard — Enterprise Design System
   Brand red #DC2626 · Navy #0F1554 — matches npwdirect.com
   ============================================================ */

/* ── Light mode (default) ───────────────────────────────── */
:root {
  --navy:     #0F1554;
  --navy-d:   #0a0f3d;
  --red:      #DC2626;
  --red-l:    #ef4444;
  --bg:       #F0F2F7;
  --panel:    #ffffff;
  --panel-r:  #f7f8fc;
  --hover-bg: #eef1fa;
  --ink:      #1a2036;
  --muted:    #64748b;
  --line:     #dde3ef;
  --shadow:   rgba(0,0,0,0.08);
  --blue:     #1d4ed8;
  --green:    #15803d;
  --amber:    #b45309;
  --danger:   #b91c1c;
  --row-risk: #fef2f2;
  --row-good: #f0fdf4;
}

/* ── Dark mode ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #0d1021;
  --panel:    #141828;
  --panel-r:  #1a1f35;
  --hover-bg: #1e2440;
  --ink:      #e2e8f6;
  --muted:    #8892aa;
  --line:     #252c45;
  --shadow:   rgba(0,0,0,0.35);
  --row-risk: rgba(185,28,28,0.12);
  --row-good: rgba(21,128,61,0.10);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 24px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
p  { color: var(--muted); margin: 4px 0 0; }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--navy);
  border-bottom: 2px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

/* Hamburger — hidden on desktop, shown at the mobile breakpoint */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); }
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 21, 84, 0.45);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
}
.brand-sub {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 10px;
}

/* ── NPW Gearbox brand mark ─────────────────────────────── */
.brand-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 12px;
  color: #fff;               /* shift-gate strokes pick this up */
}
.gearbox-icon { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.gearbox-icon .gear-ring {
  transform-origin: 24px 24px;
  transition: transform 0.5s ease;
}
.brand:hover .gearbox-icon .gear-ring { transform: rotate(45deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.brand-tag {
  font-size: 8.5px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Login-card variant */
.auth-brandmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 2px;
  color: var(--ink);         /* shift-gate strokes pick this up */
}
.auth-brandmark .gearbox-icon { width: 34px; height: 34px; }
.auth-brandmark .auth-title {
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.auth-tagline {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}

/* ── Gearbox loading overlay ────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(15, 21, 84, 0.55);
  backdrop-filter: blur(2px);
}
.loading-overlay.active { display: flex; }
.gearset { position: relative; width: 104px; height: 78px; }
.gearset .gear { position: absolute; display: block; }
.gearset .gear-big {
  width: 64px; height: 64px;
  left: 0; top: 14px;
  animation: gear-spin 2.4s linear infinite;
}
.gearset .gear-small {
  width: 42px; height: 42px;
  left: 60px; top: 0;
  animation: gear-spin-rev 1.575s linear infinite; /* 42/64 of the big gear's period — meshed ratio */
}
@keyframes gear-spin     { to { transform: rotate(360deg); } }
@keyframes gear-spin-rev { from { transform: rotate(22.5deg); } to { transform: rotate(-337.5deg); } }
.loading-text {
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

/* ── Per-panel gear loading ─────────────────────────────── */
/* Small gearset pinned over an individual panel while its data is in
   flight; cleared per-visual as each one renders (see gearPanel in app.js). */
.gear-host { position: relative; }
.panel-loading {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: inherit;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(1px);
  color: var(--navy);          /* small gear + text pick this up */
}
[data-theme="dark"] .panel-loading {
  background: rgba(13,16,33,0.72);
  color: #e2e8f6;
}
.panel-loading .gearset { transform: scale(0.62); margin: -8px 0; }
.panel-loading .loading-text {
  color: currentColor;
  font-size: 10.5px;
  opacity: 0.75;
}

.top-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.top-nav-link {
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.top-nav-link:hover,
.top-nav-link.active {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

/* User dropdown */
.user-area { margin-left: auto; }
.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  position: relative;
  transition: background 0.15s;
}
.user-menu:hover,
.user-menu:focus-within {
  background: rgba(255,255,255,0.1);
}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-name {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
}
.chevron { color: rgba(255,255,255,0.5); }

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  z-index: 200;
  overflow: hidden;
}
.user-menu:focus-within .user-dropdown { display: block; }
.dropdown-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-r);
}
.dropdown-name { font-weight: 700; font-size: 14px; }
.dropdown-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.dropdown-item:hover { background: var(--hover-bg); }
.dropdown-item svg { color: var(--muted); flex-shrink: 0; }
.dropdown-signout { color: var(--danger); }
.dropdown-signout svg { color: var(--danger); }

/* ── Page body ──────────────────────────────────────────── */
.page-body {
  padding: 0 0 40px;
}

/* ── Alert ──────────────────────────────────────────────── */
.alert {
  padding: 12px 20px;
  margin: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}
.alert.error {
  background: #fef2f2;
  color: var(--danger);
  border-left-color: var(--danger);
}
.alert.success {
  background: #f0fdf4;
  color: var(--green);
  border-left-color: var(--green);
}

/* ── Filter bar ─────────────────────────────────────────── */
.filter-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
}
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.filter-select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  min-width: 140px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,21,84,0.1);
}
input.filter-select { min-width: 120px; }
.hidden { display: none !important; }

/* ── KPI strip ──────────────────────────────────────────── */
.kpi-strip {
  display: flex;
  gap: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  overflow-x: auto;
}
.kpi-card {
  flex: 1;
  min-width: 140px;
  padding: 16px 20px;
  border-right: 1px solid var(--line);
}
.kpi-card:last-child { border-right: 0; }
.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.kpi-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.kpi-value.navy   { color: var(--navy); }
.kpi-value.red    { color: var(--danger); }
.kpi-value.danger { color: var(--danger); }
.kpi-value.good   { color: var(--green); }
.kpi-value.green  { color: var(--green); }
.kpi-value.amber  { color: var(--amber); }
.kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.kpi-delta {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

/* ── Panels / cards ─────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.panel-head h2 { margin: 0; }
.panel-grid { display: grid; gap: 18px; }
.panel-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.panel-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.panel-grid.two-one { grid-template-columns: 2fr 1fr; }

/* ── Content area ─────────────────────────────────────────── */
.content-area {
  padding: 20px 24px;
}

.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 12px;
}

.period-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 10px;
}

/* ── Chart containers ─────────────────────────────────────── */
.chart-wrap {
  width: 100%;
  height: 260px;
  position: relative;
}
.chart-wrap.tall { height: 320px; }
.chart-wrap.short { height: 200px; }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--panel-r);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
td.num, th.num { text-align: right; }
td.bold { font-weight: 700; }
td.muted { color: var(--muted); }
td.small, .small { font-size: 12px; }
td.empty { color: var(--muted); text-align: center; padding: 24px; font-style: italic; }

table.dense th,
table.dense td { padding: 7px 8px; font-size: 12px; }

.total-row td {
  background: var(--bg);
  border-top: 2px solid var(--navy);
  font-weight: 600;
}

/* ── Toolbar above tables ─────────────────────────────────── */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.export-btns { display: flex; gap: 8px; }
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn-export:hover { background: var(--hover-bg); border-color: var(--navy); }

.tab-group { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.tab-btn {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, color 0.15s;
}
.tab-btn:not(:last-child) { border-right: 1px solid var(--border); }
.tab-btn:hover { background: var(--hover-bg); color: var(--ink); }
.tab-btn.active { background: var(--navy); color: #fff; }

/* ── Attainment / delta colors ────────────────────────────── */
.cell-pos  { color: var(--green); font-weight: 600; }
.cell-neg  { color: var(--danger); font-weight: 600; }
.cell-warn { color: var(--amber); font-weight: 600; }
/* Ops Detail: rows whose PO/transfer is already sitting on the dock */
.row-ondock td { background: rgba(245, 158, 11, 0.14); }
.ondock-chip   { background: rgba(245, 158, 11, 0.28); padding: 0 6px; border-radius: 4px; }
.muted     { color: var(--muted); }
.bold      { font-weight: 700; }

.attain-good { color: var(--green); font-weight: 700; }
.attain-mid  { color: var(--amber); font-weight: 700; }
.attain-bad  { color: var(--danger); font-weight: 700; }

.red   { color: var(--danger) !important; font-weight: 600; }
.green { color: var(--green)  !important; font-weight: 600; }
.amber { color: var(--amber)  !important; font-weight: 600; }

/* ── Pivot / accordion table ──────────────────────────────── */
.act-parent-row {
  cursor: pointer;
  background: var(--panel-r);
  user-select: none;
}
.act-parent-row:hover { background: var(--hover-bg); }
.act-parent-row.act-expanded { background: var(--hover-bg); }
.act-parent-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.act-expand-icon {
  display: inline-block;
  font-size: 9px;
  color: var(--muted);
  width: 12px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.act-parent-row:hover .act-expand-icon,
.act-parent-row.act-expanded .act-expand-icon { color: var(--navy); }
.act-child-row td { font-size: 12.5px; background: var(--panel); }
.act-child-label { padding-left: 28px; color: var(--muted); }
[data-theme="dark"] .act-child-row td { background: var(--panel); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  height: 36px;
  padding: 0 18px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--navy-d); }
.btn-primary.btn-full { width: 100%; height: 42px; }
.btn-primary-sm {
  height: 28px;
  padding: 0 12px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.btn-ghost {
  height: 36px;
  padding: 0 16px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-ghost:hover { background: var(--hover-bg); }
.btn-ghost-sm {
  height: 28px;
  padding: 0 10px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger-sm {
  height: 28px;
  padding: 0 10px;
  background: var(--row-risk);
  color: var(--danger);
  border: 1px solid rgba(185,28,28,0.25);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.btn-danger-sm:hover { background: #fee2e2; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.badge-blue  { background: #dbeafe; color: #1e40af; }
.badge-red   { background: #fee2e2; color: var(--danger); }
.badge-green { background: #dcfce7; color: #166534; }
.badge-gray  { background: #f1f5f9; color: #475569; }
.badge-amber { background: #fef3c7; color: #92400e; }

.link-soft { color: var(--ink); text-decoration: none; }
.link-soft:hover { color: var(--navy); text-decoration: underline; }

/* ── Slicer pill row (period selector etc.) ──────────────── */
.slicer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 2px;
}
.slicer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--panel-bg, #ffffff);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  box-shadow: 0 1px 2px rgba(15, 21, 84, 0.04);
}
.slicer-pill:hover { background: var(--hover-bg); border-color: var(--navy); }
.slicer-pill:active { transform: translateY(1px); }
.slicer-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 21, 84, 0.18);
}
.slicer-pill .slicer-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(15, 21, 84, 0.06);
  border-radius: 8px;
  padding: 2px 6px;
  line-height: 1;
}
.slicer-pill.active .slicer-num { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.slicer-pill.emphasis { font-weight: 700; letter-spacing: 0.4px; }
[data-theme="dark"] .slicer-pill { background: #1c2238; }
[data-theme="dark"] .slicer-pill:hover { background: #252d4a; }

/* ── Sales perf table column-group headers (Sales / Comp / Margin) ───── */
table.sales-perf-table thead th { text-align: center; vertical-align: middle; }
table.sales-perf-table thead th.num { text-align: right; }
table.sales-perf-table thead .group-sales  { background: var(--danger); color: #fff; }
table.sales-perf-table thead .group-comp   { background: var(--danger); color: #fff; }
table.sales-perf-table thead .group-margin { background: var(--danger); color: #fff; }
table.sales-perf-table thead tr:first-child th.group-sales  { border-right: 2px solid #ffffff44; }
table.sales-perf-table thead tr:first-child th.group-comp   { border-right: 2px solid #ffffff44; }
table.sales-perf-table tbody td:nth-child(n+2):nth-child(-n+5)  { background: rgba(220, 38, 38, 0.04); }
table.sales-perf-table tbody td:nth-child(n+6):nth-child(-n+8)  { background: rgba(220, 38, 38, 0.07); }
table.sales-perf-table tbody td:nth-child(n+9):nth-child(-n+13) { background: rgba(220, 38, 38, 0.04); }
[data-theme="dark"] table.sales-perf-table tbody td:nth-child(n+2):nth-child(-n+5)  { background: rgba(220, 38, 38, 0.07); }
[data-theme="dark"] table.sales-perf-table tbody td:nth-child(n+6):nth-child(-n+8)  { background: rgba(220, 38, 38, 0.12); }
[data-theme="dark"] table.sales-perf-table tbody td:nth-child(n+9):nth-child(-n+13) { background: rgba(220, 38, 38, 0.07); }

/* ── Toggle switch (admin Role: Allow Comparable Sl) ──────────── */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: background 0.18s;
}
.switch-slider::before {
  position: absolute; content: "";
  height: 16px; width: 16px;
  left: 3px; top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.switch input:checked + .switch-slider { background: var(--navy); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }

/* ── Sortable column headers ──────────────────────────────────── */
th.sortable { cursor: pointer; user-select: none; position: relative; }
th.sortable::after {
  content: "\2195"; /* ↕ */
  opacity: 0.35;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
}
th.sortable:hover::after { opacity: 0.7; }
th.sortable.sort-asc::after  { content: "\2191"; opacity: 1; }   /* ↑ */
th.sortable.sort-desc::after { content: "\2193"; opacity: 1; }   /* ↓ */

/* ── Drill-down toggle button (AAIA expansion) ──────────────── */
.drill-toggle {
  width: 20px; height: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.drill-toggle:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--navy); }
.drill-toggle:disabled { opacity: 0.5; cursor: wait; }
table.aaia-drill-table tr.aaia-cat-row    td { background: rgba(15, 21, 84, 0.04); }
table.aaia-drill-table tr.aaia-subcat-row td { background: rgba(15, 21, 84, 0.02); font-size: 12px; }
[data-theme="dark"] table.aaia-drill-table tr.aaia-cat-row    td { background: rgba(99, 102, 241, 0.07); }
[data-theme="dark"] table.aaia-drill-table tr.aaia-subcat-row td { background: rgba(99, 102, 241, 0.03); }

/* ── Grouped table column headers ───────────────────────── */
table.col-groups thead th { text-align: center; vertical-align: middle; }
table.col-groups thead th.num { text-align: right; }
table.col-groups thead .group-book { background: rgba(21, 128, 61, 0.06); color: #15803d;     }
table.col-groups thead .group-rep  { background: rgba(15, 21, 84, 0.06);  color: var(--navy); }
/* Book columns: 3-9; Rep columns: 10-18 */
table.col-groups tbody td:nth-child(n+3):nth-child(-n+9)   { background: rgba(21, 128, 61, 0.02); }
table.col-groups tbody td:nth-child(n+10):nth-child(-n+18) { background: rgba(15, 21, 84, 0.02);  }
[data-theme="dark"] table.col-groups thead .group-book { background: rgba(34, 197, 94, 0.12);  color: #bbf7d0; }
[data-theme="dark"] table.col-groups thead .group-rep  { background: rgba(99, 102, 241, 0.12); color: #c7d2fe; }
[data-theme="dark"] table.col-groups tbody td:nth-child(n+3):nth-child(-n+9)   { background: rgba(34, 197, 94, 0.04); }
[data-theme="dark"] table.col-groups tbody td:nth-child(n+10):nth-child(-n+18) { background: rgba(99, 102, 241, 0.04); }

/* ── Auth pages ─────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.auth-logo {
  text-align: center;
  line-height: 1;
  margin-bottom: 6px;
}
.auth-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
}
.auth-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 28px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Theme toggle ───────────────────────────────────────── */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  margin-left: 8px;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Auto-logout modal ──────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15,21,84,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-card {
  background: var(--panel);
  border-radius: 14px;
  padding: 40px 44px 36px;
  width: 380px;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  animation: modalIn 0.18s ease;
}
@keyframes modalIn {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.modal-icon-wrap { color: var(--amber); margin-bottom: 14px; }
.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.modal-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 26px;
}
.modal-body strong { color: var(--ink); }
.modal-actions { display: flex; gap: 10px; justify-content: center; }

/* Generic modal */
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 24px;
  width: 420px;
  max-width: 95vw;
  max-height: 92vh;              /* tall modals scroll inside themselves… */
  overflow-y: auto;
  overscroll-behavior: contain;  /* …without scrolling the page behind */
}
/* Wide variant for form-heavy modals (user create/edit): room for the
   three-column scope pickers, with the header pinned while scrolling. */
.modal-box.modal-wide { width: 900px; }
.modal-box.modal-wide .modal-head {
  position: sticky;
  top: -24px;                    /* cancel the box padding */
  margin: -24px -24px 18px;
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  z-index: 5;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }

/* ── Impersonation bar ───────────────────────────────────── */
.impersonate-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: #92400e;
  color: #fef3c7;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid #b45309;
}
[data-theme="dark"] .impersonate-bar {
  background: #78350f;
  border-bottom-color: #92400e;
}
.impersonate-bar strong { color: #ffffff; }
.impersonate-stop {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fef3c7;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.impersonate-stop:hover { background: rgba(255,255,255,0.25); }

/* ── Admin page ─────────────────────────────────────────── */
.admin-page {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 24px;
}
.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.row-actions { display: flex; gap: 6px; }
.required { color: var(--red); }

/* ── Page header strip ───────────────────────────────────── */
.page-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-header-title h1 { font-size: 20px; }
.page-header-title p  { margin: 0; }

/* ── AR aging bands ──────────────────────────────────────── */
.ar-current  { color: var(--green); font-weight: 600; }
.ar-30       { color: var(--ink); }
.ar-60       { color: var(--amber); font-weight: 600; }
.ar-90       { color: var(--danger); font-weight: 600; }
.ar-over90   { color: var(--danger); font-weight: 700; font-size: 13px; }

/* ── Location view ───────────────────────────────────────── */
.location-selector {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .topbar { gap: 12px; padding: 0 16px; }
  .nav-toggle { display: inline-flex; }

  /* Top nav becomes a slide-in drawer */
  .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 12px;
    background: var(--navy);
    box-shadow: 2px 0 20px rgba(0,0,0,0.35);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 100;
    overflow-y: auto;
  }
  .top-nav-link {
    font-size: 15px;
    padding: 12px 14px;   /* ~44px touch target */
    border-radius: 8px;
  }
  body.nav-open .top-nav { transform: translateX(0); }
  body.nav-open .nav-backdrop { display: block; }
  body.nav-open { overflow: hidden; }

  .user-name { display: none; }   /* avatar + chevron only, to save room */

  .kpi-strip { flex-wrap: wrap; }
  .kpi-card { min-width: 45%; }
  .panel-grid.two,
  .panel-grid.three,
  .panel-grid.two-one { grid-template-columns: 1fr; }
  .filter-bar { padding: 10px 16px; }
  .content-area { padding: 14px 16px; }
  .page-header { padding: 12px 16px; }

  /* Larger touch targets for in-page slicers/pills */
  .slicer-pill { padding: 9px 13px; }

  /* Pin the first column of dense tables so row labels stay visible
     while the numeric columns scroll horizontally. Backgrounds mirror each
     row type so scrolling cells don't bleed through the pinned label. */
  table.dense th:first-child,
  table.dense td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }
  table.dense thead th:first-child { z-index: 2; background: var(--panel-r); }
  table.dense .total-row td:first-child { background: var(--bg); }

  /* iOS zooms any focused input under 16px — keep form controls at 16px */
  .filter-select,
  input.filter-select,
  select.filter-select,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="date"] { font-size: 16px; }
}

/* ── Change-request floating action button ────────────────────────────── */
.cr-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: none; border-radius: 999px; background: var(--accent, #DC2626); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s; }
.cr-fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.cr-fab svg { flex-shrink: 0; }
@media (max-width: 640px) { .cr-fab span { display: none; } .cr-fab { padding: 13px; } }