/* SnowFlare KDS — extension layer over NOVYA Glass (kit tokens, radii and materials are used, never redefined).
   Load order: novya-admin.css -> novya-admin-glass.css -> snowflare-erp.css -> this file.
   Kitchen-screen rules: 18px base text, 56px touch targets on cards and the top bar (48px minimum elsewhere),
   status never by colour alone (a text label always sits next to every colour), visible focus, dark by default.
   Logical properties only, so dir=rtl mirrors the whole screen without a second stylesheet; timers, numbers and
   order numbers keep direction:ltr. Timer colours are SAMPLE thresholds served by /reference.kds (RE-VERIFY). */

:root { --kds-col-min: clamp(280px, 24vw, 420px); --kds-gap: 12px; --kds-touch: 56px; }

html, body { overflow-x: hidden; }
.kds-body { min-height: 100dvh; font-size: 18px; }
.kds-body :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.kds-body .ui-icon { width: 24px; height: 24px; flex: none; }
.num, .kds-body .num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: start; } /* the kit's .num is a right-aligned table helper: here it only isolates digits */
[hidden] { display: none !important; }

/* ---------- shell: top bar / banners / board ---------- */
.kds-app { display: flex; flex-direction: column; gap: var(--kds-gap); height: 100dvh; padding: var(--kds-gap); }
.kds-top { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border: 1px solid var(--glass-edge, var(--line)); border-radius: 16px; background: var(--surface); box-shadow: var(--glass-shadow, none); backdrop-filter: blur(20px); }
.kds-top__brand { flex: none; border-radius: 10px; }
.kds-top__where { display: grid; min-width: 0; flex: 1; }
.kds-top__where strong { font-size: 26px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kds-top__where small, .kds-top__who small { color: var(--muted); font-size: 14px; }
.kds-top__who { display: grid; justify-items: end; text-align: end; }
.kds-top__tools { display: flex; gap: 8px; }
.kds-top__btn { min-width: var(--kds-touch); min-height: var(--kds-touch); display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.kds-top__btn small { font-size: 12px; line-height: 1.1; white-space: nowrap; }
.kds-top__btn[aria-pressed="true"]:not([data-theme-toggle]) { background: var(--navy); border-color: var(--navy); color: #fff; }

.kds-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-radius: 12px; background: var(--amber-bg); color: var(--amber); font-size: 16px; }
.kds-cancels { display: grid; gap: 8px; max-height: 32dvh; overflow-y: auto; }
.kds-cancel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border: 2px solid var(--red); border-radius: 14px; background: var(--red-bg); }
.kds-cancel__text { display: grid; gap: 4px; min-width: 0; flex: 1 1 280px; }
.kds-cancel__text strong { font-size: 24px; }
.kds-cancel__text small { color: var(--muted); font-size: 15px; }

.kds-main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--kds-gap); }
.kds-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--kds-gap); }
.kds-tabs { display: none; }

/* ---------- columns: one scrolling column per state ---------- */
.kds-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kds-col-min), 1fr)); grid-template-rows: minmax(0, 1fr); gap: var(--kds-gap); }
.kds-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.kds-col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 20px; }
.kds-col__head b { min-width: 36px; padding: 2px 10px; border-radius: 18px; background: var(--navy); color: #fff; font-size: 18px; text-align: center; }
.kds-col__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--kds-gap); padding: var(--kds-gap); overflow-y: auto; }
.kds-empty { margin: 0; padding: 24px 8px; color: var(--muted); text-align: center; }

.kds-scheduled { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.kds-scheduled summary { min-height: var(--kds-touch); display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 18px; font-weight: 700; cursor: pointer; }
.kds-scheduled__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--kds-col-min), 1fr)); gap: var(--kds-gap); padding: 0 var(--kds-gap) var(--kds-gap); max-height: 36dvh; overflow-y: auto; }

/* ---------- ticket card ---------- */
.kds-card { display: grid; min-width: 0; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 8px solid var(--green); border-radius: 14px; background: var(--surface); box-shadow: var(--glass-shadow, none); font-size: 18px; }
.kds-card--warn { border-inline-start-color: var(--amber); }
.kds-card--late { border-inline-start-color: var(--red); }
.kds-card.is-busy { opacity: .6; }
.kds-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.kds-card__no { display: inline-flex; align-items: baseline; gap: 2px; max-width: 100%; line-height: 1.1; }
.kds-card__no small { color: var(--muted); font-size: 14px; font-weight: 600; }
.kds-card__no strong { font-size: 28px; }
.kds-timer { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 28px; background: var(--green-bg); color: var(--green); }
.kds-timer--warn { background: var(--amber-bg); color: var(--amber); }
.kds-timer--late { background: var(--red-bg); color: var(--red); }
.kds-timer__time { font-size: 32px; font-weight: 700; line-height: 1.15; }
.kds-timer__label { font-size: 16px; font-weight: 700; }
.kds-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kds-promise { margin-inline-start: auto; color: var(--muted); font-size: 16px; }
.kds-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: 14px; background: var(--blue-bg); color: var(--navy); font-size: 14px; font-weight: 700; }
body[data-theme="dark"] .kds-badge { color: #cfe0f4; }
.kds-badge--quiet { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.kds-badge--warn { background: var(--amber-bg); color: var(--amber); }
.kds-badge--hot { background: var(--red-bg); color: var(--red); }
.kds-badge .ui-icon { width: 16px; height: 16px; }

.kds-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kds-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.kds-line__qty { min-width: 2ch; font-size: 22px; }
.kds-line__text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kds-line__name { font-size: 20px; font-weight: 600; }
.kds-line__mods, .kds-line__notes { color: var(--amber); font-size: 16px; font-weight: 600; }
body[data-theme="dark"] .kds-line__mods, body[data-theme="dark"] .kds-line__notes { color: var(--amber); }
.kds-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 16px; }
.kds-hint { margin: 0; color: var(--muted); font-size: 14px; }
.kds-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kds-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.kds-chip--ACTIVE { border-color: var(--orange); }
.kds-chip--STATION_DONE, .kds-chip--PACKED { border-color: var(--green); color: var(--green); }

.kds-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.kds-btn { min-height: var(--kds-touch); padding: 0 16px; border-radius: 12px; gap: 10px; font-size: 18px; font-weight: 700; justify-content: center; }
.kds-btn--start, .kds-btn--bump, .kds-btn--pack, .kds-btn--ack, .kds-btn--hand { background: var(--orange); border-color: var(--orange); color: #fff; }
.kds-btn--start:hover, .kds-btn--bump:hover, .kds-btn--pack:hover, .kds-btn--ack:hover, .kds-btn--hand:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.kds-btn:disabled { opacity: .45; cursor: not-allowed; }
.kds-body .button--orange, .kds-body .button--orange:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------- all-day panel (overlay drawer, so toggling it never reflows the columns) ---------- */
.kds-allday-panel { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 20; width: min(340px, 92vw); overflow-y: auto; padding: 16px; border: 1px solid var(--glass-edge, var(--line)); border-radius: 16px; background: var(--canvas); box-shadow: var(--shadow); }
.kds-allday-panel h2 { margin: 0 0 12px; font-size: 22px; }
.kds-allday-panel h2 small { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
.kds-allday { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kds-allday li { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: 10px; align-items: baseline; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: var(--surface); }
.kds-allday strong { font-size: 24px; }

/* ---------- sheets (station picker, reasons) ---------- */
.kds-sheet { position: fixed; inset: 0; z-index: 100; }
.kds-sheet__scrim { position: absolute; inset: 0; background: rgba(12, 22, 38, .55); }
.kds-sheet__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--canvas); border-inline-start: 1px solid var(--line); box-shadow: var(--shadow); animation: kds-sheet-in .18s ease-out; }
.kds-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.kds-sheet__head h2 { margin: 0; font-size: 24px; }
.kds-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.kds-sheet__body h3 { margin: 14px 0 8px; font-size: 18px; }
.kds-sheet__body h3:first-child { margin-top: 0; }
.kds-sheet__foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 12px 18px 18px; border-top: 1px solid var(--line); }
.kds-icon-btn { width: var(--kds-touch); height: var(--kds-touch); min-width: var(--kds-touch); display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.kds-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kds-choice { min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 18px; font-weight: 600; text-align: center; cursor: pointer; }
.kds-choice[aria-pressed="true"] { border-color: var(--orange); background: var(--amber-bg); }
.kds-field { display: grid; gap: 4px; margin: 12px 0; }
.kds-field span { color: var(--muted); font-size: 14px; }
.kds-field input { min-height: var(--kds-touch); padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 20px; }
@keyframes kds-sheet-in { from { transform: translateX(40px); opacity: .6; } }
[dir="rtl"] .kds-sheet__panel { animation-name: kds-sheet-in-rtl; }
@keyframes kds-sheet-in-rtl { from { transform: translateX(-40px); opacity: .6; } }

/* ---------- sign-in ---------- */
.kds-body .login-users { grid-template-columns: 1fr; max-height: 340px; }
.kds-body .login-users button { min-height: 64px; grid-template-columns: 40px minmax(0, 1fr); font-size: 15px; }
.kds-body .login-users button span { width: 40px; height: 40px; font-size: 14px; }
.kds-body .login-users button small { font-size: 12px; }
.kds-login-lang { position: fixed; inset-block-start: 16px; inset-inline-end: 16px; width: auto; min-height: 48px; }

/* ---------- toasts: top centre, clear of the cards' action buttons ---------- */
.kds-body .toast-region, [dir="rtl"] .kds-body .toast-region { inset: 16px auto auto 50%; transform: translateX(-50%); pointer-events: none; }
.kds-body .toast { pointer-events: auto; }

/* ---------- tablet portrait / narrow landscape: two columns, the column row scrolls sideways ---------- */
@media (max-width: 1023px), (orientation: portrait) {
  .kds-cols { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - var(--kds-gap)) / 2); overflow-x: auto; scroll-snap-type: x mandatory; }
  .kds-col { scroll-snap-align: start; }
  .kds-top__where strong { font-size: 22px; }
  .kds-top { flex-wrap: wrap; }
}

/* ---------- phone: one column, a state tab bar chooses it ---------- */
@media (max-width: 767px) {
  .kds-body { font-size: 17px; }
  .kds-app { padding: 8px; gap: 8px; }
  .kds-top__who { display: none; }
  .kds-top__btn small { display: none; }
  .kds-top__tools { margin-inline-start: auto; }
  .kds-tabs { display: flex; gap: 6px; overflow-x: auto; }
  .kds-tab { flex: 1 0 auto; min-height: var(--kds-touch); padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; }
  .kds-tab[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .kds-cols { grid-auto-columns: 100%; overflow-x: hidden; }
  .kds-col:not(.is-current) { display: none; }
  .kds-col__head { display: none; }
  .kds-card__no strong { font-size: 24px; }
  .kds-timer__time { font-size: 28px; }
  .kds-sheet__foot { grid-auto-flow: row; }
}

@media (prefers-reduced-motion: reduce) { .kds-sheet__panel { animation: none; } }

/* ---------- print: a plain list of the cards. This is NOT the REQ-M06-024 printed fallback chit (P1, not built). ---------- */
@media print {
  html, body { background: #fff !important; color: #000; }
  body::before { display: none !important; }
  .kds-top, .kds-banner, .kds-tabs, .kds-actions, .kds-allday-panel, .kds-sheet, .toast-region { display: none !important; }
  .kds-app { display: block; height: auto; }
  .kds-cols { display: block; }
  .kds-col { border: 0; background: none; }
  .kds-col__body { overflow: visible; }
  .kds-card { break-inside: avoid; box-shadow: none; border-color: #000; }
}