/* The kitchen display.
   ────────────────────────────────────────────────────────────────────────────
   A 1280 × 800 tablet on a wall, read across a room, through steam, by somebody
   holding a pan. It is the one screen in this product that does not wear the
   restaurant's colours: a brasserie's warm paper and brass is exactly the wrong
   palette for a surface whose whole job is to make four states distinguishable
   at three metres. The roadmap records that exception deliberately.

   Two themes, and they are not a light/dark pair of the same design. Dark is for
   a service; light is high-visibility, for a kitchen with a window behind the
   screen — so it does not just swap the background, it thickens every border and
   widens every status stripe, because glare eats thin lines first. */

:root,
[data-kds="dark"] {
    --kds-bg: #14171a;
    --kds-panel: #1c2126;
    --kds-card: #232a30;
    --kds-ink: #f2f5f7;
    --kds-mut: #9aa7b1;
    --kds-line: #333c44;

    /* One hue per column, and the same hue on the card's stripe. The colour is
       the index: a cook finds the column by colour before reading its title. */
    --kds-new: #5980a6;
    --kds-cooking: #d99a2b;
    --kds-ready: #4a9d5f;
    --kds-late: #c2413a;

    --kds-border: 1px;
    --kds-stripe: 4px;
}

[data-kds="light"] {
    --kds-bg: #eef1f3;
    --kds-panel: #ffffff;
    --kds-card: #ffffff;
    --kds-ink: #14171a;
    --kds-mut: #55616b;
    --kds-line: #b9c3cb;

    /* Darkened against a white ground: the dark theme's steel and amber are set
       for contrast against near-black and go pale and washed out on paper. */
    --kds-new: #2f5d8a;
    --kds-cooking: #9a6a05;
    --kds-ready: #2f7a44;
    --kds-late: #a52b24;

    --kds-border: 2px;
    --kds-stripe: 6px;
}

.kds {
    background: var(--kds-bg);
    color: var(--kds-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Barlow', system-ui, sans-serif;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.kds-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: var(--kds-panel);
    border-bottom: var(--kds-border) solid var(--kds-line);
}

.kds-place {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Counters and clock. Tabular figures throughout: a number that changes width as
   it counts is a number that makes the whole bar twitch every few seconds. */
.kds-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.kds-stat-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kds-stat-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kds-mut);
}

.kds-clock {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kds-toggle {
    border: var(--kds-border) solid var(--kds-line);
    background: transparent;
    color: var(--kds-ink);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── Columns ─────────────────────────────────────────────────────────────── */

.kds-columns {
    flex: 1 1 auto;
    display: flex;
    gap: 12px;
    padding: 12px;
    overflow: hidden;
}

.kds-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--kds-panel);
    border: var(--kds-border) solid var(--kds-line);
    border-radius: 6px;
    overflow: hidden;
}

/* The middle column is where a ticket spends most of its life, and it is the one
   a cook is reading. The handoff gives it the extra width for that reason. */
.kds-column-cooking {
    flex: 1.3 1 0;
}

.kds-column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: var(--kds-border) solid var(--kds-line);
}

.kds-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.kds-column-title {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.kds-column-count {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kds-column-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kds-empty {
    color: var(--kds-mut);
    font-size: 13px;
    padding: 8px 2px;
}

/* ── Order card ──────────────────────────────────────────────────────────── */

.kds-card {
    background: var(--kds-card);
    border: var(--kds-border) solid var(--kds-line);
    border-left: var(--kds-stripe) solid var(--kds-line);
    border-radius: 5px;
    /* No text selection: every gesture on this card is a command, and a long press
       that highlights the dish name instead of cancelling is a long press wasted. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.kds-card-new { border-left-color: var(--kds-new); }
.kds-card-cooking { border-left-color: var(--kds-cooking); }
.kds-card-ready { border-left-color: var(--kds-ready); }

.kds-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: var(--kds-border) solid var(--kds-line);
}

/* Late flips the whole header rather than adding a badge to it. A badge is
   something you find; a red header is something you cannot miss from the pass. */
.kds-card-late .kds-card-head {
    background: var(--kds-late);
    color: #fff;
}

.kds-card-late {
    border-left-color: var(--kds-late);
}

.kds-order-no {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .02em;
}

.kds-service {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: .85;
}

.kds-timer {
    margin-left: auto;
    font-size: 23px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kds-lines {
    padding: 8px 12px;
}

.kds-line {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: baseline;
    margin-bottom: 6px;
}

.kds-qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kds-mut);
}

.kds-name {
    font-size: 18px;
    line-height: 1.25;
}

/* Two channels that must never be confused. Options are what the kitchen builds
   the plate from; a note is the customer talking. Same size, different colour and
   different voice — a cook reading amber knows somebody wrote it by hand. */
.kds-options {
    display: block;
    font-size: 14px;
    color: var(--kds-new);
}

.kds-note {
    display: block;
    font-size: 14px;
    font-style: italic;
    color: var(--kds-cooking);
}

.kds-action {
    display: block;
    width: 100%;
    border: 0;
    padding: 12px;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    border-radius: 0 0 3px 3px;
}

.kds-action-new { background: var(--kds-new); }
.kds-action-cooking { background: var(--kds-cooking); }
.kds-action-ready { background: var(--kds-ready); }

.kds-action:disabled {
    opacity: .5;
    cursor: default;
}

/* ── Bottom help bar ─────────────────────────────────────────────────────── */

.kds-help {
    display: flex;
    gap: 20px;
    padding: 7px 18px;
    background: var(--kds-panel);
    border-top: var(--kds-border) solid var(--kds-line);
    font-size: 12px;
    color: var(--kds-mut);
}

.kds-help kbd {
    font-family: inherit;
    border: 1px solid var(--kds-line);
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 5px;
    color: var(--kds-ink);
}

/* The cancel confirmation, on the card rather than in a dialog: a modal over a wall display is a
   modal somebody else walks up to and cannot read the context of. */
.kds-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--kds-late);
    color: #fff;
    font-size: 13px;
    border-radius: 0 0 3px 3px;
}

.kds-confirm span {
    flex: 1 1 auto;
}

.kds-confirm-no,
.kds-confirm-yes {
    border: 1px solid rgba(255, 255, 255, .7);
    background: transparent;
    color: #fff;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The destructive one is the filled one. Reversed from the usual, because here the safe answer is
   the one you reach for without looking and "no" must be the easy target. */
.kds-confirm-yes {
    background: #fff;
    color: var(--kds-late);
    font-weight: 700;
}

/* ── Rupture immédiate ────────────────────────────────────────────────────────

   A panel rather than the handoff's permanent side rail: on a 1280-wide tablet a rail costs a whole
   column, and a kitchen looks at its shortages twice a service. */

.kds-toggle-on {
    background: var(--kds-ink);
    color: var(--kds-bg);
}

.kds-rail {
    background: var(--kds-panel);
    border-bottom: var(--kds-border) solid var(--kds-line);
    padding: 10px 18px 14px;
}

.kds-rail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.kds-rail-head .kds-column-title {
    flex: 1 1 auto;
}

/* Wrapping chips, not a list: a carte is forty dishes and a column of forty rows would be the panel
   eating the board it is supposed to sit above. */
.kds-rail-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 30vh;
    overflow-y: auto;
}

.kds-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: var(--kds-border) solid var(--kds-line);
    border-radius: 4px;
    background: transparent;
    color: var(--kds-ink);
    padding: 7px 11px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

/* Off reads as off at a glance: struck through here for the same reason it is struck through on the
   client's carte, so the two screens are describing the same fact in the same way. */
.kds-switch-off {
    border-color: var(--kds-late);
    color: var(--kds-late);
    text-decoration: line-through;
}

.kds-switch-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kds-ready);
    flex: none;
}

.kds-switch-off .kds-switch-dot {
    background: var(--kds-late);
}

.kds-switch:disabled {
    opacity: .5;
    cursor: default;
}

/* A line the kitchen took back. Struck through rather than removed, so a cook who had already
   started it knows which one to stop — and so the ticket still matches what the customer ordered. */
.kds-line-gone .kds-name,
.kds-line-gone .kds-qty {
    text-decoration: line-through;
    opacity: .45;
}

.kds-drop {
    border: 0;
    background: transparent;
    color: var(--kds-mut);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 0 0 8px;
}

.kds-drop:hover {
    color: var(--kds-late);
}

.kds-drop:disabled {
    opacity: .4;
    cursor: default;
}

/* Why a dish appeared on a ticket the kitchen had already started. */
.kds-replacement {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kds-ready);
    padding-left: 8px;
}

/* Somebody in the room decided this ticket goes first. Off it is a hairline outline that reads as an
   affordance; on it is filled, because a priority nobody can spot from the pass is not a priority. */
.kds-star {
    border: 0;
    background: transparent;
    color: var(--kds-line);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.kds-star-on {
    color: var(--kds-cooking);
}

.kds-star:disabled {
    opacity: .5;
    cursor: default;
}