/*!
 * Dispatch Board
 * Copyright (c) 2026 Virtuoso Technologies Ltd. All rights reserved.
 *
 * Proprietary. Unauthorized copying, duplicating, modifying or
 * distributing this file, in whole or in part, by any means, without
 * written permission from Virtuoso Technologies Ltd. is prohibited and is
 * a violation of copyright law. See the LICENSE file.
 */
/* Dispatch Board — premium finish (10.41). Loaded after looks.css, so it is the last word on the board, the phone board
   (m.html) and the live page. It only adds: shared spacing/radius tokens, one focus ring, firmer numbers, calmer
   tables, lighter attention rows, tidier scrollbars and a few pressed/hover states. Colours always come from the tokens
   in app.css, so every look, accent and dark mode keeps working. Nothing here changes a font size an input is set to
   (phones keep 16px fields) or adds horizontal scroll. */

:root {
  /* Spacing, radius and elevation scales: new work uses these instead of loose pixel values. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  --ring-bad: 0 0 0 3px color-mix(in srgb, var(--status-critical) 24%, transparent);
  --lift-1: translateY(-1px);
}

/* ---------- Focus: one visible, consistent ring for keyboard users ---------- */
:where(a, button, [role="button"], [role="tab"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
:where(input, select, textarea):focus { outline: none; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  border-color: var(--accent); box-shadow: var(--ring);
}
.search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
:where(input, select, textarea)[aria-invalid="true"], .field.invalid :where(input, select, textarea) { border-color: var(--status-critical); }
:where(input, select, textarea)[aria-invalid="true"]:focus-visible { box-shadow: var(--ring-bad); }
::placeholder { color: var(--ink-faint); opacity: 1; }

/* ---------- Numbers: figures line up in columns and cards ---------- */
.kpi-card .kpi-value, .credit-kpi strong, table.loads td, .m-tile b, .lv-tile .v, .rate, .money, .num, .mono, time {
  font-variant-numeric: tabular-nums;
}

/* ---------- Cards: a quiet lift when they can be opened ---------- */
.kpi-card, .credit-kpi, .m-tile, .look-card, .map-card {
  transition: transform var(--dur, .22s) var(--ease-out, ease), box-shadow var(--dur, .22s) var(--ease-out, ease), border-color var(--dur-fast, .14s);
}
@media (hover: hover) {
  .kpi-card:hover, .credit-kpi:hover, .m-tile:hover { transform: var(--lift-1); box-shadow: var(--shadow-lift, var(--shadow)); border-color: var(--border-strong); }
}
.kpi-card .kpi-label, .credit-kpi span { letter-spacing: .01em; }

/* ---------- Buttons: pressed feedback, steadier disabled state, compact row actions ---------- */
.btn { transition: background-color var(--dur-fast, .14s), border-color var(--dur-fast, .14s), box-shadow var(--dur-fast, .14s), transform var(--dur-fast, .14s), filter var(--dur-fast, .14s); }
.btn.primary { font-weight: 650; letter-spacing: .005em; }
.btn.primary:not(:disabled):hover { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 3px var(--accent-soft); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; filter: saturate(.6); }
.alert-item .btn { padding: 4px 11px; font-size: var(--fs-sm); font-weight: 600; background: transparent; box-shadow: none; }
.alert-item .btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---------- Needs attention: calmer rows ---------- */
.attention { border-radius: var(--r-lg); }
.attention-head { padding: 12px 18px; }
.attention-head h3 { font-size: var(--fs-lg); }
.alert-item { padding: 10px 18px; transition: background-color var(--dur-fast, .14s); }
.alert-item:hover { background: var(--surface-2); }
.alert-bar { width: 3px; border-radius: var(--r-pill); margin: 2px 0; }
.alert-item .who { letter-spacing: -.005em; }

/* ---------- Tables: sticky header, row hover, tidy edges ---------- */
table.loads th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border-strong); backdrop-filter: saturate(1.2) blur(6px); }
table.loads tbody tr { transition: background-color var(--dur-fast, .14s); }
@media (hover: hover) { table.loads tbody tr:hover > td { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); } }
table.loads tbody tr.selected > td { background: var(--accent-soft); }
table.loads td { line-height: 1.4; }

/* ---------- Pills and chips: one shape, one height ---------- */
.status-pill, .count-pill, .conflict-pill, .lfd { line-height: 1.5; font-weight: 600; }
.chip-unassigned { box-shadow: 0 1px 0 rgba(0, 0, 0, .02); transition: border-color var(--dur-fast, .14s), box-shadow var(--dur-fast, .14s); }
.chip-unassigned:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

/* ---------- Tabs ---------- */
.tab { transition: color var(--dur-fast, .14s), background-color var(--dur-fast, .14s); }
.tab:not([aria-selected="true"]):hover { color: var(--ink); }

/* ---------- Panels and sheets: deeper shadow, softer scrim ---------- */
.drawer { box-shadow: var(--shadow-pop, -12px 0 32px -12px rgba(0, 0, 0, .35)); }
.toast { box-shadow: var(--shadow-pop); border-radius: var(--r-md); }
.login-card { border-radius: var(--r-lg); box-shadow: var(--shadow-pop, var(--shadow)); }

/* ---------- Empty states: a gentle container instead of bare italics ---------- */
.empty-hint { font-style: normal; }
.empty-card, .empty-state, .m-empty {
  border: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-muted);
  padding: var(--sp-5) var(--sp-4); text-align: center;
}

/* ---------- Scrollbars: thin, themed (Firefox + WebKit); touch devices keep their own ---------- */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; border: 2px solid transparent; }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Phone board: lighter navigation icons, firmer cards ---------- */
.m-nav { backdrop-filter: saturate(1.4) blur(10px); }
.m-nav button span { transition: filter var(--dur-fast, .14s), transform var(--dur, .22s) var(--ease-spring, ease); }
.m-nav button[aria-selected="false"] span, .m-nav button:not([aria-selected="true"]) span { filter: grayscale(1) opacity(.85); }
.m-nav button[aria-selected="true"] span { transform: translateY(-1px) scale(1.06); }
.m-tile { border-radius: var(--r-md); }
.m-tile small { letter-spacing: .02em; }

/* ---------- Motion: everything above is cut to instant when asked ---------- */
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .credit-kpi, .m-tile, .btn, .tab, .alert-item, table.loads tbody tr, .m-nav button span { transition: none !important; }
  .kpi-card:hover, .credit-kpi:hover, .m-tile:hover, .btn:active:not(:disabled), .m-nav button[aria-selected="true"] span { transform: none !important; }
}
@media print { table.loads th { position: static; backdrop-filter: none; } }

/* ---------- Fixes found in the 10.41 audit ---------- */
/* A status pill whose dot had no colour class showed an empty gap where the dot should be: the dot takes the pill's text colour. */
.status-pill .dot:not(.available):not(.transit):not(.risk):not(.offduty) { background: currentColor; }
/* Phone board: the version badge covered card buttons ("Change", "Assign"). Smaller, to the left, and see-through until touched. */
.m-page .version-badge { right: auto; left: 8px; padding: 2px 7px; font-size: 10px; opacity: .6; transition: opacity var(--dur-fast, .14s); }
.m-page .version-badge:hover, .m-page .version-badge:focus-visible { opacity: 1; }
/* Review fixes: pills keep a hairline edge so a dark-mode soft background still reads against the card; counts sit centred. */
.status-pill { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent); }
.count-pill { display: inline-flex; align-items: center; justify-content: center; line-height: 1.4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-nav button:not([aria-selected="true"]) span { filter: grayscale(1) brightness(1.5) opacity(.9); } }
:root[data-theme="dark"] .m-nav button:not([aria-selected="true"]) span { filter: grayscale(1) brightness(1.5) opacity(.9); }