:root{
  --brand:#1e7d32;
  --brand-dark:#145a24;
  --bg:#f4f6f5;
  --card:#ffffff;
  --border:#dfe3e1;
  --text:#1f2a24;
  --muted:#6b7570;
  --warn:#c0392b;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--brand); text-decoration:none;}
.muted{color:var(--muted);}
.small{font-size:12px;}
.center{text-align:center;}
.mono{font-family:"Courier New",monospace;}

/* ---------- Top bar / nav ---------- */
.topbar{
  background:var(--brand);
  color:#fff;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.topbar .brand{display:flex; align-items:center; gap:10px;}
.topbar .logo{
  width:38px; height:38px; border-radius:8px;
  background:#fff; color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px;
}
.topbar .store-name{font-weight:700; font-size:16px;}
.topbar .store-tag{font-size:11px; opacity:.9;}
.main-nav{display:flex; gap:14px; flex-wrap:wrap;}
.main-nav a{color:#fff; opacity:.9; font-size:14px;}
.main-nav a:hover{opacity:1; text-decoration:underline;}
.user-box{display:flex; align-items:center; gap:10px; font-size:13px;}

.page-wrap{max-width:1200px; margin:20px auto; padding:0 16px 50px;}

/* ---------- Cards / stats ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin-bottom:18px;
}
.card h2{font-size:15px; margin:0 0 12px; color:var(--text);}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px;}
.stat-card{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px;}
.stat-label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.stat-value{font-size:22px; font-weight:700; color:var(--brand-dark); margin-top:4px;}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:8px 6px; border-bottom:1px solid var(--border); text-align:left;}
th{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase;}
td.num, th.num{text-align:right;}
td.warn{color:var(--warn); font-weight:600;}
.actions{white-space:nowrap;}
.tag{padding:2px 8px; border-radius:20px; font-size:11px;}
.tag.ok{background:#e5f4e8; color:var(--brand-dark);}
.tag.off{background:#f5e6e6; color:var(--warn);}

/* ---------- Buttons / forms ---------- */
.btn{
  background:var(--brand); color:#fff; border:none; border-radius:6px;
  padding:9px 14px; font-size:13px; cursor:pointer;
}
.btn:hover{background:var(--brand-dark);}
.btn.secondary{background:#fff; color:var(--brand); border:1px solid var(--brand);}
.btn.danger{background:#fff; color:var(--warn); border:1px solid var(--warn);}
.btn.small{padding:5px 10px; font-size:12px;}
.mini-btn{
  background:#fff; border:1px solid var(--border); border-radius:5px;
  padding:3px 8px; font-size:12px; cursor:pointer; margin-right:4px;
}
.mini-btn:hover{border-color:var(--brand); color:var(--brand);}
.remove-btn{color:var(--warn); background:none; border:none; cursor:pointer; font-size:14px;}

input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], select{
  padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px;
}
label{font-size:12px; color:var(--muted); display:block; margin:8px 0 3px;}
form input, form select{width:100%;}
.form-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}

.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap;}
.action-row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.quick-links{display:flex; gap:10px;}

/* ---------- Alerts ---------- */
.alert{padding:10px 12px; border-radius:6px; font-size:13px; margin:8px 0;}
.alert.error{background:#fdecea; color:var(--warn); border:1px solid #f3c6c2;}
.alert.success{background:#e5f4e8; color:var(--brand-dark); border:1px solid #bfe4c7;}
.scan-msg{font-size:12px; min-height:16px; margin-bottom:8px;}
.scan-msg:empty{min-height:0; margin-bottom:0;}
.scan-msg.success{color:var(--brand-dark);}
.scan-msg.error{color:var(--warn);}

/* ---------- Login page ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.login-card{
  background:#fff; padding:30px; border-radius:14px; width:320px; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.login-card .login-logo{
  width:56px; height:56px; margin:0 auto 10px; border-radius:12px;
  background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700;
}
.login-card h1{font-size:18px; margin:4px 0;}
.login-card label{text-align:left;}
.login-card input{width:100%; margin-bottom:6px;}
.login-card .btn{width:100%; margin-top:10px;}

/* ---------- POS screen ---------- */
.pos-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:start;}
@media (max-width:900px){ .pos-layout{grid-template-columns:1fr;} }
.pos-left{display:flex; flex-direction:column; gap:18px;}
.pos-left .card{margin-bottom:0;}
.scale-reading{font-size:22px; font-weight:700; color:var(--brand-dark); margin:8px 0;}
.search-row{display:flex; gap:8px; margin-bottom:10px;}
.search-row input{flex:1;}
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px;
  max-height:440px; overflow-y:auto; padding-right:4px;
}
.product-btn{
  border:1px solid var(--border); background:#fafcfb; border-radius:8px;
  padding:10px 8px; text-align:left; cursor:pointer; position:relative;
}
.product-btn:hover{border-color:var(--brand); background:#eef7ef;}
.product-btn:disabled{opacity:.5; cursor:not-allowed;}
.product-btn .name{font-weight:600; font-size:13px; display:block;}
.product-btn .price{font-size:12px; color:var(--muted);}
.product-btn .oos{display:block; font-size:10px; color:var(--warn);}
.bill-header{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;}
.empty-msg{color:var(--muted); font-size:13px; text-align:center; padding:20px 0;}
.totals{margin-top:10px; font-size:13px;}
.totals > div{display:flex; justify-content:space-between; padding:4px 0;}
.totals .grand{font-size:17px; font-weight:700; color:var(--brand-dark); border-top:2px solid var(--border); padding-top:8px; margin-top:4px;}
.rate-inputs{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted);}
.rate-inputs input{width:55px; padding:4px 6px;}
.payment-method{display:flex; gap:16px; margin-top:12px; font-size:13px;}
#cardElementWrap{margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:6px;}
#card-element{padding:8px 0;}

/* ---------- Full-screen till page (no whole-page scrolling) ---------- */
body.pos-page{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.pos-page .topbar{flex:none;}
body.pos-page .page-wrap{
  flex:1 1 auto;
  min-height:0;
  max-width:none;
  margin:0;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
}
body.pos-page .till-layout{
  flex:1 1 auto;
  min-height:0;
}
body.pos-page .till-col{
  min-height:0;
  overflow-y:hidden; /* fitscreen.js zooms the whole layout to fit instead of scrolling columns */
  padding-right:4px;
}
/* fitscreen.js applies CSS zoom to .till-layout on load/resize so everything
   fits one screen on any laptop/desktop - no per-breakpoint scroll fallback needed */

/* ---------- Till dashboard (touchscreen POS) ---------- */
.till-layout{
  display:grid;
  grid-template-columns: 1.15fr 1.15fr 0.9fr;
  gap:14px;
  align-items:start;
}
@media (max-width:1100px){ .till-layout{grid-template-columns:1fr 1fr;} }
@media (max-width:750px){ .till-layout{grid-template-columns:1fr;} }
.till-col{display:flex; flex-direction:column; gap:14px;}
.till-col .card{margin-bottom:0;}

.till-bill-card .bill-table-wrap{max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:6px;}
#billBody tr{cursor:pointer;}
#billBody tr:hover{background:#f4f9f5;}
#billBody tr.selected{background:#dcefe0;}
.line-fn-row{display:flex; gap:8px; margin-top:10px;}

.balance-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:14px; margin-bottom:12px;}
.balance-grid > div{display:flex; justify-content:space-between; padding:2px 0;}
.balance-grid > div > span:last-child{font-weight:700;}
.balance-grid > div.clickable-row{cursor:pointer; border-radius:4px;}
.balance-grid > div.clickable-row:hover{background:#eef6ee;}
.inline-rate{width:45px; padding:2px 4px; display:inline-block;}
.inline-rate:disabled{background:#eee; color:#999; cursor:not-allowed;}
.tax-badge{font-size:10px; color:#666; background:#eef2f7; border-radius:4px; padding:1px 4px; margin-left:4px;}
.balance-hero{display:flex; gap:12px; flex-wrap:wrap;}
.grand-total-block, .balchange-block{
  background:#0f2417; color:#fff; border-radius:8px; padding:12px 14px; flex:1; min-width:140px;
}
.grand-total-block .label, .balchange-block .label{font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.05em;}
.grand-total-block .value{font-size:26px; font-weight:700;}
.grand-total-block .second-currency{font-size:12px; opacity:.75; margin-top:2px;}
.balchange-block .bal, .balchange-block .chg{display:flex; justify-content:space-between; align-items:baseline; padding:4px 0;}
.balchange-block .bal .value{color:#ffb454; font-size:18px; font-weight:700;}
.balchange-block .chg .value{color:#7fe08a; font-size:18px; font-weight:700;}

.fn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.fn-grid.secondary{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); grid-template-columns:1fr;}
.fn-btn{font-size:12px; padding:10px 6px; text-align:center;}
.fn-btn.small{font-size:11px; padding:7px 6px; opacity:.85;}

.quick-amount-row{margin:10px 0;}
.quick-amount-row input{width:100%;}

.dept-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px;
  max-height:260px; overflow-y:auto; padding-right:2px;
}
.dept-tile{
  border:none; border-radius:10px; color:#fff; padding:16px 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  max-height:60px; text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.dept-tile:hover{filter:brightness(1.08);}
.dept-icon{font-size:26px;}
.dept-name{font-size:12px; font-weight:600; text-align:center;}
.dept-tile-preview{
  display:inline-block; padding:8px 14px; border-radius:8px; color:#fff; font-weight:600; font-size:13px;
}
.color-swatch{display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:middle; border:1px solid var(--border);}
.checkbox-label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text);}
.checkbox-label input{width:auto;}

.keypad-display{
  background:#0f2417; color:#7fe08a; font-size:26px; font-weight:700; text-align:right;
  padding:10px 14px; border-radius:8px; margin-bottom:10px; font-family:"Courier New",monospace;
}
.keypad-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.keypad-btn{padding:14px 4px; font-size:15px; font-weight:600;}
.keypad-btn.cash-btn{background:#c8862a;}
.keypad-btn.cash-btn:hover{background:#a86e20;}

.held-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;}

/* ---------- Modals ---------- */
.modal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4);
  align-items:center; justify-content:center; z-index:50;
}
.modal.open{display:flex;}
.modal-box{background:#fff; border-radius:10px; padding:20px; width:420px; max-height:90vh; overflow-y:auto;}
.modal-box.small{width:320px;}
.barcode-preview{margin:10px 0; text-align:center;}
.barcode-svg{max-width:100%;}

/* ---------- Order queue ---------- */
.queue-board{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:850px){ .queue-board{grid-template-columns:1fr;} }
.queue-col{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; min-height:200px;}
.queue-col h2{font-size:14px; margin:0 0 10px; text-transform:uppercase; color:var(--muted);}
.queue-card{
  background:#fafcfb; border:1px solid var(--border); border-radius:8px;
  padding:10px; margin-bottom:10px;
}
.qc-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;}
.qc-mid{font-size:12px; color:var(--muted); margin-bottom:8px;}

/* ---------- Receipt (screen + print) ---------- */
.receipt-screen-card{max-width:380px; margin:0 auto;}
#receipt{font-family:"Courier New",monospace; font-size:13px;}
#receipt .line{border-top:1px dashed #999; margin:8px 0;}
#receipt table{font-size:12px;}
@media print{
  .no-print, header.topbar, .main-nav, .user-box{display:none !important;}
  body{background:#fff;}
  .page-wrap{margin:0; padding:0;}
  .card{border:none; padding:0;}
}

/* ======================================================================
   POS TILL — kiosk redesign v2 (scoped to body.pos-page only, so every
   other page — dashboard, inventory, reports, accounts, login — keeps
   using the classic styles above untouched).
   ====================================================================== */
body.pos-page{
  --till-accent:#4caf50;
  --till-amber:#f0b955;
  --till-dark:#0f2417;
}

/* ---- fullscreen kiosk: top nav is hidden by default, only Esc (or the
   ☰ button) reveals it, since a till screen should stay full-screen ---- */
body.pos-page .topbar{
  overflow:hidden;
  max-height:74px;
  transition:max-height .22s ease, padding .22s ease, opacity .18s ease;
}
body.pos-page:not(.menu-open) .topbar{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  pointer-events:none;
}
body.pos-page .page-wrap{padding:6px 8px;}

#posMenuFab{
  position:fixed;top:10px;left:10px;z-index:60;
  width:38px;height:38px;border-radius:10px;border:none;
  background:rgba(20,26,21,.55);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);transition:background .15s ease,transform .08s ease;
}
#posMenuFab:hover{background:rgba(20,26,21,.8);}
#posMenuFab:active{transform:scale(.93);}
#posMenuHint{
  position:fixed;top:14px;left:56px;z-index:60;
  background:rgba(20,26,21,.85);color:#e7efe8;font-size:12px;font-weight:600;
  padding:8px 12px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.3);
  opacity:1;transition:opacity .4s ease;pointer-events:none;
}
#posMenuHint.hidden{opacity:0;}
body.pos-page.menu-open #posMenuFab,
body.pos-page.menu-open #posMenuHint{display:none;}
/* reserve a gutter for the fab instead of letting it float over the customer
   name field — matches the approved mockup exactly */
body.pos-page:not(.menu-open) .bill-header{
  padding-left:52px;
}

/* ---- tighter spacing throughout the till ---- */
body.pos-page .till-col{gap:8px;}
body.pos-page .card{padding:8px 10px;margin-bottom:0;}
body.pos-page .bill-header{gap:6px;margin-bottom:0;}
body.pos-page .till-bill-card{padding-top:6px;}
body.pos-page .line-fn-row{margin-top:6px;gap:6px;}
body.pos-page .balance-grid{margin-bottom:10px;gap:6px 16px;padding:2px 0;}
body.pos-page .fn-grid{gap:6px;}
body.pos-page .fn-grid.secondary{margin-top:6px;padding-top:6px;}
body.pos-page .search-row{margin-bottom:0;gap:6px;}
body.pos-page .quick-amount-row{margin:6px 0;}

/* ---- category strip: compact instead of a wide wall of tiles, so the
   product grid gets the room once a department is tapped ---- */
body.pos-page .dept-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:60px;
  gap:6px;
}
body.pos-page .dept-tile{
  max-height:none;
  border-radius:10px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .08s ease, filter .15s ease;
}
body.pos-page .dept-tile:active{transform:scale(.96);}
body.pos-page .dept-icon{font-size:20px;line-height:1;}

/* ---- product grid: colorful accent stripe (matches the department just
   tapped — set as --dept-accent by pos.js), tighter tiles, 5 per row ---- */
body.pos-page .product-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;max-height:none;
}
body.pos-page .product-btn{
  border-left:4px solid var(--dept-accent, var(--till-accent));
  border-radius:8px;padding:8px 8px;
  transition:transform .08s ease, box-shadow .15s ease;
}
body.pos-page .product-btn:active{transform:scale(.97);}
body.pos-page .product-btn .price{
  display:inline-block;margin-top:2px;background:#e7f5e8;color:#1e7d32;
  border-radius:5px;padding:1px 6px;font-weight:700;
}

/* ---- balance / change: the amount to hand back to the customer is the
   most important number on a cash sale, so make it impossible to miss ---- */
body.pos-page .grand-total-block,
body.pos-page .balchange-block{background:linear-gradient(160deg,var(--till-dark),#16281c);}
body.pos-page .balchange-block .chg{
  border-radius:6px;padding:4px 6px;transition:background .2s ease, box-shadow .2s ease;
}
body.pos-page .balchange-block .chg.due{
  background:rgba(127,224,138,.16);
  box-shadow:0 0 0 1.5px var(--till-accent);
}
body.pos-page .balchange-block .chg.due .value{
  color:#8dffa0;
  text-shadow:0 0 10px rgba(127,224,138,.5);
}

/* ---- colorful, purposeful function buttons instead of a wall of one
   green — each action gets its own hue so it's recognizable at a glance ---- */
body.pos-page #discountBtn{background:#1f9fe0;}
body.pos-page #discountBtn:hover{background:#1a86bd;}
body.pos-page #priceCheckBtn{background:#8b4fe0;}
body.pos-page #priceCheckBtn:hover{background:#7440bd;}
body.pos-page #ageBtn{background:#e0388f;}
body.pos-page #ageBtn:hover{background:#bd2f78;}
body.pos-page #refundBtn.btn.secondary{background:#fff;color:#e0303f;border-color:#e0303f;}
body.pos-page #payoutBtn.btn.secondary{background:#fdf1ec;color:#c9701f;border-color:#c9701f;}
body.pos-page #cashInBtn.btn.secondary{background:#eefaee;color:#2e8b3f;border-color:#2e8b3f;}
body.pos-page #quickAddBtn{background:#f0871a;color:#fff;border:none;}
body.pos-page #quickAddBtn:hover{background:#cf7112;}

/* ---- barcode box: visibly "ready to scan" at all times, since a scan
   only works while this field is focused ---- */
body.pos-page #barcodeBox{
  background:#eef8ef;border:1.5px solid #bcd8bf;font-weight:600;
  transition:box-shadow .15s ease, border-color .15s ease;
}
body.pos-page #barcodeBox:focus{
  outline:none;border-color:var(--till-accent);
  box-shadow:0 0 0 3px rgba(76,175,80,.25);
}

body.pos-page .keypad-btn.cash-btn{background:#c98a2e;}
body.pos-page .keypad-btn.cash-btn:hover{background:#a86e20;}

/* ======================================================================
   POS TILL — v3: match the confirmed 2-column layout (bill+totals+tabbed
   Actions/Keypad/Payment on the left, search+departments/products filling
   the right; weighing scale is now an on-demand overlay). Still scoped to
   body.pos-page only.
   ====================================================================== */
body.pos-page .till-layout{
  grid-template-columns:400px 1fr;
}
@media (max-width:1000px){
  body.pos-page .till-layout{grid-template-columns:1fr;}
}

body.pos-page .till-bill-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
body.pos-page .till-bill-card .bill-table-wrap{flex:1 1 auto;min-height:0;max-height:none;}
body.pos-page .till-balance-card{flex:0 0 auto;}
body.pos-page .till-tabs-card{flex:0 0 auto;padding:8px 10px 10px;}

body.pos-page .till-right{min-height:0;}
body.pos-page .till-search-card{flex:0 0 auto;}
body.pos-page .till-dept-card{flex:1 1 auto;min-height:0;overflow-y:auto;}

/* ---- segmented Actions / Keypad / Payment tabs ---- */
body.pos-page .segtabs{
  display:flex;gap:4px;background:#eef1ee;border-radius:8px;padding:4px;margin-bottom:8px;
}
body.pos-page .segtab-btn{
  flex:1;border:none;background:transparent;border-radius:6px;padding:8px 4px;
  font-size:12.5px;font-weight:700;color:#4a534c;cursor:pointer;transition:background .15s ease,color .15s ease;
}
body.pos-page .segtab-btn.active{background:var(--brand); color:#fff;}
body.pos-page .segtab-panel .payment-method{margin-top:0;}

/* ---- weighing scale: an on-demand overlay instead of a fixed column ---- */
body.pos-page .scale-drawer{
  display:none;position:fixed;inset:0;background:rgba(15,24,18,.45);
  align-items:center;justify-content:center;z-index:55;
}
body.pos-page .scale-drawer.open{display:flex;}
body.pos-page .scale-drawer-card{
  width:480px;max-width:92vw;box-shadow:0 20px 50px rgba(0,0,0,.35);margin-bottom:0;
}
body.pos-page .scale-drawer-card h2{display:flex;align-items:center;justify-content:space-between;}
body.pos-page .scale-drawer-close{
  border:none;background:#eee;border-radius:6px;width:30px;height:30px;font-size:14px;cursor:pointer;padding:0;
}

/* ======================================================================
   POS TILL — v4 fix: the department grid must stay permanently visible
   (it was incorrectly being replaced by the product list on tap — this
   restores the two-stage "grid stays, products appear below it" layout
   that was actually confirmed in the design).
   ====================================================================== */
body.pos-page .till-dept-card{
  display:flex;flex-direction:column;gap:8px;
}
body.pos-page .dept-strip-head{
  display:flex;align-items:center;justify-content:space-between;
}
body.pos-page .dept-strip-head .label{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
body.pos-page .dept-tile.active{
  outline:2px solid #1c2321;outline-offset:-2px;filter:brightness(1.08);
}
body.pos-page #productView{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;
  border-top:1px dashed var(--border);padding-top:8px;
}
body.pos-page #productView .toolbar{margin-bottom:0;}
body.pos-page #currentDeptName{font-size:13px;}
body.pos-page .product-grid{flex:1 1 auto;min-height:0;max-height:none;}

/* ======================================================================
   POS TILL — v5: match the pos-14inch-v4 mockup's header, action-button
   colours and payment-method pills more closely. Still scoped to
   body.pos-page only.
   ====================================================================== */

/* ---- header: deep green gradient bar with pill-style nav + user info,
   matching the kiosk mockup instead of the plain flat green topbar ---- */
body.pos-page .topbar{
  background:linear-gradient(120deg,#1f4d2c 0%,#175c33 55%,#0f3d24 100%);
}
body.pos-page .main-nav{gap:4px;}
body.pos-page .main-nav a{
  padding:9px 14px;border-radius:7px;font-weight:600;font-size:13.5px;
  transition:background .15s ease;
}
body.pos-page .main-nav a:hover{background:rgba(255,255,255,.1);text-decoration:none;}
body.pos-page .main-nav a.current{background:var(--till-accent);color:#0f2415;opacity:1;}
body.pos-page .user-box{font-size:12.5px;}
body.pos-page .user-box span{
  background:rgba(255,255,255,.12);padding:7px 11px;border-radius:20px;
}
body.pos-page .user-box .btn.small{border-radius:20px;padding:7px 14px;}

/* ---- action-panel buttons: give each function its mockup colour so the
   grid reads at a glance instead of being a wall of one green ---- */
body.pos-page #holdBtn,
body.pos-page #recallBtn,
body.pos-page #ageBtn,
body.pos-page #receiptBtn.btn.secondary{
  background:#e7eee8;color:var(--brand-dark);border:none;
}
body.pos-page #holdBtn:hover,
body.pos-page #recallBtn:hover,
body.pos-page #ageBtn:hover,
body.pos-page #receiptBtn.btn.secondary:hover{background:#d9e4da;}
body.pos-page #payoutBtn.btn.secondary{background:#e0388f;color:#fff;border:none;}
body.pos-page #payoutBtn.btn.secondary:hover{background:#bd2f78;}
body.pos-page #cashInBtn.btn.secondary{background:#3fa22a;color:#fff;border:none;}
body.pos-page #cashInBtn.btn.secondary:hover{background:#328521;}
body.pos-page #refundBtn.btn.secondary{background:#fff;color:#e0303f;border:1px solid #e0303f;}
body.pos-page #refundBtn.btn.secondary:hover{background:#fdeceb;}

/* ---- scale toggle button: teal, matching the ⚖ Weighing Scale button
   in the mockup instead of the plain outline secondary style ---- */
body.pos-page #scaleToggleBtn{background:#17b8c2;color:#062327;border:none;font-weight:700;}
body.pos-page #scaleToggleBtn:hover{background:#12969e;}

/* ---- payment method: pill-style toggle buttons instead of plain radio
   labels, with the checked option highlighted green like the mockup ---- */
body.pos-page .payment-method{gap:6px;}
body.pos-page .payment-method label{
  flex:1;text-align:center;border:1.5px solid var(--border);border-radius:8px;
  padding:7px 4px;font-weight:700;font-size:12.5px;cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
body.pos-page .payment-method label:has(input:checked){
  border-color:var(--till-accent);background:var(--till-accent);color:#0f2415;
}
body.pos-page .payment-method input{width:auto;margin-right:5px;}