/* ============================================================
   HR HUB theme — every color in the app lives in this file.
   Zero hardcoded colors anywhere else (grep-able rule).
   ============================================================ */

[data-theme="light"] {         /* DEFAULT — daylight dispatch office */
  --bg: #F5F6F8;               /* cool paper gray */
  --surface: #FFFFFF;          /* cards */
  --surface-2: #EEF1F5;        /* hover / raised */
  --border: rgba(16,24,40,0.09);
  --text: #171D28;             /* ink */
  --text-dim: #5D6675;
  --yg: #2563EB;   --yg-tint: rgba(37,99,235,0.10);    /* Y&G — blue */
  --mk: #D97706;   --mk-tint: rgba(217,119,6,0.12);    /* M&K — amber */
  --danger: #DC2626; --danger-tint: #FEF2F2;
  --ok: #16A34A;   --warn: #B45309;
  --ins: #7C3AED;  --ins-tint: rgba(124,58,237,0.10);   /* insurance findings — violet */
  /* company text tints — darker variants that pass contrast on white */
  --yg-text: #1D4ED8;  --mk-text: #B45309;
  /* folder accent palette (light) */
  --accent-teal: #0D9488; --accent-green: #15803D; --accent-rose: #E11D48;
  --accent-slate: #475569; --accent-cyan: #0891B2; --accent-indigo: #4338CA;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.04);
  --on-accent: #FFFFFF;
  --scrim: rgba(16,24,40,0.35);
}
[data-theme="dark"] {          /* toggle — night shift */
  --bg: #12151B;  --surface: #1A1F27;  --surface-2: #232A36;
  --border: rgba(255,255,255,0.08);
  --text: #E8EAEE;  --text-dim: #9AA3B2;
  --yg: #60A5FA;   --yg-tint: rgba(96,165,250,0.14);
  --mk: #FBBF24;   --mk-tint: rgba(251,191,36,0.14);
  --danger: #F87171; --danger-tint: rgba(248,113,113,0.10);
  --ok: #34D399;   --warn: #FBBF24;
  --ins: #A78BFA;  --ins-tint: rgba(167,139,250,0.12);
  /* company text tints — brighter variants for dark backgrounds */
  --yg-text: #93C5FD;  --mk-text: #FBBF24;
  /* folder accent palette (dark) */
  --accent-teal: #2DD4BF; --accent-green: #34D399; --accent-rose: #FB7185;
  --accent-slate: #94A3B8; --accent-cyan: #22D3EE; --accent-indigo: #A5B4FC;
  --shadow: none;
  --on-accent: #12151B;
  --scrim: rgba(0,0,0,0.55);
}

/* ---------- base ---------- */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-display { font-family: 'Space Grotesk', sans-serif; }
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}
.text-dim { color: var(--text-dim); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
a.link { color: var(--yg); text-decoration: none; }
a.link:hover { text-decoration: underline; }
::selection { background: var(--yg-tint); }

*:focus-visible {
  outline: 2px solid var(--yg);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.card-hover { transition: background 150ms ease; }
.card-hover:hover { background: var(--surface-2); }

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--text-dim);
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.01em;
  transition: background 150ms ease, color 150ms ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--yg-tint); color: var(--yg); }
.nav-item.nav-danger.active { background: var(--danger-tint); color: var(--danger); }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ---------- company placards (truck-door decals) ---------- */
.placard {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 8px; border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid;
  white-space: nowrap;
}
.placard-yg { color: var(--yg); background: var(--yg-tint); border-color: var(--yg); }
.placard-mk { color: var(--mk); background: var(--mk-tint); border-color: var(--mk); }

/* ---------- inline save feedback (card fields + grid cells) ---------- */
@keyframes save-pulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
.fld-saving { animation: save-pulse 1s ease-in-out infinite; }
.fld-saved {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent) !important;
  transition: box-shadow .4s ease, border-color .4s ease;
}
.fld-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent) !important; }
/* grid cell flashes (the input is hidden after blur, so flash the cell) */
td.cell-saving { background: var(--surface-2); }
td.cell-saved { box-shadow: inset 0 0 0 2px var(--ok); border-radius: 6px; transition: box-shadow .4s ease; }
td.cell-error { box-shadow: inset 0 0 0 2px var(--danger); border-radius: 6px; }
/* Google-Docs-style save status chip */
.save-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.save-status.ok { color: var(--ok); }
.save-status.saving { color: var(--text-dim); }
.save-status.err { color: var(--danger); }

/* ---------- fast date entry ---------- */
.date-field { position: relative; display: inline-block; }
.date-field.block { display: block; }
.date-field > input.date-entry { padding-right: 30px; }
.date-cal {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  border: none; background: transparent; color: var(--text-dim); cursor: pointer;
}
.date-cal:hover { background: var(--surface-2); color: var(--text); }
input.date-invalid { border-color: var(--danger) !important; outline-color: var(--danger); }
input.date-warn { border-color: var(--warn); }
.date-pop {
  position: fixed; z-index: 200; width: 200px; padding: 10px;
  box-shadow: var(--shadow);
}

/* ---------- search-jump spotlight + persistent highlight ---------- */
/* Persistent: tinted row + a colored left marker; stays until you click away. */
tr.search-highlight { background: var(--yg-tint) !important; }
tr.search-highlight > td:first-child { box-shadow: inset 4px 0 0 var(--yg); }
tr.search-highlight .sticky-col,
tr.search-highlight .sticky-col-2 { background: var(--yg-tint) !important; }
/* Spotlight: a soft accent flood over each cell that fades out (~2s), layered
   on top of the persistent tint so they don't fight. */
@keyframes search-pulse {
  0%   { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--yg) 32%, transparent); }
  100% { box-shadow: inset 0 0 0 9999px transparent; }
}
tr.search-spotlight > td { animation: search-pulse 2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  tr.search-spotlight > td { animation: none; }
}
/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow);
  z-index: 200; opacity: 0; transition: opacity 200ms ease;
}
.toast.show { opacity: 1; }

/* ---------- company colour coding (accents, never floods) ---------- */
/* Row-level left accent keyed to a driver's company. */
.co-accent-yg { border-left: 4px solid var(--yg); }
.co-accent-mk { border-left: 4px solid var(--mk); }
/* BOTH → a two-tone split border (blue over amber). */
.co-accent-both {
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--yg) 0 50%, var(--mk) 50% 100%) 1;
}
.co-accent-none { border-left: 4px solid transparent; }
/* Company-tinted NAME text (contrast-safe per theme). */
.name-yg { color: var(--yg-text); }
.name-mk { color: var(--mk-text); }

/* ---------- pills & badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.pill-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill-danger { color: var(--danger); background: var(--danger-tint); }
.pill-ins { color: var(--ins); background: var(--ins-tint); }
.pill-dim { color: var(--text-dim); background: var(--surface-2); }
.pill-yg { color: var(--yg); background: var(--yg-tint); }
.pill-mk { color: var(--mk); background: var(--mk-tint); }

.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--danger); color: var(--on-accent);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.count-badge-outline {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  border: 1px solid var(--danger); color: var(--danger); background: transparent;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px;
  font-weight: 500; font-size: 13.5px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  transition: background 150ms ease;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--yg); border-color: var(--yg); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--yg) 88%, var(--text)); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--text)); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; border-radius: 16px; }
table.data {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px;
}
table.data thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  color: var(--text-dim);
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr { transition: background 150ms ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }

/* ---------- forms ---------- */
.field {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 11px; font-size: 13.5px;
}
.field:focus { outline: 2px solid var(--yg); outline-offset: 0; border-color: transparent; }
.field::placeholder { color: var(--text-dim); }
label.lbl {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 500; color: var(--text-dim);
}
select.field { appearance: auto; }

/* ---------- DANGER hazard motif ---------- */
.hazard-edge {
  border-left: 4px solid transparent;
  border-image: repeating-linear-gradient(
    45deg,
    var(--danger) 0 6px,
    transparent 6px 12px
  ) 1;
}
.hazard-card {
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  border-radius: 16px;
}
@keyframes danger-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.danger-pulse { animation: danger-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .danger-pulse { animation: none; }
}

/* ---------- slide-over ---------- */
.slideover-scrim { background: var(--scrim); }
.slideover-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---------- banners / flash ---------- */
.banner {
  border-radius: 12px; padding: 10px 14px; font-size: 13.5px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; gap: 8px;
}
.banner-danger { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.banner-warn {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: var(--warn); color: var(--warn);
}
.banner-ok {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-color: var(--ok); color: var(--ok);
}

/* ---------- expiration color coding ---------- */
.exp-ok { color: var(--ok); }
.exp-warn { color: var(--warn); font-weight: 600; }
.exp-danger { color: var(--danger); font-weight: 600; }

/* ---------- progress ---------- */
.progress-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-fill { background: var(--ok); height: 100%; border-radius: 999px; transition: width 300ms ease; }

/* ---------- stepper ---------- */
.step-line { background: var(--border); width: 2px; }
.step-dot {
  width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 12px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.step-dot.done { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.step-locked { opacity: 0.45; }

/* ---------- misc ---------- */
.divider { border-top: 1px solid var(--border); }
.kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 1px 5px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
}
.icon-dim { color: var(--text-dim); }
.unread-row { font-weight: 600; }
.read-row { color: var(--text-dim); }

/* subtle scrollbars that follow the theme */
* { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }