/* Operations page — live KDS board, offline POS, receipt, 24-panel admin grid */
/* Board shell */
.kds { background:#0d1117; border-radius:16px; overflow:hidden; }
 
/* Top bar */
.kds__top { background:#161b24; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); }
.kds__top-left { display:flex; align-items:center; gap:20px; }
.kds__logo { display:flex; align-items:center; gap:9px; }
.kds__logo-icon { width:30px; height:30px; background:#1e2631; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.kds__logo-name { font-size:12px; font-weight:700; color:#e2e8f0; }
.kds__logo-sub { font-size:10px; color:rgba(255,255,255,.3); margin-top:1px; }
.kds__summary { display:flex; gap:16px; }
.kds__sp { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.kds__dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); }
.kds__dot.prep { background:#60a5fa; }
.kds__dot.ready { background:#34d399; }
.kds__badge { background:rgba(255,255,255,.1); color:#e2e8f0; border-radius:99px; padding:1px 7px; font-size:11px; font-weight:700; }
.kds__badge.prep { background:#1d3a6b; color:#93c5fd; }
.kds__badge.ready { background:#064e3b; color:#6ee7b7; }
.kds__top-right { display:flex; align-items:center; gap:12px; }
.kds__clock { font-size:16px; font-weight:700; color:#e2e8f0; font-variant-numeric:tabular-nums; letter-spacing:.05em; font-family:var(--font-mono, monospace); }
.kds__live { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.1em; color:#4ade80; }
.kds__live .d { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:kds-pulse 1.4s ease-in-out infinite; }
.kds-overflow {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.25);
  text-align: center;
  padding: 6px 0 2px;
  letter-spacing: .06em;
}
@keyframes kds-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
 
/* Columns */
.kds__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:0; min-height:420px; }
.kcol { display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.05); padding:0; }
.kcol:last-child { border-right:none; }
.kcol__h { display:flex; justify-content:space-between; align-items:center; padding:10px 14px 8px; border-bottom:1px solid rgba(255,255,255,.06); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.kcol__h.new { color:rgba(255,255,255,.5); }
.kcol__h.prep { color:#60a5fa; }
.kcol__h.ready { color:#34d399; }
.kcol__h .c { border-radius:99px; padding:1px 8px; font-size:11px; font-weight:700; background:rgba(255,255,255,.1); color:#e2e8f0; }
.kcol__h .c.prep { background:#1d3a6b; color:#93c5fd; }
.kcol__h .c.ready { background:#064e3b; color:#6ee7b7; }
.kcol > div:last-child { padding:10px; display:flex; flex-direction:column; gap:8px; flex:1; }
 
/* Ticket */
.ticket { background:#161b24; border-radius:11px; overflow:hidden; flex-shrink:0; transition:opacity .3s; }
.ticket.new-t { border:1px solid rgba(255,255,255,.1); }
.ticket.prep-t { border:1px solid rgba(96,165,250,.25); }
.ticket.ready-t { border:2px solid #34d399; }
.ticket__stripe { height:3px; }
.ticket__stripe.ok { background:#2f9e5a; }
.ticket__stripe.warn { background:#e0a03c; }
.ticket__stripe.late { background:#e0573e; }
.ticket__stripe.ready-s { background:#34d399; }
.ticket__body { padding:10px 12px 0; }
.ticket__oid { font-size:9px; color:rgba(255,255,255,.2); font-family:var(--font-mono,monospace); margin-bottom:4px; }
.ticket__row1 { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:3px; }
.ticket__name { font-size:14px; font-weight:700; color:#e2e8f0; line-height:1.2; }
.ticket__timer { display:flex; align-items:center; gap:4px; background:#1c2333; border-radius:99px; padding:3px 8px; flex-shrink:0; font-size:11px; font-weight:700; }
.ticket__timer.ok { color:#4ade80; }
.ticket__timer.warn { color:#fbbf24; background:#2a1f0a; }
.ticket__timer.late { color:#f87171; background:#2d1515; }
.ticket__type { margin:4px 0 8px; }
.ticket__type-pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; }
.ticket__type-pill.delivery { background:#1e3a5f; color:#93c5fd; }
.ticket__type-pill.collection { background:#1a2e1a; color:#86efac; }
.ticket__type-pill.table { background:#2d1a4e; color:#c4b5fd; }
.ticket__items { list-style:none; padding:0; margin-bottom:8px; display:flex; flex-direction:column; gap:3px; }
.ticket__item { display:flex; align-items:baseline; gap:6px; }
.ticket__qty { font-size:18px; font-weight:900; color:#f97316; line-height:1; min-width:18px; }
.ticket__qty.rc { color:#34d399; }
.ticket__iname { font-size:12px; font-weight:600; color:#e2e8f0; }
.ticket__imod { font-size:11px; color:rgba(255,255,255,.38); }
.ticket__warn { display:flex; align-items:center; gap:6px; padding:5px 12px; background:rgba(220,38,38,.12); border-top:1px solid rgba(220,38,38,.18); }
.ticket__warn.w { background:rgba(245,158,11,.08); border-top-color:rgba(245,158,11,.18); }
.ticket__warn-text { font-size:10px; font-weight:600; color:#f87171; }
.ticket__warn-text.w { color:#fbbf24; }
.ticket__action { padding:8px 12px 10px; }
.ticket__btn { width:100%; padding:8px; border-radius:8px; border:none; font-size:12px; font-weight:700; letter-spacing:.03em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.ticket__btn:hover { opacity:.88; }
.ticket__btn.start { background:#1e2631; color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.1); }
.ticket__btn.mark-ready { background:#3b82f6; color:#fff; }
.ticket__btn.serve { background:transparent; color:rgba(196,181,253,.65); font-size:11px; border:none; padding:2px 0; }
.kds-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:40px 0; opacity:.22; }
.kds-empty p { font-size:11px; color:rgba(255,255,255,.5); }
 

/* POS */
.pos-mock { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; max-width:400px; }
.pos-mock__bar { background:color-mix(in srgb, var(--amber) 16%, var(--surface)); padding:12px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.pos-mock__bar .d { width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px color-mix(in srgb, var(--amber) 25%, transparent); }
.pos-mock__bar b { font-size:.86rem; } .pos-mock__bar span { margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }
.pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px; }
.pos-key { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px 0; text-align:center; font-weight:600; font-size:.92rem; }
.pos-key.k { background:var(--accent); color:#fff; border:none; }
html[data-theme="dark"] .pos-key.k { color:#1a0f0a; }
.pos-foot { padding:0 16px 16px; }
.ph-basket { margin:2px 12px 14px; background:var(--text); color:var(--bg); border-radius:12px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; font-size:.86rem; font-weight:600; }

/* receipt */
.receipt { background:#fffdf8; color:#1a1714; width:250px; margin-inline:auto; padding:18px 20px; font-family:var(--font-mono); font-size:.72rem; line-height:1.7; box-shadow:var(--shadow-lg); position:relative; }
.receipt::before, .receipt::after { content:""; position:absolute; left:0; right:0; height:10px; background:repeating-linear-gradient(135deg,#fffdf8 0 7px, transparent 7px 14px); }
.receipt::before { top:-9px; } .receipt::after { bottom:-9px; transform:scaleY(-1); }
.receipt .c { text-align:center; } .receipt .b { font-weight:700; }
.receipt hr { border:none; border-top:1px dashed #bbb; margin:8px 0; }
.receipt .ln { display:flex; justify-content:space-between; }

/* admin panels */
.panels { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.panel-chip { background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px 12px; font-size:.82rem; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:8px; transition:.25s; }
.panel-chip:hover { border-color:var(--accent); color:var(--text); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.panel-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
@media (max-width:900px){ .panels{ grid-template-columns:repeat(3,1fr); } .kds__cols{ grid-template-columns:1fr; } .kcol{ min-height:auto; } }
@media (max-width:560px){ .panels{ grid-template-columns:repeat(2,1fr); } }