: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}