:root{
  --navy:#12263f; --navy-2:#1d3557; --green:#0f7b6c; --green-2:#0b5f54;
  --line:#e2e6ee; --bg:#f4f6fa; --text:#1e2733; --muted:#6b7787;
  --red:#b3261e; --amber:#b26a00;
  --av0:#1d3557; --av1:#0f7b6c; --av2:#b26a00; --av3:#6a3fa0; --av4:#0e7490; --av5:#a3492f;
  --card:#fff; --card-2:#fbfcfe; --input-bg:#fff; --input-border:#ccd3de;
  --table-head:#f3f6fa; --hover-bg:#f0f4f8; --shadow:rgba(18,38,63,.08);
  --alert-ok-bg:#e8f5f1; --alert-ok-line:#9fd3c7; --alert-ok-text:#0b5f54;
  --alert-err-bg:#fdecea; --alert-err-line:#f2b8b5; --alert-err-text:#8f1e18;
  --badge-draft-bg:#eef0f4; --badge-draft-text:#54606f;
  --badge-sub-bg:#fff3e0; --badge-app-bg:#e8f5f1;
}
html[data-theme="dark"]{
  --line:#2a3140; --bg:#10141b; --text:#dde2ea; --muted:#8b93a3;
  --card:#1a212c; --card-2:#20283440; --input-bg:#1c232f; --input-border:#3a4356;
  --table-head:#20283a; --hover-bg:#232b3a; --shadow:rgba(0,0,0,.4);
  --alert-ok-bg:#123a34; --alert-ok-line:#1c5f52; --alert-ok-text:#7fd9c6;
  --alert-err-bg:#3a1a18; --alert-err-line:#6e2b26; --alert-err-text:#f2a9a2;
  --badge-draft-bg:#2a3140; --badge-draft-text:#c3cad6;
  --badge-sub-bg:#40320f; --badge-app-bg:#123a34;
  --navy:#0b1520; --navy-2:#16273e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:14px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}

/* ---------- chrome ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  background:var(--navy);color:#fff;padding:10px 18px}
.brand{font-weight:600;letter-spacing:.3px}
.logo{display:inline-block;background:var(--green);border-radius:5px;
  padding:3px 8px;font-weight:700;margin-right:6px}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px}
.chip{background:rgba(255,255,255,.16);border-radius:20px;padding:2px 10px;font-size:12px}

.topnav{background:var(--navy-2);border-bottom:1px solid rgba(255,255,255,.08)}
.topnav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:4px 14px}
.topnav-label{color:rgba(255,255,255,.55);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;padding-right:12px;flex-shrink:0}
.topnav-item{display:inline-flex;align-items:center;gap:7px;padding:11px 14px;color:rgba(255,255,255,.85);
  font-size:13px;border-bottom:3px solid transparent;flex-shrink:0;background:transparent;border-top:0;
  border-left:0;border-right:0;cursor:pointer;font-family:inherit}
.topnav-item:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.06)}
.topnav-item.active{color:#fff;border-bottom-color:var(--green);font-weight:600;background:rgba(255,255,255,.05)}
.topnav-item-accent{color:#ffb648;font-weight:700}
.topnav-item-accent:hover{color:#ffc773}
.topnav-item-accent.active{border-bottom-color:#ffb648}
.nav-icon{width:17px;height:17px;flex-shrink:0}
.topnav-more-wrap{position:relative;flex-shrink:0}
.topnav-dropdown{display:none;position:absolute;top:100%;left:0;z-index:80;min-width:230px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:6px;margin-top:2px}
.topnav-dropdown.open{display:block}
.topnav-dropdown-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:6px;
  color:var(--text);font-size:13px}
.topnav-dropdown-item:hover{background:var(--hover-bg);text-decoration:none}
.topnav-dropdown-item.active{background:var(--alert-ok-bg);color:var(--green-2);font-weight:600}
.topnav-dropdown-item .nav-icon{color:var(--muted)}

.shell{min-height:calc(100vh - 138px)}
.main{padding:12px 24px 32px;min-width:0}
.pagehead{margin-bottom:10px}
.pagehead .sub{margin:4px 0 0;color:var(--muted)}
.footer{background:var(--card);border-top:1px solid var(--line);padding:10px 18px;
  font-size:12px;color:var(--muted);text-align:center}

/* ---------- cards & grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:18px;margin-bottom:18px}
.grid{display:flex;flex-wrap:wrap;gap:16px}
.col{flex:1 1 320px;min-width:300px}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.stat{flex:1 1 200px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:14px 16px}
.stat .label{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.stat .value{font-size:22px;font-weight:700;margin-top:4px}
.stat .value.red{color:var(--red)} .stat .value.green{color:var(--green)} .stat .value.amber{color:var(--amber)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
th{background:var(--table-head);font-weight:600}
tbody tr:nth-child(even){background:var(--card-2)}
td.num,th.num{text-align:right;white-space:nowrap}
tfoot td{font-weight:700;background:var(--table-head)}
.table-wrap{overflow-x:auto}

/* ---------- forms ---------- */
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=email],select,textarea{
  width:100%;padding:7px 9px;border:1px solid var(--input-border);border-radius:5px;
  font-family:inherit;font-size:13px;background:var(--input-bg);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid #cfe6e1;border-color:var(--green)}
textarea{min-height:90px;resize:vertical}
.formrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.f{flex:1 1 180px;min-width:150px}
.f-sm{flex:0 1 110px}
.f-full{flex:1 1 100%}
.inline-form{display:inline}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:0;border-radius:5px;padding:8px 14px;
  background:var(--green);color:#fff;font-size:13px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--green-2);text-decoration:none;color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-dark{background:var(--navy-2)} .btn-dark:hover{background:var(--navy)}
.btn-danger{background:var(--red)} .btn-danger:hover{background:#8f1e18}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-out{background:var(--card);color:var(--navy-2);border:1px solid var(--input-border)}
.btn-out:hover{background:var(--hover-bg);color:var(--navy)}
.btn-lg{padding:14px 22px;font-size:16px;font-weight:700;border-radius:8px}
.btn-warning{background:#c8720f} .btn-warning:hover{background:#a55f0c}
.btn-info{background:#4aa8e0;color:#fff} .btn-info:hover{background:#3690c7}
.btn-purple{background:#6c5ce7;color:#fff} .btn-purple:hover{background:#584bc9}
.btn-teal{background:#149c8a;color:#fff} .btn-teal:hover{background:#0f7d6e}
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- misc ---------- */
.alert{border-radius:6px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.alert-ok{background:var(--alert-ok-bg);border:1px solid var(--alert-ok-line);color:var(--alert-ok-text)}
.alert-error{background:var(--alert-err-bg);border:1px solid var(--alert-err-line);color:var(--alert-err-text)}
.badge{display:inline-block;border-radius:20px;padding:2px 10px;font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.badge-draft{background:var(--badge-draft-bg);color:var(--badge-draft-text)}
.badge-submitted{background:var(--badge-sub-bg);color:var(--amber)}
.badge-approved{background:var(--badge-app-bg);color:var(--green-2)}
.muted{color:var(--muted)}
.right{text-align:right}
.pos{color:var(--green-2);font-weight:600}
.neg{color:var(--red);font-weight:600}
.green{color:var(--green)}
.red{color:var(--red)}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text)}
.tab.active{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
.section-anchor{scroll-margin-top:20px}

/* ---------- weekly route calendar ---------- */
.week-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.day-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--card-2);min-height:70px}
.day-card.today{border-color:var(--green);background:var(--alert-ok-bg);box-shadow:0 0 0 1px var(--green)}
.day-card-head{display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:13px;letter-spacing:.2px}
.route-chip{margin-top:8px;padding:6px 0;border-top:1px dashed var(--line);font-size:12px;
  display:flex;flex-direction:column;gap:1px}
.route-chip:first-of-type{border-top:none;margin-top:6px}
.route-chip strong{font-size:13px;color:var(--navy-2)}
tr.today-row{background:var(--alert-ok-bg)}

/* ---------- price list ---------- */
.price-search-card{position:sticky;top:0;z-index:5;padding:12px 16px}
.price-search{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;box-sizing:border-box}
.price-search:focus{outline:2px solid var(--navy-2);outline-offset:1px}
.price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-top:14px}
.price-card{border:1px solid var(--line);border-radius:10px;padding:16px 12px 14px;text-align:center;
  background:var(--card);box-shadow:0 1px 2px var(--shadow);display:flex;flex-direction:column;align-items:center}
.price-card-avatar{width:56px;height:56px;border-radius:50%;color:#fff;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;letter-spacing:.3px}
.price-card-name{font-weight:700;font-size:13px;line-height:1.3;min-height:34px}
.price-card-price{color:var(--navy-2);font-weight:700;font-size:17px;margin-top:8px}
.price-card-tag{margin-top:10px;width:100%;padding:6px 4px;border-radius:20px;color:#fff;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.avatar-0,.tag-0{background:var(--av0)} .avatar-1,.tag-1{background:var(--av1)}
.avatar-2,.tag-2{background:var(--av2)} .avatar-3,.tag-3{background:var(--av3)}
.avatar-4,.tag-4{background:var(--av4)} .avatar-5,.tag-5{background:var(--av5)}
@media (max-width:480px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- POS entry screen ---------- */
.pos-table td,.pos-table th{padding:4px 6px}
.pos-table input{width:100%;border:1px solid var(--line);border-radius:4px;
  padding:6px 7px;font-size:13px;box-sizing:border-box;background:var(--input-bg);color:var(--text)}
.pos-table input:disabled{background:var(--table-head);color:var(--muted)}
.pos-table .ln-total{font-weight:600;white-space:nowrap}
.pos-table tr.selected{box-shadow:inset 3px 0 0 var(--green);background:var(--alert-ok-bg)}
#changeDue{font-weight:700;color:var(--green-2)}

/* ---------- 80mm thermal receipt ---------- */
.receipt-thermal{width:76mm;margin:0 auto;background:#fff;padding:6mm 3mm;
  font-family:"Consolas","Courier New",monospace;font-size:11.5px;line-height:1.5;color:#000}
.rt-center{text-align:center}
.rt-bold{font-weight:700}
.rt-big{font-size:14px}
.rt-hr{border-top:1px dashed #000;margin:6px 0}
.rt-item-name{font-weight:600;margin-top:4px}
.rt-item-line{display:flex;justify-content:space-between;gap:8px}
.rt-item-note{padding-left:8px;color:#333;font-size:10.5px}
.rt-items{width:100%;border-collapse:collapse;font-size:11px}
.rt-items th{text-align:left;font-weight:700;border-bottom:1px solid #000;padding:2px 2px 4px}
.rt-items td{padding:3px 2px;vertical-align:top;word-break:break-word}
.rt-items th.num,.rt-items td.num{text-align:right;white-space:nowrap}
.rt-totals-line{display:flex;justify-content:space-between;gap:8px}
.rt-muted{color:#555;font-size:10px;margin-top:8px}
.doc-a5{max-width:148mm;font-size:12px}
@media print{
  .receipt-thermal{width:100%;padding:0}
}
.login-wrap{max-width:380px;margin:8vh auto}
.login-wrap .card{padding:26px}
body.login-body{background:#0a1220;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.hint{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- printed report ---------- */
.doc{background:#fff;max-width:210mm;margin:0 auto;padding:18mm 16mm;
  border:1px solid var(--line);font-size:13px;color:#000}
.doc h1{text-align:center;font-size:18px;margin-bottom:2px}
.doc h2{font-size:15px;margin:22px 0 8px;border-bottom:1px solid #888;padding-bottom:3px}
.doc .center{text-align:center}
.doc table{font-size:12px;margin-bottom:10px}
.doc th,.doc td{border:1px solid #666}
.sign{display:flex;justify-content:space-between;margin-top:46px;font-size:13px}
.sign div{width:45%}
.sign .line{border-bottom:1px dotted #000;height:26px;margin-bottom:4px}

@media print{
  body{background:#fff}
  .no-print,.topbar,.topnav,.footer{display:none !important}
  .main{padding:0}
  .doc{border:0;max-width:none;padding:0;margin:0}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
}
@media (max-width:820px){
  .topnav-label{display:none}
  .topnav-item span{display:none}
  .topnav-item{padding:11px 12px}
  .topnav-dropdown-item span{display:inline}
}

/* ---------- hub (system picker) ---------- */
.hub-wrap{max-width:760px;margin:8vh auto 0;padding:0 20px}
.hub-title{text-align:center;margin-bottom:36px}
.hub-title h1{font-size:26px}
.hub-title p{color:var(--muted);margin-top:6px}
.hub-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.hub-btn{flex:1 1 200px;max-width:240px;min-height:100px;display:flex;align-items:center;justify-content:flex-start;
  gap:12px;text-align:left;background:var(--navy-2);color:#fff;border-radius:12px;border:1px solid var(--navy);
  font-size:17px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hub-btn:hover{background:var(--navy);text-decoration:none;color:#fff}
.hub-btn.disabled{background:#c7ccd6;border-color:#c7ccd6;color:#fff;cursor:not-allowed;pointer-events:none}
.hub-btn .hub-sub{display:block;font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;
  margin-top:4px;opacity:.85}
.hub-btn-icon{width:30px;height:30px;flex:0 0 auto;opacity:.9}
body.hub-body .pagehead{display:none}

/* ---------- Touch POS kiosk mode: no brand bar, no system nav tabs ---------- */
body.touch-pos-body .topbar,
body.touch-pos-body .topnav{display:none}
body.touch-pos-body .shell{min-height:100vh}
body.touch-pos-body .main{padding-top:14px}
.hub-price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.hub-price-btn{display:inline-block;background:#e0930f;color:#fff;font-weight:800;font-size:18px;
  letter-spacing:.5px;padding:20px 34px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.hub-price-btn:hover{background:#c77e0a;color:#fff;text-decoration:none}
.hub-price-mobile-link{display:inline-block;background:var(--navy-2);color:#fff;font-weight:700;
  font-size:13px;padding:12px 20px;border-radius:8px}
.hub-price-mobile-link:hover{background:var(--navy);color:#fff;text-decoration:none}
body.hub-body .main{padding-top:40px}

/* ---------- POS payment screen (F2) ---------- */
.pay-overlay{position:fixed;inset:0;background:rgba(10,14,20,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px}
.pay-modal{background:var(--card);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  width:100%;max-width:760px;overflow:hidden;display:flex;flex-direction:column}
.pay-total{background:#0b0f14;color:#39e075;font-weight:700;font-size:30px;text-align:right;
  padding:14px 20px;font-family:"Consolas","Courier New",monospace}
.pay-body{display:flex;flex-wrap:wrap;gap:0}
.pay-rows{flex:1 1 260px;max-height:340px;overflow-y:auto;border-right:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;align-content:start}
.pay-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--card-2);cursor:pointer}
.pay-row:hover{border-color:var(--green)}
.pay-row.active{background:var(--alert-ok-bg);border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.pay-row-label{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.3px}
.pay-row-amount{width:100%;text-align:right;border:1.5px solid var(--input-border);border-radius:5px;
  padding:8px 10px;font-size:22px;font-weight:800;background:var(--input-bg);color:var(--text);
  font-family:"Consolas","Courier New",monospace}
.pay-keypad{flex:1 1 300px;padding:12px;display:flex;flex-direction:column;gap:10px}
.pay-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.key{padding:16px 4px;font-size:16px;font-weight:600;border:1px solid var(--input-border);
  border-radius:8px;background:var(--card-2);color:var(--text);cursor:pointer}
.key:active{transform:scale(.96)}
.key-wide{grid-column:span 1;background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
.key-cancel{background:var(--red);color:#fff;border-color:var(--red)}
.key-quick{background:var(--green);color:#fff;border-color:var(--green);font-size:13px}
.pay-quick-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.pay-quick-row .key-quick{padding:12px 2px;font-size:12.5px;font-weight:700}
.pay-actionbtns{display:flex;gap:8px}
.pay-change{padding:16px 20px;text-align:center;font-size:22px;font-weight:700;color:#fff;background:var(--red)}
.pay-change.pay-change-ok{background:var(--green-2)}
@media (max-width:560px){
  .pay-total{font-size:24px}
  .pay-rows{grid-template-columns:1fr}
  .key{padding:14px 2px;font-size:15px}
  .pay-quick-row{grid-template-columns:repeat(3,1fr)}
}

/* ---------- modern receipt template variant ---------- */
.rt-modern.receipt-thermal{border-top:3px solid #0f7b6c}
.rt-modern .rt-center.rt-bold.rt-big{letter-spacing:.5px;text-transform:uppercase}
.rt-modern .rt-hr{border-top:1px solid #0f7b6c;opacity:.4}
.doc-modern{border-top:6px solid #0f7b6c}
.doc-modern h1{color:#0f7b6c;letter-spacing:.5px}
.doc-modern h2{border-bottom:2px solid #0f7b6c}
.doc-modern th{background:#eaf5f2}

/* ---------- POS item search dropdown ---------- */
.item-search-wrap{position:relative}
.item-suggest-list{position:fixed;z-index:150;background:var(--card);
  border:1px solid var(--input-border);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  max-height:340px;overflow-y:auto;display:none}
.item-suggest-list.open{display:block}
.item-suggest-row{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;
  cursor:pointer;font-size:13px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.item-suggest-row:last-child{border-bottom:0}
/* Bold brand-teal highlight (instead of the generic subtle --hover-bg) so the row you're on
   while scrolling or arrow-keying through the list is unmistakable at a glance. */
.item-suggest-row:hover,.item-suggest-row.hi{background:var(--green);border-left-color:var(--green-2)}
.item-suggest-row:hover .item-suggest-name,.item-suggest-row.hi .item-suggest-name{color:#fff}
.item-suggest-row:hover .item-suggest-price,.item-suggest-row.hi .item-suggest-price{color:#fff}
.item-suggest-row:hover .item-suggest-qty.stock-pos,.item-suggest-row.hi .item-suggest-qty.stock-pos{color:#baffde}
.item-suggest-row:hover .item-suggest-qty.stock-neg,.item-suggest-row.hi .item-suggest-qty.stock-neg{color:#ffd0cb}
.item-suggest-name{font-weight:600;color:var(--text)}
.item-suggest-meta{display:flex;align-items:center;gap:10px;white-space:nowrap}
.item-suggest-qty{font-size:12px;font-weight:600}
.item-suggest-qty.stock-pos{color:var(--green-2)}
.item-suggest-qty.stock-neg{color:var(--red)}
html[data-theme="dark"] .item-suggest-qty.stock-pos{color:#39e075}
.item-suggest-price{font-weight:700;font-size:15px;color:var(--text)}
.item-suggest-empty{padding:8px 10px;font-size:13px;color:var(--muted)}
.ln-name.invalid{border-color:var(--red);background:var(--alert-err-bg)}
.ln-price.low-price{border-color:var(--amber);background:#40320f22}

/* ---------- held sales ---------- */
.held-overlay{position:fixed;inset:0;background:rgba(10,14,20,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px}
.held-modal{background:var(--card);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  width:100%;max-width:560px;max-height:80vh;overflow-y:auto;padding:18px}

/* ---------- POS item list: fixed-height, internal scroll ---------- */
.pos-items-scroll{max-height:380px;overflow-y:auto;border:1px solid var(--line);border-radius:6px}
.pos-items-scroll table{border:0}
.pos-items-scroll thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
.pos-items-scroll tfoot td{position:sticky;bottom:0;z-index:2;box-shadow:0 -1px 0 var(--line)}
.pos-total-row td{font-size:20px;padding-top:10px;padding-bottom:10px}
.pos-total-value{font-size:22px;font-weight:800;color:var(--green-2)}
html[data-theme="dark"] .pos-total-value{color:#39e075}

/* ---------- flash toasts ---------- */
.toast-stack{position:fixed;top:70px;right:16px;z-index:200;display:flex;flex-direction:column;
  gap:8px;max-width:340px}
.toast{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);font-size:13px;color:#fff;
  animation:toast-in .25s ease-out}
.toast-ok{background:var(--green-2)}
.toast-error{background:var(--red)}
.toast span{flex:1}
.toast-close{background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer;
  line-height:1;opacity:.85;padding:0}
.toast-close:hover{opacity:1}
.toast-out{animation:toast-out .3s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}
@media (max-width:560px){.toast-stack{left:12px;right:12px;max-width:none;top:64px}}

/* ---------- per-user font size (Users & Rights) ---------- */
/* `zoom` (not standard CSS, but supported by Chrome/Edge/Safari — the browsers this system is
   normally run on) scales the whole page uniformly, since most of this stylesheet uses fixed px
   sizes rather than rem. Firefox ignores it gracefully and just shows the normal size. */
body.fs-small{zoom:0.9}
body.fs-large{zoom:1.15}
body.fs-xlarge{zoom:1.3}

/* ---------- inline flash pills (e.g. POS action bar) ---------- */
.flash-pill{display:inline-block;padding:8px 14px;border-radius:6px;font-size:12.5px;
  border:1px solid var(--alert-ok-line)}
.flash-pill-ok{background:var(--alert-ok-bg);color:var(--alert-ok-text);border-color:var(--alert-ok-line)}
.flash-pill-error{background:var(--alert-err-bg);color:var(--alert-err-text);border-color:var(--alert-err-line)}

/* ---------- POS totals panel (sits below the item table, never overlaps it) ---------- */
.pos-below-table{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;
  justify-content:space-between;margin-top:10px}
.pos-totals-float{width:300px;max-width:100%;margin-left:auto;
  border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pos-totals-line{display:flex;justify-content:space-between;align-items:center;
  background:#0b0f14;color:#fff;padding:9px 16px;font-size:14px;font-weight:600}
.pos-totals-total{display:flex;justify-content:space-between;align-items:center;
  background:var(--green);color:#fff;padding:12px 16px;font-size:20px;font-weight:800}
@media (max-width:700px){
  .pos-totals-float{width:100%}
}

/* ---------- POS "New Sale" screen — visual redesign (no functional change) ---------- */
.pos-store-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.pos-store-name{display:flex;align-items:center;gap:8px;color:var(--text)}
.pos-store-name .nav-icon{width:18px;height:18px;color:var(--green-2)}
.pos-meta-section{background:var(--card-2);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px 4px;margin-bottom:18px}
.pos-items-section{margin-bottom:8px}
.pos-items-section .pos-table thead th{background:var(--navy-2);color:#fff;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;font-weight:700}
.pos-items-section .pos-items-scroll{border-radius:8px;overflow-y:auto;overflow-x:hidden;border-color:var(--line)}
.pos-add-line{margin-top:10px}
.pos-action-bar{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pos-action-bar .btn .nav-icon{width:16px;height:16px;vertical-align:-3px;margin-right:2px}

.pos-grid{display:flex;gap:20px;align-items:flex-start}
.pos-main-col{flex:1;min-width:0}
.pos-side-col{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.pos-summary-panel{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:4px}
.pos-summary-header{background:var(--navy-2);color:#fff;font-weight:700;padding:10px 14px;font-size:14px}
.pos-summary-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.pos-summary-value{background:var(--table-head);color:var(--text);font-weight:600;
  padding:4px 10px;border-radius:4px;min-width:70px;text-align:right}
.pos-summary-total{display:flex;justify-content:space-between;align-items:center;
  padding:14px;background:var(--card-2);font-size:22px;font-weight:800;color:var(--green-2)}
.pos-side-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;font-size:14px}
.pos-stacked-btns{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
.pos-stacked-btns .pos-side-btn{padding:8px 12px;font-size:12.5px;width:auto}
.pos-pay-btn{margin-top:10px;padding:18px 10px;font-size:18px}
@media (max-width:900px){
  .pos-grid{flex-direction:column}
  .pos-side-col{width:100%}
}
@media (min-width:901px){
  .pos-action-bar{position:sticky;bottom:0;background:var(--card);z-index:10;padding-bottom:6px}
}

/* ---------- store hero banner ---------- */
.store-hero{text-align:center;font-size:32px;font-weight:800;color:var(--navy-2);
  letter-spacing:.3px;margin:-4px 0 10px}

/* ---------- help text visibility control ---------- */
/* .hint is already the app's instructional/help-text class everywhere it's used;
   .help-text/.instructional-text are accepted as aliases for the same behavior. */
html[data-help-hidden] .hint,
html[data-help-hidden] .help-text,
html[data-help-hidden] .instructional-text{display:none !important}
#helpToggle{font-weight:800}

/* ---------- FDN import & product matching (Purchases) ---------- */
.fdn-item-row.fdn-unmatched{background:#f9d9d5}
.fdn-item-row.fdn-matched{background:#dcefe3}
.fdn-my-product.invalid{border-color:var(--red)}

/* ---------- vertical form fields (Route Collections 3-column layout) ---------- */
.card > .f, .rc-line .f, .dr-line .f{margin-bottom:10px;flex:none;min-width:0}

/* =====================================================================
   CLAYMORPHISM UI THEME (optional, selectable in Settings -> System
   Setup -> General Settings; off by default).
   -----------------------------------------------------------------
   Turned on by the server-wide `ui_style` setting, applied as
   html[data-ui="clay"] by includes/layout.php's page_header(). Claymorphism
   is a soft, "molded from clay" look: big rounded corners, a puffy/inflated
   3D feel from a paired light+dark soft shadow (light top-left, dark
   bottom-right), and no hard 1px borders. It layers onto the existing
   light/dark variables above rather than replacing them, so dark mode and
   Clay can be on together.

   Deliberately NOT applied to: data tables (th/td), the Doc/Receipt/Report
   print layouts (.doc, .receipt-thermal, .rt-items, and anything under
   @media print) or the Touch POS keypad grid. Those need to stay dense,
   flat and ink-cheap to print — a puffy shadow on every cell of a 50-row
   report would make it harder to read and scan, not nicer, and some
   thermal printers render box-shadow/gradients as solid black blocks.
   Clay is for the "chrome" around the content: page background, cards,
   buttons, inputs, badges, alerts and the home screen's module tiles.
   ===================================================================== */
html[data-ui="clay"]{
  --clay-radius:20px;
  --clay-radius-sm:14px;
  --clay-shadow-dark:rgba(138,152,178,.45);
  --clay-shadow-light:rgba(255,255,255,.85);
  --clay-bg:#e8ecf7;
  --clay-card:#f3f5fc;
  --clay-accent:#6a5bcd;
  --clay-accent-2:#584bb8;
}
html[data-theme="dark"][data-ui="clay"]{
  --clay-shadow-dark:rgba(0,0,0,.55);
  --clay-shadow-light:rgba(255,255,255,.05);
  --clay-bg:#171b2a;
  --clay-card:#20253a;
  --clay-accent:#8b7ff0;
  --clay-accent-2:#7366e0;
}
html[data-ui="clay"] body{background:var(--clay-bg)}

/* Chrome: topbar keeps its navy, just gets a soft puffy bottom edge instead
   of a hard line. */
html[data-ui="clay"] .topbar{box-shadow:0 8px 20px var(--clay-shadow-dark);
  border-radius:0 0 var(--clay-radius) var(--clay-radius)}
html[data-ui="clay"] .topnav{box-shadow:0 6px 14px var(--clay-shadow-dark)}
html[data-ui="clay"] .userbox .btn-ghost,
html[data-ui="clay"] #helpToggle,
html[data-ui="clay"] #themeToggle{border-radius:50%}

/* Cards, stat tiles, alerts, badges: big radius, no hairline border, a
   soft dual shadow that reads as "raised off the page". */
html[data-ui="clay"] .card,
html[data-ui="clay"] .stat{
  background:var(--clay-card);border:0;border-radius:var(--clay-radius);
  box-shadow:9px 9px 18px var(--clay-shadow-dark),-7px -7px 16px var(--clay-shadow-light);
}
html[data-ui="clay"] .alert{border:0;border-radius:var(--clay-radius-sm);
  box-shadow:5px 5px 12px var(--clay-shadow-dark),-4px -4px 10px var(--clay-shadow-light)}
html[data-ui="clay"] .badge{box-shadow:2px 2px 5px var(--clay-shadow-dark)}

/* Buttons: chunky, puffy, and visibly "pressed into the clay" on click —
   the inset shadow on :active is what sells the material. */
html[data-ui="clay"] .btn{border-radius:var(--clay-radius-sm);
  box-shadow:4px 4px 10px var(--clay-shadow-dark),-3px -3px 8px var(--clay-shadow-light);
  transition:transform .08s ease,box-shadow .08s ease}
html[data-ui="clay"] .btn:hover{transform:translateY(-1px)}
html[data-ui="clay"] .btn:active{transform:translateY(1px);
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.25),inset -2px -2px 5px var(--clay-shadow-light)}
html[data-ui="clay"] .btn-lg{border-radius:var(--clay-radius)}
html[data-ui="clay"] .btn-out{background:var(--clay-card)}

/* Inputs: instead of a flat bordered box, an inset "pressed into the
   surface" look — the opposite shadow direction from cards/buttons, which
   is what makes a field read as a hole rather than a raised tile. */
html[data-ui="clay"] input[type=text],html[data-ui="clay"] input[type=password],
html[data-ui="clay"] input[type=number],html[data-ui="clay"] input[type=date],
html[data-ui="clay"] input[type=email],html[data-ui="clay"] select,
html[data-ui="clay"] textarea{
  border:0;border-radius:var(--clay-radius-sm);background:var(--clay-bg);
  box-shadow:inset 3px 3px 7px var(--clay-shadow-dark),inset -3px -3px 7px var(--clay-shadow-light)}
html[data-ui="clay"] input:focus,html[data-ui="clay"] select:focus,html[data-ui="clay"] textarea:focus{
  outline:2px solid var(--clay-accent)}

/* Home screen module tiles are the single best showcase for this look —
   big, colorful, puffy "buttons you could press". */
html[data-ui="clay"] .hub-btn{border:0;border-radius:var(--clay-radius);
  background:linear-gradient(145deg,var(--clay-accent),var(--clay-accent-2));
  box-shadow:10px 10px 20px var(--clay-shadow-dark),-8px -8px 18px var(--clay-shadow-light)}
html[data-ui="clay"] .hub-btn:hover{transform:translateY(-2px)}
html[data-ui="clay"] .hub-btn.disabled{background:#b7bdcc;box-shadow:none}
html[data-ui="clay"] .hub-price-btn{border-radius:var(--clay-radius-sm);
  box-shadow:6px 6px 14px var(--clay-shadow-dark),-5px -5px 12px var(--clay-shadow-light)}

/* Never let Clay reach anything meant to print or stay dense/scannable. */
html[data-ui="clay"] table,html[data-ui="clay"] th,html[data-ui="clay"] td,
html[data-ui="clay"] .doc,html[data-ui="clay"] .doc *,
html[data-ui="clay"] .receipt-thermal,html[data-ui="clay"] .receipt-thermal *,
html[data-ui="clay"] .rt-items,html[data-ui="clay"] .rt-items *,
html[data-ui="clay"] .touch-pos-body *{
  box-shadow:none !important;border-radius:0 !important;background-image:none !important}
@media print{
  html[data-ui="clay"] *{box-shadow:none !important;border-radius:0 !important;
    background:#fff !important;background-image:none !important}
}

/* ---- busy.js: "working…" screen + step-by-step progress ---- */
.rb-overlay{position:fixed;inset:0;z-index:99999;background:rgba(10,20,30,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.rb-box{background:var(--card,#fff);color:var(--text,#222);border:1px solid var(--line,#ddd);border-radius:14px;padding:26px 30px;max-width:460px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.rb-spin{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;border:5px solid var(--line,#ddd);border-top-color:var(--green,#1b8a5a);animation:rbspin .8s linear infinite}
@keyframes rbspin{to{transform:rotate(360deg)}}
.rb-title{font-weight:700;font-size:17px;margin-bottom:6px;word-break:break-word}
.rb-sub{color:var(--muted,#667);font-size:13px;margin-bottom:10px}
.rb-time{font-size:14px}
.rp-panel{margin-top:14px;padding:14px;border:1px solid var(--line,#ddd);border-radius:10px;background:var(--card,#fff)}
.rp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rp-status{font-size:15px;word-break:break-word}
.rp-bar{height:26px;border-radius:13px;background:var(--hover-bg,#eef);border:1px solid var(--line,#ddd);overflow:hidden;position:relative}
.rp-bar>i{display:block;height:100%;width:0;background:var(--green,#1b8a5a);transition:width .25s ease}
.rp-bar>b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px}
.rp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.rp-tile{background:var(--card-2,#f7f7f7);border:1px solid var(--line,#ddd);border-radius:10px;padding:8px 6px;text-align:center}
.rp-tile b{display:block;font-size:22px;line-height:1.15}.rp-tile span{font-size:12px;color:var(--muted,#667)}
.rp-tile.ok b{color:var(--green,#1b8a5a)}.rp-tile.bad b{color:var(--red,#c0392b)}
.rp-meta{font-size:13px;color:var(--muted,#667);margin-bottom:8px}
.rp-log{max-height:280px;overflow:auto;border:1px solid var(--line,#ddd);border-radius:8px;background:var(--card-2,#f7f7f7);font-size:13px}
.rp-log div{padding:5px 10px;border-bottom:1px solid var(--line,#ddd);display:flex;gap:8px;align-items:baseline}
.rp-log div:last-child{border-bottom:0}
.rp-log small{color:var(--muted,#667);word-break:break-word}
.rp-ok{color:var(--green,#1b8a5a);font-weight:700}.rp-fail{color:var(--red,#c0392b);font-weight:700}.rp-skip{color:var(--muted,#667);font-weight:700}
@media(max-width:560px){.rp-tiles{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   MOBILE / PHONE LAYER  (added last so it overrides the desktop rules)
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}
.rm-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.rm-tw>table{min-width:100%}

@media (max-width:820px){
  body{overflow-x:hidden}
  .topbar{flex-wrap:wrap;gap:6px;padding:8px 12px}
  .userbox{flex-wrap:wrap;gap:6px;font-size:12px;justify-content:flex-end}
  .userbox .uname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topnav-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 6px;
    scrollbar-width:none}
  .topnav-inner::-webkit-scrollbar{display:none}
  .topnav-item{padding:12px 13px;min-height:44px}
  .topnav-item span{display:inline;white-space:nowrap}
  .topnav-item{gap:6px;font-size:12.5px}
  .topnav-dropdown-item span{display:inline}
  .main{padding:10px 12px 28px}
  .card{padding:12px;margin-bottom:12px}
  .pagehead h1{font-size:19px}
  .footer{padding:10px 12px}
  .col,.touch-cart-col{flex:1 1 100%;min-width:0;max-width:none}
  .grid{gap:12px}
  .stats{gap:10px}
  .stat{flex:1 1 calc(50% - 10px);min-width:0;padding:10px 12px}
  .stat .value{font-size:18px;word-break:break-word}
  .formrow{gap:10px}
  .f{flex:1 1 100%;min-width:0}
  .f-sm{flex:1 1 calc(50% - 10px);min-width:0}
  .hub-btn{max-width:none}
  .pos-grid{gap:12px}
  .pos-main-col{width:100%}
  .pos-meta-section{padding:10px 10px 2px}
  .pos-store-bar{flex-wrap:wrap}
  .topnav-dropdown{position:fixed;left:8px;right:8px;top:auto;min-width:0;max-height:70vh;overflow-y:auto}
}

@media (max-width:600px){
  /* 16px inputs stop iOS from zooming the page on focus; bigger touch targets */
  input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],
  input[type=tel],input[type=search],input[type=time],input[type=datetime-local],select,textarea{
    font-size:16px;padding:9px 10px;min-height:42px}
  .btn{padding:10px 14px;min-height:40px;font-size:14px}
  .btn-sm{padding:8px 11px;min-height:36px}
  .brand{font-size:14px}
  .userbox .chip{display:none}
  .userbox .btn-ghost{padding:6px 9px;font-size:12px;min-height:34px}
  table{font-size:12.5px}
  th,td{padding:6px 7px}
  .pagehead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
  .pagehead .sub{flex:1 1 100%}
  .rp-tiles{grid-template-columns:repeat(2,1fr)}
  .actions,.btn-row,.toolbar,.filters,.filter-row{flex-wrap:wrap}
  form.inline-form{display:inline-block}
  /* modals/overlays become near full-screen sheets */
  .held-modal,.pay-modal,.rb-box,[class*="modal"]>div,.pay-overlay>div{
    max-width:100%!important;max-height:92vh;overflow-y:auto}
  .rb-box{padding:18px 16px;width:calc(100% - 24px)}
  .toast-stack{left:8px;right:8px}
  .login-wrap{margin:4vh 12px;max-width:none}
}

/* print and desktop untouched; very small phones */
@media (max-width:380px){
  .main{padding:8px 8px 24px}
  .topnav-item{padding:12px 10px}
  h1{font-size:17px}
}

/* ---------- coloured "outline" buttons: no more plain white buttons ----------
   .btn-out used to be white. It is now a soft blue by default, and mobile.js tints it by what the
   button does (green = add/save, red = delete, amber = edit, teal = sync/test, grey = cancel/back). */
.btn-out{background:#e3eefb;color:#164a8a;border:1px solid #9bbfe8;font-weight:600}
.btn-out:hover{background:#cfe2f8;color:#0f3a70;border-color:#7fa9db}
.btn-out.c-green{background:#e1f4ee;color:#0b5f54;border-color:#8fcfc0}
.btn-out.c-green:hover{background:#cbebe2;color:#084a41;border-color:#6dbdac}
.btn-out.c-red{background:#fdeaea;color:#a3231d;border-color:#f0b0ac}
.btn-out.c-red:hover{background:#f9d6d4;color:#82190f;border-color:#e58f8a}
.btn-out.c-amber{background:#fff1dc;color:#8a4d00;border-color:#efc687}
.btn-out.c-amber:hover{background:#fde5be;color:#6e3d00;border-color:#e4b05f}
.btn-out.c-teal{background:#dff4f6;color:#0b5c68;border-color:#8ccdd5}
.btn-out.c-teal:hover{background:#c8ebee;color:#084a54;border-color:#68bcc6}
.btn-out.c-grey{background:#e9edf3;color:#3b475a;border-color:#b9c3d1}
.btn-out.c-grey:hover{background:#dbe1ea;color:#2a3444;border-color:#9eabbd}
.btn-out.c-purple{background:#ece9fb;color:#4a3bb0;border-color:#bdb4ee}
.btn-out.c-purple:hover{background:#ded9f7;color:#392c92;border-color:#a398e6}
html[data-theme="dark"] .btn-out{background:#1f3350;color:#bcd7fa;border-color:#355a8c}
html[data-theme="dark"] .btn-out:hover{background:#27416a;color:#fff}
html[data-theme="dark"] .btn-out.c-green{background:#12352f;color:#8fe0cd;border-color:#1f6a5c}
html[data-theme="dark"] .btn-out.c-red{background:#3a1a18;color:#f5aaa4;border-color:#7a2e29}
html[data-theme="dark"] .btn-out.c-amber{background:#3d2e10;color:#f3c984;border-color:#7a5a1c}
html[data-theme="dark"] .btn-out.c-teal{background:#10343a;color:#8fdbe5;border-color:#21626d}
html[data-theme="dark"] .btn-out.c-grey{background:#2a3140;color:#c7cfdb;border-color:#465066}
html[data-theme="dark"] .btn-out.c-purple{background:#2b2650;color:#c9c1f5;border-color:#51489a}
/* any other bare button that would still show as white/grey-white */
button:not([class]),button[type=submit]:not([class]){background:var(--green);color:#fff;border:0;border-radius:5px;padding:8px 14px;cursor:pointer;font-family:inherit}

/* demo accounts: always-visible practice banner */
.demo-banner{background:#c8720f;color:#fff;font-weight:700;text-align:center;padding:7px 12px;font-size:13px;position:sticky;top:0;z-index:300}

@media print{html{zoom:1 !important}}

/* ---------- Till-style toolbar buttons (Touch POS + New Sale POS) ---------- */
.tp-toolbar{display:flex;gap:6px;align-items:stretch;flex:0 0 auto;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tp-toolbar::-webkit-scrollbar{display:none}
.tp-spacer{flex:1 1 auto;min-width:6px}
.tp-tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 auto;min-width:74px;padding:8px 10px;
  background:var(--navy-2);color:#fff;border:1px solid transparent;border-radius:8px;font-size:12.5px;font-weight:700;
  text-decoration:none;cursor:pointer;line-height:1.1;white-space:nowrap;font-family:inherit}
.tp-tb .nav-icon{width:26px;height:26px}
.tp-tb:hover{filter:brightness(1.1)}
.tp-tb:active{transform:scale(.97)}
.tp-tb b{font-size:24px;font-weight:800;line-height:1}
.tp-tb-key{min-width:92px}
.tp-tb-pay{min-width:110px}
.tp-tb-pay span,.tp-tb-key span{font-size:13px}
.tp-c-dark{background:var(--navy-2)}
.tp-c-danger{background:var(--red,#b3261e)}
.tp-c-warn{background:#c8720f}
.tp-c-info{background:#4aa8e0}
.tp-c-purple{background:#6c5ce7}
.tp-c-teal{background:#149c8a}
.tp-c-green{background:var(--green-2,#2e7d4f)}
@media (min-width:1500px){ .tp-tb{min-width:88px;font-size:14px;padding:10px 12px} .tp-tb .nav-icon{width:30px;height:30px} }
@media (max-width:1180px),(max-aspect-ratio:3/2){
  .tp-tb{min-width:60px;padding:6px 7px;font-size:11.5px} .tp-tb .nav-icon{width:22px;height:22px}
  .tp-tb b{font-size:20px} .tp-tb-pay{min-width:84px} .tp-tb-key{min-width:70px}
}

/* ---------- Stock Card (Item Catalogue) ---------- */
.sc-titlebar{background:#0d6e8f;color:#fff;font-weight:700;font-size:15px;padding:9px 14px;border-radius:8px 8px 0 0;display:flex;align-items:center;gap:8px}
.sc-titlebar .nav-icon{width:20px;height:20px}
.sc-tabs{display:flex;gap:2px;background:#0d6e8f;padding:8px 10px 0;flex-wrap:wrap}
.sc-tab{border:1px solid rgba(255,255,255,.25);border-bottom:0;background:#4c9db8;color:#fff;padding:8px 18px;border-radius:7px 7px 0 0;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.sc-tab.active{background:var(--card);color:var(--text)}
.grid.sc-mode{display:block;margin-bottom:16px}
.grid.sc-mode > .col{max-width:none;width:auto;margin:0 0 14px 0;border-radius:0 0 8px 8px}
.grid.sc-mode > .col.sc-hide{display:none}
.sc-card{padding:0 !important;overflow:hidden}
.sc-card form#itemMainForm{margin:0}
.sc-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;background:#0d6e8f;color:#fff;padding:14px 16px}
.sc-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative;min-width:0}
.sc-row > label{flex:0 0 108px;font-size:13.5px;font-weight:600;text-align:right;margin:0}
.sc-row > input,.sc-row > select{flex:1;min-width:0;padding:7px 9px;box-sizing:border-box}
.sc-link{color:#fff;font-weight:800;text-decoration:none;font-size:18px;padding:0 4px}
.sc-check{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}
.sc-check input{width:auto}
.sc-panel{padding:14px 16px;background:var(--card)}
.sc-panel .sc-row > label{color:var(--text);flex-basis:140px}
.sc-pricegrid{display:grid;grid-template-columns:110px repeat(3,minmax(0,1fr));gap:6px 8px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--bg)}
.sc-pg-h{text-align:center;font-size:13px;font-weight:700}
.sc-pg-label{font-size:13.5px;text-align:right;color:var(--muted);font-weight:600}
.sc-pricegrid input{text-align:right;padding:7px 9px;width:100%;box-sizing:border-box}
.sc-note{font-size:12px;color:var(--muted);margin:6px 0 10px}
.sc-twocol{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;margin-top:6px}
.sc-buttons{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--card)}
.sc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:86px;padding:10px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:6px;color:var(--text);font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;font-family:inherit}
.sc-btn .nav-icon{width:28px;height:28px}
.sc-btn:hover{border-color:#0d6e8f;background:rgba(13,110,143,.07)}
.sc-btn-save .nav-icon{color:#1565c0}
.sc-btn-close .nav-icon{color:#c62828}
.sc-btn-off{opacity:.4;pointer-events:none}
@media (max-width:760px){
  .sc-head,.sc-twocol{grid-template-columns:1fr}
  .sc-row > label{flex-basis:84px}
  .sc-pricegrid{grid-template-columns:90px repeat(3,minmax(0,1fr))}
}
.sc-head .sc-row > label,.sc-head .sc-check{color:#fff !important}
.sc-card > form[style*="margin-top"]{padding:0 16px 14px;margin-top:0 !important}

/* ---- Stock Card v2: one compact blue form, tabs on a single line, fits the screen without scrolling ---- */
.sc-titlebar{padding:7px 14px;font-size:14.5px}
.sc-titlebar .sc-now{font-weight:500;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw}
.sc-listlink{margin-left:auto;color:#fff;text-decoration:none;font-weight:600;font-size:13px;border:1px solid rgba(255,255,255,.45);border-radius:6px;padding:3px 10px}
.sc-listlink:hover{background:rgba(255,255,255,.15)}
.sc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 10px 0}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{flex:0 0 auto;white-space:nowrap;padding:7px 16px;font-size:13.5px}
.sc-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 12px;background:#0d6e8f;padding:14px 16px 16px;align-items:end}
.sc-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-f > label{color:#fff;font-size:12.5px;font-weight:600;margin:0;display:flex;align-items:center;gap:6px}
.sc-f input[type=text],.sc-f select{width:100%;box-sizing:border-box;padding:7px 9px;font-size:14px;height:34px}
.sc-f input.sc-num{text-align:right}
.sc-f input:disabled{background:#e4eef2;color:#34495e}
.sc-s3{grid-column:span 3}.sc-s4{grid-column:span 4}.sc-s6{grid-column:span 6}.sc-s8{grid-column:span 8}.sc-s9{grid-column:span 9}
.sc-plus{color:#fff;font-weight:800;text-decoration:none;background:rgba(255,255,255,.2);border-radius:4px;padding:0 6px;line-height:16px}
.sc-checkcell{justify-content:flex-end}
.sc-check{display:flex;align-items:center;gap:8px;font-weight:600;color:#fff;height:34px}
.sc-check input{width:auto;margin:0}
.sc-flash{background:#e3f4e8;color:#14532d;padding:7px 16px;font-size:13px}
.sc-buttons{padding:10px 16px;gap:8px;align-items:center}
.sc-btn{flex-direction:row;min-width:0;padding:8px 16px;gap:8px;font-size:13.5px}
.sc-btn .nav-icon{width:20px;height:20px}
.sc-noright{font-size:12px;color:var(--muted)}
#syncPriceForm{display:none}
.sc-card form#itemMainForm + form{padding:0;margin:0}
@media (max-width:820px){ .sc-body{grid-template-columns:repeat(6,minmax(0,1fr))} .sc-s3,.sc-s4{grid-column:span 3}.sc-s6,.sc-s8,.sc-s9{grid-column:span 6} }
@media (max-width:520px){ .sc-s3,.sc-s4{grid-column:span 6} }

/* Export bar added to report/history tables (assets/export.js) */
.rx-bar{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:4px 0 6px;font-size:12px;color:var(--muted,#667)}
.rx-bar button{border:1px solid #c6d0de;background:#fff;color:#1f3a5f;border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}
.rx-bar button:hover{background:#eaf1fb}