/*
 * Kiosks — the back office for self-service ordering kiosks (kiosk-admin.js).
 *
 * Built from the app's own tokens (styles.css :root) and patterns (cards,
 * chips, mini KPIs, segmented controls, the terminals dialogs), so it reads as
 * part of Kappino rather than a module bolted on. Everything below 1024 px is
 * tablet, below 760 px phone: tables become labelled cards, dialogs go full
 * screen, toolbars wrap.
 *
 * Hidden until kiosk-admin.js finds the feature switched on (body.kiosk-on).
 * `!important` because the permission gate writes inline `display` on nav items.
 */
body:not(.kiosk-on) .nav-item[data-view="kiosk"] { display: none !important; }
.sidebar .nav-item[data-view="kiosk"]::after { content: var(--i18n-nav-kiosk, "Kiosks"); }

.view[data-view="kiosk"] .sr-only,
.ksk-back .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.view[data-view="kiosk"] :focus-visible,
.ksk-back :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Tabs, banner ──────────────────────────────────────────────────────── */
.ksk-tabs { display: flex; gap: 6px; margin: 4px 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ksk-tabs::-webkit-scrollbar { display: none; }
.ksk-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx);
}
.ksk-tab:hover { color: var(--text); border-color: var(--border-strong); }
.ksk-tab.active { background: var(--text); color: #fff; border-color: var(--text); }
.ksk-count {
  min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber-500); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}
.ksk-tab.active .ksk-count { background: rgba(255,255,255,.25); }

#ksk-banner:empty { display: none; }
.ksk-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; margin-bottom: 10px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  border: 1px solid var(--border); background: var(--surface-2);
}
.ksk-banner.warn { background: var(--amber-50); border-color: #fcd9a4; color: #7a4a06; }
.ksk-banner.bad { background: var(--rose-50); border-color: #f8c4c6; color: #8f1d22; }
.ksk-banner .btn { flex: none; }

/* ── Cards, KPIs, toolbars ─────────────────────────────────────────────── */
.ksk-kpis { margin-bottom: 14px; }
.ksk-kpi .mk-sub { min-height: 15px; }
.ksk-card { padding: 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ksk-card .card-head { gap: 12px; flex-wrap: wrap; }
.ksk-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.ksk-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); font-weight: 600; min-width: 0; }
.ksk-field > span em { font-style: normal; font-weight: 500; color: var(--text-3); }
.ksk-field.compact { font-size: 11px; color: var(--text-3); font-weight: 500; }
.ksk-field.compact .input { min-width: 130px; }
.ksk-field.wide { width: 100%; }
.ksk-field small { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.ksk-field .input { min-width: 0; width: 100%; box-sizing: border-box; min-height: 36px; }
.ksk-field.compact .input.sm, .ksk-toolbar .input.sm { min-height: 34px; padding: 6px 10px; }
.ksk-search {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; min-height: 34px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text-3);
  flex: 1 1 220px; max-width: 360px;
}
.ksk-search.sm { flex: 0 1 220px; }
.ksk-search input { border: 0; outline: 0; background: transparent; font-size: 13px; flex: 1; min-width: 0; padding: 7px 0; color: var(--text); }
.ksk-search:focus-within { border-color: var(--emerald-500); box-shadow: 0 0 0 4px rgba(16,185,129,.1); }
.ksk-viewseg { margin-left: auto; }
.ksk-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ksk-check input, .ksk-radio input { accent-color: var(--emerald-500); width: 16px; height: 16px; }
.ksk-radio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 0; cursor: pointer; }
.ksk-help { font-size: 12px; color: var(--text-3); margin: 4px 0 12px; line-height: 1.5; }
.ksk-lead { font-size: 13.5px; color: var(--text-2); margin: 0 0 14px; line-height: 1.55; }
.ksk-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.ksk-pager:empty { display: none; }
.ksk-pager span { margin-right: auto; }
.ksk-danger { color: var(--rose-500) !important; border-color: #f5c2c7 !important; }
.ksk-danger:hover:not(:disabled) { background: var(--rose-50) !important; }
.ksk-bad { color: var(--rose-500); }
.ksk-note { padding: 10px 12px; border-radius: 10px; font-size: 13px; margin: 0 0 12px; line-height: 1.45; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.ksk-note.warn { background: var(--amber-50); border-color: #fcd9a4; color: #7a4a06; }
.ksk-note.bad { background: var(--rose-50); border-color: #f8c4c6; color: #8f1d22; }
.ksk-note.info { background: var(--tint-blue); border-color: var(--blue-100); color: #1f3b73; }

/* ── Status dots and badges ────────────────────────────────────────────── */
.ksk-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203,213,225,.35); }
.ksk-dot.online { background: var(--olive); box-shadow: 0 0 0 3px rgba(21,160,91,.18); }
.ksk-dot.offline { background: var(--wine); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.ksk-conn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.ksk-conn i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.ksk-conn.on { color: var(--olive-700); } .ksk-conn.on i { background: var(--olive); }
.ksk-conn.off { color: var(--wine-700); } .ksk-conn.off i { background: var(--wine); }
.ksk-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ksk-name .cell-title { font-weight: 700; }
.ksk-table .cell-sub, .ksk-dcard .cell-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ksk-table td, .ksk-table th { vertical-align: middle; }
.ksk-table td.num, .ksk-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ksk-row { cursor: pointer; }
.ksk-row:focus-visible { outline-offset: -2px; }
.ksk-cb { width: 34px; }
.ksk-cb input { width: 16px; height: 16px; accent-color: var(--emerald-500); }
.ksk-err-cell { max-width: 240px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* ── Bulk bar ──────────────────────────────────────────────────────────── */
.ksk-bulk {
  position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--text); color: #fff; box-shadow: var(--shadow-lg);
}
.ksk-bulk .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.ksk-bulk .btn.ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.ksk-bulk .ksk-danger { color: #ffb4b7 !important; border-color: rgba(255,180,183,.4) !important; }
.ksk-bulk-n { font-weight: 700; font-size: 13px; margin-right: 6px; }

/* ── Device cards ──────────────────────────────────────────────────────── */
.ksk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.ksk-dcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; overflow: hidden;
  transition: box-shadow var(--dur) var(--tx), transform var(--dur) var(--tx);
}
.ksk-dcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #cbd5e1; }
.ksk-dcard.tone-up::before { background: var(--olive); }
.ksk-dcard.tone-warn::before { background: var(--gold); }
.ksk-dcard.tone-bad::before { background: var(--wine); }
.ksk-dcard:hover { box-shadow: var(--shadow-md, var(--sh-md)); transform: translateY(-1px); }
.ksk-dcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ksk-dcard-health { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ksk-dcard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ksk-dcard-stats dt { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ksk-dcard-stats dd { margin: 3px 0 0; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.ksk-dcard-stats small { font-weight: 500; font-size: 11px; color: var(--text-3); }
.ksk-dcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.ksk-dcard-actions { display: flex; gap: 6px; }

/* ── Empty, loading ────────────────────────────────────────────────────── */
.ksk-empty { text-align: center; padding: 36px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ksk-empty.slim { padding: 22px 12px; }
.ksk-empty-title { font-weight: 700; font-size: 15px; color: var(--text); }
.ksk-empty-sub { color: var(--text-3); font-size: 13px; max-width: 520px; line-height: 1.5; }
.ksk-empty-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-50); color: var(--rose-500); font-weight: 800; }
.ksk-empty-art { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; color: var(--terra-700); background: linear-gradient(135deg, var(--terra-50), var(--blue-50)); margin-bottom: 4px; }
.ksk-steps { list-style: none; counter-reset: s; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; text-align: left; }
.ksk-steps li { counter-increment: s; position: relative; padding: 12px 12px 12px 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-2); }
.ksk-steps li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #fff; font-size: 12px; font-weight: 700; }
.ksk-steps li b { color: var(--text); font-size: 13px; }
.ksk-steps.compact { grid-template-columns: 1fr 1fr; max-width: none; }
.ksk-skel { padding: 8px 0; }
.ksk-skel-row { height: 44px; border-radius: 10px; margin-bottom: 8px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--fill) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: kskShimmer 1.3s ease infinite; }
.ksk-skel-row.short { width: 60%; }
@keyframes kskShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .ksk-skel-row { animation: none; } .ksk-dcard:hover { transform: none; } }
.ksk-loading { color: var(--text-3); padding: 6px 0; }
.ksk-more { margin: 10px auto 0; display: flex; }

/* ── Dialogs ───────────────────────────────────────────────────────────── */
body.ksk-modal-open { overflow: hidden; }
.ksk-back {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .15s ease;
}
.ksk-back.show { opacity: 1; }
.ksk-back ~ .pm-overlay, .ksk-back ~ .cd-overlay, .ksk-back ~ .confirm-overlay, .ksk-back ~ .rv-confirm { z-index: 1300; }
.ksk-dialog { width: 560px; max-width: 100%; background: var(--surface, #fff); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; outline: none; }
.ksk-dialog.sm { width: 460px; }
.ksk-dialog.md { width: 680px; }
.ksk-dialog.xl { width: 1080px; }
.ksk-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border-soft, var(--border)); }
.ksk-dhead-main { min-width: 0; }
.ksk-dtitle { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ksk-dsub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; overflow-wrap: anywhere; }
.ksk-reasonline { color: var(--text-2); font-weight: 600; }
.ksk-reasonline.bad { color: #8f1d22; }
.ksk-warnline { color: #7a4a06; background: var(--amber-50); border-radius: 8px; padding: 6px 9px; margin-top: 8px; }
.ksk-x { font-size: 22px; line-height: 1; flex: none; }
.ksk-dbody { padding: 16px 20px 20px; }
.ksk-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 20px; border-bottom: 1px solid var(--border-soft, var(--border)); background: var(--surface-2); }
.ksk-dtabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.ksk-dtab { padding: 11px 12px; font-size: 13px; font-weight: 600; color: var(--text-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.ksk-dtab:hover { color: var(--text); }
.ksk-dtab.active { color: var(--text); border-bottom-color: var(--terra); }
.ksk-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ksk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.ksk-sec { border-top: 1px solid var(--border-soft, var(--border)); padding-top: 14px; margin-top: 14px; }
.ksk-sec h3 { font-size: 13.5px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ksk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.ksk-facts dt { font-size: 11px; color: var(--text-3); }
.ksk-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ksk-id { font-size: 11px !important; }
.ksk-issues { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ksk-kpis-in { margin-bottom: 4px; }
.ksk-syncgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ksk-syncgrid > div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ksk-syncgrid span { font-size: 11px; color: var(--text-3); }
.ksk-syncgrid b { font-size: 18px; font-family: var(--font-serif); }
.ksk-syncgrid b.bad { color: var(--rose-500); }
.ksk-syncgrid small { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.ksk-notes { white-space: pre-wrap; font-size: 13px; color: var(--text-2); margin: 0; }
.ksk-sum { font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.ksk-sessions-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

/* Events */
.ksk-events { list-style: none; margin: 0; padding: 0; }
.ksk-ev { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft, var(--border)); }
.ksk-ev:last-child { border-bottom: 0; }
.ksk-ev-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; margin-top: 6px; flex: none; }
.ksk-ev.warn .ksk-ev-dot { background: var(--gold); }
.ksk-ev.bad .ksk-ev-dot { background: var(--wine); }
.ksk-ev-main { min-width: 0; flex: 1; }
.ksk-ev-title { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ksk-ev-msg { font-size: 12.5px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.ksk-ev-meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.ksk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.ksk-chipbtn { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-2); }
.ksk-chipbtn:hover { border-color: var(--border-strong); color: var(--text); }
.ksk-chipbtn.on { background: var(--terra-50); border-color: var(--terra-300); color: var(--terra-700); }
.ksk-chips .ksk-check { margin-left: auto; }

/* Order detail */
.ksk-lines { list-style: none; padding: 0; margin: 0 0 12px; }
.ksk-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft, var(--border)); font-size: 13px; }
.ksk-totals { margin: 0; }
.ksk-totals div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-2); }
.ksk-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.ksk-totals .grand { font-size: 16px; font-weight: 800; color: var(--text); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }

/* Forms */
.ksk-form .ksk-field + .ksk-field { margin-top: 0; }
.ksk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ksk-form > .ksk-field.wide { margin: 12px 0; }
.ksk-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px 10px; margin: 0 0 12px; }
.ksk-fieldset legend { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 0 6px; }
.ksk-pin-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 4px 24px; }
.ksk-pin-input { max-width: 160px; font-size: 20px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.ksk-form-err { background: var(--rose-50); color: #8f1d22; border: 1px solid #f8c4c6; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-top: 12px; }
.ksk-form [aria-invalid="true"] { border-color: var(--rose-500) !important; box-shadow: 0 0 0 4px rgba(229,72,77,.12) !important; }
.btn.loading { opacity: .7; pointer-events: none; }

/* The once-only secrets */
.ksk-setup { display: flex; flex-direction: column; gap: 14px; }
.ksk-secret { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); }
.ksk-secret h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ksk-pin-big { font-family: var(--font-serif); font-size: 38px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.ksk-code-big { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 26px; font-weight: 700; letter-spacing: .06em; margin-bottom: 6px; overflow-wrap: anywhere; }
.ksk-enroll-grid { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ksk-qr { width: 156px; height: 156px; background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--border); flex: none; }
.ksk-qr svg { width: 100%; height: 100%; display: block; }

/* ── Kiosk menu ────────────────────────────────────────────────────────── */
.ksk-mcat { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.ksk-mcat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ksk-mcat-name { font-weight: 700; font-size: 14px; }
.ksk-mitems { list-style: none; margin: 0; padding: 0; }
.ksk-mitem { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.ksk-mitem:last-child { border-bottom: 0; }
.ksk-mitem.muted .ksk-minfo, .ksk-mitem.muted .ksk-mthumb { opacity: .5; }
.ksk-mitem.dirty { background: #fffbeb; }
.ksk-mthumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--fill); display: grid; place-items: center; font-weight: 800; color: var(--text-3); }
.ksk-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.ksk-minfo { min-width: 0; }
.ksk-minfo .cell-title { font-weight: 700; font-size: 13.5px; }
.ksk-price { font-weight: 600; color: var(--text-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
.ksk-mflags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ksk-mctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ksk-tri .seg { white-space: nowrap; }
.ksk-tri .seg.inh { color: var(--text-3); }
.ksk-tri .seg:disabled { cursor: default; }
.ksk-everywhere { font-size: 11px !important; }
.ksk-savebar {
  position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 10px 14px; margin-top: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.ksk-savebar > span:first-child { margin-right: auto; font-weight: 600; font-size: 13px; }
.ksk-savebar.static { position: static; box-shadow: none; background: var(--surface-2); }

/* ── Groups ────────────────────────────────────────────────────────────── */
.ksk-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ksk-group { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ksk-group-top { display: flex; gap: 10px; align-items: center; }
.ksk-group-top .cell-title { font-weight: 700; }
.ksk-swatch { width: 14px; height: 14px; border-radius: 5px; flex: none; }
.ksk-group-desc { margin: 0; font-size: 12.5px; color: var(--text-2); }
.ksk-group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ksk-swatches { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.ksk-swatch-pick input { position: absolute; opacity: 0; }
.ksk-swatch-pick span { display: block; width: 28px; height: 28px; border-radius: 9px; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.ksk-swatch-pick input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.ksk-swatch-pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Settings ──────────────────────────────────────────────────────────── */
.ksk-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ksk-sgrid.compact { grid-template-columns: 1fr; }
.ksk-sgroup { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.ksk-sgroup h3 { margin: 0 0 6px; font-size: 13.5px; }
.ksk-srow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); }
.ksk-srow:last-child { border-bottom: 0; }
.ksk-srow.own { background: linear-gradient(90deg, rgba(26,168,146,.06), transparent 60%); margin: 0 -8px; padding: 8px; border-radius: 8px; }
.ksk-slabel { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.ksk-own { font-size: 10.5px; font-weight: 700; color: var(--terra-700); background: var(--terra-50); padding: 1px 6px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.ksk-inh { font-size: 10.5px; color: var(--text-3); margin-left: 4px; white-space: nowrap; }
.ksk-sinput { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ksk-sinput .input.sm { min-width: 0; width: 220px; max-width: 100%; }
.ksk-sinput .ksk-num { width: 90px; }
.ksk-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; }
.ksk-reset { font-size: 11px !important; padding: 3px 8px !important; }

/* ── Reports ───────────────────────────────────────────────────────────── */
.ksk-reportbar .ksk-export { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ksk-reportbar .ksk-export .input.sm { min-width: 140px; }
.ksk-rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ksk-rgrid .ksk-card { margin-bottom: 0; }
.ksk-rgrid .ksk-wide { grid-column: 1 / -1; }
.ksk-rgrid .card-title, .ksk-card > .card-title { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ksk-rgrid + .ksk-card { margin-top: 12px; }
.ksk-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ksk-hbars li { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.ksk-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ksk-hbar-track { height: 10px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.ksk-hbar-fill { display: block; height: 100%; border-radius: 99px; background: var(--grad-primary); }
.ksk-hbar-fill.blue { background: var(--blue); }
.ksk-hbar-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ksk-cols-chart svg { width: 100%; height: 150px; display: block; }
.ksk-cols-chart rect { fill: var(--terra-300); }
.ksk-cols-chart rect.hi { fill: var(--terra-700); }
.ksk-cols-axis { display: flex; font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
.ksk-cols-axis span { text-align: center; overflow: hidden; white-space: nowrap; }
.ksk-split-bar { height: 16px; border-radius: 99px; background: var(--blue-100); overflow: hidden; margin: 6px 0 12px; }
.ksk-split-bar span { display: block; height: 100%; background: var(--terra); }
.ksk-split-legend { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ksk-split-legend div { display: flex; justify-content: space-between; font-size: 13px; }
.ksk-split-legend dt { display: flex; align-items: center; gap: 7px; }
.ksk-split-legend dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ksk-split-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ksk-split-legend i.tw { background: var(--terra); }
.ksk-split-legend i.di { background: var(--blue-100); }

/* ── Order panel badge (app.js) ────────────────────────────────────────── */
.kor-src-badge.kiosk { background: #fef3c7; color: #92400e; }

/* ── Tablets ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ksk-rgrid { grid-template-columns: 1fr; }
  .ksk-sgrid { grid-template-columns: 1fr; }
  .ksk-syncgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ksk-viewseg { margin-left: 0; }
  .ksk-mitem { grid-template-columns: 44px minmax(0, 1fr); }
  .ksk-mctl { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Two KPI tiles a row: six full-width tiles would push the list off the first screen. */
  .view[data-view="kiosk"] .kpi-grid.ksk-kpis, .ksk-dialog .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ksk-kpi { padding: 11px 12px; }
  .ksk-kpi .mk-val { font-size: 19px; }
  .ksk-toolbar { align-items: stretch; }
  .ksk-toolbar > * { flex: 1 1 140px; }
  .ksk-search { max-width: none; flex-basis: 100%; }
  .ksk-field.compact .input { min-width: 0; }
  .ksk-steps, .ksk-steps.compact { grid-template-columns: 1fr; }
  .ksk-cols, .ksk-two, .ksk-facts { grid-template-columns: 1fr; }
  .ksk-dcard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ksk-back { padding: 0; align-items: stretch; }
  .ksk-dialog, .ksk-dialog.sm, .ksk-dialog.md, .ksk-dialog.xl { width: 100%; min-height: 100%; border-radius: 0; }
  .ksk-actions { position: sticky; top: 0; z-index: 2; overflow-x: auto; flex-wrap: nowrap; }
  .ksk-actions .btn { flex: none; }
  .ksk-reportbar .ksk-export { margin-left: 0; flex-basis: 100%; }
  .ksk-hbars li { grid-template-columns: 1fr auto; }
  .ksk-hbars .ksk-hbar-track { grid-column: 1 / -1; grid-row: 2; }
  /* Tables become labelled cards. */
  .ksk-table thead { display: none; }
  .ksk-table, .ksk-table tbody, .ksk-table tr, .ksk-table td { display: block; width: 100%; box-sizing: border-box; }
  .ksk-table tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); position: relative; }
  .ksk-table td { border: 0 !important; padding: 5px 0 !important; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right !important; }
  .ksk-table td[data-label]::before { content: attr(data-label); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: none; max-width: 45%; }
  .ksk-table td:first-child[data-label] { flex-direction: column; align-items: flex-start; text-align: left !important; }
  .ksk-table td:first-child[data-label]::before { display: none; }
  .ksk-table td.ksk-cb { position: absolute; right: 10px; top: 10px; width: auto; padding: 0 !important; }
  .ksk-table td:empty { display: none; }
  .ksk-srow { flex-direction: column; align-items: stretch; }
  .ksk-sinput { justify-content: flex-start; }
  .ksk-sinput .input.sm { width: 100%; }
  .ksk-multi { justify-content: flex-start; }
  .ksk-chips .ksk-check { margin-left: 0; }
  .ksk-pin-big { font-size: 32px; }
  .ksk-code-big { font-size: 21px; }
}