/*
 * terminal-ui.css — Phase 0 Design System
 * Terminal · AFC Transport dispatch ops
 *
 * Every page links this file. Zero hardcoded colors anywhere.
 * Font stack: Space Grotesk (headings/numbers) + DM Sans (UI/body)
 *
 * Table of contents
 * ─────────────────────────────────────────
 *  1.  Tokens (CSS custom properties)
 *  2.  Reset + base
 *  3.  Typography utilities
 *  4.  Sidebar
 *  5.  Topbar + tab bar
 *  6.  Buttons
 *  7.  Inputs + forms
 *  8.  Modals + overlays
 *  9.  Toast notifications
 * 10.  Spinner + loading states
 * 11.  KPI / summary strip cards
 * 12.  Dispatcher filter pill + dropdown
 * 13.  Tracker — day header row
 * 14.  Tracker — driver card + cells
 * 15.  Tracker — cell top-bar colors (all statuses)
 * 16.  Tracker — inline cell editor
 * 17.  Tracker — cell action panel (··· menu)
 * 18.  Tracker — week totals column
 * 19.  Updates — step timeline
 * 20.  Updates — inline edit row (EC fields)
 * 21.  Manage — tables + action buttons
 * 22.  Empty / error states
 * 23.  Scrollbar
 * ─────────────────────────────────────────
 */

/* ═══════════════════════════════════════
   1. TOKENS
═══════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:       #08090d;
  --surface:  #0e1018;
  --surface2: #161a26;
  --surface3: #1e2335;

  /* Borders */
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.10);

  /* Text */
  --text:     #eef2ff;
  --muted:    #55627a;
  --muted2:   #8493b2;

  /* Brand */
  --accent:   #3b6ef4;
  --accent-dim: rgba(59,110,244,0.12);
  --accent-dim2: rgba(59,110,244,0.22);

  /* Semantic */
  --green:    #0fcc82;
  --amber:    #f5a623;
  --yellow:   #f5a623;   /* alias — old code uses --yellow */
  --red:      #f04438;
  --orange:   #f97316;
  --purple:   #8b5cf6;
  --indigo:   #6366f1;

  /* Layout */
  --sidebar-w:     216px;
  --sidebar-w-col: 62px;
  --topbar-h:      70px;

  /* ── Premium scale tokens (added Jul 2026, Load Manager redesign) ──
     Additive only — nothing above was renamed or removed, so every existing
     page keeps working unchanged. New pages/components should prefer these
     over one-off pixel values. */
  --fs-2xs: 10px;  --fs-xs: 11px;   --fs-sm: 12.5px; --fs-base: 13.5px;
  --fs-md:  15px;  --fs-lg: 18px;   --fs-xl: 22px;   --fs-2xl: 28px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px;
  --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-xl: 18px;
  --shadow-panel: -20px 0 60px rgba(0,0,0,.45);
  --shadow-pop:   0 20px 60px rgba(0,0,0,.55);
}

/* ═══════════════════════════════════════
   2. RESET + BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  height: 100vh;
  display: flex;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════
   3. TYPOGRAPHY UTILITIES
═══════════════════════════════════════ */
/* Display / heading — Space Grotesk */
.t-display {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}
/* Numbers / amounts — Space Grotesk */
.t-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}
/* Section label — all caps, spaced */
.t-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--muted);
}
/* Muted body copy */
.t-muted { color: var(--muted); }
.t-muted2 { color: var(--muted2); }

/* ═══════════════════════════════════════
   4. SIDEBAR
═══════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), min-width 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 10;
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-w-col); min-width: var(--sidebar-w-col); }

/* ── Collapsed state (data-attr set before paint to prevent FOUC) ── */
html[data-sb='collapsed'] .sidebar                { width: var(--sidebar-w-col) !important; min-width: var(--sidebar-w-col) !important; }
html[data-sb='collapsed'] .sb-logo-txt,
html[data-sb='collapsed'] .sb-txt,
html[data-sb='collapsed'] .sb-user-info           { opacity: 0 !important; max-width: 0 !important; width: 0 !important; overflow: hidden !important; }
html[data-sb='collapsed'] .sb-section             { opacity: 0 !important; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; overflow: hidden !important; }
html[data-sb='collapsed'] .sidebar-logo           { justify-content: center !important; padding: 0 !important; gap: 0 !important; }
html[data-sb='collapsed'] .sidebar-link           { justify-content: center !important; padding: 4px 0 !important; }
html[data-sb='collapsed'] .sidebar-link::before   { display: none !important; }
html[data-sb='collapsed'] .sb-user                { padding: 0 !important; justify-content: center !important; background: transparent !important; border-radius: 0 !important; margin-bottom: 0 !important; gap: 0 !important; }
html[data-sb='collapsed'] .sidebar-bottom         { align-items: center !important; padding: 8px 0 14px !important; }
html[data-sb='collapsed'] .btn-signout            { width: 38px !important; height: 38px !important; font-size: 0 !important; padding: 0 !important; border-radius: 10px !important; min-width: 0 !important; gap: 0 !important; }
html[data-sb='collapsed'] .btn-signout-txt        { display: none !important; }
html[data-sb='collapsed'] .avatar                 { width: 38px !important; height: 38px !important; font-size: 14px !important; }
html[data-sb='collapsed'] .sb-icon-box            { margin: 0 auto; }

/* ── Logo area — dominant mark, clickable to toggle ── */
.sidebar-logo {
  padding: 0 14px;
  height: 70px;
  border-bottom: 1px solid var(--border);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  letter-spacing: -0.3px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s;
}
.sidebar-logo:hover { background: rgba(59,110,244,0.04); }

/* The SVG mark — big and dominant (rendered ~48px) */
.sb-logo-mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  transition: filter 0.2s;
}
.sidebar-logo:hover .sb-logo-mark { filter: brightness(1.15); }

.hub { color: var(--accent); }

.sb-logo-txt {
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s ease, max-width 0.25s cubic-bezier(0.4,0,0.2,1);
  max-width: 140px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}
.sidebar.collapsed .sb-logo-txt { opacity: 0; max-width: 0; }

/* ── Section labels ── */
.sb-section {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--muted);
  padding: 12px 12px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.18s ease, max-height 0.25s cubic-bezier(0.4,0,0.2,1), padding 0.25s;
  max-height: 36px;
}
.sidebar.collapsed .sb-section { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }

/* ── Nav container ── */
.sidebar-nav {
  padding: 6px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

/* ── Nav links ── */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px 3px 6px;
  border-radius: 9px;
  color: var(--muted2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  overflow: hidden;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  height: 38px;
  position: relative;
  flex-shrink: 0;
}
.sidebar-link:hover { background: var(--surface2); color: var(--text); }
.sidebar-link.active { color: var(--text); font-weight: 600; }
/* Accent left-edge bar on active */
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Icon box — fixed 32×32 container for pixel-perfect centering ── */
.sb-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sidebar-link:hover .sb-icon-box { background: none; }
.sidebar-link.active .sb-icon-box { background: var(--accent-dim); }

.sb-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
  overflow: visible;
}
.sidebar-link:hover .sb-icon { opacity: 0.9; }
.sidebar-link.active .sb-icon { opacity: 1; color: var(--accent); }

.sb-txt {
  overflow: hidden;
  transition: opacity 0.2s ease, max-width 0.25s cubic-bezier(0.4,0,0.2,1);
  max-width: 130px;
}
.sidebar.collapsed .sb-txt { opacity: 0; max-width: 0; }

/* ── Bottom user + signout ── */
.sidebar-bottom {
  padding: 10px 8px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  background: var(--surface2);
  border-radius: 9px;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sb-user:hover { background: var(--surface3); }
.sidebar.collapsed .sb-user { padding: 0; justify-content: center; background: transparent; border-radius: 0; gap: 0; min-width: 0; }
.sidebar.collapsed .sb-user-info { opacity: 0; max-width: 0; overflow: hidden; width: 0; flex: none; }

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar.collapsed .avatar { width: 38px; height: 38px; font-size: 14px; }

.sb-user-info { flex: 1; min-width: 0; overflow: hidden; transition: opacity 0.2s ease, max-width 0.25s cubic-bezier(0.4,0,0.2,1); max-width: 130px; }
.sb-user-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; }
.role-dispatch { color: var(--accent); }
.role-dsm      { color: var(--purple); }
.role-ops      { color: var(--orange); }
.role-admin    { color: var(--red); }

.btn-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 10px;
  background: rgba(240,68,56,0.07);
  color: #f87171;
  border: 1px solid rgba(240,68,56,0.14);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s;
  gap: 7px;
  flex-shrink: 0;
}
.btn-signout:hover { background: rgba(240,68,56,0.15); }
.sidebar.collapsed .btn-signout { width: 38px; height: 38px; min-width: 0; padding: 0; font-size: 0; border-radius: 10px; gap: 0; }
.btn-signout-icon { flex-shrink: 0; width: 14px; height: 14px; }
.btn-signout-txt { transition: opacity 0.2s ease, max-width 0.25s cubic-bezier(0.4,0,0.2,1); max-width: 130px; overflow: hidden; }
.sidebar.collapsed .btn-signout-txt { opacity: 0; max-width: 0; }

/* ═══════════════════════════════════════
   5. TOPBAR + TAB BAR
═══════════════════════════════════════ */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
/* manage.html uses .tab-bar instead of .topbar */
.tab-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  gap: 2px;
}
.topbar-tabs { display: flex; gap: 2px; }
.topbar-spacer, .tab-spacer { flex: 1; }
.topbar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* pod-due topbar chip — updates.html only */
.topbar-pod-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(240,68,56,.10);
  border: 1px solid rgba(240,68,56,.20);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  margin-left: 10px;
}

/* Tab buttons — used in topbar */
.tab-btn, .tab {
  padding: 5px 13px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-btn:hover, .tab:hover { color: var(--text); background: var(--surface2); }
.tab-btn.active, .tab.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }

.tab-badge {
  background: var(--surface3);
  color: var(--muted2);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.tab.active .tab-badge, .tab-btn.active .tab-badge { background: var(--accent-dim); color: var(--accent); }
.pod-due-badge { background: rgba(240,68,56,.15); color: var(--red); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; font-family: 'DM Sans', sans-serif; }

/* Week nav — tracker/weekly */
.week-nav { display: flex; align-items: center; gap: 6px; }
.week-nav button {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted2);
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.week-nav button:hover { background: var(--surface3); color: var(--text); }
.week-label { font-size: 12px; font-weight: 600; color: var(--text); min-width: 152px; text-align: center; }
.btn-today {
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim2);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.btn-today:hover { background: var(--accent-dim2); }
.btn-add-driver {
  background: rgba(15,204,130,0.1);
  border: 1px solid rgba(15,204,130,0.22);
  color: var(--green);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.btn-add-driver:hover { background: rgba(15,204,130,0.18); }

/* ═══════════════════════════════════════
   6. BUTTONS
═══════════════════════════════════════ */
/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  text-decoration: none;
}
/* Variants */
.btn-primary   { background: var(--accent);  color: #fff; }
.btn-primary:hover { background: #2c5ee8; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost     { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); }
.btn-ghost:hover { background: var(--surface3); }

.btn-danger    { background: rgba(240,68,56,.1); color: var(--red); border: 1px solid rgba(240,68,56,.22); }
.btn-danger:hover { background: rgba(240,68,56,.18); }

.btn-orange    { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #ea6f0f; }
.btn-orange:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-green     { background: rgba(15,204,130,.1); color: var(--green); border: 1px solid rgba(15,204,130,.22); }
.btn-green:hover { background: rgba(15,204,130,.18); }

/* Sizes */
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 7px; }
.btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 6px; }

/* manage.html action row variants — keep old class names */
.btn-primary.btn-alt, .btn-secondary {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2);
  padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.btn-secondary:hover { background: var(--surface3); }

.btn-dsm {
  background: rgba(139,92,246,.1); color: var(--purple);
  border: 1px solid rgba(139,92,246,.22);
  padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.btn-dsm:hover { background: rgba(139,92,246,.18); }

/* manage.html table action buttons */
.act {
  border: none; padding: 4px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif; white-space: nowrap;
  transition: all 0.12s;
}
.act-edit      { background: var(--surface2); color: var(--muted2); border: 1px solid var(--border); }
.act-edit:hover { color: var(--text); border-color: var(--border2); }
.act-transfer  { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(59,110,244,.2); }
.act-transfer:hover { background: var(--accent-dim2); }
.act-reassign  { background: rgba(245,166,35,.1); color: var(--amber); border: 1px solid rgba(245,166,35,.2); }
.act-reassign:hover { background: rgba(245,166,35,.18); }
.act-restore   { background: rgba(15,204,130,.1); color: var(--green); border: 1px solid rgba(15,204,130,.2); }
.act-restore:hover { background: rgba(15,204,130,.18); }
.act-remove    { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
.act-remove:hover { color: var(--red); border-color: rgba(240,68,56,.28); background: rgba(240,68,56,.06); }
.act-danger    { color: var(--red); background: rgba(240,68,56,.08); border: 1px solid rgba(240,68,56,.2); }
.act-danger:hover { background: rgba(240,68,56,.16); border-color: rgba(240,68,56,.38); }

/* ═══════════════════════════════════════
   7. INPUTS + FORMS
═══════════════════════════════════════ */
.finput, .fselect, .ep-input, .field-input, .search-input, .filter-select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 8px 11px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  transition: border-color 0.15s;
  width: 100%;
  outline: none;
}
.finput:focus, .fselect:focus, .ep-input:focus, .field-input:focus, .search-input:focus, .filter-select:focus {
  border-color: rgba(59,110,244,0.45);
  background: var(--surface3);
}
.finput::placeholder, .ep-input::placeholder, .search-input::placeholder { color: var(--muted); }
.finput.err, .fselect.err { border-color: var(--red); }
.finput[readonly] { color: var(--muted); cursor: default; }
.fselect, .filter-select { cursor: pointer; }

/* Form layout */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.frow.full { grid-template-columns: 1fr; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.flabel { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.flabel .req { color: var(--orange); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* Dropzone (Load Build file upload) */
.dropzone {
  border: 2px dashed rgba(255,255,255,0.08);
  border-radius: 8px; padding: 18px;
  text-align: center; cursor: pointer;
  transition: all 0.15s; position: relative; overflow: hidden;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: rgba(59,110,244,.04); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.parsing { border-color: var(--orange); background: rgba(249,115,22,0.04); pointer-events: none; }
.dz-text { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dz-text strong { color: var(--text); }
.att-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.att-item { display: flex; align-items: center; gap: 8px; background: var(--surface2); border-radius: 6px; padding: 6px 10px; }
.att-name { flex: 1; font-size: 11px; font-weight: 600; }
.att-size { font-size: 10px; color: var(--muted); }
.att-rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 1px 5px; border-radius: 3px; line-height: 1; transition: all 0.12s; }
.att-rm:hover { color: var(--red); background: rgba(240,68,56,.1); }

/* Inline warning box */
.warn-box { display: none; font-size: 11px; color: var(--amber); padding: 8px 11px; background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.15); border-radius: 6px; margin-bottom: 10px; line-height: 1.5; }

/* ═══════════════════════════════════════
   8. MODALS + OVERLAYS
═══════════════════════════════════════ */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 24px;
  width: 460px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
.modal-sm { width: 380px; }
.modal-md { width: 600px; max-width: 96vw; }
.modal-lg { width: 640px; max-width: 96vw; }

.modal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 3px 8px; border-radius: 5px; line-height: 1; transition: all 0.12s; }
.modal-close:hover { color: var(--text); background: var(--surface2); }

/* Cancel load warning modal */
.cancel-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.cancel-modal-overlay.open { display: flex; }
.cancel-modal { background: var(--surface); border: 1px solid rgba(240,68,56,.22); border-radius: 14px; padding: 24px; width: 380px; max-width: 96vw; }
.cancel-modal-icon { font-size: 32px; text-align: center; margin-bottom: 12px; }
.cancel-modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.cancel-modal-body { font-size: 13px; color: var(--muted2); text-align: center; line-height: 1.6; margin-bottom: 20px; }
.cancel-modal-actions { display: flex; gap: 8px; justify-content: center; }
.cancel-modal-btn-cancel { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.cancel-modal-btn-confirm { background: var(--red); color: white; border: none; border-radius: 8px; padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background .12s; }
.cancel-modal-btn-confirm:hover { background: #dc2626; }

/* ═══════════════════════════════════════
   9. TOAST
═══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 22px; right: 22px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  transform: translateY(14px);
  opacity: 0;
  transition: all 0.22s;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.toast.show   { transform: translateY(0); opacity: 1; }
.toast.success { border-color: rgba(15,204,130,.35); color: var(--green); }
.toast.error   { border-color: rgba(240,68,56,.35);  color: var(--red); }
.toast.info    { border-color: rgba(59,110,244,.35);  color: var(--accent); }

/* ═══════════════════════════════════════
   10. SPINNER + LOADING
═══════════════════════════════════════ */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: t-spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes t-spin { to { transform: rotate(360deg); } }

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--muted);
  gap: 10px;
  font-size: 13px;
}
.error-banner {
  background: rgba(240,68,56,.07);
  border: 1px solid rgba(240,68,56,.18);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px;
  color: var(--red);
  font-size: 13px;
}

/* Parse status indicators (Load Build RC parser) */
.parse-spin { width: 12px; height: 12px; border: 2px solid var(--border2); border-top-color: var(--orange); border-radius: 50%; animation: t-spin .7s linear infinite; flex-shrink: 0; }
.parse-ok   { color: var(--green); font-weight: 700; }
.parse-err  { color: var(--red); }
.parsed-field { background: rgba(15,204,130,.08); border-color: rgba(15,204,130,.3) !important; transition: background .3s; }

/* ═══════════════════════════════════════
   11. KPI / SUMMARY STRIP CARDS
═══════════════════════════════════════ */
/* tracker.html uses .week-strip / .wsum-card */
.week-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.wsum-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.wsum-card.green { border-color: rgba(15,204,130,.18); background: linear-gradient(135deg, var(--surface) 55%, rgba(15,204,130,.04)); }
.wsum-card.blue  { border-color: rgba(59,110,244,.16); background: linear-gradient(135deg, var(--surface) 55%, rgba(59,110,244,.04)); }
.wsum-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); }
.wsum-val { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.wsum-sub { font-size: 11px; color: var(--muted2); }

/* weekly.html uses .summary-strip / .sum-card */
.summary-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 900px) { .summary-strip { grid-template-columns: repeat(2,1fr); } }
.sum-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; position: relative; }
.sum-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px; font-weight: 700; }
.sum-value { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
.tgt-bar-bg  { height: 4px; background: var(--surface3); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.tgt-bar-fill { height: 4px; border-radius: 3px; transition: width .5s; }
.tgt-delta { font-size: 11px; font-weight: 700; margin-top: 5px; }
.tgt-delta.above { color: var(--green); }
.tgt-delta.below { color: var(--red); }
.tgt-delta.close { color: var(--amber); }
.rpm-green { color: var(--green); }
.rpm-blue  { color: var(--accent); }
.rpm-red   { color: var(--red); }

/* ═══════════════════════════════════════
   12. DISPATCHER FILTER PILL + DROPDOWN
═══════════════════════════════════════ */
.tb-filter-wrap { position: relative; display: flex; align-items: center; }
.tb-filter-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted);
  padding: 0 12px; height: 32px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: all .15s; white-space: nowrap;
}
.tb-filter-btn:hover { color: var(--text); border-color: var(--border2); }
.tb-filter-btn.active, .tb-filter-btn.filtered {
  color: var(--accent); border-color: rgba(59,110,244,.4); background: rgba(59,110,244,.06);
}
.tb-filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: none; margin-left: 2px; }
.tb-filter-btn.active .tb-filter-dot, .tb-filter-btn.filtered .tb-filter-dot { display: block; }
.tb-filter-label-txt { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

.tb-dd {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 10px; padding: 6px; min-width: 220px;
  z-index: 200; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: none;
}
.tb-dd.open { display: block; }
.tb-dd-section { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; padding: 6px 8px 3px; }
.tb-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text); transition: background .1s;
}
.tb-dd-item:hover { background: var(--surface2); }
.tb-dd-item.sel { background: var(--accent-dim); color: var(--accent); }
.tb-dd-check {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border2);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
}
.tb-dd-item.sel .tb-dd-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb-dd-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ═══════════════════════════════════════
   13. TRACKER — DAY HEADER ROW
═══════════════════════════════════════ */
.tracker-wrap { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.day-hdr {
  display: flex; align-items: center;
  padding: 0 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.dh-spacer { width: 160px; min-width: 160px; flex-shrink: 0; }
.dh-days { flex: 1; display: grid; grid-template-columns: repeat(7,1fr); min-width: 0; }
.dh-day {
  text-align: center; padding: 7px 2px;
  font-size: 10px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .5px; line-height: 1.4;
}
.dh-day span { display: block; font-size: 9px; font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; }
.dh-day.today-hd { color: var(--accent); }
.dh-day.wknd-hd  { color: rgba(245,166,35,.8); }
.dh-tot {
  width: 130px; min-width: 130px;
  text-align: center; padding: 7px 0;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--purple);
}

/* ═══════════════════════════════════════
   14. TRACKER — DRIVER CARD + CELLS
═══════════════════════════════════════ */
.drivers-list { flex: 1; overflow: auto; padding: 6px 16px 16px; }
.driver-card {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 5px;
  overflow: hidden; transition: border-color .15s;
}
.driver-card:hover { border-color: var(--border2); }
.driver-card.terminated { opacity: .5; border-color: rgba(255,255,255,.04); }
.driver-card.terminated .dc-name { color: var(--muted); }

/* Drag grip */
.dc-grip {
  width: 14px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; flex-shrink: 0; opacity: 0; transition: opacity .15s;
  color: var(--muted); font-size: 11px; padding: 0 4px 0 6px;
  border-right: 1px solid var(--border);
}
.driver-card:hover .dc-grip { opacity: 1; }
.dc-grip:active { cursor: grabbing; }
.driver-card.row-drag-over { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Driver info column */
.dc-info {
  width: 160px; min-width: 160px;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; flex-shrink: 0;
}
.dc-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-truck { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terminated-badge { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 2px 6px; background: rgba(240,68,56,.08); border: 1px solid rgba(240,68,56,.18); border-radius: 4px; font-size: 9px; font-weight: 700; color: var(--red); letter-spacing: .3px; }
.temp-badge { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 2px 6px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.22); border-radius: 4px; font-size: 9px; font-weight: 700; color: var(--purple); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

/* HOS pill */
.dc-hos { font-size: 9px; padding: 2px 6px; border-radius: 3px; display: inline-block; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; width: fit-content; }
.dc-hos.driving    { background: rgba(15,204,130,.12); color: var(--green); }
.dc-hos.onDuty     { background: rgba(245,166,35,.12); color: var(--amber); }
.dc-hos.offDuty    { background: rgba(85,98,122,.12);  color: var(--muted); }
.dc-hos.sleeperBed { background: rgba(139,92,246,.12); color: var(--purple); }

/* Driver action buttons */
.dc-actions { display: flex; align-items: center; gap: 4px; }
.dc-notes-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 4px; margin-top: 5px; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; transition: all .12s; width: fit-content; line-height: 1; }
.dc-notes-btn:hover { color: var(--accent); background: var(--accent-dim); }
.dc-notes-btn.has-note { color: var(--amber); }
.dc-edit-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 4px; margin-top: 5px; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; transition: all .12s; width: fit-content; line-height: 1; }
.dc-edit-btn:hover { color: var(--text); background: var(--surface3); }

/* Driver note popup */
.driver-note-popup { position: fixed; z-index: 2000; background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; padding: 14px; width: 240px; box-shadow: 0 16px 48px rgba(0,0,0,.7); display: none; }
.driver-note-popup.open { display: block; }
.dnp-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: 8px; }
.dnp-ta { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: 7px; padding: 9px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12px; resize: none; line-height: 1.5; min-height: 90px; box-sizing: border-box; }
.dnp-ta:focus { outline: none; border-color: rgba(59,110,244,.4); }
.dnp-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.dnp-save { background: var(--accent); color: white; border: none; border-radius: 6px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background .12s; }
.dnp-save:hover { background: #2c5ee8; }

/* 7-day grid */
.dc-days { flex: 1; display: grid; grid-template-columns: repeat(7,1fr); min-width: 0; }
.dc-cell {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  height: 100px; padding: 0; position: relative;
  cursor: default; transition: background .12s;
  overflow: hidden; box-sizing: border-box;
}
.dc-cell:last-child { border-right: none; }
.dc-cell.today-c  { background: rgba(59,110,244,.04); }
.dc-cell.wknd-c   { background: rgba(245,166,35,.012); }
.dc-cell.drag-over { background: rgba(59,110,244,.1) !important; outline: 2px dashed rgba(59,110,244,.5); outline-offset: -2px; }
.dc-cell.drag-source { opacity: .45; outline: 2px dashed rgba(59,110,244,.4); outline-offset: -2px; }
body.is-cell-dragging .dc-cell * { pointer-events: none !important; }
.dc-cell[draggable='true'] { cursor: grab; }
.dc-cell[draggable='true']:active { cursor: grabbing; }
.cell-empty-inner.delivery-drag { cursor: grab; }

/* Temp / terminated grays */
.dc-cell.temp-gray { opacity: .22; pointer-events: none; }
.dc-cell.temp-gray::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.018) 5px,rgba(255,255,255,.018) 10px); }
.dc-cell.terminated-gray { opacity: .18; pointer-events: none; }
.dc-cell.terminated-gray::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.014) 5px,rgba(255,255,255,.014) 10px); }

/* Route strip */
.cell-route-strip { width: 100%; padding: 2px 22px 2px 6px; background: rgba(255,255,255,.032); border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; font-family: 'DM Sans', sans-serif; min-height: 16px; }
.cell-route-city { font-size: 9.5px; font-weight: 700; color: rgba(203,213,225,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 43%; letter-spacing: .4px; line-height: 1; text-transform: uppercase; }
.cell-route-arrow { font-size: 8px; color: rgba(100,116,139,.4); flex-shrink: 0; line-height: 1; }

/* Delivery landing */
.cell-delivery-land { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 8px; pointer-events: none; }
.cdl-label { font-size: 8px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: rgba(100,116,139,.55); line-height: 1; }
.cdl-city { font-size: 13px; font-weight: 700; color: rgba(238,242,255,.82); text-align: center; overflow: hidden; width: 100%; line-height: 1.25; padding: 0 6px; letter-spacing: .15px; text-transform: uppercase; font-family: 'Space Grotesk', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

/* Cell content */
.cell-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; overflow: hidden; width: 100%; }
.cell-amount { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.2px; }
.cell-secondary { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.cell-miles { font-size: 11px; color: rgba(238,242,255,.65); font-weight: 600; }
.cell-sep { font-size: 9px; color: rgba(85,98,122,.4); }
.cell-rpm-lbl { font-size: 11px; font-weight: 700; }
.cell-rpm-lbl.good { color: var(--green); }
.cell-rpm-lbl.ok   { color: var(--accent); }
.cell-rpm-lbl.bad  { color: var(--red); }

/* Status pill (inside filled cell) */
.cell-status-pill { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 2px 7px; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.2); border-radius: 20px; font-size: 9px; font-weight: 700; color: var(--orange); letter-spacing: .3px; }

/* KIV badge + cancel */
.cell-reg-wrap { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.cell-reg-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(15,204,130,.1); border: 1px solid rgba(15,204,130,.25); border-radius: 20px; padding: 2px 8px 2px 6px; font-size: 9px; font-weight: 700; color: var(--green); letter-spacing: .2px; white-space: nowrap; }
.cell-reg-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.cell-reg-cancel { background: none; border: none; color: rgba(85,98,122,.35); cursor: pointer; font-size: 11px; padding: 1px 3px; line-height: 1; border-radius: 3px; transition: all .12s; flex-shrink: 0; position: relative; z-index: 5; }
.cell-reg-cancel:hover { color: var(--red); background: rgba(240,68,56,.08); }

/* Status-only display */
.cell-status-display { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 100%; padding: 4px; }
.cell-status-emoji { font-size: 22px; line-height: 1; }
.cell-status-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }

/* Draft label */
.cell-draft-label { font-size: 9px; color: var(--muted); font-style: italic; margin-top: 2px; }

/* Note dot */
.cell-note-dot { position: absolute; bottom: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); opacity: .9; pointer-events: none; }

/* Empty cell + hover */
.cell-empty-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cell-plus { width: 26px; height: 26px; border-radius: 50%; background: none; border: 1.5px dashed rgba(255,255,255,.1); color: rgba(255,255,255,.18); font-size: 16px; font-weight: 300; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .18s; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.dc-cell:hover .cell-plus { border-color: rgba(15,204,130,.5); color: rgba(15,204,130,.8); background: rgba(15,204,130,.07); }

/* ═══════════════════════════════════════
   15. TRACKER — CELL TOP-BAR COLORS
═══════════════════════════════════════ */
.cell-top-bar { height: 3px; width: 100%; flex-shrink: 0; background: var(--green); }
.cell-top-bar.amber               { background: var(--amber); }
.cell-top-bar.status-transit      { background: var(--green); }
.cell-top-bar.status-home_load    { background: var(--green); }
.cell-top-bar.status-breakdown    { background: var(--red); }
.cell-top-bar.status-family_emergency { background: var(--red); }
.cell-top-bar.status-pm           { background: var(--indigo); }
.cell-top-bar.status-health       { background: var(--indigo); }
.cell-top-bar.status-yard         { background: var(--accent); }
.cell-top-bar.status-hos          { background: var(--amber); }
.cell-top-bar.status-tonu         { background: var(--purple); }
.cell-top-bar.status-vacation     { background: var(--purple); }
.cell-top-bar.status-home_empty   { background: var(--muted); }
.cell-top-bar.status-late_delivery{ background: var(--orange); }
.cell-top-bar.status-layover      { background: var(--amber); }

/* Status-only cell backgrounds */
.dc-cell.has-status-only { background: rgba(249,115,22,.04); }
.dc-cell.has-status-only.status-transit        { background: rgba(15,204,130,.04); }
.dc-cell.has-status-only.status-home_load      { background: rgba(15,204,130,.04); }
.dc-cell.has-status-only.status-breakdown      { background: rgba(240,68,56,.05); }
.dc-cell.has-status-only.status-family_emergency{ background: rgba(240,68,56,.04); }
.dc-cell.has-status-only.status-pm             { background: rgba(99,102,241,.05); }
.dc-cell.has-status-only.status-health         { background: rgba(99,102,241,.04); }
.dc-cell.has-status-only.status-yard           { background: rgba(59,110,244,.04); }
.dc-cell.has-status-only.status-hos            { background: rgba(245,166,35,.04); }
.dc-cell.has-status-only.status-tonu           { background: rgba(139,92,246,.04); }
.dc-cell.has-status-only.status-vacation       { background: rgba(139,92,246,.06); }
.dc-cell.has-status-only.status-home_empty     { background: rgba(85,98,122,.06); }
.dc-cell.has-status-only.status-late_delivery  { background: rgba(249,115,22,.04); }
.dc-cell.has-status-only.status-layover        { background: rgba(245,166,35,.04); }

/* Status label colors (status-only cells) */
.dc-cell.status-transit    .cell-status-label { color: var(--green); }
.dc-cell.status-home_load  .cell-status-label { color: var(--green); }
.dc-cell.status-breakdown  .cell-status-label { color: var(--red); }
.dc-cell.status-pm         .cell-status-label { color: var(--indigo); }
.dc-cell.status-health     .cell-status-label { color: var(--indigo); }
.dc-cell.status-yard       .cell-status-label { color: var(--accent); }
.dc-cell.status-hos        .cell-status-label { color: var(--amber); }
.dc-cell.status-tonu       .cell-status-label { color: var(--purple); }
.dc-cell.status-vacation   .cell-status-label { color: var(--purple); }
.dc-cell.status-home_empty .cell-status-label { color: var(--muted2); }
.dc-cell.status-family_emergency .cell-status-label { color: var(--red); }
.dc-cell.status-late_delivery    .cell-status-label { color: var(--orange); }
.dc-cell.status-layover          .cell-status-label { color: var(--amber); }

/* ··· menu button */
.cell-menu-btn {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: none; border: none;
  color: rgba(132,147,178,0);
  cursor: pointer; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; padding: 0; line-height: 1;
  transition: color .2s, background .15s;
  z-index: 6;
}
.dc-cell:hover .cell-menu-btn, .cell-menu-btn.active { color: rgba(132,147,178,.55); }
.cell-menu-btn:hover { color: var(--text) !important; background: rgba(255,255,255,.09); }

/* ═══════════════════════════════════════
   16. TRACKER — INLINE CELL EDITOR
═══════════════════════════════════════ */
.cell-edit-overlay {
  position: absolute; inset: 0;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  padding: 6px 6px 4px; z-index: 20;
  border: 1px solid rgba(59,110,244,.45);
}
.cell-edit-row2 { display: flex; gap: 3px; width: 100%; }
.cell-inp2 {
  flex: 1; min-width: 0;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 4px; padding: 5px 3px;
  color: var(--text); font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700; text-align: center; box-sizing: border-box;
}
.cell-inp2:focus { outline: none; border-color: var(--accent); background: var(--surface3); }
.cell-inp2::placeholder { color: rgba(85,98,122,.35); font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 9px; }
.cell-rpm-live2 { font-size: 8px; font-weight: 700; text-align: center; min-height: 10px; margin-top: 2px; }
.cell-rpm-live2.good { color: var(--green); }
.cell-rpm-live2.ok   { color: var(--accent); }
.cell-rpm-live2.bad  { color: var(--red); }
.cell-edit-save { width: 100%; margin-top: 3px; background: var(--green); color: white; border: none; border-radius: 4px; padding: 4px; font-size: 9px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; letter-spacing: .2px; }
.cell-edit-save:hover { background: #059669; }

/* ═══════════════════════════════════════
   17. TRACKER — CELL ACTION PANEL (···)
═══════════════════════════════════════ */
#cell-action-panel {
  position: fixed; z-index: 2000;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 12px; padding: 5px; min-width: 165px;
  box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  display: none;
}
#cell-action-panel.open { display: block; }

.cap-item { padding: 8px 12px; font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 8px; color: var(--text); display: flex; align-items: center; gap: 10px; transition: background .1s; white-space: nowrap; font-family: 'DM Sans', sans-serif; }
.cap-item:hover { background: var(--surface2); }
.cap-item .cap-ico { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.cap-item.danger { color: var(--red); }
.cap-item.danger:hover { background: rgba(240,68,56,.08); }
.cap-divider { height: 1px; background: var(--border); margin: 3px 6px; }
.cap-section { padding: 5px 12px 2px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); }
.cap-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 4px; }
.cap-status-opt { padding: 7px 8px; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 7px; color: var(--text); display: flex; align-items: center; gap: 8px; transition: background .1s; }
.cap-status-opt:hover { background: var(--surface2); }
.cap-status-opt.active { color: var(--orange); }

/* Cell note panel */
#cell-note-panel { position: fixed; z-index: 2000; background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; padding: 14px; width: 220px; box-shadow: 0 16px 48px rgba(0,0,0,.75); display: none; }
#cell-note-panel.open { display: block; }
.cnp2-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: 8px; }
.cnp2-ta { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: 7px; padding: 9px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12px; resize: none; line-height: 1.5; min-height: 80px; box-sizing: border-box; }
.cnp2-ta:focus { outline: none; border-color: rgba(59,110,244,.4); }
.cnp2-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.cnp2-save { background: var(--accent); color: white; border: none; border-radius: 6px; padding: 5px 14px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }

/* ═══════════════════════════════════════
   18. TRACKER — WEEK TOTALS COLUMN
═══════════════════════════════════════ */
.dc-totals { width: 130px; min-width: 130px; padding: 0 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-left: 1px solid var(--border); flex-shrink: 0; }
.dct-gross { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: var(--green); line-height: 1; letter-spacing: -0.3px; }
.dct-sub { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.dct-miles { color: rgba(238,242,255,.38); font-weight: 500; }
.dct-sep { color: var(--border); font-size: 9px; }
.dct-rpm { font-weight: 700; }
.dct-rpm.good { color: var(--green); }
.dct-rpm.ok   { color: var(--accent); }
.dct-rpm.bad  { color: var(--red); }
.dct-loads { font-size: 10px; color: var(--muted2); }

/* ═══════════════════════════════════════
   19. UPDATES — STEP TIMELINE
═══════════════════════════════════════ */
.rp-timeline { padding: 18px 24px 32px; }
.tl-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tl-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.2px; }
.tl-progress { font-size: 12px; color: var(--muted2); }
.tl-steps { display: flex; flex-direction: column; gap: 4px; }

.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; transition: all .15s; }
.step-card.done     { background: rgba(15,204,130,.03); border-color: rgba(15,204,130,.12); }
.step-card.pod.done { background: rgba(245,166,35,.03); border-color: rgba(245,166,35,.15); }
.step-num { width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.step-card.done .step-num { background: rgba(15,204,130,.14); color: var(--green); border-color: rgba(15,204,130,.28); }
.step-card.pod .step-num  { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.step-card.pod.done .step-num { background: rgba(245,166,35,.18); color: var(--amber); border-color: rgba(245,166,35,.35); }
.step-info { flex: 1; min-width: 0; }
.step-name { font-weight: 600; font-size: 13px; margin-bottom: 1px; }
.step-sub { font-size: 11px; color: var(--muted2); }
.step-sub.sent { color: var(--green); }
.step-sub.pod-sent { color: var(--amber); }
.step-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-width: 118px; }
.btn-step-edit { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 3px 5px; border-radius: 5px; line-height: 1; transition: all .12s; flex-shrink: 0; }
.btn-step-edit:hover { color: var(--text); background: var(--surface3); }

.step-check { width: 23px; height: 23px; border-radius: 50%; border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; background: var(--surface2); flex-shrink: 0; }
.step-check:hover { border-color: var(--green); }
.step-check.done { background: var(--green); border-color: var(--green); }
.step-check.done::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
.step-card.pod .step-check.done { background: var(--amber); border-color: var(--amber); }
.step-card.pod .step-check.done::after { color: #000; }

/* ═══════════════════════════════════════
   20. UPDATES — INLINE EDIT ROW (EC)
═══════════════════════════════════════ */
.rp-edit-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; border-bottom: 1px solid var(--border); }
.ec { position: relative; padding: 10px 14px; border-right: 1px solid var(--border); transition: background .15s; cursor: text; }
.ec:last-child { border-right: none; }
.ec:hover { background: rgba(59,110,244,.04); }
.ec:hover .ec-pencil { opacity: 1; }
.ec-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; user-select: none; }
.ec-pencil { opacity: 0; transition: opacity .15s; font-size: 10px; color: var(--accent); }
.ec-val { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dashed transparent; transition: border-color .15s; padding-bottom: 1px; min-height: 19px; }
.ec:hover .ec-val { border-bottom-color: rgba(59,110,244,.4); }
.ec-val.empty   { color: var(--muted); font-style: italic; font-size: 12px; }
.ec-val.missing { color: var(--red); }
.ec-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--accent); color: var(--text); font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; outline: none; padding: 0 0 1px; margin: 0; display: none; }
.ec-input[type=date] { color-scheme: dark; }
.ec.editing .ec-val   { display: none; }
.ec.editing .ec-input { display: block; }
.ec.editing           { background: rgba(59,110,244,.06); }
.ec-hint { font-size: 9px; color: var(--accent); margin-top: 3px; opacity: 0; transition: opacity .15s; height: 11px; }
.ec.editing .ec-hint { opacity: 1; }
.ec-date-nav { display: none; position: absolute; right: 6px; top: 10px; gap: 2px; }
.ec.editing .ec-date-nav { display: flex; }
.ec-date-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 9px; padding: 2px 4px; cursor: pointer; transition: all .15s; line-height: 1; font-family: monospace; }
.ec-date-btn:hover { color: var(--text); border-color: var(--border2); }

/* ═══════════════════════════════════════
   21. MANAGE — TABLES + CARDS
═══════════════════════════════════════ */
.content { flex: 1; overflow: auto; padding: 20px; }
.filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0; }
.search-input { flex: 1; }
.group-block { margin-bottom: 12px; }
.group-header { display: flex; align-items: center; gap: 10px; padding: 8px 0 6px; }
.group-name { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.group-count { font-size: 10px; font-weight: 700; color: var(--muted); background: var(--surface2); padding: 2px 7px; border-radius: 4px; }
.driver-table { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; border-collapse: collapse; }
.driver-table th { padding: 9px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--border); text-align: left; }
.driver-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.driver-table tr:last-child td { border-bottom: none; }
.driver-table tr:hover td { background: var(--surface2); }
.group-header-row td { padding: 10px 14px 6px; background: var(--bg); border-bottom: 1px solid var(--border); }
.driver-name { font-weight: 700; }
.driver-phone { font-size: 11px; color: var(--muted2); margin-top: 2px; }
.action-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

/* Cards (dispatchers, DSMs) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; transition: border-color .15s; }
.card:hover { border-color: var(--border2); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.card-name { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; letter-spacing: -0.2px; }
.card-email { font-size: 11px; color: var(--muted2); margin-top: 2px; }
.card-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.badge-dispatch { background: var(--accent-dim); color: var(--accent); }
.badge-dsm      { background: rgba(139,92,246,.1); color: var(--purple); }
.badge-ops      { background: rgba(249,115,22,.1); color: var(--orange); }

/* Status badges (manage page) */
.status-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.status-home     { background: var(--accent-dim); color: var(--accent); }
.status-recovery { background: rgba(245,166,35,.1); color: var(--amber); }

/* ═══════════════════════════════════════
   22. EMPTY / ERROR STATES
═══════════════════════════════════════ */
.empty-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(100vh - 120px); gap: 8px; text-align: center; padding: 20px;
}
.ep-icon  { font-size: 40px; margin-bottom: 4px; }
.ep-title { font-size: 16px; font-weight: 700; color: var(--text); }
.ep-sub   { font-size: 13px; color: var(--muted2); }

/* ═══════════════════════════════════════
   23. SCROLLBAR
═══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.15); }

/* ═══════════════════════════════════════
   24. PREMIUM PANEL — shared hero + chip + card pattern
   Introduced Jul 2026 for the Load Manager redesign. Deliberately generic
   (prefix "pp-") so index.html / tracker.html can adopt the same detail-panel
   language later without inventing a second pattern.
═══════════════════════════════════════ */
.pp-hero { display: flex; flex-direction: column; gap: 10px; }
.pp-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pp-route-big {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: var(--fs-xl); letter-spacing: -0.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-rate-big {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: var(--fs-2xl); letter-spacing: -0.6px; color: var(--text);
  flex-shrink: 0; line-height: 1;
}
.pp-rate-sub { font-size: var(--fs-2xs); font-weight: 700; color: var(--muted2); text-align: right; margin-top: 3px; }
.pp-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--surface2); border: 1px solid var(--border2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted2);
  white-space: nowrap; font-family: 'DM Sans', sans-serif;
}
.pp-chip .mono { font-family: 'Space Grotesk', sans-serif; letter-spacing: .2px; }
.pp-chip.accent  { background: var(--accent-dim); border-color: rgba(59,110,244,.28); color: var(--accent); }
.pp-chip.linked  { background: rgba(15,204,130,.09); border-color: rgba(15,204,130,.25); color: var(--green); }
.pp-chip.pending { background: transparent; border-style: dashed; color: var(--muted); font-style: italic; font-weight: 500; }
.pp-chip.warn    { background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.25); color: var(--amber); }

.pp-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px;
}
.pp-card-title {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}