/* Retail & Wholesale POS - iPOS.NET Wazirabad */
:root {
  --brand: #17613f; --brand-d: #123524; --brand-soft: #e3f1e9; --accent: #e8a317; --accent-d: #b87c05;
  --bg: #f2f4f1; --card: #fff; --ink: #1b2620; --muted: #66756c; --line: #dfe5e0; --field: #fff;
  --ok: #17803d; --bad: #c0392b; --warn: #b8690a; --radius: 12px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
a { color: var(--brand); }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 18px; } h3 { font-size: 15px; margin-top: 14px; }
.small { font-size: 13px; } .muted { color: var(--muted); } .big { font-size: 20px; font-weight: 700; }
.spacer { flex: 1; } .right { text-align: right; } .n { text-align: right; font-variant-numeric: tabular-nums; } .mono { font-family: Consolas, monospace; }

/* layout */
.shopbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; background: var(--brand-d); color: #fff; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); }
.shopbar-logo { width: 34px; height: 34px; border-radius: 8px; }
.shopbar-t { display: flex; flex-direction: column; min-width: 0; } .shopbar-t b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shopbar-t small { color: #a9c9b6; font-size: 12px; }
.net { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; } .net.off { background: #f5a623; }
.app { display: flex; min-height: calc(calc(100vh / var(--z, 1)) - 50px); }
.sidenav { width: 210px; flex: none; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 50px; height: calc(calc(100vh / var(--z, 1)) - 50px); }
.sidenav nav { flex: 1; overflow-y: auto; padding: 8px; }
.navlink { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.navlink svg { width: 19px; height: 19px; color: var(--muted); } .navlink:hover { background: var(--bg); }
.navlink.active { background: var(--brand-soft); color: var(--brand-d); } .navlink.active svg { color: var(--brand); }
.navfoot { font-size: 11px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px 6px; }
.topbar h1 { font-size: 21px; margin: 0; flex: 1; min-width: 150px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.content { padding: 8px 20px 90px; max-width: 1400px; width: 100%; }
.bottomnav { display: none; }
body.pos-mode .content { max-width: none; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; text-decoration: none; white-space: nowrap; }
.btn svg { width: 17px; height: 17px; } .btn:hover { border-color: #c3cdc6; } .btn:focus-visible { outline: 3px solid #9fd3b5; outline-offset: 1px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: #125234; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; } .btn.bad { color: var(--bad); border-color: #efc4be; } .btn.bad.fill { background: var(--bad); color: #fff; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #231a00; } .btn.wa { background: #1faa59; border-color: #1faa59; color: #fff; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 13px; } .btn.lg { min-height: 50px; font-size: 17px; padding: 10px 20px; } .btn.xl { min-height: 56px; font-size: 19px; padding: 12px 28px; border-radius: 14px; }
.btn.ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,.35); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 6px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--field); border: 1px solid #cfd8d2; border-radius: 9px; padding: 8px 10px; min-height: 40px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #cfe8d9; }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand); }
textarea { min-height: 70px; }
.f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .f > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.f.chk { flex-direction: row; align-items: center; gap: 8px; } .f.chk span, .f.chk { color: var(--ink); font-weight: 500; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 12px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #eef1ee; color: var(--muted); }
.badge.ok { background: #dff3e6; color: var(--ok); } .badge.bad { background: #fbe3e0; color: var(--bad); } .badge.warn { background: #fdefd6; color: var(--warn); } .badge.info { background: #e1ecfb; color: #2459a8; }
.seg { display: inline-flex; background: #e8ece9; border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--brand-d); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .lbl { font-size: 13px; color: var(--muted); font-weight: 600; } .stat .val { font-size: 23px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat.ok .val { color: var(--ok); } .stat.bad .val { color: var(--bad); } .stat.warn .val { color: var(--warn); }

/* tables */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid #edf0ee; vertical-align: middle; }
th.n, td.n { text-align: right; }
tr.click { cursor: pointer; } tr.click:hover td { background: #f6f9f7; }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); }

/* modal / toast */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 30, 22, .45); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow-y: auto; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; max-height: calc(calc(100vh / var(--z, 1)) - 60px); }
.modal.wide { max-width: 900px; }
.modal header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); } .modal header h2 { flex: 1; margin: 0; }
.modal .x { border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal .body { padding: 16px 18px; overflow-y: auto; } .modal footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: #1b2620; color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 300; opacity: 0; transition: .25s; max-width: 90vw; font-weight: 600; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.bad { background: var(--bad); }

/* welcome & login */
.welcome, .login { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
  background: radial-gradient(circle at 85% 10%, #2a7a52 0, transparent 45%), radial-gradient(circle at 10% 90%, #6a4f07 0, transparent 40%), linear-gradient(160deg, #123524, #0b1f15); }
.wl-card { text-align: center; color: #fff; max-width: 560px; }
.wl-logo, .lg-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; user-select: none; }
.wl-greet { margin-top: 18px; color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }
.wl-card h1 { font-size: clamp(30px, 6vw, 46px); margin: 6px 0; } .wl-card .muted { color: #b9d3c3; font-size: 17px; }
.wl-date { margin: 14px 0 26px; color: #d9e8df; font-size: 15px; }
.welcome .btn.primary { background: var(--accent); border-color: var(--accent); color: #231a00; }
.wl-foot { margin-top: 30px; font-size: 12px; color: #8fb3a0; }
.login-box { background: #fff; border-radius: 20px; padding: 24px; width: 100%; max-width: 520px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.login-box.wide { max-width: 620px; text-align: left; }
.login-box h1 { font-size: 22px; margin-top: 10px; } .lg-logo { width: 64px; height: 64px; border-radius: 16px; }
.users { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0; }
.uchip { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 110px; padding: 12px; border: 2px solid var(--line); background: #fff; border-radius: 14px; cursor: pointer; font: inherit; }
.uchip .av { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-d); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.uchip small { color: var(--muted); } .uchip.on { border-color: var(--brand); background: #f3faf6; }
.pinrow { display: flex; gap: 8px; margin-bottom: 10px; } .pinrow input { font-size: 22px; text-align: center; letter-spacing: 6px; }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.lg-links { display: flex; justify-content: space-between; margin-top: 12px; }
.tkeys { display: flex; flex-direction: column; gap: 6px; } .tk-row { display: flex; gap: 6px; justify-content: center; }
.tk { flex: 1; min-height: 54px; font: inherit; font-size: 21px; font-weight: 700; border: 1px solid var(--line); background: #f6f8f6; border-radius: 12px; cursor: pointer; }
.tkeys.alpha .tk { min-height: 46px; font-size: 17px; padding: 0; } .tk.fn { background: #e6ece8; font-size: 15px; } .tk.space { flex: 5; } .tk.on { background: var(--brand-soft); }
.tk:active { background: var(--brand-soft); }
.pref-ed { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.pref { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pref span { display: flex; flex-direction: column; } .pref small { color: var(--muted); font-size: 12px; }

/* counter POS */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.scanbar { display: flex; gap: 8px; position: relative; } .scanbar input { font-size: 18px; min-height: 50px; }
.ac-list { position: absolute; top: 54px; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.15); z-index: 20; max-height: 380px; overflow-y: auto; }
.ac-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f0f2f0; } .ac-row.on, .ac-row:hover { background: var(--brand-soft); }
.ac-row small { display: block; color: var(--muted); }
.billt td { padding: 6px; } .billt input { min-height: 34px; padding: 4px 6px; text-align: right; }
.billt select { min-height: 34px; padding: 3px 6px; width: auto; }
.billt tr.last td { background: #fbf6e8; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.tile { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; min-height: 86px; }
.tile b { font-size: 14px; } .tile .p { color: var(--brand); font-weight: 800; margin-top: auto; } .tile.out { opacity: .5; }
.catbar { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; } .catbar button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; } .catbar button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.sumbox { position: sticky; top: 64px; }
.totals div { display: flex; justify-content: space-between; padding: 4px 0; } .totals .grand { font-size: 26px; font-weight: 800; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; }
.party-box { background: #f6f9f7; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.warnbox { background: #fdf3df; border: 1px solid #f2d7a0; color: #7a4d00; border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 14px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.menu-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; text-decoration: none; color: var(--ink); font-weight: 600; text-align: center; }
.menu-tile svg { width: 28px; height: 28px; color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 4px 12px; font: inherit; cursor: pointer; } .chip.on { background: var(--brand-soft); border-color: var(--brand); }
.bar-wrap { height: 8px; background: #eef1ee; border-radius: 4px; overflow: hidden; min-width: 60px; } .bar { height: 100%; background: var(--brand); }

/* feature switches: hide what the shop does not use */
body.nf-units .ft-units, body.nf-levels .ft-levels, body.nf-lastrate .ft-lastrate, body.nf-hold .ft-hold, body.nf-splitpay .ft-splitpay,
body.nf-touch .ft-touch, body.nf-whatsapp .ft-whatsapp, body.nf-a4 .ft-a4, body.nf-labels .ft-labels, body.nf-quotes .ft-quotes, body.nf-orders .ft-orders,
body.nf-purchases .ft-purchases, body.nf-parties .ft-parties, body.nf-stock .ft-stock, body.nf-retail .ft-retail, body.nf-wholesale .ft-wholesale, body.nf-scale .ft-scale, body.nf-openprice .ft-openprice, body.nf-doubledisc .ft-doubledisc, body.nf-quickitem .ft-quickitem { display: none !important; }

/* printing */
#print { display: none; }
@media print {
  body > *:not(#print) { display: none !important; } #print { display: block !important; } @page { margin: 6mm; }
  #print.rcpt80 { width: 72mm; } #print.rcpt58 { width: 48mm; }
}
.rcpt { font-family: Arial, sans-serif; font-size: 12px; color: #000; } .rcpt h3 { text-align: center; margin: 0 0 2px; font-size: 16px; } .rcpt .c { text-align: center; }
.rcpt .lr { display: flex; justify-content: space-between; gap: 6px; } .rcpt hr { border: 0; border-top: 1px dashed #000; margin: 5px 0; } .rcpt .b { font-weight: 700; } .rcpt .gt { font-size: 16px; font-weight: 800; }
.a4 { font-family: Arial, sans-serif; color: #000; font-size: 12px; }
.a4 .hd { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px; } .a4 h1 { font-size: 22px; margin: 0; } .a4 h2 { font-size: 18px; text-align: right; margin: 0; }
.a4 table { border-collapse: collapse; width: 100%; } .a4 th, .a4 td { border: 1px solid #777; padding: 5px 6px; color: #000; font-size: 12px; text-transform: none; letter-spacing: 0; }
.a4 .tot { margin-left: auto; width: 45%; margin-top: 8px; } .a4 .sign { display: flex; justify-content: space-between; margin-top: 60px; }
.lbls { display: flex; flex-wrap: wrap; gap: 2mm; } .lbls .lbl { width: 38mm; height: 25mm; border: 1px dashed #bbb; padding: 1mm; text-align: center; font-family: Arial; overflow: hidden; } .lbls .lbl b { font-size: 9px; display: block; white-space: nowrap; overflow: hidden; } .lbls .lbl svg { width: 100%; height: 12mm; } .lbls .lbl .p { font-weight: 800; font-size: 12px; }

/* phones */
@media (max-width: 900px) { .pos { grid-template-columns: minmax(0, 1fr); } .pos > * { min-width: 0; } .sumbox { position: static; } }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: calc(46vh / var(--z, 1)); overflow-y: auto; } .tile { min-height: 74px; padding: 8px; } .tile b { font-size: 13px; } .scanbar input { font-size: 16px; } }
@media (max-width: 820px) {
  .card:not(:has(.scanbar, #edQ, #psQ)) { overflow-x: auto; }
  .sidenav { display: none; } .content { padding: 8px 14px 96px; } .topbar { padding: 12px 14px 4px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 11px; color: var(--muted); text-decoration: none; font-weight: 600; }
  .bottomnav a svg { width: 22px; height: 22px; } .bottomnav a.active { color: var(--brand); }
  .modal-bg { padding: 0; align-items: flex-end; } .modal { border-radius: 16px 16px 0 0; max-height: calc(92vh / var(--z, 1)); }
  .hide-m { display: none; }
}
/* licensing */
.btn.xs { min-height: 26px; padding: 2px 8px; font-size: 12px; }
.ok-t { color: var(--ok); font-weight: 700; } .bad-t { color: var(--bad); font-weight: 700; }
.licbar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: #fff4d6; color: #5a4300; border-bottom: 1px solid #f0d58a; padding: 6px 14px; font-size: 14px; }
.lic-lock { z-index: 95; }
.lic-big { font-size: 20px; font-weight: 800; color: var(--bad); margin: 8px 0 2px; }
.lic-st { border-radius: 12px; padding: 10px 14px; font-weight: 700; margin-bottom: 12px; background: #eef5f0; }
.lic-st.ok { background: #e3f4e9; color: var(--ok); } .lic-st.warn { background: #fff4d6; color: #7a5a00; } .lic-st.bad { background: #fde8e6; color: var(--bad); }
.lic-dev { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #f6f9f7; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.lic-dev span { color: var(--muted); font-weight: 600; } .lic-dev b { font-size: 24px; letter-spacing: 2px; font-family: ui-monospace, Consolas, monospace; }
.lic-key { font-family: ui-monospace, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; font-size: 17px; }
.lic-keyout { margin-top: 12px; background: #f6f9f7; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.lic-keyout b { font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: 1px; color: var(--brand-d); word-break: break-all; }
.lic-more { margin-top: 12px; font-size: 14px; } .lic-more summary { cursor: pointer; color: var(--brand); font-weight: 700; }

/* Wholesale bill / documents - classic counter layout: entry bar on top, item grid in the middle (fixed height, scrolls inside), totals band below */
.pos.edstack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.edstack .tablewrap { overflow: auto; height: clamp(170px, calc(calc(100vh / var(--z, 1)) - 520px), 560px); }
.edstack .billt thead th { position: sticky; top: 0; background: #dfe9f2; z-index: 2; box-shadow: 0 1px 0 var(--line); }
.edstack .sumbox { position: static; padding: 10px; background: #e9eff5; border: 1px solid #c7d3de; }
.sb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; }
.sbt { background: #fff; border: 1px solid #c7d3de; border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; min-height: 66px; }
.sbt > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sbt > b { font-size: 20px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.sbt input, .sbt select { min-height: 36px; font-size: 18px; font-weight: 700; }
.sbt-sub > b { color: #0b5a2b; } .sbt-pay > span { color: #123a8a; }
.sbt-total { background: #134d34; border-color: #134d34; grid-column: span 2; min-width: 190px; } .sbt-total > span { color: #b6e8cc; } .sbt-total > b { color: #fff; font-size: 30px; }
.sb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; margin-top: 8px; }
.sb-fields .f { margin: 0; } .sb-fields .btn { min-height: 46px; }
#edWarn:empty { display: none; }
@media (max-width: 700px) { .edstack .tablewrap { height: clamp(170px, calc(calc(100vh / var(--z, 1)) - 560px), 360px); } .sbt-total { grid-column: 1 / -1; } }

/* Counter lock mode */
body.counter-lock .sidenav, body.counter-lock .bottomnav { display: none !important; }
#ctBar { position: fixed; top: 7px; right: 12px; z-index: 60; display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.96); border-radius: 10px; padding: 4px 8px; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.ct-user { font-size: 13px; color: var(--muted); margin-right: 4px; }

/* Menu position: the ☰ button in the green bar moves the menu to the top; the side menu hides. Remembered per device. */
.nav-toggle { background: none; border: 0; color: #fff; font-size: 20px; padding: 4px 8px; cursor: pointer; border-radius: 8px; }
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.topnav { display: none; position: sticky; top: 50px; z-index: 29; background: #fff; border-bottom: 1px solid var(--line); padding: 0 8px; flex-wrap: wrap; }
.topnav a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.topnav a svg { width: 17px; height: 17px; }
.topnav a.active, .topnav a:hover { color: var(--brand-d); border-bottom-color: var(--brand); }
body.nav-top .sidenav { display: none; }
body.nav-top .topnav { display: flex; }
body.counter-lock .topnav, body.counter-lock .nav-toggle { display: none !important; }
@media (max-width: 820px) { .topnav { display: none !important; } }
.sidenav, .nav-toggle { display: none !important; } /* side menu removed: top menu only */

/* Grouped menu */
.navgrp { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); padding: 12px 12px 4px; }
.navlink.sub { padding: 7px 12px 7px 16px; font-size: 13px; }
.tn-g { position: relative; display: inline-block; }
.tn-g > button { background: none; border: 0; cursor: pointer; padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; font-family: inherit; }
.tn-g > button:hover, .tn-g.open > button { color: var(--brand-d); border-bottom-color: var(--brand); }
.tn-dd { display: none; position: absolute; left: 0; top: 100%; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 8px 20px rgba(0,0,0,.14); z-index: 45; padding: 4px; }
.tn-g.open .tn-dd { display: block; }
.tn-dd a { display: block; padding: 8px 12px; border-bottom: 0 !important; border-radius: 7px; }
.tn-dd a:hover, .tn-dd a.active { background: var(--brand-soft); }

/* ─── POS / Sale screen (posbill) — light by default, large readable figures ─── */
body.pos-mode .topbar { display: none !important; }
body.pos-mode .content { padding: 0 !important; max-width: none !important; }
body.pos-mode main.content { background: var(--bg); overflow: hidden; }

.pb-shell {
  --pb-bg: #f6f8f5; --pb-panel: #ffffff; --pb-band: #eef2ec; --pb-line: #d5ddd6; --pb-ink: #14201a; --pb-muted: #55655b;
  --pb-head: #e3ece5; --pb-sel: #fff4cf; --pb-hover: #f0f6f1; --pb-field: #ffffff; --pb-fieldline: #b9c6bd;
  --pb-green: #12703b; --pb-blue: #0d4f9c; --pb-red: #b42318;
  display: flex; flex-direction: column; height: calc(calc(100vh / var(--z, 1)) - 50px);
  background: var(--pb-bg); color: var(--pb-ink); overflow: hidden; font-size: 16px;
}
body.counter-lock .pb-shell { height: calc(calc(100vh / var(--z, 1)) - 85px); }
.pb-shell.pb-dark {
  --pb-bg: #0b1d2e; --pb-panel: #0e2233; --pb-band: #091724; --pb-line: #1f3a52; --pb-ink: #eef4ef; --pb-muted: #9fbccb;
  --pb-head: #0e2233; --pb-sel: #12405f; --pb-hover: #102d42; --pb-field: #142b3e; --pb-fieldline: #2a5a80;
  --pb-green: #3ecf8e; --pb-blue: #5fbcff; --pb-red: #ff7b7b;
}

/* search */
.pb-search { position: relative; padding: 8px 10px; background: var(--pb-band); border-bottom: 1px solid var(--pb-line); flex: none; }
.pb-qbox { width: 100%; background: var(--pb-field); color: var(--pb-ink); border: 2px solid var(--pb-fieldline); border-radius: 10px; padding: 10px 14px; font-size: 18px; min-height: 0; }
.pb-qbox::placeholder { color: var(--pb-muted); font-size: 15px; }
.pb-qbox:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #cfe8d9; outline: none; }
.pb-search .ac-list { font-size: 15px; }

/* items grid */
.pb-grid { flex: 1; overflow: auto; background: var(--pb-panel); }
.pb-table { width: 100%; border-collapse: collapse; font-size: 16px; color: var(--pb-ink); }
.pb-table thead th { position: sticky; top: 0; z-index: 1; background: var(--pb-head); color: var(--pb-ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 8px 10px; border-bottom: 2px solid var(--pb-line); white-space: nowrap; text-align: left; }
.pb-table thead th.n { text-align: right; }
.pb-table td { padding: 7px 10px; border-bottom: 1px solid var(--pb-line); vertical-align: middle; }
.pb-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--pb-panel) 92%, var(--pb-head)); }
.pb-table tbody tr:hover td { background: var(--pb-hover); }
.pb-table tbody tr.sel td { background: var(--pb-sel); }
.pb-table tbody tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.pb-table td b { font-weight: 600; }
.pb-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.pb-table .muted, .pb-table .small.muted { color: var(--pb-muted); }
.pb-table input { background: var(--pb-field); color: var(--pb-ink); border: 1px solid var(--pb-fieldline); border-radius: 6px; padding: 4px 6px; font-size: 16px; font-weight: 600; min-height: 34px; }
.pb-table .empty { color: var(--pb-muted) !important; font-size: 16px; }

/* bottom band: totals | info | buttons */
.pb-bottom { display: grid; grid-template-columns: 300px 1fr; background: var(--pb-band); border-top: 2px solid var(--pb-line); flex: none; }
@media (max-width: 980px) { .pb-bottom { grid-template-columns: 260px 1fr; } }
@media (max-width: 600px) { .pb-bottom { grid-template-columns: 1fr; } .pb-actions { grid-template-columns: repeat(2, 1fr) !important; } }

.pb-totals { background: var(--pb-panel); border-right: 1px solid var(--pb-line); padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.pb-tr { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.pb-tr span:first-child { color: var(--pb-muted); font-weight: 700; white-space: nowrap; }
.pb-tr.grand { border-top: 2px solid var(--pb-line); border-bottom: 2px solid var(--pb-line); padding: 6px 0; margin: 2px 0; }
.pb-tr.grand span:first-child { color: var(--pb-ink); font-size: 17px; }
.pb-num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-num.green { color: var(--pb-ink); }
.pb-num.blue { color: var(--pb-blue); font-size: 32px; }
.pb-num.red { color: var(--pb-green); font-size: 24px; }
.pb-disc-inp, .pb-cash-inp { width: 120px; background: var(--pb-field); color: var(--pb-ink); border: 1.5px solid var(--pb-fieldline); border-radius: 8px; padding: 4px 8px; text-align: right; font-weight: 700; font-size: 17px; min-height: 36px; }
.pb-cash-inp { font-size: 21px; color: var(--pb-blue); width: 140px; }
.pb-cash-inp:disabled { opacity: .8; }

.pb-panel { display: flex; flex-direction: column; min-width: 0; }
.pb-panel-top { display: flex; align-items: center; gap: 14px; padding: 8px 8px 0; flex-wrap: wrap; }
.pb-panel-top .pba.commands { flex: none; min-width: 150px; }
.pb-info { display: flex; flex-direction: column; gap: 3px; margin-left: auto; text-align: right; }
.pb-items { color: var(--pb-muted); font-size: 13px; margin-left: 6px; }
.pb-bill-no { font-size: 15px; color: var(--pb-muted); font-weight: 600; }
.pb-bill-no span { color: var(--pb-ink); font-weight: 800; }
.pb-clock { font-size: 30px; font-weight: 800; color: var(--pb-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; padding: 2px 14px; border-radius: 10px; background: var(--pb-panel); border: 1.5px solid var(--pb-line); font-family: Consolas, 'Segoe UI', monospace; }
.pb-mode { font-size: 14px; font-weight: 800; letter-spacing: .1em; padding: 3px 12px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); }
.pb-info .small { color: var(--pb-muted) !important; font-size: 14px; }

.pb-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; align-content: start; }
.pba { background: var(--pb-panel); color: var(--pb-ink); border: 1.5px solid var(--pb-line); border-left-width: 5px; border-radius: 8px; padding: 6px 8px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; line-height: 1.2; }
.pba:hover { background: var(--pb-hover); }
.pba:active { transform: scale(.98); }
.pba.customer { border-left-color: #17803d; } .pba.cancel { border-left-color: #c0392b; color: var(--pb-red); }
.pba.category, .pba.manualdisc { border-left-color: #c08a00; } .pba.history, .pba.retrieve { border-left-color: #2563a8; }
.pba.hold { border-left-color: #c26a00; } .pba.commands { border-left-color: #7a3fc0; }
.pba.ok { background: var(--brand); color: #fff; border-color: var(--brand-d); text-align: center; }
.pba.ok:hover { background: var(--brand-d); }
.pba.large { grid-column: 1 / -1; font-size: 18px; min-height: 54px; letter-spacing: .03em; }
.pba:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.pb-custbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--pb-panel); border-top: 1px solid var(--pb-line); padding: 7px 12px; flex: none; font-size: 15px; }
.pb-custbar .muted { color: var(--pb-muted); }
.pb-custbar b { color: var(--pb-ink); }
.pb-wsl { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--pb-blue); font-weight: 700; font-size: 14px; margin-left: auto; }
.pb-wsl input[type=checkbox] { width: 18px; height: 18px; min-height: 0; }

.pb-fkeys { display: flex; gap: 4px; flex-wrap: wrap; background: var(--pb-band); border-top: 1px solid var(--pb-line); padding: 6px 8px; flex: none; }
.pbf { background: var(--pb-panel); color: var(--pb-ink); border: 1px solid var(--pb-line); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 34px; flex: 1; }
.pbf:hover { background: var(--pb-hover); }
.pbf.warn { color: var(--pb-red); border-color: currentColor; }
.pbf.code, .pbf.desc { font-weight: 700; }

/* ─── POS Login Screen — 3-column pink design ─────────────────────────── */
#ctLoginScreen, .lg-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; overflow: hidden;
  background: #c8507a;
  animation: lgFadeIn .18s ease;
  font-family: "Segoe UI", system-ui, sans-serif;
}
@keyframes lgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Header bar */
.lg-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #b04070; padding: 8px 16px; flex: none;
  border-bottom: 2px solid #a03060; min-height: 44px;
}
.lg-header-left { display: flex; align-items: center; gap: 10px; }
.lg-logo { width: 28px; height: 28px; border-radius: 6px; }
.lg-title { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lg-ver { color: #ffb0d0; font-size: 11px; font-weight: 700; }

/* 3-column body */
.lg-body {
  display: flex; flex: 1; overflow: hidden;
}

/* LEFT column — form fields */
.lg-left {
  width: 230px; flex: none; display: flex; flex-direction: column; gap: 6px;
  background: #c05070; border-right: 1px solid #a03060;
  padding: 10px 10px 8px; overflow-y: auto;
}
.lg-field { display: flex; flex-direction: column; gap: 2px; }
.lg-label { color: #ffee44; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lg-input {
  background: #a03060; color: #fff; border: 1px solid #903058;
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px;
  width: 100%; min-height: 0;
}
.lg-input:focus { outline: none; border-color: #ffee44; box-shadow: 0 0 0 2px rgba(255,238,68,.25); }
.lg-input[readonly] { opacity: .75; cursor: default; }
.lg-textarea { min-height: 48px; resize: none; }
.lg-shopname {
  color: #ffb0d0; font-size: 12px; font-weight: 700; text-align: center;
  padding: 4px 0; border-top: 1px solid #903058; margin-top: auto;
}
.lg-foot-btns { display: flex; gap: 6px; }
.lg-btn-exit, .lg-btn-kb {
  flex: 1; background: #a03060; border: 1px solid #803050; color: #fff;
  border-radius: 7px; padding: 7px 6px; font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; text-align: center;
}
.lg-btn-exit:hover { background: #802040; }
.lg-btn-kb:hover { background: #b04070; }

/* CENTER column — login + numpad */
.lg-center {
  flex: 1; display: flex; flex-direction: column;
  background: #c8507a; border-right: 1px solid #a03060;
}
.lg-center-top {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 16px 20px;
}
.lg-login-btn {
  background: #fff; color: #b04070; border: none;
  border-radius: 10px; padding: 12px 40px; font: inherit; font-size: 16px; font-weight: 800;
  cursor: pointer; letter-spacing: .03em; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: background .12s, transform .08s; width: 100%; max-width: 220px;
}
.lg-login-btn:hover { background: #ffecf3; transform: translateY(-1px); }
.lg-login-btn:active { transform: translateY(0); }
.lg-icons-row { display: flex; gap: 14px; }
.lg-icon-circle {
  width: 44px; height: 44px; background: rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
}
.lg-icon-circle:hover { background: rgba(255,255,255,.35); }
.lg-storeinfo { text-align: center; }
.lg-storename { color: #fff; font-size: 15px; font-weight: 800; }
.lg-storedetail { color: #ffb0d0; font-size: 11px; margin-top: 2px; }
.lg-err { color: #fff; background: rgba(0,0,0,.35); border-radius: 7px; padding: 6px 14px; font-size: 13px; font-weight: 700; text-align: center; }

/* Numpad */
.lg-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  background: #b04070; border-top: 1px solid #903060; padding: 10px;
  flex: none;
}
.lg-num {
  background: #c8507a; border: 1px solid #a03060; color: #fff;
  border-radius: 8px; padding: 12px 6px; font: inherit; font-size: 18px; font-weight: 700;
  cursor: pointer; text-align: center; transition: background .1s;
}
.lg-num:hover { background: #d8608a; }
.lg-num:active { background: #b04070; }
.lg-num.clr { background: #901838; border-color: #700a28; color: #ffb0b0; }
.lg-num.clr:hover { background: #a02040; }
.lg-num.dot { color: #ffb0d0; }

/* RIGHT column — user cards */
.lg-right {
  width: 240px; flex: none; display: flex; flex-direction: column;
  background: #b84070; overflow: hidden;
}
.lg-right-head {
  padding: 10px 12px 8px; border-bottom: 1px solid #a03060;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #ffee44;
  flex: none;
}
.lg-ulist { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lg-ucard {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px; cursor: pointer; transition: background .12s, border-color .12s;
}
.lg-ucard:hover { background: rgba(255,255,255,.22); border-color: rgba(255,238,68,.6); }
.lg-ucard.active { background: rgba(255,238,68,.2); border-color: #ffee44; }
.lg-uavt {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.25); color: #fff;
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.lg-uinfo { flex: 1; min-width: 0; }
.lg-uinfo b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-uinfo span { color: #ffb0d0; font-size: 11px; }
.lg-ubtns { display: flex; gap: 3px; flex: none; }
.lg-ubtn {
  background: none; border: 1px solid transparent; color: #ffb0d0; font-size: 13px;
  border-radius: 4px; padding: 2px 6px; cursor: pointer; line-height: 1;
}
.lg-ubtn:hover { background: rgba(0,0,0,.2); }
.lg-ubtn.del:hover { color: #ff8080; border-color: rgba(255,80,80,.4); }
.lg-ubtn.edit:hover { color: #ffee44; border-color: rgba(255,238,68,.4); }
.lg-add-user {
  background: none; border: 1px dashed rgba(255,255,255,.35); color: #ffee44;
  border-radius: 9px; padding: 8px; font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; text-align: center; transition: background .12s;
}
.lg-add-user:hover { background: rgba(255,255,255,.12); border-color: #ffee44; }

/* QWERTY keyboard strip */
.lg-qwerty {
  background: #b04070; border-top: 2px solid #a03060;
  padding: 6px 8px; flex: none;
}
.lg-qrow { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; }
.lg-qkey {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff;
  border-radius: 5px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; min-width: 36px; text-align: center; transition: background .08s;
}
.lg-qkey:hover { background: rgba(255,255,255,.3); }
.lg-qkey:active { background: rgba(255,255,255,.4); }
.lg-qkey.space { min-width: 200px; letter-spacing: .05em; }
.lg-qkey.back { min-width: 52px; color: #ffb0d0; }

@media (max-width: 820px) {
  .lg-left { width: 180px; }
  .lg-right { width: 180px; }
}
@media (max-width: 600px) {
  .lg-left { display: none; }
  .lg-right { width: 160px; }
}

/* ===================== Reports Hub ===================== */
.rp-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: start; }
.rp-sidebar { background: var(--card); border-right: 1px solid var(--line); border-radius: var(--radius) 0 0 var(--radius); min-height: 420px; overflow-y: auto; padding: 8px 0; }
.rp-main { padding: 18px; background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; min-height: 420px; }
.rp-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; font-weight: 700; font-size: 13px; cursor: pointer; border-radius: 8px; margin: 2px 6px; color: var(--ink); user-select: none; }
.rp-sec-head:hover { background: var(--bg); }
.rp-sec-head .rp-caret { font-size: 11px; color: var(--muted); transition: transform .15s; }
.rp-sec-head.open .rp-caret { transform: rotate(90deg); }
.rp-sec-body { padding: 0 6px 6px; }
.rp-hidden { display: none; }
.rp-sub { display: block; padding: 7px 14px; border-radius: 7px; font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; }
.rp-sub:hover { background: var(--bg); }
.rp-sub.on { background: var(--brand-soft); color: var(--brand-d); font-weight: 600; }
.rp-soon-link { opacity: .5; cursor: default; }
.rp-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--bg); color: var(--muted); vertical-align: middle; margin-left: 4px; line-height: 1.6; }
.rp-datebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rp-datebar label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rp-datebar input[type=date] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 13px; }
.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.rp-soon-card { text-align: center; padding: 48px 24px; color: var(--muted); }
.rp-soon-card h3 { color: var(--muted); }
.tfooter td, .tfooter th { font-weight: 700; border-top: 2px solid var(--line); padding-top: 6px; }
.red { color: var(--bad); }
@media (max-width: 820px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-sidebar { border-radius: var(--radius) var(--radius) 0 0; border-right: none; border-bottom: 1px solid var(--line); min-height: auto; }
  .rp-main { border-radius: 0 0 var(--radius) var(--radius); padding: 12px; }
}

/* POS / Sale - Commands box */
.pb-cmd-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.pb-cmd-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-cmd-theme { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.pb-cmd-theme.active { border-color: var(--brand); background: var(--brand-soft); }
.pb-cmd-theme-name { font-weight: 700; }
.pb-cmd-theme-desc { font-size: 12px; color: var(--muted); }
.pb-cmd-keys { font-size: 14px; line-height: 2; }
.pb-cmd-keys span { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: #f7f9f7; font-weight: 700; font-size: 12px; text-align: center; line-height: 1.6; }

/* Reports on phones: the report list sits above the report */
@media (max-width: 820px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-sidebar { min-height: 0; max-height: calc(46vh / var(--z, 1)); border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
  .rp-main { padding: 12px; border-radius: 0 0 var(--radius) var(--radius); }
  .rp-datebar input[type=date] { max-width: none !important; flex: 1 1 140px; }
}
.rp-main .tfooter td { border-top: 2px solid var(--line); background: #f7f9f7; }

/* POS / Sale on phones and small tablets: the page scrolls instead of squeezing the item list */
@media (max-width: 820px) {
  .pb-shell { height: auto !important; overflow: visible; }
  body.pos-mode main.content { overflow: visible; }
  .pb-grid { min-height: 240px; max-height: calc(55vh / var(--z, 1)); }
  .pb-table { font-size: 15px; }
  .pb-table th:nth-child(2), .pb-table td:nth-child(2) { display: none; }
}
@media (min-width: 1200px) { .pb-actions { grid-template-columns: repeat(4, 1fr); } }
.rp-main tr.rp-cat td { background: #f2f7f3; border-top: 1px solid var(--line); }
.rp-main tr.rp-sub-row td { color: var(--muted); font-size: 14px; }
.rp-main tr.rp-sub-row td.n { color: var(--ink); }

/* one-window list forms (Initial System): fields locked until Add / Edit */
.mbox-fields { display: grid; grid-template-columns: 90px 2fr 1fr 1.2fr 1.2fr auto; gap: 10px; align-items: end; padding: 12px; border-radius: 12px; background: #f7faf8; border: 1px solid var(--line); }
.mbox-fields .f { margin: 0; }
.mbox-fields .mb-act { white-space: nowrap; padding-bottom: 10px; }
.mbox-fields #mbCode, .mbox-fields #pxCode { background: #eef2ef; font-family: Consolas, monospace; font-weight: 700; text-align: center; }
.mbox-fields.locked { background: #fafbfa; }
.mbox-fields.locked input:disabled, .mbox-fields.locked select:disabled { background: #f1f3f1; color: #2a3a30; border-color: #e1e6e2; opacity: 1; -webkit-text-fill-color: #2a3a30; cursor: default; }
.mbox-fields:not(.locked) { border-color: var(--brand); box-shadow: 0 0 0 3px #cfe8d9; background: #fff; }
.mbox-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 10px; }
.mbox-btns .btn:disabled { opacity: .4; }
.mbox-btns .mb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.mbox-list { max-height: calc(40vh / var(--z, 1)); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.mbox-list thead th { position: sticky; top: 0; background: #f2f6f3; z-index: 1; }
.mbox-list tr.mb-on td { background: #fff4cf; }
.mbox-list tr.mb-on td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.mbox-fields.mb-subcat { grid-template-columns: 90px 1.6fr 1.4fr 0.9fr 1.1fr 1.1fr auto; }
.mbox-fields.mb-salesman { grid-template-columns: 90px 1.6fr 1.2fr 1.2fr 0.8fr auto; }
.mbox-fields.mb-salesman .mb-wide { grid-column: 1 / -2; }
.mbox-fields.mb-party { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mbox-fields.mb-party .mb-name, .mbox-fields.mb-party .mb-s2 { grid-column: span 2; }
.mbox-fields.mb-party .mb-wide2 { grid-column: span 3; }
@media (max-width: 700px) { .mbox-fields, .mbox-fields.mb-subcat, .mbox-fields.mb-salesman, .mbox-fields.mb-party { grid-template-columns: 1fr 1fr; } .mbox-fields .mb-name, .mbox-fields.mb-salesman .mb-wide, .mbox-fields.mb-party .mb-wide2 { grid-column: 1 / -1; } }

/* Home screen after login: business photo + shortcuts */
body.home-mode .topbar { display: none !important; }
body.home-mode .content { padding: 0 !important; max-width: none !important; }
.home-shell { min-height: calc(calc(100vh / var(--z, 1)) - 50px); background: linear-gradient(135deg, #123524, #17613f 60%, #1f7a52); color: #fff; display: flex; }
.home-hero { flex: 1; display: flex; flex-direction: column; padding: clamp(18px, 4vw, 44px); gap: 24px; }
.home-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.home-logo { width: 74px; height: 74px; border-radius: 18px; background: #fff; object-fit: contain; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.home-greet { font-size: 17px; opacity: .9; }
.home-top h1 { font-size: clamp(30px, 5vw, 52px); margin: 2px 0; text-shadow: 0 2px 14px rgba(0,0,0,.45); color: #fff; }
.home-sub { font-size: 16px; opacity: .92; }
.home-clock { text-align: right; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.home-clock b { display: block; font-size: clamp(34px, 5vw, 56px); font-variant-numeric: tabular-nums; line-height: 1; }
.home-clock span { font-size: 15px; opacity: .92; }
.home-tiles { margin-top: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.home-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; text-decoration: none; color: #14201a;
  background: rgba(255,255,255,.93); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s; }
.home-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.home-tile svg { width: 34px; height: 34px; color: var(--brand); margin-bottom: 4px; }
.home-tile b { font-size: 19px; } .home-tile small { color: #55655b; font-size: 13px; }
.home-tile.main { background: var(--accent); } .home-tile.main svg { color: #231a00; } .home-tile.main small { color: #4a3800; }
.home-foot { font-size: 12px; opacity: .75; text-align: center; }
@media (max-width: 600px) { .home-clock { text-align: left; } .home-tiles { grid-template-columns: 1fr 1fr; } .home-tile { padding: 14px; } }
.pf-photo { width: 220px; height: 124px; border-radius: 10px; border: 1px solid var(--line); background: #f2f4f1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── POS / Sale bottom area (v26.10.12.13) ───────────────────────────
   left: bill calculation · software info + status · customer detail | right: panel buttons
   foot: bill no. / Print / shift (narrow) | F-keys */
body.pos-mode .topnav { display: none !important; }
.shopbar-home { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.pb-bottom { grid-template-columns: minmax(420px, 44%) 1fr !important; }
.pb-left { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-right: 1px solid var(--pb-line); background: var(--pb-band); min-width: 0; }
.pb-calc { background: var(--pb-panel); border: 1px solid var(--pb-line); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.pb-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pb-big3 > div { display: flex; flex-direction: column; align-items: flex-end; padding: 3px 8px; border-radius: 8px; background: var(--pb-band); }
.pb-big3 span, .pb-inrow span, .pb-totbox span, .pb-status span, .pb-cust-grid span { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--pb-muted); }
.pb-big3 b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--pb-ink); }
.pb-big3 b.pb-blue { color: var(--pb-blue); } .pb-big3 b.pb-green { color: var(--pb-green); } .pb-big3 b.pb-red { color: var(--pb-red); }
.pb-inrow { display: grid; grid-template-columns: 0.8fr 0.9fr 1.3fr 1.2fr; gap: 6px; align-items: end; }
.pb-inrow label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pb-inrow .pb-disc-inp, .pb-inrow .pb-cash-inp { width: 100%; min-height: 34px; font-size: 17px; }
.pb-inrow .pb-cash-inp { font-size: 20px; }
.pb-totbox { display: flex; flex-direction: column; align-items: flex-end; padding: 2px 8px; border-radius: 8px; background: #e8f1ff; border: 1.5px solid #b9d0f0; }
.pb-totbox b { font-size: 26px; font-weight: 800; color: var(--pb-blue); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pb-twin { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px; }
.pb-about { display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; border-radius: 10px; background: var(--pb-panel); border: 1px solid var(--pb-line); font-size: 12px; color: var(--pb-muted); line-height: 1.35; }
.pb-about b { font-size: 13px; color: var(--brand); }
.pb-status { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 6px 10px; border-radius: 10px; background: var(--pb-panel); border: 1px solid var(--pb-line); }
.pb-status > div { display: flex; flex-direction: column; min-width: 0; }
.pb-status b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-status .pb-st-row { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.pb-st { display: inline-block; align-self: flex-start; padding: 1px 10px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); letter-spacing: .06em; }
.pb-st.bad { background: #fde3e1; color: #b42318; } .pb-st.warn { background: #fff1d6; color: #9a5b00; } .pb-st.info { background: #e3eefc; color: #1d4f91; }
.pb-wsp { display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--pb-blue); cursor: pointer; margin: 0; }
.pb-wsp input { width: 18px; height: 18px; min-height: 0; }
.pb-net { font-size: 12px; font-weight: 700; margin-left: auto; }
.pb-net.ok { color: #12703b; } .pb-net.warn { color: #b8690a; } .pb-net.local { color: var(--pb-muted); }
.pb-cust { border-radius: 10px; background: var(--pb-panel); border: 1px solid var(--pb-line); padding: 5px 10px; }
.pb-cust-empty { font-size: 13px; color: var(--pb-muted); padding: 4px 0; }
.pb-cust-grid > div { display: flex; flex-direction: column; min-width: 0; }
.pb-cust-grid b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pb-cust-grid { display: grid; grid-template-columns: 0.7fr 2.3fr 0.7fr 1fr 1fr 1fr 1.1fr; gap: 2px 10px; }
.pb-cust-grid > .cur b { font-size: 15px; }
.pb-panel-top { justify-content: flex-start; }
.pb-footbar { display: grid; grid-template-columns: 300px 1fr; border-top: 1px solid var(--pb-line); background: var(--pb-band); flex: none; }
.pb-billinfo { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 10px; border-right: 1px solid var(--pb-line); font-size: 13px; color: var(--pb-muted); }
.pb-billinfo b { color: var(--pb-ink); }
.pb-bi2 { display: flex; align-items: center; gap: 14px; }
.pb-print { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 800; color: var(--pb-ink); cursor: pointer; }
.pb-print input { width: 17px; height: 17px; min-height: 0; }
.pb-footbar .pb-fkeys { border-top: 0; align-content: center; }
.pb-shell.pb-refund .pb-table tbody td { background: #fff3f2 !important; }
.pb-shell.pb-refund .pb-grid { box-shadow: inset 0 0 0 3px #f2b8b3; }
.pba.ok.refund { background: #b42318; border-color: #8c1a12; }
@media (max-width: 980px) { .pb-bottom { grid-template-columns: 1fr !important; } .pb-footbar { grid-template-columns: 1fr; } .pb-cust-grid { grid-template-columns: repeat(4, 1fr); } }
.pb-big3 b.pb-amber { color: #b8690a; }
/* double-percentage line on POS / Sale: 1st % and 2nd % side by side */
.pb-dd { display: inline-flex; align-items: flex-end; gap: 4px; }
.pb-dd label { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
.pb-dd small { font-size: 10px; color: var(--pb-muted); line-height: 1; margin-bottom: 1px; }
.pb-dd input { width: 52px !important; text-align: right; }
.pb-dd > span { color: var(--pb-muted); font-weight: 700; padding-bottom: 8px; }
/* v26.10.12.15: left section wider (about 60%), panel button section narrower (about 40%, 3 buttons a row) */
.pb-bottom { grid-template-columns: minmax(520px, 3fr) minmax(340px, 2fr) !important; }
.pb-actions, .pb-shell .pb-actions { grid-template-columns: repeat(3, 1fr) !important; }
.pb-panel-top .pb-clock { flex: 1; text-align: center; }
@media (max-width: 980px) { .pb-bottom { grid-template-columns: 1fr !important; } }
/* v26.10.12.16: 70 / 30 split */
.pb-bottom { grid-template-columns: minmax(560px, 7fr) minmax(300px, 3fr) !important; }
.pb-panel .pba { font-size: 13px; padding: 6px 6px; }
.pb-panel .pba.large { font-size: 17px; }
.pb-panel-top .pba.commands { min-width: 0; flex: none; }
.pb-panel-top .pb-clock { font-size: 26px; padding: 2px 8px; }
@media (max-width: 980px) { .pb-bottom { grid-template-columns: 1fr !important; } }
.pb-panel .pba:not(.large) { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; word-break: normal; }
/* v26.10.12.17: foot bar - F-keys on the left, bill no. / Print / shift box on the right */
.pb-footbar { grid-template-columns: 1fr 300px !important; }
.pb-footbar .pb-billinfo { order: 2; border-right: 0; border-left: 1px solid var(--pb-line); }
.pb-footbar .pb-fkeys { order: 1; }
@media (max-width: 980px) { .pb-footbar { grid-template-columns: 1fr !important; } }
/* v26.10.12.18: payment / accounts pickers; slightly taller foot bar */
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-btn { display: flex; align-items: center; gap: 10px; padding: 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; }
.pm-btn b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-size: 14px; }
.pm-btn:hover, .pm-btn:focus { border-color: var(--brand); outline: none; }
.pm-btn.on { border-color: var(--brand); background: var(--brand-soft); }
.pb-footbar .pb-fkeys { padding: 9px 8px; }
.pb-footbar .pbf { min-height: 42px; font-size: 14px; }
.pb-footbar .pb-billinfo { padding: 8px 12px; gap: 3px; font-size: 13.5px; }
/* Utilities > Application Rights */
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ar-grp { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fbfcfb; }
.ar-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.ar-item { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 6px; font-size: 14px; cursor: pointer; }
/* top menu: last backup date on the right */
.tn-backup { margin-left: auto; align-self: center; font-size: 12.5px; padding: 4px 10px; border-radius: 14px; white-space: nowrap; }
.tn-backup.ok { background: #e3f4ea; color: #12703b; }
.tn-backup.warn { background: #fff1d6; color: #9a5b00; }
.tn-backup.bad { background: #fde3e1; color: #b42318; }
.tn-backup.bad:hover { background: #fbd0cc; }
/* v26.10.12.20: narrow code box; search help + last item beside it; Select item window */
.pb-search { display: flex; align-items: center; gap: 14px; }
.pb-search .pb-qbox { width: 280px; flex: none; font-size: 19px; font-family: Consolas, 'Segoe UI', monospace; font-weight: 700; letter-spacing: .02em; }
.pb-search-help { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--pb-muted); }
.pb-search-help span { padding: 3px 8px; border-radius: 12px; background: var(--pb-panel); border: 1px solid var(--pb-line); white-space: nowrap; }
.pb-search-help b { color: var(--pb-ink); font-family: Consolas, monospace; }
.pb-last { margin-left: auto; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.si-list { max-height: calc(52vh / var(--z, 1)); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.si-list thead th { position: sticky; top: 0; background: #f2f6f3; z-index: 1; }
.si-list tr.mb-on td { background: #fff4cf; }
.si-list tr.mb-on td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
@media (max-width: 980px) { .pb-search-help { display: none; } .pb-search .pb-qbox { width: 220px; } }
.pb-search .ac-list.pb-desc-ac { left: 8px; width: min(640px, 90vw); max-height: calc(52vh / var(--z, 1)); overflow: auto; }
.pb-search .pb-qbox.desc { border-color: #2563a8; box-shadow: 0 0 0 3px #d6e4f6; font-family: inherit; font-weight: 600; }
/* v26.10.12.22: no up/down arrows on number boxes anywhere - except the Qty box on POS / Sale */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#pbRows input[data-q] { -moz-appearance: number-input; appearance: auto; }
#pbRows input[data-q]::-webkit-inner-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; height: 26px; cursor: pointer; }
#pbRows input[data-q] { width: 70px !important; }
/* v26.10.12.25: taller bill item rows, slightly shorter bottom section */
.pb-table td { padding: 9px 10px; }
.pb-table input { min-height: 32px; }
.pb-table tbody td { font-size: 17px; }
.pb-table thead th { padding: 9px 10px; }
.pb-left { gap: 4px; padding: 4px 6px; }
.pb-big3 > div { padding: 1px 8px; }
.pb-big3 b { font-size: 22px; }
.pb-inrow .pb-disc-inp, .pb-inrow .pb-cash-inp { min-height: 30px; padding: 2px 8px; }
.pb-panel .pba { padding: 3px 6px; min-height: 36px; font-size: 12.5px; }
.pb-actions, .pb-shell .pb-actions { gap: 4px; padding: 5px 6px; }
.pb-panel-top { padding-top: 5px !important; padding-bottom: 0 !important; }
.pb-panel .pba.large { min-height: 44px; }
.pb-panel-top .pb-clock { font-size: 22px; padding: 0 8px; }
/* customer select window on POS / Sale */
.cs-tbl tbody tr.sel td { background: #fff4cf; }
.cs-tbl tbody tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.cs-tbl td { padding: 8px 10px; }
/* v26.10.12.26: customer's last price & quantity in the top strip */
.pb-last.lp-up, .pb-last.lp-down, .pb-last.lp-same { padding: 4px 10px; border-radius: 8px; max-width: 60%; }
.pb-last.lp-same { background: #e8f4ec; }
.pb-last.lp-up { background: #fff1d6; border: 1px solid #f0c97a; }
.pb-last.lp-down { background: #fde3e1; border: 1px solid #f2b8b3; }
.pb-last .pb-lpd { font-weight: 800; margin-left: 4px; color: #b8690a; }
.pb-last.lp-down .pb-lpd { color: var(--pb-red); }
.pb-last .pb-lpd.same { color: var(--pb-green); }
.pb-last .pb-lp.new { color: var(--pb-blue); font-weight: 600; }
/* v26.10.12.26: bigger item list on the bill - compact rows, slimmer search bar and bottom, so more items show */
.pb-search { padding: 5px 10px; }
.pb-search .pb-qbox { padding: 6px 12px; font-size: 18px; }
.pb-table thead th { padding: 6px 10px; }
.pb-table td { padding: 4px 10px; }
.pb-table tbody td { font-size: 16.5px; }
.pb-table input { min-height: 30px; padding: 2px 6px; }
.pb-about { padding: 3px 10px; line-height: 1.25; font-size: 11.5px; }
.pb-status { padding: 3px 10px; }
.pb-cust { padding: 3px 10px; }
.pb-calc { gap: 4px; padding: 4px 8px; }
.pb-footbar .pb-fkeys { padding: 6px 8px; }
.pb-footbar .pbf { min-height: 38px; }
.pb-footbar .pb-billinfo { padding: 5px 12px; }
.pb-search-help { flex-wrap: nowrap; overflow: hidden; min-width: 0; flex: 0 1 auto; }
.pb-last { flex: 1 1 0; min-width: 0; text-align: right; }
.pb-last.lp-up, .pb-last.lp-down, .pb-last.lp-same { max-width: none; flex: 1 1 0; }
.pb-search:has(.pb-last.lp-up, .pb-last.lp-down, .pb-last.lp-same) .pb-search-help { display: none; }
/* v26.10.12.28: print preview window (Preferences > Printing) */
.pv-modal { max-width: min(980px, 96vw); }
.pv-wrap { background: #8a948d; padding: 16px; border-radius: 10px; max-height: calc(66vh / var(--z, 1)); overflow: auto; display: flex; justify-content: center; }
.pv-paper { background: #fff; color: #000; box-shadow: 0 4px 18px rgba(0,0,0,.35); padding: 4mm; }
.pv-80 { width: 72mm; } .pv-58 { width: 48mm; }
.pv-a4 { width: 190mm; max-width: 100%; padding: 10mm; min-height: 120mm; }
.pv-paper table th { text-transform: none; letter-spacing: 0; }
.pv-modal:has(.pv-80, .pv-58) { max-width: 460px; }
/* v26.10.12.28: POS / Sale top bar shows only the store name, centred */
body.pos-mode .shopbar { justify-content: center; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
body.pos-mode .shopbar > :not(.shopbar-home) { display: none !important; }
body.pos-mode .shopbar-home { pointer-events: none; }
body.pos-mode .shopbar-logo, body.pos-mode .shopbar-t small { display: none !important; }
body.pos-mode .shopbar-t { align-items: center; }
body.pos-mode .shopbar-t b { font-size: 28px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; }
/* v26.10.12.30: free trial / license notice in the top-right corner of the store name bar */
.licbar.lic-in-bar { background: rgba(255, 244, 214, .14); color: #ffe9a8; border: 1px solid rgba(255, 233, 168, .35); border-radius: 999px; padding: 3px 4px 3px 12px; font-size: 13px; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.licbar.lic-in-bar b { color: #fff; }
.licbar.lic-in-bar .btn { min-height: 26px; padding: 2px 10px; font-size: 12px; border-radius: 999px; }
body.pos-mode .shopbar { position: sticky; }
body.pos-mode .shopbar > #licBar { display: flex !important; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) { body.pos-mode .shopbar > #licBar { position: static; transform: none; margin-left: 10px; } .licbar.lic-in-bar > span { overflow: hidden; text-overflow: ellipsis; } }
/* v26.10.12.31: RETAIL / WHOLESALE price switch on POS / Sale (W) */
.pb-lvl { display: inline-flex; align-items: center; border: 1.5px solid var(--pb-line); border-radius: 8px; overflow: hidden; background: var(--pb-band); }
.pb-lvl button { border: 0; background: transparent; color: var(--pb-muted); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; cursor: pointer; min-height: 0; }
.pb-lvl button + button { border-left: 1.5px solid var(--pb-line); }
.pb-lvl button.on[data-lv="retail"] { background: #17803d; color: #fff; }
.pb-lvl button.on[data-lv="wholesale"] { background: #2563a8; color: #fff; }
.pb-lvl small { font-size: 10px; font-weight: 700; color: var(--pb-muted); padding: 0 6px; border-left: 1.5px solid var(--pb-line); }
/* v26.10.12.32: POS / Sale > Accounts tiles */
.ac-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .ac-tiles { grid-template-columns: repeat(2, 1fr); } }
.ac-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-left: 6px solid #2563a8; border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); min-height: 92px; }
.ac-tile:hover, .ac-tile:focus { background: #f2f7f3; outline: none; box-shadow: 0 0 0 3px #cfe5d6; }
.ac-tile.ok { border-left-color: #17803d; } .ac-tile.bad { border-left-color: #c0392b; }
.ac-tile svg { width: 26px; height: 26px; color: var(--brand); }
.ac-tile b { font-size: 16px; } .ac-tile small { color: var(--muted); font-size: 12.5px; }
.ac-tile .ac-n { position: absolute; top: 8px; right: 10px; font-weight: 800; font-size: 13px; color: var(--muted); background: #eef2ec; border-radius: 6px; padding: 1px 7px; }
/* v26.10.12.32: bottom split 80 / 20 - narrower panel button section */
.pb-bottom { grid-template-columns: minmax(0, 8fr) minmax(250px, 2fr) !important; }
.pb-panel .pba { font-size: 11.5px; padding: 3px 4px 3px 5px; border-left-width: 4px; line-height: 1.1; }
.pb-actions, .pb-shell .pb-actions { gap: 3px; padding: 4px; }
.pb-panel-top { gap: 4px !important; }
.pb-panel-top .pba.commands { font-size: 11.5px; }
.pb-panel-top .pb-clock { font-size: 18px; padding: 0 4px; }
@media (max-width: 980px) { .pb-bottom { grid-template-columns: 1fr !important; } }
.pb-footbar { grid-template-columns: minmax(0, 8fr) minmax(250px, 2fr) !important; } @media (max-width: 980px) { .pb-footbar { grid-template-columns: 1fr !important; } }
/* v26.10.12.33: Urdu item names - Jameel Noori Nastaleeq (installed, or fonts/JameelNooriNastaleeq.ttf), Noto Nastaliq Urdu as fallback */
@font-face { font-family: 'JNN Urdu'; src: local('Jameel Noori Nastaleeq'), local('JameelNooriNastaleeq'), local('Jameel Noori Nastaleeq Regular'), url('../fonts/JameelNooriNastaleeq.woff2') format('woff2'); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
.ur { font-family: 'JNN Urdu', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; direction: rtl; unicode-bidi: isolate; font-weight: 400; line-height: 1.5; }
.pb-table td.pb-name .ur { font-size: 21px; }
.pb-table td.pb-name b.ur { font-weight: 400; }
.pb-table td.pb-name .ur-side { float: right; margin-left: 14px; color: #1d3b2a; }
.rcpt .ur-r { text-align: right; font-size: 15px; line-height: 1.6; }
.pb-table td.pb-name .ur-side { line-height: 1.2; }
/* v26.10.12.34: Touch screen POS window - items on top, categories below */
.modal.tp-modal { max-width: min(1240px, 98vw); width: 98vw; }
.modal.tp-modal .body { padding: 10px 12px; }
.modal.tp-modal footer { display: none; }
.tp { display: flex; flex-direction: column; gap: 8px; height: min(calc(78vh / var(--z, 1)), 760px); }
.tp-items { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-content: start; padding: 2px; }
.tp-item { display: flex; flex-direction: column; justify-content: space-between; gap: 3px; min-height: 96px; padding: 10px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font: inherit; color: var(--ink); touch-action: manipulation; user-select: none; }
.tp-item b { font-size: 15px; line-height: 1.2; } .tp-item .ur { font-size: 19px; text-align: right; }
.tp-item .tp-pr { font-size: 18px; font-weight: 800; color: var(--brand); }
.tp-item small { color: var(--muted); font-size: 11.5px; }
.tp-item:active, .tp-item.hit { transform: scale(.96); background: #e3f3e8; border-color: var(--brand); }
.tp-item.out { opacity: .6; }
.tp-cats { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; border-top: 2px solid var(--line); }
.tp-cat { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; min-height: 64px; padding: 6px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #eef2ec; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: var(--ink); touch-action: manipulation; }
.tp-cat small { font-weight: 600; color: var(--muted); font-size: 11.5px; }
.tp-cat.on { background: var(--brand); color: #fff; border-color: var(--brand-d); } .tp-cat.on small { color: #d6eadd; }
.tp-bar { flex: none; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tp-bar .tp-tot { font-size: 20px; color: var(--brand); }
.tp-bar .btn { min-height: 48px; font-size: 15px; padding: 0 18px; }
.tp-cats { flex-wrap: wrap; max-height: 160px; overflow-y: auto; } .tp-cat { min-width: 110px; }
/* v26.10.12.36: bill section fields and function buttons fill the free space */
.pb-left > .pb-calc { flex: 1 1 auto; justify-content: space-between; }
.pb-left .pb-big3 > div { padding-top: 4px; padding-bottom: 4px; }
.pb-inrow .pb-disc-inp, .pb-inrow .pb-cash-inp { min-height: 34px; font-size: 19px; }
.pb-left .pb-inrow { flex: 1 1 auto; align-items: stretch; }
.pb-left .pb-inrow > label, .pb-left .pb-inrow > div { display: flex; flex-direction: column; justify-content: flex-end; }
.pb-left .pb-inrow .pb-disc-inp, .pb-left .pb-inrow .pb-cash-inp { flex: 1 1 auto; }
.pb-actions, .pb-shell .pb-actions { flex: 1 1 auto; align-content: stretch; }
.pb-actions .pba:last-child:nth-child(3n+1) { grid-column: span 3; }
.pb-actions .pba:last-child:nth-child(3n+2) { grid-column: span 2; }
.pb-footbar .pb-fkeys { align-content: stretch; align-items: stretch; padding: 6px 8px; }
.pb-footbar .pbf { min-height: 0; height: auto; font-size: 15px; }
/* v26.10.12.37: item file quantity discount steps, POS qty price tag */
.grid.g6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 820px) { .grid.g6 { grid-template-columns: repeat(2, 1fr); } }
.pb-qdtag { font-size: 11.5px; font-weight: 800; color: #fff; background: #17803d; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
/* v26.10.12.37: F-key buttons - key on top, what it does below */
.pb-footbar .pbf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; padding: 4px 6px; }
.pb-footbar .pbf b { font-size: 19px; font-weight: 800; letter-spacing: .02em; font-family: Consolas, 'Segoe UI', monospace; }
.pb-footbar .pbf small { font-size: 12.5px; font-weight: 600; color: var(--pb-muted); white-space: nowrap; }
.pb-footbar .pbf.warn small { color: inherit; opacity: .85; }
.billt input[data-np], .billt input[data-nw], .billt input[data-qq], .billt input[data-qp] { padding-left: 4px; padding-right: 4px; background: #f3faf5; border-color: #b9dcc4; }
.billt td:nth-child(2) { min-width: 170px; }
.billt:has(input[data-np]) input[data-q] { width: 62px !important; } .billt:has(input[data-np]) input[data-r] { width: 82px !important; }
.billt:has(input[data-np]) input[data-d] { width: 52px !important; } .billt:has(input[data-np]) input[type=date] { width: 122px !important; }
.billt:has(input[data-np]) td, .billt:has(input[data-np]) th { padding-left: 5px; padding-right: 5px; }
/* v26.10.12.38: Commands 2 next to Commands, clock narrower */
.pb-panel-top { flex-wrap: nowrap !important; gap: 4px !important; }
.pb-panel-top .pba.commands { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; padding: 2px 3px; line-height: 1.1; font-size: 11.5px; }
.pb-panel-top .pba.commands.c2 { border-left-color: #2563a8; }
.pb-panel-top .pb-clock { flex: 0 0 auto; font-size: 14px !important; padding: 2px 6px !important; letter-spacing: 0; }
/* v26.10.12.39: supplier & stock vouchers (Purchase, Purchase Return, PO, Stock Debit / Credit Adjustment) */
.pv { display: flex; flex-direction: column; gap: 10px; }
.pv .card { margin: 0; padding: 12px 14px; }
.pv-hgrid { display: grid; grid-template-columns: 150px 150px 120px minmax(220px, 2fr) 1fr 150px minmax(160px, 1.4fr); gap: 10px; align-items: end; }
.pv-hgrid .f { margin: 0; } .pv-stat b { display: block; padding: 8px 0; }
.pv-sup select { width: 100%; } .pv-sup small { display: block; margin-top: 2px; min-height: 16px; }
@media (max-width: 1200px) { .pv-hgrid { grid-template-columns: repeat(3, 1fr); } .pv-sup, .pv-note { grid-column: span 2; } }
.pv-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pv-nav { display: inline-flex; align-items: center; gap: 3px; } .pv-nav .btn { min-width: 38px; } .pv-nav span { padding: 0 6px; min-width: 64px; text-align: center; }
/* 26.10.12.91: Update / Cancel always shown (disabled while viewing) */
.pv-entry { display: grid; grid-template-columns: 130px minmax(200px, 2.2fr) repeat(auto-fit, minmax(84px, 1fr)); gap: 6px 8px; align-items: end; padding: 8px; background: #f2f7f3; border: 1px solid #cfe2d5; border-radius: 10px; }
.pv-entry.adj { grid-template-columns: 140px minmax(240px, 2.5fr) repeat(5, minmax(100px, 1fr)); }
.pv-entry .f { margin: 0; } .pv-entry .f span { font-size: 11.5px; white-space: nowrap; } .pv-entry input { min-height: 36px; padding: 4px 8px; }
.pv-entry .e-net b { display: block; padding: 8px 4px; font-size: 15px; color: var(--brand); white-space: nowrap; }
.pv-entry input[type=date] { padding: 4px; }
.pv-ebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.pv-lines { max-height: calc(42vh / var(--z, 1)); overflow: auto; } .pv-lines td, .pv-lines th { padding: 6px 7px; font-size: 13.5px; white-space: nowrap; }
.pv-lines tr.sel td { background: #fff4cf; } .pv-lines tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.pv-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pv-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 110px; }
.pv-tiles span { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } .pv-tiles b { font-size: 17px; } .pv-tiles input, .pv-tiles select { min-height: 32px; width: 120px; }
.pv-tiles .pv-net { background: var(--brand); border-color: var(--brand-d); } .pv-tiles .pv-net span { color: #cfe5d6; } .pv-tiles .pv-net b { color: #fff; font-size: 22px; }
/* v26.10.12.40: Duplicate Bill window - list left, bill right, buttons at the bottom */
.modal.db-modal { max-width: min(1280px, 98vw); width: 98vw; }
.db { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 12px; height: min(calc(70vh / var(--z, 1)), 700px); }
.db-left { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.db-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
.db-filters .f { margin: 0; } .db-filters .f span { font-size: 11.5px; } .db-filters input, .db-filters select { min-height: 34px; padding: 4px 8px; }
.db-filters .db-c { grid-column: span 2; } .db-filters .db-i { grid-column: span 2; }
.db-list { flex: 1; min-height: 0; overflow: auto; } .db-list td, .db-list th { padding: 6px 8px; }
.db-list tr.sel td { background: #fff4cf; } .db-list tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.db-right { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); padding-left: 12px; }
.db-head { padding: 4px 0 8px; font-size: 14px; }
.db-paper-wrap { flex: 1; min-height: 0; overflow: auto; background: #8a948d; border-radius: 10px; padding: 14px; display: flex; justify-content: center; align-items: flex-start; }
.db-paper:empty { display: none; }
@media (max-width: 900px) { .db { grid-template-columns: 1fr; height: auto; } .db-right { border-left: 0; padding-left: 0; } .db-paper-wrap { max-height: calc(50vh / var(--z, 1)); } }
/* v26.10.12.42: voucher forms - totals section fixed to the bottom of the window */
.content.pv-shell { display: flex; flex-direction: column; padding-bottom: 0; }
.pv-shell .pv { flex: 1; min-height: 0; }
.pv-shell .pv-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pv-shell .pv-lines { flex: 1; min-height: 80px; max-height: none; border: 1px solid var(--line); border-radius: 8px; }
.pv-shell .pv-lines thead th { position: sticky; top: 0; background: #f2f6f3; z-index: 1; }
.pv-shell .pv-tot { flex: none; border-top: 2px solid var(--line); margin-top: 8px; }
.pv-shell .pv-tiles { margin-top: 8px; }
@media (max-width: 900px) { .content.pv-shell { display: block; } }
body.pv-mode .app, body.pv-mode .main { min-height: 0 !important; }
/* v26.10.12.46: voucher forms - compact top section fixed at the top, fields top-aligned, more room for the item list */
body.pv-mode .topbar { display: none; }
body.pv-mode .content.pv-shell { padding-top: 8px; }
.pv { gap: 8px; }
.pv .pv-head { flex: none; padding: 8px 12px; }
.pv-title { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .pv-title h2 { margin: 0; font-size: 18px; }
.pv-hgrid { grid-template-columns: 120px 140px minmax(240px, 2fr) 150px 140px minmax(160px, 1.4fr); align-items: start; gap: 8px; }
.pv-hgrid .f > span { display: block; min-height: 16px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-hgrid input, .pv-hgrid select { min-height: 34px; padding: 4px 8px; }
.pv-sup small { font-weight: 400; }
.pv-bar { margin-top: 8px; padding-top: 8px; gap: 5px; } .pv-bar .btn { min-height: 34px; padding: 0 12px; }
.pv .pv-detail { padding: 8px 12px; }
.pv-entry { gap: 4px 6px; padding: 6px 8px; grid-template-columns: 110px minmax(160px, 1.8fr) repeat(auto-fit, minmax(70px, 1fr)); align-items: start; }
.pv-entry .f span { font-size: 11px; display: block; min-height: 14px; }
.pv-entry input { min-height: 32px; padding: 3px 6px; }
.pv-entry .e-net b { padding: 6px 2px; }
.pv-ebar { margin: 6px 0; } .pv-ebar .btn { min-height: 34px; padding: 0 12px; }
.pv-tiles { gap: 6px; } .pv-tiles > div { padding: 4px 10px; } .pv-tiles b { font-size: 16px; } .pv-tiles .pv-net b { font-size: 20px; }
.pv-tiles input, .pv-tiles select { min-height: 30px; }
@media (max-width: 1200px) { .pv-hgrid { grid-template-columns: repeat(3, 1fr); } }
.pv-sup > span small { display: inline !important; margin: 0 !important; min-height: 0 !important; }
.pv-entry { grid-template-columns: 110px minmax(170px, 2fr) repeat(auto-fit, minmax(66px, 1fr)); }
.pv-entry .pv-row2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.pv-row2 .f:first-child { width: 160px; } .pv-row2 .f { width: 140px; }
.pv-row2 .pv-ebar { margin: 0 0 0 6px; flex: 1; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pv-row2 .pv-ebar #eInfo { margin-left: auto; }
/* v26.10.12.46: capital letters in all fields (Preferences) */
body.caps input:not([type]), body.caps input[type=text], body.caps input[type=search], body.caps input[type=tel], body.caps textarea { text-transform: uppercase; }
body.caps input[data-nocaps], body.caps #svU, body.caps #pfU, body.caps #saU, body.caps #saSP, body.caps #fbRel, body.caps input[dir=rtl] { text-transform: none; }
body.caps input::placeholder, body.caps textarea::placeholder { text-transform: none; }
/* v26.10.12.46: every screen except Home and POS - store name centred like POS / Sale, smaller */
body.cname .shopbar { justify-content: center; padding-top: calc(5px + env(safe-area-inset-top)); padding-bottom: 5px; }
body.cname .shopbar > :not(.shopbar-home):not(#licBar) { display: none !important; }
body.cname .shopbar-home { pointer-events: none; }
body.cname .shopbar-logo, body.cname .shopbar-t small { display: none !important; }
body.cname .shopbar-t { align-items: center; }
body.cname .shopbar-t b { font-size: 20px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2; }
body.cname .shopbar > #licBar { display: flex !important; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
body.cname .shopbar { position: sticky; }
@media (max-width: 900px) { body.cname .shopbar > #licBar { position: static; transform: none; margin-left: 10px; } }
body.cname .topnav { position: static !important; top: auto !important; }
/* v26.10.12.46: window buttons (− minimize, × close) and task bar */
.modal header .mn { margin-left: auto; }
.modal header .mn + .x { margin-left: 4px; }
.modal header .mn, .winbtns button { background: transparent; border: 1px solid transparent; border-radius: 8px; width: 34px; height: 34px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.modal header .mn:hover, .winbtns button:hover { background: #eef2ec; border-color: var(--line); color: var(--ink); }
.winbtns button.x:hover { background: #fde3e1; color: #b0261b; border-color: #f2b8b3; }
.winbtns { display: inline-flex; gap: 4px; margin-left: auto; padding-left: 10px; }
.topbar .winbtns { order: 99; } .pv-title .winbtns { margin-left: auto; }
.modal-bg.min { display: none !important; }
#taskbar { position: fixed; left: 10px; bottom: 10px; z-index: 120; display: flex; flex-wrap: wrap; gap: 6px; max-width: 70vw; pointer-events: none; }
.tb-chip { pointer-events: auto; display: inline-flex; align-items: center; background: #14321f; color: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); overflow: hidden; }
.tb-chip button { background: transparent; border: 0; color: inherit; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px; cursor: pointer; }
.tb-chip .tb-open:hover { background: rgba(255,255,255,.12); } .tb-chip .tb-x { border-left: 1px solid rgba(255,255,255,.2); font-size: 16px; } .tb-chip .tb-x:hover { background: #b0261b; }
body.pos-mode #taskbar { bottom: 96px; }
/* v26.10.12.46: top menu only on the Home (main) screen; every other screen closes (×) or minimizes (−) back to Home */
body:not(.home-mode) .topnav { display: none !important; }
/* v26.10.12.46: Item File screen - item fields on top, bar, item list below */
.content.if-shell { display: flex; flex-direction: column; }
.if { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.if .card { margin: 0; padding: 8px 12px; }
.if-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 15px; }
.if-form { max-height: calc(46vh / var(--z, 1)); overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fbfcfb; }
.if-form .modal.inline { position: static; box-shadow: none; max-width: none; width: auto; max-height: none; background: transparent; border-radius: 0; animation: none; }
.if-form .modal.inline .body { padding: 6px 0 10px; overflow: visible; max-height: none; }
.if-form h3 { margin: 10px 0 4px; font-size: 14px; }
.if-shell:not(.if-editing) .if-form input:disabled, .if-shell:not(.if-editing) .if-form select:disabled { background: #f3f5f3; color: var(--ink); opacity: 1; }
.if-shell:not(.if-editing) #ifSave, .if-shell:not(.if-editing) #ifCancel { display: none; }
.if-list { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
.if-rows { flex: 1; min-height: 0; overflow: auto; } .if-rows thead th { position: sticky; top: 0; background: #f2f6f3; z-index: 1; }
.if-rows tr.sel td { background: #fff4cf; } .if-rows tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.if-rows td, .if-rows th { padding: 6px 8px; }
body.fit-mode .app, body.fit-mode .main { min-height: 0 !important; } .content.if-shell { padding-bottom: 0; } .if-form { max-height: none; flex: 0 1 auto; } .if-top { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; max-height: 58%; } .if-top .if-form { overflow: auto; min-height: 0; }
.if-form .grid.g3, .if-form .grid.g4 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 10px; }
.if-form .grid.g6 { gap: 4px 10px; }
.if-form .f { margin: 0 0 4px; } .if-form .f > span { font-size: 11.5px; }
.if-form input, .if-form select { min-height: 32px; padding: 3px 8px; }
.if-form h3 { margin: 8px 0 2px; font-size: 13px; color: var(--brand); }
@media (max-width: 1100px) { .if-form .grid.g3, .if-form .grid.g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v26.10.12.47: Barcode Generation screen */
.bc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; flex: 1; min-height: 0; }
.content.bc-shell { display: flex; flex-direction: column; }
.bc .card { margin: 0; padding: 10px 12px; }
.bc-left { display: flex; flex-direction: column; gap: 8px; overflow: auto; } .bc-left h3 { margin: 0; font-size: 15px; }
.bc-fmts { display: flex; flex-direction: column; gap: 6px; }
.bc-fmt { justify-content: flex-start; text-align: left; min-height: 46px; gap: 10px; padding: 6px 10px; }
.bc-fmt b { background: var(--brand); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 13px; }
.bc-fmt span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; } .bc-fmt small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.bc-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bc-entry { display: grid; grid-template-columns: 150px minmax(200px, 2fr) repeat(auto-fit, minmax(96px, 1fr)); gap: 6px 8px; align-items: end; padding: 8px; background: #f2f7f3; border: 1px solid #cfe2d5; border-radius: 10px; }
.bc-entry .f { margin: 0; } .bc-entry .f span { font-size: 11.5px; white-space: nowrap; } .bc-entry input, .bc-entry select { min-height: 34px; padding: 4px 8px; }
.bc-list { flex: 1; min-height: 160px; display: flex; flex-direction: column; } .bc-list .tablewrap { flex: 1; overflow: auto; }
.bc-list thead th { position: sticky; top: 0; background: #f2f6f3; z-index: 1; } .bc-list tr.sel td { background: #fff4cf; }
.bc-sum { padding-top: 6px; font-weight: 700; }
@media (max-width: 900px) { .bc { grid-template-columns: 1fr; } }
/* the labels */
.lbs { display: flex; flex-wrap: wrap; font-family: Arial, sans-serif; color: #000; }
.lbs.roll .lb { page-break-after: always; break-after: page; }
.lbs.a4 { gap: 0 2.5mm; } .lbs.a4 .lb { border: 1px dashed #ccc; }
.lb { box-sizing: border-box; overflow: hidden; padding: 1mm 1.5mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3mm; }
.lb i { font-style: normal; font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }
.lb b { font-size: 8.5px; line-height: 1.1; max-height: 2.3em; overflow: hidden; }
.lb svg { max-width: 100%; height: auto; max-height: 55%; }
.lb .p { font-weight: 800; font-size: 12px; } .lb .p.sm { font-size: 10px; }
.lb .lr { display: flex; justify-content: space-between; width: 100%; font-size: 8px; } .lb .lr .b { font-weight: 800; }
.lb.pt .pp { font-size: 22px; font-weight: 900; line-height: 1; } .lb.pt b { font-size: 10px; } .lb.pt small { font-size: 7px; }
.lb.dl .save { background: #000; color: #fff; font-weight: 900; font-size: 9px; padding: 0 4px; border-radius: 2px; }
.lb.dl s { font-size: 9px; color: #444; } .lb.dl .pp { font-size: 13px; font-weight: 900; } .lb.dl .lr { align-items: baseline; justify-content: center; gap: 6px; }
.content.bc-shell { padding-bottom: 0; } .bc { grid-template-columns: 255px minmax(0, 1fr); } .bc-fmt span { font-size: 13.5px; } .bc-left select { font-size: 13px; }
.bc-list .tablewrap { min-height: 0; }

/* v26.10.12.48: compact top menu drop-downs */
.tn-dd { min-width: 210px; padding: 3px; border-radius: 0 0 8px 8px; }
.tn-dd a { padding: 5px 10px; font-size: 13px; line-height: 1.25; border-radius: 5px; white-space: nowrap; }
.tn-g > button { padding: 7px 10px; font-size: 13px; }
/* v26.10.12.48: Reports - menu across the top like the Home screen (no left list) */
.rp-layout.rp-top { display: block; }
.rp-menu { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding: 0 6px; position: relative; z-index: 20; }
.rp-menu .tn-g.cur > button { color: var(--brand-d); border-bottom-color: var(--brand); }
.rp-menu .tn-dd { z-index: 46; }
.rp-crumb { background: var(--card); padding: 10px 18px 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 15px; }
.rp-top .rp-main { border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--line); border-top: 0; padding-top: 10px; }
.rp-menu .tn-dd a { color: var(--ink); text-decoration: none; font-weight: 500; } .rp-menu .tn-dd a.active { font-weight: 700; color: var(--brand-d); }
/* v26.10.12.49: fixed bottom strip on Home and every full-page screen (not POS / Sale, not before login) */
.app-foot { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: 24px; line-height: 24px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--brand-d); color: #cfe5d6; }
.app-foot a { color: #fff; font-weight: 800; text-decoration: none; } .app-foot a:hover { text-decoration: underline; }
body.logged-in:not(.pos-mode) .app-foot { display: block; }
body.logged-in:not(.pos-mode) .app { padding-bottom: 24px; }
body.logged-in:not(.pos-mode) #taskbar { bottom: 32px; }
.home-foot { display: none !important; }
body.logged-in .home-shell { min-height: calc(calc(100vh / var(--z, 1)) - 97px - 24px); } body.logged-in.home-mode .app { min-height: 0; }
/* v26.10.12.50: install offer card (instead of the Install app button) */
.inst-card { position: fixed; right: 14px; bottom: 34px; z-index: 130; width: 280px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.22); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; animation: instIn .25s ease-out; }
.inst-card span { color: var(--muted); font-size: 12.5px; } .inst-card div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
@keyframes instIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
/* v26.10.12.50: Home - tiles a bit higher, page never scrolls */
@media (min-width: 821px) { body.home-mode { overflow: hidden; } body.logged-in .home-shell { height: calc(calc(100vh / var(--z, 1)) - 97px - 24px); min-height: 0; overflow: hidden; } }
.home-hero { min-height: 0; }
.home-tiles { margin-top: auto; margin-bottom: clamp(24px, calc(9vh / var(--z, 1)), 110px); }
/* v26.10.12.50: Home - POS / Sale tile alone on top, the other tiles in a row below it */
.home-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-tile.main { grid-column: 1 / -1; justify-self: start; width: min(100%, 440px); min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 18px 22px; }
.home-tile.main svg { width: 40px; height: 40px; } .home-tile.main b { font-size: 24px; } .home-tile.main small { margin-left: auto; }
@media (max-width: 900px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-tiles { margin-top: clamp(16px, calc(6vh / var(--z, 1)), 70px); margin-bottom: auto; }
/* v26.10.12.51: Home banners - other software and services */
.home-promos { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.promo { position: relative; border-radius: 14px; padding: 12px 16px 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px); color: #fff; min-height: 104px; display: flex; flex-direction: column; overflow: hidden; }
.promo.svc { background: rgba(234,166,30,.16); border-color: rgba(234,166,30,.45); }
.promo-h { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #d6eadd; } .promo.svc .promo-h { color: #ffd98a; }
.promo-body { position: relative; flex: 1; min-height: 44px; }
.promo-item { position: absolute; inset: 4px 0 0; display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.promo-item.on { opacity: 1; transform: none; }
.promo-item b { font-size: 18px; } .promo-item span { font-size: 13px; color: #e2efe7; }
.promo-f { display: flex; gap: 14px; font-size: 12px; } .promo-f a { color: #fff; font-weight: 700; text-decoration: none; opacity: .85; } .promo-f a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 760px) { .home-promos { grid-template-columns: 1fr; } }
.promo-body { min-height: 54px; } .promo-f { margin-top: 4px; } .promo { min-height: 112px; }
/* v26.10.12.51: main top menu - every item on one line, vertically centred in the strip */
body.nav-top .topnav { align-items: center; min-height: 40px; flex-wrap: nowrap; }
.topnav > a, .topnav .tn-g > button { display: inline-flex; align-items: center; height: 40px; padding: 0 11px; line-height: 1; font-size: 13px; box-sizing: border-box; }
.topnav .tn-g { display: inline-flex; align-items: stretch; }
.topnav .tn-backup { align-self: center; margin-left: auto; }
/* v26.10.12.52: Home banners - two narrow sliders at the bottom left, above the bottom strip */
.home-promos { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; grid-template-columns: none; }
.promo { width: min(420px, 100%); min-height: 0; padding: 8px 12px 8px; }
.promo-body { min-height: 0; overflow: hidden; margin: 6px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.promo-track { display: flex; gap: 8px; width: max-content; animation-name: promoSlide; animation-timing-function: linear; animation-iteration-count: infinite; }
.promo:hover .promo-track { animation-play-state: paused; }
@keyframes promoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.promo-chip { flex: none; width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 9px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.promo.svc .promo-chip { background: rgba(234,166,30,.18); border-color: rgba(234,166,30,.4); }
.promo-chip b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-chip span { font-size: 11px; line-height: 1.25; color: #e2efe7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-f { margin-top: 2px; }
@media (min-width: 821px) { .home-hero { padding-bottom: 14px; } }
.home-hero, .home-promos { min-width: 0; } .home-promos { width: 100%; } .promo { min-width: 0; overflow: hidden; flex: 0 1 420px; }
@media (min-width: 821px) { body.logged-in .home-shell { height: auto; } body.logged-in.home-mode .content.home-shell { overflow: hidden; } }
/* v26.10.12.54: POS / Sale tile - same size as the tiles below, alone in the first column (edges line up) */
.home-tile.main { grid-column: 1 / 2; justify-self: stretch; width: auto; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; }
.home-tile.main + .home-tile { grid-column: 1; }
.home-tile.main svg { width: 30px; height: 30px; } .home-tile.main b { font-size: 20px; }
.home-tiles { grid-auto-rows: 1fr; } .home-tile.main { justify-content: flex-start; }
/* v26.10.12.55: Item File - filter left, three field sections + photo, tabs, buttons, list at the bottom */
.content.if-shell { display: flex; flex-direction: column; padding-bottom: 0; }
.if2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.if2 .card { margin: 0; padding: 8px 12px; }
.if2-filter { grid-row: 1; display: flex; flex-direction: column; gap: 4px; overflow: auto; } .if2-filter h3 { margin: 0 0 2px; font-size: 14px; }
.if2-filter .f { margin: 0; } .if2-filter .f > span { font-size: 11px; } .if2-filter input, .if2-filter select { min-height: 30px; padding: 2px 6px; font-size: 13px; }
.if2-main { grid-row: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.if2-list { grid-column: 1 / -1; grid-row: 2; min-height: 120px; display: flex; flex-direction: column; } .if2-list .tablewrap { flex: 1; overflow: auto; }
.if2-head { display: flex; gap: 8px; align-items: baseline; font-size: 14px; margin-bottom: 4px; }
.if2-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 190px; gap: 12px; align-items: start; }
.if2-c1, .if2-c2, .if2-c3 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.if2 .f { margin: 0; } .if2-fields .f > span { font-size: 11px; display: block; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if2-fields input, .if2-fields select { min-height: 30px; padding: 2px 8px; font-size: 13.5px; }
.if2-row { display: flex; gap: 8px; align-items: flex-end; } .if2-row > .f { flex: 1; min-width: 0; }
.if2-cat { display: flex; gap: 4px; } .if2-cat input { width: 70px; flex: none; } .if2-cat .btn { flex: none; min-height: 30px; padding: 0 9px; font-weight: 800; } .if2-cat select { flex: 1; min-width: 0; }
.if2-disc > div { display: flex; gap: 6px; align-items: center; } .if2-disc input[type=number] { width: 70px; } .if2-disc .chk { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 700; }
.if2-c2 .ur { font-size: 18px; }
.if2-photo { height: 132px; border: 1.5px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f7faf8; overflow: hidden; color: var(--muted); font-size: 13px; }
.if2-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.if2-phb { justify-content: space-between; flex-wrap: wrap; gap: 4px; } .if2-phb .btn { flex: 1; padding: 0 6px; min-height: 28px; }
.if2-imp { justify-content: center; min-height: 34px; } .if2-c3 > a { text-align: center; }
.if2-tabs { margin: 6px 0 4px; } .if2-tabs button { padding: 4px 12px; font-size: 12.5px; }
.if2-tab { min-height: 54px; } .if2-margin { align-self: center; }
.if2-ut { border-collapse: collapse; } .if2-ut td, .if2-ut th { padding: 2px 4px; font-size: 12px; } .if2-ut input { width: 100px; min-height: 28px; }
.if2-bar { padding: 6px 10px !important; margin-top: 0; border-top: 0; } .if2-bar .btn { min-height: 32px; padding: 0 11px; }
.if-shell:not(.if-editing) .if2-fields input:disabled, .if-shell:not(.if-editing) .if2-fields select:disabled { background: #f3f5f3; color: var(--ink); opacity: 1; }
@media (max-width: 1100px) { .if2 { grid-template-columns: 1fr; } .if2-filter { display: none; } .if2-cols { grid-template-columns: 1fr 1fr; } .if2-c3 { grid-column: 1 / -1; } }
.if2-filter { height: 0; min-height: 100%; gap: 2px; } .if2-filter .f > span { min-height: 0; }
.if-shell:not(.if-editing) #iPhUp { opacity: .45; pointer-events: none; }

/* v26.10.12.56: Jameel Noori Nastaleeq everywhere Urdu is shown or typed */
[dir=rtl], .ur, input[dir=rtl], textarea[dir=rtl], .rcpt .ur-r { font-family: 'JNN Urdu', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; }
input[dir=rtl] { font-size: 18px; line-height: 1.6; }
/* v26.10.12.56: Item File - filter section on the right */
.if2 { grid-template-columns: minmax(0, 1fr) 210px; }
.if2-main { grid-column: 1; } .if2-filter { grid-column: 2; grid-row: 1; }
@media (max-width: 1100px) { .if2 { grid-template-columns: 1fr; } }
.pw-dots { -webkit-text-security: disc; text-security: disc; font-family: text-security-disc, inherit; letter-spacing: .15em; }
body.pos-mode .inst-card { display: none !important; } /* never on POS / Sale */
/* v26.10.12.58: "Software Developed by" strip also fixed at the bottom of POS / Sale (below the F-key bar) */
body.logged-in.pos-mode .app-foot { display: block; }
body.logged-in.pos-mode .app { padding-bottom: 24px; }
body.pos-mode #taskbar { bottom: 120px; }
/* v26.10.12.59: Category / Supplier / Sub category / Brand - label on the left, one line each */
.if2-pick { display: flex !important; align-items: center; gap: 6px; }
.if2-fields .if2-pick > span { flex: 0 0 82px; min-height: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.if2-pick .if2-cat { flex: 1; min-width: 0; } .if2-pick .if2-cat input { width: 58px; }
.if2-pick { flex-direction: row !important; } .if2-pick .if2-cat { display: flex !important; flex-direction: row !important; align-items: center; }
.if2-bar { flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; } .if2-bar .btn { padding: 0 8px !important; font-size: 13px; white-space: nowrap; } .if2-bar .pv-nav .btn { min-width: 30px; padding: 0 6px !important; } .if2-bar .btn svg { width: 15px; height: 15px; }
/* v26.10.12.60: bill calculation - one row of four: Actual price total · Sub total · Payment (type + Enter) · Change */
.pb-big4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 1; }
.pb-big4 > div, .pb-big4 > label { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 6px 10px; border-radius: 8px; background: var(--pb-band); margin: 0; min-width: 0; }
.pb-big4 span { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--pb-muted); white-space: nowrap; }
.pb-big4 b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--pb-ink); }
.pb-big4 .pb-totbox { background: #e3eefc; border: 1.5px solid #b8d0f0; } .pb-big4 .pb-totbox b { color: var(--pb-blue); font-size: 30px; }
.pb-big4 .pb-paybox { background: #fff; border: 2px solid var(--pb-fieldline); align-items: stretch; }
.pb-big4 .pb-paybox span { text-align: right; color: var(--pb-ink); }
.pb-big4 .pb-cash-inp { width: 100% !important; border: 0 !important; background: transparent !important; text-align: right; font-size: 28px !important; font-weight: 800; padding: 0 !important; min-height: 38px !important; box-shadow: none !important; }
.pb-big4 .pb-paybox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234,166,30,.25); }
.pb-calc { display: flex; }
.pb-discbox { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: end; padding: 6px 10px; border-radius: 10px; background: #fff7e6; border: 1.5px solid #f0c97a; }
.pb-discbox[hidden], .pb-about[hidden] { display: none !important; }
.pb-discbox label { display: flex; flex-direction: column; margin: 0; } .pb-discbox span { font-size: 11px; font-weight: 700; color: #8a5a00; letter-spacing: .05em; }
.pb-discbox .pb-disc-inp { width: 100%; min-height: 34px; font-size: 18px; }
.pb-saved { display: flex; flex-direction: column; align-items: flex-end; } .pb-saved b { font-size: 20px; color: #b8690a; font-weight: 800; }
.pb-discbox { display: flex; gap: 8px; align-items: flex-end; } .pb-discbox > label { flex: 0 1 150px; } .pb-discbox > label[hidden] { display: none !important; } .pb-discbox .pb-saved { margin-left: auto; }
/* v26.10.12.62: POS bill rows - thinner, every box on one line (double % boxes too) */
.pb-table td { padding: 2px 10px; height: 34px; vertical-align: middle; }
.pb-table input { min-height: 28px; height: 28px; padding: 1px 6px; font-size: 15.5px; }
.pb-table tbody td { font-size: 16px; }
.pb-table td .btn.sm, .pb-table td button { min-height: 26px; height: 26px; padding: 0 8px; }
.pb-dd { display: inline-flex; align-items: center; gap: 3px; }
.pb-dd input { width: 50px !important; text-align: right; }
.pb-dd > span { padding: 0 !important; color: var(--pb-muted); font-weight: 700; }

/* 26.10.12.63 Item File buttons in two rows, no scroll bar */
.if2-bar { flex-direction: column !important; align-items: stretch !important; overflow: visible !important; gap: 5px !important; }
.if2-brow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .if2-brow .spacer { flex: 1; }
.if2-bar .btn.if2-nav { min-width: 0 !important; padding: 0 10px !important; }
/* 26.10.12.63 Item File: all sections shown under headings (no tabs), list pane smaller */
.if2-secs { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6px 10px; margin-top: 6px; }
.if2-secs .if2-tab { min-height: 0; border: 1px solid #e3e9e5; border-radius: 10px; padding: 0 8px 6px; background: #fbfcfb; }
.if2-secs .if2-tab[data-tb="price"] { grid-column: 1 / -1; }
.if2-h { display: inline-block; margin: 5px 0 2px; padding: 2px 12px; border-radius: 999px; background: #e8eeea; color: #2f4a3a; font-size: 12.5px; font-weight: 600; }
.if2-secs .if2-row { gap: 6px; } .if2-secs .f > span { font-size: 11.5px; } .if2-secs input, .if2-secs select { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
.if2-secs .if2-tab[data-tb="units"] .btn.sm { margin-top: 4px; }
.if2-flash { animation: if2fl 1.2s; } @keyframes if2fl { 0%, 60% { box-shadow: 0 0 0 3px #f4b740; } 100% { box-shadow: none; } }
.if2-list { min-height: 90px !important; }
/* sections: 2 rows - Prices | Stock, then Qty discount | Bigger units | More */
.if2-secs { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 6px 8px !important; }
.if2-secs .if2-tab { grid-column: span 4 !important; padding: 0 7px 5px; }
.if2-secs .if2-tab[data-tb="price"] { grid-column: span 7 !important; } .if2-secs .if2-tab[data-tb="stock"] { grid-column: span 5 !important; }
.if2-hl { display: flex; align-items: center; gap: 10px; min-height: 26px; } .if2-hl .if2-h { margin: 3px 0 1px; } .if2-hl .chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.if2-hl #iAddU { margin: 0 !important; min-height: 22px; padding: 0 8px; font-size: 12px; } .if2-hl .if2-margin { margin-left: auto; } .if2-oldbc { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.if2-secs .if2-row { flex-wrap: nowrap !important; } .if2-secs .if2-row > .f { flex: 1 1 0; min-width: 0; } .if2-secs .f > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if2-secs #iUnitsBox { max-height: 64px; overflow: auto; } .if2-secs .if2-ut th { font-size: 10.5px; padding: 0 3px; } .if2-secs .if2-ut td { padding: 1px 2px; } .if2-secs .if2-ut input { min-height: 26px; padding: 2px 5px; min-width: 0; width: 100%; }
.if2-secs .if2-tab[data-tb="units"] { grid-column: span 5 !important; } .if2-secs .if2-tab[data-tb="qd"] { grid-column: span 4 !important; } .if2-secs .if2-tab[data-tb="more"] { grid-column: span 3 !important; }
.if2-hl { min-height: 22px; } .if2-hl .if2-h { margin: 3px 0 0; padding: 1px 10px; font-size: 12px; }
.if2-secs .f { gap: 1px !important; margin: 0 !important; } .if2-secs .f > span { font-size: 11px !important; line-height: 14px; }
.if2-secs input, .if2-secs select { min-height: 28px !important; height: 28px; padding-top: 2px !important; padding-bottom: 2px !important; }
.if2-secs .if2-ut input { height: 26px; min-height: 26px !important; } .if2-secs #iUnitsBox { max-height: 58px; }
.if2-secs .if2-tab { padding-bottom: 4px !important; } .if2-secs { margin-top: 4px !important; }
.if2-secs .if2-ut { table-layout: fixed; width: 100%; } .if2-secs .if2-ut th:first-child { width: 26%; } .if2-secs .if2-ut th:last-child { width: 30px; }
.if2-secs .if2-ut .btn { min-height: 24px; height: 24px; width: 26px; padding: 0 !important; }
/* Stock under Prices & cost (left), Bigger units / Qty discount / More on the right */
.if2-secs .if2-tab[data-tb="price"] { grid-column: 1 / span 5 !important; grid-row: 1; } .if2-secs .if2-tab[data-tb="stock"] { grid-column: 1 / span 5 !important; grid-row: 2; }
.if2-secs .if2-tab[data-tb="units"] { grid-column: 6 / span 7 !important; grid-row: 1; } .if2-secs .if2-tab[data-tb="qd"] { grid-column: 6 / span 4 !important; grid-row: 2; } .if2-secs .if2-tab[data-tb="more"] { grid-column: 10 / span 3 !important; grid-row: 2; }
/* Prices: "Cost price [cost][+%]" then "Sale price [retail][wholesale]" - no heading */
.if2-pc { padding-top: 5px !important; display: flex; flex-direction: column; gap: 4px; }
.if2-pr { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: end; }
.if2-pr:first-of-type { grid-template-columns: 74px minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; }
.if2-pl { font-size: 12.5px; font-weight: 600; color: #2f4a3a; align-self: center; } .if2-pr .if2-pl:last-child { display: none; }
.if2-pr + .if2-pr .if2-pl { align-self: end; padding-bottom: 6px; } .if2-mk { text-align: center; }
/* Item File: no "Item File" title bar - window buttons on the filter box */
body.if-mode .topbar { display: none !important; }
.if2-filter h3 { display: flex; align-items: center; gap: 6px; } .if2-filter h3 .winbtns { margin-left: auto; }
/* 26.10.12.66 price + stock box: labels on the left, read-only labels inside the boxes */
.if2-secs .if2-tab[data-tb="price"] { grid-row: 1 / span 2 !important; }
.if2-pr, .if2-pr:first-of-type { grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important; }
.if2-pr.if2-pr1 { grid-template-columns: 82px minmax(0, 1fr) 70px minmax(0, 1fr) !important; } .if2-pr .if2-pl { align-self: center !important; padding: 0 !important; white-space: nowrap; }
.if2-pr > .ft-levels { display: block; min-width: 0; }
.if2-ib { position: relative; display: block; min-width: 0; margin: 0; } .if2-ib input { width: 100%; padding-right: 68px !important; }
.if2-ib i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: #8a978f; pointer-events: none; white-space: nowrap; }
.if2-ro { background: #eef3ef !important; font-weight: 600; }
.if2-pc input { min-width: 0; width: 100%; }
/* 26.10.12.66 Item File: no header line, every label on the LEFT of its box */
.if2-head { display: none !important; }
.if2-fields .f:not(.if2-pick):not(.chk) { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0; }
.if2-fields .f > span { flex: 0 0 auto; min-height: 0; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.if2-fields .f > input, .if2-fields .f > select, .if2-fields .f > div { flex: 1 1 0; min-width: 0; width: auto; }
.if2-c1 > .f > span, .if2-c1 > .if2-row > .f:first-child > span, .if2-c2 > .f > span, .if2-c2 > .if2-row > .f:first-child > span { flex-basis: 82px !important; }
.if2-fields .if2-row { flex-wrap: nowrap; gap: 8px; } .if2-c1, .if2-c2 { gap: 5px !important; }
.if2-disc > div { display: flex; align-items: center; gap: 6px; } .if2-disc input { min-width: 0; }
/* right side: Bigger units, then one line Qty discount, then one line More */
.if2-secs .if2-tab[data-tb="price"] { grid-row: 1 / span 3 !important; }
.if2-secs .if2-tab[data-tb="units"] { grid-column: 6 / span 7 !important; grid-row: 1 !important; }
.if2-secs .if2-tab[data-tb="qd"] { grid-column: 6 / span 7 !important; grid-row: 2 !important; } .if2-secs .if2-tab[data-tb="more"] { grid-column: 6 / span 7 !important; grid-row: 3 !important; }
.if2-line { display: flex; align-items: center; gap: 6px; padding: 4px 8px !important; } .if2-line .if2-pl { flex: 0 0 82px; font-size: 12.5px; font-weight: 600; color: #2f4a3a; }
.if2-qd { display: flex; gap: 3px; flex: 1; min-width: 0; } .if2-qd .if2-ib { flex: 1; } .if2-qd .if2-ib input { padding-right: 38px !important; }
.if2-line > .if2-ib { flex: 1; } .if2-line > .if2-ib input { padding-right: 56px !important; } .if2-line > select { flex: 1; min-width: 0; height: 28px; }
.if2-line .chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.if2-line .if2-oldbc { flex: 0 1 auto; max-width: 160px; margin-left: 0; }
.if2-fields .if2-row.if2-phb { flex-wrap: wrap; gap: 4px; } .if2-phb .btn { flex: 1 1 30%; min-width: 0; padding: 0 4px !important; }
.if2-line .if2-oldbc { max-width: 120px; } .if2-line > .if2-ib { min-width: 70px; }
.if2-spare { min-width: 56px; } .if2-bar .btn:disabled { opacity: .5; }
/* Item File list: smaller font, thin rows */
.if2-list .if-rows td, .if2-list .if-rows th { padding: 2px 8px !important; font-size: 12px; line-height: 1.35; }
.if2-list .if-rows td b { font-weight: 600; } .if2-list .if-rows .mono { font-size: 12px; } .if2-list .if-rows .badge { font-size: 10.5px; padding: 0 6px; }
.if2-list .if-rows th { font-size: 10.5px; } .if2-list .if-rows .ur, .if2-list .if-rows [dir="rtl"] { font-size: 13px; line-height: 1.2; }
.if2-list { padding-top: 6px !important; padding-bottom: 6px !important; }
.if-shell:not(.if-editing) #ifSave, .if-shell:not(.if-editing) #ifCancel { display: inline-flex !important; } /* always shown next to Add (disabled while viewing) */
/* 26.10.12.69 readability: no cut-off boxes, darker inside labels, spare button hidden */
.if2-c2 .if2-row > .f:has(#iSize) { flex: 1.5 1 0; } .if2-c2 .if2-row > .f:has(#iUnit) { flex: 1.1 1 0; } .if2-c2 .if2-row > .f:has(#iPk) { flex: 1 1 0; }
.if2-c2 .if2-row > .f:has(#iUnit) > span, .if2-c2 .if2-row > .f:has(#iPk) > span { flex-basis: auto !important; }
.if2-c2 #iSize, .if2-c2 #iUnit, .if2-c2 #iPk { padding-left: 7px !important; padding-right: 5px !important; }
.if2-line > select#iFt { flex: 1.4 1 0; min-width: 96px; }
.if2-line .if2-oldbc { max-width: none; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.if2-ib i { color: #5b6a61 !important; font-weight: 600; }
.if2-spare { display: none !important; }
/* 26.10.12.69 Item File: mode border, button colours, smaller photo, required fields */
.if-shell.if-add .if2-fields { box-shadow: 0 0 0 3px #2e9b5a; border-color: #2e9b5a; }
.if-shell.if-edit .if2-fields { box-shadow: 0 0 0 3px #e59a1d; border-color: #e59a1d; }
.if2-bar .btn { background: #f7f8f7; border-color: #dfe4e0; color: #2c3b32; }
.if2-bar .btn.if2-nav { background: #eceff0; border-color: #d3d9dc; color: #2f3b44; }
.if2-bar #ifAdd { background: #e3f3e8; border-color: #9fd0b0; color: #17613f; font-weight: 600; }
.if2-bar #ifSave { background: #1f7a4a; border-color: #1f7a4a; color: #fff; font-weight: 600; }
.if2-bar #ifDel { background: #fdecea; border-color: #f2b8b3; color: #b0261b; }
.if2-bar #ifEdit { background: #fff4e0; border-color: #f0cf95; color: #8a5300; }
.if2-bar .btn:not(:disabled):hover { filter: brightness(.96); }
.if2-bar .btn:disabled, .if2-bar #ifAdd:disabled, .if2-bar #ifSave:disabled, .if2-bar #ifDel:disabled, .if2-bar #ifEdit:disabled { opacity: 1 !important; background: #f3f4f3 !important; border-color: #e5e8e6 !important; color: #a5aea8 !important; cursor: not-allowed; filter: none; }
.if2-photo { height: 92px !important; } .if2-noph { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #9aa7a0; } .if2-noph small { font-size: 11px; }
.if-shell.if-editing #iCode, .if-shell.if-editing #iName, .if-shell.if-editing #iPrice { background: #fff8d2 !important; border-color: #ead78a !important; }
body.alt-on #ifSave .ak { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; background: #f6c34a; color: #1b2b20; border-radius: 3px; padding: 0 2px; }
/* 26.10.12.70 POS: dropdown arrow in the item box, preview line, commands left + big clock */
.pb-qwrap { position: relative; flex: none; } .pb-qwrap .pb-qbox { padding-right: 40px !important; }
.pb-qdd { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: calc(100% - 8px); border: 0; border-left: 1px solid var(--pb-line, #d5dfd8); background: transparent; font-size: 18px; color: #2f5a41; cursor: pointer; border-radius: 0 8px 8px 0; }
.pb-qdd:hover { background: #e7f1ea; }
.pb-prev { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 72px 90px 64px 90px 28px; align-items: center; gap: 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.pb-prev > span { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-prev .n { text-align: right; font-weight: 700; }
.pb-prev .pp-t { color: var(--pb-accent, #17613f); font-size: 19px; } .pb-prev .pp-d small { font-size: 12px; margin-left: 6px; } .pb-prev.none .pp-d { font-size: 14px; }
.pb-prev.ok { background: #f2faf4; border: 1px solid #cfe6d6; border-radius: 10px; min-height: 40px; }
.pb-panel-top { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: auto auto; gap: 4px !important; padding: 5px 6px 0 !important; }
.pb-panel-top #pbCommands { grid-column: 1; grid-row: 1; } .pb-panel-top #pbCommands2 { grid-column: 1; grid-row: 2; }
.pb-panel-top .pba.commands { text-align: left !important; justify-content: flex-start; width: 100%; margin: 0; }
.pb-panel-top .pb-clock { grid-column: 2 / 4; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; font-size: 34px !important; padding: 0 8px !important; min-height: 0; letter-spacing: .03em; background: #10301f; color: #fff; border-color: #10301f; border-radius: 10px; }
.pb-panel-top .pb-clock { font-size: 30px !important; white-space: nowrap; font-variant-numeric: tabular-nums; gap: 6px; } .pb-panel-top .pb-clock small { font-size: 15px; font-weight: 700; opacity: .8; align-self: center; }
.pb-prev .n { padding: 0 10px; }
.pb-panel-top .pb-clock { align-self: stretch !important; height: auto !important; max-height: none !important; } .pb-panel-top .pba.commands { min-height: 36px; }
.pb-status { grid-template-columns: 1fr 1fr auto !important; }
.pb-status .pb-costinfo { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; min-width: 96px; }
.pb-costinfo i { font-style: normal; font-size: 10px; line-height: 1.35; color: #8a978f; white-space: nowrap; } .pb-costinfo i b { font-size: 10px !important; font-weight: 700; color: #5f6e65; margin-left: 3px; }
.pb-status .pb-st-row { grid-column: 1 / 3 !important; }
body.nf-poscost .ft-poscost { display: none !important; }
body.nf-multiuser .ft-multiuser { display: none !important; }
/* Item File top strip: − minimise · × close */
.if2-strip { flex: none; display: flex; align-items: center; justify-content: flex-end; height: 30px; margin: -4px 0 4px; padding: 0 4px; background: #e6eee8; border: 1px solid #d3dfd6; border-radius: 8px; }
.if2-strip .winbtns { margin-left: auto; padding-left: 0; gap: 2px; } .if2-strip .winbtns button { width: 30px; height: 24px; font-size: 18px; border-radius: 6px; }
/* Item File buttons: equal size, aligned in two rows, filling the whole width */
.if2-bar .if2-brow { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px !important; flex-wrap: nowrap; }
.if2-bar .if2-brow > .mb-sep, .if2-bar .if2-brow > .spacer { display: none !important; }
.if2-bar .if2-brow > .btn { width: 100%; min-width: 0 !important; justify-content: center; text-align: center; padding: 0 4px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 32px; }
.if2-bar #ifSave { gap: 0 !important; } .if2-bar #ifSave .ak { padding: 0; margin: 0; }
body.alt-on .if2-bar #ifSave .ak { padding: 0 1px; }
/* Alt shortcuts: letter underlined only while Alt is held */
.akw, .akw .ak { display: inline; margin: 0; padding: 0; }
body.alt-on .ak { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; background: #f6c34a; color: #1b2b20; border-radius: 2px; }
.if2-sname { font-size: 13px; font-weight: 700; color: #1f4a32; padding-left: 8px; letter-spacing: .02em; }
.if2-pr.if2-pr1 { grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr) !important; }
.if2-mks { display: flex; gap: 6px; min-width: 0; } .if2-mks .if2-mk { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12.5px; }
/* every form: buttons coloured by job (same as the Item File) */
.btn.bk-add { background: #e3f3e8; border-color: #9fd0b0; color: #17613f; font-weight: 600; }
.btn.bk-save { background: #1f7a4a; border-color: #1f7a4a; color: #fff; font-weight: 600; }
.btn.bk-edit { background: #fff4e0; border-color: #f0cf95; color: #8a5300; }
.btn.bk-del { background: #fdecea; border-color: #f2b8b3; color: #b0261b; }
.btn.bk:not(:disabled):hover { filter: brightness(.95); }
.btn.bk:disabled { opacity: 1 !important; background: #f3f4f3 !important; border-color: #e5e8e6 !important; color: #a5aea8 !important; cursor: not-allowed; filter: none; }
/* Utilities menu: headings and three columns */
.tn-dd.tn-cols { column-count: 3; column-gap: 6px; width: min(760px, 92vw); padding: 6px; }
.tn-dd.tn-cols > * { break-inside: avoid; } .tn-dd .tn-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7a71; padding: 6px 10px 3px; border-bottom: 1px solid #e3e9e5; margin-bottom: 2px; }
.tn-dd.tn-cols .tn-h:not(:first-child) { break-before: column; }
.pb-askp { font-size: 20px; font-weight: 700; margin: 12px 0 0; }
.modal footer .pb-ask-yes:focus, .modal footer .pb-ask-no:focus { outline: 3px solid #f6c34a; outline-offset: 2px; }
.modal footer .pb-ask-no:focus { background: #fdecea; border-color: #f2b8b3; color: #b0261b; }
/* POS entry fields: qty / price next to the item box */
.pb-prev .pp-in { width: 100%; height: 34px; border: 1px solid transparent; background: transparent; text-align: right; font-size: 17px; font-weight: 700; padding: 0 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.pb-prev.ok .pp-in, .pb-prev.edit .pp-in { background: #fff; border-color: #cfdcd3; }
.pb-prev .pp-in:focus { outline: none; border-color: #d99a00; box-shadow: 0 0 0 3px #f6c34a66; background: #fffbea; }
.pb-prev .pp-in[readonly] { background: transparent !important; border-color: transparent !important; }
.pb-prev .n { padding: 0 3px !important; }
.pb-prev.edit { background: #fff6e6; border: 1px solid #f0cf95; border-radius: 10px; min-height: 40px; }
.pb-prev .pp-in::-webkit-outer-spin-button, .pb-prev .pp-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-dbl { display: flex; gap: 3px; } .pp-dbl .pp-in { font-size: 15px !important; }
.pb-prev.dbl .pp-d small { color: #8a5300; }
/* POS clock: never cut - the size follows the panel width */
.pb-panel-top { container-type: inline-size; }
.pb-panel-top .pb-clock { font-size: min(10.5cqw, 34px) !important; padding: 0 4px !important; overflow: hidden; letter-spacing: 0 !important; justify-content: center; }
.pb-panel-top .pb-clock small { font-size: 0.45em !important; margin-left: 2px; }
/* POS bottom: lower calculation boxes -> taller bill pane; panel buttons follow */
.pb-left > .pb-calc { flex: 0 0 auto !important; }
.pb-big4 > div, .pb-big4 > label { padding: 2px 10px !important; min-height: 0; }
.pb-big4 b { font-size: 22px !important; line-height: 1.05; } .pb-big4 .pb-totbox b { font-size: 26px !important; }
.pb-big4 .pb-cash-inp { font-size: 24px !important; min-height: 30px !important; height: 30px; }
.pb-big4 span { font-size: 10px !important; }
.pb-actions .pba { min-height: 0 !important; padding-top: 2px !important; padding-bottom: 2px !important; }
.pb-panel-top .pba.commands { min-height: 30px !important; }
.pb-actions #pbCustRpt { grid-column: 1 / -1 !important; }
.pb-actions #pbDup, .pb-actions #pbPayM, .pb-actions #pbAcc { grid-column: auto !important; }
/* calculation boxes: bigger digits and labels, still compact */
.pb-big4 > div, .pb-big4 > label { padding: 3px 12px !important; justify-content: center; }
.pb-big4 span { font-size: 13px !important; letter-spacing: .04em; }
.pb-big4 b { font-size: 34px !important; line-height: 1.05; } .pb-big4 .pb-totbox b { font-size: 38px !important; }
.pb-big4 .pb-cash-inp { font-size: 34px !important; min-height: 40px !important; height: 40px; }
/* panel buttons compact so the panel is no taller than the bill section */
.pb-actions, .pb-shell .pb-actions { gap: 3px !important; padding: 3px 5px !important; align-content: start !important; }
.pb-actions .pba { font-size: 11.5px !important; line-height: 1.12 !important; padding: 2px 6px !important; min-height: 28px !important; }
.pb-panel-top .pba.commands { font-size: 11.5px !important; line-height: 1.1; padding: 2px 6px !important; min-height: 26px !important; white-space: nowrap; }
.pb-panel-top { padding-top: 3px !important; }
.pb-left > .pb-cust, .pb-left .pb-cust { margin-bottom: 0; }
.pb-actions .pba { font-size: 11px !important; line-height: 1.08 !important; padding: 1px 6px !important; min-height: 25px !important; }
.pb-panel-top .pba.commands { min-height: 25px !important; font-size: 11px !important; }
.pb-actions, .pb-shell .pb-actions { padding: 3px 5px 2px !important; }
/* POS items drop-down: columns */
.pb-search .ac-list.pb-desc-ac { width: min(1120px, calc(100vw - 20px)) !important; }
.pb-desc-ac .ac-row { display: grid !important; grid-template-columns: minmax(0, 3fr) 90px 80px 120px 64px 84px 80px 90px; gap: 8px; align-items: center; padding: 6px 12px; font-size: 14px; }
.pb-desc-ac .ac-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-desc-ac .ac-row .n { text-align: right; }
.pb-desc-ac .ac-d small { display: inline; margin-left: 6px; font-size: 12px; }
.pb-desc-ac .ac-h { position: sticky; top: 0; background: #e8efe9; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #4c5d53; cursor: default; z-index: 1; }
.pb-desc-ac .ac-h:hover { background: #e8efe9; } .pb-desc-ac .ac-neg { color: var(--bad); }
/* receipt layout: one line per item */
.rcpt table.rl { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.rcpt table.rl th { font-size: 10px; text-align: left; border-bottom: 1px dashed #000; padding: 1px 2px; } .rcpt table.rl th.n, .rcpt table.rl td.n { text-align: right; }
.rcpt table.rl th:nth-child(2), .rcpt table.rl td:nth-child(2) { width: 19%; } .rcpt table.rl th:nth-child(3), .rcpt table.rl td:nth-child(3) { width: 13%; } .rcpt table.rl th:nth-child(4), .rcpt table.rl td:nth-child(4) { width: 22%; }
.rcpt table.rl td { padding: 2px 2px; vertical-align: top; word-wrap: break-word; } .rcpt table.rl td small { font-size: 9px; }
.rcpt58 .rcpt table.rl, .rcpt58 table.rl { font-size: 10px; }
/* POS / and . search window: all columns */
.modal:has(.si-wide) { max-width: min(1300px, 97vw) !important; }
.si-wide table { font-size: 13px; } .si-wide th { font-size: 10.5px; white-space: nowrap; } .si-wide td { white-space: nowrap; padding: 5px 7px; }
.si-wide td:nth-child(2) { white-space: normal; min-width: 200px; }
/* POS screen has its own EXIT / Bill Cancel - no cashier strip there */
body.pos-mode #ctBar { display: none !important; }
/* POS login */
.pl-users { display: flex; flex-wrap: wrap; gap: 8px; } .pl-users .uchip { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; min-width: 120px; }
.pl-users .uchip small { color: var(--muted); font-size: 11px; } .pl-users .uchip.on { border-color: var(--brand, #1f7a4a); background: #e8f5ec; box-shadow: 0 0 0 2px #9fd0b0; }
.modal footer .pl-mu { margin-right: auto; }
/* notifications bell + panel */
.tn-bell { position: relative; background: transparent; border: 0; font-size: 18px; cursor: pointer; padding: 4px 8px; margin-left: 6px; border-radius: 8px; align-self: center; }
.tn-bell:hover { background: #eef3ef; } .tn-bell span { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; display: none; }
.tn-bell.has span { display: inline-block; }
.nt-g { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #4c5d53; }
.nt-a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; margin-bottom: 5px; border-radius: 9px; border: 1px solid #e3e9e5; border-left: 5px solid #7aa38b; color: inherit; text-decoration: none; background: #fafcfb; }
.nt-a.bad { border-left-color: #d93025; background: #fff6f5; } .nt-a.warn { border-left-color: #e5a11d; background: #fffaf0; } .nt-a span { color: var(--muted); white-space: nowrap; font-size: 12px; } .nt-a:hover { filter: brightness(.97); }
tr.nt-new td { background: #fff8d6; }
/* Live Sale */
.lv-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.lv-s { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; } .lv-s span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .lv-s b { font-size: 22px; font-variant-numeric: tabular-nums; }
.lv-s.big { background: #10301f; color: #fff; border-color: #10301f; } .lv-s.big span { color: #b9d6c4; } .lv-s.big b { font-size: 26px; }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .lv-grid h3 { margin: 0 0 6px; font-size: 15px; }
.lv-hours { display: flex; align-items: flex-end; gap: 4px; height: 110px; padding-top: 6px; } .lv-h { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .lv-h i { width: 100%; background: #2e9b5a; border-radius: 4px 4px 0 0; min-height: 2px; } .lv-h span { font-size: 10px; color: var(--muted); }
@media (max-width: 1000px) { .lv-stats { grid-template-columns: repeat(3, 1fr); } .lv-grid { grid-template-columns: 1fr; } }
.home-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* POS entry fields always shown (empty until an item is typed) */
.pb-prev { background: #fff !important; border: 1px solid #cfdcd3 !important; border-radius: 10px; min-height: 42px; }
.pb-prev.ok { background: #f2faf4 !important; } .pb-prev.edit { background: #fff6e6 !important; border-color: #f0cf95 !important; }
.pb-prev .pp-d { margin: 4px 0 4px 4px; padding: 0 10px !important; height: 34px; line-height: 34px; border: 1px solid #dfe8e2; border-radius: 6px; background: #fafcfb; }
.pb-prev .pp-d:empty::before { content: 'Item description'; color: #a3b0a8; font-weight: 500; }
.pb-prev .pp-in { background: #fff !important; border-color: #cfdcd3 !important; }
.pb-prev .pp-in::placeholder { color: #b3bfb8; font-weight: 500; font-size: 13px; }
.pb-prev .pp-box { height: 34px; line-height: 32px; border: 1px solid #dfe8e2; border-radius: 6px; background: #fafcfb; margin: 0 3px; padding: 0 8px !important; }
.pb-prev #ppDs:empty::before { content: 'Dis%'; color: #b3bfb8; font-size: 13px; font-weight: 500; } .pb-prev #ppT:empty::before { content: 'Total'; color: #b3bfb8; font-size: 13px; font-weight: 500; }
.pb-prev .pp-dbl { height: 100%; align-items: center; }
.pb-prev #ppDs:has(.pp-dbl) { border: 0; background: transparent; padding: 0 !important; }

/* 26.10.12.85 - POS login window centred on the screen */
.modal-bg.modal-center { align-items: center; }

/* 26.10.12.86 - Present Stock Position report */
.rp-datebar.rp-nodate input[type=date], .rp-datebar.rp-nodate [data-preset], .rp-datebar.rp-nodate > .muted { display: none; }
.sp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sp-card[data-st] { cursor: pointer; } .sp-card[data-st]:hover { border-color: var(--brand, #17613f); }
.sp-card.on { outline: 2px solid var(--brand, #17613f); }
.sp-card .val small { font-size: 13px; font-weight: 600; color: var(--muted); }
.sp-card.warn .val { color: #b26a00; } .sp-card.bad .val { color: #c0392b; } .sp-card.ok .val { color: #17613f; }
.sp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.sp-tools input, .sp-tools select { width: auto; min-width: 0; flex: 0 1 150px; }
.sp-tools #spQ { flex: 1 1 180px; max-width: 240px; }
.sp-tools .sp-grp { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 14px; white-space: nowrap; }
.sp-filt { min-height: 18px; margin-bottom: 4px; }
.sp-tbl th.sp-sort { cursor: pointer; user-select: none; white-space: nowrap; } .sp-tbl th.sp-sort.on { color: var(--brand, #17613f); }
.sp-tbl tbody tr[data-id] { cursor: pointer; }
.sp-tbl tr.sp-low td { background: #fffaf0; } .sp-tbl tr.sp-out td { background: #fff4f2; } .sp-tbl tr.sp-minus td { background: #ffeceb; }
.sp-tbl tr.sp-gh td { background: #eaf3ed; font-weight: 800; color: #10301f; padding-top: 8px; padding-bottom: 8px; }
.sp-tbl tr.sp-sub td { background: #f6faf7; border-bottom: 2px solid #d5e6da; }
.sp-tbl tfoot tr.sp-grand td { background: #10301f; color: #fff; } .sp-tbl tfoot tr.sp-grand .muted { color: #cfe4d6; }
.sp-tbl .sp-neg { color: #c0392b; font-weight: 700; }

/* 26.10.12.87 - POS: compact "Print the receipt?" box, compact Mode of payment, Cash / Credit switch */
.modal.pb-askbox { max-width: 400px; } .modal.pb-askbox > header { display: none; }
.modal.pb-askbox .body { padding: 18px 20px 6px; } .modal.pb-askbox .pb-askp { margin: 0; font-size: 18px; font-weight: 700; }
.modal.pb-askbox footer { padding: 10px 16px 14px; border-top: 0; }
.modal.pm-compact { max-width: 440px; } .modal.pm-compact .pm-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.modal.pm-compact .pm-btn { padding: 10px 12px; font-size: 15px; }
.pb-pmseg button[data-pm="credit"].on { background: #b26a00; color: #fff; }

/* 26.10.12.88 - option with the keyboard focus (arrow keys) is clearly marked */
.pm-btn:focus, .pm-btn:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px #f3bf4a; outline: none; }
.modal footer .btn:focus-visible, .modal .uchip:focus-visible { box-shadow: 0 0 0 3px #f3bf4a; }

/* 26.10.12.89 - POS Commands > BILLS tiles, bill finder, refund by bill */
.pb-bill-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pb-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 12px; min-height: 78px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; text-align: left; }
.pb-tile b { font-size: 16px; color: #10301f; } .pb-tile small { font-size: 12px; color: var(--muted); }
.pb-tile:hover, .pb-tile:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #f3bf4a; outline: none; }
@media (max-width: 700px) { .pb-bill-tiles { grid-template-columns: 1fr 1fr; } }
.bf-wrap { max-height: 55vh; overflow: auto; } .bf-tbl tr.mb-on td { background: #fff5d6; }
.rb-tbl input[disabled] { background: #f2f4f3; }
/* 26.10.12.90 - POS login: own keypad like the main login */
.pl-keys { margin-top: 10px; } .pl-keys .tkeys.num { max-width: 300px; margin: 0 auto; } .pl-keys .tk { min-height: 46px; font-size: 19px; }

/* 26.10.12.91 - 80 mm detailed invoice */
.rcpt.rd { font-size: 11.5px; } .rcpt.rd .lr { margin: 1px 0; }
.rd-title { font-size: 15px; font-weight: 800; letter-spacing: .5px; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 3px 0; margin: 4px 0 5px; }
.rd-tag { margin-bottom: 2px; } .rd-small { font-size: 10px; }
.rd-cust { border: 1px dashed #000; padding: 3px 5px; margin: 4px 0; line-height: 1.35; }
table.rdt { width: 100%; border-collapse: collapse; margin-top: 4px; table-layout: fixed; }
table.rdt th { font-size: 10px; text-align: left; border-bottom: 1px solid #000; border-top: 1px solid #000; padding: 2px 1px; } table.rdt th.n, table.rdt td.n { text-align: right; }
table.rdt th:nth-child(1) { width: 22%; } table.rdt th:nth-child(2) { width: 20%; } table.rdt th:nth-child(3) { width: 28%; } table.rdt th:nth-child(4) { width: 30%; }
table.rdt tr.dn td { padding: 3px 1px 0; word-wrap: break-word; } table.rdt tr.dd td { padding: 0 1px 3px; border-bottom: 1px dotted #888; font-size: 11px; vertical-align: top; word-wrap: break-word; }
table.rdt tr.dd td:first-child { font-family: Consolas, monospace; font-size: 10px; } table.rdt s { font-size: 9.5px; color: #333; } table.rdt small { font-size: 9px; }
.rd-net { border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 3px 0; margin: 4px 0 2px; font-size: 17px !important; }
.rd-words { font-size: 10px; font-style: italic; margin-bottom: 3px; }
.rd-save { text-align: center; font-weight: 800; border: 1.5px solid #000; border-radius: 4px; padding: 3px; margin: 5px 0; font-size: 12.5px; }
.rd-bal { border-top: 1px dashed #000; margin-top: 4px; padding-top: 3px; }
.rd-bc { margin: 6px 0 2px; } .rd-bc svg { max-width: 100%; height: auto; }
.rd-terms { font-size: 9.5px; border-top: 1px dashed #000; padding-top: 3px; margin-top: 3px; text-align: center; }
.rcpt58 .rcpt.rd, #print.rcpt58 .rcpt.rd { font-size: 10px; } .rcpt58 table.rdt tr.dd td { font-size: 9.5px; }

/* 26.10.12.91 - A4 wholesale invoice */
.a4.inv { font-size: 11.5px; line-height: 1.35; }
.inv .iv-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 3px solid #000; padding-bottom: 8px; margin-bottom: 10px; }
.inv .iv-shop { display: flex; gap: 12px; align-items: center; } .inv .iv-shop img { max-height: 64px; max-width: 120px; } .inv .iv-shop h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: .3px; }
.inv .iv-title { text-align: right; } .inv .iv-title h2 { font-size: 20px; margin: 0; padding: 6px 12px; border: 2px solid #000; letter-spacing: 1px; }
.inv .iv-boxes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; margin-bottom: 10px; }
.inv .iv-box { border: 1px solid #000; border-radius: 4px; padding: 6px 8px; } .inv .iv-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: #333; margin-bottom: 3px; }
.inv .iv-pn { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.inv .iv-meta table, .inv table.iv-mini { width: 100%; border-collapse: collapse; } .inv .iv-meta td, .inv table.iv-mini td { border: 0; padding: 1.5px 2px; font-size: 11.5px; } .inv .iv-meta td:first-child { color: #333; width: 42%; }
.inv table.iv-items { width: 100%; border-collapse: collapse; } .inv table.iv-items th { background: #e9e9e9; border: 1px solid #000; font-size: 10.5px; padding: 4px 4px; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv table.iv-items td { border: 1px solid #555; padding: 3px 4px; font-size: 11px; vertical-align: top; } .inv table.iv-items td.c { text-align: center; } .inv table.iv-items .n { text-align: right; } .inv .mono { font-family: Consolas, monospace; font-size: 10.5px; }
.inv table.iv-items thead { display: table-header-group; } .inv table.iv-items tfoot td { background: #f2f2f2; border-top: 2px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .inv table.iv-items tr { page-break-inside: avoid; }
.inv .iv-sum { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: 10px; page-break-inside: avoid; } .inv .iv-left { display: flex; flex-direction: column; gap: 8px; }
.inv table.iv-tot { width: 100%; border-collapse: collapse; } .inv table.iv-tot td { border: 1px solid #555; padding: 4px 6px; font-size: 12px; } .inv table.iv-tot .n { text-align: right; }
.inv table.iv-tot tr.iv-net td { font-size: 15px; border: 2px solid #000; background: #e9e9e9; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv table.iv-mini tr.iv-strong td { border-top: 1px solid #000; font-size: 12.5px; } .inv table.iv-mini .n { text-align: right; }
.inv .iv-words { margin-top: 6px; font-size: 11px; } .inv .iv-bankrow { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.inv .iv-terms { margin-top: 10px; font-size: 10.5px; border-top: 1px dashed #000; padding-top: 4px; }
.inv .iv-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; text-align: center; page-break-inside: avoid; } .inv .iv-sign > div { border-top: 1px solid #000; padding-top: 4px; font-size: 11px; }
.inv .iv-foot { text-align: center; font-size: 9.5px; color: #333; margin-top: 14px; }
.qrb { display: flex; gap: 6px; align-items: center; font-size: 10px; text-align: left; } .qrb img { display: block; }
/* 80 mm extras */
.rd-cred { border: 1px solid #000; padding: 3px 5px; margin: 5px 0; } .rd-sign { margin-top: 12px; font-size: 11px; }
.rd-exch { margin: 4px 0; } .rd-offer { text-align: center; font-weight: 800; margin: 5px 0; font-size: 12px; }
.rd-qrs { display: flex; justify-content: space-around; gap: 6px; margin: 6px 0; } .rd-copy { font-size: 12px; font-weight: 800; letter-spacing: 1px; }
@media print {
  #print.a4p { page: inv; }
  @page inv { size: A4; margin: 10mm 10mm 14mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 9pt; font-family: Arial, sans-serif; } }
}
.rd-qrs .qrb { flex-direction: column; text-align: center; gap: 2px; font-size: 9.5px; } .iv-bank .qrb { flex-direction: column; text-align: center; font-size: 9.5px; }

/* 26.10.12.91 - Medicine bill A4 (distributor Sales Tax / Invoice) */
.a4.mbill { font-family: 'Times New Roman', Times, serif; font-size: 12px; color: #000; }
.mbill .mb-top { display: flex; justify-content: space-between; font-size: 12px; } .mbill .mb-top span:nth-child(2) { font-size: 13px; }
.mbill .mb-hd { position: relative; text-align: center; margin: 2px 0 8px; } .mbill .mb-hd h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: .5px; }
.mbill .mb-shop div { font-size: 13px; line-height: 1.35; } .mbill .mb-logo { position: absolute; right: 0; top: 0; max-height: 78px; max-width: 110px; }
.mbill .mb-info { display: grid; grid-template-columns: 1.05fr .85fr 1.4fr; gap: 4px 14px; margin-bottom: 6px; font-size: 12.5px; }
.mbill .mb-kv { display: flex; gap: 6px; margin: 1.5px 0; } .mbill .mb-kv span { white-space: nowrap; } .mbill .mb-kv b { font-weight: 700; }
.mbill .mb-row2 { display: flex; gap: 16px; } .mbill .mb-ms .mb-kv b { text-transform: uppercase; }
.mbill table.mb-t { width: 100%; border-collapse: collapse; } .mbill table.mb-t th { border: 1px solid #000; font-weight: 400; font-size: 11.5px; padding: 3px 3px; text-align: center; vertical-align: top; line-height: 1.15; }
.mbill table.mb-t thead { display: table-header-group; } .mbill table.mb-t tr { page-break-inside: avoid; }
.mbill table.mb-t td { border: 1px solid #000; padding: 2px 3px; font-family: Arial, sans-serif; font-size: 10.5px; vertical-align: top; } .mbill table.mb-t td.n { text-align: right; } .mbill table.mb-t td.c { text-align: center; }
.mbill table.mb-t tr.mb-co td { border-left: 1px solid #000; border-right: 1px solid #000; border-top: 0; border-bottom: 0; padding-top: 9px; font-family: 'Times New Roman', serif; font-weight: 700; font-size: 12.5px; }
.mbill table.mb-t tr.mb-sub td { border: 0; border-bottom: 1px solid #000; font-weight: 700; font-family: 'Times New Roman', serif; font-size: 12.5px; padding: 3px 3px 7px; }
.mbill table.mb-t tr.mb-sub td:first-child { border-left: 1px solid #000; } .mbill table.mb-t tr.mb-sub td:last-child { border-right: 1px solid #000; }
.mbill .mb-end { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 10px; page-break-inside: avoid; } .mbill .mb-left > div { margin-bottom: 4px; }
.mbill table.mb-tot, .mbill table.mb-acc { width: 100%; border-collapse: collapse; } .mbill table.mb-tot td, .mbill table.mb-acc td { border: 1px solid #000; padding: 3px 6px; font-size: 12px; } .mbill .n { text-align: right; }
.mbill table.mb-tot tr.mb-net td { font-weight: 800; font-size: 15px; border-width: 2px; } .mbill table.mb-acc { margin-top: 4px; max-width: 320px; }
.mbill .mb-terms { font-size: 10.5px; margin-top: 6px; } .mbill .mb-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; text-align: center; page-break-inside: avoid; } .mbill .mb-sign > div { border-top: 1px solid #000; padding-top: 3px; }
.mbill .mb-foot { text-align: center; font-size: 9.5px; margin-top: 12px; font-family: Arial, sans-serif; }
@media print { @page inv { @top-right { content: "Page " counter(page) " of " counter(pages); font-size: 11pt; font-family: 'Times New Roman', serif; } } }

/* 26.10.12.91 - supplier / stock vouchers: Item File style button rows */
.pv-btns { display: flex !important; flex-direction: column; gap: 5px; align-items: stretch !important; }
.pv-btns .pv-posb { background: transparent !important; border-color: transparent !important; color: var(--muted); cursor: default; font-size: 13px; }
.pv-supr { display: flex; gap: 4px; } .pv-supr select { flex: 1; min-width: 0; } .pv-supr .btn { min-width: 34px; padding: 0 8px; font-weight: 800; }
.pv-btns .if2-brow { grid-auto-flow: row !important; grid-template-columns: repeat(10, minmax(0, 1fr)); } /* same button width on both rows */

/* 26.10.12.91 - every popup window opens in the middle of the screen (tall ones still scroll from the top) */
.modal-bg > .modal { margin-top: auto; margin-bottom: auto; }

/* 26.10.12.91 - Electronics shop: serial / IMEI */
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; max-height: 55vh; overflow: auto; }
.sr-grid .f > span { font-size: 11px; } .sr-grid input { font-family: Consolas, monospace; }
.pb-sn { display: inline-block; font-family: Consolas, monospace; font-size: 12px; background: #eef4ff; color: #1d4f91; border-radius: 6px; padding: 0 6px; margin-left: 4px; }
.rd-sn { font-size: 9.5px; font-family: Consolas, monospace; font-weight: 400; }
.sr-card { margin-top: 8px; } .sr-card table th, .sr-card table td { padding: 3px 8px; }
/* 26.10.12.92 - login: connect to the shop's online account (until connected) */
.lg-shop { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(246, 249, 247, .9); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.lg-shop-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-top: 4px; } @media (max-width: 520px) { .lg-shop-row { grid-template-columns: 1fr 1fr; } .lg-shop-row .btn { grid-column: 1 / -1; } }
/* 26.10.12.92 - Cash / Credit switch: the chosen one is coloured like Retail / Wholesale */
.pb-lvl button.on[data-pm="cash"] { background: #0f766e; color: #fff; } .pb-lvl button.on[data-pm="credit"] { background: #b26a00; color: #fff; }

/* 26.10.12.92 - Photocopy / stationery shop bill A4 (blue pad style) */
.a4.pcb { --pc: #2e3a8c; color: #1d2766; font-family: Arial, sans-serif; font-size: 13px; }
.pcb .pc-top { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; } .pcb .pc-qr img { width: 140px; height: 140px; display: block; }
.pcb .pc-name { text-align: center; } .pcb .pc-ur { font-family: 'JNN Urdu', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; font-size: 40px; line-height: 1.5; color: var(--pc); font-weight: 700; }
.pcb .pc-en { font-size: 16px; font-weight: 700; color: var(--pc); letter-spacing: .5px; } .pcb .pc-en.big { font-size: 30px; }
.pcb .pc-ph { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; border-top: 2px solid var(--pc); border-bottom: 2px solid var(--pc); padding: 4px 8px; font-size: 22px; font-weight: 800; color: var(--pc); }
.pcb .pc-wa { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pc); color: #fff; font-size: 16px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pcb .pc-prop { border: 2px solid var(--pc); border-radius: 999px; padding: 2px 14px; font-size: 13px; font-weight: 700; }
.pcb .pc-info { margin: 14px 0 8px; } .pcb .pc-line { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0; }
.pcb .pc-v { flex: 1; border-bottom: 1.5px dotted var(--pc); padding: 2px 6px; font-size: 15px; font-weight: 700; color: #000; min-height: 22px; }
.pcb .pc-l { font-family: 'JNN Urdu', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; font-size: 20px; color: var(--pc); white-space: nowrap; } .pcb .pc-l small, .pcb .pc-tr small { font-family: Arial, sans-serif; font-size: 10px; }
.pcb .pc-no { font-size: 13px; white-space: nowrap; }
.pcb table.pc-t { width: 100%; border-collapse: collapse; border: 2px solid var(--pc); } .pcb table.pc-t th { border: 2px solid var(--pc); color: var(--pc); font-family: 'Times New Roman', serif; font-size: 15px; padding: 6px; }
.pcb table.pc-t td { border-left: 2px solid var(--pc); border-right: 2px solid var(--pc); border-bottom: 1px dotted var(--pc); height: 30px; padding: 3px 6px; color: #000; font-size: 13px; vertical-align: middle; }
.pcb table.pc-t td.n { text-align: right; } .pcb table.pc-t td.c { text-align: center; } .pcb .pc-sn { font-size: 9.5px; font-family: Consolas, monospace; }
.pcb .pc-bot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; align-items: start; }
.pcb .pc-mail { font-size: 16px; font-weight: 700; color: var(--pc); } .pcb .pc-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pc); font-size: 14px; }
.pcb .pc-terms { font-size: 11px; font-weight: 400; margin-top: 8px; color: #333; }
.pcb .pc-tr { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0; font-family: 'JNN Urdu', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; font-size: 20px; color: var(--pc); }
.pcb .pc-tv { flex: 1; border-bottom: 1.5px dotted var(--pc); text-align: right; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; color: #000; padding: 0 6px; } .pcb .pc-tr.b .pc-tv { font-size: 18px; }
.pcb .pc-addr { margin-top: 14px; background: var(--pc); color: #fff; padding: 8px 16px; font-size: 15px; clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pcb .pc-ur2 { font-family: 'JNN Urdu', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; font-size: 20px; } .pcb .pc-pin { font-size: 18px; }
.pcb .pc-foot { text-align: center; font-size: 9.5px; color: #555; margin-top: 8px; }
/* 26.10.12.93 - Home: tiles for the main menu forms, compact 7 per row */
.home-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 10px !important; }
.home-tile:not(.main) { padding: 12px 12px !important; border-radius: 14px; gap: 2px; }
.home-tile:not(.main) svg { width: 24px; height: 24px; margin-bottom: 2px; } .home-tile:not(.main) b { font-size: 15.5px; } .home-tile:not(.main) small { font-size: 11.5px; }
@media (max-width: 1100px) { .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ================= 26.10.12.93 - MOBILE POS (phones + tablets, touch) ================= */
body.pos-mob #bottomnav, body.pos-mob .tn-backup { display: none !important; }
body.pos-mob main.content { overflow: hidden !important; padding-bottom: 0 !important; }
.pb-shell.pb-mob { height: calc(calc(100dvh / var(--z, 1)) - 50px) !important; overflow: hidden !important; font-size: 15px; display: flex !important; flex-direction: column; }
.pb-mob .pb-search { padding: 8px !important; display: block !important; }
.pb-mob .pb-qwrap { display: flex; gap: 6px; width: 100% !important; max-width: none !important; }
.pb-mob .pb-qbox { flex: 1; min-width: 0; height: 48px; font-size: 17px !important; }
.pb-mob .pb-qdd, .pb-mob .pbm-scan { min-width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--pb-line); background: #fff; font-size: 20px; }
.pb-mob .pbm-scan { background: #12703b; color: #fff; border-color: #12703b; }
.pb-mob .pb-prev, .pb-mob .pb-last { display: none !important; }
.pb-mob .pb-grid { flex: 1 1 auto; min-height: 0 !important; max-height: none !important; overflow-y: auto; padding: 0 8px; }
/* item list as cards */
.pb-mob .pb-table, .pb-mob .pb-table tbody { display: block; width: 100%; } .pb-mob .pb-table thead { display: none; }
.pb-mob .pb-table tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name x" "qty tot" "px tot"; gap: 4px 10px; align-items: center;
  background: #fff; border: 1px solid var(--pb-line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.pb-mob .pb-table tr.sel { border-color: #e0b100; background: #fffbea; }
.pb-mob .pb-table td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; }
.pb-mob .pb-table td:nth-child(1), .pb-mob .pb-table td:nth-child(2) { display: none !important; }
.pb-mob .pb-table td.pb-name { grid-area: name; font-size: 16px; font-weight: 700; line-height: 1.25; }
.pb-mob .pb-table td.pb-qtd { grid-area: qty; display: flex !important; align-items: center; gap: 6px; justify-content: flex-start; }
.pb-mob .pb-table td:nth-child(5) { grid-area: px; text-align: left !important; font-size: 13px; color: var(--pb-muted); }
.pb-mob .pb-table td:nth-child(5) input { width: 96px !important; height: 34px; text-align: left !important; }
.pb-mob .pb-table td:nth-child(5)::before { content: "Rate "; } .pb-mob .pb-table td:nth-child(6) { display: none !important; }
.pb-mob .pb-table td:nth-child(7) { grid-area: tot; text-align: right; font-size: 19px; align-self: center; }
.pb-mob .pb-table td:nth-child(8) { grid-area: x; justify-self: end; } .pb-mob .pb-table td:nth-child(8) .btn { min-width: 34px; height: 34px; border-radius: 10px; }
.pb-mob .pb-qtd input { width: 64px !important; height: 40px; text-align: center !important; font-size: 17px; font-weight: 700; }
.pbm-st { display: none; }
.pb-mob .pbm-st { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--pb-line); background: #eef4ef; font-size: 24px; font-weight: 800; color: #12703b; touch-action: manipulation; }
/* bottom: only status switches + customer line stay, everything desktop-only goes */
.pb-mob .pb-panel, .pb-mob .pb-fkeys, .pb-mob .pb-about, .pb-mob .pb-calc, .pb-mob .pb-billinfo .pb-bi3 { display: none !important; }
.pb-mob .pb-bottom { display: block !important; padding: 4px 8px 0 !important; flex: none; }
.pb-mob .pb-left { display: flex; flex-direction: column; gap: 6px; }
.pb-mob .pb-twin { display: block !important; } .pb-mob .pb-discbox { display: flex !important; gap: 6px; } .pb-mob .pb-discbox[hidden] { display: none !important; }
.pb-mob .pb-status { display: flex !important; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 8px !important; }
.pb-mob .pb-status > div:not(.pb-st-row) { display: none !important; } .pb-mob .pb-st-row { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.pb-mob .pb-lvl button { padding: 9px 12px; font-size: 13px; } .pb-mob .pb-lvl small, .pb-mob .pb-net { display: none !important; }
.pb-mob .pb-cust { font-size: 13px; padding: 6px 8px !important; }
.pb-mob .pb-footbar { display: flex !important; padding: 2px 10px !important; min-height: 0 !important; font-size: 12px; } .pb-mob .pb-billinfo { display: flex !important; gap: 12px; align-items: center; } .pb-mob .pb-billinfo > div { margin: 0; }
.pbm-bar { display: grid; grid-template-columns: 64px 1fr 120px; gap: 8px; align-items: stretch; padding: 8px; background: #10301f; flex: none; }
.pbm-more { border: 0; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pbm-more small { font-size: 11px; font-weight: 600; margin-top: 2px; }
.pbm-tot { display: flex; flex-direction: column; justify-content: center; color: #cfe4d6; padding: 0 4px; } .pbm-tot span { font-size: 12px; } .pbm-tot b { color: #fff; font-size: 26px; line-height: 1.1; }
.pbm-pay { border: 0; border-radius: 14px; background: #e8a317; color: #10301f; font-size: 22px; font-weight: 900; letter-spacing: 1px; min-height: 58px; }
/* More sheet, PAY sheet */
.modal.pbm-sheet { max-width: 560px; } .pbm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pbm-tile { min-height: 64px; border-radius: 14px; border: 1.5px solid var(--line); background: #f6f9f7; font: inherit; font-size: 14px; font-weight: 700; padding: 8px; }
.pbm-tile.bad { color: #b0261b; background: #fdecea; border-color: #f2b8b3; }
@media (max-width: 420px) { .pbm-tiles { grid-template-columns: repeat(2, 1fr); } }
.modal.pbm-paysheet { max-width: 440px; } .pbm-due { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-bottom: 8px; } .pbm-due b { font-size: 30px; }
.modal.pbm-paysheet #pmC { height: 54px; font-size: 26px; font-weight: 800; text-align: right; }
.pbm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; } .pbm-quick .btn { min-height: 46px; font-size: 15px; font-weight: 700; }
.pbm-chg { display: flex; justify-content: space-between; align-items: baseline; background: #eef7f1; border-radius: 12px; padding: 10px 12px; } .pbm-chg b { font-size: 28px; color: #12703b; }
.modal.pbm-paysheet footer .btn.primary { min-height: 52px; font-size: 18px; flex: 1; }
body.pos-mob #appFoot { display: none !important; }
.pb-mob .pb-cust { cursor: pointer; } .pb-mob .pb-footbar .pb-bi2 { display: flex; gap: 10px; }
.pb-mob .pb-billinfo { flex-direction: row !important; flex-wrap: wrap; } .pb-mob .pb-footbar { justify-content: flex-start !important; }

/* 26.10.12.93 - MOBILE POS: every window opened from it is a full-width sheet made for fingers (only while the mobile POS is open) */
body.pos-mob .modal-bg { padding: 0 !important; align-items: flex-end !important; }
body.pos-mob .modal-bg > .modal { margin: auto 0 0 0 !important; max-width: 100% !important; width: 100% !important; border-radius: 18px 18px 0 0 !important; max-height: calc(92dvh / var(--z, 1)) !important; }
body.pos-mob .modal header h2 { font-size: 17px; }
body.pos-mob .modal .body { overflow-x: auto; }
body.pos-mob .modal input, body.pos-mob .modal select { min-height: 44px; font-size: 16px; }
body.pos-mob .modal footer { flex-wrap: wrap; gap: 8px; } body.pos-mob .modal footer .btn { min-height: 46px; flex: 1 1 auto; font-size: 15px; }
body.pos-mob .modal table { font-size: 13px; } body.pos-mob .modal th, body.pos-mob .modal td { padding: 8px 6px; }
body.pos-mob .modal tr.click td, body.pos-mob .modal tr[data-i] td { padding-top: 11px; padding-bottom: 11px; }
body.pos-mob .modal .tablewrap, body.pos-mob .modal .si-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.pos-mob .modal .grid.g2, body.pos-mob .modal .grid.g3, body.pos-mob .modal .grid.g4 { grid-template-columns: 1fr 1fr; }
body.pos-mob .pb-cmd-keysec { display: none !important; }
body.pos-mob .pb-cmd-themes { grid-template-columns: 1fr 1fr; }
body.pos-mob .pb-bill-tiles { grid-template-columns: 1fr 1fr; }
body.pos-mob .pm-grid { grid-template-columns: 1fr 1fr; } body.pos-mob .pm-btn { min-height: 56px; }
/* customer / item pickers: the less important columns go, rows are taller */
body.pos-mob .modal table th:nth-child(n+5), body.pos-mob .modal table td:nth-child(n+5) { white-space: nowrap; }
/* touch item buttons */
body.pos-mob .modal.tp-modal { width: 100% !important; } body.pos-mob .tp { height: calc(78dvh / var(--z, 1)); }
body.pos-mob .tp-items { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
body.pos-mob .tp-bar { flex-wrap: wrap; } body.pos-mob .tp-bar > span:first-child { flex: 1 1 100%; } body.pos-mob .tp-bar small.muted { display: none; } body.pos-mob .tp-bar .btn { flex: 1; }
body.pos-mob .tp-cat { min-width: 96px; min-height: 54px; }
/* line sheet */
.pbm-line { display: flex; flex-direction: column; gap: 10px; } .pbm-qrow { display: flex; gap: 8px; align-items: center; } .pbm-qrow input { flex: 1; text-align: center; font-size: 22px !important; font-weight: 800; height: 52px; }
.pbm-qrow .pbm-st { display: inline-grid !important; width: 56px; height: 52px; }
.pbm-ltot { display: flex; justify-content: space-between; align-items: baseline; background: #eef7f1; border-radius: 12px; padding: 10px 12px; } .pbm-ltot b { font-size: 24px; color: #12703b; }
/* desc search list on mobile */
.pb-mob .ac-list { left: 8px !important; right: 8px !important; width: auto !important; max-height: calc(60dvh / var(--z, 1)) !important; overflow: auto; }
.pbm-qrow .pbm-st { place-items: center; width: 56px !important; height: 52px !important; border-radius: 12px; border: 1.5px solid var(--line); background: #eef4ef; font-size: 26px; font-weight: 800; color: #12703b; }

/* 26.10.12.94 - Accounts reports */
.ac-tools { gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .ac-tools select { max-width: 360px; }
table.ac-t tr.ac-open td { background: #f2f7f3; } table.ac-t tfoot td { border-top: 2px solid var(--line); background: #f7f9f7; }
table.ac-t tr.ac-acc td { background: #f7faf8; } table.ac-t tr.ac-tot td { border-top: 2px solid var(--line); font-size: 15px; }
table.ac-t tr.ac-pdc td { background: #fffaf0; } .ac-neg { color: var(--bad); font-weight: 700; }
/* ---------- HR Management ---------- */
.hr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hr-form .hr-btns { margin-top: 12px; }
.hr-t td, .hr-t th { white-space: nowrap; }
.hr-grid { border-collapse: collapse; font-size: 12px; }
.hr-grid th, .hr-grid td { border: 1px solid var(--line); padding: 3px 5px; text-align: center; }
.hr-grid td:first-child { text-align: left; white-space: nowrap; }
.hr-grid td.hr-P { background: #dcfce7; color: #166534; } .hr-grid td.hr-A { background: #fee2e2; color: #991b1b; }
.hr-grid td.hr-L { background: #e0e7ff; color: #3730a3; } .hr-grid td.hr-H { background: #fef3c7; color: #92400e; }
.hr-st .btn { min-width: 34px; }
.hr-st .on.hr-P { background: #16a34a; color: #fff; border-color: #16a34a; } .hr-st .on.hr-A { background: #dc2626; color: #fff; border-color: #dc2626; }
.hr-st .on.hr-L { background: #4f46e5; color: #fff; border-color: #4f46e5; } .hr-st .on.hr-H { background: #d97706; color: #fff; border-color: #d97706; }
.hr-ph { width: 64px; height: 72px; border: 1px dashed var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.hr-ph img { width: 100%; height: 100%; object-fit: cover; }
.hr-clock { text-align: center; } .hr-now { font-size: 42px; font-weight: 800; letter-spacing: 1px; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.idcs { display: flex; flex-wrap: wrap; gap: 4mm; }
.idc { width: 85.6mm; height: 54mm; border: 1px solid #333; border-radius: 3mm; overflow: hidden; display: flex; flex-direction: column; font-family: Arial, sans-serif; background: #fff; color: #111; page-break-inside: avoid; box-sizing: border-box; }
.idc-top { background: #0f766e; color: #fff; font-weight: 700; font-size: 11pt; padding: 1.5mm 3mm; text-align: center; }
.idc-mid { flex: 1; display: flex; gap: 3mm; padding: 2mm 3mm; }
.idc-ph { width: 20mm; height: 24mm; border: 1px solid #999; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; font-size: 7pt; color: #888; }
.idc-ph img { width: 100%; height: 100%; object-fit: cover; }
.idc-tx { font-size: 8.5pt; line-height: 1.35; } .idc-tx b { font-size: 10.5pt; }
.idc-bc { text-align: center; padding-bottom: 1mm; } .idc-bc svg, .idc-bc img { height: 9mm; max-width: 70mm; }
.idc-top img { max-height: 6mm; vertical-align: middle; margin-right: 2mm; } .idc-tx span { display: block; }
/* POS bill extras: promotions, coupon, points, tax on top, rounding (26.10.12.94) */
.pb-extras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pb-extras > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.pb-extras .pbx-c { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; } .pb-extras .pbx-l { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.pb-extras .pbx-t { background: #fef2f2; color: #991b1b; border-color: #fecaca; } .pb-extras .pbx-r { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.pb-extras button { border: 0; background: none; cursor: pointer; font-size: 11px; color: inherit; padding: 0 0 0 2px; }
.rd-tax { border-top: 1px dashed #000; margin-top: 4px; padding-top: 3px; font-size: 11px; }
.rd-loy { border: 1px dashed #000; margin-top: 4px; padding: 2px 4px; font-size: 11px; text-align: center; }
/* Commands 2, price check, today's summary (26.10.12.94) */
.ds-box .lr { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #eef2f0; font-size: 15px; }
.ds-box .ds-net { font-size: 18px; } .ds-box .ds-net b { color: var(--brand); }
.pc-res { margin-top: 10px; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.pc-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; position: relative; }
.pc-ph { float: right; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; margin-left: 10px; }
.pc-nm { font-weight: 800; font-size: 17px; } .pc-cd { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.pc-pr, .pc-pr2 { display: flex; justify-content: space-between; align-items: baseline; } .pc-pr b { font-size: 26px; color: var(--brand); } .pc-pr2 b { font-size: 18px; }
.pc-u, .pc-mrp { font-size: 13px; color: var(--muted); } .pc-promo { margin-top: 4px; font-weight: 700; color: #b45309; }
.pc-st { margin-top: 6px; font-size: 14px; padding: 4px 8px; border-radius: 8px; display: inline-block; } .pc-st.ok { background: #dcfce7; } .pc-st.warn { background: #fef3c7; } .pc-st.bad { background: #fee2e2; }
.pc-kiosk { max-width: 760px; margin: 0 auto; text-align: center; } .pc-shop { font-size: 30px; font-weight: 800; color: var(--brand); margin: 8px 0 14px; }
.pc-kiosk #pkQ { font-size: 22px; padding: 14px; text-align: center; } .pc-kres { margin-top: 18px; } .pc-hint { font-size: 26px; color: var(--muted); margin-top: 60px; } .pc-hint.bad { color: var(--bad); }
.pc-big { padding: 26px; text-align: center; } .pc-big .pc-nm { font-size: 34px; } .pc-big .pc-cd { font-size: 16px; } .pc-big .pc-pr { justify-content: center; gap: 18px; } .pc-big .pc-pr b { font-size: 72px; } .pc-big .pc-ph { float: none; width: 160px; height: 160px; margin: 0 auto 10px; display: block; } .pc-big .pc-promo { font-size: 24px; } .pc-big .pc-u { font-size: 18px; }
.pb-c2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.pos-mob .pb-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== 26.10.12.94: PHONE / TABLET LAYOUT of the other forms (body.mob-ui is set on phones and touch tablets only;
   PCs keep the desktop layout above) ===== */
body.mob-ui .shopbar { overflow: hidden; }
@media (max-width: 600px) { body.mob-ui .shopbar > #licBar { font-size: 11px; } body.mob-ui .shopbar > #licBar .btn, body.mob-ui #licBar button { padding: 2px 8px; min-height: 0; font-size: 11px; } }
/* Item File: one column, labels above the boxes, buttons in a 4-column grid */
body.mob-ui .if2 { display: block !important; }
body.mob-ui .if2-filter { display: none !important; }
body.mob-ui .if2-cols { display: block !important; }
body.mob-ui .if2-c1, body.mob-ui .if2-c2, body.mob-ui .if2-c3 { display: flex !important; flex-direction: column; gap: 8px !important; margin-bottom: 8px; }
body.mob-ui .if2-fields .f:not(.if2-pick):not(.chk) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; }
body.mob-ui .if2-fields .f > span, body.mob-ui .if2-c1 .f > span, body.mob-ui .if2-c2 .f > span, body.mob-ui .if2-c1 > .if2-row > .f:first-child > span, body.mob-ui .if2-c2 > .if2-row > .f:first-child > span { flex: none !important; flex-basis: auto !important; width: auto !important; min-height: 0 !important; font-size: 12px !important; }
body.mob-ui .if2-fields .if2-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
body.mob-ui .if2-fields .if2-row > .f { width: auto !important; }
body.mob-ui .if2-pick { display: grid !important; grid-template-columns: 1fr; gap: 2px; }
body.mob-ui .if2-fields .if2-pick > span { flex: none !important; }
body.mob-ui .if2-pick .if2-cat input { width: 64px; }
body.mob-ui .if2-fields input, body.mob-ui .if2-fields select { min-height: 42px !important; font-size: 16px !important; }
body.mob-ui .if2-photo { height: 110px; }
body.mob-ui .if2-secs, body.mob-ui .if2-tab { display: block; }
body.mob-ui .if2-pr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; margin-bottom: 6px; }
body.mob-ui .if2-pr > .if2-pl { grid-column: 1 / -1; font-weight: 800; font-size: 13px; }
body.mob-ui .if2-pr input { width: 100% !important; }
body.mob-ui .if2-line { display: flex; flex-wrap: wrap; gap: 6px; }
body.mob-ui .if2-secs .if2-row { flex-wrap: wrap !important; }
body.mob-ui .if2-ut { display: block; overflow-x: auto; }
body.mob-ui .if2-bar .if2-brow, body.mob-ui .pv-btns .if2-brow { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 6px !important; }
body.mob-ui .pv-btns { display: flex !important; flex-direction: column; }
body.mob-ui .if2-bar .btn, body.mob-ui .pv-btns .btn { min-height: 44px !important; padding: 0 4px !important; font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
body.mob-ui .if2-bar .if2-brow + .if2-brow { margin-top: 6px; }
body.mob-ui .if2-list { margin-top: 8px; } body.mob-ui .if2-list .tablewrap { max-height: 60vh; }
/* Stock vouchers (purchase, returns, PO, adjustments) */
body.mob-ui .content.pv-shell { display: block !important; height: auto !important; }
body.mob-ui .pv-hgrid { grid-template-columns: 1fr 1fr !important; }
body.mob-ui .pv-hgrid > * { grid-column: auto !important; min-width: 0; }
body.mob-ui .pv-hgrid .pv-sup, body.mob-ui .pv-hgrid .pv-note { grid-column: 1 / -1 !important; }
body.mob-ui .pv-sup { display: flex; flex-wrap: wrap; gap: 6px; } body.mob-ui .pv-sup > span { width: 100%; }
body.mob-ui .pv-hgrid input, body.mob-ui .pv-hgrid select, body.mob-ui .pv-entry input, body.mob-ui .pv-entry select { min-height: 42px !important; font-size: 16px !important; }
body.mob-ui .pv-entry, body.mob-ui .pv-entry.adj { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.mob-ui .pv-entry > * { grid-column: auto !important; min-width: 0; }
body.mob-ui .pv-entry .pv-row2 { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr 1fr; }
body.mob-ui .pv-row2 .f, body.mob-ui .pv-row2 .f:first-child { width: auto !important; }
body.mob-ui .pv-row2 .pv-ebar { grid-column: 1 / -1; margin: 0 !important; }
body.mob-ui .pv-ebar .btn { min-height: 44px; flex: 1; }
body.mob-ui .pv-lines { max-height: 50vh !important; overflow: auto; }
body.mob-ui .pv-tiles > div { flex: 1 1 45%; min-width: 0; }
/* reports, HR, lists */
body.mob-ui .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.mob-ui .grid.g4, body.mob-ui .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mob-ui .grid.g4 > [style*="span 3"], body.mob-ui .grid.g4 > [style*="span 2"] { grid-column: 1 / -1 !important; }
body.mob-ui .card input, body.mob-ui .card select { font-size: 16px; } /* no zoom-in when typing on iPhone */
body.mob-ui .modal .grid.g4, body.mob-ui .modal .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { body.mob-ui .grid.g2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { body.mob-ui .shopbar > #licBar { position: static; transform: none; margin-left: 10px; } body.mob-ui .licbar.lic-in-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (max-width: 900px) { body.cname .shopbar { justify-content: space-between; } body.cname .shopbar-t { align-items: flex-start; } body.cname .shopbar-home { flex: 1 1 auto; } body.cname .shopbar-t b { font-size: 16px; letter-spacing: .03em; } body.cname .licbar.lic-in-bar > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.dl-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dl-tools .pb-tile { min-height: 96px; } @media (max-width: 700px) { .dl-tools { grid-template-columns: 1fr; } }
/* 26.10.12.95: mobile POS - item dropdown shows the description first (name on top, code · price · stock under it) */
.pb-mob .pb-search .ac-list.pb-desc-ac { left: 0 !important; right: 0; width: auto !important; max-height: 60vh; }
.pb-mob .pb-desc-ac .ac-h { display: none !important; }
.pb-mob .pb-desc-ac .ac-row { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "d d d" "c p s"; gap: 2px 12px !important; padding: 9px 12px !important; }
.pb-mob .pb-desc-ac .ac-row > span:nth-child(1) { grid-area: d; white-space: normal !important; font-size: 15px; line-height: 1.3; }
.pb-mob .pb-desc-ac .ac-row > span:nth-child(1) small { display: block; margin: 1px 0 0; color: var(--muted); }
.pb-mob .pb-desc-ac .ac-row > span:nth-child(2) { grid-area: c; color: var(--muted); font-size: 13px; }
.pb-mob .pb-desc-ac .ac-row > span:nth-child(3) { grid-area: p; font-size: 15px; }
.pb-mob .pb-desc-ac .ac-row > span:nth-child(4) { grid-area: s; font-size: 13px; color: var(--muted); }
.pb-mob .pb-desc-ac .ac-row > span:nth-child(n+5) { display: none; }
/* 26.10.12.95: mobile POS - the ▾ list button sits beside the item box, not on top of it */
.pb-mob .pb-qwrap { align-items: center; } .pb-mob .pb-qwrap .pb-qbox { flex: 1; min-width: 0; padding-right: 12px !important; }
.pb-mob .pb-qdd { position: static !important; transform: none !important; flex: none; width: 48px; height: 48px; border-left: 1.5px solid var(--pb-line, #d5dfd8); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { body.pos-mode .shopbar { justify-content: space-between; } body.pos-mode .shopbar-home { flex: 1 1 auto; min-width: 0; } body.pos-mode .shopbar-t { align-items: flex-start; } body.pos-mode .shopbar-t b { font-size: 16px; letter-spacing: .03em; } body.pos-mode .licbar.lic-in-bar > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* mobile More menu grouped like the top menu (26.10.12.95) */
.menu-h { margin: 16px 2px 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-sub { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--brand); margin-top: 4px; }
.menu-home { flex-direction: row !important; justify-content: center; padding: 12px !important; }
@media (max-width: 600px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .menu-tile { padding: 12px 6px; font-size: 12.5px; text-align: center; } .menu-tile svg { width: 22px; height: 22px; } }
.pb-mob .pbm-scan { display: flex; align-items: center; justify-content: center; padding: 0; } .pb-mob .pbm-scan svg { display: block; }
/* continuous camera scan: a short sheet at the bottom, the bill stays visible above it */
.modal-bg.sc-sheet { background: rgba(0,0,0,.15) !important; align-items: flex-end !important; }
.modal-bg.sc-sheet > .modal { margin-bottom: 0 !important; margin-top: auto !important; }
.sc-st { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; } .sc-st span { color: var(--muted); font-size: 12.5px; } .sc-st b { color: #065f46; }
.sc-qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .sc-qty > span { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: auto; }
.sc-qty button { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 22px; font-weight: 800; color: var(--brand); }
.sc-qty input { width: 70px; height: 44px; text-align: center; font-size: 20px; font-weight: 800; border-radius: 10px; } .sc-qty input.on { background: #fef3c7; border-color: #f59e0b; }
.sc-qty .sc-again { width: auto; padding: 0 12px; font-size: 14px; } 
/* small camera: stays at the top of the POS while the bill below can be used (scrolling, qty, delete, PAY) */
.modal-bg.sc-sheet.sc-mini { background: transparent !important; pointer-events: none; align-items: flex-start !important; }
.modal-bg.sc-sheet.sc-mini > .modal { pointer-events: auto; margin-top: 0 !important; margin-bottom: auto !important; border-radius: 0 0 16px 16px !important; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sc-mini .modal > header, .sc-mini .modal .modal-h, .sc-mini .modal > h2 { padding-top: 6px; padding-bottom: 4px; }
.sc-mini #scV { max-height: 110px !important; }
.sc-mini .sc-qty { margin-top: 4px; } .sc-mini .sc-qty > span { display: none; } .sc-mini .sc-qty button, .sc-mini .sc-qty input { height: 38px; }
.sc-mini .sc-st { margin-top: 4px; padding: 4px 8px; flex-direction: row; justify-content: space-between; align-items: center; }
.sc-mini footer { padding-top: 4px !important; padding-bottom: 6px !important; } .sc-mini footer .btn { min-height: 36px; }
.sc-qty .sc-done { display: none; background: var(--brand); color: #fff; border-color: var(--brand); }
.sc-mini .sc-qty .sc-done { display: inline-block; } .sc-mini .modal footer { display: none !important; }
.sc-mini .modal > :first-child { padding-top: 4px !important; padding-bottom: 2px !important; min-height: 0; } .sc-mini .modal h3, .sc-mini .modal .mtitle { font-size: 14px; }
.sc-mini #scV { max-height: 90px !important; } .sc-mini .sc-qty button, .sc-mini .sc-qty input { height: 36px; width: 40px; font-size: 18px; } .sc-mini .sc-qty input { width: 54px; } .sc-mini .sc-qty .sc-again { width: auto; padding: 0 8px; font-size: 12.5px; }
body.sc-mini-on .pb-mob .pb-grid { padding-top: calc(var(--scmini, 0px) - 40px); }
/* ===== 26.10.12.95 mobile POS extras ===== */
.pb-mob #pbRows tr { transition: transform .12s; } .pb-mob #pbRows tr.pbm-del td { background: #fee2e2 !important; } .pb-mob #pbRows tr.pbm-del { box-shadow: inset -60px 0 0 #dc2626; }
.pb-mob .pbm-mic { min-width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--pb-line, #d5dfd8); background: #fff; color: #2f5a41; display: flex; align-items: center; justify-content: center; padding: 0; }
.pb-mob .pbm-mic.on { background: #dc2626; color: #fff; border-color: #dc2626; animation: pbmPulse 1s infinite; } @keyframes pbmPulse { 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.25); } }
.pbm-net { display: block; font-style: normal; font-size: 11px; font-weight: 700; margin-top: 1px; } .pbm-net.off { color: #fca5a5; } .pbm-net.wait { color: #fde68a; }
.pbm-tile.on { background: #fef3c7 !important; border-color: #f59e0b !important; }
.pb-mob.pb-order .pbm-bar { background: #7c2d12 !important; } .pb-mob.pb-order #pbmPay { background: #f59e0b; font-size: 15px; }
.pb-mob.pb-order .pb-search::before { content: '📝 ORDER MODE - bill is saved as an order for the counter'; display: block; font-size: 12px; font-weight: 800; color: #9a3412; background: #ffedd5; border-radius: 8px; padding: 4px 8px; margin-bottom: 6px; }
.pbm-ptabs { display: flex; margin: 10px 0; } .pbm-ptabs button { flex: 1; min-height: 44px; font-weight: 800; }
.pbm-qr { display: flex; justify-content: center; margin: 6px 0; } .pbm-qr img, .pbm-qr canvas, .pbm-qr svg { width: 220px !important; height: 220px !important; }
.pbm-sp { display: grid !important; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; margin-bottom: 6px !important; } .pbm-sp input { min-height: 44px; font-size: 18px; text-align: right; }
.pb-mob.pb-large .pb-name, .pb-mob.pb-large .pbm-tot b, .pb-mob.pb-large .pb-qbox { font-size: 20px !important; } .pb-mob.pb-large #pbRows td { font-size: 17px; } .pb-mob.pb-large #pbRows td b { font-size: 19px; } .pb-mob.pb-large .pbm-st { width: 52px; height: 52px; font-size: 26px; }
.ow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ow-t { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; } .ow-t span { font-size: 12px; color: var(--muted); font-weight: 700; } .ow-t b { font-size: 20px; }
.ow-t.big { background: var(--brand); border-color: var(--brand); grid-column: 1 / -1; } .ow-t.big span { color: #cfe5d6; } .ow-t.big b { color: #fff; font-size: 30px; } .ow-t.warn b { color: #b45309; } .ow-t.ok b { color: var(--ok); }
.ow-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #eef2f0; } .ow-list small { color: var(--muted); margin-left: 4px; }
.sk-adj { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; align-items: end; } .sk-adj .btn { min-height: 46px; }
.pbm-qr { flex-direction: column; align-items: center; text-align: center; }
/* mobile dark mode */
.pb-mob.pb-dark .pb-table tr { background: #172133 !important; border-color: #2c3a52 !important; } .pb-mob.pb-dark .pb-table tr.sel { background: #2b2610 !important; border-color: #b8860b !important; }
.pb-mob.pb-dark .pb-table td, .pb-mob.pb-dark .pb-name { color: #e5edf7 !important; background: transparent !important; } .pb-mob.pb-dark .pb-table td b { color: #fff; }
.pb-mob.pb-dark .pb-qdd, .pb-mob.pb-dark .pbm-mic { background: #172133; color: #e5edf7; border-color: #2c3a52; }
.pb-mob.pb-dark .pbm-st { background: #22314a !important; color: #9be7b4 !important; border-color: #2c3a52 !important; }
.au-sum { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .au-sum .badge { cursor: pointer; border: 0; }
.br-chip { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; background: #f59e0b; color: #1f2937; border-radius: 999px; padding: 1px 8px; vertical-align: middle; } .tf-in { border: 2px solid #f59e0b; background: #fffbeb; }
/* report designer / custom reports */
.rd-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; } @media (max-width: 900px) { .rd-wrap { grid-template-columns: 1fr; } }
.rd-side { display: flex; flex-direction: column; gap: 4px; } .rd-it { padding: 6px 8px; border-radius: 8px; text-decoration: none; color: inherit; } .rd-it.on, .rd-it:hover { background: var(--brand-soft); }
.rd-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; } .rd-col { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; opacity: .6; } .rd-col.on { opacity: 1; background: #f0fdf4; border-color: #86efac; }
.rd-col label { flex: 1; min-width: 0; font-size: 13px; } .rd-lbl { width: 90px; min-height: 28px; padding: 2px 6px; font-size: 12px; }
.rd-fl { gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; } .rd-fl select, .rd-fl input { max-width: 200px; }
.rd-t .rd-g td { background: #e8efe9; font-weight: 700; } .rd-t .rd-sub td { background: #f6faf7; border-bottom: 2px solid #cfe2d5; } .rd-t .rd-tot td { background: #dcfce7; font-size: 14px; }
.menu-tile small { font-size: 11px; }
@media print { #print.a4l { page: land; } @page land { size: A4 landscape; margin: 8mm; } }
.hl-c { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--line); } .hl-c.ok { background: #dcfce7; } .hl-c.warn { background: #fef3c7; } .hl-c.bad { background: #fee2e2; } .hl-c.info { background: #eff6ff; }
.tn-backup.warn { color: #b45309; }

/* 26.11.13 centred pop-up forms */
.modal.pp-modal{max-width:min(980px,96vw);width:96vw}.modal.pp-modal footer{display:none}.modal.pp-modal .body{padding:12px 14px}
.modal.pp-big{max-width:min(1280px,98vw);width:98vw}.modal.pf-modal{max-width:min(860px,96vw)}
.pp-bg{align-items:center}.pp-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:8px}.pp-acts[hidden]{display:none}
.pp-host .rp-menu,.pp-host .rp-crumb{display:none}.pp-host>.card{box-shadow:none;margin-bottom:10px}
.modal.cp-modal,.modal.bk-modal{max-width:min(860px,96vw)}
.cp-tiles,.rpb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cp-tile,.rpb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;min-height:96px;transition:transform .08s,box-shadow .15s}
.cp-tile:hover,.rpb:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-1px);border-color:#9fc3b0}
.cp-tile small,.rpb small{color:var(--muted);font-size:12px}.cp-ic,.rpb-ic{font-size:26px;line-height:1}
.rpb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.rpb{min-height:110px}.rpb b{font-size:15px}
.bk-sec{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}.bk-sec h3{margin:0 0 8px;font-size:15px}.bk-danger{border-color:#f0b4b4;background:#fff7f7}