/* ==========================================================================
   Logigo — Design System
   Industrial-tech aesthetic: neutral canvas, deep navy chrome, cobalt accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---------- Tokens: light (default) ---------- */
:root {
  color-scheme: light;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f4f8;
  --surface-sunken: #eef1f5;
  --border: #e3e8ef;
  --border-strong: #cfd6e0;
  --divider: #edf0f4;

  --text: #0e1726;
  --text-2: #455468;
  --text-3: #6a778a;
  --text-inverse: #ffffff;

  --primary: #1f4fd8;
  --primary-hover: #1a43bb;
  --primary-press: #163a9f;
  --primary-soft: #edf2fe;
  --primary-soft-2: #dce6fd;
  --primary-text: #1b47c5;
  --ring: rgba(31, 79, 216, 0.28);

  --cyan: #0b8fa6;
  --cyan-soft: #e5f6f9;
  --success: #0f7b56;
  --success-solid: #12935f;
  --success-soft: #e7f6ee;
  --success-border: #b9e4cf;
  --warning: #a35a06;
  --warning-solid: #d98a0b;
  --warning-soft: #fff5e1;
  --warning-border: #f4d79f;
  --orange: #b24a0f;
  --orange-soft: #fff0e6;
  --danger: #bf2a2a;
  --danger-solid: #d63a3a;
  --danger-soft: #fdeeee;
  --danger-border: #f4c4c4;
  --violet: #5b3fc4;
  --violet-soft: #f1edfe;
  --neutral-soft: #eef1f5;

  --chart-1: #1f4fd8;
  --chart-2: #0eb0c9;
  --chart-3: #12935f;
  --chart-4: #e4a11b;
  --chart-5: #d64545;
  --chart-6: #94a3b8;

  /* Chrome (sidebar) */
  --nav-bg: #0b1428;
  --nav-bg-2: #111c35;
  --nav-border: rgba(255, 255, 255, 0.06);
  --nav-text: #a3aec4;
  --nav-text-strong: #f2f5fb;
  --nav-hover: rgba(255, 255, 255, 0.05);
  --nav-active: rgba(255, 255, 255, 0.09);
  --nav-accent: #4fd1e8;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.22), 0 6px 14px -6px rgba(15, 23, 42, 0.10);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  --sidebar-w: 252px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;
}

/* ---------- Tokens: dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e16;
  --surface: #111724;
  --surface-2: #141b29;
  --surface-3: #1a2232;
  --surface-sunken: #0d121c;
  --border: #222b3c;
  --border-strong: #2e3a50;
  --divider: #1b2333;

  --text: #e9eef6;
  --text-2: #aab4c5;
  --text-3: #7f8a9e;

  --primary: #5b8cff;
  --primary-hover: #739dff;
  --primary-press: #4b7cf0;
  --primary-soft: rgba(91, 140, 255, 0.13);
  --primary-soft-2: rgba(91, 140, 255, 0.22);
  --primary-text: #8fb0ff;
  --ring: rgba(91, 140, 255, 0.40);

  --cyan: #4fd1e8;
  --cyan-soft: rgba(79, 209, 232, 0.12);
  --success: #4fd39b;
  --success-solid: #22a872;
  --success-soft: rgba(79, 211, 155, 0.12);
  --success-border: rgba(79, 211, 155, 0.30);
  --warning: #f2bd5c;
  --warning-solid: #e09a1c;
  --warning-soft: rgba(242, 189, 92, 0.12);
  --warning-border: rgba(242, 189, 92, 0.30);
  --orange: #f59a62;
  --orange-soft: rgba(245, 154, 98, 0.12);
  --danger: #f58a8a;
  --danger-solid: #e04f4f;
  --danger-soft: rgba(245, 138, 138, 0.12);
  --danger-border: rgba(245, 138, 138, 0.30);
  --violet: #a996ff;
  --violet-soft: rgba(169, 150, 255, 0.13);
  --neutral-soft: #1d2535;

  --chart-1: #5b8cff;
  --chart-2: #3fc8de;
  --chart-3: #3fc48d;
  --chart-4: #f0b54a;
  --chart-5: #f07070;
  --chart-6: #5d6a80;

  --nav-bg: #0b101a;
  --nav-bg-2: #111827;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  min-height: 100vh;
}
body.no-scroll { overflow: hidden; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }

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

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 8px 14px;
  background: var(--primary); color: #fff; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; }

svg.icon { display: inline-block; vertical-align: -0.15em; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.text-muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary-text); }
.fw-600 { font-weight: 600; }
.small { font-size: 12.5px; }
.ta-right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.flex { display: flex; align-items: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.spacer { flex: 1; }
.icon { flex-shrink: 0; }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform 80ms;
  user-select: none;
  text-decoration: none !important;
}
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.is-loading { opacity: 0.85; cursor: progress; }
.btn-sm { --btn-h: 32px; padding: 0 11px; font-size: 13px; gap: 6px; }
.btn-lg { --btn-h: 46px; padding: 0 20px; font-size: 15px; border-radius: var(--r-md); }
.btn-block { width: 100%; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--primary-press); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn-success { background: var(--success-solid); color: #fff; box-shadow: var(--shadow-xs); }
.btn-success:hover:not(:disabled) { filter: brightness(0.94); }
.btn-danger { background: var(--danger-solid); color: #fff; box-shadow: var(--shadow-xs); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.94); }
.btn-warning { background: var(--warning-solid); color: #fff; box-shadow: var(--shadow-xs); }
.btn-warning:hover:not(:disabled) { filter: brightness(0.95); }
.btn-danger-outline { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
.btn-danger-outline:hover:not(:disabled) { background: var(--danger-soft); }
.btn-warning-outline { background: var(--surface); color: var(--warning); border-color: var(--warning-border); }
.btn-warning-outline:hover:not(:disabled) { background: var(--warning-soft); }

.btn-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
}
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon.btn-secondary { border: 1px solid var(--border-strong); background: var(--surface); }

.btn-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,.2); font-size: 11.5px; display: inline-grid; place-items: center;
}
.btn-secondary .btn-count { background: var(--primary-soft); color: var(--primary-text); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px 0 7px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-lg { height: 26px; padding: 0 10px; font-size: 12.5px; }
.badge-neutral { background: var(--neutral-soft); color: var(--text-2); border-color: var(--border); }
.badge-info { background: var(--primary-soft); color: var(--primary-text); }
.badge-cyan { background: var(--cyan-soft); color: var(--cyan); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-orange { background: var(--orange-soft); color: var(--orange); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-violet { background: var(--violet-soft); color: var(--violet); }

.count-pill {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary-text);
}

/* Indian-style number plate */
.plate {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--text); border-radius: 5px; overflow: hidden;
  background: #fff; color: #0e1726; line-height: 1;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  box-shadow: var(--shadow-xs);
}
.plate-ind { background: #1f4fd8; color: #fff; font-size: 7.5px; padding: 0 3px; display: grid; place-items: center; letter-spacing: .04em; font-family: var(--font-sans); font-weight: 700; }
.plate-num { padding: 4px 7px; letter-spacing: 0.02em; white-space: nowrap; }
.plate-lg { font-size: 16px; border-width: 2px; border-radius: 7px; }
.plate-lg .plate-ind { font-size: 9px; padding: 0 5px; }
.plate-lg .plate-num { padding: 7px 11px; }
[data-theme="dark"] .plate { border-color: #cbd5e1; }

/* ---------- Avatars ---------- */
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; font-weight: 600; letter-spacing: 0.01em;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.avatar-xl { width: 72px; height: 72px; font-size: 24px; }
.avatar-blue { background: #dbe6ff; color: #1b47c5; }
.avatar-cyan { background: #d5f3f8; color: #0a7487; }
.avatar-violet { background: #e9e3ff; color: #5233b8; }
.avatar-teal { background: #d6f3e7; color: #0d6e4c; }
.avatar-indigo { background: #e0e4ff; color: #3a3fb0; }
.avatar-slate { background: #e3e8ef; color: #3a475a; }
[data-theme="dark"] .avatar { filter: saturate(0.9) brightness(0.85); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.label { font-size: 13px; font-weight: 600; color: var(--text); }
.req { color: var(--danger); }
.help { font-size: 12.5px; color: var(--text-3); }
.field-error { font-size: 12.5px; color: var(--danger); font-weight: 500; min-height: 0; }
.field-error:empty { display: none; }

.input, .select, .textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; line-height: 1.5; }
.select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a778a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.select-sm { height: 36px; font-size: 13.5px; }
.select-xs { height: 28px; font-size: 12.5px; padding: 0 26px 0 8px; background-position: right 6px center; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 0.85; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-solid); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.input:disabled, .select:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.input[type="date"] { padding-right: 8px; }

.input-affix { display: flex; align-items: stretch; }
.input-affix .affix {
  display: grid; place-items: center; padding: 0 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--text-2); font-weight: 600;
}
.input-affix .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--divider); }
.form-section:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-section-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.form-section-desc { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.form-error {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger);
  font-size: 13px; font-weight: 500; border: 1px solid var(--danger-border);
}

.search-input {
  position: relative; display: flex; align-items: center;
  min-width: 0; flex: 1 1 240px; max-width: 340px;
}
.field .search-input { flex: 0 0 auto; max-width: none; }
.search-input .icon { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.search-input input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: 13.5px; box-shadow: var(--shadow-xs);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.search-input input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.radio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.radio-card {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; background: var(--surface);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
  font-weight: 500;
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:hover { border-color: var(--text-3); }
.radio-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: var(--primary-soft); color: var(--primary-text); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 16px; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-2); cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.dropzone-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--primary-text); box-shadow: var(--shadow-sm); }
.dropzone-title { font-weight: 600; color: var(--text); }
.dropzone-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-top: 10px; }
.dropzone-file img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--divider);
}
.card-header.borderless { border-bottom: 0; padding-bottom: 4px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-title .icon { color: var(--text-3); }
.card-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.card-body { padding: 20px; }
.card-body.tight { padding: 12px 20px; }
.card-body.flush { padding: 0; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--divider); display: flex; align-items: center; gap: 8px; }
.card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.card.is-hoverable { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card.is-hoverable:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.section { margin-top: 24px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* ---------- Stat cards ---------- */
.stat-card {
  position: relative; display: flex; flex-direction: column;
  padding: 18px 20px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); color: inherit;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.stat-card { text-decoration: none !important; }
.stat-card.is-link:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.stat-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin-top: 10px; color: var(--text); }
.stat-sub { font-size: 12.5px; color: var(--text-3); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stat-sub strong { color: var(--text-2); font-weight: 600; }
.stat-card .progress, .stat-card .meter { margin-top: 14px; }

.tone-blue { background: var(--primary-soft); color: var(--primary-text); }
.tone-cyan { background: var(--cyan-soft); color: var(--cyan); }
.tone-green, .tone-success { background: var(--success-soft); color: var(--success); }
.tone-amber, .tone-warning { background: var(--warning-soft); color: var(--warning); }
.tone-red, .tone-danger { background: var(--danger-soft); color: var(--danger); }
.tone-violet { background: var(--violet-soft); color: var(--violet); }
.tone-slate, .tone-neutral { background: var(--neutral-soft); color: var(--text-2); }
.tone-primary { background: var(--primary-soft); color: var(--primary-text); }

/* Finance strip (overview) */
.finance-strip {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.finance-cell { padding: 20px 22px; min-width: 0; position: relative; color: inherit; }
.finance-cell + .finance-cell { border-left: 1px solid var(--divider); }
a.finance-cell { text-decoration: none !important; transition: background var(--dur); }
a.finance-cell:hover { background: var(--surface-2); }
.finance-cell.hero {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(79, 209, 232, 0.18), transparent 55%),
    linear-gradient(135deg, #0e1c3d 0%, #13306f 100%);
  color: #fff;
}
.finance-cell.hero .stat-label { color: rgba(255,255,255,.72); }
.finance-cell.hero .stat-value { color: #fff; }
.finance-cell.hero .stat-sub { color: rgba(255,255,255,.7); }
.finance-cell.hero .stat-sub strong { color: #fff; }
.finance-cell.hero .progress { background: rgba(255,255,255,.14); }
.finance-cell.hero .progress span { background: linear-gradient(90deg, #4fd1e8, #7fe3c4); }
.finance-cell .stat-value { font-size: 26px; }
.finance-cell .cell-cta { position: absolute; top: 18px; right: 18px; color: var(--text-3); }

.progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 600ms var(--ease); }
.progress.tone-success span { background: var(--success-solid); }
.progress.tone-warning span { background: var(--warning-solid); }
.progress.tone-danger span { background: var(--danger-solid); }
.progress.tone-success, .progress.tone-warning, .progress.tone-danger, .progress.tone-blue { background: var(--surface-3); }

.meter { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.meter span { height: 100%; transition: width 600ms var(--ease); }
.meter-lg { height: 14px; border-radius: 6px; }

/* Quick actions (overview) */
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.qa {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); color: inherit; text-decoration: none !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.qa:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.qa-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.qa-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--text); }
.qa-hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.qa .qa-arrow { margin-left: auto; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.qa:hover .qa-arrow { transform: translateX(2px); color: var(--text); }

/* Tables hosted inside another card */
.flush-table .card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.flush-table .table-card { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.truck-link { text-decoration: none !important; }

/* ---------- Page chrome ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-header-text { min-width: 0; }
.eyebrow { font-size: 12px; font-weight: 600; color: var(--primary-text); letter-spacing: 0.02em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.page-title { font-size: 24px; font-weight: 650; letter-spacing: -0.022em; color: var(--text); line-height: 1.2; }
.page-subtitle { font-size: 14px; color: var(--text-3); margin-top: 6px; max-width: 70ch; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
/* Let wide children (e.g. segmented tabs) shrink and scroll inside the toolbar instead of widening the page */
.toolbar > * { min-width: 0; max-width: 100%; }
.toolbar .spacer { min-width: 8px; }

.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-sm); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: 6px;
  font-size: 13px; font-weight: 550; color: var(--text-2); white-space: nowrap;
  transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-count { font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--surface-3); padding: 1px 6px; border-radius: 999px; }
.seg-btn.active .seg-count { background: var(--primary-soft); color: var(--primary-text); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 13.5px; font-weight: 550; color: var(--text-3); white-space: nowrap;
  text-decoration: none !important;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; }

/* ---------- Tables ---------- */
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-3);
  padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--divider); vertical-align: middle; color: var(--text); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 120ms; }
.table tbody tr:hover { background: var(--surface-2); }
.table tr.is-clickable { cursor: pointer; }
.table tr.is-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.table tr.row-danger td:first-child { box-shadow: inset 3px 0 0 var(--danger-solid); }
.table tr.row-warning td:first-child { box-shadow: inset 3px 0 0 var(--warning-solid); }
.table .td-actions { white-space: nowrap; text-align: right; width: 1%; }
.table .mono, .table .plate { white-space: nowrap; }
.table .ta-right { text-align: right; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: inherit; font-size: inherit; padding: 2px 0; }
.th-sort:hover { color: var(--text); }
.th-sort .icon { opacity: 0.6; }
th.ta-right .th-sort { flex-direction: row-reverse; }
.cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-title { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 12.5px; color: var(--text-3); }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-3); }
.table-count strong { color: var(--text); font-weight: 600; }
.table-pager { display: flex; align-items: center; gap: 14px; }
.pagesize { display: inline-flex; align-items: center; gap: 6px; }
.pager { display: flex; align-items: center; gap: 2px; }
.pager-num { min-width: 30px; height: 30px; border-radius: 6px; font-size: 13px; font-weight: 550; color: var(--text-2); }
.pager-num:hover { background: var(--surface-3); }
.pager-num.active { background: var(--primary-soft); color: var(--primary-text); font-weight: 650; }
.pager-gap { padding: 0 4px; color: var(--text-3); }

.simple-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.simple-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.simple-table td { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.simple-table tr:last-child td { border-bottom: 0; }
.simple-table .ta-right { text-align: right; }

/* ---------- Lists ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--divider); color: inherit; min-width: 0; }
.list-item:last-child { border-bottom: 0; }
a.list-item { text-decoration: none !important; transition: background 120ms; }
a.list-item:hover { background: var(--surface-2); }
.list-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.list-body { flex: 1; min-width: 0; }
.list-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.list-sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.list-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; text-align: right; }

.dl { display: flex; flex-direction: column; }
.dl-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.dl-row:last-child { border-bottom: 0; }
.dl dt { color: var(--text-3); }
.dl dd { color: var(--text); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Activity timeline */
.timeline { position: relative; padding: 6px 20px 10px; }
.tl-item { position: relative; display: flex; gap: 12px; padding: 10px 0; }
.tl-item::before { content: ''; position: absolute; left: 15px; top: 40px; bottom: -10px; width: 1px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-icon { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--surface); }
.tl-body { flex: 1; min-width: 0; padding-top: 2px; }
.tl-title { font-size: 13.5px; font-weight: 550; color: var(--text); }
.tl-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-time { font-size: 12px; color: var(--text-3); white-space: nowrap; padding-top: 3px; }

/* Alerts */
.alert-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: inherit; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
a.alert-item { text-decoration: none !important; }
a.alert-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.alert-item .alert-arrow { color: var(--text-3); transition: transform var(--dur); }
a.alert-item:hover .alert-arrow { transform: translateX(2px); color: var(--text); }
.alert-list { display: flex; flex-direction: column; gap: 8px; padding: 16px; }

/* Callouts */
.callout { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid; font-size: 13.5px; }
.callout-icon { margin-top: 1px; }
.callout-body { flex: 1; min-width: 0; }
.callout-title { font-weight: 600; }
.callout-text { color: inherit; opacity: 0.92; margin-top: 2px; }
.callout-title + .callout-text { margin-top: 2px; }
.callout-action { align-self: center; }
.callout-info { background: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-soft-2); }
.callout-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.callout-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.callout-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.callout-neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }

/* ---------- Empty & skeleton ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; }
.empty-compact { padding: 28px 16px; }
.empty-art { position: relative; width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 14px; background: transparent !important; }
.empty-compact .empty-art { width: 64px; height: 64px; margin-bottom: 10px; }
.empty-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.empty-rings circle { fill: none; stroke: var(--border); stroke-width: 1.2; }
.empty-rings circle:first-child { stroke-dasharray: 3 5; }
.empty-icon { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text-2); }
.empty-compact .empty-icon { width: 38px; height: 38px; border-radius: 11px; }
.empty-art.tone-danger .empty-icon { color: var(--danger); }
.empty-art.tone-success .empty-icon { color: var(--success); }
.empty-art.tone-primary .empty-icon { color: var(--primary-text); }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.empty-text { font-size: 13.5px; color: var(--text-3); margin-top: 4px; max-width: 42ch; }
.empty-action { margin-top: 16px; }

.sk { background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 6px; }
.sk-line { height: 11px; }
.sk-line-lg { height: 26px; }
.sk-circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.sk-row:last-child { border-bottom: 0; }
.sk-chart { display: flex; align-items: flex-end; gap: 8px; height: 220px; padding: 0 4px; }
.sk-chart .sk { flex: 1; border-radius: 4px 4px 0 0; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Charts ---------- */
.chart { position: relative; width: 100%; min-height: 120px; }
.chart-box { width: 100%; overflow: hidden; }
.chart-svg { overflow: visible; max-width: 100%; }
.chart-grid { stroke: var(--divider); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-grid.baseline { stroke: var(--border-strong); stroke-dasharray: none; }
.chart-axis { fill: var(--text-3); font-size: 11.5px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.dashed { stroke-dasharray: 5 5; stroke-width: 1.75; }
.chart-guide { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; transition: opacity 120ms; }
.chart-hover-dot { stroke-width: 2.25; pointer-events: none; transition: opacity 120ms; }
.chart-hit { cursor: crosshair; }
.chart-bar { transition: opacity 150ms; }
.bar-hover { fill: transparent; }
.bar-hover.active { fill: var(--surface-3); opacity: 0.6; }
.donut-track { fill: none; stroke: var(--surface-3); }
.donut-seg { fill: none; transition: opacity 150ms, stroke-width 150ms; cursor: pointer; }
.donut-seg:hover { opacity: 0.85; }
.donut-wrap { position: relative; margin: 0 auto; flex-shrink: 0; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-value { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.donut-label { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 150px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: 12.5px; opacity: 0; transform: translateY(4px); transition: opacity 120ms, transform 120ms;
}
.chart-tip.show { opacity: 1; transform: none; }
.chart-tip-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.chart-tip-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); padding: 1px 0; }
.chart-tip-row strong { margin-left: auto; padding-left: 14px; color: var(--text); font-weight: 600; }
.chart-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chart-total { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }

.legend-table { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.legend-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.legend-row:last-child { border-bottom: 0; }
.legend-row .legend-name { flex: 1; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.legend-row .legend-val { font-weight: 600; color: var(--text); }
.legend-row .legend-pct { width: 44px; text-align: right; color: var(--text-3); font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .chart-svg.animate .chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms var(--ease) forwards; }
  .chart-svg.animate .chart-line.dashed { stroke-dasharray: 5 5; stroke-dashoffset: 0; animation: fade 600ms ease forwards; opacity: 0; }
  .chart-svg.animate .chart-area { opacity: 0; animation: fade 700ms 250ms ease forwards; }
  .chart-svg.animate .chart-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: grow 600ms var(--ease) forwards; }
  .chart-svg.animate .donut-seg { stroke-dasharray: 0 100; animation: donut 800ms var(--ease) forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes grow { to { transform: scaleY(1); } }
@keyframes donut { to { stroke-dasharray: var(--len) 100; } }

/* ---------- Modal / drawer ---------- */
#overlay-root { position: relative; z-index: 200; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 13, 25, 0.48);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.modal-backdrop.open { opacity: 1; }
.modal {
  width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(0.985); transition: transform 220ms var(--ease);
}
.modal-backdrop.open .modal { transform: none; }
.modal:focus { outline: none; }
.modal-sm { max-width: 460px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1040px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.modal-title { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.modal-desc { font-size: 13.5px; color: var(--text-3); margin-top: 4px; }
.modal-x { margin: -6px -8px 0 0; }
.modal-body { padding: 18px 22px 22px; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--divider); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); flex-wrap: wrap; }

.confirm { display: flex; gap: 14px; }
.confirm-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.confirm-content { flex: 1; min-width: 0; }
.confirm-message { color: var(--text-2); font-size: 14px; }
.confirm-details { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }

/* ---------- Menu / popover ---------- */
.menu {
  position: fixed; z-index: 300; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-4px); transition: opacity 120ms, transform 120ms;
}
.menu.open { opacity: 1; transform: none; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 6px; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--text);
}
.menu-item .icon { color: var(--text-3); }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--surface-3); outline: none; }
.menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .icon { color: var(--danger); }
.menu-item.active { color: var(--primary-text); }
.menu-check { margin-left: auto; color: var(--primary-text) !important; }
.menu-hint { margin-left: auto; font-size: 12px; color: var(--text-3); }
.menu-divider { height: 1px; background: var(--divider); margin: 6px -6px; }
.menu-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--divider); margin: -6px -6px 6px; }

/* ---------- Toasts ---------- */
.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 400; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: 13.5px; color: var(--text);
  opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toast.show { opacity: 1; transform: none; }
.toast-icon { margin-top: 1px; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--primary-text); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; }
.toast-close { color: var(--text-3); padding: 2px; border-radius: 4px; }
.toast-close:hover { color: var(--text); background: var(--surface-3); }

/* ---------- Install-the-app pop-up (driver app) ---------- */
.install-sheet {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 390;
  width: min(440px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 10px 14px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  color: var(--text);
  opacity: 0; transform: translate(-50%, 12px); transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.install-sheet.show { opacity: 1; transform: translate(-50%, 0); }
.install-icon { flex: none; border-radius: 12px; }
.install-body { flex: 1; min-width: 0; }
.install-title { font-weight: 600; font-size: 15px; }
.install-text { margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.install-text .icon { vertical-align: -2px; }
.install-go { margin-top: 10px; }
.install-close { flex: none; color: var(--text-3); padding: 0 6px; }

/* ---------- Document / proof viewer ---------- */
.viewer { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); min-height: 0; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.viewer-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; min-width: 0; }
.viewer-tools { display: flex; align-items: center; gap: 2px; }
.viewer-zoom { min-width: 44px; text-align: center; font-size: 12.5px; color: var(--text-2); }
.viewer-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.viewer-stage {
  position: relative; height: 520px; display: grid; place-items: center; overflow: auto;
  background-color: var(--surface-sunken);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
}
.viewer-compact .viewer-stage { height: 360px; }
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 200ms var(--ease); box-shadow: var(--shadow-md); background: #fff; }
.viewer-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-3); font-size: 13px; }

/* ---------- Truck illustration ---------- */
.truck-art { width: 100%; height: auto; }
.truck-art .t-shadow { fill: rgba(15, 23, 42, 0.08); }
.truck-art .t-box { fill: var(--tb, #dbe6ff); }
.truck-art .t-box-shade { fill: var(--tbs, #c9d8fc); }
.truck-art .t-ribs line { stroke: var(--tr, #c3d3fb); stroke-width: 2; }
.truck-art .t-stripe { fill: var(--ts, #1f4fd8); opacity: 0.85; }
.truck-art .t-cab { fill: var(--tc, #1f4fd8); }
.truck-art .t-glass { fill: #dff3fb; opacity: 0.95; }
.truck-art .t-handle { fill: rgba(255,255,255,.55); }
.truck-art .t-lamp { fill: #ffd979; }
.truck-art .t-chassis { fill: #1f2937; }
.truck-art .t-wheel circle { fill: #1f2937; }
.truck-art .t-wheel .t-hub { fill: #cbd5e1; }
.truck-cyan { --tb: #d7f3f8; --tbs: #c3ebf2; --tr: #b8e5ee; --ts: #0b8fa6; --tc: #0b8fa6; }
.truck-blue { --tb: #dfe8fe; --tbs: #cddbfd; --tr: #c4d4fb; --ts: #1f4fd8; --tc: #1f4fd8; }
.truck-amber { --tb: #fdefd2; --tbs: #fae3b4; --tr: #f6dca6; --ts: #d98a0b; --tc: #c27a0a; }
.truck-slate { --tb: #e7ebf0; --tbs: #dbe1e8; --tr: #d3d9e1; --ts: #8391a5; --tc: #6b788c; }
[data-theme="dark"] .truck-art .t-shadow { fill: rgba(0,0,0,.35); }
[data-theme="dark"] .truck-blue { --tb: #23345e; --tbs: #1d2c50; --tr: #2c4070; --ts: #5b8cff; --tc: #4b7cf0; }
[data-theme="dark"] .truck-cyan { --tb: #18414b; --tbs: #14363f; --tr: #1f4c57; --ts: #3fc8de; --tc: #2aa9bf; }
[data-theme="dark"] .truck-amber { --tb: #4a3a1a; --tbs: #3e3016; --tr: #574420; --ts: #f0b54a; --tc: #d9982c; }
[data-theme="dark"] .truck-slate { --tb: #283244; --tbs: #222b3a; --tr: #303b4f; --ts: #64748b; --tc: #56637a; }
[data-theme="dark"] .truck-art .t-chassis, [data-theme="dark"] .truck-art .t-wheel circle { fill: #070a10; }
[data-theme="dark"] .truck-art .t-wheel .t-hub { fill: #64748b; }

.truck-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none !important; }
.truck-card-art { position: relative; padding: 18px 26px 6px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--divider); }
.truck-card-art .badge { position: absolute; top: 12px; left: 12px; }
.truck-card-art .truck-card-menu { position: absolute; top: 8px; right: 8px; }
.truck-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.truck-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12.5px; }
.truck-card-meta .k { color: var(--text-3); }
.truck-card-meta .v { color: var(--text); font-weight: 550; margin-top: 1px; }
.truck-card-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

/* ==========================================================================
   App shell — Admin
   ========================================================================== */
.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background:
    radial-gradient(140% 60% at 0% 0%, rgba(79, 209, 232, 0.08), transparent 60%),
    var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  color: var(--nav-text);
  transition: width 220ms var(--ease), transform 240ms var(--ease);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; height: var(--topbar-h); padding: 0 18px; border-bottom: 1px solid var(--nav-border); flex-shrink: 0; overflow: hidden; color: inherit; text-decoration: none !important; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.brand-text { min-width: 0; white-space: nowrap; transition: opacity 160ms; }
.brand-name { font-size: 15px; font-weight: 650; color: var(--nav-text-strong); letter-spacing: -0.01em; }
.brand-name span { color: var(--nav-accent); }
/* The "go" streak after Logigo: nudges forward like it is pulling away */
.brand-name .brand-zip { display: inline-block; margin-left: 2px; font-weight: 800; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .brand-name .brand-zip { animation: brand-zip 2.4s var(--ease) infinite; }
}
@keyframes brand-zip {
  0%, 60%, 100% { transform: translateX(0); opacity: 0.85; }
  75% { transform: translateX(4px); opacity: 0.35; }
  80% { transform: translateX(-2px); opacity: 0; }
  90% { transform: translateX(0); opacity: 0.85; }
}
.brand-tag { font-size: 11px; color: var(--nav-text); opacity: 0.8; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.nav-group + .nav-group { margin-top: 18px; }
.nav-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(163, 174, 196, 0.6); padding: 0 10px 8px; white-space: nowrap; transition: opacity 160ms; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  height: 38px; padding: 0 10px; margin-bottom: 2px; border-radius: var(--r-sm);
  color: var(--nav-text); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  text-decoration: none !important;
  transition: background var(--dur), color var(--dur);
}
.nav-link .icon { opacity: 0.85; }
.nav-link:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
.nav-link.active { background: var(--nav-active); color: var(--nav-text-strong); }
.nav-link.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-accent); }
.nav-link.active .icon { color: var(--nav-accent); opacity: 1; }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 160ms; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; display: grid; place-items: center; background: rgba(79, 209, 232, 0.16); color: var(--nav-accent); transition: opacity 160ms; }
.nav-badge.warn { background: rgba(242, 189, 92, 0.18); color: #f6c86e; }
.nav-link:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -2px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--nav-border); flex-shrink: 0; }
.collapse-btn { display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--nav-text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.collapse-btn:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
.collapse-btn .icon { transition: transform 220ms var(--ease); }

.main-col { flex: 1; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left 220ms var(--ease); display: flex; flex-direction: column; }

/* Collapsed (desktop) */
.admin-shell.collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.admin-shell.collapsed .main-col { margin-left: var(--sidebar-w-collapsed); }
.admin-shell.collapsed .brand-text,
.admin-shell.collapsed .nav-label,
.admin-shell.collapsed .nav-group-label,
.admin-shell.collapsed .collapse-label { opacity: 0; pointer-events: none; }
.admin-shell.collapsed .nav-badge { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
.admin-shell.collapsed .nav-group-label { height: 8px; padding: 0; }
.admin-shell.collapsed .sidebar-brand { padding: 0 20px; }
.admin-shell.collapsed .collapse-btn .icon { transform: rotate(180deg); }
.admin-shell.collapsed .nav-link[data-tip]:hover::after,
.admin-shell.collapsed .nav-link[data-tip]:focus-visible::after,
.admin-shell.collapsed .collapse-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: 6px; background: #0e1726; color: #fff;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-md);
  pointer-events: none; z-index: 10;
}
.collapse-btn { position: relative; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-menu { display: none; }
.breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; min-width: 0; flex: 1; }
.breadcrumbs ol { display: flex; align-items: center; gap: 6px; list-style: none; min-width: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.breadcrumbs a { color: var(--text-3); font-weight: 500; white-space: nowrap; }
.breadcrumbs a:hover { color: var(--text); text-decoration: none; }
.breadcrumbs .crumb-current { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs .sep { color: var(--border-strong); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }

.global-search { position: relative; width: 300px; }
.global-search input {
  width: 100%; height: 36px; padding: 0 44px 0 34px;
  background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 13.5px; transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.global-search input:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.global-search > .icon { position: absolute; left: 11px; top: 10px; color: var(--text-3); pointer-events: none; }
.kbd { position: absolute; right: 8px; top: 8px; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 11px; color: var(--text-3); display: grid; place-items: center; font-family: var(--font-sans); pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 420px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.search-results .sr-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); padding: 8px 10px 4px; }
.search-results .sr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none !important; }
.search-results .sr-item:hover, .search-results .sr-item.active { background: var(--surface-3); }
.search-results .sr-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; }

.icon-badge {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--danger-solid); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}
.profile-btn { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 999px; margin-left: 4px; transition: background var(--dur); }
.profile-btn:hover { background: var(--surface-3); }
.profile-btn .profile-name { font-size: 13px; font-weight: 600; }
.profile-btn .icon { color: var(--text-3); }

.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 28px 32px 48px; }
.page:focus { outline: none; }
.page-enter { animation: pageIn 260ms var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.sidebar-scrim { display: none; }

/* Notification panel */
.notif-panel {
  position: fixed; z-index: 300; width: 400px; max-width: calc(100vw - 16px);
  max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-6px); transition: opacity 140ms, transform 140ms;
}
.notif-panel.open { opacity: 1; transform: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.notif-list { overflow-y: auto; flex: 1; }
.notif-foot { padding: 10px; border-top: 1px solid var(--divider); text-align: center; }
.notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--divider); width: 100%; text-align: left; transition: background 120ms; position: relative; }
.notif-item:hover { background: var(--surface-2); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.notif-item.unread::after { content: ''; position: absolute; right: 16px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.notif-title { font-size: 13.5px; font-weight: 600; color: var(--text); padding-right: 16px; }
.notif-msg { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.notif-time { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ==========================================================================
   Feature layouts
   ========================================================================== */
.profile-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; }
.profile-hero-main { flex: 1; min-width: 220px; }
.profile-name { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-3); font-size: 13px; margin-top: 6px; }
.profile-meta span { display: inline-flex; align-items: center; gap: 5px; }

.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { padding: 16px 20px; min-width: 0; }
.metric + .metric { border-left: 1px solid var(--divider); }
.metric-label { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.metric-value { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; }

.doc-check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); width: 100%; text-align: left; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); color: inherit; }
.doc-check + .doc-check { margin-top: 8px; }
button.doc-check:hover, a.doc-check:hover { border-color: var(--border-strong); text-decoration: none; }
.doc-check.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--ring); }
.doc-check-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.doc-check-body { flex: 1; min-width: 0; }
.doc-check-title { font-weight: 600; font-size: 13.5px; }
.doc-check-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }

.verify-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.verify-side { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.verify-side .doc-check, .span-4 .doc-check { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
.verify-side .doc-check .badge, .span-4 .doc-check .badge { grid-column: 2; justify-self: start; }
.verify-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ring-progress { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.ring-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-progress circle { fill: none; stroke-width: 6; }
.ring-progress .ring-track { stroke: var(--surface-3); }
.ring-progress .ring-value { stroke: var(--success-solid); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease); }
.ring-progress span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 650; font-size: 13px; }

.queue-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none !important; transition: background 120ms; }
.queue-card:last-child { border-bottom: 0; }
.queue-card:hover { background: var(--surface-2); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.review-side { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.amount-hero { font-size: 34px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.copy-field { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn { color: var(--text-3); padding: 3px; border-radius: 4px; }
.copy-btn:hover { color: var(--text); background: var(--surface-3); }
.alloc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.alloc-row:last-child { border-bottom: 0; }

/* Stepper */
.stepper { display: flex; gap: 0; margin-bottom: 24px; counter-reset: step; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.step { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 150px; position: relative; padding-right: 12px; }
.step:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--border); border-radius: 2px; min-width: 16px; }
.step.done:not(:last-child)::after { background: var(--primary); }
.step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; font-weight: 650; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-3); transition: all var(--dur); }
.step.active .step-dot { border-color: var(--primary); color: var(--primary-text); box-shadow: 0 0 0 4px var(--ring); }
.step.done .step-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.step-label { font-size: 13px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.step.active .step-label, .step.done .step-label { color: var(--text); }

.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px; margin: -4px; }
.pick {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); width: 100%;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.pick:hover:not(:disabled) { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.pick[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--ring); }
.pick:disabled { cursor: not-allowed; background: var(--surface-2); }
.pick:disabled > *:not(.pick-reason) { opacity: 0.55; }
.pick-body { flex: 1; min-width: 0; }
.pick-reason { font-size: 12px; color: var(--warning); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.pick-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: transparent; }
.pick[aria-pressed="true"] .pick-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--divider); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-tile { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.summary-tile .k { font-size: 12px; color: var(--text-3); font-weight: 500; }
.summary-tile .v { font-size: 15px; font-weight: 600; margin-top: 4px; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.filter-bar .field { gap: 4px; }
.filter-bar .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.filter-bar .input, .filter-bar .select { height: 36px; font-size: 13.5px; }
.totals-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 16px; font-size: 13px; color: var(--text-3); border-bottom: 1px solid var(--divider); background: var(--surface-2); }
.totals-bar strong { color: var(--text); font-weight: 600; }

.qr-frame { position: relative; display: inline-block; padding: 14px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.qr-frame img { width: 200px; height: 200px; }
.qr-frame::before, .qr-frame::after { content: ''; position: absolute; width: 22px; height: 22px; border: 3px solid var(--primary); }
.qr-frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.qr-frame::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }

/* ==========================================================================
   Login
   ========================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--surface); }
.auth-brand {
  position: relative; overflow: hidden; color: #e8eefc;
  display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px;
  background:
    radial-gradient(80% 60% at 85% 10%, rgba(79, 209, 232, 0.16), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(91, 140, 255, 0.22), transparent 60%),
    linear-gradient(160deg, #0a1328 0%, #0e1d42 55%, #132c66 100%);
}
.auth-grid-bg { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.auth-brand > *:not(.auth-grid-bg):not(.auth-route) { position: relative; }
.auth-logo { display: flex; align-items: center; gap: 12px; }
.auth-logo .brand-mark { width: 38px; height: 38px; }
.auth-logo .brand-name { font-size: 17px; }
.auth-headline { max-width: 470px; }
.auth-headline h1 { font-size: 38px; line-height: 1.12; font-weight: 650; letter-spacing: -0.03em; color: #fff; }
.auth-headline h1 span { background: linear-gradient(90deg, #7fe3f2, #9bb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-headline p { margin-top: 16px; font-size: 15.5px; color: rgba(232, 238, 252, 0.72); line-height: 1.6; }
.auth-features { display: grid; gap: 14px; margin-top: 30px; }
.auth-feature { display: flex; gap: 12px; align-items: flex-start; }
.auth-feature-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #7fe3f2; flex-shrink: 0; }
.auth-feature strong { display: block; color: #fff; font-weight: 600; font-size: 14px; }
.auth-feature span { font-size: 13px; color: rgba(232, 238, 252, 0.62); }
.auth-foot { font-size: 12.5px; color: rgba(232, 238, 252, 0.5); }
.auth-route { position: absolute; right: -40px; bottom: 90px; width: 520px; opacity: 0.9; pointer-events: none; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 410px; }
.auth-card h2 { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.auth-card .lead { color: var(--text-3); margin-top: 6px; margin-bottom: 26px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 4px; }
.demo-box { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.demo-title { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.demo-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: border-color var(--dur), box-shadow var(--dur); }
.demo-btn + .demo-btn { margin-top: 8px; }
.demo-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.demo-btn .demo-name { font-weight: 600; font-size: 13.5px; }
.demo-btn .demo-cred { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.demo-btn > .icon:last-child { margin-left: auto; color: var(--text-3); }

/* ==========================================================================
   Driver app — mobile-first
   ========================================================================== */
.driver-shell { min-height: 100vh; background: var(--bg); }
.d-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 16px; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.d-top .brand-mark { width: 30px; height: 30px; }
.d-top-title { flex: 1; min-width: 0; }
.d-top-title .t1 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.d-top-title .t2 { font-size: 12px; color: var(--text-3); }
.d-main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
.d-main:focus { outline: none; }

.d-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.d-tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 560px; }
.d-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 64px; font-size: 11px; font-weight: 600; color: var(--text-3); text-decoration: none !important;
}
.d-tab.active { color: var(--primary-text); }
.d-tab .icon-badge { top: 8px; right: calc(50% - 20px); }
.d-tab-pay { position: relative; }
.d-tab-pay .pay-fab {
  width: 50px; height: 50px; border-radius: 16px; margin-top: -22px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--primary), #3b6cf0);
  box-shadow: 0 8px 18px -6px rgba(31, 79, 216, 0.6), 0 0 0 4px var(--surface);
  transition: transform var(--dur) var(--ease);
}
.d-tab-pay:active .pay-fab { transform: scale(0.95); }

.greet { margin: 4px 2px 16px; }
.greet .hello { font-size: 13px; color: var(--text-3); }
.greet .name { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 2px; }
.greet .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.d-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xs); margin-bottom: 14px; overflow: hidden; }
.d-card-pad { padding: 18px; }
.d-card-title { font-size: 14px; font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.d-card-title a { font-size: 13px; font-weight: 600; }

.truck-hero {
  position: relative; overflow: hidden; color: #fff; padding: 18px 18px 16px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(79, 209, 232, 0.22), transparent 60%),
    linear-gradient(140deg, #0c1834 0%, #142c63 100%);
  border-radius: var(--r-xl); margin-bottom: 14px; box-shadow: var(--shadow-md);
}
.truck-hero .label-sm { font-size: 12px; color: rgba(255,255,255,.66); font-weight: 500; }
.truck-hero .truck-art { width: 62%; margin: 4px 0 2px auto; }
.truck-hero .truck-art .t-shadow { fill: rgba(0,0,0,.3); }
.truck-hero .hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.truck-hero .hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.truck-hero .hero-meta .k { font-size: 11.5px; color: rgba(255,255,255,.6); }
.truck-hero .hero-meta .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.truck-hero .badge { background: rgba(127, 227, 196, 0.16); color: #8ff0cf; }
.truck-hero .plate { border-color: #fff; }

.rent-card .big { font-size: 34px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.rent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.rent-tile { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.rent-tile .k { font-size: 12px; color: var(--text-3); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.rent-tile .v { font-size: 17px; font-weight: 650; margin-top: 4px; letter-spacing: -0.01em; }
.rent-tile.danger { background: var(--danger-soft); border-color: var(--danger-border); }
.rent-tile.danger .v, .rent-tile.danger .k { color: var(--danger); }

.d-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none !important; }
.d-row:last-child { border-bottom: 0; }
.d-row-body { flex: 1; min-width: 0; }
.d-row-title { font-size: 14px; font-weight: 600; }
.d-row-sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.d-row-end { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.d-month { padding: 10px 18px 6px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); border-bottom: 1px solid var(--divider); }

.doc-tile { padding: 16px 18px; border-bottom: 1px solid var(--divider); }
.doc-tile:last-child { border-bottom: 0; }
.doc-tile-head { display: flex; align-items: center; gap: 12px; }

.pay-step { display: flex; gap: 12px; }
.pay-step + .pay-step { margin-top: 12px; }
.pay-step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.amount-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.amount-chip { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-size: 12px; color: var(--text-3); transition: border-color var(--dur), background var(--dur); text-align: left; }
.amount-chip strong { font-size: 14px; color: var(--text); font-weight: 650; }
.amount-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.amount-input { font-size: 22px !important; font-weight: 650; height: 52px !important; letter-spacing: -0.01em; }

.success-screen { text-align: center; padding: 28px 18px; }
.success-art { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.success-art::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed var(--warning-border); }
.success-screen h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.success-screen p { color: var(--text-3); margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .success-art { animation: pop 420ms var(--ease); }
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-strip { grid-template-columns: 1fr 1fr; }
  .finance-cell:nth-child(3) { border-left: 0; }
  .finance-cell:nth-child(n+3) { border-top: 1px solid var(--divider); }
  .span-8, .span-7 { grid-column: span 12; }
  .span-4, .span-5 { grid-column: span 6; }
  .review-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .global-search { width: 240px; }
}

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; box-shadow: var(--shadow-lg); }
  .admin-shell.nav-open .sidebar { transform: none; }
  .admin-shell .main-col, .admin-shell.collapsed .main-col { margin-left: 0; }
  .admin-shell.collapsed .brand-text, .admin-shell.collapsed .nav-label, .admin-shell.collapsed .nav-group-label { opacity: 1; }
  .admin-shell.collapsed .nav-badge { position: static; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 13, 25, 0.45); opacity: 0; pointer-events: none; transition: opacity 200ms; }
  .admin-shell.nav-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .collapse-btn { display: none; }
  .topbar-menu { display: inline-grid; }
  .topbar { padding: 0 16px; }
  .page { padding: 22px 20px 40px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verify-layout, .review-layout { grid-template-columns: minmax(0, 1fr); }
  .verify-side, .review-side { position: static; }
  /* Single column: proof first, then the decision panel, then the driver's payment history */
  .review-layout > .stack { display: contents; }
  .review-layout > .stack > :not(:first-child) { order: 2; }
  .review-side { order: 1; }
  .viewer-stage { height: 440px; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--divider); }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px 24px; justify-content: flex-start; gap: 24px; }
  .auth-headline h1 { font-size: 28px; }
  .auth-features, .auth-route, .auth-foot { display: none; }
  .auth-headline p { font-size: 14px; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  .global-search { display: none; }
  .profile-btn .profile-name, .profile-btn > .icon { display: none; }
  .page { padding: 18px 16px 40px; }
  .page-title { font-size: 21px; }
  .page-header { margin-bottom: 18px; align-items: flex-start; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-4.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-4, .span-5, .span-6 { grid-column: span 12; }
  .finance-strip { grid-template-columns: minmax(0, 1fr); }
  .finance-cell + .finance-cell { border-left: 0; border-top: 1px solid var(--divider); }
  .stat-value { font-size: 24px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .radio-cards { grid-template-columns: minmax(0, 1fr); }
  .search-input { max-width: none; flex-basis: 100%; }
  .toolbar > .select-filter { flex: 1 1 140px; }
  .toolbar > .select-filter .select { width: 100%; }
  .card-header { padding: 14px 16px; }
  .card-body { padding: 16px; }
  .list-item { padding: 12px 16px; }
  .timeline { padding: 4px 16px 8px; }
  .viewer-stage { height: 360px; }
  .dl-row { grid-template-columns: minmax(96px, 40%) 1fr; }

  /* Tables → stacked cards */
  .table-responsive thead { display: none; }
  .table-responsive, .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block; width: 100%; }
  .table-responsive tr { padding: 12px 16px; border-bottom: 1px solid var(--divider); }
  .table-responsive tbody tr:last-child { border-bottom: 0; }
  .table-responsive td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 5px 0; border: 0; text-align: right; }
  .table-responsive td::before { content: attr(data-label); font-size: 12px; font-weight: 500; color: var(--text-3); text-align: left; flex-shrink: 0; }
  .table-responsive td.td-primary { padding-bottom: 8px; text-align: left; }
  .table-responsive td.td-primary::before { display: none; }
  .table-responsive td.td-actions { justify-content: flex-end; padding-top: 8px; width: 100%; }
  .table-responsive td.td-actions::before { display: none; }
  .table-responsive td:empty { display: none; }
  .table tr.row-danger td:first-child, .table tr.row-warning td:first-child { box-shadow: none; }
  .table tr.row-danger { box-shadow: inset 3px 0 0 var(--danger-solid); }
  .table tr.row-warning { box-shadow: inset 3px 0 0 var(--warning-solid); }
  .table-footer { justify-content: center; }
  .pagesize { display: none; }

  /* Modals → bottom sheets */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { max-width: none !important; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; transform: translateY(24px); }
  .modal-footer { border-radius: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-footer .btn { flex: 1; }
  .toast-container { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }
  .stepper .step { min-width: auto; }
  .stepper .step-label { display: none; }
  .stepper .step.active .step-label { display: inline; }
  .wizard-foot .btn { flex: 1; }
  .profile-hero { padding: 18px; }
  .profile-hero .page-actions { width: 100%; }
  .hide-sm { display: none; }
  .quick-actions .qa-hint { display: none; }
  .quick-actions .qa-arrow { display: none; }
  .queue-card { flex-wrap: wrap; }
  .queue-card .list-meta { min-width: 0 !important; text-align: left; }
  .filter-bar .field { flex: 1 1 140px; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .verify-actions { justify-content: stretch; }
  .verify-actions .btn { flex: 1 1 140px; }
}

@media (max-width: 380px) {
  .grid-4.keep-2 { grid-template-columns: minmax(0, 1fr); }
  .rent-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .d-main { padding-top: 24px; }
}

/* ==========================================================================
   Motion & touch feedback (mobile feel). All decorative; disabled for reduced motion.
   ========================================================================== */
.login-help a { font-weight: 600; }

/* Road under the truck on the driver home hero */
.truck-hero .road {
  height: 3px; margin: -2px 0 4px auto; width: 70%; border-radius: 2px; opacity: 0.5;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 14px, transparent 14px 28px);
}

/* Active tab indicator */
.d-tab:not(.d-tab-pay)::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--primary); transform: translateX(-50%) scaleX(0); transition: transform 240ms var(--ease);
}
.d-tab.active:not(.d-tab-pay)::before { transform: translateX(-50%) scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  /* Page content rises in, card by card */
  .page-enter > * { animation: riseIn 420ms var(--ease) both; }
  .page-enter > :nth-child(2) { animation-delay: 50ms; }
  .page-enter > :nth-child(3) { animation-delay: 100ms; }
  .page-enter > :nth-child(4) { animation-delay: 150ms; }
  .page-enter > :nth-child(5) { animation-delay: 200ms; }
  .page-enter > :nth-child(n+6) { animation-delay: 250ms; }

  /* Login: brand and form slide in */
  .auth-logo, .auth-headline { animation: riseIn 520ms var(--ease) both; }
  .auth-headline { animation-delay: 90ms; }
  .auth-card { animation: riseIn 520ms 160ms var(--ease) both; }

  /* Truck idles on a moving road */
  .truck-hero .truck-art { animation: idle 1.6s ease-in-out infinite; }
  .truck-hero .road { animation: road 0.9s linear infinite; }

  /* Pay button gently pulses while rent is outstanding */
  .d-tabbar.has-due .pay-fab { animation: payPulse 2.4s ease-out infinite; }

  /* Tapped tab icon bounces */
  .d-tab.active .icon { animation: tabPop 320ms var(--ease); }

  /* Press feedback on touch targets */
  .btn, .d-card a, .d-row, .qa, .demo-btn, .rent-tile, .amount-chip, .d-tab {
    transition: transform 140ms var(--ease), background-color var(--dur), border-color var(--dur), box-shadow var(--dur);
  }
  .btn:active:not(:disabled), .demo-btn:active, .qa:active, .amount-chip:active { transform: scale(0.97); }
  a.d-row:active, .rent-tile:active { transform: scale(0.985); }
  .d-tab:active { transform: scale(0.92); }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes road { from { background-position: 0 0; } to { background-position: -28px 0; } }
@keyframes tabPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes payPulse {
  0% { box-shadow: 0 8px 18px -6px rgba(31, 79, 216, 0.6), 0 0 0 4px var(--surface), 0 0 0 4px rgba(31, 79, 216, 0.45); }
  70%, 100% { box-shadow: 0 8px 18px -6px rgba(31, 79, 216, 0.6), 0 0 0 4px var(--surface), 0 0 0 16px rgba(31, 79, 216, 0); }
}

/* ==========================================================================
   3D: WebGL truck stages, floating glass chips, aurora, tilt cards
   ========================================================================== */
.truck3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; opacity: 0; transition: opacity 600ms ease; }
.truck3d-canvas:active { cursor: grabbing; }
.is-3d > .truck3d-canvas { opacity: 1; }

/* Login stage */
.auth-3d {
  position: relative; height: 300px; margin: 8px -48px 0;
  /* Fade the road out at the edges instead of a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.truck-stage {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.auth-3d .truck-art { position: absolute; left: 12%; right: 12%; bottom: 14%; width: 76%; }
.auth-3d.is-3d .truck-art { display: none; }
.auth-brand:has(.auth-3d.is-3d) .auth-route { display: none; }
.float-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.chip-a { top: 10%; right: 6%; }
.chip-b { bottom: 8%; left: 6%; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fe3f2; box-shadow: 0 0 10px #7fe3f2; }
.chip-dot.ok { background: #5ee6a8; box-shadow: 0 0 10px #5ee6a8; }

/* Aurora glow behind the login brand panel */
.auth-brand::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(35% 30% at 30% 40%, rgba(79, 140, 255, 0.45), transparent 70%),
    radial-gradient(30% 28% at 70% 60%, rgba(34, 211, 238, 0.35), transparent 70%),
    radial-gradient(25% 25% at 55% 20%, rgba(139, 92, 246, 0.3), transparent 70%);
  filter: blur(20px);
}

/* Driver home truck stage */
.truck-stage { position: relative; height: 150px; margin: 2px -18px 0; }
.truck-stage .truck-art { position: absolute; right: 18px; bottom: 6px; width: 62%; margin: 0; }
.truck-stage .road { position: absolute; right: 18px; bottom: 2px; }
.truck-stage.is-3d .truck-art, .truck-stage.is-3d .road { display: none; }
.truck-stage .drag-hint {
  position: absolute; left: 18px; bottom: 8px; z-index: 2; font-size: 11px; color: rgba(255,255,255,.55);
  display: inline-flex; align-items: center; gap: 5px; pointer-events: none; opacity: 0; transition: opacity 400ms;
}
.truck-stage.is-3d .drag-hint { opacity: 1; }

/* Tilt cards: rotate toward the finger with a soft glare */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform 380ms var(--ease); position: relative; }
.tilt.tilting { transition: transform 60ms linear; }
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.35), transparent 60%);
  mix-blend-mode: soft-light;
}
.tilt.tilting::after { opacity: 1; }

/* 3D pay button: layered depth and a top highlight */
.d-tab-pay .pay-fab { background: linear-gradient(160deg, #4f86ff 0%, var(--primary) 55%, #1739a8 100%); }
.d-tab-pay .pay-fab::before { content: ''; position: absolute; inset: 2px 6px auto; height: 40%; border-radius: 12px 12px 20px 20px; background: linear-gradient(rgba(255,255,255,.35), transparent); pointer-events: none; }
.d-tab-pay .pay-fab { position: relative; }

@media (max-width: 1023px) {
  .auth-3d { height: 200px; margin: 4px -24px -8px; }
  .auth-headline p { display: none; }
  .float-chip { font-size: 11px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .float-chip { animation: floatY 4.5s ease-in-out infinite; }
  .chip-b { animation-delay: -2.2s; }
  .auth-brand::before { animation: aurora 14s ease-in-out infinite alternate; }
}
@keyframes floatY { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes aurora { from { transform: translate3d(-4%, -2%, 0) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) rotate(8deg); } }

/* ==========================================================================
   Signed-in extras (see docs/FRONTEND_MASTER_PROMPT.md)
   ========================================================================== */
/* Admin: 3D fleet yard */
.fleet-yard {
  position: relative; overflow: hidden; border-radius: var(--r-xl); color: #fff; box-shadow: var(--shadow-md); margin-bottom: 20px;
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(79, 209, 232, 0.2), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(91, 140, 255, 0.25), transparent 60%),
    linear-gradient(150deg, #0b1630 0%, #13295c 100%);
}
.yard-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 18px 20px 0; pointer-events: none; }
.yard-title { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; }
.yard-sub { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 3px; }
.yard-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.yard-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.yard-chip strong { color: #fff; }
.yard-dot { width: 8px; height: 8px; border-radius: 50%; }
.yard-assigned { background: #4f86ff; box-shadow: 0 0 8px #4f86ff; }
.yard-available { background: #2dd4bf; box-shadow: 0 0 8px #2dd4bf; }
.yard-maintenance { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.yard-inactive { background: #94a3b8; }
.yard-stage { position: relative; height: 340px; margin-top: -40px; }
@media (max-width: 767px) {
  .yard-stage { height: 260px; margin-top: -10px; }
  .yard-head { padding: 16px 16px 0; }
}

/* Driver: paid-vs-due ring on the rent card */
.rent-card { position: relative; }
.paid-ring { position: absolute; top: 40px; right: 18px; width: 64px; height: 64px; }
.paid-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.paid-ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.pr-track { stroke: var(--surface-3); }
.pr-fill { stroke: var(--success); stroke-dasharray: var(--pct) 100; }
.pr-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.pr-label strong { font-size: 14px; }
.pr-label span { font-size: 10px; color: var(--text-3); }

/* Driver: QR scan line */
.qr-scan .scan-line { display: none; }

/* Success: self-drawing check */
.draw-check .dc-circle { stroke: currentColor; stroke-width: 3; opacity: 0.25; }
.draw-check .dc-tick { stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

@media (prefers-reduced-motion: no-preference) {
  .pr-fill { animation: ringIn 1100ms 150ms var(--ease) both; }
  .qr-scan .scan-line {
    display: block; position: absolute; left: 10px; right: 10px; height: 3px; top: 14px; border-radius: 3px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #22d3ee, transparent); box-shadow: 0 0 14px 2px rgba(34, 211, 238, 0.55);
    animation: scan 2.4s ease-in-out infinite;
  }
  .draw-check .dc-circle { stroke-dasharray: 145; animation: dash 600ms var(--ease) both; }
  .draw-check .dc-tick { stroke-dasharray: 40; animation: dashTick 420ms 450ms var(--ease) both; }
  .finance-cell.hero .progress span { transform-origin: left; animation: fillIn 1100ms 200ms var(--ease) both; }
  .fleet-yard { animation: riseIn 520ms var(--ease) both; }
}
@keyframes ringIn { from { stroke-dasharray: 0 100; } }
@keyframes scan { 0%, 100% { top: 14px; } 50% { top: calc(100% - 17px); } }
@keyframes dash { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes dashTick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes fillIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Reduced motion: neutralise transitions & animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .sk { animation: none; }
}

/* ======================================================================
   Automations (n8n-style flows)
   ====================================================================== */
.switch-row { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; flex: none; }
.switch-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch input:disabled { cursor: not-allowed; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background .2s var(--ease, ease); }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .2s var(--ease, ease); }
.switch input:checked + .switch-track { background: var(--success-solid); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ring); }
.switch input:disabled + .switch-track { opacity: .5; }

.automation-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.automation-head .card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--success-soft); color: var(--success); }
.live-pill.is-off { background: var(--neutral-soft); color: var(--text-3); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success-solid); }
.automation-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }

.flow {
  display: flex; align-items: center; padding: 18px 14px; border-radius: var(--r-lg, 12px);
  background-color: var(--surface-2);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid var(--border); overflow-x: auto;
}
.flow-node {
  position: relative; display: flex; align-items: center; gap: 10px; flex: none; width: 176px; min-height: 64px;
  padding: 10px 12px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.flow-node:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.flow-node:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.flow-node.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.flow-node.is-trigger { border-radius: 22px 12px 12px 22px; }
.flow-node.is-warn { border-color: var(--warning-border); }
.flow-node.is-muted { opacity: .55; border-style: dashed; }
.flow-ic { flex: none; width: 32px; height: 32px; }
.flow-text { display: flex; flex-direction: column; min-width: 0; }
.flow-kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.flow-title { font-size: 13px; font-weight: 600; line-height: 1.25; }
.flow-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.flow-count {
  position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-sm);
}

.flow-link {
  position: relative; flex: 1 0 28px; height: 2px; min-width: 28px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 11px);
}
.is-on .flow-link { background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 11px); background-size: 11px 2px; }
.flow-link-fork { flex: 0 0 18px; min-width: 18px; }
.flow-tag {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 700; color: var(--text-3); background: var(--surface-2); padding: 0 4px; border-radius: 4px;
}
.flow-branches { position: relative; display: flex; flex-direction: column; gap: 18px; flex: none; }
/* Vertical bar joining the two outcome branches */
.flow-branches::before { content: ''; position: absolute; left: 0; top: 32px; bottom: 32px; width: 2px; background: var(--border-strong); }
.is-on .flow-branches::before { background: var(--primary); }
.flow-branch { display: flex; align-items: center; }
.flow-branch .flow-link { flex: 0 0 64px; }

.flow-detail { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--primary-soft); border: 1px solid var(--primary-soft-2); }
.flow-detail strong { color: var(--text); }

.is-off .flow-node:not(.is-trigger) { filter: saturate(.4); }

@media (prefers-reduced-motion: no-preference) {
  .is-on .flow-link { animation: flowX .9s linear infinite; }
  .is-on .live-dot { animation: livePulse 1.6s ease-in-out infinite; }
}
@keyframes flowX { to { background-position: 11px 0; } }
@keyframes flowY { to { background-position: 0 11px; } }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 147, 95, .5); } 50% { box-shadow: 0 0 0 4px rgba(18, 147, 95, 0); } }

/* Phone: the flow runs top to bottom, outcomes side by side */
@media (max-width: 760px) {
  .flow { flex-direction: column; align-items: stretch; padding: 14px; overflow: visible; }
  .flow-node { width: 100%; }
  .flow-link, .flow-link-fork { flex: 0 0 22px; min-width: 0; width: 2px; height: 22px; align-self: center;
    background: repeating-linear-gradient(180deg, var(--border-strong) 0 6px, transparent 6px 11px); }
  .is-on .flow-link { background: repeating-linear-gradient(180deg, var(--primary) 0 6px, transparent 6px 11px); background-size: 2px 11px; }
  .flow-branches { flex-direction: row; gap: 10px; }
  .flow-branches::before { left: 25%; right: 25%; top: 0; bottom: auto; width: auto; height: 2px; }
  .flow-branch { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; }
  .flow-branch .flow-link { flex: 0 0 30px; height: 30px; }
  .flow-tag { top: 50%; left: 8px; transform: translateY(-50%); }
  .flow-branch .flow-node { flex-direction: column; align-items: flex-start; gap: 6px; }
  .automation-head .switch-row { margin-left: auto; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .is-on .flow-link { animation-name: flowY; }
}

/* "New version ready" bar shown to open tabs after a deploy */
.update-bar {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 2000;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500;
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-lg);
}
.update-bar span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }