:root {
  --bg: #0d0d14;
  --surface: #13131e;
  --card: #1a1a28;
  --card2: #1f1f30;
  --border: #2a2a40;
  --accent: #d4891a;
  --accent2: #c07810;
  --accent-soft: rgba(212,137,26,0.15);
  --green: #2ecc7a;
  --red: #e94560;
  --blue: #4ea8de;
  --purple: #a78bfa;
  --pink: #f472b6;
  --text: #eeeef8;
  --muted: #6b6b8a;
  --muted2: #4a4a65;
  --input: #0a0a12;
  --kitchen: #0a1628;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 4px 20px rgba(0,0,0,.5);
  --topbar-h: 54px;
  --bottomnav-h: 0px;
}

/* ── LIGHT / DAY THEME ── */
[data-theme="light"] {
  --bg: #f5f4f0;
  --surface: #ffffff;
  --card: #f0efe9;
  --card2: #e8e7e0;
  --border: #d4d2c8;
  --accent: #c07810;
  --accent2: #a06010;
  --accent-soft: rgba(192,120,16,0.12);
  --green: #1a9e5a;
  --red: #d63050;
  --blue: #2878c0;
  --purple: #7c5fe0;
  --pink: #d44090;
  --text: #1a1a24;
  --muted: #7a7870;
  --muted2: #a8a89a;
  --input: #ffffff;
  --kitchen: #e8f0f8;
  --shadow: 0 4px 20px rgba(0,0,0,.12);
}
[data-theme="light"] #splash { background: var(--bg); }
[data-theme="light"] .prod-card { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
[data-theme="light"] .modal { box-shadow: 0 8px 40px rgba(0,0,0,.15); }
[data-theme="light"] .bp-panel { box-shadow: 0 0 60px rgba(0,0,0,.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;height:100dvh;overflow:hidden;background:var(--bg);}
body{height:100%;height:100dvh;overflow:hidden;font-family:var(--font-body);color:var(--text);font-size:14px;
  -webkit-overflow-scrolling:touch;}
button{font-family:var(--font-body);cursor:pointer;touch-action:manipulation;}
input,select,textarea{font-family:var(--font-body);}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* ── SPLASH ── */
#splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;z-index:999;}
.splash-logo{font-size:72px;animation:pulse 1.5s infinite;}
.splash-name{font-family:var(--font-display);font-size:32px;font-weight:800;color:var(--accent);}
.splash-sub{font-size:13px;color:var(--muted);}
.splash-bar{width:220px;height:3px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:8px;}
.splash-fill{height:100%;background:var(--accent);border-radius:3px;animation:load 1.8s ease forwards;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes load{from{width:0}to{width:100%}}

/* ── LAYOUT ── */
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  padding-bottom:var(--bottomnav-h);}
#topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;z-index:50;overflow:hidden;}
#main{flex:1;overflow:hidden;display:flex;min-height:0;}

/* ── TOPBAR ── */
.tb-logo{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--accent);
  white-space:nowrap;flex-shrink:0;}
.tb-date{font-size:10px;color:var(--muted);background:var(--card);padding:3px 8px;
  border-radius:20px;white-space:nowrap;flex-shrink:0;}
.tb-nav{display:flex;gap:1px;margin-left:auto;overflow-x:auto;flex-shrink:1;}
.tb-nav::-webkit-scrollbar{display:none;}
.tb-btn{background:none;border:none;padding:6px 10px;border-radius:8px;color:var(--muted);
  font-size:11px;font-weight:500;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.tb-btn.active{background:var(--card);color:var(--accent);}
.tb-btn:hover:not(.active){color:var(--text);}
.tb-stat{text-align:right;flex-shrink:0;margin-left:6px;}
.tb-stat-val{font-size:14px;font-weight:600;color:var(--green);}
.tb-stat-lbl{font-size:9px;color:var(--muted);}

/* ── BOTTOM NAV (tablet portrait) ── */
#bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;
  height:56px;background:var(--surface);border-top:1px solid var(--border);z-index:100;}
.bnav-inner{display:flex;height:100%;align-items:stretch;overflow-x:auto;}
.bnav-inner::-webkit-scrollbar{display:none;}
.bnav-btn{flex:1;min-width:58px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:none;border:none;color:var(--muted);
  font-size:9px;font-weight:500;padding:4px 4px;transition:all .15s;
  border-top:2px solid transparent;cursor:pointer;}
.bnav-btn.active{color:var(--accent);border-top-color:var(--accent);}
.bnav-btn:active{background:rgba(212,137,26,.08);}
.bnav-icon{font-size:17px;line-height:1;}
.bnav-label{font-size:9px;white-space:nowrap;}

/* ── POS SCREEN ── */
#pos{display:flex;width:100%;height:100%;overflow:hidden;}
#product-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
#cart-panel{width:300px;background:var(--surface);border-left:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;}

/* Search bar */
#search-bar{padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:nowrap;}
.search-wrap{flex:1;position:relative;min-width:80px;}
.search-wrap input{width:100%;background:var(--input);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 8px 7px 28px;color:var(--text);font-size:12px;outline:none;}
.search-wrap input:focus{border-color:var(--accent);}
.search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);}

/* Size buttons */
.size-btns{display:flex;gap:4px;flex-shrink:0;}
.sz-btn{background:var(--card);border:1.5px solid var(--border);padding:6px 10px;
  border-radius:7px;color:var(--muted);font-size:12px;font-weight:600;transition:all .15s;
  min-width:36px;text-align:center;flex-shrink:0;cursor:pointer;}
.sz-btn.active{border-color:var(--accent);color:#fff;background:var(--accent);}
.sz-btn:active{transform:scale(.94);}

/* Category chips */
#cat-bar{padding:6px 10px;display:flex;gap:6px;overflow-x:auto;flex-shrink:0;
  background:var(--surface);border-bottom:1px solid var(--border);}
#cat-bar::-webkit-scrollbar{display:none;}
.cat-chip{background:var(--card);border:1px solid var(--border);padding:5px 12px;
  border-radius:20px;color:var(--muted);font-size:11px;white-space:nowrap;
  transition:background .1s,color .1s,border-color .1s;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;}
.cat-chip.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;}
.cat-chip:active{opacity:.75;}

/* Product grid */
#product-grid{flex:1;overflow-y:auto;padding:10px;-webkit-overflow-scrolling:touch;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.prod-card{background:var(--card);border-radius:var(--r);padding:10px 8px;cursor:pointer;
  border:1.5px solid transparent;transition:all .18s;position:relative;overflow:hidden;
  user-select:none;-webkit-user-select:none;}
.prod-card:active{transform:scale(.95);}
.prod-card.in-cart{border-color:var(--accent);}
.prod-top-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:12px 12px 0 0;}
.prod-badge{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#000;}
.prod-emoji{font-size:26px;text-align:center;margin:4px 0 6px;}
.prod-name{font-size:11px;font-weight:500;line-height:1.3;margin-bottom:3px;}
.prod-cat{font-size:9px;color:var(--muted);margin-bottom:4px;}
.prod-price{font-size:14px;font-weight:600;}
.out-of-stock{opacity:.4;pointer-events:none;}
.out-label{position:absolute;bottom:6px;right:6px;font-size:8px;color:var(--red);
  background:rgba(233,69,96,.1);padding:2px 5px;border-radius:4px;border:1px solid var(--red);}

/* ── CART ── */
.cart-hdr{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;justify-content:space-between;flex-shrink:0;}
.cart-title{font-family:var(--font-display);font-weight:700;font-size:13px;}
.cart-count{font-size:10px;color:var(--muted);background:var(--card);padding:2px 7px;border-radius:10px;}
#cust-bar{padding:7px 10px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;gap:6px;}
.cust-inp{flex:1;background:var(--input);border:1px solid var(--border);
  border-radius:6px;padding:6px 8px;color:var(--text);font-size:11px;outline:none;}
.cust-inp:focus{border-color:var(--blue);}
.cust-btn{background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:6px 8px;color:var(--muted);font-size:11px;transition:all .15s;white-space:nowrap;cursor:pointer;}
.cust-btn:hover{border-color:var(--blue);color:var(--blue);}
#cart-items{flex:1;overflow-y:auto;padding:4px 8px;-webkit-overflow-scrolling:touch;}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:8px;color:var(--muted);}
.cart-empty .big{font-size:36px;}
.cart-row{display:flex;align-items:center;gap:6px;padding:7px 4px;
  border-bottom:1px solid var(--border);animation:fadeUp .2s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.cart-emoji{font-size:18px;flex-shrink:0;}
.cart-info{flex:1;min-width:0;}
.cart-iname{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-imeta{font-size:9px;color:var(--muted);}
.cart-note-btn{font-size:9px;color:var(--blue);background:none;border:none;padding:0;cursor:pointer;}
.qty-ctrl{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.qty-btn{width:24px;height:24px;border-radius:5px;background:var(--card);
  border:1px solid var(--border);color:var(--text);font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:all .1s;cursor:pointer;}
.qty-btn:active{background:var(--accent);color:#000;}
.qty-num{font-size:12px;font-weight:600;min-width:16px;text-align:center;}
.cart-price{font-size:12px;font-weight:600;color:var(--accent);min-width:48px;text-align:right;flex-shrink:0;}
.del-btn{background:none;border:none;color:var(--muted2);font-size:13px;padding:2px 3px;
  transition:color .15s;cursor:pointer;flex-shrink:0;}
.del-btn:hover{color:var(--red);}
#cart-footer{border-top:1px solid var(--border);padding:10px 12px;flex-shrink:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:55vh;}
.totals-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:3px;}
.totals-grand{display:flex;justify-content:space-between;font-size:16px;font-weight:700;
  padding-top:6px;margin-top:3px;border-top:1px solid var(--border);margin-bottom:8px;}
.totals-grand span:last-child{color:var(--accent);}
.discount-row{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.disc-lbl{font-size:10px;color:var(--muted);flex:1;}
.disc-inp{width:46px;background:var(--input);border:1px solid var(--border);border-radius:5px;
  padding:3px 5px;color:var(--text);font-size:11px;outline:none;text-align:right;}
.disc-amt{font-size:10px;color:var(--red);}
.pay-methods{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:7px;}
.pay-btn{padding:6px 3px;font-size:9px;border-radius:6px;border:1.5px solid var(--border);
  background:var(--card);color:var(--muted);text-align:center;transition:all .15s;cursor:pointer;}
.pay-btn.active{border-color:var(--accent);background:rgba(245,166,35,.1);color:var(--accent);}
.pay-icon{display:block;font-size:13px;margin-bottom:1px;}
.gcash-box{background:var(--input);border:1px solid var(--border);border-radius:8px;
  padding:8px;margin-bottom:7px;text-align:center;}
.gcash-title{font-size:10px;color:var(--blue);font-weight:600;margin-bottom:4px;}
.gcash-num{font-size:13px;font-weight:700;color:var(--text);letter-spacing:1px;}
.gcash-name{font-size:10px;color:var(--muted);}
.cash-row{display:flex;gap:5px;align-items:center;margin-bottom:5px;}
.cash-lbl{font-size:10px;color:var(--muted);white-space:nowrap;}
.cash-inp{flex:1;background:var(--input);border:1.5px solid var(--border);border-radius:6px;
  padding:8px 10px;color:var(--text);font-size:15px;outline:none;text-align:right;}
.cash-inp:focus{border-color:var(--accent);background:var(--card);}
#cash-clear-btn{background:none;border:none;color:var(--muted2);font-size:15px;
  padding:4px 6px;cursor:pointer;flex-shrink:0;border-radius:5px;}
#cash-clear-btn:active{color:var(--red);}
.quick-cash{display:flex;gap:4px;margin-bottom:6px;}
.qc-btn{flex:1;padding:4px;font-size:9px;background:var(--card);border:1px solid var(--border);
  border-radius:5px;color:var(--muted);transition:all .15s;cursor:pointer;}
.qc-btn:hover{border-color:var(--muted);color:var(--text);}
.change-row{font-size:11px;text-align:right;margin-bottom:6px;}
.change-pos{color:var(--green);}
.change-neg{color:var(--red);}
.checkout-btn{width:100%;padding:13px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--r);font-size:14px;font-weight:700;transition:all .15s;cursor:pointer;}
.checkout-btn:active{background:var(--accent2);transform:scale(.98);}
.checkout-btn:disabled{opacity:.35;cursor:not-allowed;}

/* ── KITCHEN ── */
#kitchen{background:var(--kitchen);width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;}
.kd-hdr{background:#0f1f3a;padding:10px 16px;border-bottom:1px solid #1a3050;
  display:flex;align-items:center;gap:10px;flex-shrink:0;}
.kd-title{font-family:var(--font-display);font-size:16px;font-weight:800;color:#4ea8de;}
.kd-time{font-size:11px;color:#4a6080;margin-left:auto;}
.kd-queue{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;padding:12px;-webkit-overflow-scrolling:touch;}
.kd-queue::-webkit-scrollbar{width:4px;}
@media (min-width:768px){
  .kd-queue{flex-direction:row;flex-wrap:wrap;overflow-x:auto;overflow-y:auto;align-content:flex-start;}
  .kd-card{width:280px;flex-shrink:0;}
}
.kd-card{background:#0f1f35;border:1.5px solid #1a3050;border-radius:14px;
  min-width:190px;max-width:220px;display:flex;flex-direction:column;flex-shrink:0;}
.kd-card.kd-new{border-color:#e94560;animation:kdPop .4s ease;}
@keyframes kdPop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.kd-card-hdr{padding:10px 12px;border-bottom:1px solid #1a3050;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.kd-order-num{font-family:var(--font-display);font-size:17px;font-weight:800;color:#4ea8de;}
.kd-time-chip{font-size:9px;background:#1a3050;padding:2px 7px;border-radius:10px;color:#4a8ab0;margin-left:auto;}
.kd-elapsed{font-size:10px;font-weight:600;}
.kd-elapsed.warn{color:#f5a623;}
.kd-elapsed.urgent{color:#e94560;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.kd-items{flex:1;padding:8px 12px;overflow-y:auto;}
.kd-item{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #0f1f35;cursor:pointer;}
.kd-item:last-child{border:none;}
.kd-item-emoji{font-size:16px;}
.kd-item-info{flex:1;}
.kd-item-name{font-size:11px;font-weight:500;color:#c8dff0;}
.kd-item-meta{font-size:9px;color:#4a6080;}
.kd-item-qty{font-size:13px;font-weight:700;color:#4ea8de;}
.kd-item-done{text-decoration:line-through;opacity:.4;}
.kd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:10px;color:#1a3050;}
.kd-empty .big{font-size:50px;filter:opacity(.3);}
.kd-customer{font-size:10px;color:#4a8ab0;padding:0 12px 2px;}

/* Bump badge */
.bump-badge {
  background: #f5a623;
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: bold;
  margin-left: 8px;
}

/* Actions container - 3 buttons */
.kd-actions {
  padding: 12px;
  border-top: 1px solid #1a3050;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Base button styles for all three buttons */
.kd-done-btn,
.kd-bump-btn,
.kd-delete-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
  display: block;
  text-align: center;
  transition: all 0.2s;
}

/* Done button (green) */
.kd-done-btn {
  background: #27c96e;
  color: #000;
  border: none;
}
.kd-done-btn:active {
  background: #1fa858;
  transform: scale(0.98);
}

/* Bump button (blue outline) */
.kd-bump-btn {
  background: transparent;
  color: #4ea8de;
  border: 2px solid #4ea8de;
}
.kd-bump-btn:active {
  background: #4ea8de;
  color: #000;
  transform: scale(0.98);
}

/* Delete button (red outline) */
.kd-delete-btn {
  background: rgba(233, 69, 96, 0.1);
  border: 2px solid #e94560;
  color: #e94560;
}
.kd-delete-btn:active {
  background: #e94560;
  color: #fff;
  transform: scale(0.98);
}

/* ── ORDERS ── */
#orders-view{width:100%;height:100%;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}
.view-title{font-family:var(--font-display);font-size:18px;font-weight:800;margin-bottom:14px;color:var(--accent);}
.order-card{background:var(--card);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;
  border:1px solid var(--border);cursor:pointer;transition:all .15s;animation:fadeUp .25s ease;}
.order-card:active{transform:scale(.99);}
.order-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.order-num{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--accent);}
.order-meta{font-size:10px;color:var(--muted);}
.order-total{font-size:15px;font-weight:700;color:var(--green);margin-left:auto;}
.order-pay-chip{font-size:9px;background:var(--surface);padding:2px 7px;border-radius:10px;color:var(--blue);}
.order-status{font-size:9px;padding:2px 7px;border-radius:10px;font-weight:600;}
.status-done{background:rgba(46,204,122,.1);color:var(--green);}
.status-voided{background:rgba(233,69,96,.1);color:var(--red);}
.order-items-preview{font-size:11px;color:var(--muted);line-height:1.5;}
.filter-bar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
.filter-chip{background:var(--card);border:1px solid var(--border);padding:5px 11px;
  border-radius:20px;color:var(--muted);font-size:11px;transition:all .15s;cursor:pointer;}
.filter-chip.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;}
.search-orders{background:var(--input);border:1px solid var(--border);border-radius:8px;
  padding:7px 11px;color:var(--text);font-size:12px;outline:none;flex:1;min-width:140px;}
.search-orders:focus{border-color:var(--accent);}

/* ── SUMMARY ── */
#summary-view{width:100%;height:100%;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:16px;}
.stat-card{background:var(--card);border-radius:var(--r);padding:14px;border:1px solid var(--border);}
.stat-icon{font-size:20px;margin-bottom:6px;}
.stat-val{font-family:var(--font-display);font-size:20px;font-weight:800;margin-bottom:2px;}
.stat-lbl{font-size:10px;color:var(--muted);}
.section-title{font-family:var(--font-display);font-size:14px;font-weight:700;margin-bottom:8px;}
.top-product-row{display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--card);border-radius:8px;margin-bottom:4px;}
.tp-emoji{font-size:16px;}
.tp-name{flex:1;font-size:12px;}
.tp-bar-wrap{width:70px;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.tp-bar{height:100%;border-radius:3px;}
.tp-qty{font-size:11px;color:var(--muted);min-width:24px;text-align:right;}
.pay-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;margin-bottom:16px;}
.pay-sum-card{background:var(--card);border-radius:var(--r);padding:10px;border:1px solid var(--border);}
.pay-sum-icon{font-size:16px;margin-bottom:3px;}
.pay-sum-val{font-size:14px;font-weight:700;color:var(--accent);}
.pay-sum-lbl{font-size:10px;color:var(--muted);}
.hourly-chart{background:var(--card);border-radius:var(--r);padding:12px;margin-bottom:16px;border:1px solid var(--border);}
.hourly-bars{display:flex;align-items:flex-end;gap:3px;height:60px;margin-top:8px;}
.h-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.h-bar{width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;}
.h-lbl{font-size:7px;color:var(--muted2);}
/* Date picker inside summary */
.summary-date-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.summary-date-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.summary-date-inp {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-body);
  outline: none;
  color-scheme: dark;
}

.summary-date-inp:focus {
  border-color: var(--accent);
}



/* ── INVENTORY ── */
#inventory-view{width:100%;height:100%;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}
.inv-tabs{display:flex;gap:5px;flex-wrap:wrap;}
.inv-tab{background:var(--card);border:1px solid var(--border);padding:6px 14px;
  border-radius:8px;color:var(--muted);font-size:11px;font-weight:500;transition:all .15s;cursor:pointer;}
.inv-tab.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700;}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.inv-card{background:var(--card);border-radius:var(--r);padding:12px;border:1px solid var(--border);}
.inv-card.low{border-color:#f5a623;}
.inv-card.out{border-color:var(--red);}
.inv-card-top{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.inv-emoji{font-size:22px;}
.inv-name{font-size:12px;font-weight:600;flex:1;}
.inv-status{font-size:9px;padding:2px 6px;border-radius:10px;font-weight:600;}
.inv-ok{background:rgba(46,204,122,.1);color:var(--green);}
.inv-low{background:rgba(245,166,35,.1);color:#f5a623;}
.inv-out{background:rgba(233,69,96,.1);color:var(--red);}
.inv-stat-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px;}
.inv-stat-lbl{color:var(--muted);}
.inv-stat-val{font-weight:600;}
.inv-prog{height:4px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:7px;}
.inv-prog-fill{height:100%;border-radius:3px;transition:width .5s;}
.inv-prog-ok{background:var(--green);}
.inv-prog-low{background:#f5a623;}
.inv-prog-out{background:var(--red);}
.inv-adjust-btn{width:100%;margin-top:8px;padding:6px;background:var(--card2);
  border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11px;
  transition:all .15s;cursor:pointer;}
.inv-adjust-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── CUSTOMERS ── */
#customers-view{width:100%;height:100%;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}
.cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
.cust-card{background:var(--card);border-radius:var(--r);padding:12px;border:1px solid var(--border);
  cursor:pointer;transition:all .15s;}
.cust-card:active{transform:scale(.98);}
.cust-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.cust-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;}
.cust-cname{font-size:12px;font-weight:600;}
.cust-phone{font-size:10px;color:var(--muted);}
.loyalty-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin:6px 0 3px;}
.loyalty-fill{height:100%;background:linear-gradient(90deg,var(--accent),#f5c842);border-radius:3px;}
.cust-stats{display:flex;gap:8px;margin-top:6px;}
.cust-stat{flex:1;text-align:center;}
.cust-stat-val{font-size:13px;font-weight:700;}
.cust-stat-lbl{font-size:8px;color:var(--muted);}

/* ── SETTINGS ── */
#settings-view{width:100%;height:100%;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}
.settings-section{background:var(--card);border-radius:var(--r);padding:14px;
  margin-bottom:12px;border:1px solid var(--border);}
.settings-title{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:10px;}
.setting-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.setting-lbl{flex:1;font-size:12px;}
.setting-sub{font-size:10px;color:var(--muted);}
.setting-inp{background:var(--input);border:1px solid var(--border);border-radius:6px;
  padding:6px 9px;color:var(--text);font-size:12px;outline:none;width:170px;}
.setting-inp:focus{border-color:var(--accent);}
.toggle{width:40px;height:22px;border-radius:11px;background:var(--border);
  position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.toggle.on{background:var(--green);}
.toggle-knob{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;
  top:3px;left:3px;transition:left .2s;}
.toggle.on .toggle-knob{left:21px;}
.btn-save{background:var(--accent);color:#000;border:none;border-radius:8px;
  padding:8px 18px;font-size:12px;font-weight:700;cursor:pointer;}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red);
  border-radius:8px;padding:8px 18px;font-size:12px;cursor:pointer;}

/* ── PRODUCTS MGMT ── */
#products-view{width:100%;height:100%;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}
.mgmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.mgmt-card{background:var(--card);border-radius:var(--r);padding:12px;border:1px solid var(--border);}
.mgmt-card-top{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.mgmt-emoji-big{font-size:26px;}
.mgmt-name{font-size:12px;font-weight:600;}
.mgmt-cat{font-size:10px;color:var(--muted);}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:7px;}
.price-cell{background:var(--surface);border-radius:5px;padding:3px 5px;text-align:center;}
.price-cell-sz{font-size:8px;color:var(--muted);display:block;}
.price-cell-val{font-size:11px;font-weight:600;color:var(--accent);}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;
  align-items:center;justify-content:center;z-index:200;padding:12px;}
.modal{background:var(--surface);border-radius:16px;padding:18px;max-width:400px;
  width:100%;border:1px solid var(--border);animation:modalIn .25s ease;max-height:88vh;overflow-y:auto;}
@keyframes modalIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal-title{font-family:var(--font-display);font-size:16px;font-weight:800;margin-bottom:14px;color:var(--accent);}
.modal-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;padding:3px 0;}
.modal-row.big{font-size:15px;font-weight:700;border-top:1px solid var(--border);margin-top:5px;padding-top:9px;}
.modal-row.big span:last-child{color:var(--accent);}
.modal-row.green span:last-child{color:var(--green);}
.modal-row.red span:last-child{color:var(--red);}
.modal-divider{border:none;border-top:1px dashed var(--border);margin:8px 0;}
.modal-item-row{display:flex;justify-content:space-between;font-size:11px;
  padding:5px 0;border-bottom:1px solid var(--border);}
.modal-item-row:last-child{border:none;}
.receipt-brand{text-align:center;margin-bottom:12px;}
.receipt-brand .logo{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--accent);}
.receipt-brand .sub{font-size:10px;color:var(--muted);}
.modal-note-inp{width:100%;background:var(--input);border:1px solid var(--border);
  border-radius:6px;padding:7px 9px;color:var(--text);font-size:12px;outline:none;resize:none;}
.modal-btns{display:flex;gap:7px;margin-top:14px;}
.modal-btn{flex:1;padding:10px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;}
.modal-btn.primary{background:var(--accent);color:#000;}
.modal-btn.secondary{background:var(--card2);color:var(--text);}
.modal-btn.danger{background:var(--red);color:#fff;}
.modal-inp{width:100%;background:var(--input);border:1px solid var(--border);border-radius:6px;
  padding:7px 9px;color:var(--text);font-size:12px;outline:none;margin-bottom:7px;}
.modal-inp:focus{border-color:var(--accent);}
.modal-label{font-size:11px;color:var(--muted);margin-bottom:3px;}
.modal-select{width:100%;background:var(--input);border:1px solid var(--border);border-radius:6px;
  padding:7px 9px;color:var(--text);font-size:12px;outline:none;margin-bottom:7px;}

/* ── TOAST ── */
.toast-container{position:fixed;bottom:calc(var(--bottomnav-h) + 16px);left:50%;
  transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:5px;align-items:center;}
.toast{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:9px 16px;font-size:12px;font-weight:500;white-space:nowrap;
  animation:toastIn .3s ease;box-shadow:var(--shadow);}
.toast.success{border-color:var(--green);color:var(--green);}
.toast.error{border-color:var(--red);color:var(--red);}
.toast.info{border-color:var(--blue);color:var(--blue);}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── LOYALTY BADGE ── */
.loyalty-badge{background:linear-gradient(135deg,#f5a623,#f5c842);
  color:#000;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;}

/* UTIL */
.flex{display:flex;}.gap-8{gap:8px;}.mt-8{margin-top:8px;}.fw{width:100%;}
.hidden{display:none!important;}
.chip{font-size:9px;padding:2px 6px;border-radius:10px;font-weight:600;}
.text-green{color:var(--green);}.text-red{color:var(--red);}.text-accent{color:var(--accent);}
.text-muted{color:var(--muted);}.text-blue{color:var(--blue);}

/* ════════════════════════════════════════════════════════
   FULLY RESPONSIVE — works on all devices:
   📺 Large desktop  > 1440px
   🖥  Desktop        1200–1440px
   💻 Small laptop   1024–1200px
   📱 Tablet land.    768–1024px   (iPad, Tab S6 landscape, etc.)
   📱 Tablet port.    600–768px    (iPad portrait, Tab S6 portrait)
   📱 Large phone     420–600px    (iPhone Pro Max, Galaxy S Ultra)
   📱 Small phone     < 420px      (iPhone SE, small Androids)
   ════════════════════════════════════════════════════════ */

/* ── Large desktop > 1440px ── */
@media(min-width:1440px){
  #cart-panel{ width:360px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .tb-btn{ font-size:12px; padding:7px 12px; }
}

/* ── Small laptop 1024–1200px ── */
@media(max-width:1200px){
  .tb-btn{ padding:5px 8px; font-size:10px; }
  #cart-panel{ width:260px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); }
}

/* ── Tablet landscape & small laptop ≤1024px ──
   Bottom nav replaces top nav, POS stacks vertically */
@media(max-width:1024px){
  :root{ --topbar-h:48px; --bottomnav-h:56px; }

  /* Hide desktop top nav */
  .tb-nav{ display:none; }
  .tb-date{ display:none; }
  .tb-logo{ font-size:15px; }
  .tb-stat{ margin-left:auto; }

  /* Show bottom nav */
  #bottom-nav{ display:block; }

  /* POS stacks: products top, cart bottom */
  #pos{ flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #product-panel{ flex:none; height:50vh; min-height:300px; }
  #cart-panel{
    width:100%; flex:none;
    height:auto; min-height:320px;
    border-left:none; border-top:1px solid var(--border);
  }
  #cart-footer{ max-height:none; overflow-y:visible; }

  .grid{ grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:7px; }
  .prod-card{ padding:9px 7px; }
  .prod-emoji{ font-size:24px; }
  .qty-btn{ width:28px; height:28px; font-size:17px; }
  .checkout-btn{ padding:13px; font-size:15px; }
  .modal{ max-width:500px; }

  /* Grids fill space better */
  .inv-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .cust-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .mgmt-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .stat-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* ── Tablet portrait ≤768px ── */
@media(max-width:768px){
  :root{ --topbar-h:46px; --bottomnav-h:56px; }

  #product-panel{ height:48vh; min-height:260px; }
  #cart-panel{ min-height:300px; }

  .grid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:6px; }
  .prod-emoji{ font-size:22px; }
  .prod-name{ font-size:10px; }
  .prod-price{ font-size:13px; }

  /* Cart footer more compact */
  #cart-footer{ padding:8px 10px; }
  .totals-grand{ font-size:14px; }
  .checkout-btn{ padding:11px; font-size:14px; }

  /* Bigger touch targets for fingers */
  .cat-chip{ font-size:12px; padding:7px 14px; }
  .sz-btn{ padding:8px 12px; font-size:13px; min-width:40px; }
  .qty-btn{ width:30px; height:30px; }
  .inv-tab{ padding:7px 16px; font-size:12px; }

  .inv-grid{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .cust-grid{ grid-template-columns:repeat(2,1fr); }
  .mgmt-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }

  .modal{ max-width:100%; margin:0 8px; }
  .settings-section{ padding:12px; }
  .setting-inp{ width:140px; }
}

/* ── Large phone 420–600px ── */
@media(max-width:600px){
  :root{ --topbar-h:44px; --bottomnav-h:58px; }

  .tb-logo{ font-size:14px; }
  .tb-stat-val{ font-size:12px; }
  .tb-stat-lbl{ display:none; }

  #product-panel{ height:44vh; min-height:220px; }
  #cart-panel{ min-height:280px; }

  .grid{ grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:5px; }
  #product-grid{ padding:7px; }
  .prod-card{ padding:7px 5px; }
  .prod-emoji{ font-size:20px; margin:2px 0 4px; }
  .prod-name{ font-size:9px; }
  .prod-price{ font-size:12px; }

  /* Search bar wraps on small screens */
  #search-bar{ flex-wrap:wrap; gap:5px; padding:6px 8px; }
  .search-wrap{ width:100%; flex:none; }
  .size-btns{ gap:3px; }
  .sz-btn{ padding:6px 9px; font-size:11px; min-width:32px; }

  #cust-bar{ padding:5px 8px; }
  .cart-hdr{ padding:7px 10px; }
  #cart-items{ padding:3px 6px; max-height:90px; }
  #cart-footer{ padding:7px 8px; }
  .totals-grand{ font-size:13px; margin-bottom:6px; }
  .checkout-btn{ padding:10px; font-size:13px; border-radius:10px; }
  .pay-methods{ gap:3px; }
  .pay-btn{ padding:5px 2px; font-size:8px; }
  .pay-icon{ font-size:12px; }

  .inv-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .cust-grid{ grid-template-columns:1fr; }
  .mgmt-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

  .bnav-btn{ min-width:50px; }
  .bnav-icon{ font-size:16px; }
  .bnav-label{ font-size:8px; }

  .modal{ padding:14px; }
  .modal-title{ font-size:14px; }
}

/* ── Small phone < 420px (iPhone SE, Galaxy A series) ── */
@media(max-width:420px){
  :root{ --topbar-h:42px; --bottomnav-h:54px; }

  .tb-logo{ font-size:13px; }

  #product-panel{ height:50vh; }
  #cart-panel{ height:50vh; }

  .grid{ grid-template-columns:repeat(3,1fr); gap:4px; }
  .prod-emoji{ font-size:18px; }
  .prod-name{ font-size:9px; }
  .prod-price{ font-size:11px; }

  .sz-btn{ padding:5px 7px; font-size:10px; min-width:28px; }
  #selected-size-lbl{ display:none; }

  .checkout-btn{ padding:9px; font-size:12px; }

  .bnav-btn{ min-width:44px; padding:3px; }
  .bnav-icon{ font-size:15px; }
  .bnav-label{ font-size:7px; }

  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .stat-val{ font-size:17px; }
}

/* ── QR CODE MODAL ── */
#qr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(6px);}
#qr-modal{background:#fff;border-radius:20px;padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:320px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:qrPop .25s cubic-bezier(.34,1.56,.64,1);}
@keyframes qrPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
#qr-header{text-align:center;}
#qr-title{font-size:13px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:2px;}
#qr-amount{font-size:32px;font-weight:900;color:#d4891a;margin-top:2px;}
#qr-code-wrap{background:#fff;padding:12px;border-radius:12px;
  border:3px solid #f0f0f0;display:flex;align-items:center;justify-content:center;}
#qr-code{width:220px;height:220px;}
#qr-info{text-align:center;}
#qr-num{font-size:22px;font-weight:800;color:#111;letter-spacing:2px;}
#qr-name{font-size:13px;color:#888;margin-top:2px;}
#qr-hint{font-size:12px;color:#aaa;background:#f8f8f8;padding:8px 16px;
  border-radius:20px;}
#qr-close-btn{width:100%;padding:14px;background:#111;color:#fff;border:none;
  border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;}
#qr-close-btn:active{background:#333;}
.gcash-box-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.qr-flash-btn{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--card);border:1.5px solid var(--accent);border-radius:10px;
  color:var(--accent);font-size:10px;font-weight:700;padding:8px 10px;
  cursor:pointer;flex-shrink:0;transition:all .15s;}
.qr-flash-btn:active{background:var(--accent);color:#fff;}

/* ── QR UPLOAD ── */
.qr-upload-row{display:flex;gap:12px;align-items:flex-start;width:100%;}
.qr-preview{width:90px;height:90px;object-fit:contain;border-radius:10px;
  border:2px solid var(--accent);background:#fff;cursor:pointer;flex-shrink:0;}
.qr-upload-placeholder{width:90px;height:90px;border:2px dashed var(--border);
  border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:10px;color:var(--muted);text-align:center;
  cursor:pointer;flex-shrink:0;gap:4px;line-height:1.4;}
.qr-upload-placeholder:active{border-color:var(--accent);color:var(--accent);}
.qr-upload-btn{width:100%;padding:9px 12px;background:var(--card);
  border:1.5px solid var(--accent);border-radius:8px;color:var(--accent);
  font-size:12px;font-weight:600;cursor:pointer;text-align:center;}
.qr-upload-btn:active{background:var(--accent);color:#fff;}
.qr-remove-btn{width:100%;padding:7px 12px;background:none;margin-top:6px;
  border:1px solid var(--red);border-radius:8px;color:var(--red);
  font-size:11px;cursor:pointer;}
.qr-remove-btn:active{background:var(--red);color:#fff;}

/* ── CUSTOM SIZE EDITOR ── */
.size-edit-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.size-key-inp{width:64px;background:var(--input);border:1.5px solid var(--border);
  border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;font-weight:700;
  outline:none;text-align:center;text-transform:uppercase;}
.size-key-inp:focus{border-color:var(--accent);}
.size-lbl-inp{flex:1;background:var(--input);border:1.5px solid var(--border);
  border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;outline:none;}
.size-lbl-inp:focus{border-color:var(--accent);}

/* ── RECIPE BUILDER ── */
.recipe-row{display:flex;gap:6px;align-items:center;}
.recipe-ing-sel{flex:1;background:var(--input);border:1.5px solid var(--border);
  border-radius:8px;padding:7px 10px;color:var(--text);font-size:12px;outline:none;}
.recipe-ing-sel:focus{border-color:var(--accent);}
.recipe-qty-inp{width:72px!important;text-align:center;}

/* ══════════════════════════════════════════
   BREW PLANNER — Premium Full-Screen Panel
══════════════════════════════════════════ */
.bp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:300;}
.bp-panel{position:fixed;inset:0;z-index:301;display:flex;flex-direction:column;
  background:var(--bg);max-width:680px;margin:0 auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.5);}
.bp-panel-in{animation:bpSlide .28s cubic-bezier(.22,1,.36,1) forwards;}
.bp-panel-out{animation:bpSlide .25s cubic-bezier(.55,0,.1,1) reverse forwards;}
@keyframes bpSlide{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Header */
.bp-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(to right, var(--surface), var(--bg));
  flex-shrink:0;}
.bp-header-left{display:flex;align-items:center;gap:12px;}
.bp-header-icon{font-size:28px;filter:drop-shadow(0 0 10px rgba(212,137,26,.4));}
.bp-header-title{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text);}
.bp-header-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.bp-close{background:var(--card);border:1px solid var(--border);border-radius:8px;
  color:var(--muted);font-size:16px;padding:6px 12px;cursor:pointer;transition:all .15s;}
.bp-close:hover{color:var(--red);border-color:var(--red);}

/* Tabs */
.bp-tabs{display:flex;gap:0;padding:12px 20px 0;border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;}
.bp-tab{flex:1;padding:10px 16px;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;}
.bp-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.bp-tab-icon{font-size:15px;}

/* Body */
.bp-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch;}
.bp-section{}
.bp-section-hint{font-size:11px;color:var(--muted);margin-bottom:10px;
  padding:8px 12px;background:var(--card2);border-radius:8px;border-left:3px solid var(--accent);}

/* Day rows */
.bp-rows{display:flex;flex-direction:column;gap:8px;}
.bp-row{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px;transition:border-color .15s;}
.bp-row:focus-within{border-color:rgba(212,137,26,.4);}
.bp-row-prod{width:100%;background:var(--input);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;
  font-family:var(--font-body);outline:none;margin-bottom:8px;}
.bp-row-prod:focus{border-color:var(--accent);}
.bp-row-inputs{display:flex;align-items:center;gap:8px;}
.bp-row-vol-wrap{display:flex;align-items:center;gap:6px;
  background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:4px 8px;}
.bp-row-vol{width:54px;background:none;border:none;color:var(--text);font-size:18px;
  font-weight:800;text-align:center;outline:none;font-family:var(--font-body);}
.bp-row-unit{font-size:12px;color:var(--muted);font-weight:600;}
.bp-row-sz{flex:1;background:var(--card);border:1.5px solid var(--border);
  border-radius:8px;padding:8px 10px;color:var(--accent);font-size:12px;
  font-weight:700;font-family:var(--font-body);outline:none;}
.bp-row-del{background:none;border:none;color:var(--muted2);font-size:18px;
  cursor:pointer;padding:4px 6px;border-radius:6px;transition:color .15s;}
.bp-row-del:active{color:var(--red);}
.bp-add-row{width:100%;padding:10px;background:none;border:1.5px dashed var(--border);
  border-radius:10px;color:var(--muted);font-size:13px;font-weight:600;
  cursor:pointer;margin-top:4px;transition:all .15s;display:flex;align-items:center;
  justify-content:center;gap:8px;font-family:var(--font-body);}
.bp-add-row:hover{border-color:var(--accent);color:var(--accent);}

/* Week table */
.bp-week-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;
  border:1px solid var(--border);}
.bp-week-table{width:100%;border-collapse:collapse;min-width:520px;}
.bp-week-th{padding:10px 6px;text-align:center;color:var(--muted);font-size:11px;
  font-weight:700;letter-spacing:.5px;background:var(--surface);
  border-bottom:1px solid var(--border);}
.bp-week-th.bp-week-prod-col{text-align:left;padding-left:14px;min-width:110px;}
.bp-week-row{border-bottom:1px solid var(--border);}
.bp-week-row:last-child{border-bottom:none;}
.bp-week-prod{padding:10px 6px 10px 14px;vertical-align:middle;}
.bp-week-emoji{font-size:16px;margin-right:6px;}
.bp-week-name{font-size:12px;font-weight:600;color:var(--text);}
.bp-week-cell{padding:6px 3px;text-align:center;vertical-align:top;}
.bp-week-inp{display:block;width:58px;margin:0 auto 3px;background:var(--input);
  border:1px solid var(--border);border-radius:6px;padding:6px 4px;color:var(--text);
  font-size:13px;font-weight:700;text-align:center;outline:none;font-family:var(--font-body);}
.bp-week-inp:focus{border-color:var(--accent);}
.bp-week-sz{display:block;width:58px;margin:0 auto;background:var(--input);
  border:1px solid var(--border);border-radius:6px;padding:4px 2px;color:var(--accent);
  font-size:10px;font-weight:700;text-align:center;outline:none;font-family:var(--font-body);}

/* Result placeholder */
.bp-result-empty{flex:1;display:flex;align-items:center;justify-content:center;}
.bp-result-placeholder{text-align:center;color:var(--muted);font-size:13px;padding:40px;}

/* Day result cards */
.bp-results-inner{display:flex;flex-direction:column;gap:10px;}
.bp-results-section-title{font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;padding:2px 0;}

.bp-day-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;}
.bp-day-card-header{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:var(--card2);border-bottom:1px solid var(--border);}
.bp-day-label{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--accent);}
.bp-day-cost{font-size:11px;color:var(--muted);}
.bp-day-products{padding:10px 14px;}
.bp-day-product-row{display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;border-bottom:1px solid var(--border);}
.bp-day-product-row:last-child{border-bottom:none;}
.bp-day-product-info{display:flex;align-items:center;gap:10px;}
.bp-day-emoji{font-size:20px;}
.bp-day-prod-name{font-size:13px;font-weight:600;color:var(--text);}
.bp-day-prod-meta{font-size:10px;color:var(--muted);margin-top:1px;}
.bp-day-cups-badge{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;text-align:center;}
.bp-day-cups-badge{font-size:18px;font-weight:800;color:var(--text);line-height:1;}
.bp-day-cups-badge span{display:block;font-size:9px;color:var(--muted);font-weight:400;}

/* Scenarios */
.bp-scenarios{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--border);border-top:1px solid var(--border);}
.bp-scenario{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 6px;gap:3px;background:var(--surface);}
.bp-scenario-good{background:rgba(46,204,122,.06);}
.bp-scenario-bad{background:rgba(233,69,96,.06);}
.bp-scenario-neutral{background:var(--surface);}
.bp-scenario-label{font-size:9px;color:var(--muted);text-align:center;}
.bp-scenario-val{font-size:13px;font-weight:800;}
.bp-scenario-good .bp-scenario-val{color:var(--green);}
.bp-scenario-bad .bp-scenario-val{color:var(--red);}
.bp-scenario-neutral .bp-scenario-val{color:var(--text);}

/* Ingredient list */
.bp-ing-list{display:flex;flex-direction:column;gap:0;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.bp-ing-row{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--border);}
.bp-ing-row:last-child{border-bottom:none;}
.bp-ing-info{flex:1;min-width:0;}
.bp-ing-name{font-size:13px;font-weight:600;color:var(--text);}
.bp-ing-stock{font-size:10px;color:var(--muted);margin-top:1px;}
.bp-ing-bar-wrap{height:3px;background:var(--border);border-radius:2px;margin-top:5px;overflow:hidden;}
.bp-ing-bar{height:100%;border-radius:2px;transition:width .4s ease;}
.bp-ing-right{text-align:right;flex-shrink:0;}
.bp-ing-needed{font-size:14px;font-weight:700;}
.bp-ing-status{font-size:10px;margin-top:1px;}
.bp-ing-cost{font-size:11px;color:var(--accent);margin-top:2px;}

/* Totals */
.bp-totals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.bp-total-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px;text-align:center;}
.bp-total-label{font-size:10px;color:var(--muted);margin-bottom:4px;}
.bp-total-val{font-size:20px;font-weight:800;line-height:1;}

/* Overall scenario */
.bp-overall-scenario{background:var(--surface);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;}
.bp-overall-title{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1.5px;
  padding:10px 14px;background:var(--card2);border-bottom:1px solid var(--border);}
.bp-overall-scenario .bp-scenario{flex-direction:row;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);}
.bp-overall-scenario .bp-scenario:last-child{border-bottom:none;}
.bp-overall-scenario .bp-scenario-label{font-size:12px;}
.bp-overall-scenario .bp-scenario-val{font-size:14px;}

/* Stock status */
.bp-stock-status{padding:12px 16px;border-radius:10px;font-size:13px;font-weight:600;}
.bp-stock-ok{background:rgba(46,204,122,.08);border:1px solid rgba(46,204,122,.25);color:var(--green);}
.bp-stock-warn{background:rgba(233,69,96,.08);border:1px solid rgba(233,69,96,.25);color:var(--red);}

/* ══════════════════════════════════════════
   RECIPE — Two-Part Builder
══════════════════════════════════════════ */
.recipe-section-wrap{display:flex;flex-direction:column;gap:8px;}
.recipe-part{border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.recipe-part-header{display:flex;align-items:center;gap:10px;padding:10px 14px;}
.brew-header{background:linear-gradient(135deg,rgba(212,137,26,.12),rgba(212,137,26,.04));}
.cup-header{background:linear-gradient(135deg,rgba(78,168,222,.12),rgba(78,168,222,.04));}
.recipe-part-icon{font-size:20px;}
.recipe-part-title{font-size:13px;font-weight:700;color:var(--text);}
.recipe-part-sub{font-size:10px;color:var(--muted);margin-top:1px;}
.recipe-part-body{padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:7px;}
.recipe-rows{display:flex;flex-direction:column;gap:6px;}
.recipe-add-btn{background:none;border:1.5px dashed var(--border);border-radius:8px;
  padding:7px;color:var(--muted);font-size:12px;cursor:pointer;width:100%;
  font-family:var(--font-body);transition:all .15s;}
.recipe-add-btn:hover{border-color:var(--accent);color:var(--accent);}
.brew-vol-row{display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;background:var(--card2);border-radius:8px;margin-top:2px;}
.brew-vol-label{font-size:11px;color:var(--muted);}
.recipe-vol-inp{font-size:14px!important;font-weight:700!important;}

.recipe-yield-box{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--card2);border-radius:10px;border:1px solid var(--border);}
.recipe-yield-icon{font-size:18px;}
.recipe-yield-text{font-size:12px;color:var(--muted);}

.recipe-cost-box{background:var(--card2);border-radius:10px;padding:12px;
  border:1px solid var(--border);}
.recipe-cost-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.recipe-cost-item{text-align:center;}
.recipe-cost-total{border-left:1px solid var(--border);}
.recipe-cost-lbl{font-size:10px;color:var(--muted);margin-bottom:3px;}
.recipe-cost-val{font-size:14px;font-weight:700;color:var(--text);}

/* ── PRODUCT ICON / IMAGE UPLOAD ── */
.prod-icon-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;}
.prod-icon-preview{width:58px;height:58px;background:var(--card);border:1.5px solid var(--border);
  border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.prod-img-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;
  background:var(--card);border:1.5px solid var(--accent);border-radius:8px;
  color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.prod-img-btn:active{background:var(--accent);color:#fff;}
.prod-img-remove{border-color:var(--red)!important;color:var(--red)!important;}
.prod-img-remove:active{background:var(--red)!important;color:#fff!important;}