/* Rotomotive Inventory POC.

   Colour roles come from the validated data-viz reference palette. Status tokens
   (good / warning / serious / critical) carry order state and always ship with an
   icon + label, never colour alone -- warning and serious sit ~13 ΔE apart, which
   is too close to separate by hue. Shortage bars use categorical slot 1 with
   critical as the emphasis colour (validated all-pairs in both modes).

   Layout is full-bleed: a fixed sidebar plus fluid content, no max-width. */

:root {
    color-scheme: light;

    /* surfaces */
    --page: #f5f6f7;
    --surface-1: #ffffff;
    --surface-2: #f7f8f9;
    --surface-3: #eceff1;
    --chrome: #ffffff;

    /* ink */
    --text-primary: #172026;
    --text-secondary: #536168;
    --text-muted: #7b898f;

    /* lines */
    --grid: #e8ebed;
    --axis: #c4ccd0;
    --border: rgba(23, 32, 38, 0.10);
    --border-strong: rgba(23, 32, 38, 0.19);

    /* data */
    --series-1: #087f6b;
    --series-1-soft: #c8ebe3;
    --series-1-wash: rgba(8, 127, 107, 0.09);
    --nav: #121a1f;
    --nav-raised: #1c272d;
    --nav-text: #aebbc1;

    /* status palette -- fixed, never themed */
    --st-good: #0ca30c;
    --st-warning: #fab219;
    --st-serious: #ec835a;
    --st-critical: #d03b3b;
    --st-neutral: #898781;
    --success-text: #006300;

    --wash-good: rgba(12, 163, 12, 0.09);
    --wash-warning: rgba(250, 178, 25, 0.13);
    --wash-serious: rgba(236, 131, 90, 0.13);
    --wash-critical: rgba(208, 59, 59, 0.10);

    /* geometry */
    --r-lg: 8px;
    --r-md: 7px;
    --r-sm: 5px;
    --sidebar-w: 252px;
    --topbar-h: 68px;

    /* elevation */
    --sh-1: 0 1px 2px rgba(23, 32, 38, 0.04);
    --sh-2: 0 1px 2px rgba(23, 32, 38, 0.04), 0 6px 16px rgba(23, 32, 38, 0.035);
    --sh-3: 0 2px 6px rgba(23, 32, 38, 0.07), 0 14px 36px rgba(23, 32, 38, 0.09);
    --sh-pop: 0 24px 70px rgba(11, 11, 11, 0.26);

    --font: system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page: #0d0d0d;
        --surface-1: #1a1a19;
        --surface-2: #232322;
        --surface-3: #2b2b29;
        --chrome: #151514;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted: #898781;
        --grid: #2c2c2a;
        --axis: #383835;
        --border: rgba(255, 255, 255, 0.10);
        --border-strong: rgba(255, 255, 255, 0.18);
        --series-1: #2bbca3;
        --series-1-soft: #155f54;
        --series-1-wash: rgba(43, 188, 163, 0.14);
        --nav: #080c0e;
        --nav-raised: #151d21;
        --nav-text: #aab6bb;
        --success-text: #0ca30c;
        --wash-good: rgba(12, 163, 12, 0.14);
        --wash-warning: rgba(250, 178, 25, 0.14);
        --wash-serious: rgba(236, 131, 90, 0.14);
        --wash-critical: rgba(208, 59, 59, 0.16);
        --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
        --sh-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 44px rgba(0, 0, 0, 0.42);
        --sh-pop: 0 24px 70px rgba(0, 0, 0, 0.7);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --surface-3: #2b2b29;
    --chrome: #151514;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --series-1: #2bbca3;
    --series-1-soft: #155f54;
    --series-1-wash: rgba(43, 188, 163, 0.14);
    --nav: #080c0e;
    --nav-raised: #151d21;
    --nav-text: #aab6bb;
    --success-text: #0ca30c;
    --wash-good: rgba(12, 163, 12, 0.14);
    --wash-warning: rgba(250, 178, 25, 0.14);
    --wash-serious: rgba(236, 131, 90, 0.14);
    --wash-critical: rgba(208, 59, 59, 0.16);
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
    --sh-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 44px rgba(0, 0, 0, 0.42);
    --sh-pop: 0 24px 70px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

/* No overflow-x:hidden here -- it turns html/body into a scroll container and
   silently breaks position:sticky on the topbar and sidebar. Wide content is
   contained instead: every table scrolls inside its own .table-wrap. */
html, body { width: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text-primary);
    font: 14px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.ic {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
    position: fixed; left: 12px; top: 10px; z-index: 200;
    padding: 9px 12px; transform: translateY(-160%);
    background: var(--text-primary); color: var(--page);
    border-radius: var(--r-sm);
}
.skip-link:focus { transform: translateY(0); }

/* ================================================================ topbar */

.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    height: var(--topbar-h);
    padding: 0 24px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-1);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .logo { height: 36px; width: auto; flex: none; display: block; }
/* one logo per theme -- the dark asset only shows once dark wins */
.brand .logo.dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand .logo.light { display: none; }
    :root:not([data-theme="light"]) .brand .logo.dark { display: block; }
}
:root[data-theme="dark"] .brand .logo.light { display: none; }
:root[data-theme="dark"] .brand .logo.dark { display: block; }
:root[data-theme="light"] .brand .logo.light { display: block; }
:root[data-theme="light"] .brand .logo.dark { display: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: 14.5px; font-weight: 650; letter-spacing: 0; }
.brand-text span { font-size: 11.5px; color: var(--text-muted); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.clock {
    display: flex; align-items: center; gap: 10px;
    height: 38px; padding: 0 8px 0 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-secondary);
}
.clock .ic { width: 16px; height: 16px; color: var(--text-muted); }
.clock-body { display: flex; flex-direction: column; line-height: 1.15; }
.clock-body .label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0;
    color: var(--text-muted);
}
.clock input[type="date"] {
    background: transparent; border: 0; padding: 0;
    color: var(--text-primary);
    font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    width: 112px;
}
.clock-sep { width: 1px; height: 20px; background: var(--border); }
.clock.simulated {
    border-color: var(--st-warning);
    background: var(--wash-warning);
}
.clock.simulated .label { color: var(--text-secondary); font-weight: 600; }

/* =============================================================== layout */

.shell { display: flex; align-items: flex-start; width: 100%; }

.sidebar {
    position: sticky; top: var(--topbar-h);
    display: flex; flex-direction: column;
    width: var(--sidebar-w); flex: none;
    height: calc(100vh - var(--topbar-h));
    padding: 18px 14px;
    background: var(--nav);
    border-right: 0;
}
.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px 10px;
    color: #74858d; font-size: 10px; text-transform: uppercase; font-weight: 700;
}
.btn.sidebar-close, .btn.mobile-menu, .sidebar-scrim { display: none; }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    background: none; border: 0;
    border-radius: var(--r-md);
    color: var(--nav-text);
    text-align: left; cursor: pointer;
    transition: background 120ms, color 120ms;
}
.nav-item:hover { background: var(--nav-raised); color: #fff; }
.nav-item .nav-label { flex: 1; font-size: 13.5px; }
.nav-item[aria-selected="true"] {
    background: #243c38;
    color: #77dfcd;
    font-weight: 650;
}
.nav-item[aria-selected="true"] .ic { color: #77dfcd; }
.nav-item .count {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--nav-raised);
    color: var(--nav-text);
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nav-item .count.alarm { background: var(--st-critical); color: #fff; }

.sidebar-foot { margin-top: auto; padding-top: 14px; }
.sidebar-section-label {
    display: block; padding: 0 10px 8px;
    color: #74858d; font-size: 10px; text-transform: uppercase; font-weight: 700;
}
.model-card {
    padding: 12px;
    background: var(--nav-raised);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--r-md);
}
.model-card .eyebrow {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0;
    color: #74858d;
}
.model-card .pn {
    margin-top: 5px;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    word-break: break-all;
    color: #fff;
}
.model-card .dsc { margin-top: 5px; font-size: 11.5px; color: var(--nav-text); }
.model-card .rdy {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 11.5px; color: #74858d;
}
.model-card .rdy b { font-size: 15px; color: #77dfcd; }

.content {
    flex: 1; min-width: 0;
    width: 100%; max-width: none;
    padding: 0 28px 80px;
}
.panel[hidden] { display: none; }

.context-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 44px; margin: 0 -28px 22px; padding: 0 28px;
    background: color-mix(in srgb, var(--surface-1) 86%, transparent);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted); font-size: 11.5px;
}
.context-bar > div { display: flex; align-items: center; gap: 8px; }
.context-eyebrow { text-transform: uppercase; font-weight: 700; }
.context-divider { color: var(--axis); }
.context-bar strong { color: var(--text-primary); font-weight: 650; }
.system-state { display: inline-flex; align-items: center; gap: 7px; }
.system-state i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--st-good); box-shadow: 0 0 0 3px var(--wash-good);
}

.page-head {
    display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-head h1 { font-size: 21px; }
.page-head p { margin-top: 4px; font-size: 13px; color: var(--text-secondary); max-width: 90ch; }
.page-head > :first-child { flex: 1; min-width: 260px; }
.head-actions { display: flex; gap: 9px; flex-wrap: wrap; }

@media (max-width: 900px) {
    :root { --topbar-h: 62px; }
    html, body { overflow-x: clip; }
    body.nav-open { overflow: hidden; }
    .topbar { padding: 0 14px; gap: 10px; flex-wrap: nowrap; }
    .btn.mobile-menu { display: inline-flex; flex: none; box-shadow: none; }
    .brand .logo { height: 32px; }
    .brand-text span { display: none; }
    .sidebar {
        position: fixed; z-index: 90; top: 0; left: 0;
        width: min(84vw, 310px); height: 100dvh;
        transform: translateX(-102%);
        transition: transform 180ms ease;
        box-shadow: 18px 0 50px rgba(0, 0, 0, 0.28);
    }
    body.nav-open .sidebar { transform: translateX(0); }
    .sidebar-head { min-height: 44px; padding-top: 2px; }
    .btn.sidebar-close {
        display: inline-flex; color: var(--nav-text);
        border-color: rgba(255,255,255,.12); background: transparent;
    }
    .sidebar-scrim {
        position: fixed; inset: 0; z-index: 80;
        width: 100%; height: 100%; border: 0;
        background: rgba(5, 10, 12, 0.54);
    }
    body.nav-open .sidebar-scrim { display: block; }
    .sidebar-foot { display: block; }
    .content { padding: 0 16px 64px; }
    .context-bar { margin: 0 -16px 18px; padding: 0 16px; }
    .clock { display: none; }
    .topbar-right { margin-left: auto; gap: 6px; flex-wrap: nowrap; }
    .topbar-right .btn.primary { width: 38px; padding: 0; font-size: 0; }
    .topbar-right .btn.primary .ic { width: 18px; height: 18px; }
}

/* ================================================================= cards */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: 18px 20px;
    margin-bottom: 16px;
    min-width: 0;
}
.card > header h2 { color: var(--text-primary); }
.card.flush { padding: 0; overflow: hidden; }
.card.flush header.inset { padding: 18px 20px 0; margin-bottom: 14px; }

/* nowrap so a header action stays on the title line instead of dropping below
   the description text and reading as orphaned body copy */
.card > header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 620px) { .card > header { flex-wrap: wrap; } }
.card > header h2 { font-size: 14.5px; }
.card > header .sub {
    margin-top: 4px;
    font-size: 12.5px; color: var(--text-secondary); max-width: 88ch;
}
.card > header .sub b { color: var(--text-primary); font-weight: 600; }
.card > header .spacer { margin-left: auto; }
.card > header > div:first-child { min-width: 0; }

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 16px; align-items: start;
}
@media (max-width: 1240px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================== readout */

/* A plain-language summary of the whole position, so the dashboard states its
   conclusion in words before asking anyone to read a chart. */
.readout {
    display: flex; align-items: flex-start; gap: 15px;
    padding: 17px 20px;
    margin-bottom: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 4px solid var(--st-neutral);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}
.readout.sev-critical { border-left-color: var(--st-critical); background: var(--wash-critical); }
.readout.sev-warn { border-left-color: var(--st-warning); background: var(--wash-warning); }
.readout.sev-good { border-left-color: var(--st-good); background: var(--wash-good); }
.readout .glyph { font-size: 20px; line-height: 1.2; }
.readout .body { min-width: 0; }
.readout .headline { font-size: 15px; font-weight: 650; letter-spacing: 0; }
.readout .detail { margin-top: 5px; font-size: 13px; color: var(--text-secondary); max-width: 120ch; }
.readout .detail b { color: var(--text-primary); font-weight: 650; }
.readout .next {
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-secondary);
}
.readout .next b { color: var(--text-primary); }

/* ============================================================= kpi tiles */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 13px; margin-bottom: 16px;
}
.kpi {
    position: relative;
    padding: 15px 17px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    transition: transform 140ms, box-shadow 140ms;
}
.kpi::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--axis); border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.kpi.hero::before { background: var(--series-1); }
.kpi.attention::before { background: var(--st-critical); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.kpi .label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0;
    color: var(--text-muted); font-weight: 600;
}
.kpi .value {
    margin-top: 7px;
    font-size: 32px; font-weight: 660; line-height: 1.05; letter-spacing: 0;
}
.kpi .note { margin-top: 5px; font-size: 12px; color: var(--text-secondary); }
.kpi.hero { background: linear-gradient(160deg, var(--series-1-wash), transparent 70%); }
.kpi.hero .value { font-size: 44px; }
.kpi.attention { border-color: color-mix(in oklab, var(--st-critical) 45%, var(--border)); }
.kpi.attention .value { color: var(--st-critical); }

/* status chips: one tile per state, each with its own icon + label + meaning,
   so state never rests on colour alone */
.status-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 11px;
}
.status-chip {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--st-neutral);
    border-radius: var(--r-md);
}
.status-chip .icon { font-size: 16px; line-height: 1.35; }
.status-chip .n {
    font-size: 24px; font-weight: 660; line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.status-chip .txt {
    margin-top: 2px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0;
    font-weight: 650; color: var(--text-secondary);
}
.status-chip .mean { margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }

.st-ontrack   { border-left-color: var(--st-good);     background: var(--wash-good); }
.st-atrisk    { border-left-color: var(--st-warning);  background: var(--wash-warning); }
.st-critical  { border-left-color: var(--st-serious);  background: var(--wash-serious); }
.st-delayed   { border-left-color: var(--st-critical); background: var(--wash-critical); }
.st-completed { border-left-color: var(--st-neutral); }

/* ================================================================ badges */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2.5px 9px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 11px; font-weight: 650; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-neutral); }
.badge.ontrack   { background: var(--wash-good); }
.badge.ontrack   .dot { background: var(--st-good); }
.badge.atrisk    { background: var(--wash-warning); }
.badge.atrisk    .dot { background: var(--st-warning); }
.badge.critical  { background: var(--wash-serious); }
.badge.critical  .dot { background: var(--st-serious); }
.badge.delayed   { background: var(--wash-critical); }
.badge.delayed   .dot { background: var(--st-critical); }
.badge.completed .dot { background: var(--st-neutral); }
.badge.ok  { background: var(--wash-good); }
.badge.ok  .dot { background: var(--st-good); }
.badge.low { background: var(--wash-warning); }
.badge.low .dot { background: var(--st-warning); }
.badge.out { background: var(--wash-critical); }
.badge.out .dot { background: var(--st-critical); }

.pill {
    display: inline-block; padding: 1.5px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 11px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill.warn {
    color: var(--st-critical); font-weight: 650;
    background: var(--wash-critical);
    border-color: color-mix(in oklab, var(--st-critical) 40%, var(--border));
}

/* ================================================================ tables */

.table-wrap {
    overflow-x: auto; overflow-y: visible;
    scrollbar-color: var(--axis) transparent;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--grid); }
th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0;
    color: var(--text-muted); font-weight: 650; white-space: nowrap;
    border-bottom-color: var(--border-strong);
}
th:first-child, td:first-child { padding-left: 18px; }
th:last-child, td:last-child { padding-right: 18px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
th .arrow { color: var(--series-1); }
th[data-help] { text-decoration: underline dotted var(--axis); text-underline-offset: 3px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background 90ms; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.selected { background: var(--series-1-wash); box-shadow: inset 3px 0 0 var(--series-1); }
.mono { font-family: var(--mono); font-size: 12px; }
td.shortfall { color: var(--st-critical); font-weight: 650; }
.muted { color: var(--text-muted); }
.trunc { color: var(--st-warning); cursor: help; }
.empty { padding: 34px 4px; text-align: center; color: var(--text-muted); }
.note { font-size: 11.5px; color: var(--text-muted); }

/* ======================================================== shortage bars */

.barlist { display: flex; flex-direction: column; gap: 2px; }
.barlist .row {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 150px;
    align-items: center; gap: 14px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    transition: background 90ms;
}
.barlist .row:hover { background: var(--surface-2); }
.barlist .row:focus-visible { outline: 2px solid var(--series-1); outline-offset: -2px; }
.barlist .name {
    font-size: 12px; font-family: var(--mono);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barlist .track {
    height: 15px; background: var(--surface-3);
    border-radius: 4px; overflow: hidden;
}
.barlist .fill {
    height: 100%;
    background: var(--series-1);
    border-radius: 0 4px 4px 0;   /* rounded data-end, anchored to the baseline */
    min-width: 3px;
}
.barlist .row.overdue .fill { background: var(--st-critical); }
.barlist .meta {
    font-size: 12px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; text-align: right;
}
.barlist .meta b { color: var(--text-primary); font-weight: 650; }
.barlist-legend {
    display: flex; gap: 20px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--grid);
    font-size: 12px; color: var(--text-secondary);
}
.barlist-legend span { display: inline-flex; align-items: center; gap: 7px; }
.barlist-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }

/* ============================================================== timeline */

/* Horizontal inset so the first/last order label is not clipped -- markers are
   centred on their date, so each needs half a label of room. */
.timeline { position: relative; padding: 30px 56px 10px; }
.timeline .axis { position: relative; height: 2px; background: var(--axis); border-radius: 1px; }
.timeline .tick {
    position: absolute; top: 8px; transform: translateX(-50%);
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.timeline .tick::before {
    content: ""; position: absolute; left: 50%; top: -8px;
    width: 1px; height: 6px; background: var(--grid);
}
.timeline .now { position: absolute; top: -26px; bottom: -10px; width: 2px; background: var(--text-secondary); }
.timeline .now span {
    position: absolute; top: -5px; left: 6px;
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0;
    font-weight: 650; color: var(--text-secondary);
}
.timeline .marker {
    position: absolute; top: -24px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 2px 4px;   /* widens the hit target past the 12px dot */
    border-radius: var(--r-sm);
}
.timeline .marker:hover { background: var(--surface-2); }
.timeline .marker:focus-visible { outline: 2px solid var(--series-1); }
.timeline .marker .dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--st-neutral);
    box-shadow: 0 0 0 2.5px var(--surface-1);   /* 2px surface ring */
}
.timeline .marker .lbl {
    font-size: 10px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.timeline .marker.ontrack  .dot { background: var(--st-good); }
.timeline .marker.atrisk   .dot { background: var(--st-warning); }
.timeline .marker.critical .dot { background: var(--st-serious); }
.timeline .marker.delayed  .dot { background: var(--st-critical); }

/* =============================================================== tooltip */

#tooltip {
    position: fixed; z-index: 95;
    max-width: 330px; padding: 10px 13px;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    font-size: 12px; line-height: 1.5;
    pointer-events: none;
}
#tooltip[hidden] { display: none; }
#tooltip strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
#tooltip .tt-desc {
    display: block; margin-bottom: 7px; padding-bottom: 7px;
    border-bottom: 1px solid var(--grid);
    color: var(--text-secondary);
}
#tooltip .tt-row { display: flex; justify-content: space-between; gap: 16px; }
#tooltip .tt-row span:first-child { color: var(--text-secondary); }
#tooltip .tt-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
#tooltip .tt-flag { margin-top: 6px; color: var(--st-critical); font-weight: 650; }

/* ============================================================== controls */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    cursor: pointer; white-space: nowrap;
    font-size: 13px;
    box-shadow: var(--sh-1);
    transition: background 110ms, border-color 110ms, transform 110ms;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.btn.primary {
    background: var(--series-1);
    border-color: transparent;
    color: #fff; font-weight: 650;
    box-shadow: var(--sh-2);
}
.btn.primary:hover { background: color-mix(in oklab, var(--series-1) 88%, #000); }
/* ghost keeps a hairline so it still reads as a control, not as body text */
.btn.ghost {
    background: var(--surface-1); border-color: var(--border);
    box-shadow: none; color: var(--text-secondary);
}
.btn.ghost:hover { background: var(--surface-3); color: var(--text-primary); }
.btn.icon { width: 38px; padding: 0; }
.btn.danger { color: var(--st-critical); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface-1); transform: none; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0;
    color: var(--text-muted); font-weight: 650;
}
.field input, .field select, .field textarea {
    height: 40px; padding: 0 12px;
    background: var(--page);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
}
.field textarea { height: auto; padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--series-1); outline-offset: -1px;
    background: var(--surface-1);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 14px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar.tight { margin-bottom: 12px; }
.search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.search input {
    width: 100%; height: 38px; padding: 0 13px;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}
.search input:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }

.seg {
    display: flex;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-1);
}
.seg button {
    height: 36px; padding: 0 13px;
    background: transparent; border: 0; cursor: pointer;
    font-size: 12.5px; color: var(--text-secondary); white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { background: var(--surface-2); color: var(--text-primary); }
.seg button[aria-pressed="true"] { background: var(--series-1); color: #fff; font-weight: 650; }

.checkline {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--text-secondary);
}

.hint-box {
    margin: 15px 0 0; padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 12.5px; color: var(--text-secondary);
}
.hint-box b { color: var(--text-primary); }

/* ================================================================= modal */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 46px 16px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    width: 100%; max-width: 760px;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
}
.modal.narrow { max-width: 480px; }
.modal header {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 17px 20px; border-bottom: 1px solid var(--border);
}
.modal header h2 { font-size: 15.5px; }
.modal header .sub { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); }
.modal header .close {
    margin-left: auto; width: 30px; height: 30px; flex: none;
    background: none; border: 0; border-radius: var(--r-sm);
    font-size: 21px; line-height: 1; cursor: pointer; color: var(--text-muted);
}
.modal header .close:hover { background: var(--surface-2); color: var(--text-primary); }
.modal .body { padding: 20px; }
.modal .foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.item-card {
    padding: 13px 15px; margin-bottom: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.item-card .in { font-family: var(--mono); font-size: 12.5px; font-weight: 650; }
.item-card .ds { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.item-card .st { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.item-card .st b { color: var(--text-primary); }

/* live feasibility panel inside the add-order modal */
.feas {
    margin-top: 18px; padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.feas .placeholder { font-size: 12.5px; color: var(--text-muted); }
.feas .head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 13px; }
.feas .head .meta { font-size: 12px; color: var(--text-muted); }
.feas .verdict {
    margin-bottom: 13px; font-size: 13px; color: var(--text-secondary);
}
.feas .verdict b { color: var(--text-primary); font-weight: 650; }
.feas .nums {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 12px;
}
.feas .nums div { font-size: 11.5px; color: var(--text-muted); }
.feas .nums b {
    display: block; margin-bottom: 1px;
    font-size: 20px; font-weight: 660; color: var(--text-primary);
    letter-spacing: 0;
}
.feas .short-list {
    margin-top: 14px; max-height: 186px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--r-sm);
}
.feas table { font-size: 12px; }
.feas .ok-line {
    margin: 13px 0 0; font-size: 12.5px;
    color: var(--success-text); font-weight: 600;
}

/* ================================================================ alerts */

.alert-list { display: flex; flex-direction: column; gap: 9px; max-height: 486px; overflow-y: auto; }
.alert-list.tall { max-height: none; }
.alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--st-neutral);
    border-radius: var(--r-md);
}
.alert.critical { border-left-color: var(--st-critical); background: var(--wash-critical); }
.alert.warn { border-left-color: var(--st-warning); background: var(--wash-warning); }
.alert .icon { font-size: 14px; line-height: 1.45; }
.alert .msg { flex: 1; min-width: 0; font-size: 12.5px; }
.alert .kind {
    display: block; margin-bottom: 3px;
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0;
    font-weight: 650; color: var(--text-muted);
}
.alert.acked { opacity: 0.5; }

/* ========================================================= order detail */

.progress {
    display: flex; height: 18px; gap: 2px;         /* 2px surface gap between fills */
    background: var(--surface-3); border-radius: 5px; overflow: hidden;
    margin: 12px 0 8px;
}
.progress i { display: block; height: 100%; }
.progress .from-stock { background: var(--st-good); }
.progress .buildable { background: var(--series-1); }
.progress .blocked { background: var(--st-critical); }
.progress-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.progress-legend span { display: inline-flex; align-items: center; gap: 7px; }
.progress-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.progress-legend b { color: var(--text-primary); font-weight: 650; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.kv > div { min-width: 0; }
.kv .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0;
    color: var(--text-muted); font-weight: 650;
}
.kv .v { margin-top: 4px; font-size: 14.5px; font-weight: 600; }

.verdict-line {
    margin: 16px 0 0; padding: 13px 15px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--st-neutral);
    border-radius: var(--r-md);
    font-size: 13px; color: var(--text-secondary);
}
.verdict-line b { color: var(--text-primary); font-weight: 650; }
.verdict-line.sev-critical { border-left-color: var(--st-critical); background: var(--wash-critical); }
.verdict-line.sev-warn { border-left-color: var(--st-warning); background: var(--wash-warning); }
.verdict-line.sev-good { border-left-color: var(--st-good); background: var(--wash-good); }

/* ========================================================= motor master */

.np-section { margin-bottom: 22px; }
.np-section:last-child { margin-bottom: 0; }
.np-section h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0;
    color: var(--text-muted); margin-bottom: 10px; font-weight: 650;
}
.np-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px; background: var(--grid);
    border: 1px solid var(--grid); border-radius: var(--r-md); overflow: hidden;
}
.np-grid > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 13px; background: var(--surface-1);
}
.np-grid .k { font-size: 12px; color: var(--text-muted); }
.np-grid .v { font-size: 12.5px; font-weight: 650; text-align: right; }

/* ================================================================= misc */

.toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    z-index: 120;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    background: var(--text-primary); color: var(--page);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    font-size: 13px; font-weight: 550;
    max-width: min(92vw, 620px);
}
.toast[hidden] { display: none; }
.toast.err { background: var(--st-critical); color: #fff; }

.loading { opacity: 0.6; transition: opacity 130ms; }   /* hold the last render, no skeleton flash */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--axis); border-radius: 6px;
    border: 3px solid var(--page);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .kpi:hover { transform: none; }
}

@media (max-width: 700px) {
    .system-state { display: none; }
    .page-head { align-items: flex-start; margin-bottom: 16px; }
    .page-head h1 { font-size: 20px; }
    .page-head p { font-size: 12.5px; }
    .card { padding: 16px; }
    .card.flush { padding: 0; }
    .readout { padding: 15px 16px; }
    .readout .glyph { display: none; }
    .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
    .kpi { min-height: 112px; padding: 13px 14px; }
    .kpi .value, .kpi.hero .value { font-size: 28px; }
    .kpi .note { line-height: 1.35; }
    .status-row { grid-template-columns: minmax(0, 1fr); }
    .status-chip { min-height: 78px; }
    .barlist .row {
        grid-template-columns: minmax(108px, 1fr) minmax(90px, 1.4fr);
        gap: 10px;
    }
    .barlist .meta { grid-column: 1 / -1; text-align: left; padding-left: 0; }
    .timeline { min-width: 620px; }
    .toolbar { align-items: stretch; }
    .search { min-width: 100%; max-width: none; }
    .seg { width: 100%; overflow-x: auto; }
    .seg button { flex: 0 0 auto; }
    .alert { gap: 9px; }
    .alert .btn { padding: 0 8px; }
    .modal-backdrop { padding: 16px 10px; align-items: flex-end; }
    .modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
    .modal .body { padding: 16px; }
    .modal .foot { position: sticky; bottom: 0; padding: 12px 16px; }
}

@media (max-width: 480px) {
    .brand-text strong { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .clock { display: none; }
    .context-bar { min-height: 40px; }
    .kpi-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .head-actions { width: 100%; }
    .head-actions .btn { flex: 1; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .modal .foot .btn { flex: 1; }
}