/*
 * Kitchen Display: one card per order (js/pages/kds.js). --ds-* tokens only.
 *
 * Read at arm's length across a counter with wet or gloved hands: the
 * destination and the dishes are large, every press is a full-width target
 * at least 48px tall, and the board is the one thing on the page that
 * scrolls, so a cook never loses the list behind a second scroll bar.
 */

.kds-page {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    background: var(--ds-canvas);
    /* The shell bounds the height; fill it, no calc(100vh - n). */
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* A full-bleed page: the shell gives it no gutter, and design-system.css
   zeroes every page root's own padding, so the board sat flush against the
   sidebar. This file loads after that rule and wins it at the same weight. */
.page-content > .kds-page {
    padding: var(--ds-space-3) var(--ds-space-6) var(--ds-space-4);
}

/* The flex gap spaces the parts; components.css's 24px document rhythm on
   top of it left a 40px band above the board. */
.page-content > .kds-page > * + * {
    margin-top: 0;
}

/* ---- Stations and the count ---- */

.kds-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ds-space-4);
}

.kds-stations {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

.kds-station {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-touch-target);
    padding: var(--ds-space-2) var(--ds-space-4);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font: inherit;
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-semibold);
    cursor: pointer;
}

.kds-station.is-active {
    background: var(--ds-primary);
    border-color: transparent;
    color: var(--ds-text-on-accent);
}

.kds-station-count {
    min-width: 24px;
    padding: 0 var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-bg-inset);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.kds-station.is-active .kds-station-count {
    background: rgba(255, 255, 255, 0.22);
    color: var(--ds-text-on-accent);
}

.kds-summary {
    margin: 0;
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-medium);
}

.kds-offline {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--ds-space-2) var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
    font-weight: var(--ds-fw-semibold);
}

.kds-offline[hidden] {
    display: none;
}

/* ---- The board: oldest first, left to right in rows ---- */

.kds-board {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    /* Rows as tall as their cards. Left at auto, a board fuller than the
       screen squeezed every card (overflow: hidden, so its minimum height is
       0) down to its header instead of scrolling. */
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
    gap: var(--ds-space-3);
    padding-block-end: var(--ds-space-2);
}

.kds-board[hidden] {
    display: none;
}

/* ---- A card is an order ---- */

.kds-card {
    --kds-age: var(--ds-success);
    --kds-age-text: var(--ds-success-text);
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-block-start: 6px solid var(--kds-age);
    border-radius: var(--ds-radius-lg);
    /* The coloured edge is the top, so the top corners are square. */
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    box-shadow: var(--ds-shadow-card);
    overflow: hidden;
}

/* How long it has waited, on the card's top edge and its timer. */
.kds-card.is-warn {
    --kds-age: var(--ds-warning);
    --kds-age-text: var(--ds-warning-text);
}

.kds-card.is-late {
    --kds-age: var(--ds-danger);
    --kds-age-text: var(--ds-danger-text);
}

/* Being made: tinted, so the whole kitchen sees someone is on it. */
.kds-card.is-cooking {
    background: color-mix(in srgb, var(--ds-primary) 6%, var(--ds-surface));
    border-inline-color: color-mix(in srgb, var(--ds-primary) 35%, var(--ds-border-strong));
    border-block-end-color: color-mix(in srgb, var(--ds-primary) 35%, var(--ds-border-strong));
}

/* A new order arrives with a ring that fades, not a jump. */
.kds-card.is-arrival {
    animation: kds-arrive 2.4s var(--ds-ease-standard);
}

@keyframes kds-arrive {
    0% { box-shadow: 0 0 0 4px var(--ds-primary); }
    100% { box-shadow: var(--ds-shadow-card); }
}

/* Who it is for above a dashed line, what to make below it: a docket's
   layout, without the paper. */
.kds-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-4);
    border-block-end: 1px dashed var(--ds-border-strong);
}

.kds-card-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Where it goes: the one thing a runner reads the card for. */
.kds-card-dest {
    font-size: var(--ds-text-xl);
    font-weight: var(--ds-fw-bold);
    line-height: 1.2;
    color: var(--ds-text-primary);
    overflow-wrap: anywhere;
}

.kds-card-sub {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-secondary);
}

/* An order code: monospace so 0/O and 1/I read apart. */
.kds-card-code {
    font-family: var(--ds-font-mono);
}

.kds-card-clock {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.kds-card-timer {
    flex: 0 0 auto;
    padding: 2px var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    background: color-mix(in srgb, var(--kds-age) 14%, transparent);
    color: var(--kds-age-text);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* A time reads left to right in Arabic too; "9:00+" was drawn "+9:00". */
    direction: ltr;
    unicode-bidi: isolate;
}

/* Late in words as well as red: red alone is lost on a colour-blind cook. */
.kds-card-late {
    display: none;
    color: var(--kds-age-text);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kds-card.is-late .kds-card-late {
    display: block;
}

/* Being made: a band across the card under its head. */
.kds-card-state {
    margin: 0;
    padding: var(--ds-space-1) var(--ds-space-4);
    background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
    color: var(--ds-primary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Lines: tap one to cross it off ---- */

.kds-lines {
    list-style: none;
    margin: 0;
    padding: 0 var(--ds-space-2);
    display: flex;
    flex-direction: column;
}

.kds-line {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2);
    border: 0;
    border-block-start: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.kds-lines li:first-child .kds-line {
    border-block-start: 0;
}

:where(.can-hover) .kds-line:hover {
    background: var(--ds-bg-inset);
}

.kds-line:active {
    background: var(--ds-neutral-200);
}

.kds-line-qty {
    flex: 0 0 auto;
    min-width: 32px;
    height: 32px;
    display: inline-grid;
    place-content: center;
    padding: 0 var(--ds-space-1);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-inset);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-bold);
    font-variant-numeric: tabular-nums;
}

.kds-line-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kds-line-name {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-semibold);
    line-height: 1.25;
}

/* Options and add-ons are instructions to make something: full colour,
   one per line, set in under the dish. */
.kds-line-extra {
    padding-inline-start: var(--ds-space-3);
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-medium);
}

.kds-line-note {
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-warning-text);
}

.kds-line-station {
    flex: 0 0 auto;
    padding: 2px var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-bg-inset);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
}

.kds-line.is-done .kds-line-name,
.kds-line.is-done .kds-line-extra,
.kds-line.is-done .kds-line-note {
    color: var(--ds-text-disabled);
    text-decoration: line-through;
}

.kds-line.is-done .kds-line-qty {
    background: transparent;
    color: var(--ds-text-disabled);
}

/* ---- The card's one button ---- */

.kds-card-foot {
    margin-block-start: auto;
    padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4);
}

.kds-card-action {
    width: 100%;
    min-height: 56px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    color: var(--ds-text-on-accent);
    font: inherit;
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-bold);
    cursor: pointer;
    transition: transform var(--ds-duration-fast) var(--ds-ease-standard);
}

.kds-card-action.is-start {
    background: var(--ds-primary);
}

/* Dark green: white text on the light green read at under 3:1. */
.kds-card-action.is-done {
    background: var(--ds-success-text);
}

:where(.can-hover) .kds-card-action:hover {
    filter: brightness(1.08);
}

.kds-card-action:active {
    transform: scale(0.98);
}

/* ---- Empty ---- */

.kds-empty {
    flex: 1 1 auto;
    display: grid;
    place-content: center;
    padding: var(--ds-space-10) var(--ds-space-4);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-md);
    text-align: center;
}

.kds-empty[hidden] {
    display: none;
}

.kds-empty p {
    margin: 0;
}

/* ---- Just done: bring back an order cleared by mistake ---- */

.kds-recent {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    overflow-x: auto;
    padding-block: var(--ds-space-2) 0;
    border-block-start: 1px solid var(--ds-border-strong);
}

.kds-recent[hidden] {
    display: none;
}

.kds-recent-title {
    flex: 0 0 auto;
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.kds-recent-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-touch-target);
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font: inherit;
    cursor: pointer;
}

.kds-recent-label {
    font-weight: var(--ds-fw-semibold);
}

.kds-recent-ago {
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
}

.kds-recent-back {
    color: var(--ds-primary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
}