:root{--bg:#07111f;--side:#07101c;--card:#0c1a2c;--line:#243a59;--text:#f6f8ff;--muted:#91a6c7;--blue:#2e82ff;--purple:#7b4cff;--green:#1eda84;--orange:#ffa043;--red:#ff6172}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% -10%,rgba(57,75,220,.16),transparent 26%),var(--bg);color:var(--text);font:14px Segoe UI,Arial}.app{min-height:100vh}aside{position:fixed;inset:0 auto 0 0;width:246px;border-right:1px solid var(--line);background:linear-gradient(#071321,#07101b);padding:20px 16px}.brand{display:flex;gap:12px;font-size:24px;font-weight:800;align-items:center;margin:4px 8px 28px}.brand small{color:#20cfff;font-size:12px;display:block}nav{display:flex;flex-direction:column;gap:7px}nav button{border:1px solid transparent;background:transparent;color:#e4ebf8;text-align:left;padding:13px 15px;border-radius:11px;font-size:16px}nav button:hover{background:#0e1c30}nav button.active{border-color:#4c5fe8;background:linear-gradient(90deg,rgba(116,69,255,.32),rgba(46,130,255,.20))}.user{position:absolute;bottom:16px;left:14px;right:14px;border:1px solid var(--line);border-radius:14px;background:#0b1829;padding:12px;display:flex;gap:10px;align-items:center}.user>b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#17304f}.user small{display:block;color:var(--muted);margin-top:3px}main{margin-left:246px;padding:0 28px 30px}header{height:86px;display:flex;justify-content:space-between;align-items:center}.search{width:420px;height:52px;border:1px solid var(--line);background:#0a1728;border-radius:12px;padding:0 14px;display:flex;align-items:center}.search input{flex:1;background:transparent;border:0;outline:0;color:white;padding:10px;font-size:16px}.top{display:flex;gap:10px}.top span{border:1px solid var(--line);background:#091729;border-radius:11px;padding:10px 13px}.hero{position:relative;border:1px solid #2c4b7b;border-radius:17px;padding:26px 30px;background:linear-gradient(90deg,rgba(64,47,173,.48),rgba(16,55,109,.48));margin-bottom:18px}.hero h1{margin:0 0 8px;font-size:30px}.hero p{margin:0;color:#b4c2da;font-size:16px}.hero .ha{position:absolute;right:24px;top:25px}.btn{border:0;border-radius:10px;padding:10px 14px;color:white;font-weight:750;cursor:pointer}.primary{background:linear-gradient(90deg,var(--purple),var(--blue))}.secondary{background:#10213a;border:1px solid var(--line)}.danger{background:#4a1c27;border:1px solid #713343}.small{padding:7px 9px;font-size:12px}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:16px}.card{border:1px solid var(--line);border-radius:15px;background:linear-gradient(rgba(14,31,52,.98),rgba(10,23,40,.98))}.kpi{padding:17px}.label{color:#95b0d5;font-size:12px;margin-bottom:10px}.value{font-size:22px;font-weight:800}.delta{font-size:12px;color:var(--green);margin-top:7px}.warn{color:var(--orange)}.muted{color:var(--muted)}.grid{display:grid;gap:14px}.g3{grid-template-columns:2fr 1.15fr 1fr}.g2{grid-template-columns:1.5fr 1fr}.panel{padding:17px}.panel h3{margin:0 0 13px}.ph{display:flex;justify-content:space-between;gap:10px;align-items:center}.filters{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:8px 0 12px}.filters label,.fg label{font-size:11px;color:#8da6c9;display:flex;flex-direction:column;gap:4px}select,input,textarea{background:#0a1729;border:1px solid var(--line);color:white;border-radius:9px;padding:9px 10px;outline:0}.chart{height:250px;display:flex;align-items:flex-end;gap:6px;border-top:1px dashed #2b405f;padding-top:12px}.bw{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}.bar{width:100%;border-radius:5px 5px 0 0;background:linear-gradient(var(--purple),var(--blue))}.bw small{display:none;position:absolute;background:#132743;border:1px solid #35557e;padding:5px;border-radius:6px;bottom:55%;z-index:2}.bw:hover small{display:block}.list .row{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid #203653}.row small{display:block;color:var(--muted);margin-top:3px}table{width:100%;border-collapse:collapse;font-size:12.5px}th,td{padding:10px 8px;border-bottom:1px solid #203653;text-align:left}th{color:#90a8c8}.status{display:inline-block;padding:4px 7px;border-radius:8px;font-size:11px;font-weight:750}.New,.Ready{color:#77afff;background:rgba(46,130,255,.14)}.Confirmed,.Completed,.Approved,.Delivered{color:#50e29b;background:rgba(30,218,132,.13)}.Packed{color:#b99cff;background:rgba(123,76,255,.13)}.Pending,.Delayed{color:#ffc27b;background:rgba(255,160,67,.13)}.Dispatched{color:#69d9ff;background:rgba(28,207,255,.12)}.ordergrid{display:grid;grid-template-columns:.95fr 1.7fr 1fr;gap:14px}.oi{border:1px solid var(--line);background:#0a1729;border-radius:12px;padding:12px;margin-bottom:9px;cursor:pointer}.oi.active,.oi:hover{border-color:#6258ff}.oi p{margin:8px 0 4px}.oi small{color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.pos{display:grid;grid-template-columns:1.6fr .9fr;gap:14px}.books{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.book{border:1px solid var(--line);background:#0b192c;padding:12px;border-radius:12px}.book h4{margin:0 0 6px}.cartrow{display:grid;grid-template-columns:1fr 60px 90px 30px;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid #203653}.modal{position:fixed;inset:0;background:rgba(0,0,0,.58);display:none;align-items:center;justify-content:center;z-index:50}.modal.show{display:flex}.modalbox{width:min(650px,92vw);background:#0d1b2f;border:1px solid #355277;border-radius:16px;padding:20px}.mh{display:flex;justify-content:space-between}.mh h2{margin:0 0 15px}.mh button{border:0;background:none;color:white;font-size:28px}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fg{display:flex;flex-direction:column;gap:5px}.full{grid-column:1/-1}#toast{position:fixed;right:20px;bottom:20px;padding:12px 16px;border:1px solid #3f638e;background:#122744;border-radius:11px;display:none;z-index:60}#toast.show{display:block}@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}.g3,.ordergrid,.pos{grid-template-columns:1fr}.books{grid-template-columns:repeat(2,1fr)}}

/* Dashboard v1.1 — demo-parity Sales Trend behavior */
.sales-panel{border-color:#315aa1}.demo-filters{align-items:end}.demo-filters .btn{min-height:36px}.chart{position:relative;min-height:250px;overflow:visible}.bw{min-width:6px}.bw .bar{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.bw:hover .bar{transform:translateY(-4px);filter:brightness(1.18);box-shadow:0 0 15px rgba(75,112,255,.32)}.bw small{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--h) + 9px);background:#0d2239;border:1px solid #2f80e8;padding:8px 11px;border-radius:10px;z-index:8;white-space:nowrap;color:#9fb3d2;box-shadow:0 12px 24px rgba(0,0,0,.35)}.bw small strong{display:block;color:#61d8ff;font-size:15px;margin-top:4px}.bw:hover small{display:block}.chart-caption{display:flex;justify-content:space-between;align-items:center;margin-top:9px;color:#7f91ae;font-size:11px}.empty-chart{margin:auto;color:var(--muted);text-align:center}.stock-badge{padding:7px 10px;border-radius:18px;font-weight:800;white-space:nowrap}.stock-badge.critical{color:#ff8292;background:rgba(255,97,114,.12);border:1px solid rgba(255,97,114,.28)}.stock-badge.warning{color:#ffc06d;background:rgba(255,160,67,.12);border:1px solid rgba(255,160,67,.28)}

/* Dashboard v1.2 — keep KPI currency amounts on a single line */
.kpi{min-width:0;overflow:hidden}
.kpi .value{
  white-space:nowrap;
  font-size:clamp(18px,1.28vw,22px);
  line-height:1.18;
  letter-spacing:-0.45px;
  font-variant-numeric:tabular-nums;
}
@media (min-width:1500px){.kpi .value{font-size:22px}}
@media (max-width:1350px) and (min-width:1201px){.kpi .value{font-size:18px}}

/* Orders v1.3 — production-style order booking and fulfilment */
.Cancelled{color:#ff8793;background:rgba(255,97,114,.13)}
.order-kpis .value{font-size:21px}
.order-toolbar{padding:10px 12px;margin-bottom:14px;display:grid;grid-template-columns:minmax(260px,1fr) 150px 150px 150px auto;gap:9px;align-items:center}
.order-search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#081626;border-radius:9px;padding:0 9px;color:#7aaef8}
.order-search input{border:0;background:transparent;width:100%;padding:10px 4px}
.order-inbox{max-height:850px;overflow:auto}.order-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:2px 0 13px}.order-tabs button{border:1px solid var(--line);background:#0a1729;color:#a9bad1;padding:6px 8px;border-radius:8px;font-size:11px;cursor:pointer}.order-tabs button.active{color:white;border-color:#5c5cef;background:linear-gradient(90deg,rgba(123,76,255,.28),rgba(46,130,255,.18))}.order-tabs span{margin-left:5px;background:#182b47;border-radius:8px;padding:2px 5px}
.oi{position:relative}.oi>div:first-child{display:flex;justify-content:space-between;gap:6px;align-items:center}.oi>strong{display:block;color:#dfe9fa;margin-top:8px}.oi.active{box-shadow:inset 0 0 22px rgba(91,75,255,.11)}
.bigstatus{font-size:12px;padding:6px 9px}.customer-strip{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:8px;margin:14px 0}.customer-strip>div,.address-box{border:1px solid #203754;background:#091728;border-radius:10px;padding:10px}.customer-strip small,.address-box small{display:block;color:#8ca4c4;font-size:11px;margin-bottom:5px}.customer-strip b{font-size:12px}.address-box b{display:block}.address-box p{color:#98aac3;margin:7px 0 0;font-size:12px}
.order-lines td small{display:block;color:#8197b5;margin-top:3px}.stockbadge{display:inline-block;min-width:34px;text-align:center;color:#5fe6a3;background:rgba(30,218,132,.1);border:1px solid rgba(30,218,132,.2);padding:4px 7px;border-radius:8px}.stockbadge.low,.stockread.low{color:#ff8491;background:rgba(255,97,114,.1);border-color:rgba(255,97,114,.28)}
.order-totals{margin:14px 0 2px;display:flex;justify-content:flex-end;gap:16px;align-items:center;flex-wrap:wrap;color:#99abc4}.order-totals span{display:flex;gap:6px}.order-totals b{color:#e9f0fb}.order-totals .grand{font-size:15px;color:#cdd8e8;border-left:1px solid #2a405e;padding-left:15px}.order-totals .grand b,.blue-money{color:#69a8ff;font-size:19px}.order-actions{padding-top:4px;border-top:1px solid #203653}
.timeline{padding-left:24px;position:relative}.timeline:before{content:"";position:absolute;left:6px;top:5px;bottom:6px;width:2px;background:#2a4366}.step{position:relative;margin-bottom:23px;color:#8195b2}.step:before{content:"";position:absolute;left:-23px;top:1px;width:11px;height:11px;border:2px solid #647a99;border-radius:50%;background:#0b192b}.step small{display:block;margin-top:4px}.step.done{color:#b6c3d6}.step.done:before{border-color:#33c985;background:#143d34}.step.current{color:white}.step.current:before{border-color:#8d70ff;background:#34236f;box-shadow:0 0 13px #7b4cff}.step.cancelled:before{border-color:#ff6172;background:#55212a;box-shadow:0 0 12px rgba(255,97,114,.4)}
.voice-workflow{overflow:hidden}.waveform{height:55px;display:flex;align-items:center;gap:3px;margin:7px 0 10px;padding:0 5px}.waveform i{flex:1;min-width:2px;max-width:5px;border-radius:4px;background:linear-gradient(var(--purple),#1baeff);opacity:.8}.voice-tags{display:flex;gap:7px;flex-wrap:wrap}.voice-tags span{font-size:11px;padding:6px 8px;background:rgba(30,218,132,.08);color:#6be6aa;border:1px solid rgba(30,218,132,.16);border-radius:8px}
.modalbox{width:min(980px,94vw);max-height:92vh;overflow:auto}.order-form{grid-template-columns:repeat(2,1fr)}.draft-head,.draft-line{display:grid;grid-template-columns:minmax(190px,2.1fr) 80px 70px 90px 110px 38px;gap:7px;align-items:center}.draft-head{font-size:10px;text-transform:uppercase;color:#7f94b2;padding:0 4px 5px}.draft-line{padding:6px 0;border-bottom:1px solid #1c314d}.draft-line select,.draft-line input{min-width:0;width:100%}.draft-line>b{text-align:right;white-space:nowrap}.stockread{font-size:11px;padding:7px 6px;border-radius:8px;text-align:center;color:#5fe6a3;border:1px solid rgba(30,218,132,.2);background:rgba(30,218,132,.08)}.addline{margin-top:9px}.draft-total{display:flex;flex-direction:row!important;align-items:center;justify-content:flex-end;gap:14px;border-top:1px solid #203653;padding-top:12px}.draft-total span{color:#9eb0c9}.draft-total b{font-size:23px;color:#69a8ff}
.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1350px){.order-toolbar{grid-template-columns:1fr 125px 125px 125px auto}.customer-strip{grid-template-columns:1fr 1fr}.draft-head,.draft-line{grid-template-columns:minmax(170px,2fr) 70px 60px 80px 100px 35px}}
@media(max-width:1000px){.order-toolbar{grid-template-columns:1fr 1fr}.order-toolbar .order-search{grid-column:1/-1}.draft-head{display:none}.draft-line{grid-template-columns:1fr 70px 70px}.draft-line>*:nth-child(4),.draft-line>*:nth-child(5),.draft-line>*:nth-child(6){grid-column:auto}.customer-strip{grid-template-columns:1fr}.order-form{grid-template-columns:1fr}.order-form .full{grid-column:1}.modalbox{width:94vw}}

/* POS v1.4 */
.pos-v14{grid-template-columns:minmax(0,1.55fr) minmax(390px,.85fr);align-items:start}
.pos-kpis .value{font-size:20px}
.pos-toolbar{margin-bottom:13px}.scan-box{height:48px;border:1px solid #315178;background:#081729;border-radius:11px;display:flex;align-items:center;padding:0 13px;color:#72adff;box-shadow:inset 0 0 18px rgba(37,112,222,.05)}.scan-box:focus-within{border-color:#4e86ef;box-shadow:0 0 0 3px rgba(46,130,255,.08)}.scan-box input{border:0;background:transparent;flex:1;font-size:15px;padding:10px;outline:0}
.pos-books{grid-template-columns:repeat(2,minmax(0,1fr));max-height:430px;overflow:auto;padding-right:4px}.pos-book{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:102px}.book-icon{width:42px;height:48px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,rgba(123,76,255,.18),rgba(46,130,255,.16));font-size:25px}.book-info{min-width:0}.book-info h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 5px}.book-info small{color:#8198b8}.book-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:#8fa4c3;font-size:12px}.book-meta strong{color:#ecf3ff}.stock-low{color:#ff8b98}
.pos-bill{position:sticky;top:10px}.pos-sale-fields,.pos-entry{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}.pos-sale-fields label,.pos-entry label{display:flex;flex-direction:column;gap:5px;color:#8fa8ca;font-size:11px}.pos-entry .full{grid-column:1/-1}
.pos-cart-head,.pos-cart-row{display:grid;grid-template-columns:minmax(120px,1.6fr) 55px 78px 72px 90px 30px;gap:6px;align-items:center}.pos-cart-head{padding:7px 0;color:#839ab9;font-size:10px;text-transform:uppercase;border-bottom:1px solid #263b57}.pos-cart-row{padding:8px 0;border-bottom:1px solid #203653}.pos-cart-row>div{min-width:0}.pos-cart-row>div b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-cart-row small{display:block;color:#7f95b3;margin-top:3px}.pos-cart-row input{width:100%;min-width:0;padding:7px}.pos-cart-row>b{text-align:right;white-space:nowrap;font-size:12px}
.pos-totals{margin:12px 0;border-top:1px solid #28405f;padding-top:9px}.pos-totals>div{display:flex;justify-content:space-between;padding:4px 1px}.pos-totals .grand{font-size:19px;border-top:1px solid #345174;margin-top:5px;padding-top:9px;color:#70aaff}.pos-totals .change{color:#50e29b}.complete-sale{margin-left:auto;min-width:145px}.receipt-last{width:100%;margin-top:10px}
.empty-pos{grid-column:1/-1;text-align:center;color:#8399b7;padding:35px 10px;border:1px dashed #29415f;border-radius:11px}.recent-pos td small{display:block;color:#7f94b2;margin-top:3px}
.held-list{display:flex;flex-direction:column;gap:9px}.held-card{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:13px;border:1px solid #27405f;border-radius:11px;background:#0a182a}.held-card small{display:block;color:#8499b7;margin-top:4px}.held-card .actions{margin:0}
.return-lines{border:1px solid #253b58;border-radius:11px;overflow:hidden}.return-head,.return-row{display:grid;grid-template-columns:minmax(180px,1.5fr) 70px 110px 100px;gap:8px;align-items:center;padding:10px}.return-head{background:#10213a;color:#8ca2c1;font-size:10px;text-transform:uppercase}.return-row{border-top:1px solid #203653}.return-row small{display:block;color:#7f94b2;margin-top:3px}.return-row input{width:100%}.return-summary{display:flex;justify-content:flex-end;gap:18px;align-items:center;margin-top:15px;padding-top:12px;border-top:1px solid #29415f}.return-summary span{color:#91a6c7}.return-summary b{font-size:22px;color:#65dcff}
@media(max-width:1250px){.pos-v14{grid-template-columns:1fr}.pos-bill{position:static}.pos-books{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.pos-books{grid-template-columns:1fr}.pos-cart-head{display:none}.pos-cart-row{grid-template-columns:1fr 55px 80px}.pos-cart-row>*:nth-child(4),.pos-cart-row>*:nth-child(5),.pos-cart-row>*:nth-child(6){grid-column:auto}.pos-sale-fields,.pos-entry{grid-template-columns:1fr}.pos-entry .full{grid-column:1}.return-head{display:none}.return-row{grid-template-columns:1fr 65px 85px 85px}}

/* Inventory + Transfers v1.5 */
.table-scroll{overflow:auto}.inventory-table{min-width:980px}.inventory-table td small,.inventory-table td>small,table td small{display:block;color:#7f95b4;margin-top:4px}.qty-cell{display:inline-grid;place-items:center;min-width:38px;height:30px;padding:0 8px;border-radius:8px;background:#132641;font-weight:800}.qty-cell.low{background:rgba(255,97,114,.13);color:#ff8492;border:1px solid rgba(255,97,114,.24)}
.inv-filters{justify-content:flex-end}.inv-filters input[type=text]{min-width:230px}.check-filter{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important;border:1px solid var(--line);background:#0a1729;padding:9px 10px;border-radius:9px;color:#a6b7cf!important;font-size:12px!important}.check-filter input{accent-color:#6e68ff}.actions.compact{margin:0;gap:5px;flex-wrap:nowrap}.move-in{color:#50e29b;font-weight:800}.move-out{color:#ff8492;font-weight:800}.readout{height:38px;border:1px solid var(--line);border-radius:9px;background:#091729;padding:10px;font-weight:800;color:#69d9ff}.fg small{color:#8197b7}
.transfer-tabs{display:flex;gap:6px;flex-wrap:wrap}.transfer-tabs button{border:1px solid var(--line);background:#0b192b;color:#9eb1ca;border-radius:9px;padding:7px 10px}.transfer-tabs button.active{color:white;border-color:#5d65ee;background:linear-gradient(90deg,rgba(123,76,255,.30),rgba(46,130,255,.18))}.transfer-tabs b{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:3px;border-radius:6px;background:#182b46;font-size:10px}
.status.InTransit{color:#69d9ff;background:rgba(28,207,255,.12)}.status.Received{color:#50e29b;background:rgba(30,218,132,.13)}.status.Cancelled{color:#ff8492;background:rgba(255,97,114,.13)}
.transfer-add-line{display:grid;grid-template-columns:minmax(220px,1fr) 100px auto;gap:8px;margin:15px 0;padding:12px;border:1px solid #29415f;border-radius:11px;background:#09182a}.transfer-draft{border:1px solid #29415f;border-radius:11px;overflow:hidden;margin-bottom:12px}.transfer-draft-head,.transfer-draft-row{display:grid;grid-template-columns:minmax(220px,1fr) 90px 100px 38px;gap:8px;align-items:center;padding:9px 11px}.transfer-draft-head{background:#10213a;color:#8da3c1;font-size:10px;text-transform:uppercase}.transfer-draft-row{border-top:1px solid #213751}.transfer-draft-row small{display:block;color:#7e94b2;margin-top:3px}.transfer-draft-row input{width:100%}.transfer-empty{margin-bottom:12px}.stock-low{color:#ff8290!important;font-weight:800}
.transfer-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}.transfer-summary>div,.transfer-history>div{border:1px solid #29415f;background:#09182a;border-radius:9px;padding:10px}.transfer-summary small,.transfer-history small{display:block;color:#849ab8;margin-bottom:5px}.transfer-history{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.transfer-history b{font-size:11px}.legacy-note{padding:15px;border:1px dashed #a36a2f;background:rgba(255,160,67,.08);border-radius:10px;color:#ffc17a}
@media(max-width:1000px){.transfer-summary,.transfer-history{grid-template-columns:1fr 1fr}.transfer-add-line{grid-template-columns:1fr 90px}.transfer-add-line button{grid-column:1/-1}.inv-filters{justify-content:flex-start}}

/* Profile card + sidebar spacing quick fix v1.5.1 */
aside{padding-bottom:96px}
nav{gap:3px}
nav button{padding:11px 15px}
.user{
  left:10px;
  right:10px;
  bottom:12px;
  min-height:68px;
  padding:10px 14px;
  gap:12px;
  align-items:center;
  overflow:hidden;
}
.user>b{
  flex:0 0 42px;
  width:42px;
  height:42px;
  font-size:15px;
  font-weight:800;
}
.user>span{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}
.user>span>small{
  display:block;
  margin-top:5px;
  font-size:12px;
  font-weight:400;
  line-height:1.2;
  color:var(--muted);
}

/* Purchases + Vendor Accounts v1.6 */
.status.PartiallyReceived,.status.PartiallyInvoiced{color:#ffc27b;background:rgba(255,160,67,.13)}
.status.Invoiced,.status.Received{color:#50e29b;background:rgba(30,218,132,.13)}
.purchase-add-line{display:grid;grid-template-columns:minmax(240px,1fr) 90px 110px auto;gap:8px;margin:15px 0;padding:12px;border:1px solid #29415f;border-radius:11px;background:#09182a}
.purchase-lines,.grn-lines,.pinv-lines{border:1px solid #29415f;border-radius:11px;overflow:hidden;margin-bottom:12px}
.purchase-head,.purchase-row{display:grid;grid-template-columns:minmax(210px,1.5fr) 80px 100px 100px 120px 36px;gap:8px;align-items:center;padding:9px 11px}
.grn-head,.grn-row{display:grid;grid-template-columns:minmax(220px,1.6fr) 85px 85px 85px 110px;gap:8px;align-items:center;padding:9px 11px}
.pinv-head,.pinv-row{display:grid;grid-template-columns:minmax(220px,1.5fr) 85px 105px 110px 110px;gap:8px;align-items:center;padding:9px 11px}
.purchase-head,.grn-head,.pinv-head{background:#10213a;color:#8da3c1;font-size:10px;text-transform:uppercase}
.purchase-row,.grn-row,.pinv-row{border-top:1px solid #213751}
.purchase-row small,.grn-row small,.pinv-row small{display:block;color:#7f95b4;margin-top:3px}
.purchase-row input,.grn-row input,.pinv-row input{width:100%;min-width:0}
.purchase-total{display:flex;justify-content:flex-end;gap:20px;padding:12px;border-top:1px solid #2a4465;background:#0d1e34;font-size:17px}.purchase-total b{color:#6fafff}
.ledger-head{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}.ledger-head>div{border:1px solid #29415f;background:#09182a;border-radius:10px;padding:12px}.ledger-head small{display:block;color:#859ab8;margin-bottom:5px}.ledger-head b{font-size:18px}
.doc-chip{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;border:1px solid #29415f;border-radius:10px;padding:10px;margin-bottom:7px;background:#09182a}.doc-chip span{color:#8197b6;font-size:11px}.doc-chip button{grid-column:2;grid-row:1/3}
@media(max-width:1050px){.purchase-add-line{grid-template-columns:1fr 80px 100px}.purchase-add-line button{grid-column:1/-1}.purchase-head{display:none}.purchase-row{grid-template-columns:1fr 70px 90px}.purchase-row>*:nth-child(n+4){grid-column:auto}.ledger-head{grid-template-columns:1fr}.grn-head,.pinv-head{display:none}.grn-row,.pinv-row{grid-template-columns:1fr 75px 75px}}

/* Accounts + General Ledger v1.7 */
.account-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}.account-tabs button{border:1px solid var(--line);background:#09182a;color:#9cb1cc;border-radius:10px;padding:9px 12px}.account-tabs button.active{background:linear-gradient(90deg,rgba(123,76,255,.34),rgba(46,130,255,.22));border-color:#5f67ec;color:#fff}
.accounting-note{border:1px solid #2e527c;background:rgba(46,130,255,.08);color:#a9bdd8;padding:10px 13px;border-radius:10px;margin-bottom:14px;font-size:12px}.accounting-note b{color:#6db5ff}
.finance-summary{display:flex;flex-direction:column}.finance-summary>div{display:flex;justify-content:space-between;gap:15px;padding:11px 2px;border-bottom:1px solid #203653}.finance-summary>div:last-child{border-bottom:0}.finance-summary .profit{font-size:17px;color:#57e49f}
.voucher-balance{padding:10px 12px;border:1px dashed #375879;background:#09182a;color:#8da5c3;border-radius:9px;margin-top:12px;font-size:12px}
.ledger-title{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px;border:1px solid #29415f;background:#09182a;border-radius:10px;margin:10px 0 13px}.ledger-title span{color:#8fa6c4}.ledger-title strong{color:#65dcff}
.report-total td{font-weight:800;border-top:2px solid #476182;background:#0c1d32}.balance-check{margin-top:12px;padding:10px 12px;border-radius:9px;font-weight:800}.balance-check.ok,.big-balance.ok{color:#50e29b;background:rgba(30,218,132,.10);border:1px solid rgba(30,218,132,.25)}.balance-check.bad,.big-balance.bad{color:#ff8492;background:rgba(255,97,114,.10);border:1px solid rgba(255,97,114,.25)}
.report-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:14px}.statement h4{margin:18px 0 8px;color:#8bb8f3;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.statement>div{display:flex;justify-content:space-between;gap:20px;padding:8px 2px;border-bottom:1px solid #203653}.statement .subtotal{font-weight:800;background:#0b1b30;padding:10px}.statement-total{font-size:19px!important;font-weight:900!important;color:#65dcff;border-top:2px solid #4772a4!important;margin-top:8px;padding-top:13px!important}.big-balance{font-size:24px;font-weight:900;text-align:center;padding:20px;border-radius:12px;margin:12px 0}
@media(max-width:1050px){.report-grid{grid-template-columns:1fr}.ledger-title{align-items:flex-start;flex-direction:column}}

/* Users, Roles & Login Security v1.8 */
#nav button[hidden]{display:none!important}.top-user{border:1px solid var(--line);background:#09182a;color:#fff;border-radius:10px;padding:9px 12px;font-weight:800}.top-user:hover{border-color:#5277b1}
.login-gate{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 70% 10%,rgba(79,70,218,.24),transparent 30%),#06101d;display:none;align-items:center;justify-content:center;padding:20px}.login-gate.show{display:flex}.login-card{width:min(430px,95vw);border:1px solid #304d73;background:linear-gradient(180deg,#0e1d32,#091523);border-radius:20px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.45)}.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:26px}.login-logo{width:55px;height:50px;border-radius:13px;background:linear-gradient(135deg,var(--purple),var(--blue));display:grid;place-items:center;font-size:29px;box-shadow:0 0 28px rgba(83,86,255,.35)}.login-brand h1{font-size:24px;margin:0}.login-brand p{margin:4px 0 0;color:#8ba2c1}.login-card h2{font-size:27px;margin:0 0 5px}.login-card form{display:flex;flex-direction:column;gap:13px;margin-top:18px}.login-card form label{display:flex;flex-direction:column;gap:6px;color:#98abc6;font-size:12px}.login-card form input{height:46px;font-size:15px}.login-btn{height:46px;margin-top:4px}.login-error{min-height:18px;color:#ff7d8b;font-size:12px}.demo-cred{border-top:1px solid #243b58;margin-top:16px;padding-top:14px;color:#7f95b4;font-size:11px}.demo-cred b{color:#a9c8f3}
.profile-detail{display:flex;align-items:center;gap:14px}.profile-avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#294c78,#172b49);font-weight:900;font-size:18px}.profile-detail h3{margin:0 0 3px}.profile-detail p{margin:2px 0;color:#9bb0cc}.profile-detail small{color:#7890af}
.role-list{display:flex;flex-direction:column;gap:8px}.role-card{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid #29415f;background:#09182a;border-radius:11px;padding:12px}.role-card small{display:block;color:#8096b5;margin-top:4px}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.permission-group{border:1px solid #29415f;background:#09182a;border-radius:11px;padding:12px}.permission-group h4{margin:0 0 9px;color:#73aef8}.permission-group label{display:flex;align-items:center;gap:8px;margin:7px 0;color:#aabbd2;font-size:12px}.permission-group input{accent-color:#6d69ff}.permission-group span{line-height:1.25}
@media(max-width:850px){.permission-grid{grid-template-columns:1fr}.login-card{padding:22px}}


/* Sidebar layout fix v1.8.1
   Keeps Settings above profile card and prevents overlap. */
aside{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  padding:20px 16px 12px;
}

.brand{
  flex:0 0 auto;
  margin:4px 8px 22px;
}

nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  padding-bottom:8px;
  gap:3px;
  scrollbar-width:thin;
}

nav::-webkit-scrollbar{width:5px}
nav::-webkit-scrollbar-track{background:transparent}
nav::-webkit-scrollbar-thumb{
  background:#243a59;
  border-radius:10px;
}

nav button{
  flex:0 0 auto;
  width:100%;
  padding:11px 15px;
}

.user{
  position:static;
  flex:0 0 auto;
  width:100%;
  min-height:68px;
  margin-top:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0b1829;
  display:flex;
  gap:12px;
  align-items:center;
  overflow:hidden;
}

.user>b{
  flex:0 0 42px;
  width:42px;
  height:42px;
  font-size:15px;
  font-weight:800;
}

.user>span{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.15;
  white-space:nowrap;
}

.user>span>strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
  font-weight:700;
}

.user>span>small{
  display:block;
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
}

/* Override older absolute-profile spacing rule. */
aside{padding-bottom:12px!important}


/* Sidebar polish v1.8.2 — themed scrollbar + compact user card */

/* Firefox / modern browser scrollbar */
nav{
  scrollbar-width:thin;
  scrollbar-color:#2e82ff #081626;
}

/* Chromium / Edge scrollbar */
nav::-webkit-scrollbar{
  width:7px;
}

nav::-webkit-scrollbar-track{
  background:#081626;
  border-radius:12px;
}

nav::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7b4cff 0%,#2e82ff 55%,#1ccfff 100%);
  border-radius:12px;
  border:1px solid #10213a;
  min-height:42px;
}

nav::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#8b63ff 0%,#4a95ff 55%,#33d7ff 100%);
}

/* Hide scrollbar arrow buttons where supported */
nav::-webkit-scrollbar-button{
  width:0;
  height:0;
  display:none;
}

/* Compact profile card, closer to original demo proportions */
.user{
  min-height:58px;
  margin-top:8px;
  padding:8px 11px;
  gap:9px;
  border-radius:12px;
}

.user>b{
  flex:0 0 36px;
  width:36px;
  height:36px;
  font-size:13px;
}

.user>span>strong{
  font-size:14px;
  line-height:1.1;
}

.user>span>small{
  margin-top:3px;
  font-size:11px;
  line-height:1.1;
}

/* Keep enough separation from Settings without wasting sidebar height */
nav{
  padding-bottom:5px;
}



/* Sidebar scrollbar transparency fix v1.8.3 */

/* Firefox */
nav{
  scrollbar-width:thin;
  scrollbar-color:rgba(46,130,255,.38) transparent;
}

/* Chrome / Edge */
nav::-webkit-scrollbar{
  width:6px;
}

nav::-webkit-scrollbar-track{
  background:transparent;
  border:none;
}

nav::-webkit-scrollbar-thumb{
  background:rgba(46,130,255,.34);
  border-radius:12px;
  border:none;
  box-shadow:none;
}

nav::-webkit-scrollbar-thumb:hover{
  background:rgba(91,111,255,.56);
}

/* Remove scrollbar buttons/arrows */
nav::-webkit-scrollbar-button{
  width:0;
  height:0;
  display:none;
}

/* Keep scrollbar visually quiet until hovered */
nav:not(:hover)::-webkit-scrollbar-thumb{
  background:rgba(46,130,255,.18);
}



/* Full Reports Centre v1.9 */
.report-type-strip{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-bottom:12px;
  max-height:430px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(55,155,255,.72) transparent;
}
.report-type-strip::-webkit-scrollbar{width:7px}
.report-type-strip::-webkit-scrollbar-track{background:transparent}
.report-type-strip::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(79,177,255,.8),rgba(91,94,255,.68));border-radius:999px}
.report-type-strip button{
  text-align:left;
  border:1px solid var(--line);
  border-radius:11px;
  background:#09182a;
  color:#dce8f8;
  padding:10px 14px;
  cursor:pointer;
  min-height:54px;
  width:100%;
}
.report-type-strip button:hover{border-color:#3f6090;background:#0d1d32}
.report-type-strip button.active{
  border-color:#5d65ef;
  background:linear-gradient(120deg,rgba(123,76,255,.28),rgba(46,130,255,.18));
  box-shadow:inset 0 0 18px rgba(68,86,255,.08);
}
.report-type-strip button b{display:block;font-size:13px}
.report-type-strip button small{display:block;color:#8198b7;font-size:10px;margin-top:4px;line-height:1.25}
.report-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  padding:12px;
  margin-bottom:12px;
}
.report-toolbar label{display:flex;flex-direction:column;gap:4px;color:#8da6c9;font-size:10px}
.report-toolbar select,.report-toolbar input{min-width:125px}
.report-toolbar>label:first-child select{min-width:190px}
.report-toolbar .report-search{flex:1;min-width:190px}
.report-toolbar .report-search input{width:100%}
.report-actions{display:flex;gap:7px;margin-left:auto}
.report-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:14px 2px 10px}
.report-heading h2{margin:0;font-size:20px}.report-heading p{margin:4px 0 0;color:#8299b9;font-size:11px}.report-help{color:#748ba9;font-size:10px;text-align:right}
.report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.report-kpis .kpi{padding:13px}.report-kpis .value{font-size:18px}
.report-table{min-width:760px}
.report-table td small{display:block;color:#8096b4;margin-top:3px}
.report-money{font-weight:800;white-space:nowrap}
.report-empty{border:1px dashed #2d4565;background:#09182a;border-radius:12px;color:#879cb9;padding:36px;text-align:center}
#reportOutput>.table-scroll,#reportOutput>.report-kpis+.table-scroll{border:1px solid var(--line);border-radius:13px;background:#0b192c;padding:0 12px 10px}
@media(max-width:1350px){.report-type-strip{grid-template-columns:1fr}}
@media(max-width:900px){
  .report-type-strip{grid-template-columns:1fr;max-height:380px}
  .report-kpis{grid-template-columns:1fr 1fr}
  .report-actions{width:100%;margin-left:0}
  .report-heading{align-items:flex-start;flex-direction:column}
  .report-help{text-align:left}
}


/* WhatsApp Order Inbox v2.0 */
.wa-layout{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(390px,1.25fr) minmax(390px,1.15fr);gap:13px;align-items:start}
.wa-inbox{padding-right:10px}.wa-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.wa-filters button{border:1px solid #29415f;background:#09182a;color:#94aac7;border-radius:8px;padding:6px 8px;font-size:10px}.wa-filters button.active{border-color:#4d91ff;color:#fff;background:rgba(46,130,255,.15)}.wa-filters b{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:5px;background:#152b48;margin-left:2px}
.wa-list{max-height:660px;overflow:auto;padding-right:4px}.wa-item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;padding:11px 8px;border:1px solid transparent;border-bottom-color:#203653;cursor:pointer;border-radius:10px}.wa-item:hover{background:#0c1d31}.wa-item.active{border-color:#4c6bea;background:linear-gradient(100deg,rgba(123,76,255,.15),rgba(46,130,255,.09))}.wa-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#14432f,#08785a);color:#6ff2b4;font-weight:900}.wa-item-main{min-width:0}.wa-item-main>div{display:flex;justify-content:space-between;gap:7px;align-items:center}.wa-item-main>div b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-item-main small{display:block;color:#768eae;margin:4px 0}.wa-item-main p{margin:5px 0 0;color:#a7b8cd;font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.wa-item-main em{display:block;color:#60d8ff;font-size:10px;margin-top:5px;font-style:normal}
.status.Drafted{color:#b99cff;background:rgba(123,76,255,.14)}.status.Converted{color:#50e29b;background:rgba(30,218,132,.13)}.status.Archived{color:#8195b1;background:rgba(120,140,170,.12)}
.wa-contact{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}.wa-contact>div{border:1px solid #29415f;background:#09182a;border-radius:9px;padding:9px;min-width:0}.wa-contact small{display:block;color:#7f96b5;font-size:9px;margin-bottom:4px}.wa-contact b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.wa-bubble{max-width:92%;padding:13px 15px;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,#123a35,#0d2d2d);border:1px solid #1f5b50;color:#dcf7eb;line-height:1.5;margin:8px 0 13px}
.wa-audio{margin:8px 0 12px}.wa-audio audio{width:100%;height:42px}.voice-placeholder{border:1px dashed #3c5b7e;background:#09182a;padding:12px;border-radius:10px;color:#91b6e8}.voice-placeholder small{display:block;color:#778eae;margin-top:5px}
.wa-transcript-label{display:flex;flex-direction:column;gap:6px;color:#8fa8c8;font-size:11px}.wa-transcript-label textarea{resize:vertical;line-height:1.45}
.wa-ai-note,.wa-upload-note{border:1px solid #2b5278;background:rgba(46,130,255,.07);color:#839dbc;border-radius:9px;padding:9px 11px;margin-top:12px;font-size:10px;line-height:1.4}
.wa-order-fields{margin-bottom:11px}.wa-add-line{display:grid;grid-template-columns:minmax(200px,1fr) 80px auto;gap:7px;padding:10px;border:1px solid #29415f;background:#09182a;border-radius:10px;margin-bottom:10px}.wa-lines{border:1px solid #29415f;border-radius:10px;overflow:hidden}.wa-line-head,.wa-line{display:grid;grid-template-columns:minmax(160px,1.45fr) 65px 60px 85px 100px 32px;gap:6px;align-items:center;padding:8px}.wa-line-head{background:#10213a;color:#869cbb;text-transform:uppercase;font-size:9px}.wa-line{border-top:1px solid #203653}.wa-line small{display:block;color:#7f95b3;margin-top:3px}.wa-line input{width:100%;min-width:0;padding:7px}.wa-line>b{font-size:11px;text-align:right;white-space:nowrap}.wa-lines-empty{padding:25px 10px}.wa-draft-total{display:flex;justify-content:flex-end;gap:18px;align-items:center;border-top:1px solid #29415f;margin-top:10px;padding-top:11px}.wa-draft-total span{color:#8da4c3}.wa-draft-total b{color:#67b3ff;font-size:20px}.wa-convert{margin-left:auto}.wa-draft{position:sticky;top:10px}
@media(max-width:1450px){.wa-layout{grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr)}.wa-layout>div:last-child{grid-column:1/-1}.wa-draft{position:static}}
@media(max-width:1000px){.wa-layout{grid-template-columns:1fr}.wa-layout>div:last-child{grid-column:auto}.wa-contact{grid-template-columns:1fr 1fr}.wa-line-head{display:none}.wa-line{grid-template-columns:1fr 60px 70px}.wa-add-line{grid-template-columns:1fr 70px}.wa-add-line button{grid-column:1/-1}}


/* Automatic Voice Transcription v2.1 */
.wa-transcription-status{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:9px;padding:8px 10px;margin:4px 0 10px;font-size:11px}
.wa-transcription-status span{font-weight:800}.wa-transcription-status small{font-size:9px}
.wa-transcription-status.ready{border:1px solid rgba(30,218,132,.28);background:rgba(30,218,132,.08);color:#55e5a1}.wa-transcription-status.ready small{color:#87bca7}
.wa-transcription-status.setup{border:1px solid rgba(255,160,67,.28);background:rgba(255,160,67,.08);color:#ffc17d}.wa-transcription-status.setup small{color:#b79c7e}
.voice-transcribe-btn{border:0;background:linear-gradient(90deg,#16a085,#2e82ff);color:white;font-weight:800;box-shadow:0 8px 22px rgba(30,150,190,.18)}
.voice-transcribe-btn:hover{filter:brightness(1.08)}.voice-transcribe-btn:disabled{opacity:.55;cursor:not-allowed}
.wa-transcribed-meta{font-size:9px;color:#7f99ba;margin:7px 1px}.wa-transcription-error{border:1px solid rgba(255,97,114,.3);background:rgba(255,97,114,.08);color:#ff8b98;border-radius:8px;padding:8px 10px;margin:8px 0;font-size:10px}


/* COD Recovery & Courier Tracking v2.2 */
.status.PartiallyRemitted{color:#ffc27b;background:rgba(255,160,67,.13)}.status.Remitted{color:#50e29b;background:rgba(30,218,132,.13)}.status.Returned{color:#ff8492;background:rgba(255,97,114,.13)}
.cod-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cod-tools input{min-width:230px}
.cod-remit-values{text-align:right}.cod-remit-values small{display:block;color:#7f95b3;margin-top:3px}
.cod-remit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.cod-remit-summary>div,.cod-detail-grid>div{border:1px solid #29415f;background:#09182a;border-radius:9px;padding:10px}.cod-remit-summary small,.cod-detail-grid small{display:block;color:#8197b5;margin-bottom:4px}.cod-remit-summary b{font-size:14px}.cod-net-preview{border:1px dashed #3a5c83;background:#09182a;color:#8fb4e2;border-radius:9px;padding:9px 11px;font-size:11px;margin-top:11px}
.cod-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.cod-detail-grid b{font-size:13px}
@media(max-width:1000px){.cod-tools{justify-content:flex-start}.cod-tools input{min-width:180px}.cod-remit-summary,.cod-detail-grid{grid-template-columns:1fr 1fr}}


/* Backup / Restore & Deployment Safety v2.3 */
.system-maintenance,.deployment-grid{margin-top:14px}.backup-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.backup-rule{border:1px solid #2f5277;background:rgba(46,130,255,.07);color:#8ea9c9;border-radius:9px;padding:10px 11px;font-size:10px;line-height:1.45;margin-top:12px}
.health-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.health-grid>div{border:1px solid #29415f;background:#09182a;border-radius:9px;padding:10px}.health-grid small{display:block;color:#7e95b5;font-size:9px;margin-bottom:4px}.health-grid b{font-size:12px;overflow-wrap:anywhere}
.backup-kind{display:inline-block;border-radius:7px;padding:5px 7px;font-size:9px;font-weight:800}.backup-kind.Automatic{color:#65dcff;background:rgba(28,207,255,.12)}.backup-kind.Manual{color:#a89bff;background:rgba(123,76,255,.14)}.backup-kind.Pre-Restore{color:#ffc17b;background:rgba(255,160,67,.13)}
.deployment-list{display:flex;flex-direction:column;gap:8px;margin-top:11px}.deployment-list>div{border:1px solid #29415f;border-radius:9px;padding:9px 11px;font-size:11px}.deployment-list .done{color:#55dfa0;background:rgba(30,218,132,.06)}.deployment-list .next{color:#8fa9cb;background:#09182a}
@media(max-width:900px){.health-grid{grid-template-columns:1fr}.backup-actions .btn{width:100%}}


/* SQL Server Migration Center v2.4 */
.sql-migration-card{border-color:#315f91!important;background:linear-gradient(160deg,#0c1c31,#0a1727)!important}
.sql-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.sql-status-grid>div{border:1px solid #294563;background:#071522;border-radius:9px;padding:10px}.sql-status-grid small{display:block;color:#7d97b9;font-size:9px;margin-bottom:4px}.sql-status-grid b{font-size:11px;overflow-wrap:anywhere}
.migration-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0}.migration-steps>div{display:flex;align-items:center;gap:7px;border:1px solid #294563;background:#09182a;border-radius:9px;padding:8px;color:#9db1cb;font-size:9px}.migration-steps b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#754cff,#2e82ff);color:#fff;font-size:10px}
.sql-actions{flex-wrap:wrap}.sql-result{border:1px solid #304b6e;background:#071522;color:#8fa8c7;border-radius:9px;padding:10px 11px;margin:11px 0;font-size:10px;line-height:1.4}.sql-result.ok{border-color:rgba(30,218,132,.35);color:#59dea1;background:rgba(30,218,132,.06)}.sql-result.bad{border-color:rgba(255,97,114,.35);color:#ff8b98;background:rgba(255,97,114,.06)}
@media(max-width:1100px){.sql-status-grid{grid-template-columns:1fr 1fr}.migration-steps{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.sql-status-grid,.migration-steps{grid-template-columns:1fr}.sql-actions .btn{width:100%}}


/* ==========================================================
   Interactive Card Hover / Pop Highlight v2.4.1
   Desktop mouse only — no layout shift, touch devices unchanged
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  /* Main ERP cards / boxes */
  .card {
    transition:
      transform .20s ease,
      border-color .20s ease,
      box-shadow .20s ease,
      background-color .20s ease;
    transform-origin: center;
    will-change: transform;
  }

  .card:hover {
    transform: translateY(-5px) scale(1.008);
    border-color: rgba(91, 132, 255, .72) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, .28),
      0 0 0 1px rgba(86, 112, 255, .12),
      0 0 22px rgba(67, 104, 255, .11);
    z-index: 3;
  }

  /* Dashboard list boxes / compact information tiles */
  .health-grid > div,
  .sql-status-grid > div,
  .wa-contact > div,
  .cod-remit-summary > div,
  .cod-detail-grid > div,
  .deployment-list > div {
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }

  .health-grid > div:hover,
  .sql-status-grid > div:hover,
  .wa-contact > div:hover,
  .cod-remit-summary > div:hover,
  .cod-detail-grid > div:hover,
  .deployment-list > div:hover {
    transform: translateY(-3px);
    border-color: rgba(77, 145, 255, .62);
    background-color: rgba(16, 36, 61, .96);
    box-shadow:
      0 9px 22px rgba(0, 0, 0, .22),
      0 0 16px rgba(46, 130, 255, .08);
  }

  /* Dashboard side-list rows: Sales by Location / Low Stock etc. */
  .list .row {
    transition:
      transform .16s ease,
      background-color .16s ease,
      border-color .16s ease,
      box-shadow .16s ease;
    border-radius: 9px;
  }

  .list .row:hover {
    transform: translateX(4px);
    background: rgba(46, 130, 255, .055);
    box-shadow: inset 3px 0 0 rgba(76, 112, 255, .55);
  }

  /* Report selector tiles also behave like interactive boxes */
  .report-type-strip button {
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }

  .report-type-strip button:hover {
    transform: translateY(-3px);
    box-shadow:
      0 9px 20px rgba(0, 0, 0, .20),
      0 0 15px rgba(76, 112, 255, .08);
  }
}

/* Accessibility: no movement when reduced-motion is enabled */
@media (prefers-reduced-motion: reduce) {
  .card,
  .health-grid > div,
  .sql-status-grid > div,
  .wa-contact > div,
  .cod-remit-summary > div,
  .cod-detail-grid > div,
  .deployment-list > div,
  .list .row,
  .report-type-strip button {
    transition: none !important;
  }

  .card:hover,
  .health-grid > div:hover,
  .sql-status-grid > div:hover,
  .wa-contact > div:hover,
  .cod-remit-summary > div:hover,
  .cod-detail-grid > div:hover,
  .deployment-list > div:hover,
  .list .row:hover,
  .report-type-strip button:hover {
    transform: none !important;
  }
}



/* Legacy Sales Masters Foundation v2.4.2 */
.legacy-customer-form .legacy-check{justify-content:center}.legacy-check label{display:flex;align-items:center;gap:8px;margin-top:22px}
.legacy-order-strip{grid-template-columns:repeat(4,minmax(130px,1fr))!important;flex-wrap:wrap}
.legacy-rule-note{border:1px solid #315a82;background:rgba(46,130,255,.07);color:#90aaca;border-radius:9px;padding:10px;margin-bottom:10px;font-size:10px}
.discount-rule-add{display:grid;grid-template-columns:120px minmax(180px,1fr) 100px 100px 135px auto;gap:6px;margin-bottom:10px}.commission-entry{display:grid;grid-template-columns:160px 140px auto;gap:8px;margin-bottom:12px}.price-history-mini{display:flex;gap:8px;flex-wrap:wrap}.price-history-mini span{border:1px solid #294563;background:#09182a;border-radius:8px;padding:7px 9px;color:#8ea5c4;font-size:10px}
@media(max-width:1100px){.legacy-order-strip{grid-template-columns:1fr 1fr!important}.discount-rule-add{grid-template-columns:1fr 1fr}.commission-entry{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.legacy-order-strip,.discount-rule-add,.commission-entry{grid-template-columns:1fr!important}}


/* Legacy Sale Invoice / Ledger / Commission parity v2.4.3 */
.legacy-invoice-grid{grid-template-columns:minmax(260px,.75fr) minmax(560px,1.6fr) minmax(330px,.9fr)}
.legacy-lines th,.legacy-lines td{font-size:10px}.legacy-invoice-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.legacy-invoice-totals>div{border:1px solid #294563;background:#081728;border-radius:9px;padding:9px}.legacy-invoice-totals span{display:block;color:#8198b7;font-size:9px}.legacy-invoice-totals b{display:block;margin-top:4px;font-size:12px}.legacy-invoice-totals .net{border-color:#4a69e8;background:rgba(67,84,220,.12)}.legacy-invoice-totals .net b{font-size:17px;color:#75b6ff}.legacy-invoice-totals .closing{grid-column:span 2;border-color:#7c55e6;background:rgba(123,76,255,.11)}.legacy-invoice-totals .closing b{font-size:17px}
.compact-history{max-height:275px}.compact-history table{min-width:100%}.compact-history th,.compact-history td{font-size:9px;padding:7px}.selected-history{background:rgba(105,79,255,.11)}
.legacy-history-card{margin-top:14px}.legacy-draft-head{grid-template-columns:minmax(190px,1.5fr) 78px 65px 85px 78px 105px 34px 34px}.legacy-draft-line{grid-template-columns:minmax(190px,1.5fr) 78px 65px 85px 78px 105px 34px 34px}.draft-disc{display:flex;flex-direction:column;gap:2px}.draft-disc input{width:100%}.draft-disc small{font-size:8px;color:#7f96b6;text-align:center}.legacy-draft-total small{display:block;color:#839bbb;font-size:9px;margin-bottom:4px}.legacy-receipt-head{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.legacy-receipt-head>div{border:1px solid #294563;background:#09182a;border-radius:9px;padding:10px}.legacy-receipt-head small{display:block;color:#7d95b6;margin-bottom:4px}
@media(max-width:1450px){.legacy-invoice-grid{grid-template-columns:minmax(250px,.8fr) minmax(520px,1.5fr)}.legacy-invoice-grid>div:last-child{grid-column:1/-1}.legacy-invoice-totals{grid-template-columns:1fr 1fr}}
@media(max-width:950px){.legacy-invoice-grid{grid-template-columns:1fr}.legacy-invoice-grid>div:last-child{grid-column:auto}.legacy-draft-head{display:none}.legacy-draft-line{grid-template-columns:1fr 70px 70px}.legacy-invoice-totals{grid-template-columns:1fr 1fr}}


/* Compact one-screen Sale Invoice editor v2.4.4 */
.invoice-editor-modal{width:min(1420px,97vw)!important;max-height:95vh!important;padding:12px 14px 0!important;overflow:auto!important}
.invoice-editor-modal .mh{position:sticky;top:-12px;z-index:8;background:#0d1b2f;padding:8px 2px 5px;border-bottom:1px solid rgba(53,82,119,.45)}
.invoice-editor-modal .mh h2{font-size:21px;margin:0 0 7px}.invoice-editor-modal .mh button{font-size:24px}
.invoice-editor-modal .order-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 10px}
.invoice-editor-modal .fg{gap:3px}.invoice-editor-modal .fg label{font-size:10px}.invoice-editor-modal select,.invoice-editor-modal input,.invoice-editor-modal textarea{padding:7px 9px;border-radius:8px;min-height:34px;font-size:12px}
.invoice-editor-modal .full{grid-column:1/-1}.invoice-editor-modal .span2{grid-column:span 2}
.invoice-editor-modal .readout{min-height:34px;padding:7px 10px}.compact-balance{display:flex;align-items:center;color:#5ed6ff;font-weight:800;font-size:16px}
.invoice-editor-modal .invoice-items-field{margin-top:1px}.invoice-editor-modal .legacy-draft-head{grid-template-columns:minmax(260px,1.8fr) 82px 65px 85px 76px 110px 34px 34px;padding-bottom:3px}
.invoice-editor-modal .legacy-draft-line{grid-template-columns:minmax(260px,1.8fr) 82px 65px 85px 76px 110px 34px 34px;padding:4px 0;min-height:50px}
.invoice-editor-modal .legacy-draft-line select,.invoice-editor-modal .legacy-draft-line input{min-height:32px;padding:5px 7px}
.invoice-editor-modal .stockread{padding:6px 5px}.invoice-editor-modal .draft-disc small{font-size:7px}
.invoice-editor-modal .compact-add-book{margin-top:6px;width:100%;padding:6px 10px}
.invoice-editor-modal textarea{min-height:48px;max-height:64px;resize:vertical}
.invoice-editor-modal .compact-total{border:1px solid #2f4d72;border-radius:9px;padding:7px 10px!important;justify-content:space-between!important;align-self:end}.invoice-editor-modal .compact-total b{font-size:20px}
.invoice-editor-actions{position:sticky;bottom:0;z-index:9;margin:8px -14px 0!important;padding:9px 14px;background:linear-gradient(180deg,rgba(13,27,47,.94),#0d1b2f 35%);border-top:1px solid #294563}
.invoice-editor-actions .btn{padding:8px 15px}
@media(min-width:1250px) and (min-height:760px){.invoice-editor-modal{overflow-y:auto!important}.invoice-editor-modal .order-form{gap:6px 10px}}
@media(max-width:1000px){.invoice-editor-modal .order-form{grid-template-columns:1fr 1fr}.invoice-editor-modal .span2{grid-column:1/-1}.invoice-editor-modal .legacy-draft-head{display:none}.invoice-editor-modal .legacy-draft-line{grid-template-columns:1fr 70px 70px}}
@media(max-width:700px){.invoice-editor-modal{width:96vw!important}.invoice-editor-modal .order-form{grid-template-columns:1fr}.invoice-editor-modal .span2,.invoice-editor-modal .full{grid-column:1}.invoice-editor-modal .compact-total{grid-column:1}}


/* Invoice Entry Parity v2.4.5 */
.invoice-entry-topbar{display:grid;grid-template-columns:1fr 1fr .7fr 1fr;gap:8px;margin:2px 0 8px;padding:8px;border:1px solid #294563;border-radius:10px;background:#081728}
.invoice-entry-topbar>div{min-height:36px;padding:3px 6px}.invoice-entry-topbar small{display:block;color:#7f96b5;font-size:9px;margin-bottom:3px}.invoice-entry-topbar b{font-size:12px}.invoice-entry-topbar input{min-height:30px!important;padding:4px 7px!important}
.invoice-editor-modal .parity-head{grid-template-columns:minmax(240px,1.55fr) 82px 80px 58px 76px 96px 72px 96px 100px 34px 34px!important}
.invoice-editor-modal .parity-line{grid-template-columns:minmax(240px,1.55fr) 82px 80px 58px 76px 96px 72px 96px 100px 34px 34px!important}
.sku-chip{display:flex;align-items:center;justify-content:center;border:1px solid #294563;background:#09182a;border-radius:7px;color:#8eabd1;font-size:9px;font-weight:700;padding:5px;overflow:hidden;text-overflow:ellipsis}
.line-gross,.line-disc,.line-net{display:flex;align-items:center;justify-content:flex-end;font-size:10px;white-space:nowrap}.line-net{font-size:12px;color:#e9f2ff}.line-disc{color:#ffba70}
.invoice-balance-strip{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;margin:7px 0 0}
.invoice-balance-strip>div{border:1px solid #294563;background:#081728;border-radius:9px;padding:7px 10px}.invoice-balance-strip small{display:block;color:#7f96b5;font-size:9px}.invoice-balance-strip b{display:block;font-size:14px;margin-top:3px}.invoice-balance-strip .closing{border-color:#6659e8;background:rgba(99,83,226,.11)}.invoice-balance-strip .closing b{font-size:18px;color:#79b7ff}
.save-post{background:linear-gradient(90deg,#6a43ff,#2d83ff)!important}
@media(max-width:1350px){.invoice-editor-modal .parity-head{display:none}.invoice-editor-modal .parity-line{grid-template-columns:minmax(240px,1.7fr) 80px 65px 85px 80px 100px 34px 34px!important}.invoice-editor-modal .parity-line .sku-chip,.invoice-editor-modal .parity-line .line-gross,.invoice-editor-modal .parity-line .line-disc{display:none}}
@media(max-width:900px){.invoice-entry-topbar{grid-template-columns:1fr 1fr}.invoice-balance-strip{grid-template-columns:1fr}.invoice-editor-modal .parity-line{grid-template-columns:1fr 70px 70px!important}.invoice-editor-modal .parity-line>*:not(select):not(input):not(button){display:none}}


/* Mix Item / Book Bundle v2.4.6 */
.mix-badge{display:inline-block;margin:3px 0 0 5px;padding:2px 5px;border-radius:5px;background:rgba(123,76,255,.15);border:1px solid rgba(123,76,255,.35);color:#b9a8ff;font-size:8px;vertical-align:middle}
.mix-summary-box{border:1px solid #315477;background:#09182a;border-radius:9px;padding:9px!important}.mix-summary{color:#8ea5c5;font-size:10px;margin-bottom:7px}
.mix-item-head{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px}.mix-item-head>div{border:1px solid #294563;background:#09182a;border-radius:9px;padding:10px}.mix-item-head small{display:block;color:#8198b7;font-size:9px;margin-bottom:4px}.mix-item-head b{font-size:12px}
.mix-grid-head,.mix-grid-row{display:grid;grid-template-columns:minmax(280px,1.8fr) 120px 115px 135px 42px;gap:8px;align-items:center}.mix-grid-head{padding:5px 2px;color:#7f96b5;font-size:9px}.mix-grid-row{padding:5px 0;border-top:1px solid rgba(41,69,99,.5)}.mix-grid-row select,.mix-grid-row input{min-height:34px}.mix-grid-row b{text-align:right;font-size:11px}
@media(max-width:900px){.mix-item-head{grid-template-columns:1fr 1fr}.mix-grid-head{display:none}.mix-grid-row{grid-template-columns:1fr 90px 90px 38px}.mix-grid-row b:nth-of-type(2){display:none}}


/* Legacy Reports & Sales Comparison v2.4.7 */
.growth-up{color:#45dfa2;font-weight:800}.growth-down{color:#ff8b98;font-weight:800}.growth-flat{color:#8ea5c5;font-weight:800}
.report-type-strip{max-height:210px;overflow:auto;align-content:start}
.report-type-strip::-webkit-scrollbar{height:6px;width:6px}.report-type-strip::-webkit-scrollbar-thumb{background:#294f83;border-radius:10px}
.report-table td small{font-size:8px;color:#8299b7;margin-top:2px}
@media(max-width:900px){.report-type-strip{max-height:none}}


/* Booking Agent Commission Settlement v2.4.9 */
.agent-master-grid{grid-template-columns:minmax(760px,2fr) minmax(300px,.8fr)!important}
.agent-due{color:#ffbb6a!important}.agent-pay-due{color:#ffbb6a;font-size:18px;font-weight:800}
.agent-ledger-head{grid-template-columns:repeat(3,1fr)}
.agent-master-grid table th,.agent-master-grid table td{font-size:9px}.agent-master-grid .actions.compact{flex-wrap:nowrap}
@media(max-width:1250px){.agent-master-grid{grid-template-columns:1fr!important}.agent-master-grid .actions.compact{flex-wrap:wrap}}
@media(max-width:700px){.agent-ledger-head{grid-template-columns:1fr}}

/* Agent rate source fix v2.4.9.4 */
.discount-only-rule{grid-template-columns:1fr 1.4fr .8fr 1fr auto!important}

/* Commission Engine v2.5.0 */
.engine-badge{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid rgba(69,223,162,.4);border-radius:6px;background:rgba(69,223,162,.08);color:#45dfa2;font-size:8px;font-weight:800;letter-spacing:.05em}

/* Duplicate Agent ID integrity v2.5.1 */
.engine-badge.id-ok{border-color:rgba(79,169,255,.45);background:rgba(79,169,255,.08);color:#72b8ff}

/* Agent Ledger chronological order v2.5.2 */
.negative-balance{color:#ff8b98!important}


/* Opening Balance Centre v2.6.0 */
.ob-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.ob-grid{grid-template-columns:1.5fr 1fr}.ob-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.ob-guide>div{border:1px solid #294563;background:#09182a;border-radius:10px;padding:11px}.ob-guide b{display:block;margin-bottom:4px}.ob-guide small{color:#8ea5c5;line-height:1.35}
@media(max-width:1000px){.ob-kpis{grid-template-columns:1fr 1fr}.ob-grid{grid-template-columns:1fr}.ob-guide{grid-template-columns:1fr}}

/* Financial Year Close v2.7.0 */
.fy-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.fy-grid{grid-template-columns:1.5fr 1fr}.fy-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.fy-flow>div{border:1px solid #294563;background:#09182a;border-radius:10px;padding:11px}.fy-flow b{display:block;margin-bottom:4px}.fy-flow small{color:#8ea5c5;line-height:1.35}
@media(max-width:1100px){.fy-kpis{grid-template-columns:1fr 1fr}.fy-grid{grid-template-columns:1fr}.fy-flow{grid-template-columns:1fr 1fr}}


/* Reports & Printing Finalization v2.8.0 */
.report-quick{display:flex;gap:5px;align-items:flex-end}.report-profile{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 12px}.report-profile>div{background:#09182a;border:1px solid #294563;border-radius:10px;padding:10px}.report-profile small{display:block;color:#80a4cf;font-size:9px;margin-bottom:4px}.report-profile b{font-size:11px;overflow-wrap:anywhere}
@media(max-width:1200px){.report-profile{grid-template-columns:repeat(3,1fr)}.report-quick{grid-column:1/-1}}
@media(max-width:700px){.report-profile{grid-template-columns:1fr 1fr}}

/* v2.9.0 */
.contact-master{border:1px solid #294563;border-radius:12px;padding:10px;background:#09182a}.contact-master .ph{margin-bottom:8px}.contact-row{display:grid;grid-template-columns:.8fr 1.2fr 1.2fr auto;gap:7px;margin:6px 0}.contact-row input,.contact-row select{min-width:0}.discount-only-rule{grid-template-columns:1fr 1.4fr .8fr 1fr auto!important}@media(max-width:800px){.contact-row{grid-template-columns:1fr 1fr}}


/* Mix Bundle Sale Invoice Expansion v2.9.1 */
.draft-line-wrap.mix-selected{margin:5px 0 8px;border:1px solid rgba(126,91,255,.35);border-radius:11px;background:rgba(74,48,145,.08);overflow:hidden}.draft-line-wrap.mix-selected>.draft-line{padding:5px 7px!important;border-bottom:1px solid rgba(126,91,255,.22)!important}.invoice-mix-contents{margin:0;padding:7px 9px 9px;background:rgba(7,19,35,.72)}.invoice-mix-contents .mix-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:5px}.invoice-mix-contents .mix-title b{font-size:10px;color:#bdaeff}.invoice-mix-contents .mix-title span{font-size:9px;color:#829abb}.invoice-mix-head,.invoice-mix-component{display:grid;grid-template-columns:minmax(240px,1.7fr) 90px 85px 80px 90px;gap:7px;align-items:center}.invoice-mix-head{padding:4px 6px;color:#6f8eb4;font-size:8px;text-transform:uppercase}.invoice-mix-component{padding:5px 6px;border-top:1px solid rgba(41,69,99,.55);font-size:9px}.invoice-mix-component>span:first-child b{display:block;color:#dce8f8;font-size:10px}.invoice-mix-component small{display:block;color:#7591b5;font-size:8px;margin-top:1px}.invoice-mix-component.short{background:rgba(220,65,88,.04)}.mix-state{width:max-content;padding:3px 6px;border-radius:999px;font-weight:800;font-size:8px}.mix-state.ok{color:#54dfa0;background:rgba(35,211,130,.1);border:1px solid rgba(35,211,130,.25)}.mix-state.short{color:#ff8b98;background:rgba(255,80,104,.1);border:1px solid rgba(255,80,104,.25)}.invoice-mix-contents.missing{border-left:3px solid #ff7c8e}.mix-warning{color:#ff9cab;font-size:9px}.order-mix-detail-row>td{padding:0!important;background:#09182a}.order-mix-detail-row .invoice-mix-contents{margin:0;border-radius:0}.sku-chip{white-space:nowrap}
@media(max-width:1000px){.invoice-mix-head{display:none}.invoice-mix-component{grid-template-columns:1fr 70px 70px}.invoice-mix-component>span:nth-child(4),.invoice-mix-component>span:nth-child(5){display:none}.invoice-mix-contents .mix-title{align-items:flex-start;flex-direction:column;gap:2px}}


/* Mix Bundle invoice/detail containment fix v2.9.2 */
.order-lines{
  width:100%;
  max-width:100%;
  table-layout:fixed;
}
.order-lines th,
.order-lines td{
  min-width:0;
}
.order-mix-detail-row>td{
  max-width:0;
  overflow:hidden;
  padding:0!important;
}
.order-mix-detail-row .invoice-mix-contents,
.draft-line-wrap .invoice-mix-contents{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}
.invoice-mix-contents .mix-title{
  min-width:0;
  max-width:100%;
}
.invoice-mix-contents .mix-title>*{
  min-width:0;
  max-width:100%;
}
.invoice-mix-contents .mix-title b{
  overflow-wrap:anywhere;
}
.invoice-mix-contents .mix-title span{
  flex:0 1 auto;
  min-width:0;
  text-align:right;
  white-space:normal;
  overflow-wrap:anywhere;
}
.invoice-mix-head,
.invoice-mix-component{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  grid-template-columns:
    minmax(0,2fr)
    minmax(52px,.62fr)
    minmax(52px,.62fr)
    minmax(52px,.62fr)
    minmax(68px,.78fr);
}
.invoice-mix-head>span,
.invoice-mix-component>span{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
.invoice-mix-component>span:first-child{
  overflow:hidden;
}
.invoice-mix-component>span:first-child b,
.invoice-mix-component>span:first-child small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mix-state{
  justify-self:start;
  width:auto;
  max-width:100%;
  white-space:nowrap;
  box-sizing:border-box;
}

@media(max-width:1000px){
  .invoice-mix-head{display:none}
  .invoice-mix-component{
    grid-template-columns:minmax(0,1fr) minmax(48px,.22fr) minmax(60px,.3fr);
  }
  .invoice-mix-component>span:nth-child(4),
  .invoice-mix-component>span:nth-child(5){display:none}
  .invoice-mix-contents .mix-title{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
  .invoice-mix-contents .mix-title span{text-align:left}
}


/* Chit Management v2.10.0 */
.chit-toolbar{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:8px;margin-bottom:12px}.chit-toolbar label{display:grid;gap:4px;color:#86a9d5;font-size:10px}.chit-line{display:grid;grid-template-columns:minmax(240px,2fr) 80px 75px 105px 75px 120px 42px;gap:8px;align-items:center;border-bottom:1px solid #203d5d;padding:9px 0;min-width:0}.chit-line>*{min-width:0}.chit-line .invoice-mix-contents{grid-column:1/-1}.chit-stock{font-size:10px;border:1px solid #1c765d;background:#07372e;color:#42efb1;border-radius:8px;padding:7px;text-align:center}.chit-stock.short{border-color:#8c3948;background:#39151e;color:#ff8b98}.chit-total-bar{display:flex;justify-content:flex-end;align-items:center;gap:20px;padding:12px 4px;border-top:1px solid #294563;margin-top:8px}.chit-total-bar b{font-size:22px;color:#64a7ff}.chit-lines-head{margin-top:10px}.chit-preview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.chit-preview-kpis>div{background:#09182a;border:1px solid #294563;border-radius:10px;padding:10px}.chit-preview-kpis small{display:block;color:#86a9d5}.chit-preview-kpis b{display:block;font-size:18px;margin-top:3px}
@media(max-width:1100px){.chit-toolbar{grid-template-columns:1fr 1fr}.chit-line{grid-template-columns:minmax(180px,1.6fr) 70px 65px 90px 70px 105px 38px}}


/* =========================================================
   v2.11.0 — Top Bar, Search, Alerts, Urdu/English
   ========================================================= */
header{position:relative;z-index:30}
.global-search{position:relative}
.search-icon{flex:0 0 auto}
.global-search-results{position:absolute;top:58px;left:0;width:min(620px,78vw);max-height:430px;overflow:auto;background:#081629;border:1px solid #35577e;border-radius:13px;box-shadow:0 22px 55px rgba(0,0,0,.45);padding:6px;display:none;z-index:120}
.global-search-results.show{display:block}
.global-search-row{width:100%;display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:center;text-align:left;border:0;border-bottom:1px solid #1d3552;background:transparent;color:#fff;padding:10px;border-radius:8px;cursor:pointer}
.global-search-row:hover,.global-search-row:focus{background:#112541;outline:1px solid #405dff}
.global-search-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-row small{display:block;color:#90a9ca;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-type{font-size:10px;font-weight:800;color:#6cdcff;background:#0c2c41;border:1px solid #1a536d;border-radius:7px;padding:5px 6px;text-align:center}
.global-search-empty{padding:20px;color:#8fa7c7;text-align:center}

.top{align-items:center}
.top-control{border:1px solid var(--line);background:#091729;color:#fff;border-radius:11px;padding:10px 13px;min-height:44px;cursor:pointer;font:inherit;display:flex;align-items:center;gap:5px;white-space:nowrap}
.top-control:hover{border-color:#4e76ac;background:#0d2038;transform:translateY(-1px)}
.alert-control.has-alerts{border-color:#885067}
.alert-control.has-alerts #alertCount{color:#ff8aa0}
#alertCount{font-size:13px}
.sync-control.syncing{opacity:.75}
.sync-control.syncing:first-letter{animation:syncspin .8s linear infinite}
#syncDot{width:7px;height:7px;border-radius:50%;background:#91a0b6;display:inline-block}
#syncDot.ok{background:#53e9a1;box-shadow:0 0 8px rgba(83,233,161,.6)}
.language-control{font-weight:800;color:#cfc6ff}
@keyframes syncspin{to{transform:rotate(360deg)}}

.alert-centre{display:grid;gap:9px}
.business-alert{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;width:100%;border:1px solid #294563;background:#09182a;color:#fff;border-radius:12px;padding:11px;text-align:left;cursor:pointer}
.business-alert:hover{border-color:#5277ff;background:#10233d}
.business-alert.warn{border-left:4px solid #ffae55}
.business-alert.danger{border-left:4px solid #ff6c83}
.business-alert .alert-icon{font-size:22px}
.business-alert b{display:block;font-size:13px}
.business-alert small{display:block;color:#8fa8ca;margin-top:3px}
.business-alert strong{min-width:31px;text-align:center;border-radius:999px;background:#142d4d;padding:6px}

body.lang-ur{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
body.lang-ur main{direction:rtl}
body.lang-ur aside{direction:rtl}
body.lang-ur #nav button{text-align:right}
body.lang-ur header{direction:rtl}
body.lang-ur .global-search-results{left:auto;right:0}
body.lang-ur .global-search-row{text-align:right;grid-template-columns:1fr 105px}
body.lang-ur .global-search-row .search-type{grid-column:2}
body.lang-ur .global-search-row>span:nth-child(2){grid-column:1;grid-row:1}
body.lang-ur .hero .ha{right:auto;left:24px}
body.lang-ur table th,body.lang-ur table td{text-align:right}
body.lang-ur .form,body.lang-ur .filters,body.lang-ur .actions{direction:rtl}
body.lang-ur input,body.lang-ur textarea,body.lang-ur select{text-align:right}
body.lang-ur .value,body.lang-ur .readout,body.lang-ur .report-money{direction:ltr;text-align:right}
body.lang-ur .chart,body.lang-ur .invoice-mix-component,body.lang-ur .invoice-mix-head{direction:ltr}
body.lang-ur .top-user{direction:ltr}

/* Existing sun button is now a working light/dark toggle. */
body.light-mode{--bg:#eaf0f7;--panel:#fff;--line:#bdcad9;--muted:#60728b;color:#102035;background:#eaf0f7}
body.light-mode aside{background:#f8fbff;color:#102035}
body.light-mode main{background:#eef4fa}
body.light-mode .card,body.light-mode .panel,body.light-mode .modalbox,body.light-mode .search,body.light-mode .top-control,body.light-mode .top-user{background:#fff;color:#102035}
body.light-mode input,body.light-mode select,body.light-mode textarea{background:#fff;color:#102035}
body.light-mode .global-search-results{background:#fff;color:#102035}
body.light-mode .global-search-row{color:#102035}
body.light-mode .global-search-row:hover{background:#edf3fb}
body.light-mode #nav button{color:#102035}

@media(max-width:1000px){
 header{gap:10px;height:auto;padding:15px 0;align-items:flex-start}
 .search{width:min(420px,46vw)}
 .top{flex-wrap:wrap;justify-content:flex-end}
 .top-control{padding:8px 10px;min-height:40px}
}


/* =========================================================
   v2.11.1 — Urdu sidebar completion + stable left dashboard layout
   ========================================================= */

/* The application shell NEVER mirrors. Sidebar stays physically on the LEFT. */
body.lang-ur .app{direction:ltr}
body.lang-ur aside{
  direction:ltr;
  left:0;
  right:auto;
  border-right:1px solid var(--line);
  border-left:0;
}
body.lang-ur main{
  direction:ltr;
  margin-left:246px;
  margin-right:0;
}

/* Sidebar labels are Urdu RTL, but the menu bar stays left-side and stable. */
body.lang-ur #nav{
  direction:ltr;
}
body.lang-ur #nav button{
  direction:rtl;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}
#nav button .nav-icon{
  flex:0 0 18px;
  width:18px;
  text-align:center;
}
#nav button .nav-label{
  min-width:0;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.lang-ur #nav button .nav-label{
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:right;
}
body.lang-ur #nav button .nav-icon{
  order:2;
}
body.lang-ur #nav button .nav-label{
  order:1;
}

/* Keep the Dashboard/main content geometry left-to-right.
   Only text blocks inside the content become RTL. */
body.lang-ur #host{
  direction:ltr;
}
body.lang-ur #host .hero,
body.lang-ur #host .card,
body.lang-ur #host .panel,
body.lang-ur #host .kpi{
  direction:rtl;
}
body.lang-ur #host .hero{
  text-align:right;
}
/* Dashboard hero action remains anchored on the LEFT in Urdu mode. */
body.lang-ur #host .hero .ha{
  left:24px;
  right:auto;
  direction:rtl;
}
body.lang-ur #host .hero h1,
body.lang-ur #host .hero p{
  padding-left:190px;
  padding-right:0;
}

/* Header shell remains left/right stable; controls themselves can be RTL. */
body.lang-ur header{
  direction:ltr;
}
body.lang-ur header .search{
  direction:rtl;
}
body.lang-ur header .top{
  direction:ltr;
}
body.lang-ur header .top-control{
  direction:rtl;
}

/* Sidebar profile stays readable and fixed at bottom-left. */
body.lang-ur .user{
  direction:ltr;
}
body.lang-ur .user span{
  direction:rtl;
  text-align:right;
}

/* Urdu chart/month filter labels are RTL without mirroring graph geometry. */
body.lang-ur .sales-panel,
body.lang-ur .sales-panel .filters{
  direction:rtl;
}
body.lang-ur .sales-panel .chart,
body.lang-ur .sales-panel .chart-caption{
  direction:ltr;
}

/* Avoid long Urdu labels clipping in the sidebar. */
body.lang-ur #nav button{
  font-size:15px;
  padding-left:13px;
  padding-right:13px;
}

@media(max-width:900px){
  body.lang-ur #host .hero h1,
  body.lang-ur #host .hero p{
    padding-left:0;
  }
  body.lang-ur #host .hero .ha{
    position:static;
    margin-top:14px;
    display:flex;
    justify-content:flex-start;
  }
}


/* v2.11.2 Urdu load/performance stability */
#nav button .nav-icon,#nav button .nav-label{pointer-events:none}
body.lang-ur #nav button{contain:layout paint}


/* =========================================================
   v2.12.0 — Official Maktabah Daniyal branding
   ========================================================= */
.official-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  margin:2px 0 16px;
  padding:0;
  font-size:inherit;
}
.sidebar-company-logo{
  display:block;
  width:min(202px,100%);
  height:auto;
  max-height:96px;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
  padding:4px 6px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.brand-erp-tag{
  position:absolute;
  right:9px;
  bottom:7px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:3px 7px;
  border-radius:999px;
  background:#071321;
  border:1px solid #18c8ff;
  color:#26d4ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

.official-login-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 0 24px;
  text-align:center;
}
.login-company-logo{
  display:block;
  width:min(330px,100%);
  height:auto;
  object-fit:contain;
  background:#fff;
  border-radius:16px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 38px rgba(0,0,0,.3),0 0 32px rgba(255,188,36,.08);
}
.official-login-brand p{
  margin:0;
  color:#91a6c7;
  font-size:12px;
  font-weight:600;
  letter-spacing:.25px;
}

/* Official logo is artwork and must not mirror in Urdu mode. */
body.lang-ur .official-brand,
body.lang-ur .official-login-brand,
body.lang-ur .sidebar-company-logo,
body.lang-ur .login-company-logo{
  direction:ltr;
}

body.light-mode .sidebar-company-logo,
body.light-mode .login-company-logo{
  border-color:#d8dee8;
  box-shadow:0 8px 24px rgba(18,40,67,.12);
}

@media(max-width:850px){
  .login-company-logo{width:min(290px,100%)}
}


/* =========================================================
   v2.12.1 — Transparent official logo / clean branding
   ========================================================= */

/* No white logo card in sidebar. */
.sidebar-company-logo{
  width:min(214px,100%);
  max-height:104px;
  height:auto;
  object-fit:contain;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.38))
    drop-shadow(0 0 2px rgba(255,255,255,.18));
}

/* Old small ERP badge is retired. */
.brand-erp-tag{
  display:none!important;
}

/* Login logo is artwork only — no white panel/card around it. */
.official-login-brand{
  gap:0!important;
  margin:0 0 22px!important;
}
.login-company-logo{
  width:min(360px,100%);
  height:auto;
  object-fit:contain;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,.40))
    drop-shadow(0 0 3px rgba(255,255,255,.18));
}

/* Login branding subtitle removed in HTML; protect against stale markup too. */
.official-login-brand p{
  display:none!important;
}

/* Do not reintroduce a logo panel in light mode either. */
body.light-mode .sidebar-company-logo,
body.light-mode .login-company-logo{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Logo artwork itself must never mirror in Urdu mode. */
body.lang-ur .sidebar-company-logo,
body.lang-ur .login-company-logo{
  direction:ltr;
  transform:none!important;
}


/* =========================================================
   v2.12.2 — definitive transparent dark-theme logo
   ========================================================= */
.official-brand,
.official-login-brand,
.login-brand{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.sidebar-company-logo,
.login-company-logo{
  display:block!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
}

.sidebar-company-logo{
  width:min(220px,100%)!important;
  max-height:none!important;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45))!important;
}

.login-company-logo{
  width:min(370px,100%)!important;
  max-height:none!important;
  filter:drop-shadow(0 7px 18px rgba(0,0,0,.42))!important;
}

/* Old branding pieces must never return, even from stale markup. */
.brand-erp-tag,
.official-login-brand p{
  display:none!important;
}

/* Logo remains artwork-left-to-right in Urdu mode. */
body.lang-ur .official-brand,
body.lang-ur .official-login-brand,
body.lang-ur .sidebar-company-logo,
body.lang-ur .login-company-logo{
  direction:ltr!important;
  transform:none!important;
}

/* Light mode: still transparent, no white card is added around the image. */
body.light-mode .official-brand,
body.light-mode .official-login-brand,
body.light-mode .sidebar-company-logo,
body.light-mode .login-company-logo{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}


/* v2.12.3 — login logo size refinement */
.login-company-logo{width:min(300px,78vw)!important;max-width:300px!important;height:auto!important}
@media (max-width: 768px){.login-company-logo{width:min(260px,76vw)!important;max-width:260px!important}}


/* =========================================================
   v2.12.4 — Approved redesigned logo integration
   Uses the exact user-approved logo asset.
   ========================================================= */
.official-brand,
.official-login-brand{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.sidebar-company-logo,
.login-company-logo{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  object-fit:contain!important;
}

/* Dashboard/sidebar logo size remains compact. */
.sidebar-company-logo{
  width:min(220px,100%)!important;
  height:auto!important;
  max-height:none!important;
}

/* Login size remains the smaller size approved in v2.12.3. */
.login-company-logo{
  width:min(310px,82%)!important;
  max-width:310px!important;
  height:auto!important;
  margin:0 auto!important;
}

.brand-erp-tag,
.official-login-brand p{
  display:none!important;
}

body.lang-ur .sidebar-company-logo,
body.lang-ur .login-company-logo{
  direction:ltr!important;
  transform:none!important;
}


/* =========================================================
   v2.12.5 — Smaller Login Box + Library Background
   ========================================================= */
.login-gate{
  background:
    linear-gradient(rgba(4,12,24,.76), rgba(4,12,24,.72)),
    radial-gradient(circle at 78% 10%, rgba(94,86,255,.18), transparent 28%),
    url('/assets/login-library-bg-v2125.png') center center / cover no-repeat !important;
  padding:26px !important;
}

.login-card{
  width:min(380px, 92vw) !important;
  padding:22px 24px !important;
  border-radius:22px !important;
  border:1px solid rgba(77,119,170,.58) !important;
  background:linear-gradient(180deg, rgba(9,24,42,.82), rgba(5,16,29,.88)) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.login-brand{
  justify-content:center !important;
  margin-bottom:18px !important;
}

.login-company-logo{
  width:min(255px, 76%) !important;
  max-width:255px !important;
  height:auto !important;
}

.login-card h2{
  font-size:22px !important;
  margin:0 0 6px !important;
}

.login-card .muted{
  font-size:12px !important;
  line-height:1.45 !important;
  color:#b6c8e2 !important;
}

.login-card form{
  gap:11px !important;
  margin-top:16px !important;
}

.login-card form input{
  height:44px !important;
}

.login-btn{
  height:44px !important;
  margin-top:4px !important;
}

.demo-cred{
  font-size:11px !important;
  margin-top:14px !important;
  padding-top:12px !important;
}

@media (max-width: 560px) {
  .login-gate{
    padding:18px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .login-card{
    width:min(350px, 94vw) !important;
    padding:20px 18px !important;
  }
  .login-company-logo{
    width:min(220px, 74%) !important;
    max-width:220px !important;
  }
}


/* =========================================================
   v2.12.6 — Login UI Development
   Uses provided library background asset; no generated image.
   ========================================================= */

.login-gate{
  background:
    linear-gradient(rgba(4,12,23,.67), rgba(4,12,23,.76)),
    url('/assets/login-library-background-v2126.png') center center / cover no-repeat fixed !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
}

.login-card{
  width:min(365px,92vw) !important;
  padding:20px 23px !important;
  border-radius:20px !important;
  background:linear-gradient(
    180deg,
    rgba(10,26,45,.88),
    rgba(5,17,31,.93)
  ) !important;
  border:1px solid rgba(78,119,169,.70) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.50) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.official-login-brand{
  margin-bottom:15px !important;
  justify-content:center !important;
}

.login-company-logo{
  width:min(235px,72%) !important;
  max-width:235px !important;
  margin:0 auto !important;
}

.login-card h2{
  font-size:21px !important;
  margin:0 0 4px !important;
}

.login-card > .muted{
  font-size:11.5px !important;
  margin-bottom:0 !important;
}

.login-card form{
  gap:9px !important;
  margin-top:14px !important;
}

.login-card form label{
  gap:5px !important;
}

.login-card form input{
  height:42px !important;
  padding:8px 11px !important;
}

.login-btn{
  height:42px !important;
  margin-top:3px !important;
}

.login-error{
  min-height:16px !important;
}

.demo-cred{
  margin-top:12px !important;
  padding-top:11px !important;
  font-size:10.5px !important;
}

@media(max-width:560px){
  .login-card{
    width:min(340px,94vw) !important;
    padding:18px 17px !important;
  }
  .login-company-logo{
    width:min(210px,70%) !important;
    max-width:210px !important;
  }
}


/* =========================================================
   v2.13.0 — Fast Invoice Book Entry
   ========================================================= */
.fast-book-entry{
  display:grid;
  grid-template-columns:minmax(320px,1fr) 86px 110px;
  gap:8px;
  align-items:center;
  margin-top:8px;
  padding:8px;
  border:1px solid #31557f;
  border-radius:11px;
  background:linear-gradient(90deg,rgba(46,130,255,.08),rgba(123,76,255,.07));
}
.fast-book-search-wrap{position:relative;min-width:0}
.fast-book-search-wrap>input{
  width:100%;
  min-height:37px;
  border-color:#406894;
  background:#07182b;
}
.fast-book-search-wrap>input:focus{
  border-color:#5f8fff;
  box-shadow:0 0 0 2px rgba(71,115,255,.12);
}
.fast-book-qty{width:100%!important;min-height:37px;text-align:center}
.fast-book-results{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 5px);
  display:none;
  max-height:315px;
  overflow:auto;
  padding:5px;
  z-index:260;
  border:1px solid #3d638d;
  border-radius:10px;
  background:#071526;
  box-shadow:0 18px 45px rgba(0,0,0,.52);
}
.fast-book-results.show{display:block}
.fast-book-result{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:8px 9px;
  border:0;
  border-bottom:1px solid #1d3652;
  border-radius:7px;
  background:transparent;
  color:#edf5ff;
  text-align:left;
  cursor:pointer;
}
.fast-book-result:last-child{border-bottom:0}
.fast-book-result:hover,.fast-book-result.active{
  background:linear-gradient(90deg,rgba(123,76,255,.24),rgba(46,130,255,.19));
  outline:1px solid rgba(91,117,255,.42);
}
.fast-book-result b{
  display:-webkit-box;
  overflow:hidden;
  white-space:normal;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.2;
  max-height:2.4em;
  font-size:11px;
}
.fast-book-result small{display:block;color:#849bbc;font-size:9px;margin-top:2px}
.fast-book-result strong{font-size:9px;color:#55e3a0;white-space:nowrap}
.fast-book-noresult{padding:12px;color:#879dbc;text-align:center;font-size:10px}
.fast-book-help{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:5px;
  color:#7893b7;
  font-size:9px;
}
.fast-book-help .compact-add-book{
  width:auto!important;
  margin:0!important;
  white-space:nowrap;
}
.fast-entry-empty{
  border:1px dashed #31506f;
  border-radius:9px;
  padding:12px;
  color:#7892b4;
  text-align:center;
  font-size:10px;
}
.draft-book-cell{
  min-width:0;
  width:100%;
  min-height:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:5px 8px;
  border:1px solid #243f60;
  border-radius:8px;
  background:#09182a;
  color:#f3f7ff;
  text-align:left;
  cursor:pointer;
}
.draft-book-cell:hover{border-color:#557cff;background:#0d2037}
.draft-book-cell span{
  display:-webkit-box;
  max-width:100%;
  overflow:hidden;
  white-space:normal;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.18;
  max-height:2.36em;
  font-size:11px;
  font-weight:650;
}
.draft-book-cell small{font-size:8px;color:#7892b4;margin-top:2px}
.invoice-editor-modal .parity-line .draft-book-cell{min-height:32px}

@media(max-width:900px){
  .fast-book-entry{grid-template-columns:minmax(0,1fr) 72px}
  .fast-book-entry #fastBookAddBtn{grid-column:1/-1}
  .fast-book-help{align-items:flex-start;flex-direction:column}
}


/* v2.14.1 — Dashboard large money + location language + New Order empty-item UX */
.kpi .value.value-long{
  font-size:clamp(14px,.98vw,18px)!important;
  letter-spacing:-.65px!important;
  line-height:1.15!important;
  max-width:100%;
}
.kpi .value{max-width:100%;overflow:hidden;text-overflow:clip}
.item-master-pending-order{
  margin:10px 0 13px;
  border-color:#7b6330!important;
  background:linear-gradient(90deg,rgba(255,160,67,.10),rgba(123,76,255,.07))!important;
  color:#c9d6ea;
}
.item-master-pending-order b{color:#ffc06d}
.fast-book-entry button:disabled,.fast-book-help button:disabled,.fast-book-entry input:disabled{opacity:.48;cursor:not-allowed}
@media(min-width:1500px){.kpi .value.value-long{font-size:18px!important}}


/* =========================================================
   v2.15.0 — Invoice Company + Agent-first Customer workflow
   ========================================================= */
.invoice-company-field select{
  border-color:#6057c9!important;
  background:linear-gradient(90deg,rgba(94,76,255,.08),rgba(37,103,255,.06))!important;
  font-weight:700;
}
.agent-first-field select{
  border-color:#3e6592!important;
  font-weight:700;
}
.customer-filtered-field .field-help,
.legacy-order-editor .field-help{
  display:block;
  margin-top:4px;
  font-size:9px;
  color:#7592b8;
}
.customer-filtered-field select:disabled{
  opacity:.7;
}


/* =========================================================
   v2.15.1 — Dark Select Popup + Language Display Polish
   ========================================================= */
select{
  color-scheme:dark!important;
  background-color:#091b2f!important;
  color:#f5f8ff!important;
}
select option,
select optgroup{
  background:#0b2037!important;
  background-color:#0b2037!important;
  color:#f7f9ff!important;
}
select option:checked{
  background:#246bc7!important;
  color:#fff!important;
}
select option:disabled{
  background:#0a192b!important;
  color:#6f86a5!important;
}
.invoice-company-field select{
  color-scheme:dark!important;
  background:#0a1d33!important;
  border-color:#596bff!important;
  color:#fff!important;
}
.invoice-company-field select option{
  background:#0b2037!important;
  color:#fff!important;
}
.invoice-company-field select:focus{
  border-color:#6978ff!important;
  box-shadow:0 0 0 2px rgba(91,105,255,.16)!important;
}

/* Imported Urdu data may be Romanized only in English display mode.
   Preserve normal LTR readability after Romanization. */
body:not(.lang-ur) select,
body:not(.lang-ur) input,
body:not(.lang-ur) textarea{
  direction:ltr;
  text-align:left;
}


/* =========================================================
   v2.16.2 — Inventory Search Stability + Stars
   ========================================================= */
#invTable{
  overflow-anchor:none;
}
.inventory-results-scroll{
  max-height:58vh;
  overflow:auto!important;
  overflow-anchor:none!important;
  overscroll-behavior:contain;
  border:1px solid rgba(43,72,104,.6);
  border-radius:10px;
}
.inventory-results-scroll .inventory-table{
  margin:0;
}
.inventory-results-scroll .inventory-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#0b1d32;
  box-shadow:0 1px 0 #294563;
}
.inventory-pager,
.inventory-result-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 3px;
  color:#87a2c4;
  font-size:10px;
}
.inventory-pager .pager-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.inventory-pager .btn{
  min-width:auto;
}
.inventory-pager .btn:disabled{
  opacity:.38;
  cursor:default;
}
.inv-filters #invSearch{
  min-width:240px;
}
.star-inline{
  color:#f6c54f;
  font-weight:800;
  white-space:nowrap;
}
.fast-book-result .star-inline{
  color:#ffd66b;
}
@media(max-width:900px){
  .inventory-pager{
    align-items:flex-start;
    flex-direction:column;
  }
  .inventory-pager .pager-actions{
    flex-wrap:wrap;
  }
  .inventory-results-scroll{
    max-height:62vh;
  }
}


/* =========================================================
   v2.16.3 — Dashboard Stability / Compact Low Stock
   ========================================================= */

/* Dashboard columns size independently instead of all stretching
   to the tallest Low Stock card. */
.dashboard-host .dashboard-main-grid{
  align-items:start!important;
}
.dashboard-host .dashboard-main-grid > .card{
  align-self:start!important;
  height:auto!important;
  min-height:0;
}

/* Never let dashboard cards physically move on mouse hover.
   Highlight is retained through border/shadow only. */
@media (hover:hover) and (pointer:fine){
  .dashboard-host .card:hover,
  .dashboard-host .dashboard-stable-card:hover{
    transform:none!important;
    z-index:auto!important;
  }

  .dashboard-host .list .row:hover{
    transform:none!important;
  }

  .dashboard-host .bw:hover .bar{
    transform:none!important;
  }

  .dashboard-host .card:hover{
    border-color:rgba(91,132,255,.62)!important;
    box-shadow:
      0 10px 26px rgba(0,0,0,.20),
      0 0 0 1px rgba(86,112,255,.09)!important;
  }
}

/* Low Stock is a dashboard summary, not the full inventory list. */
.dashboard-low-stock{
  overflow:hidden;
}
.dashboard-low-stock .ph{
  margin-bottom:3px;
}
.dashboard-low-stock .list{
  max-height:none!important;
  overflow:visible!important;
}
.dashboard-low-stock .list .row{
  min-height:48px;
  padding-top:8px;
  padding-bottom:8px;
}
.dashboard-low-stock .list .row b{
  display:block;
  max-width:225px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-low-stock .list .row small{
  display:block;
}
.dashboard-inventory-link{
  width:100%;
  margin-top:9px;
}
.dashboard-empty-low{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  border:1px dashed #284665;
  border-radius:9px;
}

/* Keep KPI financial values inside their cards. */
.dashboard-host .kpi .value,
.dashboard-host .kpi .value-long{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-host .kpi .value-long{
  font-size:clamp(17px,1.45vw,25px)!important;
  letter-spacing:-.4px;
}

.dashboard-host .dashboard-bottom-grid{
  align-items:start!important;
}


/* =========================================================
   v2.16.4 — Dashboard UX Polish
   ========================================================= */

/* Full money value is always visible. JS chooses a size based on
   actual formatted amount length instead of clipping with "...". */
.dashboard-host .kpi .value,
.dashboard-host .kpi .value-long,
.dashboard-host .dashboard-money-value{
  font-size:var(--dash-money-size,22px)!important;
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  line-height:1.08!important;
  letter-spacing:-.48px!important;
  font-variant-numeric:tabular-nums;
}
.dashboard-host .kpi .value.money-extra-long{
  letter-spacing:-.78px!important;
}
.dashboard-host .kpi{
  min-width:0;
}

/* Bring back the professional subtle "pop" requested by user,
   but keep it transform-only so document/grid layout never jumps. */
@media (hover:hover) and (pointer:fine){
  .dashboard-host .card:hover,
  .dashboard-host .dashboard-stable-card:hover{
    transform:translateY(-3px) scale(1.004)!important;
    transform-origin:center!important;
    border-color:rgba(91,132,255,.72)!important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.27),
      0 0 0 1px rgba(86,112,255,.12),
      0 0 20px rgba(67,104,255,.10)!important;
    z-index:3!important;
  }

  /* Rows highlight without moving sideways. */
  .dashboard-host .list .row:hover{
    transform:none!important;
    background:rgba(46,130,255,.055)!important;
    box-shadow:inset 3px 0 0 rgba(76,112,255,.48)!important;
  }

  /* Chart bar keeps its small value-hover lift. It does not affect layout. */
  .dashboard-host .bw:hover .bar{
    transform:translateY(-3px)!important;
    filter:brightness(1.14);
    box-shadow:0 0 13px rgba(75,112,255,.28);
  }
}

/* Low-stock row sizing: the text owns flexible space and the quantity
   badge always remains fully inside the card. */
.dashboard-low-stock .list .row{
  display:flex!important;
  align-items:center!important;
  width:100%;
  min-width:0;
  gap:10px!important;
  overflow:hidden;
}
.dashboard-low-stock .low-book-meta{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.dashboard-low-stock .low-book-meta b{
  max-width:100%!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-stock-count{
  flex:0 0 auto;
  min-width:42px;
  max-width:64px;
  height:32px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  font-weight:800;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dashboard-stock-count.negative{
  color:#ff9aa5;
  background:rgba(255,97,114,.09);
  border:1px solid rgba(255,97,114,.27);
}
.dashboard-stock-count.critical{
  color:#ffb0b8;
  background:rgba(255,97,114,.07);
  border:1px solid rgba(255,97,114,.20);
}
.dashboard-stock-count.warning{
  color:#ffc77b;
  background:rgba(255,160,67,.08);
  border:1px solid rgba(255,160,67,.22);
}

/* Avoid any accidental crop when a card is lifted by hover. */
.dashboard-host .kpis,
.dashboard-host .dashboard-main-grid,
.dashboard-host .dashboard-bottom-grid{
  overflow:visible!important;
}


/* =========================================================
   v2.16.5 — Top 7 Low Stock + Star Ordering UX
   ========================================================= */
.dashboard-low-stock .list .row{
  min-height:43px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}
.dashboard-low-stock .dashboard-inventory-link{
  margin-top:8px!important;
  min-height:35px;
}


/* =========================================================
   v2.17.0 — Location Opening Balance + Customer Star History
   ========================================================= */
.opening-summary-box{border:1px solid #2d5279;background:#081b2f;border-radius:12px;padding:11px}
.opening-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.opening-mini-grid span{border:1px solid #24425f;border-radius:8px;padding:7px 9px;font-size:10px;color:#9bb1cf}
.opening-mini-grid b{color:#f3f7ff}
.opening-book-summary{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin:12px 0}
.opening-book-summary>div{border:1px solid #2b4d70;border-radius:10px;padding:10px;background:#091b2f}
.opening-book-summary small{display:block;color:#87a2c4}
.opening-book-summary b{display:block;margin-top:4px;font-size:16px}
.opening-location-table input{width:100%;min-width:95px}
.opening-location-table .ob-amount{color:#62dfff}
.star-discount-entry{display:grid;grid-template-columns:1.2fr .7fr .9fr auto;gap:8px;align-items:end;padding:10px;border:1px solid #31557f;background:linear-gradient(90deg,rgba(123,76,255,.09),rgba(46,130,255,.07));border-radius:11px;margin:12px 0}
.star-discount-entry label,.star-asof-control label{font-size:10px;color:#91a9c9}
.star-discount-entry label>*,.star-asof-control input{margin-top:4px}
.star-asof-control{display:flex;justify-content:flex-end;margin:6px 0 12px}
.customer-star-section{margin-top:14px}.customer-star-section h3{margin-bottom:8px}
.star-matrix-head{display:flex;justify-content:space-between;color:#91a9c9;font-size:10px;margin-bottom:6px}
.star-disc-current{color:#55e3a0}.star-matrix-scroll{max-height:355px}.star-history-scroll{max-height:390px}
@media(max-width:900px){.opening-mini-grid{grid-template-columns:1fr}.opening-book-summary{grid-template-columns:1fr}.star-discount-entry{grid-template-columns:1fr 1fr}.star-discount-entry .btn{grid-column:1/-1}}


/* =========================================================
   v2.18.0 — Unified Book / Item Master
   ========================================================= */
.modalbox.item-master-modal{width:min(1280px,96vw)!important;max-height:94vh!important}
.item-master-layout{display:grid;gap:13px}
.item-master-card{border:1px solid #294765;background:linear-gradient(180deg,#0b1d32,#09192b);border-radius:13px;padding:14px}
.item-master-basic{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px}
.item-master-image-col{display:flex;flex-direction:column;gap:8px}
.item-image-preview{height:185px;border:1px solid #35577c;border-radius:12px;overflow:hidden;background:#071727;display:grid;place-items:center}
.item-image-preview img{width:100%;height:100%;object-fit:contain;background:#071727}
.item-image-placeholder{color:#7f9abb;display:flex;flex-direction:column;align-items:center;gap:5px}
.item-image-placeholder span{font-size:42px}.item-image-placeholder b{color:#dfe9f8}.item-image-placeholder small{font-size:10px}
.item-image-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.item-image-actions{display:flex;gap:6px}.item-image-actions>*{flex:1;text-align:center;cursor:pointer}
.item-master-fields{min-width:0}
.item-master-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.item-master-section-title h3{margin:0}.item-master-section-title small,.item-master-section-title>span{color:#8fa7c7;font-size:10px}
.item-basic-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.item-basic-grid .span2{grid-column:span 2}
.item-active-check{min-height:38px;flex-direction:row!important;align-items:center;gap:8px!important;background:#0a1729;border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:#dfe8f7!important}
.item-active-check input{width:auto}
.current-rate-box{border:1px solid rgba(78,126,255,.45);background:rgba(55,95,200,.10);border-radius:10px;padding:8px 12px;text-align:right;min-width:150px}
.current-rate-box small{display:block;color:#8fa7c7}.current-rate-box b{font-size:18px;color:#61d9ff}
.item-rate-entry{display:grid;grid-template-columns:220px 220px auto;gap:8px;align-items:end;margin-bottom:10px}
.item-rate-entry label{display:flex;flex-direction:column;gap:4px;color:#8fa7c7;font-size:10px}
.item-rate-history-scroll{max-height:230px}
.opening-totals{display:flex;gap:8px}.opening-totals span{min-width:120px;border:1px solid #2b4a6c;border-radius:9px;padding:7px 10px;background:#08192b}
.opening-totals small{display:block;color:#8fa7c7}.opening-totals b{display:block;margin-top:3px;color:#65dbff}
.item-opening-scroll{max-height:290px;margin-top:9px}.item-opening-table input{width:100%;min-width:105px}.item-opening-table .item-ob-amount{color:#67ddff;white-space:nowrap}
.item-master-actions{position:sticky;bottom:-20px;margin:12px -20px -20px;padding:12px 20px;background:linear-gradient(180deg,rgba(13,27,47,.92),#0d1b2f);border-top:1px solid #2d4a6d;z-index:4}
@media(max-width:1000px){.item-master-basic{grid-template-columns:1fr}.item-master-image-col{max-width:230px;margin:auto;width:100%}.item-basic-grid{grid-template-columns:1fr 1fr!important}.item-rate-entry{grid-template-columns:1fr 1fr}.item-rate-entry .btn{grid-column:1/-1}}
@media(max-width:700px){.item-basic-grid{grid-template-columns:1fr!important}.item-basic-grid .span2{grid-column:auto}.item-rate-entry{grid-template-columns:1fr}.opening-totals{flex-direction:column}}


/* =========================================================
   v2.18.1 — Dashboard Performance Graph + KPI sizing
   ========================================================= */
.dashboard-wide-money{padding-right:20px;}
.dashboard-host .dashboard-money-value{font-size:var(--dash-money-size,24px)!important;}
.business-performance-panel{overflow:hidden;}
.performance-filters{margin-bottom:12px;}
.perf-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px;}
.perf-mini{padding:12px 14px;border:1px solid #29486c;border-radius:12px;background:linear-gradient(180deg,rgba(15,33,56,.92),rgba(10,24,40,.92));}
.perf-mini small{display:block;color:#92aad0;margin-bottom:7px;}
.perf-mini b{display:block;font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums;}
.performance-chart{min-height:290px;height:290px;align-items:flex-end;gap:12px;}
.perf-col{flex:1 1 0;min-width:72px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;}
.perf-bars{width:100%;height:216px;display:flex;align-items:flex-end;justify-content:center;gap:7px;}
.perf-bar{width:19%;min-width:10px;border-radius:7px 7px 0 0;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;}
.perf-bar.sales{background:linear-gradient(180deg,#49a1ff,#2e82ff)}
.perf-bar.expenses{background:linear-gradient(180deg,#ffb25d,#ff8a3d)}
.perf-bar.profit{background:linear-gradient(180deg,#41e7a0,#12c777)}
.perf-col:hover .perf-bar{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 0 14px rgba(73,161,255,.14);}
.perf-meta small{display:none;position:absolute;left:50%;transform:translateX(-50%);top:-4px;padding:8px 11px;background:#0d2239;border:1px solid #2f80e8;border-radius:10px;white-space:nowrap;z-index:8;color:#9fb3d2;box-shadow:0 12px 24px rgba(0,0,0,.35);}
.perf-meta strong{display:block;color:#fff;margin-top:4px;font-size:13px;}
.perf-col:hover .perf-meta small{display:block}
.perf-label{margin-top:10px;color:#91a6c7;font-size:11px;text-align:center;}
.performance-legend{display:flex;gap:18px;align-items:center;color:#8ea8cb;font-size:12px;margin-top:9px;}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:7px;}
.legend-dot.sales{background:#2e82ff}
.legend-dot.expenses{background:#ff9a46}
.legend-dot.profit{background:#16d485}
@media(max-width:1200px){.perf-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.performance-chart{min-height:250px;height:250px;}.perf-bars{height:185px;}}


/* =========================================================
   v2.18.2 — Dashboard amount containment + compact performance panel
   ========================================================= */
/* Give the two long financial KPI values a deliberate inner right margin.
   JS then measures the actual rendered text and shrinks only as much as needed. */
.dashboard-host .dashboard-wide-money{
  padding-left:18px!important;
  padding-right:28px!important;
  min-width:0!important;
}
.dashboard-host .dashboard-wide-money .dashboard-money-value{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  line-height:1.08!important;
  letter-spacing:-.42px!important;
}
.dashboard-host .dashboard-wide-money .dashboard-money-value.money-extra-long{
  letter-spacing:-.66px!important;
}

/* Keep the new business-performance card approximately the same overall
   visual height as the Sales Trend card instead of producing a tall empty area. */
.business-performance-panel{
  padding-top:15px!important;
  padding-bottom:13px!important;
}
.business-performance-panel .ph{
  margin-bottom:2px!important;
}
.performance-filters{
  margin:5px 0 9px!important;
}
.perf-summary-grid{
  gap:8px!important;
  margin-bottom:8px!important;
}
.perf-mini{
  padding:8px 11px!important;
  min-height:58px!important;
}
.perf-mini small{
  margin-bottom:4px!important;
  font-size:11px!important;
}
.perf-mini b{
  font-size:18px!important;
}
.performance-chart{
  min-height:170px!important;
  height:170px!important;
  padding-top:8px!important;
  gap:10px!important;
}
.perf-bars{
  height:118px!important;
}
.perf-label{
  margin-top:5px!important;
  font-size:10px!important;
}
.performance-legend{
  margin-top:6px!important;
  gap:15px!important;
  font-size:11px!important;
}
.business-performance-panel .chart-caption{
  margin-top:5px!important;
}
@media(max-width:1200px){
  .performance-chart{min-height:165px!important;height:165px!important;}
  .perf-bars{height:112px!important;}
}


/* =========================================================
   v2.18.3 — Dashboard optimized two-graph layout
   ========================================================= */
.dashboard-chart-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  margin-bottom:14px;
}
.dashboard-chart-row > .dashboard-chart-card{
  min-width:0;
  height:100%;
  margin:0!important;
}
.dashboard-chart-row .sales-panel,
.dashboard-chart-row .business-performance-panel{
  display:flex;
  flex-direction:column;
}
.dashboard-chart-row .sales-panel .chart{
  flex:1 1 auto;
  min-height:210px!important;
  height:210px!important;
}
.dashboard-chart-row .business-performance-panel{
  padding-top:17px!important;
  padding-bottom:15px!important;
}
.dashboard-chart-row .business-performance-panel .performance-chart{
  flex:1 1 auto;
  min-height:132px!important;
  height:132px!important;
}
.dashboard-chart-row .business-performance-panel .perf-bars{
  height:88px!important;
}
.dashboard-chart-row .business-performance-panel .perf-summary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  margin-bottom:6px!important;
}
.dashboard-chart-row .business-performance-panel .perf-mini{
  min-height:54px!important;
  padding:7px 9px!important;
}
.dashboard-chart-row .business-performance-panel .perf-mini b{
  font-size:16px!important;
}
.dashboard-chart-row .business-performance-panel .performance-legend{
  margin-top:4px!important;
}
.dashboard-chart-row .business-performance-panel .chart-caption{
  margin-top:4px!important;
}
.dashboard-support-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  margin-bottom:14px;
}
.dashboard-support-grid > .card{
  min-width:0;
  height:100%!important;
}
.dashboard-support-grid .dashboard-location-panel .list,
.dashboard-support-grid .dashboard-low-stock .list{
  display:flex;
  flex-direction:column;
}
.dashboard-support-grid .dashboard-location-panel .row,
.dashboard-support-grid .dashboard-low-stock .row{
  min-height:48px!important;
}
.dashboard-operations-grid{
  margin-top:0!important;
  align-items:stretch!important;
}
.dashboard-operations-grid > .card{
  height:100%!important;
  min-width:0;
}
.warehouse-dispatch-card .list .row{
  min-height:47px;
}
@media(max-width:1380px){
  .dashboard-chart-row .business-performance-panel .perf-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-chart-row .business-performance-panel .performance-chart{
    min-height:110px!important;
    height:110px!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-bars{
    height:74px!important;
  }
}
@media(max-width:1100px){
  .dashboard-chart-row,
  .dashboard-support-grid{
    grid-template-columns:1fr;
  }
  .dashboard-chart-row .sales-panel .chart{
    min-height:230px!important;
    height:230px!important;
  }
  .dashboard-chart-row .business-performance-panel .performance-chart{
    min-height:150px!important;
    height:150px!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-bars{
    height:102px!important;
  }
}


/* =========================================================
   v2.18.4 — Working Business Overview + 6 Month preset
   ========================================================= */
#bpSixMonths.preset-active{
  border-color:#4e8cff!important;
  box-shadow:0 0 0 2px rgba(78,140,255,.18),0 0 18px rgba(78,140,255,.18);
  transform:translateY(-1px);
}
.business-overview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.business-overview-head small{color:#91a8c8}
.business-overview-head h3{margin:3px 0 0}
.business-overview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.business-overview-kpi{
  border:1px solid #2c4d72;
  border-radius:12px;
  padding:13px;
  background:linear-gradient(180deg,#0c2138,#091a2c);
  min-width:0;
}
.business-overview-kpi small{display:block;color:#8fa8ca;margin-bottom:6px}
.business-overview-kpi b{display:block;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.business-overview-kpi span{display:block;margin-top:6px;color:#39df99;font-size:11px}
.business-overview-kpi span.warn{color:#ffa03f}
.business-overview-status{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}
.business-overview-status>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #274668;
  border-radius:10px;
  background:#081a2c;
}
.business-overview-status span{color:#91a7c7}
.business-overview-actions{flex-wrap:wrap}
@media(max-width:800px){
 .business-overview-grid,.business-overview-status{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
 .business-overview-grid,.business-overview-status{grid-template-columns:1fr}
}


/* =========================================================
   v2.18.5 — Live dashboard + persistent performance preset
   ========================================================= */
.performance-filters .perf-active{
  background:linear-gradient(135deg,#784cff,#2e82ff)!important;
  border-color:#5b83ff!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(78,140,255,.12),0 8px 20px rgba(46,130,255,.18)!important;
}
.performance-filters .btn.secondary:not(.perf-active){
  background:#0d1f35;
}


/* =========================================================
   v2.19.0 — Godown Dispatch Desk
   ========================================================= */
.dispatch-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.dispatch-queue-panel{margin-top:14px}
.dispatch-tools{display:flex;gap:8px;align-items:center;min-width:min(580px,60vw)}
.dispatch-tools input{flex:1;min-width:260px}
.dispatch-tools select{min-width:150px}
.dispatch-table td small,.dispatch-table td b{display:block}
.dispatch-table td small{color:#8fa6c7;margin-top:3px}
.selected-dispatch-row{background:rgba(73,108,255,.07)}
.dispatch-preview-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:10px}
.dispatch-preview-head>div,.dispatch-customer>div{border:1px solid #294a6d;background:#091b2f;border-radius:10px;padding:10px}
.dispatch-preview-head small,.dispatch-customer small{display:block;color:#8fa6c7;margin-bottom:4px}
.dispatch-preview-head b,.dispatch-customer b{display:block;color:#f3f7ff}
.dispatch-customer{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.dispatch-customer .full{grid-column:1/-1}
.picking-preview-table .pick-qty,.picking-preview-table tfoot td:last-child{font-size:18px;color:#69dcff;text-align:center}
.picking-preview-table tfoot td{font-weight:800}
.dispatch-event-note{margin-top:8px;padding:8px 10px;border:1px solid #294a6d;border-radius:9px;background:#091a2d;color:#9db0cd}
.dispatch-notify-check{display:flex!important;flex-direction:row!important;gap:8px!important;align-items:center;color:#dfe8f7!important}
.dispatch-notify-check input{width:auto!important}
.status.Confirmed{border-color:#365c85;color:#87b9ff;background:rgba(46,130,255,.1)}
.status.Packed{border-color:#6d57a9;color:#c1a8ff;background:rgba(123,76,255,.1)}
.status.Dispatched{border-color:#2c7e8b;color:#64dce8;background:rgba(44,126,139,.12)}
.status.Delivered{border-color:#1b7651;color:#57df9b;background:rgba(27,118,81,.12)}
@media(max-width:1000px){.dispatch-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dispatch-preview-head{grid-template-columns:repeat(2,minmax(0,1fr))}.dispatch-tools{min-width:0;width:100%;flex-wrap:wrap}.dispatch-tools input{min-width:180px}}
@media(max-width:700px){.dispatch-preview-head,.dispatch-customer{grid-template-columns:1fr}.dispatch-customer .full{grid-column:auto}.dispatch-kpis{grid-template-columns:1fr 1fr!important}}


/* =========================================================
   v2.19.1 — Separate automatic COGS from manual/other expense
   ========================================================= */
.dashboard-chart-row .business-performance-panel .perf-summary-grid,
.business-performance-panel .perf-summary-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
.perf-bar.cogs{background:linear-gradient(180deg,#f4cb55,#d9a72d)}
.legend-dot.cogs{background:#e5b536}
.accounting-cost-note{
  margin:0 0 4px;
  padding:6px 9px;
  border:1px solid rgba(229,181,54,.28);
  background:rgba(229,181,54,.055);
  color:#9eb0ca;
  border-radius:8px;
  font-size:10px;
  line-height:1.25;
}
.accounting-cost-note b{color:#f0c95e}
.dashboard-chart-row .business-performance-panel .perf-bars{gap:5px!important}
.dashboard-chart-row .business-performance-panel .perf-bar{width:16%!important}
@media(max-width:1450px){
 .dashboard-chart-row .business-performance-panel .perf-summary-grid,
 .business-performance-panel .perf-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* =========================================================
   v2.19.2 — Clean sidebar typography + icon-free 3D active nav
   Reference: compact modern SaaS sidebar
   ========================================================= */
#nav{
  gap:4px!important;
  padding-left:2px;
  padding-right:3px;
}

/* Menu text only — no glyph/icon column. */
#nav .nav-icon{display:none!important;}
#nav button{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  min-height:39px;
  padding:9px 13px!important;
  border-radius:9px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#aebbd1!important;
  font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif!important;
  font-size:13.5px!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:-.01em;
  text-shadow:none!important;
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
#nav button .nav-label{
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font:inherit!important;
}

#nav button:hover:not(.active){
  color:#edf5ff!important;
  background:linear-gradient(90deg,rgba(33,77,132,.30),rgba(17,43,75,.18))!important;
  border-color:rgba(90,156,235,.16)!important;
  transform:translateX(2px);
}

/* Selected module: lighter, colorful and visibly raised. */
#nav button.active{
  color:#ffffff!important;
  font-weight:600!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 38%),
    linear-gradient(100deg,#1c67d4 0%,#287ee8 48%,#3c8dff 100%)!important;
  border-color:rgba(103,176,255,.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(7,37,85,.38),
    0 5px 13px rgba(20,104,218,.28),
    0 1px 3px rgba(0,0,0,.34)!important;
  transform:translateY(-1px);
}
#nav button.active::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:-5px;
  height:7px;
  border-radius:50%;
  background:rgba(38,126,235,.16);
  filter:blur(5px);
  pointer-events:none;
}
#nav button.active:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%),
    linear-gradient(100deg,#2270df 0%,#3189f5 52%,#4b9bff 100%)!important;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(8,37,82,.34),
    0 7px 16px rgba(26,119,235,.32),
    0 2px 4px rgba(0,0,0,.32)!important;
}

/* Urdu keeps RTL text, but still no icons and same visual style. */
body.lang-ur #nav button{
  justify-content:flex-start!important;
  gap:0!important;
}
body.lang-ur #nav button .nav-label{
  order:initial!important;
  width:100%;
}

/* Keep menu comfortable and visually similar to the reference. */
aside nav{scrollbar-gutter:stable;}


/* =========================================================
   v2.19.3 — Dashboard KPI Alignment + Clean Performance Card
   ========================================================= */
.dashboard-host .kpi{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.dashboard-host .kpi .label{
  height:18px;
  min-height:18px;
  line-height:18px;
  margin-bottom:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(10.5px,.72vw,12px);
}
.dashboard-host .kpi .value,
.dashboard-host .kpi .dashboard-money-value{
  margin-top:0!important;
  line-height:1.08!important;
}
.dashboard-host .kpi .delta{
  margin-top:8px;
}
/* The performance card should be visual only; explanatory accounting notes
   are intentionally removed from the dashboard. */
.business-performance-panel .accounting-cost-note{
  display:none!important;
}


/* =========================================================
   v2.19.4 — Purchases 4-Step Workflow Tabs
   ========================================================= */
.purchase-workflow-tabs{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:9px;
 margin:0 0 14px;
}
.purchase-workflow-tabs button{
 min-height:52px;
 border:1px solid #284868;
 border-radius:12px;
 background:linear-gradient(180deg,#0c1d31,#09182a);
 color:#a9bbd4;
 padding:10px 13px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 font-weight:700;
 cursor:pointer;
 transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.purchase-workflow-tabs button:hover{
 transform:translateY(-2px);
 border-color:#377bd1;
 box-shadow:0 8px 18px rgba(22,72,139,.18);
}
.purchase-workflow-tabs button.active{
 color:white;
 border-color:#5a7cff;
 background:linear-gradient(135deg,#6847ff,#2f87ff);
 box-shadow:0 9px 22px rgba(59,98,255,.28),inset 0 1px 0 rgba(255,255,255,.16);
}
.purchase-workflow-tabs b{
 min-width:27px;
 height:25px;
 display:inline-grid;
 place-items:center;
 border-radius:8px;
 background:rgba(255,255,255,.08);
 font-size:11px;
}
.purchase-workflow-tabs button.active b{background:rgba(255,255,255,.18)}
.purchase-view-host{display:grid;gap:14px}
.purchase-view-card{margin:0!important}
.purchase-stage-note{
 border:1px solid #2c537d;
 border-radius:11px;
 padding:10px 13px;
 background:linear-gradient(90deg,rgba(47,115,220,.12),rgba(90,72,255,.07));
 display:flex;
 gap:12px;
 align-items:center;
}
.purchase-stage-note b{color:#6ed6ff;white-space:nowrap}
.purchase-stage-note span{color:#9ab0cd;font-size:12px}
.stage-count{
 color:#8fa9ca;
 font-size:12px;
 white-space:nowrap;
}
.purchase-payment-grid{margin:0!important}
.purchase-payment-summary{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:9px;
}
.purchase-payment-summary>div{
 border:1px solid #294968;
 border-radius:10px;
 padding:12px;
 background:#09192b;
}
.purchase-payment-summary small{display:block;color:#8fa6c5;margin-bottom:5px}
.purchase-payment-summary b{font-size:18px}
@media(max-width:1000px){
 .purchase-workflow-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .purchase-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
 .purchase-workflow-tabs{grid-template-columns:1fr}
 .purchase-payment-summary{grid-template-columns:1fr}
 .purchase-stage-note{align-items:flex-start;flex-direction:column;gap:4px}
}


/* =========================================================
   v2.19.7 — Inventory themed scrollbar + Item Group Master
   ========================================================= */
.inventory-results-scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(82,184,255,.82) rgba(8,25,43,.18);
}
.inventory-results-scroll::-webkit-scrollbar{
  width:9px;
  height:9px;
}
.inventory-results-scroll::-webkit-scrollbar-track{
  background:rgba(7,22,38,.18);
  border-radius:999px;
}
.inventory-results-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(105,207,255,.92),rgba(46,130,255,.74));
  border:2px solid rgba(7,22,38,.58);
  background-clip:padding-box;
  border-radius:999px;
  box-shadow:0 0 8px rgba(70,177,255,.24);
}
.inventory-results-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(137,220,255,1),rgba(58,151,255,.94));
  border:1px solid rgba(7,22,38,.52);
  box-shadow:0 0 12px rgba(71,180,255,.4);
}
.inventory-results-scroll::-webkit-scrollbar-corner{background:transparent}
.inventory-results-scroll::-webkit-scrollbar-button{display:none;width:0;height:0}

.modalbox.item-group-modal{width:min(980px,94vw)!important;}
.group-master-shell{display:grid;gap:12px;}
.group-master-form{
  display:grid;
  grid-template-columns:150px minmax(240px,1fr) 150px auto auto;
  align-items:end;
  gap:9px;
  padding:12px;
  border:1px solid #2b4d71;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(15,34,58,.94),rgba(8,24,41,.94));
}
.group-master-form .fg{min-width:0;}
.group-master-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.group-master-toolbar input{max-width:390px;}
.group-master-toolbar span{font-size:11px;color:#8fa7c8;white-space:nowrap;}
.group-master-scroll{
  max-height:52vh;
  border:1px solid rgba(43,77,113,.8);
  border-radius:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(82,184,255,.82) transparent;
}
.group-master-scroll::-webkit-scrollbar{width:8px;height:8px;}
.group-master-scroll::-webkit-scrollbar-track{background:transparent;}
.group-master-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(105,207,255,.9),rgba(46,130,255,.7));border-radius:999px;border:2px solid rgba(7,22,38,.55);background-clip:padding-box;}
.group-master-scroll thead th{position:sticky;top:0;z-index:3;background:#0b1d32;}
@media(max-width:900px){
 .group-master-form{grid-template-columns:1fr 1fr;}
 .group-master-form .group-name-field{grid-column:span 1;}
 .group-master-form .btn{width:100%;}
}


/* =========================================================
   v2.19.9 — Sales-Trend style individual hover for Performance bars
   ========================================================= */
.business-performance-panel .perf-bar{
  position:relative;
  overflow:visible;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
/* Hovering the month group must NOT light all bars together. */
.dashboard-chart-row .business-performance-panel .perf-col:hover .perf-bar:not(:hover),
.business-performance-panel .perf-col:hover .perf-bar:not(:hover){
  transform:translateY(0)!important;
  filter:none!important;
  box-shadow:none!important;
}
/* The exact bar under the cursor gets the same pop/glow feel as Sales Trend. */
.dashboard-chart-row .business-performance-panel .perf-col:hover .perf-bar:hover,
.business-performance-panel .perf-col:hover .perf-bar:hover,
.business-performance-panel .perf-bar:hover{
  transform:translateY(-4px)!important;
  filter:brightness(1.20)!important;
  box-shadow:0 0 15px rgba(75,112,255,.34)!important;
  z-index:12!important;
}
.business-performance-panel .perf-bar.sales:hover{
  box-shadow:0 0 16px rgba(73,161,255,.42)!important;
}
.business-performance-panel .perf-bar.cogs:hover{
  box-shadow:0 0 16px rgba(244,203,85,.38)!important;
}
.business-performance-panel .perf-bar.expenses:hover{
  box-shadow:0 0 16px rgba(255,154,70,.40)!important;
}
.business-performance-panel .perf-bar.profit:hover{
  box-shadow:0 0 16px rgba(22,212,133,.38)!important;
}
.business-performance-panel .perf-bar-tip{
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%);
  min-width:88px;
  padding:7px 9px;
  border-radius:9px;
  background:#0d2239;
  border:1px solid #2f80e8;
  color:#9fb3d2;
  font-size:10px;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  pointer-events:none;
  z-index:30;
}
.business-performance-panel .perf-bar-tip strong{
  display:block;
  margin-top:4px;
  color:#61d8ff;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.business-performance-panel .perf-bar:hover .perf-bar-tip{
  display:block!important;
}
/* Old month-wide tooltip stays disabled. */
.business-performance-panel .perf-meta{display:none!important;}


/* =========================================================
   v2.19.10 — Laptop 100% Zoom Responsive / Auto Compact Mode
   Keeps browser zoom at 100% on common 1366/1440/1536 laptop viewports.
   ========================================================= */
@media (min-width:1201px) and (max-width:1600px),
       (min-width:1201px) and (max-height:900px){
  html,body{max-width:100%;overflow-x:hidden;}
  aside{
    width:210px!important;
    padding:14px 10px 10px!important;
  }
  main{
    margin-left:210px!important;
    padding:0 14px 22px!important;
    min-width:0!important;
  }
  .brand{
    margin:2px 6px 14px!important;
  }
  .sidebar-company-logo{
    width:min(184px,100%)!important;
    max-width:184px!important;
    height:auto!important;
  }
  aside nav{
    gap:2px!important;
    padding-right:3px!important;
    padding-bottom:5px!important;
  }
  #nav button{
    min-height:36px!important;
    padding:8px 10px!important;
    border-radius:9px!important;
    font-size:13px!important;
    line-height:1.15!important;
  }
  .user{
    margin-top:6px!important;
    padding:7px 9px!important;
    min-height:50px!important;
    border-radius:11px!important;
    gap:8px!important;
  }
  .user>b{
    width:33px!important;
    height:33px!important;
    font-size:12px!important;
  }
  .user strong{font-size:12.5px!important;}
  .user small{font-size:10px!important;margin-top:2px!important;}

  header{height:64px!important;}
  .search{width:330px!important;height:42px!important;border-radius:10px!important;}
  .search input{font-size:13px!important;padding:7px!important;}
  .top{gap:6px!important;}
  .top span,.top-user{padding:7px 9px!important;font-size:11px!important;}

  .hero{
    padding:17px 20px!important;
    margin-bottom:11px!important;
    border-radius:14px!important;
    min-height:0!important;
  }
  .hero h1{
    font-size:25px!important;
    line-height:1.08!important;
    margin:0 0 5px!important;
  }
  .hero p{font-size:13px!important;line-height:1.25!important;}
  .hero .ha{right:17px!important;top:16px!important;}

  .kpis{
    gap:8px!important;
    margin-bottom:10px!important;
  }
  .kpi{
    padding:11px 12px!important;
    min-width:0!important;
    min-height:105px!important;
    border-radius:12px!important;
  }
  .dashboard-host .kpi .label{
    height:15px!important;
    min-height:15px!important;
    line-height:15px!important;
    margin-bottom:7px!important;
    font-size:10px!important;
  }
  .dashboard-host .kpi .value,
  .dashboard-host .kpi .dashboard-money-value{
    font-size:var(--dash-money-size,19px)!important;
    line-height:1.04!important;
  }
  .dashboard-host .kpi .delta{
    margin-top:6px!important;
    font-size:10.5px!important;
  }
  .dashboard-wide-money{padding-right:13px!important;}

  .grid{gap:10px!important;}
  .panel{padding:12px!important;border-radius:13px!important;}
  .panel h3{font-size:16px!important;margin:0 0 8px!important;line-height:1.15!important;}
  .ph{gap:7px!important;}
  .ph>.muted{font-size:10.5px!important;}
  .filters{
    gap:6px!important;
    margin:5px 0 8px!important;
  }
  .filters label,.fg label{font-size:9.5px!important;gap:3px!important;}
  select,input,textarea{
    padding:7px 8px!important;
    border-radius:8px!important;
    font-size:12px!important;
  }
  .btn{padding:8px 11px!important;border-radius:9px!important;font-size:11.5px!important;}
  .btn.small,.small{padding:6px 8px!important;font-size:10.5px!important;}

  .dashboard-chart-row{
    gap:10px!important;
    margin-bottom:10px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  .dashboard-chart-row>*{min-width:0!important;}
  .dashboard-chart-row .sales-panel .chart{
    min-height:178px!important;
    height:178px!important;
  }
  .dashboard-chart-row .business-performance-panel{
    padding:12px!important;
  }
  .dashboard-chart-row .business-performance-panel .performance-filters{
    margin:3px 0 6px!important;
    gap:5px!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-summary-grid,
  .business-performance-panel .perf-summary-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    margin-bottom:5px!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-mini,
  .business-performance-panel .perf-mini{
    min-height:48px!important;
    padding:5px 6px!important;
    border-radius:9px!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-mini small,
  .business-performance-panel .perf-mini small{
    font-size:8.5px!important;
    margin-bottom:3px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-mini b,
  .business-performance-panel .perf-mini b{
    font-size:13px!important;
    line-height:1.05!important;
  }
  .dashboard-chart-row .business-performance-panel .performance-chart{
    min-height:112px!important;
    height:112px!important;
    gap:7px!important;
  }
  .dashboard-chart-row .business-performance-panel .perf-bars{
    height:74px!important;
  }
  .dashboard-chart-row .business-performance-panel .performance-legend,
  .business-performance-panel .performance-legend{
    gap:10px!important;
    margin-top:3px!important;
    font-size:9.5px!important;
  }
  .dashboard-chart-row .business-performance-panel .chart-caption,
  .business-performance-panel .chart-caption,
  .sales-panel .chart-caption{
    margin-top:3px!important;
    font-size:9px!important;
  }
  .chart{padding-top:8px!important;}
  .bar{border-radius:4px 4px 0 0!important;}
  .bw small{font-size:9px!important;padding:4px 5px!important;}

  .dashboard-support-grid{
    gap:10px!important;
    margin-bottom:10px!important;
  }
  .dashboard-support-grid .dashboard-location-panel .row,
  .dashboard-support-grid .dashboard-low-stock .row{
    min-height:39px!important;
    padding:7px 2px!important;
  }
  .dashboard-low-stock .low-book-meta b{font-size:11px!important;}
  .dashboard-low-stock .low-book-meta small{font-size:9px!important;}
  .dashboard-stock-count{transform:scale(.88);transform-origin:right center;}
  .dashboard-operations-grid{gap:10px!important;}
  .dashboard-operations-grid .panel{min-height:0!important;}

  table{font-size:11px!important;}
  th,td{padding:7px 6px!important;}

  /* Avoid any page-wide horizontal scroll caused by wide child grids. */
  #host,.dashboard-host,.dashboard-chart-row,.dashboard-support-grid,
  .dashboard-operations-grid,.card,.panel{min-width:0!important;max-width:100%;}
}

/* Extra vertical compaction for common 1366x768-class laptops. */
@media (min-width:1201px) and (max-width:1450px) and (max-height:820px){
  aside{width:198px!important;padding:10px 8px 8px!important;}
  main{margin-left:198px!important;padding:0 10px 16px!important;}
  .sidebar-company-logo{width:170px!important;max-width:170px!important;}
  .brand{margin:0 5px 10px!important;}
  #nav button{min-height:33px!important;padding:7px 9px!important;font-size:12px!important;}
  .user{min-height:46px!important;padding:6px 8px!important;}
  header{height:56px!important;}
  .hero{padding:14px 18px!important;margin-bottom:9px!important;}
  .hero h1{font-size:23px!important;}
  .hero p{font-size:12px!important;}
  .kpis{gap:7px!important;margin-bottom:9px!important;}
  .kpi{padding:9px 10px!important;min-height:94px!important;}
  .dashboard-host .kpi .label{margin-bottom:5px!important;}
  .dashboard-host .kpi .value,.dashboard-host .kpi .dashboard-money-value{font-size:var(--dash-money-size,18px)!important;}
  .panel{padding:10px!important;}
  .dashboard-chart-row .sales-panel .chart{min-height:155px!important;height:155px!important;}
  .dashboard-chart-row .business-performance-panel .performance-chart{min-height:95px!important;height:95px!important;}
  .dashboard-chart-row .business-performance-panel .perf-bars{height:62px!important;}
  .dashboard-chart-row .business-performance-panel .perf-mini,
  .business-performance-panel .perf-mini{min-height:43px!important;padding:4px 5px!important;}
  .dashboard-chart-row .business-performance-panel .perf-mini b,
  .business-performance-panel .perf-mini b{font-size:12px!important;}
}


/* v2.19.13 — Invoice quantity keyboard navigation */
.invoice-editor-modal .draft-qty:focus{
  border-color:#63a8ff!important;
  box-shadow:0 0 0 2px rgba(65,145,255,.22),0 0 14px rgba(65,145,255,.16);
  background:#0a2038;
}


/* Reports Centre v2.19.17 — all reports visible at once */
.reports-centre-page>.hero{
  padding:12px 18px;
  margin-bottom:8px;
  border-radius:13px;
}
.reports-centre-page>.hero h1{font-size:24px;margin-bottom:3px;line-height:1.05}
.reports-centre-page>.hero p{font-size:12px;line-height:1.2}
.reports-centre-page .report-type-strip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  margin-bottom:8px;
  max-height:none!important;
  overflow:visible!important;
  padding:0;
}
.reports-centre-page .report-type-strip button{
  min-height:42px;
  height:42px;
  padding:6px 9px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:1.08;
  overflow:hidden;
}
.reports-centre-page .report-type-strip button b{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:11.5px;
  line-height:1.14;
}
.reports-centre-page .report-type-strip button small{display:none}
.reports-centre-page .report-toolbar{
  padding:8px 10px;
  margin-bottom:7px;
  gap:6px;
}
.reports-centre-page .report-toolbar label{font-size:9px;gap:2px}
.reports-centre-page .report-toolbar select,
.reports-centre-page .report-toolbar input{padding:6px 8px;min-height:31px;font-size:11px}
.reports-centre-page .report-toolbar>label:first-child select{min-width:170px}
.reports-centre-page .report-toolbar .btn{padding:7px 10px;font-size:11px}
.reports-centre-page .report-heading{margin:7px 2px 7px;align-items:center}
.reports-centre-page .report-heading h2{font-size:18px}
.reports-centre-page .report-heading p{font-size:10px;margin-top:2px}
.reports-centre-page .report-help{font-size:9px;max-width:520px}

@media(max-width:1250px){
  .reports-centre-page .report-type-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .reports-centre-page .report-type-strip button{height:39px;min-height:39px;padding:5px 7px}
  .reports-centre-page .report-type-strip button b{font-size:10.5px}
}
@media(max-width:980px){
  .reports-centre-page .report-type-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .reports-centre-page .report-toolbar{flex-wrap:wrap}
}
@media(max-width:720px){
  .reports-centre-page .report-type-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* Reports Centre v2.19.21 — bilingual order readability fix */
.reports-centre-v21921>.reports-title-only{
  min-height:64px;padding:12px 20px;margin-bottom:10px;border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
}
.reports-centre-v21921>.reports-title-only h1{font-size:27px;margin:0;line-height:1;font-weight:800;letter-spacing:-.35px}
.reports-centre-v21921>.reports-title-only p{display:none!important}
.reports-hero-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#2d9cff;background:linear-gradient(145deg,rgba(31,113,255,.20),rgba(31,113,255,.05));border:1px solid rgba(54,133,255,.35);box-shadow:inset 0 0 18px rgba(45,156,255,.08)}
.reports-hero-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reports-all-panel{
  border:1px solid #27476e;border-radius:14px;background:linear-gradient(180deg,rgba(10,28,49,.94),rgba(7,22,39,.98));
  padding:10px 14px 8px;margin-bottom:10px;
}
.reports-all-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 9px;border-bottom:1px solid #24405f}
.reports-all-head h3{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;line-height:1.05;font-weight:800}
.reports-all-head p{margin:4px 0 0 34px;color:#8ea8ca;font-size:10px}
.reports-grid-mark{width:24px;height:24px;display:inline-grid;place-items:center;color:#b8d8ff}
.reports-grid-mark svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7}
.reports-count{white-space:nowrap;border:1px solid #28517d;background:#0b2542;border-radius:999px;padding:7px 15px;font-size:10.5px;color:#d5e7ff;font-weight:700}
.reports-centre-v21921 .report-type-strip.report-type-flat{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:58px;
  gap:0!important;margin:0!important;padding:0!important;max-height:none!important;overflow:visible!important;
}
.reports-centre-v21921 .report-type-flat button{
  position:relative;height:58px!important;min-height:58px!important;margin:0!important;padding:6px 26px 6px 9px!important;
  border:0!important;border-right:1px solid #1f3b59!important;border-bottom:1px solid #1f3b59!important;border-radius:0!important;
  background:transparent!important;display:flex!important;align-items:center!important;gap:11px!important;text-align:left!important;
  color:#eaf3ff!important;box-shadow:none!important;overflow:hidden!important;transition:background .14s ease,box-shadow .14s ease,transform .14s ease;
}
.reports-centre-v21921 .report-type-flat button:nth-child(4n){border-right:0!important}
.reports-centre-v21921 .report-type-flat button:hover{background:linear-gradient(90deg,rgba(18,58,95,.92),rgba(10,39,68,.76))!important}
.reports-centre-v21921 .report-type-flat button.active{background:linear-gradient(90deg,rgba(33,94,199,.62),rgba(25,64,130,.42))!important;box-shadow:inset 0 0 0 1px #4f9bff,0 0 24px rgba(32,102,222,.13)!important;border-radius:9px!important}
.report-menu-icon{width:44px;height:44px;min-width:44px;border-radius:12px;display:grid;place-items:center;color:#eef5ff;line-height:1;background:linear-gradient(135deg,rgba(30,137,255,.34),rgba(16,78,167,.2));border:1px solid rgba(69,167,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 20px rgba(0,0,0,.18)}
.report-menu-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.report-menu-icon.ri-2{background:linear-gradient(135deg,#8d5bff,#5e36db);border-color:rgba(170,133,255,.48)}
.report-menu-icon.ri-3{background:linear-gradient(135deg,#ffae42,#ff7a1f);border-color:rgba(255,190,120,.5)}
.report-menu-icon.ri-4{background:linear-gradient(135deg,#2ce6c3,#0eb98c);border-color:rgba(114,245,214,.48)}
.report-menu-icon.ri-5{background:linear-gradient(135deg,#ff5f8a,#e83967);border-color:rgba(255,142,170,.48)}
.report-menu-icon.ri-6{background:linear-gradient(135deg,#ffd84a,#f2b600);border-color:rgba(255,231,139,.48);color:#0e1730}
.report-menu-icon.ri-7{background:linear-gradient(135deg,#ff69cf,#d83d9d);border-color:rgba(255,161,224,.48)}
.report-menu-icon.ri-8{background:linear-gradient(135deg,#42ea8b,#1ebf61);border-color:rgba(146,255,188,.45)}
.report-menu-copy{min-width:0;display:block;line-height:1.08}
.reports-centre-v21921 .report-type-flat button b{display:block!important;font-size:12.2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.16!important;font-weight:800}
.reports-centre-v21921 .report-type-flat button small{display:block!important;margin-top:4px!important;color:#8ea8c8!important;font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.08!important}
.report-menu-arrow{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:23px;color:#bdd3ef;font-weight:300}
.reports-centre-v21921 .report-toolbar{padding:7px 9px;margin-bottom:6px;gap:6px;border-radius:12px}
.reports-centre-v21921 .report-toolbar label{font-size:8.5px;gap:2px}
.reports-centre-v21921 .report-toolbar select,.reports-centre-v21921 .report-toolbar input{min-height:30px;padding:5px 7px;font-size:10.5px}
.reports-centre-v21921 .report-toolbar>label:first-child select{min-width:165px}
.reports-centre-v21921 .report-toolbar .btn{padding:6px 9px;font-size:10px;min-height:30px}
.reports-centre-v21921 .report-heading{margin:5px 2px 6px}.reports-centre-v21921 .report-heading h2{font-size:17px}.reports-centre-v21921 .report-heading p{font-size:9px}
.reports-centre-v21921 .report-help{font-size:8.5px}
@media(max-width:1450px){
 .reports-centre-v21921>.reports-title-only{min-height:58px;padding:10px 17px}.reports-centre-v21921>.reports-title-only h1{font-size:24px}.reports-hero-icon{width:38px;height:38px}.reports-hero-icon svg{width:24px;height:24px}
 .reports-all-panel{padding:8px 11px 6px}.reports-centre-v21921 .report-type-strip.report-type-flat{grid-auto-rows:51px}
 .reports-centre-v21921 .report-type-flat button{height:51px!important;min-height:51px!important;padding:4px 21px 4px 7px!important;gap:8px!important}
 .report-menu-icon{width:37px;height:37px;min-width:37px;border-radius:10px}.report-menu-icon svg{width:23px;height:23px}
 .reports-centre-v21921 .report-type-flat button b{font-size:10.9px!important}.reports-centre-v21921 .report-type-flat button small{font-size:8.2px!important}
}
@media(max-width:1080px){
 .reports-centre-v21921 .report-type-strip.report-type-flat{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .reports-centre-v21921 .report-type-flat button b{font-size:9.7px!important}.reports-centre-v21921 .report-type-flat button small{display:none!important}
}
@media(max-width:760px){
 .reports-centre-v21921 .report-type-strip.report-type-flat{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .reports-centre-v21921 .report-type-flat button:nth-child(4n){border-right:1px solid #1f3b59!important}
 .reports-centre-v21921 .report-type-flat button:nth-child(2n){border-right:0!important}
}



/* v2.19.21 — New Order bilingual readability */
.invoice-editor-modal .customer-filtered-field select{
  min-height:42px!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:650;
}
.fast-book-results{
  max-height:390px;
  padding:7px;
}
.fast-book-result{
  min-height:58px;
  padding:10px 12px;
  gap:12px;
  border-radius:9px;
}
.fast-book-result b{
  font-size:13px;
  line-height:1.35;
  max-height:2.7em;
  font-weight:750;
  letter-spacing:.05px;
}
.fast-book-result small{
  font-size:10.5px;
  line-height:1.35;
  margin-top:4px;
}
.fast-book-result strong{font-size:10.5px}
.invoice-editor-modal .draft-book-cell{
  min-height:46px!important;
  padding:7px 9px;
}
.invoice-editor-modal .draft-book-cell span{
  font-size:12.5px;
  line-height:1.3;
  max-height:2.6em;
  font-weight:720;
}
.invoice-editor-modal .draft-book-cell small{
  font-size:9.5px;
  line-height:1.3;
  margin-top:3px;
}
.invoice-editor-modal .parity-line{min-height:56px!important}
@media(max-width:1350px){
 .fast-book-result{min-height:56px}
 .fast-book-result b{font-size:12.5px}
}


/* v2.19.22 — exact Urdu source names + large bilingual book readability */
.fast-book-result{
  min-height:82px!important;
  padding:10px 13px!important;
  align-items:center!important;
}
.fast-book-names{
  display:block;
  min-width:0;
}
.fast-book-result .book-name-en{
  display:block!important;
  font-size:13.5px!important;
  line-height:1.28!important;
  max-height:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-weight:780!important;
  color:#f5f8ff!important;
}
.fast-book-result .book-name-ur{
  display:block!important;
  margin-top:4px!important;
  padding-top:2px!important;
  font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Segoe UI",Tahoma,serif!important;
  font-size:16px!important;
  line-height:1.75!important;
  font-weight:700!important;
  color:#e9f4ff!important;
  direction:rtl!important;
  text-align:right!important;
  unicode-bidi:plaintext;
  white-space:normal!important;
  overflow:visible!important;
}
.fast-book-result small{
  margin-top:4px!important;
  font-size:10.5px!important;
}
.invoice-editor-modal .draft-book-cell{
  min-height:70px!important;
  padding:7px 10px!important;
  justify-content:center!important;
}
.invoice-editor-modal .draft-book-cell .book-name-en{
  display:block!important;
  width:100%;
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:750!important;
  color:#f5f8ff!important;
  white-space:normal!important;
  overflow:visible!important;
  max-height:none!important;
}
.invoice-editor-modal .draft-book-cell .book-name-ur{
  display:block!important;
  width:100%;
  margin-top:3px!important;
  font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Segoe UI",Tahoma,serif!important;
  font-size:15px!important;
  line-height:1.65!important;
  font-weight:700!important;
  color:#e9f4ff!important;
  direction:rtl!important;
  text-align:right!important;
  unicode-bidi:plaintext;
  white-space:normal!important;
  overflow:visible!important;
  max-height:none!important;
}
.invoice-editor-modal .draft-book-cell small{
  font-size:9.5px!important;
  margin-top:3px!important;
}
.invoice-editor-modal .parity-line{
  min-height:78px!important;
  align-items:center!important;
}
.invoice-editor-modal .customer-filtered-field select{
  min-height:46px!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.45!important;
}
.invoice-editor-modal .customer-filtered-field option{
  font-size:14px;
}
@media(max-width:1350px){
  .fast-book-result{min-height:78px!important}
  .fast-book-result .book-name-en{font-size:13px!important}
  .fast-book-result .book-name-ur{font-size:15px!important}
  .invoice-editor-modal .draft-book-cell .book-name-ur{font-size:14px!important}
}

/* =========================================================
   v2.20.0 — Multi-Branch / Franchise UI
   ========================================================= */
.branch-switch-wrap{display:flex;align-items:center;gap:7px;min-width:235px;height:42px;padding:4px 8px;border:1px solid #294866;border-radius:12px;background:#091a2d;color:#d8e8ff}
.branch-switch-wrap>span{display:none}
.branch-switch-wrap select{min-width:215px;max-width:270px;height:32px;padding:4px 28px 4px 9px;border:0;background:#0b2139;color:#eef6ff;font-size:11px;font-weight:700;border-radius:8px;outline:0}
.branch-switch-wrap[hidden]{display:none!important}
.branch-performance-panel{margin:12px 0 14px;padding:13px 14px}
.branch-performance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px;margin-top:10px}
.branch-performance-card{border:1px solid #284766;border-radius:12px;background:linear-gradient(145deg,#0a2037,#08182a);padding:11px 12px;color:#eaf3ff;text-align:left;cursor:pointer;display:grid;grid-template-columns:1.25fr repeat(5,minmax(0,1fr));gap:10px;align-items:center;transition:.16s ease}
.branch-performance-card:hover{transform:translateY(-2px);border-color:#3e82d6;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.branch-performance-card>span{display:flex;flex-direction:column;gap:2px;font-weight:700}.branch-performance-card>span b{color:#61b2ff;font-size:11px}.branch-performance-card>div{min-width:0}.branch-performance-card small{display:block;color:#8099bb;font-size:8px;margin-bottom:3px}.branch-performance-card strong{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.branch-performance-card strong.neg{color:#ff6f86}
.branch-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;margin:14px 0}
.branch-admin-card{padding:16px;border:1px solid #294b70;background:linear-gradient(145deg,rgba(12,35,60,.98),rgba(7,23,40,.98))}
.branch-admin-head{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center}.branch-code{width:50px;height:50px;border-radius:12px;background:linear-gradient(145deg,#236fd4,#7247ed);display:grid;place-items:center;font-weight:900;font-size:13px}.branch-admin-head h3{margin:0 0 3px;font-size:18px}.branch-admin-head small{color:#849dbc}.branch-address{border-top:1px solid #233f5d;border-bottom:1px solid #233f5d;margin:12px 0;padding:10px 2px;font-size:11px;color:#c7d8ed}.branch-address small{display:block;color:#829bb9;margin-top:4px}.branch-mini-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.branch-mini-metrics>div{background:#081a2e;border:1px solid #223d5a;border-radius:9px;padding:8px}.branch-mini-metrics small{display:block;color:#829bb8;font-size:8px;margin-bottom:4px}.branch-mini-metrics b{font-size:10px}.branch-rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.branch-rule-grid>div{border:1px solid #274561;background:#081a2d;border-radius:10px;padding:11px}.branch-rule-grid b{display:block;color:#55b1ff;margin-bottom:5px}.branch-rule-grid span{font-size:11px;color:#a7bad2;line-height:1.45}
@media(max-width:1450px){.branch-switch-wrap{min-width:190px}.branch-switch-wrap select{min-width:170px;max-width:205px}.branch-performance-card{grid-template-columns:1.2fr repeat(3,minmax(0,1fr))}.branch-performance-card>div:nth-of-type(4),.branch-performance-card>div:nth-of-type(5){display:none}}
@media(max-width:980px){.branch-switch-wrap{display:none!important}.branch-admin-grid{grid-template-columns:1fr}.branch-performance-card{grid-template-columns:1fr 1fr 1fr}.branch-performance-card>span{grid-column:1/-1}.branch-rule-grid{grid-template-columns:1fr}}

/* =========================================================
   Remote Order Desk / VP & Registry v2.21.0
   ========================================================= */
.od-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.od-control{margin:12px 0}.od-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.od-toolbar label{display:grid;gap:5px;color:#91a8c5;font-size:11px}.od-toolbar input{min-width:165px}.od-info{margin-top:10px;padding:9px 11px;border:1px solid #24415f;border-radius:9px;background:rgba(16,42,70,.45);color:#9fb4cf;font-size:11px}.od-info b{color:#dceaff}
.od-setup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.od-setup-card{border:1px solid #29496c;background:#0a2038;color:#eaf4ff;text-align:left;padding:14px;border-radius:12px;cursor:pointer;transition:.15s ease}.od-setup-card:hover{transform:translateY(-2px);border-color:#4e91e5;background:#0d2948}.od-setup-card b,.od-setup-card span,.od-setup-card small{display:block}.od-setup-card span{margin-top:5px;color:#a8bfdc}.od-setup-card small{margin-top:6px;color:#6f91b8}
.od-table td{vertical-align:top}.od-source{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;background:#123458;color:#b9dcff}.od-source.whatsapp{background:rgba(23,180,129,.14);color:#4fe3ac}.od-source.telephone{background:rgba(106,92,255,.15);color:#a99cff}.od-collection{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;background:#162d45;color:#b4cbe6}.od-collection.paid{background:rgba(35,197,109,.14);color:#4ce38f}.od-collection.partiallypaid{background:rgba(255,190,43,.14);color:#ffd45f}.od-collection.unpaid{background:rgba(255,80,111,.12);color:#ff7891}
.od-order-form{grid-template-columns:repeat(4,minmax(0,1fr))}.od-order-form .full{grid-column:1/-1}.od-customer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.od-customer-grid label{display:grid;gap:5px;font-size:11px;color:#92a9c6}.od-book-search{position:relative}.od-book-results{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 4px);max-height:320px;overflow:auto;border:1px solid #315474;border-radius:10px;background:#06182a;box-shadow:0 18px 42px rgba(0,0,0,.45)}.od-book-results:empty{display:none}.od-book-results button{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;border:0;border-bottom:1px solid #17344f;background:transparent;color:#eaf4ff;padding:9px 10px;cursor:pointer}.od-book-results button:hover,.od-book-results button.active{background:#12365c}.od-book-results button span{min-width:0}.od-book-results b,.od-book-results small{display:block}.od-book-results b{font-size:12px}.od-book-results small{margin-top:3px;color:#96b3d2;direction:rtl;text-align:left}.od-book-results strong{white-space:nowrap;color:#56d993;font-size:10px}.od-no-book{padding:12px;color:#829bb8}
.od-items{border:1px solid #25435f;border-radius:10px;overflow:hidden}.od-line-head,.od-line{display:grid;grid-template-columns:minmax(260px,1.7fr) 72px 110px 80px 120px 38px;gap:7px;align-items:center;padding:7px 9px}.od-line-head{background:#0c2743;color:#90a9c6;font-size:10px;font-weight:800;text-transform:uppercase}.od-line{border-top:1px solid #1a3854}.od-line>div b,.od-line>div small{display:block}.od-line>div small{margin-top:3px;color:#7898bd;font-size:10px}.od-line input{min-height:30px;padding:4px 6px}.od-modal-total{display:flex;justify-content:flex-end;align-items:center;gap:15px;margin:10px 0;padding:10px 14px;border:1px solid #315477;border-radius:10px;background:#0b233d}.od-modal-total span{color:#93aaca}.od-modal-total b{font-size:20px}
@media(max-width:1300px){.od-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.od-order-form{grid-template-columns:repeat(2,minmax(0,1fr))}.od-customer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.od-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:800px){.od-setup-grid,.od-order-form,.od-customer-grid{grid-template-columns:1fr}.od-kpis{grid-template-columns:1fr!important}.od-line-head{display:none}.od-line{grid-template-columns:1fr 60px 95px;grid-auto-rows:auto}.od-line>div{grid-column:1/-1}}
/* Maktabah Daniyal ERP — WhatsApp Verified Order Draft amount-column fix
   Patch marker: MDERP_WA_AMOUNT_COLUMN_FIX_V2_21_2 */

/* Keep the draft panel and its item grid inside the available column width. */
.wa-draft,
.wa-draft .wa-lines,
.wa-draft .wa-line-head,
.wa-draft .wa-line {
  min-width: 0 !important;
  max-width: 100% !important;
}

.wa-draft .wa-lines {
  width: 100% !important;
  overflow: hidden !important;
}

/* Old layout had fixed minimum widths totalling more than the right panel.
   Use a compact responsive grid so RATE, AMOUNT and remove button always fit. */
.wa-draft .wa-line-head,
.wa-draft .wa-line {
  width: 100% !important;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(48px, .45fr)
    minmax(54px, .50fr)
    minmax(68px, .62fr)
    minmax(76px, .68fr)
    28px !important;
  gap: 5px !important;
  padding: 7px 6px !important;
  align-items: center !important;
}

.wa-draft .wa-line-head > *,
.wa-draft .wa-line > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.wa-draft .wa-line-head span:nth-child(2),
.wa-draft .wa-line-head span:nth-child(3),
.wa-draft .wa-line-head span:nth-child(4) {
  text-align: center !important;
}

.wa-draft .wa-line-head span:nth-child(5) {
  text-align: right !important;
}

.wa-draft .wa-line > div:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
}

.wa-draft .wa-line > div:first-child b,
.wa-draft .wa-line > div:first-child small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.wa-draft .wa-line input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 6px 5px !important;
  text-align: right !important;
}

.wa-draft .wa-line > b {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: right !important;
  font-size: 11px !important;
}

.wa-draft .wa-line > button:last-child {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 5px 0 !important;
  justify-self: end !important;
}

/* Give the right draft column a little more room on desktop without
   changing the responsive two-column / one-column breakpoints. */
@media (min-width: 1451px) {
  .wa-layout {
    grid-template-columns:
      minmax(250px, .78fr)
      minmax(370px, 1.16fr)
      minmax(430px, 1.28fr) !important;
  }
}

/* Extra compactness for narrower draft panels / browser zoom. */
@media (max-width: 1700px) and (min-width: 1451px) {
  .wa-draft .wa-line-head,
  .wa-draft .wa-line {
    grid-template-columns:
      minmax(0, 1.45fr)
      52px
      56px
      72px
      80px
      28px !important;
    gap: 4px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .wa-draft .wa-line-head { font-size: 8.5px !important; }
}


/* WHATSAPP_BADGE_STABLE_OVERRIDE_V22114 */
#nav button[data-s="whatsapp"].has-wa-alert::before,
#nav button[data-s="whatsapp"].wa-live-alert::after{
 content:none!important;display:none!important;animation:none!important;box-shadow:none!important;background:transparent!important
}
#nav button[data-s="whatsapp"]{filter:none!important}
#wa-live-badge-v22114{animation:none!important;box-shadow:none!important;filter:none!important}


/* v2.21.15 - Urdu dashboard hero action alignment fix */
/* Compact/laptop CSS used right:...!important and overrode the Urdu left anchor.
   Keep the dashboard CTA on the physical LEFT, away from the RTL heading. */
body.lang-ur #host .hero .ha{
  left:17px!important;
  right:auto!important;
  top:16px!important;
  z-index:3;
}
body.lang-ur #host .hero h1,
body.lang-ur #host .hero p{
  padding-left:200px!important;
  padding-right:0!important;
}
/* On small screens the action returns to normal document flow. */
@media(max-width:900px){
  body.lang-ur #host .hero .ha{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    margin-top:14px!important;
    display:flex!important;
    justify-content:flex-start!important;
  }
  body.lang-ur #host .hero h1,
  body.lang-ur #host .hero p{
    padding-left:0!important;
    padding-right:0!important;
  }
}


/* v2.21.16 — client requested invoice defaults + Quick Book arrow navigation */
.fast-book-nav{position:absolute;right:10px;top:calc(100% + 12px);z-index:275;display:none;flex-direction:column;gap:6px}
.fast-book-results.show + .fast-book-nav{display:flex}
.fast-book-results.show{padding-right:52px!important}
.fast-book-nav-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #4b75a8;border-radius:8px;background:#12345b;color:#f6f9ff;font-size:15px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 4px 13px rgba(0,0,0,.28)}
.fast-book-nav-btn:hover,.fast-book-nav-btn:focus{background:#2d6bc4;border-color:#78a7ff;outline:none;transform:translateY(-1px)}
.lang-ur .fast-book-nav{right:auto;left:10px}
.lang-ur .fast-book-results.show{padding-right:7px!important;padding-left:52px!important}
@media(max-width:900px){.fast-book-nav-btn{width:31px;height:31px}.fast-book-nav{gap:4px}}


/* v2.21.17 — Urdu New Sale Invoice scrollbar on physical RIGHT */
/*
   In Urdu, the page content remains RTL, but the invoice editor itself uses
   an LTR scrolling container so the browser paints the vertical scrollbar
   on the physical RIGHT. The header/body are immediately restored to RTL,
   so field order, Urdu labels and alignment do not change.
*/
body.lang-ur .invoice-editor-modal{
  direction:ltr!important;
}
body.lang-ur .invoice-editor-modal > .mh,
body.lang-ur .invoice-editor-modal > #mb{
  direction:rtl!important;
  text-align:right;
}
/* Keep the close button/title positions and existing Urdu form geometry stable. */
body.lang-ur .invoice-editor-modal > .mh{
  display:flex;
}


/* v2.21.19 - Urdu search INSIDE Customer field */
.order-customer-field-combo{position:relative;width:100%}
.order-customer-urdu-control{display:none;position:relative;width:100%;z-index:70}
.lang-ur .customer-filtered-field .order-customer-urdu-control{display:block}
.lang-ur .customer-filtered-field #oc{display:none!important}
#ocUrduSearch{width:100%;box-sizing:border-box;min-height:42px;border:1px solid #2b527e;border-radius:9px;background:#0b2038;color:#fff;padding:9px 38px 9px 12px;font:inherit;font-weight:600;text-align:right;direction:rtl;outline:none}
#ocUrduSearch:focus{border-color:#4f96ff;box-shadow:0 0 0 2px rgba(66,139,255,.16)}
#ocUrduSearch:disabled{opacity:.62;cursor:not-allowed}
#ocUrduSearch::placeholder{color:#91a9c3;opacity:1;font-weight:500}
.order-customer-urdu-control:after{content:'⌄';position:absolute;left:12px;top:8px;color:#d7e5f6;font-size:20px;pointer-events:none}
.order-customer-field-results{display:none;position:absolute;right:0;left:0;top:calc(100% + 4px);max-height:290px;overflow-y:auto;background:#0a1d34;border:1px solid #35618f;border-radius:9px;padding:5px;box-shadow:0 14px 30px rgba(0,0,0,.45);z-index:900;direction:rtl}
.order-customer-field-results.show{display:block}
.order-customer-field-result{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:7px;background:transparent;color:#f5f8ff;text-align:right;direction:rtl;padding:9px 11px;cursor:pointer;font:inherit}
.order-customer-field-result b{width:100%;font-size:14px;text-align:right}
.order-customer-field-result small{width:100%;font-size:11px;color:#9db5d0;text-align:right;direction:ltr}
.order-customer-field-result:hover,.order-customer-field-result.active{background:#1769c9;color:#fff}
.order-customer-field-result:hover small,.order-customer-field-result.active small{color:#dcecff}
.order-customer-field-empty{padding:11px;color:#a8bad0;text-align:center;direction:rtl}


/* v2.21.20 - customer column width normalization */
.customer-filtered-field{min-width:0!important;max-width:100%!important;grid-column:auto!important}
.customer-filtered-field .order-customer-field-combo{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.customer-filtered-field #oc{display:block;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;text-overflow:ellipsis}
.lang-ur .customer-filtered-field #oc{display:none!important}
.lang-ur .customer-filtered-field .order-customer-urdu-control{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.lang-ur .customer-filtered-field #ocUrduSearch{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
@media(min-width:901px){.customer-filtered-field{overflow:visible!important}}


/* v2.21.21 - same Customer search UI in English and Urdu */
.customer-filtered-field{min-width:0!important;max-width:100%!important;grid-column:auto!important}
.customer-filtered-field .order-customer-field-combo{position:relative;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.customer-filtered-field .order-customer-urdu-control{display:block!important;position:relative;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.customer-filtered-field #oc{display:none!important}
.customer-filtered-field #ocUrduSearch{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.order-customer-field-results.customer-search-en{direction:ltr!important;text-align:left!important}
.order-customer-field-results.customer-search-en .order-customer-field-result{direction:ltr!important;text-align:left!important;align-items:flex-start!important}
.order-customer-field-results.customer-search-en .order-customer-field-result b,.order-customer-field-results.customer-search-en .order-customer-field-result small{text-align:left!important;direction:ltr!important}
.order-customer-field-results.customer-search-ur{direction:rtl!important;text-align:right!important}
.order-customer-field-results.customer-search-ur .order-customer-field-result{direction:rtl!important;text-align:right!important;align-items:flex-start!important}
.order-customer-field-results.customer-search-ur .order-customer-field-result b{direction:rtl!important;text-align:right!important}
.order-customer-field-results.customer-search-ur .order-customer-field-result small{text-align:right!important}
@media(min-width:901px){.customer-filtered-field{overflow:visible!important}}


/* v2.21.22 - Customer caret alignment + always-English LTR login */
/* Customer type-search caret: keep it inside the field corner, never below the text. */
.customer-filtered-field .order-customer-urdu-control:after{content:'▾'!important;top:50%!important;transform:translateY(-50%)!important;line-height:1!important;margin:0!important;font-size:16px!important;left:auto!important;right:13px!important;height:auto!important;width:auto!important}
.customer-filtered-field #ocUrduSearch{padding:9px 38px 9px 12px!important}
body.lang-ur .customer-filtered-field .order-customer-urdu-control:after{right:auto!important;left:13px!important}
body.lang-ur .customer-filtered-field #ocUrduSearch{padding:9px 12px 9px 38px!important}
/* Login is deliberately English in both ERP language modes. */
#loginGate,#loginGate .login-card{direction:ltr!important;text-align:left!important}
#loginGate .login-card h2,#loginGate .login-card>.muted,#loginGate .login-card form,#loginGate .login-card form label,#loginGate .login-card form input,#loginGate .login-error,#loginGate .demo-cred{direction:ltr!important;text-align:left!important}
#loginGate .login-card form input{padding-left:11px!important;padding-right:11px!important}
#loginGate .official-login-brand{direction:ltr!important;text-align:center!important;justify-content:center!important}
#loginGate .login-company-logo{direction:ltr!important;transform:none!important}
#loginGate .login-btn{direction:ltr!important;text-align:center!important}


/* =========================================================
   v2.21.24 — Invoice keyboard grid navigation + book counter
   ========================================================= */
.invoice-items-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}
.invoice-items-titlebar>label{margin:0!important}
.invoice-book-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  min-height:25px;
  padding:4px 10px;
  border:1px solid rgba(86,139,255,.48);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(112,73,255,.18),rgba(46,130,255,.17));
  color:#cfe0ff;
  font-size:10px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.invoice-book-count::before{
  content:attr(data-count);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  margin-inline-end:6px;
  padding:0 5px;
  border-radius:999px;
  background:#397fff;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
/* The visible sentence already contains the number; hide duplicate bubble text from assistive layout visually by using a compact bullet marker instead. */
.invoice-book-count::before{content:'●';min-width:16px;width:16px;height:16px;padding:0;font-size:7px;color:#fff;background:#397fff}
.invoice-editor-modal .invoice-grid-cell{
  transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,transform .12s ease;
}
.invoice-editor-modal .draft-line-wrap.invoice-kbd-row-active>.draft-line{
  background:linear-gradient(90deg,rgba(55,116,255,.055),rgba(123,76,255,.045));
  border-radius:9px;
}
.invoice-editor-modal .invoice-grid-cell.invoice-kbd-selected{
  outline:2px solid #6c96ff!important;
  outline-offset:1px;
  border-color:#6c96ff!important;
  box-shadow:0 0 0 4px rgba(68,122,255,.17),0 0 18px rgba(67,120,255,.13)!important;
  background-color:#0d2340!important;
  position:relative;
  z-index:4;
}
.invoice-editor-modal .draft-book-cell.invoice-kbd-selected{
  transform:translateY(-1px);
}
.invoice-editor-modal .draft-disc .invoice-kbd-selected{
  color:#fff;
}
@media(max-width:900px){
 .invoice-items-titlebar{align-items:flex-start}
 .invoice-book-count{font-size:9px;min-width:auto}
}


/* =========================================================
   v2.21.25 — Dedicated Sale Invoice workspace + zero-Enter item code entry
   ========================================================= */
body.invoice-workspace-open main{padding-bottom:34px}
.invoice-workspace-host{width:100%;max-width:none!important}
.invoice-workspace.invoice-editor-modal{
  width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
}
.invoice-page-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px;padding:17px 20px;
  border:1px solid #2d4f7e;border-radius:16px;background:linear-gradient(100deg,rgba(34,48,132,.66),rgba(9,44,85,.66));
  box-shadow:0 10px 28px rgba(0,0,0,.16)
}
.invoice-page-title{min-width:0}.invoice-page-title h1{margin:2px 0 4px;font-size:28px;line-height:1.08}.invoice-page-title p{margin:0;color:#aebfda;font-size:13px}
.invoice-page-kicker{display:block;color:#8db5ff;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.invoice-page-head-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.invoice-fast-badge{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border:1px solid rgba(255,211,85,.42);border-radius:999px;background:rgba(255,205,63,.10);color:#ffe781;font-weight:900;font-size:11px}
.invoice-back-btn{white-space:nowrap}
.invoice-page-shell{border:1px solid #223e62;border-radius:16px;background:linear-gradient(180deg,rgba(12,29,49,.97),rgba(8,22,39,.98));padding:15px 16px 16px;box-shadow:0 16px 44px rgba(0,0,0,.16)}
.invoice-workspace .invoice-entry-topbar{margin-bottom:12px;padding:10px 12px;border:1px solid #284669;border-radius:12px;background:#09192c}
.invoice-workspace .order-form{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 12px!important}
.invoice-workspace .fg label{font-size:11px!important;letter-spacing:.01em}
.invoice-workspace select,.invoice-workspace input,.invoice-workspace textarea{min-height:41px!important;font-size:13px!important;padding:9px 11px!important}
.invoice-workspace .invoice-key-field{position:relative;padding:8px;border:1px solid rgba(229,185,52,.25);border-radius:11px;background:linear-gradient(180deg,rgba(236,190,43,.055),rgba(17,35,58,.32))}
.invoice-workspace .invoice-key-field>label{color:#f3d56f!important;font-weight:850!important}
.invoice-workspace .invoice-key-field select,.invoice-workspace .invoice-key-field input{border-color:#8b7438!important;background:#10213a!important;box-shadow:inset 0 0 0 1px rgba(255,212,81,.06)}
.invoice-workspace .invoice-key-field select:focus,.invoice-workspace .invoice-key-field input:focus{border-color:#ffd54f!important;box-shadow:0 0 0 3px rgba(255,213,79,.13)!important}
.invoice-workspace .invoice-items-field{margin-top:6px;padding:11px 11px 9px;border:1px solid #2e507a;border-radius:13px;background:rgba(5,18,33,.42)}
.invoice-workspace .invoice-items-titlebar{margin-bottom:8px}.invoice-workspace .invoice-items-titlebar>label{font-size:13px!important;color:#dbe8ff!important;font-weight:900!important}
.invoice-workspace .fast-book-entry{padding:9px;border:1px solid #315986;border-radius:12px;background:linear-gradient(90deg,rgba(11,31,54,.96),rgba(13,37,67,.96));grid-template-columns:minmax(280px,1fr) 142px 78px 112px!important;align-items:center}
.invoice-workspace .fast-book-search-wrap{min-width:0}.invoice-workspace #fastBookInput{font-size:15px!important;font-weight:800!important;border:2px solid #dfb93e!important;background:#0a1c32!important;box-shadow:0 0 0 4px rgba(223,185,62,.08)!important}
.invoice-workspace #fastBookInput:focus{border-color:#ffe35f!important;box-shadow:0 0 0 4px rgba(255,227,95,.16),0 0 20px rgba(255,211,68,.10)!important}
.fast-code-ready{min-height:40px;border:1px solid rgba(60,219,151,.28);border-radius:9px;background:rgba(30,218,132,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;text-align:center}.fast-code-ready b{font-size:11px;color:#5ee2a2}.fast-code-ready span{font-size:8px;color:#91bca8;margin-top:3px}
.invoice-workspace .fast-book-results{max-height:250px}
.invoice-workspace .draft-line-wrap.invoice-kbd-row-active>.draft-line{background:linear-gradient(90deg,rgba(55,116,255,.10),rgba(123,76,255,.07))!important;box-shadow:inset 3px 0 0 #5d89ff}
.invoice-workspace .invoice-grid-cell.invoice-kbd-selected{outline:2px solid #7da4ff!important;box-shadow:0 0 0 4px rgba(68,122,255,.20),0 0 22px rgba(67,120,255,.16)!important;background-color:#102b4c!important}
.invoice-workspace .invoice-editor-actions{position:sticky;bottom:0;z-index:12;margin:12px -16px -16px;padding:10px 16px;border-top:1px solid #29476d;background:linear-gradient(180deg,rgba(8,22,39,.92),#081627 45%);backdrop-filter:blur(8px)}
.invoice-workspace .invoice-editor-actions .btn{min-height:40px;padding-inline:18px}
.invoice-workspace .invoice-balance-strip{margin-top:11px}
body.lang-ur .invoice-page-head{direction:rtl;text-align:right}.lang-ur .invoice-page-head-actions{direction:ltr}
body.light-mode .invoice-page-shell,body.light-mode .invoice-workspace .invoice-entry-topbar{background:#fff;color:#102035}body.light-mode .invoice-workspace .invoice-key-field{background:#fffbea}body.light-mode .invoice-workspace .invoice-key-field select,body.light-mode .invoice-workspace .invoice-key-field input{background:#fff;color:#102035}
@media(max-width:1180px){.invoice-workspace .order-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}.invoice-workspace .fast-book-entry{grid-template-columns:minmax(220px,1fr) 120px 74px!important}.invoice-workspace .fast-code-ready{display:none}.invoice-page-head{align-items:flex-start}.invoice-page-title h1{font-size:24px}}
@media(max-width:760px){.invoice-page-head{flex-direction:column}.invoice-page-head-actions{width:100%;justify-content:space-between}.invoice-workspace .order-form{grid-template-columns:1fr!important}.invoice-workspace .span2,.invoice-workspace .full{grid-column:1!important}.invoice-workspace .fast-book-entry{grid-template-columns:1fr 72px!important}.invoice-workspace .fast-book-entry #fastBookAddBtn{grid-column:1/-1}.invoice-page-shell{padding:10px}.invoice-workspace .invoice-editor-actions{margin:10px -10px -10px;padding:9px 10px}}

/* =========================================================
   v2.21.27 — One-screen high-speed Sale Invoice / Order entry
   Keeps the page fixed; only the item viewport moves internally.
   ========================================================= */
@media (min-width:1101px) and (min-height:700px){
 body.invoice-workspace-open{overflow:hidden!important}
 body.invoice-workspace-open main{height:100vh!important;min-height:0!important;overflow:hidden!important;padding:9px 16px 10px!important}
 body.invoice-workspace-open main>header{display:none!important}
 body.invoice-workspace-open #host.invoice-workspace-host{height:100%!important;min-height:0!important;overflow:hidden!important}
 body.invoice-workspace-open .invoice-workspace{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
 body.invoice-workspace-open .invoice-page-head{flex:0 0 auto!important;min-height:52px!important;margin:0 0 7px!important;padding:8px 13px!important;border-radius:12px!important}
 body.invoice-workspace-open .invoice-page-title h1{font-size:22px!important;margin:1px 0 0!important}
 body.invoice-workspace-open .invoice-page-title p{display:none!important}
 body.invoice-workspace-open .invoice-page-kicker{font-size:9px!important}
 body.invoice-workspace-open .invoice-page-head-actions{gap:7px!important}
 body.invoice-workspace-open .invoice-fast-badge{padding:6px 9px!important;font-size:10px!important}
 body.invoice-workspace-open .invoice-back-btn{padding:7px 11px!important;font-size:11px!important}
 body.invoice-workspace-open .invoice-page-shell{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:7px 9px 8px!important;border-radius:12px!important}
 body.invoice-workspace-open .invoice-entry-topbar{flex:0 0 auto!important;grid-template-columns:1fr 1fr .75fr 1.15fr!important;gap:6px!important;margin:0 0 6px!important;padding:4px 6px!important;border-radius:9px!important}
 body.invoice-workspace-open .invoice-entry-topbar>div{min-height:36px!important;padding:2px 5px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
 body.invoice-workspace-open .invoice-entry-topbar small{font-size:8px!important;margin-bottom:1px!important}
 body.invoice-workspace-open .invoice-entry-topbar b{font-size:12px!important}
 body.invoice-workspace-open .invoice-entry-topbar input{min-height:28px!important;height:28px!important;padding:3px 7px!important;font-size:11px!important}
 body.invoice-workspace-open #otopCustomerBalance{font-size:16px!important;color:#76d8ff!important}

 body.invoice-workspace-open .invoice-one-screen-form{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:6px!important}
 body.invoice-workspace-open .invoice-primary-grid{flex:0 0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
 body.invoice-workspace-open .invoice-primary-grid .invoice-key-field{padding:5px 6px!important;border-radius:9px!important}
 body.invoice-workspace-open .invoice-primary-grid .fg{gap:2px!important;min-width:0}
 body.invoice-workspace-open .invoice-primary-grid .fg label{font-size:9px!important;line-height:1.1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.invoice-workspace-open .invoice-primary-grid input,
 body.invoice-workspace-open .invoice-primary-grid select{min-height:34px!important;height:34px!important;padding:5px 8px!important;font-size:11px!important}
 body.invoice-workspace-open .invoice-primary-grid .field-help{display:none!important}
 body.invoice-workspace-open .invoice-primary-grid .order-customer-field-combo{min-height:34px!important}
 body.invoice-workspace-open .invoice-primary-grid .order-customer-urdu-control{min-width:0!important}
 body.invoice-workspace-open .invoice-primary-grid #ocUrduSearch{min-height:34px!important;height:34px!important}
 body.invoice-workspace-open .invoice-primary-grid #oc{min-height:34px!important;height:34px!important}

 body.invoice-workspace-open .invoice-secondary-strip{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr 2fr 1.15fr;gap:6px;padding:5px 6px;border:1px solid #233f61;border-radius:9px;background:rgba(7,22,39,.62)}
 body.invoice-workspace-open .invoice-secondary-strip .fg{gap:2px!important;min-width:0}
 body.invoice-workspace-open .invoice-secondary-strip .fg label{font-size:8px!important;line-height:1!important}
 body.invoice-workspace-open .invoice-secondary-strip input,
 body.invoice-workspace-open .invoice-secondary-strip select,
 body.invoice-workspace-open .invoice-secondary-strip .readout{min-height:30px!important;height:30px!important;padding:4px 7px!important;font-size:10px!important}
 body.invoice-workspace-open .invoice-secondary-strip .compact-balance{font-size:13px!important;color:#66d9ff!important}

 body.invoice-workspace-open .invoice-items-field{flex:1 1 auto!important;min-height:190px!important;margin:0!important;padding:6px 7px 5px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:10px!important}
 body.invoice-workspace-open .invoice-items-titlebar{flex:0 0 auto!important;margin:0 0 4px!important;min-height:26px!important}
 body.invoice-workspace-open .invoice-items-caption{display:flex;align-items:baseline;gap:10px;min-width:0}
 body.invoice-workspace-open .invoice-items-caption>label{font-size:12px!important;font-weight:900!important;color:#dceaff!important;white-space:nowrap}
 body.invoice-workspace-open .invoice-items-caption>small{font-size:8px!important;color:#7894b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.invoice-workspace-open .invoice-book-count{min-height:22px!important;padding:3px 8px!important;font-size:9px!important}
 body.invoice-workspace-open .invoice-editor-modal .parity-head{flex:0 0 auto!important;padding:3px 0!important;font-size:8px!important}
 body.invoice-workspace-open #draftItems{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:none;padding-right:1px}
 body.invoice-workspace-open #draftItems::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
 body.invoice-workspace-open .draft-line-wrap{scroll-margin:3px}
 body.invoice-workspace-open .invoice-editor-modal .legacy-draft-line{min-height:42px!important;padding:3px 0!important}
 body.invoice-workspace-open .invoice-editor-modal .legacy-draft-line select,
 body.invoice-workspace-open .invoice-editor-modal .legacy-draft-line input{min-height:29px!important;height:29px!important;padding:3px 6px!important;font-size:10px!important}
 body.invoice-workspace-open .draft-book-cell{min-height:36px!important;padding-block:3px!important}
 body.invoice-workspace-open .draft-book-cell .book-name-en{font-size:10px!important;line-height:1.1!important}
 body.invoice-workspace-open .draft-book-cell .book-name-ur{font-size:11px!important;line-height:1.18!important}
 body.invoice-workspace-open .draft-book-cell small{font-size:7px!important;margin-top:1px!important}
 body.invoice-workspace-open .sku-chip,
 body.invoice-workspace-open .stockread,
 body.invoice-workspace-open .line-gross,
 body.invoice-workspace-open .line-disc,
 body.invoice-workspace-open .line-net{font-size:9px!important}
 body.invoice-workspace-open .line-net{font-size:10px!important}

 body.invoice-workspace-open .fast-book-entry{flex:0 0 auto!important;margin-top:4px!important;padding:5px 6px!important;gap:6px!important;grid-template-columns:minmax(300px,1fr) 112px 72px 104px!important;border-radius:9px!important}
 body.invoice-workspace-open #fastBookInput{min-height:35px!important;height:35px!important;padding:5px 10px!important;font-size:13px!important}
 body.invoice-workspace-open .fast-book-results{top:auto!important;bottom:calc(100% + 5px)!important;max-height:min(250px,32vh)!important}
 body.invoice-workspace-open .fast-book-qty{min-height:35px!important;height:35px!important;font-size:12px!important}
 body.invoice-workspace-open #fastBookAddBtn{min-height:35px!important;height:35px!important;padding:5px 9px!important;font-size:10px!important}
 body.invoice-workspace-open .fast-code-ready{min-height:35px!important;height:35px!important}
 body.invoice-workspace-open .fast-code-ready b{font-size:10px!important}
 body.invoice-workspace-open .fast-code-ready span{font-size:7px!important}
 body.invoice-workspace-open .fast-book-help{flex:0 0 auto!important;min-height:22px!important;margin-top:3px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important}
 body.invoice-workspace-open .fast-book-help>span{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.invoice-workspace-open .fast-book-help .compact-add-book{width:auto!important;margin:0!important;padding:4px 8px!important;font-size:8px!important}

 body.invoice-workspace-open .invoice-commercial-strip{flex:0 0 auto;display:grid;grid-template-columns:.72fr 1fr .62fr 2fr 1.05fr;gap:6px;padding:5px 6px;border:1px solid #233f61;border-radius:9px;background:rgba(7,22,39,.64)}
 body.invoice-workspace-open .invoice-commercial-strip .fg{gap:2px!important;min-width:0}
 body.invoice-workspace-open .invoice-commercial-strip .fg label{font-size:8px!important;line-height:1!important}
 body.invoice-workspace-open .invoice-commercial-strip input,
 body.invoice-workspace-open .invoice-commercial-strip textarea{min-height:31px!important;height:31px!important;padding:4px 7px!important;font-size:10px!important}
 body.invoice-workspace-open .invoice-commercial-strip textarea{resize:none!important;overflow:hidden!important;line-height:21px!important}
 body.invoice-workspace-open .invoice-commercial-strip .compact-total{min-height:46px!important;padding:4px 8px!important;margin:0!important;display:flex!important;align-items:center!important}
 body.invoice-workspace-open .invoice-commercial-strip .compact-total span{font-size:9px!important}
 body.invoice-workspace-open .invoice-commercial-strip .compact-total small{font-size:7px!important;margin-bottom:1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
 body.invoice-workspace-open .invoice-commercial-strip .compact-total b{font-size:18px!important}

 body.invoice-workspace-open .invoice-bottom-dock{flex:0 0 auto;display:grid;grid-template-columns:minmax(420px,1fr) auto;gap:7px;align-items:stretch;margin-top:6px}
 body.invoice-workspace-open .invoice-balance-strip{margin:0!important;gap:6px!important;grid-template-columns:1fr 1fr 1.25fr!important}
 body.invoice-workspace-open .invoice-balance-strip>div{min-height:44px!important;padding:5px 8px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
 body.invoice-workspace-open .invoice-balance-strip small{font-size:8px!important}
 body.invoice-workspace-open .invoice-balance-strip b{font-size:12px!important;margin-top:1px!important}
 body.invoice-workspace-open .invoice-balance-strip .closing b{font-size:16px!important}
 body.invoice-workspace-open .invoice-editor-actions{position:static!important;z-index:auto!important;margin:0!important;padding:5px!important;border:1px solid #29476d!important;border-radius:9px!important;background:#081627!important;backdrop-filter:none!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important}
 body.invoice-workspace-open .invoice-editor-actions .btn{min-height:38px!important;height:38px!important;padding:5px 12px!important;font-size:10px!important;white-space:nowrap!important}
}

@media (min-width:1101px) and (max-width:1550px) and (min-height:700px){
 body.invoice-workspace-open .invoice-primary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.invoice-workspace-open .invoice-primary-grid .invoice-key-field{padding:4px 5px!important}
 body.invoice-workspace-open .invoice-secondary-strip{grid-template-columns:1fr 1fr 1fr 1fr 1.6fr 1fr}
}

@media (min-width:1101px) and (min-height:700px) and (max-height:820px){
 body.invoice-workspace-open main{padding-top:6px!important;padding-bottom:6px!important}
 body.invoice-workspace-open .invoice-page-head{min-height:44px!important;padding:6px 10px!important;margin-bottom:5px!important}
 body.invoice-workspace-open .invoice-page-title h1{font-size:19px!important}
 body.invoice-workspace-open .invoice-entry-topbar{margin-bottom:4px!important}
 body.invoice-workspace-open .invoice-primary-grid input,
 body.invoice-workspace-open .invoice-primary-grid select,
 body.invoice-workspace-open .invoice-primary-grid #ocUrduSearch,
 body.invoice-workspace-open .invoice-primary-grid #oc{min-height:31px!important;height:31px!important}
 body.invoice-workspace-open .invoice-secondary-strip input,
 body.invoice-workspace-open .invoice-secondary-strip select,
 body.invoice-workspace-open .invoice-secondary-strip .readout{min-height:27px!important;height:27px!important}
 body.invoice-workspace-open .invoice-items-field{min-height:150px!important}
 body.invoice-workspace-open .fast-book-entry{margin-top:3px!important;padding:4px 5px!important}
 body.invoice-workspace-open #fastBookInput,
 body.invoice-workspace-open .fast-book-qty,
 body.invoice-workspace-open #fastBookAddBtn,
 body.invoice-workspace-open .fast-code-ready{min-height:32px!important;height:32px!important}
 body.invoice-workspace-open .invoice-commercial-strip input,
 body.invoice-workspace-open .invoice-commercial-strip textarea{min-height:28px!important;height:28px!important}
 body.invoice-workspace-open .invoice-bottom-dock{margin-top:4px!important}
 body.invoice-workspace-open .invoice-balance-strip>div{min-height:39px!important}
 body.invoice-workspace-open .invoice-editor-actions .btn{min-height:34px!important;height:34px!important}
}

/* Narrow / short displays keep the older scrollable fallback rather than clipping controls. */
@media (max-width:1100px), (max-height:699px){
 body.invoice-workspace-open{overflow:auto!important}
 body.invoice-workspace-open main>header{display:flex!important}
 .invoice-primary-grid,.invoice-secondary-strip,.invoice-commercial-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .invoice-one-screen-form{display:flex!important;flex-direction:column!important;gap:8px!important}
 .invoice-bottom-dock{display:block}
 .invoice-workspace #draftItems{max-height:360px;overflow:auto}
}

/* =========================================================
   v2.21.27 — Professional blue completion highlight + cleaner item entry
   ========================================================= */
.invoice-workspace .invoice-key-field{
  border-color:#29496f!important;
  background:linear-gradient(180deg,rgba(26,57,96,.34),rgba(11,29,50,.44))!important;
  box-shadow:none!important;
}
.invoice-workspace .invoice-key-field>label{
  color:#b8d2ff!important;
  font-weight:800!important;
}
.invoice-workspace .invoice-key-field select,
.invoice-workspace .invoice-key-field input{
  border-color:#3d6697!important;
  background:#0f223a!important;
  color:#fff!important;
  box-shadow:none!important;
}
/* Selected/completed dropdowns use a cool blue fill, like the client's fast legacy workflow but matched to this design. */
.invoice-workspace .invoice-key-field.is-complete select:not(:disabled),
.invoice-workspace .invoice-key-field.is-complete input:not(:disabled){
  border-color:#4b7fc5!important;
  background:linear-gradient(180deg,#1a4d86,#153d70)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.invoice-workspace .invoice-key-field:focus-within{
  border-color:#4f91ec!important;
  background:linear-gradient(180deg,rgba(34,83,143,.42),rgba(12,37,66,.54))!important;
  box-shadow:0 0 0 2px rgba(79,145,236,.10)!important;
}
.invoice-workspace .invoice-key-field select:focus,
.invoice-workspace .invoice-key-field input:focus{
  border-color:#66a6ff!important;
  box-shadow:0 0 0 3px rgba(78,145,255,.16)!important;
  outline:none!important;
}
.invoice-workspace .invoice-key-field select option{background:#10233d;color:#fff}

/* Item-code entry is intentionally plain and professional: no yellow ring, no green AUTO block. */
.invoice-workspace #fastBookInput{
  border:1px solid #355d89!important;
  background:#0a1c32!important;
  color:#fff!important;
  box-shadow:none!important;
  font-weight:750!important;
}
.invoice-workspace #fastBookInput:focus{
  border-color:#5b9cff!important;
  box-shadow:0 0 0 3px rgba(75,143,255,.16)!important;
  outline:none!important;
}
.invoice-workspace #fastBookInput::placeholder{color:#8298b5!important;opacity:1}
.fast-code-ready{display:none!important}
.invoice-workspace .fast-book-entry{grid-template-columns:minmax(300px,1fr) 78px 112px!important}
body.invoice-workspace-open .fast-book-entry{grid-template-columns:minmax(300px,1fr) 72px 104px!important}
.invoice-workspace .fast-book-help>span:empty{display:none!important}
.invoice-workspace .fast-book-help>span:not(:empty){color:#8fbfff!important;font-size:8px!important}
.invoice-workspace .fast-book-help{justify-content:flex-end!important}
.invoice-workspace .fast-book-help>span:not(:empty)+.compact-add-book{margin-left:auto!important}

body.light-mode .invoice-workspace .invoice-key-field{background:#f5f9ff!important;border-color:#c5d8f2!important}
body.light-mode .invoice-workspace .invoice-key-field>label{color:#285e9b!important}
body.light-mode .invoice-workspace .invoice-key-field.is-complete select:not(:disabled),
body.light-mode .invoice-workspace .invoice-key-field.is-complete input:not(:disabled){background:linear-gradient(180deg,#2f70ba,#245f9f)!important;color:#fff!important;border-color:#2c69aa!important}
body.light-mode .invoice-workspace #fastBookInput{background:#fff!important;color:#13263d!important;border-color:#9db8d8!important}

@media(max-width:1180px){
 .invoice-workspace .fast-book-entry,
 body.invoice-workspace-open .fast-book-entry{grid-template-columns:minmax(220px,1fr) 72px 96px!important}
}
@media(max-width:760px){
 .invoice-workspace .fast-book-entry,
 body.invoice-workspace-open .fast-book-entry{grid-template-columns:1fr 72px!important}
 .invoice-workspace .fast-book-entry #fastBookAddBtn,
 body.invoice-workspace-open .fast-book-entry #fastBookAddBtn{grid-column:1/-1!important}
}


/* =========================================================
   v2.21.29 — visible invoice item scrollbar + visual star rating
   ========================================================= */
/* Keep the page fixed, but make it obvious that a long invoice can be scrolled inside the item area. */
body.invoice-workspace-open #draftItems{
  overflow-y:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:#3f8cff rgba(9,29,51,.72)!important;
  padding-right:7px!important;
}
body.invoice-workspace-open #draftItems::-webkit-scrollbar{
  width:7px!important;
  height:7px!important;
  display:block!important;
}
body.invoice-workspace-open #draftItems::-webkit-scrollbar-track{
  background:rgba(8,27,48,.78)!important;
  border-radius:999px!important;
}
body.invoice-workspace-open #draftItems::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#5da2ff,#2f73d9)!important;
  border-radius:999px!important;
  border:1px solid rgba(155,200,255,.28)!important;
}
body.invoice-workspace-open #draftItems::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#78b4ff,#3e85eb)!important;
}

/* Star/discount slab: show real yellow stars at a glance, plus a compact numeric count. */
.star-rating-inline{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  white-space:nowrap;
  vertical-align:middle;
}
.star-rating-inline .star-glyphs{
  color:#ffd54a!important;
  font-size:11px;
  line-height:1;
  letter-spacing:1px;
  text-shadow:0 0 5px rgba(255,205,60,.22);
}
.star-rating-inline .star-count{
  color:#a9c2e6;
  font-size:8px;
  font-weight:800;
  line-height:1;
}
.star-rating-inline.star-text{color:#f6c54f;font-weight:800}
.star-rating-inline.star-unassigned{color:#758aa6}
body.invoice-workspace-open .draft-book-cell small .star-glyphs{font-size:10px!important;letter-spacing:.7px}
body.invoice-workspace-open .draft-book-cell small .star-count{font-size:7px!important}
.fast-book-result .star-rating-inline .star-glyphs{font-size:10px}
.inventory-table .star-rating-inline .star-glyphs{font-size:10px}
body.light-mode .star-rating-inline .star-count{color:#496783}


/* =========================================================
   v2.21.30 — compact Mix Item editing + stronger star visibility
   ========================================================= */
/* Fast invoice entry must never expand a Mix Item into a tall component block.
   The row stays one-line/compact so Qty, Rate and Discount remain visible while
   navigating with the keyboard. Full Mix contents remain available in saved
   invoice detail / Inventory Mix Detail. */
body.invoice-workspace-open .draft-line-wrap.mix-selected{
  margin:1px 0!important;
  border:1px solid rgba(88,132,255,.24)!important;
  border-radius:8px!important;
  background:rgba(45,83,156,.055)!important;
  overflow:visible!important;
}
body.invoice-workspace-open .draft-line-wrap.mix-selected>.draft-line{
  padding:3px 3px!important;
  border-bottom:1px solid rgba(88,132,255,.12)!important;
}
body.invoice-workspace-open .draft-line-wrap.mix-selected>.invoice-mix-contents{display:none!important}

/* Stars: slightly larger and a deeper gold so they are clearer on the dark UI. */
.star-rating-inline .star-glyphs{
  color:#f0b400!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:1.05px!important;
  text-shadow:0 1px 0 rgba(88,52,0,.78),0 0 3px rgba(240,180,0,.20)!important;
}
body.invoice-workspace-open .draft-book-cell small .star-glyphs{font-size:12px!important;letter-spacing:.85px!important}
body.invoice-workspace-open .draft-book-cell small .star-count{font-size:8px!important;color:#b8c9e4!important}
.fast-book-result .star-rating-inline .star-glyphs{font-size:12px!important}
.inventory-table .star-rating-inline .star-glyphs{font-size:12px!important}


/* =========================================================
   v2.21.31 — Access-style Mix Item Detail pane in fast invoice entry
   ========================================================= */
/* Keep the editable Mix row compact, but show its component books in a separate
   linked panel below the item list. This mirrors the client's old Access workflow
   without pushing Qty/Rate/Discount out of view. */
.invoice-mix-detail-pane[hidden]{display:none!important}
.invoice-mix-detail-pane{
  flex:0 0 auto;
  margin:4px 0 2px;
  border:1px solid #315f9d;
  border-radius:9px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(13,39,70,.98),rgba(7,25,45,.98));
  box-shadow:inset 0 1px 0 rgba(126,177,255,.06)
}
.invoice-mix-detail-pane.show{display:block}
.invoice-mix-detail-header{
  min-height:28px;padding:5px 8px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid rgba(73,118,178,.42);background:linear-gradient(90deg,rgba(50,105,190,.19),rgba(27,72,139,.08))
}
.invoice-mix-detail-header>div{min-width:0;display:flex;align-items:baseline;gap:8px}
.invoice-mix-detail-header b{font-size:10px;color:#e5efff;white-space:nowrap}
.invoice-mix-detail-header span{font-size:8px;color:#8fb1dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invoice-mix-detail-header>strong{flex:0 0 auto;padding:3px 7px;border:1px solid rgba(79,151,255,.35);border-radius:999px;background:rgba(46,116,222,.14);color:#83b8ff;font-size:8px}
.invoice-mix-detail-head,.invoice-mix-detail-row{
  display:grid;grid-template-columns:76px minmax(210px,1.9fr) 82px 72px 112px 66px;gap:7px;align-items:center;min-width:660px
}
.invoice-mix-detail-head{padding:3px 8px;color:#7e9fc9;font-size:7px;font-weight:800;text-transform:uppercase;border-bottom:1px solid rgba(49,83,124,.48)}
.invoice-mix-detail-scroll{max-height:82px;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3f8cff rgba(9,29,51,.72)}
.invoice-mix-detail-scroll::-webkit-scrollbar{width:6px;height:6px}
.invoice-mix-detail-scroll::-webkit-scrollbar-track{background:rgba(8,27,48,.78);border-radius:999px}
.invoice-mix-detail-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5da2ff,#2f73d9);border-radius:999px;border:1px solid rgba(155,200,255,.22)}
.invoice-mix-detail-row{min-height:25px;padding:3px 8px;border-bottom:1px solid rgba(37,67,102,.52);font-size:8px;color:#c7d7ed}
.invoice-mix-detail-row:last-child{border-bottom:0}
.invoice-mix-detail-row:hover{background:rgba(63,140,255,.065)}
.invoice-mix-detail-row .mix-code{font-weight:900;color:#8ebcff}
.invoice-mix-detail-row .mix-book{min-width:0}
.invoice-mix-detail-row .mix-book b{display:block;color:#edf5ff;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invoice-mix-detail-row .mix-book small{display:block;color:#b5c8e3;font-size:9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.invoice-mix-detail-row>strong{color:#fff}
.invoice-mix-detail-row .mix-stock{display:inline-flex;justify-content:center;padding:2px 5px;border:1px solid rgba(38,199,143,.25);border-radius:6px;background:rgba(31,170,122,.08);color:#54dfa0;font-weight:850}
.invoice-mix-detail-row.short{background:rgba(220,65,88,.035)}
.invoice-mix-detail-row .mix-stock.short{border-color:rgba(255,98,119,.30);background:rgba(190,55,73,.10);color:#ff98a5}
body.lang-ur .invoice-mix-detail-pane{direction:ltr;text-align:left}
body.light-mode .invoice-mix-detail-pane{background:#f8fbff;border-color:#9bbbe5}
body.light-mode .invoice-mix-detail-row .mix-book b{color:#173250}
body.light-mode .invoice-mix-detail-row{color:#314f72}

@media (min-width:1101px) and (min-height:700px){
 body.invoice-workspace-open .invoice-mix-detail-pane{margin:3px 0 1px!important}
 body.invoice-workspace-open .invoice-mix-detail-header{min-height:24px!important;padding:3px 7px!important}
 body.invoice-workspace-open .invoice-mix-detail-scroll{max-height:70px!important}
 body.invoice-workspace-open .invoice-mix-detail-row{min-height:22px!important;padding:2px 7px!important}
 body.invoice-workspace-open .invoice-mix-detail-head{padding:2px 7px!important}
}
@media (min-width:1101px) and (min-height:700px) and (max-height:820px){
 body.invoice-workspace-open .invoice-mix-detail-scroll{max-height:50px!important}
 body.invoice-workspace-open .invoice-mix-detail-header{min-height:22px!important}
 body.invoice-workspace-open .invoice-mix-detail-row{min-height:20px!important}
}
@media (max-width:900px){
 .invoice-mix-detail-head{display:none}
 .invoice-mix-detail-row{grid-template-columns:70px minmax(180px,1.6fr) 70px 70px;min-width:500px}
 .invoice-mix-detail-row>span:nth-child(5),.invoice-mix-detail-row>span:nth-child(6){display:none}
}

/* =========================================================
   v2.21.32 — denser 4-row invoice grid + floating Mix drawer
   ========================================================= */
/* Keep the existing readable type sizes, but remove wasted vertical padding.
   English + Urdu book names share the first line; stars/meta stay on one compact
   second line. This lets at least four invoice books remain visible before the
   internal blue scrollbar is needed on normal desktop screens. */
body.invoice-workspace-open .invoice-items-field{
  position:relative!important;
  min-height:248px!important;
}
body.invoice-workspace-open .invoice-items-titlebar{
  min-height:22px!important;
  margin-bottom:2px!important;
}
body.invoice-workspace-open .invoice-editor-modal .parity-head{
  padding:2px 0!important;
  min-height:16px!important;
  line-height:1!important;
}
body.invoice-workspace-open #draftItems{
  min-height:152px!important;
  flex-basis:152px!important;
  padding-right:7px!important;
}
body.invoice-workspace-open .draft-line-wrap{
  margin:0!important;
  border-radius:7px!important;
}
body.invoice-workspace-open .invoice-editor-modal .legacy-draft-line,
body.invoice-workspace-open .invoice-editor-modal .parity-line{
  min-height:38px!important;
  padding:1px 0!important;
  align-items:center!important;
}
body.invoice-workspace-open .invoice-editor-modal .legacy-draft-line select,
body.invoice-workspace-open .invoice-editor-modal .legacy-draft-line input{
  min-height:27px!important;
  height:27px!important;
  padding:2px 6px!important;
}
body.invoice-workspace-open .draft-book-cell{
  min-height:34px!important;
  height:34px!important;
  padding:2px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:17px 13px!important;
  column-gap:10px!important;
  row-gap:0!important;
  align-items:center!important;
  overflow:hidden!important;
}
body.invoice-workspace-open .draft-book-cell .book-name-en{
  grid-column:1!important;
  grid-row:1!important;
  display:block!important;
  width:100%!important;
  font-size:10px!important;
  line-height:17px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-height:17px!important;
}
body.invoice-workspace-open .draft-book-cell .book-name-ur{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  font-size:11px!important;
  line-height:17px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-height:17px!important;
  text-align:right!important;
}
body.invoice-workspace-open .draft-book-cell small{
  grid-column:1/-1!important;
  grid-row:2!important;
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  min-width:0!important;
  margin:0!important;
  font-size:7px!important;
  line-height:13px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
body.invoice-workspace-open .draft-book-cell small .star-rating-inline{
  flex:0 0 auto!important;
}
body.invoice-workspace-open .draft-book-cell small .star-glyphs{
  font-size:12px!important;
  line-height:12px!important;
}
body.invoice-workspace-open .draft-book-cell small .star-count{
  font-size:8px!important;
}
body.invoice-workspace-open .draft-line-wrap.mix-selected{
  margin:0!important;
  overflow:visible!important;
}
body.invoice-workspace-open .draft-line-wrap.mix-selected>.draft-line{
  padding:1px 0!important;
}
body.invoice-workspace-open .fast-book-entry{
  margin-top:2px!important;
  padding:4px 5px!important;
}
body.invoice-workspace-open .fast-book-help{
  display:none!important;
}
body.invoice-workspace-open #fastBookInput,
body.invoice-workspace-open .fast-book-qty,
body.invoice-workspace-open #fastBookAddBtn{
  min-height:32px!important;
  height:32px!important;
}

/* Mix details no longer consume vertical layout space. The code/MIX chip opens
   a floating drawer over the right side of the item grid. It auto-opens after a
   Mix item is added, closes when the operator starts the next code or edits Qty,
   and can be reopened at any time from the MIX code chip. */
body.invoice-workspace-open .mix-detail-trigger{
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
  border:1px solid rgba(86,150,255,.38)!important;
  background:linear-gradient(180deg,rgba(39,92,165,.26),rgba(24,63,118,.22))!important;
  color:#9fc8ff!important;
  font:inherit!important;
  font-weight:850!important;
  min-height:25px!important;
  padding:3px 6px!important;
  border-radius:7px!important;
}
body.invoice-workspace-open .mix-detail-trigger:hover,
body.invoice-workspace-open .mix-detail-trigger:focus{
  border-color:#6aa9ff!important;
  background:linear-gradient(180deg,rgba(56,119,211,.34),rgba(31,80,145,.30))!important;
  outline:none!important;
}
body.invoice-workspace-open .invoice-mix-detail-pane{
  position:absolute!important;
  top:48px!important;
  right:10px!important;
  width:min(430px,42%)!important;
  max-height:188px!important;
  margin:0!important;
  z-index:40!important;
  border:1px solid #4d83c9!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(10,34,61,.985),rgba(5,22,40,.99))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.38),0 0 0 1px rgba(83,151,255,.08)!important;
  overflow:hidden!important;
}
body.invoice-workspace-open .invoice-mix-detail-header{
  min-height:34px!important;
  padding:5px 7px!important;
  gap:7px!important;
}
body.invoice-workspace-open .invoice-mix-detail-header>div:first-child{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:1px!important;
}
body.invoice-workspace-open .invoice-mix-detail-header b{
  font-size:10px!important;
  line-height:1.15!important;
}
body.invoice-workspace-open .invoice-mix-detail-header span{
  max-width:280px!important;
  font-size:8px!important;
}
body.invoice-workspace-open .mix-detail-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
}
body.invoice-workspace-open .mix-detail-actions>strong{
  padding:3px 6px!important;
  border:1px solid rgba(79,151,255,.35)!important;
  border-radius:999px!important;
  background:rgba(46,116,222,.14)!important;
  color:#83b8ff!important;
  font-size:8px!important;
  white-space:nowrap!important;
}
body.invoice-workspace-open .mix-detail-close{
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #365c89!important;
  border-radius:7px!important;
  background:#0d2848!important;
  color:#ddecff!important;
  font-size:15px!important;
  line-height:1!important;
  cursor:pointer!important;
}
body.invoice-workspace-open .mix-detail-close:hover{background:#163b67!important;border-color:#5d91d3!important}
body.invoice-workspace-open .invoice-mix-detail-head,
body.invoice-workspace-open .invoice-mix-detail-row{
  grid-template-columns:58px minmax(150px,1fr) 72px 56px!important;
  min-width:0!important;
  gap:5px!important;
}
body.invoice-workspace-open .invoice-mix-detail-head{
  display:grid!important;
  padding:3px 7px!important;
  font-size:7px!important;
}
body.invoice-workspace-open .invoice-mix-detail-scroll{
  max-height:145px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.invoice-workspace-open .invoice-mix-detail-row{
  min-height:29px!important;
  padding:3px 7px!important;
  font-size:8px!important;
}
body.invoice-workspace-open .invoice-mix-detail-row .mix-book b{
  font-size:9px!important;
}
body.invoice-workspace-open .invoice-mix-detail-row .mix-book small{
  font-size:8px!important;
  margin-top:0!important;
}
body.invoice-workspace-open .invoice-mix-detail-row>strong{
  text-align:center!important;
  white-space:nowrap!important;
}
body.invoice-workspace-open .invoice-mix-detail-row .mix-stock{
  justify-self:stretch!important;
  text-align:center!important;
}

/* Short-height desktop still keeps four compact rows without making the page
   itself scroll; the internal blue item scrollbar takes over after row four. */
@media (min-width:1101px) and (min-height:700px) and (max-height:820px){
  body.invoice-workspace-open .invoice-items-field{min-height:226px!important}
  body.invoice-workspace-open #draftItems{min-height:148px!important;flex-basis:148px!important}
  body.invoice-workspace-open .invoice-mix-detail-pane{top:44px!important;max-height:166px!important}
  body.invoice-workspace-open .invoice-mix-detail-scroll{max-height:122px!important}
}
@media (max-width:1100px){
  body.invoice-workspace-open .draft-book-cell{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    height:auto!important;
    min-height:58px!important;
  }
  body.invoice-workspace-open .draft-book-cell .book-name-en{grid-column:1!important;grid-row:1!important}
  body.invoice-workspace-open .draft-book-cell .book-name-ur{grid-column:1!important;grid-row:2!important}
  body.invoice-workspace-open .draft-book-cell small{grid-column:1!important;grid-row:3!important}
  body.invoice-workspace-open .invoice-mix-detail-pane{right:7px!important;left:7px!important;width:auto!important;top:48px!important}
}


/* =========================================================
   v2.21.33 — Urdu readability + unclipped invoice star/count
   ========================================================= */
/* Urdu invoice text should read like a desktop business form: a proper Urdu
   font stack, brighter ink and slightly larger labels without increasing the
   surrounding boxes. English/numeric values keep their existing geometry. */
body.lang-ur.invoice-workspace-open .invoice-workspace,
body.lang-ur.invoice-workspace-open .invoice-page-head{
  font-family:"Urdu Typesetting","Noto Nastaliq Urdu","Noto Naskh Arabic","Nirmala UI","Segoe UI",Tahoma,Arial,sans-serif!important;
}
body.lang-ur.invoice-workspace-open .invoice-page-title h1{
  font-size:25px!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:#fff!important;
  text-rendering:optimizeLegibility;
}
body.lang-ur.invoice-workspace-open .invoice-page-kicker{
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:800!important;
  color:#b9d7ff!important;
}
body.lang-ur.invoice-workspace-open .invoice-entry-topbar small{
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:700!important;
  color:#c7dcf7!important;
}
body.lang-ur.invoice-workspace-open .invoice-primary-grid .fg label,
body.lang-ur.invoice-workspace-open .invoice-secondary-strip .fg label,
body.lang-ur.invoice-workspace-open .invoice-commercial-strip .fg label{
  font-size:11px!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:#e1eeff!important;
  letter-spacing:0!important;
  text-rendering:optimizeLegibility;
}
body.lang-ur.invoice-workspace-open .invoice-primary-grid input,
body.lang-ur.invoice-workspace-open .invoice-primary-grid select,
body.lang-ur.invoice-workspace-open .invoice-secondary-strip input,
body.lang-ur.invoice-workspace-open .invoice-secondary-strip select,
body.lang-ur.invoice-workspace-open .invoice-secondary-strip .readout,
body.lang-ur.invoice-workspace-open .invoice-commercial-strip input,
body.lang-ur.invoice-workspace-open .invoice-commercial-strip textarea{
  font-size:13px!important;
  font-weight:700!important;
  color:#fff!important;
  line-height:1.35!important;
}
body.lang-ur.invoice-workspace-open .invoice-items-caption>label{
  font-size:15px!important;
  line-height:1.25!important;
  color:#fff!important;
}
body.lang-ur.invoice-workspace-open .invoice-items-caption>small,
body.lang-ur.invoice-workspace-open .invoice-editor-modal .parity-head{
  font-size:9px!important;
  line-height:1.3!important;
  color:#b7ccea!important;
  font-weight:700!important;
}
body.lang-ur.invoice-workspace-open .invoice-balance-strip small,
body.lang-ur.invoice-workspace-open .invoice-commercial-strip .compact-total small{
  font-size:10px!important;
  line-height:1.25!important;
  color:#c8daf1!important;
  font-weight:700!important;
}
body.lang-ur.invoice-workspace-open .invoice-editor-actions .btn,
body.lang-ur.invoice-workspace-open .invoice-back-btn{
  font-size:12px!important;
  font-weight:800!important;
}
body.lang-ur.invoice-workspace-open .draft-book-cell .book-name-ur{
  font-family:"Urdu Typesetting","Noto Nastaliq Urdu","Noto Naskh Arabic","Nirmala UI","Segoe UI",Tahoma,Arial,sans-serif!important;
  font-size:13px!important;
  line-height:17px!important;
  font-weight:700!important;
  color:#fff!important;
  text-rendering:optimizeLegibility;
}

/* The compact second line previously left the star/count too close to the
   clipped lower edge in RTL mode. Keep the same overall row height, but give
   the meta row a real 14px lane and lift the rating slightly. */
body.invoice-workspace-open .draft-book-cell{
  grid-template-rows:16px 14px!important;
  padding-top:2px!important;
  padding-bottom:2px!important;
  min-height:34px!important;
  height:34px!important;
}
body.invoice-workspace-open .draft-book-cell .book-name-en,
body.invoice-workspace-open .draft-book-cell .book-name-ur{
  line-height:16px!important;
  max-height:16px!important;
}
body.invoice-workspace-open .draft-book-cell small{
  line-height:14px!important;
  min-height:14px!important;
  height:14px!important;
  overflow:visible!important;
  align-items:flex-start!important;
}
body.invoice-workspace-open .draft-book-cell small .star-rating-inline{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  direction:ltr!important;
  height:14px!important;
  line-height:14px!important;
  overflow:visible!important;
  transform:translateY(-1px)!important;
  gap:4px!important;
  white-space:nowrap!important;
}
body.invoice-workspace-open .draft-book-cell small .star-glyphs{
  display:inline-block!important;
  font-size:13px!important;
  line-height:14px!important;
  letter-spacing:.9px!important;
  vertical-align:top!important;
}
body.invoice-workspace-open .draft-book-cell small .star-count{
  display:inline-block!important;
  font-size:9px!important;
  line-height:14px!important;
  font-weight:900!important;
  color:#d3e2f8!important;
  vertical-align:top!important;
  white-space:nowrap!important;
}
body.lang-ur.invoice-workspace-open .draft-book-cell small .star-rating-inline{
  transform:translateY(-2px)!important;
}

/* Preserve the 4-visible-row target introduced in v2.21.32. */
@media (min-width:1101px) and (min-height:700px){
  body.invoice-workspace-open #draftItems{min-height:152px!important;flex-basis:152px!important}
}
\n\n/* =========================================================\n   v2.21.34 — fixed Urdu rating lane + clearer Access-style Urdu typography\n   ========================================================= */\n/* The old compact row relied on normal-flow SMALL content. In RTL/Nastaliq\n   rendering the numeric star count could drop below the baseline and be clipped.\n   Give the metadata its own positioned lane inside the existing book box; no row\n   height is added, so the four-visible-book target remains unchanged. */\nbody.invoice-workspace-open .draft-book-cell{\n  position:relative!important;\n  overflow:hidden!important;\n}\nbody.invoice-workspace-open .draft-book-cell small.draft-book-meta{\n  position:absolute!important;\n  left:7px!important;\n  right:7px!important;\n  top:19px!important;\n  bottom:auto!important;\n  height:13px!important;\n  min-height:13px!important;\n  margin:0!important;\n  padding:0!important;\n  display:flex!important;\n  flex-direction:row!important;\n  align-items:center!important;\n  justify-content:space-between!important;\n  gap:8px!important;\n  direction:ltr!important;\n  line-height:13px!important;\n  overflow:visible!important;\n  white-space:nowrap!important;\n  pointer-events:none!important;\n}\nbody.invoice-workspace-open .draft-book-cell .draft-book-sku{\n  min-width:0!important;\n  overflow:hidden!important;\n  text-overflow:ellipsis!important;\n  white-space:nowrap!important;\n  font-size:7.5px!important;\n  line-height:13px!important;\n  color:#78a6db!important;\n  font-weight:750!important;\n}\nbody.invoice-workspace-open .draft-book-cell .draft-book-rating{\n  flex:0 0 auto!important;\n  height:13px!important;\n  display:flex!important;\n  align-items:center!important;\n  justify-content:flex-end!important;\n  line-height:13px!important;\n  overflow:visible!important;\n}\nbody.invoice-workspace-open .draft-book-cell .draft-book-rating .star-rating-inline{\n  display:inline-flex!important;\n  flex-direction:row!important;\n  align-items:center!important;\n  justify-content:flex-end!important;\n  flex-wrap:nowrap!important;\n  gap:4px!important;\n  height:13px!important;\n  min-height:13px!important;\n  line-height:13px!important;\n  margin:0!important;\n  padding:0!important;\n  transform:translateY(-2px)!important;\n  direction:ltr!important;\n  overflow:visible!important;\n  white-space:nowrap!important;\n}\nbody.invoice-workspace-open .draft-book-cell .draft-book-rating .star-glyphs{\n  display:inline-block!important;\n  font-size:14px!important;\n  line-height:13px!important;\n  font-weight:900!important;\n  letter-spacing:.75px!important;\n  color:#f2b600!important;\n  text-shadow:0 1px 0 #6d4300,0 0 3px rgba(242,182,0,.22)!important;\n  vertical-align:middle!important;\n}\nbody.invoice-workspace-open .draft-book-cell .draft-book-rating .star-count{\n  display:inline-block!important;\n  font-family:\"Segoe UI\",Tahoma,Arial,sans-serif!important;\n  font-size:9.5px!important;\n  line-height:13px!important;\n  font-weight:900!important;\n  color:#e2edff!important;\n  vertical-align:middle!important;\n  white-space:nowrap!important;\n}\nbody.lang-ur.invoice-workspace-open .draft-book-cell small.draft-book-meta{\n  direction:ltr!important;\n}\nbody.lang-ur.invoice-workspace-open .draft-book-cell .draft-book-rating .star-rating-inline{\n  transform:translateY(-3px)!important;\n}\n\n/* Access-style Urdu: prefer the clear Nastaliq font commonly used by Windows\n   Urdu desktop forms when it is installed, then fall back to Windows Urdu\n   Typesetting/Nirmala without synthesised heavy bold that muddies glyphs. */\nbody.lang-ur.invoice-workspace-open{\n  --md-urdu-font:\"Jameel Noori Nastaleeq\",\"Nafees Nastaleeq\",\"Alvi Nastaleeq\",\"Urdu Typesetting\",\"Noto Nastaliq Urdu\",\"Noto Naskh Arabic\",\"Nirmala UI\",Tahoma,serif;\n}\nbody.lang-ur.invoice-workspace-open .invoice-workspace,\nbody.lang-ur.invoice-workspace-open .invoice-page-head,\nbody.lang-ur.invoice-workspace-open .invoice-workspace label,\nbody.lang-ur.invoice-workspace-open .invoice-workspace select,\nbody.lang-ur.invoice-workspace-open .invoice-workspace input,\nbody.lang-ur.invoice-workspace-open .invoice-workspace textarea,\nbody.lang-ur.invoice-workspace-open .invoice-workspace button:not(.draft-book-cell),\nbody.lang-ur.invoice-workspace-open .invoice-workspace .readout{\n  font-family:var(--md-urdu-font)!important;\n  font-synthesis:none!important;\n  letter-spacing:0!important;\n  text-rendering:optimizeLegibility;\n}\n/* Primary field headings were the hardest text to read in the screenshot. */\nbody.lang-ur.invoice-workspace-open .invoice-primary-grid .fg label{\n  font-family:var(--md-urdu-font)!important;\n  font-size:13px!important;\n  line-height:1.42!important;\n  font-weight:500!important;\n  color:#f4f8ff!important;\n  text-shadow:0 1px 0 rgba(0,0,0,.42)!important;\n  overflow:visible!important;\n  text-overflow:clip!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-secondary-strip .fg label,\nbody.lang-ur.invoice-workspace-open .invoice-commercial-strip .fg label{\n  font-family:var(--md-urdu-font)!important;\n  font-size:12px!important;\n  line-height:1.4!important;\n  font-weight:500!important;\n  color:#dceaff!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-primary-grid select,\nbody.lang-ur.invoice-workspace-open .invoice-primary-grid input,\nbody.lang-ur.invoice-workspace-open .invoice-primary-grid #ocUrduSearch{\n  font-family:var(--md-urdu-font)!important;\n  font-size:14.5px!important;\n  line-height:1.55!important;\n  font-weight:500!important;\n  color:#fff!important;\n  text-shadow:0 1px 0 rgba(0,0,0,.28)!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-secondary-strip input,\nbody.lang-ur.invoice-workspace-open .invoice-secondary-strip select,\nbody.lang-ur.invoice-workspace-open .invoice-secondary-strip .readout,\nbody.lang-ur.invoice-workspace-open .invoice-commercial-strip input,\nbody.lang-ur.invoice-workspace-open .invoice-commercial-strip textarea{\n  font-family:var(--md-urdu-font)!important;\n  font-size:13.5px!important;\n  line-height:1.5!important;\n  font-weight:500!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-page-title h1{\n  font-family:var(--md-urdu-font)!important;\n  font-size:27px!important;\n  line-height:1.35!important;\n  font-weight:500!important;\n  color:#fff!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-page-kicker{\n  font-family:var(--md-urdu-font)!important;\n  font-size:12px!important;\n  line-height:1.45!important;\n  font-weight:500!important;\n  color:#c9e1ff!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-items-caption>label{\n  font-family:var(--md-urdu-font)!important;\n  font-size:17px!important;\n  line-height:1.35!important;\n  font-weight:500!important;\n  color:#fff!important;\n}\nbody.lang-ur.invoice-workspace-open .draft-book-cell .book-name-ur{\n  font-family:var(--md-urdu-font)!important;\n  font-size:14.5px!important;\n  line-height:17px!important;\n  font-weight:500!important;\n  color:#fff!important;\n  text-shadow:0 1px 0 rgba(0,0,0,.28)!important;\n}\nbody.lang-ur.invoice-workspace-open .invoice-editor-actions .btn,\nbody.lang-ur.invoice-workspace-open .invoice-back-btn{\n  font-family:var(--md-urdu-font)!important;\n  font-size:13px!important;\n  font-weight:500!important;\n}\n/* Short desktop keeps identical box heights: only glyph rendering changes. */\n@media (min-width:1101px) and (min-height:700px) and (max-height:820px){\n  body.lang-ur.invoice-workspace-open .invoice-primary-grid .fg label{font-size:12.5px!important}\n  body.lang-ur.invoice-workspace-open .invoice-primary-grid select,\n  body.lang-ur.invoice-workspace-open .invoice-primary-grid input,\n  body.lang-ur.invoice-workspace-open .invoice-primary-grid #ocUrduSearch{font-size:14px!important}\n}\n

/* =========================================================
   v2.21.35 — Urdu visual arrow direction + stable invoice total
   ========================================================= */
/* In Urdu/RTL the invoice columns are visually mirrored. The JS now mirrors
   ArrowLeft/ArrowRight as well, so the physical LEFT key always moves focus to
   the control visibly on the left and the RIGHT key to the control on the right. */

/* Keep the live Net Amount (e.g. PKR 720) on one stable baseline. In RTL mode
   the amount previously inherited wrapping/shrinking from the compact field and
   could render PKR above the number. */
body.invoice-workspace-open .invoice-commercial-strip .compact-total{
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  justify-content:space-between!important;
  gap:8px!important;
  overflow:hidden!important;
}
body.invoice-workspace-open .invoice-commercial-strip .compact-total>span{
  flex:1 1 auto!important;
  min-width:0!important;
}
body.invoice-workspace-open .invoice-commercial-strip .compact-total>b,
body.invoice-workspace-open #draftGrand{
  flex:0 0 auto!important;
  min-width:max-content!important;
  width:auto!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}
body.lang-ur.invoice-workspace-open .invoice-commercial-strip .compact-total{
  direction:rtl!important;
}
body.lang-ur.invoice-workspace-open #draftGrand{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;
  font-synthesis:none!important;
}

/* =========================================================
   v2.21.36 — continuous fast-invoice keyboard navigation
   ========================================================= */
/* Commercial fields participate in the same blue keyboard focus language as
   item rows. The user can go: last item -> Enter Item Code -> Down -> Shipping,
   then physically Left/Right across Shipping, Discount, Tax and Notes. */
body.invoice-workspace-open .invoice-commercial-strip input.invoice-commercial-kbd-selected,
body.invoice-workspace-open .invoice-commercial-strip textarea.invoice-commercial-kbd-selected{
  outline:2px solid #69a7ff!important;
  outline-offset:-2px!important;
  border-color:#69a7ff!important;
  background:linear-gradient(180deg,#12345b,#0d2848)!important;
  box-shadow:0 0 0 2px rgba(74,139,255,.20),inset 0 0 0 1px rgba(190,220,255,.18)!important;
  color:#fff!important;
}
body.lang-ur.invoice-workspace-open .invoice-commercial-strip input.invoice-commercial-kbd-selected,
body.lang-ur.invoice-workspace-open .invoice-commercial-strip textarea.invoice-commercial-kbd-selected{
  border-color:#79b4ff!important;
  box-shadow:0 0 0 2px rgba(72,143,255,.23),inset 0 0 0 1px rgba(210,232,255,.18)!important;
}

/* =========================================================
   v2.21.37 — Fast invoice Gross column alignment
   Keep GROSS heading and amount on the same visual centre-line.
   The amount uses a compact read-only value box without increasing row height.
   ========================================================= */
body.invoice-workspace-open .invoice-editor-modal .parity-head > span:nth-child(6){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding-left:4px!important;
}
body.invoice-workspace-open .invoice-editor-modal .parity-line .line-gross{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:27px!important;
  min-height:27px!important;
  padding:2px 6px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border:1px solid #294d72!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(16,39,66,.92),rgba(8,28,49,.92))!important;
  color:#f0f6ff!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
body.invoice-workspace-open .invoice-editor-modal .parity-line .line-gross:focus-within,
body.invoice-workspace-open .invoice-editor-modal .parity-line.invoice-kbd-selected .line-gross{
  border-color:#4e7fbd!important;
}
body.lang-ur.invoice-workspace-open .invoice-editor-modal .parity-head > span:nth-child(6),
body.lang-ur.invoice-workspace-open .invoice-editor-modal .parity-line .line-gross{
  direction:ltr!important;
}
body.light-mode.invoice-workspace-open .invoice-editor-modal .parity-line .line-gross{
  background:#f5f9ff!important;
  border-color:#b8cae1!important;
  color:#17324f!important;
}

/* =========================================================
   v2.21.38 — full-page invoice arrow-key navigation
   ========================================================= */
/* One consistent keyboard focus treatment for the upper invoice fields and
   final action buttons. The visual position is intentionally physical (screen
   left/right), not logical RTL/LTR, so Urdu mode follows the arrow pressed. */
body.invoice-workspace-open .invoice-page-kbd-selected{
  outline:none!important;
  border-color:#66a7ff!important;
  box-shadow:0 0 0 2px rgba(79,145,255,.30),inset 0 0 0 1px rgba(126,180,255,.14)!important;
}
body.invoice-workspace-open .invoice-page-kbd-wrap-active{
  border-color:#3c78c3!important;
  background:linear-gradient(180deg,rgba(41,92,157,.18),rgba(8,27,48,.45))!important;
  box-shadow:inset 0 0 0 1px rgba(86,151,238,.12)!important;
}
body.invoice-workspace-open .invoice-editor-actions .invoice-page-kbd-selected{
  transform:translateY(-1px);
  box-shadow:0 0 0 2px rgba(83,153,255,.34),0 5px 14px rgba(0,0,0,.22)!important;
}
body.light-mode.invoice-workspace-open .invoice-page-kbd-selected{
  border-color:#286cc3!important;
  box-shadow:0 0 0 2px rgba(40,108,195,.20)!important;
}

/* Orders v2.21.39 — themed invoice scrollbar + professional account snapshot */
.order-inbox{
  scrollbar-width:thin;
  scrollbar-color:#3d8dff rgba(7,22,39,.72);
  scrollbar-gutter:stable;
}
.order-inbox::-webkit-scrollbar{width:8px;height:8px}
.order-inbox::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(7,20,35,.96),rgba(10,29,50,.96));
  border-left:1px solid rgba(48,82,124,.42);
  border-radius:999px;
}
.order-inbox::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#66aaff 0%,#3488ff 52%,#256bd0 100%);
  border:2px solid #0a1a2d;
  border-radius:999px;
  min-height:42px;
  box-shadow:inset 0 0 0 1px rgba(185,218,255,.18),0 0 8px rgba(46,130,255,.22);
}
.order-inbox::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#83bbff 0%,#4b99ff 52%,#3479df 100%);
}
.order-inbox::-webkit-scrollbar-corner{background:#081726}
.order-inbox::-webkit-scrollbar-button{display:none;width:0;height:0}

.account-snapshot-card{
  position:relative;
  overflow:hidden;
  padding:15px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(63,137,255,.12),transparent 42%),
    linear-gradient(180deg,rgba(13,31,53,.98),rgba(8,22,39,.98));
  border-color:#29486f!important;
}
.account-snapshot-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#7458ff,#2f8fff,#26d6c8);
  opacity:.9;
}
.account-snapshot-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding-left:2px;
}
.account-snapshot-head h3{margin:0 0 2px!important;font-size:17px}
.account-snapshot-head small{color:#7f99bb;font-size:10px}
.account-snapshot-head>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(67,154,255,.35);
  background:rgba(41,122,229,.12);
  color:#82baff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
}
.account-snapshot-grid{display:grid;gap:7px}
.account-snapshot-row{
  min-width:0;
  min-height:50px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(44,73,108,.72);
  border-radius:10px;
  background:linear-gradient(90deg,rgba(7,20,35,.80),rgba(12,30,51,.78));
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
}
.account-snapshot-row:hover{
  transform:translateY(-1px);
  border-color:rgba(73,135,211,.72);
  background:linear-gradient(90deg,rgba(9,26,46,.92),rgba(14,38,65,.88));
}
.snapshot-label{min-width:0;display:flex;align-items:center;gap:9px}
.snapshot-label>i{
  flex:0 0 7px;
  width:7px;height:7px;
  border-radius:50%;
  background:#659cff;
  box-shadow:0 0 0 4px rgba(61,134,255,.08);
}
.snapshot-label>div{min-width:0}
.snapshot-label small{
  display:block;
  margin:0 0 2px;
  color:#afc2dd;
  font-size:11px;
  font-weight:800;
  line-height:1.15;
}
.snapshot-label span{
  display:block;
  color:#6883a6;
  font-size:8.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-snapshot-row>b{
  white-space:nowrap;
  text-align:right;
  color:#f5f8ff;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.15px;
}
.account-snapshot-row.current .snapshot-label>i{background:#26c990;box-shadow:0 0 0 4px rgba(38,201,144,.08)}
.account-snapshot-row.commission .snapshot-label>i{background:#a07bff;box-shadow:0 0 0 4px rgba(160,123,255,.08)}
.account-snapshot-row.closing{
  border-color:rgba(71,132,255,.72);
  background:linear-gradient(100deg,rgba(40,67,151,.26),rgba(21,61,118,.26));
  box-shadow:inset 0 0 20px rgba(49,118,255,.06);
}
.account-snapshot-row.closing .snapshot-label>i{background:#55a2ff;box-shadow:0 0 0 5px rgba(69,145,255,.11),0 0 13px rgba(68,142,255,.24)}
.account-snapshot-row.closing>b{color:#6cabff;font-size:18px;font-weight:900}
body.light-mode .account-snapshot-card{background:#f8fbff;border-color:#a8c3e7!important}
body.light-mode .account-snapshot-row{background:#fff;border-color:#d4e1f1}
body.light-mode .snapshot-label small{color:#315071}
body.light-mode .snapshot-label span{color:#7288a2}
body.light-mode .account-snapshot-row>b{color:#17314e}
body.light-mode .account-snapshot-row.closing{background:#eef5ff;border-color:#79aef0}
body.light-mode .account-snapshot-row.closing>b{color:#246fc9}
@media(max-width:1200px){.account-snapshot-row{min-height:46px;padding:7px 9px}.snapshot-label span{display:none}}

/* =========================================================
   v2.21.40 — iPhone / mobile responsive shell
   ========================================================= */
.login-security-note{
  border-top:1px solid #243b58;
  margin-top:16px;
  padding-top:13px;
  color:#8097b7;
  font-size:11px;
  line-height:1.45;
}

.md-mobile-menu-btn,.md-mobile-nav-backdrop{display:none}

@media (max-width:820px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{font-size:14px;padding-bottom:env(safe-area-inset-bottom,0)}
  .app{width:100%;min-width:0;overflow-x:hidden}

  /* Off-canvas navigation: desktop sidebar no longer steals mobile width. */
  aside{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(84vw,310px)!important;
    max-width:310px!important;
    height:100dvh!important;
    padding:calc(14px + env(safe-area-inset-top,0)) 12px calc(12px + env(safe-area-inset-bottom,0))!important;
    z-index:190!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:20px 0 50px rgba(0,0,0,.38)!important;
    overflow:hidden!important;
  }
  body.md-mobile-nav-open aside{transform:translateX(0)!important}
  aside .brand{margin:0 4px 12px!important;justify-content:center!important}
  aside .sidebar-company-logo{width:min(210px,72vw)!important;max-width:210px!important;height:auto!important}
  aside nav{overflow-y:auto!important;overscroll-behavior:contain;padding:2px 3px 8px!important}
  #nav button{min-height:42px!important;padding:9px 12px!important;font-size:14px!important;border-radius:10px!important}
  aside .user{min-height:58px!important;margin-top:7px!important;padding:8px 10px!important}

  .md-mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:180;
    border:0;
    background:rgba(1,8,16,.66);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }
  body.md-mobile-nav-open .md-mobile-nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .md-mobile-menu-btn{
    display:flex;
    position:fixed;
    left:10px;
    top:calc(10px + env(safe-area-inset-top,0));
    z-index:195;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    border:1px solid #355b88;
    border-radius:11px;
    background:linear-gradient(180deg,#123158,#0b213d);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.34);
    font-size:22px;
    line-height:1;
  }
  body.md-mobile-nav-open .md-mobile-menu-btn{background:linear-gradient(135deg,#7049ef,#2d82ff)}

  main{
    margin-left:0!important;
    width:100%!important;
    min-width:0!important;
    padding:0 10px 18px!important;
  }
  header{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:calc(9px + env(safe-area-inset-top,0)) 0 8px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    background:linear-gradient(180deg,rgba(7,17,31,.97),rgba(7,17,31,.91))!important;
    backdrop-filter:blur(12px);
  }
  header .search{
    width:calc(100% - 54px)!important;
    min-width:0!important;
    height:43px!important;
    margin-left:54px!important;
    padding:0 10px!important;
    border-radius:11px!important;
  }
  header .search input{min-width:0!important;font-size:15px!important;padding:7px!important}
  header .top{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:1px 1px 4px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  header .top::-webkit-scrollbar{display:none}
  header .top>*{flex:0 0 auto!important}
  header .top-control,header .top-user{
    min-height:38px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }
  header .branch-switch-wrap{display:none!important}

  #host{width:100%!important;min-width:0!important;overflow:visible!important}
  .hero{
    min-width:0!important;
    padding:17px 16px!important;
    border-radius:14px!important;
    margin-bottom:11px!important;
  }
  .hero h1{font-size:23px!important;line-height:1.15!important;overflow-wrap:anywhere}
  .hero p{font-size:13px!important;line-height:1.45!important}
  .hero .ha{position:static!important;margin-top:12px!important;display:flex!important;justify-content:flex-start!important}

  /* Core page grids become genuinely mobile instead of shrinking desktop columns. */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .kpi{padding:12px!important;min-width:0!important}
  .kpi .label{font-size:10.5px!important;margin-bottom:6px!important}
  .kpi .value{font-size:17px!important;letter-spacing:-.25px!important}
  .g2,.g3,.ordergrid,.pos,.report-grid,.dashboard-chart-row,.dashboard-support-grid,.dashboard-bottom-grid,.dashboard-operations-grid{
    grid-template-columns:1fr!important;
  }
  .grid{min-width:0!important}
  .card,.panel{min-width:0!important;max-width:100%!important}
  .panel{padding:12px!important}
  .ph{align-items:flex-start!important;flex-wrap:wrap!important}
  .filters{align-items:stretch!important;gap:7px!important}
  .filters label{flex:1 1 130px!important;min-width:0!important}
  .filters select,.filters input{width:100%!important;min-width:0!important}
  .form{grid-template-columns:1fr!important}
  .form .full{grid-column:1!important}

  /* Mobile-safe tables: scroll the table, never the whole page. */
  .table-scroll{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table-scroll table{min-width:640px!important}
  table{max-width:none}
  th,td{padding:8px 7px!important}

  .modal{padding:10px!important;align-items:flex-start!important;padding-top:calc(12px + env(safe-area-inset-top,0))!important}
  .modalbox{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0))!important;overflow:auto!important;padding:15px!important;border-radius:15px!important}

  /* Orders / invoice detail and editor must stack cleanly on phones. */
  .ordergrid{gap:10px!important}
  .order-inbox{max-height:42dvh!important;overflow:auto!important}
  .customer-strip{grid-template-columns:1fr 1fr!important}
  .order-toolbar{grid-template-columns:1fr!important;padding:10px!important}
  .order-toolbar>*{width:100%!important;min-width:0!important}
  .order-lines,.legacy-lines{min-width:660px!important}
  .invoice-workspace,.invoice-page-shell{width:100%!important;max-width:100%!important;min-width:0!important}
  .invoice-page-shell{padding:7px!important}
  .invoice-page-head{gap:7px!important}
  .invoice-page-title h1{font-size:20px!important}
  .invoice-workspace .order-form{grid-template-columns:1fr!important}
  .invoice-workspace .span2,.invoice-workspace .full{grid-column:1!important}
  .invoice-secondary-strip,.invoice-commercial-strip{grid-template-columns:1fr 1fr!important}
  .invoice-commercial-strip .fg:last-child{grid-column:1/-1!important}
  .invoice-workspace .fast-book-entry{grid-template-columns:minmax(0,1fr) 64px!important}
  .invoice-workspace .fast-book-entry #fastBookAddBtn{grid-column:1/-1!important}
  .invoice-editor-actions{position:static!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .invoice-editor-actions .btn:last-child{grid-column:1/-1!important}

  /* Dashboard chart/card dimensions that were designed for desktop. */
  .dashboard-chart-card,.dashboard-stable-card{min-height:0!important;height:auto!important}
  .chart,.performance-chart{height:210px!important;min-height:210px!important;overflow-x:auto!important}
  .perf-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-bottom-grid table{min-width:620px!important}

  /* Touch targets */
  button,.btn,select,input,textarea{font-size:16px}
  .btn{min-height:40px}
  select,input,textarea{max-width:100%}

  /* Keep physical screen flow usable in Urdu; only text direction is RTL. */
  body.lang-ur main{margin-right:0!important;margin-left:0!important}
  body.lang-ur header .search{margin-left:54px!important;margin-right:0!important}

  /* Login: no demo credentials and comfortable iPhone sizing. */
  .login-gate{padding:calc(12px + env(safe-area-inset-top,0)) 12px calc(12px + env(safe-area-inset-bottom,0))!important;overflow:auto!important}
  .login-card{width:100%!important;max-width:430px!important;padding:20px!important;border-radius:18px!important;margin:auto!important}
  .official-login-brand{margin-bottom:18px!important}
  .login-company-logo{width:min(245px,72vw)!important;max-width:245px!important}
  .login-card h2{font-size:25px!important}
  .login-card form input{height:48px!important;font-size:16px!important}
  .login-btn{height:48px!important;font-size:16px!important}
}

@media (max-width:430px){
  main{padding-left:8px!important;padding-right:8px!important}
  .kpis{grid-template-columns:1fr 1fr!important}
  .kpi{padding:10px!important}
  .kpi .value{font-size:15.5px!important}
  .customer-strip{grid-template-columns:1fr!important}
  .invoice-secondary-strip,.invoice-commercial-strip{grid-template-columns:1fr!important}
  .invoice-commercial-strip .fg:last-child{grid-column:1!important}
  .perf-summary-grid{grid-template-columns:1fr 1fr!important}
  .login-card{padding:18px!important}
}

/* =========================================================
   v2.21.41 — Mobile compact UX + touch horizontal navigation
   ========================================================= */
.mobile-chart-readout{display:none}

@media (max-width:820px){
  /* Slightly denser phone layout: readable, but no oversized desktop spacing. */
  body{font-size:13px!important}
  main{padding:0 6px 14px!important}
  header{gap:5px!important;padding:calc(7px + env(safe-area-inset-top,0)) 0 6px!important}
  header .search{width:calc(100% - 48px)!important;height:38px!important;margin-left:48px!important;padding:0 8px!important;border-radius:10px!important}
  header .search input{font-size:14px!important;padding:5px!important}
  header .top{gap:5px!important;padding-bottom:2px!important}
  header .top-control,header .top-user{min-height:34px!important;padding:5px 8px!important;font-size:11px!important;border-radius:9px!important}
  .md-mobile-menu-btn{left:7px!important;top:calc(7px + env(safe-area-inset-top,0))!important;width:36px!important;height:36px!important;border-radius:9px!important;font-size:19px!important}
  aside{width:min(78vw,285px)!important;max-width:285px!important}
  #nav button{min-height:38px!important;padding:7px 10px!important;font-size:13px!important}

  .hero{padding:12px 12px!important;margin-bottom:8px!important;border-radius:12px!important}
  .hero h1{font-size:20px!important;line-height:1.12!important;margin-bottom:5px!important}
  .hero p{font-size:11.5px!important;line-height:1.35!important}
  .hero .ha{margin-top:8px!important}
  .panel{padding:9px!important;border-radius:11px!important}
  .panel h3{font-size:15px!important;margin-bottom:8px!important}
  .kpis{gap:6px!important;margin-bottom:8px!important}
  .kpi{padding:9px!important;min-height:78px!important;border-radius:11px!important}
  .kpi .label{font-size:9.5px!important;margin-bottom:4px!important}
  .kpi .value,.kpi .dashboard-money-value{font-size:15px!important;line-height:1.08!important}
  .kpi .delta{font-size:9.5px!important;margin-top:4px!important}
  .grid,.ordergrid,.dashboard-chart-row,.dashboard-support-grid,.dashboard-bottom-grid,.dashboard-operations-grid{gap:8px!important}
  .filters{gap:5px!important;margin:5px 0 8px!important}
  .filters label{font-size:9.5px!important}
  .filters select,.filters input{min-height:36px!important;padding:6px 7px!important;font-size:13px!important}
  .btn{min-height:36px!important;padding:7px 10px!important;font-size:12px!important}

  /* Phone pages remain inside the viewport. Wide data regions themselves can be
     swiped left/right so the user is never trapped on the right side. */
  .table-scroll,.order-detail,.legacy-history-card,.invoice-items-field,#draftItems,.chart,.performance-chart{
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
  }
  .table-scroll,.order-detail,.legacy-history-card{overflow-x:auto!important;touch-action:pan-x pan-y!important}
  .order-detail::-webkit-scrollbar,.legacy-history-card::-webkit-scrollbar,.table-scroll::-webkit-scrollbar,#draftItems::-webkit-scrollbar{height:5px!important;width:5px!important}
  .order-detail::-webkit-scrollbar-track,.legacy-history-card::-webkit-scrollbar-track,.table-scroll::-webkit-scrollbar-track,#draftItems::-webkit-scrollbar-track{background:#081a2e!important;border-radius:999px!important}
  .order-detail::-webkit-scrollbar-thumb,.legacy-history-card::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb,#draftItems::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2c6fcf,#5aa0ff)!important;border-radius:999px!important}

  /* Orders detail: compact cards, two-column facts, swipeable line/history tables. */
  .order-inbox{max-height:34dvh!important;padding:9px!important}
  .oi{padding:9px!important;margin-bottom:6px!important;border-radius:10px!important}
  .oi p{margin:5px 0 3px!important;font-size:13px!important}
  .oi small{font-size:10px!important}
  .oi strong{font-size:14px!important}
  .order-detail{padding:9px!important}
  .customer-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:8px 0!important}
  .customer-strip>div,.address-box{padding:7px!important;border-radius:8px!important;min-width:0!important}
  .customer-strip small,.address-box small{font-size:9px!important;margin-bottom:3px!important}
  .customer-strip b,.address-box b{font-size:11px!important;overflow-wrap:anywhere!important}
  .order-detail .order-lines{min-width:560px!important;font-size:10px!important}
  .order-detail .order-lines th,.order-detail .order-lines td{padding:6px 5px!important}
  .legacy-history-card table{min-width:520px!important;font-size:10px!important}
  .legacy-invoice-totals{gap:5px!important}
  .legacy-invoice-totals>div{padding:7px!important;min-width:0!important}
  .order-actions{gap:5px!important}

  /* Invoice entry: keep useful two-column density on an iPhone but never exceed
     the viewport. Item rows can be swiped horizontally when all commercial
     columns are needed. */
  .invoice-page-head{padding:8px 9px!important;margin-bottom:5px!important}
  .invoice-page-title h1{font-size:18px!important;line-height:1.15!important}
  .invoice-page-kicker{font-size:9px!important}
  .invoice-page-shell{padding:6px!important;border-radius:10px!important}
  .invoice-entry-topbar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:5px!important}
  .invoice-entry-topbar>div{min-height:34px!important;padding:2px 4px!important}
  .invoice-entry-topbar small{font-size:8px!important}
  .invoice-entry-topbar b{font-size:11px!important}
  .invoice-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .invoice-workspace .invoice-key-field{padding:5px!important;border-radius:8px!important;min-width:0!important}
  .invoice-primary-grid .fg label{font-size:9px!important;line-height:1.15!important}
  .invoice-primary-grid input,.invoice-primary-grid select,.invoice-primary-grid #ocUrduSearch,.invoice-primary-grid #oc{min-width:0!important;width:100%!important;min-height:38px!important;height:38px!important;padding:5px 7px!important;font-size:13px!important}
  .invoice-secondary-strip,.invoice-commercial-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:6px!important}
  .invoice-secondary-strip .fg,.invoice-commercial-strip .fg{min-width:0!important}
  .invoice-secondary-strip input,.invoice-secondary-strip select,.invoice-secondary-strip .readout,.invoice-commercial-strip input,.invoice-commercial-strip textarea{width:100%!important;min-width:0!important}
  .invoice-items-field{padding:6px!important;overflow:hidden!important}
  body.invoice-workspace-open #draftItems{max-width:100%!important;overflow-x:auto!important;overflow-y:auto!important;touch-action:pan-x pan-y!important}
  body.invoice-workspace-open #draftItems .draft-line-wrap{min-width:545px!important}
  .fast-book-entry{gap:5px!important;padding:5px!important}
  #fastBookInput{font-size:14px!important}
  .invoice-editor-actions{gap:5px!important}

  /* Mobile chart values: tapping a bar updates this dedicated readout instead
     of leaving Safari's sticky hover bubble over the chart/number. */
  .mobile-chart-readout{
    display:flex!important;
    min-height:34px;
    margin:4px 0 6px;
    padding:6px 9px;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:1px solid #284c78;
    border-radius:9px;
    background:linear-gradient(90deg,rgba(21,47,80,.88),rgba(13,35,62,.88));
    color:#8da8ca;
    font-size:10px;
  }
  .mobile-chart-readout b{color:#6fc9ff;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .mobile-chart-readout.has-value{border-color:#3f7fcf;background:linear-gradient(90deg,rgba(34,70,125,.88),rgba(15,48,88,.9))}
  .chart,.performance-chart{height:178px!important;min-height:178px!important;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x!important}
  .bw{min-width:9px!important;outline:0}
  .bw.mobile-chart-active .bar{filter:brightness(1.18)!important;box-shadow:0 0 0 1px rgba(107,177,255,.8),0 0 10px rgba(65,139,255,.25)!important}
  .perf-bar.mobile-chart-active{filter:brightness(1.18)!important;box-shadow:0 0 0 1px rgba(107,177,255,.8),0 0 10px rgba(65,139,255,.25)!important}

  /* iOS tap leaves :hover latched; disable floating hover bubbles on touch. */
  .bw small,.bw:hover small,.business-performance-panel .perf-bar-tip,.business-performance-panel .perf-bar:hover .perf-bar-tip{display:none!important}
  .bw:hover .bar,.business-performance-panel .perf-bar:hover{transform:none!important}
  .chart-caption{font-size:9px!important;gap:8px!important}
}

@media (max-width:430px){
  main{padding-left:5px!important;padding-right:5px!important}
  .hero{padding:11px!important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .customer-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .invoice-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .invoice-secondary-strip,.invoice-commercial-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .invoice-commercial-strip .fg:last-child{grid-column:1/-1!important}
  .login-card{max-width:390px!important;padding:16px!important}
}

@media (max-width:340px){
  .customer-strip,.invoice-primary-grid,.invoice-secondary-strip,.invoice-commercial-strip{grid-template-columns:1fr!important}
}


/* =========================================================
   v2.21.42 — WhatsApp read/unread UX + themed inbox scrollbar
   ========================================================= */
.wa-list{
  scrollbar-width:thin;
  scrollbar-color:#2f80e8 #081729;
  scrollbar-gutter:stable;
}
.wa-list::-webkit-scrollbar{width:9px}
.wa-list::-webkit-scrollbar-track{
  background:#081729;
  border:1px solid #173556;
  border-radius:999px;
}
.wa-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#469cff 0%,#2f78df 55%,#225dac 100%);
  border:2px solid #081729;
  border-radius:999px;
  min-height:38px;
}
.wa-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#65b0ff,#3687ee 55%,#286abe)}
.wa-item.unread{
  background:linear-gradient(100deg,rgba(31,113,214,.12),rgba(12,31,53,.55));
  border-left-color:rgba(63,145,255,.7);
}
.wa-item.unread .wa-item-main>div>b{color:#f4f9ff;font-weight:900}
.wa-item-flags{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.wa-unread-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3d92ff;box-shadow:0 0 0 3px rgba(61,146,255,.12),0 0 10px rgba(61,146,255,.35)}
.wa-unread-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;border:1px solid #203f64;border-radius:9px;background:rgba(10,29,50,.72);color:#8fa8c8;font-size:9px}
.wa-unread-summary b{color:#61b4ff;font-size:11px}.wa-unread-summary small{color:#6f87a7;text-align:right}
@media(max-width:700px){.wa-list::-webkit-scrollbar{width:7px}.wa-unread-summary{align-items:flex-start;flex-direction:column}.wa-unread-summary small{text-align:left}}


/* =========================================================
   v2.21.43 — Mobile Order Detail containment / swipe fix
   Keep the Order Detail card inside the iPhone viewport.
   Only the line-items table is horizontally scrollable.
   ========================================================= */
.order-lines-scroll{
  width:100%;
  max-width:100%;
  min-width:0;
}

@media (max-width:820px){
  html,body,.app,main,#host{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }
  .legacy-invoice-grid,
  .legacy-invoice-grid>div,
  .order-detail,
  .order-detail .ph,
  .order-detail .customer-strip,
  .order-detail .address-box,
  .legacy-invoice-totals,
  .order-actions,
  .legacy-history-card,
  .account-snapshot-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* The whole detail card must not become a horizontal scroller. */
  .order-detail{
    overflow-x:hidden!important;
    touch-action:pan-y!important;
  }
  .order-detail .ph h3{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    font-size:17px!important;
  }
  .order-detail .ph .muted{font-size:10px!important}

  /* Two compact fact cards per row, matching the New Sale Order mobile density. */
  .order-detail .customer-strip{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .order-detail .customer-strip>div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .order-detail .customer-strip b{
    display:block!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .order-detail .address-box{
    overflow:hidden!important;
  }
  .order-detail .address-box b,
  .order-detail .address-box p{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Horizontal movement is restricted to the books table only. */
  .order-lines-scroll{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;
    border-radius:8px!important;
    margin-top:2px!important;
    padding-bottom:3px!important;
  }
  .order-lines-scroll .order-lines{
    min-width:520px!important;
    width:520px!important;
    max-width:none!important;
    table-layout:fixed!important;
    font-size:10px!important;
  }
  .order-lines-scroll .order-lines th,
  .order-lines-scroll .order-lines td{
    padding:6px 5px!important;
  }
  .order-lines-scroll .order-lines th:first-child,
  .order-lines-scroll .order-lines td:first-child{width:150px!important}
  .order-lines-scroll .order-lines th:nth-child(2),
  .order-lines-scroll .order-lines td:nth-child(2){width:66px!important}
  .order-lines-scroll .order-lines th:nth-child(3),
  .order-lines-scroll .order-lines td:nth-child(3){width:42px!important}
  .order-lines-scroll .order-lines th:nth-child(4),
  .order-lines-scroll .order-lines td:nth-child(4){width:66px!important}
  .order-lines-scroll .order-lines th:nth-child(5),
  .order-lines-scroll .order-lines td:nth-child(5){width:58px!important}
  .order-lines-scroll .order-lines th:nth-child(6),
  .order-lines-scroll .order-lines td:nth-child(6){width:68px!important}
  .order-lines-scroll .order-lines th:nth-child(7),
  .order-lines-scroll .order-lines td:nth-child(7){width:70px!important}

  .order-lines-scroll::-webkit-scrollbar{height:5px!important}
  .order-lines-scroll::-webkit-scrollbar-track{
    background:#081a2e!important;
    border-radius:999px!important;
  }
  .order-lines-scroll::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#2c6fcf,#5aa0ff)!important;
    border-radius:999px!important;
    border:1px solid rgba(107,169,255,.22)!important;
  }

  /* Totals and buttons also stay inside the viewport. */
  .legacy-invoice-totals{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .legacy-invoice-totals>div{
    min-width:0!important;
    width:100%!important;
    padding:7px!important;
  }
  .legacy-invoice-totals span,
  .legacy-invoice-totals b{
    overflow-wrap:anywhere!important;
  }
  .order-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .order-actions .btn{width:100%!important;min-width:0!important}

  /* Avoid the right-side history/status rail creating page width on phones. */
  .legacy-history-card,
  .account-snapshot-card{overflow:hidden!important}
  .legacy-history-card .table-scroll{overflow-x:auto!important}
}

@media (max-width:430px){
  .order-detail .customer-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .order-detail .customer-strip>div{padding:7px 8px!important}
  .order-detail .customer-strip small{font-size:8.5px!important}
  .order-detail .customer-strip b{font-size:10.5px!important;line-height:1.25!important}
  .order-lines-scroll .order-lines{min-width:500px!important;width:500px!important}
  .legacy-invoice-totals{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* =========================================================
   v2.21.44 — Mobile WhatsApp Inbox / Message containment fix
   Keep the entire WhatsApp workflow inside the phone viewport.
   Only genuinely wide draft-item rows scroll horizontally.
   ========================================================= */
@media (max-width:820px){
  .wa-layout,
  .wa-layout>div,
  .wa-layout .card,
  .wa-layout .panel,
  .wa-inbox,
  .wa-draft{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .wa-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .wa-layout>div:last-child{grid-column:auto!important}

  /* The message/detail card itself must never become a page-level scroller. */
  .wa-layout>div:nth-child(2),
  .wa-layout>div:nth-child(2)>.card{
    overflow:hidden!important;
    touch-action:pan-y!important;
  }
  .wa-layout .ph,
  .wa-layout .ph>div{
    min-width:0!important;
    max-width:100%!important;
  }
  .wa-layout .ph h3,
  .wa-layout .ph .muted{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* Four desktop contact facts become two compact rows of two cards. */
  .wa-contact{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin-bottom:9px!important;
  }
  .wa-contact>div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:8px!important;
  }
  .wa-contact small{font-size:8.5px!important}
  .wa-contact b{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    font-size:11px!important;
    line-height:1.25!important;
  }

  .wa-bubble,
  .wa-audio,
  .wa-transcript-label,
  .wa-transcript-label textarea,
  .wa-ai-note,
  .wa-transcription-status{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .wa-bubble{
    margin:7px 0 10px!important;
    padding:10px 11px!important;
    overflow-wrap:anywhere!important;
  }
  .wa-transcript-label{font-size:10px!important}
  .wa-transcript-label textarea{
    min-height:142px!important;
    resize:vertical!important;
  }
  .wa-transcription-status{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:3px!important;
  }

  /* Message actions remain easy to tap without running off the right edge. */
  .wa-layout>div:nth-child(2) .actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
  }
  .wa-layout>div:nth-child(2) .actions .btn{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .wa-layout>div:nth-child(2) .actions .btn.primary,
  .wa-layout>div:nth-child(2) .actions .voice-transcribe-btn{
    grid-column:1/-1!important;
  }

  /* Inbox stays vertical; its own list scrolls, not the whole WhatsApp page. */
  .wa-inbox{overflow:hidden!important}
  .wa-list{
    max-height:42dvh!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:3px!important;
  }
  .wa-item{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .wa-item-main>div{min-width:0!important}
  .wa-item-main small,
  .wa-item-main p,
  .wa-item-main em{overflow-wrap:anywhere!important}
  .wa-unread-summary{width:100%!important;box-sizing:border-box!important}

  /* Verified draft also fits the viewport. */
  .wa-draft{position:static!important;overflow:hidden!important}
  .wa-order-fields{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .wa-order-fields .fg{
    width:100%!important;
    min-width:0!important;
  }
  .wa-order-fields .full{grid-column:1/-1!important}
  .wa-order-fields input,
  .wa-order-fields select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .wa-add-line{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) 64px!important;
    gap:5px!important;
    padding:7px!important;
    box-sizing:border-box!important;
  }
  .wa-add-line>*{min-width:0!important;max-width:100%!important}
  .wa-add-line button{grid-column:1/-1!important;width:100%!important}

  /* Only draft book rows may swipe left/right, just like Order Detail items. */
  .wa-draft .wa-lines{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;
    padding-bottom:3px!important;
  }
  .wa-draft .wa-line-head,
  .wa-draft .wa-line{
    min-width:500px!important;
    width:500px!important;
    max-width:none!important;
    grid-template-columns:180px 55px 55px 70px 80px 28px!important;
    gap:4px!important;
    padding:6px 5px!important;
  }
  .wa-draft .wa-lines::-webkit-scrollbar{height:5px!important}
  .wa-draft .wa-lines::-webkit-scrollbar-track{
    background:#081a2e!important;
    border-radius:999px!important;
  }
  .wa-draft .wa-lines::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#2c6fcf,#5aa0ff)!important;
    border-radius:999px!important;
    border:1px solid rgba(107,169,255,.22)!important;
  }
  .wa-draft-total{
    width:100%!important;
    max-width:100%!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .wa-draft .actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .wa-draft .actions .btn{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .wa-convert{margin-left:0!important}
}

@media (max-width:430px){
  .wa-contact{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wa-order-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wa-layout .panel{padding:9px!important}
  .wa-layout>div:nth-child(2) .actions{grid-template-columns:1fr 1fr!important}
  .wa-draft .wa-line-head,
  .wa-draft .wa-line{min-width:480px!important;width:480px!important}
}

@media (max-width:340px){
  .wa-contact,
  .wa-order-fields{grid-template-columns:1fr!important}
}

/* =========================================================
   v2.21.45 — WhatsApp conversation threads
   One phone number = one chat, with complete history.
   ========================================================= */
.wa-thread-list .wa-thread{position:relative}
.wa-unread-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,#42a5ff,#2877ff);color:#fff;font-size:10px;font-style:normal;font-weight:900;box-shadow:0 0 0 3px rgba(61,146,255,.10),0 4px 12px rgba(20,92,200,.24)}
.wa-chat-count{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid #2b527c;border-radius:9px;background:rgba(38,112,215,.09);color:#8fc4ff;font-size:10px;font-weight:800}
.wa-chat-panel{min-width:0;overflow:hidden}
.wa-chat-history{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:5px 5px 9px 1px;margin-bottom:12px;border-bottom:1px solid #25425f;scrollbar-width:thin;scrollbar-color:#378cf2 #0a1a2e}
.wa-chat-history::-webkit-scrollbar{width:8px}.wa-chat-history::-webkit-scrollbar-track{background:#09192c;border-radius:999px}.wa-chat-history::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#66b5ff,#3188ef 55%,#2668b8);border-radius:999px;border:2px solid #09192c}
.wa-history-bubble{appearance:none;width:min(92%,620px);text-align:left;border:1px solid #24506f;border-radius:14px 14px 14px 5px;background:linear-gradient(135deg,#0d3041,#0d2837);color:#d9eff3;padding:10px 12px;cursor:pointer;transition:.16s ease;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.wa-history-bubble:hover{transform:translateY(-1px);border-color:#3c7db0}
.wa-history-bubble.selected{border-color:#4f86ff;box-shadow:0 0 0 2px rgba(79,134,255,.17),0 6px 18px rgba(14,72,160,.20);background:linear-gradient(135deg,#10375f,#102c53)}
.wa-history-bubble.unread{border-left:4px solid #3d92ff}
.wa-history-top,.wa-history-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}.wa-history-top b{font-size:11px}.wa-history-top small{font-size:9px;color:#7894b5}.wa-history-text{display:block;margin:7px 0;color:#d8e6f4;font-size:12px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.wa-history-foot i{font-style:normal}.wa-history-foot em{font-size:9px;color:#70d9ff;font-style:normal}
.wa-working-message{border:1px solid #294b70;border-radius:12px;background:rgba(7,27,50,.68);padding:11px}.wa-working-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.wa-working-head b{display:block;color:#eef7ff;font-size:13px}.wa-working-head small{display:block;margin-top:3px;color:#778fac;font-size:9px}

@media(max-width:700px){
  .wa-chat-history{max-height:330px;padding-right:2px}
  .wa-history-bubble{width:100%;max-width:100%;padding:9px 10px}
  .wa-history-top{align-items:flex-start}.wa-history-top small{max-width:48%;text-align:right}
  .wa-working-message{padding:9px}
  .wa-chat-count{font-size:9px;min-height:25px}
}


/* =========================================================
   v2.21.220 — Urdu NAMES mode (body.lang-ur-data)
   Screen labels, buttons and layout stay English / left-to-right.
   Only book/item names and customer names (shown or typed) use Urdu.
   ========================================================= */
.lang-ur-data .book-name-localized,
.lang-ur-data .fast-book-names b,
.lang-ur-data .report-urdu-name,
.lang-ur-data .report-urdu-city{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Nirmala UI","Segoe UI",Tahoma,Arial,sans-serif}
.lang-ur-data.invoice-workspace-open .draft-book-cell .book-name-ur{
  font-family:"Urdu Typesetting","Noto Nastaliq Urdu","Noto Naskh Arabic","Nirmala UI","Segoe UI",Tahoma,Arial,sans-serif!important;
  font-size:13px!important;line-height:17px!important;font-weight:700!important;text-rendering:optimizeLegibility;
}
/* Customer typed in Urdu: right-to-left typing inside the field, caret on the left */
.lang-ur-data .customer-filtered-field #ocUrduSearch{direction:rtl;text-align:right;font-family:"Noto Naskh Arabic","Nirmala UI","Segoe UI",sans-serif;padding:9px 12px 9px 38px!important}
.lang-ur-data .customer-filtered-field .order-customer-urdu-control:after{right:auto!important;left:13px!important}
.lang-ur-data .chit-customer-searchbox>input[type=search]{direction:rtl;text-align:right;font-family:"Noto Naskh Arabic","Segoe UI",sans-serif}
.lang-ur-data .chit-customer-hit em,.lang-ur-data .order-customer-field-result b{font-family:"Noto Naskh Arabic","Nirmala UI","Segoe UI",sans-serif}


/* =========================================================
   v2.21.236 — Sale invoice: highlight the three working fields
   1) Item Code entry  2) Book name cell  3) Quantity
   ========================================================= */
/* 1. Item Code entry — warm gold "start here" field */
html body .invoice-workspace #fastBookInput,html body .invoice-editor-modal #fastBookInput{
  background:linear-gradient(180deg,#fffdf4 0%,#fff1c2 100%)!important;color:#10233d!important;
  border:2px solid #f2b705!important;border-radius:10px!important;font-weight:800!important;
  box-shadow:0 0 0 3px rgba(242,183,5,.22),0 4px 14px rgba(242,183,5,.18)!important;caret-color:#c2410c}
html body .invoice-workspace #fastBookInput::placeholder,html body .invoice-editor-modal #fastBookInput::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1}
html body .invoice-workspace #fastBookInput:focus,html body .invoice-editor-modal #fastBookInput:focus{
  border-color:#ff9f0a!important;background:#ffffff!important;
  box-shadow:0 0 0 4px rgba(255,159,10,.30),0 0 22px rgba(255,190,40,.35)!important;outline:none!important}

/* 2. Book name cell — distinct sky-blue panel with an accent bar */
html body .invoice-workspace .draft-book-cell,html body .invoice-editor-modal .draft-book-cell{
  background:linear-gradient(90deg,rgba(56,189,248,.20) 0%,rgba(37,99,235,.14) 100%)!important;
  border:1px solid rgba(96,165,250,.70)!important;border-left:4px solid #38bdf8!important;border-radius:10px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important}
html body .invoice-workspace .draft-book-cell:hover,html body .invoice-editor-modal .draft-book-cell:hover,
html body .invoice-workspace .draft-book-cell:focus,html body .invoice-editor-modal .draft-book-cell:focus{
  background:linear-gradient(90deg,rgba(56,189,248,.32) 0%,rgba(37,99,235,.22) 100%)!important;border-color:#7dd3fc!important;border-left-color:#7dd3fc!important;outline:none!important}
html body .invoice-workspace .draft-book-cell .book-name-localized,html body .invoice-editor-modal .draft-book-cell .book-name-localized{color:#ffffff!important}

/* 3. Quantity — bright mint field so the count is easy to spot and edit */
html body .invoice-workspace .draft-qty,html body .invoice-editor-modal .draft-qty{
  background:linear-gradient(180deg,#f0fff8 0%,#c9f7e1 100%)!important;color:#064e3b!important;
  border:2px solid #10b981!important;border-radius:9px!important;font-weight:900!important;font-size:15px!important;text-align:center!important;
  box-shadow:0 0 0 2px rgba(16,185,129,.18)!important}
html body .invoice-workspace .draft-qty:focus,html body .invoice-editor-modal .draft-qty:focus{
  background:#ffffff!important;border-color:#059669!important;box-shadow:0 0 0 4px rgba(16,185,129,.32)!important;outline:none!important}

/* Light theme: same colours, slightly stronger outlines */
body.light-mode .invoice-workspace .draft-book-cell,body.light-mode .invoice-editor-modal .draft-book-cell{background:linear-gradient(90deg,#e0f2fe 0%,#dbeafe 100%)!important;border-color:#93c5fd!important;border-left-color:#0ea5e9!important}
body.light-mode .invoice-workspace .draft-book-cell .book-name-localized,body.light-mode .invoice-editor-modal .draft-book-cell .book-name-localized{color:#0b2545!important}
html body .invoice-workspace input.draft-qty.invoice-grid-cell,html body .invoice-editor-modal input.draft-qty.invoice-grid-cell{font-size:16px!important;font-weight:900!important;color:#064e3b!important}


/* =========================================================
   v2.21.238 — Orders list "liquid glass" cards
   Whole card tinted in the status colour like coloured glass: translucent gradient,
   frosted blur, glossy top sheen, light rim and a soft coloured glow. Text stays crisp white.
   ========================================================= */
.order-inbox .oi{--g1:rgba(148,163,184,.42);--g2:rgba(71,85,105,.30);--rim:rgba(226,232,240,.55);--glow:rgba(148,163,184,.30);--pill:#e2e8f0;--pillTxt:#0f172a;
  position:relative!important;overflow:hidden!important;isolation:isolate;
  background:linear-gradient(150deg,var(--g1) 0%,var(--g2) 100%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--rim)!important;border-left:1px solid var(--rim)!important;border-radius:18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 24px rgba(0,0,0,.10),0 10px 26px -10px var(--glow),0 2px 6px rgba(0,0,0,.25)!important;
  filter:none!important;transition:transform .15s ease,box-shadow .15s ease!important}
/* glossy sheen on the upper half */
.order-inbox .oi::before{content:'';position:absolute;inset:0 0 48% 0;border-radius:18px 18px 40% 40%/18px 18px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 60%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:0}
/* soft light bloom bottom-right */
.order-inbox .oi::after{content:'';position:absolute;right:-30px;bottom:-40px;width:140px;height:110px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none;z-index:0}
.order-inbox .oi>*{position:relative;z-index:1}
/* crystal-clear text */
.order-inbox .oi b,.order-inbox .oi p,.order-inbox .oi strong{color:#ffffff!important;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.18)!important}
.order-inbox .oi b{font-weight:900!important;letter-spacing:.2px}
.order-inbox .oi p{font-weight:700!important}
.order-inbox .oi small{color:rgba(255,255,255,.88)!important;text-shadow:0 1px 2px rgba(0,0,0,.40)!important;font-weight:600!important}
.order-inbox .oi strong{font-weight:900!important;font-size:1.06em}
.order-inbox .oi .status{background:var(--pill)!important;color:var(--pillTxt)!important;border:1px solid rgba(255,255,255,.75)!important;font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(0,0,0,.25)!important;text-shadow:none!important}
/* status colours */
.order-inbox .oi.oi-st-new{--g1:rgba(34,211,238,.86);--g2:rgba(14,116,224,.66);--rim:rgba(186,240,255,.85);--glow:rgba(34,211,238,.60);--pill:#e0fbff;--pillTxt:#075985}
.order-inbox .oi.oi-st-confirmed{--g1:rgba(99,132,255,.86);--g2:rgba(67,56,202,.66);--rim:rgba(191,219,254,.78);--glow:rgba(59,130,246,.55);--pill:#e0edff;--pillTxt:#1e3a8a}
.order-inbox .oi.oi-st-packed{--g1:rgba(196,140,255,.86);--g2:rgba(124,64,240,.64);--rim:rgba(233,213,255,.78);--glow:rgba(168,85,247,.55);--pill:#f3e8ff;--pillTxt:#5b21b6}
.order-inbox .oi.oi-st-dispatched,.order-inbox .oi.oi-st-delivered,.order-inbox .oi.oi-st-completed{--g1:rgba(60,220,160,.84);--g2:rgba(14,150,140,.62);--rim:rgba(187,247,208,.78);--glow:rgba(16,185,129,.50);--pill:#dcfce7;--pillTxt:#065f46}
.order-inbox .oi.oi-st-returned,.order-inbox .oi.oi-st-cancelled{--g1:rgba(250,120,120,.84);--g2:rgba(200,36,100,.60);--rim:rgba(254,202,202,.78);--glow:rgba(239,68,68,.50);--pill:#ffe4e6;--pillTxt:#9f1239}
/* hover / selected */
.order-inbox .oi:hover{transform:translateY(-2px)}
.order-inbox .oi.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 0 2px rgba(255,255,255,.85),0 14px 32px -10px var(--glow),0 3px 8px rgba(0,0,0,.30)!important}
.order-inbox .oi.active,.order-inbox .oi.oi-st-new.active{background:linear-gradient(150deg,var(--g1) 0%,var(--g2) 100%)!important}
/* light theme: same glass, dark text for contrast */
body.light-mode .order-inbox .oi b,body.light-mode .order-inbox .oi p,body.light-mode .order-inbox .oi strong{color:#0b1b33!important;text-shadow:0 1px 0 rgba(255,255,255,.6)!important}
body.light-mode .order-inbox .oi small{color:#1e2f48!important;text-shadow:none!important}


/* =========================================================
   v2.21.240 — Customer Directory & Inventory: prominent glass rows,
   larger bold Urdu names (matches the Orders glass cards, lighter touch)
   ========================================================= */
.customer-directory-table,.inventory-table{border-collapse:separate!important;border-spacing:0 7px!important}
.customer-directory-table tbody tr>td,.inventory-table tbody tr>td{
  background:linear-gradient(180deg,rgba(96,165,250,.13) 0%,rgba(59,130,246,.06) 100%)!important;
  border-top:1px solid rgba(147,197,253,.28)!important;border-bottom:1px solid rgba(30,64,175,.35)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s ease}
.customer-directory-table tbody tr>td:first-child,.inventory-table tbody tr>td:first-child{
  border-left:3px solid #38bdf8!important;border-radius:12px 0 0 12px!important;box-shadow:inset 1px 0 0 rgba(255,255,255,.10)}
.customer-directory-table tbody tr>td:last-child,.inventory-table tbody tr>td:last-child{
  border-right:1px solid rgba(147,197,253,.28)!important;border-radius:0 12px 12px 0!important}
.customer-directory-table tbody tr:nth-child(even)>td,.inventory-table tbody tr:nth-child(even)>td{
  background:linear-gradient(180deg,rgba(129,140,248,.14) 0%,rgba(99,102,241,.06) 100%)!important}
.customer-directory-table tbody tr:nth-child(even)>td:first-child,.inventory-table tbody tr:nth-child(even)>td:first-child{border-left-color:#818cf8!important}
.customer-directory-table tbody tr:hover>td,.inventory-table tbody tr:hover>td{
  background:linear-gradient(180deg,rgba(56,189,248,.26) 0%,rgba(37,99,235,.14) 100%)!important;border-top-color:rgba(186,230,253,.55)!important}
/* names: larger, bold, crisp — Urdu uses Noto Naskh so nothing is clipped */
.customer-directory-table .cust-name,.inventory-table .inv-book-name{
  display:block;color:#ffffff!important;font-weight:800!important;letter-spacing:.1px;
  font-family:'Segoe UI',Tahoma,Arial,'Noto Naskh Arabic',sans-serif!important;line-height:1.6!important;
  text-shadow:0 1px 2px rgba(0,0,0,.40);overflow:visible!important;white-space:normal!important}
.customer-directory-table .cust-name{font-size:16.5px!important}
.inventory-table .inv-book-name{font-size:18px!important}
.lang-ur-data .customer-directory-table .cust-name,.lang-ur-data .inventory-table .inv-book-name{font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif!important;font-weight:700!important}
.lang-ur-data .inventory-table .inv-book-name{font-size:19px!important}
.lang-ur-data .customer-directory-table .cust-name{font-size:17.5px!important}
.customer-directory-table .cust-name-cell small,.inventory-table .inv-book-cell small{color:#a9c4e6!important;font-size:12.5px!important}
/* code / SKU chip */
.customer-directory-table tbody td:first-child b,.inventory-table tbody td:first-child b{color:#7dd3fc!important;font-size:15px!important;font-weight:900!important}
/* light theme */
body.light-mode .customer-directory-table tbody tr>td,body.light-mode .inventory-table tbody tr>td{background:linear-gradient(180deg,#eef6ff 0%,#e3efff 100%)!important;border-top-color:#c7ddf7!important;border-bottom-color:#b8d0ee!important}
body.light-mode .customer-directory-table .cust-name,body.light-mode .inventory-table .inv-book-name{color:#0b2545!important;text-shadow:none}
body.light-mode .customer-directory-table tbody td:first-child b,body.light-mode .inventory-table tbody td:first-child b{color:#0369a1!important}


/* =========================================================
   v2.21.241 — Bigger colourful Edit buttons (Inventory / Customers)
   and bold coloured field headings in Edit Book / Item Master
   ========================================================= */
.inventory-table .actions .btn.secondary,.customer-directory-table .actions .btn.secondary{
  min-height:34px!important;padding:7px 16px!important;font-size:14px!important;font-weight:900!important;letter-spacing:.2px;
  color:#ffffff!important;border:1px solid rgba(186,240,255,.70)!important;border-radius:10px!important;
  background:linear-gradient(135deg,#06b6d4 0%,#0ea5e9 45%,#2563eb 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -2px rgba(14,165,233,.55)!important;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.inventory-table .actions .btn.secondary:hover,.customer-directory-table .actions .btn.secondary:hover{
  filter:brightness(1.12);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 16px -3px rgba(14,165,233,.70)!important}
.inventory-table .actions .btn.primary,.customer-directory-table .actions .btn.primary{min-height:34px!important;padding:7px 16px!important;font-size:14px!important;font-weight:900!important;border-radius:10px!important}
.inventory-table .actions.compact,.customer-directory-table .actions.compact{gap:8px!important}

/* Edit Book / Item Master: field headings */
.item-master-modal label,.item-master-modal .fg>label,.item-master-modal .item-master-card label{
  font-size:14px!important;font-weight:900!important;letter-spacing:.2px;color:#7dd3fc!important;margin-bottom:6px!important;display:inline-block;
  text-shadow:0 1px 1px rgba(0,0,0,.30)}
.item-master-modal label input[type=checkbox]+*,.item-master-modal label:has(input[type=checkbox]){color:#e2f4ff!important}
.item-master-modal .item-master-section-title h3,.item-master-modal h3{font-size:21px!important;font-weight:900!important;color:#ffffff!important}
.item-master-modal .item-master-section-title h3::after,.item-master-modal .item-master-card>h3::after{content:'';display:block;width:56px;height:3px;margin-top:5px;border-radius:3px;background:linear-gradient(90deg,#22d3ee,#6366f1)}
.item-master-modal input,.item-master-modal select{font-size:15px!important;font-weight:700!important}
.item-master-modal input:focus,.item-master-modal select:focus{border-color:#38bdf8!important;box-shadow:0 0 0 3px rgba(56,189,248,.25)!important}
.item-master-modal table th{font-size:14px!important;font-weight:900!important;color:#7dd3fc!important}
body.light-mode .item-master-modal label{color:#0369a1!important;text-shadow:none}
body.light-mode .item-master-modal h3{color:#0b2545!important}


/* =========================================================
   v2.21.242 — Customers: same Edit button + Edit Customer headings as Item Master
   ========================================================= */
/* Star Discounts keeps a calmer outline style so only Edit is the bright cyan button */
.customer-directory-table .actions .btn.secondary[onclick^="customerDiscountModal"]{
  background:rgba(250,204,21,.10)!important;color:#fde68a!important;border:1px solid rgba(250,204,21,.55)!important;
  box-shadow:none!important;text-shadow:none!important;font-size:13px!important;font-weight:800!important;line-height:1.15!important}
.customer-directory-table .actions .btn.secondary[onclick^="customerDiscountModal"]:hover{background:rgba(250,204,21,.20)!important;filter:none;transform:none}
/* Edit Customer / Add Customer form headings */
.legacy-customer-form label,.legacy-customer-form .fg>label,.legacy-customer-form .contact-master .ph>label{
  font-size:14px!important;font-weight:900!important;letter-spacing:.2px;color:#7dd3fc!important;margin-bottom:6px!important;display:inline-block;text-shadow:0 1px 1px rgba(0,0,0,.30);
  font-family:'Segoe UI',Tahoma,Arial,'Noto Naskh Arabic',sans-serif!important}
.legacy-customer-form label:has(input[type=checkbox]){color:#e2f4ff!important}
.legacy-customer-form h3,.legacy-customer-form .ph h3{font-size:19px!important;font-weight:900!important;color:#ffffff!important}
.legacy-customer-form h3::after{content:'';display:block;width:56px;height:3px;margin-top:5px;border-radius:3px;background:linear-gradient(90deg,#22d3ee,#6366f1)}
.legacy-customer-form input,.legacy-customer-form select,.legacy-customer-form textarea{font-size:15px!important;font-weight:700!important}
.legacy-customer-form input:focus,.legacy-customer-form select:focus,.legacy-customer-form textarea:focus{border-color:#38bdf8!important;box-shadow:0 0 0 3px rgba(56,189,248,.25)!important}
.legacy-customer-form table th{font-size:14px!important;font-weight:900!important;color:#7dd3fc!important}
.modal:has(.legacy-customer-form) #mt{font-size:26px!important;font-weight:900!important;color:#ffffff!important}
body.light-mode .legacy-customer-form label{color:#0369a1!important;text-shadow:none}
body.light-mode .legacy-customer-form h3{color:#0b2545!important}


/* =========================================================
   v2.21.243 — Prominent "type code here" search boxes
   Customers search, Inventory search, Reports customer / book / vendor selector and report search.
   Same gold-cream style as the invoice Item Code box; large bold navy text.
   ========================================================= */
html body #custSearch,html body #invSearch,html body .report-entity-select,html body .report-search input{
  background:linear-gradient(180deg,#fffdf4 0%,#fff1c2 100%)!important;color:#0b2545!important;
  border:2px solid #f2b705!important;border-radius:11px!important;
  font-size:16px!important;font-weight:900!important;letter-spacing:.2px;min-height:44px!important;height:44px!important;padding:8px 14px!important;
  box-shadow:0 0 0 3px rgba(242,183,5,.20),0 4px 14px rgba(242,183,5,.16)!important;caret-color:#c2410c;
  font-family:'Segoe UI',Tahoma,Arial,'Noto Naskh Arabic',sans-serif!important}
html body #custSearch::placeholder,html body #invSearch::placeholder,html body .report-search input::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1}
html body #custSearch:focus,html body #invSearch:focus,html body .report-entity-select:focus,html body .report-search input:focus{
  background:#ffffff!important;border-color:#ff9f0a!important;outline:none!important;
  box-shadow:0 0 0 4px rgba(255,159,10,.30),0 0 22px rgba(255,190,40,.35)!important}
html body .report-entity-select{padding-right:34px!important;cursor:pointer;min-width:240px!important}
html body .report-entity-select option{background:#ffffff;color:#0b2545;font-weight:700}
html body #custSearch{min-width:340px!important}
html body #invSearch{min-width:300px!important}
/* v2.21.243b — Reports toolbar has very specific rules; match them so the customer / book / vendor selector is large */
html body #host .report-toolbar select.report-entity-select,html body #host .reports-centre-page .reports-main .report-toolbar select.report-entity-select,html body #host .reports-centre-v221137 .reports-main .report-toolbar select.report-entity-select,
html body #host .report-toolbar .report-search input,html body #host .reports-centre-page .reports-main .report-toolbar .report-search input,html body #host .reports-centre-v221137 .reports-main .report-toolbar .report-search input{
  font-size:16px!important;font-weight:900!important;min-height:44px!important;height:44px!important;line-height:1.2!important;padding:8px 14px!important;
  color:#0b2545!important;background:linear-gradient(180deg,#fffdf4 0%,#fff1c2 100%)!important;border:2px solid #f2b705!important;border-radius:11px!important}
html body #host .report-toolbar select.report-entity-select{min-width:280px!important;padding-right:34px!important}
html body #host .report-toolbar label:has(select.report-entity-select){font-size:14px!important;font-weight:900!important;color:#fde68a!important}
html body #host .report-toolbar label:has(select.report-entity-select){min-width:300px!important;flex:1 1 300px!important;grid-column:span 2!important}
html body #host .report-toolbar select.report-entity-select{width:100%!important;min-width:0!important;font-size:15px!important}

/* v2.21.245 — Recent POS Bills: View button + large bold bill detail view */
.pos-view-btn245{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;color:#fff!important;border:0!important;font-weight:800!important;min-width:64px}
.pos-bill-view245{font-size:17px;line-height:1.45}
.pos-bill-view245 .pbv-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.7fr) auto auto;gap:10px;margin-bottom:14px}
.pos-bill-view245 .pbv-box{background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.35);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pos-bill-view245 .pbv-box label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.pos-bill-view245 .pbv-box b{font-size:19px;font-weight:800;overflow-wrap:anywhere}
.pos-bill-view245 .pbv-box small{font-size:13px;font-weight:600;opacity:.8}
.pos-bill-view245 .pbv-cust b{font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif;font-size:21px}
.pos-bill-view245 .pbv-pay{display:inline-block;width:max-content;padding:2px 12px;border-radius:999px}
.pos-bill-view245 .pbv-pay.cash{background:rgba(34,197,94,.18);color:#22c55e}
.pos-bill-view245 .pbv-pay.credit{background:rgba(249,115,22,.18);color:#f97316}
.pos-bill-view245 table.pbv-table{width:100%;border-collapse:collapse}
.pos-bill-view245 .pbv-table th{font-size:14px!important;font-weight:800!important;text-transform:uppercase;padding:10px 12px!important;background:rgba(37,99,235,.22)!important;color:inherit!important}
.pos-bill-view245 .pbv-table td{font-size:18px!important;font-weight:700!important;padding:10px 12px!important;border-bottom:1px solid rgba(148,163,184,.25)!important;vertical-align:middle}
.pos-bill-view245 .pbv-table .num{text-align:right;white-space:nowrap}
.pos-bill-view245 .pbv-table td.pbv-code{color:#38bdf8;font-weight:800!important}
.pos-bill-view245 .pbv-table td.pbv-name{font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif!important;font-size:21px!important;font-weight:700!important;line-height:1.7}
.pos-bill-view245 .pbv-table tfoot td{font-weight:800!important;background:rgba(148,163,184,.10)!important}
.pos-bill-view245 .pbv-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap}
.pos-bill-view245 .pbv-notes{flex:1;min-width:200px;font-weight:600}
.pos-bill-view245 .pbv-notes label{font-size:12px;font-weight:700;text-transform:uppercase;opacity:.75}
.pos-bill-view245 .pbv-sum{min-width:340px;border:1px solid rgba(56,189,248,.35);border-radius:14px;padding:10px 16px;background:rgba(56,189,248,.06)}
.pos-bill-view245 .pbv-sum-row{display:flex;justify-content:space-between;gap:20px;padding:6px 0;font-size:18px;font-weight:700}
.pos-bill-view245 .pbv-sum-row b{font-weight:800}
.pos-bill-view245 .pbv-sum-row.grand{border-top:2px solid rgba(56,189,248,.5);margin-top:4px;padding-top:10px;font-size:24px}
.pos-bill-view245 .pbv-sum-row.grand b{color:#22c55e;font-size:26px}
.pos-bill-view245 .actions{margin-top:16px}
@media(max-width:900px){.pos-bill-view245 .pbv-head{grid-template-columns:1fr 1fr}.pos-bill-view245 .pbv-sum{min-width:0;width:100%}}

/* v2.21.246 — Order Booker: created-by badge, filter, waiting note */
.oi small.order-by246{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;background:rgba(168,85,247,.18);color:#a855f7;font-weight:800}
.order-toolbar select.order-createdby-filter246{border:2px solid rgba(168,85,247,.6)!important;font-weight:800!important;min-width:190px}
.booker-wait246{display:inline-flex;align-items:center;padding:6px 12px;border-radius:10px;background:rgba(245,158,11,.15);color:#f59e0b;font-weight:800;font-size:13px}
@media(min-width:1001px){.order-toolbar:has(.order-createdby-filter246){grid-template-columns:minmax(220px,1fr) repeat(3,minmax(110px,150px)) minmax(170px,210px) auto!important}}

/* v2.21.251 — Dashboard KPI drill-down */
.kpi-drill250{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.kpi-drill250:hover,.kpi-drill250:focus-visible{transform:translateY(-2px);border-color:rgba(124,92,255,.75)!important;box-shadow:0 10px 28px rgba(124,92,255,.25)}
.kpi-drill250::after{content:'Details ›';position:absolute;right:12px;bottom:8px;font-size:11px;font-weight:800;color:#a78bfa;opacity:.85}
.kpi-drill250{position:relative}
.modalbox.kpi-drill-modal251{width:min(1250px,96vw)!important;max-width:96vw!important}
.kpi-drill251 .kpi-drill-note251{font-size:13px;opacity:.85;margin-bottom:10px}
.kpi-drill251 .kpi-drill-summary251{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.kpi-drill251 .kpi-drill-summary251>div{flex:1 1 150px;border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08);border-radius:12px;padding:8px 12px}
.kpi-drill251 .kpi-drill-summary251 small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;opacity:.75}
.kpi-drill251 .kpi-drill-summary251 b{font-size:18px;font-weight:800}
.kpi-drill251 .kpi-drill-summary251 .grand{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.10)}
.kpi-drill251 .kpi-drill-summary251 .grand b{color:#22c55e}
.kpi-drill251 .kpi-drill-search251 input{width:100%;margin-bottom:10px;border:2px solid rgba(124,92,255,.55)!important;font-weight:700}
.kpi-drill251 .kpi-drill-scroll251{max-height:56vh;overflow:auto}
.kpi-drill251 table.kpi-drill-table251{width:100%;border-collapse:collapse}
.kpi-drill251 .kpi-drill-table251 th{position:sticky;top:0;z-index:1;background:#1e3a8a!important;color:#fff!important;font-size:12px;font-weight:800;text-transform:uppercase;padding:8px 10px!important;white-space:nowrap}
.kpi-drill251 .kpi-drill-table251 td{padding:7px 10px!important;border-bottom:1px solid rgba(148,163,184,.22);font-weight:600;vertical-align:middle}
.kpi-drill251 .kpi-drill-table251 .num{text-align:right;white-space:nowrap}
.kpi-drill251 .kpi-drill-table251 td.kpi-ref251{font-weight:800;color:#38bdf8;white-space:nowrap}
.kpi-drill251 .kpi-drill-table251 td.kpi-name251{font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif;font-size:16px;font-weight:700}
.kpi-drill251 .kpi-drill-table251 td .btn{margin:2px}
.kpi-drill251 .kpi-drill-table251 tfoot td{position:sticky;bottom:0;background:#0f172a!important;border-top:2px solid rgba(56,189,248,.5)}
.kpi-drill251 .kpi-drill-more251{margin-top:6px;font-size:12px}

/* v2.21.252 — Invoice editor: larger Item Code entry box; white, bold customer field and customer list */
html body .invoice-workspace #fastBookInput,html body .invoice-editor-modal #fastBookInput{
  min-height:54px!important;height:54px!important;font-size:21px!important;padding:8px 16px!important;
  width:min(640px,100%)!important;min-width:min(520px,100%)!important;flex:0 1 640px!important}
html body .invoice-workspace #fastBookInput::placeholder,html body .invoice-editor-modal #fastBookInput::placeholder{font-size:19px!important}
html body .invoice-workspace #fastBookAddBtn,html body .invoice-editor-modal #fastBookAddBtn{min-height:54px!important;font-size:16px!important;padding:0 20px!important}
html body .invoice-workspace #fastBookQty,html body .invoice-editor-modal #fastBookQty{min-height:54px!important;font-size:20px!important;font-weight:800!important}

html body .invoice-workspace #ocUrduSearch,html body .invoice-editor-modal #ocUrduSearch{
  background:#ffffff!important;color:#0b1b33!important;border:2px solid #3b82f6!important;border-radius:10px!important;
  font-weight:800!important;font-size:20px!important;min-height:48px!important;
  font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif!important;box-shadow:0 0 0 3px rgba(59,130,246,.18)!important}
html body .invoice-workspace #ocUrduSearch::placeholder,html body .invoice-editor-modal #ocUrduSearch::placeholder{color:#5b6b82!important;font-weight:700!important;opacity:1}
html body .invoice-workspace #ocUrduSearch:focus,html body .invoice-editor-modal #ocUrduSearch:focus{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.30)!important;outline:none!important}
html body .invoice-workspace #ocUrduSearch:disabled,html body .invoice-editor-modal #ocUrduSearch:disabled{background:#e5e7eb!important;color:#6b7280!important}
html body .invoice-workspace .order-customer-field-combo .order-customer-field-results,html body .invoice-editor-modal .order-customer-field-combo .order-customer-field-results{
  background:#ffffff!important;border:2px solid #3b82f6!important;box-shadow:0 14px 34px rgba(0,0,0,.35)!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result{
  background:#ffffff!important;color:#0b1b33!important;border-bottom:1px solid #e2e8f0!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result b,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result b{
  color:#0b1b33!important;font-weight:800!important;font-size:21px!important;font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result .order-customer-code,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result .order-customer-code{color:#1d4ed8!important;font-weight:800!important;font-size:18px!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result:hover,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result:hover{background:#eff6ff!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result.active,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result.active{background:#2563eb!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result.active b,html body .invoice-workspace .order-customer-field-results .order-customer-field-result.active .order-customer-code,
html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result.active b,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result.active .order-customer-code{color:#ffffff!important}
html body .invoice-workspace .order-customer-field-empty,html body .invoice-editor-modal .order-customer-field-empty{background:#ffffff!important;color:#334155!important;font-weight:700!important}
/* v2.21.252 — stronger selectors (beat the runtime-injected compact entry rules) */
html body.invoice-workspace-open .invoice-workspace .invoice-items-field>.fast-code-entry{height:62px!important;min-height:62px!important;max-height:62px!important;padding:4px!important;align-items:center!important}
html body.invoice-workspace-open .invoice-workspace .fast-code-entry>.fast-book-search-wrap{flex:0 1 620px!important;width:min(620px,60vw)!important;max-width:620px!important;min-width:260px!important}
html body.invoice-workspace-open .invoice-workspace .fast-code-entry #fastBookInput{height:52px!important;min-height:52px!important;padding:6px 16px!important;font-size:21px!important}
html body.invoice-workspace-open .invoice-workspace .fast-code-entry #fastBookAddBtn{height:52px!important;min-height:52px!important;padding:4px 22px!important;font-size:16px!important}
html body .invoice-workspace #ocUrduSearch,html body .invoice-editor-modal #ocUrduSearch{font-size:18px!important}
html body .invoice-workspace .order-customer-field-combo .order-customer-field-results,html body .invoice-editor-modal .order-customer-field-combo .order-customer-field-results{min-width:min(420px,90vw)!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result b,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result b{font-size:19px!important;line-height:1.5!important}
html body .invoice-workspace .order-customer-field-results .order-customer-field-result .order-customer-code,html body .invoice-editor-modal .order-customer-field-results .order-customer-field-result .order-customer-code{font-size:16px!important}

/* v2.21.255 — Item Master opening correction preview */
.item-opening-table td.item-ob-current small.item-ob-change{display:block;font-size:11px;font-weight:700;color:#f59e0b}
.item-opening-table td.item-ob-current b.item-ob-newclosing{color:#22c55e;font-size:16px}
.item-opening-table tr.item-ob-changed td{background:rgba(245,158,11,.08)}
.item-ob-rule255{margin-top:8px}

/* v2.21.262 — profit panel hidden for the Daniyal Shop user */
.business-performance-panel.profit-hidden262{display:none!important}
#host .dashboard-chart-row:has(> .profit-hidden262){grid-template-columns:1fr!important}
#host .kpis:not(:has(#grossProfitValue)):has(#stockValueKpi){grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:900px){#host .kpis:not(:has(#grossProfitValue)):has(#stockValueKpi){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v2.21.263 — recent receipts inside Receive Customer Payment */
.pay-recent263{margin-top:10px}
.pay-recent263 .pay-recent-head263{font-weight:800;font-size:13px;margin:4px 0 6px}.pay-recent263 .pay-recent-head263 small{font-weight:600;opacity:.75}
.pay-recent263 table.pay-recent-table263{width:100%;border-collapse:collapse;font-size:13px}
.pay-recent263 .pay-recent-table263 th{text-align:left;font-size:11px;text-transform:uppercase;opacity:.8;padding:5px 8px;border-bottom:1px solid rgba(148,163,184,.35)}
.pay-recent263 .pay-recent-table263 td{padding:5px 8px;border-bottom:1px solid rgba(148,163,184,.18)}
.pay-recent263 .num{text-align:right}.pay-recent263 td.act{text-align:right;white-space:nowrap}.pay-recent263 td.act .btn{margin-left:4px}
.pay-recent263 .pay-recent-empty263{font-size:12px;padding:4px 0}

/* v2.21.265 — Recent POS Bills: Cash / Credit filter and badge */
.pos-recent-pay264{display:flex;gap:8px;margin:0 0 10px}
.pos-recent-pay264 button{border:1px solid rgba(148,163,184,.4);background:transparent;color:inherit;border-radius:999px;padding:6px 14px;font-weight:800;cursor:pointer}
.pos-recent-pay264 button.active{background:#2563eb;border-color:#2563eb;color:#fff}
.pos-recent-pay264 button span{margin-left:4px;opacity:.85}
.pos-pay264{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:800;font-size:12px}
.pos-pay264.cash{background:rgba(34,197,94,.18);color:#22c55e}.pos-pay264.credit{background:rgba(249,115,22,.18);color:#f97316}

/* v2.21.267 — Stock Transfer + New Chit: New Order style Item Code box (books above, white box below, no list) */
.code-entry267{display:grid;grid-template-columns:minmax(220px,1fr) 64px;gap:8px;margin:12px 0 4px;padding:10px;border:1px solid #29415f;border-radius:11px;background:#09182a}
html body .modalbox .code-entry267-input{width:100%;height:50px!important;padding:6px 16px!important;background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;border-radius:10px!important;font-size:21px!important;font-weight:800!important}
html body .modalbox .code-entry267-input::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1;font-size:19px!important}
html body .modalbox .code-entry267-input:focus{outline:none;box-shadow:0 0 0 3px rgba(245,197,66,.35)!important}
html body .modalbox .code-entry267-add{height:50px!important;font-size:26px!important;font-weight:900;padding:0!important;border-radius:10px!important}
.code-entry267-help{color:#9fb2cc;font-size:12.5px;margin:0 2px 12px}
.chit-book267 b{display:block;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.chit-book267 small,.transfer-draft-row small{display:block;color:#7e94b2;margin-top:2px}
html body .modalbox [data-ce-qty]{font-size:16px!important;font-weight:800!important;text-align:center}
html body .modalbox [data-ce-qty]:focus{outline:2px solid #f5c542!important;background:#fffbe6!important;color:#0b1220!important}
.ce-flash267{animation:ceFlash267 1.1s ease-out}
@keyframes ceFlash267{0%{background:rgba(245,197,66,.35)}100%{background:transparent}}
#transferDraft .transfer-draft{max-height:42vh;overflow:auto}#chitLines{max-height:42vh;overflow:auto}

/* v2.21.268 — New Purchase Order: white, larger Item Code box (same style as invoice / transfer / chit) */
html body .purchase-new-entry-row td.itemcode.newcode{padding:4px 6px!important}
html body .purchase-new-entry-row #poQuickCode{width:100%!important;height:46px!important;min-height:46px!important;padding:4px 14px!important;background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;border-radius:10px!important;font-size:20px!important;font-weight:800!important;box-shadow:none!important}
html body .purchase-new-entry-row #poQuickCode::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1!important;font-size:18px!important}
html body .purchase-new-entry-row #poQuickCode:focus{outline:none!important;box-shadow:0 0 0 3px rgba(245,197,66,.35)!important}

/* v2.21.271 — Stock Transfer grid (same look and flow as New Purchase Order) */
html body .modalbox.transfer-grid-modal271{width:min(1380px,96vw)!important;max-width:96vw!important}
.tf-grid-title271{display:flex;justify-content:space-between;align-items:center;margin:14px 0 6px}.tf-grid-title271 h3{margin:0;font-size:18px;font-weight:900}.tf-grid-title271 span{font-weight:800;color:#cbd5e1;font-size:13px}
.tf-grid-wrap271{border:1px solid #2b4a6a;border-radius:10px;overflow:auto;max-height:48vh;min-height:190px;background:#071526}
.tf-grid271{width:100%;border-collapse:collapse;table-layout:fixed}
.tf-grid271 thead th{position:sticky;top:0;z-index:2;background:#14325a;color:#fff;font-size:12.5px;font-weight:900;padding:8px 6px;border-right:1px solid #2b4a6a;text-align:center}
.tf-grid271 th:nth-child(1){width:44px}.tf-grid271 th:nth-child(2){width:auto}.tf-grid271 th:nth-child(3){width:90px}.tf-grid271 th:nth-child(4){width:100px}.tf-grid271 th:nth-child(5){width:110px}.tf-grid271 th:nth-child(6){width:120px}.tf-grid271 th:nth-child(7){width:140px}.tf-grid271 th:nth-child(8){width:60px}
.tf-grid271 td{border-top:1px solid #1d3a58;border-right:1px solid #1d3a58;padding:5px 6px;vertical-align:middle;color:#e8f2fb}
.tf-grid271 td.sn{text-align:center;font-weight:900;color:#9fb2cc}
.tf-grid271 td.itemcode b{display:block;font-size:15px;font-weight:900;color:#fff}.tf-grid271 td.itemcode small{display:block;font-size:13px;color:#cbd5e1;margin-top:2px;overflow-wrap:anywhere}
.tf-grid271 td.num{text-align:right;font-weight:800;font-size:14px}.tf-grid271 td.muted{color:#64748b;text-align:center}
.tf-grid271 td input{width:100%;height:36px;box-sizing:border-box;background:#0b1f36!important;color:#fff!important;border:1px solid #33557a!important;border-radius:8px!important;font-weight:800!important;font-size:15px!important;padding:2px 8px!important}
.tf-grid271 td input:focus{outline:none!important;border-color:#6db5ff!important;box-shadow:0 0 0 2px rgba(78,163,255,.3)!important;background:#173f88!important}
.tf-grid271 td.row-action{text-align:center}
.tf-grid271 tr.tf-newest271 td{background:rgba(31,83,126,.22)}
.tf-grid271 tr.tf-entry271 td{background:#0a1b30}
html body .modalbox .tf-grid271 #tfQuickCode{height:46px!important;min-height:46px!important;padding:4px 14px!important;background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;border-radius:10px!important;font-size:20px!important;font-weight:800!important}
html body .modalbox .tf-grid271 #tfQuickCode::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1!important;font-size:18px!important}
html body .modalbox .tf-grid271 #tfQuickCode:focus{box-shadow:0 0 0 3px rgba(245,197,66,.35)!important}
.tf-total-box271{display:flex;justify-content:flex-end;gap:10px;margin:10px 0 12px}.tf-total-box271>div{display:flex;gap:18px;justify-content:space-between;align-items:center;min-width:230px;padding:9px 14px;border:1px solid #2b4a6a;border-radius:10px;background:#0b1f36}.tf-total-box271 span{font-weight:800;color:#cbd5e1}.tf-total-box271 b{font-size:19px;font-weight:900;color:#fff}

/* v2.21.276 — Item selling status (Dead Stock / Slow Movement / Fast Movement) */
.selling-chips276{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.selling-chips276 .sc276{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid #2b4a6a;background:#0b1f36;color:#dbe7f5;font-weight:800;font-size:13px;cursor:pointer}
.selling-chips276 .sc276 b{background:rgba(255,255,255,.12);border-radius:999px;padding:1px 8px;font-size:12px}
.selling-chips276 .sc276.dead{border-color:rgba(239,68,68,.5);color:#fca5a5}.selling-chips276 .sc276.slow{border-color:rgba(245,158,11,.5);color:#fcd34d}.selling-chips276 .sc276.fast{border-color:rgba(34,197,94,.5);color:#86efac}
.selling-chips276 .sc276.active{color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.12) inset}
.selling-chips276 .sc276.all.active{background:#2563eb;border-color:#2563eb}.selling-chips276 .sc276.dead.active{background:#b91c1c;border-color:#b91c1c}.selling-chips276 .sc276.slow.active{background:#b45309;border-color:#b45309}.selling-chips276 .sc276.fast.active{background:#15803d;border-color:#15803d}
select.selling-select276{min-width:140px;height:32px;border-radius:8px;font-weight:800;font-size:12.5px;padding:0 8px;border:1px solid #33557a;background:#0b1f36;color:#fff}
select.selling-select276.dead{background:rgba(185,28,28,.25)!important;border-color:rgba(239,68,68,.6)!important;color:#fecaca!important}
select.selling-select276.slow{background:rgba(180,83,9,.25)!important;border-color:rgba(245,158,11,.6)!important;color:#fde68a!important}
select.selling-select276.fast{background:rgba(21,128,61,.25)!important;border-color:rgba(34,197,94,.6)!important;color:#bbf7d0!important}
select.selling-select276 option{background:#0b1f36;color:#fff}
.sbadge276{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:800;font-size:12px;white-space:nowrap}
.sbadge276.dead{background:rgba(239,68,68,.18);color:#f87171}.sbadge276.slow{background:rgba(245,158,11,.18);color:#fbbf24}.sbadge276.fast{background:rgba(34,197,94,.18);color:#4ade80}
.reorder276{font-weight:800}.reorder276.low{color:#ff8290}

/* v2.21.281 — POS credit balance boxes */
.pos-invoice-totals .pos-bal281{border-radius:8px;padding:4px 8px}
.pos-invoice-totals .pos-bal281.prev{background:rgba(245,158,11,.12)}.pos-invoice-totals .pos-bal281.prev b{color:#fbbf24}
.pos-invoice-totals .pos-bal281.inv{background:rgba(59,130,246,.12)}
.pos-invoice-totals .pos-bal281.cur{background:rgba(239,68,68,.14)}.pos-invoice-totals .pos-bal281.cur b{color:#fca5a5;font-size:1.1em}

/* v2.21.281 — signed transfer dispatch / receive */
.signed281-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:8px}.signed281-head>div{border:1px solid #2b4a6a;border-radius:10px;padding:8px 10px;background:#0b1f36}.signed281-head small{display:block;color:#9fb2cc;font-size:11px}.signed281-head b{font-size:15px}
.signed281-help{color:#cbd5e1;margin:6px 0 8px}
.signed281-table{width:100%}.signed281-table td,.signed281-table th{padding:7px 8px}.signed281-table .num{text-align:right}.signed281-table .chk{text-align:center;width:110px}.signed281-table input[type=checkbox]{width:20px;height:20px;accent-color:#22c55e;cursor:pointer}
.signed281-table tr.short281 td{background:rgba(239,68,68,.12)}
.signed281-count{margin:8px 0;font-weight:800;color:#fbbf24}.signed281-count.ok{color:#4ade80}
.signed281-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 12px}.signed281-grid label{display:block;font-weight:800;margin:6px 0 4px;color:#dbe7f5}.signed281-grid textarea,.signed281-grid input{width:100%}
.sigpad281{width:100%;height:150px;background:#fff;border:2px dashed #94a3b8;border-radius:10px;touch-action:none;cursor:crosshair}
.signed281-padbar{display:flex;justify-content:space-between;align-items:center;margin-top:4px;color:#9fb2cc}
.tf-stamps281{display:flex;flex-direction:column;gap:2px;margin-top:4px}.tf-stamps281 span{font-size:11px;font-weight:800}.tf-stamps281 .ok{color:#4ade80}
.dispatch-transfer281{margin-bottom:14px;border:1px solid rgba(124,58,237,.45)}.dispatch-transfer281 .num{text-align:right}.dispatch-transfer281 tr.sub281 td{color:#9fb2cc;font-weight:800;font-size:12px;background:#0b1f36}
@media(max-width:900px){.signed281-grid{grid-template-columns:1fr}}

/* v2.21.282 — Telephone / Remote Order grid (same look as New Order / Stock Transfer) */
.od-grid282 th:nth-child(1){width:44px}.od-grid282 th:nth-child(3){width:80px}.od-grid282 th:nth-child(4){width:90px}.od-grid282 th:nth-child(5){width:110px}.od-grid282 th:nth-child(6){width:90px}.od-grid282 th:nth-child(7){width:110px}.od-grid282 th:nth-child(8){width:120px}.od-grid282 th:nth-child(9){width:60px}
.od-code-wrap282{position:relative}
html body .modalbox .od-grid282 #odQuickCode{width:100%;height:46px!important;min-height:46px!important;padding:4px 14px!important;background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;border-radius:10px!important;font-size:20px!important;font-weight:800!important}
html body .modalbox .od-grid282 #odQuickCode::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1!important;font-size:18px!important}
html body .modalbox .od-grid282 #odQuickCode:focus{box-shadow:0 0 0 3px rgba(245,197,66,.35)!important}
html body .modalbox .od-hits282:empty{display:none}
html body .modalbox .od-hits282{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:70;max-height:240px;overflow:auto;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 14px 32px rgba(0,0,0,.4)}
html body .modalbox .od-hits282 button{display:flex;width:100%;justify-content:space-between;gap:10px;padding:7px 12px;background:#fff;color:#0b1220;border:0;border-bottom:1px solid #e5e7eb;text-align:left;cursor:pointer}
html body .modalbox .od-hits282 button b{font-size:14px}html body .modalbox .od-hits282 button small{display:block;color:#64748b}html body .modalbox .od-hits282 button strong{font-size:12px;color:#075985;white-space:nowrap}
html body .modalbox .od-hits282 button.active,html body .modalbox .od-hits282 button:hover{background:#fef3c7}
html body .modalbox .od-hits282 .od-no-book{padding:10px 12px;color:#b91c1c;font-weight:700}

/* v2.21.283 — Order Desk VP customers / collection */
.od-tabs283{display:flex;gap:8px;margin:0 0 12px}.od-tabs283 button{padding:9px 18px;border-radius:999px;border:1px solid #2b4a6a;background:#0b1f36;color:#dbe7f5;font-weight:800;cursor:pointer}.od-tabs283 button.active{background:linear-gradient(135deg,#7c3aed,#2563eb);border-color:transparent;color:#fff}
.od-cust283-grid{display:grid;grid-template-columns:1.1fr 1.2fr .8fr 1.6fr;gap:10px}.od-cust283-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#9fb2cc;position:relative}
.od-mob283 small{position:absolute;right:4px;top:0;font-size:11px;color:#fbbf24;font-weight:800}.od-mob283 small.ok{color:#4ade80}
html body .modalbox #odPhone{background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;font-weight:800!important;font-size:17px!important;height:42px!important}
html body .modalbox #odPhone::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1!important}
html body .modalbox .od-mobhits283{top:calc(100% + 2px)}
.od-custbal283{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}.od-custbal283:empty{display:none}.od-custbal283 span{background:#0b1f36;border:1px solid #2b4a6a;border-radius:8px;padding:4px 10px;font-size:12px;color:#cbd5e1}.od-custbal283 b{color:#fff}.od-custbal283 em{font-style:normal;background:rgba(245,158,11,.15);color:#fbbf24;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800}
.vpc-tools283 label{display:flex;flex-direction:column;gap:3px}.vpc-find283 input{background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;font-weight:800!important;min-width:240px}
.od-table .num{text-align:right}.od-table td small{display:block;color:#9fb2cc}
.vprec283 .vpbal283{color:#fca5a5;font-size:18px}
.vpo-add283 input{width:100%}
@media(max-width:900px){.od-cust283-grid{grid-template-columns:1fr 1fr}}

/* v2.21.284 — Telephone / Remote Order: dedicated full screen (like New Order), fits without page scrolling, bold labels. */
body.od-ws-open284{overflow:hidden!important}
body.od-ws-open284 main{height:100vh!important;min-height:0!important;overflow:hidden!important;padding:9px 16px 10px!important}
body.od-ws-open284 main>header{display:none!important}
body.od-ws-open284 #host.od-ws-host284{height:100%!important;min-height:0!important;overflow:hidden!important;width:100%;max-width:none!important}
.od-ws284{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px}
.od-ws-head284{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;border:1px solid #2b4a6a;border-radius:12px;background:linear-gradient(135deg,#132f57,#0b1a30)}
.od-ws-title284 span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc;font-weight:900}
.od-ws-title284 h1{margin:2px 0 0;font-size:23px;line-height:1.15;font-weight:900;color:#fff}
.od-ws-actions284 .btn{padding:8px 14px;font-weight:800}
.od-ws-body284{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:9px;padding:10px 12px;border:1px solid #22405f;border-radius:12px;background:#0a172a}
.od-ws-top284{flex:0 0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.od-ws284 label{display:flex;flex-direction:column;gap:4px;font-size:13px!important;font-weight:800!important;color:#eef5ff!important;letter-spacing:.01em}
.od-ws284 .od-ws-top284 input,.od-ws284 .od-ws-top284 select,.od-ws284 .od-ws-foot284 input,.od-ws284 .od-cust283-grid input{height:40px!important;min-height:40px!important;font-size:15px!important;font-weight:800!important;color:#fff;padding:5px 10px!important;border-radius:9px!important}
.od-ws284 .od-ws-top284 select option{font-weight:700}
.od-ws284 #odTerms{color:#fde68a!important;letter-spacing:.06em}
.od-ws-cust284{flex:0 0 auto}
.od-ws284 .od-cust283-grid{grid-template-columns:1.15fr 1.25fr .8fr 1.7fr;gap:10px}
.od-ws284 .od-mob283 small{font-size:12px;top:1px}
html body .od-ws284 #odPhone{background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;font-weight:900!important;font-size:18px!important;height:44px!important;min-height:44px!important}
html body .od-ws284 #odPhone::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1!important}
.od-ws284 .od-custbal283{margin-top:6px}
.od-ws-items284{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border:0!important;border-radius:0!important;overflow:visible!important}
.od-ws-items284 .tf-grid-title271{flex:0 0 auto;margin:0 0 5px}
.od-ws-items284 .tf-grid-wrap271{flex:1 1 auto;max-height:none!important;min-height:120px}
.od-ws-items284 .tf-total-box271{flex:0 0 auto;margin:7px 0 0}
.od-ws-items284 .tf-total-box271>div{padding:6px 14px}
.od-ws-foot284{flex:0 0 auto;display:grid;grid-template-columns:160px 160px minmax(180px,1fr) 270px auto;gap:10px;align-items:end}
.od-ws-net284{display:flex!important;justify-content:space-between;align-items:center;height:44px;padding:0 14px;border:1px solid #3b6ea5;border-radius:10px;background:linear-gradient(135deg,#123a6b,#0c2546);margin:0!important}
.od-ws-net284 span{font-weight:800;color:#cfe3fb}.od-ws-net284 b{font-size:22px;font-weight:900;color:#fff}
.od-ws-btns284{display:flex;gap:8px}.od-ws-btns284 .btn{height:44px;padding:0 18px;font-weight:900;white-space:nowrap}
html body .od-ws284 .od-grid282 #odQuickCode{width:100%;height:46px!important;min-height:46px!important;padding:4px 14px!important;background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;border-radius:10px!important;font-size:20px!important;font-weight:800!important}
html body .od-ws284 .od-grid282 #odQuickCode::placeholder{color:#8a6a12!important;font-weight:700!important;opacity:1!important;font-size:18px!important}
html body .od-ws284 .od-grid282 #odQuickCode:focus{box-shadow:0 0 0 3px rgba(245,197,66,.35)!important}
html body .od-ws284 .od-hits282:empty{display:none}
html body .od-ws284 .od-hits282{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:70;max-height:300px;overflow:auto;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 14px 32px rgba(0,0,0,.4)}
html body .od-ws284 .od-hits282 button{display:flex;width:100%;justify-content:space-between;gap:10px;padding:7px 12px;background:#fff;color:#0b1220;border:0;border-bottom:1px solid #e5e7eb;text-align:left;cursor:pointer}
html body .od-ws284 .od-hits282 button b{font-size:14px}html body .od-ws284 .od-hits282 button small{display:block;color:#475569;font-size:13px}html body .od-ws284 .od-hits282 button strong{font-size:12px;color:#075985;white-space:nowrap}
html body .od-ws284 .od-hits282 button.active,html body .od-ws284 .od-hits282 button:hover{background:#fef3c7}
html body .od-ws284 .od-mobhits283{top:calc(100% + 2px)}
@media(max-width:1250px){.od-ws-top284{grid-template-columns:repeat(3,minmax(0,1fr))}.od-ws-foot284{grid-template-columns:1fr 1fr 2fr}.od-ws-net284,.od-ws-btns284{grid-column:span 3}}
@media(max-width:800px){body.od-ws-open284,body.od-ws-open284 main,body.od-ws-open284 #host.od-ws-host284{overflow:auto!important;height:auto!important}.od-ws-top284{grid-template-columns:1fr 1fr}.od-ws284 .od-cust283-grid{grid-template-columns:1fr}.od-ws-foot284{grid-template-columns:1fr}.od-ws-net284,.od-ws-btns284{grid-column:auto}}
html body .od-ws284 .od-hits282 button span{min-width:0;flex:1}html body .od-ws284 .od-hits282 button small{text-align:left;unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v2.21.285 — mobile search list: one clean row per customer (Mobile · Name · City), wider list, "Add as new customer" row. */
html body .od-mobhits283{right:auto!important;width:min(720px,calc(100vw - 340px))!important;min-width:100%}
html body .od-mobhits283 button.od-hit285{display:grid!important;grid-template-columns:120px minmax(0,1.4fr) minmax(0,.8fr) auto;align-items:center;gap:12px;padding:8px 12px!important;text-align:left}
html body .od-mobhits283 button.od-hit285 .m{font-size:15px;font-weight:900;color:#0b1220;white-space:nowrap}
html body .od-mobhits283 button.od-hit285 .n{font-size:15px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:left}
html body .od-mobhits283 button.od-hit285 .c{font-size:13px;font-weight:700;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:left}
html body .od-mobhits283 button.od-hit285 strong{font-size:12px;color:#075985;white-space:nowrap}
html body .od-mobhits283 button.od-hit285.new{background:#ecfdf5!important}html body .od-mobhits283 button.od-hit285.new .n{color:#047857}html body .od-mobhits283 button.od-hit285.new strong{color:#047857;font-size:13px}
html body .od-mobhits283 button.od-hit285.active,html body .od-mobhits283 button.od-hit285:hover{background:#fef3c7!important}

/* v2.21.286 — "Save Customer" on the telephone order screen. */
.od-ws284 .od-name285{position:relative}
.od-ws284 .od-savecust285{position:absolute;right:2px;top:-2px;font-size:11.5px;font-weight:900;color:#052e16;background:#4ade80;border-radius:999px;padding:2px 10px;cursor:pointer;line-height:1.5;user-select:none}
.od-ws284 .od-savecust285:hover{background:#86efac}

/* v2.21.288 — Order Desk post prints toolbar */
.od-post288{display:inline-flex;align-items:flex-end;gap:6px;padding:4px 8px;border:1px dashed #33557a;border-radius:10px}
.od-post288 label{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:800;color:#cfe3fb}.od-post288 select{height:34px;font-weight:800;min-width:150px}

/* v2.21.289 — Sale Invoice: the white Item Code box sits right under the last item (like Purchase Order) and moves down
   one row each time a book is added; the item rows scroll only when the screen is full. */
html body.invoice-workspace-open .invoice-workspace .invoice-items-field>#draftItems{flex:0 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important}
html body.invoice-workspace-open .invoice-workspace .invoice-items-field>#draftItems .fast-entry-empty{display:none!important}
html body.invoice-workspace-open .invoice-workspace .invoice-items-field>.fast-code-entry{margin:4px 0 auto!important}
/* ▾ related-items button inside the Item Code box */
.fast-book-search-wrap{position:relative}
.fast-drop-btn288{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:6;width:34px;height:calc(100% - 10px);min-height:26px;border:0;border-radius:8px;background:#f5c542;color:#1f2937;font-size:18px;font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fast-drop-btn288:hover{background:#fbbf24}
html body .fast-book-search-wrap #fastBookInput{padding-right:46px!important}
html body.invoice-workspace-open .invoice-workspace .fast-book-search-wrap>.fast-book-results.drop-down288{top:calc(100% + 3px)!important;bottom:auto!important}
html body .fast-book-search-wrap>.fast-book-results.show{overflow-y:auto!important;min-width:min(620px,70vw)}
.fast-drop-empty288{padding:10px 12px;color:#b91c1c;font-weight:800;background:#fff}
html body .fast-book-search-wrap>.fast-book-results.drop-list288{padding:4px!important}
html body .fast-book-search-wrap>.fast-book-results.drop-list288 .fast-book-result{min-height:0!important;height:auto!important;padding:6px 12px!important;margin:0 0 3px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
html body .fast-book-search-wrap>.fast-book-results.drop-list288 .fast-book-result b{font-size:14px!important}html body .fast-book-search-wrap>.fast-book-results.drop-list288 .fast-book-result small{font-size:11px!important;margin:0!important}

/* v2.21.292 — Stock Reconciliation + Physical Count */
.recon-help292{margin:10px 0;padding:10px 12px;border:1px solid #2b4a6a;border-radius:10px;background:#0b1f36;color:#cbd5e1;font-size:13px;line-height:1.55}
.recon-help292 .btn{margin-left:8px}
.recon-diff292{color:#fbbf24!important}.recon-neg292{color:#f87171!important}.recon-ok292{color:#4ade80;font-weight:800}
.count-info292{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border:1px dashed #33557a;border-radius:10px}
.count-info292>b{flex-basis:100%;font-size:15px}.count-info292 span{background:#0b1f36;border:1px solid #2b4a6a;border-radius:8px;padding:4px 10px;font-size:13px}
.count292 #cntQty292{background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;font-size:18px!important;font-weight:900!important}
@media print{.recon-help292 .btn,.report-table .btn{display:none!important}}

/* v2.21.298 — Daily Invoice Register filter + search */
.od-regtools297{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.od-paytabs297{display:flex;gap:6px}.od-paytabs297 button{padding:7px 16px;border-radius:999px;border:1px solid #2b4a6a;background:#0b1f36;color:#dbe7f5;font-weight:800;cursor:pointer}
.od-paytabs297 button.active{background:linear-gradient(135deg,#7c3aed,#2563eb);border-color:transparent;color:#fff}
.od-regsearch297{flex:1;min-width:260px}.od-regsearch297 input{width:100%;height:40px;background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;border-radius:10px;font-weight:700;font-size:15px;padding:0 12px}
.od-regsearch297 input::placeholder{color:#8a6a12;font-weight:600}

/* v2.21.299 — VP collection batches */
.vpsel298{width:44px;text-align:center}.vpsel298 input{width:20px;height:20px;cursor:pointer;accent-color:#22c55e}
.od-table tr.vp-picked298 td{background:rgba(34,197,94,.12)}
.vp-indraft298{font-size:11px;font-weight:800;color:#fbbf24;border:1px solid #fbbf24;border-radius:999px;padding:1px 6px;white-space:nowrap}
.vp-selbar298{position:sticky;bottom:8px;z-index:20;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0;padding:10px 14px;border:1px solid #2b4a6a;border-radius:12px;background:#0b1f36;opacity:.75}
.vp-selbar298.on{opacity:1;border-color:#22c55e;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.vp-seltot298{display:flex;gap:16px;align-items:center;font-size:14px;color:#cbd5e1}.vp-seltot298 b{font-size:20px;color:#fff}
.vp-selbar298 label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:#cfe3fb}.vp-selbar298 input,.vp-selbar298 select{height:36px;min-width:220px}
.vp-bst298{padding:2px 10px;border-radius:999px;font-weight:800;font-size:12px}.vp-bst298.draft{background:rgba(251,191,36,.15);color:#fbbf24}.vp-bst298.ok{background:rgba(34,197,94,.15);color:#4ade80}
.vpc-search298 input{background:#fff!important;color:#0b1220!important;border:2px solid #f5c542!important;font-weight:700!important;min-width:260px}

/* v2.21.302: Mix Item inside Stock Transfer */
.tf-mixtag302{display:inline-block;background:#f59e0b;color:#111;font-size:10.5px;font-weight:900;padding:1px 6px;border-radius:4px;margin-left:4px;letter-spacing:.3px;vertical-align:middle}
.tf-grid271 tr.tf-mixsub302 td{border-top:0;padding:0 6px 8px;background:transparent}
.tf-mixbox302{margin-top:4px;border:1px solid #f59e0b;border-radius:8px;background:rgba(245,158,11,.08);padding:6px 8px;font-size:12.5px}
.tf-mixbox302.bad{border-color:#dc2626;color:#dc2626;font-weight:800}
.tf-mixhd302{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font-weight:800}
.tf-mixgrid302{display:grid;grid-template-columns:minmax(80px,auto) 1fr 52px 72px 72px;gap:2px 10px;align-items:center}
.tf-mixgrid302 .h{font-size:11px;font-weight:900;opacity:.75;text-transform:uppercase;border-bottom:1px solid rgba(245,158,11,.5);padding-bottom:2px}
.tf-mixgrid302 .n{text-align:right}.tf-mixgrid302 .c{font-weight:800}.tf-mixgrid302 .short{color:#dc2626;font-weight:900}

/* v2.21.303: edit telephone order — sent invoice keeps items locked */
.od-lock303{background:rgba(245,158,11,.12);border:1px solid #f59e0b;color:#fbbf24;border-radius:10px;padding:8px 12px;font-weight:800;font-size:13px;margin-bottom:8px}
.od-locked303 .od-ws-items284 .tf-entry271,.od-locked303 .od-ws-items284 .row-action button{display:none}
.od-locked303 .od-ws-items284 input{pointer-events:none;opacity:.65}

/* v2.21.304: Post Office Charges field (dispatch list only) */
.od-hint304{font-size:10.5px;font-weight:700;opacity:.7;margin-left:4px;text-transform:none}
.od-po304 input{border-color:#f59e0b!important}
@media(min-width:1251px){.od-ws-foot284{grid-template-columns:150px 150px 190px minmax(160px,1fr) 270px auto}}
@media(max-width:1250px) and (min-width:801px){.od-ws-foot284{grid-template-columns:1fr 1fr 1fr 2fr}.od-ws-net284,.od-ws-btns284{grid-column:span 2}}

/* v2.21.305: Rate Check */
.rc305-bar{display:flex;gap:10px;align-items:end;margin-bottom:10px}.rc305-bar label{display:flex;flex-direction:column;font-size:12px;font-weight:800;gap:3px}
table.rc305{width:100%;border-collapse:collapse;font-size:12.5px}table.rc305 th,table.rc305 td{padding:5px 6px;border-bottom:1px solid rgba(148,163,184,.25);text-align:left}table.rc305 td.bad{color:#f87171;font-weight:900}
.rc305-ok{padding:10px;border:1px solid #16a34a;border-radius:8px;color:#4ade80;font-weight:800}

/* v2.21.311: fixed-position item list — the side arrow buttons are not needed (↑/↓ keys and scroll work) */
.fast-book-results.drop-fixed311.show + .fast-book-nav{display:none!important}
.fast-book-results.drop-fixed311{box-shadow:0 14px 40px rgba(0,0,0,.55)!important;overscroll-behavior:contain}

/* v2.21.312: Invoice Date in the invoice editor — bold and coloured so it is noticed */
input#odate{font-weight:900!important;font-size:17px!important;color:#111827!important;background:linear-gradient(180deg,#fff7d6,#ffe58a)!important;border:2px solid #f5b301!important;border-radius:9px!important;box-shadow:0 0 0 3px rgba(245,179,1,.18)!important;letter-spacing:.5px}
input#odate::-webkit-calendar-picker-indicator{filter:none;opacity:.85;cursor:pointer}
div:has(> input#odate) > small{color:#ffd166!important;font-weight:900!important;font-size:12px!important;letter-spacing:.3px}

/* v2.21.313: prominent invoice search bar */
.order-toolbar .order-search{border:2px solid #f5b301!important;background:#0b1a30!important;border-radius:12px!important;box-shadow:0 0 0 3px rgba(245,179,1,.15)!important;font-size:20px!important;font-weight:900!important;color:#ffd166!important;padding-left:12px!important}
.order-toolbar .order-search input#orderSearch{font-size:17px!important;font-weight:800!important;color:#fff!important;height:44px!important}
.order-toolbar .order-search input#orderSearch::placeholder{color:#c8d5ea!important;font-weight:700!important;opacity:.9}
.order-toolbar .order-search:focus-within{border-color:#ffd166!important;box-shadow:0 0 0 4px rgba(255,209,102,.28)!important}

/* v2.21.314: fixed Bill No. on every invoice card + position while searching */
.oi .oi-billrow314{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.oi .oi-bill314{background:#ffd166;color:#111827;font-weight:900;font-size:15px;padding:2px 10px;border-radius:8px;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.oi .oi-pos314{background:rgba(255,255,255,.18);color:#fff;font-weight:900;font-size:12.5px;padding:2px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.35)}

/* v2.21.316: status at the top-right corner on the Bill No. row; bigger bold date */
.oi .oi-right316{display:flex;align-items:center;gap:6px;margin-left:auto}
.oi .oi-right316 .status{margin:0!important}
.oi .oi-idrow316{display:block!important}
.oi .oi-idrow316 b{display:block;word-break:break-all}
.oi .oi-date316{font-size:15px!important;font-weight:900!important;color:#fff!important;letter-spacing:.3px}
.oi .oi-bill314.oi-cxl316{background:#ef4444;color:#fff}

/* v2.21.316: date filter */
.order-toolbar .order-datef316{display:flex;gap:6px;align-items:center}
.order-toolbar .order-datef316 select,.order-toolbar .order-datef316 input{height:40px;border-radius:10px;border:2px solid #38bdf8;background:#0b1a30;color:#fff;font-weight:800;padding:0 10px;font-size:14px}
.order-toolbar .order-datef316 input{color-scheme:dark}
@media(min-width:1001px){.order-toolbar,.order-toolbar:has(.order-createdby-filter246){grid-template-columns:minmax(220px,1fr) auto repeat(3,minmax(95px,135px)) minmax(150px,185px) auto!important}}

/* v2.21.317: From → To range in the Orders date filter */
.order-toolbar .order-datef316 .odr317{font-weight:900;color:#7dd3fc;font-size:12px}
.order-toolbar .order-datef316{flex-wrap:wrap}
.order-toolbar .order-datef316:has(.odr317){grid-column:1/-1;order:9;flex-wrap:nowrap;justify-content:flex-start}
.order-toolbar .order-datef316:has(.odr317) input{width:170px}
@media(min-width:1001px){.order-toolbar:has(.odr317),.order-toolbar:has(.odr317):has(.order-createdby-filter246){grid-template-columns:minmax(220px,1fr) repeat(3,minmax(95px,135px)) minmax(150px,185px) auto!important}}

/* v2.21.318: From date → To date row */
.order-toolbar .order-datef316 .odr317{font-weight:900!important;color:#7dd3fc;font-size:14px!important;letter-spacing:.2px}
.order-toolbar .order-datef316 input{font-weight:900!important;font-size:15px!important}
.order-toolbar .odr-clear318{height:40px;border-radius:10px;border:1px solid #64748b;background:#1e293b;color:#fff;font-weight:900;padding:0 12px;cursor:pointer}

/* v2.21.319 — Hide Balance: Orders cards / detail and New / Edit invoice editor */
.md-amount-toggle319{min-width:128px;white-space:nowrap}
.invoice-workspace .invoice-page-head-actions .md-amount-toggle319{height:32px;min-height:32px;padding:4px 12px;font-size:12px}
body.md-amounts-hidden319 .md-amount-toggle319{background:#7c2d12;border-color:#f97316;color:#fff}
.md-private319,#otopCustomerBalance,#oprev,#draftGrand,#footerPrev,#footerNet,#footerClosing,#ocUrduSearch,#oc,.order-detail .legacy-invoice-totals b{transition:filter .16s ease}
body.md-amounts-hidden319 .md-private319,
body.md-amounts-hidden319 #otopCustomerBalance,
body.md-amounts-hidden319 #oprev,
body.md-amounts-hidden319 #draftGrand,
body.md-amounts-hidden319 #footerPrev,
body.md-amounts-hidden319 #footerNet,
body.md-amounts-hidden319 #footerClosing,
body.md-amounts-hidden319 #ocUrduSearch,
body.md-amounts-hidden319 #oc,
body.md-amounts-hidden319 #ocUrduResults,
body.md-amounts-hidden319 .order-detail .legacy-invoice-totals b{filter:blur(7px)!important;user-select:none}
body.md-amounts-hidden319 .legacy-history-card td:nth-child(3){filter:blur(6px)!important;user-select:none}

/* v2.21.320 — compact Item Code dropdown: code left, name centre, nothing else */
html body .fast-book-search-wrap>.fast-book-results .fast-book-result.fbr320{display:grid!important;grid-template-columns:72px minmax(0,1fr) 72px!important;align-items:center!important;gap:8px!important;min-height:0!important;height:auto!important;padding:5px 10px!important;margin:0 0 3px!important;text-align:center!important;direction:ltr!important}
html body .fast-book-search-wrap>.fast-book-results .fast-book-result.fbr320 .fbr-code320{justify-self:start;font:800 15px/1.2 Arial,'Segoe UI',sans-serif;color:#fde68a;font-variant-numeric:tabular-nums;white-space:nowrap}
html body .fast-book-search-wrap>.fast-book-results .fast-book-result.fbr320 .fbr-name320{justify-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.45 'Noto Naskh Arabic','Segoe UI',Arial,sans-serif;color:#f8fafc;text-align:center}
html body .fast-book-search-wrap>.fast-book-results .fast-book-result.fbr320.active .fbr-code320{color:#fff}
/* v2.21.321 — Hide Balance also hides customer name and phone */
body.md-amounts-hidden319 #ophone{filter:blur(7px)!important;user-select:none}

/* v2.21.326: Order Desk Item Code list — full ranked list, code | name | stock·rate */
html body .od-ws284 .od-hits282,html body .modalbox .od-hits282{max-height:min(60vh,520px)}
html body .od-hits282 .od-hitcount326{position:sticky;top:0;background:#f1f5f9;color:#334155;font:700 11px Arial;padding:4px 12px;border-bottom:1px solid #e2e8f0;z-index:1}
html body .od-hits282 button{align-items:center}
html body .od-hits282 .od-hc326{flex:0 0 70px;font:800 14px Arial;color:#0b1220}
html body .od-hits282 .od-hn326{flex:1;min-width:0;text-align:left}
html body .od-hits282 .od-hn326 b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .od-hits282 .od-hn326 small{display:block;color:#475569;font-family:"Noto Naskh Arabic",serif;font-size:14px;text-align:right}
/* v2.21.327: book name in the Item Code list — dark and bold like the code (was inheriting the dark-theme white) */
html body .od-hits282 .od-hn326 b,html body .od-hits282 button .od-hn326 b{color:#0b1220!important;font-weight:800!important;-webkit-text-fill-color:#0b1220}
html body .od-hits282 .od-hn326 small{color:#1e293b!important;font-weight:700!important;-webkit-text-fill-color:#1e293b}

/* v2.21.328: Stock Transfer — yellow ▾ item list + bold date */
.tf-code-wrap328{position:relative}.tf-code-wrap328 #tfQuickCode{padding-right:46px!important}
.tf-drop328{display:none;position:fixed;z-index:3000;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 14px 32px rgba(0,0,0,.45);overflow:auto;padding:4px}
.tf-drop328.show{display:block}
.tf-drop328 .fast-book-result{display:flex!important;align-items:center;gap:12px;width:100%;padding:7px 12px;margin:0 0 3px;border:0;border-radius:8px;background:#fff;color:#0b1220;text-align:left;cursor:pointer}
.tf-drop328 .fast-book-result.active,.tf-drop328 .fast-book-result:hover{background:#fef3c7}
.tf-drop328 .fbr-code320{flex:0 0 80px;font:800 15px Arial;color:#0b1220!important}
.tf-drop328 .fbr-name320{flex:1;min-width:0;text-align:center;font-weight:800;font-size:15px;color:#0b1220!important;-webkit-text-fill-color:#0b1220;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-drop328 .fbr-name320[lang=ur]{font-family:"Noto Naskh Arabic",serif;font-size:16px}
.tf-drop328 .fast-book-noresult{padding:10px 12px;color:#b91c1c;font-weight:700}
.transfer-grid-modal271 .tf-date-fg328 input{font:800 18px Arial!important;letter-spacing:.5px;color:#fff;min-height:44px}
.transfer-grid-modal271 .tf-date-fg328 label{font-weight:800;font-size:13px}
.tf-drop328 .fast-book-result{min-height:0!important;height:auto!important;padding:6px 12px!important;margin:0 0 3px!important;line-height:1.3!important}

/* v2.21.329: Telephone Order — bigger Full Address box and font */
html body .od-ws284 .od-cust283-grid{grid-template-columns:1fr 1.15fr .75fr 2.4fr}
html body .od-ws284 .od-cust283-grid #odAddress{height:50px!important;min-height:50px!important;font-family:"Noto Naskh Arabic","Segoe UI",Arial,sans-serif!important;font-size:21px!important;font-weight:700!important;line-height:1.3!important;padding:4px 12px!important}
@media(max-width:900px){html body .od-ws284 .od-cust283-grid{grid-template-columns:1fr 1fr}html body .od-ws284 .od-addr283{grid-column:1/-1}}

/* v2.21.335: order card — the date never breaks over two lines */
html body .oi-date316{white-space:nowrap!important;display:inline-block;word-break:keep-all!important;overflow-wrap:normal!important}
/* v2.21.338: Cash Customer (name · mobile · address) beside Fulfilment Location — printed on the bill when typed */
html body .cash-cust338 .cash-pair338{display:grid;grid-template-columns:1.3fr 1fr;gap:6px}
html body .cash-cust338 .cash-pair338>div{display:flex;flex-direction:column;min-width:0}
html body .cash-cust338 label{font-weight:800}
html body .cash-cust338 input{width:100%;box-sizing:border-box;font-weight:700}

/* v2.21.352 — VP No. entry in the Daily Invoice Register; amount-difference panels in Receive VP and Collection Batch */
.od-vpin322{display:flex;align-items:center;gap:4px;margin-top:3px}
.od-vpin322 input{width:96px;height:28px;padding:3px 7px;border-radius:7px;border:1px solid #f59e0b;background:#fffbeb;color:#111;font:700 12px Arial,sans-serif}
.od-vpin322 input:focus{outline:2px solid #fbbf24;outline-offset:1px}
.od-vpin322 .btn.small{height:28px;min-height:28px;padding:0 9px}
.vp-diff322{margin:10px 0 4px;padding:10px 12px;border:1px solid #f59e0b;border-radius:10px;background:rgba(245,158,11,.12);flex-basis:100%}
.vp-diff322.more{border-color:#38bdf8;background:rgba(56,189,248,.12)}
.vp-diff-msg322{font-size:13px;line-height:1.5;margin-bottom:8px}
.vp-diff-short322{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px;font-size:13px}
.vp-diff-short322 label{display:flex;align-items:center;gap:6px;cursor:pointer}
.vp-diff322 textarea{width:100%}
.vp-unsent352{display:block;color:#fbbf24!important;font-weight:700}
.vp-bdiff352{display:block;color:#fbbf24!important;font-weight:600;white-space:normal}

/* v2.21.355 — Dispatch Desk: colour status boxes, bill no. on every row, colour-coded rows */
.ds-tabs355{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.ds-tab355{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 14px;border-radius:12px;border:2px solid transparent;cursor:pointer;color:#fff;font:700 14px Arial,'Segoe UI',sans-serif;text-align:left;opacity:.78;transition:transform .12s,opacity .12s,box-shadow .12s}
.ds-tab355 b{font-size:24px;line-height:1}
.ds-tab355:hover{opacity:1;transform:translateY(-1px)}
.ds-tab355.on{opacity:1;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.35)}
.ds-tab355.active{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.ds-tab355.topack{background:linear-gradient(135deg,#d97706,#f59e0b)}
.ds-tab355.packed{background:linear-gradient(135deg,#7e22ce,#c026d3)}
.ds-tab355.transit{background:linear-gradient(135deg,#0369a1,#0ea5e9)}
.ds-tab355.delivered{background:linear-gradient(135deg,#15803d,#22c55e)}
.ds-tab355.all{background:linear-gradient(135deg,#334155,#64748b)}
.ds-bill355{display:inline-block;margin:0 0 3px;padding:2px 9px;border-radius:7px;background:#facc15;color:#111;font:900 13px Arial,sans-serif}
.dispatch-table td .ds-bill355+b{display:block}
.ds-row355 td:first-child{border-left:5px solid transparent}
.ds-row355.topack td:first-child{border-left-color:#f59e0b}
.ds-row355.packed td:first-child{border-left-color:#c026d3}
.ds-row355.transit td:first-child{border-left-color:#0ea5e9}
.ds-row355.delivered td:first-child{border-left-color:#22c55e}
.ds-st355{display:inline-block;padding:4px 10px;border-radius:999px;font:800 12.5px Arial,sans-serif;color:#fff;white-space:nowrap}
.ds-st355.topack{background:#d97706}.ds-st355.packed{background:#a21caf}.ds-st355.transit{background:#0284c7}.ds-st355.delivered{background:#16a34a}
@media(max-width:1100px){.ds-tabs355{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v2.21.356 — Dispatch Desk: Created By filter (Admin / Order Booker / all) */
.ds-by356{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 10px}
.ds-by356>span{font:800 13px Arial,sans-serif;color:#94a3b8;margin-right:4px}
.ds-by356 button{padding:7px 14px;border-radius:999px;border:2px solid #334155;background:#0f1d2e;color:#e2e8f0;font:700 13.5px Arial,'Segoe UI',sans-serif;cursor:pointer}
.ds-by356 button b{margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.12)}
.ds-by356 button.admin.on{background:#1d4ed8;border-color:#93c5fd}
.ds-by356 button.booker.on{background:#be185d;border-color:#f9a8d4}
.ds-by356 button.all.on{background:#475569;border-color:#cbd5e1}
.ds-bk356{display:inline-block;margin:0 0 3px 6px;padding:2px 8px;border-radius:7px;background:#be185d;color:#fff;font:800 11.5px Arial,sans-serif}
/* v2.21.357 — the queue keeps at least one screen of height, so a filter with few bills does not pull the page up */
.dispatch-queue-panel{min-height:calc(100vh - 24px)}
body:has(.dispatch-queue-panel),body:has(.dispatch-queue-panel) *{overflow-anchor:none}
/* v2.21.358 — no hover lift / zoom on big content panels (tables, queues, lists). On a long panel the 0.8% zoom moved the
   page ~20px, the edge moved away from the mouse, hover ended, the page moved back → the screen shook. Small KPI cards keep it. */
.card.panel:hover,.card.panel{transform:none!important;will-change:auto!important}

/* v2.21.359 — VP Collection: Unpaid / Paid / Bilty / Cash boxes and colour-coded rows */
.vp-terms359{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
.vp-term359{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;border-radius:12px;border:2px solid transparent;color:#fff;cursor:pointer;opacity:.8;text-align:left;font:700 14px Arial,'Segoe UI',sans-serif}
.vp-term359 small{font-size:11px;opacity:.85;font-weight:700}
.vp-term359 b{font-size:24px;line-height:1}
.vp-term359 em{font-style:normal;font-size:12.5px;opacity:.92}
.vp-term359:hover{opacity:1}
.vp-term359.on{opacity:1;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.35)}
.vp-term359.all{background:linear-gradient(135deg,#334155,#64748b)}
.vp-term359.unpaid{background:linear-gradient(135deg,#b91c1c,#ef4444)}
.vp-term359.paid{background:linear-gradient(135deg,#15803d,#22c55e)}
.vp-term359.bilty{background:linear-gradient(135deg,#7e22ce,#c026d3)}
.vp-term359.cash{background:linear-gradient(135deg,#b45309,#f59e0b)}
.vp-row359 td:first-child{border-left:5px solid transparent}
.vp-row359.unpaid td:first-child{border-left-color:#ef4444}.vp-row359.paid td:first-child{border-left-color:#22c55e}
.vp-row359.bilty td:first-child{border-left-color:#c026d3}.vp-row359.cash td:first-child{border-left-color:#f59e0b}
.vp-row359.unpaid{background:rgba(239,68,68,.06)}.vp-row359.paid{background:rgba(34,197,94,.07)}
.vp-row359.bilty{background:rgba(192,38,211,.07)}.vp-row359.cash{background:rgba(245,158,11,.07)}
.vp-tb359{display:table;margin-top:4px;padding:2px 8px;border-radius:999px;color:#fff;font:800 11px Arial,sans-serif;white-space:nowrap}
.vp-tb359.unpaid{background:#dc2626}.vp-tb359.paid{background:#16a34a}.vp-tb359.bilty{background:#a21caf}.vp-tb359.cash{background:#d97706}
@media(max-width:1100px){.vp-terms359{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v2.21.360 — Order Desk / VP: Payment by Party */
.od-party360{display:table;margin-top:4px;padding:2px 9px;border-radius:999px;font:800 11.5px Arial,sans-serif;color:#fff;background:#0e7490}
.od-party360.wait{background:#a16207}
.od-partybtn360{border-color:#0891b2!important}
.od-partyf360 small{font-weight:600;opacity:.75}
.od-partyprev360{margin:10px 0;padding:10px 12px;border:1px solid #0e7490;border-radius:10px;background:rgba(14,116,144,.12);font-size:13px}
.od-partytbl360{width:100%;border-collapse:collapse;margin-bottom:8px}.od-partytbl360 th,.od-partytbl360 td{padding:4px 6px;border-bottom:1px solid rgba(148,163,184,.25);text-align:left;font-size:12.5px}
.od-partysum360{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.od-partysum360 .big{font-size:16px}.od-partysum360 .big b{color:#22d3ee}

/* v2.21.363 Orders screen bill-source filter */
.order-toolbar select.order-origin362{border:2px solid #22c55e!important;font-weight:800!important;color:#eafff1!important}

/* v2.21.364 */
/* v2.21.365: Orders toolbar wraps instead of overlapping (bill-source filter added) */
@media (min-width:761px){.order-toolbar{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:9px!important}
.order-toolbar>.order-search{flex:1 1 320px!important;min-width:260px!important}
.order-toolbar>select{flex:0 0 140px!important;width:140px!important}
.order-toolbar>select.order-origin362{flex:0 0 205px!important;width:205px!important}
.order-toolbar>select.order-createdby-filter246{flex:0 0 200px!important;width:200px!important}
.order-toolbar>.order-datef316{flex:1 1 100%!important}}
.eye365{display:inline-block;vertical-align:-3px;margin-right:6px;flex:0 0 auto}
.report-big365 tr.rpt-more365 td{text-align:center!important;color:#7dd3fc!important;font-weight:800!important;padding:10px!important}
.order-more365{width:100%;margin:8px 0 4px;font-weight:800}
/* v2.21.367 sync status */
.sync367{position:fixed;z-index:9999;font:700 12px/1.35 Arial,'Segoe UI',sans-serif;border-radius:10px;padding:7px 12px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sync367.ok,.sync367.wait{right:14px;bottom:12px;max-width:360px}
.sync367.ok{background:#052e1a;color:#86efac;border:1px solid #16a34a}
.sync367.wait{background:#3b2604;color:#fcd34d;border:1px solid #d97706}
.sync367 small{display:block;font-weight:600;color:#fde68a;margin-top:3px}
.sync367.mirror{left:50%;transform:translateX(-50%);bottom:10px;background:#7c2d12;color:#fff7ed;border:1px solid #fb923c;max-width:92vw;text-align:center}
@media print{.sync367{display:none!important}}

/* v2.21.371 Draft bills — waiting for VP No. */
.od-draft370{margin-bottom:14px;border:1px solid rgba(250,204,21,.45)!important}
.od-draft370 .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.od-draft370.empty{border-color:rgba(34,197,94,.35)!important}
.od-draftcount370{display:inline-block;min-width:26px;padding:1px 8px;border-radius:999px;background:#facc15;color:#1f1300;font-weight:900;font-size:13px;margin-left:6px;text-align:center}
.od-drafttbl370 td,.od-drafttbl370 th{vertical-align:middle}
.od-drafttbl370 .chk{width:34px;text-align:center}
.od-drafttbl370 .chk input{width:17px;height:17px;accent-color:#22c55e}
.od-drafttbl370 td small{display:block;opacity:.7;font-size:11px}
.od-drafttbl370 tr.sel370 td{background:rgba(34,197,94,.10)!important}
.od-draftvp370{width:150px;height:34px;border-radius:8px;border:2px solid #facc15!important;background:#0b1a30!important;color:#fff!important;font-weight:800;padding:0 10px}
.od-draftvp370:focus{border-color:#22c55e!important;outline:none}
#odDraftGo370{font-weight:900}
#odDraftGo370:disabled{opacity:.5;cursor:not-allowed}

/* v2.21.373: the three most-used reports sit first and stand out */
.report-type-strip button.rpt-top372,.reports-centre-v21921 .report-type-flat button.rpt-top372{
  background:linear-gradient(90deg,rgba(214,150,24,.38),rgba(120,78,8,.22))!important;
  box-shadow:inset 0 0 0 1.5px #f2b632!important;border-radius:9px!important;
}
.report-type-strip button.rpt-top372:hover,.reports-centre-v21921 .report-type-flat button.rpt-top372:hover{background:linear-gradient(90deg,rgba(236,170,36,.52),rgba(140,92,10,.32))!important}
.report-type-strip button.rpt-top372.active,.reports-centre-v21921 .report-type-flat button.rpt-top372.active{background:linear-gradient(90deg,rgba(244,180,40,.62),rgba(168,108,10,.42))!important;box-shadow:inset 0 0 0 2px #ffd166,0 0 22px rgba(242,182,50,.25)!important}
.report-type-strip button.rpt-top372 .report-menu-icon{background:linear-gradient(135deg,#f6c445,#d08a10)!important;border-color:#ffd977!important;color:#3a2600!important}
.report-type-strip button.rpt-top372 b{color:#ffe08a!important}
.report-type-strip button.rpt-top372 small{color:#f3d9a0!important}
.report-type-strip button.rpt-top372::before{content:"★ MOST USED";position:absolute;top:3px;right:8px;font-size:8.5px;font-weight:800;letter-spacing:.06em;color:#ffd166}
body.light-mode .report-type-strip button.rpt-top372,body.light-mode .reports-centre-v21921 .report-type-flat button.rpt-top372{background:linear-gradient(90deg,#fff1c7,#ffe3a1)!important;box-shadow:inset 0 0 0 1.5px #d99a10!important}
body.light-mode .report-type-strip button.rpt-top372.active,body.light-mode .reports-centre-v21921 .report-type-flat button.rpt-top372.active{background:linear-gradient(90deg,#ffd978,#ffc94a)!important;box-shadow:inset 0 0 0 2px #b97f00!important}
body.light-mode .report-type-strip button.rpt-top372 b{color:#5a3a00!important}
body.light-mode .report-type-strip button.rpt-top372 small{color:#7a5a1c!important}
body.light-mode .report-type-strip button.rpt-top372::before{color:#a86f00}
/* v2.21.377: actions on draft bills */
.od-drafttbl370 td.od-dact377{white-space:nowrap}.od-drafttbl370 td.od-dact377 .btn{margin:0 3px 0 0;padding:4px 9px;font-size:11.5px}
/* v2.21.378: WhatsApp link (read-only linked device) */
.walink378 p{margin:.4em 0}.walink378 code{background:#0f2238;padding:1px 6px;border-radius:5px}
.walink-qr378{display:block;width:280px;height:280px;margin:10px auto;background:#fff;padding:8px;border-radius:12px}
.walink-ok378{color:#34d399;font-weight:700}.walink-warn378{color:#fbbf24;font-weight:700}.walink-ok378.big,.walink-warn378.big{font-size:18px;margin-bottom:6px}
.walink-steps378{margin:6px 0 4px 18px;line-height:1.6}
.wa-history-bubble.wa-out378{margin-left:12%;border-color:#1f6f4a!important;background:linear-gradient(90deg,rgba(16,94,60,.35),rgba(10,60,40,.2))!important}
.wa-query378{margin:8px 0;padding:8px 10px;border-radius:8px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);color:#fde68a;font-size:12.5px}
body.light-mode .wa-query378{color:#7a5200;background:#fff6dc}
/* v2.21.379: connection status inside the header Sync button */
#syncBtn.net-wait379{border-color:#d97706!important;color:#fcd34d!important;background:rgba(217,119,6,.12)!important}
#syncDot.warn379{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.6)}
/* v2.21.383: Daniyal Online register — tick a bill to send it to the Order Desk / VP Dispatch List */
.od-table.od-vpl383 th.chk,.od-table.od-vpl383 td.chk{width:54px;text-align:center}
.od-table.od-vpl383 th.chk small{display:block;font-size:10px;font-weight:700;opacity:.8}
.od-table.od-vpl383 input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#7c3aed}
.od-table.od-vpl383 tr.vpl383 td{background:rgba(124,58,237,.12)}
.vpl-tag383{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;background:#7c3aed;color:#fff;font-size:10.5px;font-weight:700}
.report-bookcode383 input{font-weight:800!important;letter-spacing:.5px}
/* v2.21.384: report filters — Today / This Month / All never cut off at the right edge */
html body #host .reports-centre-v221137 .reports-main .report-toolbar .report-search{grid-column:span 2!important;min-width:0!important}
html body #host .reports-centre-v221137 .reports-main .report-toolbar .report-quick{grid-column:span 2!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important;min-width:0!important;justify-content:flex-start!important;align-items:end!important;overflow:visible!important}
html body #host .reports-centre-v221137 .reports-main .report-toolbar .report-quick .btn{flex:1 1 auto!important;min-width:max-content!important}
html body #host .reports-centre-v221137 .reports-main .report-toolbar .report-actions{flex-wrap:wrap!important;overflow:visible!important}
html body #host .reports-centre-v221137 .reports-main .report-toolbar .report-actions .btn{min-width:max-content!important}
.od-table .btn.od-del384{background:#3a0f18!important;border:1px solid #ff6172!important;color:#ffd5da!important}
.od-table .btn.od-del384:hover{background:#ff6172!important;color:#fff!important}
/* v2.21.387: transfer register — serial no., search and date filter */
.tf-find387{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:4px 0 10px}
.tf-find387 label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:var(--muted)}
.tf-find387 .tf-q387{flex:1 1 320px}.tf-find387 input{height:34px;padding:4px 10px;border-radius:8px;border:1px solid #c9a227;background:#fff8dc;color:#111;font-weight:700}
.tf-find387 .tf-q387 input{width:100%}.tf-count387{font-size:11px;color:var(--muted);margin:0 0 4px;font-weight:700}
th.tf-sn387,td.tf-sn387{width:62px;text-align:center}
td.tf-sn387 span{display:inline-block;min-width:34px;padding:3px 8px;border-radius:999px;background:#1d4ed8;color:#fff;font-weight:800;font-size:13px}
/* v2.21.388: WhatsApp pictures */
.wa-img388{display:block;margin:6px 0;cursor:zoom-in;max-width:180px}
.wa-img388 img{display:block;max-width:100%;max-height:160px;border-radius:10px;border:1px solid #2c4a6e;object-fit:cover;background:#0b1626}
.wa-img388.big{max-width:420px}.wa-img388.big img{max-height:340px;object-fit:contain}
.wa-imgerr388{display:block;margin:6px 0;font-size:12px;color:#fbbf24}
.wa-imgtext388{margin:8px 0;padding:8px 10px;border-radius:10px;background:#0f2a1d;border:1px solid #1f7a4d}
.wa-imgtext388 b{display:block;font-size:11px;color:#6ee7b7;margin-bottom:4px}.wa-imgtext388 pre{margin:0;white-space:pre-wrap;font:600 13px/1.45 inherit;color:#e8fff3;font-family:inherit}
.wa-lightbox388{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:zoom-out}
.wa-lightbox388 img{max-width:94vw;max-height:84vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.wa-lb-bar388{display:flex;gap:8px}
/* v2.21.389: WhatsApp — PDF chip and matched-customer tick */
.wa-pdf389{display:inline-flex;align-items:center;gap:8px;margin:6px 0;padding:8px 12px;border-radius:10px;background:#2a1414;border:1px solid #f87171;color:#fee2e2;text-decoration:none}
.wa-pdf389 b{font-size:13px}.wa-pdf389 small{font-size:11px;color:#fca5a5;text-decoration:underline}
.wa-custok389{color:#34d399}
.wa-dbg390{margin:8px 0;font-size:11px;color:#94a3b8}.wa-dbg390 code{display:block;white-space:pre-wrap;word-break:break-all;margin-top:4px}
/* v2.21.392: WhatsApp Inbox — SGM style */
.wa-layout.wa-layout392{display:grid!important;grid-template-columns:minmax(270px,.9fr) minmax(380px,1.5fr) minmax(330px,1.1fr)!important;gap:12px!important;align-items:start}
.wa-list392{padding:0!important;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 150px)}
.wa-lhead392{padding:14px 14px 10px;background:linear-gradient(180deg,#0b2a22,#0a1a2c);border-bottom:1px solid #1f3a55}
.wa-lhead392 h3{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:18px}.wa-logo392{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#22c55e;color:#04210f;font-size:16px}
.wa-lhead392 small{display:block;font-size:11.5px;line-height:1.35}.wa-lhead392 small.ok{color:#34d399;font-weight:700}.wa-lhead392 small.warn{color:#fbbf24;font-weight:700}
.wa-q392{margin:10px 12px 6px;height:36px;border-radius:10px;border:1px solid #2c4a6e;background:#071322;color:#e5eefc;padding:0 12px;font-size:13px}
.wa-f392{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;border-bottom:1px solid #1f3a55}
.wa-f392 button{border:1px solid #2c4a6e;background:#0c1a2c;color:#cbd5e1;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer}.wa-f392 button.on{background:#22c55e;border-color:#22c55e;color:#03210f}
.wa-threads392{overflow-y:auto;padding:6px}
.wa-th392{display:flex;gap:10px;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:12px;padding:9px 8px;cursor:pointer;color:inherit;margin-bottom:2px}
.wa-th392:hover{background:#0f2238}.wa-th392.on{background:#0f2a2a;border-color:#22c55e}
.wa-av392{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}.wa-av392.big{flex-basis:46px;width:46px;height:46px}
.wa-thm392{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wa-thm392 .r1{display:flex;justify-content:space-between;gap:6px}.wa-thm392 .r1 b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-thm392 .r1 small{font-size:11px;color:#94a3b8;white-space:nowrap}
.wa-thm392 .r2{font-size:12.5px;color:#a8b8cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-thm392 .r3{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.wa-thm392 .r3 em{margin-left:auto;font-style:normal;background:#22c55e;color:#03210f;font-weight:800;font-size:11px;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}
.wa-th392.unread .r1 b{color:#fff}.wa-th392.unread .r2{color:#e2e8f0;font-weight:700}
.wa-tag392{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.3px;padding:2px 6px;border-radius:5px;background:#334155;color:#e2e8f0}
.wa-tag392.order{background:#3f3a0a;color:#fde047}.wa-tag392.voice{background:#2e1065;color:#c4b5fd}.wa-tag392.photo{background:#0c3a4a;color:#67e8f9}.wa-tag392.lead{background:#4a1d0a;color:#fdba74}.wa-tag392.done{background:#064e3b;color:#6ee7b7}.wa-tag392.ask{background:#1e3a8a;color:#bfdbfe}
.wa-chat392{padding:0!important;display:flex;flex-direction:column;max-height:calc(100vh - 150px);overflow:hidden}
.wa-chead392{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #1f3a55;background:#0a1a2c}
.wa-cname392{flex:1;min-width:0}.wa-cname392 b{display:block;font-size:16px}.wa-cname392 small{font-size:12px;color:#94a3b8}.wa-cname392 .ok{color:#34d399;font-weight:700}.wa-cname392 .warn{color:#fbbf24}
.wa-anbtn392{background:#22c55e!important;border-color:#22c55e!important;color:#03210f!important;font-weight:800!important}
.wa-body392{flex:1;overflow-y:auto;padding:12px 16px;min-height:300px;background:#0b1422 radial-gradient(#12223a 1px,transparent 1px) 0 0/18px 18px;display:flex;flex-direction:column;gap:8px}
.wa-note392{align-self:center;font-size:11px;color:#fde68a;background:#2a230b;border:1px solid #5b4a12;border-radius:8px;padding:4px 10px}
.wa-day392{align-self:center}.wa-day392 span{font-size:11px;background:#1e293b;color:#cbd5e1;border-radius:7px;padding:3px 10px}
.wa-msg392{max-width:78%;padding:8px 10px 5px;border-radius:12px;background:#1c2a3d;border:1px solid #273a55;cursor:pointer;position:relative}
.wa-msg392.in{align-self:flex-start;border-top-left-radius:3px}.wa-msg392.out{align-self:flex-end;background:#0f3b2c;border-color:#165a41;border-top-right-radius:3px}
.wa-msg392.sel{outline:2px solid #22c55e;outline-offset:1px}
.wa-txt392{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.wa-meta392{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:10.5px;color:#94a3b8;margin-top:3px}
.wa-voice392 audio{width:250px;max-width:100%;height:36px}.wa-vrow392{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:3px}.wa-vrow392 small{font-size:11px;color:#a5b4fc}
.wa-trb392{border:1px solid #6d28d9;background:#2e1065;color:#ddd6fe;border-radius:7px;font-size:11.5px;font-weight:800;padding:3px 9px;cursor:pointer}
.wa-tx392{margin-top:6px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.25);font-size:13px;line-height:1.5;white-space:pre-wrap}.wa-tx392 b{display:block;font-size:10.5px;color:#6ee7b7;margin-bottom:2px;letter-spacing:.3px}
.wa-cfoot392{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid #1f3a55;font-size:12px;color:#94a3b8;background:#0a1a2c}
.wa-work392{padding:8px 14px 12px;border-top:1px solid #1f3a55;background:#0a1626}.wa-work392 summary{cursor:pointer;font-size:12.5px;font-weight:800;color:#cbd5e1}.wa-work392 summary small{font-weight:400;color:#94a3b8}
.wa-work392 textarea{width:100%;margin-top:6px;font-size:14px}.wa-work392 .actions{margin-top:6px;display:flex;gap:6px}
.wa-aihead392{padding:14px 16px;border-radius:14px 14px 0 0;background:linear-gradient(135deg,#2e1065,#0f2a3d);border:1px solid #3b2a7a;border-bottom:0}
.wa-aihead392 small{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:#c4b5fd}.wa-aihead392 b{display:block;font-size:19px;margin:2px 0 4px}.wa-aihead392 span{font-size:12px;color:#cbd5e1;line-height:1.4}
.wa-ai392>.card{border-top-left-radius:0!important;border-top-right-radius:0!important;margin-top:0!important}
@media(max-width:1250px){.wa-layout.wa-layout392{grid-template-columns:minmax(250px,1fr) minmax(340px,1.6fr)!important}.wa-ai392{grid-column:1/-1}}
.wa-miss396{margin-top:6px;padding:6px 8px;border-radius:8px;background:#3b2506;border:1px solid #b45309;color:#fde68a;font-size:12.5px}
.wa-tx392{font-size:15px!important;line-height:1.6!important}.wa-txt392{font-size:15px!important}
#waBookQ396{flex:1;min-width:0}