/* ═══════════════════════════════════════════════════════════════════════
   APPROACH 1 — "Console"
   Design system: a dense, professional operations console.

   Tokens are RGB triplets so Tailwind can apply opacity to any of them
   (bg-surface/60, border-line/40 …) and so light and dark are one swap.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Neutrals — a cool slate ramp. */
  --canvas: 246 247 250;        /* page background            */
  --surface: 255 255 255;       /* cards, tables, menus       */
  --surface-2: 249 250 252;     /* table headers, inset rows  */
  --surface-3: 243 244 248;     /* hover, selected rows       */
  --line: 226 229 236;          /* default border             */
  --line-strong: 208 213 224;   /* dividers that must show    */
  --ink: 16 20 32;              /* primary text               */
  --ink-2: 71 80 99;            /* secondary text             */
  --ink-3: 121 131 152;         /* muted / captions           */

  /* Brand + status. Each has a solid tone and a low-alpha wash. */
  --primary: 79 70 229;
  --primary-ink: 255 255 255;
  --primary-soft: 238 238 255;
  --success: 5 150 105;
  --success-soft: 224 246 238;
  --warning: 180 116 6;
  --warning-soft: 253 243 219;
  --danger: 208 46 46;
  --danger-soft: 253 232 232;
  --info: 2 116 189;
  --info-soft: 224 240 252;
  --neutral-soft: 240 242 246;

  /* Division colours — carried over from the production app so the
     client recognises them. */
  --div-fleet: 22 163 74;
  --div-logistics: 37 99 235;
  --div-warehouse: 202 138 4;
  --div-freight: 220 38 38;

  --ring: 79 70 229;
  --shadow-sm: 0 1px 2px rgb(16 20 32 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(16 20 32 / 0.10), 0 2px 4px -2px rgb(16 20 32 / 0.06);
  --shadow-lg: 0 16px 40px -8px rgb(16 20 32 / 0.18), 0 4px 12px -4px rgb(16 20 32 / 0.08);
}

.dark {
  --canvas: 10 12 17;
  --surface: 20 23 31;
  --surface-2: 26 30 40;
  --surface-3: 33 38 50;
  --line: 39 44 57;
  --line-strong: 55 62 78;
  --ink: 232 235 242;
  --ink-2: 165 174 192;
  --ink-3: 128 138 158;

  --primary: 129 122 255;
  --primary-ink: 12 14 20;
  --primary-soft: 33 33 66;
  --success: 52 199 148;
  --success-soft: 12 47 39;
  --warning: 235 179 60;
  --warning-soft: 56 42 12;
  --danger: 248 113 113;
  --danger-soft: 61 22 22;
  --info: 96 175 245;
  --info-soft: 12 40 62;
  --neutral-soft: 32 37 48;

  --div-fleet: 74 222 128;
  --div-logistics: 96 165 250;
  --div-warehouse: 250 204 21;
  --div-freight: 248 113 113;

  --ring: 129 122 255;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
}

/* ── base ─────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  background: rgb(var(--canvas));
  color: rgb(var(--ink));
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

/* Type scale. Deliberately tight: this interface is read, not browsed. */
.t-display { font-size: 1.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; }
.t-title   { font-size: 1.125rem; line-height: 1.3; font-weight: 620; letter-spacing: -0.01em; }
.t-section { font-size: 0.875rem; line-height: 1.4; font-weight: 620; }
.t-body    { font-size: 0.875rem; line-height: 1.5; }
.t-small   { font-size: 0.8125rem; line-height: 1.45; }
.t-micro   { font-size: 0.75rem; line-height: 1.4; }
.t-over    { font-size: 0.6875rem; line-height: 1.3; font-weight: 620; letter-spacing: 0.07em; text-transform: uppercase; }
.t-num     { font-variant-numeric: tabular-nums; }

/* ── focus: one visible treatment everywhere ─────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--ring));
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  background: rgb(var(--primary)); color: rgb(var(--primary-ink));
  padding: 0.5rem 0.875rem; border-radius: 6px; font-weight: 600; font-size: 0.8125rem;
  transition: top 120ms ease;
}
.skip-link:focus { top: 0.5rem; }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  height: 2.125rem; padding: 0 0.75rem; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 560; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn-primary { background: rgb(var(--primary)); color: rgb(var(--primary-ink)); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--primary) / 0.9); }

.btn-default { background: rgb(var(--surface)); color: rgb(var(--ink)); border-color: rgb(var(--line-strong)); box-shadow: var(--shadow-sm); }
.btn-default:hover:not(:disabled) { background: rgb(var(--surface-3)); }

.btn-ghost { background: transparent; color: rgb(var(--ink-2)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--surface-3)); color: rgb(var(--ink)); }

.btn-danger { background: rgb(var(--danger)); color: #fff; }
.btn-danger:hover:not(:disabled) { background: rgb(var(--danger) / 0.88); }

.btn-sm { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; border-radius: 5px; }
.btn-icon { width: 2.125rem; padding: 0; }
.btn-icon.btn-sm { width: 1.75rem; }

/* ── form controls ────────────────────────────────────────────────── */
.field-label {
  display: block; font-size: 0.75rem; font-weight: 600; color: rgb(var(--ink-2));
  margin-bottom: 0.25rem;
}
.field-label .req { color: rgb(var(--danger)); margin-left: 2px; }
.field-hint { font-size: 0.75rem; color: rgb(var(--ink-3)); margin-top: 0.25rem; }
.field-error {
  font-size: 0.75rem; color: rgb(var(--danger)); margin-top: 0.25rem;
  display: flex; align-items: flex-start; gap: 0.25rem; font-weight: 500;
}

.input, .select, .textarea {
  width: 100%; background: rgb(var(--surface)); color: rgb(var(--ink));
  border: 1px solid rgb(var(--line-strong)); border-radius: 6px;
  font-size: 0.8125rem; padding: 0 0.5rem; height: 2.125rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.textarea { height: auto; padding: 0.4375rem 0.5rem; line-height: 1.5; resize: vertical; }
.select {
  appearance: none; padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23798398' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 14px;
}
.input::placeholder, .textarea::placeholder { color: rgb(var(--ink-3)); }
.input:hover, .select:hover, .textarea:hover { border-color: rgb(var(--ink-3) / 0.7); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / 0.16);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: rgb(var(--surface-3)); color: rgb(var(--ink-3)); cursor: not-allowed;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: rgb(var(--danger));
}
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--danger) / 0.16); }

.check {
  appearance: none; width: 1rem; height: 1rem; flex: none;
  border: 1.5px solid rgb(var(--line-strong)); border-radius: 4px;
  background: rgb(var(--surface)); cursor: pointer; position: relative;
  transition: background-color 100ms ease, border-color 100ms ease;
}
.check[type="radio"] { border-radius: 50%; }
.check:checked { background: rgb(var(--primary)); border-color: rgb(var(--primary)); }
.check:checked::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}
.check[type="radio"]:checked::after {
  background: none; border-radius: 50%; inset: 3px; background-color: #fff;
}
.check:disabled { opacity: 0.5; cursor: not-allowed; }

.switch {
  appearance: none; width: 2rem; height: 1.125rem; border-radius: 999px;
  background: rgb(var(--line-strong)); position: relative; cursor: pointer; flex: none;
  transition: background-color 140ms ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 0.875rem; height: 0.875rem;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 140ms ease;
}
.switch:checked { background: rgb(var(--primary)); }
.switch:checked::after { transform: translateX(0.875rem); }

/* ── surfaces ─────────────────────────────────────────────────────── */
.card {
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
  border-radius: 10px; box-shadow: var(--shadow-sm);
}
.card-pad { padding: 1rem; }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid rgb(var(--line));
}

/* ── badges: always icon-or-dot + text, never colour alone ────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.0625rem 0.4375rem; border-radius: 5px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge-neutral { background: rgb(var(--neutral-soft)); color: rgb(var(--ink-2)); border-color: rgb(var(--line)); }
.badge-primary { background: rgb(var(--primary-soft)); color: rgb(var(--primary)); border-color: rgb(var(--primary) / 0.25); }
.badge-success { background: rgb(var(--success-soft)); color: rgb(var(--success)); border-color: rgb(var(--success) / 0.25); }
.badge-warning { background: rgb(var(--warning-soft)); color: rgb(var(--warning)); border-color: rgb(var(--warning) / 0.28); }
.badge-danger  { background: rgb(var(--danger-soft)); color: rgb(var(--danger)); border-color: rgb(var(--danger) / 0.25); }
.badge-info    { background: rgb(var(--info-soft)); color: rgb(var(--info)); border-color: rgb(var(--info) / 0.25); }

/* ── tables ───────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgb(var(--surface-2)); color: rgb(var(--ink-3));
  font-size: 0.6875rem; font-weight: 620; letter-spacing: 0.05em; text-transform: uppercase;
  text-align: left; padding: 0.5rem 0.75rem; white-space: nowrap;
  border-bottom: 1px solid rgb(var(--line));
}
.tbl thead th.num, .tbl tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(var(--line)); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover { background: rgb(var(--surface-3)); }
.tbl tbody tr[aria-selected="true"] { background: rgb(var(--primary-soft)); }
.tbl-sort {
  display: inline-flex; align-items: center; gap: 0.25rem; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; background: none; border: 0; padding: 0;
}
.tbl-sort:hover { color: rgb(var(--ink)); }
.tbl-sort .arrow { opacity: 0; transition: opacity 100ms ease; }
.tbl-sort[aria-sort="ascending"] .arrow, .tbl-sort[aria-sort="descending"] .arrow { opacity: 1; }
.tbl-sort[aria-sort="descending"] .arrow { transform: rotate(180deg); }

.table-wrap { overflow: auto; max-height: min(70vh, 46rem); }
.table-wrap:focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: -2px; }

/* ── filter chips ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  height: 1.75rem; padding: 0 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 560; cursor: pointer;
  border: 1px solid rgb(var(--line-strong)); background: rgb(var(--surface)); color: rgb(var(--ink-2));
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chip:hover { border-color: rgb(var(--ink-3)); color: rgb(var(--ink)); }
.chip[aria-pressed="true"] {
  background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: rgb(var(--primary-ink));
}
.chip .count {
  font-variant-numeric: tabular-nums; font-size: 0.6875rem;
  background: rgb(var(--neutral-soft)); color: rgb(var(--ink-2));
  border-radius: 999px; padding: 0 0.3125rem; min-width: 1.125rem; text-align: center;
}
.chip[aria-pressed="true"] .count { background: rgb(255 255 255 / 0.22); color: inherit; }

/* ── tabs ─────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0.125rem; border-bottom: 1px solid rgb(var(--line)); overflow-x: auto; }
.tab {
  position: relative; padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 560;
  color: rgb(var(--ink-3)); white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.tab:hover { color: rgb(var(--ink)); }
.tab[aria-selected="true"] { color: rgb(var(--ink)); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px;
  background: rgb(var(--primary)); border-radius: 2px 2px 0 0;
}

/* ── navigation ───────────────────────────────────────────────────── */
.nav-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 520; color: rgb(var(--ink-2));
  transition: background-color 120ms ease, color 120ms ease;
}
.nav-link:hover { background: rgb(var(--surface-3)); color: rgb(var(--ink)); }
.nav-link[aria-current="page"] {
  background: rgb(var(--primary-soft)); color: rgb(var(--primary)); font-weight: 600;
}
.nav-link svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.nav-link .pill {
  margin-left: auto; font-size: 0.6875rem; font-variant-numeric: tabular-nums; font-weight: 600;
  background: rgb(var(--neutral-soft)); color: rgb(var(--ink-2));
  border-radius: 999px; padding: 0 0.375rem; min-width: 1.125rem; text-align: center;
}
.nav-link .pill.alert { background: rgb(var(--warning-soft)); color: rgb(var(--warning)); }

/* ── alerts ───────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: 0.625rem; padding: 0.6875rem 0.875rem;
  border-radius: 8px; border: 1px solid; font-size: 0.8125rem;
}
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert-info { background: rgb(var(--info-soft)); border-color: rgb(var(--info) / 0.3); color: rgb(var(--info)); }
.alert-success { background: rgb(var(--success-soft)); border-color: rgb(var(--success) / 0.3); color: rgb(var(--success)); }
.alert-warning { background: rgb(var(--warning-soft)); border-color: rgb(var(--warning) / 0.32); color: rgb(var(--warning)); }
.alert-danger { background: rgb(var(--danger-soft)); border-color: rgb(var(--danger) / 0.3); color: rgb(var(--danger)); }
.alert strong { color: inherit; }
.alert p { color: rgb(var(--ink-2)); }
.alert-info p, .alert-success p, .alert-warning p, .alert-danger p { color: rgb(var(--ink-2)); }

/* ── skeleton loading ─────────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, rgb(var(--surface-3)) 25%, rgb(var(--line)) 37%, rgb(var(--surface-3)) 63%);
  background-size: 400% 100%; border-radius: 5px; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ── dialogs ──────────────────────────────────────────────────────── */
dialog::backdrop { background: rgb(9 11 16 / 0.55); backdrop-filter: blur(2px); }
dialog[open] {
  border: 1px solid rgb(var(--line)); border-radius: 12px; padding: 0;
  background: rgb(var(--surface)); color: rgb(var(--ink));
  box-shadow: var(--shadow-lg); max-width: min(94vw, 34rem); width: 100%;
}
dialog.wide[open] { max-width: min(94vw, 52rem); }

/* ── toasts ───────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column; gap: 0.5rem; width: min(22rem, calc(100vw - 2rem));
}
.toast {
  display: flex; gap: 0.625rem; align-items: flex-start;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
  border-left: 3px solid rgb(var(--success));
  border-radius: 8px; padding: 0.625rem 0.75rem; box-shadow: var(--shadow-lg);
  animation: toast-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.toast.err { border-left-color: rgb(var(--danger)); }
.toast.info { border-left-color: rgb(var(--info)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── misc ─────────────────────────────────────────────────────────── */
.divide-line > * + * { border-top: 1px solid rgb(var(--line)); }
.scroll-x { overflow-x: auto; scrollbar-width: thin; }
.tnum { font-variant-numeric: tabular-nums; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kbd {
  font: 600 0.6875rem/1 ui-monospace, SFMono-Regular, monospace;
  border: 1px solid rgb(var(--line-strong)); border-bottom-width: 2px;
  border-radius: 4px; padding: 0.1875rem 0.3125rem; color: rgb(var(--ink-3));
  background: rgb(var(--surface-2));
}
.bar { height: 6px; border-radius: 999px; background: rgb(var(--neutral-soft)); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}