/* ===== Kasir (POS) & Dapur ===== */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}
.cart{position:sticky;top:1rem}
.item{display:flex;flex-direction:column;gap:.2rem;text-align:left;font:inherit;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem;cursor:pointer}
.item:hover{border-color:var(--brand)} .item:disabled{opacity:.45;cursor:not-allowed}
.line{display:flex;justify-content:space-between;gap:.6rem;padding:.25rem 0}
.line.total{border-top:2px dashed var(--line);margin-top:.4rem;padding-top:.6rem;font-size:1.1rem}
.kitchen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start}
.col h3{margin-bottom:.6rem} .col .tk{margin-bottom:.7rem;border-left:5px solid var(--mari)}
.col.masak .tk{border-color:var(--brand)} .col.siap .tk{border-color:var(--ok)} .col.selesai .tk{border-color:var(--line);opacity:.7}
/* ===== Rental / warnet ===== */
.units{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.unit{display:flex;flex-direction:column;gap:.35rem;border-left:5px solid var(--line)}
.unit.busy{border-left-color:var(--mari)}
.unit.bill{border-left-color:var(--danger);background:#fff8f7}
.unit.bill .unit-cost{font-size:1.5rem;color:var(--danger)}
.unit-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.unit-body{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.unit-time{font-size:1.7rem;font-weight:800;font-variant-numeric:normal;font-feature-settings:"tnum" 0;letter-spacing:.02em;white-space:nowrap}
.unit-time .tc,.unit-remain .tc{display:inline-block;margin:0 .06em;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:800}
.unit-cost{font-weight:800;color:var(--brand-d)}
.unit-items{font-size:.85rem;color:var(--muted)}
.unit-acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.badge.ok{background:#dcf3e6;color:#1d6b41}

.unit-remain{font-weight:800;font-size:1.05rem;color:var(--brand-d)}
.unit-remain.low{color:var(--danger)}

/* ===== Denah ruangan (rental) ===== */
.map-modebar .seg{max-width:360px;margin-bottom:.9rem}
.map-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.map-tabs{display:flex;gap:.4rem;overflow-x:auto;max-width:100%;padding-bottom:2px}
.map-tab{flex:none;display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:700;font-size:.88rem;padding:.45rem .9rem;border:1.5px solid var(--line);border-radius:99px;background:#fff;color:var(--muted);cursor:pointer}
.map-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.map-tab.map-plus{border-style:dashed;color:var(--mari);background:var(--mari-l)}
.map-n{font-size:.72rem;min-width:1.3rem;text-align:center;border-radius:99px;padding:0 .35rem;background:rgba(8,48,88,.12)} .map-tab.on .map-n{background:rgba(255,255,255,.25)}
.map-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.map-zoom{display:flex;align-items:center;gap:.3rem}
.map-zoom .btn{min-width:2.1rem}
.map-zl{min-width:2.8rem;text-align:center;font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums}
.map-edit-tools{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.map-file{display:inline-flex;align-items:center;cursor:pointer}
.map-help{margin-bottom:.6rem}
.map-viewport{overflow:auto;max-height:74vh;border:1.5px solid var(--line);border-radius:var(--r);background:#dfe8f3;-webkit-overflow-scrolling:touch}
.map-canvas{position:relative;--z:1;min-height:200px;background-color:#f7fafd;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(var(--z)*40px) calc(var(--z)*40px)}
.map-canvas.has-bg{background-repeat:no-repeat}
.map-canvas.editing{box-shadow:inset 0 0 0 3px rgba(0,128,248,.35)}
.map-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600}
.map-unit{position:absolute;width:calc(var(--z)*104px);min-height:calc(var(--z)*60px);padding:calc(var(--z)*6px) calc(var(--z)*8px);font-size:max(9px,calc(var(--z)*12.5px));line-height:1.2;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#fff;border:2px solid var(--ok);border-radius:calc(var(--z)*10px);box-shadow:0 2px 8px rgba(8,48,88,.22);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.map-unit:hover{box-shadow:0 4px 14px rgba(8,48,88,.3)}
.map-unit.busy{border-color:var(--mari);background:var(--mari-l)}
.map-unit.over{border-color:var(--danger);background:#fbe6e3}
.map-unit.auto{opacity:.9}
.map-unit .mu-name{font-size:1.05em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-unit .mu-free{color:var(--ok);font-weight:700;font-size:.9em}
.map-unit .mu-meta{display:flex;flex-direction:column;align-items:center}
.map-unit .unit-time{font-size:1.1em;letter-spacing:0}
.map-unit .unit-cost{font-size:.95em}
.map-unit .unit-remain{font-size:.9em}
.mu-dot{position:absolute;top:calc(var(--z)*4px);right:calc(var(--z)*4px);width:max(6px,calc(var(--z)*9px));height:max(6px,calc(var(--z)*9px));border-radius:50%;background:#aab7c6}
.mu-dot.on{background:#1fbf6b;animation:pcblink 1.1s ease-in-out infinite}
.map-unit.editable{touch-action:none;cursor:grab;outline:2px dashed var(--mari);outline-offset:2px}
.map-unit.drag{cursor:grabbing;z-index:5;opacity:.85;box-shadow:0 8px 20px rgba(8,48,88,.4)}
.sheet:has(.map-pop){max-width:340px}
.map-pop .unit{border-left-width:5px}
@media (max-width:820px){.map-modebar .seg{max-width:none}.map-viewport{max-height:68vh}.map-bar{align-items:stretch}.map-tools{justify-content:space-between;width:100%}}

/* ===== Denah meja restoran ===== */
.map-unit.wait{border-color:#e0a100;background:#fff3d6}
.map-unit .mu-st{font-weight:800;font-size:.88em;color:var(--brand-d)}
.map-unit.wait .mu-st{color:#8a5a00}
.map-unit .mu-last{font-size:.78em;color:var(--muted)}
.map-unit .tb-in{font-size:.85em;color:var(--muted)}
.map-unit .tb-dur{font-weight:800;font-size:1em;font-variant-numeric:tabular-nums}
.tb-sum{display:flex;gap:.4rem;flex-wrap:wrap}
.tb-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;padding:.25rem .7rem;border-radius:99px;background:#fff;border:1.5px solid var(--line)}
.tb-chip i{width:.7rem;height:.7rem;border-radius:50%;background:var(--ok)}
.tb-chip.busy i{background:var(--mari)} .tb-chip.wait i{background:#e0a100}
.tb-pick{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"l b i" "s s s";align-items:center;gap:.1rem .6rem;width:100%;text-align:left;font:inherit;color:inherit;background:var(--mari-l);border:1.5px solid #b9d6f7;border-radius:12px;padding:.6rem .8rem;margin:.2rem 0 .8rem;cursor:pointer}
.tb-pick:hover{border-color:var(--mari)}
.tb-pick-l{grid-area:l;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tb-pick b{grid-area:b;font-size:1.05rem} .tb-pick small{grid-area:s;color:var(--muted)}
.tb-pick i{grid-area:i;font-style:normal;font-weight:800;font-size:.8rem;color:var(--mari)}
.tb-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.5rem}
.tb-chip-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;font:inherit;padding:.6rem .3rem;border-radius:12px;border:2px solid var(--ok);background:#fff;color:var(--ink);cursor:pointer;text-align:center}
.tb-chip-btn b{font-size:1.15rem} .tb-chip-btn small{font-size:.7rem;color:var(--muted);line-height:1.15}
.tb-chip-btn.busy{border-color:var(--mari);background:var(--mari-l)} .tb-chip-btn.wait{border-color:#e0a100;background:#fff3d6}
.tb-chip-btn.none{border-color:var(--line)}
.tb-chip-btn.sel{box-shadow:0 0 0 3px rgba(0,128,248,.35)}
.tb-ord{display:grid;gap:.15rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.tb-ord:last-of-type{border-bottom:0}

/* ===== Waktu tiap tahap pesanan & peringatan batas waktu ===== */
.sla-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0}
.sla-chip{display:inline-flex;flex-direction:column;line-height:1.15;font-weight:800;font-size:.82rem;background:var(--bg);border-radius:8px;padding:.2rem .5rem;font-variant-numeric:normal;font-feature-settings:"tnum" 0}
.sla-chip small{font-weight:600;font-size:.66rem;color:var(--muted)}
.sla-t{display:inline-block;font-size:.8rem;font-weight:700;color:var(--brand-d);background:var(--mari-l);border-radius:99px;padding:.15rem .65rem;margin-bottom:.4rem;font-variant-numeric:normal;font-feature-settings:"tnum" 0}
.sla-t.late{background:#fbe6e3;color:var(--danger);animation:slablink 1.2s ease-in-out infinite}
@keyframes slablink{50%{opacity:.55}}
.sla-form{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.sla-form label{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.88rem}
.sla-title{width:100%;font-size:.92rem} .sla-form input{width:4.5rem} .sla-form em{font-style:normal;color:var(--muted)}
.sla-banner{display:flex;align-items:center;gap:.8rem;background:#fff3d6;border:1.5px solid #e0a100;border-left-width:6px;border-radius:12px;padding:.7rem .9rem;margin-bottom:1rem}
.sla-ico{font-size:1.6rem;animation:slablink 1.2s ease-in-out infinite}
.sla-body{flex:1;min-width:0}
.sla-body b{color:#8a5a00}
.sla-body ul{margin:.25rem 0 0 1.1rem;padding:0;font-size:.88rem}
.nav-badge{display:inline-block;margin-left:.5rem;min-width:1.3rem;text-align:center;font-size:.72rem;font-weight:800;line-height:1.3rem;border-radius:99px;background:var(--danger);color:#fff;padding:0 .35rem}
@media (max-width:820px){.sla-banner{flex-direction:column;align-items:stretch}.sla-banner .btn{width:100%}}

/* tanda silang di pojok kartu pesanan */
.tk{position:relative}
.tk-x{position:absolute;top:.45rem;right:.45rem;width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;font:inherit;font-size:.9rem;font-weight:800;line-height:1;color:var(--muted);background:var(--bg);border:0;border-radius:50%;cursor:pointer}
.tk-x:hover{background:#fbe6e3;color:var(--danger)}