/* ============================================================================
   WheelHouseTMS — Shared Design System (app.css)
   One source of truth for color, type, spacing, and components.
   Pages link this, then keep only page-specific rules in their own <style>.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand / neutrals */
  --fd-ink:        #14161d;   /* primary dark (headings, dark chrome) */
  --fd-ink-2:      #222631;
  --fd-ink-solid:  #1b2030;   /* dark chrome that NEVER flips (avatars, dark buttons, modal headers) */
  --fd-on-solid:   #ffffff;   /* text on --fd-ink-solid */
  --fd-bg:         #fafbfc;   /* app background — barely-there gray */
  --fd-bg-2:       #f4f6f8;   /* subtle panel background */
  --fd-surface:    #ffffff;   /* cards */
  --fd-border:     #e8eaef;
  --fd-border-2:   #eef0f4;

  /* Text */
  --fd-text:       #2b2f3a;
  --fd-text-2:     #5b6270;   /* secondary */
  --fd-text-3:     #9aa1ad;   /* muted / labels */
  --fd-text-soft:  #6b7280;   /* alias used by some pages */

  /* Accents */
  --fd-primary:    #635bff;   /* primary action (modern blurple) */
  --fd-primary-d:  #4b45e0;
  --fd-primary-sf: #eef0ff;   /* primary soft bg */
  --fd-cyan:       #2aa9e0;
  --fd-green:      #15924f;
  --fd-green-sf:   #e7f6ee;
  --fd-amber:      #b4810c;
  --fd-amber-sf:   #fcf3da;
  --fd-red:        #e0444d;
  --fd-red-sf:     #fdebec;
  --fd-purple:     #7a4fd0;
  --fd-purple-sf:  #f0eafb;

  /* Radius */
  --fd-r-sm: 8px;
  --fd-r:    12px;
  --fd-r-lg: 16px;

  /* Shadows (soft, layered) */
  --fd-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --fd-shadow:    0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --fd-shadow-lg: 0 12px 32px rgba(16,24,40,.14), 0 4px 10px rgba(16,24,40,.07);

  /* Spacing scale */
  --fd-s1: 4px; --fd-s2: 8px; --fd-s3: 12px; --fd-s4: 16px;
  --fd-s5: 20px; --fd-s6: 24px; --fd-s8: 32px;

  --fd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
/* Root paints the themed background on the very first frame (no white flash on
   navigation — data-theme is set by an inline <head> script before app.css). */
html { background: var(--fd-bg); }
[data-theme="dark"] html { background: var(--fd-bg); }

.fd-app, body.fd-app {
  font-family: var(--fd-font);
  color: var(--fd-text);
  background: var(--fd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}
.fd-app * { box-sizing: border-box; }

/* Gentle page fade-in so content eases in instead of popping on navigation. */
@keyframes fdPageIn { from { opacity: 0; } to { opacity: 1; } }
body.fd-app { animation: fdPageIn .18s ease-out; }
@media (prefers-reduced-motion: reduce) { body.fd-app { animation: none !important; } }

/* Thin, themed scrollbars (rail keeps its own hidden scrollbar — more specific). */
.fd-app ::-webkit-scrollbar { width: 9px; height: 9px; }
.fd-app ::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 6px; }
.fd-app ::-webkit-scrollbar-thumb:hover { background: var(--fd-text-3); }
.fd-app ::-webkit-scrollbar-track { background: transparent; }
/* Keyboard focus ring (mouse clicks stay clean via :focus-visible). */
.fd-app a:focus-visible, .fd-app button:focus-visible, .fd-app [tabindex]:focus-visible { outline: 2px solid var(--fd-primary); outline-offset: 2px; border-radius: 4px; }

/* Loading shimmer placeholder — replaced the moment real content is set. */
@keyframes fdShimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skel { display: inline-block; min-width: 2.4em; height: .78em; border-radius: 5px; color: transparent !important;
  background: linear-gradient(90deg, var(--fd-bg-2) 25%, var(--fd-border) 37%, var(--fd-bg-2) 63%);
  background-size: 400px 100%; animation: fdShimmer 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Lucide icons: size to surrounding text + inherit color (monochrome).
   Nav rail sets its own explicit sizes, which override this via source order. */
svg.lucide { width: 1em; height: 1em; vertical-align: -.14em; flex: none; }

.fd-app ::selection { background: rgba(52,87,213,.16); }

/* Mobile: clip stray horizontal overflow so it can't pan the page and carry
   the sticky nav off-screen. 'clip' (not 'hidden') preserves position:sticky. */
@media (max-width: 820px) {
  body.fd-app { overflow-x: clip; max-width: 100%; }

  /* Bigger tap targets */
  .fd-app .fd-btn { min-height: 42px; }
  .fd-app button, .fd-app .fd-tab, .fd-app a.fd-sub-link { -webkit-tap-highlight-color: rgba(52,87,213,.12); }

  /* 16px inputs prevent mobile-browser auto-zoom on focus */
  .fd-app input[type="text"], .fd-app input[type="number"], .fd-app input[type="date"],
  .fd-app input[type="time"], .fd-app input[type="email"], .fd-app input[type="password"],
  .fd-app input[type="search"], .fd-app input[type="tel"],
  .fd-app select, .fd-app textarea {
    font-size: 16px; min-height: 44px;
  }
  .fd-app input[type="checkbox"], .fd-app input[type="radio"] { min-height: 0; }
}

/* Refined scrollbars (desktop) */
.fd-app ::-webkit-scrollbar { width: 11px; height: 11px; }
.fd-app ::-webkit-scrollbar-thumb {
  background: #c7d0de; border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
.fd-app ::-webkit-scrollbar-thumb:hover { background: #aab6c8; background-clip: content-box; }
.fd-app ::-webkit-scrollbar-track { background: transparent; }

/* Layout container */
.fd-container { max-width: 1240px; margin: 28px auto; padding: 0 20px; }
@media (max-width: 760px) { .fd-container { margin: 16px auto; padding: 0 14px; } }

/* ── Typography ───────────────────────────────────────────────────────────── */
.fd-h1 { font-size: 24px; font-weight: 800; color: var(--fd-ink); letter-spacing: -.3px; }
.fd-h2 { font-size: 17px; font-weight: 700; color: var(--fd-ink); letter-spacing: -.2px; }
.fd-muted { color: var(--fd-text-3); }
.fd-label {
  font-size: 10.5px; font-weight: 700; color: var(--fd-text-3);
  text-transform: uppercase; letter-spacing: .6px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.fd-card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-r);
  box-shadow: var(--fd-shadow-sm);
  padding: var(--fd-s6);
  margin-bottom: var(--fd-s4);
}
.fd-card-title {
  font-size: 15px; font-weight: 700; color: var(--fd-ink);
  margin-bottom: var(--fd-s4); padding-bottom: var(--fd-s3);
  border-bottom: 1.5px solid var(--fd-border-2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fd-card-sub { font-size: 12px; color: var(--fd-text-3); font-weight: 400; }

/* ── Hero banner ──────────────────────────────────────────────────────────── */
.fd-hero {
  background: linear-gradient(135deg, #161a2b 0%, #1c2748 55%, #234072 100%);
  border-radius: var(--fd-r-lg);
  padding: 28px 32px; margin-bottom: var(--fd-s5);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: var(--fd-shadow);
}
.fd-hero h1 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: -.3px; }
.fd-hero p { font-size: 13px; color: #aab4c9; line-height: 1.55; max-width: 580px; margin: 0; }
.fd-hero-badge {
  background: rgba(120,180,240,.16); border: 1px solid rgba(120,180,240,.3);
  color: #8fcdf0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px;
  letter-spacing: .5px; text-transform: uppercase; margin-left: 8px; vertical-align: middle;
}
.fd-hero-stat { color: #8fcdf0; font-size: 30px; font-weight: 800; line-height: 1; }
.fd-hero-stat-label { color: #8a96aa; font-size: 11px; margin-top: 4px; }
@media (max-width: 640px) {
  .fd-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
}

/* ── KPI cards ────────────────────────────────────────────────────────────── */
.fd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fd-s3); margin-bottom: var(--fd-s5); }
@media (max-width: 760px) { .fd-kpis { grid-template-columns: 1fr 1fr; } }
.fd-kpi {
  background: var(--fd-surface); border: 1px solid var(--fd-border);
  border-radius: var(--fd-r); padding: 16px 18px; box-shadow: var(--fd-shadow-sm);
  border-left: 4px solid var(--fd-border);
}
.fd-kpi.green  { border-left-color: var(--fd-green); }
.fd-kpi.blue   { border-left-color: var(--fd-primary); }
.fd-kpi.purple { border-left-color: var(--fd-purple); }
.fd-kpi.amber  { border-left-color: var(--fd-amber); }
.fd-kpi-value { font-size: 22px; font-weight: 800; color: var(--fd-ink); line-height: 1; margin: 5px 0 3px; letter-spacing: -.4px; }
.fd-kpi-sub { font-size: 11px; color: var(--fd-text-3); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--fd-r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s, opacity .15s;
  white-space: nowrap; text-decoration: none;
}
.fd-btn:active { transform: translateY(1px); }
.fd-btn:disabled { opacity: .5; cursor: not-allowed; }
.fd-btn-primary { background: var(--fd-primary); color: #fff; }
.fd-btn-primary:hover { background: var(--fd-primary-d); box-shadow: 0 4px 12px rgba(99,91,255,.3); }
.fd-btn-dark { background: var(--fd-ink); color: #fff; }
.fd-btn-dark:hover { background: var(--fd-ink-2); }
.fd-btn-green { background: var(--fd-green); color: #fff; }
.fd-btn-green:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(31,164,99,.26); }
.fd-btn-outline { background: var(--fd-surface); color: var(--fd-ink); border-color: var(--fd-border); }
.fd-btn-outline:hover { border-color: #c4cedd; background: var(--fd-bg-2); }
.fd-btn-ghost { background: transparent; color: var(--fd-text-2); }
.fd-btn-ghost:hover { background: var(--fd-bg-2); color: var(--fd-text); }
.fd-btn-danger { background: var(--fd-red); color: #fff; }
.fd-btn-danger:hover { filter: brightness(1.04); }
.fd-btn-sm { padding: 7px 12px; font-size: 12px; }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.fd-input, .fd-select, .fd-textarea {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--fd-text);
  padding: 10px 12px; background: var(--fd-surface);
  border: 1.5px solid var(--fd-border); border-radius: var(--fd-r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.fd-input:focus, .fd-select:focus, .fd-textarea:focus {
  outline: none; border-color: var(--fd-primary);
  box-shadow: 0 0 0 3px var(--fd-primary-sf);
}
.fd-textarea { min-height: 78px; resize: vertical; }
.fd-field { margin-bottom: var(--fd-s4); }
.fd-field > label { display: block; font-size: 12px; font-weight: 600; color: var(--fd-text-2); margin-bottom: 6px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.fd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fd-table th {
  padding: 11px 12px; text-align: left; font-size: 10.5px; font-weight: 700;
  color: var(--fd-text-3); text-transform: uppercase; letter-spacing: .5px;
  background: var(--fd-bg-2); border-bottom: 1px solid var(--fd-border);
  white-space: nowrap;
}
.fd-table th.r, .fd-table td.r { text-align: right; }
.fd-table td { padding: 12px; border-bottom: 1px solid var(--fd-border-2); vertical-align: middle; }
.fd-table td.r { font-variant-numeric: tabular-nums; }
.fd-table tbody tr:last-child td { border-bottom: none; }
.fd-table tbody tr { transition: background .12s; }
.fd-table tbody tr:hover td { background: var(--fd-bg-2); }

/* Wrap wide tables so they scroll horizontally instead of breaking the page */
.fd-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .fd-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* Opt-in card reflow: add .fd-cards to a .fd-table and data-label to its tds.
   Under 760px each row becomes a stacked card; tds render label-left/value-right. */
@media (max-width: 760px) {
  .fd-table.fd-cards { display: block; white-space: normal; overflow: visible; }
  .fd-table.fd-cards thead { display: none; }
  .fd-table.fd-cards tbody, .fd-table.fd-cards tr { display: block; width: 100%; }
  .fd-table.fd-cards tr { padding: 12px 14px; border-bottom: 6px solid var(--fd-bg); }
  .fd-table.fd-cards tbody tr:last-child { border-bottom: none; }
  .fd-table.fd-cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 5px 0; border: none; text-align: left;
  }
  .fd-table.fd-cards td[data-label]::before {
    content: attr(data-label); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: var(--fd-text-3); flex-shrink: 0;
  }
  .fd-table.fd-cards tbody tr:hover td { background: none; }
}

/* ── Pills / status badges ────────────────────────────────────────────────── */
.fd-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.fd-pill.green  { background: var(--fd-green-sf);  color: #146c43; }
.fd-pill.blue   { background: var(--fd-primary-sf); color: var(--fd-primary-d); }
.fd-pill.amber  { background: var(--fd-amber-sf);  color: #8a5a06; }
.fd-pill.red    { background: var(--fd-red-sf);    color: #a4242d; }
.fd-pill.purple { background: var(--fd-purple-sf); color: #5a34a8; }
.fd-pill.gray   { background: #eef1f5; color: var(--fd-text-2); }

/* Shared load-status badge colors (used by dispatch + loads) */
.s-Unassigned        { background: var(--fd-red-sf);   color: #a4242d; }
.s-Assigned          { background: var(--fd-primary-sf); color: var(--fd-primary-d); }
.s-En-Route-Pickup   { background: #fff3cd; color: #856404; }
.s-At-Pickup         { background: #fff0b8; color: #6b5200; }
.s-Loaded            { background: #ffe2c4; color: #b5460e; }
.s-En-Route-Delivery { background: #ffe9d6; color: #c25608; }
.s-At-Delivery       { background: #ecdcff; color: #6a2bbd; }
.s-Delivered         { background: #cdf3e3; color: #0c6b46; }
.s-POD-Uploaded      { background: var(--fd-green-sf); color: #146c43; }
.s-Completed         { background: #e3f6ec; color: #1a7a4d; }

/* ── States: empty / loading / error ──────────────────────────────────────── */
.fd-empty { text-align: center; padding: 48px 24px; color: var(--fd-text-3); font-size: 14px; }
.fd-empty .icon { font-size: 38px; margin-bottom: 12px; display: block; }
.fd-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--fd-border); border-top-color: var(--fd-primary);
  animation: fd-spin .7s linear infinite; margin: 28px auto;
}
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fd-skeleton {
  background: linear-gradient(90deg, #eef1f5 25%, #e3e8f0 37%, #eef1f5 63%);
  background-size: 400% 100%; animation: fd-shimmer 1.3s ease infinite;
  border-radius: 6px; height: 14px;
}
@keyframes fd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.fd-modal-overlay {
  position: fixed; inset: 0; background: rgba(16,20,35,.55);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  padding: 20px; backdrop-filter: blur(2px);
}
.fd-modal-overlay.show { display: flex; }
.fd-modal {
  background: var(--fd-surface); border-radius: var(--fd-r-lg);
  box-shadow: var(--fd-shadow-lg); width: 100%; max-width: 640px;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.fd-modal-header {
  padding: 18px 22px; border-bottom: 1px solid var(--fd-border);
  display: flex; align-items: center; justify-content: space-between;
}
.fd-modal-header h2 { font-size: 16px; font-weight: 700; color: var(--fd-ink); margin: 0; }
.fd-modal-close {
  background: none; border: none; font-size: 20px; color: var(--fd-text-3);
  cursor: pointer; line-height: 1; padding: 4px; border-radius: 6px;
}
.fd-modal-close:hover { background: var(--fd-bg-2); color: var(--fd-text); }
.fd-modal-body { padding: 22px; overflow-y: auto; }
.fd-modal-footer {
  padding: 14px 22px; border-top: 1px solid var(--fd-border);
  display: flex; gap: 10px; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--fd-surface);
}

/* Mobile: modals become bottom sheets with a safe-area-padded sticky footer */
@media (max-width: 640px) {
  .fd-modal-overlay { padding: 0; align-items: flex-end; }
  .fd-modal { max-width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
  .fd-modal-footer { flex-wrap: wrap; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .fd-modal-footer .fd-btn { flex: 1 1 auto; }
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
#fd-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--fd-ink); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600; box-shadow: var(--fd-shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000;
  max-width: 90vw;
}
#fd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#fd-toast.success { background: #14794c; }
#fd-toast.error { background: #b4232e; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.fd-row { display: flex; align-items: center; gap: var(--fd-s3); }
.fd-row.wrap { flex-wrap: wrap; }
.fd-spacer { margin-left: auto; }
.fd-hidden { display: none !important; }

/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --fd-ink:        #e8edf6;
  --fd-ink-2:      #c9d3e8;
  --fd-ink-solid:  #2a3354;   /* elevated navy, stays a "solid chrome" surface in dark mode */
  --fd-on-solid:   #ffffff;
  --fd-bg:         #0d0f18;
  --fd-bg-2:       #131623;
  --fd-surface:    #1a1d2e;
  --fd-border:     #2a2d3e;
  --fd-border-2:   #222537;

  --fd-text:       #d4daea;
  --fd-text-2:     #9aa4b8;
  --fd-text-3:     #79859c;
  --fd-text-soft:  #9aa4b8;

  --fd-primary:    #7c75ff;
  --fd-primary-d:  #635bff;
  --fd-primary-sf: rgba(124,117,255,.16);
  --fd-green:      #22c55e;
  --fd-green-sf:   rgba(34,197,94,.12);
  --fd-amber:      #f59e0b;
  --fd-amber-sf:   rgba(245,158,11,.12);
  --fd-red:        #f87171;
  --fd-red-sf:     rgba(248,113,113,.12);
  --fd-purple:     #a78bfa;
  --fd-purple-sf:  rgba(167,139,250,.12);

  --fd-shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  --fd-shadow:    0 2px 6px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --fd-shadow-lg: 0 10px 30px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.4);
}

[data-theme="dark"] .fd-app,
[data-theme="dark"] body.fd-app { background: var(--fd-bg); color: var(--fd-text); }

/* Tables */
[data-theme="dark"] .fd-table tbody tr:hover td { background: rgba(255,255,255,.03); }
[data-theme="dark"] .fd-table th { background: #111320; }

/* Inputs */
[data-theme="dark"] .fd-input,
[data-theme="dark"] .fd-select,
[data-theme="dark"] .fd-textarea {
  background: #111320; border-color: var(--fd-border); color: var(--fd-text);
}
[data-theme="dark"] .fd-input::placeholder { color: var(--fd-text-3); }

/* Buttons */
[data-theme="dark"] .fd-btn-outline {
  background: var(--fd-surface); color: var(--fd-text); border-color: var(--fd-border);
}
[data-theme="dark"] .fd-btn-outline:hover { background: var(--fd-bg-2); border-color: #3d4157; }
[data-theme="dark"] .fd-btn-ghost:hover { background: var(--fd-bg-2); }

/* Status badges in dark mode */
[data-theme="dark"] .s-Unassigned        { background: rgba(248,113,113,.15); color: #fca5a5; }
[data-theme="dark"] .s-Assigned          { background: rgba(79,113,240,.15); color: #93aafa; }
[data-theme="dark"] .s-En-Route-Pickup   { background: rgba(245,200,60,.12); color: #fcd34d; }
[data-theme="dark"] .s-At-Pickup         { background: rgba(253,224,71,.12); color: #fde047; }
[data-theme="dark"] .s-Loaded            { background: rgba(251,146,60,.12); color: #fb923c; }
[data-theme="dark"] .s-En-Route-Delivery { background: rgba(234,88,12,.12); color: #fb923c; }
[data-theme="dark"] .s-At-Delivery       { background: rgba(167,139,250,.15); color: #c4b5fd; }
[data-theme="dark"] .s-Delivered         { background: rgba(34,197,94,.12); color: #86efac; }
[data-theme="dark"] .s-POD-Uploaded      { background: rgba(34,197,94,.15); color: #4ade80; }
[data-theme="dark"] .s-Completed         { background: rgba(34,197,94,.12); color: #86efac; }

/* Pills */
[data-theme="dark"] .fd-pill.green  { background: rgba(34,197,94,.12); color: #4ade80; }
[data-theme="dark"] .fd-pill.blue   { background: rgba(79,113,240,.15); color: #93aafa; }
[data-theme="dark"] .fd-pill.amber  { background: rgba(245,158,11,.12); color: #fbbf24; }
[data-theme="dark"] .fd-pill.red    { background: rgba(248,113,113,.15); color: #fca5a5; }
[data-theme="dark"] .fd-pill.purple { background: rgba(167,139,250,.15); color: #c4b5fd; }
[data-theme="dark"] .fd-pill.gray   { background: rgba(255,255,255,.07); color: var(--fd-text-2); }

/* Modal overlay */
[data-theme="dark"] .fd-modal-overlay { background: rgba(0,0,0,.7); }

/* Skeleton shimmer */
[data-theme="dark"] .fd-skeleton {
  background: linear-gradient(90deg, #1f2335 25%, #262b42 37%, #1f2335 63%);
  background-size: 400% 100%; animation: fd-shimmer 1.3s ease infinite;
}

/* KPI accent lines still pop */
[data-theme="dark"] .fd-kpi { background: var(--fd-surface); border-color: var(--fd-border); }

/* Sub-bar dark */
[data-theme="dark"] .fd-sub-bar {
  background: #111320; border-color: var(--fd-border); box-shadow: none;
}
[data-theme="dark"] .fd-sub-link { color: var(--fd-text-3); }
[data-theme="dark"] .fd-sub-link:hover { color: var(--fd-text); }
[data-theme="dark"] .fd-sub-link.fd-sub-active { color: #7b9ff9; border-bottom-color: #7b9ff9; }

/* page-specific light backgrounds become dark */
[data-theme="dark"] body { background: var(--fd-bg) !important; color: var(--fd-text) !important; }
[data-theme="dark"] * { scrollbar-color: #3a3d55 transparent; }

/* ── Broad coverage for page-specific white cards ── */
[data-theme="dark"] .fd-card,
[data-theme="dark"] .fd-modal,
[data-theme="dark"] .fd-modal-footer,
[data-theme="dark"] .fd-modal-header { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }

/* Common white panel patterns across pages */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"] {
  background: var(--fd-surface) !important;
}
[data-theme="dark"] [style*="background: #f0f2f5"],
[data-theme="dark"] [style*="background:#f0f2f5"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #fafafa"],
[data-theme="dark"] [style*="background: #f6f8fb"],
[data-theme="dark"] [style*="background: #eef1f6"] {
  background: var(--fd-bg-2) !important;
}

/* Dispatch board dark */
[data-theme="dark"] .board-wrap { background: var(--fd-bg) !important; }
[data-theme="dark"] .unassigned-panel { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .panel-header { background: var(--fd-ink) !important; }
[data-theme="dark"] .unassigned-card { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .unassigned-card:hover { background: #202336 !important; }
[data-theme="dark"] .kanban-col { border-color: var(--fd-border) !important; }
[data-theme="dark"] .col-available .col-header { background: rgba(34,197,94,.1) !important; }
[data-theme="dark"] .col-on-load  .col-header { background: rgba(245,158,11,.08) !important; }
[data-theme="dark"] .col-header { border-color: var(--fd-border) !important; }
[data-theme="dark"] .avail-chip { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .avail-chip:hover { background: #202336 !important; border-color: var(--fd-primary) !important; }
[data-theme="dark"] .avail-chip.chip-selected { background: rgba(79,113,240,.15) !important; border-color: var(--fd-primary) !important; }
[data-theme="dark"] .chip-name { color: var(--fd-text) !important; }
[data-theme="dark"] .driver-card { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .dc-load-info { background: var(--fd-bg-2) !important; }
[data-theme="dark"] .dc-name { color: var(--fd-text) !important; }
[data-theme="dark"] .step-picker { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .step-btn { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .step-btn.current { background: var(--fd-ink-solid) !important; color: var(--fd-on-solid) !important; }
[data-theme="dark"] .off-duty-strip,
[data-theme="dark"] #off-duty-strip { background: #0e1020 !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .ods-chip { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; color: var(--fd-text-2) !important; }
[data-theme="dark"] .avail-search { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .avail-search-wrap { background: transparent !important; }

/* Accounting dark */
[data-theme="dark"] .settle-section { background: var(--fd-surface) !important; }
[data-theme="dark"] .settle-section-title { border-color: var(--fd-border) !important; color: var(--fd-ink) !important; }
[data-theme="dark"] .pay-input { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .pay-prefix, [data-theme="dark"] .pay-suffix { background: #111320 !important; border-color: var(--fd-border) !important; color: var(--fd-text-3) !important; }
[data-theme="dark"] .settle-load-row { border-color: var(--fd-border) !important; }
[data-theme="dark"] .slr-input { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .slr-input.edited { background: rgba(245,158,11,.1) !important; border-color: #f59e0b !important; color: #fbbf24 !important; }
[data-theme="dark"] .deductions-list .ded-row { background: var(--fd-bg-2) !important; }
[data-theme="dark"] .settle-net-box { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .acct-tab-bar { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .acct-tab { color: var(--fd-text-2) !important; }
[data-theme="dark"] .acct-tab.active { color: var(--fd-text) !important; border-bottom-color: var(--fd-primary) !important; }
[data-theme="dark"] .instructions-panel { background: var(--fd-surface) !important; }
[data-theme="dark"] .instructions-header { border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .controls-bar select,
[data-theme="dark"] .controls-bar input { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }

/* Dashboard dark */
[data-theme="dark"] .fd-kpi { background: var(--fd-surface) !important; }
[data-theme="dark"] canvas { filter: none; }

/* Loads/table pages */
[data-theme="dark"] .fd-table tbody tr:hover td { background: rgba(255,255,255,.03) !important; }
[data-theme="dark"] .fd-table th { background: var(--fd-bg-2) !important; color: var(--fd-text-3) !important; }
[data-theme="dark"] th, [data-theme="dark"] td { border-color: var(--fd-border) !important; }

/* Generic: any white card-like div */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box { background: var(--fd-surface) !important; border-color: var(--fd-border) !important; }

/* Inputs/selects globally */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--fd-bg-2) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
[data-theme="dark"] input::placeholder { color: var(--fd-text-3) !important; }

/* Modals */
[data-theme="dark"] .modal, [data-theme="dark"] #modal-overlay,
[data-theme="dark"] .modal-body, [data-theme="dark"] .modal-inner {
  background: var(--fd-surface) !important; color: var(--fd-text) !important;
}

/* Charts — invert the Chart.js canvas background to match dark bg */
[data-theme="dark"] .chart-container { background: var(--fd-surface) !important; }

/* ════════════════════════════════════════════════════════════════════
   DARK-CHROME FIX — components that use var(--fd-ink) as a BACKGROUND
   with white text break when --fd-ink flips light in dark mode.
   Remap them to the non-flipping --fd-ink-solid.
   ════════════════════════════════════════════════════════════════════ */

/* Solid/dark action buttons */
[data-theme="dark"] .btn-dark,
[data-theme="dark"] .btn-export,
[data-theme="dark"] .btn-add-user,
[data-theme="dark"] .pay-type-btn.active,
[data-theme="dark"] .acct-tab.active,
[data-theme="dark"] .page-tab.active,
[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .completed-filter-btn.active,
[data-theme="dark"] .btn-outline.active {
  background: var(--fd-ink-solid) !important;
  color: var(--fd-on-solid) !important;
  border-color: var(--fd-ink-solid) !important;
}
/* P&L total row stays a dark bar */
[data-theme="dark"] .pnl-table tr.total-row td { background: var(--fd-ink-solid) !important; color: var(--fd-on-solid) !important; }

/* Avatars / round initials badges (all pages) */
[data-theme="dark"] .driver-avatar,
[data-theme="dark"] .dc-avatar,
[data-theme="dark"] .completed-driver-av,
[data-theme="dark"] .driver-av,
[data-theme="dark"] .chip-av,
[data-theme="dark"] .ods-av,
[data-theme="dark"] .step-num,
[data-theme="dark"] .stat-icon-circle {
  background: var(--fd-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .driver-avatar.unknown,
[data-theme="dark"] .driver-avatar.unassigned { background: #3a4060 !important; color: #c4cad8 !important; }
[data-theme="dark"] .driver-rank { background: var(--fd-bg-2) !important; color: var(--fd-text-2) !important; }

/* Modal headers that used --fd-ink as a dark bar */
[data-theme="dark"] .modal-header,
[data-theme="dark"] .driver-modal .modal-header,
[data-theme="dark"] .completed-card-header {
  background: var(--fd-ink-solid) !important;
  color: var(--fd-on-solid) !important;
}
[data-theme="dark"] .modal-header h2,
[data-theme="dark"] .modal-header h3 { color: var(--fd-on-solid) !important; }

/* Assets page specifics */
[data-theme="dark"] .driver-modal { background: var(--fd-bg) !important; }
[data-theme="dark"] .modal-section { background: var(--fd-surface) !important; }
[data-theme="dark"] .modal-footer { background: var(--fd-bg) !important; border-top: 1px solid var(--fd-border) !important; }
[data-theme="dark"] .modal-field input,
[data-theme="dark"] .modal-field select,
[data-theme="dark"] .modal-field textarea { background: #12152a !important; border-color: var(--fd-border) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .driver-card { border-color: var(--fd-border) !important; }
[data-theme="dark"] .driver-card-header { background: var(--fd-bg-2) !important; }
[data-theme="dark"] .driver-card.unregistered .driver-card-header { background: rgba(245,158,11,.08) !important; }
[data-theme="dark"] .asset-tab.active { background: rgba(79,113,240,.18) !important; color: #93aafa !important; border-color: rgba(79,113,240,.4) !important; }
[data-theme="dark"] .asset-tab:hover:not(.active) { background: var(--fd-bg-2) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .asset-row { background: var(--fd-bg-2) !important; border-color: var(--fd-border) !important; }
[data-theme="dark"] .badge-company { background: rgba(79,113,240,.18) !important; color: #93aafa !important; }
[data-theme="dark"] .badge-unknown,
[data-theme="dark"] .unreg-banner,
[data-theme="dark"] .unreg-header { background: rgba(245,158,11,.08) !important; color: #fbbf24 !important; }
[data-theme="dark"] .unreg-banner { border-color: rgba(245,158,11,.3) !important; }

/* Edit/Remove buttons — light tinted backgrounds → translucent in dark */
[data-theme="dark"] .btn-edit { background: rgba(79,113,240,.15) !important; color: #93aafa !important; border-color: rgba(79,113,240,.35) !important; }
[data-theme="dark"] .btn-edit:hover { background: var(--fd-primary) !important; color: #fff !important; }
[data-theme="dark"] .btn-delete,
[data-theme="dark"] .btn-danger { background: rgba(248,113,113,.12) !important; color: #f87171 !important; border-color: rgba(248,113,113,.35) !important; }
[data-theme="dark"] .btn-delete:hover { background: rgba(248,113,113,.22) !important; }
[data-theme="dark"] .btn-gray { background: var(--fd-bg-2) !important; color: var(--fd-text) !important; }
[data-theme="dark"] .btn-outline { background: transparent !important; color: var(--fd-text) !important; border-color: var(--fd-border) !important; }

/* Nav avatar should also use primary blue */
[data-theme="dark"] .fd-user-avatar { background: var(--fd-primary) !important; }
