/* ════════════════════════════════════════════════════════════
   COG CRM — Daily Operations (MERGED DEFINITIVE VERSION)
   OCC_CRM branding + COG_Engine full feature set
   One file. Everything in it. Last time.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Orbitron:wght@500;700;900&display=swap');

:root {
  --navy: #0a2e7a;
  --bg: #f8fafc;
  --card: #ffffff;
  --card-hover: #f0f4f8;
  --border: #e2e8f0;
  --text: #111827;
  --text2: #374151;
  --text3: #6b7280;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.1);
  --header-bg: #ffffff;
  --widget-header: #0a2e7a;
  --widget-header-text: #ffffff;
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #eab308;
  --amber: #f59e0b;
  --blue: #2563eb;
  --purple: #7c3aed;
  --nav-bg: #0f172a;
  --nav-active: #0a2e7a;
  --nav-text: #94a3b8;
  --nav-text-active: #ffffff;
  --dock-bg: #0f172a;
  --profile-bg: #ffffff;
  --profile-border: rgba(10,46,122,.15);
  --table-stripe: #f8fafc;
  --input-bg: #ffffff;
  --map-tile: https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png;
  --bg2: #f0f4f8;
  --text1: #111827;
}
html[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --card-hover: #283548;
  --border: #334155;
  --text: #f1f5f9;
  --text2: #cbd5e1;
  --text3: #94a3b8;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.4);
  --header-bg: #0f172a;
  --widget-header: #1e3a6e;
  --widget-header-text: #e2e8f0;
  --nav-bg: #0b1120;
  --nav-active: #1e3a6e;
  --dock-bg: #0b1120;
  --profile-bg: #1e293b;
  --profile-border: rgba(138,180,255,.1);
  --table-stripe: #1a2332;
  --input-bg: #0f172a;
  --bg2: #1a2332;
  --text1: #f1f5f9;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }
* { scrollbar-width: thin; scrollbar-color: var(--text3) transparent; }

/* ════════════════════════════════════
   HEADER — 50px
   ════════════════════════════════════ */
/* ── DASHBOARD KPI STRIP — REMOVED Apr 10 2026. KPIs now live in each
   route panel's colored header. See .route-hdr-kpis below. ── */
#dashKpiStrip { display: none !important; }

/* ── ROUTE HEADER KPIs (Apr 10 2026) — per-route revenue/stops/avg inline
   in each R1/R2/R3/R4 colored header. Replaces the dashboard KPI strip. ── */
.route-hdr-kpis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: .2px;
  white-space: nowrap;
}
.route-hdr-kpis .sep {
  opacity: .5;
  font-weight: 400;
}
.route-hdr-kpis .rhk-label {
  opacity: .75;
  font-weight: 500;
  text-transform: none;
}

/* ── ATTENTION BELL in top bar (Apr 10 2026) ── */
.hdr-bell {
  position: relative;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  color: #fbbf24;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background .15s, border-color .15s;
}
.hdr-bell:hover {
  background: rgba(251,191,36,.12);
  border-color: rgba(251,191,36,.5);
}
.hdr-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc2626;
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a1628;
  line-height: 1;
}
.hdr-bell-badge.hidden { display: none; }

/* ── SIDEBAR CREATE SECTION (Apr 10 2026) — divider + 3 create buttons ── */
#leftNav .sidebar-divider {
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: 6px 0;
  flex: 0 0 auto;
}
/* Create buttons — same neutral white as nav buttons so the sidebar has ONE visual language.
   A subtle "+" badge on the icon differentiates them from navigation (added inline in SVGs). */
#leftNav .sidebar-btn.create-btn .sb-ico { color: rgba(255,255,255,.92); }
#leftNav .sidebar-btn.create-btn:hover .sb-ico { color: #ffffff; }
#leftNav .sidebar-btn.create-btn svg { stroke: currentColor; }
#leftNav .sidebar-btn.create-btn .sb-lbl { color: rgba(255,255,255,.88); }



/* ── SPLIT VIEW (Apr 10 2026) — when a nav tab is open, the tab takes
   var(--tab-width) % on the left, dashboard panels compress into the rest. ── */
#workspaceContainer { position: relative; }
#workspaceContainer.tab-split {
  --tab-width: 60%;
}
#workspaceContainer.tab-split #centerWorkspace {
  order: -2;
  flex: 0 0 var(--tab-width);
  max-width: var(--tab-width);
  display: flex !important;
  border-right: none;
  position: relative;
  min-width: 320px;
  background: var(--bg);
}
#workspaceContainer.tab-split #tab-split-divider {
  order: -1;
  display: block;
}
#workspaceContainer.tab-split #leftPanelsZone { order: 0; }
#workspaceContainer.tab-split #rightPanelsZone { order: 99; }
#workspaceContainer.tab-split #leftPanelsZone {
  flex: 1 1 auto;
  min-width: 0;
}
#workspaceContainer.tab-split #leftPanelsZone .panel-route {
  flex: 1 1 165px;
  min-width: 165px;              /* Apr 18 — keep text readable in split mode */
  max-width: none !important;
}
#workspaceContainer.tab-split #rightPanelsZone {
  /* Removed 220px hard cap Apr 10 — let the flex layout figure it out so calendar/inbox stay usable */
  max-width: 340px;
  min-width: 240px;
}
#tab-split-divider {
  display: none;
  width: 6px;
  flex: 0 0 6px;
  background: var(--border);
  cursor: col-resize;
  transition: background .15s;
  position: relative;
  z-index: 10;
}
#tab-split-divider:hover,
#tab-split-divider.dragging {
  background: #0a2e7a;
}
#tab-split-divider::before {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  bottom: 0;
}
/* Close X button — floats in the top-right of the active tab */
.tab-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.tab-close-btn:hover {
  background: #dc2626;
  color: #fff;
  transform: scale(1.05);
}
#workspaceContainer.tab-split .tab-close-btn { display: flex; }

/* ── LEFT SIDEBAR NAV (Apr 10 2026) — global navigation lives here. ── */
/* Chrome is shifted right by 72px to make room. */
#leftNav {
  position: fixed;
  top: 52px; /* starts below the unified 52px top bar */
  left: 0;
  width: 72px;
  height: calc(100vh - 52px);
  background: var(--chrome-900, #082560); /* OCC brand navy — inherits white-label override */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 16px 0;
  gap: 8px;
  z-index: 550;
  box-shadow: 2px 0 6px rgba(0,0,0,.22);
  border-right: 1px solid rgba(60,180,255,.08);
}
#leftNav .sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  width: 52px;
  cursor: pointer;
}
#leftNav .sidebar-logo .sb-cog {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-family: 'Inter', sans-serif;
  letter-spacing: -.5px;
  line-height: 1;
}
#leftNav .sidebar-logo .sb-sub {
  font-size: 8px;
  color: rgba(255,255,255,.65);
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 3px;
}
#leftNav .sidebar-btn {
  position: relative; /* Apr 11 — allows .nav-badge absolute positioning (e.g. Declines queue count) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  height: 56px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: 'Inter', sans-serif;
}
#leftNav .sidebar-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
}
#leftNav .sidebar-btn.active {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}
#leftNav .sidebar-btn .sb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 1;
  color: rgba(255,255,255,.92);
}
#leftNav .sidebar-btn .sb-ico svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}
#leftNav .sidebar-btn:hover .sb-ico,
#leftNav .sidebar-btn.active .sb-ico { color: #ffffff; }
#leftNav .sidebar-btn .sb-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
#leftNav .sidebar-spacer { flex: 1; }

/* ── UNIFIED TOP BAR (Apr 10 2026 — single row, grid 1fr auto 1fr) ──
   Left column: CoG logo.
   Center column: date nav (auto-width, dead center).
   Right column: search + bell + theme toggle (flex-end). */
#header {
  height: 52px;
  background: var(--chrome-900, #082560); /* OCC brand navy — inherits white-label override */
  color: var(--chrome-text, #eef2f9);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(60,180,255,0.12);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 560;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  overflow: visible;
}
.hdr-left   { display: flex; align-items: center; justify-content: flex-start; min-width: 0; gap: 8px; }
.hdr-center { display: flex; align-items: center; justify-content: center; }
.hdr-right  { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }

/* ── DARK MODE MAP TILES — CSS filter inverts Google tiles to dark theme ── */
html[data-theme="dark"] #map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.3);
}
html[data-theme="dark"] #map .leaflet-marker-pane,
html[data-theme="dark"] #map .leaflet-tooltip-pane,
html[data-theme="dark"] #map .leaflet-popup-pane {
  filter: none !important;
}
/* ── DARK MODE PIN GLOW — white halo so pins pop on dark background ── */
html[data-theme="dark"] .leaflet-marker-icon {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)) drop-shadow(0 0 12px rgba(255,255,255,0.3));
}

.hdr-left { display:flex; align-items:center; gap:10px; flex:1 1 0; min-width:0; }
/* ── OCC BRAND LOGO — small icon-mark from ohiocleancans.com, inverted to white on navy chrome.
   Sits immediately before the CoG mark. Inherits white-label override via --brand-logo token. */
.occ-brand-logo {
  height: 26px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* force pure white so it reads on any brand chrome */
  opacity: .95;
  flex: 0 0 auto;
  user-select: none;
  transition: opacity 120ms ease;
}
.occ-brand-logo:hover { opacity: 1; }
.occ-brand-sep {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.18);
  margin: 0 2px;
  flex: 0 0 auto;
}
/* ───── CoG BRAND MARK — Orbitron + metallic gradient + spinning gear.
   THE canonical OCC brand. Used identically in CRM, Command Center, Crew App, and Grid.
   Don't remove the spin or the gradient — this is the brand Howard locked in.
   Works on any brand chrome color because the brushed silver is brand-neutral. ───── */
.cog-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 20px;
  background: linear-gradient(135deg, #e8e8e8, #a0a0a0, #d0d0d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
  transition: filter 120ms ease;
}
.cog-logo:hover { filter: brightness(1.15); }
.cog-logo:focus-visible { outline: 2px solid #4a9eff; outline-offset: 2px; }
.cog-logo svg {
  width: 24px;
  height: 24px;
  animation: spinGear 8s linear infinite;
}
@keyframes spinGear { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cog-logo svg { animation: none; }
}
.cog-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #e8e8e8, #a0a0a0, #d0d0d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 6px;
  letter-spacing: 3px;
}

.hdr-center { display:flex; align-items:center; justify-content:center; gap:8px; }

.hdr-right { display:flex; align-items:center; justify-content:flex-end; gap:18px; flex:1; padding-right:4px; }
/* ── APP SWITCHER LINKS (Grid / Command Center) ──
   Orbitron + brushed silver gradient to match the CoG brand mark.
   "Command Center" wraps to 2 lines so it takes less horizontal space and visually
   balances the 2-line CoG mark height. Must be identical in CRM, CC, and Grid. */
.hdr-link {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #e8e8e8, #a0a0a0, #d0d0d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* fallback */
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: normal;
  max-width: 100px;      /* fits "COMMAND" on line 1, "CENTER" on line 2 — Orbitron at 12px/1.5 letter-spacing needs ~95px */
  text-align: center;
  display: inline-block;
  padding: 0 4px;
  transition: filter .2s;
}
.hdr-link:hover { filter: brightness(1.25); }
#liveClock {
  font-family: 'Inter', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #c0c8d4;
  letter-spacing: 1px;
}
#weatherText {
  font-family: 'Inter', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #c0c8d4;
  letter-spacing: 1px;
  white-space: nowrap;
}
.theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  width: 44px; height: 44px;
  cursor: pointer;
  font-size: 16px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }

/* ── HEADER KPI PILLS ── */
#hdrKpiPills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.hdr-kpi-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Inter', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #c0c8d4;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: default;
  position: relative;
}
.hdr-kpi-pill .kpi-pill-label {
  font-size: 9px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hdr-kpi-pill .kpi-pill-val {
  font-weight: 700;
}
.hdr-kpi-pill .kpi-pill-val.green {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74,222,128,0.5);
}
.hdr-kpi-pill .kpi-pill-val.white {
  color: #e2e8f0;
}
.hdr-kpi-pill .kpi-pill-val.amber {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.hdr-kpi-pill .kpi-pill-val.red {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248,113,113,0.5);
}
.hdr-kpi-pill.clickable { cursor: pointer; }
.hdr-kpi-pill.clickable:hover { background: rgba(255,255,255,0.1); }
/* Attention dropdown */
#hdrAttnDropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  min-width: 240px;
  z-index: 610;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  padding: 6px 0;
}
#hdrAttnDropdown.visible { display: block; }
.hdr-attn-item {
  padding: 6px 12px;
  font-size: 11px;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.hdr-attn-item:hover { background: #334155; }
.hdr-attn-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

/* ── ROUTE PROGRESS IN HEADER ── */
#hdrRouteProgress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #c0c8d4;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.hdr-rp-item { display: flex; align-items: center; gap: 4px; }
.hdr-rp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.hdr-rp-sep { color: #475569; font-size: 8px; }

/* ── ACTION TOOLBAR ── */
/* ── #actionToolbar — REMOVED Apr 10 2026. All its content moved to #header (date nav)
   and sidebar (create buttons). Kept as hidden shell so any leftover JS references don't crash. ── */
#actionToolbar, #actionToolbar.visible {
  display: none !important;
  height: 0 !important;
  /* Grid: left content | dead-center auto-width | right content.
     1fr on each side guarantees the center column stays dead-center
     regardless of how wide the side content is. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
}
#actionToolbar.visible { display: grid; }
.at-left, .at-center, .at-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.at-left { justify-content: flex-start; }
.at-center { justify-content: center; }
.at-right { justify-content: flex-end; }

/* Search input */
.at-search-wrap { position: relative; }
.at-search {
  width: 300px;
  height: 32px;
  padding: 0 12px 0 32px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.at-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 1px 3px rgba(0,0,0,0.08); }
.at-search::placeholder { color: #94a3b8; }
.at-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #64748b;
  pointer-events: none;
}
.at-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 240px;
  overflow-y: auto;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  margin-top: 4px;
  z-index: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.at-search-results.visible { display: block; }
.at-search-result {
  padding: 8px 12px;
  font-size: 12px;
  color: #e2e8f0;
  cursor: pointer;
  border-bottom: 1px solid #334155;
}
.at-search-result:last-child { border-bottom: none; }
.at-search-result:hover { background: #334155; }
.at-search-result-sub { font-size: 10px; color: #64748b; margin-top: 1px; }

/* Date display */
.at-date {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Jump select */
.at-jump {
  padding: 4px 8px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  outline: none;
}

/* Icon buttons */
.at-icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 14px;
  position: relative;
  transition: all .15s;
  text-shadow: 0 0 6px rgba(255,255,255,.3);
}
.at-icon-btn:hover { background: rgba(100,200,255,.12); color: #fff; text-shadow: 0 0 12px rgba(100,200,255,.6); border-color: rgba(100,200,255,.4); }
.at-icon-btn .at-tooltip {
  display: none;
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #e2e8f0;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 610;
  border: 1px solid #334155;
  pointer-events: none;
}
.at-icon-btn:hover .at-tooltip { display: block; }
.at-ext-link {
  padding: 4px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  transition: all .2s;
  white-space: nowrap;
  letter-spacing: .5px;
}
.at-ext-link:hover { color: #4ae68a; border-color: rgba(74,230,138,.3); background: rgba(74,230,138,.08); }
.at-dropdown-item { display:block; width:100%; padding:6px 12px; background:none; border:none; color:#e2e8f0; font-size:11px; font-weight:600; text-align:left; cursor:pointer; border-radius:4px; transition:background .1s; }
.at-dropdown-item:hover { background:rgba(100,200,255,.12); }

/* Dead CSS purged Apr 10 2026:
   .at-nav-glow, .nav-pill.nav-tile, .at-nav-tab, @keyframes settingsGlow — all deleted.
   Nav buttons now live in #leftNav (.sidebar-btn) — see #leftNav .sidebar-btn rules above. */

/* ── INBOX PANEL ── */
.inbox-panel { display:flex; flex-direction:column; height:100%; }
.inbox-header { display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-bottom:1px solid var(--border); background:var(--card); }
.inbox-filters { display:flex; gap:2px; }
.inbox-filter { background:none; border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-size:9px; font-weight:600; color:var(--text3); cursor:pointer; transition:all .15s; }
.inbox-filter:hover { border-color:var(--navy); color:var(--navy); }
.inbox-filter.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.inbox-list { flex:1; overflow-y:auto; }
.inbox-item { display:flex; align-items:flex-start; gap:8px; padding:8px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; position:relative; }
.inbox-item:hover { background:var(--card-hover); }
.inbox-item.unread { background:rgba(10,46,122,.04); }
.inbox-item.unread .inbox-name { font-weight:700; }
.inbox-icon { font-size:14px; flex-shrink:0; margin-top:2px; }
.inbox-body { flex:1; min-width:0; }
.inbox-name { font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-msg { font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.inbox-time { font-size:9px; color:var(--text3); flex-shrink:0; }
.inbox-actions { display:none; position:absolute; right:4px; top:4px; gap:2px; }
.inbox-item:hover .inbox-actions { display:flex; }
.inbox-act-btn { width:20px; height:20px; border:none; border-radius:4px; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--border); color:var(--text3); }
.inbox-act-btn:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
html[data-theme="dark"] .inbox-item.unread { background:rgba(100,200,255,.05); }

/* ── INBOX COMPOSE CONTROLS ── */
.inbox-inline-pills { display:flex; gap:0; border-radius:4px; overflow:hidden; border:1px solid var(--border); }
.inbox-inline-pill { padding:2px 6px; font-size:8px; font-weight:700; border:none; cursor:pointer; background:var(--bg); color:var(--text3); transition:all .12s; }
.inbox-inline-pill.active { background:var(--navy); color:#fff; }
html[data-theme="dark"] .inbox-inline-pill.active { background:#1e3a6e; }
.inbox-inline-send { padding:2px 8px; background:var(--navy); color:#fff; border:none; border-radius:4px; font-size:9px; font-weight:700; cursor:pointer; white-space:nowrap; }
.inbox-inline-send:hover { opacity:.85; }
html[data-theme="dark"] .inbox-inline-send { background:#1e3a6e; }
.inbox-inline-close { background:none; border:none; cursor:pointer; font-size:11px; color:var(--text3); padding:0 2px; line-height:1; }
.inbox-inline-close:hover { color:var(--red); }
.inbox-mic-btn { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:14px; padding:2px; opacity:.5; transition:opacity .15s; }
.inbox-mic-btn:hover { opacity:1; }
.inbox-mic-btn.recording { opacity:1; color:var(--red); animation: micPulse 1s infinite; }
@keyframes micPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes inboxPulse { 0%,100% { box-shadow:0 0 4px rgba(59,130,246,.3); } 50% { box-shadow:0 0 12px rgba(59,130,246,.7); } }

/* ── INBOX CONVERSATION VIEW (inside inbox panel) ── */
.inbox-conv-header { display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:2px solid var(--navy); background:var(--card); }
.inbox-conv-messages { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:4px; min-height:0; }
.inbox-conv-messages .conv-bubble { max-width:85%; font-size:12px; padding:8px 10px; }
.inbox-conv-messages .conv-date-sep { font-size:9px; }
.inbox-conv-compose { border-top:1px solid var(--border); padding:6px 8px; display:flex; flex-direction:column; gap:4px; background:var(--card); flex:0 1 auto; }
.inbox-quick-btns { display:flex; gap:4px; flex-wrap:wrap; }
.inbox-quick-btn { padding:4px 10px; border:1px solid var(--navy); border-radius:12px; background:transparent; color:var(--navy); font-size:9px; font-weight:700; cursor:pointer; transition:all .15s; white-space:nowrap; }
.inbox-quick-btn:hover { background:var(--navy); color:#fff; }
html[data-theme="dark"] .inbox-quick-btn { border-color:#93c5fd; color:#93c5fd; }
html[data-theme="dark"] .inbox-quick-btn:hover { background:#1e3a6e; color:#fff; border-color:#1e3a6e; }

/* Dropdown menus */
.at-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  min-width: 180px;
  z-index: 610;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.at-dropdown.visible { display: block; }
.at-dropdown-item {
  padding: 8px 14px;
  font-size: 12px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background .1s;
}
.at-dropdown-item:hover { background: #334155; }

.at-add-btn {
  padding: 4px 12px;
  background: #0a2e7a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.at-add-btn:hover { opacity: .85; }

.nav-tile {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--nav-text);
  transition: all .2s;
  position: relative;
  user-select: none;
}
.nav-tile:hover { background: rgba(255,255,255,.06); color: #cbd5e1; }
.nav-tile.active {
  background: var(--nav-active);
  color: var(--nav-text-active);
  box-shadow: 0 0 12px rgba(10,46,122,.4);
}
.nav-icon { font-size: 20px; line-height: 1; }
.nav-label { display: none; }
.nav-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 610;
  border: 1px solid #334155;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}
.nav-tile:hover .nav-tooltip { display: block; }
.nav-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ════════════════════════════════════
   MAIN AREA — Panel-based workspace
   ════════════════════════════════════ */
#mainArea {
  position: fixed;
  top: 52px; /* just below the unified 52px top bar — action toolbar removed Apr 10 */
  left: 72px; /* sidebar width */
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── WORKSPACE CONTAINER (panels + center) ── */
#workspaceContainer {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── LEFT PANELS ZONE ── */
#leftPanelsZone {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;              /* Apr 18 — scroll horizontally when 4 cols can't all fit at 165px min */
  overflow-y: hidden;
  transition: flex 200ms ease;
}

/* ── CENTER WORKSPACE ── */
#centerWorkspace {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  gap: 16px;
  min-width: 300px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--bg);
}
#centerWorkspace.active { display: flex; }
#centerWorkspace.conv-narrow { max-width:280px; min-width:260px; flex:0 0 280px; padding:0; }

/* ── RIGHT PANELS ZONE ── */
/* order: 99 forces this zone to render last in the workspace flex row,
   even if DOM ordering is disrupted or some CSS reorders siblings.
   Fixes Apr 17 bug where CAL/INBOX rendered between R2 and R3. */
#rightPanelsZone {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  max-width: 280px;
  overflow: hidden;
  transition: flex .2s ease, max-width .2s ease;
  order: 99;
}
#rightPanelsZone.rp-collapsed {
  flex: 0 0 26px;
  max-width: 26px;
  min-width: 26px;
}
/* Belt-and-suspenders: pin left zone to order:0 and center to order:1 so
   rightPanelsZone (order:99) can never land mid-row */
#leftPanelsZone { order: 0; }
#centerWorkspace { order: 1; }

/* ════════════════════════════════════
   COLLAPSIBLE PANEL SYSTEM
   ════════════════════════════════════ */
.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex 200ms ease, min-width 200ms ease, max-width 200ms ease, width 200ms ease;
  background: var(--card);
  border: 1px solid var(--border);
  min-width: 0;
  position: relative;
}
.panel .panel-body .route-stop,
.panel .panel-body .tile {
  flex-shrink: 0;
}

/* Panel header bar */
.panel-header {
  height: 28px;
  min-height: 28px;
  background: var(--nav-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
  user-select: none;
  flex-shrink: 0;
}
.panel-header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-collapse-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color .15s;
}
.panel-collapse-btn:hover { color: #fff; }

.panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

/* ── COLLAPSED PANEL STATE ── */
.panel.collapsed {
  flex: 0 0 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  width: 26px !important;
  cursor: pointer;
  overflow: hidden;
}
.panel.collapsed .panel-header { display: none; }
.panel.collapsed .panel-body { display: none; }

/* Collapsed vertical label */
.panel-collapsed-bar {
  display: none;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  background: var(--nav-bg);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  padding: 8px 0;
  height: 100%;
  width: 26px;
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: center;
}
.panel.collapsed .panel-collapsed-bar { display: flex; }

/* ── LEFT PANELS: open sizing ── */
#panelMap {
  flex: 0 0 33.33%;
  min-width: 160px;
  max-width: 66%;
}
#panelMap .panel-body { position: relative; }
#panelMap .panel-collapsed-bar { background: var(--nav-bg); }

/* Apr 18 — min-width bumped from 120px → 165px so plan code (M2*) + name + address
   always stay readable. Columns never squish below this; parent scrolls horizontally if needed. */
.panel-route {
  flex: 1 1 180px;
  min-width: 165px;
}
#panelR1 .panel-collapsed-bar { background: #f97316; }
#panelR2 .panel-collapsed-bar { background: #2563eb; }
#panelR3 .panel-collapsed-bar { background: #7c3aed; }
#panelR4 .panel-collapsed-bar { background: #16a34a; }

/* ── RIGHT PANELS: fixed max width ── */
.panel-right {
  flex: 0 0 280px;
  max-width: 280px;
  min-width: 0;
}
.panel-right.collapsed {
  flex: 0 0 26px !important;
  max-width: 26px !important;
  min-width: 26px !important;
}
#panelCalendar { flex: 0 0 auto !important; }
#panelInbox { flex: 1 1 0 !important; min-height: 0; display: flex; flex-direction: column; }
#panelInbox .panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#panelInbox .inbox-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#panelCalendar .panel-collapsed-bar { background: #0f172a; }
#panelInbox .panel-collapsed-bar { background: #0f172a; }

/* Unified CALENDAR + INBOX: when zone is collapsed, show only one full-height vertical bar */
#rightPanelsZone.rp-collapsed #panelInbox { display: none !important; }
#rightPanelsZone.rp-collapsed #panelCalendar {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-width: 26px !important;
  min-width: 26px !important;
  width: 26px !important;
}

/* Placeholder for non-dashboard tabs */
.tab-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text3);
  gap: 12px;
}
.tab-placeholder .tp-icon { font-size: 64px; opacity: .4; }
.tab-placeholder .tp-text { font-size: 20px; font-weight: 600; }

/* ═══ SETTINGS SUB-TABS ═══ */
.settings-wrap { display: flex; flex-direction: column; height: 100%; gap: 0; }
.settings-subtabs {
  display: flex; gap: 4px; padding: 0 0 12px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.settings-subtab {
  padding: 7px 14px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; cursor: pointer; border: 1px solid var(--border);
  background: var(--card); color: var(--text2); transition: all .2s; user-select: none;
}
.settings-subtab:hover { border-color: var(--navy); color: var(--navy); }
.settings-subtab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.settings-panel { display: none; flex: 1; overflow-y: auto; }
.settings-panel.active { display: block; }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.settings-table th {
  text-align: left; padding: 8px 12px; font-family: 'Inter', sans-serif; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--widget-header-text);
  background: var(--widget-header); border-bottom: 2px solid var(--navy);
}
.settings-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.settings-table tr:hover td { background: var(--card-hover); }
.settings-form-group { margin-bottom: 12px; }
.settings-form-group label {
  display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 4px;
}
.settings-form-group input, .settings-form-group select {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 13px;
}
.settings-form-group input:disabled { background: var(--bg); color: var(--text2); }
.settings-role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff;
}
.settings-list-item {
  padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; display: flex;
  align-items: center; gap: 8px;
}
.settings-list-item:hover { background: var(--card-hover); }
.settings-note { font-size: 11px; color: var(--text3); font-style: italic; margin-bottom: 8px; }
.settings-color-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 4px;
}
.settings-tile-preview {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--card);
  max-width: 400px;
}
.settings-tile-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.settings-tile-row label { font-size: 11px; color: var(--text3); min-width: 50px; margin: 0; }
.settings-tile-row select {
  flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-size: 12px;
}

/* ═══ TAB CONTENT PANELS ═══ */
.tab-content {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  flex-direction: column;
  gap: 16px;
}
.tab-content.active { display: flex; }
.tc-header {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
html[data-theme="dark"] .tc-header { color: #93c5fd; }
.tc-search-row {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.tc-search {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
.tc-search:focus { outline: none; border-color: var(--navy); }
.tc-select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
.tc-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
html[data-theme="dark"] .tc-btn { background: #1e3a6e; }
.tc-btn:hover { opacity: .85; }
.tc-btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
html[data-theme="dark"] .tc-btn-outline { color: #93c5fd; border-color: #93c5fd; }

/* Metric cards row */
.tc-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}
.tc-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.tc-metric-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text3);
  margin-bottom: 4px;
}
.tc-metric-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.tc-metric-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

/* Customer cards */
.tc-cust-list { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; overflow-y: auto; }
.tc-cust-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.tc-cust-card:hover { border-color: var(--navy); box-shadow: var(--shadow-hover); }
.tc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--navy);
  flex-shrink: 0;
}
html[data-theme="dark"] .tc-avatar { background: linear-gradient(135deg, #1e3a5f, #1e3a6e); color: #93c5fd; }
.tc-cust-info { flex: 1; min-width: 0; }
.tc-cust-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cust-meta { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cust-tags { display: flex; gap: 4px; flex-shrink: 0; }
.tc-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.tc-tag-active { background: #d1fae5; color: #166534; }
.tc-tag-cancelled { background: #fee2e2; color: #991b1b; }
.tc-tag-seasonal { background: #fef3c7; color: #92400e; }
.tc-tag-overdue { background: #fee2e2; color: #991b1b; }
html[data-theme="dark"] .tc-tag-active { background: #14352a; color: #4ade80; }
html[data-theme="dark"] .tc-tag-cancelled { background: #3d1f1f; color: #fca5a5; }
html[data-theme="dark"] .tc-tag-seasonal { background: #3d3214; color: #fde68a; }
html[data-theme="dark"] .tc-tag-overdue { background: #3d1f1f; color: #fca5a5; }
.tc-cust-price { font-size: 13px; font-weight: 500; flex-shrink: 0; }

/* Billing sections */
.tc-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 2px solid var(--navy);
  margin-top: 4px;
}
.tc-billing-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.tc-billing-card .tc-cust-info { flex: 1; }
.tc-billing-action {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tc-billing-action.retry { background: var(--red); color: #fff; }
.tc-billing-action.remind { background: var(--amber); color: #fff; }
.tc-billing-action.renew { background: var(--green); color: #fff; }

/* ── CONVERSATION VIEW (inboxOpen) ── */
.conv-view { display:flex; flex-direction:column; height:100%; min-height:0; }
.conv-topbar { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border); flex:0 0 auto; background:var(--card); min-height:44px; flex-wrap:wrap; }
.conv-back { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text); padding:4px 8px; border-radius:6px; transition:background .15s; }
.conv-back:hover { background:var(--card-hover); }
.conv-cust-name { font-size:18px; font-weight:500; color:var(--text); }
.conv-pills { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.conv-pill { padding:3px 10px; border-radius:12px; font-size:10px; font-weight:600; background:rgba(10,46,122,.08); color:var(--navy); border:1px solid rgba(10,46,122,.15); white-space:nowrap; }
html[data-theme="dark"] .conv-pill { background:rgba(59,130,246,.12); color:#93c5fd; border-color:rgba(59,130,246,.2); }
.conv-pill a { color:inherit; text-decoration:none; }
.conv-pill a:hover { text-decoration:underline; }
.conv-main { display:flex; flex:1; min-height:0; overflow:hidden; }
.conv-thread { flex:1; display:flex; flex-direction:column; min-width:0; }
.conv-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:6px; }
.conv-date-sep { text-align:center; font-size:10px; font-weight:700; color:var(--text3); padding:8px 0 4px; }
.conv-bubble { max-width:75%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5; position:relative; }
.conv-bubble.outbound { background:#0a2e7a; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
html[data-theme="dark"] .conv-bubble.outbound { background:#1e3a6e; }
.conv-bubble.inbound { background:#f1f5f9; color:#1e293b; align-self:flex-start; border-bottom-left-radius:4px; }
html[data-theme="dark"] .conv-bubble.inbound { background:#334155; color:#e2e8f0; }
.conv-bubble-meta { font-size:9px; margin-top:4px; opacity:.7; display:flex; align-items:center; gap:4px; }
.conv-bubble.outbound .conv-bubble-meta { justify-content:flex-end; color:rgba(255,255,255,.6); }
.conv-bubble.inbound .conv-bubble-meta { color:var(--text3); }
.conv-compose { border-top:1px solid var(--border); padding:10px 16px; flex:0 0 auto; background:var(--card); display:flex; flex-direction:column; gap:8px; }
.conv-toggle-bar { display:flex; gap:0; border-radius:8px; overflow:hidden; border:1px solid var(--border); width:fit-content; }
.conv-toggle-btn { padding:5px 14px; font-size:11px; font-weight:600; border:none; cursor:pointer; background:var(--bg); color:var(--text3); transition:all .15s; }
.conv-toggle-btn.active { background:#0a2e7a; color:#fff; }
html[data-theme="dark"] .conv-toggle-btn.active { background:#1e3a6e; }
.conv-email-fields { display:none; flex-direction:column; gap:4px; padding:0 0 6px; }
.conv-email-fields.visible { display:flex; }
.conv-email-input { padding:5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; background:var(--card); color:var(--text); font-family:'Inter',sans-serif; }
.conv-email-input:focus { outline:none; border-color:var(--navy); }
.conv-compose-row { display:flex; gap:8px; align-items:flex-end; }
.conv-template-select { padding:6px 10px; border:1px solid var(--border); border-radius:6px; font-size:11px; background:var(--card); color:var(--text); max-width:200px; }
.conv-textarea { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--card); color:var(--text); font-family:'Inter',sans-serif; resize:none; min-height:38px; max-height:120px; overflow-y:auto; }
.conv-textarea:focus { outline:none; border-color:#0a2e7a; }
.conv-send-btn { padding:8px 20px; background:#0a2e7a; color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:opacity .15s; }
.conv-send-btn:hover { opacity:.85; }
html[data-theme="dark"] .conv-send-btn { background:#1e3a6e; }
.conv-sidebar { width:240px; flex-shrink:0; border-left:1px solid var(--border); overflow-y:auto; padding:12px; background:var(--card); display:flex; flex-direction:column; gap:10px; }
#centerWorkspace.conv-narrow .conv-sidebar { display:none; }
#centerWorkspace.conv-narrow .conv-topbar { padding:8px 10px; gap:8px; }
#centerWorkspace.conv-narrow .conv-pills { flex-wrap:wrap; gap:4px; }
#centerWorkspace.conv-narrow .conv-pill { font-size:9px; padding:2px 6px; }
#centerWorkspace.conv-narrow .conv-compose { padding:8px 10px; }
#centerWorkspace.conv-narrow .conv-bubble { max-width:85%; font-size:12px; padding:8px 10px; }
.conv-sidebar-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); margin-bottom:2px; }
.conv-sidebar-val { font-size:12px; color:var(--text); margin-bottom:6px; }
.conv-sidebar-btn { width:100%; padding:7px 12px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--text); font-size:11px; font-weight:600; cursor:pointer; text-align:center; transition:all .15s; }
.conv-sidebar-btn:hover { border-color:#0a2e7a; color:#0a2e7a; }

/* ── BILLING SEARCH VIEW ── */
.billing-search-wrap { position:relative; }
.billing-search-input { width:100%; padding:12px 16px 12px 40px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:var(--card); color:var(--text); font-family:'Inter',sans-serif; }
.billing-search-input:focus { outline:none; border-color:#0a2e7a; }
.billing-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--text3); pointer-events:none; }
.billing-dropdown { display:none; position:absolute; top:100%; left:0; right:0; max-height:240px; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:8px; margin-top:4px; z-index:50; box-shadow:var(--shadow-hover); }
.billing-dropdown.visible { display:block; }
.billing-dropdown-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); font-size:13px; transition:background .1s; }
.billing-dropdown-item:last-child { border-bottom:none; }
.billing-dropdown-item:hover { background:var(--card-hover); }
.billing-dropdown-sub { font-size:10px; color:var(--text3); margin-top:2px; }
.billing-profile { display:flex; flex-direction:column; gap:14px; }
.billing-profile-header { display:flex; align-items:center; gap:14px; padding:14px; background:var(--card); border:1px solid var(--border); border-radius:10px; }
.billing-profile-name { font-size:16px; font-weight:500; }
.billing-profile-meta { font-size:12px; color:var(--text3); }
.billing-card-info { display:flex; align-items:center; gap:10px; padding:12px; background:var(--card); border:1px solid var(--border); border-radius:10px; }
.billing-card-icon { font-size:24px; }
.billing-history-table { width:100%; border-collapse:collapse; font-size:12px; }
.billing-history-table th { text-align:left; padding:8px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); border-bottom:2px solid var(--navy); background:var(--card); }
.billing-history-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
.billing-history-table tr:hover td { background:var(--card-hover); }
.billing-status-badge { padding:2px 8px; border-radius:10px; font-size:9px; font-weight:700; text-transform:uppercase; }
.billing-status-paid { background:#d1fae5; color:#166534; }
.billing-status-pending { background:#fef3c7; color:#92400e; }
.billing-status-overdue { background:#fee2e2; color:#991b1b; }
html[data-theme="dark"] .billing-status-paid { background:#14352a; color:#4ade80; }
html[data-theme="dark"] .billing-status-pending { background:#3d3214; color:#fde68a; }
html[data-theme="dark"] .billing-status-overdue { background:#3d1f1f; color:#fca5a5; }
.billing-actions { display:flex; gap:8px; flex-wrap:wrap; }
.billing-action-btn { padding:8px 16px; border:none; border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; transition:opacity .15s; }
.billing-action-btn:hover { opacity:.85; }

/* ── ZONE MANAGER 4-WEEK GRID ── */
.zm-4week-grid { display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto; }
.zm-week-row { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.zm-week-row-header { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:var(--nav-bg); color:#fff; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; cursor:pointer; user-select:none; }
.zm-week-row-header:hover { background:#1a2744; }
.zm-week-row-body { display:flex; gap:0; min-height:0; }
.zm-week-row.collapsed .zm-week-row-body { display:none; }
.zm-4w-day-col { flex:1; min-width:0; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.zm-4w-day-col:last-child { border-right:none; }
.zm-4w-day-header { padding:4px 6px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); background:var(--bg); border-bottom:1px solid var(--border); text-align:center; }
.zm-4w-drop-zone { min-height:30px; padding:2px; flex:1; }
.zm-4w-zone-card { padding:3px 6px; font-size:10px; border-radius:4px; margin-bottom:1px; cursor:grab; display:flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
.zm-4w-zone-card:hover { border-color:var(--navy); }
.zm-4w-zone-card .zm-zone-id { font-weight:700; font-size:9px; color:var(--navy); }
html[data-theme="dark"] .zm-4w-zone-card .zm-zone-id { color:#93c5fd; }
.zm-4w-zone-card .zm-4w-name { font-size:9px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; }

/* ── REPORTING CARDS ── */
.rpt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.rpt-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.rpt-card-header { display:flex; align-items:center; justify-content:space-between; }
.rpt-card-title { font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.rpt-card-icon { font-size:20px; }
.rpt-badge { padding:3px 10px; border-radius:10px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:rgba(10,46,122,.08); color:var(--navy); }
html[data-theme="dark"] .rpt-badge { background:rgba(59,130,246,.15); color:#93c5fd; }
.rpt-card-desc { font-size:12px; color:var(--text3); line-height:1.5; }
.rpt-card-items { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.rpt-card-item { font-size:11px; color:var(--text2); padding:4px 0; border-bottom:1px solid var(--border); }
.rpt-card-item:last-child { border-bottom:none; }
.rpt-quick-btn { padding:12px 20px; background:var(--card); border:2px solid var(--border); border-radius:10px; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:8px; }
.rpt-quick-btn:hover { border-color:var(--navy); background:rgba(10,46,122,.04); transform:translateY(-1px); }
html[data-theme="dark"] .rpt-quick-btn:hover { background:rgba(59,130,246,.1); border-color:#3b82f6; }
.rpt-cust-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.rpt-cust-row:hover { background:var(--card-hover); }
.rpt-tab { padding:8px 16px; background:none; border:none; font-size:12px; font-weight:700; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.rpt-tab.active { color:var(--navy); border-bottom-color:var(--navy); }
.rpt-tab:hover { color:var(--text); }
html[data-theme="dark"] .rpt-tab.active { color:#93c5fd; border-bottom-color:#93c5fd; }
.rpt-send-btn { padding:4px 10px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); border-radius:4px; color:#fff; font-size:10px; font-weight:700; cursor:pointer; }
.rpt-send-btn:hover { background:rgba(255,255,255,.25); }
.rpt-send-sm { padding:3px 10px; background:var(--navy); color:#fff; border:none; border-radius:4px; font-size:10px; font-weight:700; cursor:pointer; }
.rpt-send-sm:hover { opacity:.85; }

/* Inbox */
.tc-inbox-wrap { display: flex; flex: 1 1 auto; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.tc-inbox-list {
  width: 300px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.tc-inbox-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: background .15s;
}
.tc-inbox-item:hover { background: var(--card-hover); }
.tc-inbox-item.active { background: var(--card-hover); border-left: 3px solid var(--navy); }
.tc-inbox-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 6px;
}
.tc-inbox-dot.read { background: transparent; }
.tc-inbox-preview { flex: 1; min-width: 0; }
.tc-inbox-name { font-size: 13px; font-weight: 600; }
.tc-inbox-snippet { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-inbox-time { font-size: 10px; color: var(--text3); flex-shrink: 0; }
.tc-inbox-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tc-inbox-thread-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 auto;
}
.tc-inbox-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tc-msg {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.tc-msg.sent {
  background: var(--navy);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
html[data-theme="dark"] .tc-msg.sent { background: #1e3a6e; }
.tc-msg.received {
  background: var(--bg);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.tc-msg-time { font-size: 9px; color: var(--text3); margin-top: 4px; }
.tc-msg.sent .tc-msg-time { color: rgba(255,255,255,.6); text-align: right; }
.tc-msg-auto {
  font-size: 9px;
  padding: 2px 8px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 8px;
  display: inline-block;
  margin-top: 4px;
}
html[data-theme="dark"] .tc-msg-auto { background: #1e3a5f; color: #93c5fd; }
.tc-inbox-reply {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.tc-inbox-reply input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
.tc-inbox-reply input:focus { outline: none; border-color: var(--navy); }
.tc-quick-btns { display: flex; gap: 4px; padding: 6px 16px; flex: 0 0 auto; flex-wrap: wrap; }
.tc-quick-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 10px;
  color: var(--text3);
  cursor: pointer;
  background: var(--card);
  transition: all .15s;
}
.tc-quick-btn:hover { border-color: var(--navy); color: var(--navy); }

/* Reviews */
.tc-review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.tc-review-stars { color: #f59e0b; font-size: 16px; margin-bottom: 6px; }
.tc-review-text { font-size: 13px; color: var(--text2); font-style: italic; margin-bottom: 8px; line-height: 1.5; }
.tc-review-author { font-size: 12px; color: var(--text3); }
.tc-review-respond {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--navy);
  cursor: pointer;
  font-weight: 600;
}
html[data-theme="dark"] .tc-review-respond { color: #93c5fd; }

/* Referrals table */
.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tc-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
}
.tc-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.tc-table tr:hover { background: var(--card-hover); }

/* New Order form */
.tc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 700px; }
.tc-form-group { display: flex; flex-direction: column; gap: 4px; }
.tc-form-group.full { grid-column: 1 / -1; }
.tc-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tc-form-input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
.tc-form-input:focus { outline: none; border-color: var(--navy); }

/* ── NEW CUSTOMER / NEW JOB FORMS ── */
.no-container { display: flex; gap: 20px; flex-wrap: wrap; }
.no-main { flex: 1; min-width: 420px; }
.no-sidebar { width: 320px; min-width: 280px; }
.no-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.no-card-hdr {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
html[data-theme="dark"] .no-card-hdr { background: #1e3a6e; }
.no-card-body { padding: 16px; }
.no-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.no-row:last-child { margin-bottom: 0; }
.no-lbl {
  width: 130px;
  min-width: 130px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  padding-top: 10px;
  text-align: right;
}
.no-lbl .req { color: #dc2626; margin-left: 2px; }
.no-fld { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.no-fld-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.no-inp {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  transition: border-color .15s;
}
.no-inp:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(10,46,122,.12); }
.no-inp.sm { width: auto; min-width: 80px; flex: 1; }
.no-inp.xs { width: 70px; flex: none; }
.no-sel {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  appearance: auto;
}
.no-sel:focus { outline: none; border-color: var(--navy); }
.no-sel.full { width: 100%; }
.no-add-btn {
  font-size: 12px;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 0;
  white-space: nowrap;
}
html[data-theme="dark"] .no-add-btn { color: #93c5fd; }
.no-add-btn:hover { text-decoration: underline; }
.no-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  padding: 4px 0;
}
.no-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
}
.no-toggle-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.no-toggle-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
}
.no-toggle-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
html[data-theme="dark"] .no-toggle-btn.active { background: #1e3a6e; border-color: #1e3a6e; }
.no-toggle-btn:hover:not(.active) { border-color: var(--navy); }
.no-day-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: var(--card);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-day-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
html[data-theme="dark"] .no-day-btn.active { background: #1e3a6e; border-color: #1e3a6e; }
.no-summary {
  background: rgba(10,46,122,.06);
  border: 1px solid rgba(10,46,122,.15);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
html[data-theme="dark"] .no-summary { background: rgba(30,58,110,.3); color: #93c5fd; border-color: rgba(147,197,253,.2); }
.no-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid var(--border);
}
.no-btn {
  padding: 10px 28px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.no-btn-primary { background: var(--navy); color: #fff; }
html[data-theme="dark"] .no-btn-primary { background: #1e3a6e; }
.no-btn-primary:hover { opacity: .85; }
.no-btn-cancel { background: transparent; color: var(--text3); border: 1px solid var(--border); }
.no-btn-cancel:hover { background: var(--card-hover); }
.no-sep { border: none; border-top: 1px solid var(--border); margin: 4px 0 12px; }
.no-step-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
}
.no-step-tab {
  flex: 1;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text3);
  transition: all .15s;
}
.no-step-tab:first-child { border-radius: 8px 0 0 8px; }
.no-step-tab:last-child { border-radius: 0 8px 8px 0; }
.no-step-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
html[data-theme="dark"] .no-step-tab.active { background: #1e3a6e; border-color: #1e3a6e; }
.no-sidebar-tab {
  display: flex;
  gap: 0;
  margin-bottom: 0;
}
.no-sidebar-tab-btn {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  transition: all .15s;
}
.no-sidebar-tab-btn.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
html[data-theme="dark"] .no-sidebar-tab-btn.active { color: #93c5fd; border-bottom-color: #93c5fd; }
.no-inv-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.no-inv-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 4px;
  font-size: 14px;
  font-weight: 700;
}
.no-repeat-options { margin-top: 8px; }

/* Zone Manager — 4-week rotation calendar with drag-and-drop zones */
.zm-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.zm-toolbar {
  display:flex; align-items:center; gap:8px; padding:8px 0 10px; flex:0 0 auto; flex-wrap:wrap;
}
.zm-week-tabs { display:flex; gap:4px; }
.zm-week-tab {
  padding:6px 16px; border:2px solid var(--border); border-radius:20px;
  background:var(--card); color:var(--text); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; cursor:pointer; font-family:'Inter',sans-serif;
  transition: all .15s; user-select:none;
}
.zm-week-tab:hover { border-color:var(--navy); background:rgba(10,46,122,.06); }
.zm-week-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
html[data-theme="dark"] .zm-week-tab:hover { background:rgba(59,130,246,.15); }
html[data-theme="dark"] .zm-week-tab.active { background:#1e3a6e; border-color:#1e3a6e; }

.zm-jump-select {
  padding:5px 10px; border:1px solid var(--border); border-radius:6px;
  background:var(--card); color:var(--text); font-size:11px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer;
}
.zm-today-btn {
  padding:6px 14px; border:2px solid var(--navy); border-radius:6px;
  background:transparent; color:var(--navy); font-size:11px; font-weight:700;
  text-transform:uppercase; cursor:pointer; font-family:'Inter',sans-serif;
  transition: all .15s;
}
html[data-theme="dark"] .zm-today-btn { color:#93c5fd; border-color:#93c5fd; }
.zm-today-btn:hover { background:var(--navy); color:#fff; }
.zm-date-label {
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--text); margin-left:4px;
}
.zm-add-btn {
  margin-left:auto; padding:6px 16px; border:none; border-radius:6px;
  background:var(--navy); color:#fff; font-size:12px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s;
}
.zm-add-btn:hover { background:#0d3a9e; transform:translateY(-1px); box-shadow:0 2px 8px rgba(10,46,122,.3); }

/* Zone stats bar */
.zm-stats {
  display:flex; gap:12px; padding:0 0 8px; flex-wrap:wrap;
}
.zm-stat {
  font-size:11px; color:var(--text3); font-weight:600;
}
.zm-stat b { color:var(--text); font-weight:800; }

/* Weekly calendar grid — 5 columns Mon-Fri */
.zm-cal-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; flex:1 1 auto; overflow-y:auto;
  padding-bottom:8px;
}
.zm-day-col {
  display:flex; flex-direction:column; gap:4px; min-height:200px;
}
.zm-day-header {
  padding:8px 10px; border-radius:8px 8px 0 0; font-family:'Inter',sans-serif;
  font-size:12px; font-weight:700; color:#fff; text-align:center;
  position:sticky; top:0; z-index:2;
}
.zm-day-header.mon { background:#dc2626; }
.zm-day-header.tue { background:#2563eb; }
.zm-day-header.wed { background:#7c3aed; }
.zm-day-header.thu { background:#16a34a; }
.zm-day-header.fri { background:#f97316; }
.zm-day-header .zm-day-count {
  font-size:9px; opacity:.85; font-family:'Inter',sans-serif; font-weight:600; margin-top:2px;
}

.zm-drop-zone {
  flex:1; min-height:80px; border:2px dashed transparent; border-radius:6px;
  transition: all .2s; padding:2px;
  display:flex; flex-direction:column; gap:4px;
}
.zm-drop-zone.drag-over {
  border-color:var(--navy); background:rgba(10,46,122,.06);
}
html[data-theme="dark"] .zm-drop-zone.drag-over {
  border-color:#93c5fd; background:rgba(59,130,246,.08);
}

/* Zone cards — TINY single-line layout */
.zm-zone-card {
  background:var(--card); border:1px solid var(--border); border-radius:3px;
  padding:2px 6px; cursor:grab; transition:all .12s; position:relative;
  border-left:3px solid #94a3b8; margin-bottom:1px;
  display:flex; align-items:center; gap:4px; min-height:24px; height:auto;
  font-size:10px; line-height:1.3;
}
.zm-zone-card:active { cursor:grabbing; }
.zm-zone-card:hover { border-color:var(--navy); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.zm-zone-card.dragging { opacity:.4; transform:scale(.95); }
.zm-zone-card.expanded { border-color:var(--navy); flex-direction:column; align-items:stretch; }

/* Day-specific left border colors */
.zm-zone-card[data-day="Monday"] { border-left-color:#dc2626; }
.zm-zone-card[data-day="Tuesday"] { border-left-color:#2563eb; }
.zm-zone-card[data-day="Wednesday"] { border-left-color:#7c3aed; }
.zm-zone-card[data-day="Thursday"] { border-left-color:#16a34a; }
.zm-zone-card[data-day="Friday"] { border-left-color:#f97316; }

.zm-zone-inline {
  display:flex; align-items:center; gap:4px; flex:1; min-width:0; overflow:hidden;
}
.zm-zone-id {
  font-family:'Inter',sans-serif; font-size:10px; font-weight:800; color:var(--navy);
  flex-shrink:0; white-space:nowrap;
}
html[data-theme="dark"] .zm-zone-id { color:#93c5fd; }
.zm-zone-name {
  font-size:10px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zm-zone-zip {
  font-size:10px; color:var(--text3); font-weight:500; white-space:nowrap; flex-shrink:0;
}
.zm-zone-cust {
  display:none;
}

.zm-zone-menu-btn {
  background:none; border:none; cursor:pointer; font-size:12px; color:var(--text3);
  padding:0 2px; border-radius:3px; transition:all .1s; line-height:1; flex-shrink:0;
}
.zm-zone-menu-btn:hover { background:var(--card-hover); color:var(--text); }

/* Zone card expanded customer list */
.zm-zone-customers {
  margin-top:6px; padding-top:6px; border-top:1px solid var(--border);
  max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:3px;
}
.zm-cust-row {
  font-size:10px; color:var(--text2); padding:3px 6px; background:var(--bg);
  border-radius:4px; display:flex; justify-content:space-between;
}

/* Context menu */
.zm-context-menu {
  position:fixed; z-index:1000; background:var(--card); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.15); padding:4px 0; min-width:160px;
}
html[data-theme="dark"] .zm-context-menu { box-shadow:0 8px 24px rgba(0,0,0,.4); }
.zm-context-item {
  padding:8px 14px; font-size:12px; color:var(--text); cursor:pointer; transition:background .1s;
  display:flex; align-items:center; gap:8px;
}
.zm-context-item:hover { background:var(--card-hover); }
.zm-context-item.danger { color:#dc2626; }
.zm-context-item.danger:hover { background:#fef2f2; }
html[data-theme="dark"] .zm-context-item.danger:hover { background:#3b1111; }

/* Zone editor panel (bottom) */
.zm-editor {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; margin-top:8px; display:none; flex:0 0 auto;
  box-shadow:var(--shadow);
}
.zm-editor.visible { display:block; }
.zm-editor-title {
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:10px; display:flex; align-items:center; justify-content:space-between;
}
.zm-editor-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr 120px 120px; gap:10px; align-items:end;
}
.zm-editor-grid label {
  font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:3px; display:block;
}
.zm-editor-grid input, .zm-editor-grid select {
  width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--text); font-size:12px; font-family:'Inter',sans-serif;
}
.zm-editor-grid input:focus, .zm-editor-grid select:focus {
  outline:none; border-color:var(--navy); box-shadow:0 0 0 2px rgba(10,46,122,.15);
}
.zm-editor-actions {
  display:flex; gap:8px; margin-top:12px; justify-content:flex-end;
}
.zm-editor-actions button {
  padding:7px 18px; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all .15s;
}
.zm-btn-save { background:var(--navy); color:#fff; border:none; }
.zm-btn-save:hover { background:#0d3a9e; }
.zm-btn-cancel { background:transparent; color:var(--text3); border:1px solid var(--border); }
.zm-btn-cancel:hover { background:var(--card-hover); color:var(--text); }

/* Add zone modal */
.zm-modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5);
  z-index:900; display:flex; align-items:center; justify-content:center;
}
.zm-modal {
  background:var(--card); border-radius:12px; padding:24px; width:440px; max-width:90vw;
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}
html[data-theme="dark"] .zm-modal { box-shadow:0 16px 48px rgba(0,0,0,.5); }
.zm-modal h3 {
  font-family:'Inter',sans-serif; font-size:16px; font-weight:700; color:var(--text);
  margin-bottom:16px;
}
.zm-modal .form-row { margin-bottom:12px; }
.zm-modal .form-row label {
  font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:4px; display:block;
}
.zm-modal .form-row input, .zm-modal .form-row select {
  width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--text); font-size:13px; font-family:'Inter',sans-serif;
}
.zm-modal .form-row input:focus, .zm-modal .form-row select:focus {
  outline:none; border-color:var(--navy); box-shadow:0 0 0 2px rgba(10,46,122,.15);
}
.zm-modal-actions {
  display:flex; gap:8px; justify-content:flex-end; margin-top:16px;
}
.zm-modal-actions button {
  padding:8px 20px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all .15s;
}
.sched-day-stops { padding:6px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1; }
.sched-day-stop {
  padding:6px 8px; border-radius:6px; font-size:11px; border-left:3px solid transparent;
  transition:background .15s;
}
.sched-day-stop:hover { background:var(--card-hover); }
.sched-day-stop[data-status="pending"] { background:var(--card); border-left-color:#d1d5db; }
.sched-day-stop[data-status="en-route"] { background:#fef9c3; border-left-color:#eab308; }
.sched-day-stop[data-status="done"] { background:#dcfce7; border-left-color:#22c55e; }
.sched-day-stop[data-status="skipped"] { background:#dbeafe; border-left-color:#3b82f6; }
.sched-day-stop[data-status="issue"] { background:#fee2e2; border-left-color:#ef4444; }
html[data-theme="dark"] .sched-day-stop[data-status="en-route"] { background:rgba(234,179,8,0.15); }
html[data-theme="dark"] .sched-day-stop[data-status="done"] { background:rgba(34,197,94,0.15); }
html[data-theme="dark"] .sched-day-stop[data-status="skipped"] { background:rgba(59,130,246,0.15); }
html[data-theme="dark"] .sched-day-stop[data-status="issue"] { background:rgba(239,68,68,0.15); }
.sched-day-stop-name { font-weight:600; color:var(--text); }
.sched-day-stop-addr { font-size:10px; color:var(--text3); }
.sched-day-stop-plan { font-size:9px; color:var(--text3); margin-top:2px; }

/* ── KPI ROW ── */
#kpiRow {
  display: flex;
  gap: 6px;
  padding: 6px;
  flex: 0 0 auto;
  height: 105px;
  min-height: 105px;
  max-height: 105px;
  align-items: stretch;
}
#kpiRow .kpi-card { flex: 1; min-width: 0; }
#kpiRow .kpi-card[style*="display: none"] { flex: 0; padding: 0; border: 0; margin: 0; overflow: hidden; min-width: 0; width: 0; }
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow .2s;
  cursor: default;
  position: relative;
}
.kpi-card:hover { box-shadow: var(--shadow-hover); }
.kpi-header {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpi-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1;
  gap: 6px;
}
.kpi-stat { text-align: center; }
.kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.kpi-label {
  font-size: 9px;
  color: var(--text3);
  font-weight: 500;
  margin-top: 2px;
}
.kpi-up { color: var(--green); }
.kpi-down { color: var(--red); }

/* ── COLLAPSIBLE DASHBOARD SECTIONS ── */
.dash-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 0 6px;
}
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  background: var(--card);
  border-bottom: 1px solid transparent;
  transition: background .15s;
}
.dash-section-header:hover { background: var(--card-hover); }
.dash-section-header .chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform .25s ease;
  color: var(--text3);
  margin-left: 8px;
}
.dash-section.open .dash-section-header { border-bottom-color: var(--border); }
.dash-section.open .dash-section-header .chevron { transform: rotate(90deg); }
.dash-section-body {
  display: none;
  padding: 12px 14px;
}
.dash-section.open .dash-section-body { display: block; }
.dash-tier-table, .dash-zip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-tier-table th, .dash-zip-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.dash-tier-table td, .dash-zip-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.dash-tier-table tr:last-child td, .dash-zip-table tr:last-child td { border-bottom: none; }
.dash-tier-table tr:hover td, .dash-zip-table tr:hover td { background: var(--card-hover); }
.tier-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--navy);
  display: inline-block;
  vertical-align: middle;
}

/* ── ROUTE BOARD TAB ── */
.rb-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}
.rb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.rb-toolbar button, .rb-toolbar select, .rb-toolbar input[type="date"] {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.rb-toolbar button:hover { background: var(--card-hover); }
.rb-toolbar .rb-day-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.rb-toolbar .rb-add-stop-btn {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  font-weight: 600;
  margin-left: auto;
}
.rb-toolbar .rb-add-stop-btn:hover { background: #0d3a9a; }
.rb-board {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.rb-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}
.rb-col-header {
  padding: 10px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rb-col-header .rb-route-name { font-size: 13px; }
.rb-col-header .rb-route-meta { font-size: 10px; opacity: 0.85; font-weight: 400; display: flex; justify-content: space-between; }
.rb-col-header select {
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}
.rb-col-header select option { color: #111; background: #fff; }
.rb-stops {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rb-stop-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  cursor: default;
  transition: box-shadow .15s;
}
.rb-stop-card:hover { box-shadow: var(--shadow-hover); }
.rb-stop-card .rb-stop-name { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.rb-stop-card .rb-stop-addr { color: var(--text3); font-size: 10px; }
.rb-stop-card .rb-stop-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.rb-stop-card .rb-stop-cans { font-size: 10px; color: var(--text3); }
.rb-stop-card .rb-stop-status {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}
/* Stop status colors */
.rb-stop-card[data-status="scheduled"] { border-left-color: #94a3b8; }
.rb-stop-card[data-status="scheduled"] .rb-stop-status { background: #f1f5f9; color: #64748b; }
.rb-stop-card[data-status="waiting"] { border-left-color: #eab308; }
.rb-stop-card[data-status="waiting"] .rb-stop-status { background: #fef3c7; color: #92400e; }
.rb-stop-card[data-status="confirmed"] { border-left-color: #22c55e; }
.rb-stop-card[data-status="confirmed"] .rb-stop-status { background: #d1fae5; color: #166534; }
.rb-stop-card[data-status="completed"] { border-left-color: #3b82f6; }
.rb-stop-card[data-status="completed"] .rb-stop-status { background: #dbeafe; color: #1e40af; }
.rb-stop-card[data-status="problem"] { border-left-color: #ef4444; }
.rb-stop-card[data-status="problem"] .rb-stop-status { background: #fee2e2; color: #991b1b; }
html[data-theme="dark"] .rb-stop-card[data-status="scheduled"] .rb-stop-status { background: #334155; color: #94a3b8; }
html[data-theme="dark"] .rb-stop-card[data-status="waiting"] .rb-stop-status { background: #3d3214; color: #fbbf24; }
html[data-theme="dark"] .rb-stop-card[data-status="confirmed"] .rb-stop-status { background: #14352a; color: #4ade80; }
html[data-theme="dark"] .rb-stop-card[data-status="completed"] .rb-stop-status { background: #1e3a5f; color: #60a5fa; }
html[data-theme="dark"] .rb-stop-card[data-status="problem"] .rb-stop-status { background: #3d1f1f; color: #f87171; }

/* ── ROUTE BOARD DRAGGABLE DIVIDERS ── */
.rb-divider {
  flex: 0 0 6px;
  background: var(--navy);
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  margin: 0;
  transition: background .15s;
  user-select: none;
  z-index: 10;
  min-height: 40px;
}
.rb-divider:hover, .rb-divider.dragging { background: #2563eb; }
.rb-divider::after {
  content: '⋮';
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1;
}

/* ── ROUTE MAP VIEW ── */
.rb-map-container {
  flex: 1;
  min-height: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  display: none;
}
.rb-map-container.active { display: block; }
.rb-map-container .leaflet-container { width: 100%; height: 100%; min-height: 400px; }
.rb-map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--card);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 1000;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rb-map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rb-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rb-toolbar .rb-map-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.rb-toolbar .rb-map-toggle.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ── ADD STOP MODAL ── */
.add-stop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-stop-modal {
  background: var(--card);
  border-radius: 12px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.add-stop-modal-header {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.add-stop-modal-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: .7;
}
.add-stop-modal-header button:hover { opacity: 1; }
.add-stop-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-stop-modal-body label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  display: block;
}
.add-stop-modal-body input,
.add-stop-modal-body select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
.add-stop-modal-body .as-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
}
.add-stop-modal-body .as-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.add-stop-modal-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.add-stop-modal-footer button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.add-stop-modal-footer .as-btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.add-stop-modal-footer .as-btn-primary:hover { background: #0d3a9a; }
.add-stop-search-results {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: none;
}
.add-stop-search-results.visible { display: block; }
.add-stop-result {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.add-stop-result:last-child { border-bottom: none; }
.add-stop-result:hover { background: var(--card-hover); }

/* Attention card scrollable list */
.attn-list {
  flex: 1;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.6;
}
.attn-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── MAIN CONTENT (map + divider + routes) ── */
#contentArea {
  display: none; /* legacy — content now in panels */
}
#dashboardContent {
  display: none; /* legacy — replaced by panel system */
}

/* MAP — lives inside panelMap */
#mapContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#map { width: 100%; height: 100%; }

/* DIVIDER — between map panel and route panels */
#divider {
  flex: 0 0 8px;
  background: var(--navy);
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin: 0;
  transition: background .15s;
  user-select: none;
  z-index: 10;
}
html[data-theme="dark"] #divider { background: #1e3a6e; }
#divider:hover { background: #1a4aaa; }
#divider:active { background: #2563eb; }
.divider-dots {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  letter-spacing: 2px;
  writing-mode: vertical-lr;
  pointer-events: none;
}

/* ROUTES — each route is inside its own panel */
#routeArea {
  display: none; /* legacy — routes now in individual panels */
}
.route-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.route-tiles {
  flex: 1;
  overflow-y: auto;
  padding: 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.route-col.collapsed {
  display: none; /* collapse handled by panel system now */
}
.route-header {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 6px 6px 0 0;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.rh-close {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
}
.rh-close:hover { opacity: 1; }
.route-col.collapsed .rh-close { display: none; }
.route-header {
  z-index: 5;
}
.route-header .rh-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-header .rh-sub { font-size: 9px; opacity: .8; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-col.collapsed .route-header {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  border-radius: 6px;
  padding: 8px 3px;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
}
.route-col.collapsed .rh-title {
  font-size: 10px;
  letter-spacing: .5px;
}
.route-col.collapsed .rh-sub { display: none; }
.route-col.collapsed .route-tiles { display: none; }

/* ROUTE TILE */
.route-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid #93c5fd;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: clamp(7px, 0.8vw, 9px);
  line-height: 1.15;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--text);
  min-height: 22px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.route-tile:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.route-tile.tile-dragging {
  opacity: 0.4;
  transform: scale(0.95);
}
.route-tile.tile-drop-target {
  border-top: 3px solid var(--blue);
  padding-top: 2px;
}
.route-tile.tile-highlighted {
  outline: 2px solid var(--navy);
  outline-offset: -1px;
  box-shadow: 0 0 12px rgba(10,46,122,.3);
}
.route-tile.tile-pinned {
  outline: 2px solid #f59e0b;
  outline-offset: -1px;
  box-shadow: 0 0 12px rgba(245,158,11,.4);
}
.route-tile.tile-pinned::after {
  content: '📌';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 8px;
}
.route-tiles.tiles-drop-zone {
  background: rgba(59,130,246,0.05);
  border: 1px dashed rgba(59,130,246,0.3);
  border-radius: 4px;
}
.route-tile .rt-plan { font-weight: 400; color: var(--text); }
.route-tile .rt-name { font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.route-tile .rt-addr { color: var(--text); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }

/* Dense layout: clip long addresses (like Dalton's full-street-city-zip) so every tile is the same height */
.route-tile {
  height: auto !important;
  max-height: none !important;
  min-height: 22px;
  width: 100%;
  box-sizing: border-box;
}
.route-col {
  min-width: 0;
  flex: 1 1 0;
}

/* Tile status colors — keyed on real status names
   Apr 18 palette overhaul (overrides Pt9 — locked via Howard's "APPLY ALL"):
   Must mirror STATUS_COLORS in occ_crm_modules.js. Any change here → change there. */

/* Completed — dark blue */
.route-tile[data-status="completed"],
.route-tile[data-status="done"],
.route-tile[data-status="cleaned"]           { background: #dbeafe; border-left-color: #1e40af; }

/* Completed — Downgraded (fewer cans than ordered, service complete) — mid-blue */
.route-tile[data-status="completed_downgraded"] { background: #dbeafe; border-left-color: #60a5fa; }

/* Empty Confirmed — bright stoplight green */
.route-tile[data-status="empty_confirmed"],
.route-tile[data-status="empty"],
.route-tile[data-status="confirmed_empty"]   { background: #d1fae5; border-left-color: #22c55e; }

/* Missed (Escalated) — red */
.route-tile[data-status="missed"],
.route-tile[data-status="missed_can"],
.route-tile[data-status="no_cans"],
.route-tile[data-status="no_cans_out"]       { background: #fca5a5; border-left-color: #ef4444; }

/* Canceled — dark red (distinguishes from Missed) */
.route-tile[data-status="canceled"],
.route-tile[data-status="cancelled"]         { background: #fca5a5; border-left-color: #b91c1c; }

/* Rescheduled — darker orange (distinguishes from Waiting—Garbage orange) */
.route-tile[data-status="rescheduled"],
.route-tile[data-status="skipped"],
.route-tile[data-status="skip"]              { background: #fed7aa; border-left-color: #c2410c; }

/* Waiting — Garbage / Recycling — orange (merged per Apr 18 v2 APPLY ALL) */
.route-tile[data-status="waiting"],
.route-tile[data-status="waiting_garbage"],
.route-tile[data-status="waiting_recycling"] { background: #fed7aa; border-left-color: #f97316; }

/* Confirmed — yellow (default state) */
.route-tile[data-status="scheduled"],
.route-tile[data-status="confirmed"],
.route-tile:not([data-status])               { background: #fef3c7; border-left-color: #fbbf24; }

.route-tile[data-status="void"]              { background: #f3f4f6; border-left-color: #9ca3af; }

/* Status dot — colored circle in top-right corner of each tile */
.tile-status-dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; margin-top: 2px; cursor: pointer;
  background: #94a3b8; border: 1.5px solid rgba(0,0,0,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
/* Down-arrow inside the dot to signal it's clickable */
.tile-status-dot::after {
  content: '▾';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  line-height: 1;
  text-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.tile-status-dot:hover {
  transform: scale(1.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.route-tile[data-status="completed"] .tile-status-dot,
.route-tile[data-status="done"] .tile-status-dot,
.route-tile[data-status="cleaned"] .tile-status-dot          { background: #3b82f6; }
.route-tile[data-status="empty_confirmed"] .tile-status-dot,
.route-tile[data-status="empty"] .tile-status-dot,
.route-tile[data-status="confirmed_empty"] .tile-status-dot  { background: #22c55e; }
.route-tile[data-status="missed"] .tile-status-dot,
.route-tile[data-status="missed_can"] .tile-status-dot,
.route-tile[data-status="no_cans"] .tile-status-dot,
.route-tile[data-status="no_cans_out"] .tile-status-dot,
.route-tile[data-status="canceled"] .tile-status-dot,
.route-tile[data-status="cancelled"] .tile-status-dot        { background: #dc2626; }
.route-tile[data-status="rescheduled"] .tile-status-dot,
.route-tile[data-status="skipped"] .tile-status-dot,
.route-tile[data-status="skip"] .tile-status-dot             { background: #f97316; }
.route-tile[data-status="waiting"] .tile-status-dot,
.route-tile[data-status="waiting_garbage"] .tile-status-dot,
.route-tile[data-status="partial"] .tile-status-dot,
.route-tile[data-status="scheduled"] .tile-status-dot,
.route-tile[data-status="confirmed"] .tile-status-dot,
.route-tile:not([data-status]) .tile-status-dot              { background: #f59e0b; }

.route-tile[data-status="waiting_recycling"] .tile-status-dot { background: #7c3aed; }

/* Status change dropdown */
.status-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid #cbd5e1;
  border-radius: 6px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.12);
  z-index: 9999; min-width: 160px; padding: 4px 0; display: none;
}
.status-dropdown.show { display: block; }
.status-dropdown button {
  width: 100%; text-align: left; padding: 7px 12px;
  border: none; background: none; font-size: 12px; cursor: pointer; color: #1e293b;
}
.status-dropdown button:hover { background: #f1f5f9; }
.status-dropdown button[data-cur] { font-weight: 700; color: var(--blue, #2563eb); }

html[data-theme="dark"] .route-tile { color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .route-tile .rt-plan { color: #94a3b8; }
html[data-theme="dark"] .route-tile .rt-addr { color: #94a3b8; }
html[data-theme="dark"] .route-tile[data-status="completed"],
html[data-theme="dark"] .route-tile[data-status="done"],
html[data-theme="dark"] .route-tile[data-status="cleaned"]   { background: #1e3a5f; border-left-color: #60a5fa; color: #bfdbfe; }
html[data-theme="dark"] .route-tile[data-status="empty_confirmed"],
html[data-theme="dark"] .route-tile[data-status="empty"],
html[data-theme="dark"] .route-tile[data-status="confirmed_empty"] { background: #14352a; border-left-color: #4ade80; color: #bbf7d0; }
html[data-theme="dark"] .route-tile[data-status="waiting"],
html[data-theme="dark"] .route-tile[data-status="waiting_garbage"],
html[data-theme="dark"] .route-tile[data-status="waiting_recycling"],
html[data-theme="dark"] .route-tile[data-status="partial"]   { background: #3d3214; border-left-color: #fbbf24; color: #fef08a; }
html[data-theme="dark"] .route-tile[data-status="missed"],
html[data-theme="dark"] .route-tile[data-status="missed_can"],
html[data-theme="dark"] .route-tile[data-status="no_cans"],
html[data-theme="dark"] .route-tile[data-status="no_cans_out"] { background: #3d1f1f; border-left-color: #f87171; color: #fecaca; }
html[data-theme="dark"] .status-dropdown { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .status-dropdown button { color: #e2e8f0; }
html[data-theme="dark"] .status-dropdown button:hover { background: #334155; }

/* ════════════════════════════════════
   CUSTOMER PROFILE PANEL
   ════════════════════════════════════ */
#profilePanel {
  position: fixed;
  top: 90px;
  right: -350px;
  width: 350px;
  bottom: 0;
  background: var(--profile-bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(10,46,122,.08);
  z-index: 450;
  display: flex;
  flex-direction: column;
  transition: right .3s ease;
  overflow: hidden;
}
#profilePanel.open { right: 0; }

.pp-header {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
html[data-theme="dark"] .pp-header { background: #1e3a6e; }
.pp-header-name { font-size: 16px; font-weight: 500; }
.pp-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 22px;
  cursor: pointer;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all .2s;
}
.pp-close:hover { background: rgba(255,255,255,.15); color: #fff; }

.pp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pp-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.pp-section-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text3);
  margin-bottom: 8px;
}
.pp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.pp-row-label { color: var(--text3); font-weight: 400; }
.pp-row-val { color: var(--text); font-weight: 400; }
.pp-row-val a { color: var(--blue); text-decoration: none; }
.pp-row-val a:hover { text-decoration: underline; }
.pp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
}
html[data-theme="dark"] .pp-badge { background: #1e3a5f; color: #93c5fd; }
.pp-notes {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg);
  border-radius: 6px;
}
.pp-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.pp-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
html[data-theme="dark"] .pp-btn { background: #1e3a6e; }
.pp-btn:hover { opacity: .85; }

/* ════════════════════════════════════
   MOVE CONFIRMATION MODAL
   ════════════════════════════════════ */
#moveModal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 600;
  align-items: center;
  justify-content: center;
}
#moveModal.open { display: flex; }
.move-dialog {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  text-align: center;
}
.move-dialog h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.move-dialog p {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 20px;
}
.move-dialog .move-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.move-dialog .move-btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.move-dialog .move-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.move-btn-once { background: var(--navy); color: #fff; border-color: var(--navy); }
.move-btn-perm { background: #16a34a; color: #fff; border-color: #16a34a; }
.move-btn-cancel { background: var(--card); color: var(--text2); }

/* ════════════════════════════════════
   BOTTOM DOCK — REMOVED (replaced by panel system)
   ════════════════════════════════════ */
#bottomDock { display: none !important; }

/* ════════════════════════════════════
   WIDGET DRAG & DROP
   ════════════════════════════════════ */
.widget-dragging { opacity: .5; }
.widget-drag-over {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
}

/* KPI drag header */
.kpi-drag-handle {
  cursor: grab;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  z-index: 2;
}
.kpi-drag-handle:active { cursor: grabbing; }

/* KPI controls */
.kpi-controls {
  display: flex;
  gap: 4px;
  position: absolute;
  top: 4px; right: 6px;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s;
}
.kpi-card:hover .kpi-controls { opacity: 1; }
.kpi-ctrl-btn {
  width: 18px; height: 18px;
  border: none;
  background: rgba(0,0,0,.1);
  border-radius: 4px;
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.kpi-ctrl-btn:hover { background: rgba(0,0,0,.2); color: var(--text); }

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 1400px) {
  #header { padding: 0 10px; }
  .hdr-left { gap: 8px; }
  #hdrKpiPills { gap: 6px; margin-left: 8px; }
  .hdr-kpi-pill { padding: 2px 6px; }
  .kpi-pill-label { font-size: 8px !important; }
  .kpi-pill-val { font-size: 11px !important; }
  .hdr-right { gap: 4px !important; }
  .cog-label { font-size: 16px; letter-spacing: 1px; }
  .nav-tile { width: 36px; height: 36px; font-size: 16px; }
  .at-icon-btn { width: 28px; height: 28px; font-size: 13px; }
}
@media (max-width: 1200px) {
  .hdr-center { display: none !important; } /* hide clock */
  .cog-label { font-size: 14px; letter-spacing: 0; }
}
@media (max-width: 1024px) {
  .nav-tile { width: 34px; height: 34px; }
  #mainArea { left: 42px; }
  #actionToolbar { left: 42px; }
  #kpiRow { grid-template-columns: repeat(2, 1fr); min-height: auto; max-height: none; }
  #hdrRouteProgress { font-size: 9px; gap: 8px; }
  .at-search { width: 150px; }
  .at-date { display: none; }
  .panel-right { flex: 0 0 240px; max-width: 240px; }
  #hdrKpiPills .hdr-kpi-pill:nth-child(2) { display: none; } /* hide Stops/Cans */
  .cog-logo svg { width: 20px; height: 20px; }
}
@media (max-width: 900px) {
  #hdrKpiPills { display: none; } /* hide all KPI pills */
  .cog-label { display: none; } /* hide CRM label */
  .hdr-right { flex: 0 0 auto; }
}
@media (max-width: 768px) {
  #mainArea { left: 0; }
  #actionToolbar { left: 0; }
  #hdrRouteProgress { display: none !important; }
  .panel-right { display: none !important; }
  #kpiRow { grid-template-columns: 1fr; }
  #divider { display: none; }
  #profilePanel { width: 100%; right: -100%; }
  .at-search { width: 130px; }
  #leftPanelsZone { flex-direction: column; }
  .panel-route { flex: 0 0 auto; max-height: 200px; }
  .hdr-right .hdr-kpi-pill .kpi-pill-label { display: none; } /* R1/R2/R3/R4 labels hidden, values remain */
}

/* ════════════════════════════════════
   RIGHT PANEL — Calendar + Live Feed
   ════════════════════════════════════ */
#dashRightPanel {
  display: none; /* legacy — replaced by panelCalendar + panelInbox */
}

/* ── Mini Calendar ── */
.rp-calendar {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.rp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rp-cal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.rp-cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rp-cal-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.rp-cal-btn:hover { background: var(--card-hover); border-color: var(--navy); color: var(--navy); }
.rp-cal-today {
  font-size: 10px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.rp-cal-today:hover { background: rgba(10,46,122,.08); }
.rp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
}
.rp-cal-dow {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  padding: 2px 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rp-cal-day {
  font-size: 11px;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  transition: all .12s;
  font-weight: 500;
  line-height: 1;
}
.rp-cal-day:hover { background: rgba(10,46,122,.08); }
.rp-cal-day.other-month { color: var(--text3); opacity: .45; }
.rp-cal-day.today {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}
.rp-cal-day.selected {
  background: rgba(10,46,122,.15);
  color: var(--navy);
  font-weight: 700;
}
.rp-cal-day.today.selected {
  background: var(--navy);
  color: #fff;
}
.rp-cal-day.has-stops {
  position: relative;
}
.rp-cal-day.has-stops::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  margin: 1px auto 0;
}
.rp-cal-day.today.has-stops::after { background: #86efac; }

/* ── Live Feed ── */
.rp-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.rp-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--widget-header);
  color: var(--widget-header-text);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: .5px;
}
.rp-feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: feedPulse 2s ease-in-out infinite;
}
@keyframes feedPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.rp-feed-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.rp-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  min-height: 0;
}
.rp-feed-item:hover { background: var(--card-hover); }
.rp-feed-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.3;
}
.rp-feed-body {
  flex: 1;
  min-width: 0;
}
.rp-feed-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-feed-msg {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.rp-feed-time {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text3);
  white-space: nowrap;
  margin-top: 1px;
}

/* ── Right Panel responsive — legacy, handled by panel system ── */

/* ════════════════════════════════════
   TEMPLATE EDITOR MODAL
   ════════════════════════════════════ */
#templateEditorOverlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.55); z-index:9999;
  align-items:center; justify-content:center;
}
#templateEditorOverlay.open { display:flex; }
.te-card {
  background:var(--card); border-radius:14px; width:500px; max-width:95vw;
  box-shadow:0 8px 32px rgba(0,0,0,.3); overflow:hidden;
}
.te-header {
  background:var(--navy); color:#fff; padding:14px 18px;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  display:flex; justify-content:space-between; align-items:center;
}
.te-header button { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; opacity:.7; }
.te-header button:hover { opacity:1; }
.te-body { padding:18px; display:flex; flex-direction:column; gap:12px; }
.te-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); }
.te-input {
  width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:13px; background:var(--card); color:var(--text); outline:none;
  font-family:'Inter',sans-serif;
}
.te-input:focus { border-color:var(--navy); }
.te-textarea {
  width:100%; min-height:200px; padding:10px 12px; border:1px solid var(--border);
  border-radius:8px; font-size:13px; background:var(--card); color:var(--text);
  outline:none; resize:vertical; font-family:'Inter',sans-serif; line-height:1.5;
}
.te-textarea:focus { border-color:var(--navy); }
.te-type-badge {
  display:inline-block; padding:3px 10px; border-radius:10px;
  font-size:10px; font-weight:700; text-transform:uppercase;
}
.te-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:0 18px 18px; }
.te-btn {
  padding:8px 18px; border:none; border-radius:8px; font-size:12px;
  font-weight:700; cursor:pointer; transition:all .2s;
}
.te-btn-send-email { background:#2563eb; color:#fff; }
.te-btn-send-email:hover { background:#1d4ed8; }
.te-btn-send-sms { background:var(--navy); color:#fff; }
.te-btn-send-sms:hover { background:#081f5a; }
.te-btn-save { background:var(--green); color:#fff; }
.te-btn-save:hover { background:#15803d; }
.te-btn-cancel { background:var(--border); color:var(--text2); }
.te-btn-cancel:hover { background:var(--text3); color:#fff; }

/* ════════════════════════════════════
   DOCUMENT MANAGER
   ════════════════════════════════════ */
.doc-category {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow);
}
.doc-cat-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; cursor:pointer; transition:background .2s;
}
.doc-cat-header:hover { background:var(--card-hover); }
.doc-cat-title { font-weight:700; font-size:13px; color:var(--text); display:flex; align-items:center; gap:8px; }
.doc-cat-count { font-size:11px; color:var(--text3); font-weight:600; }
.doc-cat-chevron { font-size:14px; color:var(--text3); transition:transform .2s; }
.doc-category.expanded .doc-cat-chevron { transform:rotate(90deg); }
.doc-cat-body { display:none; border-top:1px solid var(--border); padding:10px 16px; }
.doc-category.expanded .doc-cat-body { display:block; }
.doc-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text2);
}
.doc-item:last-child { border-bottom:none; }
.doc-item-name { font-weight:600; color:var(--text); flex:1; }
.doc-item-meta { color:var(--text3); font-size:11px; margin:0 12px; }
.doc-item-dl { cursor:pointer; color:var(--navy); font-size:14px; padding:4px; }
.doc-item-dl:hover { color:var(--blue); }
.doc-upload-btn {
  margin-top:8px; padding:6px 14px; border:1px dashed var(--border);
  border-radius:8px; background:transparent; color:var(--text3);
  font-size:11px; font-weight:600; cursor:pointer; transition:all .2s;
}
.doc-upload-btn:hover { border-color:var(--navy); color:var(--navy); background:rgba(10,46,122,.04); }

/* ════════════════════════════════════
   GIFT CERTIFICATE ENGINE
   ════════════════════════════════════ */
.gc-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:600px; margin-bottom:20px; }
.gc-field { display:flex; flex-direction:column; gap:4px; }
.gc-field.full { grid-column:1/-1; }
.gc-field label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); }
.gc-field input, .gc-field select, .gc-field textarea {
  padding:8px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:13px; background:var(--card); color:var(--text); outline:none;
  font-family:'Inter',sans-serif;
}
.gc-field input:focus, .gc-field select:focus, .gc-field textarea:focus { border-color:var(--navy); }
.gc-amounts { display:flex; gap:6px; flex-wrap:wrap; }
.gc-amt-btn {
  padding:8px 16px; border:1px solid var(--border); border-radius:8px;
  background:var(--card); color:var(--text); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.gc-amt-btn:hover, .gc-amt-btn.selected { background:var(--navy); color:#fff; border-color:var(--navy); }
.gc-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:16px; }
.gc-table th {
  text-align:left; padding:8px 10px; font-family:'Inter',sans-serif;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--widget-header-text); background:var(--widget-header);
}
.gc-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
.gc-status-active { color:var(--green); font-weight:700; }
.gc-status-redeemed { color:var(--text3); font-weight:600; }

/* ════════════════════════════════════
   MULTI-LOCATION (Profile Panel)
   ════════════════════════════════════ */
.loc-item {
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:12px;
}
.loc-item:last-child { border-bottom:none; }
.loc-badge {
  display:inline-block; padding:2px 8px; border-radius:8px;
  font-size:10px; font-weight:600; text-transform:none;
  background:var(--navy); color:#fff;
}
.loc-addr { flex:1; color:var(--text2); }
.loc-card-info { font-size:11px; color:var(--text3); }
.loc-add-btn {
  margin-top:8px; padding:5px 12px; border:1px dashed var(--border);
  border-radius:8px; background:transparent; color:var(--text3);
  font-size:11px; font-weight:600; cursor:pointer; transition:all .2s;
}
.loc-add-btn:hover { border-color:var(--navy); color:var(--navy); }

/* ════════════════════════════════════
   DASHBOARD LIVE/DEMO INDICATOR
   ════════════════════════════════════ */
.data-indicator {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:10px; font-size:10px; font-weight:700;
  font-family:'Inter',sans-serif; letter-spacing:.5px;
}
.data-indicator.live { background:rgba(22,163,74,.15); color:var(--green); }
.data-indicator.demo { background:rgba(245,158,11,.15); color:var(--amber); }

/* ════════════════════════════════════
   MERGED FROM OCC_CRM — User Modal, New Job Modal, Forms
   ════════════════════════════════════ */
/* Forms */
.form-group { margin-bottom: 16px; }
.form-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 6px; display: block; }
.form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); background: var(--card); outline: none; transition: border-color .2s; }
.form-input:focus { border-color: var(--navy); }
html[data-theme="dark"] .form-input { background: #1a1f30; border-color: #2e3348; color: var(--text); }
.form-input::placeholder { color: var(--text3); }
.form-select { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); background: var(--card); outline: none; cursor: pointer; }
html[data-theme="dark"] .form-select { background: #1a1f30; border-color: #2e3348; color: var(--text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-result { padding: 16px; border-radius: 10px; margin-top: 16px; font-size: 13px; }
.form-result.success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.form-result.error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
/* Buttons */
.btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: #0a2e7a; color: #fff; }
.btn-primary:hover { background: #081f56; }
.btn-secondary { background: var(--card); color: var(--text2); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--navy); color: var(--navy); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 12px; }
/* Loading / Empty */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--text3); gap: 12px; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { text-align: center; padding: 48px 24px; color: var(--text3); }
.empty-state .icon { font-size: 40px; margin-bottom: 12px; }
/* Modal overlay */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 500; display: none; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: var(--card); border-radius: 16px; padding: 24px; max-width: 500px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 80vh; overflow-y: auto; }
.modal-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
/* User Edit Modal */
.user-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); z-index: 600; display: none; align-items: flex-start; justify-content: center; padding-top: 40px; overflow-y: auto; }
.user-modal-overlay.show { display: flex; }
.user-modal { background: var(--card); border-radius: 16px; width: 580px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,.35); margin-bottom: 40px; overflow: hidden; }
.user-modal-header { background: #0a2e7a; color: #fff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
html[data-theme="dark"] .user-modal-header { background: #1a2744; }
.user-modal-header h2 { font-size: 17px; font-weight: 800; margin: 0; }
.user-modal-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; }
.user-modal-close:hover { color: #fff; }
.user-modal-body { padding: 24px; max-height: calc(100vh - 180px); overflow-y: auto; }
.user-modal-section { margin-bottom: 6px; }
.um-section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--border); user-select: none; }
.um-section-title { font-size: 14px; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 8px; }
html[data-theme="dark"] .um-section-title { color: var(--blue); }
.um-section-chevron { font-size: 12px; color: var(--text3); transition: transform .2s; margin-right: 8px; }
.um-section-chevron.open { transform: rotate(90deg); }
.um-section-right { display: flex; align-items: center; gap: 10px; }
.um-section-body { overflow: hidden; transition: max-height .3s ease, opacity .2s ease; max-height: 0; opacity: 0; }
.um-section-body.open { max-height: 2000px; opacity: 1; }
.um-section-body-inner { padding: 14px 0 8px; }
/* Toggle Switch */
.toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e1; border-radius: 24px; transition: background .2s; }
.toggle-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle-switch input:checked + .toggle-slider { background: #0a2e7a; }
html[data-theme="dark"] .toggle-switch input:checked + .toggle-slider { background: #3b6fd4; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .4; cursor: not-allowed; }
.toggle-switch.sm { width: 36px; height: 20px; }
.toggle-switch.sm .toggle-slider:before { height: 14px; width: 14px; }
.toggle-switch.sm input:checked + .toggle-slider:before { transform: translateX(16px); }
/* Permission Row */
.perm-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.perm-row:last-child { border-bottom: none; }
.perm-label { font-size: 13px; color: var(--text); font-weight: 500; }
.perm-row.disabled .perm-label { color: var(--text3); }
/* Checkbox Group */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
.checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.checkbox-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0a2e7a; cursor: pointer; }
.checkbox-item.disabled { opacity: .4; pointer-events: none; }
/* User Modal Footer */
.user-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--card); }
.user-modal-footer .btn-save { background: #0a2e7a; color: #fff; padding: 10px 28px; font-size: 14px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; transition: background .15s; }
.user-modal-footer .btn-save:hover { background: #081f56; }
.user-modal-footer .btn-close-modal { background: var(--card); color: var(--text3); padding: 10px 20px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all .15s; }
.user-modal-footer .btn-close-modal:hover { border-color: var(--navy); color: var(--navy); }
.delete-user-btn { background: none; border: none; color: #dc2626; font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px; margin-top: 4px; }
.delete-user-btn:hover { text-decoration: underline; }
/* Toast */
.toast-notification { position: fixed; top: 24px; right: 24px; background: #0a2e7a; color: #fff; padding: 14px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; z-index: 700; box-shadow: 0 8px 30px rgba(0,0,0,.3); transform: translateY(-20px); opacity: 0; transition: all .3s ease; pointer-events: none; }
.toast-notification.show { transform: translateY(0); opacity: 1; }
/* New Job Modal */
.nj-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 9500; display: none; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; }
.nj-overlay.show { display: flex; }
.nj-modal { background: var(--card); border-radius: 16px; width: 100%; max-width: 960px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.nj-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: #0a2e7a; color: #fff; }
html[data-theme="dark"] .nj-header { background: #1a2a50; }
.nj-header h2 { font-size: 17px; font-weight: 800; margin: 0; }
.nj-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all .15s; line-height: 1; }
.nj-close:hover { color: #fff; background: rgba(255,255,255,.15); }
.nj-body { display: flex; flex: 1; min-height: 0; }
.nj-main { flex: 1; padding: 20px 24px; overflow-y: auto; max-height: 70vh; }
.nj-sidebar-tabs { width: 200px; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.nj-sidebar-tab { padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text3); cursor: pointer; border: none; background: none; text-align: left; border-bottom: 1px solid var(--border); transition: all .15s; }
.nj-sidebar-tab:hover { background: var(--card-hover); color: var(--navy); }
.nj-sidebar-tab.active { background: #eff6ff; color: #0a2e7a; font-weight: 700; border-left: 3px solid #0a2e7a; }
html[data-theme="dark"] .nj-sidebar-tab.active { background: #1e2a4a; color: #8ab4ff; border-left-color: #5b8af5; }
.nj-panel { display: none; }
.nj-panel.active { display: block; }
.nj-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--card); }
.nj-footer-left { display: flex; align-items: center; gap: 16px; }
.nj-footer-right { display: flex; gap: 10px; }
.nj-section { margin-bottom: 20px; }
.nj-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.nj-pill-group { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.nj-pill { padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: var(--card); color: var(--text3); transition: all .15s; border-right: 1px solid var(--border); }
.nj-pill:last-child { border-right: none; }
.nj-pill:hover { background: var(--card-hover); color: var(--text); }
.nj-pill.active { background: #0a2e7a; color: #fff; }
html[data-theme="dark"] .nj-pill.active { background: #3b6fd4; }
.nj-dow-group { display: inline-flex; gap: 4px; }
.nj-dow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text3); font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.nj-dow:hover { border-color: var(--navy); color: var(--navy); }
.nj-dow.active { background: #0a2e7a; color: #fff; border-color: #0a2e7a; }
html[data-theme="dark"] .nj-dow.active { background: #3b6fd4; border-color: #3b6fd4; }
.nj-months-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nj-month-btn { padding: 6px 4px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text2); font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; transition: all .15s; }
.nj-month-btn:hover { border-color: var(--navy); }
.nj-month-btn.active { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.nj-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nj-toggle-label { font-size: 13px; font-weight: 600; color: var(--text2); }
.nj-toggle { position: relative; width: 40px; height: 22px; cursor: pointer; }
.nj-toggle input { opacity: 0; width: 0; height: 0; }
.nj-toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e1; border-radius: 11px; transition: .2s; }
.nj-toggle-slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.nj-toggle input:checked + .nj-toggle-slider { background: #0a2e7a; }
.nj-toggle input:checked + .nj-toggle-slider:before { transform: translateX(18px); }
.nj-search-dropdown { position: relative; }
.nj-search-dropdown input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); background: var(--card); outline: none; }
.nj-search-dropdown input:focus { border-color: var(--navy); }
html[data-theme="dark"] .nj-search-dropdown input { background: #1a1f30; border-color: #2e3348; }
.nj-dropdown-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 0 0 8px 8px; max-height: 180px; overflow-y: auto; z-index: 10; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.nj-dropdown-list.show { display: block; }
.nj-dropdown-item { padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--text); transition: background .1s; }
.nj-dropdown-item:hover { background: #eff6ff; color: #0a2e7a; }
.nj-dropdown-item.add-new { color: var(--navy); font-weight: 700; border-top: 1px solid var(--border); }
.nj-crew-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nj-crew-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #eff6ff; color: #1e40af; border-radius: 16px; font-size: 12px; font-weight: 600; }
.nj-crew-chip .remove { cursor: pointer; font-size: 14px; margin-left: 2px; opacity: .6; }
.nj-crew-chip .remove:hover { opacity: 1; }
.nj-counter { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.nj-counter button { width: 32px; height: 32px; border: none; background: var(--card); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nj-counter span { width: 36px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text); border-left: 1px solid var(--border); border-right: 1px solid var(--border); height: 32px; display: flex; align-items: center; justify-content: center; }
.nj-summary { background: #f0f4f8; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text2); font-style: italic; margin-top: 12px; }
html[data-theme="dark"] .nj-summary { background: #1a1f30; }
.nj-invoice-line { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.nj-invoice-desc { flex: 1; font-size: 13px; color: var(--text); }
.nj-invoice-amt { font-size: 14px; font-weight: 700; color: var(--text); min-width: 70px; text-align: right; }
.nj-invoice-total { font-size: 16px; font-weight: 900; color: var(--navy); }
.nj-invoice-section { margin-bottom: 16px; }
.nj-check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; }
.nj-check-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0a2e7a; }
/* Gift cert */
.gc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc-field { display: flex; flex-direction: column; gap: 4px; }
.gc-field.full { grid-column: 1 / -1; }
.gc-field label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; }
.gc-field input, .gc-field textarea { padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--card); color: var(--text); }
.gc-field input:focus, .gc-field textarea:focus { outline: none; border-color: var(--navy); }
.gc-amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-amt-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.gc-amt-btn:hover { border-color: var(--navy); }
.gc-amt-btn.selected { background: var(--navy); color: #fff; border-color: var(--navy); }
.gc-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.gc-table th { text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text3); background: var(--bg); border-bottom: 2px solid var(--border); }
.gc-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.gc-table tr:hover { background: var(--card-hover); }
.gc-status-active { padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; background: #d1fae5; color: #166534; }
.gc-status-redeemed { padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; background: #dbeafe; color: #1e40af; }
/* Document categories */
.doc-category { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.doc-cat-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; cursor: pointer; background: var(--card); }
.doc-cat-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.doc-cat-count { font-size: 11px; color: var(--text3); font-weight: 400; }
.doc-cat-chevron { font-size: 16px; color: var(--text3); transition: transform .2s; }
.doc-category.expanded .doc-cat-chevron { transform: rotate(90deg); }
.doc-cat-body { display: none; padding: 0 14px 10px; }
.doc-category.expanded .doc-cat-body { display: block; }
.doc-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.doc-item:last-child { border-bottom: none; }
.doc-item-name { flex: 1; font-size: 12px; font-weight: 600; }
.doc-item-meta { font-size: 10px; color: var(--text3); }
.doc-item-dl { cursor: pointer; font-size: 14px; }
.doc-upload-btn { margin-top: 8px; padding: 5px 12px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text3); font-size: 11px; font-weight: 600; cursor: pointer; }
.doc-upload-btn:hover { border-color: var(--navy); color: var(--navy); }

/* ════════════════════════════════════════════════
   REFERRAL TRACKER MODULE — ported from OCC_Referral_Tracker.html
   ════════════════════════════════════════════════ */
.ref-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ref-stat-card {
  background: var(--navy);
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.ref-stat-card.green { background: var(--green); }
.ref-stat-card.amber { background: var(--amber); }
.ref-stat-card.blue { background: var(--blue); }
.ref-stat-val { font-size: 28px; font-weight: 800; margin: 4px 0; }
.ref-stat-lbl { font-size: 11px; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; }

.ref-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.ref-card h4 {
  margin: 0 0 14px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--navy);
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .ref-grid { grid-template-columns: 1fr; } }

.ref-label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 12px; color: var(--text2); }
.ref-input, .ref-select, .ref-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  margin-bottom: 12px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
}
.ref-input:focus, .ref-select:focus, .ref-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,46,122,0.1);
}
.ref-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s;
  display: inline-block;
  text-align: center;
  margin-right: 6px;
}
.ref-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ref-btn:active { transform: translateY(0); }
.ref-btn-green { background: var(--green); }
.ref-btn-red { background: var(--red); }
.ref-btn-blue { background: var(--blue); }
.ref-btn-sm { padding: 5px 10px; font-size: 11px; margin-right: 4px; }

.ref-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.ref-filter-bar input, .ref-filter-bar select {
  margin-bottom: 0;
  flex: 1;
  min-width: 130px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}
.ref-filter-bar input:focus, .ref-filter-bar select:focus {
  outline: none;
  border-color: var(--navy);
}

.ref-tbl-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.ref-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ref-tbl th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 5;
}
.ref-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ref-tbl tr:hover { background: var(--card-hover); }
.ref-tbl .empty-row { text-align: center; padding: 30px; color: var(--text3); }

.ref-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}
.ref-badge-scheduled { background: #e0f2fe; color: #0369a1; }
.ref-badge-completed { background: #dcfce7; color: #15803d; }
.ref-badge-pending { background: #fef3c7; color: #92400e; }
.ref-badge-applied { background: #dcfce7; color: #15803d; }
.ref-badge-expired { background: #fce4ec; color: #b71c1c; }

html[data-theme="dark"] .ref-badge-scheduled { background: rgba(14,165,233,0.2); color: #7dd3fc; }
html[data-theme="dark"] .ref-badge-completed { background: rgba(22,163,74,0.2); color: #86efac; }
html[data-theme="dark"] .ref-badge-pending { background: rgba(245,158,11,0.2); color: #fcd34d; }
html[data-theme="dark"] .ref-badge-applied { background: rgba(22,163,74,0.2); color: #86efac; }
html[data-theme="dark"] .ref-badge-expired { background: rgba(220,38,38,0.2); color: #fca5a5; }

.ref-reminder-box {
  background: #fef3c7;
  border: 2px solid var(--amber);
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 10px;
}
html[data-theme="dark"] .ref-reminder-box { background: rgba(245,158,11,0.1); }
.ref-reminder-item {
  background: var(--card);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 6px;
  border-left: 5px solid var(--amber);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ref-gd-queue { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .ref-gd-queue { grid-template-columns: 1fr; } }
.ref-gd-side-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ref-gd-sublabel { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
.ref-gd-badge { background: var(--amber); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; }
.ref-gd-badge.green { background: var(--green); }
.ref-gd-empty { text-align: center; padding: 16px; color: var(--text3); font-size: 12px; }
.ref-gd-item { background: var(--bg); border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; border-left: 4px solid var(--navy); }
.ref-gd-item.warn { border-left-color: var(--amber); }
.ref-gd-item-title { font-weight: 700; font-size: 13px; color: var(--text); }
.ref-gd-item-action { font-size: 12px; color: var(--green); font-weight: 600; }
.ref-gd-item-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ref-gd-warn-tag { background: #fef3c7; color: #92400e; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
html[data-theme="dark"] .ref-gd-warn-tag { background: rgba(245,158,11,0.2); color: #fcd34d; }

.ref-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}
.ref-modal-content {
  background: var(--card);
  margin: 5% auto;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 560px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  color: var(--text);
}
.ref-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}
.ref-modal-header h4 { margin: 0; color: var(--navy); font-size: 16px; }
html[data-theme="dark"] .ref-modal-header h4 { color: #93c5fd; }
.ref-modal-close {
  color: var(--text3);
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.ref-modal-close:hover { color: var(--text); }

.ref-feedback {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  display: none;
}
.ref-feedback-success { display: block; background: #dcfce7; color: #15803d; }
.ref-feedback-error { display: block; background: #fce4ec; color: #b71c1c; }
html[data-theme="dark"] .ref-feedback-success { background: rgba(22,163,74,0.15); }
html[data-theme="dark"] .ref-feedback-error { background: rgba(220,38,38,0.15); }

.ref-inbox-card { border-left: 4px solid var(--amber); }

/* ════════════════════════════════════════════════════════════
   DATE NAVIGATION BAR
   ════════════════════════════════════════════════════════════ */
.date-nav { display:flex; align-items:center; gap:3px; }
.date-nav-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  font-family: 'Inter', sans-serif;
}
.date-nav-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.date-nav-btn:focus-visible { outline: 2px solid #4a9eff; outline-offset: 2px; }
.date-nav-btn.today-btn { min-width: auto; padding: 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.date-nav-display {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: .2px;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
}
.date-nav-display .date-nav-weekday { color: #60a5fa; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   FULL PROFILE PAGE
   ════════════════════════════════════════════════════════════ */
.fp-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fpSlideIn .25s ease;
}
@keyframes fpSlideIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.fp-header {
  background: linear-gradient(135deg, #0a2e7a 0%, #1e40af 100%);
  color: #ffffff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.fp-back-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.fp-back-btn:hover { background: rgba(255,255,255,.3); }
.fp-header-info { flex: 1; min-width: 0; }
.fp-header-name { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.fp-header-meta { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.fp-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.fp-status-active { background: #16a34a; color: #fff; }
.fp-status-cancelled { background: #dc2626; color: #fff; }
.fp-status-seasonal { background: #f59e0b; color: #fff; }
.fp-header-actions { display: flex; gap: 8px; }
.fp-header-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.fp-header-btn:hover { background: rgba(255,255,255,.3); }

.fp-tabs {
  background: #f1f5f9;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  padding: 0 24px;
  flex-shrink: 0;
}
html[data-theme="dark"] .fp-tabs { background: #1e293b; }
.fp-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.fp-tab:hover { color: var(--text); }
.fp-tab.active { color: #0a2e7a; border-bottom-color: #0a2e7a; }
html[data-theme="dark"] .fp-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }

.fp-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.fp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  color: var(--text3);
  gap: 12px;
}
.fp-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: #0a2e7a;
  border-radius: 50%;
  animation: fpSpin .8s linear infinite;
}
@keyframes fpSpin { to { transform: rotate(360deg); } }

/* Apr 12 — 3-band 4-column CSS grid profile layout */
.fp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-rows: 24px auto auto 270px;
  gap: 6px;
  padding: 6px;
  height: calc(100vh - 52px);
  overflow: hidden;
  gap: 0;
}

/* Band cells */
.fp-grid > .fp-cell {
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.fp-grid > .fp-cell:nth-child(4n) { border-right: none; }

/* Middle band cells scroll */
.fp-cell.fp-band2 { overflow: hidden; }
.fp-cell.fp-band2.fp-col3 { overflow-y: auto; }
.fp-cell.fp-band2.fp-col4 { overflow-y: auto; }

/* Tile inside cells */
.dash-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  background: var(--card-bg, var(--card, #fff));
}
.dash-tile:last-child { margin-bottom: 0; }
.fp-cell { gap: 6px; padding: 6px; border: none; border-radius: 0; }
.fp-col1 { background: #f0f4f8; border-right: 1px solid #d1d5db; }
.fp-col2 { background: #eef2f7; border-right: 1px solid #d1d5db; }
.fp-col3 { background: #ecf0f6; border-right: 1px solid #d1d5db; }
.fp-col4 { background: #eaf0ef; }
html[data-theme="dark"] .fp-cell { background: rgba(0,0,0,.15); border-color: #475569; }
.dash-tile-header {
  flex-shrink: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,.04);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
}
html[data-theme="dark"] .dash-tile-header { background: rgba(0,0,0,.15); }
.dash-tile-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tile-actions { display: flex; gap: 4px; align-items: center; }
.dash-tile-actions button { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 11px; padding: 2px 6px; border-radius: 3px; }
.dash-tile-actions button:hover { background: rgba(0,0,0,.06); color: var(--text); }
html[data-theme="dark"] .dash-tile-actions button:hover { background: rgba(255,255,255,.1); }
.dash-tile-body { flex: 1; overflow-y: auto; padding: 6px 8px; font-size: 12px; min-height: 0; }
.dash-tile-body.scrollable { overflow-y: auto !important; }
.dash-tile-body .fp-row-label { font-size: 12px; color: var(--text3); }
.dash-tile-body .fp-row-val { font-size: 12px; font-weight: 600; }

/* Consistent row heights in tables */
.fp-grid table { border-collapse: collapse; width: 100%; }
.fp-grid table th { padding: 5px 6px; font-size: 12px; font-weight: 600; text-align: left; background: #f8fafc; position: sticky; top: 0; z-index: 1; }
html[data-theme="dark"] .fp-grid table th { background: #1e293b; }
.fp-grid table td { padding: 5px 6px; font-size: 12px; border-bottom: 1px solid var(--border); }
.fp-bold { font-weight: 600; color: var(--navy, #0a2e7a); }
.fp-value { font-weight: 400; }

/* Double-click expand overlay */
.dash-tile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.dash-tile-expanded { position: fixed; top: 8%; left: 10%; width: 80%; height: 84%; z-index: 9999; background: #ffffff; border: 1px solid #9ca3af; border-radius: 6px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); font-family: Arial, sans-serif; color: #111; }
.dash-tile-expanded .dash-tile-header { height: 44px; font-size: 13px; background: #f3f4f6; border-bottom: 1px solid #d1d5db; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; color: #111; font-weight: 600; }
.dash-tile-expanded .dash-tile-body { flex: 1; overflow-y: auto; padding: 16px 22px; max-height: none; background: #ffffff; color: #111; }
/* Report-style overrides inside expanded view: strip fancy colors, use clean typography */
.dash-tile-expanded * { color: inherit; }
.dash-tile-expanded h1, .dash-tile-expanded h2, .dash-tile-expanded h3, .dash-tile-expanded h4 { font-weight: 600; color: #111; margin: 14px 0 6px 0; }
.dash-tile-expanded table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; background: #fff; }
.dash-tile-expanded table th { text-align: left; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #9ca3af; background: #f3f4f6; color: #111; }
.dash-tile-expanded table td { padding: 5px 10px; border-bottom: 1px solid #e5e7eb; color: #111; }
.dash-tile-expanded table tr:nth-child(even) td { background: #fafafa; }
.dash-tile-expanded .fp-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #e5e7eb; font-size: 12px; }
.dash-tile-expanded .fp-row-label { font-weight: 400; color: #4b5563; }
.dash-tile-expanded .fp-row-val { font-weight: 500; color: #111; }
/* Strip colored badges inside the expanded view — replace with subtle outlined pills */
.dash-tile-expanded [style*="background:#f59e0b"], .dash-tile-expanded [style*="background:#dc2626"],
.dash-tile-expanded [style*="background:#16a34a"], .dash-tile-expanded [style*="background:#8b5cf6"],
.dash-tile-expanded [style*="background:#0a2e7a"], .dash-tile-expanded [style*="background:#2563eb"] {
  background: #ffffff !important; color: #111 !important; border: 1px solid #9ca3af !important; font-weight: 500 !important;
}
.dash-tile-expanded button { font-family: Arial, sans-serif; }
/* Print: show only the expanded view, no chrome */
@media print {
  body * { visibility: hidden; }
  .dash-tile-expanded, .dash-tile-expanded * { visibility: visible; }
  .dash-tile-expanded { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; box-shadow: none !important; border: none !important; }
  .dash-tile-expanded .dash-tile-actions { display: none !important; }
  .dash-tile-expanded .dash-tile-body { overflow: visible !important; }
  .dash-tile-expanded table tr:nth-child(even) td { background: transparent !important; }
}

/* Column collapse */
.fp-grid.hide-col1 > .fp-col1, .fp-grid.hide-col1 > [style*="grid-column:1"] { display: none; }
.fp-grid.hide-col2 > .fp-col2, .fp-grid.hide-col2 > [style*="grid-column:2"] { display: none; }
.fp-grid.hide-col3 > .fp-col3, .fp-grid.hide-col3 > [style*="grid-column:3"] { display: none; }
.fp-grid.hide-col4 > .fp-col4, .fp-grid.hide-col4 > [style*="grid-column:4"] { display: none; }
@media (max-width: 1100px) { .fp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .fp-grid { grid-template-columns: 1fr; } }

.fp-card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
html[data-theme="dark"] .fp-card { border-color: rgba(255,255,255,.15); }
.fp-card-header {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.fp-card-body { padding: 10px 12px; font-size: 13px; }
.fp-card-edit {
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.fp-card-edit:hover { background: var(--card-hover); color: var(--text); }

.fp-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.fp-row-label { color: var(--text3); font-weight: 500; font-size: 12px; }
.fp-row-val { color: var(--text); font-weight: 600; font-size: 13px; }

.fp-stats-row { display: flex; gap: 12px; margin-bottom: 16px; }
.fp-stat-box {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow);
}
.fp-stat-val { font-size: 20px; font-weight: 600; color: #0a2e7a; }
html[data-theme="dark"] .fp-stat-val { color: #60a5fa; }
.fp-stat-label { font-size: 11px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

.fp-next-clean {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  text-align: center;
}
html[data-theme="dark"] .fp-next-clean { background: linear-gradient(135deg, rgba(22,163,74,.15), rgba(22,163,74,.08)); border-color: rgba(22,163,74,.3); }
.fp-next-clean-title { font-size: 11px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: .5px; }
.fp-next-clean-date { font-size: 18px; font-weight: 500; color: #15803d; margin-top: 4px; }
html[data-theme="dark"] .fp-next-clean-date { color: #4ade80; }

.fp-activity-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  align-items: flex-start;
}
.fp-activity-item:last-child { border-bottom: none; }
.fp-activity-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.fp-activity-detail { flex: 1; min-width: 0; }
.fp-activity-text { color: var(--text); font-weight: 500; }
.fp-activity-time { color: var(--text3); font-size: 11px; margin-top: 2px; }

.fp-quick-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.fp-quick-btn {
  background: #0a2e7a;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.fp-quick-btn:hover { background: #0c3a9e; }
.fp-quick-btn.outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.fp-quick-btn.outline:hover { background: var(--card-hover); }

.fp-msg-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 300px;
}
.fp-msg-header { padding: 8px 12px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--border); text-transform: uppercase; color: var(--text3); }
.fp-msg-body { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fp-msg-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
}
.fp-msg-bubble.sent { align-self: flex-end; background: #0a2e7a; color: #fff; border-bottom-right-radius: 4px; }
.fp-msg-bubble.received { align-self: flex-start; background: #f1f5f9; color: var(--text); border-bottom-left-radius: 4px; }
html[data-theme="dark"] .fp-msg-bubble.received { background: #334155; }
.fp-msg-quick {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.fp-msg-quick-btn {
  background: var(--card-hover);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.fp-msg-quick-btn:hover { background: var(--border); }

.fp-sidebar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.fp-sidebar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 8px; }
.fp-sidebar-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.fp-sidebar-label { color: var(--text3); }
.fp-sidebar-val { color: var(--text); font-weight: 600; }
.fp-valid-badge { background: #dcfce7; color: #15803d; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
html[data-theme="dark"] .fp-valid-badge { background: rgba(22,163,74,.15); color: #4ade80; }

/* Service History Table */
.fp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fp-table th {
  text-align: left;
  padding: 8px 10px;
  background: #f8fafc;
  font-weight: 700;
  color: var(--text3);
  border-bottom: 2px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
html[data-theme="dark"] .fp-table th { background: #1e293b; }
.fp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.fp-table tr:hover td { background: var(--card-hover); }
.fp-table-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.fp-table-status.completed { background: #dcfce7; color: #15803d; }
.fp-table-status.skipped { background: #fef3c7; color: #92400e; }
.fp-table-status.missed { background: #fce4ec; color: #b71c1c; }
.fp-table-status.paid { background: #dcfce7; color: #15803d; }
.fp-table-status.open { background: #dbeafe; color: #1e40af; }
.fp-table-status.overdue { background: #fce4ec; color: #b71c1c; }
html[data-theme="dark"] .fp-table-status.completed { background: rgba(22,163,74,.15); color: #4ade80; }
html[data-theme="dark"] .fp-table-status.skipped { background: rgba(245,158,11,.15); color: #fbbf24; }
html[data-theme="dark"] .fp-table-status.missed { background: rgba(220,38,38,.15); color: #f87171; }
html[data-theme="dark"] .fp-table-status.paid { background: rgba(22,163,74,.15); color: #4ade80; }
html[data-theme="dark"] .fp-table-status.open { background: rgba(37,99,235,.15); color: #60a5fa; }
html[data-theme="dark"] .fp-table-status.overdue { background: rgba(220,38,38,.15); color: #f87171; }

/* Customer list loading spinner */
.tc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: var(--text3);
  gap: 10px;
}
.tc-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: #0a2e7a;
  border-radius: 50%;
  animation: fpSpin .8s linear infinite;
}

/* Note card styling */
.fp-note-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.fp-note-item:last-child { border-bottom: none; }
.fp-note-date { font-size: 11px; color: var(--text3); margin-bottom: 2px; }
.fp-note-text { color: var(--text); line-height: 1.4; }
.fp-note-author { font-size: 11px; color: var(--text3); font-style: italic; margin-top: 2px; }

/* Contact card */
.fp-contact-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.fp-contact-item:last-child { border-bottom: none; }
.fp-contact-avatar { width: 32px; height: 32px; border-radius: 50%; background: #0a2e7a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.fp-contact-info { flex: 1; }
.fp-contact-name { font-size: 13px; font-weight: 600; }
.fp-contact-detail { font-size: 11px; color: var(--text3); }
.fp-primary-badge { background: #0a2e7a; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }

/* Card on file */
.fp-card-file { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fp-card-icon { font-size: 20px; }
.fp-card-number { font-size: 13px; font-weight: 600; }
.fp-card-expiry { font-size: 11px; color: var(--text3); }

/* Timeline in activity tab */
.fp-timeline { position: relative; padding-left: 24px; }
.fp-timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.fp-timeline-item { position: relative; padding: 10px 0; }
.fp-timeline-dot { position: absolute; left: -18px; top: 14px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #0a2e7a; background: var(--card); }
.fp-timeline-content { padding-left: 8px; }
.fp-timeline-title { font-size: 13px; font-weight: 600; color: var(--text); }
.fp-timeline-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
.fp-timeline-time { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ═══ SCHEDULE TAB (Apr 13 2026) ═══ */
.sched-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.sched-toolbar .date-nav-btn { padding: 4px 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.sched-toolbar .date-nav-btn:hover { background: var(--bg2); }
.sched-toolbar .sched-today-btn { background: #0a2e7a; color: #fff; border-color: #0a2e7a; }
.sched-toolbar .sched-today-btn:hover { background: #0c3a9e; }
.sched-date-display { font-size: 16px; font-weight: 700; color: var(--text); font-family: 'Inter', sans-serif; }
.sched-quick-picks { display: flex; gap: 6px; margin-left: 8px; }
.sched-quick-pick { padding: 3px 10px; border: 1px solid var(--border); background: var(--card); color: var(--text2); border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 600; }
.sched-quick-pick:hover { background: var(--bg2); }
.sched-quick-pick.active { background: #0a2e7a; color: #fff; border-color: #0a2e7a; }
.sched-summary { font-size: 12px; color: var(--text3); font-weight: 600; margin-left: auto; }
.sched-view-toggle { display: flex; gap: 0; margin-left: 8px; }
.sched-view-btn { padding: 4px 12px; border: 1px solid var(--border); background: var(--card); color: var(--text2); font-size: 11px; font-weight: 600; cursor: pointer; }
.sched-view-btn:first-child { border-radius: 6px 0 0 6px; }
.sched-view-btn:last-child { border-radius: 0 6px 6px 0; }
.sched-view-btn.active { background: #0a2e7a; color: #fff; border-color: #0a2e7a; }

/* Route columns grid */
.sched-routes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 900px) { .sched-routes-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1200px) { .sched-routes-grid { grid-template-columns: repeat(2, 1fr); } }
.sched-route-col { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--card); min-height: 0; }
.sched-route-header { padding: 10px 14px; font-size: 14px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: space-between; font-family: 'Inter', sans-serif; }
.sched-route-header .sched-stop-count { font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: 10px; }
.sched-route-label { font-size: 14px; font-weight: 800; }
.sched-optimize-btn { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .3px; white-space: nowrap; }
.sched-optimize-btn:hover { background: rgba(255,255,255,0.28); }
.sched-undo-btn { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); border-radius: 5px; padding: 3px 8px; font-size: 10px; cursor: pointer; white-space: nowrap; }
.sched-route-body { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }

/* Customer stop card */
.sched-stop { display: flex; gap: 5px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); cursor: pointer; transition: box-shadow 0.15s, background 0.15s; align-items: flex-start; }
.sched-stop:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); background: var(--bg2); }
.sched-stop-num { font-size: 10px; font-weight: 800; color: #fff; min-width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.sched-stop-info { flex: 1; min-width: 0; }
.sched-stop-name { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-stop-name:hover { text-decoration: underline; }
.sched-stop-addr { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sched-stop-meta { font-size: 10px; color: var(--text2); margin-top: 1px; display: flex; gap: 6px; flex-wrap: wrap; }
.sched-stop-plan { font-weight: 700; }
.sched-stop-status { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.sched-stop-status-done { background: #dcfce7; color: #15803d; }
.sched-stop-status-scheduled { background: #e0f2fe; color: #0369a1; }
.sched-stop-status-confirmed { background: #f0fdf4; color: #16a34a; }
.sched-stop-status-canceled { background: #fef2f2; color: #dc2626; }
html[data-theme="dark"] .sched-stop-status-done { background: rgba(34,197,94,0.15); color: #86efac; }
html[data-theme="dark"] .sched-stop-status-scheduled { background: rgba(14,165,233,0.15); color: #7dd3fc; }
html[data-theme="dark"] .sched-stop-status-confirmed { background: rgba(22,163,74,0.15); color: #86efac; }
html[data-theme="dark"] .sched-stop-status-canceled { background: rgba(220,38,38,0.15); color: #fca5a5; }

/* Locked stop — pinned, can't drag */
.sched-stop-locked { border-color: #dc2626 !important; background: #fff8f8 !important; cursor: default !important; }
.sched-stop-locked:hover { box-shadow: none !important; }
html[data-theme="dark"] .sched-stop-locked { background: rgba(220,38,38,0.08) !important; }

/* Lock toggle button */
.sched-lock-btn { flex-shrink: 0; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); border-radius: 4px; cursor: pointer; font-size: 17px; padding: 2px 4px; opacity: 0.65; transition: opacity 0.15s, background 0.15s; line-height: 1; margin-top: 1px; }
.sched-stop:hover .sched-lock-btn { opacity: 1; background: rgba(0,0,0,0.10); }
.sched-lock-btn-active { opacity: 1 !important; background: rgba(220,38,38,0.12) !important; border-color: #dc2626 !important; }

/* ── Schedule Fullscreen Overlay ── */
#schedFsOverlay {
  display: none; position: fixed; inset: 0; z-index: 9500;
  background: var(--bg); flex-direction: column; overflow: hidden;
}
.sched-fs-header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: #0a2e7a; color: #fff; gap: 10px;
}
.sched-fs-title { font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.sched-fs-nav {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; border-radius: 5px; padding: 3px 10px; cursor: pointer; font-size: 14px;
  font-weight: 700; transition: background .15s;
}
.sched-fs-nav:hover { background: rgba(255,255,255,0.28); }
.sched-fs-close {
  background: rgba(220,38,38,0.75); border: none; color: #fff; border-radius: 5px;
  padding: 3px 10px; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1;
}
.sched-fs-close:hover { background: #dc2626; }
.sched-fs-body {
  flex: 1; min-height: 0; display: flex; overflow: hidden;
}
.sched-fs-list {
  flex: 0 0 58%; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border-right: 2px solid var(--border);
}
.sched-fs-list .sched-toolbar { flex-shrink: 0; }
.sched-fs-list #schedBodyFs {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
.sched-fs-map-pane {
  flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative;
}
#schedFsMap { flex: 1; min-height: 0; width: 100%; }
.sched-fs-map-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: var(--card); border-top: 1px solid var(--border); font-size: 11px; color: var(--text2);
}
/* Fullscreen button in schedule toolbar */
.sched-fs-btn {
  margin-left: auto; background: #0a2e7a; color: #fff; border: none; border-radius: 5px;
  padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .2px;
}
.sched-fs-btn:hover { background: #1a4a9a; }

/* Dashboard route tile — compact (used in main R1-R4 panels) */
.route-tile-compact { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--border); background: var(--card); font-size: 11px; cursor: pointer; transition: background 0.12s; min-width: 0; }
.route-tile-compact:hover { background: var(--bg2); }
.route-tile-compact .rtc-num { font-size: 10px; font-weight: 800; color: #fff; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.route-tile-compact .rtc-name { font-weight: 600; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.route-tile-compact .rtc-plan { color: var(--text3); font-size: 10px; flex-shrink: 0; }

/* Week view */
.sched-week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 700px) { .sched-week-grid { grid-template-columns: 1fr; } }
.sched-week-day { display: flex; flex-direction: column; border-radius: 8px; border: 1px solid var(--border); background: var(--card); overflow: hidden; cursor: pointer; transition: box-shadow 0.15s; min-height: 0; }
.sched-week-day:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.sched-week-day.sched-week-today { border-color: #0a2e7a; border-width: 2px; }
.sched-week-day-hdr { padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); background: var(--bg2); text-align: center; font-family: 'Inter', sans-serif; }
.sched-week-day-hdr .sched-week-dayname { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.sched-week-day-hdr .sched-week-datenum { font-size: 18px; font-weight: 800; margin-top: 2px; }
.sched-week-day-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sched-week-route-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--bg2); font-size: 12px; font-weight: 600; }
.sched-week-route-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sched-week-route-label { flex: 1; color: var(--text); }
.sched-week-route-count { font-weight: 800; color: var(--text); }
.sched-week-total { text-align: center; font-size: 20px; font-weight: 800; color: var(--navy); padding: 8px; }
html[data-theme="dark"] .sched-week-total { color: #93c5fd; }

/* Empty state */
.sched-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; color: var(--text3); font-size: 13px; }
.sched-empty-icon { font-size: 40px; opacity: 0.3; }
.sched-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text3); }