/* =========================================================================
   Production CRM - white-label production floor tracker
   Single stylesheet, no build step. Accent colour is injected per install.
   ========================================================================= */

:root {
    --accent: #d8a33a;

    --bg:        #000000;
    --bg-soft:   #0a0a0d;
    --surface:   #101014;
    --surface-2: #17171d;
    --surface-3: #1e1e26;

    --line:      rgba(255, 255, 255, 0.09);
    --line-soft: rgba(255, 255, 255, 0.05);

    --text:   #f1f1f4;
    --text-2: #b9b9c4;
    --muted:  #7d7d8a;

    --blue:   #3b9dff;
    --green:  #46c65f;
    --red:    #f2472f;
    --amber:  #f0902a;
    --pink:   #ec4a86;

    --btn-start:    #1a6fd4;
    --btn-start-hi: #2481ec;
    --btn-done:     #2f9e44;
    --btn-done-hi:  #37b34d;

    --radius:    6px;
    --radius-lg: 10px;

    --display: "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
    --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

/* Themed scrollbars everywhere - thin, dark, accent on hover. */
* { scrollbar-width: thin; scrollbar-color: #2c2c38 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*::-webkit-scrollbar-corner { background: transparent; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 800; }

table { border-collapse: collapse; width: 100%; }

/* ------------------------------------------------------------- topbar --- */

.topbar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.brand:hover { color: inherit; }
.brand__mark { color: var(--accent); }
.brand__logo { max-height: 42px; width: auto; display: block; }

.topbar__title {
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 38px);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* HANAAL vendor mark in the top-right corner. Solid-black icon; screen blend
   drops the black on the #000 top bar so only the hexagon shows. */
.topbar__mark { height: 30px; width: auto; display: block; flex-shrink: 0; mix-blend-mode: screen; }

.clock { text-align: right; font-family: var(--display); line-height: 1.1; }
.clock__time { display: block; font-size: 26px; font-weight: 800; }
.clock__date { display: block; font-size: 13px; color: var(--text-2); letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- nav --- */

.mainnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 22px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
}

.mainnav__links { display: flex; gap: 4px; flex-wrap: wrap; }

.mainnav__link {
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
}
.mainnav__link:hover { background: var(--surface-2); color: var(--text); }
.mainnav__link.is-active { background: var(--surface-3); color: var(--accent); }

.mainnav__meta { display: flex; align-items: center; gap: 10px; }

.mainnav__grouplabel {
    align-self: center;
    margin: 0 2px 0 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.mainnav__links .mainnav__grouplabel:first-child { margin-left: 0; }

.userchip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.userchip__initials {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--accent);
    font-weight: 800;
    font-size: 11px;
}

.inline-form { display: inline; margin: 0; }

/* ------------------------------------------------------------ buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.btn:hover { background: #262632; }
.btn:disabled { opacity: 0.32; cursor: not-allowed; }

.btn--sm { padding: 5px 10px; font-size: 11px; }
.btn--block { width: 100%; padding: 11px 16px; }

.btn--primary { background: var(--accent); color: #14140c; }
.btn--primary:hover { background: #e7b64f; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--danger { background: transparent; border-color: rgba(242, 71, 47, 0.4); color: #ff7a68; }
.btn--danger:hover { background: rgba(242, 71, 47, 0.14); }

.btn--start { background: var(--btn-start); color: #fff; flex: 1; }
.btn--start:hover:not(:disabled) { background: var(--btn-start-hi); }

.btn--complete { background: var(--btn-done); color: #fff; flex: 1; }
.btn--complete:hover:not(:disabled) { background: var(--btn-done-hi); }

/* --------------------------------------------------------------- main --- */

.board-main { padding: 14px 18px 26px; }
.page-main  { padding: 22px; max-width: 1500px; margin: 0 auto; }

.pagefoot {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    color: var(--muted);
    font-size: 12px;
}
/* Vendor credit shown in the footer of every page (kept out of the wall-board
   kiosk by body.is-wall .pagefoot). The HANAAL logo is a solid-black JPG:
   mix-blend-mode:screen drops the black on the dark theme so only the mark
   shows, kept small to sit in proportion with the footer text. */
.pagefoot__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.04em;
}
.pagefoot__logo {
    height: 46px;
    width: auto;
    display: block;
    mix-blend-mode: screen;
}
.pagefoot__copy { color: var(--muted); }

/* -------------------------------------------------- pipeline wall filter --- */

.pipefilter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pipefilter__chip {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.pipefilter__chip:hover { color: var(--text); border-color: var(--pipe, var(--accent)); }
.pipefilter__chip.is-active {
    background: color-mix(in srgb, var(--pipe, var(--accent)) 24%, transparent);
    border-color: var(--pipe, var(--accent));
    color: var(--pipe, var(--accent));
}

/* --------------------------------------------------------------- KPIs --- */

.kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 14px;
}

.kpi {
    padding: 10px 16px 14px;
    text-align: center;
    border-right: 1px solid var(--line);
}
.kpi:last-child { border-right: 0; }

.kpi__label {
    display: block;
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-2);
}
.kpi__value {
    display: block;
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.05;
}
.kpi__value--blue  { color: var(--blue); }
.kpi__value--green { color: var(--green); }
.kpi__value--red   { color: var(--red); }
.kpi__value--amber { color: var(--amber); }

/* --------------------------------------------------------- board grid --- */

.board-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 12px;
}

.reps {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.reps__title {
    padding: 12px 14px;
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.reps__clear {
    display: block;
    padding: 6px 14px;
    font-size: 11px;
    color: var(--accent);
    border-bottom: 1px solid var(--line-soft);
}

.reps__empty { padding: 14px; color: var(--muted); font-size: 12px; margin: 0; }

.rep {
    display: block;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    transition: background 0.12s ease;
}
.rep:last-child { border-bottom: 0; }
.rep:hover { background: var(--surface-2); color: inherit; }
.rep.is-active { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--accent); }

.rep__name {
    display: block;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rep__count { display: block; font-size: 11.5px; font-weight: 700; color: var(--blue); letter-spacing: 0.05em; }
.rep__overdue { display: block; font-size: 10.5px; color: var(--red); letter-spacing: 0.04em; }

/* ---------------------------------------------------------- pipelines --- */

.pipelines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.pipeline {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--pipe) 45%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pipeline__head {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 9px 14px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pipe) 30%, #000) 0%,
        color-mix(in srgb, var(--pipe) 14%, #000) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--pipe) 45%, transparent);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pipe);
}

.pipeline__table th {
    padding: 8px 10px;
    background: #0c0c10;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    text-align: left;
}

.pipeline__table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    vertical-align: middle;
}
.pipeline__table tr:last-child td { border-bottom: 0; }
.pipeline__table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.pipeline__table .num { text-align: center; width: 58px; }
.pipeline__table .empty { color: var(--muted); text-align: center; padding: 18px; }

.pipeline__sale { font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 12.5px; }
.pipeline__salesub { display: block; font-size: 10px; color: var(--muted); text-transform: none; letter-spacing: 0.03em; }

.pipeline__deadline {
    width: 92px;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.band-ok      .pipeline__deadline { color: var(--green); }
.band-soon    .pipeline__deadline { color: var(--pink); }
.band-urgent  .pipeline__deadline { color: var(--amber); }
.band-overdue .pipeline__deadline { color: var(--red); }
.band-none    .pipeline__deadline { color: var(--muted); }
.band-done    .pipeline__deadline { color: var(--green); }

.pipeline__more { display: block; padding: 8px 12px; font-size: 11.5px; color: var(--accent); text-align: center; }

/* The unified Orders board: one box, every live order, scrolls instead of "+N more". */
.ordersbox { display: flex; flex-direction: column; min-width: 0; }
.ordersbox__meta {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-2);
    text-transform: none;
}
.ordersbox__scroll {
    overflow-y: auto;
    max-height: min(56vh, 640px);
    /* Accent thumb on a faint track so it's obvious the orders list scrolls -
       the old surface-3 thumb was near-invisible against the dark board. */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--surface-2);
}
.ordersbox__scroll::-webkit-scrollbar { width: 10px; }
.ordersbox__scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 5px; }
.ordersbox__scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 5px; }
.ordersbox__scroll thead th { position: sticky; top: 0; z-index: 2; }
.ordersbox__station { font-size: 12.5px; font-weight: 600; }
.ordersbox__state--running { color: var(--blue); }
.ordersbox__state--queued { color: var(--text-2); }
.ordersbox__state--waiting { color: var(--amber); }

body.is-wall .ordersbox__scroll { max-height: min(62vh, 900px); }

/* --------------------------------------------------------------- dots --- */

.dots { display: inline-flex; align-items: center; gap: 0; }

.dot {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid #3a3a46;
    background: #0d0d11;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
    position: relative;
    flex: none;
}
.dots .dot + .dot { margin-left: 6px; }
.dots .dot + .dot::before {
    content: "";
    position: absolute;
    right: 100%;
    width: 6px;
    height: 1.5px;
    background: #2c2c36;
}

.dot.is-done { border-color: transparent; }
.dot--ok.is-done      { background: var(--green); }
.dot--soon.is-done    { background: var(--pink); }
.dot--urgent.is-done  { background: var(--amber); }
.dot--overdue.is-done { background: var(--red); }
.dot--done.is-done    { background: var(--green); }
.dot--none.is-done    { background: #55555f; }

.dot.is-working { border-color: currentColor; animation: pulse 1.4s ease-in-out infinite; }
.dot--ok.is-working      { color: var(--green); }
.dot--soon.is-working    { color: var(--pink); }
.dot--urgent.is-working  { color: var(--amber); }
.dot--overdue.is-working { color: var(--red); }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 3px transparent; opacity: 0.55; }
}

/* ------------------------------------------------------------- legend --- */

.legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    padding: 10px;
    margin-bottom: 12px;
}
.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.legend__item--muted { color: var(--muted); }
.legend .dot { width: 13px; height: 13px; border-color: transparent; }
.legend .dot--ok      { background: var(--green); }
.legend .dot--soon    { background: var(--pink); }
.legend .dot--urgent  { background: var(--amber); }
.legend .dot--overdue { background: var(--red); }
.legend .dot--working { background: transparent; border: 1.5px solid var(--text-2); }
.legend .dot + .dot::before { display: none; }

/* --------------------------------------------------------- stageboard --- */

.stageboard { display: grid; gap: 12px; }

.stagerow {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 10px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--pipe) 40%, transparent);
    border-radius: var(--radius-lg);
}

.stagerow__label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    border-right: 1px solid var(--line);
}
.stagerow__index {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pipe);
}
.stagerow__name {
    font-family: var(--display);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.stagerow__units { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }

.stagerow__stages {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    cursor: grab;              /* mouse users can drag-pan like a finger */
    -webkit-overflow-scrolling: touch;
}
.stagerow__stages.is-dragging { cursor: grabbing; user-select: none; }

.stagearrow { display: grid; place-items: center; color: #4a4a58; font-size: 17px; flex: none; }

.stage {
    flex: 1 1 0;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--pipe) 35%, transparent);
    border-radius: var(--radius);
    overflow: hidden;
}

.stage__head {
    padding: 7px 8px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pipe) 26%, #000) 0%,
        color-mix(in srgb, var(--pipe) 12%, #000) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--pipe) 35%, transparent);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

.stage__counts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 6px 4px; }
.stage__count { text-align: center; }
.stage__countlabel {
    display: block;
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-2);
}
.stage__countvalue { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.1; }
.stage__countvalue--work { color: var(--blue); }

.stage__actions { display: flex; gap: 5px; padding: 6px; margin-top: auto; }
.stage__actions .btn { padding: 7px 6px; font-size: 11px; letter-spacing: 0.06em; }

/* --------------------------------------------------------- wall mode --- */

body.is-wall .mainnav,
body.is-wall .pagefoot { display: none; }
body.is-wall .board-main { padding: 10px 14px; }

/* The way back out: a quiet floating button, wall mode only (Esc also works). */
.wall-exit { display: none; }
body.is-wall .wall-exit {
    display: inline-flex;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 70;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}
body.is-wall .wall-exit:hover { opacity: 1; color: var(--text); }

/* ------------------------------------------------------------- modals --- */

.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.72); }

.modal__panel {
    position: relative;
    width: min(560px, 100%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.modal__title {
    font-family: var(--display);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.modal__close {
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.modal__close:hover { color: var(--text); }
.modal__body { padding: 12px 16px 16px; overflow-y: auto; }

.pick { display: grid; gap: 8px; }
.pickitem {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.pickitem:hover { border-color: var(--accent); background: var(--surface-3); }
.pickitem__name { font-weight: 700; letter-spacing: 0.02em; }
.pickitem__meta { grid-column: 1; color: var(--muted); font-size: 11.5px; }
.pickitem__due {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.pickitem.band-ok      .pickitem__due { color: var(--green); }
.pickitem.band-soon    .pickitem__due { color: var(--pink); }
.pickitem.band-urgent  .pickitem__due { color: var(--amber); }
.pickitem.band-overdue .pickitem__due { color: var(--red); }

.pick__empty { padding: 22px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ toaster --- */

.toaster { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 8px; }
.toast {
    padding: 11px 16px;
    border-radius: var(--radius);
    background: var(--surface-3);
    border-left: 3px solid var(--accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    animation: toastin 0.18s ease;
}
.toast--success { border-left-color: var(--green); }
.toast--error   { border-left-color: var(--red); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ flashes --- */

.flashes { padding: 10px 22px 0; display: grid; gap: 8px; }
.flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    font-size: 13px;
}
.flash--success { border-left-color: var(--green); }
.flash--error   { border-left-color: var(--red); }

/* ---------------------------------------------------------- auth page --- */

body.is-auth { display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #15151c 0%, #000 60%); }

.authwrap { width: min(430px, 92vw); padding: 30px 0; }
.authwrap--wide { width: min(880px, 94vw); }

.authcard {
    display: grid;
    gap: 14px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.authcard--wide { gap: 12px; }

.authcard__brand { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--display); font-size: 30px; font-weight: 800; text-transform: uppercase; }
.authcard__brand img { max-height: 54px; }
.authcard__title { font-family: var(--display); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.authcard__note { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.authfoot { text-align: center; color: var(--muted); font-size: 12px; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.checklist__item { display: flex; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.checklist__item.is-ok span  { color: var(--green); font-weight: 800; }
.checklist__item.is-bad      { color: #ff8f80; }
.checklist__item.is-bad span { color: var(--red); font-weight: 800; }

/* -------------------------------------------------------------- forms --- */

.field { display: grid; gap: 5px; }
.field__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.field__hint { font-size: 11.5px; color: var(--muted); }
.field__error { font-size: 11.5px; color: #ff8f80; }

.field__input {
    width: 100%;
    padding: 9px 11px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
}
.field__input:focus { outline: none; border-color: var(--accent); }
/* If a browser still autofills a field (e.g. a saved login picked by hand), keep
   it on the dark theme instead of the browser's white box, so it lines up with
   the other inputs rather than looking like a stray, misaligned field. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-soft) inset;
    caret-color: var(--text);
    transition: background-color 600000s 0s, color 600000s 0s;
}
textarea.field__input { min-height: 90px; resize: vertical; }
select.field__input { appearance: none; background-image: none; }

/* File picker: the browser's default control is a bare grey OS button that looks
   out of place on the dark theme. Style the field and its button to match the
   other inputs so the "attach files" row reads as a designed control. */
input[type="file"].field__input {
    padding: 8px 11px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}
input[type="file"].field__input::file-selector-button {
    margin-right: 12px;
    padding: 7px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
input[type="file"].field__input::file-selector-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* align-items:start keeps every field top-aligned so the inputs line up on one
   row even when some fields carry a hint (e.g. "Minimum 8 characters") that makes
   their cell taller - without it the grid stretches each cell and the hint pushes
   its input off the shared baseline. */
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: start; }
/* In a multi-column grid, a label that wraps to two lines would push its own
   input below the one-line labels beside it. Reserving two lines for every grid
   label keeps all the inputs on a row on the same baseline, so the form reads as
   an even grid rather than a staggered one. */
.formgrid .field__label { min-height: 2.6em; line-height: 1.3; display: flex; align-items: flex-end; }
.formsection {
    margin-top: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 13.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-2); }
.checkbox input { margin-top: 3px; }

.formactions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }

/* -------------------------------------------------------- admin pages --- */

.pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pagehead__title { font-family: var(--display); font-size: 24px; letter-spacing: 0.05em; text-transform: uppercase; }
.pagehead__sub { color: var(--muted); font-size: 12.5px; }
.pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}
.card__head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.card__body { padding: 16px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filters .field { min-width: 150px; }

.datatable th {
    padding: 10px 14px;
    background: #0c0c10;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    text-align: left;
    white-space: nowrap;
}
.datatable td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.datatable tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.datatable .num { text-align: center; }
.datatable__empty { padding: 30px; text-align: center; color: var(--muted); }
.tablewrap { overflow-x: auto; }

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--surface-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.tag--ok      { background: rgba(70, 198, 95, 0.16);  color: #7fe094; }
.tag--soon    { background: rgba(236, 74, 134, 0.16); color: #ff8ab4; }
.tag--urgent  { background: rgba(240, 144, 42, 0.16); color: #ffb469; }
.tag--overdue { background: rgba(242, 71, 47, 0.16);  color: #ff8f80; }
.tag--done    { background: rgba(59, 157, 255, 0.16); color: #8ac6ff; }
.tag--pipe    { background: color-mix(in srgb, var(--pipe, #666) 22%, transparent); color: var(--pipe, #ccc); }
.tag--rush    { background: var(--accent); color: #14140c; }

.progressbar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 84px; }
.progressbar__fill { height: 100%; background: var(--accent); }

.stack { display: grid; gap: 3px; }
.stack__main { font-weight: 600; }
.stack__sub  { color: var(--muted); font-size: 11.5px; }

.rowactions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.timeline { display: grid; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.timeline__item:last-child { border-bottom: 0; }
.timeline__when { color: var(--muted); font-size: 12px; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.stat__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.stat__value { display: block; font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1.15; }
.stat__sub { color: var(--muted); font-size: 11.5px; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 10px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars__bar { width: 100%; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000)); border-radius: 3px 3px 0 0; min-height: 2px; }
.bars__label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.bars__value { font-size: 11px; font-weight: 700; }

/* ----------------------------------------------------------- stations --- */

.stationgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.stationcard {
    display: grid;
    gap: 8px;
    padding: 18px 16px;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--pipe, #666) 40%, transparent);
    border-radius: var(--radius-lg);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.stationcard:hover { border-color: var(--pipe, var(--accent)); background: var(--surface-3); color: inherit; }
.stationcard__name {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pipe, var(--text));
}
.stationcard__load { display: grid; gap: 2px; font-size: 12.5px; color: var(--text-2); }
.stationcard__load strong { color: var(--text); }

/* The department screen itself: large text, large targets, tablet-first. */

.station { max-width: 1080px; margin: 0 auto; }

.station__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 2px solid color-mix(in srgb, var(--pipe, #666) 55%, transparent);
}
.station__title {
    font-family: var(--display);
    font-size: clamp(26px, 4vw, 40px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pipe, var(--text));
}
.station__pipeline { margin: 2px 0 0; color: var(--text-2); font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; }

.station__summary {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 10px;
    margin-bottom: 18px;
}
.station__stat {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}
.station__statlabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.station__statvalue { display: block; font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1.1; }
.station__statvalue--work { color: var(--blue); }
.station__statsub { color: var(--muted); font-size: 12px; }

.station__section { margin-bottom: 22px; }
.station__heading {
    font-family: var(--display);
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 10px;
}
.station__empty {
    padding: 26px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

.jobrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 5px;
    border-radius: var(--radius-lg);
}
.jobrow.band-ok      { border-left-color: var(--green); }
.jobrow.band-soon    { border-left-color: var(--pink); }
.jobrow.band-urgent  { border-left-color: var(--amber); }
.jobrow.band-overdue { border-left-color: var(--red); }

.jobrow__info { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.jobrow__name {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.jobrow__meta { color: var(--text-2); font-size: 14px; }
.jobrow__meta strong { color: var(--text); }

.jobrow__due {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.jobrow.band-ok      .jobrow__due { color: var(--green); }
.jobrow.band-soon    .jobrow__due { color: var(--pink); }
.jobrow.band-urgent  .jobrow__due { color: var(--amber); }
.jobrow.band-overdue .jobrow__due { color: var(--red); }
.jobrow.band-none    .jobrow__due { color: var(--muted); }

.jobrow__btn { padding: 16px 30px; font-size: 16px; min-width: 160px; }

@media (max-width: 720px) {
    .station__summary { grid-template-columns: 1fr 1fr; }
    .station__stat--wide { grid-column: 1 / -1; }
    .jobrow { flex-direction: column; align-items: stretch; text-align: left; }
    .jobrow__btn { width: 100%; }
}

/* --------------------------------------------------------- driver app --- */

.driverapp { max-width: 640px; margin: 0 auto; }
.driverapp__head { margin-bottom: 14px; }
.driverapp__title {
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.driverapp__gps {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: rgba(59, 157, 255, 0.14);
    color: #8ac6ff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dropcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
}
.dropcard--out_for_delivery { border-color: var(--blue); }
.dropcard--delivered { opacity: 0.75; }

.dropcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dropcard__name {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dropcard__status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}
.dropcard__meta { display: grid; gap: 3px; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.dropcard__meta strong { color: var(--text); }
.dropcard__meta a { color: var(--accent); }

.dropcard__live {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: rgba(59, 157, 255, 0.12);
    color: #8ac6ff;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.dropcard__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dropcard__btn { flex: 1; padding: 16px 12px; font-size: 16px; }
.dropcard__btn--small { flex: 0 1 auto; padding: 16px 18px; font-size: 13px; }

.proofform { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.proofform__canvas {
    width: 100%;
    height: 140px;
    border-radius: var(--radius);
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.jobrow--done { opacity: 0.7; border-left-color: var(--green); }

/* A row that just arrived in the queue - flashes with the arrival beep. */
.jobrow.is-new { animation: rowarrive 1.1s ease 3; }
@keyframes rowarrive {
    0%, 100% { background: var(--surface); }
    50%      { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); }
}

/* ---------------------------------------------- capacity traffic lights --- */

.light {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    vertical-align: middle;
    background: #3a3a46;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}
.light--green { background: radial-gradient(circle at 35% 30%, #7fe094, var(--green)); box-shadow: 0 0 8px rgba(70, 198, 95, 0.55); }
.light--amber { background: radial-gradient(circle at 35% 30%, #ffc879, var(--amber)); box-shadow: 0 0 8px rgba(240, 144, 42, 0.55); }
.light--red   { background: radial-gradient(circle at 35% 30%, #ff8f80, var(--red));   box-shadow: 0 0 8px rgba(242, 71, 47, 0.6); }
.light--none  { opacity: 0.35; }

.capacity-input { max-width: 110px; text-align: right; display: inline-block; }

/* ----------------------------------- SYSTEMS BY S3 Phase 1 components --- */

/* Touchable wallboard KPI tiles (50-inch touchscreen) */
.kpi--touch {
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    font-family: var(--display);
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}
.kpi--touch:hover { background: rgba(255, 255, 255, 0.04); }
.kpi--touch:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.07); }
.kpi--touch.is-open { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 -3px 0 var(--accent); }
.kpis--touch { grid-template-columns: repeat(7, 1fr); }

.kpipanel {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    overflow: hidden;
    animation: panelin 0.16s ease;
}
@keyframes panelin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kpipanel__head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.kpipanel__title { font-family: var(--display); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
.kpipanel__close {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
    color: var(--text); font-size: 14px; font-weight: 700; padding: 10px 18px; cursor: pointer;
}
.kpipanel__close:active { transform: scale(0.96); }
.datatable--board td { font-size: 14px; padding: 12px 14px; }
.row--overdue td { background: rgba(242, 71, 47, 0.07); }

.failgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 14px; }
.failcard { background: var(--surface-2); border: 1px solid rgba(242, 71, 47, 0.5); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 8px; }
.failcard__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.failcard__nums { display: flex; gap: 16px; font-size: 13px; }
.failcard__meta { font-size: 12px; color: var(--text-2); }
.failcard__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Station capacity strip */
.capstrip {
    display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 12px 18px; margin-bottom: 16px;
}
.capstrip--over { border-color: var(--red); }
.capstrip__cell { display: grid; }
.capstrip__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.capstrip__value { font-family: var(--display); font-size: 24px; font-weight: 800; }
.capstrip__warn { margin-left: auto; font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--red); letter-spacing: 0.04em; }

.station__count {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
    border-radius: 14px; background: var(--surface-3); font-size: 13px; margin-left: 6px;
}

/* Job card action panel (estimate / buttons / countdown) */
.jobrow__panel {
    flex-basis: 100%;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 12px; margin-top: 10px; border-top: 1px dashed var(--line);
}
.jobrow__route strong { color: var(--accent); }
.jobrow__files { display: flex; gap: 6px; flex-wrap: wrap; }
.jobrow__openlink { font-size: 12px; color: var(--accent); }

/* --------------------------------------------- outsource desk forms --- */
/* Each action sits in its own dashed panel (.jobrow__panel). Inside, one row of
   label+input fields keeps its button on the same baseline as the inputs
   (align-items:flex-end bottom-aligns every field, so the inputs line up however
   a label wraps), and every explanatory line drops to a single muted note
   beneath the row - which is what stops the old per-field hints from pushing the
   inputs and buttons out of alignment. Buttons share one size, set to the input
   height so they sit level with them. */
.jobrow__panel.osform { display: block; }
.osform__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
}
.osform__row--minor { align-items: center; gap: 10px; }
.osform .field { margin: 0; }
.osform .field__label { min-height: 1.35em; }
.osform .btn { min-height: 38px; padding: 9px 16px; }
.osform__go { min-width: 160px; }
.osform__note {
    margin: 9px 0 0;
    max-width: 780px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--muted);
}
.osform__note strong { color: var(--text-2); font-weight: 700; }
.filechip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 14px; background: var(--surface-3);
    font-size: 11.5px; color: var(--text-2); border: 1px solid var(--line);
}
.filechip:hover { color: var(--text); border-color: var(--accent); }

/* Manual time estimate control: − 0.00 HRS + */
.est { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.est__btn {
    width: 58px; height: 58px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--surface-3);
    color: var(--text); font-size: 30px; font-weight: 800; cursor: pointer;
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
.est__btn:active { background: var(--accent); color: #14140c; }
.est__value { font-family: var(--display); font-size: 34px; font-weight: 800; min-width: 96px; text-align: center; }
.est__unit { font-family: var(--display); font-size: 15px; color: var(--text-2); font-weight: 800; }
.est__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.est__quick { display: flex; gap: 6px; }
.est__human { font-size: 13px; color: var(--text-2); }
.est--auto .est__value { font-size: 26px; min-width: 0; }

/* Countdown */
.countdown {
    font-family: var(--display); font-size: 30px; font-weight: 800;
    letter-spacing: 0.04em; color: var(--blue); min-width: 170px;
    font-variant-numeric: tabular-nums;
}
.countdown--over { color: var(--red); animation: pulse 1.2s ease-in-out infinite; }
.countdown--small { font-size: 16px; min-width: 0; }

.btn--fail { background: var(--red); color: #fff; }
.btn--fail:hover:not(:disabled) { background: #ff6046; }

/* FAILED bottom sheet */
/* Centred modal (was a bottom sheet). Centring plus a scrollable panel keeps the
   RECORD FAILURE button reachable on small/older tablets, where a bottom-anchored
   sheet pushed it off the screen. */
.failsheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.failsheet[hidden] { display: none; }
.failsheet__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.75); }
.failsheet__panel {
    position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface); border: 1px solid var(--red);
    border-radius: var(--radius-lg); padding: 20px; display: grid; gap: 14px;
}
.failsheet__title { font-family: var(--display); font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); }
.failsheet__order { margin: 0; color: var(--text-2); }
.qtystep { display: flex; gap: 8px; align-items: center; }
.qtystep__input { max-width: 110px; text-align: center; font-size: 22px !important; font-weight: 800; }

/* Route builder (order form) */
.routebuilder__list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.routebuilder__item {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 8px 12px;
}
.routebuilder__pos {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #14140c; font-weight: 800; font-size: 13px; flex: none;
}
.routebuilder__name { font-weight: 700; letter-spacing: 0.03em; }
.routebuilder__controls { margin-left: auto; display: flex; gap: 4px; }

/* Manager alerts */
.alertrow {
    display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--surface-2); border-left: 4px solid var(--line); border-radius: var(--radius);
}
.alertrow--critical { border-left-color: var(--red); background: rgba(242, 71, 47, 0.08); }
.alertrow--warning { border-left-color: var(--amber); }
.alertrow--info { border-left-color: var(--blue); }
.alertrow--seen { opacity: 0.55; }
.alertrow__body { display: grid; gap: 3px; }

/* Compact phone cards: the 8 stations sit 3-up instead of a long column. */
@media (max-width: 720px) {
    .stationcaps { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 7px; padding: 9px; }
    .stationcap { padding: 9px 9px 8px; gap: 2px; }
    .stationcap__name { min-height: 26px; font-size: 10.5px; }
    .stationcap__left { font-size: 15px; }
    .stationcap__row { font-size: 9.5px; }
    .stationcap__row strong { font-size: 14px; }
    .deliverytile__value { font-size: 30px; }
}

/* ----------------------------------- Live Board: STATIONS CAPACITY --- */

.capsection { margin-bottom: 0; }

.stationcaps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding: 12px;
}

.stationcap {
    display: grid;
    gap: 4px;
    padding: 14px 14px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: left;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.08s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.stationcap:hover { border-color: var(--accent); background: var(--surface-3); }
.stationcap:active { transform: scale(0.97); }

.stationcap__name {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-height: 34px;
}
.stationcap__caplabel {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
}
.stationcap__left {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.stationcap__left--green  { color: var(--green); }
.stationcap__left--orange { color: var(--amber); }
.stationcap__left--red    { color: var(--red); }
.stationcap__over { font-size: 12px; font-weight: 700; color: var(--red); }

.stationcap__bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin: 3px 0 6px;
}
.stationcap__fill { display: block; height: 100%; border-radius: 3px; }
.stationcap__fill--green  { background: var(--green); }
.stationcap__fill--orange { background: var(--amber); }
.stationcap__fill--red    { background: var(--red); }

.stationcap__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-2);
}
.stationcap__row strong { font-family: var(--display); font-size: 19px; color: var(--text); }
.stationcap__active { color: var(--blue) !important; }

/* Delivery overview tiles */
.deliverytiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.deliverytile {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 18px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}
.deliverytile:hover { border-color: var(--accent); }
.deliverytile:active { transform: scale(0.97); }
.deliverytile__label {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}
.deliverytile__value { font-family: var(--display); font-size: 42px; font-weight: 800; line-height: 1; }
.deliverytile__sub { font-size: 11px; color: var(--muted); }

/* View-only touch windows */
.boardwin { display: grid; gap: 8px; }
.boardwin__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.boardwin__stat {
    display: grid;
    gap: 2px;
    padding: 10px;
    background: var(--surface-2);
    border-radius: var(--radius);
    text-align: center;
}
.boardwin__stat strong { font-family: var(--display); font-size: 20px; }
.boardwin__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.boardwin__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
}
.boardwin__row.band-overdue { border-left-color: var(--red); }
.boardwin__row.band-urgent  { border-left-color: var(--amber); }
.boardwin__row.band-soon    { border-left-color: var(--pink); }
.boardwin__row.band-ok      { border-left-color: var(--green); }
.boardwin__info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.boardwin__name { font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.boardwin__meta { font-size: 12px; color: var(--text-2); }
.boardwin__close { margin-top: 8px; padding: 14px; font-size: 15px; }

.stage--over { border-color: var(--red); }
.stage__capline {
    display: block;
    padding: 5px 6px; text-align: center; font-size: 11px; font-weight: 700;
    color: var(--text-2); border-top: 1px solid var(--line-soft); letter-spacing: 0.04em;
}
.stage__capline--over { color: var(--red); }
a.stage__capline:hover { color: var(--text); }

/* Each count deep-links into its own station section. */
a.stage__head { display: block; }
a.stage__head:hover { color: #fff; }
a.stage__count { border-radius: 5px; padding: 3px 0 4px; transition: background 0.1s ease; }
a.stage__count:hover { background: rgba(255, 255, 255, 0.08); color: inherit; }
a.stage__count:active { background: rgba(255, 255, 255, 0.14); }

/* Landing on a section anchor: clear the fixed header and flash the heading. */
.station__section { scroll-margin-top: 88px; }
.station__section:target > .station__heading { animation: sectionflash 1s ease 3; }
@keyframes sectionflash {
    50% { color: var(--accent); }
}

@media (max-width: 1180px) {
    .kpis--touch { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1180px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .kpi:nth-child(3n) { border-right: 0; }
    .board-grid { grid-template-columns: 1fr; }
    /* A portrait tablet is tall enough that 56vh fits every order, so the panel
       never scrolls - it just grows into one long list. Cap it tighter here so
       the orders box stays a fixed ~7-row scrollable window, like the desktop. */
    .ordersbox__scroll { max-height: min(52vh, 400px); }
    .reps { display: flex; flex-wrap: wrap; }
    .reps__title { width: 100%; }
    .rep { flex: 1 1 140px; border-bottom: 0; border-right: 1px solid var(--line-soft); }
    .stagerow { grid-template-columns: 1fr; }
    .stagerow__label { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: baseline; gap: 10px; }
}

/* Phones. Goal: nothing scrolls sideways except things designed to (tables,
   stage strips), touch targets stay big, and iOS does not zoom into inputs. */
@media (max-width: 720px) {

    /* -- header: brand left, clock right, headline underneath -- */
    .topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 2px 12px;
        padding: 10px 14px;
    }
    .brand { font-size: 19px; order: 1; }
    .brand__logo { max-height: 30px; }
    .topbar__right { order: 2; }
    .clock { display: flex; align-items: baseline; gap: 8px; }
    .clock__time { font-size: 17px; }
    .clock__date { font-size: 10px; }
    .topbar__title {
        order: 3;
        width: 100%;
        text-align: left;
        font-size: 13px;
        letter-spacing: 0.06em;
        color: var(--text-2);
        white-space: normal;
    }

    /* -- nav: one horizontal swipe strip instead of a pile -- */
    .mainnav__grouplabel { display: none; }
    .mainnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding: 8px 14px;
        scrollbar-width: none;
    }
    .mainnav::-webkit-scrollbar { display: none; }
    .mainnav__links { flex-wrap: nowrap; }
    .mainnav__link { white-space: nowrap; padding: 8px 11px; }
    .mainnav__meta { flex: none; }
    .userchip__name { display: none; }

    .board-main { padding: 10px 12px 20px; }
    .page-main { padding: 14px 12px; }
    .flashes { padding: 8px 12px 0; }

    /* -- KPI strip: compact -- */
    .kpis, .kpis--touch { grid-template-columns: repeat(3, 1fr); }
    .kpi { padding: 8px 4px 10px; border-bottom: 1px solid var(--line); }
    .kpi:nth-child(3n) { border-right: 0; }
    .kpi:nth-child(n+4) { border-bottom: 0; }
    .kpi__label { font-size: 9.5px; letter-spacing: 0.06em; }
    .kpi__value { font-size: 24px; }

    /* -- pipeline tables: tighter type, smaller dots, own scroll if needed -- */
    .pipeline { overflow-x: auto; }
    .pipeline__table { min-width: 300px; }
    .pipeline__table th { padding: 6px 7px; font-size: 10.5px; }
    .pipeline__table td { padding: 7px; font-size: 12px; }
    .pipeline__sale { font-size: 11.5px; }
    .pipeline__deadline { width: 68px; font-size: 11px; }
    .pipeline__table .num { width: 44px; }
    .dot { width: 14px; height: 14px; font-size: 8px; }
    .dots .dot + .dot { margin-left: 4px; }
    .dots .dot + .dot::before { width: 4px; }

    .legend { gap: 10px 16px; padding: 8px 0; }
    .legend__item { font-size: 10.5px; }

    /* -- rep chips -- */
    .rep { padding: 9px 12px; }
    .rep__name { font-size: 13.5px; }
    .rep__count { font-size: 10.5px; }

    /* -- stage strips already swipe; keep cells thumb-sized -- */
    .stage { min-width: 148px; }
    .stage__actions .btn { padding: 10px 6px; }
    .stagerow__label { flex-wrap: wrap; padding: 6px 10px; }

    /* -- admin tables and cards -- */
    .pagehead__title { font-size: 19px; }
    .datatable th { padding: 8px 10px; font-size: 10px; }
    .datatable td { padding: 9px 10px; font-size: 12.5px; }
    .card__body { padding: 13px; }
    .filters { padding: 12px; }
    .filters .field { min-width: calc(50% - 5px); flex: 1; }
    .statgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat { padding: 10px 12px; }
    .stat__value { font-size: 24px; }
    .timeline__item { grid-template-columns: 1fr; gap: 2px; }
    .rowactions { justify-content: flex-start; }

    /* -- reports bar chart swipes instead of squashing 14 days -- */
    .bars { overflow-x: auto; padding-bottom: 6px; }
    .bars__col { min-width: 34px; }

    /* -- forms: 16px inputs stop iOS zooming the page on focus -- */
    .field__input { font-size: 16px; padding: 10px 12px; }
    .btn { padding: 10px 14px; }
    .btn--sm { padding: 7px 10px; }

    /* -- modal: use the whole width -- */
    .modal { padding: 10px; align-items: flex-end; display: flex; }
    .modal[hidden] { display: none; }
    .modal__panel { width: 100%; max-height: 88vh; }
    .pickitem { padding: 13px 12px; }
}

@media print {
    .mainnav, .stage__actions, .toaster, .modal { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ==========================================================================
   NEW ORDER WIZARD
   Sales reps use this on a phone as often as a desktop, so every control is a
   large tap target and the whole thing is one scrolling column.
   ========================================================================== */

/* Centred: .page-main runs up to 1500px, so a 900px column pinned left just
   looks abandoned on a desktop. The heading takes the same width so the two
   line up instead of the "My orders" button drifting off to the far edge. */
.wizard,
.pagehead--narrow { max-width: 900px; margin-inline: auto; }
.wizard { display: grid; gap: 14px; }
.wizard__resume {
    padding: 10px 14px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text-2); font-size: 13px;
}
.wizard__saved { color: var(--muted); font-size: 12px; text-align: center; min-height: 16px; }

.wstep {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px;
}
.wstep__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.wstep__num {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-2);
    font-family: var(--display); font-weight: 800; font-size: 14px;
}
.wstep__title {
    font-family: var(--display); font-size: 17px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.wstep__hint { color: var(--text-2); font-size: 13px; margin: 6px 0 12px; }
.wstep__private {
    margin-left: auto; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
    padding: 3px 8px; border-radius: 12px;
}
.wstep__error { color: var(--red); font-size: 13px; margin: 8px 0 0; min-height: 1px; }
.wstep__badge {
    margin-left: auto; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 12px; font-weight: 700;
}
.wstep__badge--ok   { color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.wstep__badge--warn { color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.wstep__badge--bad  { color: var(--red);   border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }

/* Two big buttons - the only way to answer steps 1 and 2. */
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.choice__btn {
    display: grid; place-items: center; gap: 8px;
    padding: 26px 16px; cursor: pointer;
    background: var(--surface-2); color: var(--text-2);
    border: 2px solid var(--line); border-radius: var(--radius-lg);
    font-family: var(--display); letter-spacing: 0.06em;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.choice__btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.choice__btn.is-on {
    border-color: var(--accent); color: var(--text);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}
.choice__icon { font-size: 26px; line-height: 1; color: var(--accent); }
.choice__label { font-size: 15px; font-weight: 800; }

/* Upload zones. */
.drop {
    position: relative;
    display: grid; place-items: center; gap: 6px;
    padding: 26px 16px; cursor: pointer; text-align: center;
    border: 2px dashed var(--line); border-radius: var(--radius-lg);
    background: var(--bg-soft); color: var(--text-2);
}
.drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-soft)); }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop__icon { font-size: 24px; color: var(--accent); }
.drop__text { font-size: 13px; }
.drop__btn { pointer-events: none; }

.filelist { display: grid; gap: 6px; margin-top: 10px; }
.fileitem {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius);
    background: var(--surface-3); border: 1px solid var(--line);
}
.fileitem.is-busy { opacity: 0.6; }
.fileitem__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fileitem__size { color: var(--muted); font-size: 12px; }
.fileitem__x {
    width: 30px; height: 30px; flex: none; cursor: pointer;
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text-2); font-size: 17px; line-height: 1;
}
.fileitem__x:hover { color: var(--red); border-color: var(--red); }

.scanning { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--accent); font-size: 13px; }
.scanning__spin {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-top-color: var(--accent);
    animation: scanspin .8s linear infinite;
}
@keyframes scanspin { to { transform: rotate(360deg); } }

/* A field the scan was unsure about is tinted, never blocked. */
.field__input.is-unsure { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.field__input.is-bad    { border-color: var(--red); }
.field__hint--warn      { color: var(--amber); }
.field--wide            { grid-column: 1 / -1; }

.confirmbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.confirmbar .btn { flex: 1 1 190px; padding: 14px 18px; }
.btn--complete.is-on { background: var(--btn-done); border-color: var(--btn-done); color: #fff; }

/* Route picker: tap to add, arrows to reorder. No drag - this is a touchscreen. */
.routepick { list-style: none; display: grid; gap: 6px; margin: 0 0 12px; padding: 0; }
.routepick__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius);
    background: var(--surface-3); border: 1px solid var(--line);
}
.routepick__num {
    display: grid; place-items: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #14140f;
    font-family: var(--display); font-weight: 800; font-size: 13px;
}
.routepick__name { flex: 1; font-family: var(--display); letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; }
.routepick__move, .routepick__x {
    width: 34px; height: 34px; flex: none; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text-2); font-size: 15px; line-height: 1;
}
.routepick__move:disabled { opacity: 0.3; cursor: default; }
.routepick__x:hover { color: var(--red); border-color: var(--red); }
.routepick__empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }

.stationpick { display: flex; flex-wrap: wrap; gap: 8px; }
.stationpick__btn {
    padding: 12px 16px; cursor: pointer;
    background: var(--surface-2); color: var(--text-2);
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--display); letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px;
}
.stationpick__btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--text); }
.stationpick__btn.is-on {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    border-color: var(--accent); color: var(--text);
}

/* Summary and the one big button. */
.wstep--summary { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.summary { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.summary__row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 13px; background: var(--surface-2); font-size: 13px;
}
.summary__row span { color: var(--text-2); }
.summary__row strong { font-family: var(--display); letter-spacing: 0.04em; text-align: right; }
.summary__row strong.is-missing { color: var(--muted); font-weight: 400; }

.btn--submit {
    display: grid; gap: 2px; width: 100%; padding: 18px 20px; cursor: pointer;
    background: var(--accent); color: #14140f;
    border: none; border-radius: var(--radius-lg);
}
.btn--submit:hover { filter: brightness(1.08); }
.btn--submit:disabled { opacity: 0.6; cursor: default; }
.btn--submit .btn__main {
    font-family: var(--display); font-size: 18px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.btn--submit .btn__sub { font-size: 12px; opacity: 0.75; }

/* The secondary "Save as draft" action under Submit: same full-width block as
   btn--submit, but a quiet surface so Submit stays the obvious primary. */
.btn--draft {
    display: grid; gap: 2px; width: 100%; padding: 14px 20px; margin-top: 10px; cursor: pointer;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.btn--draft:hover { border-color: var(--text-2); }
.btn--draft:disabled { opacity: 0.6; cursor: default; }
.btn--draft .btn__main {
    font-family: var(--display); font-size: 15px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.btn--draft .btn__sub { font-size: 12px; opacity: 0.7; }

@media (max-width: 720px) {
    .wstep { padding: 14px; border-radius: var(--radius); }
    .choice__btn { padding: 20px 12px; }
    .stationpick__btn { flex: 1 1 45%; }
    .summary__row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .summary__row strong { text-align: left; }
}

/* Unread-message bell in the top bar. */
.bell {
    position: relative;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    text-decoration: none;
}
.bell:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--text); }
.bell__icon { font-size: 17px; line-height: 1; }
.bell__count {
    position: absolute; top: -5px; right: -5px;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: none; place-items: center;
    border-radius: 10px;
    background: var(--red); color: #fff;
    font-family: var(--display); font-size: 11px; font-weight: 800;
}
.bell.has-unread .bell__count { display: grid; }

/* Live Board: the running job's countdown, mirroring the station tablet. */
.ordersbox__timer { white-space: nowrap; }
.ordersbox__timer .countdown {
    font-size: 17px;
    min-width: 0;
    color: var(--blue);
}
.ordersbox__timer .countdown--over { color: var(--red); }
.ordersbox__notimer {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Outside opening hours a station has no capacity to give - that is not the
   same as being over capacity, and must not be coloured like a problem. */
.stationcap__left--closed { color: var(--muted); font-size: 15px; }