/* Hallmark · genre: custom (technical/control-room) · design-system: design.md · designed-as-app
 * v2 — Instrument Panel component voice. Dark paper, JetBrains Mono display + data,
 * Geist body, cold cyan-blue accent. Color reserved for signal.
 * Tokens: see tokens.css (imported separately, loaded before this file).
 * Pre-emit critique: P5 H5 E4 S5 R5 V5 — (diversification inverted, app-scope, N/A)
 * Unverified: no live browser pass performed yet in this session — see CLAUDE.md
 * "Testing" section. Visual review pending (demo mode, dotnet run).
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* Blazor's enhanced-navigation focus lands on the page's first <h1>
   (tabindex="-1", for screen readers) — without this the browser's
   default black focus outline draws around it on every page load. */
h1:focus { outline: none; }

/* ── App Shell ──────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

/* ── Icon rail (replaces the labeled sidebar) ──────────────
   56px wide, icon-only, tooltip on hover/focus. This is not a
   "collapsed" state — it's the only state. See design.md § shell. */
.rail {
    width: var(--sidebar-w);
    background: var(--color-rail);
    border-right: 1px solid var(--color-rule-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
}

.rail-brand {
    height: var(--topbar-h);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-rule-2);
    flex-shrink: 0;
    text-decoration: none;
}

.rail-logo {
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    color: var(--color-accent-ink);
}

/* No overflow-y here on purpose: setting only overflow-y forces overflow-x
   to auto-compute too (per the CSS overflow spec), which turns the rail-tip
   tooltip below — deliberately positioned past the rail's 64px width — into
   horizontally-scrollable content, even while invisible. The nav item count
   is small and bounded, so it always fits without needing to scroll. */
.rail-nav { flex: 1; padding: var(--space-sm) 0; width: 100%; }

.rail-list { list-style: none; padding: 0 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; }

.rail-item {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: oklch(from var(--color-rail-ink) l c h / 0.75);
    text-decoration: none;
    font-size: .9375rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.rail-item:hover { background: var(--color-paper-2); color: var(--color-ink); }
.rail-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

.rail-item.active { background: oklch(from var(--color-accent) l c h / 0.18); color: var(--color-accent); }

.rail-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 3px;
    background: var(--color-accent);
    border-radius: 0 3px 3px 0;
}

/* Tooltip — instant, no delay (rail-tip is load-bearing: no visible label otherwise) */
.rail-tip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    color: var(--color-ink);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .3rem .625rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 250;
}

.rail-item:hover .rail-tip,
.rail-item:focus-visible .rail-tip { opacity: 1; visibility: visible; }

.rail-footer {
    padding: var(--space-xs) 0;
    border-top: 1px solid var(--color-rule-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
}

.rail-company {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    color: var(--color-ink-3);
}

/* ── Main Content ───────────────────────────────────────── */
.shell-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ── Console header (replaces the frosted-glass topbar) ────
   Flat fill, single hairline, no blur — an instrument's header
   bar, not marketing chrome. */
.console-header {
    height: var(--topbar-h);
    background: var(--color-paper-2);
    border-bottom: 1px solid var(--color-rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    position: sticky;
    top: 0;
    z-index: 100;
}

.console-left { display: flex; align-items: center; gap: var(--space-2xs); }
.console-right { display: flex; align-items: center; gap: var(--space-2xs); }

.console-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink-2);
}

/* ── Unit toggle (°F/°C) ────────────────────────────────── */
.unit-toggle {
    height: 34px;
    padding: 0 .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-rule);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 700;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.unit-toggle:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.unit-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* ── Theme toggle ───────────────────────────────────────── */
.theme-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-rule);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    cursor: pointer;
    font-size: .875rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* ── User Pill ──────────────────────────────────────────── */
.console-user {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    padding: .3125rem .5rem .3125rem .3125rem;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.console-user:hover { border-color: oklch(from var(--color-accent) l c h / 0.4); }

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--font-display);
    flex-shrink: 0;
}

.user-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.2;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    font-size: .625rem;
    color: var(--color-ink-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.btn-logout {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--color-ink-3);
    cursor: pointer;
    font-size: .75rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    margin-left: .125rem;
    flex-shrink: 0;
}

.btn-logout:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.btn-logout:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* ── Page Body ──────────────────────────────────────────── */
.page-body { padding: var(--space-md); flex: 1; }

/* ── Page Header ────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.header-controls { flex-wrap: wrap; row-gap: var(--space-2xs); }

.dashboard-search { max-width: 320px; margin-top: var(--space-2xs); }

.page-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
}

/* ── View toggle (cards / list) ────────────────────────────
   New in v2 — see design.md § shell. */
.view-toggle {
    display: flex;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper-2);
    border: none;
    color: var(--color-ink-3);
    cursor: pointer;
    font-size: .875rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--color-rule); }
.view-toggle-btn:hover { background: var(--color-paper-3); color: var(--color-ink); }
.view-toggle-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.view-toggle-btn.active { background: var(--color-accent-soft); color: var(--color-accent); }

/* ── Fleet Map view (Leaflet) ──────────────────────────────
   Combined In Transit + Received map, replacing both list
   sections when the third view-toggle button is active. */
.map-view-wrap { position: relative; margin-bottom: var(--space-md); }

.map-container {
    height: 560px;
    border-radius: var(--radius);
    border: 1px solid var(--color-rule);
    background: var(--color-paper-2);
    overflow: hidden;
}

.map-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-paper-2);
    border-radius: var(--radius);
    border: 1px solid var(--color-rule);
    text-align: center;
    padding: var(--space-md);
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.map-legend-item { display: flex; align-items: center; font-size: .8125rem; color: var(--color-ink-3); }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: .4rem; border: 1px solid var(--color-rule); }

.clr-transit  { background: var(--color-accent); }
.clr-alert    { background: var(--color-danger); }
.clr-received { background: var(--color-success); }

.trakx-marker-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-paper);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* Fixed dark chrome instead of theme tokens -- the OSM tiles underneath are
   always light, regardless of app theme, so a light-theme paper background
   here would wash out against the map (reported: labels "almost disappear
   into the map" in light mode). */
.trakx-marker-label {
    background: rgba(17, 22, 33, .94) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 700;
    padding: .25rem .6rem !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.trakx-marker-label::before { border-top-color: rgba(17, 22, 33, .94) !important; }

.trakx-marker-popup .leaflet-popup-content-wrapper {
    background: var(--color-paper-2);
    color: var(--color-ink);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.trakx-marker-popup .leaflet-popup-content { margin: .65rem .85rem; }
.trakx-marker-popup .leaflet-popup-tip { background: var(--color-paper-2); box-shadow: none; }

.trakx-popup-title { font-family: var(--font-mono); font-weight: 700; font-size: .875rem; color: var(--color-ink); margin-bottom: .4rem; }
.trakx-popup-sep { color: var(--color-ink-3); }
.trakx-popup-row { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--color-ink-2); padding: .15rem 0; }
.trakx-popup-row i { width: 14px; color: var(--color-ink-3); }
.trakx-popup-delay, .trakx-popup-delay i { color: var(--color-warning-ink); }

/* ── Status strip (replaces the icon-tile stat cards) ──────
   One hairline-divided row of mono figures — a readout, not a
   grid of colored-icon boxes. See design.md § shell. */
.stats-row {
    display: flex;
    align-items: stretch;
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
    overflow: hidden;
    flex-wrap: wrap;
}

.stat-card {
    background: none;
    border: none;
    border-right: 1px solid var(--color-rule-2);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    min-width: 150px;
    position: relative;
    transition: background var(--dur-short) var(--ease-out);
}

.stat-card:hover { background: var(--color-paper-3); }
.stat-card:last-of-type { border-right: none; }

.stat-card-variety {
    flex-basis: 100%;
    border-right: none;
    border-top: 1px solid var(--color-rule-2);
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-sm);
    overflow: visible;
}

.variety-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    flex: 1;
    align-items: center;
}

.variety-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    padding: .25rem .75rem;
    font-size: .8125rem;
    white-space: nowrap;
    cursor: default;
}

.variety-chip-name { color: var(--color-ink-3); font-weight: 500; }
.variety-chip-qty  { color: var(--color-ink); font-weight: 700; font-family: var(--font-mono); }

/* CSS hover tooltip */
.variety-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    max-width: 90vw;
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    overflow: hidden;
    padding: var(--space-xs);
    transition: opacity var(--dur-fast) linear;
}

.variety-chip:hover .variety-tooltip,
.variety-chip:focus-within .variety-tooltip { visibility: visible; opacity: 1; }

.variety-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-paper-3);
}

.vt-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.vt-table thead tr { border-bottom: 1px solid var(--color-rule); }
.vt-table th { color: var(--color-ink-3); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 .5rem .5rem; white-space: nowrap; }
.vt-table td { color: var(--color-ink-2); padding: .35rem .5rem; border-bottom: 1px solid var(--color-rule-2); white-space: nowrap; }
.vt-table tr:last-child td { border-bottom: none; }
.vt-table tr:nth-child(even) td { background: var(--color-paper); }
.vt-muted { color: var(--color-ink-3) !important; font-size: .75rem; }
.vt-qty   { color: var(--color-warning); font-weight: 700; font-family: var(--font-mono); }
.vt-eta   { color: var(--color-accent); font-weight: 600; font-family: var(--font-mono); }

.stat-icon { display: none; } /* icons dropped from the status strip — see design.md § shell */

.text-purple { color: var(--color-accent); }
.text-teal   { color: var(--color-success); }

.stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
    letter-spacing: 0;
    font-family: var(--font-mono);
}

.stat-label {
    font-size: .6563rem;
    color: var(--color-ink-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: .125rem;
}

/* ── Section row (section pill + view toggle, same line) ─── */
.section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.section-row .section-header { margin-bottom: 0; }

.history-count {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Section Headers ────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: .5rem .875rem;
    border-radius: var(--radius-pill);
    font-size: .6875rem;
    font-weight: 700;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--space-xs);
    width: fit-content;
}

.section-count {
    margin-left: .25rem;
    background: oklch(0% 0 0 / 0.25);
    border-radius: var(--radius-pill);
    padding: .1rem .5rem;
    font-size: .625rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.section-transit {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid oklch(from var(--color-accent) l c h / 0.3);
}

.section-received {
    background: var(--color-success-soft);
    color: var(--color-success-ink);
    border: 1px solid oklch(from var(--color-success) l c h / 0.3);
}

/* ── Shipments grid (card view + History's compact list) ─── */
.shipments-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    align-items: start;
}

.shipment-item {
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--dur-short) var(--ease-out);
}

.shipment-item:hover { border-color: var(--color-ink-3); }

.shipment-transit  { border-left: 3px solid var(--color-accent); }
.shipment-received { border-left: 3px solid var(--color-success); }

.shipment-toggle {
    width: 100%;
    background: none;
    border: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    text-align: left;
    color: var(--color-ink);
    transition: background var(--dur-fast) var(--ease-out);
}

.shipment-toggle:hover { background: var(--color-paper-3); }
.shipment-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.shipment-main { min-width: 0; }

.shipment-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .375rem;
}

.truck-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: 0;
    font-family: var(--font-mono);
}

.manifest-number {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-ink-2);
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    padding: .1rem .5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
}

.divider { color: var(--color-rule); }

.icon-btn {
    color: var(--color-ink-3);
    text-decoration: none;
    font-size: .875rem;
    padding: .125rem .25rem;
    transition: color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover { color: var(--color-accent); }

.badge-icon {
    position: relative;
    display: inline-flex;
    color: var(--color-ink-2);
    font-size: .875rem;
}

.count-badge {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--color-danger);
    color: var(--color-danger-ink);
    font-size: .5625rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 0 4px;
    min-width: 15px;
    text-align: center;
    line-height: 15px;
    font-family: var(--font-mono);
}

.shipment-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    font-size: .875rem;
    color: var(--color-ink-2);
    margin-bottom: .25rem;
}

.shipment-location { font-size: .8125rem; color: var(--color-ink-3); }

.location-link { color: var(--color-accent); text-decoration: none; }
.location-link:hover { text-decoration: underline; }
.location-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .625rem;
    border-radius: var(--radius-pill);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.status-received { background: var(--color-success-soft); color: var(--color-success-ink); }
.status-transit  { background: var(--color-accent-soft); color: var(--color-accent); }
.status-warning  { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.status-muted    { background: var(--color-paper-3); color: var(--color-ink-3); border: 1px solid var(--color-rule); }

/* Temp stats */
.temp-stats { display: flex; flex-direction: column; gap: .25rem; text-align: right; font-family: var(--font-mono); }

.temp-stat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 500;
}

/* Progress bar — flat fill, no gradient. Color IS the signal. */
.shipment-progress { padding: 0 var(--space-md) .875rem; }

.progress {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-rule);
    overflow: hidden;
}

.progress-bar {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: width var(--dur-med) var(--ease-out);
}

.progress-bar.bg-success { background: var(--color-success) !important; }

.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .375rem;
    font-size: .625rem;
    color: var(--color-ink-3);
    font-weight: 600;
    letter-spacing: .02em;
}

/* Metric group */
.metric-group  { text-align: right; }
.metric-label  { font-size: .625rem; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.metric-value  { font-size: .9375rem; font-weight: 600; font-family: var(--font-mono); }

/* ── List view rows (ShipmentListRow.razor) ─────────────────
   New in v2 — the "instrument panel" primary view. Reuses the
   same left-edge status-bar language as the card, one dense
   row per shipment, everything tabular mono. */
.lr-table {
    display: flex;
    flex-direction: column;
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.lr-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: .625rem var(--space-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
    border-bottom: 1px solid var(--color-rule-2);
}

.lr-table .lr-row:last-child { border-bottom: none; }
.lr-row:hover { background: var(--color-paper-3); }

.lr-transit  { border-left: 3px solid var(--color-accent); }
.lr-received { border-left: 3px solid var(--color-success); }

.lr-status { flex-shrink: 0; width: 16px; text-align: center; font-size: .8125rem; }
.lr-transit .lr-status  { color: var(--color-accent); }
.lr-received .lr-status { color: var(--color-success); }

.lr-ids {
    flex: 0 0 220px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-mono);
}

.lr-truck { font-weight: 700; color: var(--color-ink); font-size: 1.125rem; }
.lr-manifest {
    font-size: .75rem;
    color: var(--color-ink-2);
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    padding: 0 .375rem;
    border-radius: var(--radius-sm);
}

.lr-badge {
    font-size: .6875rem;
    color: var(--color-ink-3);
    background: oklch(0% 0 0 / 0.2);
    border-radius: 5px;
    padding: .05rem .3rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.lr-cell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}

.lr-cell-time { flex: 0 0 190px; }
.lr-cell-loc  { flex: 1 1 160px; }
/* flex-shrink 1, not 0: on a narrow row this cell must be able to give up
   width, or it stays rigidly 300px and overflows the row on its own even
   when nothing else is competing for space. min-width:0 downstream (on the
   grid/chips) is what lets it actually shrink instead of just clipping. */
.lr-cell-temp { flex: 0 1 300px; min-width: 0; }
.lr-cell-delay { flex: 0 0 110px; }

/* ETA / received time — the other headline figure on the row, sized up to
   match the truck number. */
.lr-cell-time .lr-val { font-size: 1rem; font-weight: 700; color: var(--color-ink); }

/* Four-chip temperature readout (Now/Last · Max · Avg · Min) — reuses the
   same .sc-tchip chips as the card view, sized up further since this is a
   dense list row and the numbers are the thing an operator scans for. */
.lr-temp-grid { width: 100%; gap: .3rem; }
.lr-temp-grid .sc-tchip { padding: .3rem .15rem; }
.lr-temp-grid .sc-tchip-val { font-size: .9375rem; }

.lr-lbl {
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-ink-3);
}

.lr-val {
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lr-link { color: var(--color-ink-2); text-decoration: none; }
.lr-link:hover { color: var(--color-accent); text-decoration: underline; }

.lr-temp-none { color: var(--color-danger); white-space: nowrap; }

.lr-delay { color: var(--color-warning-ink); display: flex; align-items: center; gap: .25rem; }

.lr-acts { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }

.lr-act-btn {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-ink-2);
    background: oklch(0% 0 0 / 0.2);
    text-decoration: none;
    font-size: .75rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lr-act-btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.lr-act-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

.lr-expand-icon { font-size: .625rem; color: var(--color-ink-3); }

/* ── ShipmentCard v2 — instrument readout ───────────────────
   Colored icon-tile banner removed; mono IDs carry the header. */
.sc-card {
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.sc-transit  { border-left: 4px solid var(--color-accent); }
.sc-received { border-left: 4px solid var(--color-success); }

.sc-transit:hover  { box-shadow: var(--shadow-md); border-color: oklch(from var(--color-accent) l c h / 0.4); }
.sc-received:hover { box-shadow: var(--shadow-md); border-color: oklch(from var(--color-success) l c h / 0.4); }

.sc-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: .75rem var(--space-md);
    border-bottom: 1px solid var(--color-rule-2);
}

.sc-status-icon { font-size: .8125rem; flex-shrink: 0; }
.sc-transit  .sc-status-icon { color: var(--color-accent); }
.sc-received .sc-status-icon { color: var(--color-success); }

/* Modal header keeps the icon-tile treatment — one-off chrome, not a repeated grid element */
.sc-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9375rem;
    flex-shrink: 0;
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    color: var(--color-ink-2);
}

.sc-ids {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    min-width: 0;
    font-family: var(--font-mono);
}

.sc-truck    { font-size: .9375rem; font-weight: 700; color: var(--color-ink); letter-spacing: 0; }
.sc-sep      { color: var(--color-ink-3); }
.sc-manifest { font-size: .8125rem; font-weight: 600; color: var(--color-ink-2); }

.sc-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-ink-3);
    font-size: .8125rem;
    padding: .2rem .4rem;
    background: oklch(0% 0 0 / 0.2);
    border-radius: 6px;
}

.sc-dot-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: var(--color-danger);
    color: var(--color-danger-ink);
    font-size: .5rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 0 3px;
    min-width: 14px;
    text-align: center;
    line-height: 14px;
    font-family: var(--font-mono);
}

.sc-acts { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }

.sc-act-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-ink-2);
    background: oklch(0% 0 0 / 0.2);
    text-decoration: none;
    font-size: .8125rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sc-act-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.sc-transit  .sc-act-btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.sc-received .sc-act-btn:hover { background: var(--color-success); color: var(--color-success-ink); }

.sc-expand-icon {
    font-size: .6875rem;
    color: var(--color-ink-3);
    margin-left: .125rem;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.sc-card:hover .sc-expand-icon { color: var(--color-accent); }

/* ── Detail modal ── */
.sc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.65);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.sc-modal {
    background: var(--color-paper-2);
    border-radius: var(--radius);
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--color-accent);
}

.sc-modal-received { border-top-color: var(--color-success); }
.sc-modal-transit  { border-top-color: var(--color-accent); }

.sc-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-rule);
    flex-shrink: 0;
}

.sc-modal-title    { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.sc-modal-subtitle { font-family: var(--font-mono); font-size: .875rem; font-weight: 600; color: var(--color-ink-2); }
.sc-modal-where    { font-size: .75rem; color: var(--color-ink-3); margin-top: .15rem; }

.sc-modal-body {
    padding: var(--space-sm) var(--space-md);
    overflow-y: auto;
    flex: 1;
}

/* ── Info body ── */
.sc-body {
    display: grid;
    padding: 1.1rem var(--space-md) var(--space-sm);
    gap: .75rem 0;
}

.sc-grid-transit { grid-template-columns: 1fr 1fr; }
.sc-grid-2       { grid-template-columns: 1fr 1.5fr; }

.sc-metric-full {
    grid-column: 1 / -1;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: .75rem;
    border-left: none !important;
    border-top: 1px solid var(--color-rule-2);
}

.sc-metric {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: 0 1rem;
}

.sc-metric:first-child { padding-left: 0; }
.sc-metric:last-child  { padding-right: 0; }
.sc-metric + .sc-metric { border-left: 1px solid var(--color-rule-2); }

.sc-metric-ico {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    color: var(--color-ink-2);
    flex-shrink: 0;
    margin-top: .1rem;
}

.sc-metric-ico-success {
    background: var(--color-success-soft);
    border-color: oklch(from var(--color-success) l c h / 0.3);
    color: var(--color-success-ink);
}

.sc-metric-content { flex: 1; min-width: 0; }

.sc-mlbl {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-ink-3);
    margin-bottom: .25rem;
}

.sc-mval { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--color-ink-2); line-height: 1.3; }

.sc-eta-val {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: var(--color-accent) !important;
    line-height: 1.2;
    font-family: var(--font-mono);
}

.sc-delay { font-size: .7375rem; color: var(--color-warning-ink); margin-top: .2rem; display: flex; align-items: center; gap: .25rem; font-family: var(--font-mono); }
.sc-arr   { font-size: .7375rem; color: var(--color-ink-3); margin-top: .125rem; font-family: var(--font-mono); }

.sc-loc-link { color: var(--color-ink-2); text-decoration: none; }
.sc-loc-link:hover { color: var(--color-accent); text-decoration: underline; }
.sc-loc-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

.sc-loc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Temperature chips — the core anomaly-detection surface — one equal-width
   grid so NOW/LAST sits at the same visual weight as MAX/AVG/MIN. */
/* Flex, not grid: a grid item's margin doesn't widen the gap between grid
   tracks (the track size is fixed independent of the item's own margin), so
   it couldn't separate the "current" chip from the rest. Flex items with
   flex:1 1 0 give the same equal-width distribution grid did, but margin on
   a flex item genuinely pushes its siblings — which is what the extra
   margin-right below on :first-child relies on. */
.sc-chip-grid { display: flex; gap: .375rem; margin-top: .125rem; }
.sc-chip-grid > .sc-tchip { flex: 1 1 0; min-width: 0; }

/* Now/Last is the live reading; Max/Avg/Min are history — separate it a
   little further so it doesn't read as a 4th peer in the same row, and
   fuse Max/Avg/Min into one segmented bar (below) so the live reading is
   visibly the odd one out, not just a 4th chip in a row of equals. */
.sc-chip-grid > .sc-tchip:first-child { margin-right: .625rem; }

/* One shared surface for the whole bar, not per-chip fills — a single
   background + outer border reads as one instrument readout instead of
   three chips lined up. Dividers are hairlines in the same rule token
   the rest of the app uses, not a hardcoded value. */
.sc-chip-grid > .sc-tbar {
    display: flex;
    flex: 3 1 0;
    min-width: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule);
}

.sc-tbar > .sc-tchip { flex: 1 1 0; min-width: 0; border-radius: 0; background: transparent; }
.sc-tbar > .sc-tchip + .sc-tchip { border-left: 1px solid var(--color-rule); }

.sc-tchip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: .375rem .2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    min-width: 0;
}

.sc-tchip-lbl { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.sc-tchip-val { font-size: .8125rem; font-weight: 800; white-space: nowrap; }

/* Max/Avg/Min are historical reference stats, not a live signal — design.md
   reserves colour for the one number an operator needs to react to (the
   Now/Last chip, via .sc-chip-now-*). All three share one neutral surface
   so they read as one bar/readout, never three competing status chips —
   applies here to the standalone received-card Max chip too. */
.sc-chip-hi, .sc-chip-avg, .sc-chip-lo { background: var(--color-paper-3); color: var(--color-ink-2); }

.sc-chip-now-ok   { background: var(--color-success-soft);  color: var(--color-success-ink); border: 1px solid oklch(from var(--color-success) l c h / 0.35); }
.sc-chip-now-warm { background: var(--color-warning-soft);  color: var(--color-warning-ink); border: 1px solid oklch(from var(--color-warning) l c h / 0.4); }
.sc-chip-now-hot  { background: var(--color-danger-soft);   color: var(--color-danger-ink);  border: 1px solid oklch(from var(--color-danger) l c h / 0.35); }

.sc-notemp { font-size: .8125rem; color: var(--color-danger); display: flex; align-items: center; gap: .3rem; margin-top: .125rem; }

/* Received */
.sc-rec-date  { font-size: 1rem; font-weight: 700; color: var(--color-success-ink); font-family: var(--font-mono); }
.sc-rec-where { font-size: .8125rem; color: var(--color-ink-2); margin-top: .2rem; }

/* ── Progress — flat, color-coded ── */
.sc-progress { padding: 0 var(--space-md) .875rem; }

.sc-prog {
    height: 5px;
    background: var(--color-rule);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.sc-prog-bar {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--dur-med) var(--ease-out);
    background: var(--color-accent);
}

.sc-prog-bar-ok { background: var(--color-success); }

.sc-prog-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .375rem;
    font-size: .625rem;
    color: var(--color-ink-3);
    font-weight: 600;
    letter-spacing: .02em;
    font-family: var(--font-mono);
}

/* Responsive */
@media (max-width: 768px) {
    .sc-grid-3, .sc-grid-2, .sc-grid-transit { grid-template-columns: 1fr; }
    .sc-metric + .sc-metric {
        border-left: none;
        border-top: 1px solid var(--color-rule-2);
        padding: .75rem 0 0;
        margin-top: .625rem;
    }
    .lr-row { flex-wrap: wrap; }
}

/* ── Shipment Detail ─────────────────────────────────────── */
.shipment-detail {
    padding: var(--space-sm);
    background: var(--color-paper);
    border-top: 1px solid var(--color-rule);
}

.detail-card {
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6875rem 1rem;
    background: var(--color-paper-3);
    border-bottom: 1px solid var(--color-rule);
    font-size: .6875rem;
    font-weight: 700;
    color: var(--color-ink-2);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detail-list { list-style: none; margin: 0; padding: 0; }

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--color-rule-2);
}

.detail-item:last-child { border-bottom: none; }
.detail-icon { font-size: .875rem; margin-top: 3px; flex-shrink: 0; width: 16px; }
.detail-label { font-size: .625rem; color: var(--color-ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .125rem; }
.detail-value { font-size: .875rem; color: var(--color-ink); font-weight: 500; font-family: var(--font-mono); }

.temp-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: .375rem; font-family: var(--font-mono); }

/* Nested accordions */
.detail-accordion .accordion-item { background: var(--color-paper-2) !important; border: 1px solid var(--color-rule) !important; border-radius: var(--radius) !important; overflow: hidden; margin-bottom: .5rem; }
.detail-accordion .accordion-button { background: var(--color-paper-3); font-size: .875rem; font-weight: 600; padding: .75rem 1rem; color: var(--color-ink); }
.detail-accordion .accordion-button:not(.collapsed) { background: var(--color-accent-soft); color: var(--color-accent); box-shadow: none; }
.detail-accordion .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); }
.detail-accordion .accordion-button:focus { box-shadow: 0 0 0 2px var(--color-focus); }
.detail-accordion .accordion-body { background: var(--color-paper-2); color: var(--color-ink); }

/* ── Notes ──────────────────────────────────────────────── */
.notes-list { display: flex; flex-direction: column; gap: var(--space-2xs); }

.note-card {
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.note-header {
    display: flex;
    align-items: center;
    padding: .5rem .875rem;
    background: var(--color-paper-3);
    border-bottom: 1px solid var(--color-rule);
}

.note-time { font-size: .75rem; font-family: var(--font-mono); }
.note-body { padding: .625rem .875rem; font-size: .875rem; color: var(--color-ink); white-space: pre-wrap; line-height: 1.6; }

/* ── Photos ─────────────────────────────────────────────── */
.photo-grid { display: flex; flex-wrap: wrap; gap: .625rem; }

.photo-thumb-wrapper { position: relative; display: inline-block; }

.photo-delete {
    position: absolute;
    top: 4px; right: 4px;
    background: var(--color-paper-2);
    border-radius: 6px;
    padding: .2rem .35rem;
    font-size: .75rem;
    border: 1px solid var(--color-rule);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    z-index: 10;
}

.photo-thumb-wrapper:hover .photo-delete,
.photo-thumb-wrapper:focus-within .photo-delete { opacity: 1; }

.photo-thumb {
    height: 90px;
    width: auto;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-rule);
    cursor: pointer;
    object-fit: cover;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.photo-thumb:hover, .photo-thumb:focus-visible { border-color: var(--color-accent); outline: none; }

/* ── Product Table ──────────────────────────────────────── */
.product-table th { background: var(--color-paper-3); font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-ink-3); border-bottom: 1px solid var(--color-rule); }
.product-table td { font-size: .875rem; vertical-align: middle; color: var(--color-ink-2); }
.product-table td.text-end { font-family: var(--font-mono); }
.product-table tfoot td { color: var(--color-ink); background: var(--color-paper-3); }

/* ── Buttons — flat fill, no gradient, no lift theatrics ──── */
.btn { border-radius: var(--radius-sm) !important; font-weight: 500; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out) !important; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.btn-primary { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-accent-ink) !important; }
.btn-primary:hover { background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; color: var(--color-accent-ink) !important; }
.btn-primary:disabled { opacity: .5; }

.btn-icon {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-rule);
    background: none;
    cursor: pointer;
    color: var(--color-ink-2);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn-icon:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.btn-icon:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.btn-icon-sm { background: none; border: none; cursor: pointer; padding: .125rem .25rem; font-size: .8125rem; transition: color var(--dur-fast) var(--ease-out); }

/* ── Search Box ─────────────────────────────────────────── */
.search-box .form-control,
.search-box .input-group-text {
    border-color: var(--color-rule);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-size: .875rem;
}

.search-box .input-group-text { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.search-box .form-control { border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.search-box .form-control:focus { box-shadow: 0 0 0 3px var(--color-accent-soft); border-color: var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); }

/* ── Filter Bar ─────────────────────────────────────────── */
.filter-bar {
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--shadow-sm);
}

/* ── Loading / Empty ────────────────────────────────────── */
.loading-overlay { display: flex; justify-content: center; align-items: center; min-height: 300px; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--color-ink-3);
}

/* ── Login Page — Split Studio, retoned dark ────────────────
   Both panels are dark now (see design.md Theme); the left
   panel uses the darker --color-rail surface for the brand
   statement, the right panel steps up to --color-paper-2 as
   the form's elevated surface. */
.login-page {
    min-height: 100vh;
    display: flex;
    background: var(--color-paper);
}

.login-panel-left {
    flex: 1;
    background: var(--color-rail);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl);
}

.login-brand { margin-bottom: var(--space-lg); }

.login-brand-icon {
    width: 56px; height: 56px;
    background: var(--color-accent-soft);
    border: 1px solid oklch(from var(--color-accent) l c h / 0.4);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.login-brand h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: .625rem;
    line-height: 1;
}

.login-brand p {
    font-size: .9375rem;
    color: var(--color-ink-2);
    line-height: 1.7;
    max-width: 340px;
}

.login-features { display: flex; flex-direction: column; gap: var(--space-xs); }

.login-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink-2);
    font-size: .9375rem;
    font-weight: 500;
}

.feature-icon {
    width: 34px; height: 34px;
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: .8125rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.login-panel-right {
    width: 460px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--color-paper-2);
    border-left: 1px solid var(--color-rule);
}

.login-form-wrap { width: 100%; max-width: 360px; }

.login-form-wrap h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-ink);
    text-align: center;
    margin-bottom: .375rem;
    letter-spacing: var(--tracking-tight);
}

.login-subtitle {
    text-align: center;
    color: var(--color-ink-3);
    font-size: .9375rem;
    margin-bottom: var(--space-lg);
}

.input-wrapper { position: relative; }

.input-icon {
    position: absolute;
    left: .9375rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-3);
    font-size: .875rem;
    z-index: 4;
    pointer-events: none;
}

.login-form-wrap .form-control {
    border-radius: var(--radius-sm) !important;
    padding-left: 2.625rem !important;
    height: 46px;
    font-size: .9375rem;
    background: var(--color-paper);
    color: var(--color-ink);
    border-color: var(--color-rule);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.login-form-wrap .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
    outline: none;
    background: var(--color-paper);
    color: var(--color-ink);
}

.btn-brand {
    height: 46px;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    border: none;
    font-size: .9375rem;
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
    transition: background var(--dur-fast) var(--ease-out) !important;
}

.btn-brand:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn-brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-brand:disabled { opacity: .5; }

/* ── Cards ──────────────────────────────────────────────── */
.card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--color-ink); }

/* ── Bootstrap utility color remap ──────────────────────────
   These Bootstrap text-* utility classes are still used directly
   in ShipmentDetail/History/Register markup; route them through
   our tokens instead of Bootstrap's default blue/grey so the
   whole app stays on one palette. data-bs-theme="dark" on <html>
   (App.razor) handles component chrome (modal/dropdown/forms/
   accordion backgrounds) — this block only handles text color. */
.text-primary   { color: var(--color-accent) !important; }
.text-success   { color: var(--color-success) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-secondary { color: var(--color-ink-3) !important; }
.text-muted     { color: var(--color-ink-3) !important; }

/* ── Blazor Error UI ────────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--color-danger);
    color: var(--color-danger-ink);
    padding: .75rem var(--space-md);
    font-size: .875rem;
    font-weight: 500;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .shipments-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lr-cell-loc { display: none; }
}

@media (max-width: 991.98px) {
    .stat-card { min-width: 130px; }
}

@media (max-width: 767.98px) {
    .login-panel-left  { display: none; }
    .login-panel-right { width: 100%; border-left: none; }
    .shipments-list { grid-template-columns: 1fr; }
    .lr-cell-time, .lr-cell-delay { display: none; }
}

@media (max-width: 575.98px) {
    .page-body { padding: var(--space-sm); }
    .stats-row { flex-direction: column; }
    .stat-card { border-right: none; border-bottom: 1px solid var(--color-rule-2); }
    .stat-card:last-of-type { border-bottom: none; }
    .shipment-toggle { grid-template-columns: 1fr; }
}

/* ── Syncfusion Overrides ────────────────────────────────── */
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 { stroke: var(--color-accent) !important; }
.e-grid .e-headercell { background: var(--color-paper-3) !important; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-ink-3) !important; font-family: var(--font-mono); }
.e-grid .e-row:hover .e-rowcell { background: var(--color-accent-soft) !important; }
.tx-daterangepicker .e-input-group { border-radius: var(--radius-sm) !important; }

@media print {
    aside.rail,
    header.console-header,
    .d-print-none {
        display: none !important;
    }

    main.page-body {
        margin: 0 !important;
        padding: 0 !important;
    }
}