/* La Única — Kitchen Display System (Clover-KDS style: flat gray chrome, white tickets) */
:root{ --bg:#23262b; --panel:#1a1c20; --line:#33373e; --ink:#eef1f5; --sub:#9aa3af;
  --new:#2f6fed; --prep:#f59e0b; --ready:#1fa84a; --red:#e5484d;
  --card:#ffffff; --card-ink:#191b1e; --card-sub:#5b6470; --card-line:#e7e9ed; --mod:#d3222a; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
[hidden]{display:none!important}   /* make the hidden attribute win over display:grid/flex */
html,body{height:100%;overflow:hidden;background:var(--bg);
  color:var(--ink);font-family:Inter,system-ui,sans-serif;user-select:none;touch-action:manipulation}
img{display:block}

body{display:flex;flex-direction:column}
.kds-top{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:10px 18px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:48px}
.brand span{font-family:Montserrat;font-weight:900;font-size:19px}
.seg{display:flex;background:#101215;border:1px solid var(--line);border-radius:9px;padding:3px}
.seg-btn{border:none;background:transparent;color:var(--sub);font-weight:800;font-size:15px;
  padding:9px 18px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:8px}
.seg-btn b{background:#2a2e35;color:var(--ink);border-radius:20px;padding:1px 9px;font-size:13px}
.seg-btn.on{background:#3a3f47;color:#fff}
.stats{display:flex;gap:8px}
.stat{padding:6px 13px;border-radius:7px;font-weight:800;font-size:13.5px;text-transform:capitalize;background:#101215;border:1px solid var(--line)}
.stat.st-new{color:#7ba3f5;border-color:rgba(47,111,237,.55)}
.stat.st-prep{color:var(--prep);border-color:rgba(245,158,11,.5)}
.stat.st-ready{color:#4ade80;border-color:rgba(31,168,74,.55)}
.stat.st-await{color:#eab308;border-color:rgba(234,179,8,.5)}
.right{margin-left:auto;display:flex;align-items:center;gap:15px}
.sound-btn{background:#101215;border:1px solid var(--line);border-radius:9px;font-size:19px;
  width:42px;height:42px;cursor:pointer;line-height:1}
.sound-btn:active{transform:scale(.92)}
.sound-btn.off{opacity:.5}
.live{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;letter-spacing:.06em;color:var(--sub)}
.live i{width:9px;height:9px;border-radius:50%;background:var(--ready);animation:blink 1.6s ease-in-out infinite}
.live.off i{background:var(--red);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.clock{font-family:Montserrat;font-weight:800;font-size:19px}
.avg{font-size:13.5px;color:var(--sub);white-space:nowrap}
.avg b{color:var(--ink);font-family:Montserrat}

/* uniform columns, Clover-style: tickets pack tightly, every card full and unclipped */
.tickets{flex:1;min-height:0;overflow-y:auto;padding:14px;columns:340px;column-gap:14px}
.empty{text-align:center;opacity:.35;font-size:26px;padding:12vh 0}

/* ── ticket: white card, dark header band, colored status edge ── */
.ticket{background:var(--card);color:var(--card-ink);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.4);animation:pop .18s ease-out;break-inside:avoid;margin-bottom:14px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.t-strip{height:7px}
.st-new .t-strip{background:var(--new)} .st-prep .t-strip{background:var(--prep)} .st-ready .t-strip{background:var(--ready)}
.st-await .t-strip{background:#eab308}
.t-head{display:flex;align-items:center;gap:10px;padding:9px 13px;background:#2d3138;color:#fff}
.t-num{font-family:Montserrat;font-weight:900;font-size:25px;letter-spacing:.01em}
.t-type{font-size:13px;font-weight:700;color:#b9c1cd}
.t-time{margin-left:auto;font-family:Montserrat;font-weight:800;font-size:17px;padding:4px 11px;border-radius:6px;color:#fff}
.t-time.age-green{background:var(--ready)} .t-time.age-amber{background:var(--prep);color:#1c1305} .t-time.age-red{background:var(--red);animation:blink 1.2s ease-in-out infinite}
.t-time.age-done{background:transparent;color:#4ade80}
.t-name{padding:8px 13px;font-weight:700;font-size:14.5px;color:var(--card-sub);border-bottom:1px solid var(--card-line);display:flex;align-items:center;gap:8px}
.t-name .unpaid{font-size:11px;font-weight:800;color:#1c1305;background:#eab308;padding:2px 8px;border-radius:5px}
.t-name .cash{font-size:11px;font-weight:800;color:#1c1305;background:var(--prep);padding:2px 8px;border-radius:5px}
.t-name .paid{font-size:11px;font-weight:800;color:#fff;background:var(--ready);padding:2px 8px;border-radius:5px}
.t-items{display:flex;flex-direction:column;flex:1}
.ti{font-size:18px;font-weight:700;line-height:1.3;color:var(--card-ink);padding:9px 13px;border-bottom:1px solid #f0f2f5}
.ti:last-child{border-bottom:none}
.ti .q{font-family:Montserrat;font-weight:900;margin-right:8px;min-width:26px;display:inline-block}
.ti-mods{font-size:14px;font-weight:600;color:var(--mod);margin:3px 0 0 34px;line-height:1.35}
.t-sched{margin:8px 12px 0;padding:8px 12px;border-radius:6px;background:#f3ecfd;border:1px solid #d9c7f5;color:#6b21a8;font-size:15px;font-weight:800}
.t-note{margin:8px 12px 0;padding:8px 11px;border-radius:6px;background:#fff7df;border:1px solid #f0dd94;color:#7a5b00;font-size:13.5px;font-weight:700;line-height:1.35}
.t-note b{color:#a97b00;letter-spacing:.03em}
/* delivery address + courier status */
.t-addr{margin:8px 12px 0;padding:9px 12px;border-radius:6px;background:#e6f6f7;border:1px solid #b8e2e5;color:#0a6d74;font-size:15px;font-weight:600;line-height:1.35}
.t-addr b{color:#009FA8}
.t-courier{margin:8px 13px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--card-sub)}
.t-courier.on{color:#1c6e2f}
.t-courier a{color:var(--new);text-decoration:underline}
.cr-dot{width:10px;height:10px;border-radius:50%;background:var(--ready);animation:blink 1.6s ease-in-out infinite;flex:0 0 auto}
.t-foot{display:flex;border-top:1px solid var(--card-line);margin-top:8px}
.t-print{flex:0 0 54px;border:none;background:#f2f3f6;color:#6b7280;font-size:20px;cursor:pointer;border-right:1px solid var(--card-line)}
.t-print:active{background:#e5e7ec}
.t-cancel{flex:0 0 54px;border:none;background:#f2f3f6;color:var(--red);font-size:20px;cursor:pointer;border-right:1px solid var(--card-line)}
.t-cancel:active{background:#fbe3e4}
.t-done{flex:0 0 auto;padding:0 15px;border:none;background:#e8f6ec;color:#1c6e2f;font-family:Montserrat;font-weight:900;font-size:15px;cursor:pointer;border-right:1px solid var(--card-line);white-space:nowrap}
.t-done:active{background:#cdeeD8;background:#cdeed8}
.t-btn{flex:1;padding:15px;border:none;font-family:Montserrat;font-weight:900;font-size:19px;cursor:pointer;letter-spacing:.02em;color:#fff}
.st-new .t-btn{background:var(--new)}
.st-prep .t-btn{background:var(--prep);color:#1c1305}
.st-ready .t-btn{background:var(--ready)}
.st-await .t-btn{background:#eab308;color:#1c1305}
.t-btn:active{filter:brightness(.9)}

/* completed view */
.completed{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.crow{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:6px;
  background:var(--card);color:var(--card-ink);border-left:6px solid var(--ready);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.crow .check{width:40px;height:40px;border-radius:50%;background:var(--ready);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;flex:0 0 auto}
.crow .cnum{font-family:Montserrat;font-weight:900;font-size:22px;min-width:64px;color:#1c6e2f}
.crow .cname{font-weight:700;font-size:16px;min-width:120px}
.crow .citems{color:var(--card-sub);font-size:14px;flex:1}
.crow .ctime{color:var(--card-sub);font-size:13px}
.crow .recall{border:1px solid var(--card-line);background:#f2f3f6;color:#374151;padding:9px 16px;border-radius:6px;font-weight:700;cursor:pointer}
.crow .recall:active{background:#e5e7ec}

/* ── responsive: tablets / iPads (shrink the header so it isn't squished) ── */
@media(max-width:1100px){
  .kds-top{gap:9px 14px;padding:8px 12px}
  .brand img{height:38px}
  .brand span{font-size:16px}
  .seg-btn{font-size:13px;padding:7px 13px}
  .seg-btn b{font-size:12px;padding:1px 7px}
  .stats{gap:6px}
  .stat{font-size:12px;padding:5px 10px}
  .right{gap:11px}
  .sound-btn{width:38px;height:38px;font-size:17px}
  .clock{font-size:16px}
  .avg{font-size:12px}
  .tickets{columns:300px;column-gap:11px;padding:11px}
  .ticket{margin-bottom:11px}
  .t-num{font-size:22px}.ti{font-size:17px}.t-btn{font-size:17px;padding:13px}
}
@media(max-width:760px){
  .kds-top{gap:8px 10px;padding:8px 11px}
  .brand span{display:none}          /* keep the logo, drop the word to save room */
  .avg{display:none}
  .seg-btn{font-size:12px;padding:6px 11px}
  .stat{font-size:11px;padding:4px 9px}
  .clock{font-size:15px}
  .tickets{columns:1}
}

/* print: only the ticket */
#print-area{display:none}
@media print{
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{display:block;position:absolute;left:0;top:0;width:100%;color:#000;font-family:monospace;padding:8px}
  .pt-name{font-size:26px;font-weight:900;text-align:center;margin-bottom:4px}
  .pt-hd{font-size:20px;font-weight:800;text-align:center;border-bottom:2px dashed #000;padding-bottom:6px;margin-bottom:6px}
  .pt-i{font-size:20px;margin:5px 0}
  .pt-ft{border-top:2px dashed #000;margin-top:8px;padding-top:6px;font-size:15px;text-align:center}
}

/* ── idle screensaver ── */
#saver{position:fixed;inset:0;z-index:200;background:#0B0410;display:flex;align-items:center;justify-content:center;cursor:pointer}
#saver[hidden]{display:none!important}
.sv-inner{text-align:center;animation:sv-drift 120s ease-in-out infinite}
.sv-inner img{width:min(300px,45vw);margin-bottom:26px;opacity:.95}
.sv-clock{font-family:Montserrat,Inter,sans-serif;font-weight:900;font-size:min(120px,16vw);line-height:1;color:#fff}
.sv-date{margin-top:10px;font-size:min(24px,4vw);font-weight:600;color:#B9A8B3}
.sv-hint{margin-top:34px;font-size:14px;color:#7E6C78}
/* slow drift so the TV doesn't burn in */
@keyframes sv-drift{
  0%{transform:translate(0,0)}25%{transform:translate(3vw,2vh)}50%{transform:translate(-2vw,3vh)}
  75%{transform:translate(-3vw,-2vh)}100%{transform:translate(0,0)}
}

/* 🎨 tenant brand — auto-appended; change it in ⚙️ Settings → Brand */
:root{--purple:#5E0F80;--purple-deep:#400a57;--pink:#D81E5B;--orange:#F39200;--turq:#009FA8;--teal:#009FA8;--lime:#7CB518;--brand-primary:#5E0F80;--brand-secondary:#D81E5B;--brand-accent:#F39200;--brand-turquoise:#009FA8;--brand-lime:#7CB518}