*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Dark theme (default) */
  --bg: #130d1c; --surface: #1e1530; --surface2: #261d3a; --border: #352a4d;
  --text: #e2e0ef; --muted: #7c6f99; --accent: #d946ef;
  --green: #22c55e; --yellow: #eab308; --red: #ef4444; --amber: #f59e0b;
  --font: 'Inter', system-ui, sans-serif;
  /* Theme-coupled tokens (auto-flip in light mode) */
  --on-accent: #fff;            /* Text/icons on top of --accent */
  --strong: #fff;               /* Strong heading color (was hardcoded #fff) */
  --map-bg: #1a1025;            /* Behind tiles while loading */
  --map-tooltip-bg: rgba(19,13,28,0.88);
  --map-tooltip-text: #fff;
  --marker-stroke: #fff;        /* SVG marker outer ring */
  --overlay-veil: rgba(0,0,0,0.55);
  --shadow: 0 4px 14px rgba(0,0,0,0.35);
  --row-hover: rgba(255,255,255,0.04);
  --bench-stripe: rgba(245,158,11,0.22);
  --bench-stripe-border: #f59e0b;
}

:root[data-theme="light"] {
  --bg: #f6f5fa;
  --surface: #ffffff;
  --surface2: #f0eef6;
  --border: #d9d3e6;
  --text: #1f1733;
  --muted: #6b6584;
  --accent: #b91fd4;            /* Slightly darker magenta for contrast on light bg */
  --green: #15803d;
  --yellow: #b45309;
  --red: #b91c1c;
  --amber: #c2410c;
  --on-accent: #ffffff;
  --strong: #0f0a1f;
  --map-bg: #e8e4f0;
  --map-tooltip-bg: rgba(255,255,255,0.94);
  --map-tooltip-text: #1f1733;
  --marker-stroke: #6b6584;
  --overlay-veil: rgba(20,14,35,0.42);
  --shadow: 0 4px 14px rgba(15,10,31,0.12);
  --row-hover: rgba(15,10,31,0.04);
  --bench-stripe: rgba(245,158,11,0.18);
  --bench-stripe-border: #b45309;
}

html, body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }

/* CUSTOM SCROLLBARS — themed for dark UI */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* HEADER */
.header { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 52px; position: sticky; top: 0; z-index: 1600; gap: 12px; }
/* Header z-index sits above Manage Data view (1500) so its dropdown menus (Plan, Edit) remain
   usable while Manage Data is open. The header bar itself stays visible in both contexts; the
   raise mainly fixes the previously-buried dropdowns. */
.header-brand { font-size: 15px; font-weight: 800; color: var(--strong); letter-spacing: -0.5px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); background: rgba(217,70,239,0.12); padding: 2px 8px; border-radius: 100px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.vsep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.btn { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 6px; cursor: pointer; border: none; font-family: var(--font); transition: opacity 0.15s; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { opacity: 0.85; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn-amber { background: rgba(245,158,11,0.15); color: var(--amber); border: 1px solid rgba(245,158,11,0.35); }
.btn-amber:hover { background: rgba(245,158,11,0.25); }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn:hover { color: var(--text); border-color: var(--muted); }

/* VIEW TOGGLE */
.view-toggle { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle button { font-size: 12px; font-weight: 600; padding: 5px 12px; border: none; cursor: pointer; background: transparent; color: var(--muted); font-family: var(--font); white-space: nowrap; }
.view-toggle button.active { background: var(--accent); color: var(--on-accent); }

/* TOOLBAR — mode controls + map layer toggles, sits below header */
/* Toolbar wrapper: positioned over the top of the app-body so it doesn't claim layout height.
   The visible element is the .layer-bar pill, right-anchored.
   When the onboarding nudge is showing, the nudge sits ABOVE the toolbar in z-order;
   the toolbar stays at top:52px (hidden behind the nudge, which is fine since the map below
   has no data yet). */
.toolbar { position: fixed; top: calc(52px + var(--nudge-h, 0px) + var(--rollup-h, 0px)); right: 12px; z-index: 1500; padding: 0; background: transparent; pointer-events: none; transition: top 0.18s ease, opacity 0.18s ease; }
/* When the right-side SE assignments panel is open, hide the floating map toolbar so it
   doesn't overlap the panel's close button. The descendant rule is required because
   .toolbar > * sets pointer-events:auto, which would otherwise leave the invisible toolbar
   children swallowing clicks meant for the panel header. */
body:has(#rightPanel.open) .toolbar,
body:has(#rightPanel.open) .toolbar > * { opacity: 0; pointer-events: none; visibility: hidden; }
.toolbar > * { pointer-events: auto; }

/* Layer-pill bar hangs from the right side under the header, sized to content. */
.layer-bar { padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 6px; }
.toolbar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-btn { font-size: 12px; padding: 6px 12px; }
.toolbar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-right: 4px; }
.toolbar-layers { gap: 4px; }
.layer-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--border); color: var(--muted); transition: color 0.15s, border-color 0.15s, background 0.15s; user-select: none; white-space: nowrap; }
.layer-pill:hover { color: var(--text); border-color: var(--muted); }
.layer-pill input[type=checkbox] { display: none; }
.toolbar-layers label:has(input[data-role="SE"]:checked)       { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.08); }
.toolbar-layers label:has(input[data-role="AE"]:checked)       { border-color: #3b82f6; color: #3b82f6; background: rgba(59,130,246,0.08); }
.toolbar-layers label:has(input[data-role="RD"]:checked)       { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.08); }
.toolbar-layers label:has(input[data-role="RVP"]:checked)      { border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,0.08); }
.toolbar-layers label:has(input[data-role="SELeader"]:checked) { border-color: #d946ef; color: #d946ef; background: rgba(217,70,239,0.08); }
.toolbar-layers label:has(input[data-role="SERD"]:checked)      { border-color: #d946ef; color: #d946ef; background: rgba(217,70,239,0.08); }
.toolbar-layers label:has(input[data-role="SEVP"]:checked)      { border-color: #d946ef; color: #d946ef; background: rgba(217,70,239,0.08); }
.toolbar-vsep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; align-self: center; }

/* Map Display dropdown trigger - pill-shaped, sits in the layer bar */
.layer-pill-menu { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600; transition: background 0.1s, border-color 0.1s, color 0.1s; line-height: 1.5; }
.layer-pill-menu:hover { border-color: var(--accent); color: var(--accent); }
.menu-wrap.open .layer-pill-menu { border-color: var(--accent); color: var(--accent); background: rgba(217,70,239,0.08); }
.layer-pill-menu .menu-caret-icon { font-size: 10px; }

/* Display-options rows inside the Map Display dropdown */
.display-toggle-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text); border-radius: 6px; transition: background 0.1s; }
.display-toggle-row:hover { background: var(--surface2); }
.display-toggle-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* Marker size slider in the layer bar */
.layer-pill-slider { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface); }
.layer-pill-slider input[type="range"] { width: 90px; height: 4px; cursor: pointer; accent-color: var(--accent); }

/* Persistent name labels next to map markers (when 'Names' toggle is on) */
.leaflet-tooltip.marker-name-label {
  background: var(--map-tooltip-bg);
  border: 1px solid var(--border);
  color: var(--map-tooltip-text);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.leaflet-tooltip.marker-name-label::before { display: none; }

/* APP BODY — three-panel flex layout */
/* Layer-bar is floating, so app-body claims the toolbar's old vertical space.
   The .has-nudge / .rebalance-active modifiers shave additional rows off when those banners show.
   Nudge actual height is measured at runtime and exposed as --nudge-h; defaults to 0 when hidden. */
.app-body { display: flex; height: calc(100vh - 52px - var(--nudge-h, 0px) - var(--rollup-h, 0px)); overflow: hidden; position: relative; }
.app-body.rebalance-active { height: calc(100vh - 52px - var(--nudge-h, 0px) - var(--rollup-h, 0px) - 40px); }
/* When map is collapsed, the right panel should stretch to fill the freed space */
.app-body.map-collapsed .map-area { flex: 0 0 0; width: 0; overflow: hidden; }
.app-body.map-collapsed .right-panel { width: 100%; max-width: none; left: 0; border-left: none; }

/* REBALANCE BANNER */
/* ONBOARDING NUDGE — shown to a user on a fresh empty plan.
   Absolutely positioned over the map area so it doesn't claim layout height (no map shift).
   Sits below the header (z-index 1200) but above the floating Map Display pill bar (z 850). */
/* In document flow so it cleanly claims its own row beneath the header (no overlap with the
   sidebar collapse button). Soft accent-tinted background, professional feel.
   z-index 900 puts it above the floating Map Display pill (z 850) so the pill hides behind
   it - that's intentional, the user has no data on the map yet so the pill is irrelevant. */
.onboarding-nudge { background: linear-gradient(90deg, rgba(217,70,239,0.10), rgba(217,70,239,0.04)); border-bottom: 1px solid rgba(217,70,239,0.30); padding: 12px 20px; position: relative; z-index: 900; }
.onboarding-nudge-inner { display: flex; align-items: center; gap: 14px; max-width: 1400px; margin: 0 auto; }
.onboarding-nudge-icon { font-size: 22px; color: var(--accent); animation: nudgePulse 1.6s ease-in-out infinite; flex-shrink: 0; margin-right: -6px; }
.onboarding-nudge-body { flex: 1; min-width: 0; }
.onboarding-nudge-title { font-size: 13px; font-weight: 800; color: var(--strong); }
.onboarding-nudge-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
@keyframes nudgePulse {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(4px); opacity: 1; }
}
.onboarding-nudge .btn { font-size: 12px; padding: 6px 12px; }

.rebalance-banner { height: 40px; background: rgba(245,158,11,0.12); border-bottom: 1px solid rgba(245,158,11,0.35); color: var(--amber); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 20px; }

/* Run 12: ROI rollup strip. Compact 1-line summary in normal mode, expands to comparison
   table when a proposed scenario exists. Sits between rebalance banner and the app body. */
.roi-rollup { background: var(--surface2); border-bottom: 1px solid var(--border); padding: 8px 20px; position: sticky; top: 52px; z-index: 1400; }
.roi-rollup.proposed { background: linear-gradient(90deg, rgba(217,70,239,0.06), rgba(217,70,239,0.02)); border-bottom-color: rgba(217,70,239,0.25); }
.roi-rollup-inner { display: flex; align-items: center; gap: 22px; max-width: 1400px; margin: 0 auto; flex-wrap: wrap; }
.roi-stat { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.roi-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
.roi-stat-val { font-size: 14px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.roi-stat-val.is-risk { color: var(--amber); }
.roi-stat-val.is-good { color: var(--green); }
.roi-stat-divider { width: 1px; align-self: stretch; background: var(--border); margin: 2px 0; }
.roi-rollup-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 800; padding-right: 8px; border-right: 1px solid var(--border); }

/* Comparison mode: 3 column rows (Current / Proposed / Delta) per metric. */
.roi-rollup-compare { display: grid; grid-template-columns: max-content repeat(3, minmax(90px, 130px)); gap: 4px 16px; align-items: center; flex: 1; max-width: 720px; }
.roi-rollup-compare .col-hdr { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
.roi-rollup-compare .row-lbl { font-size: 11px; color: var(--muted); font-weight: 600; padding-right: 8px; }
.roi-rollup-compare .cell { font-size: 13px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.roi-rollup-compare .cell.delta-good { color: var(--green); }
.roi-rollup-compare .cell.delta-bad  { color: var(--red); }
.roi-rollup-compare .cell.delta-neutral { color: var(--muted); }
.roi-rollup-compare .row-summary { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.roi-rollup-compare .row-summary .row-lbl { font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px; }
.roi-rollup-compare .row-summary .cell.summary-good { color: var(--green); font-size: 14px; }
.roi-rollup-compare .row-summary .cell.summary-bad { color: var(--red); font-size: 14px; }
.banner-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245,158,11,0.7); animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.7); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

/* MAP COLLAPSE/EXPAND BUTTONS — live on the right-panel header, aligned with close button */
.map-collapse-btn, .map-expand-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.map-collapse-btn:hover, .map-expand-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--muted); }

/* SIDEBAR */
.sidebar { width: 320px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; padding: 16px; display: flex; flex-direction: column; position: relative; transition: width 0.18s ease; min-width: 0; }
.sidebar.collapsed { width: 0 !important; padding: 0; border-right: none; overflow: hidden; }
.sidebar.resizing { transition: none; user-select: none; }
.sidebar .stats-bar { flex-direction: column; margin-bottom: 12px; }
.sidebar .stat-card { padding: 10px 12px; }
.sidebar .stat-val { font-size: 22px; }
.sidebar-controls { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sidebar-btn { width: 100%; text-align: left; }
.sidebar .region-grid { display: flex; flex-direction: column; gap: 8px; }
.sidebar .region-card { padding: 12px; }

/* SIDEBAR RESIZE HANDLE — sits on the right edge, drag to resize, double-click to collapse */
.sidebar-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; background: transparent; transition: background 0.15s; }
.sidebar-resizer::after { content: ''; position: absolute; top: 0; left: 2px; width: 2px; height: 100%; background: transparent; transition: background 0.15s; }
.sidebar-resizer:hover::after, .sidebar.resizing .sidebar-resizer::after { background: var(--accent); }

/* SIDEBAR TOGGLE BUTTON — floating, visible when sidebar is collapsed */
.sidebar-toggle { position: absolute; top: 14px; left: 0; width: 24px; height: 40px; background: var(--surface); border: 1px solid var(--border); border-left: none; border-radius: 0 8px 8px 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 1000; transition: background 0.15s, color 0.15s, width 0.15s, left 0.18s ease; box-shadow: 2px 0 8px rgba(0,0,0,0.25); }
.sidebar-toggle:hover { background: var(--surface2); color: var(--accent); width: 28px; }

/* Collapse button: anchored to the OUTSIDE right edge of the sidebar so it never overlaps content. */
.sidebar-toggle-collapse { left: var(--sidebar-w, 320px); border-radius: 0 8px 8px 0; border-left: none; transform: translateX(-1px); }


/* MAP */
.map-area { flex: 1; position: relative; min-width: 0; }
#map { width: 100%; height: 100%; }
/* Map hint pill ("Click a region to view SE assignments") — flips with the theme. */
.map-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--map-tooltip-bg); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 100px; pointer-events: none; z-index: 400; transition: opacity 0.3s; backdrop-filter: blur(6px); }
.map-hint.hidden { opacity: 0; }

/* Hide the centered hint pill on narrower viewports where it would collide
   with the bottom-right legend. The legend wins because it carries info. */
@media (max-width: 1100px) {
  .map-hint { display: none; }
}

/* STATE ASSIGN POPUP (edit regions mode) */
.state-assign-leaflet-popup .leaflet-popup-content-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 0; }
.state-assign-leaflet-popup .leaflet-popup-content { margin: 12px 14px; }
.state-assign-leaflet-popup .leaflet-popup-tip { background: var(--surface); border: 1px solid var(--border); }
.state-assign-popup .state-assign-title { font-size: 13px; font-weight: 800; color: var(--strong); margin-bottom: 8px; }
.state-assign-popup .state-assign-buttons { display: flex; flex-direction: column; gap: 4px; }
.state-assign-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; font-family: var(--font); transition: background 0.12s, border-color 0.12s; }
.state-assign-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.state-assign-btn.current { border-color: var(--accent); color: var(--accent); }
.state-assign-btn.unassign { color: var(--muted); margin-top: 2px; }
.state-assign-btn.unassign:hover { background: var(--red); color: var(--on-accent); border-color: var(--red); }
.state-assign-divider { height: 1px; background: var(--border); margin: 10px 0 8px; }
.state-assign-new-region { width: 100%; background: transparent; color: var(--accent); border: 1px dashed var(--accent); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.12s; }
.state-assign-new-region:hover { background: var(--accent); color: var(--on-accent); border-style: solid; }

/* MAP LEGEND */
.map-legend { position: absolute; bottom: 32px; right: 22px; background: var(--map-tooltip-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); z-index: 400; pointer-events: none; }
.map-legend .legend-title { font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; margin-right: 2px; }
.map-legend .legend-item { display: flex; align-items: center; gap: 5px; }
.map-legend .legend-swatch { display: inline-block; width: 14px; height: 10px; border-style: solid; border-width: 2px; border-radius: 2px; background: var(--row-hover); }

/* RIGHT PANEL */
.right-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 920px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s ease; z-index: 1100; }
.right-panel.resizing { transition: none; user-select: none; }

/* Right-panel resize handle on the left edge */
.right-panel-resizer { position: absolute; top: 0; left: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; background: transparent; transition: background 0.15s; }
.right-panel-resizer::after { content: ''; position: absolute; top: 0; left: 2px; width: 2px; height: 100%; background: transparent; transition: background 0.15s; }
.right-panel-resizer:hover::after, .right-panel.resizing .right-panel-resizer::after { background: var(--accent); }
.right-panel.open { transform: translateX(0); }
.right-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface2); gap: 10px; }
.right-panel-title { font-size: 14px; font-weight: 700; color: var(--strong); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right-panel-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.right-panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; }
.right-panel-body .table-wrap { overflow-x: auto; }

/* STATS BAR (default — used in sidebar, overrides via .sidebar above) */
.stats-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }
.stat-val { font-size: 32px; font-weight: 800; color: var(--strong); letter-spacing: -1.5px; line-height: 1; }
.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 5px; }

/* DIFF BANNER */
.diff-banner { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }
.diff-banner-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--amber); margin-bottom: 10px; }
.diff-list { display: flex; flex-wrap: wrap; gap: 8px; }
.diff-item { font-size: 12px; background: var(--surface2); border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; }
.diff-item strong { color: var(--text); }
.diff-gained { color: var(--green); font-weight: 700; }
.diff-lost { color: var(--red); font-weight: 700; }

/* SECTION TITLE */
.section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; }

/* TABLE */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 28px; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.se-row { cursor: pointer; }
.se-row:hover td { background: var(--surface2); }
.se-row td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.se-row.tbh td { color: var(--muted); border-bottom-style: dashed; }
.se-row.unassigned td { color: var(--red); }
.se-row td:first-child { font-weight: 600; }
.chevron { display: inline-block; font-size: 10px; color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }

/* SE name cell: chevron in its own column. Name takes content width; aux icons sit inline next to name.
   Names wrap on word boundaries only (e.g. between first and last name). overflow-wrap (not word-break)
   prevents Chrome from splitting inside a word when the cell is narrow. */
.se-name-cell { display: flex; align-items: flex-start; gap: 6px; flex-wrap: nowrap; min-width: 130px; }
.se-name-cell .chevron { line-height: 1.5; padding-top: 2px; flex-shrink: 0; }
.se-name-text { min-width: 0; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.se-name-aux { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding-top: 1px; white-space: nowrap; }
.se-row.open .chevron, .chevron.open { transform: rotate(90deg); }
@keyframes seRowPulse {
  0%   { background: rgba(245,158,11,0.22); box-shadow: inset 0 0 0 1px #f59e0b; }
  70%  { background: rgba(245,158,11,0.10); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.4); }
  100% { background: transparent;           box-shadow: inset 0 0 0 1px transparent; }
}
.se-row.highlight td { animation: seRowPulse 2s ease-out forwards; }
.city-cell { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }

/* EXPAND PANEL */
.expand-row td { padding: 0; background: var(--surface2); border-bottom: 1px solid var(--border); }
.expand-inner { display: none; padding: 14px 20px 14px 44px; }
.expand-inner.open { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Single-column variant for the AE-grouped view (replaces the old two-column Accounts | AEs layout). */
.expand-inner.ae-grouped.open { display: flex; flex-direction: column; gap: 12px; }
.expand-col-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }

/* AE group inside an SE expand row: header + indented account lines */
.ae-group { display: flex; flex-direction: column; gap: 4px; }
.ae-group-header { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.ae-group-icon { color: var(--accent); font-size: 12px; flex-shrink: 0; }
.ae-group-summary { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ae-group-accounts { padding-left: 22px; display: flex; flex-direction: column; }
.ae-group-unassigned .ae-group-icon { color: var(--red); }

.ae-acct-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text); border-bottom: 1px dashed var(--border); }
.ae-acct-row:last-child { border-bottom: none; }
.ae-acct-row.changed { border-left: 2px solid var(--amber); padding-left: 6px; margin-left: -8px; }
.ae-acct-row.unassigned-acct { color: var(--red); }

.expand-rds-footer { font-size: 11px; color: var(--muted); padding: 6px 0 0; border-top: 1px dashed var(--border); margin-top: 4px; }
.expand-rds-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text); margin-right: 6px; font-size: 10px; }
.expand-item { font-size: 12px; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.expand-name-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.complexity-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); }
.dt-name-with-dot { display: flex; align-items: center; gap: 6px; min-width: 180px; }
.dt-name-with-dot .dt-input { min-width: 140px; }
.weighted-suffix { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.expand-item:last-child { border-bottom: none; }
.expand-item.changed { border-left: 2px solid var(--amber); padding-left: 6px; margin-left: -8px; }
.expand-item.unassigned-acct { color: var(--red); }
/* Note indicator button in account drill-down lists */
.note-icon { display: inline-block; font-size: 12px; margin-left: 6px; cursor: pointer; opacity: 0.85; background: transparent; border: none; color: inherit; padding: 0 2px; line-height: 1; transition: opacity 0.15s, transform 0.15s; font-family: var(--font); vertical-align: baseline; }
.note-icon:hover { opacity: 1; transform: scale(1.2); }
.note-icon:focus { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* NOTES MODAL */
.notes-overlay { position: fixed; inset: 0; background: var(--overlay-veil); z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.notes-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 540px; max-width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.notes-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notes-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--strong); }
.notes-body { flex: 1; overflow-y: auto; padding: 20px; font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.notes-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.notes-body a:hover { opacity: 0.85; }
.notes-body .notes-empty { color: var(--muted); font-style: italic; }
.notes-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* Notes input in Manage Data accounts table */
.dt-input.dt-notes { min-width: 180px; max-width: 320px; }

/* Color picker in Manage Data regions table */
.dt-color { width: 32px; height: 26px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface2); cursor: pointer; padding: 2px; flex-shrink: 0; }

/* Read-only feature list cell (can be long) */
.region-features-cell { font-size: 11px; color: var(--muted); line-height: 1.55; max-width: 420px; word-break: break-word; padding: 6px 10px; }

/* Expandable team rows in Manage Data */
.md-team-row { cursor: pointer; }
.md-team-row:hover td { background: var(--surface2); }
.team-expand td { background: var(--surface2); border-bottom: 1px solid var(--border); }
.team-expand-cell { padding: 10px 18px !important; }
.team-expand-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.team-expand-row { display: grid; grid-template-columns: 1fr 120px 1fr 1fr; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }
.team-expand-row:last-child { border-bottom: none; }
.team-expand-acct { font-weight: 600; color: var(--text); }
.team-expand-meta { color: var(--muted); font-size: 11px; }

/* Region expand two-column layout: accounts on left, people on right */
.region-expand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.region-expand-col { min-width: 0; }
.region-expand-person { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }
.region-expand-person:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .region-expand-grid { grid-template-columns: 1fr; }
}
.se-select { font-size: 11px; font-family: var(--font); background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; cursor: pointer; max-width: 130px; }
.se-select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* BADGES */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.badge-green  { background: rgba(34,197,94,0.12);   color: var(--green); }
.badge-yellow { background: rgba(234,179,8,0.12);   color: var(--yellow); }
.badge-red    { background: rgba(239,68,68,0.12);   color: var(--red); }
.badge-muted  { background: rgba(124,111,153,0.12); color: var(--muted); }

/* Run 12: ROI cells + coverage ratio badge. Mirrors badge sizing for visual consistency. */
.roi-cell { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text); }
.roi-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.roi-badge.roi-green     { background: rgba(34,197,94,0.12);  color: var(--green); }
.roi-badge.roi-amber-low  { background: rgba(234,179,8,0.12); color: var(--yellow); }
.roi-badge.roi-amber-high { background: rgba(234,179,8,0.12); color: var(--yellow); }
.roi-badge.roi-red       { background: rgba(239,68,68,0.12); color: var(--red); }
.roi-badge.roi-unknown   { background: rgba(124,111,153,0.12); color: var(--muted); }

/* REGIONAL FOOTER */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.region-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; transition: padding 0.15s; }
.region-card.collapsed { padding: 10px 14px; }
.region-card.collapsed .region-stat { display: none; }
.region-card.collapsed .region-header { margin-bottom: 0; }
.region-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; cursor: pointer; user-select: none; }
.region-header:hover .region-name { color: var(--accent); }
.region-name { transition: color 0.1s; }
.region-name { font-size: 14px; font-weight: 700; color: var(--strong); display: flex; align-items: center; gap: 8px; }
.region-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.region-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.region-stat:last-child { border-bottom: none; }
.region-key { color: var(--muted); flex-shrink: 0; }
.region-val { font-weight: 600; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* REBALANCE */
.remove-se-btn { font-size: 11px; padding: 1px 6px; border-radius: 3px; cursor: pointer; background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.28); font-family: var(--font); margin-left: 8px; vertical-align: middle; line-height: 1.4; }
.remove-se-btn:hover { background: rgba(239,68,68,0.2); }
.add-se-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.add-se-input { font-size: 12px; font-family: var(--font); background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; }
.add-se-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* SETTINGS */
.settings-overlay { position: fixed; inset: 0; background: var(--overlay-veil); z-index: 2000; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; }
.settings-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 540px; max-width: 100%; padding: 24px; }
.settings-section { margin-bottom: 24px; }
.settings-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.settings-row input[type=color] { width: 32px; height: 28px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface2); cursor: pointer; padding: 2px; flex-shrink: 0; }
.del-btn { background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.28); border-radius: 4px; font-size: 13px; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.del-btn:hover { background: rgba(239,68,68,0.2); }

/* LAYER TOGGLES */
.layer-toggles { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.layer-toggles label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); transition: color 0.15s, border-color 0.15s, background 0.15s; user-select: none; }
.layer-toggles label:hover { color: var(--text); border-color: var(--muted); }
.layer-toggles input[type=checkbox] { display: none; }

/* Checked pill accent per role */
.layer-toggles label:has(input[data-role="SE"]:checked)       { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.08); }
.layer-toggles label:has(input[data-role="AE"]:checked)       { border-color: #3b82f6; color: #3b82f6; background: rgba(59,130,246,0.08); }
.layer-toggles label:has(input[data-role="RD"]:checked)       { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.08); }
.layer-toggles label:has(input[data-role="RVP"]:checked)      { border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,0.08); }
.layer-toggles label:has(input[data-role="SELeader"]:checked) { border-color: #d946ef; color: #d946ef; background: rgba(217,70,239,0.08); }

/* LEAFLET OVERRIDES */
/* Leaflet zoom control (+/-) follows our theme. Default Leaflet styling is hardcoded white. */
.leaflet-bar { border: 1px solid var(--border) !important; box-shadow: var(--shadow); }
/* Push the top-right zoom control down so it doesn't sit under the floating layer-bar pill
   (and further down when the onboarding nudge is visible). */
.leaflet-top.leaflet-right { top: calc(56px + var(--nudge-h, 0px)); transition: top 0.18s ease; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border);
}
.leaflet-bar a:hover { background: var(--surface2); color: var(--accent); }
.leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--muted); opacity: 0.6; }

/* Override Leaflet's default tooltip styling so all map tooltips follow our theme */
.leaflet-tooltip { background: var(--map-tooltip-bg); border: 1px solid var(--border); color: var(--map-tooltip-text); font-family: var(--font); box-shadow: var(--shadow); }
.leaflet-tooltip-top::before  { border-top-color: var(--border) !important; }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--border) !important; }
.leaflet-tooltip-left::before  { border-left-color: var(--border) !important; }
.leaflet-tooltip-right::before { border-right-color: var(--border) !important; }

.leaflet-tooltip.region-label { background: var(--map-tooltip-bg); border: 1px solid var(--border); color: var(--map-tooltip-text); font-weight: 700; font-size: 13px; font-family: var(--font); box-shadow: none; padding: 4px 12px; border-radius: 6px; }
.leaflet-tooltip.region-label::before { display: none; }
.leaflet-tooltip.se-marker-tooltip { background: var(--map-tooltip-bg); border: 1px solid var(--border); color: var(--map-tooltip-text); font-size: 12px; font-family: var(--font); box-shadow: var(--shadow); padding: 7px 10px; border-radius: 7px; line-height: 1.55; white-space: nowrap; }
.leaflet-tooltip.se-marker-tooltip::before { border-top-color: var(--border); }
.leaflet-tooltip.se-marker-tooltip strong { color: var(--map-tooltip-text); font-size: 13px; }
.leaflet-tooltip.se-marker-tooltip .tt-status { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.leaflet-container { font-family: var(--font); background: var(--map-bg); }

/* ── SETTINGS TABS ── */
.settings-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 0; gap: 2px; }
.settings-tab { font-size: 12px; font-weight: 700; font-family: var(--font); padding: 8px 14px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; margin-bottom: -1px; }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-tab-panel { /* inherits display:block or display:none inline */ }

/* ── PERSONNEL SECTION (inside settings) ── */
.personnel-group { padding-bottom: 4px; }
.personnel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.personnel-row:last-of-type { border-bottom: none; }
.personnel-row.personnel-inactive { opacity: 0.5; }
.personnel-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; flex-wrap: wrap; }
.personnel-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.personnel-city { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.personnel-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── PERSON EDIT MODAL ── */
.person-edit-overlay { position: fixed; inset: 0; background: var(--overlay-veil); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.person-edit-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 380px; max-width: 100%; display: flex; flex-direction: column; }
.pe-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.pe-title { font-size: 15px; font-weight: 800; color: var(--strong); }
.pe-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pe-label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }
.pe-label-inline { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.pe-label-inline input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.pe-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }

/* ── CLICKABLE PERSON NAMES IN TABLE ── */
.person-link { cursor: pointer; border-bottom: 1px dashed var(--muted); transition: color 0.12s, border-color 0.12s; }
.person-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ae-clickable { cursor: pointer; transition: color 0.12s; }
.ae-clickable:hover { color: var(--accent); }

/* ── UNASSIGNED / NEEDS-ASSIGNMENT BADGE ── */
.needs-assign-badge { color: var(--red); font-size: 12px; font-weight: 600; }

/* ── MANAGE DATA VIEW ── */
.manage-data-view { position: fixed; inset: 52px 0 0 0; background: var(--surface); z-index: 1500; display: flex; flex-direction: column; }
.manage-data-header { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--surface2); border-bottom: 2px solid var(--border); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.manage-data-title { font-size: 15px; font-weight: 800; color: var(--strong); flex-shrink: 0; }
.manage-data-tabs { display: flex; gap: 3px; background: var(--bg); border-radius: 8px; padding: 3px; }
.md-tab { font-size: 12px; font-weight: 700; font-family: var(--font); padding: 5px 16px; border: none; border-radius: 5px; cursor: pointer; background: transparent; color: var(--muted); transition: background 0.15s, color 0.15s; white-space: nowrap; }
.md-tab.active { background: var(--accent); color: var(--on-accent); }
.md-tab:hover:not(.active) { color: var(--text); background: var(--row-hover); }
.manage-data-hdr-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.manage-data-body { flex: 1; overflow: auto; padding: 0; }

/* ── DATA TABLE (dense spreadsheet style) ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface2); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table thead th.dt-actions { text-align: right; }
.data-table thead th.quota-computed-hdr { color: var(--accent); opacity: 0.75; }
/* Stripe only the EVEN visible data rows (skips hidden expand rows on Regions/Teams).
   :nth-child(2n of .dt-row) ensures the first .dt-row is always clean, so a single-row
   table never shows the darker stripe. */
.data-table tbody tr:nth-child(2n of .dt-row) { background: var(--row-hover); }
.data-table tbody tr:hover { background: var(--surface2); }
.dt-row td { padding: 3px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dt-row-inactive { opacity: 0.4; }

/* NEW ROW FLASH — when a row is just added via + Add Person / + Add Account */
@keyframes dtRowFlash {
  0%   { background: rgba(217,70,239,0.35); box-shadow: inset 3px 0 0 var(--accent); }
  60%  { background: rgba(217,70,239,0.18); box-shadow: inset 3px 0 0 var(--accent); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.data-table tbody tr.dt-row-new,
.data-table tbody tr.dt-row-new:nth-child(even) { animation: dtRowFlash 2.2s ease-out forwards; }
.dt-input { font-size: 12px; font-family: var(--font); background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; width: 100%; min-width: 80px; box-sizing: border-box; transition: border-color 0.1s, background 0.1s; }
.dt-input:hover { border-color: var(--border); }
.dt-input:focus { border-color: var(--accent); background: var(--surface2); outline: none; }
.dt-input.dt-num { min-width: 70px; max-width: 110px; }
.dt-select { font-size: 12px; font-family: var(--font); background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 4px; padding: 3px 4px; width: 100%; min-width: 80px; cursor: pointer; transition: border-color 0.1s, background 0.1s; }
.dt-select:hover { border-color: var(--border); background: var(--surface2); }
.dt-select:focus { border-color: var(--accent); background: var(--surface2); outline: none; }
.dt-center { text-align: center; }
.dt-actions { text-align: right; white-space: nowrap; padding-right: 10px !important; }
.dt-remove-btn { background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.28); border-radius: 4px; font-size: 11px; width: 22px; height: 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.dt-remove-btn:hover { background: rgba(239,68,68,0.22); }
.quota-computed { color: var(--muted); font-size: 11px; white-space: nowrap; min-width: 90px; }
.quota-ann { color: var(--muted); font-size: 10px; opacity: 0.75; }

/* ── QUOTA SETTINGS (inside Settings panel) ── */
.quota-levels { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.quota-level-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); padding: 5px 0; cursor: pointer; user-select: none; }
.quota-level-label input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* HEADER ORG STATS — inline pills */
/* Center stats on the viewport, not on the flex remaining space, so they read as truly centered
   regardless of how wide the brand on the left or the actions on the right become. */
.header-stats { display: flex; align-items: center; gap: 16px; padding: 0 14px; flex-shrink: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.header-stats > * { pointer-events: auto; }
.header-stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; }
.header-stat-val { font-size: 16px; font-weight: 800; color: var(--strong); letter-spacing: -0.3px; }
.header-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
@media (max-width: 1100px) {
  .header-stat-lbl { display: none; }
  .header-stats { gap: 10px; padding: 0 8px; }
}
@media (max-width: 820px) {
  .header-stats { display: none; }
}

/* EDIT MENU DROPDOWN */
.menu-wrap { position: relative; }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; box-sizing: border-box; }
.menu-caret { font-size: 10px; color: var(--muted); transition: transform 0.15s; }
.menu-wrap.open .menu-caret { transform: rotate(180deg); color: var(--accent); }

/* FA chevron used as the dropdown caret on Menu + Plan triggers (sized + colored consistently). */
.menu-caret-icon { font-size: 11px; transition: transform 0.15s; opacity: 0.85; }
.menu-btn .menu-caret-icon { color: inherit; }
.btn-primary .menu-caret-icon { color: var(--on-accent); }
.menu-wrap.open .menu-caret-icon { transform: rotate(180deg); }
/* When the menu is open the trigger gets a light surface2 background. Make sure the chevron
   uses an accent color in that state so it remains visible (otherwise white-on-white). */
.menu-wrap.open .menu-btn .menu-caret-icon,
.menu-wrap.open.btn-primary .menu-caret-icon { color: var(--accent); }
.menu-wrap.open .menu-btn { background: var(--surface2); color: var(--accent); }
/* Cap the dropdown height to (viewport - header - small gap) and scroll internally if longer.
   Without this, an over-tall menu would extend off the bottom of the screen with no way to reach
   its lower items (the page scroll happens behind the absolute-positioned dropdown). */
.menu-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 1500; display: none; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.menu-dropdown-right { left: auto; right: 0; }
.menu-wrap.open .menu-dropdown { display: block; animation: menuFade 0.12s ease; }
@keyframes menuFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: 6px; cursor: pointer; text-align: left; font-family: var(--font); color: var(--text); transition: background 0.1s; }
.menu-item:hover { background: var(--surface2); }
.menu-item.menu-item-active { background: rgba(245,158,11,0.12); border-left: 2px solid var(--amber); padding-left: 8px; }
.menu-item.menu-item-active .menu-item-title { color: var(--amber); }
.menu-item-icon { font-size: 18px; color: var(--accent); flex-shrink: 0; width: 26px; text-align: center; padding-top: 1px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.menu-item-body { display: flex; flex-direction: column; gap: 2px; }
.menu-item-title { font-size: 13px; font-weight: 700; color: var(--text); }
.menu-item-desc { font-size: 11px; color: var(--muted); }
.menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.menu-section-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding: 6px 12px 4px; }

/* Plan switcher (top-left of header) */
.plan-menu-btn { gap: 8px; }
.plan-menu-label { font-weight: 700; }
.plan-list-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font); color: var(--text); font-size: 13px; transition: background 0.1s; border-radius: 6px; }
.plan-list-item:hover { background: var(--surface2); }
.plan-list-item.active { background: rgba(217,70,239,0.12); color: var(--accent); font-weight: 700; }
.plan-list-item .plan-list-check { width: 16px; flex-shrink: 0; color: var(--accent); }

/* Plans manage modal: tabular layout reusing the .data-table styling. */
.plans-panel { max-height: none; }
.plans-body { flex: 0 0 auto; overflow-y: visible; padding: 16px 20px; white-space: normal; }
.plans-row-active td { background: rgba(217,70,239,0.06); }
.plans-row-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); }

/* Menu-embedded toggle (used by Export menu for include-workload setting). */
.menu-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; cursor: pointer; border-radius: 6px; transition: background 0.1s; }
.menu-toggle:hover { background: var(--surface2); }
.menu-toggle input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; cursor: pointer; accent-color: var(--accent); }
.menu-toggle-body { display: flex; flex-direction: column; gap: 2px; }
.menu-toggle-title { font-size: 13px; font-weight: 700; color: var(--text); }
.menu-toggle-desc { font-size: 11px; color: var(--muted); }

/* Sidebar section header (regional summary + collapse-all toggle) */
.sidebar-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-top: 4px; }
.sidebar-section-header .section-title { margin-bottom: 0; }
.icon-btn-tiny { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); cursor: pointer; font-size: 11px; transition: background 0.1s, color 0.1s, transform 0.15s; }
.icon-btn-tiny:hover { background: var(--surface2); color: var(--accent); }
.icon-btn-tiny[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* THEME TOGGLE BUTTON */
.theme-toggle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text); transition: background 0.15s, color 0.15s; }
.theme-toggle:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.theme-toggle .theme-icon-dark  { display: inline; }
.theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark  { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-light { display: inline; }

/* Theme-toggle inside the Menu dropdown: show the icon for the OPPOSITE theme so the icon
   represents the action ("click moon to go dark", "click sun to go light"). */
#btnThemeToggleMenu .theme-icon-light { display: inline; }
#btnThemeToggleMenu .theme-icon-dark  { display: none; }
:root[data-theme="light"] #btnThemeToggleMenu .theme-icon-light { display: none; }
:root[data-theme="light"] #btnThemeToggleMenu .theme-icon-dark  { display: inline; }

/* ROLE LABELS (Settings → Roles tab) */
.role-labels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.role-label-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.role-label-row span { font-weight: 700; text-align: right; }
.role-label-row input { width: 100%; }
@media (max-width: 700px) { .role-labels-grid { grid-template-columns: 1fr; } }

/* REPORTS DASHBOARD */
.rpt-strip { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px 4px; }
.rpt-stat { flex: 1; min-width: 150px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-align: center; }
.rpt-stat-val { font-size: 26px; font-weight: 800; color: var(--strong); letter-spacing: -0.5px; }
.rpt-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-top: 4px; }
/* On wide screens, render report cards in a 2-up grid so each chart is more readable.
   The cards container handles the grid; individual cards stay at their natural size. */
.rpt-cards { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 20px; }
@media (min-width: 1100px) { .rpt-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1700px) { .rpt-cards { grid-template-columns: 1fr 1fr 1fr; } }
.rpt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.rpt-card-fullwidth { grid-column: 1 / -1; }
.rpt-card-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.rpt-card-title { font-size: 14px; font-weight: 800; color: var(--text); grid-column: 1; }
.rpt-card-sub { font-size: 11px; color: var(--muted); grid-column: 1; grid-row: 2; }
.rpt-png-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 5px 11px; font-size: 11px; font-weight: 700; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; transition: background 0.1s, color 0.1s; }
.rpt-png-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rpt-canvas-wrap { width: 100%; position: relative; }
.rpt-matrix-wrap { overflow-x: auto; }
.rpt-matrix { width: 100%; border-collapse: collapse; }
.rpt-matrix th, .rpt-matrix td { padding: 8px 12px; border: 1px solid var(--border); font-size: 12px; text-align: center; vertical-align: middle; }
.rpt-matrix thead th { background: var(--surface2); color: var(--muted); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; }
.rpt-matrix .rpt-row-hdr { background: var(--surface2); color: var(--text); font-weight: 700; text-align: left; }
.rpt-cell-num { font-size: 16px; font-weight: 800; color: var(--text); }
.rpt-cell-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* IMPORT MODAL */
.import-dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 28px 20px; text-align: center; transition: background 0.15s, border-color 0.15s; background: var(--surface2); }
.import-dropzone.drag-over { border-color: var(--accent); background: rgba(217,70,239,0.08); }
.import-cols-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.import-cols-table thead { position: sticky; top: 0; background: var(--surface2); z-index: 1; }
.import-cols-table th { text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); border-bottom: 1px solid var(--border); }
.import-cols-table td { padding: 6px 12px; font-size: 12px; vertical-align: top; border-bottom: 1px dashed var(--border); }
.import-cols-table td code { background: var(--surface2); padding: 1px 6px; border-radius: 4px; font-size: 11px; color: var(--text); }
.import-stat { flex: 1; min-width: 110px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; text-align: center; }
.import-stat-val { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
.import-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-top: 3px; }

/* SORTABLE TABLE HEADERS (Manage Data tabs) */
.sort-th { cursor: pointer; user-select: none; transition: background 0.1s, color 0.1s; }
.sort-th:hover { background: var(--row-hover); color: var(--text); }
.sort-th.sort-active { color: var(--accent); }
.sort-arrow { font-size: 10px; opacity: 0.85; margin-left: 2px; }

/* LEADERSHIP MAP (Manage Data → Leadership tab) */
.lm-container { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 16px; }
.lm-tier { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.lm-tier-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 12px; }
.lm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lm-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.lm-name { font-size: 13px; font-weight: 700; color: var(--text); }
.lm-meta { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lm-sep { opacity: 0.5; }
.lm-flag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 100px; margin-left: 4px; }
.lm-flag-multi { color: var(--amber); background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.35); }
.lm-reports { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border); }
.lm-reports-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 3px; }
.lm-reports-list { font-size: 11px; color: var(--text); line-height: 1.5; }

/* QUOTA CELL in SE table */
.quota-cell { white-space: nowrap; }
.quota-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.2; }
.quota-cell-line { display: flex; align-items: baseline; gap: 0; }
.quota-carry { font-size: 12px; font-weight: 700; color: var(--text); }
.quota-target { font-size: 11px; font-weight: 600; color: var(--muted); }
.quota-target-missing { color: var(--red); font-style: italic; }
.quota-attain-badge { font-size: 9px; padding: 1px 6px; }

/* Per-account quota tag in the expand row */
.acct-quota-tag { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--surface2); padding: 1px 7px; border-radius: 100px; vertical-align: middle; }

/* PROPOSED HIRE styling — SEs added by the Propose Hires wizard */
.se-row.proposed-hire td { background: rgba(217,70,239,0.08); border-left: 3px solid var(--accent); }
.se-row.proposed-hire td:first-child { padding-left: 11px; }
.se-row.proposed-hire:hover td { background: rgba(217,70,239,0.14); }
.proposed-badge { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); background: rgba(217,70,239,0.15); border: 1px solid rgba(217,70,239,0.35); padding: 1px 6px; border-radius: 100px; margin-left: 8px; vertical-align: middle; }

/* PROPOSE HIRES modal content */
.propose-group { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; }
.propose-group-title { font-size: 12px; font-weight: 700; color: var(--strong); }
.propose-group-hires { font-size: 12px; color: var(--accent); justify-self: end; }
.propose-relief { grid-column: 1 / -1; margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.propose-relief li strong { color: var(--text); }

/* Run 12: per-TBH payback list inside propose-hires modal. */
.propose-payback-list { grid-column: 1 / -1; margin: 4px 0 6px 0; padding: 8px 10px 8px 24px; list-style: none; background: rgba(217,70,239,0.05); border-left: 2px solid var(--accent); border-radius: 4px; font-size: 11px; line-height: 1.7; }
.propose-payback-list .propose-payback { color: var(--muted); position: relative; }
.propose-payback-list .propose-payback::before { content: '\2728'; position: absolute; left: -16px; color: var(--accent); }
.propose-payback-list .propose-payback strong { color: var(--text); }
.propose-payback-list .propose-payback .v { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.propose-payback-list .propose-payback .v-good { color: var(--green); }

/* SCENARIO NARRATIVE block (renders inside diff banner) */
.diff-narrative { background: rgba(217,70,239,0.10); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: 12px; line-height: 1.6; color: var(--text); }
.diff-narrative-icon { color: var(--accent); margin-right: 6px; }

/* WORKLOAD THRESHOLDS GRID (Settings → Workload tab) */
.wl-thresholds-grid { display: grid; grid-template-columns: 1fr 68px 68px 68px 68px; gap: 6px 10px; align-items: center; margin-top: 6px; }
.wl-th-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.wl-th-group-label { font-size: 10px; font-weight: 700; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--border); text-align: center; }
.wl-th-seg { font-size: 12px; color: var(--text); font-weight: 600; padding: 3px 0; }
.wl-th-input { width: 60px; text-align: center; }
.complexity-grid { display: grid; grid-template-columns: minmax(120px,1fr) 92px 58px 76px 36px; gap: 7px 10px; align-items: center; margin-top: 6px; transition: opacity 0.12s; }
.complexity-tiers-muted { opacity: 0.58; }
.complexity-th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.complexity-mult-input { width: 84px; text-align: right; }
.complexity-count { font-size: 12px; color: var(--muted); text-align: center; }
.del-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Empty-state CTA shown when a Manage Data tab has zero rows. The big primary button
   pulses gently to draw the eye, and the explanatory text guides the user through
   the right data-entry order (regions, then segments, then people, then accounts). */
.md-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 24px;
  text-align: center;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 14px;
  margin: 24px 0;
}
.md-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-light, rgba(99,102,241,0.12));
  color: var(--accent, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.md-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.md-empty-text {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 460px;
}
.md-empty-cta {
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  animation: md-empty-cta-pulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(99,102,241,0.55);
}
.md-empty-cta:hover {
  background: var(--accent-dark, #4f46e5);
  transform: translateY(-1px);
  animation: none;
}
@keyframes md-empty-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.md-empty-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}