@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

:root{
  --bg:#0c0c0e;--bg2:#141416;--bg3:#1c1c20;
  --card:#18181b;--card-h:#222226;--border:#2a2a2e;--border-l:#333338;
  --gold:#f5c518;--gold-dim:#c9a200;--gold-glow:rgba(245,197,24,.06);
  --green:#22c55e;--green-d:rgba(34,197,94,.1);--green-g:linear-gradient(135deg,#16a34a,#15803d);
  --red:#ef4444;--red-d:rgba(239,68,68,.1);--red-g:linear-gradient(135deg,#dc2626,#991b1b);
  --orange:#f97316;
  --blue:#3b82f6;
  --txt:#f4f4f5;--txt2:#a1a1aa;--txt3:#71717a;
  --r:12px;--rs:8px;
  --sb-w:220px;--sb-w-collapsed:64px;
  --nav-h:56px;--top-h:52px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased}
#app{display:flex;height:100%;position:relative}

/* ===== SIDEBAR (desktop ≥768px) ===== */
.sidebar{display:none;flex-direction:column;width:var(--sb-w);min-width:var(--sb-w);height:100%;background:var(--bg2);border-right:1px solid var(--border);z-index:50;transition:width .25s,min-width .25s;overflow:hidden}
.sidebar.collapsed{width:var(--sb-w-collapsed);min-width:var(--sb-w-collapsed)}
.sb-head{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid var(--border)}
.sb-logo{display:flex;align-items:center;gap:8px;flex:1;overflow:hidden}
.logo-icon{font-size:22px}
.sb-brand{display:flex;flex-direction:column;white-space:nowrap}
.logo{font-family:'Inter',sans-serif;font-weight:800;font-size:16px;color:var(--gold);letter-spacing:2px}
.logo-sub{font-size:9px;font-weight:600;color:var(--txt3);letter-spacing:1.5px;text-transform:uppercase}
.sidebar.collapsed .sb-brand{display:none}
.sb-toggle{background:none;border:none;color:var(--txt2);cursor:pointer;padding:4px;border-radius:var(--rs)}
.sb-toggle:hover{background:var(--bg3)}
.sb-toggle .material-icons-round{font-size:20px}
.sb-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rs);background:none;border:none;color:var(--txt2);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;white-space:nowrap;text-align:left;width:100%}
.sb-item:hover{background:var(--bg3);color:var(--txt)}
.sb-item.active{background:var(--gold-glow);color:var(--gold);font-weight:600}
.sb-item .material-icons-round{font-size:20px;min-width:20px}
.sidebar.collapsed .sb-label{display:none}
.sidebar.collapsed .sb-item{justify-content:center;padding:10px}
.sb-footer{padding:12px 14px;border-top:1px solid var(--border)}
.sb-clock{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--txt3);text-align:center}
.sb-overlay{display:none}

/* ===== MOBILE TOP BAR (<600px) ===== */
.topbar-mobile{display:flex;align-items:center;gap:8px;padding:0 10px 0 6px;height:var(--top-h);background:var(--bg2);border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:40}
.tb-icon-btn{background:none;border:none;color:var(--txt);width:38px;height:38px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.15s}
.tb-icon-btn:hover{background:var(--bg3)}
.tb-icon-btn .material-icons-round{font-size:22px}
.tb-brand-area{position:relative;flex:1;min-width:0;height:32px;overflow:hidden}
.tb-brand{position:absolute;inset:0;display:flex;align-items:center;gap:5px;transition:opacity .2s ease, transform .2s ease}
.tb-title{position:absolute;inset:0;display:flex;align-items:center;font-weight:700;font-size:15px;color:var(--txt);opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease;letter-spacing:.3px}
.topbar-mobile.scrolled .tb-brand{opacity:0;transform:translateY(-8px)}
.topbar-mobile.scrolled .tb-title{opacity:1;transform:translateY(0)}
.tb-shift-badge{display:flex;align-items:center;gap:5px;background:var(--bg3);border:1px solid var(--border);padding:4px 9px;border-radius:14px;font-size:10px;font-weight:700;color:var(--txt2);letter-spacing:.4px;flex-shrink:0;transition:.2s}
.tb-shift-badge .tsb-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0}
.tb-shift-badge.open{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:var(--green)}
.tb-shift-badge.open .tsb-dot{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.topbar-clock{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt3);flex-shrink:0}

/* ===== MOBILE QUICK STRIP ===== */
.quick-strip{display:flex;gap:6px;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--border);position:fixed;top:var(--top-h);left:0;right:0;z-index:39;overflow-x:auto;-webkit-overflow-scrolling:touch}
.quick-strip::-webkit-scrollbar{display:none}
.qs-pill{display:inline-flex;align-items:center;gap:5px;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:6px 12px;border-radius:16px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:.15s}
.qs-pill .material-icons-round{font-size:14px}
.qs-pill:hover,.qs-pill:active{background:var(--card-h);color:var(--txt)}
.qs-pill.active{background:rgba(245,197,24,.14);border-color:var(--gold);color:var(--gold)}

/* ===== MOBILE DRAWER (off-canvas dari kiri) ===== */
.drawer-mobile{position:fixed;top:0;left:0;bottom:0;width:260px;max-width:84vw;background:var(--bg2);border-right:1px solid var(--border);z-index:55;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column;will-change:transform;padding-bottom:var(--safe-b)}
.drawer-mobile.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.45)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:54;opacity:0;pointer-events:none;transition:opacity .25s ease}
.drawer-overlay.show{opacity:1;pointer-events:all}
.dm-head{padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.dm-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dm-logo-icon{font-size:22px;flex-shrink:0}
.dm-brand .logo{display:block;font-size:15px}
.dm-brand .logo-sub{display:block;margin-top:1px}
.dm-shift{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:7px 10px;font-size:10px;font-weight:600;color:var(--txt2);letter-spacing:.3px}
.dm-shift .material-icons-round{font-size:14px;color:var(--txt3)}
.dm-shift.open{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3);color:var(--green)}
.dm-shift.open .material-icons-round{color:var(--green)}
.dm-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.dm-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--rs);background:none;border:none;color:var(--txt2);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:.15s}
.dm-item:hover{background:var(--bg3);color:var(--txt)}
.dm-item.active{background:var(--gold-glow);color:var(--gold);font-weight:600}
.dm-item .material-icons-round{font-size:20px;min-width:20px}
.dm-footer{padding:12px 14px;border-top:1px solid var(--border)}
.dm-clock{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--txt3);text-align:center}

/* ===== MAIN CONTENT ===== */
/* Mobile: top bar (52px) + quick strip (40px) + buffer 12px = 104px atas */
.main-content{flex:1;overflow-y:auto;padding:calc(var(--top-h) + 40px + 12px) 16px calc(var(--safe-b) + 16px);-webkit-overflow-scrolling:touch}
.pg{display:none}.pg.active{display:block}

/* Toolbar */
.pg-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.pg-title{font-weight:800;font-size:18px;color:var(--txt)}
.pg-desc{color:var(--txt3);font-size:12px;margin-bottom:14px}
.tb-btn{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:7px 14px;border-radius:var(--rs);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:.15s}
.tb-btn:hover{background:var(--card-h);color:var(--txt)}
.tb-btn .material-icons-round{font-size:15px}

/* ===== DASHBOARD SUMMARY CARDS ===== */
.dash-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.ds-card{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.ds-icon{font-size:22px;color:var(--gold);background:var(--gold-glow);width:40px;height:40px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center}
.ds-label{display:block;font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px}
.ds-val{display:block;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:var(--gold);margin-top:1px}

/* ===== STATION GRID ===== */
.station-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.st-card{background:var(--card);border-radius:var(--r);padding:16px;cursor:pointer;border:1px solid var(--border);transition:.15s;position:relative}
.st-card:hover{border-color:var(--border-l);background:var(--card-h)}
.st-card:active{transform:scale(.98)}
.st-card.unpaid{background:var(--red-g);border-color:transparent}
.st-card.paid{background:var(--green-g);border-color:transparent}
.st-card.partial{background:linear-gradient(135deg,#f97316,#c2410c);border-color:transparent}
.st-card .st-name{font-weight:700;font-size:15px;letter-spacing:.3px}
.st-card .st-type{font-size:10px;color:var(--txt2);margin-top:2px}
.st-card.unpaid .st-type,.st-card.paid .st-type,.st-card.partial .st-type{color:rgba(255,255,255,.7)}
.st-card .st-badge{display:inline-block;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:3px 8px;border-radius:20px;margin-top:8px}
.st-card .st-badge.idle{background:var(--gold);color:#000}
.st-card .st-badge.unpaid,.st-card .st-badge.paid,.st-card .st-badge.partial{background:rgba(255,255,255,.15);color:#fff}
.st-card .st-time{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(255,255,255,.65);margin-top:4px}
.st-card .st-total{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#fff;margin-top:2px}
/* Expired state — pulsing border to alert kasir */
.st-card.expired{animation:pulse-border 1.5s infinite}
@keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.2)}}

/* === STATION CARD REDESIGN (Patch 10) === */
.billing-summary-v2{margin-bottom:16px}
.billing-summary-v2 .rpt-card-v2{margin-bottom:0}

/* ========================================================
   BILLING SUMMARY V3 — Compact scorecard + typed station bar
   Updated 2026-06-06
   ======================================================== */
.bsum{display:flex;flex-direction:column}
.bsum-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rs) var(--rs) 0 0;overflow:hidden}
.bsum-kc{background:var(--card);padding:11px 13px;min-width:0;cursor:default}
.bsum-kc.hero{background:linear-gradient(135deg,rgba(245,197,24,.06),transparent)}
.bsum-kl{font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--txt3);margin-bottom:3px;display:flex;align-items:center;gap:4px;line-height:1.2}
.bsum-kl .material-icons-round{font-size:12px}
.bsum-kv{font-size:17px;font-weight:700;font-family:'JetBrains Mono',monospace,sans-serif;letter-spacing:-.5px;color:var(--txt);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsum-kv.gold{color:var(--gold)}
.bsum-kv.green{color:var(--green)}
.bsum-kv.red{color:var(--red)}
.bsum-kv.muted{color:var(--txt3);font-size:15px}
.bsum-ks{font-size:10px;color:var(--txt3);margin-top:2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsum-ks.pos{color:var(--green)}
.bsum-ks.neg{color:var(--red)}

.bsum-stbar{background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--rs) var(--rs);padding:8px 13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bsum-stbar-lbl{font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--txt3);flex-shrink:0}
.bsum-stg{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.bsum-stgt{font-size:8px;font-weight:700;color:var(--txt3);letter-spacing:.4px;text-transform:uppercase}
.bsum-stgt.vip{color:#a78bfa}
.bsum-stgt.play{color:#38bdf8}
.bsum-sttr{display:flex;gap:1.5px;align-items:center}
.bsum-seg{height:10px;width:12px;border-radius:1px;flex-shrink:0;cursor:default;transition:transform .1s}
.bsum-seg:hover{transform:scaleY(1.4)}
.bsum-seg.i{background:var(--bg3);border:0.5px solid var(--border-l)}
.bsum-seg.l{background:var(--green)}
.bsum-seg.u{background:var(--red)}
.bsum-seg.p{background:var(--orange)}
.bsum-stsep{width:1px;background:var(--border);height:20px;flex-shrink:0}
.bsum-sttotal{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.bsum-chip{font-size:10px;font-weight:600;display:flex;align-items:center;gap:3px;line-height:1}
.bsum-chip .material-icons-round{font-size:14px}
.bsum-chip.idle{color:var(--txt3)}
.bsum-chip.ok{color:var(--green)}
.bsum-chip.bad{color:var(--red);font-weight:700}

/* Tablet & mobile — KPI jadi 2x2 grid */
@media (max-width:767px){
  .bsum-kpi{grid-template-columns:repeat(2,1fr)}
  .bsum-kc{padding:10px 12px}
  .bsum-kv{font-size:16px}
  .bsum-stbar{padding:10px 12px;gap:8px}
}

/* Mobile sempit — value sedikit lebih kecil, total chips wrap ke baris baru */
@media (max-width:480px){
  .bsum-kv{font-size:15px}
  .bsum-kv.muted{font-size:13px}
  .bsum-sttotal{margin-left:0;width:100%;justify-content:flex-start;padding-top:6px;margin-top:2px;border-top:1px dashed var(--border)}
}
.sc{border-radius:14px;padding:14px;position:relative;cursor:pointer;overflow:hidden;border:1.5px solid transparent;min-height:155px;display:flex;flex-direction:column;transition:.15s}
.sc:hover{transform:translateY(-1px)}
.sc:active{transform:scale(.98)}

.sc-idle{background:#1c1c1c;border-color:#2a2a2a}
.sc-paid{background:#0d2218;border-color:#1a4a2e}
.sc-done{background:#0a1a10;border-color:#1a3a22}
.sc-unpaid{background:#220d0d;border-color:#4a1a1a}
.sc-partial{background:#1f1a08;border-color:#4a3a10}
.sc-overtime{background:#220d0d;border-color:#6b2020;animation:sc-pulse 2s infinite}
.sc-open{background:#081522;border-color:#0d3558}

@keyframes sc-pulse{0%,100%{border-color:#6b2020;box-shadow:0 0 0 0 rgba(239,68,68,0.3)}50%{border-color:#dc2626;box-shadow:0 0 0 4px rgba(239,68,68,0.15)}}
@keyframes sc-blink{0%,100%{opacity:1}50%{opacity:0.55}}
.sc-open .sc-timer{animation:sc-blink 2.5s infinite}

.sc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:8px}
.sc-type{font-size:10px;color:var(--txt3);font-weight:500;margin-bottom:1px}
.sc-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:.2px;line-height:1.1}
.sc-badge{font-size:8px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.4px;flex-shrink:0;line-height:1.3}
.sc-badge-idle{background:#2a2a2a;color:#888}
.sc-badge-paid{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.sc-badge-unpaid{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
.sc-badge-partial{background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.3)}
.sc-badge-overtime{background:#7f1d1d;color:#fca5a5}
.sc-badge-open{background:rgba(96,165,250,.15);color:#60a5fa;border:1px solid rgba(96,165,250,.3)}

.sc-timer{font-size:24px;font-weight:700;font-family:'JetBrains Mono',monospace;line-height:1;margin-bottom:4px;color:#fff}
.sc-paid .sc-timer{color:#22c55e}
.sc-done .sc-timer{color:#16a34a;font-size:22px}
.sc-unpaid .sc-timer{color:#fff}
.sc-partial .sc-timer{color:#f59e0b}
.sc-overtime .sc-timer{color:#ef4444}
.sc-open .sc-timer{color:#60a5fa}
.sc-timer-label{font-size:9px;font-weight:500;letter-spacing:.3px;margin-bottom:10px;text-transform:uppercase;color:var(--txt3)}
.sc-paid .sc-timer-label{color:#16a34a}
.sc-done .sc-timer-label{color:#166534}
.sc-partial .sc-timer-label{color:#92400e}
.sc-overtime .sc-timer-label{color:#991b1b}
.sc-open .sc-timer-label{color:#1d4ed8}

.sc-idle-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;margin-bottom:12px}
.sc-idle-icon{font-size:32px !important;margin-bottom:8px;color:#2a2a2a}
.sc-idle-label{font-size:11px;color:#444;font-weight:500}

.sc-partial-bar{height:3px;border-radius:2px;background:#2a2a2a;margin:4px 0 6px;overflow:hidden}
.sc-partial-fill{height:100%;border-radius:2px;background:#f59e0b;transition:width .3s}
.sc-partial-info{font-size:10px;color:#92400e;margin-bottom:8px}
.sc-partial-info strong{color:#f59e0b;font-weight:700;font-family:'JetBrains Mono',monospace}

.sc-prices{display:flex;gap:6px;margin-top:auto}
.sc-price-item{flex:1;background:rgba(255,255,255,.04);border-radius:8px;padding:6px 8px;min-width:0}
.sc-price-label{font-size:8px;color:#666;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;display:flex;align-items:center;gap:3px;font-weight:600}
.sc-price-icon{font-size:10px !important}
.sc-price-val{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-price-val.sc-muted{color:#444}
.sc-paid .sc-price-val{color:#22c55e}
.sc-done .sc-price-val{color:#22c55e}
.sc-partial .sc-price-val{color:#fb923c}
.sc-overtime .sc-price-val{color:#ef4444}
.sc-open .sc-price-val{color:#60a5fa}

/* ===== FORM ===== */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px}
label{display:block;font-size:11px;font-weight:600;color:var(--txt2);margin-bottom:5px;margin-top:12px;text-transform:uppercase;letter-spacing:.3px}
label:first-child{margin-top:0}
input[type="text"],input[type="number"],input[type="date"],select{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--txt);padding:10px 12px;border-radius:var(--rs);font-family:'Inter',sans-serif;font-size:13px;outline:none;transition:border .15s}
input:focus,select:focus{border-color:var(--gold)}
.icon-btn{background:var(--bg3);border:1px solid var(--border);color:var(--txt2);width:36px;height:36px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn .material-icons-round{font-size:16px}

/* ===== CHIPS ===== */
.chip-row{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:16px;}
.chip{background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:7px 14px;border-radius:20px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:.15s}
.chip.active{background:var(--gold);border-color:var(--gold);color:#000}

/* ===== BUTTONS ===== */
.btn-primary{background:var(--gold);border:none;color:#000;padding:12px 20px;border-radius:var(--rs);font-family:'Inter',sans-serif;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn-primary:hover{background:var(--gold-dim)}
.btn-primary:active{transform:scale(.98)}
.btn-outline{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:10px 16px;border-radius:var(--rs);font-family:'Inter',sans-serif;font-weight:600;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.btn-danger{background:var(--red-g);border:none;color:#fff;padding:12px 20px;border-radius:var(--rs);font-family:'Inter',sans-serif;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-sm{padding:7px 12px;font-size:11px}
.full{width:100%;justify-content:center}
.dur-row{display:flex;align-items:center;gap:8px}
.dur-row input{width:56px;text-align:center}

/* ===== BILLING MODAL ===== */
.bm-station-info{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:12px;margin-bottom:12px}
.bm-station-info .sn{font-weight:700;font-size:16px;color:var(--gold)}
.bm-cafe-list{margin-top:8px}
.bm-cafe-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:11px}
.bm-cafe-item .ci-name{flex:1}.bm-cafe-item .ci-note{color:var(--txt3);font-size:9px;font-style:italic}
.bm-cafe-item .ci-qty{color:var(--gold);margin:0 8px;font-weight:700}
.bm-cafe-item .ci-price{font-family:'JetBrains Mono',monospace;color:var(--gold);min-width:55px;text-align:right;font-size:11px}
.bm-totals{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:12px;margin:12px 0}
.bm-tot-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--txt2)}
.bm-tot-row span:last-child{font-family:'JetBrains Mono',monospace}
.bm-tot-row.grand{border-top:1px solid var(--border);margin-top:4px;padding-top:8px;font-weight:800;font-size:14px;color:var(--gold)}
.bm-partial{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.bm-partial-box{padding:10px 12px;border-radius:var(--rs);border:1px solid}
.bm-partial-box.paid-box{background:var(--green-d);border-color:rgba(34,197,94,.35)}
.bm-partial-box.due-box{background:var(--red-d);border-color:rgba(239,68,68,.35)}
.bm-partial-label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px;font-weight:600}
.bm-partial-box.paid-box .bm-partial-label{color:var(--green)}
.bm-partial-box.due-box .bm-partial-label{color:var(--red)}
.bm-partial-amt{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700}
.bm-partial-box.paid-box .bm-partial-amt{color:var(--green)}
.bm-partial-box.due-box .bm-partial-amt{color:var(--red)}
.bm-partial-meta{font-family:'JetBrains Mono',monospace;font-size:9px;margin-top:3px;opacity:.75}
.bm-partial-box.paid-box .bm-partial-meta{color:var(--green)}
.bm-partial-box.due-box .bm-partial-meta{color:var(--red)}

/* ===== CAFE MENU LIST ===== */
.cm-search-wrap{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:8px 12px}
.cm-search-wrap input{flex:1;background:none;border:none;color:var(--txt);font-size:12px;outline:none;font-family:'Inter',sans-serif}
.cm-list-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);position:relative}
.cm-list-item.inactive{opacity:.3;pointer-events:none}
.cm-list-img{width:56px;height:56px;min-width:56px;border-radius:var(--rs);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;overflow:hidden}
.cm-list-img .cm-badge{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:7px;font-weight:700;padding:2px 0;text-transform:uppercase}
.cm-badge.sel-badge{background:var(--gold);color:#000}
.cm-list-info{flex:1;min-width:0}
.cm-list-name{font-size:12px;font-weight:600}
.cm-list-sub{font-size:9px;color:var(--txt3);margin-top:1px}
.cm-list-price-label{font-size:9px;color:var(--txt3);margin-top:3px}
.cm-list-price{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--gold)}
.cm-list-action{display:flex;align-items:center;gap:12px;flex-direction:column}
.cm-add-btn{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#000;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:700}
.cm-added-tag{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-size:9px;font-weight:700;padding:3px 8px;border-radius:12px}
.cm-qty-inline{display:flex;align-items:center;gap:4px}
.cm-qty-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);color:var(--txt);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cm-qty-num{font-family:'JetBrains Mono',monospace;font-size:13px;min-width:20px;text-align:center;font-weight:700}
.cm-note-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--txt);padding:5px 8px;border-radius:12px;font-size:10px;margin-top:4px;font-family:'Inter',sans-serif;height: 32px;}
.cm-cart-bar{display:flex;align-items:center;padding:12px 16px;border-top:1px solid var(--border);background:var(--gold);gap:8px}
.cm-cart-info{font-weight:700;font-size:12px;color:#000}
.cm-cart-count{display:inline-flex;align-items:center;justify-content:center;background:#000;color:var(--gold);width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:800;margin-right:3px}
.cm-cart-right{flex:1;text-align:right;font-size:11px;color:#000;font-weight:600}
.cm-cart-total{display:block;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:800;color:#000}
.cm-cart-btn{width:36px;height:36px;border-radius:50%;background:#000;color:var(--gold);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* Issue #3: state saat cart kosong — tetap bisa simpan (kosongkan pesanan) */
.cm-cart-btn.cm-cart-btn-empty{background:#444;color:#fff}
.cm-cart-empty-note{font-size:10px;font-weight:600;color:#000;opacity:.75}

/* ===== CAFE ORDER LIST (Opsi A) ===== */
.cafe-list-title{font-family:'Bebas Neue','Inter',sans-serif;font-size:12px;color:var(--gold);letter-spacing:1px;margin-bottom:10px;font-weight:700}

.cafe-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 16px;color:var(--txt3)}
.cafe-empty .material-icons-round{font-size:40px;color:var(--border-l);margin-bottom:10px}
.cafe-empty .ce-txt{font-size:13px;font-weight:600;color:var(--txt2)}
.cafe-empty .ce-sub{font-size:11px;color:var(--txt3);margin-top:3px}

.coa-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:8px;transition:border-color .15s}
.coa-card.unpaid{border-color:rgba(239,68,68,.35)}

.coa-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.coa-id{display:flex;align-items:center;gap:11px;min-width:0}
.coa-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.coa-icon .material-icons-round{font-size:19px}
.coa-icon.paid{background:var(--gold-glow);color:var(--gold)}
.coa-icon.unpaid{background:var(--red-d);color:var(--red)}
/* Daily report category icon colors */
.coa-icon-s{background:rgba(245,197,24,.12);color:var(--gold)}
.coa-icon-c{background:rgba(59,130,246,.12);color:var(--blue)}
.coa-icon-r{background:rgba(168,85,247,.12);color:#a855f7}
.coa-icon-e{background:rgba(239,68,68,.12);color:var(--red)}
.coa-icon-x{background:rgba(34,197,94,.12);color:var(--green)}
.coa-total.neg{color:var(--red)}
.coa-name{font-size:16px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coa-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.coa-total{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--txt)}
.coa-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:4px 9px;border-radius:20px;letter-spacing:.3px;line-height:1.2}
.coa-badge .material-icons-round{font-size:12px}
.coa-badge.paid{background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.coa-badge.unpaid{background:transparent;color:var(--red);border:1px solid rgba(239,68,68,.4)}

.coa-menu-wrap{position:relative}
.coa-dots{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:none;color:var(--txt2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.coa-dots:hover{background:var(--bg3);color:var(--txt)}
.coa-dots .material-icons-round{font-size:18px}
.coa-menu{position:absolute;top:36px;right:0;background:var(--bg2);border:1px solid var(--border-l);border-radius:var(--rs);padding:4px;min-width:150px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.coa-menu-item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--txt);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:9px 10px;border-radius:6px;cursor:pointer;text-align:left;transition:.12s}
.coa-menu-item:hover{background:var(--bg3)}
.coa-menu-item .material-icons-round{font-size:17px;color:var(--txt2)}
.coa-menu-item.danger{color:var(--red)}
.coa-menu-item.danger .material-icons-round{color:var(--red)}
.coa-menu-item.danger:hover{background:var(--red-d)}

.coa-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.coa-meta-l{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--txt2)}
.coa-chip{display:inline-flex;align-items:center;gap:5px}
.coa-chip .material-icons-round{font-size:14px;color:var(--txt3)}
.coa-dot{color:var(--border-l)}
.coa-meta-r{font-size:12px;color:var(--txt3)}

.coa-expand-bar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);margin-top:12px;padding-top:10px;cursor:pointer;user-select:none}
.coa-expand-bar span:first-child{font-size:12px;font-weight:600;color:var(--txt2)}
.coa-chev{font-size:18px;color:var(--txt3);transition:transform .2s}
.coa-chev.open{transform:rotate(180deg)}

.coa-detail{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.coa-ditem{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.coa-ditem .cdi-name{flex:1;color:var(--txt)}
.coa-ditem .cdi-qty{font-family:'JetBrains Mono',monospace;color:var(--txt2);font-size:11px}
.coa-ditem .cdi-price{font-family:'JetBrains Mono',monospace;color:var(--txt2);font-size:11px;min-width:62px;text-align:right}
.coa-ditem-empty{font-size:11px;color:var(--txt3);padding:6px 0}
.coa-detail-total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:13px;font-weight:700}
.coa-detail-total span:last-child{font-family:'JetBrains Mono',monospace;color:var(--gold)}

/* ===== OVERLAY / MODAL (right-side sliding sidebar) ===== */
/* Overlay = dim layer + flex container that pins the panel to the right edge.
   Hidden by default; .show fades it in. Pointer events off while hidden so the
   off-screen panel can't be clicked. */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:stretch;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .25s ease}
.overlay.show{opacity:1;pointer-events:auto}
/* Modal becomes a full-height panel docked to the right, sliding in from off-screen. */
.modal{background:var(--bg2);border:none;border-left:1px solid var(--border);border-radius:0;width:100%;max-width:420px;height:100%;max-height:none;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.overlay.show .modal{transform:translateX(0)}
.modal-full{max-height:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-head h3{font-weight:700;font-size:16px;color:var(--gold);letter-spacing:.5px}
.modal-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
/* Cafe menu panel stacks ABOVE the billing panel (opened from inside billing). */
#cafeMenuModal{z-index:210}
#cmVarianPickerTitle{z-index:211}
#cmVarianPickerM{z-index:212}

/* ===== PANEL STYLING — Option A (premium/glow) ===== */
/* Panel surface: subtle vertical gradient + depth shadow so it lifts off the blurred billing grid. */
.modal{background:linear-gradient(180deg,#161618 0%,#101012 100%);box-shadow:-20px 0 50px rgba(0,0,0,.6)}
/* Header: gold top-rule + radial glow in the corner, echoing the shift bar accent. */
.modal-head{position:relative;overflow:hidden;padding:16px 18px}
.modal-head::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-dim))}
.modal-head::after{content:'';position:absolute;top:-40px;right:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.12),transparent 70%);pointer-events:none}
.modal-head h3{position:relative;z-index:1}
/* Station info block inside billing modal — richer surface. */
.bm-station-info{background:linear-gradient(135deg,#1a1a1c,#141416);border:1px solid var(--border);border-radius:var(--r)}
/* Package chips → grid of gradient cards (Option A). The chip-row right before the cafe button. */
#bmPR{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:16px}
#bmPR .chip{border-radius:10px;padding:11px 12px;text-align:left;font-size:12px;background:var(--card);border:1px solid var(--border);transition:.15s}
#bmPR .chip:hover{border-color:var(--border-l)}
#bmPR .chip.active{background:linear-gradient(135deg,rgba(245,197,24,.16),rgba(245,197,24,.05));border-color:var(--gold);color:var(--gold)}
/* Cafe trigger button → Option C card style (lead icon + chevron). */
.btn-outline.full{width:100%;justify-content:flex-start;gap:11px;padding:13px 14px;border-radius:11px;border:1px solid var(--border);background:var(--card);color:var(--txt);font-weight:600;position:relative}
.btn-outline.full:hover{background:var(--card-h);border-color:var(--gold)}
.btn-outline.full .material-icons-round{width:34px;height:34px;border-radius:9px;background:rgba(245,197,24,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.btn-outline.full::after{content:'›';margin-left:auto;color:var(--txt3);font-size:22px;font-weight:700;line-height:1}
/* Totals box → gradient summary card with large gold grand total. */
.bm-totals{background:linear-gradient(135deg,#1a1a1c,#141416);border:1px solid var(--border);border-radius:var(--r)}
.bm-tot-row.grand span:last-child{font-size:20px}
/* Pay chips (Lunas/Sebagian/Nanti) keep pill style; selected Lunas leans green like LUNAS badge. */
.chip[data-v="full"].active{background:var(--green-d);border-color:var(--green);color:var(--green)}
/* Submit button → gradient + shadow + lift. */
.btn-primary.full{background:linear-gradient(135deg,var(--gold),var(--gold-dim));border-radius:11px;padding:14px;box-shadow:0 4px 14px rgba(245,197,24,.25);transition:.15s}
.btn-primary.full:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,197,24,.35);background:linear-gradient(135deg,#ffd633,var(--gold))}

/* ===== CAFE LIST POLISH (Cafe 1 — inline note, already qty-gated in renderCM) ===== */
.cm-list-item{border:1px solid var(--border);border-radius:11px;padding:11px;margin-bottom:8px;background:var(--card);transition:.15s}
.cm-list-item:has(.cm-added-tag){border-color:var(--gold);background:#1a1608}
.cm-note-input{background:#0e0e0e;border:1px solid #2a2310}
.cm-note-input:focus{border-color:var(--gold);outline:none}
.cm-search-wrap:focus-within{border-color:var(--gold)}

/* ===== TABS ===== */
.tab-row{display:flex;gap:6px;margin-bottom:14px}
.tab{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:10px;border-radius:var(--rs);font-family:'Inter',sans-serif;font-weight:600;font-size:12px;text-align:center;cursor:pointer;transition:.15s}
.tab.active{background:var(--gold);border-color:var(--gold);color:#000}
.rpt-sec{display:none}.rpt-sec.active{display:block}
.exp-tab{display:none}.exp-tab.active{display:block}

/* ===== OVERVIEW + DASHBOARD (Chart.js report redesign) ===== */
.ov-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.ov-kpi.hero-layout{grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr)}
.ov-card{background:linear-gradient(135deg,#1a1a1c,#141416);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.ov-card.hero{background:linear-gradient(135deg,#1c1605,#141210);border-color:#2a2310}
.ov-top{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.ov-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.ov-ic .material-icons-round{font-size:17px}
.ov-ic.gold{background:rgba(245,197,24,.14);color:var(--gold)}
.ov-ic.grn{background:rgba(34,197,94,.14);color:var(--green)}
.ov-ic.red{background:rgba(239,68,68,.14);color:var(--red)}
.ov-ic.blu{background:rgba(59,130,246,.14);color:var(--blue)}
.ov-lbl{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--txt2);text-transform:uppercase}
.ov-val{font-size:23px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--txt);line-height:1}
.ov-val.sm{font-size:18px}
.ov-card.hero .ov-val{font-size:29px;color:var(--gold)}
.ov-sub{font-size:10px;color:var(--txt3);margin-top:5px}

.rd-card{background:linear-gradient(135deg,#1a1a1c,#141416);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:12px}
.rd-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.rd-card-t{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);margin-bottom:11px}
.rd-card-h .rd-card-t{margin-bottom:0}
.rd-card-t .material-icons-round{font-size:15px;color:var(--gold)}
.rd-seg{display:flex;gap:4px;background:var(--bg3);border-radius:8px;padding:3px}
.rd-seg-o{padding:5px 10px;border:none;border-radius:6px;font-size:11px;font-weight:600;color:var(--txt2);cursor:pointer;font-family:'Inter',sans-serif}
.rd-seg-o.on{background:var(--gold);color:#000}
.rd-legend{display:flex;gap:13px;margin-bottom:8px;font-size:11px;color:var(--txt2)}
.rd-legend span{display:flex;align-items:center;gap:5px}
.rd-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.rd-chart{position:relative;width:100%;height:200px}
.rd-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
/* Proportion bars (monthly/yearly) */
.prop-lbl{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.prop-bar{display:flex;height:11px;border-radius:6px;overflow:hidden;margin-bottom:10px}
.prop-seg{height:100%}
.prop-list{display:flex;flex-direction:column;gap:7px}
.pl-row{display:flex;align-items:center;gap:8px;font-size:11px}
.pl-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.pl-nm{flex:1;color:var(--txt2)}
.pl-v{font-family:'JetBrains Mono',monospace;color:var(--txt);font-weight:600}
.pl-pct{color:var(--txt3);min-width:34px;text-align:right}

.bd-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1f1f22}
.bd-row:last-child{border:none}
.bd-ic{width:32px;height:32px;border-radius:9px;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--txt2)}
.bd-ic .material-icons-round{font-size:16px}
.bd-info{flex:1;min-width:0}
.bd-line{display:flex;justify-content:space-between;align-items:center}
.bd-name{font-size:12px;font-weight:600;color:var(--txt)}
.bd-val{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--gold)}
.bd-bar{height:5px;border-radius:3px;background:var(--bg3);margin-top:5px;overflow:hidden}
.bd-fill{height:100%;border-radius:3px}

.station-bars{display:flex;flex-direction:column;gap:9px}
.sbr{display:flex;align-items:center;gap:9px}
.sbn{font-size:11px;color:var(--txt2);min-width:62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbt{flex:1;height:7px;border-radius:4px;background:var(--bg3);overflow:hidden}
.sbf{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-dim))}
.sbh{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--txt);min-width:42px;text-align:right}

/* Order detail edit button (sidebar trigger) */
.ol-detail-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ol-detail-edit{width:100%;padding:11px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#000;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 10px rgba(245,197,24,.2);transition:.15s}
.ol-detail-edit:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(245,197,24,.3)}

/* Order list — CARD layout */
.ol-cards{display:flex;flex-direction:column;gap:8px}

/* ===== EDIT ORDER PANEL (matches billing edit style) ===== */
.bm-si-name{font-size:17px;font-weight:700;color:var(--gold)}
.bm-si-meta{font-size:11px;color:var(--txt3);margin-top:3px}
.te-grp{margin-top:16px}
.te-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--txt3);text-transform:uppercase;margin-bottom:9px}
.dur-stepper-te{display:flex;align-items:center;gap:0;background:var(--card);border:1px solid var(--border);border-radius:10px;width:fit-content;overflow:hidden}
.dur-te-btn{width:42px;height:42px;background:transparent;border:none;color:var(--txt);font-size:20px;cursor:pointer}
.dur-te-btn:hover{background:var(--card-h);color:var(--gold)}
.dur-te-val{min-width:54px;text-align:center;font-size:18px;font-weight:700;color:var(--txt);font-family:'JetBrains Mono',monospace}
.cafe-trigger-btn{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--border);background:var(--card);color:var(--txt);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.cafe-trigger-btn:hover{background:var(--card-h);border-color:var(--gold)}
.cafe-trigger-ic{width:34px;height:34px;border-radius:9px;background:rgba(245,197,24,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cafe-trigger-ic .material-icons-round{font-size:18px}
.cafe-trigger-tx{flex:1;text-align:left}
.cafe-trigger-chev{color:var(--txt3);font-size:20px}
.te-cafe-line{display:flex;align-items:center;gap:8px;padding:8px 2px;font-size:13px;color:var(--txt2);border-bottom:1px solid var(--border)}
.tcl-name{flex:1}.tcl-qty{color:var(--gold);font-weight:600}.tcl-price{font-family:'JetBrains Mono',monospace;color:var(--gold)}
.te-summary{background:linear-gradient(135deg,#1a1a1c,#141416);border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-top:16px}
.te-sum-row{display:flex;justify-content:space-between;font-size:13px;color:var(--txt2);padding:4px 0}
.te-sum-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:9px;font-weight:700;color:var(--txt)}
.te-sum-row.total span:last-child{font-size:18px;font-weight:700;color:var(--gold);font-family:'JetBrains Mono',monospace}
.te-note{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--txt);font-size:13px;outline:none;font-family:inherit}
.te-note:focus{border-color:var(--gold)}
.te-update{margin-top:18px}
.te-stop{margin-top:10px}
/* Match billing sidebar (gambar 2): Lunas chip = green outline, Sebagian/Nanti neutral, method Cash = gold */
.chip.te-paid[data-v="yes"].active{background:transparent;border-color:var(--green);color:var(--green)}
.chip.te-paid[data-v="partial"].active{background:var(--gold);border-color:var(--gold);color:#000}
.chip.te-paid[data-v="no"].active{background:var(--gold);border-color:var(--gold);color:#000}
.chip.te-method.active{background:var(--gold);border-color:var(--gold);color:#000}
/* Status badge reused inside coa-card top */
.olc-st{font-size:8px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em;white-space:nowrap}
.olc-st.st-l{background:rgba(34,197,94,.14);color:var(--green)}
.olc-st.st-b{background:rgba(239,68,68,.14);color:var(--red)}
.olc-st.st-p{background:rgba(249,115,22,.14);color:#f97316}
/* Detail box toggle inside card */
.ol-card-detail.ol-hi{display:none}

@media(max-width:767px){
  .ov-kpi,.ov-kpi.hero-layout{grid-template-columns:1fr}
  .rd-split{grid-template-columns:1fr}
}

/* ===== REPORT ===== */
.rpt-sec-title{font-family:'Inter',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin:14px 0 6px;padding-left:2px;border-left:3px solid var(--gold);padding-left:8px}
.rpt-sec-title:first-child{margin-top:4px}
.rpt-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 8px}
.rpt-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:12px}
.rpt-card .rc-lbl{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--txt3);letter-spacing:.3px}
.rpt-card .rc-val{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:var(--gold);margin-top:3px}
.rpt-card.full-w{grid-column:1/-1}
.rpt-table{width:100%;border-collapse:collapse;border-radius:var(--r);overflow:hidden;margin-bottom:12px;font-size:11px}
.rpt-table th{background:var(--bg3);padding:8px;font-size:9px;text-transform:uppercase;color:var(--txt3);text-align:left;letter-spacing:.3px}
.rpt-table td{padding:8px;border-bottom:1px solid var(--border)}
.rpt-table td:last-child,.rpt-table th:last-child{text-align:right}
.rpt-table .mono{font-family:'JetBrains Mono',monospace}
.bar-chart{margin:10px 0}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bar-label{font-size:10px;color:var(--txt2);min-width:60px;text-align:right}
.bar-track{flex:1;height:20px;background:var(--bg3);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:9px;font-weight:700;color:#000;font-family:'JetBrains Mono',monospace;min-width:fit-content}
.bar-fill.gold{background:var(--gold)}.bar-fill.green{background:var(--green)}.bar-fill.red{background:var(--red)}
.chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin:12px 0;text-align:center}
.chart-wrap canvas{max-width:100%;display:block;margin:0 auto}
.chart-title{font-weight:700;font-size:12px;color:var(--gold);margin-bottom:10px;text-align:left;letter-spacing:.3px}
.chart-legend{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.chart-legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--txt2)}
.chart-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.chart-toggle{display:flex;gap:4px;margin-bottom:8px}
.chart-toggle button{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:6px;border-radius:var(--rs);font-size:10px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer}
.chart-toggle button.active{background:var(--gold);border-color:var(--gold);color:#000}

/* TRX LIST */
.trx-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin-bottom:6px;cursor:pointer;transition:.15s}
.trx-item:hover{border-color:var(--border-l)}
.trx-top{display:flex;justify-content:space-between;align-items:center}
.trx-station{font-weight:700;font-size:13px}
.trx-time{font-size:9px;color:var(--txt3);margin-top:2px}
.trx-total{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--gold);font-size:14px}
.trx-badge{display:inline-block;font-size:7px;font-weight:700;padding:2px 6px;border-radius:8px;margin-left:4px}
.trx-badge.paid{background:var(--green-d);color:var(--green)}.trx-badge.unpaid{background:var(--red-d);color:var(--red)}
.trx-detail{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--txt2)}
.trx-item.open .trx-detail{display:block}
.trx-edit{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.trx-item.editing .trx-edit{display:block}.trx-item.editing .trx-detail{display:block}

/* === UNIFIED REPORT STYLE (Patch 9: stat cards with icon + divider) === */
.rpt-card-v2{background:linear-gradient(135deg,#1a1a1c,#141416);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:12px;overflow:hidden}
.rpt-card-title{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px;display:flex;align-items:center}
.rpt-card-title .material-icons-round{color:var(--gold)}
.si-row{display:flex;align-items:stretch;flex-wrap:wrap}
.si{flex:1 1 140px;min-width:140px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 8px;text-align:center;position:relative}
.si+.si{position:relative}
.si+.si::before{content:'';position:absolute;left:0;top:15%;height:70%;width:1px;background:var(--border)}
.si-icon{width:38px;height:38px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;color:var(--txt2)}
.si-icon .material-icons-round{font-size:18px}
.si-icon.scs{background:var(--green-d);color:var(--green)}
.si-icon.dan{background:var(--red-d);color:var(--red)}
.si-label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.3}
.si-value{font-size:17px;font-weight:700;color:var(--txt);line-height:1.1;font-family:'JetBrains Mono',monospace}
.si-sub{font-size:10px;margin-top:4px;color:var(--txt3);line-height:1.3}
.si-sub.pos{color:var(--green)}
.si-sub.neg{color:var(--red)}
.si-delta{font-size:9px;font-weight:600;margin-top:5px;display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border-radius:10px;line-height:1.2}
.si-delta.pos{background:var(--green-d);color:var(--green)}
.si-delta.neg{background:var(--red-d);color:var(--red)}
.si-delta.neu{background:var(--bg3);color:var(--txt3)}

/* Tooltip */
.tt-wrap{position:relative;display:inline-block;line-height:1}
.info-btn{cursor:help;color:var(--txt3);display:inline-flex;align-items:center;opacity:.65;transition:.1s;outline:none}
.info-btn:hover,.info-btn:focus{opacity:1;color:var(--gold)}
.tt{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border-l);border-radius:var(--rs);padding:8px 11px;font-size:11px;color:var(--txt2);width:max-content;max-width:240px;line-height:1.5;text-align:left;text-transform:none;letter-spacing:0;font-weight:400;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none}
.tt::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border-l)}
.tt-wrap:hover .tt,.tt-wrap:focus-within .tt{display:block}

/* Monthly comparison header */
.mr-cmp-row{display:flex;gap:40px;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap}
.mr-cmp-main .mr-cmp-label{font-size:12px;font-weight:600;color:var(--txt);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.mr-cmp-main .mr-cmp-value{font-size:28px;font-weight:700;color:var(--txt);line-height:1;font-family:'JetBrains Mono',monospace}
.mr-cmp-last{margin-left:auto}
.mr-cmp-last .mr-cmp-label{font-size:11px;color:var(--txt3);margin-bottom:6px}
.mr-cmp-last .mr-cmp-value{font-size:22px;font-weight:600;color:var(--txt2);line-height:1;font-family:'JetBrains Mono',monospace}
.mr-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:14px;line-height:1.2}
.mr-delta.pos{background:var(--green-d);color:var(--green)}
.mr-delta.neg{background:var(--red-d);color:var(--red)}
.mr-delta.neu{background:var(--bg3);color:var(--txt3)}
.mr-chart-area{margin:8px -4px 0;position:relative}

/* === ORDER LIST TABLE (Patch 8) === */
.ol-filter{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.ol-chip{font-size:10px;padding:5px 11px;border-radius:14px;border:1px solid var(--border);background:transparent;color:var(--txt2);cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:3px;transition:.15s;font-family:inherit}
.ol-chip:hover{border-color:var(--border-l);color:var(--txt)}
.ol-chip.on{background:var(--gold);color:#000;border-color:var(--gold)}
.ol-chip-s.on{background:#f5c518;color:#000;border-color:#f5c518}
.ol-chip-c.on{background:#22c55e;color:#fff;border-color:#22c55e}
.ol-chip-r.on{background:#8b5cf6;color:#fff;border-color:#8b5cf6}
.ol-chip-e.on{background:#ef4444;color:#fff;border-color:#ef4444}
/* (Old order-list table styles removed — now using .coa-card layout. Detail styles below are reused.) */
.ol-detail{padding:12px 14px 14px}
.ol-dg{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-bottom:10px}
.ol-dl label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:1px}
.ol-dl span{font-size:11px;color:var(--txt)}
.ol-df{margin-bottom:8px}
.ol-df label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:3px}
.ol-nb{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-size:11px;color:var(--txt);line-height:1.5;word-break:break-word}
.ol-pb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.ol-ph{border-radius:6px;padding:8px 10px}
.ol-ph.pd{background:var(--green-d);border:1px solid rgba(34,197,94,.35)}
.ol-ph.du{background:var(--red-d);border:1px solid rgba(239,68,68,.35)}
.ol-ph label{font-size:9px;font-weight:700;display:block;margin-bottom:1px;text-transform:uppercase;letter-spacing:.3px}
.ol-ph.pd label{color:var(--green)}
.ol-ph.du label{color:var(--red)}
.ol-ph .am{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;display:block}
.ol-ph.pd .am{color:var(--green)}
.ol-ph.du .am{color:var(--red)}
.ol-ph small{font-size:9px;display:block;margin-top:1px;opacity:.8}
.ol-ph.pd small{color:var(--green)}
.ol-ph.du small{color:var(--red)}
.ol-mr.editing+.ol-dr{display:table-row !important}
.ol-mr.editing+.ol-dr .ol-detail{display:block}
.ol-mr.editing+.ol-dr .trx-edit{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.ol-mr:not(.editing)+.ol-dr .trx-edit{display:none}
.te-section{margin-bottom:10px}
.te-title{font-size:9px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.te-row{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.te-row label{margin:0;min-width:50px;font-size:9px}
.te-row input,.te-row select{flex:1;padding:6px 8px;font-size:11px}
.te-actions{display:flex;gap:6px;margin-top:8px}
.te-actions button{flex:1}
.te-cafe-item{display:flex;align-items:center;gap:4px;padding:4px 0;border-bottom:1px solid var(--border);font-size:10px}
.te-cafe-item .tci-name{flex:1}.te-cafe-item .tci-price{font-family:'JetBrains Mono',monospace;color:var(--gold);font-size:10px}

/* ===== MONTHLY REPORT DASHBOARD GRID ===== */
.mr-grid{display:grid;gap:12px;margin-bottom:12px}
.mr-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
/* mr-2col: minmax(0,1fr) supaya cell BISA shrink di bawah min-content children
   (kalau tidak, heatmap dengan grid 700px memaksa cell membesar dan card terpotong viewport). */
.mr-2col{grid-template-columns:minmax(0,1fr)}
.mr-grid > *{min-width:0}
.mr-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.mr-card.mr-full{margin-bottom:12px}
.mr-card-accent{border-left:3px solid var(--gold)}
.mr-card-icon{width:40px;height:40px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;background:var(--gold-glow);color:var(--gold)}
.mr-card-icon.green{background:var(--green-d);color:var(--green)}
.mr-card-icon.red{background:var(--red-d);color:var(--red)}
.mr-card-icon.blue{background:rgba(59,130,246,.1);color:var(--blue)}
.mr-card-icon .material-icons-round{font-size:20px}
.mr-card{display:flex;align-items:flex-start;gap:12px}
.mr-card-label{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px}
.mr-card-value{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--gold);margin-top:2px}
.mr-card-value.big{font-size:22px}
.mr-card-sub{font-size:10px;color:var(--txt3);margin-top:2px}
.mr-card-head{font-weight:700;font-size:13px;color:var(--txt);margin-bottom:12px;width:100%}
/* ===== TIME-OF-DAY HEATMAP ===== */
#todCard{display:block}
.tod-head{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.tod-toggle{display:inline-flex;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:2px;gap:2px}
.tod-tab{border:none;background:transparent;color:var(--txt3);font-size:9px;font-weight:700;padding:4px 8px;border-radius:5px;cursor:pointer;font-family:inherit;letter-spacing:.2px;transition:background .15s,color .15s}
.tod-tab.active{background:var(--gold);color:#000}
.tod-insight{font-size:10px;color:var(--txt2);background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:6px 9px;margin-bottom:10px;line-height:1.4}
.tod-insight strong{color:var(--gold)}
.tod-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tod-grid{display:grid;gap:2px;min-width:0}
.tod-corner{}
.tod-colhead{font-size:9px;font-weight:700;color:var(--txt2);text-align:center;padding-bottom:2px}
.tod-rowhead{font-size:8px;font-weight:600;color:var(--txt3);display:flex;align-items:center;justify-content:flex-end;padding-right:4px;white-space:nowrap;font-family:'JetBrains Mono',monospace}
.tod-cell{aspect-ratio:1.5/0.3;min-height:13px;border-radius:3px;cursor:default;transition:transform .1s}
.tod-cell:hover{transform:scale(1.12);outline:1.5px solid var(--gold);position:relative;z-index:2}
.tod-empty{font-size:11px;color:var(--txt3);text-align:center;padding:24px 0}
.tod-legend{display:flex;align-items:center;gap:6px;margin-top:10px;justify-content:flex-end}
.tod-legend-lbl{font-size:8px;color:var(--txt3);font-family:'JetBrains Mono',monospace}
.tod-legend-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;width:90px}
.tod-legend-bar span{flex:1}
@media(max-width:767px){
  .tod-cell{min-height:18px}
  /* On phones the 420px panel would get cramped; make it full width. */
  .modal{max-width:100%}
}
/* Cards that contain charts/tables - block layout */
.mr-2col .mr-card,.mr-card.mr-full{display:block}

/* Pie chart legend inside card */
.mr-pie-legend{display:flex;flex-direction:column;gap:8px;min-width:120px}
.mr-pie-item{display:flex;align-items:center;gap:8px}
.mr-dot{width:10px;height:10px;border-radius:50%;min-width:10px}
.mr-pie-name{font-size:11px;color:var(--txt2)}
.mr-pie-val{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--txt)}
.mr-pie-pct{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--gold);margin-left:auto}

/* Station summary bars */
.mr-station-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mr-st-name{font-size:11px;color:var(--txt2);min-width:70px}
.mr-st-bar{flex:1;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.mr-st-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .3s}
.mr-st-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt);min-width:50px;text-align:right}

@media(min-width:768px){
  .mr-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mr-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== SYNC DOT (background refresh indicator) ===== */
.sync-dot{position:fixed;top:calc(var(--top-h) + 8px);right:12px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:6px 12px;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--gold);z-index:250;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;pointer-events:none}
.sync-dot.show{opacity:1;transform:translateY(0)}
.sync-spinner{width:10px;height:10px;border:1.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite}
.sync-text{font-family:'Inter',sans-serif;letter-spacing:.2px}
/* Issue #2: full-screen sync lock — blokir semua input saat sync ke spreadsheet */
.sync-lock{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sync-lock.show{display:flex}
.sync-lock-box{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:18px 26px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.sync-lock-spinner{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite}
.sync-lock-text{font-size:13px;font-weight:700;color:var(--txt);letter-spacing:.3px}
.app-blur{filter:blur(2px);pointer-events:none;user-select:none}
@media(min-width:600px){
  .sync-dot{top:16px;right:20px}
}

/* ===== SHIFT BANNER ===== */
.shift-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--red-d),rgba(239,68,68,.04));border:1px solid var(--red);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.shift-banner.open{background:linear-gradient(135deg,var(--green-d),rgba(34,197,94,.04));border-color:var(--green)}
.shift-banner .sb-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.shift-banner .sb-icon{font-size:22px;color:var(--red);min-width:22px}
.shift-banner.open .sb-icon{color:var(--green)}
.shift-banner .sb-text{flex:1;min-width:0}
.shift-banner .sb-status{font-weight:700;font-size:12px;color:var(--txt);letter-spacing:.2px}
.shift-banner .sb-detail{font-size:10px;color:var(--txt3);margin-top:1px;font-family:'JetBrains Mono',monospace}
.shift-banner .sb-action{background:var(--red);border:none;color:#fff;font-weight:700;font-size:11px;padding:8px 14px;border-radius:var(--rs);cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:.2px;white-space:nowrap;flex-shrink:0}
.shift-banner.open .sb-action{background:var(--bg3);color:var(--green);border:1px solid var(--green)}
.shift-banner .sb-action:hover{opacity:.9}
.shift-banner.hidden{display:none}

/* Disabled state for station grid & forms when no shift */
.no-shift-disabled{opacity:.4;pointer-events:none;filter:grayscale(.5)}

/* ===== SHIFT MODAL ===== */
.shift-info-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:10px 14px;margin-bottom:8px}
.sib-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px}
.sib-row .sib-lbl{color:var(--txt3);font-size:10px;text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.sib-row .sib-val{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--gold);font-size:13px}
.shift-hint{display:flex;gap:8px;background:var(--gold-glow);border:1px solid var(--gold);border-radius:var(--rs);padding:10px 12px;margin-top:12px;font-size:11px;color:var(--txt2);line-height:1.4}
.shift-hint .material-icons-round{font-size:16px;color:var(--gold);min-width:16px;margin-top:1px}

/* Close shift summary */
.cs-section{margin-bottom:14px}
.cs-section-title{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.cs-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px}
.cs-row .cs-lbl{color:var(--txt2)}
.cs-row .cs-val{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--txt)}
.cs-row.income .cs-val{color:var(--green)}
.cs-row.expense .cs-val{color:var(--red)}
.cs-row.balance{border-top:1px dashed var(--border);margin-top:4px;padding-top:10px;font-size:14px}
.cs-row.balance .cs-val{color:var(--gold);font-size:16px}
.cs-warning{background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(249,115,22,.04));border:1px solid var(--orange);border-radius:var(--rs);padding:10px 12px;margin-top:8px;font-size:11px;color:var(--txt);line-height:1.5}
.cs-warning .cw-title{font-weight:700;color:var(--orange);font-size:11px;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.cs-warning .cw-title .material-icons-round{font-size:16px}
.cs-warning ul{margin:4px 0 0 18px;font-size:10px;color:var(--txt2)}
.cs-warning li{margin-bottom:2px}


/* ===== TOAST ===== */
.toast{position:fixed;bottom:calc(var(--safe-b) + 16px);left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:30px;font-weight:700;font-size:11px;opacity:0;transition:.3s;z-index:300;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}.toast.ok{background:var(--gold);color:#000}.toast.err{background:var(--red);color:#fff}
.loading{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:400;display:none;align-items:center;justify-content:center;flex-direction:column}
.loading.show{display:flex}
.ld-content{display:flex;flex-direction:column;align-items:center;gap:12px}
.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-text{font-size:12px;color:var(--txt2);font-weight:500}
.ld-bar{width:180px;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.ld-bar-fill{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width .3s}
.ld-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);font-weight:700}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ===== TABLET & DESKTOP (≥600px) — sidebar permanen ===== */
@media(min-width:600px){
  .sidebar{display:flex}
  .topbar-mobile{display:none}
  .quick-strip{display:none}
  .drawer-mobile{display:none}
  .drawer-overlay{display:none}
  .main-content{padding:20px 24px;max-width:none}
  .dash-summary{grid-template-columns:repeat(4,1fr)}
  .station-grid{grid-template-columns:repeat(3,1fr)}
  .rpt-cards{grid-template-columns:repeat(4,1fr)}
  .toast{bottom:24px}
}
@media(min-width:1024px){
  .station-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1280px){
  .station-grid{grid-template-columns:repeat(5,1fr)}
}

/* ===== OVERVIEW SKELETON (first-load loading state) ===== */
@keyframes skShimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.sk-base{background:linear-gradient(90deg,var(--bg3) 0%,var(--card-h) 50%,var(--bg3) 100%);background-size:200px 100%;background-repeat:no-repeat;animation:skShimmer 1.4s linear infinite;border-radius:var(--rs)}
.sk-overview{display:flex;flex-direction:column;gap:14px}
.sk-kpi{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:96px}
.sk-card.hero{grid-column:1/-1}
.sk-line{height:10px;border-radius:4px}
.sk-line.lbl{width:50%;height:9px}
.sk-line.val{width:70%;height:22px;margin-top:4px}
.sk-line.sub{width:40%;height:8px}
.sk-chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.sk-chart{height:180px;border-radius:var(--rs)}
.sk-split{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){
  .sk-kpi{grid-template-columns:2fr 1fr 1fr}
  .sk-split{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .sk-kpi{grid-template-columns:1fr 1fr}
  .sk-card.hero{grid-column:1/-1}
}

/* ===== MASTER DATA PAGE ===== */
.md-search-wrap{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);padding:8px 10px;border-radius:var(--rs);margin:12px 0 10px}
.md-search-wrap input{background:transparent;border:none;color:var(--txt);font-size:12px;flex:1;outline:none;padding:0}
.md-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px}
.md-meta-badges{display:flex;gap:6px}
.md-mb{font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:.3px}
.md-mb.on{background:rgba(34,197,94,.14);color:#22c55e}
.md-mb.off{background:rgba(113,113,122,.18);color:var(--txt2)}
.md-list{display:flex;flex-direction:column;gap:6px}
.md-empty{background:var(--card);border:1px dashed var(--border);border-radius:var(--r);padding:30px 20px;text-align:center;color:var(--txt3)}
.md-empty .material-icons-round{font-size:32px;color:var(--txt3);margin-bottom:8px;display:block}
.md-empty .me-txt{font-size:13px;font-weight:600;color:var(--txt2);margin-bottom:4px}
.md-empty .me-sub{font-size:11px;color:var(--txt3)}
.md-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;position:relative;transition:.15s}
.md-card.inactive{opacity:.6}
.md-card.open{border-color:var(--gold)}
.md-ic{width:34px;height:34px;border-radius:8px;background:var(--gold-glow);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.md-ic .material-icons-round{font-size:17px}
.md-body{flex:1;min-width:0}
.md-name{font-size:12px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-sub{font-size:10px;color:var(--txt3);font-family:'JetBrains Mono',monospace;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.md-sub .md-sep{color:var(--border-l)}
.md-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;letter-spacing:.3px;flex-shrink:0}
.md-badge.on{background:rgba(34,197,94,.14);color:#22c55e}
.md-badge.off{background:rgba(113,113,122,.18);color:var(--txt2)}
.md-dots{background:none;border:none;color:var(--txt3);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;flex-shrink:0}
.md-dots:hover{background:var(--bg3);color:var(--gold)}
.md-dots .material-icons-round{font-size:18px}
.md-menu-wrap{position:relative;flex-shrink:0}
.md-menu{position:absolute;right:0;top:32px;background:var(--card-h);border:1px solid var(--border-l);border-radius:var(--rs);padding:4px;min-width:150px;z-index:20;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.md-menu-item{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:11px;color:var(--txt);cursor:pointer;border-radius:6px;background:none;border:none;width:100%;text-align:left;font-family:'Inter',sans-serif;font-weight:500}
.md-menu-item:hover{background:var(--bg3)}
.md-menu-item .material-icons-round{font-size:14px}
.md-menu-item.danger{color:var(--red)}
.md-menu-item.success{color:var(--green)}
/* ============================================================================
   SPRINT 3 — Master Data redesign CSS
   ============================================================================ */

/* ---------- LANDING (4 kartu kategori utama) ---------- */
.mdl-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mdl-title{font-size:18px;font-weight:700;color:var(--txt)}
.mdl-sub{font-size:11px;color:var(--txt3);margin-bottom:18px}
.mdl-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:768px){.mdl-cards{grid-template-columns:repeat(4,1fr);gap:14px}}
.mdl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 14px;cursor:pointer;text-align:center;transition:.18s;position:relative;overflow:hidden}
.mdl-card:hover{border-color:var(--gold);background:var(--card-h);transform:translateY(-1px)}
.mdl-card:active{transform:translateY(0)}
.mdl-card.disabled{opacity:.4;cursor:not-allowed}
.mdl-card.disabled:hover{border-color:var(--border);background:var(--card);transform:none}
.mdl-card-ic{width:42px;height:42px;border-radius:10px;background:var(--gold-glow);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.mdl-card-ic .material-icons-round{font-size:22px}
.mdl-card-name{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:3px}
.mdl-card-sub{font-size:10px;color:var(--txt3);line-height:1.4}
.mdl-card-count{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--bg3);color:var(--txt2)}
.mdl-card-count.warn{background:rgba(239,68,68,.14);color:var(--red)}

/* ---------- PAGE HEADER (back + title + add button) ---------- */
.mdp-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.mdp-back{background:none;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--txt2);cursor:pointer;border-radius:8px}
.mdp-back:hover{background:var(--bg3);color:var(--gold)}
.mdp-back .material-icons-round{font-size:20px}
.mdp-title{flex:1;font-size:16px;font-weight:700;color:var(--txt)}
.mdp-add{background:var(--gold);color:#1a1400;border:none;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:'Inter',sans-serif}
.mdp-add:hover{background:var(--gold-dim)}
.mdp-add .material-icons-round{font-size:15px}

/* ---------- SUB-TAB STRIP (di halaman Cafe: Menu / Stok / Log) ---------- */
.mds-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mds-tab{background:none;border:none;padding:8px 14px;font-size:12px;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:'Inter',sans-serif;font-weight:500;display:flex;align-items:center;gap:5px;white-space:nowrap}
.mds-tab:hover{color:var(--txt2)}
.mds-tab.on{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}
.mds-tab .material-icons-round{font-size:14px}
.mds-tab .mds-tab-badge{font-size:9px;padding:1px 6px;border-radius:10px;background:var(--bg3);color:var(--txt3);font-weight:700;margin-left:2px}
.mds-tab.on .mds-tab-badge{background:var(--gold-glow);color:var(--gold)}

/* ---------- KPI MINI ROW (di tab Stok) ---------- */
.mdk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.mdk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px}
.mdk-lbl{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-weight:500}
.mdk-val{font-size:20px;font-weight:700;color:var(--txt);font-family:'JetBrains Mono',monospace}
.mdk-val.warn{color:var(--red)}
.mdk-val.ok{color:var(--green)}

/* ---------- STOK CARD (varian list di tab Stok) ---------- */
.mst-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mst-toolbar-lbl{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.mst-restock-btn{background:transparent;border:1px solid var(--border-l);color:var(--txt2);padding:5px 11px;border-radius:6px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;font-weight:500}
.mst-restock-btn:hover{border-color:var(--gold);color:var(--gold)}
.mst-restock-btn .material-icons-round{font-size:13px}
.mst-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:6px;position:relative}
.mst-card.inactive{opacity:.5}
.mst-card.open{border-color:var(--gold)}
.mst-card.warn{border-left:3px solid var(--red)}
.mst-card-ic{width:32px;height:32px;border-radius:8px;background:var(--gold-glow);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mst-card-ic .material-icons-round{font-size:16px}
.mst-card-body{flex:1;min-width:0}
.mst-card-name{font-size:12px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mst-card-sub{font-size:10px;color:var(--txt3);font-family:'JetBrains Mono',monospace;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mst-card-sub .md-sep{color:var(--border-l)}
.mst-bar-wrap{width:60px;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;flex-shrink:0}
.mst-bar{height:4px;border-radius:2px;background:var(--green);transition:width .25s}
.mst-bar.mid{background:var(--gold)}
.mst-bar.low{background:var(--red)}
.mst-num{font-size:12px;font-weight:600;color:var(--txt);font-family:'JetBrains Mono',monospace;min-width:32px;text-align:right;flex-shrink:0}
.mst-num.warn{color:var(--red)}
.mst-num.zero{color:var(--red);font-weight:700}
.mst-info-line{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--gold-glow);border:1px solid rgba(245,197,24,.2);font-size:11px;color:var(--txt2);display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.mst-info-line .material-icons-round{font-size:14px;color:var(--gold);flex-shrink:0;margin-top:1px}

/* ---------- LOG STOK TIMELINE ---------- */
.mlg-list{display:flex;flex-direction:column;gap:0}
.mlg-row{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);align-items:flex-start}
.mlg-row:last-child{border-bottom:none}
.mlg-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.mlg-dot.in{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.mlg-dot.out{background:var(--gold);box-shadow:0 0 0 3px rgba(245,197,24,.15)}
.mlg-info{flex:1;min-width:0}
.mlg-name{font-size:12px;font-weight:600;color:var(--txt)}
.mlg-meta{font-size:10px;color:var(--txt3);margin-top:2px;font-family:'JetBrains Mono',monospace;line-height:1.4}
.mlg-amt{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;flex-shrink:0;align-self:center}
.mlg-amt.in{color:var(--green)}
.mlg-amt.out{color:var(--txt2)}

/* ---------- KATEGORI BADGE (di list kategori) ---------- */
.md-badge.stok{background:rgba(245,197,24,.14);color:var(--gold);margin-right:4px}

/* ---------- FORM CHECKBOX (untuk toggle Punya Varian, Update Stok) ---------- */
.mdf-check-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;margin-top:10px;cursor:pointer;transition:.15s}
.mdf-check-row:hover{border-color:var(--border-l)}
.mdf-check-row.on{border-color:var(--gold);background:var(--gold-glow)}
.mdf-check-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.mdf-check-row.on .mdf-check-box{background:var(--gold);border-color:var(--gold)}
.mdf-check-box .material-icons-round{font-size:13px;color:#1a1400;display:none}
.mdf-check-row.on .mdf-check-box .material-icons-round{display:block}
.mdf-check-info{flex:1}
.mdf-check-title{font-size:12px;font-weight:600;color:var(--txt)}
.mdf-check-desc{font-size:10px;color:var(--txt3);margin-top:2px;line-height:1.4}

/* ============================================================================
   SPRINT 4 — Pengeluaran Reactive CSS
   ============================================================================ */
.exp-mode-info{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--gold-glow);border:1px solid rgba(245,197,24,.2);font-size:11px;color:var(--txt2);display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.exp-mode-info .material-icons-round{font-size:14px;color:var(--gold);flex-shrink:0;margin-top:1px}
.exp-item-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;margin-bottom:5px;position:relative}
.exp-item-info{flex:1;min-width:0}
.exp-item-name{font-size:12px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-item-detail{font-size:10px;color:var(--txt3);font-family:'JetBrains Mono',monospace;margin-top:2px;display:flex;align-items:center;gap:5px}
.exp-item-qty{font-size:11px;color:var(--txt2);font-family:'JetBrains Mono',monospace;min-width:42px;text-align:right}
.exp-item-price{font-size:12px;color:var(--gold);font-weight:600;font-family:'JetBrains Mono',monospace;min-width:70px;text-align:right}
.exp-item-del{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.exp-item-del:hover{background:var(--red-d);color:var(--red)}
.exp-item-del .material-icons-round{font-size:14px}
.exp-add-item-btn{width:100%;background:transparent;border:1px dashed var(--border-l);color:var(--txt2);padding:8px;border-radius:8px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-family:'Inter',sans-serif;font-weight:500}
.exp-add-item-btn:hover{border-color:var(--gold);color:var(--gold)}
.exp-add-item-btn .material-icons-round{font-size:15px}
.exp-total-row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;margin-top:10px;border-top:1px solid var(--border);font-size:13px;font-weight:600;color:var(--txt)}
.exp-total-amt{font-size:16px;color:var(--gold);font-family:'JetBrains Mono',monospace}
.exp-empty-state{padding:20px 12px;text-align:center;font-size:11px;color:var(--txt3);background:var(--bg3);border:1px dashed var(--border);border-radius:8px;margin-bottom:6px}

/* Item picker modal — list selectable varian */
.exp-pick-search{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);padding:8px 10px;border-radius:var(--rs);margin-bottom:10px}
.exp-pick-search input{background:transparent;border:none;color:var(--txt);font-size:12px;flex:1;outline:none;padding:0}
.exp-pick-list{max-height:90%;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
#expReactive{padding-top:16px;}
.exp-pick-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:.15s}
.exp-pick-item:hover{border-color:var(--gold);background:var(--card-h)}
.exp-pick-item.selected{border-color:var(--gold);background:var(--gold-glow)}
.exp-pick-item.inactive{opacity:.4;cursor:not-allowed}
.exp-pick-ic{width:30px;height:30px;border-radius:7px;background:var(--gold-glow);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.exp-pick-ic .material-icons-round{font-size:15px}
.exp-pick-body{flex:1;min-width:0}
.exp-pick-name{font-size:12px;font-weight:600;color:var(--txt)}
.exp-pick-sub{font-size:10px;color:var(--txt3);margin-top:1px;font-family:'JetBrains Mono',monospace}
.exp-pick-stok{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--bg);color:var(--txt2)}
.exp-pick-stok.low{background:rgba(239,68,68,.14);color:var(--red)}
.exp-pick-stok.zero{background:rgba(239,68,68,.2);color:var(--red);font-weight:800}

.exp-qty-form{padding:10px 0}
.exp-qty-form label{font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;display:block;font-weight:500}
.exp-qty-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.exp-qty-btn{width:36px;height:36px;background:var(--bg3);border:1px solid var(--border);color:var(--txt);border-radius:8px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.exp-qty-btn:hover{border-color:var(--gold);color:var(--gold)}
.exp-qty-num{flex:1;text-align:center;font-size:18px;font-weight:700;color:var(--txt);font-family:'JetBrains Mono',monospace;padding:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;width:auto}
.exp-price-input{width:100%;padding:8px 12px;background:var(--bg3);border:1px solid var(--border);color:var(--txt);border-radius:8px;font-size:13px;font-family:'JetBrains Mono',monospace}

/* ============================================================================
   SPRINT 5 — Varian Picker (saat cafe order) CSS
   ============================================================================ */
.cm-varian-hint{position:absolute;bottom:6px;right:6px;font-size:8px;padding:2px 5px;border-radius:8px;background:rgba(245,197,24,.2);color:var(--gold);font-weight:700;letter-spacing:.3px}
.cm-stok-warn{position:absolute;top:6px;left:6px;font-size:8px;padding:2px 5px;border-radius:8px;background:rgba(239,68,68,.2);color:var(--red);font-weight:700}
.cm-stok-zero{position:absolute;top:6px;left:6px;font-size:8px;padding:2px 5px;border-radius:8px;background:var(--red);color:#fff;font-weight:700}
.cmv-list{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow-y:auto}
.cmv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:.15s}
.cmv-item:hover{border-color:var(--gold);background:var(--card-h)}
.cmv-item.zero{opacity:.5;cursor:not-allowed}
.cmv-info{flex:1;min-width:0}
.cmv-name{font-size:13px;font-weight:600;color:var(--txt)}
.cmv-price{font-size:11px;color:var(--gold);font-family:'JetBrains Mono',monospace;margin-top:2px}
.cmv-stok-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;background:rgba(34,197,94,.12);color:var(--green)}
.cmv-stok-badge.low{background:rgba(239,68,68,.14);color:var(--red)}
.cmv-stok-badge.zero{background:var(--red);color:#fff}
.cmv-add-btn{background:var(--gold);color:#1a1400;border:none;width:30px;height:30px;border-radius:50%;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmv-add-btn:hover{background:var(--gold-dim)}
.cmv-add-btn:disabled{background:var(--bg);color:var(--txt3);cursor:not-allowed}
.cmv-qty-inline{display:flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px}
.cmv-qty-btn{width:24px;height:24px;background:transparent;border:none;color:var(--txt);font-size:14px;cursor:pointer;border-radius:4px}
.cmv-qty-btn:hover{background:var(--bg3)}
.cmv-qty-num{font-size:13px;font-weight:600;color:var(--gold);min-width:20px;text-align:center;font-family:'JetBrains Mono',monospace}

/* ============================================================================
   Pendapatan Harian chips — icon style (Bulanan)
   ============================================================================ */
.ph-chip-rental{color:var(--gold)!important}
.ph-chip-rental .material-icons-round{font-size:12px;vertical-align:-2px}
.ph-chip-cafe{color:var(--blue)!important}
.ph-chip-cafe .material-icons-round{font-size:12px;vertical-align:-2px}
.ph-chip-exp{color:var(--red)!important;background:rgba(239,68,68,.08);border-radius:10px;padding:2px 7px}
.ph-chip-exp .material-icons-round{font-size:12px;vertical-align:-2px}

/* ============================================================================
   Cafe Breakdown Card (Harian & Bulanan)
   ============================================================================ */
.cb-card{margin-bottom:10px}

/* KPI row */
.cb-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cb-kpi-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px;text-align:left}
.cb-kpi-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3);margin-bottom:4px}
.cb-kpi-val{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--txt)}
.cb-kpi-val.gold{color:var(--gold)}
@media(max-width:400px){.cb-kpi-val{font-size:13px}}

/* Top selling label */
.cb-top-label{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--txt3);text-transform:uppercase;margin-bottom:8px}

/* Item rows */
.cb-list{display:flex;flex-direction:column;gap:6px}
.cb-item{display:flex;align-items:center;gap:8px}
.cb-rank{font-size:10px;font-weight:700;color:var(--txt3);width:22px;flex-shrink:0;text-align:right}
.cb-info{flex:1;min-width:0}
.cb-iname{font-size:12px;font-weight:600;color:var(--txt);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-bar-wrap{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.cb-bar{height:100%;background:var(--blue);border-radius:2px;transition:width .3s ease}
.cb-qty{font-size:11px;font-weight:700;color:var(--txt2);width:32px;text-align:right;flex-shrink:0}
.cb-rev{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--gold);width:44px;text-align:right;flex-shrink:0}

/* Footer hint */
.cb-footer{font-size:9px;color:var(--txt3);margin-top:12px;border-top:1px solid var(--border);padding-top:8px;line-height:1.4}

/* Source badge: shared / resep indicator */
.mst-src-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;padding:2px 6px;border-radius:8px;margin-left:6px;vertical-align:1px;letter-spacing:.3px;text-transform:uppercase}
.mst-src-badge .material-icons-round{font-size:10px}
.mst-src-badge.shared{background:rgba(99,102,241,.12);color:#a5a8ff;border:1px solid rgba(99,102,241,.3)}
.mst-src-badge.resep{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.3)}

/* ===== EXP PICKER — MODE KARDUS (restock multi-varian) ===== */
.exp-seg{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:2px}
.exp-seg-btn{flex:1;background:none;border:none;padding:9px 4px;font-size:10px;font-weight:700;color:var(--txt2);cursor:pointer;text-transform:uppercase;letter-spacing:.3px;transition:.15s;font-family:'Inter',sans-serif}
.exp-seg-btn:hover:not(.sel){background:var(--card-h);color:var(--txt)}
.exp-seg-btn.sel{background:var(--gold);color:#111}

.exp-kardus-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.exp-kardus-lbl{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--txt3);text-transform:uppercase;display:block;margin-bottom:5px}
.exp-kardus-inp{width:100%;padding:8px 12px;background:var(--bg3);border:1px solid rgba(245,197,24,.35);color:var(--gold);border-radius:8px;font-size:13px;font-family:'JetBrains Mono',monospace;outline:none}
.exp-kardus-inp:focus{border-color:var(--gold)}
.exp-hpp-result{display:flex;justify-content:space-between;align-items:center;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);border-radius:8px;padding:9px 12px;margin-top:2px}
.exp-hpp-result .hl{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--green);text-transform:uppercase}
.exp-hpp-result .hv{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--green)}

.exp-varian-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.exp-varian-lbl{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--txt2);text-transform:uppercase}
.exp-add-varian-btn{display:flex;align-items:center;gap:4px;background:var(--gold-glow);border:1px solid rgba(245,197,24,.3);border-radius:6px;padding:6px 10px;font-size:10px;font-weight:700;color:var(--gold);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:.15s}
.exp-add-varian-btn:hover{background:rgba(245,197,24,.12)}

/* Dropdown pilih varian */
.exp-vd-wrap{background:var(--bg3);border:1px solid var(--border-l);border-radius:9px;overflow:hidden;margin-bottom:8px}
.exp-vd-title{padding:8px 11px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--txt3);text-transform:uppercase;border-bottom:1px solid var(--border)}
.exp-vd-item{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;transition:.12s;border-bottom:1px solid var(--border)}
.exp-vd-item:last-child{border-bottom:none}
.exp-vd-item:hover:not(.used){background:var(--card-h)}
.exp-vd-item.used{opacity:.4;cursor:default;pointer-events:none}
.exp-vd-name{flex:1;font-size:12px;color:var(--txt);font-weight:500}
.exp-vd-stok{font-size:10px;color:var(--txt3);font-family:'JetBrains Mono',monospace}
.exp-vd-check{font-size:14px;color:var(--gold)}

/* Varian row — 2 baris vertikal */
.exp-vr-list{display:flex;flex-direction:column;gap:6px}
.exp-vr{background:var(--bg3);border:1px solid var(--border-l);border-radius:8px;padding:10px 11px;display:flex;flex-direction:column;gap:8px}
.exp-vr-top{display:flex;align-items:center;gap:8px}
.exp-vr-name{flex:1;font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.exp-vr-stok{font-size:10px;color:var(--txt3);font-family:'JetBrains Mono',monospace;white-space:nowrap;flex-shrink:0}
.exp-vr-del{width:26px;height:26px;flex-shrink:0;background:var(--red-d);border:1px solid rgba(239,68,68,.25);border-radius:6px;color:var(--red);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.exp-vr-del:hover{background:rgba(239,68,68,.18)}
.exp-vr-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.exp-vr-hpp{font-size:11px;color:var(--txt3);font-family:'JetBrains Mono',monospace;flex:1;min-width:0}
.exp-vr-qty{display:flex;align-items:center;gap:5px;flex-shrink:0}
.exp-vr-qbtn{width:30px;height:30px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border-l);border-radius:7px;font-size:18px;color:var(--txt2);display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.exp-vr-qbtn:hover{background:var(--card-h);color:var(--txt)}
.exp-vr-qinp{width:max-content !important;height:30px;flex-shrink:0;background:var(--bg2);border:1px solid rgba(245,197,24,.35);border-radius:7px;padding:0 6px;font-size:13px;font-family:'JetBrains Mono',monospace;color:var(--gold);text-align:center;outline:none}

/* Summary kardus */
.exp-kardus-sum{background:var(--bg3);border:1px solid var(--border-l);border-radius:9px;padding:11px 13px;display:flex;flex-direction:column;gap:7px}
.exp-kardus-sum.warn{border-color:rgba(239,68,68,.3);background:var(--red-d)}
.exp-ks-row{display:flex;justify-content:space-between;align-items:center}
.exp-ks-lbl{font-size:11px;color:var(--txt2)}
.exp-ks-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt)}
.exp-ks-val.gold{color:var(--gold);font-size:14px;font-weight:700}
.exp-ks-val.red{color:var(--red);font-weight:700}
.exp-ks-div{border:none;border-top:1px solid var(--border);margin:1px 0}
.exp-kardus-warn{background:var(--red-d);border:1px solid rgba(239,68,68,.25);border-radius:7px;padding:9px 11px;font-size:10px;color:var(--red);display:flex;gap:7px;align-items:flex-start;line-height:1.5;margin-top:6px}
.exp-empty-varian{border:1px dashed var(--border);border-radius:8px;padding:16px;text-align:center;color:var(--txt3);font-size:11px;line-height:1.6}
/* ══════════════════════════════════════
   LAPORAN — Tab Pill & Date Nav
══════════════════════════════════════ */

/* Toolbar kanan: tab pill + refresh sejajar */
.rpt-toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Tab Pill — iOS segment style */
.tab-pill-wrap{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:3px;gap:1px}
.tab-pill{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;color:var(--txt2);background:transparent;border:none;font-family:'Inter',sans-serif;transition:.15s;white-space:nowrap}
.tab-pill .material-icons-round{font-size:14px}
.tab-pill.active{background:var(--bg);color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.45),0 0 0 1px var(--border-l)}
.tab-pill.active[data-tab="daily"]  {color:var(--gold)}
.tab-pill.active[data-tab="daily"] .material-icons-round{color:var(--gold)}
.tab-pill.active[data-tab="monthly"]{color:#3b82f6}
.tab-pill.active[data-tab="monthly"] .material-icons-round{color:#3b82f6}
.tab-pill.active[data-tab="yearly"] {color:#22c55e}
.tab-pill.active[data-tab="yearly"] .material-icons-round{color:#22c55e}

/* Date / Month / Year Nav */
.rpt-date-nav{display:flex;align-items:stretch;width:100%;background:var(--bg2);border:1px solid var(--border-l);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.rdn-arrow{width:40px;min-width:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--txt2);transition:.15s}
.rdn-arrow:first-child{border-right:1px solid var(--border)}
.rdn-arrow:last-child{border-left:1px solid var(--border)}
.rdn-arrow:hover{background:var(--card-h);color:var(--txt)}
.rdn-arrow .material-icons-round{font-size:20px}
.rdn-track{flex:1;display:flex;align-items:stretch}
.rdn-cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;cursor:pointer;transition:.12s;gap:3px;border-right:1px solid var(--border);min-width:0}
.rdn-cell:last-child{border-right:none}
.rdn-cell:hover:not(.rdn-active):not(.rdn-future){background:var(--card-h)}
.rdn-cell.rdn-active{background:var(--gold)}
.rdn-cell.rdn-active .rdn-num,.rdn-cell.rdn-active .rdn-sub{color:#111!important}
.rdn-cell.rdn-today:not(.rdn-active) .rdn-num{color:var(--gold)}
.rdn-cell.rdn-today:not(.rdn-active) .rdn-sub{color:rgba(245,197,24,.6)}
.rdn-cell.rdn-future{opacity:.3;cursor:default;pointer-events:none}
.rdn-num{font-size:16px;font-weight:800;color:var(--txt);line-height:1}
.rdn-sub{font-size:9px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px}
/* Month cells: smaller text */
.rdn-cell.rdn-month .rdn-num{font-size:13px;font-weight:700}
.rdn-cell.rdn-month .rdn-sub{font-size:8px}
/* Year cells */
.rdn-cell.rdn-year .rdn-num{font-size:16px;font-weight:800}
.rdn-cell.rdn-year .rdn-sub{font-size:9px}

/* Responsive */
@media(max-width:640px){
  .rpt-toolbar-right{width:100%}
  .tab-pill-wrap{flex:1}
  .tab-pill{flex:1;justify-content:center;padding:7px 6px}
  .tab-pill-label{display:none}
  .tb-btn-label{display:none}
  .rdn-arrow{width:32px;min-width:32px}
  .rdn-num{font-size:14px}
  .rdn-sub{font-size:8px}
}

/* ══════════════════════════════════════════════
   LAPORAN KALENDER — Bulanan & Tahunan
   (dari laporan_kalender_v4 — adapted for GAS)
══════════════════════════════════════════════ */

/* Holiday status bar */
.hol-status{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--txt3);
  margin-bottom:10px;padding:6px 10px;background:var(--bg3);border-radius:7px;
  border:1px solid var(--border);}
.hol-status.loaded{color:#c4b5fd;border-color:rgba(139,92,246,.35);background:rgba(139,92,246,.06);}
.hol-status.error{color:var(--red);border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.05);}
.hol-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* Legend */
.cal-legend{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.leg-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--txt2);}
.leg-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}

/* ── DESKTOP CALENDAR ── */
.cal-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr) 96px;border-bottom:1px solid var(--border);}
.cal-dow-cell{padding:8px 0;text-align:center;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--txt3);text-transform:uppercase;}
.cal-dow-cell.wk{color:var(--gold);font-size:9px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr) 96px;}
.cal-day{min-height:84px;padding:7px 9px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:.12s;position:relative;}
.cal-day:hover:not(.empty){filter:brightness(1.18);}
.cal-day.green{background:rgba(22,163,74,.18);}
.cal-day.red{background:rgba(185,28,28,.20);}
.cal-day.holiday{background:rgba(139,92,246,.15)!important;}
.cal-day.empty{background:rgba(255,255,255,.02);cursor:default;}
.day-top{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;}
.day-num{font-size:10px;color:var(--txt3);font-weight:600;flex-shrink:0;}
.day-hbadge{font-size:7px;font-weight:700;color:#c4b5fd;background:rgba(139,92,246,.22);border-radius:3px;padding:1px 4px;letter-spacing:.3px;white-space:nowrap;line-height:1.6;}
.day-hname{font-size:8px;color:#c4b5fd;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.day-profit{font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace;}
.day-profit.pos{color:#4ade80;}
.day-profit.neg{color:#f87171;}
.day-omzet{font-size:10px;color:var(--txt2);font-family:'JetBrains Mono',monospace;}
.day-ops{font-size:9px;color:var(--txt3);margin-top:1px;}
.cal-week{border-bottom:1px solid var(--border);padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:rgba(245,197,24,.03);}
.week-lbl{font-size:9px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.week-profit{font-size:14px;font-weight:800;font-family:'JetBrains Mono',monospace;}
.week-profit.pos{color:#4ade80;}
.week-profit.neg{color:#f87171;}
.week-sub{font-size:9px;color:var(--txt3);}
.week-hol{font-size:8px;color:#c4b5fd;margin-top:2px;font-style:italic;}

/* ── MOBILE CALENDAR ── */
.mob-dow-row{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);background:var(--bg2);}
.mob-dow{padding:6px 0;text-align:center;font-size:9px;font-weight:700;color:var(--txt3);text-transform:uppercase;}
.mob-week-row{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);}
.mob-day{min-height:56px;padding:4px 3px;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;transition:.12s;}
.mob-day:last-child{border-right:none;}
.mob-day:hover:not(.empty){filter:brightness(1.15);}
.mob-day.green{background:rgba(22,163,74,.18);}
.mob-day.red{background:rgba(185,28,28,.20);}
.mob-day.holiday{background:rgba(139,92,246,.15)!important;}
.mob-day.empty{background:rgba(255,255,255,.02);}
.mob-day-num{font-size:9px;color:var(--txt3);font-weight:600;}
.mob-day-hbadge{font-size:7px;color:#c4b5fd;font-weight:700;background:rgba(139,92,246,.22);border-radius:2px;padding:0 3px;line-height:1.5;}
.mob-day-profit{font-size:10px;font-weight:800;font-family:'JetBrains Mono',monospace;text-align:center;line-height:1.2;}
.mob-day-profit.pos{color:#4ade80;}
.mob-day-profit.neg{color:#f87171;}
.mob-day-omzet{font-size:8px;color:var(--txt3);font-family:'JetBrains Mono',monospace;}
.mob-week-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:rgba(245,197,24,.04);border-bottom:1px solid var(--border);}
.mob-wk-lbl{font-size:9px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.mob-wk-val{font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace;}
.mob-wk-val.pos{color:#4ade80;}
.mob-wk-val.neg{color:#f87171;}
.mob-wk-hol{font-size:8px;color:#c4b5fd;}

/* ── TAHUNAN YEAR GRID ── */
.yr-cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.month-cell{border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:5px;border:1px solid var(--border-l);cursor:pointer;transition:.12s;position:relative;overflow:hidden;}
.month-cell:hover:not(.dim){filter:brightness(1.15);}
.month-cell.green{background:rgba(22,163,74,.18);}
.month-cell.red{background:rgba(185,28,28,.20);}
.month-cell.dim{background:rgba(255,255,255,.02);cursor:default;}
.month-name{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px;}
.month-profit{font-size:17px;font-weight:800;font-family:'JetBrains Mono',monospace;}
.month-profit.pos{color:#4ade80;}
.month-profit.neg{color:#f87171;}
.month-profit.dim{color:var(--txt3);}
.month-omzet{font-size:10px;color:var(--txt2);font-family:'JetBrains Mono',monospace;}
.month-ops{font-size:9px;color:var(--txt3);}
.month-hol-count{font-size:9px;color:#c4b5fd;margin-top:1px;}
.month-badge{position:absolute;top:8px;right:8px;font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.3px;}
.mbadge-up{background:rgba(22,163,74,.2);color:#4ade80;}
.mbadge-dn{background:rgba(185,28,28,.2);color:#f87171;}
.mbadge-cur{background:rgba(245,197,24,.15);color:var(--gold);}

/* ── Calendar Detail Modal ── */
.cal-detail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;align-items:center;justify-content:center;}
.cal-detail-overlay.show{display:flex;}
.cal-detail-card{background:var(--bg2);border:1px solid var(--border-l);border-radius:14px;padding:20px;width:min(300px,90vw);display:flex;flex-direction:column;gap:10px;}
.cal-detail-title{font-size:14px;font-weight:700;color:var(--txt);}
.cal-detail-hpill{display:flex;align-items:center;gap:8px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.22);border-radius:7px;padding:8px 11px;}
.cal-detail-hpill-icon{font-size:16px;flex-shrink:0;}
.cal-detail-hpill-name{font-size:12px;color:#c4b5fd;font-weight:600;}
.cal-detail-hpill-sub{font-size:10px;color:var(--txt3);margin-top:1px;}
.cal-detail-row{display:flex;justify-content:space-between;align-items:center;}
.cal-detail-lbl{font-size:11px;color:var(--txt2);}
.cal-detail-val{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--txt);}
.cal-detail-val.pos{color:#4ade80;}
.cal-detail-val.neg{color:#f87171;}
.cal-detail-div{border:none;border-top:1px solid var(--border);margin:2px 0;}
.cal-detail-close{background:var(--bg3);border:1px solid var(--border-l);border-radius:8px;padding:10px;font-size:12px;color:var(--txt2);cursor:pointer;width:100%;text-align:center;font-weight:600;font-family:'Inter',sans-serif;}
.cal-detail-close:hover{background:var(--bg4);}

/* Responsive toggle untuk kalender desktop vs mobile wrap */
@media(max-width:640px){
  #mrCalDesktopWrap{display:none !important;}
  #mrCalMobileWrap{display:block !important;}
}
@media(min-width:641px){
  #mrCalMobileWrap{display:none !important;}
  #mrCalDesktopWrap{display:block !important;}
}

/* ============================================================
   CAFE — UNIFIED ITEMS TAB (Menu + Stok merged 2026-06-06)
   ============================================================ */
.mdi-section-lbl{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--txt3);padding:6px 2px 4px;display:flex;justify-content:space-between;align-items:center}
.mdi-section-lbl span:last-child{color:var(--txt3);font-weight:500;font-size:9px}
.mdi-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}

/* Single item card */
.mdi-card{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 12px;position:relative;transition:background .15s}
.mdi-card:hover{background:var(--card-h)}
.mdi-card.warn{border-left:2px solid var(--orange)}
.mdi-card.low{border-left:2px solid var(--red)}
.mdi-card.inactive{opacity:.55}

/* Group container (parent + variants) */
.mdi-group{background:var(--card);border:1px solid var(--border);border-radius:9px;transition:border-color .15s}
.mdi-group.expanded{border-color:var(--border-l)}
.mdi-group.warn{border-left:2px solid var(--orange)}
.mdi-group.low{border-left:2px solid var(--red)}
.mdi-group.inactive{opacity:.55}
.mdi-group-head{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;position:relative;transition:background .15s}
.mdi-group-head:hover{background:var(--card-h)}

/* Icon */
.mdi-ic{width:32px;height:32px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--txt2)}
.mdi-ic .material-icons-round{font-size:15px}

/* Body (name + sub) */
.mdi-body{flex:1;min-width:0}
.mdi-name{font-size:13px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdi-sub{font-size:11px;color:var(--txt3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Badges container */
.mdi-badges{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}

/* Badge variants — semua seragam */
.mdi-bdg{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.3px;text-transform:uppercase;display:inline-flex;align-items:center;gap:3px;flex-shrink:0;line-height:1.4;white-space:nowrap}
.mdi-bdg .material-icons-round{font-size:10px;vertical-align:-1px}
.mdi-bdg.aktif{background:var(--green-d);color:var(--green);border:1px solid rgba(34,197,94,.22)}
.mdi-bdg.nonaktif{background:rgba(113,113,122,.1);color:var(--txt3);border:1px solid var(--border)}
.mdi-bdg.resep{background:rgba(34,197,94,.08);color:#4ade80;border:1px solid rgba(34,197,94,.18)}
.mdi-bdg.shared{background:rgba(59,130,246,.1);color:#60a5fa;border:1px solid rgba(59,130,246,.2)}
.mdi-bdg.varian{background:rgba(245,197,24,.1);color:var(--gold);border:1px solid rgba(245,197,24,.2)}
.mdi-bdg.stok-ok{background:rgba(113,113,122,.12);color:var(--txt2);border:1px solid var(--border-l)}
.mdi-bdg.stok-low{background:rgba(249,115,22,.1);color:var(--orange);border:1px solid rgba(249,115,22,.25)}
.mdi-bdg.stok-zero{background:var(--red-d);color:var(--red);border:1px solid rgba(239,68,68,.25)}

/* Expand chevron */
.mdi-expand-icon{font-size:16px;color:var(--txt3);flex-shrink:0;transition:transform .2s}
.mdi-group.expanded .mdi-expand-icon{transform:rotate(90deg);color:var(--gold)}

/* Variants sub-list */
.mdi-variants{border-top:1px solid var(--border);background:var(--bg2)}
.mdi-vrow{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 16px;border-bottom:1px solid var(--border);position:relative;transition:background .15s}
.mdi-vrow:last-child{border-bottom:none}
.mdi-vrow:hover{background:var(--bg3)}
.mdi-vrow.low-zero{border-left:2px solid var(--red);padding-left:14px}
.mdi-vrow.low-warn{border-left:2px solid var(--orange);padding-left:14px}
.mdi-vrow.inactive{opacity:.55}
.mdi-vrow-indent{font-size:13px;color:var(--border-l);flex-shrink:0}
.mdi-vrow .mdi-name{font-size:12px;color:var(--txt2)}

/* Mobile */
@media (max-width:640px){
  .mdi-badges{justify-content:flex-end;gap:3px}
  .mdi-bdg{font-size:9px;padding:1px 6px}
  .mdi-ic{width:28px;height:28px}
  .mdi-ic .material-icons-round{font-size:14px}
  .mdi-card,.mdi-group-head{padding:8px 10px;gap:8px}
  .mdi-name{font-size:12px}
  .mdi-sub{font-size:10px}
}
@media (max-width:420px){
  /* Pada layar sangat sempit, badges turun ke baris bawah (multi-row) */
  .mdi-card,.mdi-group-head{flex-wrap:wrap}
  .mdi-badges{flex-basis:100%;justify-content:flex-start;padding-top:4px}
  .mdi-expand-icon,.md-menu-wrap{position:absolute;right:10px;top:9px}
}

/* ========================================================
   KOREKSI STOK MODAL — centered dialog
   ======================================================== */
.overlay.overlay-center{align-items:center;justify-content:center;padding:16px}
.overlay.overlay-center .dialog-sm{transform:scale(.95);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s}
.overlay.overlay-center.show .dialog-sm{transform:scale(1);opacity:1}
.dialog-sm{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:100%;max-width:360px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.ks-head{padding:14px 16px 12px;border-bottom:1px solid var(--border)}
.ks-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}
.ks-icon{width:34px;height:34px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ks-icon .material-icons-round{font-size:16px;color:var(--txt2)}
.ks-title{font-size:14px;font-weight:600;color:var(--txt);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-sub{font-size:11px;color:var(--txt3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-stok-now{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--bg3);border-radius:6px;border:1px solid var(--border)}
.ks-stok-now span{font-size:11px;color:var(--txt3)}
.ks-stok-now strong{font-size:13px;color:var(--txt);font-family:'JetBrains Mono',monospace}
.ks-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.ks-field-lbl{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--txt3);margin-bottom:6px}
.ks-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;gap:1px}
.ks-seg-btn{padding:9px 0;font-size:12px;font-weight:600;cursor:pointer;border:none;background:var(--bg2);color:var(--txt3);display:flex;align-items:center;justify-content:center;gap:5px;transition:.15s;font-family:'Inter',sans-serif}
.ks-seg-btn .material-icons-round{font-size:14px}
.ks-seg-btn:hover{background:var(--card-h)}
.ks-seg-btn.on-tambah{background:var(--green-d);color:var(--green)}
.ks-seg-btn.on-kurang{background:var(--red-d);color:var(--red)}
.ks-qty-row{display:flex;align-items:center;gap:8px}
.ks-qty-btn{width:38px;height:38px;border-radius:7px;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--txt);font-size:18px;font-weight:600}
.ks-qty-btn:hover{background:var(--card-h)}
.ks-qty-btn.dec{color:var(--red)}
.ks-qty-btn.inc{color:var(--green)}
.ks-qty-inp{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:8px 10px;text-align:center;font-size:20px;font-weight:700;color:var(--txt);font-family:'JetBrains Mono',monospace;outline:none;width:100%}
.ks-qty-inp:focus{border-color:var(--gold)}
.ks-preview{padding:10px 12px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid}
.ks-preview.tambah{background:var(--green-d);border-color:rgba(34,197,94,.22)}
.ks-preview.kurang{background:var(--red-d);border-color:rgba(239,68,68,.22)}
.ks-prev-lbl{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--txt3)}
.ks-prev-val{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace}
.ks-prev-val span{font-size:13px;font-weight:600;color:var(--txt2)}
.ks-prev-val .ks-arrow{color:var(--txt3);font-size:12px}
.ks-prev-val .ks-new{font-size:16px;color:var(--green)}
.ks-preview.kurang .ks-prev-val .ks-new{color:var(--red)}
.ks-sel,.ks-other{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:12px;color:var(--txt);outline:none;font-family:'Inter',sans-serif}
.ks-sel:focus,.ks-other:focus{border-color:var(--gold)}
.ks-footer{padding:0 16px 14px;display:flex;gap:8px;flex-shrink:0}
.ks-btn-cancel{flex:1;padding:9px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);font-size:13px;font-weight:500;color:var(--txt2);cursor:pointer;font-family:'Inter',sans-serif}
.ks-btn-cancel:hover{background:var(--card-h)}
.ks-btn-confirm{flex:2;padding:9px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-family:'Inter',sans-serif}
.ks-btn-confirm .material-icons-round{font-size:15px}
.ks-btn-confirm.tambah{background:var(--green);color:#052e16}
.ks-btn-confirm.kurang{background:var(--red);color:#fff}
.ks-btn-confirm.disabled{background:var(--bg3);color:var(--txt3);cursor:not-allowed;border:1px solid var(--border)}
.ks-btn-confirm.disabled:hover{background:var(--bg3)}

/* ============================================================
   PIN AUTHENTICATION
   ============================================================ */
.pin-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a0e;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Inter', sans-serif;
}
.pin-screen.show { display: flex; }
.pin-card {
  width: 100%;
  max-width: 320px;
  background: #0f0f13;
  border: 1px solid #2e2e3e;
  border-radius: 16px;
  padding: 30px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pin-card.shake { animation: pin-shake .4s; }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.pin-logo-ring {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(245, 197, 24, 0.08);
  border: 2px solid #f5c518;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  transition: all .25s;
}
.pin-logo-ring .material-icons-round { font-size: 26px; color: #f5c518; }
.pin-logo-ring.owner { background: rgba(245,197,24,0.16); border-color:#f5c518; }
.pin-logo-ring.kasir { background: rgba(29,158,117,0.12); border-color:#1d9e75; }
.pin-logo-ring.kasir .material-icons-round { color: #1d9e75; }
.pin-logo-ring.wrong { background: rgba(226,75,74,0.12); border-color:#E24B4A; }
.pin-logo-ring.wrong .material-icons-round { color: #E24B4A; }

.pin-title {
  font-size: 17px; font-weight: 500; color: #fff;
  margin-bottom: 4px; letter-spacing: .02em;
}
.pin-sub {
  font-size: 12.5px; color: #888899;
  margin-bottom: 14px; text-align: center;
  transition: color .2s; min-height: 18px;
}
.pin-status {
  font-size: 11.5px; font-weight: 500;
  padding: 4px 12px; border-radius: 20px;
  opacity: 0; transition: opacity .2s;
  margin-bottom: 14px; min-height: 22px;
}
.pin-status.owner {
  background: rgba(245,197,24,0.15); color: #f5c518;
  border: 1px solid rgba(245,197,24,0.3);
}
.pin-status.kasir {
  background: rgba(29,158,117,0.15); color: #1d9e75;
  border: 1px solid rgba(29,158,117,0.3);
}

.pin-dots { display: flex; gap: 12px; margin-bottom: 22px; }
.pin-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: transparent; border: 1.5px solid #3e3e50;
  transition: all .15s;
}
.pin-dot.filled { background: #f5c518; border-color: #f5c518; }
.pin-dot.owner { background: #f5c518; border-color: #f5c518; }
.pin-dot.kasir { background: #1d9e75; border-color: #1d9e75; }
.pin-dot.wrong { background: #E24B4A; border-color: #E24B4A; }

.pin-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%;
}
.pin-key {
  padding: 13px 0; border-radius: 10px;
  background: #1a1a24; color: #ddd;
  font-size: 19px; font-weight: 400; text-align: center;
  border: 1px solid #2a2a38; cursor: pointer;
  user-select: none; font-family: 'Inter', sans-serif;
  transition: background .12s, transform .08s;
}
.pin-key:active { background: #2a2a38; transform: scale(0.96); }
.pin-key-empty { background: transparent !important; border-color: transparent !important; cursor: default; pointer-events: none; }
.pin-key-del { color: #888 !important; }
.pin-key-del .material-icons-round { font-size: 19px; vertical-align: middle; }

/* ROLE-BASED ACCESS — kasir tidak bisa lihat elemen owner-only */
body[data-role="kasir"] [data-role-restrict="owner"] {
  display: none !important;
}

/* Lock button di sidebar/drawer footer */
.sb-lock, .dm-lock {
  background: transparent;
  border: 1px solid #2e2e3e;
  color: #888899;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  width: 100%; justify-content: center;
  margin-bottom: 8px;
}
.sb-lock:hover, .dm-lock:hover {
  background: rgba(245,197,24,0.08);
  border-color: #f5c518;
  color: #f5c518;
}
.sb-lock .material-icons-round,
.dm-lock .material-icons-round { font-size: 14px; }

/* Role badge kecil di footer sidebar/drawer */
.sb-role, .dm-role {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 20px;
}
body[data-role="owner"] .sb-role,
body[data-role="owner"] .dm-role {
  color: #f5c518;
  background: rgba(245,197,24,0.1);
}
body[data-role="kasir"] .sb-role,
body[data-role="kasir"] .dm-role {
  color: #1d9e75;
  background: rgba(29,158,117,0.1);
}

/* ============================================
   DEMO MODE STYLES — added for public demo
============================================ */
.demo-banner{
  position:fixed;top:0;left:0;right:0;z-index:49;
  background:linear-gradient(90deg,#f5c518 0%,#d4a017 100%);
  color:#000;font-weight:700;font-size:12px;
  padding:7px 14px;display:flex;align-items:center;justify-content:center;gap:14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
  font-family:'Inter',sans-serif;letter-spacing:.3px;
}
/* Z-index banner sengaja rendah (49) supaya tetap di atas konten biasa
   tapi DI BAWAH semua overlay/modal/loading/PIN/sync-lock — agar tidak
   menutupi popup. Modal (.overlay z:200), drawer (z:55), loading (z:400),
   sync-lock (z:500), pin-screen (z:99999) semua di atas banner. */
.demo-banner-text{display:flex;align-items:center;gap:8px}
.demo-banner-text .material-icons-round{font-size:16px}
.demo-banner-actions{display:flex;gap:8px}
.demo-banner-btn{
  background:#000;color:#f5c518;border:none;padding:5px 12px;border-radius:6px;
  font-weight:700;font-size:11px;cursor:pointer;font-family:inherit;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  transition:transform .15s,background .15s;letter-spacing:.3px;
}
.demo-banner-btn:hover{background:#222;transform:translateY(-1px)}
.demo-banner-btn .material-icons-round{font-size:14px}
.demo-banner-btn.demo-reset{background:transparent;color:#000;border:1.5px solid #000}
.demo-banner-btn.demo-reset:hover{background:rgba(0,0,0,0.1)}

/* Geser konten utama ke bawah supaya tidak ketutup banner */
body.has-demo-banner #app{padding-top:32px}
body.has-demo-banner .pin-screen{padding-top:32px}

/* Geser fixed-top elements ke bawah banner supaya tidak tertimpa
   (topbar-mobile & quick-strip cuma muncul di mobile, drawer-mobile
   juga mobile-only — tapi aman ditulis tanpa media query karena
   :has-demo-banner cuma aktif saat banner ada). */
body.has-demo-banner .topbar-mobile{top:32px}
body.has-demo-banner .quick-strip{top:calc(var(--top-h) + 32px)}
body.has-demo-banner .drawer-mobile{top:32px}
body.has-demo-banner .sync-dot{top:calc(var(--top-h) + 8px + 32px)}

@media (max-width:600px){
  .demo-banner{font-size:10.5px;padding:6px 8px;gap:8px;flex-wrap:wrap}
  .demo-banner-btn{padding:4px 9px;font-size:10px}
  body.has-demo-banner #app{padding-top:48px}
  body.has-demo-banner .pin-screen{padding-top:48px}
  body.has-demo-banner .topbar-mobile{top:48px}
  body.has-demo-banner .quick-strip{top:calc(var(--top-h) + 48px)}
  body.has-demo-banner .drawer-mobile{top:48px}
  body.has-demo-banner .sync-dot{top:calc(var(--top-h) + 8px + 48px)}
}

/* PIN hint di layar login */
.pin-demo-hints{
  margin-top:14px;padding:10px 14px;background:rgba(245,197,24,0.08);
  border:1px solid rgba(245,197,24,0.25);border-radius:10px;
  text-align:left;font-size:11.5px;color:var(--txt2);line-height:1.6;
}
.pin-demo-hints b{color:var(--gold);font-weight:700}
.pin-demo-hints .pin-hint-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);font-weight:700;margin-bottom:4px;
  display:flex;align-items:center;gap:5px;
}
.pin-demo-hints .pin-hint-title .material-icons-round{font-size:13px}
.pin-hint-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.pin-hint-row span:first-child{color:var(--txt2)}
.pin-hint-row span:last-child{color:var(--gold);font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:1px}
.pin-hint-fill{
  margin-top:6px;display:flex;gap:6px;
}
.pin-hint-fill button{
  flex:1;background:rgba(245,197,24,0.12);color:var(--gold);
  border:1px solid rgba(245,197,24,0.3);padding:6px 8px;border-radius:6px;
  font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;
  text-transform:uppercase;letter-spacing:.5px;
  transition:background .15s;
}
.pin-hint-fill button:hover{background:rgba(245,197,24,0.22)}