:root{
  --bg:#f5f5f5;--panel:#fff;--ink:#344054;--muted:#667085;--line:#e5e7eb;--line2:#d5d9df;
  --blue:#2f6dff;--green:#22b85a;--red:#ff4d4f;--black:#171717;--yellow:#f6be00;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Noto Sans Bengali","Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}input,select,textarea{outline:none}.compatHidden{display:none!important}.span2{grid-column:1/-1}
.bizShell{min-height:100vh;display:grid;grid-template-columns:180px minmax(0,1fr)}
.bizSidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid #ececec;overflow:auto;z-index:20}
.bizBrand{height:50px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid #eee;text-decoration:none;color:#111}.bizBrand strong{font-size:16px}.hbLogoMark{position:relative;width:29px;height:26px;display:inline-block}.hbLogoMark:before,.hbLogoMark:after,.hbLogoMark i,.hbLogoMark b,.hbLogoMark em{content:"";position:absolute;background:#f5bf00;border-radius:999px}.hbLogoMark:before{width:9px;height:9px;left:10px;top:1px}.hbLogoMark:after{width:22px;height:7px;left:3px;top:10px}.hbLogoMark i{width:16px;height:6px;left:6px;top:18px}.hbLogoMark b{width:6px;height:6px;left:0;top:10px}.hbLogoMark em{width:6px;height:6px;right:0;top:10px}
.bizNav{padding:14px 9px 24px;display:grid;gap:0}.bizNav button{height:34px;border:0;background:transparent;text-align:left;color:#4b5563;padding:0 7px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px}.bizNav button:hover{background:#f1f1f1}.bizNav button.active{background:#dedede}.bizNav .subscribeBtn{background:#79c8ed;margin-bottom:0;color:#355266}.navIcon{width:22px;text-align:center;font-size:16px}.navDivider{height:1px;background:#d8dde3;margin:8px 0}
.bizWorkspace{min-width:0;background:#f5f5f5;padding:0 18px 26px}.bizTopbar{height:50px;margin:0 -18px;background:#fff;border-bottom:1px solid #e8e8e8;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#444}.topActions{display:flex;align-items:center;gap:12px}.avatar{width:28px;height:28px;border-radius:50%;background:#eceef1;display:inline-grid;place-items:center;font-size:11px}.noticeBand{display:none}.viewPane{display:none}.viewPane.active{display:block}.hPage{padding-top:16px;position:relative;min-height:calc(100vh - 50px)}
button,.softBtn,.blackBtn,.greenBtn,.redBtn,.grayBtn{border:1px solid var(--line2);border-radius:5px;background:#fff;color:#4b5563;height:36px;padding:0 12px;font-weight:600}.blackBtn{background:#171717;color:#fff;border-color:#171717}.greenBtn{background:#15b858;color:#fff;border-color:#15b858}.redBtn{background:#e53e3e;color:#fff;border-color:#e53e3e}.grayBtn{background:#9c9c9c;color:white;border-color:#9c9c9c}.fullBtn{width:100%}.smallBtn{height:34px;padding:0 9px}.pageOnlyTitle{margin:0 0 16px;font-size:22px;color:#465569}.pageTitleRow,.historyHeader,.dueTitleRow,.contactTitle,.expenseTop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.pageTitleRow h1,.historyHeader h1,.dueTitleRow h1,.contactTitle h1,.expenseTop h1{font-size:22px;margin:0;color:#465569}.pageToolbar,.historyRight,.historyFilters{display:flex;align-items:center;gap:8px}.pageToolbar select,.historyFilters select{height:36px;border:1px solid var(--line2);border-radius:5px;background:white;padding:0 10px;color:#667085}.metricPill{height:36px;background:white;border:1px solid var(--line2);border-radius:5px;padding:0 11px;display:flex;align-items:center;gap:4px;font-size:12px}.greenText{color:#16a34a!important}.redText{color:#ef4444!important}.hPanel{background:#fff;border:1px solid #e6e6e6;border-radius:7px}.flatPanel{border-radius:5px}.searchBox{height:36px;border:1px solid var(--line2);border-radius:5px;background:#fff;display:flex;align-items:center;gap:7px;padding:0 10px;min-width:310px;color:#667085}.searchBox input{border:0;height:32px;flex:1;min-width:0;background:transparent}.searchBox span{margin-left:auto}.wideSearch{min-width:335px}.hTableWrap{overflow:auto}.hTable{width:100%;border-collapse:collapse;min-width:760px}.hTable th,.hTable td{height:32px;padding:6px 10px;border-bottom:1px solid #ececec;font-size:11px;text-align:left;color:#667085;white-space:nowrap}.hTable th{background:#fafafa;font-weight:600}.hTable td{color:#4b5563}.hTable .greenStatus{display:inline-block;background:#dff8e7;color:#1b9c46;border-radius:5px;padding:4px 12px}.emptyStateCard{width:318px;background:#fff;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,.14);padding:18px;text-align:center;color:#667085;position:absolute;left:50%;top:56%;transform:translate(-50%,-50%)}.emptyStateCard .docIcon{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:#dbeafe;color:#2b78ff;display:grid;place-items:center;font-size:24px}.emptyStateCard h2{color:#101828;font-size:20px;margin:0 0 6px}.emptyStateCard p{font-size:12px;line-height:1.5;margin:0 0 10px}.emptyStateCard span{display:block;border:1px solid #e5e7eb;border-radius:5px;padding:10px;font-size:11px}.centeredLarge{top:50%;}.centerEmpty{min-height:330px;display:grid;place-items:center;color:#667085;font-size:12px}.centerTopText{padding-top:14px;text-align:center;color:#667085;font-size:12px}
/* HOME */
.dashTitleRow{height:52px;display:flex;align-items:center;justify-content:space-between}.dashTitleRow h1{font-size:22px;margin:0;color:#111}.onlineSwitch{display:flex;align-items:center;gap:8px;font-size:12px}.onlineSwitch input{display:none}.onlineSwitch i{width:34px;height:19px;background:#111;border-radius:20px;position:relative}.onlineSwitch i:after{content:"";width:15px;height:15px;background:white;border-radius:50%;position:absolute;right:2px;top:2px}.dashBoardBox{background:#fff;border:1px solid #e3e3e3;border-radius:7px;padding:12px}.dashControlRow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.balancePill{border:1px solid #51d989;border-radius:5px;background:#f3fff7;color:#2d9f58;padding:7px 10px;font-size:12px}.periodTabs{height:36px;display:flex;align-items:center;background:#f0f1f3;border-radius:5px}.periodTabs select{height:30px;width:78px;border:0;background:white;border-radius:3px;margin-left:3px;padding:0 7px;font-size:11px}.periodTabs span{font-size:11px;color:#697386;padding:0 14px}.periodTabs button{height:36px;border:1px solid #ddd;background:white;margin-left:4px}.summaryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.summaryCard{height:62px;background:white;border:1px solid #e6e6e6;border-radius:5px;padding:9px 8px;position:relative}.summaryCard small{display:block;font-size:11px;color:#596579;margin-bottom:3px}.summaryCard strong{font-size:20px}.summaryCard em{position:absolute;right:11px;top:13px;font-style:normal}.salesCard strong,.salesCard em,.stockCard strong,.stockCard em,.payableCard strong,.payableCard em{color:#16a34a}.purchaseCard strong,.purchaseCard em{color:#2563eb}.expenseCard strong,.expenseCard em{color:#f97316}.dueCard strong,.dueCard em{color:#ef4444}.megaOffer{height:210px;margin-top:10px;border:1px solid #cfd4da;border-radius:5px;overflow:hidden;display:grid;grid-template-columns:34% 50% 16%;align-items:center;background:linear-gradient(103deg,#fff 0 33%,#ffca05 33% 100%)}.offerLeft{text-align:center}.goldText{font-size:42px;line-height:.9;font-weight:1000;color:#d88a00;text-shadow:1px 1px white,-1px -1px #8a5600}.offerMain{text-align:center;color:#000}.offerMain b{display:block;font-size:32px}.offerMain strong{display:block;font-size:29px;background:white;border-radius:18px;padding:8px;margin:7px 0}.offerMain span{font-size:22px;font-weight:800}.megaOffer>button{justify-self:center;border:0;border-radius:25px;background:white;font-size:18px;font-weight:900;padding:0 20px;box-shadow:0 3px 8px rgba(0,0,0,.3)}.primaryLinks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;border:1px solid #e5e5e5;border-radius:7px;margin-top:12px;padding:6px}.primaryLinks button{height:76px;border:0;background:#f4f4f4;color:#687385}.primaryLinks span{display:block;font-size:28px}.linkSections{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.linkGroup{border:1px solid #e5e5e5;border-radius:7px;overflow:hidden}.linkGroup.full{grid-column:1/-1}.linkGroup h3{height:28px;margin:0;padding:6px 8px;border-bottom:1px solid #e5e5e5;font-size:11px}.linkGroup>div{display:grid;grid-template-columns:repeat(4,1fr)}.linkGroup.full>div{grid-template-columns:repeat(9,1fr)}.linkGroup button{height:62px;border:0;background:white;font-size:22px}.linkGroup button span{display:block;font-size:10px;color:#687385;margin-top:3px}
/* PURCHASE + SELL */
#purchasesView,#salesView{padding-top:14px;margin:0 -2px}.purchaseClone,.sellClone{height:calc(100vh - 64px);min-height:610px;display:grid;grid-template-columns:548px minmax(0,1fr);gap:18px}.purchasePicker,.sellPicker{background:#fff;padding:8px 18px 0 8px;border-right:1px solid #eceff1}.purchasePicker h2,.sellPicker h2{font-size:14px;margin:0 0 8px;color:#344054}.purchaseSearchRow{display:grid;grid-template-columns:minmax(0,1fr) 43px 43px 43px;gap:7px}.purchaseSearch{height:41px;border:1px solid #d8dde3;border-radius:6px;display:flex;align-items:center;gap:7px;padding:0 9px;background:white;color:#667085}.purchaseSearch input{border:0;height:38px;flex:1;min-width:0}.pickerTool{height:41px;border:1px solid #d8dde3;border-radius:6px;background:white}.purchaseProductList{margin-top:8px;border-top:1px solid #eceff1}.purchaseProductItem{height:57px;border-bottom:1px solid #e8e8e8;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:0 8px}.purchaseProductItem .prodIcon{font-size:22px;color:#52606f}.purchaseProductItem b{display:block;font-size:12px;color:#52606f}.purchaseProductItem small{display:block;font-size:11px;color:#667085}.addWrap{display:flex}.addBtn,.addMore{height:28px;border:0;background:#171717;color:white}.addBtn{padding:0 9px;border-radius:6px 0 0 6px}.addMore{width:26px;border-radius:0 6px 6px 0;border-left:1px solid #555}.purchaseStage{min-width:0;position:relative;display:grid;grid-template-rows:minmax(0,1fr) 43px 43px;gap:8px}.sellStage{grid-template-rows:minmax(0,1fr) 43px}.purchaseStageMain{background:#fff;border-radius:7px;position:relative;overflow:auto}.purchaseEmptyState{position:absolute;inset:0;padding-top:55px;text-align:center;color:#667085;font-size:12px}.purchaseDetailForm{display:none;width:min(720px,calc(100% - 42px));margin:28px auto;padding:18px;border:1px solid #e5e7eb;border-radius:7px;background:#fff}.purchaseDetailForm.show{display:block}.purchaseFormTitle{font-size:16px;font-weight:800;margin-bottom:14px}.purchaseFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.purchaseDetailForm label,.drawerForm label,.printerSettings label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#4b5563}.purchaseDetailForm input,.purchaseDetailForm select,.drawerForm input,.drawerForm select,.printerSettings select{height:40px;border:1px solid #d9dee5;border-radius:6px;padding:0 10px;background:white}.purchaseDetailForm button[type=submit]{width:100%;height:40px;background:#246bfe;border:0;color:white;border-radius:6px;margin-top:14px;font-weight:800}.purchaseBatch,.purchaseTotalBar{height:43px;background:white;border:1px solid #eceff1;border-radius:7px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:11px}.purchaseBatch input{height:29px;width:140px;border:1px solid #d9dee5;border-radius:6px}.purchaseChevron{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;border:0;background:#111;color:white}.sellStage .purchaseChevron{bottom:34px}.purchaseHistoryCompat{display:none}
/* CASHBOX */
.cashCards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.cashCard{height:72px;border-radius:8px;padding:13px 14px;position:relative}.cashCard small{display:block;font-size:11px}.cashCard strong{display:block;font-size:18px;margin-top:4px;color:#111}.cashCard span{position:absolute;right:15px;top:22px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center}.cashCard.blue{background:#b8d5fa}.cashCard.green{background:#b8efca}.cashCard.red{background:#ffc0c1}.cashTablePanel{margin-top:12px;padding:12px}.sectionTitleLine{display:flex;justify-content:space-between;align-items:center}.sectionTitleLine h2,.sectionTitleLine strong{font-size:15px;margin:0}.fakeCashRow{margin-top:12px;padding:16px;min-height:145px}.mutedRule{height:1px;background:#ddd;margin-top:18px}
.drawerHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.drawerHead h2{margin:0;font-size:20px;color:#344054}.drawerHead button{border:0;background:transparent;font-size:26px;height:auto}.drawerForm{display:grid;gap:13px}.drawerForm textarea{min-height:100px;border:1px solid #d9dee5;border-radius:6px;padding:10px}
/* HISTORY */
.historyHeader{align-items:center}.historyFilters{margin:16px 0 12px}.historyRight{display:flex}.flatPanel{position:relative;min-height:105px}.historyFilters+.flatPanel{min-height:105px}.salesHistoryView .flatPanel{min-height:560px}
/* DUE */
.dueTitleRow{align-items:center}.dueSplit{display:grid;grid-template-columns:535px minmax(0,1fr);gap:0;margin-top:12px}.dueListPanel,.dueDetailPanel{min-height:520px;border-radius:0}.dueListPanel{border-right:1px solid #ddd}.tabsLine{height:42px;display:flex;align-items:flex-end;gap:20px;padding:0 16px}.tabsLine b,.tabsLine span{padding:0 0 10px}.tabsLine b{border-bottom:2px solid #111}.dueSearchRow,.marketingSearch{display:flex;gap:8px;padding:8px 14px;border-bottom:1px solid #e5e7eb}.dueSearchRow .searchBox{min-width:0;flex:1}.dueDateRow{height:54px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:flex-end;padding:0 16px}.inlineDrawer{position:absolute;right:0;top:0;width:360px;min-height:100%;background:#fff;box-shadow:-5px 0 15px rgba(0,0,0,.12);padding:18px;display:none;z-index:40}.inlineDrawer.open{display:block}
/* EXPENSE */
.expenseTop{align-items:flex-start}.expenseActions{display:grid;justify-items:end;gap:7px}.expenseActions>div{display:flex;gap:8px}.expenseTable{margin-top:12px;min-height:560px;position:relative}.expenseTable .emptyStateCard{top:54%}
/* CONTACTS */
.contactTitle{align-items:center}.contactSplit{display:grid;grid-template-columns:535px minmax(0,1fr);gap:0;margin-top:10px}.contactList,.contactDetail{min-height:520px;border-radius:0}.contactList{position:relative}.contactJoin{position:absolute;left:12px;right:12px;bottom:10px;width:calc(100% - 24px)}
/* TUTORIAL */
.tutorialWrap{max-width:1240px;margin:0 auto}.tutorialWrap h1{font-size:25px;color:#111}.tutorialGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tutorialGrid article{background:white;border:1px solid #ddd;border-radius:4px;overflow:hidden}.tutorialGrid article b{display:block;font-size:14px;color:#252525;padding:8px}.thumb{height:110px;position:relative;background:repeating-linear-gradient(0deg,#f6c600 0 34px,#fff 34px 69px)}.thumb:after{content:"";position:absolute;inset:14px 45px;background:linear-gradient(135deg,#f8f8f8,#d8dde6);border:1px solid #aaa;opacity:.75}.thumb i{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#f6b800;color:#fff;display:grid;place-items:center;font-style:normal;font-size:22px}.tutorialHelp{margin-top:20px;background:#d9f8e4;border-radius:6px;text-align:center;padding:12px;color:#4b5563}.tutorialHelp strong{color:#15a951;font-size:18px}
/* PRODUCT */
.productFilters{margin-bottom:8px}.productTotal{font-size:12px;margin:0 0 3px}.productTotal b{font-weight:700}.productIconCell{display:flex;align-items:center;gap:9px}.cubeIcon{font-size:27px}.actionDots{font-size:20px}.productRowAction{text-align:right}
/* STOCK */
.stockFilters{margin:17px 0}.stockFilters .searchBox{min-width:310px}.stockFilters .metricPill{margin-left:0}
/* ACCESS */
.accessSplit{display:grid;grid-template-columns:535px minmax(0,1fr);gap:0}.accessList,.accessDetail{min-height:520px;border-radius:0;position:relative;padding:12px}.accessPerson{display:flex;gap:10px;align-items:center;background:#f1f1f1;border-left:3px solid #111;margin-top:28px;padding:12px}.accessPerson div,.accessIdentity div{display:grid;gap:2px}.accessPerson b,.accessIdentity b{font-size:13px}.accessPerson span,.accessIdentity span{font-size:11px;color:#8b95a5}.accessPerson small,.accessIdentity small{background:#ffc78f;color:#8a4c11;border-radius:4px;padding:2px 5px}.accessBottom{position:absolute;bottom:0;left:12px;right:12px;width:calc(100% - 24px)}.accessIdentity{display:flex;align-items:center;gap:10px;border-bottom:1px solid #eee;padding-bottom:10px}.accessIdentity button{margin-left:auto}.accessRule{display:grid;grid-template-columns:1fr auto;gap:3px;margin-top:12px}.accessRule b{grid-column:1}.accessRule p{grid-column:1;margin:0;color:#8b95a5;font-size:11px}.accessRule button{grid-column:2;grid-row:1/3}.editRole{float:right;margin-top:18px}
/* PRINTER */
.printerSplit{display:grid;grid-template-columns:530px minmax(0,1fr);gap:18px}.printerSettings{padding:16px;display:grid;align-content:start;gap:12px;min-height:520px}.printerSettings h2{font-size:16px;margin:0}.printerSettings small{color:#98a2b3}.printerButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}.printerPreview{min-height:740px;overflow:hidden}.printerTabs{height:36px;background:#ccc;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center}.printerTabs b{background:white;border-radius:5px;margin:4px;padding:6px}.previewLabel{padding:10px;font-size:11px;color:#667085}.previewLabel span{float:right}.receipt{width:470px;min-height:625px;background:white;border:1px solid #d5d5d5;box-shadow:0 4px 15px rgba(0,0,0,.13);margin:6px auto;padding:22px;color:#111;font-family:Arial,"Noto Sans Bengali",sans-serif}.receiptBrand{display:flex;gap:9px}.storeIcon{font-size:34px}.receiptBrand div{display:grid}.receipt hr{border:0;border-top:1px solid #777}.receipt h2{text-align:center;font-size:18px;margin:3px 0;border-bottom:1px solid #777}.receiptMeta{display:grid;grid-template-columns:1fr 1fr;font-size:11px;margin:8px 0}.receiptMeta>div:last-child{text-align:right}.receipt table{width:100%;border-collapse:collapse;font-size:10px}.receipt th,.receipt td{border:1px solid #bbb;padding:5px}.receiptTotals{display:grid;grid-template-columns:1fr 1fr;font-size:11px;margin:10px 0}.receiptTotals>div:last-child{text-align:right}.receipt p{font-size:11px}.receiptSign{display:flex;justify-content:space-between;margin-top:55px}.receiptSign span{border-top:1px solid #aaa;padding-top:4px;font-size:10px}
/* REPORT */
.reportBox{background:#fff;border:1px solid #e4e4e4;border-radius:6px;padding:8px;margin-top:12px}.reportBox h3{font-size:12px;margin:0 0 8px}.reportLine{min-height:47px;border:1px solid #e8e8e8;border-radius:5px;padding:8px;display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12px}.reportLine small{display:block;color:#98a2b3;margin-top:2px}.reportLine.big{min-height:62px}.reportTwo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.miniReport{padding:8px;text-align:center}.miniReport h2{font-size:14px;margin:0}.miniReport>b{display:block;margin:5px}.greenWide,.redWide{border:0;border-radius:4px;color:white;min-height:36px}.greenWide{background:#58c66f}.redWide{background:#ff6666}.miniReport button{width:100%}.totalDueBox{padding:8px;margin-top:10px}.totalDueBox>div:first-child{display:flex;justify-content:space-between}.dueDuo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:7px}.dueDuo>div{text-align:center;padding:8px}.reportGridTitle{font-size:14px}.reportTiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.reportTiles button{height:68px;background:white;border:1px solid #e0e0e0;font-size:24px}.reportTiles span{display:block;font-size:11px;color:#667085}
/* MARKETING */
.marketingSplit{display:grid;grid-template-columns:610px minmax(0,1fr);gap:10px;margin-top:26px}.marketingContacts{min-height:550px}.marketingSearch .searchBox{min-width:0;flex:1}.marketingComposer{padding:0 0}.marketingTop{display:flex;justify-content:space-between;gap:15px}.phoneAdd{display:grid;grid-template-columns:180px 46px;gap:10px}.phoneAdd input{height:40px;border:1px solid #d9dee5;border-radius:5px;padding:0 10px}.marketingQuick{text-align:right}.marketingQuick>span{background:#dbf7df;color:#1aaa4a;border-radius:15px;padding:4px 10px;font-size:11px;margin-left:5px}.marketingQuick>div{margin-top:10px}.marketingQuick button{color:#f97316;border-color:#f97316;margin-left:5px}.marketingComposer h3{font-size:13px}.messageBox{background:#fff;border-radius:7px;padding:12px;position:relative}.messageBox b{font-size:12px}.messageBox textarea{width:100%;height:130px;border:0;resize:none;padding-top:8px}.messageBox span{position:absolute;right:12px;bottom:12px;color:#667085;font-size:11px}.marketingComposer>small{display:block;margin:5px 0 18px;color:#667085}.marketingSend{display:grid;grid-template-columns:1fr 1fr;gap:10px}.marketingSend button{background:#8eaeea;color:white;border-color:#8eaeea}
/* ONLINE SHOP */
.onlineWrap{max-width:780px;margin:0 auto}.onlineBanner{width:100%;height:245px;object-fit:cover;display:block}.bannerDots{text-align:center;color:#a0a0a0}.shopStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;padding:14px 0}.shopStats article{background:#fff;border-radius:5px;padding:14px}.shopStats small{display:block;color:#7a8595}.shopStats b{font-size:20px}.shopToolsTop{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:18px 0}.shopToolsTop button{border:0;background:transparent;font-size:20px}.shopToolsTop span{display:block;font-size:11px}.shopToolGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.shopToolGrid button{height:68px;background:white;border:1px solid #e5e5e5;font-size:22px}.shopToolGrid span{display:block;font-size:11px;color:#667085}
/* EXPIRY / WARRANTY / RECYCLE */
.expiryHead{border-bottom:1px solid #e5e5e5;padding-bottom:8px}.expiryTabs{display:flex;gap:20px;align-items:center}.expiryTabs b{font-size:16px}.expiryTabs span{font-size:13px}.expiryHead .historyFilters{margin:8px 0}.expiryHead p{font-size:11px;color:#2563eb}.recycleTabs{height:40px;border-radius:6px;background:#cfcfcf;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;text-align:center;margin-top:12px}.recycleTabs b{background:white;margin:4px;border-radius:4px;padding:6px}.recycleTabs span{font-size:12px;color:#667085}
.toast{position:fixed;right:22px;bottom:22px;z-index:200;background:#111;color:#fff;padding:12px 15px;border-radius:6px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1200px){.bizShell{grid-template-columns:170px minmax(0,1fr)}.purchaseClone,.sellClone{grid-template-columns:430px minmax(0,1fr)}.dueSplit,.contactSplit,.accessSplit{grid-template-columns:430px minmax(0,1fr)}.tutorialGrid{grid-template-columns:repeat(3,1fr)}.marketingSplit{grid-template-columns:450px minmax(0,1fr)}.printerSplit{grid-template-columns:430px minmax(0,1fr)}}
@media(max-width:900px) and (hover:none) and (pointer:coarse){.bizShell{grid-template-columns:1fr}.bizSidebar{position:relative;height:auto}.bizNav{grid-template-columns:repeat(3,1fr)}.bizTopbar{margin:0}.bizWorkspace{padding:0 10px 20px}.summaryGrid,.cashCards{grid-template-columns:1fr 1fr}.purchaseClone,.sellClone,.dueSplit,.contactSplit,.accessSplit,.printerSplit,.marketingSplit{grid-template-columns:1fr;height:auto}.purchasePicker,.sellPicker{min-height:300px}.tutorialGrid{grid-template-columns:repeat(2,1fr)}.reportTiles{grid-template-columns:repeat(3,1fr)}.shopToolGrid{grid-template-columns:repeat(2,1fr)}}
.simpleList{padding:8px 12px}.simpleList>div{min-height:46px;border-bottom:1px solid #ececec;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.simpleList>div b{color:#344054}.simpleList>div span{color:#667085}.amountMinus{color:#ef4444!important;font-weight:700}.amountPlus{color:#16a34a!important;font-weight:700}.badge{display:inline-block;background:#eef4ff;color:#315fc5;border-radius:999px;padding:3px 8px}.purchaseEmptyProduct{padding:18px;text-align:center;color:#98a2b3;font-size:12px}

/* =========================================================
   HISHABEE HOME PIXEL MATCH v4 — 2026-09-20
   UI-only overrides. Existing IDs/actions/data logic untouched.
   ========================================================= */
@media (min-width: 901px){
  html,body{background:#f5f5f5;color:#465569;font-family:"Noto Sans Bengali UI","Noto Sans Bengali","Nirmala UI","Segoe UI",Arial,sans-serif}
  .bizShell{grid-template-columns:201px minmax(0,1fr);min-height:100vh;background:#f5f5f5}
  .bizSidebar{height:100vh;border-right:1px solid #ececec;background:#fff;scrollbar-width:none}
  .bizSidebar::-webkit-scrollbar{width:0;height:0}
  .bizBrand{height:55px;padding:0 8px;border-bottom:1px solid #eeeeee;gap:0}
  .hbBrandImg{display:block;width:150px;height:42px;object-fit:contain;object-position:left center}
  .hbLogoMark,.bizBrand>strong{display:none!important}

  .bizNav{padding:22px 11px 24px;gap:0}
  .bizNav button{height:36px;padding:0 8px;border-radius:0;color:#4e5969;font-size:14px;font-weight:600;gap:8px;line-height:1.15}
  .bizNav button:hover{background:#f1f1f1}
  .bizNav button.active{background:#e6e6e6;color:#465569}
  .bizNav .subscribeBtn{height:36px;background:#81c8f3;color:#355266;font-weight:600;margin:0}
  .navIconImg{width:25px;height:25px;object-fit:contain;flex:0 0 25px;display:block}
  .subscribeBtn .navIconImg{width:24px;height:24px;flex-basis:24px}
  .navDivider{height:1px;background:#d6dbe0;margin:12px 7px}
  .dashboardMode .bizNav button[data-view="reports"],
  .dashboardMode .bizNav button[data-view="marketing"],
  .dashboardMode .bizNav button[data-view="onlineShop"],
  .dashboardMode .bizNav button[data-view="expiry"],
  .dashboardMode .bizNav button[data-view="warranty"],
  .dashboardMode .bizNav button[data-view="recycle"],
  .dashboardMode .bizNav .navDividerExtra{display:none}

  .bizWorkspace{padding:0 29px 28px;background:#f5f5f5}
  .bizTopbar{height:82px;margin:0 -29px;padding:0 29px;display:block;position:relative;background:#fff;border-bottom:0;color:#333}
  .bizTopbar:before{content:"";position:absolute;left:0;right:0;top:55px;border-top:1px solid #eeeeee}
  .bizTopbar:after{content:"";position:absolute;left:0;right:0;bottom:0;border-top:1px solid #eeeeee}
  .crumb{position:absolute;left:29px;bottom:0;height:27px;display:flex;align-items:center;font-size:11px;color:#333}
  .topActions{position:absolute;right:29px;top:0;height:55px;display:flex;align-items:center;gap:12px;color:#20242a;font-size:12px}
  .topIcon{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center}
  .topIcon svg{display:block;width:19px;height:19px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .settingsAction{display:inline-flex;align-items:center;gap:4px}
  .settingsAction .topIcon{width:18px;height:18px}
  .settingsAction .topIcon svg{width:18px;height:18px}
  .avatar{width:31px;height:31px;background:#eceef1;border:1px solid #d8dde2;color:#4b5563;font-size:11px}
  .shopName{font-size:12px;color:#333}
  .chev{font-size:17px;color:#111;margin-left:-4px}

  .dashTitleRow{height:56px;align-items:center}
  .dashTitleRow h1{font-size:22px;font-weight:800;line-height:1;color:#111;margin:0}
  .onlineSwitch{font-size:12px;color:#333;gap:8px}
  .onlineSwitch i{width:35px;height:20px;background:#111}
  .onlineSwitch i:after{width:16px;height:16px;right:2px;top:2px}

  .dashBoardBox{background:#fff;border:1px solid #e8eaed;border-radius:7px;padding:15px 14px 14px;box-shadow:none}
  .dashControlRow{height:40px;margin-bottom:10px;align-items:flex-start}
  .balancePill{height:36px;display:flex;align-items:center;border:1px solid #48d681;border-radius:5px;background:#f0fdf4;color:#23854b;padding:0 11px;font-size:12px;line-height:1}
  .balancePill b{font-weight:600}
  .periodTabs{height:40px;background:#f0f1f3;border-radius:5px;display:flex;align-items:center;padding-left:4px}
  .periodTabs select{height:31px;width:80px;border:0;background:#fff;border-radius:3px;margin:0;padding:0 8px;font-size:11px;color:#4b5563}
  .periodTabs span{height:31px;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#697386}
  .periodTabs button{height:40px;margin-left:4px;padding:0 12px;background:#fff;border:1px solid #d7dbe0;border-radius:5px;color:#667085;font-size:11px}

  .summaryGrid{grid-template-columns:repeat(3,1fr);gap:8px}
  .summaryCard{height:72px;border:1px solid #e3e6e9;border-radius:6px;padding:10px 9px;background:#fff}
  .summaryCard small{font-size:12px;line-height:1.2;color:#596579;margin:0 0 5px}
  .summaryCard strong{font-size:21px;line-height:1;font-weight:700}
  .summaryCard em{right:12px;top:12px;font-size:18px}

  .megaOffer{height:344px;margin-top:12px;border:1px solid #cfd4da;border-radius:6px;overflow:hidden;display:block;background:#fff}
  .megaOfferImg{display:block;width:100%;height:100%;object-fit:fill}
  .offerLeft,.offerMain,.megaOffer>button{display:none!important}

  .primaryLinks{height:132px;margin-top:14px;padding:8px;border:1px solid #e5e7ea;border-radius:7px;gap:16px;background:#fff}
  .primaryLinks button{height:auto;min-height:0;border:0;border-radius:4px;background:#f3f4f6;color:#667085;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:15px;font-weight:600;line-height:1.2}
  .homePrimaryIcon{display:block;width:48px;height:48px;object-fit:contain}
  .primaryLinks span{display:none!important}

  .linkSections{gap:8px;margin-top:10px}
  .linkGroup{border:1px solid #e4e7ea;border-radius:7px;background:#fff;overflow:hidden}
  .linkGroup h3{height:32px;margin:0;padding:7px 9px;border-bottom:1px solid #e4e7ea;font-size:12px;line-height:18px;font-weight:600;color:#465569}
  .linkGroup>div{grid-template-columns:repeat(4,1fr)}
  .linkGroup button{height:82px;border:0;border-radius:0;background:#fff;color:#667085;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:0;font-weight:600;padding:0}
  .linkGroup.full>div{grid-template-columns:repeat(9,1fr)}
  .linkGroup.full button{height:92px}
  .homeSmallIcon{display:block;width:46px;height:46px;object-fit:contain}
  .linkGroup button span{display:block;margin:0;font-size:11px;line-height:1.2;color:#667085;white-space:nowrap}
}
@media (min-width:901px){
  .crumb{left:12px}
  .topActions{right:18px}
  .balanceIcon{width:16px;height:16px;object-fit:contain;display:block;margin-right:1px}
  .summaryCard em{width:24px;height:24px;display:block;font-size:0;background-repeat:no-repeat;background-position:center;background-size:contain}
  .salesCard em{background-image:url("assets/ui/summary-sales.png")}
  .purchaseCard em{background-image:url("assets/ui/summary-purchase.png")}
  .expenseCard em{background-image:url("assets/ui/summary-expense.png")}
  .stockCard em{background-image:url("assets/ui/summary-stock.png")}
  .dueCard em{background-image:url("assets/ui/summary-due.png")}
  .payableCard em{background-image:url("assets/ui/summary-payable.png")}
}

/* =========================================================
   HISHABEE SIDEBAR PIXEL MATCH v5 — 2026-09-20
   Target: user-provided exact Hishabee sidebar screenshot.
   UI-only sizing/spacing/icon overrides; app logic untouched.
   ========================================================= */
@media (min-width: 901px){
  .bizShell{grid-template-columns:168px minmax(0,1fr)}
  .bizSidebar{height:100vh;overflow-x:hidden;overflow-y:auto;border-right:1px solid #ececec;background:#fff;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  .bizSidebar::-webkit-scrollbar{width:0;height:0;display:none}
  .bizBrand{height:50px;padding:0 12px;border-bottom:1px solid #eeeeee;display:flex;align-items:center}
  .hbBrandImg{width:105px;height:auto;max-height:34px;object-fit:contain;object-position:left center}

  .bizNav{padding:18px 11px 14px;display:grid;gap:0;align-content:start}
  .bizNav button{height:30px;min-height:30px;padding:0 6px;border-radius:0;color:#465569;font-size:13px;font-weight:600;line-height:1;gap:6px;white-space:nowrap}
  .bizNav button:hover{background:#f1f1f1}
  .bizNav button.active{background:#e4e4e4;color:#465569}
  .bizNav .subscribeBtn{height:30px;min-height:30px;background:#81c8f3;color:#355266;font-size:13px;font-weight:600;margin:0;border-radius:0}

  .navIconImg{width:25px;height:25px;flex:0 0 25px;object-fit:contain;display:block}
  .subscribeBtn .navIconImg{width:23px;height:27px;flex-basis:23px}
  .navDivider{height:1px;background:#d6dbe0;margin:7px 7px}
  .navDividerExtra{display:block!important}

  .dashboardMode .bizNav button[data-view="reports"],
  .dashboardMode .bizNav button[data-view="marketing"],
  .dashboardMode .bizNav button[data-view="onlineShop"],
  .dashboardMode .bizNav button[data-view="expiry"],
  .dashboardMode .bizNav button[data-view="warranty"],
  .dashboardMode .bizNav button[data-view="recycle"]{display:flex!important}

  /* Preserve target main-content x-position after narrower sidebar. */
  .bizWorkspace{padding-left:29px}
}

/* HISHABEE SIDEBAR SCROLL FIX v6 — sidebar remains visually identical but can scroll at normal browser zoom. */

/* =========================================================
   HOME PERIOD FILTER FUNCTION v7 — 2026-09-20
   Five real period buttons matching the Hishabee dashboard.
   Existing data/storage logic is preserved.
   ========================================================= */
@media (min-width:901px){
  .periodTabs{height:40px;display:flex;align-items:center;background:#eef0f2;border-radius:5px;padding:4px;gap:0;overflow:visible}
  .periodTabs #periodFilter{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}
  .periodTabs .periodBtn{height:31px;min-width:66px;margin:0;border:0;border-radius:3px;background:transparent;color:#697386;font-size:11px;font-family:inherit;font-weight:600;padding:0 13px;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;box-shadow:none}
  .periodTabs .periodBtn:hover{background:rgba(255,255,255,.55);color:#4b5563}
  .periodTabs .periodBtn.active{background:#fff;color:#4b5563;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .periodTabs .periodRefresh{height:40px;margin:-4px -4px -4px 5px;padding:0 13px;background:#fff;border:1px solid #d7dbe0;border-radius:5px;color:#667085;font-size:11px;font-family:inherit;cursor:pointer;white-space:nowrap}
  .periodTabs .periodRefresh:hover{background:#fafafa}
}

/* Target geometry refinement for the five dashboard period tabs */
@media (min-width:901px){
  .periodTabs{height:36px;padding:3px;border-radius:5px}
  .periodTabs .periodBtn{height:30px;min-width:54px;padding:0 9px;font-size:11px;border-radius:3px}
  .periodTabs .periodRefresh{height:36px;min-width:68px;margin:-3px -3px -3px 6px;padding:0 10px;font-size:11px}
}


/* HOME PERIOD BUTTONS v8 — all five period choices are real buttons, never a select/dropdown. */
@media (min-width:901px){
  .periodTabs{
    height:36px!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    padding:3px!important;
    background:#eef0f2!important;
    border-radius:5px!important;
    overflow:visible!important;
  }
  .periodTabs .periodBtn{
    appearance:none!important;
    -webkit-appearance:none!important;
    height:30px!important;
    min-width:58px!important;
    margin:0!important;
    padding:0 11px!important;
    border:0!important;
    border-radius:3px!important;
    background:transparent!important;
    color:#697386!important;
    font:600 11px/1 inherit!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    box-shadow:none!important;
  }
  .periodTabs .periodBtn.active{
    background:#fff!important;
    color:#4b5563!important;
    box-shadow:0 1px 2px rgba(0,0,0,.05)!important;
  }
  .periodTabs .periodBtn:focus{outline:none!important}
  .periodTabs .periodRefresh{
    appearance:none!important;
    -webkit-appearance:none!important;
    height:36px!important;
    min-width:76px!important;
    margin:-3px -3px -3px 6px!important;
    padding:0 11px!important;
    border:1px solid #d7dbe0!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#667085!important;
    font:600 11px/1 inherit!important;
    cursor:pointer!important;
    white-space:nowrap!important;
  }
}

/* v9: real on/off behavior for the Online Sales switch. Default/off is light gray + knob left; checked/on keeps the target black + knob right. */
.onlineSwitch{cursor:pointer;user-select:none}
.onlineSwitch i{background:#c9cdd2;transition:background-color .16s ease}
.onlineSwitch i:after{left:2px;right:auto;transition:transform .16s ease}
.onlineSwitch input:checked + i{background:#111}
.onlineSwitch input:checked + i:after{transform:translateX(15px)}
.onlineSwitch input:focus-visible + i{outline:2px solid #4f8cff;outline-offset:2px}

/* v10: Home sales summary card opens the period-aware Sell History page. */
.summaryCard.summaryAction{cursor:pointer;user-select:none}
.summaryCard.summaryAction:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.summaryCard.summaryAction:active{transform:translateY(1px)}
#salesHistoryView .flatPanel{min-height:560px}
/* v12: Purchase history opened from the Home purchase summary. */
#purchaseHistoryView .flatPanel{min-height:560px}
#purchaseHistoryView .hTableWrap{position:relative;z-index:1}
#purchaseHistoryView .emptyStateCard{z-index:2}


/* Purchase > Add Product drawer (v17) */
.productAddOverlay{position:fixed;inset:0;z-index:9999;display:none}.productAddOverlay.open{display:block}.productAddScrim{position:absolute;inset:0;border:0;background:rgba(0,0,0,.38);padding:0;margin:0;width:100%;height:100%;cursor:default}.productAddDrawer{position:absolute;right:0;top:0;width:405px;max-width:calc(100vw - 28px);height:100%;background:#fff;box-shadow:-5px 0 18px rgba(0,0,0,.12);display:flex;flex-direction:column;color:#344054}.productAddHeader{height:50px;min-height:50px;border-bottom:1px solid #eceff1;display:flex;align-items:center;justify-content:center;position:relative;padding:0 46px}.productAddHeader h2{font-size:16px;margin:0;font-weight:800}.productAddClose{position:absolute;right:12px;top:7px;width:36px;height:36px;border:0;background:transparent;font-size:23px;color:#333;cursor:pointer}.productAddForm{min-height:0;flex:1;display:flex;flex-direction:column}.productAddScroll{flex:1;min-height:0;overflow-y:auto;padding:12px 22px 18px}.productUploadBox{height:67px;border:1px dashed #d9dee5;border-radius:6px;display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:2px!important;font-weight:600!important;color:#667085!important;cursor:pointer;text-align:center}.productUploadBox .uploadIcon{font-size:22px;line-height:20px;color:#111}.productUploadBox span{font-size:10px}.productUploadBox small{font-size:9px;color:#98a2b3;font-weight:600}.productUploadBox strong{font-size:9px;color:#344054;font-weight:600;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.productAddSectionTitle{font-size:12px;font-weight:800;margin:16px 0 8px;padding-bottom:8px;border-bottom:1px solid #dcdfe3;color:#344054}.productAddSectionTitle.second{margin-top:14px}.productAddForm label:not(.productUploadBox):not(.productToggleRow){display:grid;gap:6px;margin-bottom:9px;font-size:10px;font-weight:700;color:#344054}.productAddForm label i{font-style:normal;color:#ef4444}.productAddForm input[type=text],.productAddForm input[type=number],.productAddForm input:not([type]),.productAddForm select{height:30px;border:1px solid #d8dde3;border-radius:5px;padding:0 9px;background:#fff;font:inherit;color:#344054;outline:none}.productAddForm input:focus,.productAddForm select:focus,.productDescription textarea:focus{border-color:#98a2b3;box-shadow:0 0 0 1px #98a2b3}.productAddTwoCol{display:grid;grid-template-columns:1fr 1fr;gap:8px}.productToggleRow{height:35px;border:1px solid #e0e3e7;border-radius:5px;padding:0 8px;display:flex!important;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:10px!important;font-weight:600!important;color:#344054!important;position:relative}.productToggleRow input{position:absolute;opacity:0;pointer-events:none}.productToggleRow b{width:31px;height:18px;border-radius:20px;background:#8d9297;position:relative;transition:.15s}.productToggleRow b:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.15s}.productToggleRow input:checked+b{background:#151515}.productToggleRow input:checked+b:before{transform:translateX(13px)}.productDescription{border:1px solid #d8dde3;border-radius:0;margin:4px 0 10px}.descToolbar{height:38px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;padding:0 10px;font-size:10px;color:#344054}.descToolbar span:first-child{margin-right:4px}.productDescription textarea{display:block;width:100%;height:54px;border:0;resize:none;padding:9px;font-size:10px;outline:none;box-sizing:border-box}.productAddActions{height:58px;min-height:58px;border-top:1px solid #eceff1;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 12px}.productAddActions button{height:36px;border-radius:5px;font-size:11px;cursor:pointer}.productAddCancel{background:#fff;border:1px solid #d9dee5;color:#344054}.productAddSubmit{background:#8f8f8f;border:1px solid #8f8f8f;color:#fff;font-weight:700}.productAddSubmit:not(:disabled):hover{background:#222;border-color:#222}.productAddScroll::-webkit-scrollbar{width:5px}.productAddScroll::-webkit-scrollbar-thumb{background:#8a8f93;border-radius:10px}.productAddScroll{scrollbar-width:thin;scrollbar-color:#8a8f93 transparent}.purchaseAddOpenLock{overflow:hidden}
@media(max-width:620px) and (hover:none) and (pointer:coarse){.productAddDrawer{width:100%;max-width:100%}.productAddTwoCol{grid-template-columns:1fr}}

/* v18 — Purchase Add -> selected cart panel, matched to supplied reference */
.purchaseCompatForm{display:none!important}.purchaseCartPanel{display:none;min-height:100%;background:#fff;color:#42526b}.purchaseCartPanel.show{display:block}.purchaseCartTop{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 10px;border-bottom:1px solid #eceff1;font-size:13px}.purchaseCartTop strong{font-weight:800}.purchaseClearCart{border:0;background:transparent;color:#ff4d4f;font-size:11px;cursor:pointer}.purchaseCartList{padding:0 8px 10px}.purchaseCartItem{position:relative;background:#f7f7f8;border-radius:3px;margin-top:0;padding:6px 7px 10px}.purchaseCartItemHead{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:start}.purchaseCartThumb{width:23px;height:23px;border:1px solid #dce1e6;border-radius:2px;background:white;display:grid;place-items:center;color:#718096;font-size:13px}.purchaseCartName{font-size:12px;font-weight:800;line-height:1.25}.purchaseCartStock{display:inline-block;margin-top:4px;background:#d7f0fb;color:#4f86a5;border-radius:3px;padding:3px 7px;font-size:10px}.purchaseCartActions{display:flex;align-items:center;gap:6px}.purchaseCartMini{height:27px;border:1px solid #d8dde3;border-radius:4px;background:white;padding:0 8px;color:#52606f;font-size:11px;cursor:pointer}.purchaseCartMini.toolOnly{width:30px;padding:0;font-size:14px}.purchaseCartRemove{width:22px;height:22px;border:0;border-radius:50%;background:#ff5d62;color:#fff;font-weight:900;line-height:1;cursor:pointer}.purchaseCartFields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px}.purchaseCartField{display:grid;gap:5px;font-size:10px;font-weight:800;color:#52606f}.purchaseCartField span::after{content:" *";color:#ff4d4f}.purchaseCartField input{height:31px;border:1px solid #d9dee5;border-radius:5px;background:#fff;padding:0 8px;color:#475467;font-size:11px}.purchaseCartField input[readonly]{background:#f8fafc;color:#667085}.purchaseProductItem{position:relative}.purchaseProductItem .addWrap{position:relative}.purchaseAddCount{position:absolute;right:-4px;top:-13px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ff5d62;color:#fff;font-size:10px;display:grid;place-items:center;box-sizing:border-box}.purchaseDateInput{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* === Purchase selected-cart full target v19 === */
#purchasesView .purchaseClone{height:540px;min-height:540px}
#purchasesView .purchaseStage{height:540px;display:flex;flex-direction:column;gap:8px;min-height:0}
#purchasesView .purchaseStageMain{flex:1 1 auto;min-height:0}
#purchasesView .purchaseCartPanel{height:100%;min-height:0}
#purchasesView .purchaseCartPanel.show{display:block}
#purchasesView .purchaseCheckoutSummary{display:none;box-sizing:border-box;position:relative;background:#fff;border:1px solid #eceff1;border-radius:0 0 7px 7px;color:#52606f;padding:7px 7px 10px;min-height:214px}
#purchasesView .purchaseStage.cartActive{gap:0}
#purchasesView .purchaseStage.cartActive .purchaseStageMain{flex:0 0 326px;height:326px;border-radius:7px 7px 0 0;overflow:hidden}
#purchasesView .purchaseStage.cartActive .purchaseCheckoutSummary{display:flex;flex:1 1 auto;flex-direction:column}
#purchasesView .purchaseStage.cartActive .purchaseBatch,
#purchasesView .purchaseStage.cartActive .purchaseTotalBar,
#purchasesView .purchaseStage.cartActive > .purchaseChevron{display:none}
/* Checkout summary toggle: expanded = detailed totals, collapsed = batch + total bars */
#purchasesView .purchaseStage.cartActive.checkoutCollapsed{gap:8px}
#purchasesView .purchaseStage.cartActive.checkoutCollapsed .purchaseStageMain{flex:1 1 auto;height:auto;border-radius:7px;overflow:auto}
#purchasesView .purchaseStage.cartActive.checkoutCollapsed .purchaseCheckoutSummary{display:none}
#purchasesView .purchaseStage.cartActive.checkoutCollapsed .purchaseBatch,
#purchasesView .purchaseStage.cartActive.checkoutCollapsed .purchaseTotalBar{display:flex}
#purchasesView .purchaseStage.cartActive.checkoutCollapsed > .purchaseChevron{display:grid;place-items:center;bottom:35px;cursor:pointer}
#purchasesView .purchaseCheckoutChevron{position:absolute;z-index:4;left:50%;top:-15px;transform:translateX(-50%);width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#080808;color:#fff;display:grid;place-items:center;font-size:19px;line-height:1;cursor:pointer;box-shadow:none}
#purchasesView .purchaseCheckoutRows{margin-top:2px;display:grid;gap:0;font-size:11px}
#purchasesView .purchaseCheckoutRow{min-height:35px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px dotted #d7dbe0;padding:0 1px;color:#5a6575}
#purchasesView .purchaseCheckoutRow label,#purchasesView .purchaseCheckoutRow>span{font-weight:600}
#purchasesView .purchaseCheckoutRow strong{font-size:12px;font-weight:700;color:#516071}
#purchasesView .purchaseDiscountControl{display:grid;grid-template-columns:160px 48px;height:31px;border:1px solid #d9dee5;border-radius:5px;overflow:hidden;background:#fff}
#purchasesView .purchaseDiscountControl input,#purchasesView .purchaseDiscountControl select,#purchasesView .purchaseDeliveryInput{height:29px;border:0;background:#fff;color:#667085;font-size:11px;outline:none;box-sizing:border-box}
#purchasesView .purchaseDiscountControl input{padding:0 9px;min-width:0}
#purchasesView .purchaseDiscountControl select{border-left:1px solid #eceff1;text-align:center;padding:0 4px}
#purchasesView .purchaseDeliveryInput{width:160px;border:1px solid #d9dee5;border-radius:5px;padding:0 9px}
#purchasesView .purchaseCheckoutGrand{border-bottom:0;min-height:38px}
#purchasesView .purchaseCheckoutGrand strong{color:#ff4d4f;font-size:14px;font-weight:800}
#purchasesView .purchasePaymentButtons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;padding-top:9px}
#purchasesView .purchasePaymentButtons button{height:32px;border:0;border-radius:4px;background:#151515;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
#purchasesView .purchasePaymentButtons button:active{transform:translateY(1px)}
#purchasesView .purchaseCartTop{height:37px;padding:0 9px 0 8px;font-size:12px}
#purchasesView .purchaseCartList{padding:0 7px 8px}
#purchasesView .purchaseCartItem{padding:6px 7px 10px;background:#f6f6f7}
#purchasesView .purchaseCartName{font-size:12px}
#purchasesView .purchaseCartStock{margin-top:3px;padding:3px 7px}
#purchasesView .purchaseCartFields{gap:10px;margin-top:7px}
#purchasesView .purchaseCartField input{height:31px}
@media(max-width:1200px){#purchasesView .purchaseClone{height:540px;min-height:540px}#purchasesView .purchaseStage{height:540px}.purchaseDiscountControl{grid-template-columns:minmax(95px,1fr) 45px!important}.purchaseDeliveryInput{width:140px!important}}
@media(max-width:900px) and (hover:none) and (pointer:coarse){#purchasesView .purchaseClone{height:auto;min-height:0}#purchasesView .purchaseStage{height:auto;min-height:540px}#purchasesView .purchaseStage.cartActive .purchaseStageMain{flex-basis:326px}.purchasePaymentButtons{grid-template-columns:1fr!important}}

/* === v20 Purchase Add dropdown / barcode target === */
#purchasesView .purchasePicker{position:relative;z-index:4;overflow:visible}
#purchasesView .purchaseStage{position:relative;z-index:1}
#purchasesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 150px 43px 43px;gap:7px}
.purchaseBarcodeField{height:41px;border:1px solid #d8dde3;border-radius:6px;background:#fff;display:flex;align-items:center;min-width:0;overflow:hidden;box-sizing:border-box}
.purchaseBarcodeField input{height:39px;min-width:0;flex:1;border:0;outline:0;background:transparent;padding:0 8px;color:#667085;font-size:12px}
.purchaseBarcodeField input::placeholder{color:#98a2b3}
.purchaseBarcodeField span{width:34px;min-width:34px;height:39px;border-left:1px solid #edf0f3;display:grid;place-items:center;font-size:17px;line-height:1}
#purchasesView .purchaseProductList,#purchasesView .purchaseProductItem,#purchasesView .addWrap{overflow:visible}
#purchasesView .purchaseProductItem{z-index:1}
#purchasesView .purchaseProductItem.quickOpen{z-index:20}
.purchaseQuickPopup{position:absolute;right:-1px;top:31px;width:178px;background:#fff;border:1px solid #d9dee5;border-radius:4px;box-shadow:0 3px 9px rgba(0,0,0,.16);padding:8px;z-index:60;color:#52606f;box-sizing:border-box}
.purchaseQuickPopupTitle{font-size:12px;font-weight:800;line-height:1.25;margin-bottom:2px;color:#4c5b6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.purchaseQuickPopupCost{font-size:10px;color:#7a8594;margin-bottom:8px}
.purchaseQuickPopup label{display:grid;gap:5px;font-size:10px;font-weight:700;color:#4c5b6e}
.purchaseQuickQty{height:31px;border:1px solid #d9dee5;border-radius:4px;background:#fff;padding:0 7px;outline:0;color:#52606f;font-size:11px;box-sizing:border-box}
.purchaseQuickQty:focus{border-color:#98a2b3;box-shadow:0 0 0 1px #98a2b3}
.purchaseQuickLabel{font-size:10px;font-weight:700;color:#4c5b6e;margin-top:10px;margin-bottom:6px}
.purchaseQuickChoices{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.purchaseQuickChoice{height:24px;border:0;border-radius:3px;background:#f1f3f5;color:#6b7280;font-size:10px;cursor:pointer;padding:0}
.purchaseQuickChoice:hover{background:#e7eaee;color:#344054}
.purchaseQuickTotal{height:31px;margin-top:8px;border-top:1px solid #eef0f2;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;color:#52606f}
.purchaseQuickTotal strong{font-size:12px;color:#344054}
.purchaseQuickSubmit{width:100%;height:28px;border:0;border-radius:3px;background:#171717;color:#fff;font-size:10px;font-weight:800;cursor:pointer}
.purchaseQuickSubmit:active{transform:translateY(1px)}
#purchasesView .addMore.quickActive{background:#2a2a2a}
@media(max-width:1200px){#purchasesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 120px 43px 43px}.purchaseQuickPopup{width:170px}}
@media(max-width:900px) and (hover:none) and (pointer:coarse){#purchasesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 110px 43px 43px}}


/* === v22 Purchase checkout toggle: collapsed by default, expands even with empty cart === */
#purchasesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary{display:none!important}
#purchasesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#purchasesView .purchaseStage.checkoutCollapsed .purchaseTotalBar{display:flex!important}
#purchasesView .purchaseStage.checkoutCollapsed > .purchaseChevron{display:grid!important;place-items:center;cursor:pointer}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary{display:flex!important;flex:0 0 214px;flex-direction:column}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseBatch,
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseTotalBar,
#purchasesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron{display:none!important}
#purchasesView .purchaseStage:not(.checkoutCollapsed):not(.cartActive) .purchaseStageMain{flex:1 1 auto;height:auto;border-radius:7px 7px 0 0;overflow:auto}
#purchasesView .purchaseStage:not(.checkoutCollapsed):not(.cartActive) .purchaseCheckoutSummary{border-radius:0 0 7px 7px}

/* === v23 Sell UI mirrors Purchase UI === */
#salesView .sellClone{height:540px;min-height:540px}
#salesView .sellPicker{position:relative;z-index:4;overflow:visible}
#salesView .purchaseStage{height:540px;display:flex;flex-direction:column;gap:8px;min-height:0;position:relative;z-index:1}
#salesView .purchaseStageMain{flex:1 1 auto;min-height:0}
#salesView .purchaseCartPanel{height:100%;min-height:0}
#salesView .purchaseCartPanel.show{display:block}
#salesView .purchaseCheckoutSummary{display:none;box-sizing:border-box;position:relative;background:#fff;border:1px solid #eceff1;border-radius:0 0 7px 7px;color:#52606f;padding:7px 7px 10px;min-height:214px}
#salesView .purchaseStage.cartActive{gap:0}
#salesView .purchaseStage.cartActive .purchaseStageMain{flex:0 0 326px;height:326px;border-radius:7px 7px 0 0;overflow:hidden}
#salesView .purchaseStage.cartActive .purchaseCheckoutSummary{display:flex;flex:1 1 auto;flex-direction:column}
#salesView .purchaseStage.cartActive .purchaseBatch,
#salesView .purchaseStage.cartActive .purchaseTotalBar,
#salesView .purchaseStage.cartActive > .purchaseChevron{display:none}
#salesView .purchaseStage.cartActive.checkoutCollapsed{gap:8px}
#salesView .purchaseStage.cartActive.checkoutCollapsed .purchaseStageMain{flex:1 1 auto;height:auto;border-radius:7px;overflow:auto}
#salesView .purchaseStage.cartActive.checkoutCollapsed .purchaseCheckoutSummary{display:none}
#salesView .purchaseStage.cartActive.checkoutCollapsed .purchaseBatch,
#salesView .purchaseStage.cartActive.checkoutCollapsed .purchaseTotalBar{display:flex}
#salesView .purchaseStage.cartActive.checkoutCollapsed > .purchaseChevron{display:grid;place-items:center;bottom:35px;cursor:pointer}
#salesView .purchaseCheckoutChevron{position:absolute;z-index:4;left:50%;top:-15px;transform:translateX(-50%);width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#080808;color:#fff;display:grid;place-items:center;font-size:19px;line-height:1;cursor:pointer;box-shadow:none}
#salesView .purchaseCheckoutRows{margin-top:2px;display:grid;gap:0;font-size:11px}
#salesView .purchaseCheckoutRow{min-height:35px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px dotted #d7dbe0;padding:0 1px;color:#5a6575}
#salesView .purchaseCheckoutRow label,#salesView .purchaseCheckoutRow>span{font-weight:600}
#salesView .purchaseCheckoutRow strong{font-size:12px;font-weight:700;color:#516071}
#salesView .purchaseDiscountControl{display:grid;grid-template-columns:160px 48px;height:31px;border:1px solid #d9dee5;border-radius:5px;overflow:hidden;background:#fff}
#salesView .purchaseDiscountControl input,#salesView .purchaseDiscountControl select,#salesView .purchaseDeliveryInput{height:29px;border:0;background:#fff;color:#667085;font-size:11px;outline:none;box-sizing:border-box}
#salesView .purchaseDiscountControl input{padding:0 9px;min-width:0}
#salesView .purchaseDiscountControl select{border-left:1px solid #eceff1;text-align:center;padding:0 4px}
#salesView .purchaseDeliveryInput{width:160px;border:1px solid #d9dee5;border-radius:5px;padding:0 9px}
#salesView .purchaseCheckoutGrand{border-bottom:0;min-height:38px}
#salesView .purchaseCheckoutGrand strong{color:#ff4d4f;font-size:14px;font-weight:800}
#salesView .purchasePaymentButtons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;padding-top:9px}
#salesView .purchasePaymentButtons button{height:32px;border:0;border-radius:4px;background:#151515;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
#salesView .purchasePaymentButtons button:active{transform:translateY(1px)}
#salesView .purchaseCartTop{height:37px;padding:0 9px 0 8px;font-size:12px}
#salesView .purchaseCartList{padding:0 7px 8px}
#salesView .purchaseCartItem{padding:6px 7px 10px;background:#f6f6f7}
#salesView .purchaseCartName{font-size:12px}
#salesView .purchaseCartStock{margin-top:3px;padding:3px 7px}
#salesView .purchaseCartFields{gap:10px;margin-top:7px}
#salesView .purchaseCartField input{height:31px}
#salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 150px 43px 43px;gap:7px}
#salesView .purchaseProductList,#salesView .purchaseProductItem,#salesView .addWrap{overflow:visible}
#salesView .purchaseProductItem{z-index:1}
#salesView .purchaseProductItem.quickOpen{z-index:20}
#salesView .addMore.quickActive{background:#2a2a2a}
#salesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary{display:none!important}
#salesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#salesView .purchaseStage.checkoutCollapsed .purchaseTotalBar{display:flex!important}
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron{display:grid!important;place-items:center;cursor:pointer}
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary{display:flex!important;flex:0 0 214px;flex-direction:column}
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseBatch,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseTotalBar,
#salesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron{display:none!important}
#salesView .purchaseStage:not(.checkoutCollapsed):not(.cartActive) .purchaseStageMain{flex:1 1 auto;height:auto;border-radius:7px 7px 0 0;overflow:auto}
#salesView .purchaseStage:not(.checkoutCollapsed):not(.cartActive) .purchaseCheckoutSummary{border-radius:0 0 7px 7px}
@media(max-width:1200px){#salesView .sellClone{height:540px;min-height:540px}#salesView .purchaseStage{height:540px}#salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 120px 43px 43px}#salesView .purchaseDiscountControl{grid-template-columns:minmax(95px,1fr) 45px!important}#salesView .purchaseDeliveryInput{width:140px!important}}
@media(max-width:900px) and (hover:none) and (pointer:coarse){#salesView .sellClone{height:auto;min-height:0}#salesView .purchaseStage{height:auto;min-height:540px}#salesView .purchaseStage.cartActive .purchaseStageMain{flex-basis:326px}#salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 110px 43px 43px}#salesView .purchasePaymentButtons{grid-template-columns:1fr!important}}


/* v28 — true zoom-safe Home banner slideshow.
   Slides are absolutely pinned to the viewport (inset:0) instead of using a measured flex track.
   Percentage transforms are relative to each full-width slide, so browser zoom/resize cannot create a blank strip. */
.homeSlideshow{position:relative;overflow:hidden;background:#fff;isolation:isolate}
.homeSlideTrack{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;transform:none!important;transition:none!important}
.homeSlide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;max-width:100%!important;min-height:100%!important;max-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff;transform:translate3d(100%,0,0);transition:none;will-change:transform}
.homeSlide.is-current{transform:translate3d(0,0,0)}
.homeSlide.is-entering,.homeSlide.is-leaving{transition:transform 720ms cubic-bezier(.22,.61,.36,1)}
.homeSlide.is-entering{transform:translate3d(0,0,0)}
.homeSlide.is-leaving{transform:translate3d(-100%,0,0)}
.homeSlide img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:fill!important;object-position:center center!important;margin:0!important;padding:0!important;border:0!important;user-select:none;-webkit-user-drag:none;pointer-events:none}
@media (prefers-reduced-motion: reduce){.homeSlide{transition:none!important}}

/* =========================================================
   HISHABEE REFERENCE MOTION PACK v25 — 2026-09-20
   Matches the interaction motion shown in the supplied video.
   Motion-only overrides: no accounting/data/business logic changes.
   ========================================================= */
:root{
  --hb-motion-fast:140ms;
  --hb-motion-panel:190ms;
  --hb-motion-drawer:300ms;
  --hb-motion-ease:cubic-bezier(.22,.61,.36,1);
}

/* Add / quantity popup: quick soft pop from the triggering button. */
@keyframes hbQuickPopupIn{
  from{opacity:0;transform:translate3d(0,-5px,0) scale(.965)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.purchaseQuickPopup{
  transform-origin:top right;
  animation:hbQuickPopupIn var(--hb-motion-fast) var(--hb-motion-ease) both;
  will-change:transform,opacity;
}
.purchaseQuickChoice,.purchaseQuickSubmit,.addBtn,.addMore,
.purchaseCheckoutChevron,.purchaseChevron,
.purchasePaymentButtons button{
  transition:transform 90ms ease,filter 120ms ease,background-color 120ms ease;
}
.purchaseQuickChoice:active,.purchaseQuickSubmit:active,.addBtn:active,.addMore:active,
.purchaseCheckoutChevron:active,.purchaseChevron:active,
.purchasePaymentButtons button:active{transform:scale(.965)}

/* Selected cart appears with the same light upward/fade motion. */
@keyframes hbCartPanelIn{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
#purchasesView .purchaseCartPanel.show,
#salesView .purchaseCartPanel.show{
  animation:hbCartPanelIn var(--hb-motion-panel) var(--hb-motion-ease) both;
}
@keyframes hbBadgePop{
  0%{opacity:0;transform:scale(.65)}
  70%{opacity:1;transform:scale(1.12)}
  100%{opacity:1;transform:scale(1)}
}
.purchaseAddCount{animation:hbBadgePop 200ms var(--hb-motion-ease) both}

/* Checkout expand/collapse: reference video opens the bottom area in ~0.2s. */
#purchasesView .purchaseCheckoutSummary,
#salesView .purchaseCheckoutSummary{
  display:flex!important;
  flex-direction:column;
  overflow:hidden;
  max-height:240px;
  opacity:1;
  transform:translate3d(0,0,0);
  transform-origin:top center;
  transition:
    max-height var(--hb-motion-panel) var(--hb-motion-ease),
    flex-basis var(--hb-motion-panel) var(--hb-motion-ease),
    min-height var(--hb-motion-panel) var(--hb-motion-ease),
    opacity 125ms ease,
    transform var(--hb-motion-panel) var(--hb-motion-ease),
    padding var(--hb-motion-panel) var(--hb-motion-ease),
    border-width var(--hb-motion-panel) var(--hb-motion-ease);
  will-change:max-height,opacity,transform;
}
#purchasesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary,
#salesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary{
  display:flex!important;
  flex:0 0 0!important;
  min-height:0!important;
  max-height:0!important;
  height:0!important;
  opacity:0;
  transform:translate3d(0,-9px,0);
  padding-top:0!important;
  padding-bottom:0!important;
  border-top-width:0!important;
  border-bottom-width:0!important;
  pointer-events:none;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary{
  display:flex!important;
  flex:0 0 214px!important;
  min-height:214px!important;
  max-height:240px!important;
  opacity:1;
  transform:translate3d(0,0,0);
}
#purchasesView .purchaseStageMain,#salesView .purchaseStageMain{
  transition:flex-basis var(--hb-motion-panel) var(--hb-motion-ease),height var(--hb-motion-panel) var(--hb-motion-ease);
}
#purchasesView .purchaseCheckoutChevron,#salesView .purchaseCheckoutChevron,
#purchasesView .purchaseStage > .purchaseChevron,#salesView .purchaseStage > .purchaseChevron{
  transition:transform 120ms ease,opacity 120ms ease;
}

/* Add Product drawer: 300ms right-to-left slide + backdrop fade, as in video. */
.productAddOverlay{
  display:block!important;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear var(--hb-motion-drawer);
}
.productAddOverlay.open{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.productAddScrim{
  opacity:0;
  transition:opacity var(--hb-motion-drawer) ease;
}
.productAddDrawer{
  transform:translate3d(100%,0,0);
  transition:transform var(--hb-motion-drawer) var(--hb-motion-ease);
  will-change:transform;
}
.productAddOverlay.open .productAddScrim{opacity:1}
.productAddOverlay.open .productAddDrawer{transform:translate3d(0,0,0)}

/* Shared inline drawer motion. */
@keyframes hbDrawerIn{
  from{transform:translate3d(100%,0,0)}
  to{transform:translate3d(0,0,0)}
}
.inlineDrawer.open{animation:hbDrawerIn var(--hb-motion-drawer) var(--hb-motion-ease) both}

@media (prefers-reduced-motion: reduce){
  .viewPane.active,.purchaseQuickPopup,#purchasesView .purchaseCartPanel.show,#salesView .purchaseCartPanel.show,
  .purchaseAddCount,.inlineDrawer.open{
    animation:none!important;
  }
  #purchasesView .purchaseCheckoutSummary,#salesView .purchaseCheckoutSummary,
  .productAddScrim,.productAddDrawer{
    transition:none!important;
  }
}

/* v26: keep quick-add popup fields inside the popup at every zoom level. */
.purchaseQuickPopup{overflow:hidden}
.purchaseQuickPopup *{box-sizing:border-box}
.purchaseQuickPopup label{min-width:0;width:100%}
.purchaseQuickQty{display:block;width:100%;max-width:100%;min-width:0}
.purchaseQuickChoices{min-width:0;width:100%}
.purchaseQuickChoice{min-width:0}


/* v29 - Hishabee due/video functions */
.topPlainButton,.profileTopButton{border:0;background:transparent;color:inherit;font:inherit;padding:0;display:inline-flex;align-items:center;gap:5px;cursor:pointer}.topPlainButton.settingsAction{display:inline-flex}.profileTopButton .avatar{margin:0}.profileTopButton .chev{margin-left:2px}
.duePartyTabs{align-items:stretch;height:44px}.duePartyTabs button{border:0;background:transparent;padding:0 5px;margin:0 0 0 0;color:#596579;font-size:12px;position:relative}.duePartyTabs button.active{font-weight:800;color:#27364b}.duePartyTabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#111}.dueVideoContactList{display:grid;align-content:start}.dueVideoContact{width:100%;height:62px;border:0;border-bottom:1px solid #eceff1;background:#fff;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:0 12px;text-align:left;color:#475467}.dueVideoContact:hover,.dueVideoContact.active{background:#f5f5f5}.dueVideoAvatar{width:31px;height:31px;border-radius:50%;background:#edf0f3;display:grid;place-items:center;font-weight:800;color:#667085}.dueVideoContact b{display:block;font-size:12px}.dueVideoContact small{display:block;color:#98a2b3;margin-top:2px}.dueVideoContact strong{font-size:12px}.dueVideoDetail{padding:14px}.dueDetailIdentity{height:64px;border-bottom:1px solid #e5e7eb;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px}.dueDetailIdentity small{display:block;color:#98a2b3}.dueDetailIdentity>div:last-child{display:flex;gap:18px}.dueDetailTransactions>div{display:grid;grid-template-columns:200px 1fr auto;align-items:center;padding:12px 4px;border-bottom:1px solid #eceff1;font-size:11px}.dueDetailTransactions small{display:block;color:#98a2b3;margin-top:3px}
.dueHistoryTopLine{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.dueBackLink{border:0;background:transparent;font-size:20px;font-weight:800;color:#42526b}.dueHistoryTools{display:flex;align-items:center;gap:8px}.dueHistoryTools select{height:36px;border:1px solid #d8dde3;border-radius:5px;background:#fff;padding:0 10px;color:#52606f}.dueHistoryArea{min-height:520px;background:#fff;border-radius:6px;position:relative}.dueHistoryTable small{display:block;color:#98a2b3;font-weight:600}.dueHistoryEmpty{position:absolute;inset:45px 0 0;display:grid;place-items:center;color:#667085}.dueDatePickerWrap{position:relative}.dueDatePopover{position:absolute;right:0;top:43px;width:310px;background:#fff;border:1px solid #dedede;border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.16);z-index:120;display:grid;grid-template-columns:92px 1fr;padding:8px}.dueDatePopover[hidden]{display:none}.dueDateQuick{border-right:1px solid #eceff1;display:grid;align-content:start}.dueDateQuick button{height:31px;border:0;background:#fff;text-align:left;padding:0 8px;font-size:11px}.dueDateQuick button.active{background:#111;color:#fff;border-radius:4px}.dueDateCustom{padding:3px 8px;display:grid;gap:7px;font-size:10px}.dueDateCustom>b{font-size:11px}.dueDateCustom label{display:grid;gap:3px;color:#667085}.dueDateCustom input{height:29px;border:1px solid #d8dde3;border-radius:4px;padding:0 7px;font-size:10px}.dueDateActions{display:flex;justify-content:flex-end;gap:5px;margin-top:2px}.dueDateActions button{height:28px;border:0;background:#fff;padding:0 7px;font-size:10px}.dueDateActions .blackBtn{background:#111;color:#fff}
.dueModalOverlay,.dueEntryOverlay,.profileDrawerOverlay{position:fixed;inset:0;z-index:10030;visibility:hidden;pointer-events:none}.dueModalOverlay.open,.dueEntryOverlay.open,.profileDrawerOverlay.open{visibility:visible;pointer-events:auto}.dueOverlayScrim{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity 220ms ease}.dueModalOverlay.open .dueOverlayScrim,.dueEntryOverlay.open .dueOverlayScrim,.profileDrawerOverlay.open .dueOverlayScrim{opacity:1}.dueTypeModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%) scale(.98);width:min(520px,calc(100vw - 32px));background:#fff;border-radius:6px;padding:12px;box-shadow:0 20px 70px rgba(0,0,0,.25);opacity:0;transition:all 220ms ease}.dueModalOverlay.open .dueTypeModal{opacity:1;transform:translate(-50%,-50%) scale(1)}.dueModalHead,.dueEntryHead{display:flex;align-items:center;justify-content:space-between}.dueModalHead h2,.dueEntryHead h2{margin:0;font-size:18px;color:#344054}.dueModalHead button,.dueEntryHead button{border:0;background:transparent;font-size:24px}.dueTypeCards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 8px}.dueTypeCard{height:112px;border:1px solid #d8dde3;background:#fff;border-radius:4px;display:grid;place-items:center;align-content:center;gap:7px;color:#667085}.dueTypeCard span{font-size:29px}.dueTypeCard.selected{border-color:#858585;box-shadow:0 0 0 1px #858585 inset;color:#344054}.dueTypeHint{height:34px;color:#98a2b3;font-size:11px}.dueTypeModal>.blackBtn{height:36px}
.dueEntryDrawer{position:absolute;right:0;top:0;width:405px;max-width:calc(100vw - 20px);height:100%;background:#fff;box-shadow:-5px 0 18px rgba(0,0,0,.16);padding:14px 18px;transform:translateX(102%);transition:transform 300ms cubic-bezier(.22,.61,.36,1);overflow:auto;color:#344054}.dueEntryOverlay.open .dueEntryDrawer{transform:translateX(0)}.dueDrawerTabs{height:38px;background:#d4d4d4;border-radius:3px;display:grid;grid-template-columns:1fr 1fr 1fr;margin:10px 0 15px}.dueDrawerTabs button{border:0;background:transparent;color:#667085}.dueDrawerTabs button.active{background:#fff;margin:3px;border-radius:3px;color:#344054;font-weight:700}.dueEntryForm{display:grid;gap:11px;font-size:10px}.dueEntryForm>label{display:grid;gap:5px;font-weight:700}.dueEntryForm input{height:34px;border:1px solid #d9dee5;border-radius:4px;padding:0 9px}.dueMoneyChoice{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.dueMoneyChoice legend{grid-column:1/-1;font-weight:700;margin-bottom:5px}.dueMoneyChoice label{height:58px;border:1px solid #d9dee5;border-radius:4px;display:flex;align-items:center;gap:7px;padding:7px}.dueMoneyChoice label:has(input:checked){border-color:#ef7b83;background:#fffafb}.dueMoneyChoice input{width:16px;height:16px}.dueMoneyChoice b,.dueMoneyChoice small{display:block}.dueMoneyChoice small{margin-top:3px;color:#98a2b3;font-weight:600}.dueContactInput,.duePhoneInput,.dueNoteInput{height:36px;border:1px solid #d9dee5;border-radius:4px;display:flex;align-items:center}.dueContactInput input,.duePhoneInput input,.dueNoteInput input{border:0!important;height:32px!important;flex:1;min-width:0}.dueContactInput span,.duePhoneInput span,.dueNoteInput span{padding:0 9px;color:#667085}.dueReminderSwitch{display:flex!important;align-items:center!important;grid-template-columns:unset!important;height:38px;border-top:1px solid #eceff1;margin-top:2px}.dueReminderSwitch input{position:absolute;opacity:0;width:1px;height:1px}.dueReminderSwitch i{width:31px;height:18px;border-radius:20px;background:#8d9297;position:relative}.dueReminderSwitch i:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.15s}.dueReminderSwitch input:checked+i{background:#111}.dueReminderSwitch input:checked+i:before{transform:translateX(13px)}.dueReminderSwitch span{font-weight:600}.dueReminderSwitch small{margin-left:auto;color:#55a76a}.dueEntrySave{height:38px;margin-top:0}
.profileDrawer{position:absolute;right:0;top:0;width:330px;max-width:calc(100vw - 20px);height:100%;background:#fff;box-shadow:-5px 0 18px rgba(0,0,0,.16);padding:16px 18px;transform:translateX(102%);transition:transform 300ms cubic-bezier(.22,.61,.36,1);overflow:auto;color:#344054}.profileDrawerOverlay.open .profileDrawer{transform:translateX(0)}.profileDrawerHead{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px}.profileDrawerHead .avatar{margin:0}.profileDrawerHead small{display:block;color:#98a2b3;margin-top:2px}.profileDrawerHead button{border:0;background:transparent;font-size:22px}.profileRoleButton{width:100%;height:35px;border:0;background:#151515;color:#fff;border-radius:3px;margin:12px 0}.profileSectionTitle{font-size:11px;font-weight:700;margin:10px 0}.profileRow{width:100%;height:43px;border:0;border-bottom:1px solid #eceff1;background:#fff;text-align:left;display:flex;align-items:center;justify-content:space-between;color:#52606f}.profileBuild{text-align:center;color:#98a2b3;font-size:9px;margin:16px 0}.profileLogout{width:100%;height:38px;border:0;background:#e4464c;color:#fff;border-radius:3px}.fullBtn{width:100%}
@media(max-width:900px) and (hover:none) and (pointer:coarse){.dueHistoryTopLine{align-items:flex-start;flex-direction:column}.dueHistoryTools{flex-wrap:wrap}.dueSplit{grid-template-columns:1fr}.dueListPanel{border-right:0}.dueEntryDrawer,.profileDrawer{width:min(405px,94vw)}}

/* v30: no-JS/early-render fallback so the Home banner can never appear blank. */
.homeSlideshow .homeSlide:first-child{transform:translate3d(0,0,0)}
.homeSlideshow[data-slideshow-bound="1"] .homeSlide:first-child:not(.is-current):not(.is-entering):not(.is-leaving){transform:translate3d(100%,0,0)}

/* =========================================================
   v31 — Purchase/Sell responsive geometry parity fix
   Keeps the purchase/sell work area anchored to the viewport,
   so browser zoom does not shrink the picker/stage into a small block.
   This intentionally overrides the earlier fixed-540px geometry and
   motion-pack flex rules while preserving all existing logic.
   ========================================================= */
#purchasesView .purchaseClone,
#salesView .sellClone{
  height:calc(100vh - 200px)!important;
  min-height:540px!important;
  grid-template-columns:minmax(430px,32%) minmax(0,1fr)!important;
  gap:18px!important;
}
#purchasesView .purchaseStage,
#salesView .purchaseStage{
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  overflow:visible!important;
}
#purchasesView .purchaseStageMain,
#salesView .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:auto!important;
}
/* Expanded state: detail bar stays pinned to the bottom, main workspace takes the rest. */
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseStageMain,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseStageMain,
#purchasesView .purchaseStage.cartActive:not(.checkoutCollapsed) .purchaseStageMain,
#salesView .purchaseStage.cartActive:not(.checkoutCollapsed) .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
  border-radius:7px 7px 0 0!important;
  overflow:auto!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary{
  display:flex!important;
  flex:0 0 214px!important;
  height:214px!important;
  min-height:214px!important;
  max-height:214px!important;
  padding:7px 7px 10px!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  border-top-width:1px!important;
  border-bottom-width:1px!important;
  box-sizing:border-box!important;
}
/* Collapsed state: only Batch + Total are visible, with the up-arrow centered between them. */
#purchasesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary,
#salesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary{
  display:none!important;
}
#purchasesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#purchasesView .purchaseStage.checkoutCollapsed .purchaseTotalBar,
#salesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#salesView .purchaseStage.checkoutCollapsed .purchaseTotalBar{
  display:flex!important;
  flex:0 0 43px!important;
  height:43px!important;
}
#purchasesView .purchaseStage.checkoutCollapsed > .purchaseChevron,
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron{
  display:grid!important;
  place-items:center!important;
  bottom:35px!important;
}
/* Cart-active must never force the main panel back to the old 326px fixed height. */
#purchasesView .purchaseStage.cartActive .purchaseStageMain,
#salesView .purchaseStage.cartActive .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
}
/* Keep picker/stage proportions like the reference even when zoom changes. */
#purchasesView .purchasePicker,
#salesView .sellPicker{
  min-width:0!important;
}
@media(max-width:1100px){
  #purchasesView .purchaseClone,
  #salesView .sellClone{
    grid-template-columns:minmax(360px,34%) minmax(0,1fr)!important;
    height:calc(100vh - 180px)!important;
  }
}
@media(max-width:900px) and (hover:none) and (pointer:coarse){
  #purchasesView .purchaseClone,
  #salesView .sellClone{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
  }
  #purchasesView .purchaseStage,
  #salesView .purchaseStage{
    height:540px!important;
    min-height:540px!important;
  }
}

/* =========================================================
   v32 — Exact purchase/sell collapsed + expanded geometry
   Target: fixed-height work area like the supplied reference.
   Collapsed = main panel + Batch No + Total + centered UP arrow.
   Expanded  = main panel + checkout summary + centered DOWN arrow.
   ========================================================= */
#purchasesView .purchaseClone,
#salesView .sellClone{
  height:540px!important;
  min-height:540px!important;
  grid-template-columns:528px minmax(0,1fr)!important;
  gap:18px!important;
}
#purchasesView .purchaseStage,
#salesView .purchaseStage{
  height:540px!important;
  min-height:540px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  overflow:visible!important;
  position:relative!important;
}
#purchasesView .purchaseStageMain,
#salesView .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  border-radius:7px!important;
  overflow:auto!important;
}
/* collapsed target state */
#purchasesView .purchaseStage.checkoutCollapsed .purchaseStageMain,
#salesView .purchaseStage.checkoutCollapsed .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
  border-radius:7px!important;
}
#purchasesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary,
#salesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary{
  display:none!important;
}
#purchasesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#purchasesView .purchaseStage.checkoutCollapsed .purchaseTotalBar,
#salesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#salesView .purchaseStage.checkoutCollapsed .purchaseTotalBar{
  display:flex!important;
  flex:0 0 43px!important;
  height:43px!important;
  min-height:43px!important;
}
#purchasesView .purchaseStage.checkoutCollapsed > .purchaseChevron,
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron{
  display:grid!important;
  place-items:center!important;
  left:50%!important;
  bottom:35px!important;
  transform:translateX(-50%)!important;
  z-index:6!important;
}
/* expanded target state */
#purchasesView .purchaseStage:not(.checkoutCollapsed),
#salesView .purchaseStage:not(.checkoutCollapsed){
  gap:0!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseStageMain,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseStageMain,
#purchasesView .purchaseStage.cartActive:not(.checkoutCollapsed) .purchaseStageMain,
#salesView .purchaseStage.cartActive:not(.checkoutCollapsed) .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  border-radius:7px 7px 0 0!important;
  overflow:auto!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary{
  display:flex!important;
  flex:0 0 214px!important;
  height:214px!important;
  min-height:214px!important;
  max-height:214px!important;
  padding:7px 7px 10px!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  border:1px solid #eceff1!important;
  border-radius:0 0 7px 7px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseBatch,
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseTotalBar,
#purchasesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseBatch,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseTotalBar,
#salesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron{
  display:none!important;
}
#purchasesView .purchaseCheckoutChevron,
#salesView .purchaseCheckoutChevron{
  display:grid!important;
  place-items:center!important;
  left:50%!important;
  top:-15px!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
}
/* cart must not change the geometry */
#purchasesView .purchaseStage.cartActive .purchaseStageMain,
#salesView .purchaseStage.cartActive .purchaseStageMain{
  flex:1 1 auto!important;
  height:auto!important;
}
#purchasesView .purchaseStage.cartActive.checkoutCollapsed,
#salesView .purchaseStage.cartActive.checkoutCollapsed{
  gap:8px!important;
}
/* Match the reference left pane width while preserving responsive safety. */
#purchasesView .purchasePicker,
#salesView .sellPicker{min-width:0!important}
@media(max-width:1200px){
  #purchasesView .purchaseClone,
  #salesView .sellClone{
    height:540px!important;
    min-height:540px!important;
    grid-template-columns:430px minmax(0,1fr)!important;
  }
}
@media(max-width:900px) and (hover:none) and (pointer:coarse){
  #purchasesView .purchaseClone,
  #salesView .sellClone{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
  }
  #purchasesView .purchaseStage,
  #salesView .purchaseStage{
    height:540px!important;
    min-height:540px!important;
  }
}

/* =========================================================
   v34 — Professional checkout toggle control
   Visual-only refinement. Keeps the existing expand/collapse logic.
   ========================================================= */
#purchasesView .purchaseCheckoutChevron,
#salesView .purchaseCheckoutChevron,
#purchasesView .purchaseStage > .purchaseChevron,
#salesView .purchaseStage > .purchaseChevron{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:999px!important;
  background:#111!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  box-shadow:0 2px 7px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04)!important;
  transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease!important;
  -webkit-tap-highlight-color:transparent;
}
#purchasesView .purchaseCheckoutChevron::before,
#salesView .purchaseCheckoutChevron::before,
#purchasesView .purchaseStage > .purchaseChevron::before,
#salesView .purchaseStage > .purchaseChevron::before{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  box-sizing:border-box;
  display:block;
}
/* Expanded panel: clean down-chevron, centered exactly on the divider. */
#purchasesView .purchaseCheckoutChevron,
#salesView .purchaseCheckoutChevron{
  left:50%!important;
  top:-17px!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
}
#purchasesView .purchaseCheckoutChevron::before,
#salesView .purchaseCheckoutChevron::before{
  transform:rotate(45deg) translate(-1px,-1px);
}
/* Collapsed panel: matching up-chevron between Batch and Total. */
#purchasesView .purchaseStage.checkoutCollapsed > .purchaseChevron,
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron{
  left:50%!important;
  bottom:34px!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
}
#purchasesView .purchaseStage > .purchaseChevron::before,
#salesView .purchaseStage > .purchaseChevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}
#purchasesView .purchaseCheckoutChevron:hover,
#salesView .purchaseCheckoutChevron:hover,
#purchasesView .purchaseStage > .purchaseChevron:hover,
#salesView .purchaseStage > .purchaseChevron:hover{
  background:#050505!important;
  box-shadow:0 4px 11px rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.05)!important;
}
#purchasesView .purchaseCheckoutChevron:active,
#salesView .purchaseCheckoutChevron:active{
  transform:translateX(-50%) scale(.94)!important;
}
#purchasesView .purchaseStage > .purchaseChevron:active,
#salesView .purchaseStage > .purchaseChevron:active{
  transform:translateX(-50%) scale(.94)!important;
}
#purchasesView .purchaseCheckoutChevron:focus-visible,
#salesView .purchaseCheckoutChevron:focus-visible,
#purchasesView .purchaseStage > .purchaseChevron:focus-visible,
#salesView .purchaseStage > .purchaseChevron:focus-visible{
  outline:3px solid rgba(17,17,17,.18)!important;
  outline-offset:2px!important;
}

/* =========================================================
   v35 — Professional split-button chevron for product Add rows
   Visual-only refinement; existing Add / quantity-popup logic is unchanged.
   ========================================================= */
#purchasesView .addWrap,
#salesView .addWrap{
  display:inline-flex;
  align-items:stretch;
  border-radius:6px;
  overflow:visible;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
}
#purchasesView .addBtn,
#salesView .addBtn,
#purchasesView .addMore,
#salesView .addMore{
  height:30px;
  background:#171717;
  border:0;
  color:#fff;
}
#purchasesView .addBtn,
#salesView .addBtn{
  padding:0 10px;
  border-radius:6px 0 0 6px;
  font-weight:800;
  line-height:30px;
}
#purchasesView .addMore,
#salesView .addMore{
  position:relative;
  width:30px;
  min-width:30px;
  padding:0;
  border-radius:0 6px 6px 0;
  border-left:1px solid rgba(255,255,255,.20);
  color:transparent;
  font-size:0;
  line-height:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#purchasesView .addMore::before,
#salesView .addMore::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  box-sizing:border-box;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translate(-50%,-65%) rotate(45deg);
  transform-origin:center;
  transition:transform .16s ease;
  pointer-events:none;
}
#purchasesView .addMore[aria-expanded="true"]::before,
#salesView .addMore[aria-expanded="true"]::before,
#purchasesView .addMore.quickActive::before,
#salesView .addMore.quickActive::before{
  transform:translate(-50%,-30%) rotate(225deg);
}
#purchasesView .addBtn:hover,
#salesView .addBtn:hover,
#purchasesView .addMore:hover,
#salesView .addMore:hover{
  background:#0d0d0d;
}
#purchasesView .addMore:focus-visible,
#salesView .addMore:focus-visible,
#purchasesView .addBtn:focus-visible,
#salesView .addBtn:focus-visible{
  outline:2px solid rgba(17,17,17,.30);
  outline-offset:2px;
}
#purchasesView .addMore:active,
#salesView .addMore:active{
  transform:none!important;
  filter:brightness(.90);
}

/* =========================================================
   v37 — Reference checkout accordion animation
   Matches the supplied clip: the lower purchase/sell summary glides
   up/down, the center control travels with the divider and rotates,
   and the payment rows fade/slide into place. UI motion only.
   ========================================================= */
:root{
  --hb-checkout-motion:180ms;
  --hb-checkout-ease:cubic-bezier(.22,.61,.36,1);
}

#purchasesView .purchaseStage,
#salesView .purchaseStage{
  transition:gap var(--hb-checkout-motion) var(--hb-checkout-ease)!important;
}

/* Keep every accordion piece in layout so height can animate; do not snap via display:none. */
#purchasesView .purchaseCheckoutSummary,
#salesView .purchaseCheckoutSummary{
  display:flex!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform-origin:bottom center!important;
  transition:
    flex-basis var(--hb-checkout-motion) var(--hb-checkout-ease),
    height var(--hb-checkout-motion) var(--hb-checkout-ease),
    min-height var(--hb-checkout-motion) var(--hb-checkout-ease),
    max-height var(--hb-checkout-motion) var(--hb-checkout-ease),
    padding-top var(--hb-checkout-motion) var(--hb-checkout-ease),
    padding-bottom var(--hb-checkout-motion) var(--hb-checkout-ease),
    border-width var(--hb-checkout-motion) var(--hb-checkout-ease),
    opacity 120ms ease,
    transform var(--hb-checkout-motion) var(--hb-checkout-ease)!important;
  will-change:height,flex-basis,opacity,transform;
}

#purchasesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary,
#salesView .purchaseStage.checkoutCollapsed .purchaseCheckoutSummary{
  display:flex!important;
  flex:0 0 0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border-top-width:0!important;
  border-bottom-width:0!important;
  opacity:0!important;
  transform:translate3d(0,12px,0)!important;
  pointer-events:none!important;
}

#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutSummary{
  display:flex!important;
  flex:0 0 214px!important;
  height:214px!important;
  min-height:214px!important;
  max-height:214px!important;
  padding:7px 7px 10px!important;
  border-width:1px!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  pointer-events:auto!important;
}

#purchasesView .purchaseBatch,
#purchasesView .purchaseTotalBar,
#salesView .purchaseBatch,
#salesView .purchaseTotalBar{
  display:flex!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  transition:
    flex-basis var(--hb-checkout-motion) var(--hb-checkout-ease),
    height var(--hb-checkout-motion) var(--hb-checkout-ease),
    min-height var(--hb-checkout-motion) var(--hb-checkout-ease),
    max-height var(--hb-checkout-motion) var(--hb-checkout-ease),
    opacity 105ms ease,
    transform var(--hb-checkout-motion) var(--hb-checkout-ease),
    border-width var(--hb-checkout-motion) var(--hb-checkout-ease),
    padding-top var(--hb-checkout-motion) var(--hb-checkout-ease),
    padding-bottom var(--hb-checkout-motion) var(--hb-checkout-ease)!important;
  will-change:height,flex-basis,opacity,transform;
}

#purchasesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#purchasesView .purchaseStage.checkoutCollapsed .purchaseTotalBar,
#salesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#salesView .purchaseStage.checkoutCollapsed .purchaseTotalBar{
  flex:0 0 43px!important;
  height:43px!important;
  min-height:43px!important;
  max-height:43px!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}

#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseBatch,
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseTotalBar,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseBatch,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseTotalBar{
  display:flex!important;
  flex:0 0 0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border-width:0!important;
  opacity:0!important;
  transform:translate3d(0,8px,0)!important;
  pointer-events:none!important;
}

/* Use the same center control in both states so it physically travels like the video. */
#purchasesView .purchaseCheckoutChevron,
#salesView .purchaseCheckoutChevron{
  display:none!important;
}
#purchasesView .purchaseStage > .purchaseChevron,
#salesView .purchaseStage > .purchaseChevron{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  left:50%!important;
  top:auto!important;
  z-index:20!important;
  transform:translateX(-50%)!important;
  transition:
    bottom var(--hb-checkout-motion) var(--hb-checkout-ease),
    transform 100ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease!important;
  will-change:bottom,transform;
}
#purchasesView .purchaseStage.checkoutCollapsed > .purchaseChevron,
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron{
  bottom:34px!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron,
#salesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron{
  bottom:197px!important;
}
#purchasesView .purchaseStage > .purchaseChevron::before,
#salesView .purchaseStage > .purchaseChevron::before{
  transition:transform var(--hb-checkout-motion) var(--hb-checkout-ease)!important;
  will-change:transform;
}
#purchasesView .purchaseStage.checkoutCollapsed > .purchaseChevron::before,
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron::before{
  transform:rotate(225deg) translate(-1px,-1px)!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron::before,
#salesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron::before{
  transform:rotate(45deg) translate(-1px,-1px)!important;
}
#purchasesView .purchaseStage > .purchaseChevron:active,
#salesView .purchaseStage > .purchaseChevron:active{
  transform:translateX(-50%) scale(.94)!important;
}

/* Inner rows arrive just after the panel starts moving. */
#purchasesView .purchaseCheckoutRows,
#purchasesView .purchasePaymentButtons,
#salesView .purchaseCheckoutRows,
#salesView .purchasePaymentButtons{
  transition:opacity 125ms ease,transform var(--hb-checkout-motion) var(--hb-checkout-ease)!important;
}
#purchasesView .purchaseStage.checkoutCollapsed .purchaseCheckoutRows,
#purchasesView .purchaseStage.checkoutCollapsed .purchasePaymentButtons,
#salesView .purchaseStage.checkoutCollapsed .purchaseCheckoutRows,
#salesView .purchaseStage.checkoutCollapsed .purchasePaymentButtons{
  opacity:0!important;
  transform:translate3d(0,10px,0)!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutRows,
#purchasesView .purchaseStage:not(.checkoutCollapsed) .purchasePaymentButtons,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchaseCheckoutRows,
#salesView .purchaseStage:not(.checkoutCollapsed) .purchasePaymentButtons{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  transition-delay:45ms!important;
}

@media(prefers-reduced-motion:reduce){
  #purchasesView .purchaseStage,#salesView .purchaseStage,
  #purchasesView .purchaseCheckoutSummary,#salesView .purchaseCheckoutSummary,
  #purchasesView .purchaseBatch,#purchasesView .purchaseTotalBar,
  #salesView .purchaseBatch,#salesView .purchaseTotalBar,
  #purchasesView .purchaseStage > .purchaseChevron,#salesView .purchaseStage > .purchaseChevron,
  #purchasesView .purchaseStage > .purchaseChevron::before,#salesView .purchaseStage > .purchaseChevron::before,
  #purchasesView .purchaseCheckoutRows,#purchasesView .purchasePaymentButtons,
  #salesView .purchaseCheckoutRows,#salesView .purchasePaymentButtons{transition:none!important}
}

/* =========================================================
   v38 — Keep checkout center arrow visible after expansion
   Fixes the higher-specificity v32 rule that hid the moving chevron.
   The same control now remains visible while it travels from the
   collapsed divider to the expanded checkout divider.
   ========================================================= */
#purchasesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron,
#salesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  left:50%!important;
  bottom:197px!important;
  transform:translateX(-50%)!important;
  z-index:40!important;
}
#purchasesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron::before,
#salesView .purchaseStage:not(.checkoutCollapsed) > .purchaseChevron::before{
  transform:rotate(45deg) translate(-1px,-1px)!important;
}

/* v40: Tab loading/entrance animation disabled by request. */
.viewPane.active{animation:none!important;}

/* =========================================================
   v41 — Purchase/Sell picker toolbar parity with reference.
   Reference layout: wide Search + compact scanner + + + refresh.
   Barcode input remains available for scanner keyboard input, but
   is visually collapsed into the scanner button so no logic changes.
   ========================================================= */
#purchasesView .purchaseSearchRow,
#salesView .purchaseSearchRow{
  grid-template-columns:minmax(0,1fr) 43px 43px 43px!important;
  gap:7px!important;
}
#purchasesView .purchaseBarcodeField,
#salesView .purchaseBarcodeField{
  width:43px!important;
  min-width:43px!important;
  max-width:43px!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:0!important;
}
#purchasesView .purchaseBarcodeField input,
#salesView .purchaseBarcodeField input{
  position:absolute!important;
  width:100%!important;
  height:100%!important;
  inset:0!important;
  opacity:0!important;
  padding:0!important;
  margin:0!important;
  cursor:pointer!important;
}
#purchasesView .purchaseBarcodeField span,
#salesView .purchaseBarcodeField span{
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  border-left:0!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
}
@media(max-width:1200px){
  #purchasesView .purchaseSearchRow,
  #salesView .purchaseSearchRow{
    grid-template-columns:minmax(0,1fr) 43px 43px 43px!important;
  }
}
@media(max-width:900px) and (hover:none) and (pointer:coarse){
  #purchasesView .purchaseSearchRow,
  #salesView .purchaseSearchRow{
    grid-template-columns:minmax(0,1fr) 43px 43px 43px!important;
  }
}


/* =========================================================
   v42 — Purchase/Sell product cube icon exact-match fix.
   Only the product-list icon/spacing is changed; all logic is untouched.
   ========================================================= */
#purchasesView .purchaseProductItem,
#salesView .purchaseProductItem{
  grid-template-columns:40px minmax(0,1fr) auto!important;
  gap:6px!important;
  padding-left:8px!important;
  padding-right:8px!important;
}
#purchasesView .purchaseProductItem .prodIcon,
#salesView .purchaseProductItem .prodIcon{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  color:#475467!important;
  font-size:0!important;
  line-height:1!important;
}
#purchasesView .purchaseProductItem .prodIcon svg,
#salesView .purchaseProductItem .prodIcon svg{
  width:25px!important;
  height:25px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}


/* =========================================================
   v43 — Mobile browser dashboard UI (phone mode)
   Matches supplied phone screenshot while keeping desktop untouched.
   ========================================================= */
.mobileMenuToggle{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  html,body{margin:0!important;padding:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;background:#fff!important;color:#465569!important;font-family:"Noto Sans Bengali UI","Noto Sans Bengali","Nirmala UI","Segoe UI",Arial,sans-serif!important}
  body{min-width:0!important}
  .bizShell{display:block!important;min-height:100vh!important;background:#fff!important}

  /* App header */
  .bizTopbar{position:sticky!important;top:0!important;z-index:80!important;height:92px!important;margin:0!important;padding:0 20px!important;background:#ffc900!important;border:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;box-sizing:border-box!important}
  .bizTopbar:before,.bizTopbar:after{display:none!important}
  .crumb{display:none!important}
  .mobileMenuToggle{display:flex!important;width:46px!important;height:46px!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;cursor:pointer!important;color:#334155!important}
  .mobileMenuToggle span{display:block!important;width:25px!important;height:3px!important;border-radius:3px!important;background:#36536f!important;transition:transform .18s ease,opacity .18s ease!important}
  .bizShell.mobileNavOpen .mobileMenuToggle span:nth-child(1){transform:translateY(8px) rotate(45deg)!important}
  .bizShell.mobileNavOpen .mobileMenuToggle span:nth-child(2){opacity:0!important}
  .bizShell.mobileNavOpen .mobileMenuToggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)!important}
  .topActions{position:static!important;height:auto!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:16px!important;color:#111827!important}
  .topIcon{width:28px!important;height:28px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .topIcon svg{width:27px!important;height:27px!important;stroke:#111827!important;stroke-width:1.9!important}
  .topPlainButton.settingsAction{width:30px!important;height:30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:0!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important}
  .settingsAction .topIcon,.settingsAction .topIcon svg{width:29px!important;height:29px!important}
  .profileTopButton{height:44px!important;border:0!important;background:transparent!important;padding:0!important;gap:12px!important;display:flex!important;align-items:center!important;color:#111827!important}
  .profileTopButton .avatar{width:42px!important;height:42px!important;border:1px solid #cbd5e1!important;background:#eef0f3!important;color:#1f2937!important;font-size:20px!important;font-weight:600!important}
  .profileTopButton .shopName{display:none!important}
  .profileTopButton .chev{font-size:31px!important;line-height:1!important;margin:0!important;transform:translateY(-2px)!important}

  /* Sidebar becomes a real mobile drawer; hidden until hamburger is tapped. */
  .bizSidebar{position:fixed!important;z-index:95!important;left:0!important;top:0!important;width:min(310px,86vw)!important;height:100vh!important;background:#fff!important;border-right:1px solid #e5e7eb!important;box-shadow:0 12px 35px rgba(15,23,42,.22)!important;overflow-y:auto!important;overflow-x:hidden!important;transform:translateX(-104%)!important;transition:transform .22s ease!important}
  .bizShell.mobileNavOpen .bizSidebar{transform:translateX(0)!important}
  .bizBrand{height:72px!important;padding:0 18px!important;border-bottom:1px solid #e5e7eb!important;display:flex!important;align-items:center!important}
  .hbBrandImg{width:145px!important;height:auto!important;max-height:44px!important;object-fit:contain!important}
  .bizNav{display:grid!important;grid-template-columns:1fr!important;padding:12px!important;gap:0!important}
  .bizNav button{display:flex!important;width:100%!important;height:43px!important;min-height:43px!important;padding:0 9px!important;gap:9px!important;border-radius:4px!important;font-size:15px!important;line-height:1!important;justify-content:flex-start!important;white-space:nowrap!important}
  .bizNav .subscribeBtn{height:43px!important;min-height:43px!important;background:#81c8f3!important}
  .navIconImg{width:28px!important;height:28px!important;flex:0 0 28px!important}
  .navDivider{display:block!important;height:1px!important;margin:10px 8px!important;background:#d6dbe0!important}

  .bizWorkspace{min-width:0!important;width:100%!important;padding:0!important;background:#fff!important;box-sizing:border-box!important}
  .noticeBand{display:none!important}
  .dashTitleRow{display:none!important}
  #dashboardView{padding:0!important;margin:0!important;background:#fff!important}
  .dashBoardBox{border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;padding:0 11px 14px!important;margin:0!important}

  /* Balance + refresh row, followed by the five period tabs. */
  .dashControlRow{display:grid!important;grid-template-columns:minmax(0,1fr) 60px!important;gap:0 14px!important;height:auto!important;margin:0 0 23px!important;padding-top:14px!important;align-items:start!important;position:relative!important}
  .balancePill{grid-column:1!important;width:max-content!important;min-width:0!important;height:58px!important;box-sizing:border-box!important;border:1px solid #16c55b!important;border-radius:10px!important;background:#f4fff7!important;color:#168b45!important;padding:0 13px!important;font-size:20px!important;font-weight:600!important;display:flex!important;align-items:center!important;line-height:1!important;box-shadow:none!important}
  .balancePill .balanceIcon{width:18px!important;height:18px!important;margin-right:7px!important;object-fit:contain!important}
  .balancePill b{font-size:20px!important;font-weight:600!important}
  .periodTabs{grid-column:1/-1!important;position:relative!important;width:100%!important;height:65px!important;margin-top:16px!important;padding:7px!important;box-sizing:border-box!important;border-radius:10px!important;background:#e7e9ed!important;display:flex!important;align-items:center!important;gap:0!important;overflow:visible!important}
  .periodTabs .periodBtn{appearance:none!important;-webkit-appearance:none!important;flex:1 1 20%!important;min-width:0!important;height:51px!important;margin:0!important;padding:0 4px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#68768a!important;font:600 20px/1 inherit!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;box-shadow:none!important}
  .periodTabs .periodBtn.active{background:#fff!important;color:#465569!important;box-shadow:0 1px 2px rgba(0,0,0,.05)!important}
  .periodTabs .periodRefresh{position:absolute!important;right:0!important;top:-74px!important;width:60px!important;min-width:60px!important;height:60px!important;margin:0!important;padding:0!important;border:1px solid #cfd4da!important;border-radius:10px!important;background:#fff!important;color:#737b84!important;font-size:0!important;display:grid!important;place-items:center!important;box-shadow:none!important}
  .periodTabs .periodRefresh::before{content:"⟳"!important;font:400 35px/1 "Segoe UI Symbol","Noto Sans Symbols",sans-serif!important;color:#777f86!important;transform:translateY(-1px)!important}

  /* Six summary tiles */
  .summaryGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px 14px!important;margin:0!important}
  .summaryCard{height:105px!important;min-height:105px!important;box-sizing:border-box!important;border:1px solid #dfe4e8!important;border-radius:10px!important;background:#fff!important;padding:17px 14px!important;box-shadow:0 2px 5px rgba(15,23,42,.08)!important;position:relative!important}
  .summaryCard small{display:block!important;margin:0 0 13px!important;color:#465569!important;font-size:20px!important;font-weight:600!important;line-height:1.05!important;white-space:nowrap!important}
  .summaryCard strong{display:block!important;font-size:23px!important;font-weight:700!important;line-height:1!important}
  .summaryCard em{position:absolute!important;right:15px!important;top:17px!important;width:24px!important;height:24px!important;display:block!important;font-size:0!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important}
  .salesCard em{background-image:url("assets/ui/summary-sales.png")!important}
  .purchaseCard em{background-image:url("assets/ui/summary-purchase.png")!important}
  .expenseCard em{background-image:url("assets/ui/summary-expense.png")!important}
  .stockCard em{background-image:url("assets/ui/summary-stock.png")!important}
  .dueCard em{background-image:url("assets/ui/summary-due.png")!important}
  .payableCard em{background-image:url("assets/ui/summary-payable.png")!important}

  /* Home banner */
  .megaOffer.homeSlideshow{width:100%!important;height:auto!important;aspect-ratio:4.9/1!important;margin:24px 0 0!important;border:1px solid #cfd4da!important;border-radius:10px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important}
  .homeSlideTrack,.homeSlide{width:100%!important;height:100%!important}
  .homeSlide img{width:100%!important;height:100%!important;object-fit:fill!important;border-radius:9px!important}

  /* Main dashboard shortcuts */
  .primaryLinks{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;height:131px!important;margin:32px 0 22px!important;padding:12px!important;box-sizing:border-box!important;border:1px solid #dfe4e8!important;border-radius:10px!important;background:#fff!important;box-shadow:0 2px 5px rgba(15,23,42,.07)!important}
  .primaryLinks button{height:105px!important;min-height:0!important;border:0!important;border-radius:7px!important;background:#f4f5f7!important;color:#465569!important;padding:8px 4px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;font-size:20px!important;font-weight:600!important;line-height:1.1!important}
  .homePrimaryIcon{display:block!important;width:49px!important;height:49px!important;object-fit:contain!important}
  .primaryLinks span{display:none!important}

  /* Dashboard groups */
  .linkSections{display:grid!important;grid-template-columns:1fr!important;gap:15px!important;margin:0!important}
  .linkGroup,.linkGroup.full{grid-column:auto!important;width:100%!important;border:1px solid #dfe4e8!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 2px 5px rgba(15,23,42,.07)!important}
  .linkGroup h3{height:62px!important;box-sizing:border-box!important;margin:0!important;padding:17px 18px!important;border-bottom:1px solid #d8dde2!important;font-size:23px!important;line-height:28px!important;font-weight:700!important;color:#465569!important}
  .linkGroup>div,.linkGroup.full>div{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;background:#fff!important}
  .linkGroup button,.linkGroup.full button{height:101px!important;border:0!important;background:#fff!important;padding:8px 2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:0!important;color:#465569!important}
  .linkGroup.full button{height:94px!important}
  .homeSmallIcon{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important}
  .linkGroup button span{display:block!important;margin:0!important;color:#465569!important;font-size:16px!important;font-weight:600!important;line-height:1.05!important;text-align:center!important;white-space:nowrap!important}

  /* Mobile spacing around the last group and overall page. */
  .linkSections .linkGroup:last-child{margin-bottom:2px!important}

  /* Other tabs remain usable in phone mode. */
  .purchaseClone,.sellClone,.dueSplit,.contactSplit,.accessSplit,.printerSplit,.marketingSplit{grid-template-columns:1fr!important;height:auto!important;min-height:0!important}
  .purchasePicker,.sellPicker{min-height:300px!important}
}

@media (max-width:420px) and (hover:none) and (pointer:coarse){
  .bizTopbar{padding:0 12px!important}
  .topActions{gap:10px!important}
  .profileTopButton{gap:8px!important}
  .profileTopButton .avatar{width:38px!important;height:38px!important;font-size:18px!important}
  .periodTabs .periodBtn{font-size:17px!important}
  .summaryCard small{font-size:17px!important}
  .summaryCard strong{font-size:21px!important}
  .linkGroup h3{font-size:20px!important}
  .linkGroup button span{font-size:14px!important}
}


/* =========================================================
   v44 — Desktop Settings drawer reference match
   Visual-only overlay. Existing open/close binding is preserved.
   ========================================================= */
.profileDrawerOverlay{z-index:12050!important}
.profileDrawerOverlay .dueOverlayScrim{background:rgba(0,0,0,.38)!important}
.profileDrawer{
  right:0!important;top:0!important;width:392px!important;max-width:calc(100vw - 24px)!important;height:100vh!important;
  padding:0 14px 16px!important;background:#fff!important;color:#1f2937!important;border-radius:0!important;
  box-shadow:-10px 0 28px rgba(0,0,0,.12)!important;overflow-y:auto!important;overflow-x:hidden!important;
}
.profileDrawerTitle{height:40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e8e8;margin:0 0 15px;padding:0 0 0 2px}
.profileDrawerTitle h2{margin:0;font-size:17px;line-height:1;font-weight:800;color:#191919}
.profileDrawerTitle button{width:30px;height:30px;border:0;background:transparent;font-size:24px;line-height:1;color:#3f3f3f;display:grid;place-items:center;cursor:pointer}
.profileIdentity{height:46px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;margin:0 0 10px}
.profileIdentityAvatar{width:42px;height:42px;border-radius:7px;background:#f0f2f5;display:grid;place-items:center;font-size:15px;color:#344054}
.profileIdentityText{min-width:0}.profileIdentityText b{display:block;font-size:13px;line-height:1.15;color:#111;font-weight:800}.profileIdentityText small{display:block;font-size:10px;line-height:1.15;color:#222;margin-top:2px}
.profileEditBtn{height:29px;padding:0 9px;border:1px solid #d9dfe5;border-radius:5px;background:#fff;color:#4b5563;font-size:10px;cursor:pointer}
.profileRoleButton{width:100%!important;height:33px!important;margin:8px 0 16px!important;border:0!important;border-radius:3px!important;background:#111!important;color:#fff!important;font-size:11px!important;font-weight:700!important;box-shadow:none!important}
.profileSectionTitle{height:21px;margin:0 0 7px!important;padding:0!important;border-bottom:1px solid #e5e5e5;color:#7d8590!important;font-size:10px!important;line-height:17px!important;font-weight:600!important}
.profileOtherTitle{margin-top:14px!important}
.profileRows{display:grid;gap:7px}
.profileRow{width:100%!important;height:38px!important;padding:0 9px!important;border:1px solid #dfe3e7!important;border-radius:5px!important;background:#fff!important;color:#5b6470!important;display:flex!important;align-items:center!important;justify-content:space-between!important;text-align:left!important;font-size:11px!important;line-height:1!important;box-shadow:none!important;cursor:pointer!important;transition:background .12s ease,border-color .12s ease!important}
.profileRow:hover{background:#fafafa!important;border-color:#d2d7dc!important}
.profileRowLeft{display:flex;align-items:center;min-width:0;gap:8px;white-space:nowrap}
.profileRowIcon{width:14px;min-width:14px;height:14px;display:grid;place-items:center;color:#7a838d;font-size:12px;font-weight:600;line-height:1}
.profileRowIcon:first-letter{line-height:1}
.profileArrow{font-size:18px;color:#69727c;line-height:1;transform:translateY(-1px)}
.profileValuePill{height:21px;min-width:58px;padding:0 8px;border-radius:7px;background:#ededed;color:#555;display:inline-flex;align-items:center;justify-content:center;font-size:10px;white-space:nowrap}
.profileNumberPill{min-width:38px}
.profileDrawer::-webkit-scrollbar{width:6px}.profileDrawer::-webkit-scrollbar-thumb{background:#c7c7c7;border-radius:8px}.profileDrawer::-webkit-scrollbar-track{background:transparent}
.profileBuild,.profileLogout{display:none!important}
@media(max-width:900px) and (hover:none) and (pointer:coarse){.profileDrawer{width:min(392px,94vw)!important;max-width:94vw!important}}

/* =========================================================
   v45 — Desktop front exact-reference refinement
   Reference: user-provided second desktop screenshot.
   Scope: desktop shell/header/sidebar/dashboard geometry only.
   Mobile layout and existing app logic remain untouched.
   ========================================================= */
@media (min-width:901px){
  /* Target has a slightly narrower left rail and tighter content gutters. */
  .bizShell{grid-template-columns:160px minmax(0,1fr)!important}
  .bizSidebar{width:160px!important;min-width:160px!important}
  .bizWorkspace{padding-left:24px!important;padding-right:24px!important;padding-bottom:28px!important}

  /* Target header is materially shorter: compact logo row + thin breadcrumb row. */
  .bizBrand{height:44px!important;padding:0 10px!important}
  .hbBrandImg{width:138px!important;max-width:138px!important;height:35px!important;object-fit:contain!important;object-position:left center!important}

  .bizTopbar{height:69px!important;margin:0 -24px!important;padding:0 24px!important;display:block!important;position:relative!important;background:#fff!important;border:0!important}
  .bizTopbar:before{display:block!important;content:""!important;position:absolute!important;left:0!important;right:0!important;top:44px!important;border-top:1px solid #eeeeee!important}
  .bizTopbar:after{display:block!important;content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;border-top:1px solid #eeeeee!important}
  .crumb{left:12px!important;bottom:0!important;height:25px!important;display:flex!important;align-items:center!important;font-size:11px!important;color:#333!important}
  .topActions{right:18px!important;top:0!important;height:44px!important;gap:11px!important}

  /* Desktop collapse/menu glyph visible in the same spot as the target UI. */
  .mobileMenuToggle{
    display:flex!important;position:absolute!important;left:2px!important;top:6px!important;z-index:2!important;
    width:30px!important;height:32px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
    flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;cursor:default!important;
  }
  .mobileMenuToggle span{display:block!important;width:15px!important;height:2px!important;border-radius:2px!important;background:#47627e!important;transition:none!important}
  .mobileMenuToggle:after{content:"‹"!important;position:absolute!important;left:1px!important;top:6px!important;font:700 18px/18px "Segoe UI",Arial,sans-serif!important;color:#47627e!important}

  /* Target dashboard starts sooner and uses a denser title row. */
  .dashTitleRow{height:44px!important;align-items:center!important}
  .dashTitleRow h1{font-size:22px!important;font-weight:800!important;line-height:1!important;margin:0!important;color:#111!important}
  .onlineSwitch{font-size:12px!important;gap:7px!important}
  .onlineSwitch i{width:34px!important;height:19px!important}
  .onlineSwitch i:after{width:15px!important;height:15px!important;top:2px!important;right:2px!important}

  .dashBoardBox{padding:12px 12px 13px!important;border-radius:7px!important;background:#fff!important}
  .dashControlRow{height:36px!important;margin-bottom:8px!important;align-items:flex-start!important}
  .balancePill{height:34px!important;padding:0 10px!important;font-size:11px!important}
  .periodTabs{height:34px!important;padding:3px!important;border-radius:5px!important}
  .periodTabs .periodBtn{height:28px!important;min-width:54px!important;padding:0 9px!important;font-size:10.5px!important}
  .periodTabs .periodRefresh{height:34px!important;min-width:70px!important;margin:-3px -3px -3px 6px!important;padding:0 10px!important;font-size:10.5px!important}

  /* Summary area in target is much more compact vertically. */
  .summaryGrid{gap:7px!important}
  .summaryCard{height:56px!important;padding:8px 8px!important;border-radius:6px!important}
  .summaryCard small{font-size:10.5px!important;line-height:1.15!important;margin:0 0 3px!important}
  .summaryCard strong{font-size:17px!important;line-height:1!important}
  .summaryCard em{right:10px!important;top:10px!important;width:20px!important;height:20px!important;background-size:contain!important}

  /* Keep the banner full-width and visually attached to the compact summary grid. */
  .megaOffer{margin-top:10px!important}

  /* Sidebar spacing in the target stays compact but readable. */
  .bizNav{padding:18px 11px 14px!important}
  .bizNav button{height:30px!important;min-height:30px!important;font-size:13px!important;padding:0 6px!important;gap:6px!important}
  .bizNav .subscribeBtn{height:30px!important;min-height:30px!important}
  .navIconImg{width:24px!important;height:24px!important;flex-basis:24px!important}
  .subscribeBtn .navIconImg{width:22px!important;height:24px!important;flex-basis:22px!important}
  .navDivider{margin:7px 7px!important}
}

/* v46 — Cashbox transaction filter reference match */
.cashboxToolbar #cashboxTypeFilter{min-width:148px;background:#fff}
.cashboxToolbar #cashboxPageSize{min-width:92px;background:#fff}
.cashTablePanel{position:relative;min-height:174px;overflow:hidden}
.cashTablePanel .hTableWrap[hidden]{display:none!important}
.cashboxEmpty{min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7b8494;font-size:12px;text-align:center}
.cashboxEmpty[hidden]{display:none!important}
.cashboxEmptyIcon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f0f2f5;color:#99a1ad;margin-bottom:10px;font-size:15px}
.cashboxEmpty p{margin:0;color:#7b8494}
#cashboxView .cashTablePanel .hTable td:first-child,#cashboxView .cashTablePanel .hTable th:first-child{padding-left:10px}
@media(max-width:1100px){.cashboxToolbar{flex-wrap:wrap;justify-content:flex-end}.cashboxToolbar #cashboxTypeFilter{min-width:136px}}


/* =========================================================
   Cashbox date range picker — exact Hishabee reference behavior.
   Only the marked date-range section is changed.
   ========================================================= */
#cashboxView .cashboxToolbar{overflow:visible!important}
#cashboxView .cashboxDatePickerWrap{position:relative;width:244px;min-width:244px;flex:0 0 244px;height:36px;z-index:190}
#cashboxView .cashboxDateButton{width:100%;height:36px;border:1px solid #d8dde3;border-radius:5px;background:#fff;color:#52606f;padding:0 12px;display:flex;align-items:center;justify-content:flex-start;gap:7px;font-size:11px;line-height:1;font-weight:600;white-space:nowrap;box-shadow:none;text-align:left}
#cashboxView .cashboxDateButton:hover,#cashboxView .cashboxDateButton:focus-visible{background:#fff;border-color:#cbd2da;outline:none}
#cashboxView .cashboxDatePopover{position:absolute;right:0;top:40px;width:460px;min-height:348px;box-sizing:border-box;padding:12px;display:grid;grid-template-columns:150px 1fr;grid-template-rows:1fr auto;column-gap:18px;row-gap:10px;background:#fff;border:1px solid #d8dde3;border-radius:8px;box-shadow:0 7px 20px rgba(16,24,40,.23);z-index:1500;color:#42526b}
#cashboxView .cashboxDatePopover[hidden]{display:none!important}
#cashboxView .cashboxDateQuick{display:flex;flex-direction:column;align-items:stretch;gap:1px;min-width:0}
#cashboxView .cashboxDateQuick button{width:100%;height:38px;min-height:38px;box-sizing:border-box;border:0;border-radius:7px;background:#fff;color:#4a5b73;padding:0 13px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;line-height:1;font-weight:600;text-align:left;white-space:nowrap}
#cashboxView .cashboxDateQuick button:hover,#cashboxView .cashboxDateQuick button:focus-visible{background:#f2f3f5;outline:none}
#cashboxView .cashboxDateQuick button.active{background:#171717;color:#fff;font-weight:700}
#cashboxView .cashboxDateCustom{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:11px;padding:2px 0 0;color:#43536b}
#cashboxView .cashboxDateCustom>b{display:block;margin:0 0 2px;font-size:14px;line-height:1.2;font-weight:700;color:#43536b}
#cashboxView .cashboxDateCustom label{position:relative;display:flex;flex-direction:column;gap:7px;margin:0;font-size:13px;line-height:1.15;font-weight:600;color:#4a5a70}
#cashboxView .cashboxDateField{position:relative;width:100%;height:46px;box-sizing:border-box;border:1px solid #cfd5dc;border-radius:7px;background:#fff;color:#4a5a70;padding:0 42px 0 13px;display:flex;align-items:center;justify-content:flex-start;font-size:13px;line-height:1;font-weight:600;text-align:left;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#cashboxView .cashboxDateField:hover,#cashboxView .cashboxDateField:focus-visible{border-color:#bcc4ce;outline:none}
#cashboxView .cashboxDateField i{position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:1.6px solid #40516a;border-bottom:1.6px solid #40516a;transform:translateY(-70%) rotate(45deg)}
#cashboxView .cashboxNativeDateInput{position:absolute!important;left:50%!important;bottom:0!important;width:1px!important;height:1px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important}
#cashboxView .cashboxDateActions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;min-height:44px;padding-top:2px}
#cashboxView .cashboxDateActions button{height:42px;min-height:42px;box-sizing:border-box;border-radius:7px;padding:0 20px;font-size:13px;line-height:1;font-weight:600;white-space:nowrap}
#cashboxView .cashboxDateClear{justify-self:start;border:0;background:#f4f4f5;color:#36465d;padding-left:14px!important;padding-right:14px!important}
#cashboxView .cashboxDateCancel{border:1px solid #d3d7dc;background:#fff;color:#43536b}
#cashboxView .cashboxDateApply{border:1px solid #151515;background:#151515;color:#fff}
#cashboxView .cashboxDateApply:hover,#cashboxView .cashboxDateApply:focus-visible{background:#090909;outline:none}
#cashboxView .cashboxDateCancel:hover,#cashboxView .cashboxDateClear:hover{background:#f0f1f2}
@media(max-width:1100px){#cashboxView .cashboxDatePickerWrap{width:220px;min-width:220px;flex-basis:220px}#cashboxView .cashboxDatePopover{width:430px;grid-template-columns:140px 1fr;column-gap:14px}}


/* =========================================================
   Purchase History date range picker — same as Cashbox picker.
   Only the date-range control in Purchase History is changed.
   ========================================================= */
#purchaseHistoryView .historyFilters{overflow:visible!important}
#purchaseHistoryView .purchaseHistoryDatePickerWrap{position:relative;width:244px;min-width:244px;flex:0 0 244px;height:36px;z-index:190}
#purchaseHistoryView .purchaseHistoryDateButton{width:100%;height:36px;border:1px solid #d8dde3;border-radius:5px;background:#fff;color:#52606f;padding:0 12px;display:flex;align-items:center;justify-content:flex-start;gap:7px;font-size:11px;line-height:1;font-weight:600;white-space:nowrap;box-shadow:none;text-align:left}
#purchaseHistoryView .purchaseHistoryDateButton:hover,#purchaseHistoryView .purchaseHistoryDateButton:focus-visible{background:#fff;border-color:#cbd2da;outline:none}
#purchaseHistoryView .purchaseHistoryDatePopover{position:absolute;right:0;top:40px;width:460px;min-height:348px;box-sizing:border-box;padding:12px;display:grid;grid-template-columns:150px 1fr;grid-template-rows:1fr auto;column-gap:18px;row-gap:10px;background:#fff;border:1px solid #d8dde3;border-radius:8px;box-shadow:0 7px 20px rgba(16,24,40,.23);z-index:1500;color:#42526b}
#purchaseHistoryView .purchaseHistoryDatePopover[hidden]{display:none!important}
#purchaseHistoryView .purchaseHistoryDateQuick{display:flex;flex-direction:column;align-items:stretch;gap:1px;min-width:0}
#purchaseHistoryView .purchaseHistoryDateQuick button{width:100%;height:38px;min-height:38px;box-sizing:border-box;border:0;border-radius:7px;background:#fff;color:#4a5b73;padding:0 13px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;line-height:1;font-weight:600;text-align:left;white-space:nowrap}
#purchaseHistoryView .purchaseHistoryDateQuick button:hover,#purchaseHistoryView .purchaseHistoryDateQuick button:focus-visible{background:#f2f3f5;outline:none}
#purchaseHistoryView .purchaseHistoryDateQuick button.active{background:#171717;color:#fff;font-weight:700}
#purchaseHistoryView .purchaseHistoryDateCustom{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:11px;padding:2px 0 0;color:#43536b}
#purchaseHistoryView .purchaseHistoryDateCustom>b{display:block;margin:0 0 2px;font-size:14px;line-height:1.2;font-weight:700;color:#43536b}
#purchaseHistoryView .purchaseHistoryDateCustom label{position:relative;display:flex;flex-direction:column;gap:7px;margin:0;font-size:13px;line-height:1.15;font-weight:600;color:#4a5a70}
#purchaseHistoryView .purchaseHistoryDateField{position:relative;width:100%;height:46px;box-sizing:border-box;border:1px solid #cfd5dc;border-radius:7px;background:#fff;color:#4a5a70;padding:0 42px 0 13px;display:flex;align-items:center;justify-content:flex-start;font-size:13px;line-height:1;font-weight:600;text-align:left;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#purchaseHistoryView .purchaseHistoryDateField:hover,#purchaseHistoryView .purchaseHistoryDateField:focus-visible{border-color:#bcc4ce;outline:none}
#purchaseHistoryView .purchaseHistoryDateField i{position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:1.6px solid #40516a;border-bottom:1.6px solid #40516a;transform:translateY(-70%) rotate(45deg)}
#purchaseHistoryView .purchaseHistoryNativeDateInput{position:absolute!important;left:50%!important;bottom:0!important;width:1px!important;height:1px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important}
#purchaseHistoryView .purchaseHistoryDateActions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;min-height:44px;padding-top:2px}
#purchaseHistoryView .purchaseHistoryDateActions button{height:42px;min-height:42px;box-sizing:border-box;border-radius:7px;padding:0 20px;font-size:13px;line-height:1;font-weight:600;white-space:nowrap}
#purchaseHistoryView .purchaseHistoryDateClear{justify-self:start;border:0;background:#f4f4f5;color:#36465d;padding-left:14px!important;padding-right:14px!important}
#purchaseHistoryView .purchaseHistoryDateCancel{border:1px solid #d3d7dc;background:#fff;color:#43536b}
#purchaseHistoryView .purchaseHistoryDateApply{border:1px solid #151515;background:#151515;color:#fff}
#purchaseHistoryView .purchaseHistoryDateApply:hover,#purchaseHistoryView .purchaseHistoryDateApply:focus-visible{background:#090909;outline:none}
#purchaseHistoryView .purchaseHistoryDateCancel:hover,#purchaseHistoryView .purchaseHistoryDateClear:hover{background:#f0f1f2}
@media(max-width:1100px){#purchaseHistoryView .purchaseHistoryDatePickerWrap{width:220px;min-width:220px;flex-basis:220px}#purchaseHistoryView .purchaseHistoryDatePopover{width:430px;grid-template-columns:140px 1fr;column-gap:14px}}

/* =========================================================
   v55 — Desktop view-size lock
   Keeps the desktop site at the normal/reference visual size even when
   Chromium/Chrome page zoom is changed. Mobile layout remains untouched.
   The actual correction value is calculated in business.js.
   ========================================================= */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html.desktopViewSizeLocked,
  html.desktopViewSizeLocked body{
    overflow-x:hidden!important;
  }
  html.desktopViewSizeLocked .bizShell{
    transform-origin:top left!important;
  }
}


/* v56 — Purchase-History style date range picker, shared across every history/date-range area. */
.universalDatePickerWrap{position:relative;width:244px;min-width:244px;flex:0 0 244px;height:36px;z-index:190}
.universalDateButton{width:100%;height:36px;border:1px solid #d8dde3;border-radius:5px;background:#fff;color:#52606f;padding:0 12px;display:flex;align-items:center;justify-content:flex-start;gap:7px;font-size:11px;line-height:1;font-weight:600;white-space:nowrap;box-shadow:none;text-align:left}
.universalDateButton:hover,.universalDateButton:focus-visible{background:#fff;border-color:#cbd2da;outline:none}
.universalDatePopover{position:absolute;right:0;top:40px;width:460px;min-height:348px;box-sizing:border-box;padding:12px;display:grid;grid-template-columns:150px 1fr;grid-template-rows:1fr auto;column-gap:18px;row-gap:10px;background:#fff;border:1px solid #d8dde3;border-radius:8px;box-shadow:0 7px 20px rgba(16,24,40,.23);z-index:2500;color:#42526b}
.universalDatePopover[hidden]{display:none!important}
.universalDateQuick{display:flex;flex-direction:column;align-items:stretch;gap:1px;min-width:0}
.universalDateQuick button{width:100%;height:38px;min-height:38px;box-sizing:border-box;border:0;border-radius:7px;background:#fff;color:#4a5b73;padding:0 13px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;line-height:1;font-weight:600;text-align:left;white-space:nowrap}
.universalDateQuick button:hover,.universalDateQuick button:focus-visible{background:#f2f3f5;outline:none}
.universalDateQuick button.active{background:#171717;color:#fff;font-weight:800}
.universalDateCustom{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:11px;padding:2px 0 0;color:#43536b}
.universalDateCustom>b{display:block;margin:0 0 2px;font-size:14px;line-height:1.2;font-weight:800;color:#43536b}
.universalDateCustom label{position:relative;display:flex;flex-direction:column;gap:7px;margin:0;font-size:13px;line-height:1.15;font-weight:600;color:#4a5a70}
.universalDateField{position:relative;width:100%;height:46px;box-sizing:border-box;border:1px solid #cfd5dc;border-radius:7px;background:#fff;color:#4a5a70;padding:0 42px 0 13px;display:flex;align-items:center;justify-content:flex-start;font-size:13px;line-height:1;font-weight:600;text-align:left;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.universalDateField:hover,.universalDateField:focus-visible{border-color:#bcc4ce;outline:none}
.universalDateField i{position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:1.6px solid #40516a;border-bottom:1.6px solid #40516a;transform:translateY(-70%) rotate(45deg)}
.universalNativeDateInput{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:50%!important;bottom:0!important}
.universalDateActions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;min-height:44px;padding-top:2px}
.universalDateActions button{height:42px;min-height:42px;box-sizing:border-box;border-radius:7px;padding:0 20px;font-size:13px;line-height:1;font-weight:700;white-space:nowrap}
.universalDateClear{justify-self:start;border:0;background:#f4f4f5;color:#36465d;padding-left:14px!important;padding-right:14px!important}
.universalDateCancel{border:1px solid #d3d7dc;background:#fff;color:#43536b}
.universalDateApply{border:1px solid #151515;background:#151515;color:#fff}
.universalDateApply:hover,.universalDateApply:focus-visible{background:#090909;outline:none}
.universalDateCancel:hover,.universalDateClear:hover{background:#f0f1f2}
#dueView .dueDateRow{overflow:visible;position:relative;z-index:210}
#dueView .dueDateRow .universalDatePickerWrap{margin-left:auto}
#dueHistoryView .dueHistoryTools{overflow:visible}
#expensesView .historyFilters{overflow:visible}
#salesHistoryView .historyFilters{overflow:visible}
@media(max-width:1100px){.universalDatePickerWrap{width:220px;min-width:220px;flex-basis:220px}.universalDatePopover{width:430px;grid-template-columns:140px 1fr;column-gap:14px}}
@media(max-width:760px) and (hover:none) and (pointer:coarse){.universalDatePopover{position:fixed;left:12px;right:12px;top:96px;width:auto;max-width:none;grid-template-columns:128px 1fr;column-gap:10px;z-index:5000}.universalDatePickerWrap{width:100%;min-width:0;flex:1 1 auto}}


/* v57 — professional zoom-safe desktop layout
   Browser zoom may enlarge/shrink the UI, but it must never collapse into the phone layout
   or squeeze core panels until they overlap. On a real touch phone/tablet the existing mobile
   interface is still used. Presentation only; no business/data logic is changed. */
@media screen and (min-device-width:901px){
  html,body{
    min-width:1120px;
    overflow-x:auto!important;
    overflow-y:auto;
  }
  .bizShell{
    min-width:1120px;
    width:100%;
    transform:none!important;
    zoom:1!important;
  }
  .bizWorkspace{min-width:0!important}
  .bizSidebar{position:sticky!important;top:0!important;height:100vh!important;overflow-y:auto!important}
  .bizTopbar{min-width:0!important}

  /* Keep the core desktop work areas structurally intact at high browser zoom. */
  .purchaseClone,.sellClone{
    grid-template-columns:clamp(420px,29vw,548px) minmax(560px,1fr)!important;
    min-width:0;
  }
  .purchasePicker,.sellPicker,.purchaseStage{min-width:0}
  .purchaseSearchRow{min-width:0}
  .purchaseSearch,.purchaseBarcodeField{min-width:0}
  .purchaseStageMain{min-width:0}

  .dueSplit,.contactSplit,.accessSplit,.printerSplit{
    grid-template-columns:clamp(390px,27vw,470px) minmax(540px,1fr)!important;
  }
  .marketingSplit{grid-template-columns:clamp(420px,30vw,500px) minmax(520px,1fr)!important}

  /* Controls may wrap cleanly rather than overlap when browser zoom is high. */
  .pageTitleRow,.historyHeader,.dueTitleRow,.contactTitle,.expenseTop{min-width:0}
  .pageToolbar,.historyRight,.historyFilters,.cashboxToolbar,.dueHistoryTools{
    min-width:0;
  }
  .historyFilters,.cashboxToolbar,.dueHistoryTools{
    row-gap:8px;
  }
  .historyFilters>* , .cashboxToolbar>* , .dueHistoryTools>*{flex-shrink:0}
  .searchBox{max-width:100%}

  /* Never allow cards, tables, popovers or drawers to push through one another. */
  .hPanel,.flatPanel,.cashTablePanel,.purchaseStage,.purchasePicker,.sellPicker{min-width:0}
  .hTableWrap{max-width:100%;overflow:auto!important}
  .hTable{width:100%}
  .cashboxDatePopover,.purchaseHistoryDatePopover,.universalDatePopover{
    max-width:min(460px,calc(100vw - 24px));
  }
  .inlineDrawer,.productAddDrawer,.dueEntryDrawer,.profileDrawer{max-height:100vh;overflow:auto}

  /* Home stays fluid. The banner always fills its frame at every zoom level. */
  .dashBoardBox,.summaryGrid,.primaryLinks,.linkSections,.megaOffer,.homeSlideshow{min-width:0}
  .homeSlideshow,.megaOffer{width:100%!important}
  .homeSlide,.homeSlideTrack,.homeSlide img{width:100%!important;max-width:100%!important}
  .homeSlide img{object-fit:fill!important}

  /* At extreme desktop zoom, scrolling is preferable to a broken/reflowed desktop UI. */
  @supports (scrollbar-gutter:stable){html{scrollbar-gutter:stable}}
}

/* =========================================================
   v58 — Due ledger target-video match + micro-interactions
   Matches the supplied Hishabee reference without adding any
   loading screen/spinner. Existing due calculations stay intact.
   ========================================================= */
#dueView .dueSplit{
  grid-template-columns:clamp(410px,30.5%,560px) minmax(560px,1fr)!important;
  min-height:560px;
  height:calc(100vh - 205px);
  max-height:820px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e4e7eb;
  border-radius:7px;
}
#dueView .dueListPanel,#dueView .dueDetailPanel{
  min-height:0!important;height:100%!important;border:0!important;border-radius:0!important;background:#fff;
}
#dueView .dueListPanel{border-right:1px solid #e4e7eb!important;overflow:hidden}
#dueView .dueDetailPanel{position:relative;display:flex;flex-direction:column;overflow:visible;padding:0 0 92px}
#dueView .duePartyTabs{height:48px;padding:0 18px;gap:28px;border-bottom:1px solid #eceff1;align-items:stretch;overflow:visible}
#dueView .duePartyTabs button{height:48px;padding:0 2px;display:flex;align-items:center;gap:4px;font-size:13px;color:#667085;transition:color 150ms ease,background 150ms ease,transform 150ms ease}
#dueView .duePartyTabs button::before{content:none}
#dueView .duePartyTabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#111;transform:scaleX(0);transform-origin:center;transition:transform 170ms cubic-bezier(.22,.61,.36,1)}
#dueView .duePartyTabs button.active{color:#1f2937;font-weight:800}
#dueView .duePartyTabs button.active::after{transform:scaleX(1)}
#dueView .duePartyTabs button[data-count]:not([data-count="0"])::before{content:"(" attr(data-count) ")";position:absolute;right:-12px;top:7px;font-size:8px;color:#667085;font-weight:700}
#dueView .dueSearchRow{height:58px;padding:9px 16px;border-bottom:1px solid #e8ebef;gap:8px}
#dueView .dueSearchRow .searchBox{height:40px;border:1px solid #d9dee5;border-radius:5px;background:#fff}
#dueView .dueSearchRow .searchBox input{font-size:12px}
#dueView .dueSearchRow .softBtn{width:48px;height:40px;border:1px solid #d9dee5;background:#fff;border-radius:5px}
#dueView #dueContactList{height:calc(100% - 106px);overflow:auto}
#dueView .dueTargetEmpty{display:grid;place-items:center;color:#667085;font-size:12px}
#dueView .dueVideoContactList{display:block;align-content:initial}
#dueView .dueVideoContact{
  position:relative;height:72px;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:0 16px;border-bottom:1px solid #eceff1;background:#fff;color:#475467;overflow:hidden;
  transition:background 150ms ease,transform 150ms ease,box-shadow 150ms ease;
}
#dueView .dueVideoContact:hover{background:#fafafa}
#dueView .dueVideoContact.active{background:#f4f4f4;box-shadow:inset 3px 0 0 #111}
#dueView .dueVideoContact.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#111}
#dueView .dueVideoAvatar{width:34px;height:34px;font-size:12px;background:#eef1f4;color:#667085}
#dueView .dueTargetContactText{min-width:0}
#dueView .dueTargetContactText b{display:block;font-size:13px;line-height:1.1;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dueView .dueTargetContactText small{display:block;margin-top:5px;font-size:11px;color:#98a2b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dueView .dueTargetContactAmount{min-width:74px;text-align:right;display:grid;justify-items:end;gap:4px}
#dueView .dueTargetContactAmount strong{font-size:12px;font-weight:800}
#dueView .dueTargetContactAmount.red strong{color:#f04452}
#dueView .dueTargetContactAmount.green strong{color:#12a150}
#dueView .dueTargetContactAmount em{min-width:44px;padding:3px 8px;border-radius:11px;font-size:9px;line-height:1;font-style:normal;font-weight:700;color:#fff;text-align:center}
#dueView .dueTargetContactAmount.red em{background:#f04452}
#dueView .dueTargetContactAmount.green em{background:#31bd66}

#dueView .dueTargetTopbar{
  min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fff;position:relative;z-index:220;
}
#dueView .dueTargetIdentityHost{min-width:0;flex:1;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px}
#dueView .dueTargetIdentityHost:empty{display:none}
#dueView .dueTargetAvatar{width:36px;height:36px}
#dueView .dueTargetIdentityText{min-width:0}
#dueView .dueTargetIdentityText>span{display:flex;align-items:center;gap:7px;min-width:0}
#dueView .dueTargetIdentityText b{font-size:14px;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dueView .dueTargetIdentityText em{padding:3px 7px;border-radius:10px;background:#d8f8e2;color:#28a455;font-size:9px;font-style:normal;font-weight:800}
#dueView .dueTargetIdentityText small{display:block;margin-top:3px;color:#98a2b3;font-size:10px}
#dueView .dueTargetBalanceBox{padding-left:18px;border-left:1px solid #eceff1;min-width:100px}
#dueView .dueTargetBalanceBox small,#dueView .dueTargetBalanceBox b{display:block}
#dueView .dueTargetBalanceBox small{font-size:10px;color:#667085}
#dueView .dueTargetBalanceBox b{font-size:15px;margin-top:4px}
#dueView .dueTargetTopActions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#dueView .dueTargetIconBtn{width:50px;height:42px;border:1px solid #d7dce2;border-radius:5px;background:#fff;color:#475467;font-size:16px;cursor:pointer}
#dueView .dueTargetTopActions .universalDatePickerWrap{width:240px;min-width:240px;flex:0 0 240px}
#dueView .dueTargetTopActions .universalDateButton{height:42px;width:100%;font-size:10px;justify-content:center}
#dueView .dueTargetInvoiceBtn{height:42px;padding:0 18px;border:0;border-radius:5px;background:#1677e8;color:#fff;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease}
#dueView .dueTargetInvoiceBtn:hover{background:#0d6bd8;box-shadow:0 5px 12px rgba(22,119,232,.18)}
#dueView .dueTargetInvoiceBtn:active{transform:translateY(1px)}
#dueView #dueMainDatePopover{top:48px;right:0;z-index:6000}

#dueView .dueTargetBody{flex:1;min-height:0;overflow:auto;padding:0!important;background:#fff;color:#475467}
#dueView .dueTargetBody.centerEmpty{display:grid;place-items:center;font-size:12px}
#dueView .dueTargetLedgerHead{height:42px;display:grid;grid-template-columns:minmax(220px,1fr) 125px 125px 125px;align-items:center;padding:0 12px;background:#ededed;border-bottom:1px solid #d8d8d8;color:#536174;font-size:11px}
#dueView .dueTargetLedgerHead span{text-align:right;font-weight:700}
#dueView .dueTargetLedgerRows{min-height:calc(100% - 42px)}
#dueView .dueTargetLedgerRow{min-height:48px;display:grid;grid-template-columns:minmax(220px,1fr) 125px 125px 125px;align-items:center;padding:7px 12px;border-bottom:1px solid #eff1f3;font-size:10px;color:#667085}
#dueView .dueTargetLedgerRow>span:not(:first-child){text-align:right;font-weight:700}
#dueView .dueTargetLedgerRow>span:first-child b{display:block;font-size:10px;font-weight:600;color:#667085}
#dueView .dueTargetLedgerRow>span:first-child small{display:block;margin-top:3px;color:#a0a7b1;font-size:9px}
#dueView .dueTargetLedgerEmpty{height:190px;display:grid;place-items:center;color:#667085}

#dueView .dueTargetFooter{position:absolute;left:0;right:0;bottom:0;height:92px;background:#fff;border-top:1px solid #dfe3e7;padding:7px 12px 10px;z-index:80}
#dueView .dueTargetFooter[hidden]{display:none!important}
#dueView .dueTargetTotals{height:28px;display:grid;grid-template-columns:minmax(150px,1fr) 150px 150px 150px;align-items:center;font-size:9px;color:#667085}
#dueView .dueTargetTotals>span:not(:first-child){text-align:right}
#dueView .dueTargetTotals b{margin-left:8px;font-size:10px}
#dueView .dueTargetBottomActions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#dueView .dueTargetBottomActions button{height:42px;border:0;border-radius:4px;color:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:filter 140ms ease,transform 140ms ease}
#dueView .dueTargetBottomActions button:active{transform:translateY(1px)}
#dueView .dueTargetGivenBtn{background:#f15464}
#dueView .dueTargetReceivedBtn{background:#59ce69}
#dueView .dueTargetBottomActions button:hover{filter:brightness(.96)}

@keyframes dueTargetListIn{from{opacity:.25;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetDetailIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes dueTargetIdentityIn{from{opacity:.3;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetFooterIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#dueView .dueTargetListIn{animation:dueTargetListIn 150ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetDetailIn{animation:dueTargetDetailIn 160ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetIdentityIn{animation:dueTargetIdentityIn 160ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetFooterIn{animation:dueTargetFooterIn 160ms cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:reduce){
  #dueView .dueTargetListIn,#dueView .dueTargetDetailIn,#dueView .dueTargetIdentityIn,#dueView .dueTargetFooterIn{animation:none!important}
  #dueView .dueVideoContact,#dueView .duePartyTabs button,#dueView .duePartyTabs button::after{transition:none!important}
}

@media screen and (min-device-width:901px) and (max-width:1250px){
  #dueView .dueSplit{grid-template-columns:390px minmax(570px,1fr)!important}
  #dueView .dueTargetTopbar{align-items:flex-start;min-height:104px}
  #dueView .dueTargetTopActions{flex-wrap:wrap;justify-content:flex-end}
  #dueView .dueTargetTopActions .universalDatePickerWrap{width:210px;min-width:210px;flex-basis:210px}
  #dueView .dueTargetLedgerHead,#dueView .dueTargetLedgerRow{grid-template-columns:minmax(190px,1fr) 95px 95px 100px}
  #dueView .dueTargetTotals{grid-template-columns:minmax(130px,1fr) 110px 110px 110px}
}

@media(max-width:900px) and (hover:none) and (pointer:coarse){
  #dueView .dueSplit{height:auto!important;max-height:none!important;grid-template-columns:1fr!important;overflow:visible}
  #dueView .dueListPanel{min-height:430px!important;height:auto!important;border-right:0!important;border-bottom:1px solid #e4e7eb!important}
  #dueView .dueDetailPanel{height:560px!important;min-height:560px!important}
  #dueView .dueTargetTopbar{flex-direction:column;align-items:stretch;height:auto;min-height:0}
  #dueView .dueTargetTopActions{width:100%}
  #dueView .dueTargetTopActions .universalDatePickerWrap{min-width:0;width:auto;flex:1}
  #dueView .dueTargetLedgerHead,#dueView .dueTargetLedgerRow{grid-template-columns:minmax(180px,1fr) 80px 80px 90px;min-width:520px}
  #dueView .dueTargetBody{overflow:auto}
  #dueView .dueTargetTotals{grid-template-columns:minmax(120px,1fr) 90px 90px 90px;min-width:460px;overflow:auto}
}

/* Sales history phone layout; desktop table and report remain available. */
.salesMobileHeader,.salesMobileSummary,.salesMobileCards,.salesMobileCount,.salesMobilePrint{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.salesHistoryMobilePage .bizTopbar,body.salesHistoryMobilePage .noticeBand{display:none!important}
  body.salesHistoryMobilePage .bizWorkspace{padding:0!important;margin:0!important;min-width:0!important;width:100%!important}
  #salesHistoryView{padding:0!important;margin:0!important;background:#f5f5f5!important;min-width:0!important}
  #salesHistoryView .salesMobileHeader{display:flex;align-items:center;gap:10px;height:64px;background:#ffca05;color:#111;padding:0 12px;font-size:21px}
  #salesHistoryView .salesMobileHeader button{border:0;background:transparent;color:#111;font-size:28px;padding:4px;cursor:pointer}
  #salesHistoryView .historyHeader{display:none!important}
  #salesHistoryView .salesMobileSummary{display:flex;flex-direction:column;align-items:center;gap:8px;background:#1957df;color:white;border-radius:13px;margin:6px 9px 10px;padding:15px 10px;font-size:18px;font-weight:600;min-height:132px}
  #salesHistoryView .salesMobileSummary>span{color:#ffdf00;font-size:21px}
  #salesHistoryView .salesMobileSummary strong{font-size:26px}
  #salesHistoryView .historyFilters{display:grid!important;grid-template-columns:minmax(0,1fr) 92px 48px!important;gap:10px!important;padding:0 9px 6px!important;margin:0!important;background:white;align-items:stretch}
  #salesHistoryView #salesHistoryDatePicker{grid-column:1;grid-row:1;width:auto!important;min-width:0!important;margin:0!important}
  #salesHistoryView #salesHistoryDateBtn{height:53px!important;min-height:53px!important;width:100%!important;padding:0 8px!important;font-size:12px!important;white-space:normal!important;justify-content:center}
  #salesHistoryView .salesDesktopCount{display:none!important}
  #salesHistoryView .salesMobileCount{display:block;grid-column:2;grid-row:1;width:100%!important;min-width:0!important;height:53px;border:1px solid #ccc;border-radius:7px;background:white;color:#526078;padding:0 8px;font-size:14px}
  #salesHistoryView #salesHistoryRefreshBtn{grid-column:3;grid-row:1;width:48px!important;min-width:0!important;height:53px!important;padding:0!important;font-size:0!important;border:1px solid #ccc;border-radius:7px;background:white}
  #salesHistoryView #salesHistoryRefreshBtn:after{content:'↻';font-size:27px;color:#888}
  #salesHistoryView .historyFilters .searchBox{grid-column:1/-1;grid-row:2;width:100%!important;min-width:0!important;height:55px!important;border:1px solid #ccc;border-radius:10px;padding:0 12px!important;box-sizing:border-box}
  #salesHistoryView .historyFilters .searchBox input{min-width:0!important;width:100%;font-size:17px!important}
  #salesHistoryView .salesMobileCards{display:grid;gap:10px;padding:9px}
  #salesHistoryView .salesMobileCard{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,40%);gap:8px;min-height:116px;border-radius:14px;background:#e7e7e7;padding:16px 14px;color:#43617e;box-shadow:0 1px 2px #dce1e6}
  #salesHistoryView .salesMobileDetails{display:flex;flex-direction:column;gap:3px;font-size:13px;overflow-wrap:anywhere;min-width:0}
  #salesHistoryView .salesMobileDetails b{font-size:17px;font-weight:600}
  #salesHistoryView .salesMobilePayment{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;min-width:0}
  #salesHistoryView .salesMobilePayment strong{color:#31c66a;font-size:21px;overflow-wrap:anywhere}
  #salesHistoryView .salesMobileStatus{background:#daf3df;color:#26be60;border-radius:7px;padding:3px 12px;font-size:16px}
  #salesHistoryView .salesMobileStatus.isDue{background:#fff0d3;color:#986408}
  #salesHistoryView .salesMobilePayment time{font-size:10px;line-height:1.5}
  #salesHistoryView .hTableWrap{display:none!important}
  #salesHistoryView .flatPanel{background:transparent;border:0;box-shadow:none}
  #salesHistoryView .salesMobilePrint{display:block;margin:8px auto 18px;border:0;border-radius:7px;padding:10px 20px;background:#1957df;color:white;cursor:pointer}
  #salesHistoryView #salesHistoryDatePopover{left:9px;right:9px;width:auto;max-width:calc(100vw - 18px);top:70px;grid-template-columns:minmax(80px,1fr) minmax(0,1.6fr);padding:12px;gap:8px}
}

/* =========================================================
   v63 — Hishabee desktop sidebar toggle behavior
   Reference: user-provided button behavior video.
   UI behavior only: desktop sidebar collapses to icon rail and expands again.
   Existing business data/navigation logic remains untouched.
   ========================================================= */
@media (min-width:901px){
  .bizShell,
  .bizSidebar,
  .bizWorkspace{
    transition:grid-template-columns .18s ease,width .18s ease,min-width .18s ease,padding .18s ease!important;
  }
  .mobileMenuToggle{cursor:pointer!important}

  .bizShell.businessSidebarCollapsed{grid-template-columns:58px minmax(0,1fr)!important}
  .bizShell.businessSidebarCollapsed .bizSidebar{width:58px!important;min-width:58px!important;overflow-x:hidden!important}
  .bizShell.businessSidebarCollapsed .bizBrand{width:58px!important;padding-left:10px!important;padding-right:0!important;overflow:hidden!important}
  .bizShell.businessSidebarCollapsed .hbBrandImg{
    width:138px!important;min-width:138px!important;max-width:none!important;
    height:35px!important;object-fit:contain!important;object-position:left center!important;
  }
  .bizShell.businessSidebarCollapsed .bizNav{padding-left:11px!important;padding-right:11px!important}
  .bizShell.businessSidebarCollapsed .bizNav button{
    width:36px!important;max-width:36px!important;min-width:36px!important;
    padding-left:6px!important;padding-right:6px!important;overflow:hidden!important;
    white-space:nowrap!important;justify-content:flex-start!important;
  }
  .bizShell.businessSidebarCollapsed .bizNav button .navIconImg{margin-right:8px!important;flex-shrink:0!important}
  .bizShell.businessSidebarCollapsed .bizNav .subscribeBtn span{display:none!important}
  .bizShell.businessSidebarCollapsed .navDivider{width:30px!important;margin-left:3px!important;margin-right:3px!important}
  .bizShell.businessSidebarCollapsed .bizWorkspace{padding-left:24px!important}
}


/* v64 — Purchase History clickable cards + Transaction Details drawer */
#purchaseHistoryBody tr.purchaseHistoryCardRow{cursor:pointer;transition:background-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}
#purchaseHistoryBody tr.purchaseHistoryCardRow:hover{background:#f2f2f2;box-shadow:inset 3px 0 0 #c8c8c8}
#purchaseHistoryBody tr.purchaseHistoryCardRow.is-active{background:#d0d0d0}
#purchaseHistoryBody tr.purchaseHistoryCardRow td{transition:background-color 160ms ease}
#purchaseHistoryBody .purchaseTxnActionCell{position:relative;width:56px;text-align:center}
.purchaseTxnKebab{width:34px;height:34px;border:0;background:transparent;border-radius:8px;font-size:24px;line-height:1;color:#42526b;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.purchaseTxnKebab:hover,.purchaseTxnKebab:focus-visible{background:#eef0f2;outline:none}
.purchaseTxnRowMenu{position:absolute;right:12px;top:42px;z-index:2100;min-width:145px;padding:5px;background:#fff;border:1px solid #dadde2;border-radius:6px;box-shadow:0 8px 22px rgba(16,24,40,.18);display:none}
.purchaseTxnRowMenu.open{display:block;animation:purchaseTxnMenuIn 150ms ease both}
.purchaseTxnRowMenu button{width:100%;height:38px;border:0;background:#fff;border-radius:5px;color:#ff4d4f;font-size:13px;font-weight:600;text-align:left;padding:0 12px;cursor:pointer}
.purchaseTxnRowMenu button:hover{background:#fff4f4}
@keyframes purchaseTxnMenuIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}

.purchaseTxnOverlay{position:fixed;inset:0;z-index:5200;visibility:hidden;pointer-events:none;transition:visibility 0s linear 330ms}
.purchaseTxnOverlay.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.purchaseTxnScrim{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(16,24,40,.43);opacity:0;transition:opacity 300ms ease;cursor:default}
.purchaseTxnOverlay.open .purchaseTxnScrim{opacity:1}
.purchaseTxnDrawer{position:absolute;right:0;top:0;width:min(555px,42vw);min-width:440px;height:100%;background:#fff;box-shadow:-10px 0 32px rgba(16,24,40,.15);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;transform:translate3d(103%,0,0);transition:transform 320ms cubic-bezier(.22,.78,.24,1);overflow:hidden}
.purchaseTxnOverlay.open .purchaseTxnDrawer{transform:translate3d(0,0,0)}
.purchaseTxnHead{height:70px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eceef1;position:relative;background:#fff;padding:0 58px}
.purchaseTxnHead h2{margin:0;color:#344054;font-size:20px;line-height:1;font-weight:800}
.purchaseTxnClose{position:absolute;right:12px;top:13px;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:#303846;font-size:32px;line-height:1;cursor:pointer}
.purchaseTxnClose:hover{background:#f4f5f6}
.purchaseTxnScroll{overflow:auto;padding:14px 22px 24px;background:#fff}
.purchaseTxnScroll::-webkit-scrollbar{width:9px}.purchaseTxnScroll::-webkit-scrollbar-thumb{background:#a8a8a8;border-radius:9px;border:2px solid #fff}
.purchaseTxnSummaryCard,.purchaseTxnMoneyCard,.purchaseTxnNotes{background:#f5f5f5;border-radius:10px;padding:16px 14px;margin-bottom:14px;color:#52606f}
.purchaseTxnSummaryTop{font-size:13px;font-weight:800;margin-bottom:16px;color:#53657b}
.purchaseTxnPersonLine{display:flex;align-items:center;gap:12px;font-size:13px;margin-bottom:16px}
.purchaseTxnAvatar{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #e0e3e7;border-radius:22px;background:#fff;color:#344054}
.purchaseTxnAvatar i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#f4f4f4;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.purchaseTxnDate{font-size:13px;font-weight:700;color:#53657b}
.purchaseTxnMoneyHead{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #d9dce1;font-size:17px;font-weight:800;color:#43536a}
.purchaseTxnPaymentBadge{display:inline-flex;align-items:center;background:#4f8df7;color:#fff;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:700}
.purchaseTxnMoneyRows{padding-top:8px}.purchaseTxnMoneyRow{display:flex;justify-content:space-between;align-items:center;min-height:38px;font-size:14px;color:#5b6778}.purchaseTxnMoneyRow.total{margin-top:2px;padding-top:10px;border-top:1px solid #d4d7dc;font-size:18px;font-weight:800;color:#43536a}
.purchaseTxnSectionTitle{font-size:16px;font-weight:800;color:#43536a;margin:7px 0 10px}
.purchaseTxnProductCard{border:1px solid #dfe2e6;border-radius:9px;background:#fff;padding:12px 10px 10px;margin-bottom:10px}
.purchaseTxnProductTop{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;color:#56657a;font-size:14px}
.purchaseTxnProductThumb{width:34px;height:34px;border-radius:5px;background:#ffcf3e;display:grid;place-items:center;font-size:17px;border:1px solid #f0bf22}
.purchaseTxnProductMeta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:8px 0 0 44px;font-size:12px;color:#5b6778}.purchaseTxnProductMeta span:nth-child(2){text-align:center}.purchaseTxnProductMeta span:nth-child(3){text-align:right}
.purchaseTxnReturnWrap{text-align:right;margin:8px 0 11px}.purchaseTxnReturnBtn{height:30px;border:0;border-radius:7px;background:#55c974;color:#fff;padding:0 12px;font-weight:700;font-size:12px;cursor:pointer}.purchaseTxnReturnBtn:hover{filter:brightness(.96)}
.purchaseTxnNotes{font-size:13px;line-height:1.55;padding:14px}.purchaseTxnNotes b{display:block;margin-bottom:2px;color:#58677a}.purchaseTxnNotes span{color:#43536a}
.purchaseTxnFooter{height:80px;border-top:1px solid #e1e4e8;background:#fff;padding:15px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.purchaseTxnFooter button{height:42px;border:0;border-radius:7px;color:#fff;font-weight:800;font-size:13px;cursor:pointer}.purchaseTxnDelete{background:#ff6269}.purchaseTxnEdit{background:#151515}.purchaseTxnFooter button:hover{filter:brightness(.97)}
html.purchaseTxnOpenLock,body.purchaseTxnOpenLock{overflow:hidden}
@media(max-width:900px){.purchaseTxnDrawer{width:min(94vw,555px);min-width:0}.purchaseTxnScroll{padding-left:14px;padding-right:14px}.purchaseTxnFooter{gap:8px;padding-left:12px;padding-right:12px}.purchaseTxnProductMeta{margin-left:0;grid-template-columns:1fr}.purchaseTxnProductMeta span:nth-child(n){text-align:left}}



/* v66 — transaction drawer print row (reference match) */
.purchaseTxnPrintWrap{padding:0 16px 10px;background:#fff}
.purchaseTxnPrintBtn{width:100%;height:48px;border:0;border-radius:7px;background:#e9e7e7;color:#475467;display:flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s ease,transform .15s ease}
.purchaseTxnPrintBtn:hover{background:#dfdddd}
.purchaseTxnPrintBtn:active{transform:scale(.995)}
.purchaseTxnPrintBtn img{width:24px;height:24px;object-fit:contain}

/* v65 — reference-matched history row/card drawer behavior (purchase + sell) */
#purchaseHistoryBody tr.purchaseHistoryCardRow,#salesHistoryBody tr.salesHistoryCardRow{cursor:pointer;transition:background-color .16s ease}
#purchaseHistoryBody tr.purchaseHistoryCardRow:hover,#salesHistoryBody tr.salesHistoryCardRow:hover{background:#f2f2f2}
#purchaseHistoryBody tr.purchaseHistoryCardRow.is-active,#salesHistoryBody tr.salesHistoryCardRow.is-active{background:#cdcdcd!important}
#purchaseHistoryBody tr.purchaseHistoryCardRow.is-active td,#salesHistoryBody tr.salesHistoryCardRow.is-active td{background:transparent!important}
.purchaseTxnOverlay{z-index:9990;transition:visibility 0s linear .28s}
.purchaseTxnScrim{background:rgba(0,0,0,.38);transition:opacity .26s ease}
.purchaseTxnDrawer{width:35.2vw;min-width:500px;max-width:620px;height:100vh;box-shadow:none;transform:translate3d(100%,0,0);transition:transform .28s cubic-bezier(.22,.8,.28,1);background:#fff}
.purchaseTxnHead{height:64px;min-height:64px;padding:0 54px;border-bottom:1px solid #ececec}
.purchaseTxnHead h2{font-size:20px;font-weight:700;color:#344054}
.purchaseTxnClose{right:10px;top:11px;width:42px;height:42px;font-size:31px}
.purchaseTxnScroll{padding:12px 16px 22px}
.purchaseTxnSummaryCard,.purchaseTxnMoneyCard,.purchaseTxnNotes{border-radius:9px;background:#f5f5f5;margin-bottom:12px;padding:14px 12px}
.purchaseTxnSummaryTop{font-size:13px;margin-bottom:14px}
.purchaseTxnPersonLine{margin-bottom:13px;gap:10px}
.purchaseTxnAvatar{padding:6px 12px;border-radius:20px}
.purchaseTxnDate{font-size:13px;font-weight:700}
.purchaseTxnInvoiceLine{margin-top:6px;font-size:12px;color:#667085}
.purchaseTxnMoneyHead{font-size:16px;padding-bottom:10px}
.purchaseTxnMoneyRow{min-height:34px;font-size:13px}
.purchaseTxnMoneyRow.total{font-size:17px;padding-top:8px}
.purchaseTxnSectionTitle{font-size:15px;margin:6px 0 8px}
.purchaseTxnProductCard{padding:9px 10px 8px;margin-bottom:7px}
.purchaseTxnProductTop{grid-template-columns:32px minmax(0,1fr);gap:9px}
.purchaseTxnProductThumb{width:32px;height:32px}
.purchaseTxnProductMeta{margin:6px 0 0 41px;font-size:12px}
.purchaseTxnReturnWrap{margin:6px 0 9px}
.purchaseTxnReturnBtn{height:27px;padding:0 10px;border-radius:6px;font-size:11px}
.purchaseTxnNotes{min-height:67px;padding:12px;font-size:12px}
.purchaseTxnFooter{height:78px;padding:14px 18px;gap:14px}
.purchaseTxnFooter button{height:40px;border-radius:6px;font-size:13px}
@media(max-width:1100px){.purchaseTxnDrawer{width:44vw;min-width:430px}}
@media(max-width:760px){.purchaseTxnDrawer{width:94vw;min-width:0;max-width:none}.purchaseTxnFooter{padding-left:10px;padding-right:10px;gap:8px}.purchaseTxnProductMeta{margin-left:0;grid-template-columns:1fr}.purchaseTxnProductMeta span:nth-child(n){text-align:left}}

/* =========================================================
   v69 — phone-only home dashboard refresh
   Desktop/tablet and all business logic remain unchanged.
   ========================================================= */
.mobileHeaderBrand,.mobileQuickLinks,.mobileBottomNav{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  html,body{background:#fff!important}
  .bizWorkspace{padding-bottom:92px!important}
  .bizTopbar{
    position:sticky!important;top:0!important;z-index:80!important;
    height:76px!important;padding:0 12px!important;margin:0!important;
    background:#ffc800!important;border:0!important;
    display:flex!important;align-items:center!important;gap:8px!important;
  }
  .mobileMenuToggle{display:flex!important;flex:0 0 42px!important;width:42px!important;height:42px!important}
  .mobileHeaderBrand{display:flex!important;min-width:0;flex:1 1 auto;align-items:center;text-decoration:none;color:#111;position:relative}
  .mobileHeaderBrand img{display:block;width:112px;height:34px;object-fit:contain;object-position:left center}
  .mobileHeaderBrand span{display:none}
  .topActions{margin-left:auto!important;gap:8px!important;flex:0 0 auto!important}
  .topActions>.topIcon{width:26px!important;height:26px!important}
  .topActions>.topIcon svg{width:25px!important;height:25px!important}
  .topPlainButton.settingsAction{width:27px!important;height:27px!important}
  .settingsAction .topIcon,.settingsAction .topIcon svg{width:26px!important;height:26px!important}
  .profileTopButton{height:40px!important;gap:5px!important}
  .profileTopButton .avatar{width:38px!important;height:38px!important;font-size:18px!important}
  .profileTopButton .chev{font-size:25px!important}
  .profileTopButton .shopName{display:none!important}
  .crumb,.noticeBand,.dashTitleRow{display:none!important}

  #dashboardView{padding:0!important;margin:0!important;background:#fff!important}
  .dashBoardBox{padding:12px 14px 18px!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .dashControlRow{display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;column-gap:10px!important;margin:0 0 14px!important;padding:0!important}
  .balancePill{grid-column:1!important;width:100%!important;height:50px!important;border:1.5px solid #18b957!important;border-radius:12px!important;background:#f2fff6!important;padding:0 13px!important;font-size:17px!important;color:#118a42!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important}
  .balancePill b{font-size:18px!important}
  .balancePill .balanceIcon{width:20px!important;height:20px!important}
  .periodTabs{grid-column:1/-1!important;width:100%!important;height:58px!important;margin-top:10px!important;padding:6px!important;border-radius:10px!important;background:#e8ebf0!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;overflow:visible!important}
  .periodTabs .periodBtn{flex:1 1 20%!important;height:46px!important;min-width:0!important;padding:0 3px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#66758b!important;font-size:16px!important;font-weight:600!important;white-space:nowrap!important}
  .periodTabs .periodBtn.active{background:#fff!important;color:#2563eb!important;box-shadow:0 2px 8px rgba(15,23,42,.10)!important}
  .periodTabs .periodRefresh{position:absolute!important;right:0!important;top:-60px!important;width:50px!important;min-width:50px!important;height:50px!important;margin:0!important;padding:0!important;border:1px solid #d6dbe2!important;border-radius:10px!important;background:#fff!important;font-size:0!important;display:grid!important;place-items:center!important}
  .periodTabs .periodRefresh::before{content:"⟳"!important;font:400 28px/1 "Segoe UI Symbol",sans-serif!important;color:#7b838c!important}

  .summaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0!important}
  .summaryCard{height:112px!important;min-height:112px!important;padding:18px 14px!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:16px!important;box-shadow:0 3px 12px rgba(15,23,42,.06)!important}
  .summaryCard small{font-size:17px!important;font-weight:700!important;color:#53647d!important;margin-bottom:15px!important}
  .summaryCard strong{font-size:25px!important;font-weight:800!important}
  .summaryCard em{right:16px!important;top:18px!important;width:26px!important;height:26px!important}
  .salesCard{background:linear-gradient(135deg,#f2fff8,#e8f8ef)!important}
  .purchaseCard{background:linear-gradient(135deg,#f5f9ff,#eaf1ff)!important}
  .expenseCard{background:linear-gradient(135deg,#fffaf1,#fff4df)!important}
  .stockCard{background:linear-gradient(135deg,#f4fff8,#eaf9ef)!important}
  .dueCard{background:linear-gradient(135deg,#fff6f6,#ffeaea)!important}
  .payableCard{background:linear-gradient(135deg,#fbf7ff,#f1eaff)!important}

  .megaOffer.homeSlideshow{margin:18px 0 0!important;border-radius:16px!important;aspect-ratio:4.3/1!important;box-shadow:0 3px 12px rgba(15,23,42,.07)!important}
  .homeSlide img{border-radius:15px!important}

  .primaryLinks{height:auto!important;margin:18px 0 0!important;padding:10px!important;gap:10px!important;border-radius:16px!important;box-shadow:0 3px 12px rgba(15,23,42,.06)!important}
  .primaryLinks button{height:96px!important;border-radius:12px!important;background:#f5f6f8!important;font-size:16px!important;font-weight:700!important;color:#52617a!important}
  .homePrimaryIcon{width:44px!important;height:44px!important}

  .mobileQuickLinks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:10px 0 18px!important;padding:10px!important;border:1px solid #e5e7eb!important;border-radius:16px!important;background:#fff!important;box-shadow:0 3px 12px rgba(15,23,42,.06)!important}
  .mobileQuickLinks button{height:92px!important;border:0!important;border-radius:12px!important;background:#f5f6f8!important;color:#52617a!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;font-size:16px!important;font-weight:700!important}
  .mobileQuickLinks img{width:41px;height:41px;object-fit:contain}

  .linkSections{margin-top:0!important;gap:12px!important}
  .linkGroup{border-radius:16px!important;box-shadow:0 3px 12px rgba(15,23,42,.05)!important}
  .linkGroup h3{height:54px!important;padding:15px 16px!important;font-size:19px!important;line-height:24px!important}
  .linkGroup>div,.linkGroup.full>div{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .linkGroup button,.linkGroup.full button{height:88px!important}
  .homeSmallIcon{width:37px!important;height:37px!important}
  .linkGroup button span{font-size:13px!important}

  .mobileBottomNav{position:fixed!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;left:0!important;right:0!important;bottom:0!important;height:76px!important;padding:7px 5px calc(7px + env(safe-area-inset-bottom))!important;background:#fff!important;border-top:1px solid #e5e7eb!important;box-shadow:0 -5px 20px rgba(15,23,42,.08)!important;z-index:90!important;box-sizing:content-box!important}
  .mobileBottomNav button{position:relative!important;height:62px!important;min-width:0!important;padding:3px 0!important;border:0!important;background:transparent!important;color:#53647d!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;font-family:inherit!important;font-size:13px!important;font-weight:700!important}
  .mobileBottomNav .mbnIcon{font:700 25px/1 "Segoe UI Symbol","Segoe UI",sans-serif!important}
  .mobileBottomNav button.active{color:#2463eb!important}
  .mobileBottomNav .mobileBottomAdd{overflow:visible!important}
  .mobileBottomNav .mbnPlus{width:50px!important;height:50px!important;margin-top:-28px!important;border-radius:50%!important;background:#2864ed!important;color:#fff!important;display:grid!important;place-items:center!important;font:300 38px/44px Arial,sans-serif!important;box-shadow:0 4px 12px rgba(37,99,235,.35)!important}
  .mobileBottomNav .mobileBottomAdd>span:last-child{margin-top:2px!important}
}
@media (max-width:390px){
  .mobileHeaderBrand img{width:88px}
  .topActions{gap:5px!important}
  .summaryCard small{font-size:15px!important}
  .summaryCard strong{font-size:22px!important}
  .periodTabs .periodBtn{font-size:14px!important}
}

/* =========================================================
   v70 — exact phone home layout refinement from user reference
   Phone-only visual override. Existing desktop + business logic untouched.
   ========================================================= */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  html,body{background:#fff!important}
  .bizWorkspace{padding-bottom:0!important}

  /* Header: reference has icons only, no centered brand. */
  .bizTopbar{
    height:76px!important;
    padding:0 17px 0 16px!important;
    background:#ffca05!important;
    border-bottom:1px solid #e7b900!important;
    gap:0!important;
  }
  .mobileHeaderBrand{display:none!important}
  .mobileMenuToggle{display:flex!important;width:44px!important;height:44px!important;flex:0 0 44px!important;margin:0!important}
  .topActions{margin-left:auto!important;gap:14px!important;height:100%!important;align-items:center!important}
  .topActions>.topIcon{width:28px!important;height:28px!important}
  .topActions>.topIcon svg{width:27px!important;height:27px!important;stroke-width:1.8!important}
  .topPlainButton.settingsAction{width:30px!important;height:30px!important;padding:0!important}
  .settingsAction .topIcon,.settingsAction .topIcon svg{width:28px!important;height:28px!important}
  .profileTopButton{height:44px!important;gap:12px!important;padding:0!important}
  .profileTopButton .avatar{width:39px!important;height:39px!important;font-size:18px!important;background:#f4f4f4!important;border:1px solid #c8c8c8!important}
  .profileTopButton .chev{font-size:28px!important;line-height:1!important;color:#111!important}
  .profileTopButton .shopName{display:none!important}

  #dashboardView{background:#fff!important}
  .dashBoardBox{padding:11px 13px 22px!important;background:#fff!important}

  /* Balance and refresh */
  .dashControlRow{grid-template-columns:minmax(0,1fr) 50px!important;column-gap:10px!important;margin-bottom:18px!important}
  .balancePill{
    width:max-content!important;max-width:100%!important;height:49px!important;
    padding:0 13px!important;border:1.5px solid #16b957!important;border-radius:10px!important;
    background:#f7fff9!important;color:#118c43!important;font-size:16px!important;
    box-shadow:none!important;white-space:nowrap!important;
  }
  .balancePill b{font-size:17px!important;font-weight:600!important}
  .balancePill .balanceIcon{width:17px!important;height:17px!important;margin-right:4px!important}

  /* Period tabs */
  .periodTabs{
    height:55px!important;margin-top:13px!important;padding:5px!important;
    border-radius:7px!important;background:#e5e7eb!important;
  }
  .periodTabs .periodBtn{
    height:45px!important;padding:0 2px!important;border-radius:5px!important;
    color:#64748b!important;font-size:16px!important;font-weight:600!important;
  }
  .periodTabs .periodBtn.active{
    background:#fff!important;color:#475569!important;
    box-shadow:0 1px 4px rgba(15,23,42,.08)!important;
  }
  .periodTabs .periodRefresh{
    top:-62px!important;right:0!important;width:50px!important;min-width:50px!important;height:50px!important;
    border-radius:9px!important;border:1px solid #cfd4da!important;background:#fff!important;
  }
  .periodTabs .periodRefresh::before{font-size:28px!important;color:#7b8188!important}

  /* Compact white cards like the supplied screenshot. */
  .summaryGrid{gap:12px 12px!important}
  .summaryCard{
    height:88px!important;min-height:88px!important;padding:14px 13px!important;
    border:1px solid #dfe3e8!important;border-radius:10px!important;
    background:#fff!important;box-shadow:0 1px 3px rgba(15,23,42,.08)!important;
  }
  .salesCard,.purchaseCard,.expenseCard,.stockCard,.dueCard,.payableCard{background:#fff!important}
  .summaryCard small{font-size:16px!important;line-height:20px!important;font-weight:600!important;color:#475569!important;margin:0 0 10px!important}
  .summaryCard strong{font-size:22px!important;line-height:25px!important;font-weight:700!important}
  .summaryCard em{right:13px!important;top:14px!important;width:21px!important;height:21px!important;font-size:18px!important}

  /* Banner proportions and spacing from reference. */
  .megaOffer.homeSlideshow{
    width:100%!important;height:auto!important;aspect-ratio:4.86/1!important;
    margin:20px 0 0!important;border:1px solid #cfd5dc!important;border-radius:10px!important;
    box-shadow:none!important;background:#fff!important;
  }
  .homeSlide,.homeSlide img{height:100%!important}
  .homeSlide img{width:100%!important;object-fit:cover!important;border-radius:9px!important}

  /* Main actions before ledger sections. */
  .primaryLinks{
    margin:25px 0 18px!important;padding:10px!important;gap:12px!important;
    border:1px solid #e1e5ea!important;border-radius:10px!important;box-shadow:none!important;
  }
  .primaryLinks button{
    height:88px!important;border-radius:7px!important;background:#f2f3f5!important;
    color:#475569!important;font-size:16px!important;font-weight:600!important;
  }
  .homePrimaryIcon{width:40px!important;height:40px!important;margin-bottom:3px!important}
  .mobileQuickLinks{display:none!important}
  .mobileBottomNav{display:none!important}

  /* Ledger section starts immediately after the primary actions. */
  .linkSections{margin-top:0!important;gap:10px!important}
  .linkGroup{border:1px solid #e1e5ea!important;border-radius:10px!important;box-shadow:none!important}
  .linkGroup h3{height:49px!important;padding:13px 15px!important;font-size:18px!important;line-height:22px!important}
  .linkGroup>div,.linkGroup.full>div{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .linkGroup button,.linkGroup.full button{height:82px!important}
  .homeSmallIcon{width:34px!important;height:34px!important}
  .linkGroup button span{font-size:12px!important}
}

@media (max-width:390px){
  .bizTopbar{padding-left:11px!important;padding-right:10px!important}
  .topActions{gap:8px!important}
  .balancePill{font-size:14px!important;padding:0 9px!important}
  .balancePill b{font-size:15px!important}
  .periodTabs .periodBtn{font-size:13px!important}
  .summaryCard small{font-size:14px!important}
  .summaryCard strong{font-size:20px!important}
  .primaryLinks button{font-size:14px!important}
}


/* =========================================================
   v71 — Mobile purchase history cards matching supplied phone reference
   Desktop purchase history remains unchanged.
   ========================================================= */
.purchaseMobileHeader,.purchaseMobileSummary,.purchaseMobileCards{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.purchaseHistoryMobilePage .bizTopbar,
  body.purchaseHistoryMobilePage .noticeBand,
  body.purchaseHistoryMobilePage .mobileBottomNav{display:none!important}
  body.purchaseHistoryMobilePage .bizWorkspace{padding:0!important;margin:0!important;min-width:0!important;width:100%!important}
  #purchaseHistoryView{padding:0!important;margin:0!important;background:#f6f6f6!important;min-width:0!important;width:100%!important}
  #purchaseHistoryView .purchaseMobileHeader{display:flex;align-items:center;gap:8px;height:66px;background:#ffca05;color:#111;padding:0 12px;font-size:20px;font-weight:600;border-bottom:1px solid #d0a800}
  #purchaseHistoryView .purchaseMobileHeader button{width:34px;height:44px;border:0;background:transparent;color:#111;font-size:29px;line-height:1;padding:0;cursor:pointer}
  #purchaseHistoryView .purchaseMobileSummary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#245bd9;color:#fff;border-radius:13px;margin:6px 11px 10px;padding:14px 10px;min-height:133px;font-size:18px;font-weight:600;box-shadow:0 1px 1px rgba(0,0,0,.03)}
  #purchaseHistoryView .purchaseMobileSummary>div{font-size:18px;font-weight:600}
  #purchaseHistoryView .purchaseMobileSummary>span{font-size:20px;color:#ffe100;font-weight:700}
  #purchaseHistoryView .purchaseMobileSummary>strong{font-size:26px;color:#fff;font-weight:800}
  #purchaseHistoryView .historyHeader{display:none!important}
  #purchaseHistoryView .historyFilters{display:grid!important;grid-template-columns:minmax(0,1fr) 102px 52px!important;gap:9px!important;padding:0 11px 8px!important;margin:0!important;background:#fff!important;align-items:stretch;overflow:visible!important}
  #purchaseHistoryView #purchaseHistoryDatePicker{grid-column:1;grid-row:1;width:auto!important;min-width:0!important;height:53px!important;margin:0!important;z-index:500}
  #purchaseHistoryView #purchaseHistoryDateBtn{height:53px!important;min-height:53px!important;width:100%!important;border:1px solid #cfd2d8!important;border-radius:8px!important;padding:0 10px!important;font-size:15px!important;color:#58657b!important;background:#fff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;justify-content:flex-start!important}
  #purchaseHistoryView #purchaseHistoryCountSelect{grid-column:2;grid-row:1;display:block!important;width:100%!important;min-width:0!important;height:53px!important;border:1px solid #cfd2d8!important;border-radius:8px!important;background:#fff!important;color:#58657b!important;padding:0 10px!important;font-size:15px!important}
  #purchaseHistoryView #purchaseHistoryRefreshBtn{grid-column:3;grid-row:1;width:52px!important;min-width:0!important;height:53px!important;padding:0!important;font-size:0!important;border:1px solid #cfd2d8!important;border-radius:8px!important;background:#fff!important}
  #purchaseHistoryView #purchaseHistoryRefreshBtn:after{content:'↻';font-size:28px;color:#878787;font-weight:600}
  #purchaseHistoryView .historyFilters .searchBox{grid-column:1/-1;grid-row:2;width:100%!important;min-width:0!important;height:55px!important;border:1px solid #cfd2d8!important;border-radius:10px!important;padding:0 12px!important;box-sizing:border-box;background:#fff!important;color:#344054!important;display:flex!important;align-items:center!important;gap:10px!important;font-size:23px!important}
  #purchaseHistoryView .historyFilters .searchBox input{min-width:0!important;width:100%!important;height:52px!important;font-size:17px!important;color:#42526b!important;background:transparent!important;border:0!important;outline:0!important}
  #purchaseHistoryView .historyFilters .searchBox input::placeholder{color:#9aa3af!important;opacity:1}
  #purchaseHistoryView .purchaseMobileCards{display:grid;gap:9px;padding:8px 11px 14px;background:#f6f6f6}
  #purchaseHistoryView .purchaseMobileCard{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,38%);gap:8px;min-height:126px;border-radius:14px;background:#e7e7e7;padding:16px 14px;color:#3c5878;box-shadow:0 1px 2px rgba(30,41,59,.04);cursor:pointer;transition:transform .12s ease,background-color .12s ease}
  #purchaseHistoryView .purchaseMobileCard:active{transform:scale(.995);background:#dedede}
  #purchaseHistoryView .purchaseMobileDetails{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.25;overflow-wrap:anywhere;min-width:0}
  #purchaseHistoryView .purchaseMobileDetails .receipt{font-size:13px}
  #purchaseHistoryView .purchaseMobileDetails b{font-size:17px;font-weight:600;color:#344b68;margin:4px 0 1px}
  #purchaseHistoryView .purchaseMobilePayment{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8px;text-align:right;min-width:0}
  #purchaseHistoryView .purchaseMobilePayment strong{color:#22bf55;font-size:20px;font-weight:800;overflow-wrap:anywhere}
  #purchaseHistoryView .purchaseMobileStatus{background:#d8f1df;color:#20b957;border-radius:7px;padding:7px 13px;font-size:15px;line-height:1;min-width:102px;text-align:center}
  #purchaseHistoryView .purchaseMobileStatus.isDue{background:#fff0d3;color:#986408}
  #purchaseHistoryView .purchaseMobilePayment time{font-size:10px;line-height:1.35;color:#50627a;margin-top:auto;white-space:nowrap}
  #purchaseHistoryView .hTableWrap{display:none!important}
  #purchaseHistoryView .flatPanel{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0!important;padding:0!important;margin:0!important}
  #purchaseHistoryView #purchaseHistoryEmpty{margin:18px 11px!important}
  #purchaseHistoryView #purchaseHistoryDatePopover{left:0!important;right:auto!important;width:min(460px,calc(100vw - 22px))!important;max-width:calc(100vw - 22px)!important;top:58px!important;grid-template-columns:minmax(90px,1fr) minmax(0,1.65fr)!important;padding:10px!important;gap:8px!important}
}


/* v73 — Cash In right-side drawer */
.cashInOverlay{position:fixed;inset:0;z-index:2600;pointer-events:none;visibility:hidden}
.cashInOverlay.open{pointer-events:auto;visibility:visible}
.cashInScrim{position:absolute;inset:0;border:0;background:rgba(24,28,33,.46);opacity:0;transition:opacity .26s ease;cursor:default}
.cashInOverlay.open .cashInScrim{opacity:1}
.cashInDrawer{position:absolute;top:0;right:0;width:min(500px,36vw);height:100%;background:#fff;box-shadow:-12px 0 34px rgba(16,24,40,.16);transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.cashInOverlay.open .cashInDrawer{transform:translateX(0)}
.cashInHead{height:62px;flex:0 0 62px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e7e8eb;position:relative;padding:0 54px}
.cashInHead h2{margin:0;font-size:20px;color:#344054;font-weight:700}
.cashInClose{position:absolute;right:16px;top:13px;width:36px;height:36px;border:0;background:transparent;font-size:28px;line-height:1;color:#4b5563;border-radius:50%}
.cashInClose:hover{background:#f4f5f6}
.cashInForm{display:flex;flex:1;min-height:0;flex-direction:column;padding:22px 30px 0}
.cashInBalanceCard{height:72px;min-height:72px;border-radius:7px;background:#b8d5fa;padding:13px 16px;box-sizing:border-box;position:relative;margin-bottom:18px}
.cashInBalanceCard small{display:block;font-size:12px;color:#475467}
.cashInBalanceCard strong{display:block;margin-top:5px;font-size:19px;color:#111827}
.cashInBalanceCard span{position:absolute;right:16px;top:20px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;color:#245fdb}
.cashInField{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;color:#344054;font-size:13px;font-weight:600}
.cashInField span b{color:#ef4444}
.cashInField input{height:40px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;padding:0 12px;font:inherit;font-weight:600;color:#344054;outline:none}
.cashInField input:focus{border-color:#98a2b3;box-shadow:0 0 0 2px rgba(152,162,179,.12)}
.cashInFooter{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 0 20px;border-top:1px solid #e7e8eb}
.cashInFooter button{height:42px;border-radius:5px;font-size:14px;font-weight:700}
.cashInCancel{border:1px solid #d0d5dd;background:#fff;color:#475467}
.cashInSave{border:1px solid #171717;background:#171717;color:#fff}
.cashInSave:hover{background:#050505}
body.cashInDrawerOpen{overflow:hidden}
@media(max-width:900px){.cashInDrawer{width:min(92vw,500px)}.cashInForm{padding-left:18px;padding-right:18px}}


/* v74 — Cash Out right-side drawer */
.cashOutOverlay{position:fixed;inset:0;z-index:2601;pointer-events:none;visibility:hidden}
.cashOutOverlay.open{pointer-events:auto;visibility:visible}
.cashOutScrim{position:absolute;inset:0;border:0;background:rgba(24,28,33,.46);opacity:0;transition:opacity .26s ease;cursor:default}
.cashOutOverlay.open .cashOutScrim{opacity:1}
.cashOutDrawer{position:absolute;top:0;right:0;width:min(500px,36vw);height:100%;background:#fff;box-shadow:-12px 0 34px rgba(16,24,40,.16);transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.cashOutOverlay.open .cashOutDrawer{transform:translateX(0)}
.cashOutHead{height:62px;flex:0 0 62px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e7e8eb;position:relative;padding:0 54px}
.cashOutHead h2{margin:0;font-size:20px;color:#344054;font-weight:700}
.cashOutClose{position:absolute;right:16px;top:13px;width:36px;height:36px;border:0;background:transparent;font-size:28px;line-height:1;color:#4b5563;border-radius:50%}
.cashOutClose:hover{background:#f4f5f6}
.cashOutForm{display:flex;flex:1;min-height:0;flex-direction:column;padding:22px 30px 0}
.cashOutBalanceCard{height:72px;min-height:72px;border-radius:7px;background:#b8d5fa;padding:13px 16px;box-sizing:border-box;position:relative;margin-bottom:18px}
.cashOutBalanceCard small{display:block;font-size:12px;color:#475467}
.cashOutBalanceCard strong{display:block;margin-top:5px;font-size:19px;color:#111827}
.cashOutBalanceCard span{position:absolute;right:16px;top:20px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;color:#245fdb}
.cashOutField{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;color:#344054;font-size:13px;font-weight:600}
.cashOutField span b{color:#ef4444}
.cashOutField input{height:40px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;padding:0 12px;font:inherit;font-weight:600;color:#344054;outline:none}
.cashOutField input:focus{border-color:#98a2b3;box-shadow:0 0 0 2px rgba(152,162,179,.12)}
.cashOutFooter{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 0 20px;border-top:1px solid #e7e8eb}
.cashOutFooter button{height:42px;border-radius:5px;font-size:14px;font-weight:700}
.cashOutCancel{border:1px solid #d0d5dd;background:#fff;color:#475467}
.cashOutSave{border:1px solid #171717;background:#171717;color:#fff}
.cashOutSave:hover{background:#050505}
body.cashOutDrawerOpen{overflow:hidden}
@media(max-width:900px){.cashOutDrawer{width:min(92vw,500px)}.cashOutForm{padding-left:18px;padding-right:18px}}

/* v75: due-ledger tab switch motion only */
#dueView .duePartyTabs{position:relative}
#dueView .duePartyTabs button{will-change:transform,opacity}
#dueView .duePartyTabs.switch-right button.active{animation:dueTabActiveFromRight 220ms cubic-bezier(.22,.61,.36,1)}
#dueView .duePartyTabs.switch-left button.active{animation:dueTabActiveFromLeft 220ms cubic-bezier(.22,.61,.36,1)}
@keyframes dueTabActiveFromRight{from{opacity:.55;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTabActiveFromLeft{from{opacity:.55;transform:translateX(-7px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetListFromLeft{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetListFromRight{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetDetailFromLeft{from{opacity:.2;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetDetailFromRight{from{opacity:.2;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetIdentityFromLeft{from{opacity:.2;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@keyframes dueTargetIdentityFromRight{from{opacity:.2;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
#dueView .dueTargetListFromLeft{animation:dueTargetListFromLeft 220ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetListFromRight{animation:dueTargetListFromRight 220ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetDetailFromLeft{animation:dueTargetDetailFromLeft 220ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetDetailFromRight{animation:dueTargetDetailFromRight 220ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetIdentityFromLeft{animation:dueTargetIdentityFromLeft 220ms cubic-bezier(.22,.61,.36,1)}
#dueView .dueTargetIdentityFromRight{animation:dueTargetIdentityFromRight 220ms cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){#dueView .duePartyTabs.switch-right button.active,#dueView .duePartyTabs.switch-left button.active,#dueView .dueTargetListFromLeft,#dueView .dueTargetListFromRight,#dueView .dueTargetDetailFromLeft,#dueView .dueTargetDetailFromRight,#dueView .dueTargetIdentityFromLeft,#dueView .dueTargetIdentityFromRight{animation:none!important}}


/* v76 — reference-video "new due" chooser behavior */
.dueTypeModal{width:min(355px,calc(100vw - 32px));padding:10px 10px 8px;border-radius:4px;transition:opacity 180ms ease,transform 210ms cubic-bezier(.22,.61,.36,1)!important}
.dueModalHead{padding:0 0 6px;border-bottom:1px solid #ececec}
.dueModalHead h2{font-size:15px;font-weight:700;color:#333}
.dueModalHead button{font-size:20px;color:#444;line-height:1}
.dueTypeCards{gap:10px;margin:8px 0 18px}
.dueTypeCard{height:76px;border:1px solid #eee;border-radius:0;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.05);gap:3px;color:#444;transition:border-color 120ms ease,box-shadow 120ms ease,transform 120ms ease}
.dueTypeCard span{font-size:22px}
.dueTypeCard b{font-size:10px;font-weight:600}
.dueTypeCard:hover{border-color:#d7d7d7;transform:translateY(-1px)}
.dueTypeCard.selected{border-color:#9d9d9d;box-shadow:0 0 0 1px #9d9d9d inset,0 2px 5px rgba(0,0,0,.06);color:#222}
#dueTypeContinue{height:28px!important;margin-top:0;background:#999!important;color:#fff!important;border:0!important;border-radius:0!important;font-size:10px!important;opacity:1!important;cursor:not-allowed;transition:background 140ms ease}
#dueTypeContinue.ready:not(:disabled){background:#111!important;cursor:pointer}
#dueTypeContinue:disabled{background:#999!important;color:#f4f4f4!important}
.dueEntryOverlay .dueOverlayScrim{transition:opacity 220ms ease}
.dueEntryDrawer{transition:transform 320ms cubic-bezier(.22,.61,.36,1)!important}
.dueItemOverlay{position:fixed;inset:0;z-index:10035;visibility:hidden;pointer-events:none}
.dueItemOverlay.open{visibility:visible;pointer-events:auto}
.dueItemOverlay .dueOverlayScrim{background:rgba(0,0,0,.38)!important;opacity:0;transition:opacity 220ms ease}
.dueItemOverlay.open .dueOverlayScrim{opacity:1}
.dueItemDrawer{position:absolute;right:0;top:0;width:min(540px,calc(100vw - 20px));height:100%;background:#fff;color:#344054;box-shadow:-5px 0 18px rgba(0,0,0,.16);transform:translateX(102%);transition:transform 320ms cubic-bezier(.22,.61,.36,1);overflow:auto;padding:0 22px 92px}
.dueItemOverlay.open .dueItemDrawer{transform:translateX(0)}
.dueItemHead{height:64px;display:grid;grid-template-columns:34px 1fr 34px;align-items:center}
.dueItemHead h2{grid-column:2;margin:0;text-align:center;font-size:19px;color:#344054;font-weight:800}
.dueItemHead button{grid-column:3;width:34px;height:34px;border:0;background:transparent;color:#3f3f3f;font-size:30px;line-height:1;cursor:pointer}
.dueItemDetailsBody h3{margin:13px 0 9px;font-size:14px;color:#344054}
.dueItemInfoCard,.dueItemHistoryCard{background:#e8e8e8;border-radius:6px;padding:16px 14px;color:#667085}
.dueItemInfoCard p,.dueItemHistoryCard p{margin:0 0 12px;font-size:13px;display:flex;align-items:center;gap:6px}
.dueItemInfoCard p:last-child,.dueItemHistoryCard p:last-child{margin-bottom:0}
.dueItemInfoCard b,.dueItemHistoryCard b{font-weight:700;color:#475467}
.dueItemInfoCard em{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#f4f4f4;color:#4b5563;font-style:normal;font-size:11px;margin-right:8px}
.dueItemBottomActions{position:absolute;left:22px;right:22px;bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dueItemBottomActions button,.dueItemSaveBtn{height:38px;border-radius:5px;border:0;color:#fff;font-weight:800;cursor:pointer}
.dueItemDeleteBtn{background:#ff6267}
.dueItemEditBtn,.dueItemSaveBtn{background:#151515}
.dueItemEditForm{min-height:calc(100% - 64px);display:flex;flex-direction:column;gap:24px;padding-bottom:0}
.dueItemEditIdentity{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:10px;border-bottom:1px solid #e5e7eb;padding:0 0 18px}
.dueItemEditIdentity b{display:block;font-size:16px;color:#475467}
.dueItemEditIdentity small{display:block;margin-top:4px;color:#667085}
.dueItemEditForm label{display:grid;gap:10px;font-size:11px;font-weight:800;color:#344054}
.dueItemEditForm label b{color:#ff5555}
.dueItemEditForm input{height:39px;border:1px solid #e1e5ea;border-radius:6px;background:#fff;padding:0 12px;color:#344054}
.dueItemNoteLine{display:grid;grid-template-columns:1fr 39px;gap:8px}
.dueItemNoteLine button{height:39px;border:1px solid #e1e5ea;border-radius:6px;background:#fff;color:#111;font-size:22px;cursor:pointer}
.dueItemEditForm small{min-height:14px;color:#667085;font-weight:600}
.dueItemSaveBtn{margin-top:auto;width:100%;font-size:12px}
#dueView .dueTargetLedgerRow{width:100%;border:0;background:#fff;text-align:left;cursor:pointer}
#dueView .dueTargetLedgerRow:hover{background:#fafafa}
#dueHistoryBody tr[data-due-item-id]{cursor:pointer}
#dueHistoryBody tr[data-due-item-id]:hover td{background:#fafafa}

/* =========================================================
   v77 — Due ledger screenshot parity (desktop only)
   Scope: #dueView only. Keeps existing due data/logic intact.
   ========================================================= */
@media screen and (min-width:901px){
  #dueView{padding-top:0!important;background:#f7f7f7}
  #dueView .dueTitleRow{
    min-height:64px;margin:0 -22px 0;padding:12px 22px 10px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:#f7f7f7;border:0;
  }
  #dueView .dueTitleRow h1{margin:0;font-size:22px;font-weight:800;color:#344054;white-space:nowrap}
  #dueView .dueTitleRow .pageToolbar{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
  #dueView .dueTitleRow .metricPill{
    height:38px;min-width:100px;padding:0 12px;display:flex;align-items:center;justify-content:center;
    border:1px solid #dde1e6;border-radius:6px;background:#fff;font-size:11px;font-weight:600;white-space:nowrap;
  }
  #dueView .dueTitleRow .blackBtn,#dueView .dueTitleRow .softBtn{
    height:38px;padding:0 14px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;
  }
  #dueView .dueTitleRow #dueRefreshBtn{width:38px;padding:0;font-size:16px}

  #dueView .dueSplit{
    margin-top:0!important;height:calc(100vh - 220px)!important;min-height:520px!important;max-height:none!important;
    grid-template-columns:31% minmax(0,69%)!important;border:1px solid #e2e5e9!important;border-radius:7px!important;
    background:#fff!important;box-shadow:none!important;overflow:hidden!important;
  }
  #dueView .dueListPanel{border-right:1px solid #e5e7eb!important;background:#fff!important}
  #dueView .dueDetailPanel{background:#fff!important;padding-bottom:84px!important}

  #dueView .duePartyTabs{height:44px!important;padding:0 16px!important;gap:24px!important;border-bottom:1px solid #eceff1!important;background:#fff}
  #dueView .duePartyTabs button{height:44px!important;font-size:11px!important;color:#667085!important;padding:0 1px!important}
  #dueView .duePartyTabs button.active{color:#26364a!important;font-weight:800!important}
  #dueView .duePartyTabs button.active::after{height:2px!important;background:#111!important}
  #dueView .duePartyTabs button[data-count]:not([data-count="0"])::before{right:-10px!important;top:5px!important;font-size:7px!important}

  #dueView .dueSearchRow{height:52px!important;padding:8px 12px!important;gap:8px!important;background:#fff!important}
  #dueView .dueSearchRow .searchBox{height:36px!important;border-radius:5px!important;border-color:#dfe3e8!important}
  #dueView .dueSearchRow .searchBox input{font-size:11px!important}
  #dueView .dueSearchRow .softBtn{width:46px!important;height:36px!important;border-radius:5px!important;font-size:15px!important}
  #dueView #dueContactList{height:calc(100% - 96px)!important;background:#fff!important}

  #dueView .dueVideoContact{height:58px!important;padding:0 14px!important;grid-template-columns:32px minmax(0,1fr) 72px!important;gap:8px!important}
  #dueView .dueVideoAvatar{width:30px!important;height:30px!important;font-size:10px!important}
  #dueView .dueTargetContactText b{font-size:11px!important;color:#344054!important}
  #dueView .dueTargetContactText small{margin-top:3px!important;font-size:9px!important}
  #dueView .dueTargetContactAmount{min-width:64px!important;gap:2px!important}
  #dueView .dueTargetContactAmount strong{font-size:10px!important}
  #dueView .dueTargetContactAmount em{min-width:39px!important;padding:2px 6px!important;font-size:7px!important}
  #dueView .dueVideoContact.active{background:#f4f4f4!important;box-shadow:inset 3px 0 0 #111!important}

  #dueView .dueTargetTopbar{
    min-height:64px!important;height:64px!important;padding:8px 12px!important;gap:10px!important;
    border-bottom:1px solid #e5e7eb!important;background:#fff!important;align-items:center!important;
  }
  #dueView .dueTargetIdentityHost{grid-template-columns:32px minmax(0,1fr) 86px!important;gap:8px!important}
  #dueView .dueTargetAvatar{width:30px!important;height:30px!important}
  #dueView .dueTargetIdentityText b{font-size:12px!important}
  #dueView .dueTargetIdentityText em{padding:2px 5px!important;font-size:7px!important}
  #dueView .dueTargetIdentityText small{font-size:9px!important;margin-top:2px!important}
  #dueView .dueTargetBalanceBox{padding-left:10px!important;min-width:76px!important}
  #dueView .dueTargetBalanceBox small{font-size:8px!important}
  #dueView .dueTargetBalanceBox b{font-size:12px!important;margin-top:2px!important}
  #dueView .dueTargetTopActions{gap:6px!important}
  #dueView .dueTargetIconBtn{width:42px!important;height:36px!important;border-radius:5px!important;font-size:14px!important}
  #dueView .dueTargetTopActions .universalDatePickerWrap{width:205px!important;min-width:205px!important;flex:0 0 205px!important}
  #dueView .dueTargetTopActions .universalDateButton{height:36px!important;font-size:9px!important;padding:0 8px!important}
  #dueView .dueTargetInvoiceBtn{height:36px!important;padding:0 14px!important;border-radius:5px!important;font-size:9px!important}

  #dueView .dueTargetLedgerHead{height:35px!important;grid-template-columns:minmax(190px,1fr) 110px 110px 110px!important;padding:0 10px!important;font-size:9px!important;background:#ededed!important}
  #dueView .dueTargetLedgerRow{min-height:42px!important;grid-template-columns:minmax(190px,1fr) 110px 110px 110px!important;padding:5px 10px!important;font-size:9px!important}
  #dueView .dueTargetLedgerRow>span:first-child b{font-size:9px!important}
  #dueView .dueTargetLedgerRow>span:first-child small{font-size:8px!important;margin-top:2px!important}

  #dueView .dueTargetFooter{height:84px!important;padding:6px 10px 8px!important;border-top:1px solid #e0e3e7!important;background:#fff!important}
  #dueView .dueTargetTotals{height:25px!important;grid-template-columns:minmax(120px,1fr) 110px 110px 110px!important;font-size:8px!important}
  #dueView .dueTargetTotals b{font-size:9px!important;margin-left:5px!important}
  #dueView .dueTargetBottomActions{gap:10px!important}
  #dueView .dueTargetBottomActions button{height:40px!important;border-radius:4px!important;font-size:10px!important}
  #dueView .dueTargetGivenBtn{background:#ff656b!important}
  #dueView .dueTargetReceivedBtn{background:#59c96a!important}
}

#dueView .duePrintIcon{width:22px;height:22px;display:block;margin:auto;object-fit:contain;opacity:1;filter:none}

/* =========================================================
   v87 — Desktop premium typography polish
   Scope: typography/font-weight only. No layout or logic changes.
   ========================================================= */
@media (min-width:901px){
  html,body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }

  /* Sidebar / header hierarchy */
  .bizNav button{font-weight:600!important}
  .bizNav .subscribeBtn{font-weight:600!important}
  .crumb,.topActions,.shopName{font-weight:600!important}

  /* Main page headings */
  .pageOnlyTitle,
  .pageTitleRow h1,
  .historyHeader h1,
  .dueTitleRow h1,
  .contactTitle h1,
  .expenseTop h1,
  .dashTitleRow h1{
    font-weight:800!important;
    color:#344054!important;
  }

  /* Tabs, filters and table headings */
  .tabsLine b,
  .hTable th,
  .linkGroup h3,
  .metricPill,
  .periodTabs .periodBtn,
  .periodTabs .periodRefresh{
    font-weight:700!important;
  }

  /* Product / list labels */
  .purchasePicker h2,
  .sellPicker h2,
  .purchaseProductItem b,
  .simpleList>div b{
    font-weight:700!important;
  }

  /* Due/customer cards — text only */
  #dueView .duePartyTabs button{font-weight:600!important}
  #dueView .duePartyTabs button.active{font-weight:800!important}
  #dueView .dueTargetContactText b,
  #dueView .dueTargetIdentityText b,
  #dueView .dueTargetBalanceBox b{
    font-weight:700!important;
  }
  #dueView .dueTargetLedgerHead{font-weight:700!important}

  /* Access management reference typography */
  #accessView .accessList>.softBtn{font-weight:700!important}
  #accessView .accessPerson b,
  #accessView .accessIdentity b{
    font-weight:700!important;
    color:#344054!important;
  }
  #accessView .accessPerson span,
  #accessView .accessIdentity span{
    font-weight:600!important;
  }
  #accessView .accessRule>b,
  #accessView .accessDetail>b{
    font-weight:700!important;
    color:#344054!important;
  }
  #accessView .editRole{font-weight:600!important}
}

/* =========================================================
   v88 — Hishabee-reference Expense drawer UI
   Scope: Expense page/drawer visuals only.
   ========================================================= */
#expensesView{position:relative}
#expenseDrawer.expenseRefDrawer{
  position:fixed!important;inset:0 0 0 auto!important;
  width:min(510px,calc(100vw - 34px))!important;height:100vh!important;min-height:0!important;max-height:none!important;
  padding:0!important;background:#fff!important;box-shadow:-1px 0 8px rgba(16,24,40,.12)!important;
  z-index:1201!important;display:flex!important;flex-direction:column!important;
  transform:translateX(102%);opacity:1;visibility:hidden;pointer-events:none;
  transition:transform 280ms cubic-bezier(.22,.61,.36,1),visibility 0s linear 280ms!important;
  overflow:visible!important;color:#344054;
}
#expenseDrawer.expenseRefDrawer.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition-delay:0s!important}
.expenseDrawerScrim{position:fixed;inset:0;border:0;background:rgba(15,23,42,.40);z-index:1200;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,visibility 0s linear 180ms;padding:0}
#expenseDrawer.open + .expenseDrawerScrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.expenseRefHeader{height:72px;min-height:72px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eef0f3;position:relative;padding:0 54px}
.expenseRefHeader h2{margin:0;font-size:18px;line-height:1;font-weight:800;color:#344054;font-family:"Segoe UI","Noto Sans Bengali",Arial,sans-serif}
.expenseRefClose{position:absolute;right:15px;top:12px;width:34px;height:34px;border:0;background:transparent;color:#333;font-size:30px;line-height:30px;font-weight:600;padding:0;display:grid;place-items:center}
.expenseRefClose:after{content:"";position:absolute;right:3px;top:42px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid #9aa3ad}
.expenseRefForm{display:flex!important;flex-direction:column!important;gap:14px!important;padding:14px 34px 110px!important;overflow:auto;flex:1;align-content:start}
.expenseRefField{display:grid!important;gap:7px!important;font-size:12px!important;font-weight:700!important;color:#222!important}
.expenseRefField>span{line-height:18px}.expenseRefField>span b{color:#ef4444;font-size:11px}
.expenseRefField>input,.expenseDateBox input,.expenseCategoryTrigger,.expenseAttachRow input{height:38px!important;border:1px solid #d7dbe1!important;border-radius:7px!important;background:#fff!important;color:#344054!important;font-size:11px!important;padding:0 14px!important;box-shadow:none!important}
.expenseRefField>input::placeholder,.expenseAttachRow input::placeholder{color:#98a2b3;opacity:1}
.expenseDateBox{position:relative}.expenseDateBox input{width:100%;padding-right:42px!important;color:#667085!important}
.expenseCalendarIcon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:1.5px solid #7d8790;border-radius:2px}
.expenseCalendarIcon:before{content:"";position:absolute;left:2px;right:2px;top:3px;border-top:1.5px solid #7d8790}.expenseCalendarIcon:after{content:"";position:absolute;left:3px;right:3px;top:-3px;height:4px;border-left:1.5px solid #7d8790;border-right:1.5px solid #7d8790}
.expenseCategoryPicker{position:relative}.expenseNativeSelect{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.expenseCategoryTrigger{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;color:#98a2b3!important;font-weight:600!important}
.expenseCategoryTrigger.hasValue{color:#344054!important}.expenseCategoryTrigger i{width:7px;height:7px;border-right:1px solid #98a2b3;border-bottom:1px solid #98a2b3;transform:rotate(45deg) translateY(-2px);margin-right:3px;transition:transform 120ms ease}.expenseCategoryTrigger[aria-expanded="true"] i{transform:rotate(225deg) translate(-2px,-2px)}
.expenseCategorySelected{display:flex;align-items:center;gap:8px}.expenseCategorySelected img{width:20px;height:20px;object-fit:contain}
.expenseCategoryMenu{position:absolute;left:0;right:0;top:43px;background:#fff;border:1px solid #e3e6ea;border-radius:7px;box-shadow:0 7px 18px rgba(15,23,42,.13);z-index:1210;overflow:hidden;padding:0 0 47px;max-height:230px;overflow-y:auto}
.expenseCategoryMenu[hidden]{display:none!important}
.expenseCategoryOption{width:100%;height:44px;border:0;background:#fff;display:grid;grid-template-columns:14px 28px 1fr;align-items:center;gap:9px;text-align:left;padding:0 13px;color:#344054;font-size:12px}.expenseCategoryOption:hover,.expenseCategoryOption.active{background:#f4f4f4}.expenseCategoryOption img{width:24px;height:24px;object-fit:contain}.expenseCategoryCheck{visibility:hidden;color:#4b5563;font-size:12px}.expenseCategoryOption.active .expenseCategoryCheck{visibility:visible}
.expenseAddCategoryBtn{position:absolute;left:0;right:0;bottom:0;height:45px;border:0;background:#171717;color:#fff;font-weight:700;font-size:12px}
.expenseAttachRow{display:grid;grid-template-columns:minmax(0,1fr) 39px;gap:8px;margin-top:-3px}.expenseAttachRow input{width:100%}
.expenseAttachBtn{height:38px;border:1px solid #d7dbe1;border-radius:7px;background:#fff;display:grid;place-items:center;padding:0}.expenseAttachBtn span{width:18px;height:18px;position:relative;display:block}.expenseAttachBtn span:before,.expenseAttachBtn span:after{content:"";position:absolute;border:2px solid #1f2937;border-radius:7px;width:9px;height:5px;transform:rotate(-45deg)}.expenseAttachBtn span:before{left:1px;top:8px}.expenseAttachBtn span:after{right:1px;top:3px}.expenseAttachBtn span{border-left:2px solid transparent}
.expenseRefFooter{position:absolute;left:0;right:0;bottom:0;height:70px;border-top:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 26px;z-index:4}
.expenseCancelBtn,.expenseSaveBtn{height:36px;border-radius:6px;padding:0 22px;font-size:12px;font-weight:700}.expenseCancelBtn{border:1px solid #d6dae0;background:#fff;color:#475467}.expenseSaveBtn{border:1px solid #171717;background:#171717;color:#fff;min-width:92px}
.expenseCategoryChip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:3px 10px;border:1px solid #d7dbe1;border-radius:18px;background:#fff;color:#475467;font-weight:600;white-space:nowrap}.expenseCategoryChip img{width:20px;height:20px;object-fit:contain}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){#expenseDrawer.expenseRefDrawer{width:100vw!important}.expenseRefForm{padding-left:18px!important;padding-right:18px!important}.expenseRefFooter{padding:0 18px}}
@media print{#expenseDrawer.expenseRefDrawer,.expenseDrawerScrim{display:none!important}}


/* v89 — Expense details modal + editable row interaction (video match) */
.expenseHistoryRow{cursor:pointer}
.expenseHistoryRow td:last-child{text-align:center}
.expenseActionCell{width:76px;text-align:center}
.expenseActionBtn{width:28px;height:28px;border:0;background:transparent;border-radius:6px;font-size:22px;line-height:1;color:#667085;cursor:pointer}
.expenseActionBtn:hover{background:#f2f4f7;color:#111827}

.expenseDetailsOverlay{position:fixed;inset:0;z-index:1198;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none}
.expenseDetailsOverlay.open{visibility:visible;pointer-events:auto}
.expenseDetailsScrim{position:absolute;inset:0;border:0;background:rgba(15,23,42,.40);opacity:0;transition:opacity 180ms ease;padding:0}
.expenseDetailsOverlay.open .expenseDetailsScrim{opacity:1}
.expenseDetailsModal{position:relative;width:min(536px,calc(100vw - 44px));max-height:min(430px,calc(100vh - 70px));background:#fff;border-radius:8px;box-shadow:0 20px 48px rgba(15,23,42,.18);display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px) scale(.985);opacity:0;transition:transform 220ms cubic-bezier(.22,.61,.36,1),opacity 180ms ease;color:#344054}
.expenseDetailsOverlay.open .expenseDetailsModal{transform:translateY(0) scale(1);opacity:1}
.expenseDetailsHeader{height:68px;min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;border-bottom:1px solid #eef0f3}
.expenseDetailsHeader h2{margin:0;font-size:20px;font-weight:800;color:#344054}
.expenseDetailsClose{border:0;background:transparent;font-size:30px;line-height:1;color:#333;cursor:pointer}
.expenseDetailsBody{padding:14px 18px 18px;overflow:auto;display:grid;gap:10px;align-content:start}
.expenseDetailsField{display:grid;gap:4px;font-size:12px;color:#667085}
.expenseDetailsField span{font-weight:700;color:#98a2b3}
.expenseDetailsField strong{font-size:15px;color:#344054}
.expenseDetailsCategory{display:flex;align-items:center;gap:8px;color:#344054;font-size:15px}
.expenseDetailsCategory img{width:24px;height:24px;object-fit:contain}
.expenseDetailsFooter{display:flex;justify-content:flex-end;gap:12px;padding:11px 18px;border-top:1px solid #eef0f3;background:#fff}
.expenseDeleteBtn,.expenseEditBtn{height:34px;border:0;border-radius:6px;padding:0 16px;font-size:12px;font-weight:700;cursor:pointer}
.expenseDeleteBtn{background:#ff7e79;color:#fff}
.expenseEditBtn{background:#171717;color:#fff}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){.expenseDetailsModal{width:calc(100vw - 22px);max-height:calc(100vh - 30px)}}
@media print{.expenseDetailsOverlay{display:none!important}}

/* v89 final — video interaction fidelity: native date/file controls without changing drawer layout */
.expenseDateBox{overflow:visible}
.expenseDateNative{position:absolute!important;inset:0!important;width:100%!important;height:38px!important;opacity:0!important;cursor:pointer!important;z-index:3!important;padding:0!important;border:0!important}
.expenseDateBox .expenseCalendarIcon{pointer-events:none;z-index:4}
.expenseAttachmentInput{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.expenseDetailsModal{width:min(536px,calc(100vw - 44px))!important}
.expenseDetailsBody{min-height:185px}
.expenseDetailsFooter{min-height:58px;align-items:center}

/* v90 — Expense table hover feedback matched to reference video */
@media (hover:hover) and (pointer:fine){
  #expensesView .expenseHistoryRow{cursor:pointer}
  #expensesView .expenseHistoryRow > td{transition:background-color 70ms linear}
  #expensesView .expenseHistoryRow:hover > td{background:#d2d2d2!important}
  #expensesView .expenseHistoryRow:hover .expenseActionBtn{color:#344054}
}
#expensesView .expenseHistoryRow:focus-visible > td{background:#d2d2d2!important;outline:0}


/* v91: global minimum premium text weight */
html,body,button,input,select,textarea{font-weight:600}

/* v92 — Cashbox row hover + Transaction Details drawer (video reference) */
#cashboxBody tr.cashboxTxnRow{cursor:pointer;transition:background-color .14s ease}
#cashboxBody tr.cashboxTxnRow:hover{background:#d8d8d8}
#cashboxBody tr.cashboxTxnRow.is-active,#cashboxBody tr.cashboxTxnRow.is-active td{background:#cecece!important}
#cashboxBody tr.cashboxTxnRow:focus-visible{outline:2px solid #aeb7c3;outline-offset:-2px}

.cashboxTxnOverlay{position:fixed;inset:0;z-index:10020;visibility:hidden;pointer-events:none;transition:visibility 0s linear .28s}
.cashboxTxnOverlay.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.cashboxTxnScrim{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .26s ease;cursor:default}
.cashboxTxnOverlay.open .cashboxTxnScrim{opacity:1}
.cashboxTxnDrawer{position:absolute;right:0;top:0;width:25.6vw;min-width:470px;max-width:880px;height:100vh;background:#fff;box-shadow:none;display:grid;grid-template-rows:64px minmax(0,1fr) 78px;transform:translate3d(100%,0,0);transition:transform .28s cubic-bezier(.22,.8,.28,1);overflow:hidden}
.cashboxTxnOverlay.open .cashboxTxnDrawer{transform:translate3d(0,0,0)}
.cashboxTxnHead{height:64px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ededed;position:relative;padding:0 54px;background:#fff}
.cashboxTxnHead h2{margin:0;color:#344054;font-size:20px;line-height:1;font-weight:700}
.cashboxTxnClose{position:absolute;right:8px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#303846;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.cashboxTxnClose:hover{background:#f4f5f6}
.cashboxTxnScroll{overflow:auto;padding:14px 17px 26px;background:#fff;color:#52606f}
.cashboxTxnHero{border-radius:2px;padding:12px 13px 11px;margin-bottom:12px;background:#fff0f2;color:#c9344f}
.cashboxTxnHero.in{background:#eefbf2;color:#1f9d55}
.cashboxTxnHeroTitle{font-size:19px;font-weight:800;line-height:1.1;margin:0 0 4px}
.cashboxTxnHeroSub{font-size:12px;font-weight:600;line-height:1.3;color:#697586}
.cashboxTxnHero.out .cashboxTxnHeroSub{color:#7c6a70}
.cashboxTxnInfo{border:1px solid #f0f0f0;border-radius:4px;background:#fff;margin-bottom:10px}
.cashboxTxnInfoRow{min-height:60px;padding:10px 13px;box-sizing:border-box;border-bottom:1px solid #f1f2f3;display:flex;flex-direction:column;justify-content:center;gap:4px}
.cashboxTxnInfoRow:last-child{border-bottom:0}
.cashboxTxnInfoRow small{font-size:12px;color:#667085;font-weight:600}
.cashboxTxnInfoRow strong{font-size:14px;color:#42526b;font-weight:700;line-height:1.3}
.cashboxTxnInfoRow strong.cashboxTxnAmountOut{color:#e3314f}
.cashboxTxnInfoRow strong.cashboxTxnAmountIn{color:#16a05a}
.cashboxTxnIconLabel{display:flex;align-items:center;gap:7px}
.cashboxTxnMiniIcon{width:16px;min-width:16px;text-align:center;color:#6a7380;font-size:13px}
.cashboxTxnFooter{height:78px;padding:14px 17px;box-sizing:border-box;border-top:1px solid #ececec;background:#fff;display:flex;align-items:center}
.cashboxTxnDone{width:100%;height:40px;border:1px solid #e2e4e8;border-radius:5px;background:#fff;color:#42526b;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cashboxTxnDone:hover{background:#f7f7f7}
html.cashboxTxnOpenLock,body.cashboxTxnOpenLock{overflow:hidden!important}
@media(max-width:1250px){.cashboxTxnDrawer{width:34vw;min-width:430px}}
@media(max-width:760px){.cashboxTxnDrawer{width:94vw;min-width:0;max-width:none}}

/* =========================================================
   v93 — Mobile Contacts reference match
   Phone-only visual layout. Desktop contacts remain unchanged.
   ========================================================= */
.contactMobileHeader{display:none}
.contactTabs .contactTab{
  appearance:none;border:0;background:transparent;height:42px;padding:0 0 10px;
  color:#475467;font:600 14px/1 inherit;border-radius:0;box-shadow:none
}
.contactTabs .contactTab.active{border-bottom:2px solid #111;color:#344054;font-weight:800}
.contactTabs .contactTab sup{font-size:10px;vertical-align:super;margin-left:2px}
.contactContactRow{
  width:100%;min-height:46px;border:0;border-bottom:1px solid #ececec;border-radius:0;background:#fff;
  display:flex;align-items:center;gap:10px;text-align:left;padding:6px 10px;color:#344054;box-shadow:none
}
.contactContactRow .contactAvatar,.contactContactRow .contactRowArrow{display:none}
.contactRowText{min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.contactRowText b{color:#344054;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contactRowText small{color:#667085;font-size:12px;font-weight:600;white-space:nowrap}

@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.contactsMobilePage{background:#f5f6f7!important;min-height:100vh!important;overflow-x:hidden!important}
  body.contactsMobilePage .bizTopbar{display:none!important}
  body.contactsMobilePage .bizWorkspace{padding:0!important;background:#f5f6f7!important;min-height:100vh!important}
  body.contactsMobilePage #contactsView{padding:0 0 118px!important;margin:0!important;min-height:100vh!important;background:#f5f6f7!important;box-sizing:border-box!important}
  body.contactsMobilePage .contactTitle{display:none!important}

  #contactsView .contactMobileHeader{
    height:84px!important;padding:0 17px!important;box-sizing:border-box!important;background:#ffca05!important;
    display:flex!important;align-items:center!important;gap:12px!important;color:#101828!important;border:0!important
  }
  #contactsView .contactMobileHeader h1{margin:0!important;font-size:25px!important;line-height:1!important;font-weight:800!important;color:#101828!important}
  #contactsView .contactMobileBack{
    width:27px!important;height:44px!important;padding:0!important;border:0!important;background:transparent!important;color:#111827!important;
    font:400 35px/1 "Segoe UI Symbol","Noto Sans Symbols",sans-serif!important;display:grid!important;place-items:center!important;box-shadow:none!important
  }

  #contactsView .contactSplit{display:block!important;margin:15px 0 0!important;width:100%!important;background:#fff!important}
  #contactsView .contactList{
    min-height:500px!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;
    position:static!important;padding:0!important
  }
  #contactsView .contactDetail{display:none!important}

  #contactsView .contactTabs{
    height:91px!important;box-sizing:border-box!important;padding:35px 46px 0!important;gap:31px!important;
    display:flex!important;align-items:flex-end!important;border-bottom:1px solid #ccd2d8!important;background:#fff!important;overflow:visible!important
  }
  #contactsView .contactTabs .contactTab{
    height:56px!important;padding:0 0 14px!important;border:0!important;border-radius:0!important;background:transparent!important;
    color:#40516a!important;font-size:24px!important;line-height:1!important;font-weight:600!important;white-space:nowrap!important;box-shadow:none!important
  }
  #contactsView .contactTabs .contactTab.active{color:#344054!important;font-weight:800!important;border-bottom:4px solid #111!important}
  #contactsView .contactTabs .contactTab sup{font-size:15px!important;line-height:1!important;margin-left:2px!important;top:-.35em!important;position:relative!important}

  #contactsView .contactSearchRow{
    height:91px!important;box-sizing:border-box!important;padding:12px 31px!important;gap:13px!important;border-bottom:1px solid #d8dde2!important;
    display:flex!important;align-items:center!important;background:#fff!important
  }
  #contactsView .contactSearchBox{
    height:66px!important;min-width:0!important;flex:1!important;border:1px solid #c9ced4!important;border-radius:12px!important;background:#fff!important;
    padding:0 15px!important;gap:13px!important;color:#8b939d!important;box-sizing:border-box!important;box-shadow:none!important
  }
  #contactsView .contactSearchIcon{width:20px!important;height:20px!important;border:2px solid #111!important;border-radius:50%!important;position:relative!important;flex:0 0 20px!important;box-sizing:border-box!important}
  #contactsView .contactSearchIcon:after{content:""!important;position:absolute!important;width:9px!important;height:2px!important;background:#111!important;right:-6px!important;bottom:-3px!important;transform:rotate(45deg)!important;border-radius:2px!important}
  #contactsView .contactSearchBox input{height:62px!important;font-size:23px!important;line-height:1!important;color:#40516a!important;font-weight:600!important;padding:0!important;outline:0!important}
  #contactsView .contactSearchBox input::placeholder{color:#a3aab3!important;opacity:1!important;font-weight:600!important}
  #contactsView .contactRefreshBtn{
    width:59px!important;min-width:59px!important;height:66px!important;padding:0!important;border:1px solid #c9ced4!important;border-radius:11px!important;
    background:#fff!important;color:#777f86!important;font:400 36px/1 "Segoe UI Symbol","Noto Sans Symbols",sans-serif!important;display:grid!important;place-items:center!important;box-shadow:none!important
  }

  #contactsView #contactListBody.contactRows{padding:24px 26px 165px!important;background:#fff!important;min-height:304px!important;box-sizing:border-box!important}
  #contactsView .contactContactRow{
    height:74px!important;min-height:74px!important;border:0!important;border-radius:0!important;background:#fff!important;padding:0 17px!important;gap:14px!important;
    color:#40516a!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) 23px!important;align-items:center!important;box-shadow:none!important;pointer-events:auto!important;cursor:pointer!important
  }
  #contactsView .contactContactRow.active{background:#f4f4f4!important;border-left:6px solid #111!important;padding-left:11px!important}
  #contactsView .contactAvatar{
    width:38px!important;height:38px!important;border-radius:50%!important;background:#eef0f3!important;color:#40516a!important;
    display:grid!important;place-items:center!important;font-size:20px!important;font-weight:600!important
  }
  #contactsView .contactRowText{display:block!important;min-width:0!important}
  #contactsView .contactRowText b{display:block!important;color:#40516a!important;font-size:22px!important;line-height:1.2!important;font-weight:600!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #contactsView .contactRowText small{display:block!important;margin-top:5px!important;color:#98a2b3!important;font-size:18px!important;line-height:1!important;font-weight:600!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #contactsView .contactRowArrow{display:block!important;color:#98a2b3!important;font:300 31px/1 Arial,sans-serif!important;text-align:center!important}
  #contactsView .contactRowsEmpty{min-height:403px!important;background:#fff!important;font-size:18px!important;color:#98a2b3!important}

  #contactsView .contactJoin{
    position:fixed!important;z-index:75!important;left:26px!important;right:26px!important;bottom:29px!important;width:calc(100% - 52px)!important;height:61px!important;
    border:0!important;border-radius:9px!important;background:#2563df!important;color:#fff!important;padding:0 12px!important;
    font-size:21px!important;line-height:1!important;font-weight:800!important;box-shadow:none!important
  }
  #contactsView:after{content:""!important;position:fixed!important;z-index:70!important;left:0!important;right:0!important;bottom:0!important;height:118px!important;background:#fff!important;border-top:1px solid #ccd2d8!important;pointer-events:none!important}
}

@media (max-width:420px) and (hover:none) and (pointer:coarse){
  #contactsView .contactTabs{padding-left:31px!important;padding-right:24px!important;gap:23px!important}
  #contactsView .contactTabs .contactTab{font-size:20px!important}
  #contactsView .contactSearchRow{padding-left:20px!important;padding-right:20px!important}
  #contactsView #contactListBody.contactRows{padding-left:20px!important;padding-right:20px!important}
  #contactsView .contactRowText b{font-size:19px!important}
  #contactsView .contactRowText small{font-size:15px!important}
  #contactsView .contactJoin{left:20px!important;right:20px!important;width:calc(100% - 40px)!important}
}


/* =========================================================
   v94 - Mobile Product List reference match
   Phone-only layout; desktop product list and product logic remain unchanged.
   ========================================================= */
.productMobileShell{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.productsMobilePage{background:#f4f5f6!important;min-height:100vh!important;overflow-x:hidden!important}
  body.productsMobilePage .bizTopbar{display:none!important}
  body.productsMobilePage .bizWorkspace{padding:0!important;background:#f4f5f6!important;min-height:100vh!important}
  body.productsMobilePage #productsView{padding:0!important;margin:0!important;min-height:100vh!important;background:#f4f5f6!important;box-sizing:border-box!important}
  #productsView .productDesktopView{display:none!important}
  #productsView .productMobileShell{display:block!important;width:100%!important;min-height:100vh!important;background:#f4f5f6!important;color:#40516a!important}

  #productsView .productMobileHeader{height:75px!important;padding:0 10px 0 14px!important;box-sizing:border-box!important;background:#ffca05!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;border:0!important}
  #productsView .productMobileHeaderTitle{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
  #productsView .productMobileBack{width:28px!important;height:46px!important;padding:0!important;border:0!important;background:transparent!important;color:#111!important;font:400 31px/1 Arial,sans-serif!important;display:grid!important;place-items:center!important;box-shadow:none!important}
  #productsView .productMobileHeader h1{margin:0!important;color:#111!important;font-size:22px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}
  #productsView .productMobileHeaderActions{display:flex!important;align-items:center!important;gap:12px!important;margin-left:auto!important}
  #productsView .productMobilePdfBtn{width:42px!important;height:52px!important;border:0!important;background:transparent!important;padding:0!important;display:grid!important;place-items:center!important;color:#165ee7!important;box-shadow:none!important}
  #productsView .productMobilePdfIcon{width:25px!important;height:31px!important;border:2px solid #165ee7!important;border-radius:2px!important;display:grid!important;place-items:end center!important;padding-bottom:2px!important;box-sizing:border-box!important;font:800 8px/1 Arial,sans-serif!important;position:relative!important;background:#ffca05!important}
  #productsView .productMobilePdfIcon:before{content:""!important;position:absolute!important;right:-2px!important;top:-2px!important;width:8px!important;height:8px!important;background:#ffca05!important;border-left:2px solid #165ee7!important;border-bottom:2px solid #165ee7!important}
  #productsView .productMobileAddBtn{height:52px!important;min-width:205px!important;padding:0 15px!important;border:1.5px solid #155eef!important;border-radius:10px!important;background:#ffca05!important;color:#155eef!important;font-size:18px!important;font-weight:800!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;box-shadow:none!important;white-space:nowrap!important}
  #productsView .productMobileAddBtn span{font:400 31px/1 Arial,sans-serif!important;transform:translateY(-1px)!important}

  #productsView .productMobileTools{background:#fff!important;border-bottom:1px solid #d0d5dd!important;padding:15px!important}
  #productsView .productMobileSearchRow{display:grid!important;grid-template-columns:minmax(0,1fr) 70px!important;gap:10px!important;align-items:center!important}
  #productsView .productMobileSearch{height:66px!important;border:1px solid #c9ced4!important;border-radius:12px!important;background:#fff!important;display:grid!important;grid-template-columns:27px minmax(0,1fr) 52px!important;align-items:center!important;gap:9px!important;padding:0 12px!important;box-sizing:border-box!important}
  #productsView .productMobileSearchIcon{width:18px!important;height:18px!important;border:1.8px solid #111!important;border-radius:50%!important;position:relative!important;box-sizing:border-box!important}
  #productsView .productMobileSearchIcon:after{content:""!important;position:absolute!important;width:8px!important;height:2px!important;background:#111!important;right:-6px!important;bottom:-3px!important;transform:rotate(45deg)!important;border-radius:2px!important}
  #productsView .productMobileSearch input{height:60px!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#40516a!important;font-size:20px!important;font-weight:600!important;padding:0!important}
  #productsView .productMobileSearch input::placeholder{color:#a3aab3!important;opacity:1!important}
  #productsView .productMobileFilterIcon{height:34px!important;border-left:1px solid #d0d5dd!important;display:grid!important;align-content:center!important;justify-items:center!important;gap:5px!important}
  #productsView .productMobileFilterIcon i{display:block!important;height:1.5px!important;background:#5e6670!important;border-radius:3px!important}
  #productsView .productMobileFilterIcon i:nth-child(1){width:20px!important} #productsView .productMobileFilterIcon i:nth-child(2){width:14px!important} #productsView .productMobileFilterIcon i:nth-child(3){width:8px!important}
  #productsView .productMobileScanBtn{height:66px!important;width:70px!important;border:1px solid #c9ced4!important;border-radius:12px!important;background:#fff!important;padding:0!important;display:grid!important;place-items:center!important;box-shadow:none!important}
  #productsView .productMobileScanBtn span{width:30px!important;height:32px!important;position:relative!important;background:linear-gradient(90deg,transparent 0 4px,#111 4px 7px,transparent 7px 11px,#111 11px 14px,transparent 14px 18px,#111 18px 21px,transparent 21px)!important}
  #productsView .productMobileScanBtn span:before{content:""!important;position:absolute!important;inset:-3px!important;border:2px solid #111!important;border-top-color:transparent!important;border-bottom-color:transparent!important;border-radius:7px!important}

  #productsView .productMobileFilterRow{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr) 60px!important;gap:10px!important;margin-top:9px!important}
  #productsView .productMobileSelect{height:66px!important;border:1px solid #c9ced4!important;border-radius:11px!important;background:#fff!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;overflow:hidden!important;position:relative!important}
  #productsView .productMobileSelect select{appearance:none!important;-webkit-appearance:none!important;width:100%!important;height:64px!important;border:0!important;background:transparent!important;color:#40516a!important;font-size:18px!important;font-weight:600!important;outline:0!important;padding:0 37px 0 52px!important}
  #productsView .productMobileStockWrap select{padding-left:18px!important}
  #productsView .productMobileSelect:after{content:""!important;position:absolute!important;right:17px!important;top:24px!important;width:10px!important;height:10px!important;border-right:2px solid #98a2b3!important;border-bottom:2px solid #98a2b3!important;transform:rotate(45deg)!important;pointer-events:none!important}
  #productsView .productMobileSortIcon{position:absolute!important;left:15px!important;top:16px!important;font:700 29px/1 Arial,sans-serif!important;color:#40516a!important;pointer-events:none!important}
  #productsView .productMobileRefresh{height:66px!important;width:60px!important;border:1px solid #c9ced4!important;border-radius:11px!important;background:#fff!important;color:#777f86!important;font:400 34px/1 "Segoe UI Symbol",Arial,sans-serif!important;padding:0!important;display:grid!important;place-items:center!important;box-shadow:none!important}

  #productsView .productMobileSummary{height:58px!important;padding:18px 11px 0!important;box-sizing:border-box!important;background:#f4f5f6!important;color:#40516a!important;font-size:20px!important;font-weight:800!important}
  #productsView .productMobileSummary b{font-weight:800!important}
  #productsView .productMobileList{padding:0 10px 120px!important;background:#f4f5f6!important;display:grid!important;gap:12px!important}
  #productsView .productMobileCard{min-height:143px!important;border:1px solid #e1e5e9!important;border-radius:14px!important;background:#fff!important;box-shadow:0 3px 8px rgba(15,23,42,.13)!important;padding:16px 16px 11px!important;box-sizing:border-box!important;color:#40516a!important}
  #productsView .productMobileCardTop{display:grid!important;grid-template-columns:46px minmax(0,1fr) 28px!important;gap:10px!important;align-items:start!important}
  #productsView .productMobileThumb{width:44px!important;height:44px!important;border:1px solid #e1e5e9!important;border-radius:10px!important;background:#f8fafc!important;display:grid!important;place-items:center!important;overflow:hidden!important}
  #productsView .productMobileThumb img{width:32px!important;height:32px!important;object-fit:contain!important;image-rendering:auto!important}
  #productsView .productMobileInfo{min-width:0!important}
  #productsView .productMobileName{display:block!important;color:#40516a!important;font-size:19px!important;line-height:1.1!important;font-weight:800!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #productsView .productMobilePrice{display:block!important;margin-top:6px!important;color:#344054!important;font-size:21px!important;line-height:1!important;font-weight:600!important}
  #productsView .productMobileDots{width:28px!important;height:44px!important;border:0!important;background:transparent!important;color:#40516a!important;font:800 32px/1 Arial,sans-serif!important;padding:0!important;display:grid!important;place-items:start center!important;box-shadow:none!important}
  #productsView .productMobileStockLine{height:38px!important;margin-top:11px!important;border-top:1px solid #edf0f2!important;display:flex!important;align-items:flex-end!important;gap:5px!important;color:#344054!important;font-size:15px!important;font-weight:600!important}
  #productsView .productMobileStockDot{width:8px!important;height:8px!important;border-radius:50%!important;background:#22c55e!important;margin-bottom:3px!important;flex:0 0 8px!important}
  #productsView .productMobileStockLine.out .productMobileStockDot{background:#ef4444!important}
  #productsView .productMobileEmpty{min-height:260px!important;display:grid!important;place-items:center!important;color:#98a2b3!important;font-size:18px!important;font-weight:600!important;background:#f4f5f6!important}
}

@media (max-width:430px) and (hover:none) and (pointer:coarse){
  #productsView .productMobileHeader{height:70px!important;padding-left:10px!important;padding-right:8px!important}
  #productsView .productMobileHeader h1{font-size:19px!important}
  #productsView .productMobileHeaderActions{gap:7px!important}
  #productsView .productMobilePdfBtn{width:34px!important}
  #productsView .productMobileAddBtn{min-width:0!important;height:50px!important;padding:0 10px!important;font-size:15px!important}
  #productsView .productMobileTools{padding:13px 14px!important}
  #productsView .productMobileSearchRow{grid-template-columns:minmax(0,1fr) 62px!important}
  #productsView .productMobileScanBtn{width:62px!important}
  #productsView .productMobileFilterRow{grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) 55px!important;gap:8px!important}
  #productsView .productMobileSelect select{font-size:15px!important;padding-left:43px!important;padding-right:29px!important}
  #productsView .productMobileStockWrap select{padding-left:12px!important}
  #productsView .productMobileRefresh{width:55px!important}
  #productsView .productMobileName{font-size:18px!important}
  #productsView .productMobilePrice{font-size:20px!important}
}

/* =========================================================
   v96 — Contacts desktop video match
   Desktop contact list/detail + add/edit/delete interaction.
   Mobile v93 contact layout remains intact.
   ========================================================= */
.contactDetail{overflow:hidden;position:relative;background:#fff}
.contactDetailHead{min-height:64px;padding:11px 12px;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;gap:10px}
.contactDetailAvatar{width:32px;height:32px;border-radius:50%;background:#eef0f3;color:#667085;display:grid;place-items:center;font-size:13px;font-weight:700;flex:0 0 32px;overflow:hidden}
.contactDetailAvatar img{width:100%;height:100%;object-fit:cover;display:block}
.contactDetailIdentity{min-width:0;display:grid;gap:2px}.contactDetailIdentity b{font-size:14px;color:#4b5563}.contactDetailIdentity b span{font-size:11px;color:#7b8491;font-weight:600}.contactDetailIdentity small{font-size:11px;color:#98a2b3}
.contactDetailActions{margin-left:auto;display:flex;gap:8px}.contactDetailActions button{height:36px;background:#fff;border:1px solid #dfe3e8;color:#596273;padding:0 14px}.contactDetailActions .contactDeleteAction{background:#ff5c68;border-color:#ff5c68;color:#fff}.contactDetailActions .contactRefreshAction{padding:0 12px}
.contactTxnTable{width:100%;border-collapse:collapse}.contactTxnTable th,.contactTxnTable td{height:34px;padding:6px 10px;border-bottom:1px solid #eceff1;text-align:left;font-size:11px;color:#667085;white-space:nowrap}.contactTxnTable th{font-weight:700;background:#fff}.contactTxnTable tbody tr:nth-child(odd){background:#f7f7f7}.contactTxnType{display:inline-block;padding:4px 11px;border-radius:5px;background:#dcf8e4;color:#1d9b50;font-weight:700}.contactTxnType.due{background:#fff0f0;color:#ef4444}.contactTxnAmount{color:#39b564!important;text-align:right!important}.contactTxnEmpty{height:240px;display:grid;place-items:center;color:#697386;font-size:12px}

@media (min-width:701px){
  #contactsView .contactSplit{grid-template-columns:535px minmax(0,1fr);min-height:520px;background:#fff}
  #contactsView .contactList{border-right:1px solid #e2e5e9;min-height:520px}
  #contactsView .contactTabs{height:48px;padding:0 22px;gap:20px;align-items:flex-end;border-bottom:1px solid #e1e4e8}
  #contactsView .contactTabs .contactTab{font-size:13px;height:48px;padding:0 0 11px;display:flex;align-items:flex-end;gap:2px}.contactTabs .contactTab.active{border-bottom-width:3px}
  #contactsView .contactSearchRow{padding:8px 12px}.contactSearchBox{height:37px}.contactRefreshBtn{width:38px;padding:0}
  #contactsView #contactListBody{padding:12px 12px 70px;background:#fff;min-height:397px;box-sizing:border-box}
  #contactsView .contactContactRow{height:58px;min-height:58px;padding:0 12px;display:grid;grid-template-columns:34px minmax(0,1fr) auto 18px;gap:10px;border:0;background:#fff;cursor:pointer}
  #contactsView .contactContactRow:hover{background:#f5f5f5}
  #contactsView .contactContactRow.active{background:#f3f3f3;border-left:3px solid #111;padding-left:9px}
  #contactsView .contactAvatar{display:grid;width:30px;height:30px;border-radius:50%;background:#eef0f3;place-items:center;color:#667085;font-size:12px;font-weight:700;overflow:hidden}
  #contactsView .contactAvatar img{width:100%;height:100%;object-fit:cover;display:block}
  #contactsView .contactRowText{display:block;min-width:0}.contactRowText b{display:block;font-size:12px;color:#465569}.contactRowAddress{display:block;margin-top:2px;font-size:10px;color:#98a2b3}.contactRowPhoneMobile{display:none!important}.contactRowPhoneDesktop{display:block;color:#98a2b3;font-size:11px;white-space:nowrap}.contactRowArrow{display:block;color:#9aa3af;font-size:18px;line-height:1}.contactJoin{height:36px}
}

.contactDrawerScrim{position:fixed;inset:0;border:0;background:rgba(0,0,0,.36);display:none;z-index:179;padding:0}.contactDrawerScrim.open{display:block}
.contactReferenceDrawer{position:fixed!important;right:0!important;top:0!important;bottom:0!important;width:500px!important;max-width:92vw!important;min-height:100vh!important;height:100vh!important;padding:0!important;background:#fff!important;box-shadow:-8px 0 18px rgba(0,0,0,.16)!important;z-index:180!important;overflow:hidden!important}
.contactReferenceDrawer.open{display:grid!important;grid-template-rows:62px 1fr!important}
.contactDrawerHead{height:62px;border-bottom:1px solid #ececec;display:flex;align-items:center;justify-content:center;padding:0 52px;position:relative}.contactDrawerHead h2{margin:0;font-size:20px;color:#465569}.contactDrawerHead button{position:absolute;right:10px;top:8px;width:42px;height:42px;border:0;background:transparent;font-size:29px;color:#333;padding:0}
.contactDrawerForm{padding:12px 28px 18px;overflow:auto;display:flex;flex-direction:column;gap:11px;background:#fff}.contactDrawerForm label{display:grid;gap:6px;font-size:12px;color:#333;font-weight:700}.contactDrawerForm input{height:38px;border:1px solid #d8dce1;border-radius:5px;padding:0 11px;background:#fff;color:#4b5563;font-family:inherit}.contactPhotoWrap{display:flex;justify-content:center;margin:1px 0 12px}.contactPhotoPicker{display:grid!important;justify-items:center;gap:8px!important;color:#1e64cc!important;cursor:pointer;font-size:12px!important}.contactPhotoPreview{width:78px;height:78px;border-radius:50%;background:linear-gradient(#c7c7c7 0 43%,#696969 44% 100%);position:relative;overflow:hidden}.contactPhotoPreview:before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:#666;left:25px;top:13px}.contactPhotoPreview:after{content:"";position:absolute;width:57px;height:30px;border-radius:50% 50% 0 0;background:#666;left:11px;bottom:0}.contactPhotoPreview.hasImage:before,.contactPhotoPreview.hasImage:after{display:none}.contactPhotoPreview img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}.contactPhoneField{height:38px;border:1px solid #d8dce1;border-radius:5px;display:grid;grid-template-columns:42px 38px 1fr;align-items:center;background:#fff}.contactPhoneField input{height:36px;border:0!important;padding-left:3px!important}.contactPhonePrefix,.contactPhoneCode{font-size:12px;color:#667085;text-align:center}.contactPhonePrefix{border-right:1px solid #e4e7eb}.contactEmployeeOnly{display:none!important}.contactReferenceDrawer.employeeMode .contactEmployeeOnly{display:grid!important}.contactDrawerSpacer{flex:1;min-height:12px}.contactDrawerForm .blackBtn{height:40px;flex:0 0 40px}

.contactDeleteOverlay{position:fixed;inset:0;z-index:190;display:none;align-items:center;justify-content:center}.contactDeleteOverlay.open{display:flex}.contactDeleteScrim{position:absolute;inset:0;border:0;background:rgba(0,0,0,.36)}.contactDeleteModal{position:relative;z-index:1;width:540px;max-width:calc(100vw - 28px);background:#fff;border-radius:5px;box-shadow:0 8px 28px rgba(0,0,0,.2);overflow:hidden}.contactDeleteHead{height:52px;padding:0 14px;display:flex;align-items:center;border-bottom:1px solid #e6e6e6}.contactDeleteHead h2{margin:0;color:#465569;font-size:19px}.contactDeleteHead button{margin-left:auto;width:36px;height:36px;border:0;background:transparent;font-size:28px;padding:0}.contactDeleteBody{padding:14px}.contactDeleteBody h3{margin:0 0 13px;color:#465569;font-size:18px}.contactDeleteBody p{margin:0;color:#737f8f;font-size:13px;border-bottom:1px solid #e5e7eb;padding-bottom:14px}.contactDeleteFoot{height:54px;display:flex;align-items:center;justify-content:flex-end;padding:0 14px}.contactDeleteConfirm{height:36px;background:#ff5864!important;border-color:#ff5864!important;color:#fff!important}

@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  .contactReferenceDrawer{width:100%!important;max-width:100vw!important}.contactDrawerForm{padding:14px 20px 20px}.contactDrawerHead{height:58px}.contactDeleteModal{width:calc(100vw - 30px)}
}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #contactsView .contactRowAddress{display:none!important}
  #contactsView .contactRowPhoneMobile{display:block!important}
  #contactsView .contactRowPhoneDesktop{display:none!important}
}
#contactsView .contactAvatar img{width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================
   STOCK ACCOUNTING VIDEO MATCH v97 — 2026-09-22
   Scoped to Stock Management + stock overlays only.
   ========================================================= */
#stockView .stockTitleRow{align-items:center;margin-bottom:14px}
#stockView .stockViewToolbar,#stockView .stockEditToolbar{align-items:center;gap:8px}
#stockView .stockReferenceFilters{margin:0 0 10px;gap:7px;flex-wrap:nowrap}
#stockView .stockReferenceFilters .stockSearchBox{min-width:290px;max-width:360px;flex:0 1 360px}
#stockView .stockReferenceFilters .stockScanBtn{width:42px;padding:0;font-size:16px}
#stockView .stockReferenceFilters select{min-width:124px;font-size:11px}
#stockView .stockReferenceFilters #stockStatusSelect{min-width:82px}
#stockView .stockMetricsRef{display:flex;align-items:center;gap:7px;margin-left:0}
#stockView .stockMetricsRef .metricPill{height:36px;white-space:nowrap}
#stockView .stockTablePanel{overflow:hidden;background:#fff}
#stockView .stockReferenceTable{min-width:760px;table-layout:fixed}
#stockView .stockReferenceTable th,#stockView .stockReferenceTable td{height:37px;padding:7px 12px;font-size:11px;border-bottom:1px solid #edf0f2}
#stockView .stockReferenceTable th{height:33px;background:#fafafa;color:#667085;font-weight:700}
#stockView .stockReferenceTable th:first-child,#stockView .stockReferenceTable td:first-child{width:48%}
#stockView .stockReferenceTable th:nth-child(2),#stockView .stockReferenceTable td:nth-child(2){width:15%;text-align:center}
#stockView .stockReferenceTable th:nth-child(3),#stockView .stockReferenceTable td:nth-child(3){width:17%;text-align:right}
#stockView .stockReferenceTable th:nth-child(4),#stockView .stockReferenceTable td:nth-child(4){width:20%;text-align:right}
#stockView .stockReferenceTable tbody tr{cursor:pointer;transition:background .12s ease}
#stockView .stockReferenceTable tbody tr:hover,#stockView .stockReferenceTable tbody tr.stockRowActive{background:#dcdcdc}
#stockView .stockProductCell{display:flex;align-items:center;gap:9px;min-width:0;color:#465569}
#stockView .stockProductThumb{width:29px;height:29px;border-radius:3px;border:1px solid #e3e7ec;background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 29px;color:#7a8798;font-size:19px}
#stockView .stockProductThumb img{width:100%;height:100%;object-fit:contain}
#stockView .stockProductCell strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#465569}
#stockView .stockTableFooter{height:28px;display:flex;align-items:center;justify-content:center;color:#667085;font-size:10px;background:#fff}
#stockView.stockEditMode .stockMetricsRef{display:none}
#stockView.stockEditMode .stockReferenceTable th:first-child,#stockView.stockEditMode .stockReferenceTable td:first-child{width:40%}
#stockView.stockEditMode .stockReferenceTable th:nth-child(2),#stockView.stockEditMode .stockReferenceTable td:nth-child(2){width:14%}
#stockView.stockEditMode .stockReferenceTable th:nth-child(3),#stockView.stockEditMode .stockReferenceTable td:nth-child(3){width:18%}
#stockView.stockEditMode .stockReferenceTable th:nth-child(4),#stockView.stockEditMode .stockReferenceTable td:nth-child(4){width:28%}
#stockView .stockInlineStepper{display:grid;grid-template-columns:34px minmax(64px,120px) 34px;gap:5px;justify-content:end;align-items:center}
#stockView .stockInlineStepper button{height:29px;padding:0;border:0;border-radius:3px;color:#fff;font-size:16px;line-height:1;font-weight:800}
#stockView .stockInlineStepper .stockInlineMinus{background:#ff5964}
#stockView .stockInlineStepper .stockInlinePlus{background:#59d574}
#stockView .stockInlineStepper input{height:29px;border:0;border-bottom:2px solid #2f73da;background:transparent;text-align:center;color:#465569;font-weight:700;min-width:0;padding:0 4px}
#stockView.stockEditMode .stockReferenceTable tbody tr{cursor:default}
#stockView.stockEditMode .stockReferenceTable tbody tr:hover{background:#dedede}

.stockRefOverlay{position:fixed;inset:0;z-index:520;display:none;place-items:center;background:rgba(0,0,0,.34);padding:18px}
.stockRefOverlay.open{display:grid}
.stockRefScrim{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;cursor:default}
.stockDetailsModal,.stockUpdateModal{position:relative;z-index:1;width:min(540px,calc(100vw - 32px));background:#fff;border-radius:5px;box-shadow:0 18px 45px rgba(0,0,0,.25);overflow:hidden;color:#465569}
.stockDetailsModal{max-height:min(690px,calc(100vh - 34px));display:flex;flex-direction:column}
.stockUpdateModal{width:min(540px,calc(100vw - 32px))}
.stockRefHead{min-height:53px;border-bottom:1px solid #e7e9ed;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 15px 10px}
.stockRefHead h2{font-size:18px;line-height:1.25;margin:0;color:#344054;font-weight:800}
.stockRefHead span{display:block;margin-top:4px;font-size:11px;color:#667085}
.stockRefClose{width:30px;height:30px;padding:0;border:0;background:transparent;color:#333;font-size:24px;line-height:1}
.stockDetailsScroll{overflow:auto;padding:12px 15px 6px}
.stockDetailsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stockDetailBox{min-height:57px;background:#f0f0f0;border-radius:3px;padding:7px 9px;display:flex;flex-direction:column;gap:5px}
.stockDetailBox small{font-size:10px;color:#667085;line-height:1.25}
.stockDetailBox strong{font-size:12px;color:#465569;line-height:1.25}
.stockDetailSection{margin:13px 0 8px;padding-top:9px;border-top:1px solid #edf0f2;font-size:10px;font-weight:800;color:#667085;text-transform:uppercase}
.stockDetailPlain{font-size:11px;color:#667085;margin:6px 0 10px}
.stockDetailImage{display:flex;align-items:flex-start;gap:10px;margin-top:6px;min-height:84px}
.stockDetailImage .stockDetailThumb{width:54px;height:76px;border:1px solid #e3e7ec;border-radius:4px;background:#fff;display:grid;place-items:center;overflow:hidden}
.stockDetailImage .stockDetailThumb img{max-width:100%;max-height:100%;object-fit:contain}
.stockDetailImage .stockDetailPlaceholder{font-size:30px;color:#98a2b3}
.stockDetailsActions{border-top:1px solid #e7e9ed;padding:10px 12px;display:grid;grid-template-columns:1fr 1.2fr;gap:10px;background:#fff}
.stockDetailsActions button{height:38px;border:0;border-radius:4px;color:#fff;font-size:11px;font-weight:700}
.stockDeleteBtn{background:#ff5b67}
.stockAdjustOpenBtn{background:#171717}
.stockUpdateBody{padding:12px 14px 14px}
.stockUpdateProduct{min-height:49px;display:flex;align-items:center;gap:9px;color:#465569;font-size:11px}
.stockUpdateProduct .stockProductThumb{width:30px;height:42px;flex:0 0 30px;border:1px solid #e3e7ec;border-radius:3px;display:grid;place-items:center;overflow:hidden}
.stockUpdateProduct .stockProductThumb img{max-width:100%;max-height:100%;object-fit:contain}
.stockUpdateProduct b{display:block;color:#344054;font-size:11px}
.stockUpdateProduct small{display:block;color:#667085;margin-top:3px;font-size:10px}
.stockStepper{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:6px;align-items:center;margin:4px 0 10px}
.stockStepper button{height:34px;border:0;border-radius:3px;color:#fff;font-size:18px;font-weight:800;padding:0}
.stockStepMinus{background:#ff5964!important}.stockStepPlus{background:#59d574!important}
.stockStepper input{height:34px;border:1px solid #d8dde3;border-radius:3px;text-align:center;font-weight:800;color:#344054}
.stockUpdateSave{width:100%;height:36px;border:0;border-radius:3px;background:#171717;color:#fff;font-size:11px;font-weight:700}
html.stockRefLock,body.stockRefLock{overflow:hidden!important}

@media (min-width:901px){
  #stockView{padding-top:16px}
  #stockView .stockTitleRow h1{font-size:19px;color:#344054}
}
@media (max-width:900px){
  #stockView .stockReferenceFilters{flex-wrap:wrap}
  #stockView .stockReferenceFilters .stockSearchBox{flex:1 1 100%;max-width:none;min-width:0}
  #stockView .stockMetricsRef{flex-wrap:wrap}
  .stockDetailsGrid{grid-template-columns:1fr 1fr}
}

/* =========================================================
   v100 — Purchase Confirm Payment + Success Invoice video flow
   Scoped to purchase checkout only.
   ========================================================= */
.purchaseConfirmOverlay,.purchaseSuccessOverlay{position:fixed;inset:0;z-index:260;display:none}
.purchaseConfirmOverlay.open,.purchaseSuccessOverlay.open{display:block}
.purchaseConfirmScrim,.purchaseSuccessScrim{position:absolute;inset:0;border:0;background:rgba(15,23,42,.38);cursor:default}
.purchaseConfirmDrawer{position:absolute;right:0;top:0;height:100%;width:min(430px,100vw);background:#fff;box-shadow:-8px 0 28px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:hbQuickDrawerIn .24s cubic-bezier(.22,.61,.36,1) both;overflow:hidden}
.purchaseConfirmHead,.purchaseSupplierHead{height:58px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eceff2;position:relative;flex:0 0 auto;background:#fff}
.purchaseConfirmHead h2,.purchaseSupplierHead h2{margin:0;font-size:18px;color:#25354d;font-weight:800}
.purchaseConfirmClose,.purchaseSupplierHead button{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;background:transparent;font-size:27px;line-height:1;color:#1f2937;cursor:pointer}
.purchaseConfirmForm{padding:14px 20px 20px;overflow:auto;flex:1 1 auto;display:grid;gap:12px;background:#fff}
.purchaseConfirmField{display:grid;gap:6px;min-width:0;color:#28384e;font-size:12px;font-weight:700;position:relative}
.purchaseConfirmField>span{display:block}
.purchaseConfirmField b,.purchaseSupplierForm b{color:#ff4d4f}
.purchaseConfirmField>input,.purchasePartyInputWrap,.purchasePhoneBox,.purchaseConfirmDateBox{height:42px;border:1px solid #dfe3e8;border-radius:5px;background:#fff;box-sizing:border-box}
.purchaseConfirmField>input{width:100%;padding:0 12px;color:#394a61;outline:none}
.purchaseConfirmField>input:focus,.purchasePartyInputWrap:focus-within,.purchasePhoneBox:focus-within,.purchaseConfirmDateBox:focus-within{border-color:#b9c2cd;box-shadow:0 0 0 1px rgba(37,99,235,.04)}
.purchaseConfirmDateBox{position:relative;display:flex;align-items:center;padding:0 38px 0 11px}
.purchaseConfirmDateBox input[type=text]{border:0;outline:0;width:100%;height:38px;color:#596579;background:transparent;font-weight:600}
.purchaseConfirmDateBox input[type=date]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.purchaseConfirmDateBox i{position:absolute;right:12px;width:15px;height:15px;border:1.8px solid #667085;border-radius:2px;pointer-events:none}
.purchaseConfirmDateBox i:before,.purchaseConfirmDateBox i:after{content:"";position:absolute;left:2px;right:2px;height:1.5px;background:#667085}
.purchaseConfirmDateBox i:before{top:4px}.purchaseConfirmDateBox i:after{top:7px}
.purchasePartyInputWrap{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;overflow:hidden}
.purchasePartyInputWrap input{height:40px;border:0;outline:0;padding:0 11px;color:#455468;min-width:0}
.purchasePartyInputWrap button{height:40px;border:0;border-left:1px solid transparent;background:#fff;font-size:20px;cursor:pointer;color:#111}
.purchasePhoneBox{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;overflow:hidden}
.purchasePhoneBox>span{height:40px;display:flex;align-items:center;justify-content:center;border-right:1px solid #edf0f2;color:#475569;font-weight:600;font-size:12px}
.purchasePhoneBox input{height:40px;border:0;outline:0;padding:0 10px;min-width:0;color:#455468;background:#fff}
.purchaseToggleRow{height:34px;display:flex;align-items:center;justify-content:space-between;color:#27364c;font-size:12px;font-weight:800;cursor:pointer}
.purchaseToggleRow input,.purchaseAutoDueSwitch input{position:absolute;opacity:0;pointer-events:none}
.purchaseToggleRow i,.purchaseAutoDueSwitch i{width:37px;height:21px;border-radius:99px;background:#7c858e;position:relative;transition:.18s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.purchaseToggleRow i:after,.purchaseAutoDueSwitch i:after{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#f8fafc;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:.18s ease}
.purchaseToggleRow input:checked+i,.purchaseAutoDueSwitch input:checked+i{background:#111}
.purchaseToggleRow input:checked+i:after,.purchaseAutoDueSwitch input:checked+i:after{transform:translateX(16px)}
.purchaseEmployeeFields{display:grid;gap:12px}
.purchaseConditionalField[hidden],.purchaseEmployeeFields[hidden]{display:none!important}
.purchasePartyMenu{position:absolute;left:0;right:0;top:68px;z-index:6;background:#fff;border:1px solid #dce1e6;border-radius:5px;box-shadow:0 10px 24px rgba(15,23,42,.16);overflow:hidden;max-height:220px;overflow-y:auto}
.purchasePartyMenu[hidden]{display:none!important}
.purchasePartyMenu button{width:100%;min-height:42px;border:0;border-bottom:1px solid #eef1f4;background:#fff;text-align:left;padding:8px 11px;color:#344054;font-weight:700;cursor:pointer;display:grid;gap:2px}
.purchasePartyMenu button:hover{background:#f5f6f7}.purchasePartyMenu button small{font-size:10px;color:#8490a1;font-weight:600}.purchasePartyMenu .purchaseAddParty{background:#141414!important;color:#fff!important;text-align:center;display:block;border:0!important}
.purchaseConfirmBottom{flex:0 0 auto;border-top:1px solid #eceff2;padding:10px 18px 14px;background:#fff}
.purchaseConfirmDueLine{min-height:34px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;color:#667085}
.purchaseConfirmDueLine strong{color:#36a853;font-size:11px;font-weight:800}
.purchaseAutoDueSwitch{display:flex;align-items:center;gap:7px;font-weight:700}.purchaseAutoDueSwitch i{transform:scale(.82);transform-origin:center}
.purchaseConfirmSubmit{width:100%;height:38px;border:0;border-radius:3px;background:#151515;color:#fff;font-weight:800;cursor:pointer}
.purchaseConfirmSubmit:active{transform:translateY(1px)}
.purchaseSupplierDrawer{position:absolute;right:0;top:0;height:100%;width:min(430px,100vw);background:#fff;box-shadow:-8px 0 28px rgba(0,0,0,.23);z-index:3;display:none;flex-direction:column;animation:hbQuickDrawerIn .22s cubic-bezier(.22,.61,.36,1) both}
.purchaseSupplierDrawer.open{display:flex}
.purchaseSupplierForm{padding:16px 20px;display:grid;gap:12px;overflow:auto;flex:1}
.purchaseSupplierAvatar{display:grid;place-items:center;gap:5px;padding:4px 0 8px;color:#8792a2}.purchaseSupplierAvatar span{width:64px;height:64px;border-radius:50%;background:#d7dade;display:grid;place-items:center;color:#555;font-size:30px}.purchaseSupplierAvatar small{font-size:11px;color:#6f7b8b}
.purchaseSupplierForm>label{display:grid;gap:6px;font-size:12px;color:#28384e;font-weight:800}.purchaseSupplierForm>label>input{height:42px;border:1px solid #dfe3e8;border-radius:5px;padding:0 11px;outline:none}
.purchaseSupplierDuplicate{border:1px solid #f4c7c7;background:#fff7f7;color:#9f2f2f;border-radius:6px;padding:10px 11px;font-size:12px;line-height:1.45}.purchaseSupplierDuplicate[hidden]{display:none!important}.purchaseSupplierDuplicate button{margin-top:8px;width:100%;height:34px;border:0;border-radius:4px;background:#151515;color:#fff;font-weight:800;cursor:pointer}.purchaseSupplierDuplicate button:disabled{opacity:.6;cursor:not-allowed}
.purchaseSupplierFooter{padding:12px 18px;border-top:1px solid #eceff2}.purchaseSupplierFooter button{width:100%;height:38px;border:0;background:#161616;color:#fff;border-radius:3px;font-weight:800;cursor:pointer}

.purchaseSuccessOverlay{z-index:270}
.purchaseSuccessModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 40px));max-height:88vh;background:#fff;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.24);display:flex;flex-direction:column;overflow:hidden}
.purchaseSuccessHead{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #eceff2;flex:0 0 auto}.purchaseSuccessHead h2{margin:0;font-size:18px;color:#1f2937}.purchaseSuccessHead button{width:34px;height:34px;border:0;background:transparent;font-size:27px;cursor:pointer}
.purchaseSuccessBody{overflow:auto;padding:18px 34px 24px;color:#28384e}.purchaseInvoiceBrand{display:flex;gap:11px;align-items:center}.purchaseInvoiceStoreIcon{width:46px;height:46px;border-radius:8px;background:#f4f4f5;display:grid;place-items:center;font-size:28px}.purchaseInvoiceBrand b{display:block;font-size:16px}.purchaseInvoiceBrand small{display:block;color:#6b7280;margin-top:2px}.purchaseInvoiceTitle{text-align:center;font-size:21px;font-weight:900;margin:12px 0 8px;color:#111}.purchaseInvoiceMeta{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #cfd4da;padding-top:8px;font-size:11px;line-height:1.65}.purchaseInvoiceMeta>div:last-child{text-align:right}.purchaseInvoiceTable{width:100%;border-collapse:collapse;margin-top:11px;font-size:11px}.purchaseInvoiceTable th,.purchaseInvoiceTable td{border:1px solid #cfd4da;padding:7px 6px;text-align:left}.purchaseInvoiceTable th{text-align:center;background:#fafafa}.purchaseInvoiceTable td:nth-child(1),.purchaseInvoiceTable td:nth-child(3){text-align:center}.purchaseInvoiceTable td:nth-last-child(-n+2){text-align:right}.purchaseInvoiceSummary{display:grid;grid-template-columns:1fr 230px;gap:14px;margin-top:10px;font-size:11px}.purchaseInvoiceDueInfo{line-height:1.8}.purchaseInvoiceTotals{display:grid;grid-template-columns:1fr auto;gap:5px 10px}.purchaseInvoiceTotals strong{font-size:12px}.purchaseInvoiceSignatures{display:flex;justify-content:space-between;margin-top:36px;padding-top:8px}.purchaseInvoiceSignatures span{border-top:1px solid #adb5bd;padding-top:5px;min-width:130px;text-align:center;font-size:10px}
.purchaseSuccessFooter{padding:0 16px 14px;background:#fff}.purchaseSuccessFooter button{width:100%;height:38px;border:0;border-radius:2px;background:#151515;color:#fff;font-weight:800;cursor:pointer}

@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){.purchaseConfirmDrawer,.purchaseSupplierDrawer{width:100%}.purchaseConfirmHead h2,.purchaseSupplierHead h2{font-size:17px}.purchaseSuccessModal{width:calc(100vw - 18px);max-height:92vh}.purchaseSuccessBody{padding:14px}.purchaseInvoiceMeta,.purchaseInvoiceSummary{grid-template-columns:1fr}.purchaseInvoiceMeta>div:last-child{text-align:left}.purchaseInvoiceTotals{max-width:260px;margin-left:auto}}
@media print{.purchaseConfirmOverlay{display:none!important}.purchaseSuccessOverlay.open{position:static;display:block!important}.purchaseSuccessScrim,.purchaseSuccessHead,.purchaseSuccessFooter{display:none!important}.purchaseSuccessModal{position:static;transform:none;width:100%;max-height:none;box-shadow:none}.purchaseSuccessBody{overflow:visible;padding:0}}

/* =========================================================
   v102 — Desktop default opening size
   Make the desktop app open at a 125%-equivalent visual size while
   preserving normal browser zoom in/out. Mobile and print stay 1:1.
   ========================================================= */
@media screen and (min-device-width:901px){
  html{zoom:1.25!important;}
}
@media print{
  html{zoom:1!important;}
}


/* =========================================================
   v103 - Mobile Stock Khata reference match
   Mobile-only UI. Desktop stock table and stock logic remain unchanged.
   ========================================================= */
.stockMobileShell{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.stockMobilePage{background:#f4f5f6!important;min-height:100vh!important;overflow-x:hidden!important}
  body.stockMobilePage .bizShell{display:block!important;grid-template-columns:1fr!important;min-height:100vh!important;background:#f4f5f6!important}
  body.stockMobilePage .bizSidebar{display:none!important}
  body.stockMobilePage .bizTopbar{display:none!important}
  body.stockMobilePage .bizWorkspace{width:100%!important;min-width:0!important;padding:0!important;background:#f4f5f6!important;min-height:100vh!important}
  body.stockMobilePage #stockView{padding:0 0 90px!important;margin:0!important;min-height:100vh!important;background:#f4f5f6!important;box-sizing:border-box!important}
  body.stockMobilePage #stockView>.stockTitleRow,
  body.stockMobilePage #stockView>.stockReferenceFilters,
  body.stockMobilePage #stockView>.stockTablePanel,
  body.stockMobilePage #stockView>#stockCards{display:none!important}
  #stockView .stockMobileShell{display:block!important;min-height:100vh!important;background:#f4f5f6!important;color:#344054!important;position:relative!important}
  #stockView .stockMobileHeader{height:74px!important;background:#ffca05!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 10px 0 12px!important;box-sizing:border-box!important;gap:8px!important;position:sticky!important;top:0!important;z-index:45!important}
  #stockView .stockMobileHeaderTitle{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;flex:0 0 auto!important}
  #stockView .stockMobileHeaderTitle h1{margin:0!important;color:#111!important;font-size:23px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}
  #stockView .stockMobileBack{width:31px!important;height:48px!important;border:0!important;background:transparent!important;padding:0!important;color:#111!important;font:400 34px/1 Arial,sans-serif!important;display:grid!important;place-items:center!important;box-shadow:none!important}
  #stockView .stockMobileHeaderActions{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;min-width:0!important}
  #stockView .stockMobileHeaderActions button{height:50px!important;border-radius:10px!important;padding:0 12px!important;font-size:16px!important;font-weight:800!important;white-space:nowrap!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
  #stockView .stockMobileHistoryBtn{border:2px solid #1764e8!important;background:#ffca05!important;color:#1764e8!important}
  #stockView .stockMobileEditBtn{border:2px solid #1764e8!important;background:#1764e8!important;color:#fff!important}
  #stockView .stockMobileHistoryIcon{font:700 26px/1 Arial,sans-serif!important}
  #stockView .stockMobileEditIcon{font:700 20px/1 Arial,sans-serif!important}

  #stockView .stockMobileSummaryPanel{margin:15px 16px 10px!important;padding:19px!important;border-radius:11px!important;background:#1f5edc!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;box-sizing:border-box!important}
  #stockView .stockMobileMetric{height:111px!important;border-radius:10px!important;background:#2c69e8!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;text-align:center!important}
  #stockView .stockMobileMetric strong{font-size:26px!important;line-height:1!important;font-weight:900!important;color:#fff!important}
  #stockView .stockMobileMetric span{font-size:20px!important;line-height:1!important;font-weight:800!important;color:#fff!important}

  #stockView .stockMobileTools{padding:0 16px 14px!important;background:#fff!important;border-bottom:1px solid #d6dbe1!important;box-sizing:border-box!important}
  #stockView .stockMobileSearchRow{display:grid!important;grid-template-columns:minmax(0,1fr) 70px!important;gap:10px!important}
  #stockView .stockMobileSearch{height:66px!important;border:1px solid #cbd0d6!important;border-radius:12px!important;background:#fff!important;display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:0 14px!important;box-sizing:border-box!important}
  #stockView .stockMobileSearchIcon{width:18px!important;height:18px!important;border:1.8px solid #111!important;border-radius:50%!important;position:relative!important;box-sizing:border-box!important}
  #stockView .stockMobileSearchIcon:after{content:""!important;position:absolute!important;width:8px!important;height:2px!important;background:#111!important;right:-6px!important;bottom:-3px!important;transform:rotate(45deg)!important;border-radius:2px!important}
  #stockView .stockMobileSearch input{height:62px!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#40516a!important;font-size:20px!important;font-weight:600!important;padding:0!important}
  #stockView .stockMobileSearch input::placeholder{color:#a3aab3!important;opacity:1!important}
  #stockView .stockMobileScanBtn{height:66px!important;width:70px!important;border:1px solid #cbd0d6!important;border-radius:12px!important;background:#fff!important;padding:0!important;display:grid!important;place-items:center!important;box-shadow:none!important}
  #stockView .stockMobileScanBtn span{width:30px!important;height:32px!important;position:relative!important;background:linear-gradient(90deg,transparent 0 4px,#111 4px 7px,transparent 7px 11px,#111 11px 14px,transparent 14px 18px,#111 18px 21px,transparent 21px)!important}
  #stockView .stockMobileScanBtn span:before{content:""!important;position:absolute!important;inset:-3px!important;border:2px solid #111!important;border-top-color:transparent!important;border-bottom-color:transparent!important;border-radius:7px!important}
  #stockView .stockMobileFilterRow{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr) 60px!important;gap:10px!important;margin-top:9px!important}
  #stockView .stockMobileSelect{height:66px!important;border:1px solid #cbd0d6!important;border-radius:11px!important;background:#fff!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;overflow:hidden!important;position:relative!important}
  #stockView .stockMobileSelect select{appearance:none!important;-webkit-appearance:none!important;width:100%!important;height:64px!important;border:0!important;background:transparent!important;color:#40516a!important;font-size:18px!important;font-weight:600!important;outline:0!important;padding:0 37px 0 52px!important}
  #stockView .stockMobileStatusWrap select{padding-left:18px!important}
  #stockView .stockMobileSelect:after{content:""!important;position:absolute!important;right:17px!important;top:24px!important;width:10px!important;height:10px!important;border-right:2px solid #98a2b3!important;border-bottom:2px solid #98a2b3!important;transform:rotate(45deg)!important;pointer-events:none!important}
  #stockView .stockMobileSortIcon{position:absolute!important;left:15px!important;top:16px!important;font:800 28px/1 Arial,sans-serif!important;color:#40516a!important;pointer-events:none!important}
  #stockView .stockMobileRefresh{height:66px!important;width:60px!important;border:1px solid #cbd0d6!important;border-radius:11px!important;background:#fff!important;color:#777f86!important;font:400 35px/1 Arial,sans-serif!important;padding:0!important;display:grid!important;place-items:center!important;box-shadow:none!important}

  #stockView .stockMobileList{padding:24px 12px 120px!important;background:#f4f5f6!important;display:grid!important;gap:12px!important}
  #stockView .stockMobileCard{min-height:143px!important;border:1px solid #e0e4e8!important;border-radius:15px!important;background:#fff!important;box-shadow:0 3px 8px rgba(15,23,42,.13)!important;padding:16px 16px 12px!important;box-sizing:border-box!important;color:#40516a!important;cursor:pointer!important}
  #stockView .stockMobileCardTop{display:grid!important;grid-template-columns:46px minmax(0,1fr) 28px!important;gap:10px!important;align-items:start!important}
  #stockView .stockMobileThumb{width:44px!important;height:44px!important;border:1px solid #e1e5e9!important;border-radius:10px!important;background:#f8fafc!important;display:grid!important;place-items:center!important;overflow:hidden!important}
  #stockView .stockMobileThumb img{width:32px!important;height:32px!important;object-fit:contain!important}
  #stockView .stockMobileCube{font:700 29px/1 Arial,sans-serif!important;color:#98a2b3!important}
  #stockView .stockMobileInfo{min-width:0!important}
  #stockView .stockMobileName{display:block!important;color:#40516a!important;font-size:19px!important;line-height:1.1!important;font-weight:800!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #stockView .stockMobilePrice{display:block!important;margin-top:7px!important;color:#344054!important;font-size:22px!important;line-height:1!important;font-weight:700!important}
  #stockView .stockMobileDots{width:28px!important;height:44px!important;border:0!important;background:transparent!important;color:#40516a!important;font:900 32px/1 Arial,sans-serif!important;padding:0!important;display:grid!important;place-items:start center!important;box-shadow:none!important}
  #stockView .stockMobileStockLine{height:39px!important;margin-top:11px!important;border-top:1px solid #edf0f2!important;display:flex!important;align-items:flex-end!important;gap:5px!important;color:#344054!important;font-size:15px!important;font-weight:600!important}
  #stockView .stockMobileStockDot{width:8px!important;height:8px!important;border-radius:50%!important;background:#20c26b!important;margin-bottom:3px!important;flex:0 0 8px!important}
  #stockView .stockMobileStockLine.out .stockMobileStockDot{background:#f0444b!important}
  #stockView .stockMobileStockLine.out{color:#344054!important}
  #stockView .stockMobileAdd{position:fixed!important;right:14px!important;bottom:18px!important;width:62px!important;height:62px!important;border:0!important;border-radius:50%!important;background:#1764e8!important;color:#fff!important;font:300 38px/1 Arial,sans-serif!important;display:grid!important;place-items:center!important;box-shadow:0 5px 15px rgba(23,100,232,.34)!important;z-index:52!important;padding:0!important}
  #stockView .stockMobileEmpty{min-height:260px!important;display:grid!important;place-items:center!important;color:#98a2b3!important;font-size:18px!important;font-weight:600!important}

  #stockView .stockMobileStepper{display:grid!important;grid-template-columns:54px minmax(70px,1fr) 54px!important;gap:8px!important;margin-top:12px!important;align-items:center!important}
  #stockView .stockMobileStepper button{height:44px!important;border:0!important;border-radius:8px!important;color:#fff!important;font-size:26px!important;font-weight:900!important;padding:0!important}
  #stockView .stockMobileStepper button:first-child{background:#ff5964!important}
  #stockView .stockMobileStepper button:last-child{background:#59d574!important}
  #stockView .stockMobileStepper input{height:44px!important;border:1px solid #d6dbe1!important;border-radius:8px!important;text-align:center!important;font-size:18px!important;font-weight:800!important;color:#344054!important;min-width:0!important}
  #stockView .stockMobileEditBar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:53!important;background:#fff!important;border-top:1px solid #d9dde3!important;padding:10px 14px 13px!important;display:grid!important;grid-template-columns:1fr 1.25fr!important;gap:10px!important;box-shadow:0 -4px 12px rgba(15,23,42,.08)!important}
  #stockView .stockMobileEditBar[hidden]{display:none!important}
  #stockView .stockMobileEditBar button{height:48px!important;border-radius:8px!important;font-size:17px!important;font-weight:800!important}
  #stockView #stockMobileEditCancel{border:1px solid #cfd5dc!important;background:#fff!important;color:#465569!important}
  #stockView #stockMobileEditSave{border:1px solid #1764e8!important;background:#1764e8!important;color:#fff!important}
  #stockView .stockMobileShell.editing .stockMobileAdd{display:none!important}
}

@media screen and (max-width:430px){
  #stockView .stockMobileHeader{height:74px!important;padding-left:8px!important;padding-right:8px!important}
  #stockView .stockMobileHeaderTitle h1{font-size:19px!important}
  #stockView .stockMobileHeaderActions{gap:5px!important}
  #stockView .stockMobileHeaderActions button{height:49px!important;padding:0 8px!important;font-size:14px!important;border-radius:9px!important}
  #stockView .stockMobileHistoryIcon{font-size:23px!important}
  #stockView .stockMobileEditIcon{font-size:18px!important}
  #stockView .stockMobileSummaryPanel{margin-left:12px!important;margin-right:12px!important;padding:14px!important}
  #stockView .stockMobileMetric{height:104px!important}
  #stockView .stockMobileMetric strong{font-size:23px!important}
  #stockView .stockMobileMetric span{font-size:18px!important}
  #stockView .stockMobileTools{padding-left:14px!important;padding-right:14px!important}
  #stockView .stockMobileSearchRow{grid-template-columns:minmax(0,1fr) 62px!important}
  #stockView .stockMobileScanBtn{width:62px!important}
  #stockView .stockMobileFilterRow{grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) 55px!important;gap:8px!important}
  #stockView .stockMobileSelect select{font-size:15px!important;padding-left:43px!important;padding-right:29px!important}
  #stockView .stockMobileStatusWrap select{padding-left:12px!important}
  #stockView .stockMobileRefresh{width:55px!important}
  #stockView .stockMobileName{font-size:18px!important}
  #stockView .stockMobilePrice{font-size:20px!important}
}

/* =========================================================
   v104 — Mobile responsive hardening (all phone dimensions)
   Scope: responsive geometry only. No business/data logic changes.
   - 320px small phones through large phones
   - touch/coarse landscape widths up to 900px
   - safe-area/notch and dynamic viewport height support
   ========================================================= */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  :root{
    --m-safe-l:env(safe-area-inset-left,0px);
    --m-safe-r:env(safe-area-inset-right,0px);
    --m-safe-t:env(safe-area-inset-top,0px);
    --m-safe-b:env(safe-area-inset-bottom,0px);
  }
  html,body{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:clip!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;
  }
  body{min-height:100dvh!important}
  .bizShell,.bizWorkspace,.viewPane,.hPage,
  .dashBoardBox,.hPanel,.flatPanel,.purchaseClone,.sellClone,.purchaseStage,
  .dueSplit,.contactSplit,.accessSplit,.printerSplit,.marketingSplit,
  .purchasePicker,.sellPicker,.purchaseStageMain,.contactList,.contactDetail{
    min-width:0!important;max-width:100%!important;
  }
  img,video,canvas{max-width:100%!important}
  input,select,textarea,button{min-width:0;max-width:100%}
  .searchBox,.wideSearch{min-width:0!important;max-width:100%!important}
  .hTableWrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .pageTitleRow,.historyHeader,.dueTitleRow,.contactTitle,.expenseTop,
  .pageToolbar,.historyRight,.historyFilters,.stockReferenceFilters,.stockMetricsRef{
    min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;
  }
  .emptyStateCard{width:min(318px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important}

  /* Safe-area aware app shell. */
  .bizTopbar{
    padding-left:max(10px,var(--m-safe-l))!important;
    padding-right:max(10px,var(--m-safe-r))!important;
  }
  .bizSidebar{
    padding-left:var(--m-safe-l)!important;
    height:100dvh!important;max-height:100dvh!important;
  }
  .mobileBottomNav{
    left:0!important;right:0!important;
    padding-left:max(5px,var(--m-safe-l))!important;
    padding-right:max(5px,var(--m-safe-r))!important;
    padding-bottom:calc(7px + var(--m-safe-b))!important;
  }
  .mobileBottomNav button{min-width:0!important;overflow:hidden!important}
  .mobileBottomNav button>span:last-child{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  /* Generic modal/drawer containment. */
  .profileDrawer,.dueEntryDrawer,.contactReferenceDrawer,
  #expenseDrawer.expenseRefDrawer,.purchaseConfirmDrawer,.purchaseSupplierDrawer,.productAddDrawer{
    max-width:100vw!important;
  }
  .contactDeleteModal,.expenseDetailsModal,.purchaseSuccessModal,
  .stockDetailsModal,.stockUpdateModal{
    width:min(540px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
  .stockRefOverlay,.contactDeleteOverlay,.purchaseSuccessOverlay{padding-left:8px!important;padding-right:8px!important}

  /* Dashboard scales instead of overflowing on 320px phones. */
  .topActions{min-width:0!important;gap:clamp(4px,2vw,10px)!important}
  .profileTopButton{min-width:0!important}
  .dashControlRow{min-width:0!important}
  .balancePill{max-width:calc(100vw - 78px)!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
  .balancePill b{overflow:hidden!important;text-overflow:ellipsis!important}
  .periodTabs .periodBtn{font-size:clamp(12px,4.2vw,20px)!important;padding-left:2px!important;padding-right:2px!important}
  .summaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .summaryCard{min-width:0!important;padding-left:clamp(9px,3vw,14px)!important;padding-right:clamp(9px,3vw,14px)!important}
  .summaryCard small{font-size:clamp(14px,4.6vw,20px)!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .summaryCard strong{font-size:clamp(17px,5vw,23px)!important;overflow-wrap:anywhere!important}
  .primaryLinks,.mobileQuickLinks{min-width:0!important}
  .primaryLinks button,.mobileQuickLinks button{min-width:0!important;font-size:clamp(12px,4vw,16px)!important}

  /* Purchase / Sell stacks safely on phones and landscape phones. */
  #purchasesView .purchaseClone,#salesView .sellClone{
    grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;
    height:auto!important;min-height:0!important;gap:10px!important;
  }
  #purchasesView .purchasePicker,#salesView .sellPicker{width:100%!important;padding-right:8px!important}
  #purchasesView .purchaseSearchRow,#salesView .purchaseSearchRow{
    grid-template-columns:minmax(0,1fr) repeat(3,minmax(38px,43px))!important;gap:6px!important;
  }
  #purchasesView .purchaseStage,#salesView .purchaseStage{width:100%!important;min-height:min(540px,72dvh)!important;height:auto!important}
  #purchasesView .purchaseProductItem,#salesView .purchaseProductItem{grid-template-columns:34px minmax(0,1fr) auto!important}
  #purchasesView .purchaseProductItem b,#salesView .purchaseProductItem b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  /* History cards never force page width. */
  #salesHistoryView .salesMobileCard,#purchaseHistoryView .purchaseMobileCard{
    grid-template-columns:minmax(0,1fr) minmax(104px,38%)!important;min-width:0!important;
  }
  #salesHistoryView .salesMobilePayment,#purchaseHistoryView .purchaseMobilePayment{min-width:0!important}
  #salesHistoryView .salesMobilePayment strong,#purchaseHistoryView .purchaseMobilePayment strong{font-size:clamp(16px,5vw,21px)!important}

  /* Contacts: flexible tabs, search and rows. */
  body.contactsMobilePage #contactsView{min-width:0!important;width:100%!important;overflow-x:clip!important}
  #contactsView .contactMobileHeader{padding-left:max(12px,var(--m-safe-l))!important;padding-right:max(12px,var(--m-safe-r))!important}
  #contactsView .contactTabs{
    width:100%!important;min-width:0!important;padding-left:clamp(12px,8vw,46px)!important;padding-right:clamp(12px,6vw,32px)!important;
    gap:clamp(10px,6vw,31px)!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
  }
  #contactsView .contactTabs::-webkit-scrollbar{display:none!important}
  #contactsView .contactTabs .contactTab{flex:0 0 auto!important;font-size:clamp(17px,5.8vw,24px)!important}
  #contactsView .contactSearchRow{padding-left:clamp(12px,6vw,31px)!important;padding-right:clamp(12px,6vw,31px)!important}
  #contactsView .contactSearchBox input{font-size:clamp(17px,5.4vw,23px)!important}
  #contactsView #contactListBody.contactRows{padding-left:clamp(12px,5vw,26px)!important;padding-right:clamp(12px,5vw,26px)!important}
  #contactsView .contactContactRow{grid-template-columns:38px minmax(0,1fr) 23px!important;width:100%!important;min-width:0!important}
  #contactsView .contactRowText b{font-size:clamp(17px,5vw,22px)!important}
  #contactsView .contactRowText small{font-size:clamp(13px,4.2vw,18px)!important}
  #contactsView .contactJoin{
    left:max(14px,var(--m-safe-l))!important;right:max(14px,var(--m-safe-r))!important;
    width:auto!important;bottom:calc(16px + var(--m-safe-b))!important;
  }
  #contactsView:after{height:calc(96px + var(--m-safe-b))!important}

  /* Product List: responsive controls/header/cards. */
  body.productsMobilePage #productsView{min-width:0!important;width:100%!important;overflow-x:clip!important}
  #productsView .productMobileHeader{min-width:0!important;padding-left:max(8px,var(--m-safe-l))!important;padding-right:max(8px,var(--m-safe-r))!important}
  #productsView .productMobileHeaderTitle{min-width:0!important}
  #productsView .productMobileHeader h1{font-size:clamp(17px,5.2vw,22px)!important}
  #productsView .productMobileHeaderActions{min-width:0!important;gap:clamp(4px,2vw,12px)!important}
  #productsView .productMobileAddBtn{min-width:0!important;max-width:min(205px,48vw)!important;padding-left:clamp(7px,2.4vw,15px)!important;padding-right:clamp(7px,2.4vw,15px)!important;font-size:clamp(13px,4vw,18px)!important}
  #productsView .productMobileTools{padding-left:clamp(10px,4vw,15px)!important;padding-right:clamp(10px,4vw,15px)!important}
  #productsView .productMobileSearchRow{grid-template-columns:minmax(0,1fr) clamp(54px,16vw,70px)!important}
  #productsView .productMobileScanBtn{width:100%!important}
  #productsView .productMobileSearch input{font-size:clamp(16px,5vw,20px)!important}
  #productsView .productMobileFilterRow{grid-template-columns:minmax(0,1.45fr) minmax(76px,.85fr) clamp(48px,14vw,60px)!important}
  #productsView .productMobileRefresh{width:100%!important}
  #productsView .productMobileSelect select{font-size:clamp(13px,4vw,18px)!important}
  #productsView .productMobileCard{width:100%!important;min-width:0!important}
  #productsView .productMobileName{font-size:clamp(16px,4.8vw,19px)!important}
  #productsView .productMobilePrice{font-size:clamp(18px,5.2vw,21px)!important}

  /* Stock Khata: same adaptive system as Product List. */
  body.stockMobilePage #stockView{min-width:0!important;width:100%!important;overflow-x:clip!important;padding-bottom:calc(90px + var(--m-safe-b))!important}
  #stockView .stockMobileHeader{min-width:0!important;padding-left:max(8px,var(--m-safe-l))!important;padding-right:max(8px,var(--m-safe-r))!important}
  #stockView .stockMobileHeaderTitle{min-width:0!important}
  #stockView .stockMobileHeaderTitle h1{font-size:clamp(17px,5.2vw,23px)!important}
  #stockView .stockMobileHeaderActions{min-width:0!important;gap:clamp(4px,1.8vw,7px)!important}
  #stockView .stockMobileHeaderActions button{min-width:0!important;padding-left:clamp(6px,2.2vw,12px)!important;padding-right:clamp(6px,2.2vw,12px)!important;font-size:clamp(12px,3.8vw,16px)!important}
  #stockView .stockMobileSummaryPanel{margin-left:clamp(10px,4vw,16px)!important;margin-right:clamp(10px,4vw,16px)!important;padding:clamp(12px,4vw,19px)!important}
  #stockView .stockMobileMetric{min-width:0!important;height:clamp(92px,28vw,111px)!important}
  #stockView .stockMobileMetric strong{font-size:clamp(20px,6.4vw,26px)!important;overflow-wrap:anywhere!important}
  #stockView .stockMobileMetric span{font-size:clamp(15px,5vw,20px)!important}
  #stockView .stockMobileTools{padding-left:clamp(10px,4vw,16px)!important;padding-right:clamp(10px,4vw,16px)!important}
  #stockView .stockMobileSearchRow{grid-template-columns:minmax(0,1fr) clamp(54px,16vw,70px)!important}
  #stockView .stockMobileScanBtn{width:100%!important}
  #stockView .stockMobileSearch input{font-size:clamp(16px,5vw,20px)!important}
  #stockView .stockMobileFilterRow{grid-template-columns:minmax(0,1.45fr) minmax(76px,.85fr) clamp(48px,14vw,60px)!important}
  #stockView .stockMobileRefresh{width:100%!important}
  #stockView .stockMobileSelect select{font-size:clamp(13px,4vw,18px)!important}
  #stockView .stockMobileCard{width:100%!important;min-width:0!important}
  #stockView .stockMobileName{font-size:clamp(16px,4.8vw,19px)!important}
  #stockView .stockMobilePrice{font-size:clamp(18px,5.3vw,22px)!important}
  #stockView .stockMobileAdd{right:max(12px,var(--m-safe-r))!important;bottom:calc(14px + var(--m-safe-b))!important}
  #stockView .stockMobileEditBar{padding-left:max(12px,var(--m-safe-l))!important;padding-right:max(12px,var(--m-safe-r))!important;padding-bottom:calc(12px + var(--m-safe-b))!important}

  /* Date popovers and side panels stay inside the visual viewport. */
  .universalDatePopover{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 110px)!important;overflow:auto!important}
  .purchaseConfirmForm,.purchaseSupplierForm,.contactDrawerForm,.expenseRefForm{overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
}

/* Extra-small phones: reflow crowded headers/filters instead of squeezing. */
@media screen and (max-width:359px){
  .bizTopbar{height:68px!important;padding-left:7px!important;padding-right:7px!important}
  .mobileHeaderBrand img{width:92px!important}
  .topActions{gap:3px!important}
  .topActions>.topIcon{width:22px!important;height:22px!important}
  .topActions>.topIcon svg{width:21px!important;height:21px!important}
  .profileTopButton .avatar{width:32px!important;height:32px!important;font-size:15px!important}
  .profileTopButton .chev{font-size:20px!important}
  .summaryGrid{gap:9px!important}
  .summaryCard{height:92px!important;min-height:92px!important}

  #productsView .productMobileHeader,#stockView .stockMobileHeader{
    height:auto!important;min-height:72px!important;flex-wrap:wrap!important;align-content:center!important;padding-top:7px!important;padding-bottom:7px!important;
  }
  #productsView .productMobileHeaderTitle,#stockView .stockMobileHeaderTitle{flex:1 1 auto!important}
  #productsView .productMobileHeaderActions,#stockView .stockMobileHeaderActions{
    width:100%!important;flex:1 0 100%!important;justify-content:flex-end!important;margin-left:36px!important;
  }
  #productsView .productMobileHeaderActions button,#stockView .stockMobileHeaderActions button{height:42px!important}
  #productsView .productMobileAddBtn{max-width:none!important;flex:1!important}
  #stockView .stockMobileHeaderActions button{flex:1 1 0!important}

  #productsView .productMobileFilterRow,#stockView .stockMobileFilterRow{
    grid-template-columns:minmax(0,1fr) 54px!important;grid-auto-rows:auto!important;
  }
  #productsView .productMobileSortWrap,#stockView .stockMobileSortWrap{grid-column:1/-1!important}
  #productsView .productMobileStockWrap,#stockView .stockMobileStatusWrap{grid-column:1!important}
  #productsView .productMobileRefresh,#stockView .stockMobileRefresh{grid-column:2!important}
  #productsView .productMobileSelect,#stockView .stockMobileSelect{height:58px!important}
  #productsView .productMobileSelect select,#stockView .stockMobileSelect select{height:56px!important}
  #productsView .productMobileSelect:after,#stockView .stockMobileSelect:after{top:20px!important}
  #productsView .productMobileSortIcon,#stockView .stockMobileSortIcon{top:13px!important}
  #productsView .productMobileSearch,#productsView .productMobileScanBtn,
  #stockView .stockMobileSearch,#stockView .stockMobileScanBtn{height:58px!important}
  #productsView .productMobileSearch input,#stockView .stockMobileSearch input{height:54px!important}

  #contactsView .contactTabs{padding-left:10px!important;padding-right:10px!important;gap:14px!important}
  #contactsView .contactSearchRow{padding-left:12px!important;padding-right:12px!important}
  #contactsView #contactListBody.contactRows{padding-left:10px!important;padding-right:10px!important}

  #salesHistoryView .salesMobileCard,#purchaseHistoryView .purchaseMobileCard{
    grid-template-columns:minmax(0,1fr) 104px!important;padding-left:10px!important;padding-right:10px!important;
  }
}

/* Short landscape phones: keep controls compact and content scrollable. */
@media screen and (max-height:500px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .bizTopbar{position:sticky!important;height:58px!important}
  .mobileBottomNav{height:58px!important;padding-top:2px!important}
  .mobileBottomNav button{height:50px!important;font-size:11px!important}
  .mobileBottomNav .mbnPlus{width:42px!important;height:42px!important;margin-top:-20px!important;font-size:31px!important}
  .bizWorkspace{padding-bottom:66px!important}
  #contactsView .contactMobileHeader,#productsView .productMobileHeader,#stockView .stockMobileHeader{position:sticky!important;top:0!important;z-index:45!important}
  #stockView .stockMobileSummaryPanel{grid-template-columns:1fr 1fr!important}
  #stockView .stockMobileMetric{height:80px!important;gap:7px!important}
  #productsView .productMobileCard,#stockView .stockMobileCard{min-height:112px!important}
  .purchaseConfirmDrawer,.purchaseSupplierDrawer,.contactReferenceDrawer,#expenseDrawer.expenseRefDrawer{height:100dvh!important;max-height:100dvh!important}
}

/* v104.1 — intrinsic-width fixes found in multi-viewport checks */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  /* Access Management: absolute footer button must honor parent padding. */
  #accessView .accessBottom{left:12px!important;right:12px!important;width:auto!important;max-width:none!important;box-sizing:border-box!important}

  /* Marketing: prevent min-content sizing from widening the one-column grid. */
  #marketingView .marketingSplit{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  #marketingView .marketingContacts,#marketingView .marketingComposer,#marketingView .marketingTop,#marketingView .marketingSearch{min-width:0!important;width:100%!important;max-width:100%!important}
  #marketingView .marketingTop{flex-wrap:wrap!important}
  #marketingView .phoneAdd{grid-template-columns:minmax(0,1fr) 46px!important;min-width:0!important;flex:1 1 220px!important}
  #marketingView .marketingQuick{min-width:0!important;max-width:100%!important;flex:1 1 170px!important;text-align:left!important}
  #marketingView .marketingQuick>span{display:inline-block!important;margin:3px 4px 3px 0!important;white-space:normal!important}
  #marketingView .marketingQuick>div{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
  #marketingView .marketingQuick button{margin-left:0!important}

  /* Online shop: four desktop stats reflow on narrow phones. */
  #onlineShopView .onlineWrap{width:100%!important;max-width:100%!important;min-width:0!important}
  #onlineShopView .shopStats{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  #onlineShopView .shopStats article{min-width:0!important;overflow:hidden!important}
  #onlineShopView .shopStats article small,#onlineShopView .shopStats article b{overflow-wrap:anywhere!important}
  #onlineShopView .shopToolsTop{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #onlineShopView .shopToolGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Printer preview scales to phone width; print media remains unchanged. */
  #printerView .printerSplit{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  #printerView .receipt{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;padding:clamp(10px,4vw,22px)!important;box-sizing:border-box!important}
  #printerView .receiptBrand,#printerView .receiptMeta,#printerView .receipt table{width:100%!important;max-width:100%!important;min-width:0!important}
  #printerView .receiptMeta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  #printerView .receipt table{table-layout:fixed!important}
  #printerView .receipt th,#printerView .receipt td{overflow-wrap:anywhere!important;word-break:break-word!important}
}

@media screen and (max-width:359px){
  /* Keep the second-line header actions inside the phone width. */
  #productsView .productMobileHeaderActions,#stockView .stockMobileHeaderActions{
    width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:36px!important;box-sizing:border-box!important;
  }
}

/* v105: desktop Product List video-match interactions. Scoped to desktop Product List only. */
@media (min-width:701px){
  #productsView .productDesktopView{display:block}
  #productsView .productFilters{display:grid;grid-template-columns:minmax(260px,1.55fr) 44px minmax(150px,.85fr) minmax(95px,.55fr) 92px;gap:8px;align-items:center}
  #productsView .productFilters .searchBox{min-width:0}
  #productsView .productDesktopScanBtn{width:44px;min-width:44px;padding:0;display:grid;place-items:center}
  #productsView .productTablePanel{overflow:hidden}
  #productsView .productDesktopTable tbody tr.productDesktopRow{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}
  #productsView .productDesktopTable tbody tr.productDesktopRow:hover,
  #productsView .productDesktopTable tbody tr.productDesktopRow:focus-visible{background:#f1f2f4;outline:0;box-shadow:inset 3px 0 0 #111}
  #productsView .productDesktopTable td{vertical-align:middle}
  #productsView .productIconCell{gap:10px;min-width:0}
  #productsView .productIconCell strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #productsView .productDesktopThumb{width:31px;height:31px;border-radius:4px;display:grid;place-items:center;flex:0 0 31px;overflow:hidden;background:#f2f4f7;color:#40516a;font-size:25px}
  #productsView .productDesktopThumb img{width:100%;height:100%;object-fit:cover}
  #productsView .productDesktopCube{font-size:26px;line-height:1}
  #productsView .productRowAction{width:60px;text-align:right}
  #productsView .productDesktopDots{width:34px;height:34px;border:0;background:transparent;border-radius:6px;color:#344054;font-size:25px;line-height:1;cursor:pointer}
  #productsView .productDesktopDots:hover{background:#e9edf2}
  #productsView .productDesktopEmpty{text-align:center;height:82px;color:#98a2b3}
  #productsView .productTableFooter{height:32px;border-top:1px solid #e4e7ec;display:flex;align-items:center;justify-content:center;font-size:11px;color:#667085;background:#fff}
  #productsView .productTotal{margin:7px 0 5px;font-size:12px}
  #stockDetailsOverlay.productContext .stockDetailsModal{width:min(550px,calc(100vw - 40px))}
  #stockDetailsOverlay.productContext #stockDetailsName{display:flex;flex-direction:column;gap:2px;margin-top:5px}
  #stockDetailsOverlay.productContext #stockDetailsName b{font-size:12px;color:#465569}
  #stockDetailsOverlay.productContext #stockDetailsName small{font-size:11px;color:#667085}
  #stockDetailsOverlay.productContext .stockDetailsActions{grid-template-columns:1fr 1.15fr}
}
/* v107 — Product List action method from reference video. Desktop-only. */
@media (min-width:701px){
  #productsView .productDesktopRow{cursor:default!important}
  #productsView .productDesktopRow:hover{background:#f1f2f4}
  #productsView .productDesktopDots[aria-expanded="true"]{background:#e7eaee;color:#111}

  .productActionMenu{
    position:fixed;
    z-index:2147482500;
    width:172px;
    padding:7px;
    border:1px solid #dfe3e8;
    border-radius:6px;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.18);
    color:#344054;
    font-family:inherit;
    transform-origin:top right;
    animation:productActionMenuIn .12s ease-out both;
  }
  .productActionMenu[hidden]{display:none!important}
  .productActionMenuTitle{
    padding:3px 7px 7px;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    color:#475467;
  }
  .productActionMenu button{
    width:100%;
    min-height:32px;
    border:0;
    border-radius:4px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    color:#344054;
    text-align:left;
    cursor:pointer;
    font:inherit;
  }
  .productActionMenu button:hover,.productActionMenu button:focus-visible{background:#f2f4f7;outline:0}
  .productActionMenu button span{width:16px;display:grid;place-items:center;font-size:13px;color:#667085;flex:0 0 16px}
  .productActionMenu button b{font-size:10px;font-weight:700;line-height:1.25}
  .productActionMenu .productActionDelete,.productActionMenu .productActionDelete span{color:#ef4444}

  /* Edit Product uses the same rich right drawer as Add Product, preserving the real product data source. */
  .productAddOverlay.productEditContext .productAddSubmit{background:#111;border-color:#111;color:#fff}
  .productAddOverlay.productEditContext .productAddHeader h2{font-size:16px;font-weight:800}
  .productAddOverlay.productEditContext .productUploadBox{background:#fff}
}
@keyframes productActionMenuIn{
  from{opacity:0;transform:translateY(-3px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}


/* v108 — mobile Sell product-to-cart animation, fixed + runtime-visible */
.mobileSaleCartCount{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #salesView{padding-bottom:calc(144px + env(safe-area-inset-bottom,0px))!important}
  #salesView .purchaseProductItem{
    position:relative!important;
    overflow:visible!important;
    transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
    -webkit-tap-highlight-color:transparent;
  }
  #salesView .purchaseProductItem.mobileSalePicking{
    background:#eef5ff!important;
    box-shadow:inset 0 0 0 2px #246bfe,0 7px 18px rgba(36,107,254,.14)!important;
    transform:scale(.992)!important;
  }
  #salesView .purchaseProductItem.mobileSaleAdded{
    background:#ecfbf1!important;
    box-shadow:inset 0 0 0 1.5px #22a447,0 5px 14px rgba(34,164,71,.14)!important;
  }
  #salesView .purchaseProductItem.mobileSaleAdded::after{
    content:"✓";
    position:absolute;right:8px;top:7px;z-index:12;
    width:25px;height:25px;border-radius:50%;
    display:grid;place-items:center;
    background:#179a42;color:#fff;font:800 15px/1 Arial,sans-serif;
    box-shadow:0 3px 8px rgba(23,154,66,.28);
    animation:mobileSaleCheckIn .28s cubic-bezier(.2,.9,.3,1) both;
  }

  /* Fixed blue cart/total target, like the reference video. */
  #salesView .sellTotalBar{
    position:fixed!important;
    left:max(0px,env(safe-area-inset-left,0px))!important;
    right:max(0px,env(safe-area-inset-right,0px))!important;
    bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
    z-index:86!important;
    height:64px!important;min-height:64px!important;
    padding:0 12px!important;margin:0!important;
    display:flex!important;align-items:center!important;gap:6px!important;
    border:0!important;border-radius:0!important;
    background:#1760e8!important;color:#fff!important;
    box-shadow:0 -4px 18px rgba(15,55,145,.16)!important;
    box-sizing:border-box!important;
  }
  #salesView .sellTotalBar>span:first-child{font-size:0!important;color:#fff!important}
  #salesView .sellTotalBar>span:first-child::before{content:"সর্বমোট:";font-size:14px!important;font-weight:700!important}
  #salesView #saleDraftTotal{font-size:15px!important;font-weight:800!important;color:#fff!important}
  #salesView .mobileSaleCartCount{
    display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
    min-width:78px!important;height:44px!important;margin-left:auto!important;padding:0 12px!important;
    border-radius:7px!important;background:#fff!important;color:#111!important;
    box-shadow:0 2px 7px rgba(0,0,0,.16)!important;
    font:800 15px/1.1 Arial,sans-serif!important;
  }
  #salesView .mobileSaleCartCount b{font-size:24px;line-height:1;font-weight:500}
  #salesView .mobileSaleCartCount.mobileSaleCartPulse{animation:mobileSaleCartPulse .46s cubic-bezier(.2,.9,.3,1)!important}

  .mobileSaleFlyToken{
    position:fixed;z-index:2147483000;pointer-events:none;
    width:54px;height:54px;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(255,255,255,.98);
    border:2px solid rgba(36,107,254,.28);
    box-shadow:0 12px 30px rgba(36,107,254,.32),0 0 0 9px rgba(36,107,254,.09);
    transform:translate3d(-50%,-50%,0);
    will-change:transform,opacity;
    isolation:isolate;
  }
  .mobileSaleFlyToken::before,.mobileSaleFlyToken::after{
    content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(36,107,254,.18);z-index:-1;
    animation:mobileSaleRing 1s ease-out infinite;
  }
  .mobileSaleFlyToken::after{inset:-14px;animation-delay:.16s;opacity:.55}
  .mobileSaleFlyIcon{width:32px;height:32px;display:grid;place-items:center;color:#52606f}
  .mobileSaleFlyIcon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobileSaleFlyBadge{
    position:absolute;right:-6px;top:-6px;min-width:21px;height:21px;padding:0 4px;
    display:grid;place-items:center;border-radius:999px;background:#246bfe;color:#fff;
    border:2px solid #fff;font:800 10px/1 Arial,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.18);
  }
  body.mobileSaleAnimating #salesView .purchaseProductItem{pointer-events:none}
}
@keyframes mobileSaleCartPulse{
  0%{transform:scale(1)}
  38%{transform:scale(1.08);box-shadow:0 0 0 7px rgba(255,202,0,.26),0 3px 10px rgba(0,0,0,.18)}
  100%{transform:scale(1);box-shadow:0 2px 7px rgba(0,0,0,.16)}
}
@keyframes mobileSaleCheckIn{
  from{transform:scale(.35) rotate(-18deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}
@keyframes mobileSaleRing{
  0%{transform:scale(.72);opacity:.85}
  100%{transform:scale(1.35);opacity:0}
}
@media screen and (max-width:359px){
  #salesView .sellTotalBar{height:58px!important;min-height:58px!important;bottom:calc(58px + env(safe-area-inset-bottom,0px))!important;padding:0 9px!important}
  #salesView .mobileSaleCartCount{min-width:68px!important;height:40px!important;padding:0 9px!important}
  #salesView{padding-bottom:calc(126px + env(safe-area-inset-bottom,0px))!important}
}
@media screen and (max-height:500px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  #salesView .sellTotalBar{height:52px!important;min-height:52px!important;bottom:calc(58px + env(safe-area-inset-bottom,0px))!important}
  #salesView .mobileSaleCartCount{height:38px!important;min-width:64px!important}
  #salesView{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))!important}
}
@media (prefers-reduced-motion:reduce){
  .mobileSaleFlyToken{display:none!important}
  #salesView .purchaseProductItem,#salesView .mobileSaleCartCount{animation:none!important;transition:none!important}
}


/* v109 — Due -> Product Due -> Sell/Purchase target-video click flow */
.dueProductDirection[hidden]{display:none!important}
.dueProductDirection{margin:8px 0 12px;border-top:1px solid #eceff1;padding-top:10px}
.dueDirectionTitle{font-size:12px;font-weight:700;color:#667085;margin-bottom:8px}
.dueDirectionChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dueDirectionCard{height:58px;border:1px solid #d9dee5;border-radius:4px;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;cursor:pointer;color:#475467}
.dueDirectionCard input{width:17px;height:17px;accent-color:#111}
.dueDirectionCard b,.dueDirectionCard small{display:block}.dueDirectionCard small{font-size:10px;color:#98a2b3;margin-top:3px}
.dueDirectionCard.redTone:has(input:checked){border-color:#ff5f6d;box-shadow:0 0 0 1px #ff5f6d inset}
.dueDirectionCard.greenTone:has(input:checked){border-color:#55c976;box-shadow:0 0 0 1px #55c976 inset}

.saleDueOverlay{position:fixed;inset:0;z-index:10080;visibility:hidden;pointer-events:none}
.saleDueOverlay.open{visibility:visible;pointer-events:auto}
.saleDueScrim{position:absolute;inset:0;border:0;width:100%;height:100%;background:rgba(0,0,0,.38);opacity:0;transition:opacity .22s ease}
.saleDueOverlay.open .saleDueScrim{opacity:1}
.saleDueDrawer{position:absolute;right:0;top:0;width:min(555px,calc(100vw - 24px));height:100%;background:#fff;color:#344054;box-shadow:-6px 0 22px rgba(0,0,0,.18);transform:translateX(102%);transition:transform .3s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;overflow:hidden}
.saleDueOverlay.open .saleDueDrawer{transform:translateX(0)}
.saleDueHead{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eef0f2;position:relative;padding:0 46px}
.saleDueHead h2{margin:0;font-size:20px;font-weight:800;color:#344054}.saleDueHead>button{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;background:transparent;font-size:27px;cursor:pointer}
.saleDuePartyTabs{margin:10px 16px 0;height:42px;background:#d8d8d8;border-radius:4px;display:grid;grid-template-columns:1fr 1fr;padding:3px;flex:0 0 auto}
.saleDuePartyTabs button{border:0;background:transparent;color:#a2a2a2;font-weight:700}.saleDuePartyTabs button.active{background:#fff;color:#475467;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.saleDuePayable{margin:16px 16px 0;height:46px;display:flex;align-items:center;justify-content:center;background:#eee;border-radius:3px;font-size:15px;font-weight:700;flex:0 0 auto}.saleDuePayable strong{margin-left:5px}
.saleDueForm{padding:12px 16px 90px;overflow:auto;display:grid;gap:12px;font-size:12px;min-height:0}.saleDueForm>label,.saleDueForm #saleDueInvoiceField label,.saleDueEmployeeFields label{display:grid;gap:6px;font-weight:700}.saleDueForm input{height:42px;border:1px solid #d9dee5;border-radius:4px;padding:0 10px;font:inherit;color:#344054;background:#fff}.saleDueForm input:focus{outline:1px solid #111;border-color:#777}
.saleDueCustomerField,.saleDuePhoneField,.saleDueNoteField{height:42px;border:1px solid #d9dee5;border-radius:4px;display:flex;align-items:center;background:#fff}.saleDueCustomerField input,.saleDuePhoneField input,.saleDueNoteField input{height:38px!important;border:0!important;outline:0!important;flex:1;min-width:0}.saleDueCustomerField button,.saleDueNoteField button{width:42px;height:40px;border:0;background:transparent;font-size:22px;cursor:pointer}.saleDuePhoneField>span{padding:0 9px;border-right:1px solid #eceff1;white-space:nowrap}.saleDueError{display:block;color:#d84c5b;font-weight:600;font-size:11px;margin-top:-1px}.saleDueError[hidden]{display:none!important}.saleDueFileName{color:#667085;font-weight:600;min-height:12px}
.saleDueCustomerField{position:relative}.saleDueCustomerMenu{position:absolute;right:16px;top:auto;margin-top:2px;width:min(300px,calc(100vw - 50px));background:#fff;border:1px solid #d9dee5;border-radius:5px;box-shadow:0 10px 26px rgba(0,0,0,.18);z-index:5;padding:7px}.saleDueCustomerMenu[hidden]{display:none!important}.saleDueCustomerSearch{height:34px;border:1px solid #e2e5e9;border-radius:4px;display:flex;align-items:center;padding:0 7px;color:#98a2b3}.saleDueCustomerSearch input{height:30px!important;border:0!important;outline:0!important;flex:1}.saleDueCustomerResult{width:100%;border:0;background:#fff;text-align:left;padding:8px 10px;border-radius:3px;display:grid;gap:2px;cursor:pointer}.saleDueCustomerResult:hover{background:#f5f5f5}.saleDueCustomerResult b{font-size:12px}.saleDueCustomerResult small{color:#667085}.saleDueAddCustomer{width:100%;height:36px;border:0;background:#111;color:#fff;border-radius:4px;margin-top:5px;cursor:pointer}
.saleDueSwitch{display:flex!important;align-items:center!important;justify-content:space-between;grid-template-columns:none!important;min-height:38px;border-top:1px solid #f0f1f2;padding-top:6px}.saleDueSwitch input{position:absolute;opacity:0;width:1px;height:1px}.saleDueSwitch i{width:37px;height:21px;border-radius:999px;background:#94999f;position:relative;transition:.15s;margin-left:auto}.saleDueSwitch i:before{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.15s}.saleDueSwitch input:checked+i{background:#111}.saleDueSwitch input:checked+i:before{transform:translateX(16px)}
.saleDueEmployeeFields{display:grid;gap:10px}.saleDueEmployeeFields[hidden],#saleDueInvoiceField[hidden]{display:none!important}
.saleDueFooterBar{position:absolute;left:0;right:0;bottom:56px;height:48px;background:#fff;border-top:1px solid #e4e7eb;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px}.saleDueFooterBar .saleDueSwitch{border:0;padding:0;min-height:auto;justify-content:flex-start;gap:7px}.saleDueFooterBar .saleDueSwitch i{margin-left:0}.saleDueSmsRemain{color:#67b27a;font-size:11px;font-weight:700}.saleDueSubmit{position:absolute;left:16px;right:16px;bottom:10px;height:40px;border:0;border-radius:3px;background:#151515;color:#fff;font-weight:800;cursor:pointer}
@media(max-width:700px){.saleDueDrawer{width:100vw;max-width:100vw}.saleDuePartyTabs,.saleDuePayable{margin-left:12px;margin-right:12px}.saleDueForm{padding-left:12px;padding-right:12px}.saleDueCustomerMenu{left:12px;right:12px;width:auto}.dueDirectionChoices{grid-template-columns:1fr}}


/* v110 — Dashboard total-profit card + custom dashboard date range. */
.periodTabs{position:relative}
.homeDatePopover{position:absolute;right:0;top:44px;z-index:2600;width:360px;padding:14px;background:#fff;border:1px solid #d8dde3;border-radius:9px;box-shadow:0 10px 28px rgba(15,23,42,.18);display:grid;grid-template-columns:1fr 1fr;gap:12px;color:#43536b}
.homeDatePopover[hidden]{display:none!important}
.homeDatePopover label{display:grid;gap:7px;font-size:12px;font-weight:700}
.homeDatePopover input{width:100%;height:40px;border:1px solid #cfd5dc;border-radius:7px;background:#fff;color:#43536b;padding:0 10px;font:600 12px/1 inherit;outline:none}
.homeDatePopover input:focus{border-color:#22b85a;box-shadow:0 0 0 2px rgba(34,184,90,.10)}
.homeDateActions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.homeDateActions button{height:36px;min-width:74px;margin:0!important;border:1px solid #d3d7dc!important;border-radius:7px!important;background:#fff!important;color:#43536b!important;font-size:12px!important;font-weight:700!important}
#homeDateApply{border-color:#159447!important;background:#159447!important;color:#fff!important}
.profitCard{border-color:#8cddb0!important;background:linear-gradient(135deg,#f4fff8 0%,#eafff1 100%)!important}
.profitCard small{font-weight:700!important;color:#475569!important}
.profitCard strong{color:#0aa84f!important;font-weight:800!important}
.profitCard em{background-image:url("assets/ui/summary-sales.png")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;font-size:0!important}
@media (min-width:901px){
  #dashboardView .summaryGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #dashboardView .profitCard{grid-column:4;grid-row:1 / span 2;height:auto!important;min-height:152px;align-self:stretch;padding:18px 16px}
  #dashboardView .profitCard small{font-size:16px;margin-bottom:12px}
  #dashboardView .profitCard strong{font-size:30px;line-height:1.05}
  #dashboardView .profitCard em{right:16px;top:17px;width:24px;height:24px}
}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #dashboardView .profitCard{grid-column:1/-1!important;background:linear-gradient(135deg,#f4fff8 0%,#eafff1 100%)!important;border-color:#8cddb0!important}
  .homeDatePopover{position:fixed;left:12px;right:12px;top:148px;width:auto;grid-template-columns:1fr;z-index:5000}
  .homeDateActions{grid-column:1}
}

/* v111 — Product List desktop interaction/details fidelity to the supplied reference video. */
@media (min-width:701px){
  /* Reference hover is a quiet full-row gray highlight without layout/edge shifts. */
  #productsView .productDesktopTable tbody tr.productDesktopRow,
  #productsView .productDesktopRow{cursor:pointer!important}
  #productsView .productDesktopTable tbody tr.productDesktopRow:hover,
  #productsView .productDesktopTable tbody tr.productDesktopRow:focus-visible,
  #productsView .productDesktopRow:hover{background:#f1f2f4!important;box-shadow:none!important}
  #productsView .productDesktopDots{cursor:pointer}

  /* Product details: only the Product List context is changed; Stock page modal keeps its original styling/logic. */
  #stockDetailsOverlay.productContext{background:rgba(0,0,0,.36)}
  #stockDetailsOverlay.productContext .stockDetailsModal{
    width:min(590px,calc(100vw - 40px));
    max-height:min(690px,calc(100vh - 36px));
    border-radius:6px;
  }
  #stockDetailsOverlay.productContext .stockRefHead{
    min-height:54px;
    align-items:center;
    padding:10px 15px;
  }
  #stockDetailsOverlay.productContext .stockRefHead h2{font-size:18px;line-height:1.2}
  #stockDetailsOverlay.productContext #stockDetailsName{display:none!important}
  #stockDetailsOverlay.productContext .stockDetailsScroll{padding:0 15px 7px;scrollbar-width:thin;scrollbar-color:#a4a8ad transparent}
  #stockDetailsOverlay.productContext .stockDetailsScroll::-webkit-scrollbar{width:5px}
  #stockDetailsOverlay.productContext .stockDetailsScroll::-webkit-scrollbar-thumb{background:#a4a8ad;border-radius:10px}
  #stockDetailsOverlay.productContext .productDetailsIdentity{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #e7e9ed;
    margin-bottom:14px;
  }
  #stockDetailsOverlay.productContext .productDetailsIdentityThumb{
    width:36px;
    height:46px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:3px;
    color:#344054;
    font-size:30px;
  }
  #stockDetailsOverlay.productContext .productDetailsIdentityThumb img{width:100%;height:100%;object-fit:contain}
  #stockDetailsOverlay.productContext .productDetailsIdentity b{display:block;font-size:12px;color:#344054;line-height:1.25}
  #stockDetailsOverlay.productContext .productDetailsIdentity small{display:block;margin-top:4px;font-size:11px;color:#667085}
  #stockDetailsOverlay.productContext .stockDetailsGrid{gap:10px}
  #stockDetailsOverlay.productContext .stockDetailBox{min-height:64px;border-radius:5px;padding:8px 10px;background:#ededed}
  #stockDetailsOverlay.productContext .stockDetailBox small{font-size:10px;line-height:1.25}
  #stockDetailsOverlay.productContext .stockDetailBox strong{font-size:12px;line-height:1.25;color:#465569}
  #stockDetailsOverlay.productContext .stockDetailSection{margin:14px 0 8px;padding-top:10px}
  #stockDetailsOverlay.productContext .productDetailsBnTitle{text-transform:none;font-size:11px;color:#465569}
  #stockDetailsOverlay.productContext .stockDetailPlain{min-height:26px;margin:5px 0 10px;color:#465569}
  #stockDetailsOverlay.productContext .stockDetailImage{min-height:92px;margin:5px 0 2px;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
  #stockDetailsOverlay.productContext .stockDetailImage .stockDetailThumb{width:92px;height:92px;border-radius:6px;flex:0 0 92px}
  #stockDetailsOverlay.productContext .stockDetailsActions{padding:10px 14px;gap:14px;grid-template-columns:1fr 1fr}
  #stockDetailsOverlay.productContext .stockDetailsActions button{height:39px;border-radius:5px;font-size:11px}
  #stockDetailsOverlay.productContext .stockDeleteBtn{background:#ff5968}
  #stockDetailsOverlay.productContext .stockAdjustOpenBtn{background:#111}

  /* In the reference Edit Product flow current stock is shown but stock changes stay in the stock-update flow. */
  .productAddOverlay.productEditContext .productAddForm input[name="stock"][readonly]{background:#f7f7f8;color:#8b929b;cursor:default}
}

/* =========================================================
   v112 — ONLY: professional dashboard Profit Card + Marketing Banner Management.
   Existing dashboard cards/modules and Product List v111 behavior are untouched.
   ========================================================= */

/* Dashboard Profit Card — reference-style polish without invented comparison numbers. */
#dashboardView .profitCard{
  overflow:hidden!important;
  border:1px solid #7fdca7!important;
  background:linear-gradient(135deg,#f8fffb 0%,#effcf4 48%,#e9faef 100%)!important;
  box-shadow:0 5px 16px rgba(21,128,61,.10),inset 0 1px 0 rgba(255,255,255,.9)!important;
  border-radius:11px!important;
  color:#0f8f47!important;
}
#dashboardView .profitCard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 92% 15%,rgba(34,197,94,.09),transparent 28%);
}
#dashboardView .profitCardHead{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
#dashboardView .profitCard small{
  color:#40536b!important;font-weight:700!important;letter-spacing:0!important;
  min-width:0;max-width:calc(100% - 52px);white-space:normal!important;overflow-wrap:anywhere;
}
#dashboardView .profitCard strong{position:relative;z-index:2;color:#0aa84f!important;font-weight:850!important;letter-spacing:-.5px}
#dashboardView .profitTrendBadge{
  flex:0 0 auto;width:38px;height:31px;border-radius:999px;background:rgba(34,197,94,.11);color:#0ca84c;
  display:grid;place-items:center;font:800 22px/1 "Segoe UI Symbol","Segoe UI",sans-serif;box-shadow:inset 0 0 0 1px rgba(34,197,94,.06);
}
#dashboardView .profitSpark{position:absolute;right:17px;bottom:15px;height:52px;display:flex;align-items:flex-end;gap:6px;opacity:.24;pointer-events:none}
#dashboardView .profitSpark i{display:block;width:9px;border-radius:999px 999px 2px 2px;background:linear-gradient(180deg,#22c55e,#86efac)}
#dashboardView .profitSpark i:nth-child(1){height:15px}#dashboardView .profitSpark i:nth-child(2){height:23px}#dashboardView .profitSpark i:nth-child(3){height:31px}#dashboardView .profitSpark i:nth-child(4){height:40px}#dashboardView .profitSpark i:nth-child(5){height:50px}
@media (min-width:901px){
  #dashboardView .profitCard{padding:18px 18px!important;min-height:152px!important}
  #dashboardView .profitCard small{font-size:16px!important;line-height:1.25!important;margin:1px 0 12px!important}
  #dashboardView .profitCard strong{font-size:34px!important;line-height:1.05!important;margin-top:5px}
}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #dashboardView .profitCard{grid-column:1/-1!important;height:100px!important;min-height:100px!important;padding:14px 14px!important;border-radius:11px!important}
  #dashboardView .profitCard small{font-size:15px!important;line-height:19px!important;margin:0 0 8px!important;max-width:calc(100% - 50px)!important}
  #dashboardView .profitCard strong{font-size:25px!important;line-height:1!important}
  #dashboardView .profitTrendBadge{width:34px;height:28px;font-size:20px}
  #dashboardView .profitSpark{right:14px;bottom:12px;height:36px;gap:4px}
  #dashboardView .profitSpark i{width:6px}#dashboardView .profitSpark i:nth-child(1){height:10px}#dashboardView .profitSpark i:nth-child(2){height:15px}#dashboardView .profitSpark i:nth-child(3){height:21px}#dashboardView .profitSpark i:nth-child(4){height:27px}#dashboardView .profitSpark i:nth-child(5){height:34px}
}

/* Home banner remains the existing viewport, now fed by Banner Management. */
.homeSlideshow[hidden]{display:none!important}
.homeSlide img{object-fit:cover!important;object-position:center center!important}
.homeBannerOverlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding:clamp(14px,3vw,44px);pointer-events:none;background:linear-gradient(90deg,rgba(8,15,28,.56) 0%,rgba(8,15,28,.18) 46%,transparent 72%)}
.homeBannerCopy{max-width:min(540px,58%);display:grid;gap:8px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28)}
.homeBannerCopy strong{font-size:clamp(18px,2.4vw,34px);line-height:1.12;font-weight:800}
.homeBannerCopy span{font-size:clamp(11px,1.25vw,17px);line-height:1.4;font-weight:500}
.homeBannerCopy a{pointer-events:auto;width:max-content;max-width:100%;margin-top:3px;padding:8px 16px;border-radius:999px;background:#fff;color:#111827;text-decoration:none;font-weight:800;font-size:12px;text-shadow:none;box-shadow:0 4px 12px rgba(0,0,0,.18)}
@media screen and (max-width:700px){
  .homeBannerOverlay{padding:10px 12px;background:linear-gradient(90deg,rgba(8,15,28,.55),rgba(8,15,28,.08) 72%,transparent)}
  .homeBannerCopy{max-width:65%;gap:3px}.homeBannerCopy strong{font-size:12px}.homeBannerCopy span{font-size:9px;line-height:1.25}.homeBannerCopy a{font-size:9px;padding:4px 8px;margin-top:1px}
}

/* Marketing -> Banner Management */
.marketingModeTabs{display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;margin:10px 0 16px;padding:4px;border:1px solid #e1e5ea;border-radius:9px;background:#eef1f4}
.marketingModeTabs button{height:35px;padding:0 15px;border:0;border-radius:6px;background:transparent;color:#64748b;font-size:12px;font-weight:700;white-space:nowrap}
.marketingModeTabs button.active{background:#fff;color:#1f2937;box-shadow:0 1px 4px rgba(15,23,42,.10)}
#marketingSmsPanel[hidden],#bannerManagementPanel[hidden]{display:none!important}
.bannerManager{width:100%;min-width:0;padding-bottom:30px}
.bannerManagerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.bannerManagerHead h2{margin:0 0 4px;color:#26364a;font-size:20px;line-height:1.2}.bannerManagerHead p{margin:0;color:#7a8798;font-size:12px;line-height:1.5}.bannerAddBtn{flex:0 0 auto;height:39px;padding:0 15px}
.bannerGlobalSettings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:18px}
.bannerGlobalSettings>label{min-height:76px;border:1px solid #e1e5ea;border-radius:10px;background:#fff;padding:14px 15px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.bannerSettingSwitch,.bannerDurationSetting{display:flex;align-items:center;justify-content:space-between;gap:16px}.bannerSettingSwitch>span,.bannerDurationSetting>span:first-child{display:grid;gap:4px;min-width:0}.bannerSettingSwitch b,.bannerDurationSetting b{font-size:13px;color:#334155}.bannerSettingSwitch small,.bannerDurationSetting small{font-size:11px;color:#8a96a6;font-weight:500}
.bannerSettingSwitch input{position:absolute;opacity:0;width:1px;height:1px}.bannerSettingSwitch i{position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:#c7ced7;transition:.18s}.bannerSettingSwitch i::before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.18s}.bannerSettingSwitch input:checked+i{background:#18a957}.bannerSettingSwitch input:checked+i::before{transform:translateX(18px)}
.bannerDurationInput{display:flex!important;align-items:center!important;gap:0!important;height:38px;border:1px solid #d6dce3;border-radius:7px;background:#fff;overflow:hidden;min-width:120px}.bannerDurationInput input{width:76px!important;height:36px!important;border:0!important;padding:0 8px!important;text-align:center;background:transparent}.bannerDurationInput em{height:36px;display:flex;align-items:center;padding:0 9px;border-left:1px solid #e2e6eb;color:#68768a;font-size:11px;font-style:normal;background:#f8fafc}
.bannerListHead{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;color:#334155}.bannerListHead>span{font-size:14px;font-weight:800}.bannerListHead small{color:#8792a2;font-size:11px}.bannerList{display:grid;gap:8px}
.bannerListItem{display:grid;grid-template-columns:170px minmax(170px,1fr) auto auto;align-items:center;gap:14px;min-height:96px;padding:10px 12px;border:1px solid #e2e6eb;border-radius:10px;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.035)}
.bannerThumb{width:170px;aspect-ratio:4.85/1;border-radius:7px;overflow:hidden;background:#f1f3f5;border:1px solid #e5e7eb;display:grid;place-items:center;color:#94a3b8;font-size:11px}.bannerThumb img{width:100%;height:100%;object-fit:cover;display:block}.bannerListInfo{display:grid;grid-template-columns:max-content 1fr;grid-template-areas:"name name" "meta status";align-items:center;gap:5px 9px;min-width:0}.bannerListInfo strong{grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155;font-size:13px}.bannerListInfo small{grid-area:meta;color:#8491a3;font-size:11px}.bannerStatus{grid-area:status;width:max-content;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800}.bannerStatus.active{color:#0b8c42;background:#e7f9ee}.bannerStatus.inactive{color:#6b7280;background:#eef0f2}
.bannerOrderActions{display:flex;gap:5px}.bannerOrderActions button{width:32px;height:32px;border:1px solid #dce1e6;border-radius:6px;background:#fff;color:#536174;font-size:16px}.bannerOrderActions button:disabled{opacity:.35;cursor:default}.bannerRowActions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.bannerRowActions button{height:32px;padding:0 9px;font-size:11px;border-radius:6px}.bannerDeleteBtn{border:1px solid #ffd0d0;background:#fff6f6;color:#d63838}.bannerToggleBtn{min-width:62px}.bannerEmptyState{min-height:150px;border:1px dashed #d7dde4;border-radius:10px;background:#fafbfc;display:grid;place-items:center;align-content:center;gap:5px;color:#7c899a;text-align:center}.bannerEmptyState b{color:#4d5b6d;font-size:14px}.bannerEmptyState span{font-size:11px}

/* Add/Edit banner drawer */
body.bannerOverlayOpen{overflow:hidden!important}
.bannerDrawerOverlay,.bannerModalOverlay{position:fixed;inset:0;z-index:6100;visibility:hidden;pointer-events:none}.bannerDrawerOverlay.open,.bannerModalOverlay.open{visibility:visible;pointer-events:auto}.bannerDrawerScrim,.bannerModalScrim{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(15,23,42,.42);opacity:0;transition:opacity .18s ease}.bannerDrawerOverlay.open .bannerDrawerScrim,.bannerModalOverlay.open .bannerModalScrim{opacity:1}
.bannerDrawer{position:absolute;right:0;top:0;width:min(510px,94vw);height:100%;background:#fff;box-shadow:-12px 0 32px rgba(15,23,42,.18);transform:translateX(104%);transition:transform .24s cubic-bezier(.22,.61,.36,1);overflow:hidden}.bannerDrawerOverlay.open .bannerDrawer{transform:translateX(0)}.bannerDrawer form{height:100%;display:flex;flex-direction:column;min-height:0}.bannerDrawerHeader{flex:0 0 auto;min-height:68px;padding:13px 17px;border-bottom:1px solid #e6e9ed;display:flex;align-items:center;justify-content:space-between;gap:12px}.bannerDrawerHeader h2{margin:0 0 2px;color:#26364a;font-size:18px}.bannerDrawerHeader small{color:#8a96a6;font-size:11px}.bannerDrawerClose{width:36px;height:36px;border:0;border-radius:7px;background:#f3f5f7;color:#536174;font-size:24px;line-height:1}
.bannerDrawerBody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 17px 22px;display:grid;align-content:start;gap:13px}.bannerField{display:grid;gap:6px;color:#435268;font-size:12px;font-weight:700}.bannerField>span small{color:#929dad;font-weight:500}.bannerField input,.bannerField textarea{width:100%;border:1px solid #d7dde4;border-radius:7px;background:#fff;color:#334155;padding:9px 10px;font-size:12px;font-weight:500;resize:vertical}.bannerField input{height:40px}.bannerField textarea{min-height:76px}.bannerField input:focus,.bannerField textarea:focus{border-color:#21ad5d;box-shadow:0 0 0 2px rgba(33,173,93,.09)}.bannerFieldGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bannerImagePreview{width:100%;aspect-ratio:4.85/1;min-height:105px;border:1px dashed #cfd6de;border-radius:9px;background:#f8fafb;overflow:hidden;display:grid;place-items:center;color:#8a96a6;font-size:11px;text-align:center;padding:10px}.bannerImagePreview.hasImage{padding:0;border-style:solid}.bannerImagePreview img{width:100%;height:100%;object-fit:cover;display:block}.bannerActiveField{min-height:66px;padding:12px 13px;border:1px solid #e0e5ea;border-radius:9px;background:#fbfcfd}.bannerDrawerFooter{flex:0 0 auto;display:flex;justify-content:flex-end;gap:8px;padding:12px 17px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e5e8ec;background:#fff;box-shadow:0 -5px 14px rgba(15,23,42,.035)}.bannerDrawerFooter button{min-width:105px;height:39px;border-radius:7px}

/* Preview + delete confirmation */
.bannerPreviewModal,.bannerDeleteModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(15,23,42,.24);transition:.18s ease}.bannerModalOverlay.open .bannerPreviewModal,.bannerModalOverlay.open .bannerDeleteModal{transform:translate(-50%,-50%) scale(1);opacity:1}.bannerPreviewModal{width:min(900px,calc(100vw - 36px));overflow:hidden}.bannerPreviewModal>header{min-height:58px;padding:11px 14px;border-bottom:1px solid #e5e8ec;display:flex;align-items:center;justify-content:space-between;gap:12px}.bannerPreviewModal h2{margin:0;color:#334155;font-size:16px}.bannerPreviewModal header small{display:block;margin-top:2px;color:#8b96a6;font-size:10px}.bannerPreviewModal header button{width:34px;height:34px;border:0;border-radius:7px;background:#f2f4f6;font-size:22px;color:#566376}.bannerPreviewStage{padding:14px;background:#f5f7f9}.bannerPreviewCanvas{position:relative;width:100%;aspect-ratio:4.85/1;overflow:hidden;border-radius:9px;background:#fff;border:1px solid #dce1e6}.bannerPreviewCanvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.bannerPreviewCanvas .homeBannerOverlay{border-radius:9px}
.bannerDeleteModal{width:min(410px,calc(100vw - 34px));padding:22px}.bannerDeleteModal h2{margin:0 0 8px;color:#26364a;font-size:18px}.bannerDeleteModal p{min-height:18px;margin:0 0 20px;color:#7a8798;font-size:12px}.bannerDeleteModal>div{display:flex;justify-content:flex-end;gap:8px}.bannerDeleteModal button{height:38px;min-width:92px;border-radius:7px}.bannerDangerBtn{border:1px solid #d82d2d;background:#dc3333;color:#fff;font-weight:700}

@media(max-width:1100px){
  .bannerListItem{grid-template-columns:145px minmax(140px,1fr) auto}.bannerThumb{width:145px}.bannerRowActions{grid-column:2/-1;justify-content:flex-start}
}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #marketingView{padding:14px!important}.marketingModeTabs{width:100%;display:grid;grid-template-columns:1fr 1fr}.marketingModeTabs button{min-width:0;padding:0 6px;font-size:11px}
  .bannerManagerHead{align-items:stretch;flex-direction:column}.bannerAddBtn{width:100%}.bannerGlobalSettings{grid-template-columns:1fr}.bannerGlobalSettings>label{min-height:70px}
  .bannerListItem{grid-template-columns:108px minmax(0,1fr);gap:10px;padding:9px}.bannerThumb{width:108px}.bannerOrderActions{grid-column:1}.bannerRowActions{grid-column:2;justify-content:flex-start}.bannerRowActions button{flex:0 0 auto}.bannerListInfo{grid-template-columns:1fr}.bannerListInfo strong{white-space:normal;line-height:1.25}
  .bannerDrawer{width:100vw;max-width:100vw}.bannerFieldGrid{grid-template-columns:1fr}.bannerDrawerBody{padding-left:14px;padding-right:14px}.bannerPreviewStage{padding:8px}.bannerPreviewCanvas{aspect-ratio:3.4/1}
}

/* =========================================================
   v113 — Access Management reference UI + responsive behavior
   Scope: #accessView only. Other pages/navigation are untouched.
   ========================================================= */
#accessView{padding-top:20px;color:#173057}
#accessView .accessPageHead{margin:0 0 24px;padding:0 2px}
#accessView .accessPageHead h1{margin:0 0 6px;font-size:30px;line-height:1.15;font-weight:900;color:#173057;letter-spacing:-.3px}
#accessView .accessPageHead p{margin:0;color:#718096;font-size:14px;line-height:1.5}
#accessView .accessRefGrid{display:grid;grid-template-columns:minmax(330px,38%) minmax(0,1fr);gap:18px;min-height:620px}
#accessView .accessRefPanel{background:#fff;border:1px solid #e1e7ef;border-radius:12px;box-shadow:0 2px 10px rgba(16,24,40,.04);min-width:0}
#accessView .accessUsersPanel{display:flex;flex-direction:column;padding:22px 22px 20px}
#accessView .accessUsersTitle{font-size:18px;font-weight:800;color:#173057;margin-bottom:18px}
#accessView .accessUsersTitle span{font-weight:700;color:#173057}
#accessView .accessUsersList{display:grid;gap:8px;align-content:start;overflow:auto;max-height:520px;padding-right:2px}
#accessView .accessUserItem{width:100%;min-height:86px;border:1px solid #e5eaf1;border-radius:10px;background:#fff;padding:12px 15px;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:center;gap:12px;text-align:left;color:#173057;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;cursor:pointer;position:relative}
#accessView .accessUserItem:hover{background:#f8fbff;border-color:#d7e4f4}
#accessView .accessUserItem.active{background:linear-gradient(90deg,#eef7ff 0%,#f7fbff 100%);border-color:#d5e7fa;box-shadow:inset 3px 0 0 #1688f8}
#accessView .accessUserItem:focus-visible{outline:2px solid #1688f8;outline-offset:2px}
#accessView .accessAvatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#dcebff,#edf5ff);color:#1977dd;font-size:16px;font-weight:800;flex:0 0 auto;border:1px solid #d7e9fb}
#accessView .accessUserItem:nth-child(3n+2) .accessAvatar{background:linear-gradient(145deg,#efe4ff,#f7f0ff);color:#7c4bd8;border-color:#eadcff}
#accessView .accessUserItem:nth-child(3n) .accessAvatar{background:linear-gradient(145deg,#dcf6e7,#effbf4);color:#2b8b59;border-color:#d5f0e0}
#accessView .accessAvatarLarge{width:64px;height:64px;font-size:18px}
#accessView .accessUserText{min-width:0;display:grid;gap:5px}
#accessView .accessUserNameLine,#accessView .accessNameLine{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
#accessView .accessUserNameLine b{font-size:15px;font-weight:800;color:#0f2444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#accessView .accessUserText>span,#accessView .accessSelectedIdentity>div>span{font-size:13px;color:#718096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#accessView .accessRoleBadge{display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 9px;border-radius:7px;background:#ddebff;color:#2874c7;font-size:11px;line-height:1;font-weight:800;letter-spacing:.15px;white-space:nowrap;text-transform:uppercase}
#accessView .accessRoleBadge.owner{background:#ffe0bb;color:#8b4c16}
#accessView .accessUserArrow{color:#47759c;font-size:25px;line-height:1;font-weight:300;text-align:center}
#accessView .accessAddUserBtn{margin-top:auto;width:100%;height:54px;border:0;border-radius:9px;background:linear-gradient(135deg,#103d73,#1b568f);color:#fff;font-size:15px;font-weight:800;box-shadow:0 5px 13px rgba(18,61,112,.14)}
#accessView .accessAddUserBtn:hover{filter:brightness(1.04)}
#accessView .accessDetailPanel{padding:26px 28px 22px;display:flex;flex-direction:column;min-height:620px}
#accessView .accessDetailHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:22px;border-bottom:1px solid #e4e9f0}
#accessView .accessSelectedIdentity{display:flex;align-items:center;gap:16px;min-width:0}
#accessView .accessSelectedIdentity>div{min-width:0;display:grid;gap:7px}
#accessView .accessNameLine b{font-size:18px;line-height:1.2;font-weight:900;color:#10284b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#accessView .accessDetailActions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
#accessView .accessRefreshBtn,#accessView .accessEditRoleBtn{height:42px;border:1px solid #dce3ec;border-radius:9px;background:#fbfcfe;color:#173057;font-weight:800}
#accessView .accessRefreshBtn{width:42px;padding:0;font-size:20px}
#accessView .accessEditRoleBtn{padding:0 15px;font-size:13px}
#accessView .accessRefreshBtn:hover,#accessView .accessEditRoleBtn:hover{background:#f3f7fb;border-color:#cbd7e5}
#accessView .accessOwnerInfo{margin:14px 0 0;padding:10px 13px;border:1px solid #dbeafe;border-radius:8px;background:#f4f9ff;color:#4a688b;font-size:12px;line-height:1.5}
#accessView .accessPermissionIntro{padding:21px 0 11px}
#accessView .accessPermissionIntro h2{margin:0 0 4px;font-size:18px;color:#173057;font-weight:900}
#accessView .accessPermissionIntro p{margin:0;color:#7a889d;font-size:12px}
#accessView .accessPermissionList{display:grid}
#accessView .accessPermissionRow{min-height:50px;border-bottom:1px solid #edf0f4;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;color:#173057}
#accessView .accessPermissionIcon{width:26px;height:26px;display:grid;place-items:center;color:#12355f;font-size:17px}
#accessView .accessPermissionLabel{font-size:14px;font-weight:700;color:#18365f}
#accessView .accessPermissionRow small{display:block;margin-top:2px;color:#8290a3;font-size:10px;font-weight:500}
#accessView .accessSwitch{position:relative;width:45px;height:25px;display:inline-block;flex:0 0 auto}
#accessView .accessSwitch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
#accessView .accessSwitch i{position:absolute;inset:0;border-radius:999px;background:#d6dde7;transition:background .18s ease;box-shadow:inset 0 0 0 1px rgba(16,24,40,.05);pointer-events:none}
#accessView .accessSwitch i:after{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(16,24,40,.22);transition:transform .18s ease}
#accessView .accessSwitch input:checked+i{background:#1688f8}
#accessView .accessSwitch input:checked+i:after{transform:translateX(20px)}
#accessView .accessSwitch input:focus-visible+i{outline:2px solid #1688f8;outline-offset:2px}
#accessView .accessSwitch input:disabled{cursor:not-allowed}#accessView .accessSwitch input:disabled+i{opacity:.62}
#accessView .accessOwnerFooter{margin-top:auto;border-radius:9px;background:#eef7ff;color:#336ca3;padding:12px 14px;font-size:12px;font-weight:600;line-height:1.45}
#accessView .accessEmpty{min-height:150px;display:grid;place-items:center;text-align:center;color:#8090a5;font-size:13px;border:1px dashed #dce4ee;border-radius:10px;background:#fbfcfe}

#accessView .accessDrawerOverlay,#accessView .accessRoleOverlay{position:fixed;inset:0;z-index:1500;visibility:hidden;pointer-events:none}
#accessView .accessDrawerOverlay.open,#accessView .accessRoleOverlay.open{visibility:visible;pointer-events:auto}
#accessView .accessOverlayScrim{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:rgba(15,23,42,.40);opacity:0;transition:opacity .18s ease;padding:0}
#accessView .accessDrawerOverlay.open .accessOverlayScrim,#accessView .accessRoleOverlay.open .accessOverlayScrim{opacity:1}
#accessView .accessUserDrawer{position:absolute;right:0;top:0;width:min(460px,calc(100vw - 24px));height:100vh;background:#fff;box-shadow:-10px 0 30px rgba(15,23,42,.14);transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
#accessView .accessDrawerOverlay.open .accessUserDrawer{transform:translateX(0)}
#accessView .accessDrawerHead,#accessView .accessRoleHead{height:70px;min-height:70px;border-bottom:1px solid #edf0f4;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
#accessView .accessDrawerHead h2,#accessView .accessRoleHead h2{margin:0;font-size:18px;font-weight:900;color:#173057}
#accessView .accessDrawerHead button,#accessView .accessRoleHead button{width:36px;height:36px;border:0;background:#f4f6f8;border-radius:50%;font-size:22px;color:#5f7087;padding:0}
#accessView .accessUserForm{padding:24px;display:flex;flex:1;flex-direction:column;gap:18px;min-height:0;overflow:auto;height:auto}
#accessView .accessUserForm label,#accessView .accessRoleModal form label{display:grid;gap:7px;color:#344b68;font-size:12px;font-weight:700}
#accessView .accessUserForm input,#accessView .accessRoleModal input{height:44px;border:1px solid #d8e0ea;border-radius:8px;background:#fff;padding:0 12px;color:#173057;font-size:14px;font-weight:600;transition:border-color .15s ease,box-shadow .15s ease}
#accessView .accessUserForm input:focus,#accessView .accessRoleModal input:focus{border-color:#1688f8;box-shadow:0 0 0 3px rgba(22,136,248,.10)}
#accessView .accessFormHint{border:1px solid #e5ebf2;border-radius:8px;background:#f8fafc;color:#718096;font-size:11px;line-height:1.55;padding:11px 12px}
#accessView .accessDrawerFooter{margin-top:auto;display:flex;gap:10px;padding-top:12px}
#accessView .accessDrawerFooter button,#accessView .accessRoleFooter button{height:44px;border-radius:8px;font-size:13px;font-weight:800}
#accessView .accessCancelBtn{flex:1;background:#fff;border:1px solid #d8e0ea;color:#52637a}
#accessView .accessSaveBtn{flex:1;background:#123f74;border:1px solid #123f74;color:#fff}
#accessView .accessRoleModal{position:absolute;width:min(430px,calc(100vw - 28px));left:50%;top:50%;transform:translate(-50%,-46%);background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(15,23,42,.24);opacity:0;transition:opacity .18s ease,transform .18s ease;overflow:hidden}
#accessView .accessRoleOverlay.open .accessRoleModal{opacity:1;transform:translate(-50%,-50%)}
#accessView .accessRoleModal form{padding:22px 24px 24px}
#accessView .accessRoleModal form>p{margin:10px 0 0;color:#7d8ba0;font-size:11px;line-height:1.5}
#accessView .accessRoleFooter{display:flex;gap:10px;margin-top:22px}
body.accessDialogOpen{overflow:hidden}

@media(max-width:1100px){
  #accessView .accessRefGrid{grid-template-columns:minmax(300px,40%) minmax(0,1fr)}
  #accessView .accessDetailPanel{padding:22px 22px 18px}
  #accessView .accessDetailHead{align-items:center}
  #accessView .accessDetailActions{flex-direction:column-reverse;align-items:stretch}
  #accessView .accessEditRoleBtn{white-space:nowrap}
}
@media(max-width:900px){
  #accessView{padding-top:14px}
  #accessView .accessPageHead h1{font-size:25px}
  #accessView .accessRefGrid{grid-template-columns:1fr;min-height:0;gap:12px}
  #accessView .accessUsersPanel,#accessView .accessDetailPanel{min-height:0}
  #accessView .accessUsersList{max-height:none}
  #accessView .accessAddUserBtn{margin-top:16px}
  #accessView .accessDetailActions{flex-direction:row}
}
@media(max-width:560px){
  #accessView .accessPageHead{margin-bottom:16px}
  #accessView .accessPageHead h1{font-size:23px}
  #accessView .accessPageHead p{font-size:12px}
  #accessView .accessUsersPanel{padding:16px 14px}
  #accessView .accessUsersTitle{font-size:16px;margin-bottom:12px}
  #accessView .accessUserItem{min-height:76px;padding:10px 11px;grid-template-columns:42px minmax(0,1fr) 18px}
  #accessView .accessAvatar{width:42px;height:42px;font-size:14px}
  #accessView .accessDetailPanel{padding:18px 14px}
  #accessView .accessDetailHead{align-items:flex-start;flex-direction:column}
  #accessView .accessAvatarLarge{width:54px;height:54px}
  #accessView .accessNameLine b{font-size:16px}
  #accessView .accessDetailActions{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr)}
  #accessView .accessRefreshBtn{width:44px}
  #accessView .accessPermissionRow{min-height:52px}
  #accessView .accessPermissionLabel{font-size:13px}
  #accessView .accessUserDrawer{width:100vw;max-width:none}
  #accessView .accessDrawerHead,#accessView .accessRoleHead{padding:0 16px}
  #accessView .accessUserForm,#accessView .accessRoleModal form{padding-left:16px;padding-right:16px}
}
@media screen and (min-device-width:901px){
  /* The project intentionally renders desktop at html zoom:1.25. Counter only the drawer height so it remains viewport-full. */
  #accessView .accessUserDrawer{height:80vh}
}

/* Contact add/edit drawer — reference-aligned desktop styling */
@media (min-width: 901px){
  .contactDrawerScrim{background:rgba(0,0,0,.38)!important;backdrop-filter:none!important}
  .contactReferenceDrawer{width:552px!important;max-width:552px!important;background:#fff!important;box-shadow:-10px 0 28px rgba(0,0,0,.18)!important;border-left:1px solid #eceff3!important}
  .contactReferenceDrawer.open{grid-template-rows:58px minmax(0,1fr)!important}
  .contactDrawerHead{height:58px!important;padding:0 62px!important;border-bottom:0!important;justify-content:center!important;background:#fff!important}
  .contactDrawerHead h2{font-size:21px!important;line-height:1.2!important;font-weight:800!important;color:#465569!important;letter-spacing:-.2px!important}
  .contactDrawerHead button{right:13px!important;top:8px!important;width:38px!important;height:38px!important;font-size:27px!important;line-height:38px!important;color:#222!important}
  .contactDrawerForm{padding:8px 28px 22px!important;gap:13px!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable;background:#fff!important}
  .contactPhotoWrap{margin:0 0 12px!important;min-height:126px!important;align-items:flex-start!important}
  .contactPhotoPicker{gap:8px!important;font-size:12px!important;font-weight:700!important;color:#1467d8!important}
  .contactPhotoPreview{width:92px!important;height:92px!important;background:linear-gradient(#c9c9c9 0 44%,#686868 45% 100%)!important;box-shadow:0 0 0 1px #d9dde2!important}
  .contactPhotoPreview:before{width:30px!important;height:30px!important;left:31px!important;top:15px!important;background:#666!important}
  .contactPhotoPreview:after{width:66px!important;height:34px!important;left:13px!important;background:#666!important}
  .contactDrawerForm label{gap:7px!important;font-size:12px!important;font-weight:800!important;color:#20242a!important}
  .contactDrawerForm input{height:42px!important;border:1px solid #d8dce1!important;border-radius:6px!important;padding:0 12px!important;font-size:12px!important;background:#fff!important;color:#3f4b59!important;box-shadow:none!important}
  .contactDrawerForm input::placeholder{color:#aab1bb!important;opacity:1!important}
  .contactPhoneField{height:42px!important;border:1px solid #d8dce1!important;border-radius:6px!important;grid-template-columns:47px 42px minmax(0,1fr)!important;background:#fff!important;overflow:hidden!important}
  .contactPhoneField input{height:40px!important;border:0!important;padding-left:5px!important;border-radius:0!important}
  .contactPhonePrefix{height:40px!important;display:grid!important;place-items:center!important;border-right:1px solid #e4e7eb!important;font-size:12px!important}
  .contactPhoneCode{font-size:12px!important;color:#667085!important;text-align:center!important}
  .contactDrawerSpacer{min-height:72px!important;flex:1 0 72px!important}
  .contactDrawerForm .blackBtn{position:sticky!important;bottom:0!important;z-index:3!important;height:38px!important;min-height:38px!important;flex:0 0 38px!important;border-radius:4px!important;font-size:12px!important;font-weight:800!important;margin-top:7px!important;box-shadow:0 -16px 0 #fff,0 -17px 0 #ececec!important}
}
@media (max-width: 900px){
  .contactReferenceDrawer{width:100%!important;max-width:100vw!important}
  .contactDrawerHead h2{font-size:20px!important}
  .contactPhotoPreview{width:84px!important;height:84px!important}
}


/* v115 — Contact drawer: fixed Save footer exactly like the approved reference */
.contactReferenceDrawer.open{grid-template-rows:58px minmax(0,1fr) auto!important}
.contactDrawerForm{min-height:0!important;padding-bottom:18px!important}
.contactDrawerSpacer{display:none!important}
.contactDrawerFooter{background:#fff;border-top:1px solid #e6e8eb;padding:12px 20px 16px;flex:0 0 auto;z-index:4}
.contactDrawerFooter #contactSaveBtn{position:static!important;width:100%!important;height:38px!important;min-height:38px!important;margin:0!important;border-radius:4px!important;background:#171717!important;border:1px solid #171717!important;color:#fff!important;font-size:12px!important;font-weight:800!important;box-shadow:none!important}
.contactDrawerFooter #contactSaveBtn:hover{background:#050505!important}
@media(max-width:900px){
  .contactReferenceDrawer.open{grid-template-rows:58px minmax(0,1fr) auto!important}
  .contactDrawerFooter{padding:10px 14px calc(12px + env(safe-area-inset-bottom))!important}
  .contactDrawerFooter #contactSaveBtn{height:44px!important;min-height:44px!important;border-radius:7px!important;font-size:14px!important}
}
/* =========================================================
   v116 — Expense drawer fixed two-button footer (reference match)
   Scope: Expense Add/Edit drawer footer only.
   ========================================================= */
#expenseDrawer.expenseRefDrawer .expenseRefFooter{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  height:76px!important;min-height:76px!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;justify-content:stretch!important;gap:20px!important;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;
  border-top:1px solid #e5e7eb!important;background:#fff!important;
  box-shadow:0 -2px 8px rgba(15,23,42,.03)!important;z-index:4!important;
}
#expenseDrawer.expenseRefDrawer .expenseCancelBtn,
#expenseDrawer.expenseRefDrawer .expenseSaveBtn{
  width:100%!important;min-width:0!important;height:38px!important;
  margin:0!important;padding:0 14px!important;border-radius:6px!important;
  font-size:12px!important;font-weight:700!important;line-height:1!important;
}
#expenseDrawer.expenseRefDrawer .expenseCancelBtn{
  border:1px solid #d6dae0!important;background:#fff!important;color:#475467!important;
}
#expenseDrawer.expenseRefDrawer .expenseSaveBtn{
  border:1px solid #171717!important;background:#171717!important;color:#fff!important;
}
@media screen and (max-width:700px){
  #expenseDrawer.expenseRefDrawer .expenseRefFooter{gap:10px!important;padding-left:14px!important;padding-right:14px!important;}
}



/* v117 — Contact drawer save button hard-visible regression fix */
.contactReferenceDrawer.open .contactDrawerFooter{display:block!important;visibility:visible!important;opacity:1!important;background:#fff!important;border-top:1px solid #e6e8eb!important;padding:12px 20px 16px!important;min-height:65px!important;position:relative!important;z-index:1000!important;}
.contactReferenceDrawer.open .contactDrawerFooter #contactSaveBtn{display:flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;width:100%!important;height:40px!important;min-height:40px!important;background:#171717!important;border:1px solid #171717!important;color:#fff!important;border-radius:4px!important;margin:0!important;padding:0 14px!important;font-weight:800!important;position:relative!important;z-index:1001!important;}
@media(max-width:900px){.contactReferenceDrawer.open .contactDrawerFooter{padding:10px 14px calc(12px + env(safe-area-inset-bottom))!important;}.contactReferenceDrawer.open .contactDrawerFooter #contactSaveBtn{height:44px!important;min-height:44px!important;border-radius:7px!important;font-size:14px!important;}}

/* v118 — Contact drawer viewport-height correction under desktop html zoom:1.25.
   The drawer previously used 100dvh, which became 125% of the visible viewport
   after the project's desktop zoom and pushed the Save footer below the screen. */
@media screen and (min-device-width:901px){
  .contactReferenceDrawer{
    height:80dvh!important;
    min-height:80dvh!important;
    max-height:80dvh!important;
    bottom:auto!important;
  }
  .contactReferenceDrawer.open{
    grid-template-rows:58px minmax(0,1fr) auto!important;
  }
}


/* =========================================================
   v120 — Mobile Expense report reference-match
   Scope: Expense page phone layout only. Desktop expense UI/logic unchanged.
   ========================================================= */
.expenseMobileHeader,.expenseMobileLanding{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.expenseMobilePage{background:#fff!important;overflow-x:hidden!important}
  body.expenseMobilePage .bizTopbar,body.expenseMobilePage .noticeBand{display:none!important}
  body.expenseMobilePage .bizWorkspace{padding:0!important;margin:0!important;min-width:0!important;width:100%!important;background:#fff!important}
  #expensesView{padding:0!important;margin:0!important;min-width:0!important;width:100%!important;min-height:100vh!important;background:#fff!important;color:#3f4f62!important}
  #expensesView .expenseTop,#expensesView .expenseTable{display:none!important}
  #expensesView .expenseMobileHeader{height:92px!important;display:grid!important;grid-template-columns:60px minmax(0,1fr) 60px!important;align-items:center!important;padding:0 20px!important;background:#ffca05!important;color:#1e293b!important;box-sizing:border-box!important}
  #expensesView .expenseMobileHeader>button{width:48px!important;height:48px!important;border:0!important;background:transparent!important;color:#23384f!important;padding:0!important;display:grid!important;place-items:center!important;font-size:42px!important;line-height:1!important;font-weight:400!important}
  #expensesView .expenseMobileHeader>strong{font-size:26px!important;font-weight:700!important;line-height:1!important;letter-spacing:-.25px!important}
  #expensesView .expenseMobileHeader .expenseMobileHelp{justify-self:end!important;width:53px!important;height:53px!important;border-radius:50%!important;background:#1f5ed7!important;color:#fff!important;font:800 34px/1 Arial,sans-serif!important;box-shadow:none!important}
  #expensesView .expenseMobileLanding{display:block!important;padding:19px 18px 36px!important;background:#fff!important;min-height:calc(100vh - 92px)!important;box-sizing:border-box!important}
  #expensesView .expenseMobileSummaryCard{height:188px!important;border-radius:8px!important;background:#1f5bda!important;color:#fff!important;display:grid!important;grid-template-columns:minmax(0,1fr) 150px!important;align-items:center!important;padding:20px 18px!important;box-sizing:border-box!important;box-shadow:0 3px 8px rgba(15,23,42,.22)!important}
  #expensesView .expenseMobileSummaryCopy{align-self:stretch!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:15px!important;min-width:0!important}
  #expensesView .expenseMobileSummaryCopy>span{color:#f2da53!important;font-size:23px!important;font-weight:600!important;line-height:1!important}
  #expensesView .expenseMobileSummaryCopy>strong{color:#fff!important;font-size:31px!important;font-weight:500!important;line-height:1!important;white-space:nowrap!important}
  #expensesView .expenseMobileSummaryCopy>small{color:#fff!important;font-size:21px!important;font-weight:400!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #expensesView .expenseMobileSummarySide{align-self:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:13px!important;min-width:0!important}
  #expensesView .expenseMobileSummarySide>i{width:66px!important;height:66px!important;border-radius:50%!important;background:#fff!important;color:#1f5bda!important;display:grid!important;place-items:center!important;font:400 38px/1 Arial,sans-serif!important;font-style:normal!important}
  #expensesView .expenseMobileSummarySide>b{font-size:21px!important;font-weight:400!important;color:#fff!important;white-space:nowrap!important}
  #expensesView .expenseMobileNewRow{height:105px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:15px!important}
  #expensesView .expenseMobileNewRow h2{margin:0!important;font-size:24px!important;font-weight:500!important;color:#344054!important;line-height:1!important}
  #expensesView #expenseMobileNew{height:66px!important;min-width:168px!important;padding:0 17px!important;border:2px solid #1f62b5!important;border-radius:7px!important;background:#fff!important;color:#2160ad!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:36px!important;line-height:1!important;font-weight:400!important;box-shadow:none!important}
  #expensesView #expenseMobileNew span{font-size:20px!important;font-weight:500!important;white-space:nowrap!important}
  #expensesView .expenseMobileSearch{height:80px!important;border:2px solid #1f62b5!important;border-radius:7px!important;background:#fff!important;display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;align-items:center!important;padding:0 18px!important;box-sizing:border-box!important;margin:0 0 28px!important;box-shadow:none!important}
  #expensesView .expenseMobileSearch>span{width:34px!important;height:34px!important;border:3px solid #6f7780!important;border-radius:50%!important;position:relative!important;display:block!important}
  #expensesView .expenseMobileSearch>span:after{content:""!important;position:absolute!important;width:17px!important;height:3px!important;background:#6f7780!important;right:-13px!important;bottom:-7px!important;transform:rotate(45deg)!important;border-radius:3px!important}
  #expensesView .expenseMobileSearch input{width:100%!important;min-width:0!important;height:74px!important;border:0!important;outline:0!important;background:transparent!important;color:#38475a!important;font-size:24px!important;font-weight:400!important;padding:0 0 0 2px!important}
  #expensesView .expenseMobileSearch input::placeholder{color:#a7a9ad!important;opacity:1!important}
  #expensesView .expenseMobileCategories{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px 10px!important;align-items:start!important}
  #expensesView .expenseMobileCategories button{height:148px!important;border:0!important;border-radius:7px!important;background:#f0f3f6!important;box-shadow:0 3px 8px rgba(15,23,42,.12)!important;color:#111!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:13px!important;padding:10px!important;font-size:22px!important;font-weight:500!important;line-height:1!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
  #expensesView .expenseMobileCategories button img{width:60px!important;height:60px!important;object-fit:contain!important;display:block!important}
  #expensesView .expenseMobileCategories button:active{transform:scale(.98)!important}
  #expensesView .expenseRefDrawer{z-index:1300!important}
  #expensesView .expenseDrawerScrim{z-index:1290!important}
}
@media screen and (max-width:420px){
  #expensesView .expenseMobileHeader{height:82px!important;padding:0 14px!important;grid-template-columns:54px minmax(0,1fr) 54px!important}
  #expensesView .expenseMobileHeader>strong{font-size:23px!important}
  #expensesView .expenseMobileHeader .expenseMobileHelp{width:49px!important;height:49px!important;font-size:31px!important}
  #expensesView .expenseMobileLanding{padding:16px 14px 30px!important;min-height:calc(100vh - 82px)!important}
  #expensesView .expenseMobileSummaryCard{height:176px!important;grid-template-columns:minmax(0,1fr) 132px!important;padding:18px 16px!important}
  #expensesView .expenseMobileSummaryCopy>span{font-size:21px!important}
  #expensesView .expenseMobileSummaryCopy>strong{font-size:28px!important}
  #expensesView .expenseMobileSummaryCopy>small{font-size:18px!important}
  #expensesView .expenseMobileSummarySide>b{font-size:18px!important}
  #expensesView .expenseMobileNewRow h2{font-size:22px!important}
  #expensesView #expenseMobileNew{min-width:153px!important;height:62px!important;padding:0 12px!important}
  #expensesView #expenseMobileNew span{font-size:18px!important}
  #expensesView .expenseMobileSearch{height:72px!important;grid-template-columns:50px minmax(0,1fr)!important;padding:0 15px!important;margin-bottom:24px!important}
  #expensesView .expenseMobileSearch input{height:68px!important;font-size:22px!important}
  #expensesView .expenseMobileCategories{gap:14px 9px!important}
  #expensesView .expenseMobileCategories button{height:140px!important;font-size:20px!important}
  #expensesView .expenseMobileCategories button img{width:56px!important;height:56px!important}
}

/* =========================================================
   v121 — Mobile Expense exact phone-reference sizing pass
   Scope: Expense mobile landing only. No desktop or business-logic changes.
   Tuned against the supplied 694x1536 reference screenshot at a 390 CSS px phone viewport.
   ========================================================= */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #expensesView .expenseMobileHeader{
    height:58px!important;
    padding:0 10px!important;
    grid-template-columns:38px minmax(0,1fr) 38px!important;
  }
  #expensesView .expenseMobileHeader>button{
    width:34px!important;height:34px!important;font-size:29px!important;
  }
  #expensesView .expenseMobileHeader>strong{
    font-size:18px!important;font-weight:700!important;letter-spacing:0!important;
  }
  #expensesView .expenseMobileHeader .expenseMobileHelp{
    width:31px!important;height:31px!important;font-size:21px!important;
  }
  #expensesView .expenseMobileLanding{
    padding:11px 10px 26px!important;
    min-height:calc(100vh - 58px)!important;
  }
  #expensesView .expenseMobileSummaryCard{
    height:106px!important;
    grid-template-columns:minmax(0,1fr) 84px!important;
    padding:10px 10px!important;
    border-radius:6px!important;
    box-shadow:0 2px 6px rgba(15,23,42,.22)!important;
  }
  #expensesView .expenseMobileSummaryCopy{
    gap:8px!important;
  }
  #expensesView .expenseMobileSummaryCopy>span{
    font-size:15px!important;font-weight:600!important;
  }
  #expensesView .expenseMobileSummaryCopy>strong{
    font-size:18px!important;font-weight:500!important;
  }
  #expensesView .expenseMobileSummaryCopy>small{
    font-size:13px!important;font-weight:400!important;
  }
  #expensesView .expenseMobileSummarySide{
    gap:7px!important;
  }
  #expensesView .expenseMobileSummarySide>i{
    width:38px!important;height:38px!important;font-size:24px!important;
  }
  #expensesView .expenseMobileSummarySide>b{
    font-size:13px!important;font-weight:400!important;
  }
  #expensesView .expenseMobileNewRow{
    height:61px!important;gap:10px!important;
  }
  #expensesView .expenseMobileNewRow h2{
    font-size:16px!important;font-weight:500!important;
  }
  #expensesView #expenseMobileNew{
    height:38px!important;min-width:96px!important;padding:0 10px!important;
    border-width:1.5px!important;border-radius:5px!important;gap:5px!important;
    font-size:24px!important;
  }
  #expensesView #expenseMobileNew span{
    font-size:13px!important;font-weight:500!important;
  }
  #expensesView .expenseMobileSearch{
    height:46px!important;
    grid-template-columns:31px minmax(0,1fr)!important;
    padding:0 10px!important;
    margin:0 0 17px!important;
    border-width:1.5px!important;
    border-radius:5px!important;
  }
  #expensesView .expenseMobileSearch>span{
    width:20px!important;height:20px!important;border-width:2px!important;
  }
  #expensesView .expenseMobileSearch>span:after{
    width:10px!important;height:2px!important;right:-7px!important;bottom:-4px!important;
  }
  #expensesView .expenseMobileSearch input{
    height:42px!important;font-size:15px!important;padding-left:2px!important;
  }
  #expensesView .expenseMobileCategories{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px 6px!important;
  }
  #expensesView .expenseMobileCategories button{
    height:84px!important;
    border-radius:5px!important;
    gap:7px!important;
    padding:6px!important;
    font-size:14px!important;
    font-weight:500!important;
    box-shadow:0 2px 6px rgba(15,23,42,.12)!important;
  }
  #expensesView .expenseMobileCategories button img{
    width:36px!important;height:36px!important;
  }
}
/* Keep the exact reference proportions even on 420px-and-below phones. */
@media screen and (max-width:420px){
  #expensesView .expenseMobileHeader{height:58px!important;padding:0 10px!important;grid-template-columns:38px minmax(0,1fr) 38px!important}
  #expensesView .expenseMobileHeader>strong{font-size:18px!important}
  #expensesView .expenseMobileHeader .expenseMobileHelp{width:31px!important;height:31px!important;font-size:21px!important}
  #expensesView .expenseMobileLanding{padding:11px 10px 26px!important;min-height:calc(100vh - 58px)!important}
  #expensesView .expenseMobileSummaryCard{height:106px!important;grid-template-columns:minmax(0,1fr) 84px!important;padding:10px!important}
  #expensesView .expenseMobileSummaryCopy>span{font-size:15px!important}
  #expensesView .expenseMobileSummaryCopy>strong{font-size:18px!important}
  #expensesView .expenseMobileSummaryCopy>small{font-size:13px!important}
  #expensesView .expenseMobileSummarySide>b{font-size:13px!important}
  #expensesView .expenseMobileNewRow h2{font-size:16px!important}
  #expensesView #expenseMobileNew{height:38px!important;min-width:96px!important;padding:0 10px!important}
  #expensesView #expenseMobileNew span{font-size:13px!important}
  #expensesView .expenseMobileSearch{height:46px!important;grid-template-columns:31px minmax(0,1fr)!important;padding:0 10px!important;margin-bottom:17px!important}
  #expensesView .expenseMobileSearch input{height:42px!important;font-size:15px!important}
  #expensesView .expenseMobileCategories{gap:10px 6px!important}
  #expensesView .expenseMobileCategories button{height:84px!important;font-size:14px!important}
  #expensesView .expenseMobileCategories button img{width:36px!important;height:36px!important}
}

/* =========================================================
   v122 — Mobile Expense List reference page
   Scope: Expense mobile-only list sub-page opened from "ব্যয়ের তালিকা".
   Uses existing state.expenses; desktop Expense page remains unchanged.
   ========================================================= */
.expenseMobileListView{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #expensesView .expenseMobileSummaryCard{cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
  #expensesView.expenseMobileListOpen .expenseMobileHeader,
  #expensesView.expenseMobileListOpen .expenseMobileLanding{display:none!important}
  #expensesView .expenseMobileListView.open{display:block!important;min-height:100vh!important;background:#fff!important;color:#111!important;position:relative!important}
  #expensesView .expenseMobileListHeader{height:58px!important;background:#ffca05!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 88px!important;align-items:center!important;padding:0 8px 0 10px!important;color:#23384f!important;box-sizing:border-box!important}
  #expensesView .expenseMobileListHeader>strong{font-size:18px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important}
  #expensesView .expenseMobileListBack{width:36px!important;height:36px!important;border:0!important;background:transparent!important;color:#23384f!important;font-size:30px!important;line-height:1!important;display:grid!important;place-items:center!important;padding:0!important}
  #expensesView .expenseMobileListTools{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important}
  #expensesView .expenseMobileListTools button{width:38px!important;height:38px!important;border:0!important;background:transparent!important;color:#185bbd!important;padding:3px!important;display:grid!important;place-items:center!important}
  #expensesView .expenseMobileListTools svg{width:34px!important;height:34px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.3!important;stroke-linecap:round!important;stroke-linejoin:round!important;overflow:visible!important}
  #expensesView .expenseMobileListContent{padding:6px 5px 28px!important;background:#fff!important;min-height:calc(100vh - 58px)!important;box-sizing:border-box!important}
  #expensesView .expenseMobileListSummary{height:101px!important;border-radius:7px!important;background:#1f5edb!important;color:#fff!important;position:relative!important;display:grid!important;place-items:center!important;box-shadow:0 2px 7px rgba(15,23,42,.22)!important;padding:10px 45px 8px!important;overflow:hidden!important}
  #expensesView .expenseMobileListRange{position:absolute!important;top:13px!important;left:42px!important;right:42px!important;text-align:center!important;font-size:13px!important;line-height:1!important;font-weight:400!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#fff!important}
  #expensesView .expenseMobileListTotal{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding-top:19px!important}
  #expensesView .expenseMobileListTotal span{font-size:14px!important;color:#f0d75a!important;font-weight:500!important;line-height:1!important}
  #expensesView .expenseMobileListTotal strong{font-size:18px!important;color:#fff!important;font-weight:500!important;line-height:1!important}
  #expensesView .expenseMobilePeriodArrow{position:absolute!important;top:37px!important;width:34px!important;height:38px!important;border:0!important;background:transparent!important;color:#fff!important;font:400 44px/30px Arial,sans-serif!important;padding:0!important;display:grid!important;place-items:center!important}
  #expensesView .expenseMobilePeriodArrow.prev{left:12px!important}
  #expensesView .expenseMobilePeriodArrow.next{right:12px!important}
  #expensesView .expenseMobilePeriodArrow:disabled{opacity:.28!important}
  #expensesView .expenseMobileListTabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;margin:5px 0 12px!important}
  #expensesView .expenseMobileListTabs button{height:30px!important;border:1px solid #d9dde3!important;border-radius:7px!important;background:#fff!important;color:#5f6670!important;font-size:12px!important;font-weight:600!important;padding:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;white-space:nowrap!important;box-shadow:none!important}
  #expensesView .expenseMobileListTabs button.active{background:#2462da!important;border-color:#2462da!important;color:#fff!important}
  #expensesView .expenseMobileTinyCal{width:14px!important;height:14px!important;border:1px solid currentColor!important;border-radius:1px!important;display:grid!important;place-items:center!important;font:700 6px/1 Arial,sans-serif!important;position:relative!important}
  #expensesView .expenseMobileTinyCal:before{content:""!important;position:absolute!important;left:-1px!important;right:-1px!important;top:3px!important;border-top:2px solid currentColor!important}
  #expensesView .expenseMobileListCards{display:grid!important;gap:9px!important;padding:0 5px!important}
  #expensesView .expenseMobileListCard{min-height:82px!important;background:#f5f5f5!important;border:0!important;border-radius:5px!important;box-shadow:0 2px 7px rgba(15,23,42,.18)!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;box-sizing:border-box!important;-webkit-tap-highlight-color:transparent!important;cursor:pointer!important}
  #expensesView .expenseMobileListCardMain{min-width:0!important;display:flex!important;flex-direction:column!important;gap:6px!important}
  #expensesView .expenseMobileListCardMain>b{font:500 14px/1.15 Arial,"Noto Sans Bengali",sans-serif!important;color:#111!important;text-transform:uppercase!important}
  #expensesView .expenseMobileListCardMain>span{font-size:13px!important;line-height:1.1!important;color:#767676!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #expensesView .expenseMobileListCardMain>small{font-size:12px!important;line-height:1!important;color:#777!important;white-space:nowrap!important}
  #expensesView .expenseMobileListCard>strong{font-size:16px!important;font-weight:800!important;line-height:1!important;color:#000!important;white-space:nowrap!important;align-self:center!important}
  #expensesView .expenseMobileListEmpty{padding:38px 12px!important;text-align:center!important;color:#777!important;font-size:13px!important}

  #expensesView .expenseMobileCustomOverlay{position:fixed!important;inset:0!important;z-index:1500!important;display:none!important}
  #expensesView .expenseMobileCustomOverlay.open{display:block!important}
  #expensesView .expenseMobileCustomScrim{position:absolute!important;inset:0!important;border:0!important;background:rgba(15,23,42,.42)!important;padding:0!important}
  #expensesView .expenseMobileCustomSheet{position:absolute!important;left:0!important;right:0!important;bottom:0!important;background:#fff!important;border-radius:18px 18px 0 0!important;padding:15px 16px calc(18px + env(safe-area-inset-bottom))!important;display:grid!important;gap:12px!important;box-shadow:0 -10px 30px rgba(15,23,42,.18)!important}
  #expensesView .expenseMobileCustomTitle{display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:16px!important;color:#344054!important}
  #expensesView .expenseMobileCustomTitle button{width:34px!important;height:34px!important;border:0!important;border-radius:8px!important;background:#f2f4f7!important;font-size:21px!important}
  #expensesView .expenseMobileCustomSheet label{display:grid!important;gap:5px!important;font-size:12px!important;font-weight:700!important;color:#475467!important}
  #expensesView .expenseMobileCustomSheet input{height:44px!important;border:1px solid #d0d5dd!important;border-radius:8px!important;padding:0 10px!important;background:#fff!important;color:#344054!important}
  #expensesView #expenseMobileCustomApply{height:45px!important;border:0!important;border-radius:8px!important;background:#1f5edb!important;color:#fff!important;font-size:14px!important;font-weight:800!important}
}
@media screen and (min-width:701px){#expensesView .expenseMobileListView{display:none!important}}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #expensesView .expenseMobileSummarySide{border:0!important;background:transparent!important;height:auto!important;padding:0!important;color:inherit!important;cursor:pointer!important}
}

/* =========================================================
   v127 — Product List Dealer / Supplier professional filter
   Strictly scoped to #productsView. Existing product/stock logic is unchanged.
   ========================================================= */
#productsView .productPartyCard{background:linear-gradient(135deg,#fff 0%,#fbfdff 58%,#f5faff 100%);border:1px solid #d7e3f3;border-radius:12px;box-shadow:0 4px 14px rgba(31,78,121,.08);color:#17365f;position:relative;z-index:4}
#productsView .productPartyMain{min-width:0}
#productsView .productPartyIntro{display:flex;align-items:center;gap:14px;min-width:0}
#productsView .productPartyIcon{width:54px;height:54px;border-radius:10px;background:linear-gradient(145deg,#e6f1ff,#cfe4ff);display:grid;place-items:center;font-size:28px;flex:0 0 auto}
#productsView .productPartyIntro h2{margin:0;color:#111827;font-size:19px;line-height:1.1;font-weight:800}
#productsView .productPartyIntro p{margin:5px 0 0;color:#758399;font-size:12px;line-height:1.25}
#productsView .productPartyTabs{display:flex;gap:7px;margin-top:13px}
#productsView .productPartyTabs button{height:34px;min-width:75px;padding:0 15px;border:0;border-radius:7px;background:#edf4ff;color:#214b80;font-size:12px;font-weight:800;cursor:pointer}
#productsView .productPartyTabs button.active{background:#2d7ff0;color:#fff;box-shadow:0 3px 9px rgba(45,127,240,.22)}
#productsView .productPartySearchWrap{height:42px;margin-top:10px;border:1px solid #cfdcf0;border-radius:7px;background:#fff;display:grid;grid-template-columns:30px minmax(0,1fr) 34px;align-items:center;position:relative;color:#154a84}
#productsView .productPartySearchWrap>span{display:grid;place-items:center;font-size:18px}
#productsView .productPartySearchWrap>input{height:40px;min-width:0;border:0;outline:0;background:transparent;color:#2f4260;font-size:12px;padding:0 5px}
#productsView .productPartySearchWrap>input::placeholder{color:#7b8798}
#productsView .productPartySearchWrap>[data-product-party-search-toggle]{height:40px;border:0;background:transparent;color:#164f8d;font-size:17px;cursor:pointer}
#productsView .productPartyResults{position:absolute;left:0;right:0;top:46px;max-height:230px;overflow:auto;background:#fff;border:1px solid #d7e0eb;border-radius:8px;box-shadow:0 12px 28px rgba(15,23,42,.18);z-index:35;padding:5px}
#productsView .productPartyResults[hidden]{display:none!important}
#productsView .productPartyResults button{width:100%;border:0;background:#fff;border-radius:6px;padding:8px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center;text-align:left;color:#213a5d;cursor:pointer}
#productsView .productPartyResults button:hover{background:#f1f6fd}
#productsView .productPartyResultAvatar{width:34px;height:34px;border-radius:50%;background:#e5f0ff;color:#286bc4;display:grid;place-items:center;font-size:11px;font-weight:900}
#productsView .productPartyResults b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productsView .productPartyResults small{display:block;color:#7b8798;font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productsView .productPartyNoResult{padding:14px 10px;text-align:center;color:#8a96a7;font-size:11px}
#productsView .productPartySelectedWrap{min-width:0;display:flex;flex-direction:column;justify-content:center}
#productsView .productPartySelected{min-height:61px;border:1px solid #d7e2f1;border-radius:9px;background:#fff;display:flex;align-items:center;gap:10px;padding:8px 10px;position:relative}
#productsView .productPartySelectedAvatar{width:43px;height:43px;border-radius:50%;background:linear-gradient(145deg,#e8f2ff,#d1e5ff);color:#2a6dcc;display:grid;place-items:center;font-weight:900;font-size:15px;flex:0 0 auto}
#productsView .productPartySelectedInfo{min-width:0;padding-right:22px}
#productsView .productPartySelectedInfo b{display:block;color:#111827;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productsView .productPartySelectedInfo small{display:block;color:#6f7d91;font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productsView .productPartySelected>[data-product-party-clear]{position:absolute;right:6px;top:5px;width:23px;height:23px;border:0;background:transparent;color:#1e5b9d;font-size:20px;cursor:pointer}
#productsView .productPartySelectedEmpty{width:100%;color:#8793a4;font-size:11px;text-align:center;padding:12px 4px}
#productsView .productPartyDetailsBtn{height:36px;margin-top:8px;border:1px solid #2d7ff0;border-radius:7px;background:#fff;color:#2167c3;font-size:11px;font-weight:800;cursor:pointer}
#productsView .productPartyDetailsBtn:disabled{border-color:#d5dce5;color:#a2abb7;background:#f7f8fa;cursor:not-allowed}
#productsView .productPartySummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}
#productsView .productPartyStat{min-height:116px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;border:1px solid transparent}
#productsView .productPartyStatIcon{font-size:27px;line-height:1;margin-bottom:7px}
#productsView .productPartyStat small{font-size:11px;font-weight:800;line-height:1.2}
#productsView .productPartyStat strong{font-size:20px;line-height:1;margin-top:8px;font-weight:900;white-space:nowrap}
#productsView .productPartyStatProducts{background:#ecfbf3;color:#168a56;border-color:#d9f4e5}
#productsView .productPartyStatStock{background:#eef8ff;color:#1865b7;border-color:#ddecf8}
#productsView .productPartyStatValue{background:#fff0f3;color:#c62942;border-color:#f8dde3}
#productsView .productPartyStatLow{background:#fff7e9;color:#c66a00;border-color:#f8e8ca}
#productsView .productPartyActiveRow{margin:9px 0 10px;color:#344b6c;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}
#productsView .productPartyActiveRow[hidden]{display:none!important}
#productsView .productPartyActiveRow button{height:34px;border:0;border-radius:7px;background:#e8f1ff;color:#1764c0;padding:0 12px;font-weight:800;cursor:pointer}
#productsView .productPartyDetailsOverlay{position:fixed;inset:0;z-index:1600;display:none}
#productsView .productPartyDetailsOverlay.open{display:block}
#productsView .productPartyDetailsScrim{position:absolute;inset:0;border:0;background:rgba(15,23,42,.46)}
#productsView .productPartyDetailsModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 28px));max-height:82vh;overflow:hidden;background:#fff;border-radius:14px;box-shadow:0 22px 60px rgba(15,23,42,.28)}
#productsView .productPartyDetailsModal>header{height:67px;border-bottom:1px solid #e7ebf0;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
#productsView .productPartyDetailsModal>header small{display:block;color:#7c8898;font-size:10px}
#productsView .productPartyDetailsModal>header h2{margin:2px 0 0;color:#17365f;font-size:18px}
#productsView .productPartyDetailsModal>header button{width:35px;height:35px;border:0;border-radius:8px;background:#f3f5f8;color:#344054;font-size:22px;cursor:pointer}
#productsView .productPartyDetailsBody{padding:18px;overflow:auto;max-height:calc(82vh - 67px)}
#productsView .productPartyDetailIdentity{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#productsView .productPartyDetailIdentity>span{width:52px;height:52px;border-radius:50%;background:#e6f1ff;color:#266bc7;display:grid;place-items:center;font-weight:900}
#productsView .productPartyDetailIdentity b{display:block;font-size:16px;color:#111827}
#productsView .productPartyDetailIdentity small{display:block;margin-top:3px;color:#768397;font-size:11px}
#productsView .productPartyDetailGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#productsView .productPartyDetailGrid>div{border:1px solid #e0e7f0;border-radius:9px;background:#f8fbff;padding:11px 8px;text-align:center}
#productsView .productPartyDetailGrid small{display:block;color:#748196;font-size:10px}
#productsView .productPartyDetailGrid strong{display:block;color:#183c6c;font-size:15px;margin-top:5px}
#productsView .productPartyDetailLine{min-height:45px;margin-top:10px;border:1px solid #e5e9ef;border-radius:8px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#506078;font-size:11px}
#productsView .productPartyDetailLine strong{color:#17365f;font-size:12px;text-align:right}
#productsView .productPartyDetailEmpty{margin-top:10px;padding:14px;border-radius:8px;background:#f8f9fb;color:#8792a2;text-align:center;font-size:11px}

@media (min-width:901px){
  #productsView .productPartyDesktop{display:grid;grid-template-columns:minmax(360px,1.25fr) minmax(235px,.8fr) minmax(470px,1.35fr);gap:22px;align-items:stretch;padding:17px 20px;margin:0 0 9px}
  #productsView .productPartySelectedWrap{border-left:1px solid #e1e8f1;padding-left:21px}
  #productsView .productFilters{grid-template-columns:minmax(260px,1.55fr) 44px minmax(145px,.78fr) minmax(105px,.62fr) minmax(105px,.62fr) 86px 92px!important}
}
@media (max-width:900px) and (min-width:701px){
  #productsView .productPartyDesktop{display:grid;grid-template-columns:1fr 1fr;padding:16px;gap:14px;margin-bottom:10px}
  #productsView .productPartySummary{grid-column:1/-1}
  #productsView .productFilters{grid-template-columns:minmax(220px,1.3fr) 44px minmax(130px,.8fr) minmax(100px,.65fr) minmax(100px,.65fr) 86px 92px!important;overflow-x:auto}
}
#productsView .productPartyMobile{display:none}
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #productsView .productPartyMobile{display:block!important;margin:10px 10px 0!important;padding:12px!important;border-radius:10px!important;box-shadow:0 2px 7px rgba(15,23,42,.08)!important}
  #productsView .productPartyDesktop{display:none!important}
  #productsView .productPartyIntro{gap:9px!important}
  #productsView .productPartyIcon{width:42px!important;height:42px!important;font-size:22px!important;border-radius:8px!important}
  #productsView .productPartyIntro h2{font-size:15px!important}
  #productsView .productPartyIntro p{font-size:10px!important;margin-top:3px!important}
  #productsView .productPartyTabs{margin-top:10px!important;gap:5px!important}
  #productsView .productPartyTabs button{height:30px!important;min-width:0!important;flex:1!important;padding:0 8px!important;font-size:11px!important}
  #productsView .productPartySearchWrap{height:39px!important;margin-top:8px!important}
  #productsView .productPartySearchWrap>input{height:37px!important;font-size:11px!important}
  #productsView .productPartyResults{top:42px!important;max-height:190px!important}
  #productsView .productPartySelectedWrap{margin-top:9px!important}
  #productsView .productPartySelected{min-height:52px!important;padding:6px 8px!important}
  #productsView .productPartySelectedAvatar{width:36px!important;height:36px!important;font-size:12px!important}
  #productsView .productPartySelectedInfo b{font-size:12px!important}
  #productsView .productPartySelectedInfo small{font-size:9px!important}
  #productsView .productPartyDetailsBtn{height:33px!important;margin-top:6px!important;font-size:10px!important}
  #productsView .productPartySummary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-top:9px!important}
  #productsView .productPartyStat{min-height:64px!important;border-radius:8px!important;padding:7px!important}
  #productsView .productPartyStatIcon{display:none!important}
  #productsView .productPartyStat small{font-size:9px!important}
  #productsView .productPartyStat strong{font-size:15px!important;margin-top:5px!important}
  #productsView .productPartyActiveMobile{margin:7px 10px 0!important;font-size:10px!important}
  #productsView .productPartyActiveMobile button{height:28px!important;font-size:10px!important}
  #productsView .productMobileFilterRow{grid-template-columns:minmax(0,1.3fr) minmax(0,.95fr) minmax(0,.85fr) 55px!important;gap:7px!important}
  #productsView .productMobileCategoryWrap select{padding-left:12px!important}
  #productsView .productMobileSelect select{font-size:13px!important;padding-right:26px!important}
  #productsView .productMobileSelect:after{right:10px!important}
  #productsView .productPartyDetailsModal{width:calc(100vw - 20px)!important;max-height:86vh!important}
  #productsView .productPartyDetailsModal>header{height:58px!important;padding:0 13px!important}
  #productsView .productPartyDetailsBody{padding:13px!important;max-height:calc(86vh - 58px)!important}
  #productsView .productPartyDetailGrid{grid-template-columns:repeat(2,1fr)!important}
}

/* v130 — Purchase delete confirmation: fixed overlay, aligned exactly over the existing Transaction Details drawer. */
.purchaseTxnDeleteConfirmOverlay{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:35.2vw;
  min-width:500px;
  max-width:620px;
  z-index:10040;
  visibility:hidden;
  pointer-events:none;
  display:grid;
  place-items:center;
  padding:18px;
}
.purchaseTxnDeleteConfirmOverlay.open{visibility:visible;pointer-events:auto}
.purchaseTxnDeleteConfirmScrim{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(15,23,42,.28);
  opacity:0;
  transition:opacity .18s ease;
}
.purchaseTxnDeleteConfirmOverlay.open .purchaseTxnDeleteConfirmScrim{opacity:1}
.purchaseTxnDeleteConfirmModal{
  position:relative;
  width:min(430px,calc(100% - 28px));
  background:#fff;
  border-radius:14px;
  padding:25px 24px 20px;
  box-shadow:0 20px 60px rgba(15,23,42,.22);
  text-align:center;
  transform:translateY(8px) scale(.985);
  opacity:0;
  transition:transform .18s ease,opacity .18s ease;
}
.purchaseTxnDeleteConfirmOverlay.open .purchaseTxnDeleteConfirmModal{transform:none;opacity:1}
.purchaseTxnDeleteConfirmIcon{
  width:48px;height:48px;border-radius:50%;margin:0 auto 13px;
  display:grid;place-items:center;background:#fff0f0;color:#e5484d;
  font-size:25px;font-weight:900;
}
.purchaseTxnDeleteConfirmModal h3{margin:0;color:#26364d;font-size:19px;line-height:1.35}
.purchaseTxnDeleteConfirmModal p{margin:9px auto 20px;max-width:340px;color:#667085;font-size:13px;line-height:1.55}
.purchaseTxnDeleteConfirmActions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.purchaseTxnDeleteConfirmActions button{height:43px;border-radius:8px;font-weight:800;font-family:inherit;cursor:pointer}
.purchaseTxnDeleteConfirmCancel{border:1px solid #d8dde5;background:#fff;color:#344054}
.purchaseTxnDeleteConfirmDanger{border:1px solid #ef5a60;background:#ef5a60;color:#fff}
.purchaseTxnDeleteConfirmActions button:disabled,.purchaseTxnFooter button:disabled,.purchaseConfirmSubmit:disabled{opacity:.6;cursor:not-allowed;filter:none!important}
.purchaseTxnProductCard+.purchaseTxnProductCard{margin-top:8px}
@media(max-width:1100px){
  .purchaseTxnDeleteConfirmOverlay{width:44vw;min-width:430px}
}
@media(max-width:760px){
  .purchaseTxnDeleteConfirmOverlay{width:94vw;min-width:0;max-width:none}
}
@media(max-width:520px){
  .purchaseTxnDeleteConfirmOverlay{padding:12px}
  .purchaseTxnDeleteConfirmModal{padding:22px 18px 17px}
  .purchaseTxnDeleteConfirmActions{gap:8px}
  .purchaseTxnDeleteConfirmActions button{height:42px}
}

/* =========================================================
   v131 — Purchase Transaction Details footer viewport fix.
   Desktop uses html zoom:1.25, so a 100vh drawer becomes taller than the
   visible viewport. Counter only the purchase drawer/confirm height so the
   existing bottom action bar stays exactly at the visible drawer bottom.
   ========================================================= */
@media screen and (min-device-width:901px){
  .purchaseTxnDrawer{
    height:80dvh!important;
    min-height:80dvh!important;
    max-height:80dvh!important;
    bottom:auto!important;
    grid-template-rows:64px auto minmax(0,1fr) 78px!important;
  }
  .purchaseTxnFooter{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:78px!important;
    height:78px!important;
    position:relative!important;
    z-index:5!important;
  }
  .purchaseTxnDeleteConfirmOverlay{
    height:80dvh!important;
    min-height:80dvh!important;
    max-height:80dvh!important;
    bottom:auto!important;
  }
}


/* =========================================================
   v133 — Sell video-reference UI/interaction match (SELL ONLY)
   Keeps all business calculations/persistence in business.js; these rules only
   refine the Sell split workspace + Confirm Payment drawer.
   ========================================================= */
#salesView .sellClone{
  background:#fff!important;
  grid-template-columns:528px minmax(0,1fr)!important;
  gap:18px!important;
}
#salesView .sellPicker,
#salesView .purchaseStageMain{
  background:#fff!important;
  border:1px solid #e7eaee!important;
  border-radius:7px!important;
  box-shadow:none!important;
}
#salesView .sellPicker{padding:10px 10px 12px!important}
#salesView .sellPicker>h2{font-size:13px!important;font-weight:800!important;color:#3f4d5f!important;margin:0 0 10px!important}
#salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 150px 43px 43px!important;gap:7px!important}
#salesView .purchaseProductItem{min-height:50px!important;border-bottom:1px solid #edf0f2!important;padding:7px 4px!important;background:#fff!important}
#salesView .purchaseProductItem:hover{background:#fafbfc!important}
#salesView .saleProductThumb{width:31px!important;height:31px!important;min-width:31px!important;border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;background:#f4f6f8!important}
#salesView .saleProductThumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
#salesView .saleProductThumb svg{width:21px!important;height:21px!important;fill:none!important;stroke:#455468!important;stroke-width:1.8!important}
#salesView .purchaseProductItem b{font-size:12px!important;color:#445269!important}
#salesView .purchaseProductItem small{font-size:10px!important;color:#687588!important}
#salesView .addBtn,#salesView .addMore{background:#171717!important;color:#fff!important;border-color:#171717!important}
#salesView .purchaseAddCount{background:#ff5964!important;color:#fff!important;border:0!important}
#salesView .purchaseCartPanel{background:#fff!important}
#salesView .purchaseCartTop{min-height:38px!important;padding:0 8px!important}
#salesView .purchaseCartTop strong{font-size:12px!important;color:#465467!important}
#salesView .purchaseClearCart{color:#ef5b66!important;font-size:11px!important}
#salesView .purchaseCartItem{background:#f4f6f9!important;border:0!important;border-radius:3px!important;margin:0 0 8px!important;padding:8px!important}
#salesView .saleCartThumb{width:30px!important;height:30px!important;border-radius:3px!important;background:#fff!important;overflow:hidden!important;display:grid!important;place-items:center!important}
#salesView .saleCartThumb img{width:100%!important;height:100%!important;object-fit:cover!important}
#salesView .saleCartThumb svg{width:20px!important;height:20px!important;fill:none!important;stroke:#526173!important;stroke-width:1.8!important}
#salesView .purchaseCartName{font-size:12px!important;color:#445269!important}
#salesView .purchaseCartStock{font-size:10px!important;background:#ccecff!important;color:#5f7688!important;border-radius:3px!important;padding:3px 7px!important}
#salesView .purchaseCartFields{gap:8px!important}
#salesView .purchaseCartField span{font-size:10px!important;color:#59677a!important;font-weight:700!important}
#salesView .purchaseCartField input{height:34px!important;background:#fff!important;border:1px solid #e1e5ea!important;border-radius:3px!important;font-size:11px!important}
#salesView .purchaseCartRemove{background:#ff5864!important;color:#fff!important;border-radius:50%!important;width:20px!important;height:20px!important;line-height:18px!important}
#salesView .purchaseCheckoutSummary{background:#fff!important;color:#52606f!important}
#salesView .purchaseCheckoutRow{min-height:35px!important;font-size:11px!important}
#salesView .purchasePaymentButtons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:auto!important}
#salesView .purchasePaymentButtons button{height:42px!important;background:#191919!important;color:#fff!important;border:0!important;border-radius:3px!important;font-size:11px!important;font-weight:800!important}

/* Confirm Payment: the reference has no CUSTOMER/SUPPLIER tabs or extra payable card. */
.saleDuePartyTabs,.saleDuePayable{display:none!important}
.saleDueDrawer{width:min(500px,calc(100vw - 24px))!important}
.saleDueHead{height:58px!important;flex:0 0 58px!important}
.saleDueHead h2{font-size:20px!important;color:#303a4a!important}
.saleDueForm{padding:12px 16px 104px!important;gap:12px!important;font-size:12px!important}
.saleDueForm>label{gap:6px!important;color:#313d4d!important}
.saleDueRequired{color:#ef4b55!important}
.saleDueDateDisplay{height:42px;border:1px solid #d9dee5;border-radius:4px;display:flex;align-items:center;background:#fff;overflow:hidden;cursor:pointer}
.saleDueDateDisplay input{height:40px!important;border:0!important;outline:0!important;flex:1!important;padding:0 10px!important;cursor:pointer!important;background:#fff!important}
.saleDueDateDisplay span{width:42px;height:40px;display:grid;place-items:center;color:#5d6876;font-size:16px}
.saleDueNativeDate{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.saleDueAmountField{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
.saleDueAmountField input{width:100%!important}
.saleDueAmountField button{height:42px;border:1px solid #d9dee5;border-radius:4px;background:#fff;color:#29384a;font-size:20px;display:grid;place-items:center;cursor:pointer}
.saleDueAmountHint{font-size:10px!important;color:#545f6e!important;font-weight:600!important;margin-top:-2px}
.saleDueNoteField button{opacity:.7}
.saleDueFooterBar{bottom:56px!important;height:48px!important}
.saleDueSubmit{height:40px!important;bottom:10px!important;background:#151515!important;border-radius:3px!important;font-size:12px!important}
.saleDueSubmit:disabled{opacity:.6!important;cursor:not-allowed!important}
@media(max-width:1200px){#salesView .sellClone{grid-template-columns:430px minmax(0,1fr)!important}#salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 120px 43px 43px!important}}
@media(max-width:900px) and (hover:none) and (pointer:coarse){
  #salesView .sellClone{grid-template-columns:1fr!important;gap:10px!important}
  #salesView .sellPicker{width:100%!important}
  .saleDueDrawer{width:100vw!important;max-width:100vw!important}
}

/* v133.1 — final video-geometry corrections for Sell only. */
@media(min-width:901px){
  #salesView .sellClone{
    grid-template-columns:minmax(360px,32%) minmax(0,1fr)!important;
  }
  .saleDueDrawer{
    width:29vw!important;
    min-width:405px!important;
    max-width:800px!important;
  }
}
/* New reference shows a real Barcode input, not the older icon-only collapsed scanner. */
#salesView .purchaseBarcodeField{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  padding:0!important;
}
#salesView .purchaseBarcodeField input{
  position:static!important;
  width:auto!important;
  min-width:0!important;
  height:39px!important;
  inset:auto!important;
  opacity:1!important;
  padding:0 8px!important;
  margin:0!important;
  cursor:text!important;
  flex:1 1 auto!important;
}
#salesView .purchaseBarcodeField span{
  width:34px!important;
  min-width:34px!important;
  height:39px!important;
  border-left:1px solid #edf0f3!important;
}
/* The Sell reference collapsed footer contains Total only; Batch is a Purchase control. */
#salesView .purchaseBatch{display:none!important}
#salesView .purchaseStage.checkoutCollapsed .purchaseTotalBar{display:flex!important}
#salesView .purchaseStage.checkoutCollapsed > .purchaseChevron{bottom:35px!important}
@media(max-width:1200px) and (min-width:901px){
  #salesView .sellClone{grid-template-columns:minmax(340px,34%) minmax(0,1fr)!important}
  #salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 110px 43px 43px!important}
  .saleDueDrawer{width:32vw!important;min-width:380px!important}
}
@media(max-width:900px) and (hover:none) and (pointer:coarse){
  #salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 96px 43px 43px!important}
  .saleDueDrawer{width:100vw!important;min-width:0!important;max-width:100vw!important}
}
/* v133.2 — ensure the legacy shared collapsed rule cannot re-show Batch in Sell. */
#salesView .purchaseStage .purchaseBatch,
#salesView .purchaseStage.checkoutCollapsed .purchaseBatch,
#salesView .purchaseStage.cartActive.checkoutCollapsed .purchaseBatch{display:none!important}
/* v133.3 — compact Confirm Payment vertical rhythm so both reference toggles
   remain visible above the fixed SMS/action footer on common desktop heights. */
.saleDueForm{gap:10px!important}
.saleDueForm input{height:38px!important}
.saleDueDateDisplay,.saleDueAmountField button{height:38px!important}
.saleDueDateDisplay input{height:36px!important}
.saleDueDateDisplay span{height:36px!important}
.saleDueCustomerField,.saleDuePhoneField,.saleDueNoteField{height:38px!important}
.saleDueCustomerField input,.saleDuePhoneField input,.saleDueNoteField input{height:34px!important}
.saleDueCustomerField button,.saleDueNoteField button{height:36px!important}
.saleDueSwitch{min-height:34px!important;padding-top:4px!important}


/* v136 — Data Backup & Restore safety center (matches existing Settings drawer) */
.profileBackupRow{border-color:#d9e9df!important;background:#fbfefc!important}
.profileBackupSafe{font-size:9px;font-weight:800;color:#16824f;background:#eaf8f0;border:1px solid #cfeadb;border-radius:999px;padding:4px 7px;white-space:nowrap}
.backupCenterOverlay{position:fixed;inset:0;z-index:12080;visibility:hidden;pointer-events:none}
.backupCenterOverlay.open{visibility:visible;pointer-events:auto}
.backupCenterScrim{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.40);opacity:0;transition:opacity .2s ease}
.backupCenterOverlay.open .backupCenterScrim{opacity:1}
.backupCenterDrawer{position:absolute;right:0;top:0;width:430px;max-width:calc(100vw - 16px);height:100%;overflow:auto;background:#fff;color:#344054;box-shadow:-8px 0 28px rgba(0,0,0,.17);padding:17px 18px 22px;transform:translateX(102%);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.backupCenterOverlay.open .backupCenterDrawer{transform:translateX(0)}
.backupCenterHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid #e8ebee}
.backupCenterHead h2{margin:0;font-size:17px;line-height:1.2;color:#171a1f;font-weight:800}
.backupCenterHead p{margin:5px 0 0;font-size:10px;color:#7b8490}
.backupCenterHead>button{width:32px;height:32px;border:0;background:transparent;color:#41464d;font-size:25px;line-height:1;cursor:pointer;border-radius:6px}
.backupSafetyCard{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;margin:14px 0;padding:12px;border:1px solid #cfe9d9;background:#f5fbf7;border-radius:8px}
.backupSafetyIcon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#16824f;color:#fff;font-weight:900;font-size:16px}
.backupSafetyCard b{display:block;font-size:12px;color:#1e4d36}.backupSafetyCard small{display:block;font-size:9.5px;line-height:1.35;color:#61756a;margin-top:3px}
.backupSafetyPill{font-size:8.5px;font-weight:900;letter-spacing:.35px;color:#137547;background:#e6f6ed;border:1px solid #cce9d8;border-radius:999px;padding:5px 7px;white-space:nowrap}
.backupSafetyPill.local{color:#7c5b13;background:#fff8e5;border-color:#efe0ad}
.backupActionGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:13px}
.backupActionGrid button{min-height:71px;border-radius:7px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.backupActionGrid button span{font-size:18px;line-height:1}.backupActionGrid button b{font-size:10.5px}.backupActionGrid button small{font-size:8.5px;color:#7b8490}
.backupPrimaryBtn{border:1px solid #1f7b51;background:#166d47;color:#fff}.backupPrimaryBtn small{color:#d9f0e3!important}
.backupSoftBtn{border:1px solid #dde2e7;background:#fff;color:#46515d}.backupActionGrid button:disabled{opacity:.48;cursor:not-allowed}
.backupCurrentBar{display:grid;grid-template-columns:1fr 1.4fr 32px;align-items:center;gap:8px;border:1px solid #e1e5e9;border-radius:7px;padding:9px 10px;background:#fafbfc}
.backupCurrentBar span{min-width:0}.backupCurrentBar small{display:block;font-size:8.5px;color:#8a929c}.backupCurrentBar b{display:block;margin-top:2px;font-size:10px;color:#323941;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backupCurrentBar button{width:30px;height:30px;border:1px solid #dce1e5;background:#fff;border-radius:6px;color:#5f6872;font-size:16px;cursor:pointer}
.backupListHead{display:flex;align-items:center;justify-content:space-between;margin:15px 0 8px}.backupListHead b{font-size:11px;color:#424a54}.backupListHead span{font-size:9px;color:#8a929c}
.backupList{display:grid;gap:7px}
.backupItem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid #e1e5e9;border-radius:7px;padding:9px;background:#fff}
.backupItemIcon{width:32px;height:32px;border-radius:7px;background:#f1f4f6;color:#66717d;display:grid;place-items:center;font-size:15px;font-weight:800}.backupItemIcon.manual{background:#ecf8f1;color:#19754b}.backupItemIcon.pre_restore{background:#fff5e9;color:#9a6519}
.backupItemText{min-width:0}.backupItemText b{display:block;font-size:10.5px;color:#353d46}.backupItemText small{display:block;font-size:8.8px;color:#858e98;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backupItem button{height:30px;border:1px solid #d7dce1;background:#fff;color:#4d5864;border-radius:5px;padding:0 8px;font-size:9.5px;font-weight:700;cursor:pointer}.backupItem button:hover{background:#f7f8f9}
.backupEmpty{padding:24px 12px;text-align:center;border:1px dashed #dce1e5;border-radius:7px;color:#8a929c;font-size:10px}
.backupRestoreConfirm{position:sticky;bottom:0;margin-top:12px;border:1px solid #efc7c7;background:#fff8f8;border-radius:8px;padding:11px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;box-shadow:0 -4px 16px rgba(0,0,0,.05)}
.backupRestoreConfirm[hidden]{display:none!important}.backupConfirmIcon{width:28px;height:28px;border-radius:50%;background:#fff0f0;color:#c43e42;display:grid;place-items:center;font-weight:900}.backupConfirmCopy b{font-size:10.5px;color:#692d2f}.backupConfirmCopy p{margin:3px 0 0;font-size:9px;line-height:1.35;color:#7f5c5e}.backupConfirmActions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:7px}.backupConfirmActions button{height:31px;border-radius:5px;padding:0 11px;font-size:9.5px;font-weight:700;cursor:pointer}.backupConfirmActions button:first-child{border:1px solid #d9dde1;background:#fff;color:#5e6872}.backupConfirmActions button:last-child{border:1px solid #b7383c;background:#c94045;color:#fff}
.backupFootNote{margin-top:12px;padding-top:10px;border-top:1px solid #eceff1;font-size:8.7px;line-height:1.45;color:#8b939d;text-align:center}
@media(max-width:600px){.backupCenterDrawer{width:94vw;max-width:94vw;padding:15px 14px 20px}.backupActionGrid{grid-template-columns:1fr 1fr}.backupPrimaryBtn{grid-column:1/-1;min-height:58px!important}.backupCurrentBar{grid-template-columns:1fr 1fr 32px}.backupSafetyCard{grid-template-columns:32px minmax(0,1fr)}.backupSafetyPill{grid-column:2;justify-self:start}.backupItem{grid-template-columns:32px minmax(0,1fr) auto}}

/* v138: Real Employee Login controls — scoped to existing Access Management UI. */
#accessView .accessDetailActions{flex-wrap:wrap;justify-content:flex-end}
#accessView .accessDangerBtn{color:#b42318;border-color:#f0c9c5;background:#fff8f7}
#accessView .accessDangerBtn:hover{background:#fff1ef;border-color:#e9aaa3}
#accessView .accessRoleModal form{display:grid;gap:14px}
#accessView .accessActiveCheck{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important}
#accessView .accessActiveCheck input{width:18px!important;height:18px!important;padding:0!important;box-shadow:none!important}
#accessView .accessRoleOverlay[aria-hidden="false"]{visibility:visible;pointer-events:auto}
#accessView .accessRoleOverlay[aria-hidden="false"] .accessOverlayScrim{opacity:1}
#accessView .accessRoleOverlay[aria-hidden="false"] .accessRoleModal{opacity:1;transform:translate(-50%,-50%)}
@media(max-width:560px){#accessView .accessDetailActions{display:flex;gap:7px}#accessView .accessDetailActions .accessEditRoleBtn{flex:1 1 calc(50% - 7px);padding:0 8px}}

/* =========================================================
   v140 — Recycle Bin functional UI (scoped, reference-matched)
   ========================================================= */
#recycleView.recyclePage{padding-top:18px;color:#16345e}
#recycleView .recyclePageHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
#recycleView .recyclePageHead h1{margin:0;font-size:30px;line-height:1.15;color:#0f2f59;font-weight:800}
#recycleView .recycleTopActions{display:flex;align-items:center;gap:12px}
#recycleView .recycleTopActions .softBtn{height:46px;padding:0 20px;border:1px solid #d6e0ec;border-radius:8px;color:#173b67;background:#fff;font-size:14px}
#recycleView .recycleEmptyTabBtn{height:46px;padding:0 22px;border:1px solid #1677ff;border-radius:8px;background:#1677ff;color:#fff;font-size:14px;font-weight:800}
#recycleView .recycleEmptyTabBtn:disabled{opacity:.45;cursor:not-allowed}
#recycleView .recycleTabs{height:60px;margin:0 0 22px;background:#fff;border:1px solid #dbe4ee;border-radius:10px;display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;overflow:hidden}
#recycleView .recycleTabs button{height:100%;border:0;border-radius:0;background:#fff;color:#173b67;font-size:16px;font-weight:700;position:relative}
#recycleView .recycleTabs button.active{background:linear-gradient(180deg,#f0f7ff 0%,#e7f2ff 100%);color:#0876ff}
#recycleView .recycleTabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#0876ff;border-radius:3px 3px 0 0}
#recycleView .recyclePanel{background:#fff;border:1px solid #dbe4ee;border-radius:10px;overflow:hidden;min-height:520px}
#recycleView .recycleFilters{padding:28px 24px;display:grid;grid-template-columns:minmax(320px,1.7fr) minmax(330px,1fr) minmax(170px,.55fr) auto;gap:14px;align-items:end;border-bottom:1px solid #e3eaf2;background:#fff}
#recycleView .recycleSearchBox{height:50px;border:1px solid #d7e1ec;border-radius:8px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#5f7692;background:#fff}
#recycleView .recycleSearchBox>span{font-size:24px;line-height:1}
#recycleView .recycleSearchBox input{width:100%;height:46px;border:0;background:transparent;color:#18375e;font-size:14px}
#recycleView .recycleDateBox,#recycleView .recycleStatusBox{display:grid;gap:4px;position:relative}
#recycleView .recycleDateBox>span:first-child,#recycleView .recycleStatusBox>span{font-size:11px;color:#73859a;padding-left:8px;background:#fff;width:max-content;position:relative;z-index:1;margin-bottom:-10px}
#recycleView .recycleDateInputs{height:50px;border:1px solid #d7e1ec;border-radius:8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:5px;padding:0 8px;background:#fff}
#recycleView .recycleDateInputs input{border:0;min-width:0;height:44px;color:#173b67;background:transparent;font-size:12px}
#recycleView .recycleDateInputs i{font-style:normal;color:#97a6b7}
#recycleView .recycleStatusBox select{height:50px;border:1px solid #d7e1ec;border-radius:8px;background:#fff;color:#173b67;padding:0 13px;font-size:13px}
#recycleView .recycleResetBtn{height:50px;border:1px solid #d7e1ec;border-radius:8px;background:#fff;color:#173b67;padding:0 16px;font-size:13px;white-space:nowrap}
#recycleView .recycleTableWrap{overflow:auto;background:#fff}
#recycleView .recycleTable{width:100%;border-collapse:collapse;min-width:1120px;color:#18375e}
#recycleView .recycleTable th{height:58px;background:#f7f9fc;border-bottom:1px solid #dfe7ef;padding:0 14px;text-align:left;font-size:13px;color:#173b67;font-weight:800;white-space:nowrap}
#recycleView .recycleTable td{height:72px;border-bottom:1px solid #e4ebf2;padding:10px 14px;font-size:13px;color:#284b73;vertical-align:middle;white-space:nowrap}
#recycleView .recycleTable td b{font-size:14px;color:#173b67}
#recycleView .recycleCheckCell{width:46px;text-align:center!important}
#recycleView .recycleCheckCell input,#recycleView .recycleTable td input[type="checkbox"]{width:20px;height:20px;accent-color:#1677ff;cursor:pointer}
#recycleView .recycleMoney{font-weight:800}.recycleMoney.bill{color:#e53e3e!important}.recycleMoney.paid{color:#12a150!important}.recycleMoney.due{color:#e53e3e!important}
#recycleView .recycleStatus{display:inline-flex;min-height:30px;align-items:center;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:800}
#recycleView .recycleStatus.paid{background:#dcfce7;color:#16864b}.recycleStatus.partial{background:#fff3d6;color:#a66b00}.recycleStatus.due{background:#ffe5e5;color:#d73b3e}
#recycleView .recycleRowActions{display:flex;gap:8px;align-items:center}
#recycleView .recycleRestoreBtn,#recycleView .recycleDeleteBtn{height:38px;border-radius:7px;padding:0 12px;background:#fff;font-size:12px;font-weight:800;white-space:nowrap}
#recycleView .recycleRestoreBtn{border:1px solid #29b779;color:#16945f}.recycleDeleteBtn{border:1px solid #ff5e63!important;color:#e63e43!important}
#recycleView .recycleEmptyState{min-height:360px;display:grid;place-items:center;align-content:center;text-align:center;color:#71839a;padding:36px}
#recycleView .recycleEmptyState[hidden]{display:none!important}
#recycleView .recycleEmptyState .docIcon{width:52px;height:52px;border-radius:50%;background:#e7f2ff;color:#1677ff;display:grid;place-items:center;font-size:28px;margin-bottom:10px}
#recycleView .recycleEmptyState h2{margin:0 0 5px;color:#173b67;font-size:20px}.recycleEmptyState p{margin:0;font-size:13px}
#recycleView .recycleFooter{min-height:72px;border-top:1px solid #e1e8f0;display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(260px,1fr);align-items:center;gap:14px;padding:10px 22px;background:#fff}
#recycleView .recycleSelectedInfo{font-size:12px;color:#173b67;font-weight:700}
#recycleView .recycleBulkActions{display:flex;gap:10px;justify-content:center}
#recycleView .recycleBulkRestore,#recycleView .recycleBulkDelete{height:40px;border-radius:8px;padding:0 16px;font-size:12px;font-weight:800;background:#fff}
#recycleView .recycleBulkRestore{border:1px solid #77d3ac;color:#16945f;background:#effbf5}.recycleBulkDelete{border:1px solid #ffb8bb;color:#e63e43;background:#fff1f1}
#recycleView .recycleBulkRestore:disabled,#recycleView .recycleBulkDelete:disabled{opacity:.45;cursor:not-allowed}
#recycleView .recyclePagination{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#526c89;font-size:12px}
#recycleView .recyclePagination button{width:36px;height:36px;padding:0;border:1px solid #d7e1ec;border-radius:7px;background:#fff;color:#315274}
#recycleView .recyclePagination button.active{background:#eaf3ff;border-color:#aed0ff;color:#0876ff}.recyclePagination button:disabled{opacity:.4;cursor:not-allowed}.recyclePagination i{font-style:normal;padding:0 2px}.recyclePagination span{margin-left:10px;white-space:nowrap}

@media(max-width:1100px){
  #recycleView .recycleFilters{grid-template-columns:1fr 1fr}.recycleResetBtn{justify-self:start}
  #recycleView .recycleFooter{grid-template-columns:1fr;justify-items:stretch}.recycleBulkActions{justify-content:flex-start!important}.recyclePagination{justify-content:flex-start!important}
}
@media(max-width:700px){
  #recycleView.recyclePage{padding-top:12px}
  #recycleView .recyclePageHead{align-items:flex-start;flex-direction:column}.recycleTopActions{width:100%}.recycleTopActions>*{flex:1;padding:0 8px!important}
  #recycleView .recyclePageHead h1{font-size:24px}
  #recycleView .recycleTabs{height:auto;grid-template-columns:1fr 1fr}.recycleTabs button{height:48px!important;font-size:13px!important}
  #recycleView .recycleFilters{grid-template-columns:1fr;padding:16px;gap:12px}.recycleSearchBox{min-width:0!important}.recycleDateInputs{grid-template-columns:1fr auto 1fr}.recycleResetBtn{width:100%}
  #recycleView .recyclePanel{border-radius:8px}.recycleFooter{padding:12px 14px}.recycleBulkActions{display:grid!important;grid-template-columns:1fr}.recycleBulkActions button{width:100%}
  #recycleView .recyclePagination{overflow-x:auto;padding-bottom:2px}
}
/* v140 fit refinement: keep both row actions visible on standard desktop widths. */
@media(min-width:901px){
  #recycleView .recycleTable{min-width:1040px}
  #recycleView .recycleTable th,#recycleView .recycleTable td{padding-left:10px;padding-right:10px}
  #recycleView .recycleRestoreBtn,#recycleView .recycleDeleteBtn{padding:0 9px;font-size:11px}
  #recycleView .recycleRowActions{gap:6px}
}

/* TAB WHEEL SCROLL PASS-THROUGH v142 — vertical mouse-wheel over tab strips keeps the page scrolling. */
.periodTabs,.tabsLine,.expenseMobileListTabs,.contactTabs,.productPartyTabs,.marketingModeTabs,.recycleTabs,.dueDrawerTabs,.saleDuePartyTabs,.printerTabs,.expiryTabs{
  overscroll-behavior-y:auto;
  touch-action:pan-x pan-y;
}

/* SIDEBAR CONTINUOUS WHEEL SCROLL v143 — prevents desktop sidebar wheel from stalling until browser zoom/reflow. */
@media (min-width:901px){
  .bizSidebar{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:auto!important;
    scroll-behavior:auto!important;
    contain:none!important;
  }
  .bizNav{min-height:max-content!important;}
}


/* =========================================================
   v144 — Native desktop sidebar scrolling (permanent fix)
   Keep branding fixed; only the menu list scrolls. No JS wheel interception.
   ========================================================= */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .bizSidebar{
    position:sticky!important;
    top:0!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .bizBrand{
    flex:0 0 auto!important;
  }
  .bizNav{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    scroll-behavior:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .bizNav::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
}


/* =========================================================
   v269 — Desktop sidebar visible-viewport scroll fix.
   Desktop UI intentionally uses html{zoom:1.25}; therefore a 100vh
   sidebar renders ~25% taller than the visible viewport. Counter that
   zoom here (1 / 1.25 = .8) and keep only the menu area scrollable.
   ========================================================= */
@media screen and (min-device-width:901px){
  .bizSidebar{
    position:sticky!important;
    top:0!important;
    height:80vh!important;
    height:80dvh!important;
    min-height:0!important;
    max-height:80vh!important;
    max-height:80dvh!important;
    display:grid!important;
    grid-template-rows:50px minmax(0,1fr)!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .bizBrand{
    position:relative!important;
    top:auto!important;
    min-height:50px!important;
    height:50px!important;
    flex:none!important;
    z-index:2!important;
    background:#fff!important;
  }
  .bizNav{
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-gutter:stable!important;
  }
}

/* =========================================================
   v270 — Desktop tab bottom-gap / excess-scroll permanent fix
   The desktop UI is intentionally rendered with html{zoom:1.25}.
   Any page-level 100vh/min-height therefore becomes 25% taller than
   the actually visible viewport and creates a blank scroll area below
   tabs. Counter only page-layout viewport sizing; drawers/modals stay
   untouched. Mobile remains unchanged.
   ========================================================= */
@media screen and (min-device-width:901px){
  .bizShell{
    min-height:80vh!important;
    min-height:80dvh!important;
  }

  .bizWorkspace{
    padding-bottom:0!important;
  }

  /* Generic tab pages must size to their content instead of reserving
     an oversized 100vh block underneath the visible content. */
  .viewPane.hPage{
    min-height:0!important;
  }

  /* Full-screen style purchase/sale views keep the same visual fill,
     but use the real visible desktop viewport under 125% CSS zoom. */
  #purchasesView .purchaseClone,
  #salesView .sellClone{
    height:calc(80dvh - 64px)!important;
    min-height:520px!important;
  }

  /* Due ledger's own viewport formula also needs the same zoom correction. */
  #dueView .dueSplit{
    height:calc(80dvh - 205px)!important;
  }
}

/* =========================================================
   v271 — Global desktop app viewport / bottom-gap root fix
   Desktop intentionally uses html{zoom:1.25}. 80dvh therefore renders
   as one physical viewport. Keep the outer document fixed and let only
   the workspace (and sidebar nav) scroll. This removes the blank tail
   below every tab without changing page-specific business UI/logic.
   ========================================================= */
@media screen and (min-device-width:901px){
  html,body{
    height:80vh!important;
    height:80dvh!important;
    min-height:80vh!important;
    min-height:80dvh!important;
    overflow:hidden!important;
  }

  .bizShell{
    height:80vh!important;
    height:80dvh!important;
    min-height:80vh!important;
    min-height:80dvh!important;
    max-height:80vh!important;
    max-height:80dvh!important;
    overflow:hidden!important;
  }

  .bizWorkspace{
    height:80vh!important;
    height:80dvh!important;
    min-height:0!important;
    max-height:80vh!important;
    max-height:80dvh!important;
    overflow-y:auto!important;
    overflow-x:auto!important;
    overscroll-behavior-y:contain!important;
    padding-bottom:0!important;
  }

  /* Keep every normal tab inside the real visible app viewport.
     Long content still scrolls naturally inside .bizWorkspace. */
  .viewPane.active{
    min-height:0!important;
  }

  /* hPage pages should not reserve an extra document-height tail. */
  .viewPane.hPage{
    min-height:calc(80dvh - 50px)!important;
  }
}


/* v273 — Purchase Add Product supplier selector */
.productSupplierField{position:relative;display:grid;gap:7px;margin:0 0 10px}.productSupplierLabel{font-size:13px;font-weight:800;color:#27364d}.productSupplierLabel i,.productSupplierModalCard i{color:#ef3d45;font-style:normal}.productSupplierInputWrap{position:relative;display:flex}.productSupplierInputWrap input{width:100%;height:42px;border:1px solid #d8dee8;border-radius:6px;padding:0 76px 0 12px;outline:none;background:#fff}.productSupplierInputWrap input:focus{border-color:#2d7df6;box-shadow:0 0 0 2px rgba(45,125,246,.12)}.productSupplierInputWrap button{position:absolute;top:1px;height:40px;border:0;background:transparent;cursor:pointer;color:#64748b;font-size:18px}.productSupplierInputWrap #productSupplierToggle{right:2px;width:38px}.productSupplierInputWrap #productSupplierClear{right:38px;width:32px}.productSupplierResults{position:absolute;z-index:20;left:0;right:0;top:68px;max-height:220px;overflow:auto;background:#fff;border:1px solid #d8e0eb;border-radius:8px;box-shadow:0 12px 28px rgba(28,45,75,.16)}.productSupplierResults button{width:100%;border:0;background:#fff;padding:10px 12px;text-align:left;display:grid;gap:2px;cursor:pointer}.productSupplierResults button:hover{background:#eef5ff}.productSupplierResults b{font-size:13px;color:#21324a}.productSupplierResults small{font-size:12px;color:#64748b}.productSupplierQuickAdd{justify-self:start;border:0;background:transparent;color:#1769e0;font-weight:800;cursor:pointer;padding:2px 0}.productSupplierError{color:#e2393f;font-weight:700}.productSupplierModal{position:absolute;inset:0;z-index:40;display:none;place-items:center}.productSupplierModal.open{display:grid}.productSupplierModalScrim{position:absolute;inset:0;border:0;background:rgba(24,36,55,.38)}.productSupplierModalCard{position:relative;width:min(390px,calc(100% - 30px));background:#fff;border-radius:10px;box-shadow:0 20px 50px rgba(15,23,42,.25);overflow:hidden}.productSupplierModalHead{height:56px;border-bottom:1px solid #e6e9ef;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.productSupplierModalHead h3{margin:0;font-size:17px;color:#1f2f46}.productSupplierModalHead button{border:0;background:transparent;font-size:25px;cursor:pointer}.productSupplierModalCard form{padding:18px;display:grid;gap:14px}.productSupplierModalCard label{display:grid;gap:6px;font-size:13px;font-weight:800;color:#29394e}.productSupplierModalCard input{height:42px;border:1px solid #d8dee8;border-radius:6px;padding:0 11px;outline:none}.productSupplierModalActions{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}.productSupplierModalActions button{height:40px;padding:0 20px;border-radius:6px;border:1px solid #d5dbe5;background:#fff;font-weight:800;cursor:pointer}.productSupplierModalActions button[type=submit]{background:#1769e0;border-color:#1769e0;color:#fff}.productSupplierDuplicate{padding:10px;border:1px solid #f4bfc2;background:#fff6f6;color:#a32c32;border-radius:6px;font-size:12px;line-height:1.45}.productSupplierDuplicate button{margin-top:8px;width:100%;height:34px;border:0;border-radius:5px;background:#151515;color:#fff;font-weight:800}.productAddSubmit:disabled{opacity:.45;cursor:not-allowed}.productSupplierField.isSelected .productSupplierInputWrap input{border-color:#2d7df6;background:#f7fbff;font-weight:800;color:#1d3352}

/* v274 — Professional Purchase > Add Product UI (approved mockup) */
#purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
  width:560px;
  max-width:min(94vw,560px);
  background:#fff;
  border-left:1px solid #e8edf5;
  box-shadow:-18px 0 48px rgba(17,34,68,.16);
}
#purchaseAddOverlay[data-source="purchase"] .productAddHeader{
  height:64px;min-height:64px;padding:0 64px;
  border-bottom:1px solid #e7ecf3;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
#purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
  font-size:22px;font-weight:900;letter-spacing:-.2px;color:#172b4d;
}
#purchaseAddOverlay[data-source="purchase"] .productAddClose{
  right:18px;top:13px;width:38px;height:38px;border-radius:10px;
  color:#172b4d;font-size:28px;line-height:1;
}
#purchaseAddOverlay[data-source="purchase"] .productAddClose:hover{background:#f1f5f9}
#purchaseAddOverlay[data-source="purchase"] .productAddScroll{padding:20px 24px 24px}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox{
  height:104px;border:1.5px dashed #9fc3fa;border-radius:10px;
  background:linear-gradient(180deg,#fbfdff,#f7fbff);gap:4px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox .uploadIcon{font-size:30px;color:#17345f;line-height:28px}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox span{font-size:13px;color:#3f5577}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox small{font-size:11px;color:#8b9ab2}
#purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
  margin:22px 0 15px;padding:0 0 10px;font-size:18px;font-weight:900;color:#172b4d;
  border-bottom:1px solid #dce4ef;
}
#purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle:before{content:"▣";margin-right:9px;color:#1b4b8f;font-size:16px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField{gap:8px;margin-bottom:16px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{font-size:14px;color:#1f3351;font-weight:900}
#purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{display:grid;grid-template-columns:minmax(0,1fr) 164px;gap:10px;align-items:start}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{position:relative;display:block}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;color:#1f4d8f;font-size:20px;pointer-events:none
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
  height:48px;border:1.5px solid #8db7f7;border-radius:9px;padding:0 72px 0 42px;
  font-size:13px;font-weight:700;color:#1f3351;background:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input::placeholder{color:#8a99ad;font-weight:600}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input:focus{border-color:#2478f3;box-shadow:0 0 0 3px rgba(36,120,243,.12)}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap button{height:46px;top:1px;color:#527096}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:2px;width:38px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:38px;width:32px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
  height:48px;padding:0 12px;border:0;border-radius:9px;background:linear-gradient(135deg,#176ff2,#0f5ed8);
  color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;box-shadow:0 7px 16px rgba(23,105,224,.18)
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{font-size:20px;line-height:1}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{font-size:12px;line-height:1.25}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd:hover{filter:brightness(.98);transform:translateY(-1px)}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
  top:54px;left:0;right:0;max-height:230px;border:1px solid #d7e1ef;border-radius:10px;
  box-shadow:0 16px 36px rgba(25,45,78,.18);overflow:auto
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button{padding:11px 13px 11px 44px;position:relative;border-bottom:1px solid #edf1f6}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button:last-child{border-bottom:0}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button:before{content:"♙";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:20px;color:#234c84}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button:hover{background:#eef5ff}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults b{font-size:13px;color:#172b4d}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults small{font-size:11px;color:#72829a}
#purchaseAddOverlay[data-source="purchase"] .productSupplierError{font-size:11px;margin-top:2px}
#purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){gap:7px;margin-bottom:13px;font-size:13px;font-weight:900;color:#1f3351}
#purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
#purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
#purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
#purchaseAddOverlay[data-source="purchase"] .productAddForm select{
  height:46px;border:1px solid #cfd8e6;border-radius:9px;padding:0 13px;font-size:13px;color:#233a5a;background:#fff
}
#purchaseAddOverlay[data-source="purchase"] .productAddForm input:focus,
#purchaseAddOverlay[data-source="purchase"] .productAddForm select:focus{border-color:#2478f3;box-shadow:0 0 0 3px rgba(36,120,243,.1)}
#purchaseAddOverlay[data-source="purchase"] .productPrimaryName{margin-top:2px}
#purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{gap:14px}
#purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
#purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{grid-template-columns:1fr 1fr;align-items:end}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
  height:46px;margin-bottom:13px;padding:0 13px;border:1px solid #cfd8e6;border-radius:9px;
  font-size:13px!important;font-weight:900!important;background:#fff;color:#1f3351!important
}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b{width:40px;height:22px}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b:before{width:18px;height:18px}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle input:checked+b:before{transform:translateX(18px)}
#purchaseAddOverlay[data-source="purchase"] .purchaseAdvancedField{display:none!important}
#purchaseAddOverlay[data-source="purchase"] .productAddActions{
  height:72px;min-height:72px;padding:12px 24px;gap:14px;border-top:1px solid #e5ebf3;
  box-shadow:0 -8px 22px rgba(21,45,80,.05)
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions button{height:46px;border-radius:9px;font-size:14px;font-weight:900}
#purchaseAddOverlay[data-source="purchase"] .productAddCancel{border:1px solid #cdd7e5;color:#233a5a;background:#fff}
#purchaseAddOverlay[data-source="purchase"] .productAddSubmit{background:linear-gradient(135deg,#176ff2,#0f5ed8);border-color:#1769e0;color:#fff}
#purchaseAddOverlay[data-source="purchase"] .productAddSubmit:disabled{background:#a7abb1;border-color:#a7abb1;color:#fff;opacity:1}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalCard{width:min(420px,calc(100% - 34px));border-radius:14px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalHead{height:62px;padding:0 20px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalHead h3{font-size:18px;font-weight:900;color:#172b4d}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalCard form{padding:20px;gap:15px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalCard label{font-size:13px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalCard input{height:44px;border-radius:8px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierModalActions button{height:42px;border-radius:8px}

@media (max-width:720px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{width:100%;max-width:100vw}
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{padding:16px}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{grid-template-columns:1fr}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{width:100%}
  #purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{grid-template-columns:1fr}
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{padding:10px 14px}
}

/* v275 — Purchase Add Product supplier control polish (targeted UI only) */
#purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 156px;
  gap:12px;
  align-items:stretch;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
  position:relative;
  display:block;
  min-width:0;
  height:52px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
  position:absolute;
  left:14px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  z-index:3;
  pointer-events:none;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon:before{
  content:"";
  position:absolute;
  left:7px;
  top:1px;
  width:7px;
  height:7px;
  border:2px solid #315f9f;
  border-radius:50%;
  box-sizing:border-box;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon:after{
  content:"";
  position:absolute;
  left:4px;
  bottom:1px;
  width:14px;
  height:9px;
  border:2px solid #315f9f;
  border-bottom:0;
  border-radius:9px 9px 0 0;
  box-sizing:border-box;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
  width:100%;
  height:52px;
  box-sizing:border-box;
  border:1px solid #cbd8e8;
  border-radius:10px;
  padding:0 78px 0 50px;
  font-size:13px;
  font-weight:700;
  color:#1f3351;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input:focus{
  border-color:#2478f3;
  box-shadow:0 0 0 3px rgba(36,120,243,.10);
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input::placeholder{
  color:#8b9ab0;
  font-weight:600;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
  position:absolute;
  z-index:2;
  left:50px;
  right:82px;
  top:7px;
  min-width:0;
  display:grid;
  gap:1px;
  pointer-events:none;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView[hidden]{display:none!important}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#172b4d;
  font-size:13px;
  line-height:18px;
  font-weight:900;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#71829a;
  font-size:11px;
  line-height:16px;
  font-weight:600;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierInputWrap input{
  color:transparent;
  caret-color:transparent;
  background:#f8fbff;
  border-color:#8db7f7;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap button{
  top:6px;
  width:34px;
  height:40px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#607a9d;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:17px;
  line-height:1;
  transition:background .15s ease,color .15s ease;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap button:hover{
  background:#eef5ff;
  color:#1769e0;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:41px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:5px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
  height:52px;
  min-width:0;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:#176ff2;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:900;
  box-shadow:0 7px 16px rgba(23,105,224,.16);
  cursor:pointer;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{
  flex:0 0 auto;
  font-size:17px;
  line-height:1;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
  font-size:11.5px;
  line-height:1.25;
  white-space:nowrap;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
  top:58px;
  left:0;
  right:0;
  max-height:230px;
  overflow:auto;
  border:1px solid #d7e1ef;
  border-radius:10px;
  background:#fff;
  box-shadow:0 16px 36px rgba(25,45,78,.16);
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button{
  min-height:54px;
  padding:8px 12px 8px 48px;
  position:relative;
  border-bottom:1px solid #edf1f6;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button:before{
  content:"";
  position:absolute;
  left:16px;
  top:17px;
  width:16px;
  height:16px;
  border:1.8px solid #315f9f;
  border-radius:50%;
  box-sizing:border-box;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults b{font-size:13px;line-height:18px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults small{font-size:11px;line-height:15px}

@media (max-width:720px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{grid-template-columns:1fr;gap:8px}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{width:100%;height:48px}
}

/* v276 — Approved premium right-side Purchase > Add Product drawer (UI only) */
#purchaseAddOverlay[data-source="purchase"] .productAddScrim{
  background:rgba(15,28,48,.50);
  backdrop-filter:blur(2px);
}
#purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
  width:570px;
  max-width:min(92vw,570px);
  height:100%;
  right:0;
  top:0;
  border-left:1px solid #e3eaf3;
  border-radius:16px 0 0 16px;
  background:#fff;
  box-shadow:-24px 0 64px rgba(15,31,55,.22);
  overflow:hidden;
}
#purchaseAddOverlay[data-source="purchase"] .productAddHeader{
  height:70px;
  min-height:70px;
  padding:0 68px 0 28px;
  justify-content:flex-start;
  border-bottom:1px solid #e7edf5;
  background:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
  position:relative;
  margin:0;
  padding-left:46px;
  font-size:25px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.35px;
  color:#142d54;
}
#purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  border-radius:9px;
  background:linear-gradient(145deg,#edf5ff,#f8fbff);
  border:1px solid #d9e8fb;
  box-shadow:0 4px 12px rgba(27,105,224,.08);
}
#purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{
  content:"◇";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-52%);
  font-size:25px;
  font-weight:900;
  color:#176ff2;
}
#purchaseAddOverlay[data-source="purchase"] .productAddClose{
  right:20px;
  top:16px;
  width:38px;
  height:38px;
  border-radius:10px;
  font-size:29px;
  color:#122c52;
}
#purchaseAddOverlay[data-source="purchase"] .productAddClose:hover{background:#f1f6fc}
#purchaseAddOverlay[data-source="purchase"] .productAddScroll{
  padding:18px 26px 28px;
  background:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox{
  height:112px;
  border:1.5px dashed #7fb3ff;
  border-radius:12px;
  background:linear-gradient(180deg,#fbfdff 0%,#f7fbff 100%);
  gap:5px!important;
  box-shadow:inset 0 0 0 1px rgba(80,145,240,.03);
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox:hover{
  border-color:#176ff2;
  background:#f5f9ff;
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox .uploadIcon{
  font-size:31px;
  line-height:30px;
  color:#176ff2;
  font-weight:800;
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox span{
  font-size:13px;
  line-height:18px;
  color:#3e5271;
  font-weight:700!important;
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox span u{color:#176ff2;text-underline-offset:2px}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox small{
  font-size:10.5px;
  color:#8b9ab0;
  font-weight:650;
}
#purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
  position:relative;
  margin:21px 0 15px;
  padding:0 0 12px 40px;
  min-height:28px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #dce5f0;
  font-size:19px;
  line-height:1.1;
  font-weight:900;
  color:#142d54;
}
#purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle:before{
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#eef5ff;
  border:1px solid #dce9fb;
  margin:0;
}
#purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle:after{
  content:"◇";
  position:absolute;
  left:7px;
  top:2px;
  color:#245da8;
  font-size:18px;
  font-weight:900;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField{
  gap:8px;
  margin:0 0 17px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{
  font-size:14px;
  line-height:20px;
  font-weight:900;
  color:#1b3253;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
  grid-template-columns:minmax(0,1fr) 168px;
  gap:11px;
  align-items:stretch;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
  height:52px;
  min-width:0;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
  height:52px;
  padding:0 82px 0 52px;
  border:1.5px solid #82b1f7;
  border-radius:10px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  color:#1c3558;
  box-shadow:0 1px 2px rgba(19,45,82,.03);
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input:focus{
  border-color:#176ff2;
  box-shadow:0 0 0 3px rgba(23,111,242,.11);
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{left:15px;width:22px;height:22px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
  left:52px;
  right:82px;
  top:7px;
  gap:0;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{
  font-size:13px;
  line-height:18px;
  font-weight:900;
  color:#173055;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
  font-size:11px;
  line-height:16px;
  color:#71839d;
  font-weight:650;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierInputWrap input{
  color:transparent;
  caret-color:transparent;
  background:#f8fbff;
  border-color:#77aaf6;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap button{
  top:7px;
  height:38px;
  width:34px;
  border-radius:8px;
  color:#587493;
  font-size:17px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:42px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:5px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
  height:52px;
  padding:0 13px;
  border-radius:10px;
  background:linear-gradient(135deg,#1d79f4 0%,#0d63df 100%);
  box-shadow:0 8px 18px rgba(23,105,224,.20);
  gap:8px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{
  font-size:18px;
  color:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
  font-size:12px;
  line-height:1.22;
  font-weight:900;
  color:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
  top:58px;
  left:0;
  right:0;
  max-height:225px;
  border:1px solid #d7e2f0;
  border-radius:11px;
  background:#fff;
  box-shadow:0 18px 42px rgba(19,42,76,.18);
  padding:4px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button{
  min-height:54px;
  padding:8px 12px 8px 50px;
  border:0;
  border-radius:8px;
  background:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button+button{margin-top:2px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button:hover{background:#eef5ff}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults button:before{
  left:15px;
  top:18px;
  width:18px;
  height:18px;
  border-color:#315f9f;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults b{
  color:#173055;
  font-size:13px;
  line-height:18px;
  font-weight:900;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults small{
  color:#71839d;
  font-size:11px;
  line-height:15px;
}
#purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
  gap:7px;
  margin-bottom:14px;
  font-size:13px;
  line-height:18px;
  font-weight:900;
  color:#1b3253;
}
#purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
#purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
#purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
#purchaseAddOverlay[data-source="purchase"] .productAddForm select{
  height:48px;
  border:1px solid #cad6e6;
  border-radius:10px;
  padding:0 14px;
  background:#fff;
  color:#213957;
  font-size:13px;
  font-weight:650;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#purchaseAddOverlay[data-source="purchase"] .productAddForm input::placeholder{color:#8a98aa;font-weight:600}
#purchaseAddOverlay[data-source="purchase"] .productAddForm input:focus,
#purchaseAddOverlay[data-source="purchase"] .productAddForm select:focus{
  border-color:#3c86f4;
  box-shadow:0 0 0 3px rgba(60,134,244,.09);
}
#purchaseAddOverlay[data-source="purchase"] .productPrimaryName{margin-top:0}
#purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{gap:15px}
#purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
#purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{
  grid-template-columns:1fr 1fr;
  align-items:end;
}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
  height:48px;
  margin-bottom:14px;
  padding:0 13px;
  border:1px solid #cad6e6;
  border-radius:10px;
  background:#fff;
  color:#1b3253!important;
  font-size:13px!important;
  font-weight:900!important;
}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle:after{
  content:"?";
  margin-left:auto;
  margin-right:9px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#64748b;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
#purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b{width:40px;height:22px;flex:0 0 auto}
#purchaseAddOverlay[data-source="purchase"] .productAddActions{
  height:76px;
  min-height:76px;
  padding:12px 26px;
  gap:14px;
  border-top:1px solid #e4ebf4;
  background:#fff;
  box-shadow:0 -10px 28px rgba(16,37,69,.06);
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions button{
  height:50px;
  border-radius:10px;
  font-size:14px;
  font-weight:900;
}
#purchaseAddOverlay[data-source="purchase"] .productAddCancel{
  border:1px solid #cbd7e5;
  background:#fff;
  color:#1f3655;
}
#purchaseAddOverlay[data-source="purchase"] .productAddCancel:hover{background:#f7faff}
#purchaseAddOverlay[data-source="purchase"] .productAddSubmit{
  border-color:#176ff2;
  background:linear-gradient(135deg,#1d79f4 0%,#0d63df 100%);
  color:#fff;
  box-shadow:0 7px 16px rgba(23,105,224,.16);
}
#purchaseAddOverlay[data-source="purchase"] .productAddSubmit:disabled{
  border-color:#aeb5bf;
  background:#aeb5bf;
  box-shadow:none;
  color:#fff;
}
#purchaseAddOverlay[data-source="purchase"] .productAddScroll::-webkit-scrollbar{width:6px}
#purchaseAddOverlay[data-source="purchase"] .productAddScroll::-webkit-scrollbar-track{background:transparent}
#purchaseAddOverlay[data-source="purchase"] .productAddScroll::-webkit-scrollbar-thumb{background:#9aa7b7;border-radius:10px}

@media (max-width:720px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:100%;
    max-width:100vw;
    border-radius:0;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader{padding-left:20px}
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{font-size:21px;padding-left:0}
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:before,
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{display:none}
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{padding:16px}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{grid-template-columns:1fr;gap:9px}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{width:100%;height:48px}
  #purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{grid-template-columns:1fr}
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{padding:10px 14px;height:70px;min-height:70px}
}

/* v277 — overlap-safe compact Purchase > Add Product drawer (UI only) */
#purchaseAddOverlay[data-source="purchase"] .productAddScroll{
  padding:16px 22px 18px;
}
#purchaseAddOverlay[data-source="purchase"] .productUploadBox{
  height:94px;
  margin-bottom:0;
}
#purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
  margin:16px 0 12px;
  padding-bottom:8px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField{
  gap:7px;
  margin-bottom:12px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 158px;
  gap:10px;
  align-items:stretch;
  min-width:0;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  height:50px;
  isolation:isolate;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
  height:50px;
  box-sizing:border-box;
  padding:0 86px 0 50px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
  left:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:22px;
  height:22px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
  position:absolute;
  z-index:3;
  left:50px;
  right:86px;
  top:6px;
  bottom:6px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  overflow:hidden;
  pointer-events:none;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView[hidden]{display:none!important}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b,
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{
  font-size:13px;
  line-height:17px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
  margin-top:1px;
  font-size:10.5px;
  line-height:14px;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierInputWrap input{
  color:transparent!important;
  text-shadow:none!important;
  caret-color:transparent!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  top:6px;
  height:38px;
  width:34px;
  z-index:5;
  margin:0;
  padding:0;
  line-height:1;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:42px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:5px}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
  width:158px;
  min-width:158px;
  max-width:158px;
  height:50px;
  padding:0 10px;
  box-sizing:border-box;
  overflow:hidden;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{flex:0 0 auto}
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
  min-width:0;
  overflow:hidden;
  font-size:11.5px;
  line-height:1.2;
  white-space:normal;
  text-align:center;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
  top:56px;
  z-index:30;
  width:100%;
  box-sizing:border-box;
}
#purchaseAddOverlay[data-source="purchase"] .productPrimaryName,
#purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
#purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{
  margin-top:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
  margin-bottom:10px;
}
#purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{
  gap:10px;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions{
  padding:10px 22px;
}

@media (max-width:720px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
    grid-template-columns:1fr;
    gap:8px;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    width:100%;
    min-width:0;
    max-width:none;
    height:46px;
  }
}

/* v278 — Purchase supplier selected-state overlap fix */
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierInputWrap input::placeholder{
  color:transparent!important;
  opacity:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierInputWrap input{
  color:transparent!important;
  text-shadow:none!important;
  caret-color:transparent!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
  z-index:4;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierPersonIcon{
  z-index:5;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
  left:52px;
  right:90px;
}


/* v279 — definitive supplier control overlap fix */
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
  position:relative;
  display:block;
  min-width:0;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
  position:absolute;
  left:16px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:24px!important;
  height:24px!important;
  z-index:6!important;
  pointer-events:none;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
  box-sizing:border-box!important;
  padding-left:62px!important;
  padding-right:92px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input::placeholder{
  padding:0!important;
  text-indent:0!important;
}
/* Selected supplier is rendered by its own view; never render the search input underneath it. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierInputWrap input{
  visibility:hidden!important;
  pointer-events:none!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
  display:flex!important;
  left:58px!important;
  right:92px!important;
  z-index:7!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierPersonIcon{
  z-index:8!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  z-index:9!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField:not(.isSelected) .productSupplierSelectedView{
  display:none!important;
}

/* v280 product image persistence + preview */
.productUploadBox{position:relative;overflow:hidden}
.productUploadPreview{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;border-radius:8px;background:#fff;z-index:1}
.productUploadBox.hasImage .uploadIcon,.productUploadBox.hasImage>span,.productUploadBox.hasImage>small{opacity:0}
.productUploadBox.hasImage strong{position:absolute;left:10px;right:10px;bottom:5px;z-index:2;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:5px;text-align:center}


/* v283 — stable compact right-edge Purchase Add Product drawer */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:440px!important;
    max-width:440px!important;
    right:0!important;
    left:auto!important;
    top:0!important;
    height:100dvh!important;
    border-radius:14px 0 0 14px!important;
    overflow:hidden!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader{
    height:58px!important;
    min-height:58px!important;
    padding:0 56px 0 22px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
    font-size:19px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{
    padding:14px 18px 16px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox{
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    overflow:hidden!important;
    position:relative!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadPreview{
    position:absolute!important;
    inset:7px!important;
    width:calc(100% - 14px)!important;
    height:calc(100% - 14px)!important;
    max-width:calc(100% - 14px)!important;
    max-height:calc(100% - 14px)!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:7px!important;
    background:#fff!important;
    z-index:1!important;
    pointer-events:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
    margin:14px 0 10px!important;
    padding-bottom:7px!important;
    font-size:16px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
    grid-template-columns:minmax(0,1fr) 132px!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    height:44px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    padding:0 7px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
    font-size:10.5px!important;
    line-height:1.15!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    left:12px!important;
    width:20px!important;
    height:20px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
    padding-left:44px!important;
    padding-right:70px!important;
    font-size:12px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
    left:44px!important;
    right:70px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    top:3px!important;
    height:38px!important;
    width:30px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:34px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:3px!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
    margin-bottom:9px!important;
    gap:5px!important;
    font-size:12px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
  #purchaseAddOverlay[data-source="purchase"] .productAddForm select{
    height:40px!important;
    font-size:12px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{gap:9px!important}
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{height:40px!important;margin-bottom:9px!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{
    height:62px!important;
    min-height:62px!important;
    padding:9px 16px!important;
    gap:10px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions button{
    height:42px!important;
    font-size:12px!important;
  }
}

/* v284 — restore Purchase Add Supplier button visibility/alignment only */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 132px!important;
    gap:8px!important;
    align-items:stretch!important;
    width:100%!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    inset:auto!important;
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:44px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    margin:0!important;
    padding:0 7px!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:8px!important;
    background:#1769e0!important;
    color:#fff!important;
    box-sizing:border-box!important;
    z-index:2!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
    display:block!important;
    min-width:0!important;
    color:#fff!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    text-align:center!important;
    white-space:normal!important;
  }
}

/* v285 — restore ONLY the two Purchase > Add Product footer buttons */
#purchaseAddOverlay[data-source="purchase"] .productAddActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:50!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions .productAddCancel,
#purchaseAddOverlay[data-source="purchase"] .productAddActions .productAddSubmit{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:51!important;
  width:100%!important;
}

/* v286 — restore Purchase > Add Product footer controls only */
#purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
  padding-bottom:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddForm{
  min-height:0!important;
  height:calc(100% - 50px)!important;
  display:flex!important;
  flex-direction:column!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddScroll{
  flex:1 1 auto!important;
  min-height:0!important;
  padding-bottom:18px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions{
  flex:0 0 62px!important;
  height:62px!important;
  min-height:62px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:9px 16px!important;
  margin:0!important;
  border-top:1px solid #e2e8f0!important;
  background:#fff!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  position:relative!important;
  z-index:100!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions > button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  margin:0!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
  border-radius:8px!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:101!important;
  font-family:inherit!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  text-indent:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddCancel{
  background:#fff!important;
  color:#213a5c!important;
  border:1px solid #cbd5e1!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit{
  background:linear-gradient(135deg,#176ff2,#0f5ed8)!important;
  color:#fff!important;
  border:1px solid #1769e0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit:disabled{
  background:#aeb5bf!important;
  border-color:#aeb5bf!important;
  color:#fff!important;
  opacity:1!important;
}


/* v290 — VERIFIED reference-match Purchase > Add Product drawer UI only */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:570px!important;
    max-width:min(570px,92vw)!important;
    height:100dvh!important;
    top:0!important;right:0!important;left:auto!important;
    border-radius:16px 0 0 16px!important;
    overflow:hidden!important;
    background:#fff!important;
    box-shadow:-22px 0 58px rgba(15,31,55,.22)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader{
    height:70px!important;min-height:70px!important;
    padding:0 64px 0 28px!important;
    background:#fff!important;border-bottom:1px solid #e6edf5!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
    font-size:25px!important;line-height:1!important;padding-left:46px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:before{display:block!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{display:block!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddClose{
    right:18px!important;top:16px!important;width:38px!important;height:38px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm{
    height:calc(100% - 70px)!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{
    flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    padding:18px 26px 24px!important;background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox{
    height:112px!important;min-height:112px!important;max-height:112px!important;
    margin:0!important;border:1.5px dashed #7fb3ff!important;border-radius:12px!important;
    overflow:hidden!important;background:#fbfdff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadPreview{
    position:absolute!important;inset:7px!important;width:calc(100% - 14px)!important;height:calc(100% - 14px)!important;
    max-width:calc(100% - 14px)!important;max-height:calc(100% - 14px)!important;object-fit:contain!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
    margin:18px 0 13px!important;padding-bottom:10px!important;font-size:20px!important;line-height:1.2!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField{
    gap:7px!important;margin:0 0 15px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{
    font-size:14px!important;line-height:20px!important;font-weight:900!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
    display:block!important;position:relative!important;width:100%!important;min-width:0!important;overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
    width:100%!important;height:50px!important;min-width:0!important;position:relative!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
    width:100%!important;height:50px!important;box-sizing:border-box!important;
    padding:0 86px 0 52px!important;border:1px solid #2f7ff4!important;border-radius:10px!important;
    font-size:13px!important;background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    left:15px!important;top:50%!important;width:24px!important;height:24px!important;z-index:6!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    top:6px!important;height:38px!important;width:34px!important;z-index:9!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:41px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:5px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
    left:52px!important;right:86px!important;top:6px!important;bottom:6px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    position:absolute!important;left:0!important;right:0!important;top:56px!important;width:100%!important;
    max-height:300px!important;overflow-y:auto!important;box-sizing:border-box!important;
    padding:7px!important;border:1px solid #dbe4f0!important;border-radius:10px!important;
    background:#fff!important;box-shadow:0 14px 30px rgba(17,38,69,.18)!important;z-index:200!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults button[data-product-supplier-id]{
    width:100%!important;min-height:54px!important;padding:8px 12px 8px 52px!important;
    border:0!important;border-radius:8px!important;text-align:left!important;background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults button[data-product-supplier-id]:hover{background:#eaf3ff!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults button[data-product-supplier-id] b{font-size:13px!important;line-height:18px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults button[data-product-supplier-id] small{font-size:11px!important;line-height:15px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;inset:auto!important;
    width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;margin:5px 0 0!important;
    padding:0 12px!important;justify-content:flex-start!important;gap:8px!important;
    border:0!important;border-radius:8px!important;background:#e8f2ff!important;color:#0d67df!important;
    box-shadow:none!important;transform:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{font-size:18px!important;color:#0d67df!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
    font-size:12px!important;line-height:1.2!important;color:#0d67df!important;text-align:left!important;white-space:nowrap!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
    gap:7px!important;margin-bottom:14px!important;font-size:13px!important;line-height:18px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
  #purchaseAddOverlay[data-source="purchase"] .productAddForm select{
    height:48px!important;border-radius:10px!important;font-size:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{gap:14px!important}
  #purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{grid-template-columns:1fr 1fr!important;align-items:end!important}
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
    height:48px!important;margin-bottom:14px!important;border-radius:10px!important;font-size:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .purchaseAdvancedField{display:none!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{
    flex:0 0 76px!important;height:76px!important;min-height:76px!important;
    display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:14px!important;
    padding:12px 26px!important;margin:0!important;align-items:center!important;
    border-top:1px solid #e4ebf4!important;background:#fff!important;box-shadow:0 -8px 24px rgba(16,37,69,.05)!important;
    position:relative!important;z-index:100!important;visibility:visible!important;opacity:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > button{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;height:50px!important;border-radius:10px!important;font-size:14px!important;font-weight:900!important;
    visibility:visible!important;opacity:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddCancel{
    background:#fff!important;color:#1f3655!important;border:1px solid #cbd7e5!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSubmit{
    background:#071b37!important;color:#fff!important;border:1px solid #071b37!important;box-shadow:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSubmit:disabled{
    background:#9ca3af!important;border-color:#9ca3af!important;color:#fff!important;opacity:1!important;
  }
}

@media (min-width:721px) and (max-width:1100px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{width:520px!important;max-width:92vw!important}
}

/* v290 final specificity corrections after rendered verification */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddCancel{
    background:#fff!important;
    background-image:none!important;
    color:#1f3655!important;
    border:1px solid #cbd7e5!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit{
    background:#071b37!important;
    background-image:none!important;
    color:#fff!important;
    border:1px solid #071b37!important;
    box-shadow:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit:disabled{
    background:#9ca3af!important;
    background-image:none!important;
    border-color:#9ca3af!important;
    color:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    display:block!important;
    position:relative!important;
    text-align:left!important;
    padding-left:52px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:"♙"!important;
    position:absolute!important;
    left:15px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:26px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    border:1px solid #d9e7fb!important;
    background:#f3f8ff!important;
    color:#176ff2!important;
    font-size:16px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    display:block!important;
    text-align:left!important;
  }
}

/* v291 — FINAL reference-locked Purchase > Add Product drawer. Visual-only, scoped. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:460px!important;
    max-width:calc(100vw - 16px)!important;
    height:80dvh!important; /* counter project desktop html zoom:1.25 */
    max-height:80dvh!important;
    top:0!important;right:0!important;bottom:auto!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:-10px 0 30px rgba(10,30,55,.15)!important;
    overflow:hidden!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader{
    height:60px!important;min-height:60px!important;
    padding:0 52px 0 22px!important;
    justify-content:flex-start!important;
    border-bottom:1px solid #e6edf5!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
    padding-left:40px!important;
    font-size:21px!important;line-height:1!important;
    letter-spacing:-.15px!important;color:#112b50!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:before{
    display:block!important;width:30px!important;height:30px!important;
    border-radius:8px!important;left:0!important;
    background:#f2f7ff!important;border:1px solid #dbe9fb!important;
    box-shadow:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{
    display:flex!important;content:"◇"!important;left:7px!important;
    color:#0876ff!important;font-size:19px!important;border:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddClose{
    right:14px!important;top:12px!important;width:34px!important;height:34px!important;
    font-size:23px!important;color:#102845!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm{
    height:calc(100% - 60px)!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{
    flex:1 1 auto!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    padding:14px 20px 18px!important;background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox{
    height:80px!important;min-height:80px!important;max-height:80px!important;
    margin:0!important;border:1.25px dashed #77adff!important;
    border-radius:9px!important;background:#fbfdff!important;
    gap:1px!important;overflow:hidden!important;position:relative!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox .uploadIcon{
    font-size:24px!important;line-height:22px!important;color:#0876ff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox span{font-size:11px!important;line-height:15px!important}
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox small{font-size:8px!important;line-height:12px!important}
  #purchaseAddOverlay[data-source="purchase"] .productUploadPreview{
    position:absolute!important;inset:6px!important;width:calc(100% - 12px)!important;height:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;max-height:calc(100% - 12px)!important;
    object-fit:contain!important;border-radius:6px!important;background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
    position:relative!important;margin:14px 0 11px!important;
    padding:0 0 9px 38px!important;min-height:28px!important;
    display:flex!important;align-items:center!important;
    border-bottom:1px solid #dfe7f1!important;
    font-size:18px!important;line-height:1.1!important;font-weight:900!important;color:#112b50!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle:before{
    left:0!important;top:0!important;width:27px!important;height:27px!important;border-radius:7px!important;
    background:#f1f7ff!important;border:1px solid #dce9fb!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle:after{
    content:"◇"!important;left:7px!important;top:5px!important;color:#0876ff!important;font-size:16px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField{gap:6px!important;margin:0 0 11px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{
    font-size:12px!important;line-height:16px!important;font-weight:900!important;color:#132b4a!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
    display:block!important;position:relative!important;width:100%!important;overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
    width:100%!important;height:40px!important;position:relative!important;overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
    width:100%!important;height:40px!important;box-sizing:border-box!important;
    padding:0 70px 0 42px!important;
    border:1.25px solid #1478ff!important;border-radius:8px!important;background:#fff!important;
    font-size:11.5px!important;font-weight:600!important;color:#243b5a!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input::placeholder{color:#7d8da3!important;font-weight:600!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    left:12px!important;top:50%!important;width:20px!important;height:20px!important;z-index:6!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    top:4px!important;width:30px!important;height:32px!important;font-size:14px!important;z-index:12!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:34px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:3px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
    left:42px!important;right:70px!important;top:4px!important;bottom:4px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{font-size:11.5px!important;line-height:15px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{font-size:9.5px!important;line-height:12px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    position:absolute!important;left:0!important;right:0!important;top:44px!important;width:100%!important;
    max-height:220px!important;overflow-y:auto!important;box-sizing:border-box!important;
    padding:6px!important;border:1px solid #dce5ef!important;border-radius:8px!important;
    background:#fff!important;box-shadow:0 12px 26px rgba(16,37,69,.20)!important;z-index:300!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    display:block!important;position:relative!important;width:100%!important;min-height:44px!important;
    padding:6px 10px 6px 45px!important;border:0!important;border-radius:7px!important;
    text-align:left!important;background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]:hover,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id].active{
    background:#dcecff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    left:10px!important;width:26px!important;height:26px!important;font-size:15px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
    display:block!important;font-size:11.5px!important;line-height:15px!important;color:#132b4a!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    display:block!important;font-size:9.5px!important;line-height:12px!important;color:#6f7f93!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;inset:auto!important;
    width:100%!important;height:32px!important;margin:4px 0 0!important;padding:0 10px!important;
    justify-content:flex-start!important;gap:7px!important;border:0!important;border-radius:6px!important;
    background:#e4f0ff!important;color:#0876ff!important;box-shadow:none!important;transform:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{font-size:15px!important;color:#0876ff!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
    font-size:10.5px!important;line-height:1!important;color:#0876ff!important;text-align:left!important;white-space:nowrap!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productPrimaryName{margin-top:0!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
    gap:5px!important;margin-bottom:10px!important;font-size:11px!important;line-height:15px!important;font-weight:800!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
  #purchaseAddOverlay[data-source="purchase"] .productAddForm select{
    height:38px!important;border-radius:7px!important;padding:0 10px!important;font-size:11px!important;
    border:1px solid #d5dfeb!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{gap:10px!important}
  #purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{grid-template-columns:1fr 1fr!important;align-items:end!important}
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
    height:38px!important;margin-bottom:10px!important;border-radius:7px!important;padding:0 9px!important;
    font-size:10.5px!important;line-height:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b{width:32px!important;height:18px!important}
  #purchaseAddOverlay[data-source="purchase"] .purchaseAdvancedField{display:none!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{
    flex:0 0 62px!important;height:62px!important;min-height:62px!important;
    display:grid!important;grid-template-columns:.92fr 1.5fr!important;gap:12px!important;
    padding:8px 20px!important;margin:0!important;align-items:center!important;
    border-top:1px solid #e4eaf2!important;background:#fff!important;box-shadow:none!important;
    position:relative!important;z-index:400!important;visibility:visible!important;opacity:1!important;overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > button{
    display:flex!important;visibility:visible!important;opacity:1!important;
    width:100%!important;height:46px!important;margin:0!important;padding:0 10px!important;
    align-items:center!important;justify-content:center!important;border-radius:7px!important;
    font-size:12px!important;font-weight:900!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddCancel{
    background:#fff!important;background-image:none!important;color:#1f3655!important;border:1px solid #cbd7e5!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit{
    background:#071b37!important;background-image:none!important;color:#fff!important;border:1px solid #071b37!important;box-shadow:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit:disabled{
    background:#071b37!important;background-image:none!important;border-color:#071b37!important;color:#fff!important;opacity:.56!important;
  }
}
@media (min-width:721px) and (max-width:900px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{width:430px!important;max-width:92vw!important}
}

/* v291 verification refinements: lock header cube + supplier result alignment */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{
    content:""!important;
    left:6px!important;top:50%!important;width:18px!important;height:18px!important;
    transform:translateY(-50%)!important;
    background-repeat:no-repeat!important;background-position:center!important;background-size:18px 18px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230876ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 3.5 6.7 12 11.4l8.5-4.7L12 2Z'/%3E%3Cpath d='M3.5 6.7V17.3L12 22V11.4'/%3E%3Cpath d='M20.5 6.7V17.3L12 22'/%3E%3C/svg%3E")!important;
    border:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:9px!important;row-gap:0!important;
    align-items:center!important;
    padding:6px 10px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    position:static!important;
    grid-column:1!important;grid-row:1 / span 2!important;
    transform:none!important;
    align-self:center!important;justify-self:center!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
    grid-column:2!important;grid-row:1!important;
    margin:0!important;width:auto!important;min-width:0!important;
    text-align:left!important;justify-self:stretch!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    grid-column:2!important;grid-row:2!important;
    margin:0!important;width:auto!important;min-width:0!important;
    text-align:left!important;justify-self:stretch!important;
  }
}
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit:disabled{
    opacity:1!important;
    cursor:not-allowed!important;
  }
}

/* v292 — ONLY Supplier / Dealer field overlap fix (visual spacing only) */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
    position:relative!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    left:14px!important;
    top:50%!important;
    width:22px!important;
    height:22px!important;
    transform:translateY(-50%)!important;
    z-index:8!important;
    pointer-events:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
    padding-left:56px!important;
    padding-right:76px!important;
    text-indent:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input::placeholder{
    text-indent:0!important;
    padding:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
    left:56px!important;
    right:76px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{
    right:38px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    right:5px!important;
  }
}


/* v293 — APPROVED compact Supplier dropdown visual only. No logic changes. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    padding:6px!important;
    max-height:224px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    min-height:48px!important;
    height:48px!important;
    padding:5px 10px!important;
    border-radius:7px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:20px 16px!important;
    column-gap:9px!important;
    row-gap:0!important;
    align-content:center!important;
    overflow:hidden!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    width:28px!important;
    height:28px!important;
    font-size:16px!important;
    align-self:center!important;
    justify-self:center!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
    font-size:12px!important;
    line-height:20px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    font-size:10px!important;
    line-height:16px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    display:flex!important;
    position:relative!important;
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    margin:5px 0 0!important;
    padding:0 12px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border:0!important;
    border-radius:7px!important;
    background:#e8f2ff!important;
    color:#0876ff!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:hidden!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd:hover{
    background:#dcecff!important;
    filter:none!important;
    transform:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    border:1.5px solid #0876ff!important;
    border-radius:50%!important;
    color:#0876ff!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:800!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
    display:block!important;
    min-width:0!important;
    margin:0!important;
    color:#0876ff!important;
    font-size:11.5px!important;
    line-height:1!important;
    font-weight:900!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* v294 — Purchase > Add Product > Supplier/Dealer visual-only final match.
   Scope intentionally limited to the purchase Add Product supplier block. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierField{
  display:block!important;
  margin:0 0 14px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{
  display:block!important;
  margin:0 0 8px!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:700!important;
  color:#0f2747!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
  display:block!important;
  width:100%!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
  width:100%!important;
  height:46px!important;
  box-sizing:border-box!important;
  padding:0 74px 0 50px!important;
  border:1px solid #cfd9e7!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#18304f!important;
  font-size:13px!important;
  line-height:46px!important;
  font-weight:600!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input:focus{
  border-color:#1683ff!important;
  box-shadow:0 0 0 1px #1683ff!important;
  outline:none!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input::placeholder{
  color:#8090a4!important;
  opacity:1!important;
  font-weight:600!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
  position:absolute!important;
  left:16px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:22px!important;
  height:22px!important;
  z-index:4!important;
  pointer-events:none!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{
  position:absolute!important;
  right:38px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  background:transparent!important;
  color:#62758d!important;
  font-size:18px!important;
  line-height:1!important;
  z-index:5!important;
  padding:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  position:absolute!important;
  right:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  background:transparent!important;
  color:#526982!important;
  font-size:16px!important;
  line-height:1!important;
  z-index:5!important;
  padding:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
  position:absolute!important;
  left:50px!important;
  right:74px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:4!important;
  min-width:0!important;
  pointer-events:none!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b,
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{
  color:#172d4b!important;
  font-size:12.5px!important;
  line-height:16px!important;
  font-weight:700!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
  color:#6f8096!important;
  font-size:10.5px!important;
  line-height:13px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected #productSupplierSearch{
  color:transparent!important;
  caret-color:transparent!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected #productSupplierSearch::placeholder{
  color:transparent!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:52px!important;
  width:100%!important;
  box-sizing:border-box!important;
  max-height:220px!important;
  overflow-y:auto!important;
  padding:6px!important;
  border:1px solid #dce4ee!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(18,43,77,.18)!important;
  z-index:350!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:52px!important;
  padding:6px 12px 6px 48px!important;
  border:0!important;
  border-radius:8px!important;
  background:#fff!important;
  text-align:left!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]:hover,
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id].active{
  background:#e5f0ff!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
  left:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:28px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
  display:block!important;
  margin:0!important;
  font-size:12.5px!important;
  line-height:17px!important;
  color:#152c4a!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
  display:block!important;
  margin:0!important;
  font-size:10.5px!important;
  line-height:14px!important;
  color:#6e7f95!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* User-approved latest reference removes the quick-add row from this dropdown. Logic remains untouched. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
  display:none!important;
}

/* v294 verification correction: neutralize older grid/pseudo rules inside supplier results only. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  align-items:start!important;
  gap:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
  position:absolute!important;
  content:"♙"!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
}
/* v294 verification correction 2: reserve explicit visual lane for result icon. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
  padding:6px 12px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b,
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
  box-sizing:border-box!important;
  padding-left:44px!important;
  padding-right:8px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
  left:12px!important;
}

/* v295 — ONLY Purchase > Add Product visual correction: approved drawer proportion + supplier field safe lanes. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:560px!important;
    max-width:calc(100vw - 20px)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input{
    padding-left:58px!important;
    padding-right:82px!important;
    font-size:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    left:18px!important;
    width:24px!important;
    height:24px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{
    right:42px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    right:8px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
    left:58px!important;
    right:82px!important;
  }
}

/* v296 — ONLY Purchase > Add Product > Supplier/Dealer input overlap correction. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
  position:relative!important;
  overflow:visible!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch{
  box-sizing:border-box!important;
  width:100%!important;
  padding-left:16px!important;
  padding-right:82px!important;
  text-indent:42px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch::placeholder{
  text-indent:42px!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
  left:18px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:24px!important;
  height:24px!important;
  z-index:6!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{
  right:42px!important;
  z-index:7!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  right:8px!important;
  z-index:7!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
  left:60px!important;
  right:82px!important;
}

/* v297 — ONLY Purchase > Add Product drawer proportion/readability. Supplier safe spacing untouched. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:600px!important;
    max-width:calc(100vw - 18px)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader{
    min-height:64px!important;
    height:64px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
    font-size:22px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox{
    min-height:94px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
    font-size:20px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierLabel,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
    font-size:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
  #purchaseAddOverlay[data-source="purchase"] .productAddForm select{
    min-height:46px!important;
    height:46px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm select{
    font-size:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productToggleRow{
    min-height:46px!important;
    height:46px!important;
    font-size:13px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{
    min-height:72px!important;
    height:72px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > button{
    min-height:48px!important;
    height:48px!important;
    font-size:14px!important;
  }
}

/* =====================================================================
   v298 FINAL CLEAN PURCHASE > ADD PRODUCT DRAWER
   Visual-only, scoped to Purchase mode. Existing DOM/JS/data flow intact.
   ===================================================================== */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:470px!important;
    max-width:calc(100vw - 18px)!important;
    height:80dvh!important;
    max-height:80dvh!important;
    top:0!important; right:0!important; bottom:auto!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#fff!important;
    box-shadow:-12px 0 34px rgba(11,30,55,.16)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader{
    height:58px!important; min-height:58px!important;
    padding:0 50px 0 20px!important;
    justify-content:flex-start!important;
    border-bottom:1px solid #e7edf5!important;
    background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2{
    position:relative!important;
    margin:0!important;
    padding-left:40px!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:800!important;
    color:#0b2344!important;
    letter-spacing:-.15px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:before{
    content:""!important;
    position:absolute!important; left:0!important; top:50%!important;
    transform:translateY(-50%)!important;
    width:30px!important; height:30px!important;
    border:1px solid #d9e8fb!important;
    border-radius:8px!important;
    background:#f4f8ff!important;
    display:block!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{
    content:"◇"!important;
    position:absolute!important; left:7px!important; top:50%!important;
    transform:translateY(-52%)!important;
    color:#0877ff!important;
    font-size:18px!important;
    line-height:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddClose{
    top:11px!important; right:12px!important;
    width:36px!important; height:36px!important;
    font-size:24px!important; line-height:36px!important;
    color:#0c2648!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm{
    height:calc(100% - 58px)!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:14px 20px 16px!important;
    background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox{
    height:78px!important; min-height:78px!important; max-height:78px!important;
    margin:0!important;
    border:1.2px dashed #72aaff!important;
    border-radius:8px!important;
    background:#fbfdff!important;
    gap:1px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox .uploadIcon{
    font-size:23px!important; line-height:23px!important; color:#0877ff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox span{font-size:10.5px!important;line-height:14px!important;color:#334a68!important}
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox span u{color:#0877ff!important;font-weight:800!important}
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox small{font-size:8.5px!important;line-height:12px!important;color:#8090a5!important}
  #purchaseAddOverlay[data-source="purchase"] .productUploadPreview{
    max-height:48px!important; max-width:86px!important; object-fit:contain!important; border-radius:5px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox.hasImage .uploadIcon,
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox.hasImage > span:not(.uploadIcon),
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox.hasImage > small{display:none!important}

  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle{
    position:relative!important;
    margin:13px 0 10px!important;
    padding:0 0 9px 38px!important;
    min-height:26px!important;
    display:flex!important; align-items:center!important;
    border-bottom:1px solid #dce5ef!important;
    font-size:17px!important; line-height:1.15!important;
    font-weight:900!important; color:#0b274d!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddSectionTitle:before{
    content:"◇"!important;
    position:absolute!important; left:0!important; top:-1px!important;
    width:28px!important; height:28px!important;
    display:grid!important; place-items:center!important;
    border:1px solid #d9e8fb!important; border-radius:7px!important;
    background:#f4f8ff!important; color:#0877ff!important;
    font-size:16px!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productSupplierField{
    position:relative!important;
    display:block!important;
    margin:0 0 12px!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{
    display:block!important;
    margin:0 0 6px!important;
    font-size:12px!important; line-height:16px!important;
    font-weight:800!important; color:#102946!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{display:block!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
    position:relative!important;
    display:block!important;
    height:44px!important;
    min-height:44px!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch{
    position:relative!important;
    width:100%!important; height:44px!important; min-height:44px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 72px 0 48px!important;
    text-indent:0!important;
    border:1px solid #bcd3ef!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#1b3556!important;
    font-size:12px!important; font-weight:600!important;
    outline:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch:focus{
    border-color:#0877ff!important;
    box-shadow:0 0 0 2px rgba(8,119,255,.10)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch::placeholder{
    color:#8090a5!important; opacity:1!important; text-indent:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    position:absolute!important;
    left:14px!important; top:50%!important; transform:translateY(-50%)!important;
    width:24px!important; height:24px!important;
    z-index:5!important; pointer-events:none!important;
    border:0!important; background:transparent!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon:before{
    content:""!important;
    position:absolute!important; left:8px!important; top:3px!important;
    width:7px!important; height:7px!important;
    border:1.8px solid #0877ff!important; border-radius:50%!important;
    box-sizing:border-box!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon:after{
    content:""!important;
    position:absolute!important; left:5px!important; bottom:3px!important;
    width:13px!important; height:8px!important;
    border:1.8px solid #0877ff!important; border-bottom:0!important;
    border-radius:10px 10px 0 0!important;
    box-sizing:border-box!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    position:absolute!important; top:0!important;
    height:44px!important;
    display:grid!important; place-items:center!important;
    border:0!important; background:transparent!important;
    padding:0!important; margin:0!important;
    color:#62758d!important; line-height:1!important;
    z-index:7!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{right:34px!important;width:34px!important;font-size:17px!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{right:0!important;width:34px!important;font-size:0!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle:after{content:"⌄"!important;font-size:16px!important;font-weight:800!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
    position:absolute!important; left:48px!important; right:72px!important; top:50%!important;
    transform:translateY(-50%)!important;
    z-index:6!important; min-width:0!important; pointer-events:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
    display:block!important; margin:0!important; padding:0!important;
    white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{font-size:11.5px!important;line-height:14px!important;color:#142c4d!important;font-weight:800!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{font-size:9.5px!important;line-height:12px!important;color:#71839a!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected #productSupplierSearch,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected #productSupplierSearch::placeholder{color:transparent!important;caret-color:transparent!important}

  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    position:absolute!important; left:0!important; right:0!important; top:66px!important;
    width:100%!important; max-height:230px!important;
    overflow-y:auto!important; overflow-x:hidden!important;
    padding:5px!important; box-sizing:border-box!important;
    border:1px solid #d9e2ee!important; border-radius:9px!important;
    background:#fff!important;
    box-shadow:0 14px 30px rgba(16,39,71,.18)!important;
    z-index:500!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    position:relative!important;
    width:100%!important; min-height:48px!important;
    display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto!important;
    align-content:center!important; gap:0!important;
    padding:5px 10px 5px 46px!important;
    border:0!important; border-radius:7px!important;
    background:#fff!important; text-align:left!important; cursor:pointer!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]:hover,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id].active{background:#e7f1ff!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:"♙"!important;
    position:absolute!important; left:10px!important; top:50%!important; transform:translateY(-50%)!important;
    width:28px!important; height:28px!important;
    display:grid!important; place-items:center!important;
    border-radius:50%!important; background:#eff6ff!important;
    color:#0877ff!important; font-size:17px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
    grid-row:1!important; padding:0!important; margin:0!important;
    font-size:11.5px!important; line-height:15px!important; color:#142c4d!important; font-weight:800!important;
    white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    grid-row:2!important; padding:0!important; margin:0!important;
    font-size:10px!important; line-height:13px!important; color:#6f8198!important;
    white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{
    position:relative!important;
    display:flex!important; align-items:center!important; gap:9px!important;
    width:100%!important; min-height:40px!important;
    margin:4px 0 0!important; padding:0 10px!important;
    border:0!important; border-top:1px solid #e3eaf3!important;
    border-radius:0 0 7px 7px!important;
    background:#fff!important; color:#0877ff!important;
    font-weight:800!important; cursor:pointer!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd:hover{background:#f5f9ff!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd span{
    width:24px!important; height:24px!important; display:grid!important; place-items:center!important;
    border:1.5px solid #0877ff!important; border-radius:50%!important;
    color:#0877ff!important; font-size:17px!important; line-height:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd b{
    font-size:11px!important; line-height:14px!important; color:#0877ff!important; white-space:nowrap!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productPrimaryName{margin-top:0!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
    display:grid!important; gap:5px!important; margin-bottom:9px!important;
    font-size:11px!important; line-height:14px!important; font-weight:800!important; color:#102946!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=text],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input[type=number],
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input:not([type]),
  #purchaseAddOverlay[data-source="purchase"] .productAddForm select{
    height:42px!important; min-height:42px!important;
    border:1px solid #d5dfeb!important; border-radius:7px!important;
    padding:0 12px!important; box-sizing:border-box!important;
    background:#fff!important; color:#203a59!important;
    font-size:11px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm input::placeholder{color:#8a9aaf!important;opacity:1!important}
  #purchaseAddOverlay[data-source="purchase"] .productAddTwoCol{gap:10px!important}
  #purchaseAddOverlay[data-source="purchase"] .productPrimaryGrid,
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{grid-template-columns:1fr 1fr!important;align-items:end!important}
  #purchaseAddOverlay[data-source="purchase"] .productToggleRow{
    height:42px!important; min-height:42px!important;
    margin-bottom:9px!important; padding:0 10px!important;
    border:1px solid #d5dfeb!important; border-radius:7px!important;
    font-size:10.5px!important; line-height:13px!important; color:#102946!important; font-weight:800!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productToggleRow b{width:34px!important;height:19px!important}
  #purchaseAddOverlay[data-source="purchase"] .purchaseAdvancedField{display:none!important}

  #purchaseAddOverlay[data-source="purchase"] .productAddActions{
    height:62px!important; min-height:62px!important;
    flex:0 0 62px!important;
    display:grid!important; grid-template-columns:.9fr 1.35fr!important; gap:10px!important;
    padding:9px 12px!important; box-sizing:border-box!important;
    border-top:1px solid #e6edf5!important; background:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > button{
    height:44px!important; min-height:44px!important;
    border-radius:7px!important; font-size:12px!important; font-weight:800!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddCancel{
    border:1px solid #d4deea!important; background:#fff!important; color:#152d4d!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit{
    border:1px solid #061e40!important; background:#061e40!important; color:#fff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddActions > .productAddSubmit:disabled{opacity:.5!important;cursor:not-allowed!important}
}

/* Keep the same layout stable on smaller screens without affecting other modules. */
@media (max-width:720px){
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{display:block!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierQuickAdd{display:flex!important}
}

/* v298 verification correction — neutralize legacy inner padding in supplier result text only. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    padding-left:0!important;
    padding-right:0!important;
    width:100%!important;
  }
}

/* v298 verification correction 2 — clean SVG-style supplier result icon, no glyph overlap. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:""!important;
    background-color:#eff6ff!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230877ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 20c.4-4 2.7-6 6.5-6s6.1 2 6.5 6'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
  }
}


/* =====================================================================
   v299 — Purchase > Add Product drawer reference correction.
   UI-only, scoped to Purchase mode. Existing DOM/JS/data flow untouched.
   ===================================================================== */
@media (min-width:721px){
  /* Keep the physical drawer viewport-full under this project's desktop html{zoom:1.25}. */
  #purchaseAddOverlay[data-source="purchase"] .productAddDrawer{
    width:470px!important;
    max-width:calc(100vw - 18px)!important;
    height:80dvh!important;
    max-height:80dvh!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    overflow:hidden!important;
  }

  /* Reference-style blue product/cube icon while retaining the existing header DOM. */
  #purchaseAddOverlay[data-source="purchase"] .productAddHeader h2:after{
    content:""!important;
    left:6px!important;
    width:18px!important;
    height:18px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230877ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 7 4-7 4-7-4 7-4Z'/%3E%3Cpath d='m5 7 7 4 7-4v9l-7 4-7-4V7Z'/%3E%3Cpath d='M12 11v9'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
  }

  /* Required marks stay beside their labels; inputs remain on a clean next row. */
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow){
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    column-gap:3px!important;
    row-gap:5px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow) > input,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow) > select{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label:not(.productUploadBox):not(.productToggleRow) > i{
    flex:0 0 auto!important;
    margin:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddTwoCol > label{min-width:0!important}

  /* Advanced fields are not part of the approved Purchase Add Product drawer. */
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label.purchaseAdvancedField,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm .purchaseAdvancedField{
    display:none!important;
  }

  /* Quick-add keeps the existing function but is visible only as the dropdown's bottom row. */
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow > .productSupplierQuickAdd{
    display:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd{
    display:flex!important;
    position:relative!important;
    width:100%!important;
    min-height:40px!important;
    margin:4px 0 0!important;
  }

  /* Upload preview is contained inside the upload surface and cannot cover form content. */
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox{
    position:relative!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox.hasImage{
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:12px!important;
    padding:8px 14px!important;
    text-align:left!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox.hasImage .productUploadPreview{
    position:static!important;
    inset:auto!important;
    flex:0 0 54px!important;
    width:54px!important;
    height:54px!important;
    max-width:54px!important;
    max-height:54px!important;
    object-fit:contain!important;
    border-radius:6px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productUploadBox.hasImage #purchaseProductImageName{
    display:block!important;
    min-width:0!important;
    max-width:calc(100% - 70px)!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    color:#334a68!important;
    font-size:10px!important;
    line-height:14px!important;
    font-weight:700!important;
  }

  /* Explicit safe lanes for supplier icon / text / clear / chevron. */
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch{
    padding-left:48px!important;
    padding-right:76px!important;
    text-indent:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
    left:48px!important;
    right:76px!important;
    min-width:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{
    right:38px!important;
    width:34px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    right:4px!important;
    width:34px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    left:0!important;
    right:0!important;
    width:100%!important;
    overflow-x:hidden!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* The existing flex column makes this a persistent bottom footer; reinforce its visibility only. */
  #purchaseAddOverlay[data-source="purchase"] .productAddActions{
    flex:0 0 62px!important;
    min-height:62px!important;
    position:relative!important;
    z-index:600!important;
    overflow:hidden!important;
  }
}

/* Mobile remains the existing full-screen drawer; only keep advanced Purchase fields hidden. */
@media (max-width:720px){
  #purchaseAddOverlay[data-source="purchase"] .productAddForm label.purchaseAdvancedField,
  #purchaseAddOverlay[data-source="purchase"] .productAddForm .purchaseAdvancedField{
    display:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow > .productSupplierQuickAdd{display:none!important}
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd{display:flex!important}
}

/* v299 verification fix — the legacy generic label rule must not reveal the hidden Unit field. */
#purchaseAddOverlay[data-source="purchase"] .productAddForm label.purchaseAdvancedField:not(.productUploadBox):not(.productToggleRow){
  display:none!important;
}

/* v299 verification fix — center selected supplier text and both right-side controls inside the field. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected .productSupplierSelectedView{
  left:48px!important;
  right:76px!important;
  top:50%!important;
  bottom:auto!important;
  height:auto!important;
  display:block!important;
  transform:translateY(-50%)!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear,
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  top:0!important;
  transform:none!important;
}

/* v299 verification fix — retain a clear field boundary after supplier selection. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected input#productSupplierSearch{
  border:1px solid #bcd3ef!important;
  background:#fff!important;
  box-shadow:none!important;
}


/* =====================================================================
   v300 — Purchase > Add Product online-sale control reference match.
   UI-only. Keeps the existing checkbox/handler and all Purchase logic.
   ===================================================================== */
@media (min-width:721px){
  /* The reference gives Sale Price the wide lane and keeps Online Sale compact. */
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{
    grid-template-columns:minmax(0,2.15fr) minmax(118px,.85fr)!important;
    align-items:end!important;
    gap:10px!important;
  }

  /* Remove the incorrect input-like box around the Online Sale control. */
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
    height:auto!important;
    min-height:0!important;
    margin:0 0 9px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 20px 34px!important;
    grid-template-rows:14px 42px!important;
    column-gap:6px!important;
    row-gap:5px!important;
    align-items:center!important;
    justify-content:stretch!important;
    overflow:visible!important;
    cursor:pointer!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle > span{
    grid-column:1 / 4!important;
    grid-row:1!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    color:#102946!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:800!important;
    align-self:end!important;
  }
  /* Existing ? pseudo element becomes the help icon before the switch, as in reference. */
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle:after{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    width:20px!important;
    height:20px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    background:#7a8798!important;
    color:#fff!important;
    font-size:11px!important;
    line-height:20px!important;
    font-weight:900!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b{
    grid-column:3!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:center!important;
    width:34px!important;
    height:19px!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
}

/* =====================================================================
   v301 — Purchase > Add Product secondary row exact reference correction.
   UI-only. Keeps existing onlineSale checkbox, handlers and Purchase logic.
   ===================================================================== */
@media (min-width:721px){
  /* In the reference the sale-price input runs almost to the help icon.
     Reserve only the compact ? + switch rail at the right. */
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{
    position:static!important;
    grid-template-columns:minmax(0,1fr) 60px!important;
    gap:2px!important;
    align-items:end!important;
    overflow:visible!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
    position:relative!important;
    width:60px!important;
    min-width:60px!important;
    max-width:60px!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 9px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:20px 34px!important;
    grid-template-rows:14px 42px!important;
    column-gap:6px!important;
    row-gap:5px!important;
    align-items:center!important;
  }

  /* Label is right-aligned over the compact control rail and may extend
     leftward into the unused label space, exactly like the reference. */
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle > span{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:max-content!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    color:#102946!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:800!important;
    text-align:right!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle:after{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
    width:20px!important;
    height:20px!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    width:34px!important;
    height:19px!important;
  }
}

/* v301 — restore the existing supplier input surface after selection so the
   selected supplier stays inside the same bordered field as the reference. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierField.isSelected input#productSupplierSearch{
  visibility:visible!important;
  pointer-events:none!important;
  color:transparent!important;
  caret-color:transparent!important;
  background:#fff!important;
  border:1px solid #bcd3ef!important;
  box-shadow:none!important;
}


/* =====================================================================
   v302 — Purchase > Add Product desktop Online Sale switch polish.
   UI-only. Fixes the switch proportions/shape while preserving the
   existing checkbox, click handler and Purchase logic.
   ===================================================================== */
@media (min-width:721px){
  /* Keep the sale-price field dominant, but reserve a clean control rail. */
  #purchaseAddOverlay[data-source="purchase"] .productSecondaryGrid{
    grid-template-columns:minmax(0,1fr) 76px!important;
    gap:8px!important;
    align-items:end!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle{
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    grid-template-columns:22px 42px!important;
    grid-template-rows:16px 46px!important;
    column-gap:8px!important;
    row-gap:4px!important;
    align-items:center!important;
  }

  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle > span{
    top:0!important;
    right:0!important;
    line-height:16px!important;
    font-size:11px!important;
  }

  /* Compact circular help button, vertically centered with the switch. */
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle:after{
    grid-column:1!important;
    grid-row:2!important;
    width:22px!important;
    height:22px!important;
    line-height:22px!important;
    margin:0!important;
    border-radius:50%!important;
    background:#738196!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
    box-shadow:0 1px 2px rgba(16,36,64,.12)!important;
  }

  /* Professional SaaS switch: correct 42×24 rail + centered 18×18 thumb. */
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:center!important;
    width:42px!important;
    height:24px!important;
    min-width:42px!important;
    margin:0!important;
    border-radius:999px!important;
    background:#98a2b3!important;
    border:1px solid rgba(16,36,64,.08)!important;
    box-shadow:inset 0 1px 2px rgba(16,36,64,.08),0 1px 2px rgba(16,36,64,.08)!important;
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle b:before{
    width:18px!important;
    height:18px!important;
    left:2px!important;
    top:2px!important;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 1px 3px rgba(16,36,64,.26)!important;
    transition:transform .16s ease!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle input:checked + b{
    background:#176ff2!important;
    border-color:#176ff2!important;
    box-shadow:inset 0 1px 2px rgba(10,73,170,.15),0 1px 2px rgba(16,36,64,.10)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle input:checked + b:before{
    transform:translateX(18px)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle:hover b{
    background:#8793a5!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle:hover input:checked + b{
    background:#0f63de!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productOnlineToggle input:focus-visible + b{
    outline:none!important;
    box-shadow:0 0 0 3px rgba(23,111,242,.16),inset 0 1px 2px rgba(16,36,64,.08)!important;
  }
}
\n\n/* =====================================================================
   v303 — Purchase > Add Product supplier selector icon only.
   Replaces the chevron glyph with the marked supplier/dealer icon while
   preserving the existing button id, click handler and dropdown logic.
   ===================================================================== */
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  display:grid!important;
  place-items:center!important;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif!important;
  font-size:22px!important;
  font-weight:400!important;
  line-height:1!important;
  color:#111827!important;
  text-rendering:geometricPrecision;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle:hover{
  background:#f5f7fa!important;
  color:#0f172a!important;
}
/* v303 final icon override — supersedes the older chevron pseudo glyph. */
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
  font-size:0!important;
}
#purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle:after{
  content:"♙︎"!important;
  display:block!important;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif!important;
  font-size:22px!important;
  font-weight:400!important;
  line-height:1!important;
  color:#111827!important;
}

/* =====================================================================
   v304 — Purchase > Add Product responsive vertical-gap fix.
   Layout-only and scoped to the Purchase drawer. The existing scroll body
   still owns overflow and the existing footer remains outside that scroll.
   ===================================================================== */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll{
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productAddScroll > *{
    flex-shrink:0!important;
  }
}

/* =========================================================
   v305 — Purchase product thumbnail containment fix only.
   Uploaded product images must never use their natural size to
   overflow/visually expand Purchase picker/cart rows.
   No product data, upload/save logic, or other UI is changed.
   ========================================================= */
#purchasesView .purchaseProductItem .prodIcon.saleProductThumb{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  flex:0 0 30px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#purchasesView .purchaseProductItem .prodIcon.saleProductThumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
}
#purchasesView .purchaseCartThumb.saleCartThumb{
  width:23px!important;
  height:23px!important;
  min-width:23px!important;
  max-width:23px!important;
  min-height:23px!important;
  max-height:23px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#purchasesView .purchaseCartThumb.saleCartThumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
}

/* v305 — Product List desktop thumbnail uses the same locked image-fit rule. */
#productsView .productDesktopThumb{
  min-width:31px!important;
  max-width:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#productsView .productDesktopThumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
}

/* =====================================================================
   v306 — Purchase picker product-row information polish only.
   Shows latest buy price, current selling price and stock in the existing
   Purchase selector. Add/search/cart/business logic is unchanged.
   ===================================================================== */
#purchasesView .purchaseProductItem{
  grid-template-columns:42px minmax(0,1fr) auto!important;
  min-height:66px!important;
  height:66px!important;
  gap:10px!important;
  padding:0 10px!important;
}
#purchasesView .purchaseProductItem .prodIcon.saleProductThumb{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  flex:0 0 38px!important;
  border-radius:7px!important;
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  display:grid!important;
  place-items:center!important;
}
#purchasesView .purchaseProductItem .prodIcon.saleProductThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:6px!important;
}
#purchasesView .purchaseProductItem .prodIcon.saleProductThumb svg{
  width:24px!important;
  height:24px!important;
}
#purchasesView .purchaseProductInfo{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
  overflow:hidden!important;
}
#purchasesView .purchaseProductName{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#294362!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
#purchasesView .purchaseProductMeta{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  color:#64748b!important;
}
#purchasesView .purchaseProductMeta span{display:inline-flex!important;align-items:center!important;gap:2px!important;min-width:0!important}
#purchasesView .purchaseProductMeta strong{font:inherit!important;font-weight:800!important}
#purchasesView .purchaseProductMeta i{font-style:normal!important;color:#9aa7b6!important;flex:0 0 auto!important}
#purchasesView .purchaseMetaBuy{color:#1684df!important}
#purchasesView .purchaseMetaSell{color:#17a64a!important}
#purchasesView .purchaseMetaStock{color:#58677a!important}
#purchasesView .purchaseProductItem .addWrap{align-items:center!important;flex:0 0 auto!important}
#purchasesView .purchaseProductItem .addBtn,
#purchasesView .purchaseProductItem .addMore{height:32px!important}
#purchasesView .purchaseProductItem .addBtn{padding:0 11px!important;font-size:12px!important;font-weight:800!important}
#purchasesView .purchaseProductItem .addMore{width:29px!important}

@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #purchasesView .purchaseProductItem{
    grid-template-columns:40px minmax(0,1fr) auto!important;
    min-height:68px!important;
    height:auto!important;
    gap:9px!important;
    padding:8px 7px!important;
  }
  #purchasesView .purchaseProductItem .prodIcon.saleProductThumb{
    width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;
    min-height:36px!important;max-height:36px!important;flex-basis:36px!important;
  }
  #purchasesView .purchaseProductName{font-size:13px!important}
  #purchasesView .purchaseProductMeta{
    display:grid!important;
    grid-template-columns:auto auto!important;
    justify-content:start!important;
    column-gap:8px!important;
    row-gap:2px!important;
    white-space:normal!important;
    font-size:10.5px!important;
  }
  #purchasesView .purchaseProductMeta i{display:none!important}
  #purchasesView .purchaseMetaStock{grid-column:1/-1!important}
  #purchasesView .purchaseProductItem .addBtn,
  #purchasesView .purchaseProductItem .addMore{height:31px!important}
  #purchasesView .purchaseProductItem .addBtn{padding:0 9px!important;font-size:11.5px!important}
  #purchasesView .purchaseProductItem .addMore{width:27px!important}
}

@media (max-width:360px){
  #purchasesView .purchaseProductItem{
    grid-template-columns:36px minmax(0,1fr) auto!important;
    gap:7px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  #purchasesView .purchaseProductItem .prodIcon.saleProductThumb{
    width:33px!important;height:33px!important;min-width:33px!important;max-width:33px!important;
    min-height:33px!important;max-height:33px!important;flex-basis:33px!important;
  }
  #purchasesView .purchaseProductMeta{font-size:9.5px!important;column-gap:5px!important}
  #purchasesView .purchaseProductItem .addBtn{padding:0 7px!important}
  #purchasesView .purchaseProductItem .addMore{width:25px!important}
}


/* =====================================================================
   v307 — Mobile Sell 4-step flow, connected to the existing sale cart,
   customer data and commit/invoice logic. Desktop Sell remains unchanged.
   ===================================================================== */
.mobileSaleFlow,.mobileSaleCartRow{display:none}
#salesView .saleProductInfo{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:hidden}
#salesView .saleProductName{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#salesView .saleProductMeta{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
#salesView .saleProductMeta span{display:inline-flex;gap:2px;min-width:0}
#salesView .saleProductMeta strong{font:inherit;font-weight:800}
#salesView .saleProductMeta i{font-style:normal;color:#a2acb9}
#salesView .saleMetaBuy{color:#1788e6}
#salesView .saleMetaSell{color:#16a34a}
#salesView .saleMetaStock{color:#58677a}
#salesView .purchaseProductItem .saleProductThumb{border-radius:7px!important;border:1px solid #e2e8f0!important;background:#fff!important;overflow:hidden!important;display:grid!important;place-items:center!important}
#salesView .purchaseProductItem .saleProductThumb img,#salesView .saleCartThumb img,.mobileSalePaymentProduct .saleProductThumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
#salesView .purchaseProductItem .saleProductThumb svg,#salesView .saleCartThumb svg,.mobileSalePaymentProduct .saleProductThumb svg{width:70%!important;height:70%!important;fill:none!important;stroke:#526173!important;stroke-width:1.8!important}

@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.saleMobilePage{background:#fff!important}
  body.saleMobilePage .mobileBottomNav{display:none!important}
  body.saleMobilePage .bizWorkspace{padding-bottom:0!important}
  body.saleMobilePage .bizTopbar{z-index:110!important;height:64px!important;min-height:64px!important;padding:0 10px!important;background:#ffcd05!important;border-bottom:1px solid #e9b900!important}
  body.saleMobilePage .mobileHeaderBrand{display:flex!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:128px!important;height:42px!important;justify-content:center!important;z-index:1!important;pointer-events:none!important}
  body.saleMobilePage .mobileHeaderBrand img{width:124px!important;height:36px!important;object-position:center!important}
  body.saleMobilePage .mobileMenuToggle{z-index:2!important;width:38px!important;height:38px!important;flex-basis:38px!important}
  body.saleMobilePage .topActions{z-index:2!important;gap:8px!important}
  body.saleMobilePage .topActions>.topIcon:first-child,body.saleMobilePage .settingsAction{display:none!important}
  body.saleMobilePage .topActions>.topIcon{width:25px!important;height:25px!important}
  body.saleMobilePage .profileTopButton{height:38px!important;gap:3px!important}
  body.saleMobilePage .profileTopButton .avatar{width:36px!important;height:36px!important;font-size:14px!important}
  body.saleMobilePage .profileTopButton .chev{display:none!important}

  #salesView{padding:0 8px calc(72px + env(safe-area-inset-bottom,0px))!important;background:#fff!important}
  #salesView .sellClone{display:block!important;min-height:calc(100dvh - 64px)!important;height:auto!important;padding:0!important}
  #salesView .sellPicker{padding:10px 0 0!important;background:#fff!important}
  #salesView .sellPicker>h2{font-size:15px!important;color:#17355f!important;margin:0 4px 9px!important}
  #salesView .purchaseSearchRow{display:grid!important;grid-template-columns:minmax(0,1fr) 68px 42px 42px!important;gap:6px!important;margin:0 4px 8px!important}
  #salesView .purchaseSearch,#salesView .purchaseBarcodeField,#salesView .pickerTool{height:42px!important;border-radius:6px!important;background:#fff!important}
  #salesView .purchaseSearch input{font-size:13px!important;min-width:0!important}
  #salesView .purchaseBarcodeField input{height:40px!important;padding:0 4px!important;font-size:10px!important}
  #salesView .purchaseBarcodeField span{display:none!important}
  #salesView .purchaseProductList{padding:0 3px!important}
  #salesView .purchaseProductItem{grid-template-columns:48px minmax(0,1fr) auto!important;min-height:72px!important;height:auto!important;gap:9px!important;padding:7px 3px!important;border-bottom:1px solid #e9edf2!important;overflow:visible!important;background:#fff!important}
  #salesView .purchaseProductItem .saleProductThumb{width:45px!important;height:45px!important;min-width:45px!important;max-width:45px!important;min-height:45px!important;max-height:45px!important;border-radius:7px!important}
  #salesView .saleProductInfo{gap:2px!important}
  #salesView .saleProductName{font-size:13px!important;line-height:1.15!important;color:#17365f!important;font-weight:850!important}
  #salesView .saleProductMeta{display:grid!important;grid-template-columns:auto auto!important;gap:1px 7px!important;font-size:10.5px!important;line-height:1.2!important;white-space:normal!important}
  #salesView .saleProductMeta i{display:none!important}
  #salesView .saleMetaStock{grid-column:1/-1!important}
  #salesView .purchaseProductItem .addWrap{display:flex!important;align-items:center!important;align-self:center!important}
  #salesView .purchaseProductItem .addBtn{height:36px!important;padding:0 11px!important;font-size:13px!important;border-radius:5px 0 0 5px!important;background:#112445!important;color:#fff!important;border-color:#112445!important}
  #salesView .purchaseProductItem .addMore{height:36px!important;width:31px!important;border-radius:0 5px 5px 0!important;background:#112445!important;color:#fff!important;border-color:#112445!important}
  #salesView .purchaseAddCount{top:-6px!important;right:-5px!important}
  #salesView .purchaseProductItem.mobileSaleAdded::after{display:none!important}

  #salesView .purchaseStage{display:block!important;width:100%!important;min-height:0!important;height:auto!important;margin:9px 0 0!important;border:0!important;background:#fff!important;box-shadow:none!important;padding:0!important}
  #salesView .purchaseStageMain{min-height:0!important;height:auto!important;overflow:visible!important;padding:0 3px!important}
  #salesView .purchaseEmptyState{display:none!important}
  #salesView .purchaseCartPanel{display:block!important;border:0!important;padding:0!important;margin:0!important;background:#fff!important}
  #salesView .purchaseCartTop{min-height:38px!important;height:38px!important;padding:0 4px!important;border-bottom:1px solid #e5e9ef!important}
  #salesView .purchaseCartTop strong{font-size:12px!important;color:#17355f!important}
  #salesView .purchaseClearCart{font-size:10px!important;color:#f04444!important;background:transparent!important}
  #salesView .purchaseCartList{display:grid!important;gap:0!important;padding:0!important}
  #salesView .purchaseCartItem{padding:0!important;margin:0!important;border:0!important;border-bottom:1px solid #edf0f4!important;border-radius:0!important;background:#fff!important}
  #salesView .purchaseCartItemHead,#salesView .purchaseCartFields{display:none!important}
  #salesView .mobileSaleCartRow{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto 26px!important;align-items:center!important;gap:7px!important;min-height:64px!important;padding:7px 4px!important}
  #salesView .mobileSaleCartRow .saleCartThumb{width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;border-radius:6px!important;border:1px solid #e2e8f0!important;background:#fff!important;overflow:hidden!important;display:grid!important;place-items:center!important}
  #salesView .mobileSaleCartInfo{min-width:0!important;display:grid!important;gap:1px!important}
  #salesView .mobileSaleCartInfo b{font-size:12px!important;color:#18365f!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #salesView .mobileSaleCartInfo small{font-size:9.5px!important;color:#64748b!important}
  #salesView .mobileSaleCartInfo>span{font-size:9.5px!important;color:#64748b!important;white-space:nowrap!important}
  #salesView .mobileSaleQtyControl{display:grid!important;grid-template-columns:28px 28px 28px!important;height:30px!important;border:1px solid #dbe3ee!important;border-radius:5px!important;overflow:hidden!important;background:#fff!important}
  #salesView .mobileSaleQtyControl button,#salesView .mobileSaleQtyControl b{border:0!important;background:#fff!important;display:grid!important;place-items:center!important;font-size:13px!important;color:#233a5a!important;border-right:1px solid #e5e9ef!important}
  #salesView .mobileSaleQtyControl b{font-size:11px!important}.mobileSaleQtyControl button:last-child{border-right:0!important}
  #salesView .mobileSaleCartRemove{width:24px!important;height:24px!important;border-radius:50%!important;border:0!important;background:#ff4d4f!important;color:#fff!important;font-size:16px!important;line-height:1!important}
  #salesView .purchaseCheckoutSummary,#salesView .purchaseBatch,#salesView .purchaseStage>.purchaseChevron{display:none!important}
  #salesView .sellTotalBar{bottom:env(safe-area-inset-bottom,0px)!important;height:62px!important;min-height:62px!important;padding:0 9px 0 14px!important;background:#0d66ff!important;z-index:95!important}
  #salesView .sellTotalBar>span:first-child::before{font-size:16px!important}
  #salesView #saleDraftTotal{font-size:17px!important}
  #salesView .mobileSaleCartCount{border:0!important;cursor:pointer!important;min-width:78px!important;height:44px!important;font-size:16px!important;color:#14213b!important}

  .mobileSaleFlow{display:block!important;position:fixed!important;left:0!important;right:0!important;top:64px!important;bottom:0!important;z-index:100!important;background:#fff!important;visibility:hidden!important;pointer-events:none!important;overflow:hidden!important}
  .mobileSaleFlow[aria-hidden="false"]{visibility:visible!important;pointer-events:auto!important}
  .mobileSaleFlowStep{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;background:#fff!important;min-height:0!important}
  .mobileSaleFlowStep[hidden]{display:none!important}
  .mobileSaleFlowBody{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:13px 12px 18px!important;background:#fff!important}
  .mobileSaleFlowTitle{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 12px!important}
  .mobileSaleFlowTitle .mobileSaleBack{width:34px!important;height:34px!important;border:1px solid #dbe3ed!important;border-radius:7px!important;background:#fff!important;color:#19395f!important;font-size:18px!important}
  .mobileSaleFlowTitle small{display:block!important;color:#6b7a90!important;font-size:9px!important;font-weight:800!important;margin-bottom:1px!important}
  .mobileSaleFlowTitle h2{margin:0!important;color:#18365f!important;font-size:16px!important;line-height:1.2!important}
  .mobileSaleFlowFooter,.mobileSaleSuccessFooter{flex:0 0 auto!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;border-top:1px solid #e7ebf0!important;background:#fff!important;box-shadow:0 -4px 16px rgba(15,23,42,.05)!important}
  .mobileSalePrimary{width:100%!important;height:50px!important;border:0!important;border-radius:7px!important;background:#0d66ff!important;color:#fff!important;font-size:14px!important;font-weight:850!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important}
  .mobileSalePrimary span{font-size:21px!important;font-weight:400!important}

  .mobileSaleCustomerSearch{display:grid!important;grid-template-columns:30px minmax(0,1fr) 44px!important;align-items:center!important;height:46px!important;border:1px solid #dce3ed!important;border-radius:7px!important;margin-bottom:10px!important;background:#fff!important}
  .mobileSaleCustomerSearch>span{display:grid!important;place-items:center!important;color:#718197!important;font-size:19px!important}
  .mobileSaleCustomerSearch input{width:100%!important;height:42px!important;border:0!important;outline:0!important;font-size:12px!important;color:#1f385b!important;min-width:0!important}
  .mobileSaleCustomerSearch button{height:38px!important;border:0!important;border-left:1px solid #e5e9ef!important;background:#fff!important;color:#0d66ff!important;font-size:20px!important}
  .mobileSaleCustomerList{border:1px solid #e3e8ef!important;border-radius:7px!important;overflow:hidden!important;background:#fff!important}
  .mobileSaleCustomerRow{width:100%!important;min-height:70px!important;padding:9px 10px!important;border:0!important;border-bottom:1px solid #edf0f4!important;background:#fff!important;display:grid!important;grid-template-columns:43px minmax(0,1fr) 28px!important;align-items:center!important;gap:10px!important;text-align:left!important;color:#17365f!important}
  .mobileSaleCustomerRow:last-child{border-bottom:0!important}.mobileSaleCustomerRow.selected{background:#eef5ff!important}
  .mobileSaleCustomerAvatar{width:40px!important;height:40px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#e8efff!important;color:#285ed6!important;font-size:11px!important;font-weight:850!important;flex:0 0 auto!important}
  .mobileSaleCustomerRow:nth-child(2n) .mobileSaleCustomerAvatar{background:#f5eefa!important;color:#8050a0!important}.mobileSaleCustomerRow:nth-child(3n) .mobileSaleCustomerAvatar{background:#fff0f0!important;color:#bd5555!important}
  .mobileSaleCustomerText{min-width:0!important;display:grid!important;gap:3px!important}.mobileSaleCustomerText b{font-size:13px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.mobileSaleCustomerText small{font-size:10px!important;color:#526985!important}
  .mobileSaleCustomerRadio{font-size:23px!important;color:#8da0b8!important;text-align:center!important}.mobileSaleCustomerRow.selected .mobileSaleCustomerRadio{color:#0d66ff!important}
  .mobileSaleCustomerEmpty{padding:24px 12px!important;text-align:center!important;color:#7b8899!important;font-size:12px!important}
  .mobileSaleAddCustomerRow{width:100%!important;height:48px!important;margin-top:10px!important;border:1px solid #dce3ed!important;border-radius:7px!important;background:#fff!important;color:#0d66ff!important;font-weight:800!important;font-size:12px!important;text-align:left!important;padding:0 14px!important}
  .mobileSaleSelectedCustomer{display:grid!important;grid-template-columns:43px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;margin-top:14px!important;padding:10px!important;border:1px solid #e1e7ef!important;border-radius:7px!important;background:#f8fafc!important;color:#17365f!important}
  .mobileSaleSelectedCustomer>span:nth-child(2){display:grid!important;gap:2px!important}.mobileSaleSelectedCustomer small{font-size:9px!important;color:#7a8798!important}.mobileSaleSelectedCustomer b{font-size:12px!important}.mobileSaleSelectedCustomer em{font-style:normal!important;font-size:9.5px!important;color:#526985!important}
  .mobileSaleSelectedCustomer>button{width:28px!important;height:28px!important;border:0!important;border-radius:50%!important;background:#eef1f5!important;color:#6b7687!important;font-size:16px!important}
  .mobileSaleWalkinIcon{width:40px!important;height:40px!important;border-radius:50%!important;background:#eaf8ef!important;color:#16a34a!important;display:grid!important;place-items:center!important;font-weight:900!important}

  .mobileSaleConfirmCard,.mobileSaleSummaryCard{border:1px solid #e1e7ef!important;border-radius:7px!important;background:#fff!important;margin-bottom:10px!important;padding:10px!important;color:#17365f!important}
  .mobileSaleSectionLabel{display:block!important;font-size:11px!important;font-weight:850!important;margin-bottom:7px!important;color:#1d385c!important}
  .mobileSalePaymentPerson{display:grid!important;grid-template-columns:42px minmax(0,1fr) 34px!important;align-items:center!important;gap:9px!important}.mobileSalePaymentPerson>span:nth-child(2){display:grid!important;gap:2px!important}.mobileSalePaymentPerson b{font-size:12px!important}.mobileSalePaymentPerson small{font-size:9.5px!important;color:#526985!important}.mobileSalePaymentPerson>button{width:32px!important;height:32px!important;border:0!important;background:transparent!important;color:#0d66ff!important;font-size:18px!important}
  .mobileSaleSectionHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:6px!important}.mobileSaleSectionHead .mobileSaleSectionLabel{margin:0!important}.mobileSaleSectionHead>button{height:28px!important;padding:0 8px!important;border:1px solid #0d66ff!important;border-radius:5px!important;background:#fff!important;color:#0d66ff!important;font-size:9.5px!important;font-weight:800!important}
  .mobileSalePaymentProducts{display:grid!important;gap:0!important}.mobileSalePaymentProduct{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto 24px!important;align-items:center!important;gap:7px!important;min-height:58px!important;border-top:1px solid #edf0f4!important;padding:7px 0!important}.mobileSalePaymentProduct:first-child{border-top:0!important}
  .mobileSalePaymentProduct .saleProductThumb{width:36px!important;height:36px!important;border:1px solid #e2e8f0!important;border-radius:6px!important;overflow:hidden!important;display:grid!important;place-items:center!important;background:#fff!important}.mobileSalePaymentProductInfo{min-width:0!important;display:grid!important;gap:2px!important}.mobileSalePaymentProductInfo b{font-size:11.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mobileSalePaymentProductInfo small{font-size:9.5px!important;color:#64748b!important}
  .mobileSalePayQty{display:grid!important;grid-template-columns:28px 26px 28px!important;height:30px!important;border:1px solid #dce3ed!important;border-radius:5px!important;overflow:hidden!important}.mobileSalePayQty button,.mobileSalePayQty b{border:0!important;background:#fff!important;display:grid!important;place-items:center!important;color:#213b5e!important;font-size:12px!important;border-right:1px solid #e5e9ef!important}.mobileSalePayQty button:last-child{border-right:0!important}.mobileSalePayRemove{width:22px!important;height:22px!important;border:0!important;border-radius:50%!important;background:#ff4d4f!important;color:#fff!important;font-size:14px!important}
  .mobileSaleSummaryCard{display:grid!important;gap:0!important;padding:7px 10px!important}.mobileSaleSummaryCard>div,.mobileSaleDiscountRow{min-height:35px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border-bottom:1px solid #edf0f4!important;font-size:11px!important}.mobileSaleSummaryCard>div:last-child{border-bottom:0!important}.mobileSaleSummaryCard strong{font-size:12px!important}.mobileSaleDiscountRow input{width:58px!important;height:30px!important;border:1px solid #dce3ed!important;border-radius:5px!important;text-align:center!important;color:#17365f!important;font-weight:800!important}.mobileSaleSummaryGrand strong{color:#13a23f!important;font-size:16px!important}
  .mobileSalePaymentMethods{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:0 0 10px!important}.mobileSalePaymentMethods button{height:42px!important;border:1px solid #d8e0eb!important;border-radius:6px!important;background:#fff!important;color:#31445f!important;font-size:11px!important;font-weight:800!important}.mobileSalePaymentMethods button.active{background:#0d66ff!important;border-color:#0d66ff!important;color:#fff!important}
  .mobileSaleReceivedLabel,.mobileSaleNoteLabel{display:grid!important;gap:5px!important;margin-top:9px!important;font-size:10px!important;font-weight:800!important;color:#394d68!important}.mobileSaleReceivedLabel b{color:#ef4444!important}.mobileSaleReceivedLabel input,.mobileSaleNoteLabel input{width:100%!important;height:41px!important;border:1px solid #dce3ed!important;border-radius:6px!important;padding:0 10px!important;font-size:12px!important;color:#17365f!important;outline:none!important}.mobileSaleReceivedLabel input:focus,.mobileSaleNoteLabel input:focus{border-color:#0d66ff!important;box-shadow:0 0 0 2px rgba(13,102,255,.12)!important}
  .mobileSaleValidation{margin-top:9px!important;padding:9px!important;border:1px solid #ffcaca!important;border-radius:6px!important;background:#fff7f7!important;color:#b42318!important;font-size:10px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}.mobileSaleValidation[hidden]{display:none!important}.mobileSaleValidation button{border:0!important;background:#fff!important;color:#0d66ff!important;font-size:9px!important;font-weight:800!important;white-space:nowrap!important}

  .mobileSaleSuccessStep{background:#fbfcfe!important}.mobileSaleSuccessStep .mobileSaleFlowBody{padding-top:24px!important;background:#fbfcfe!important}.mobileSaleSuccessHero{min-height:190px!important;border:1px solid #d7efe0!important;border-radius:8px!important;background:linear-gradient(180deg,#f1fcf6,#fbfffd)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:18px!important;color:#17365f!important}.mobileSaleSuccessCheck{width:64px!important;height:64px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#06a83d!important;color:#fff!important;font-size:38px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(6,168,61,.16)!important}.mobileSaleSuccessHero h2{margin:11px 0 7px!important;color:#14823a!important;font-size:20px!important}.mobileSaleSuccessHero b{font-size:11.5px!important}.mobileSaleSuccessHero span{font-size:10px!important;color:#6b7890!important;margin-top:4px!important}
  .mobileSaleSuccessActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:10px 0!important}.mobileSaleSuccessActions button{height:65px!important;border:1px solid #dce3ed!important;border-radius:7px!important;background:#fff!important;color:#0d66ff!important;font-size:10.5px!important;font-weight:800!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important}.mobileSaleSuccessActions button span{font-size:22px!important}
  .mobileSaleSuccessSummary{border:1px solid #e1e7ef!important;border-radius:7px!important;background:#fff!important;padding:10px!important;color:#17365f!important}.mobileSaleSuccessSummary h3{margin:0 0 7px!important;font-size:12px!important}.mobileSaleSuccessSummary>div{min-height:36px!important;border-top:1px solid #edf0f4!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;font-size:10.5px!important}.mobileSaleSuccessSummary strong{font-size:11px!important;text-align:right!important}.mobileSaleSuccessSummary .successDue{color:#12a440!important}
  .mobileSaleSuccessFooter{display:grid!important;gap:8px!important}.mobileSaleHome{height:48px!important;border:1px solid #dce3ed!important;border-radius:7px!important;background:#fff!important;color:#17365f!important;font-size:12px!important;font-weight:800!important}

  body.mobileSaleFlowOpen{overflow:hidden!important}body.mobileSaleFlowOpen .bizWorkspace{overflow:hidden!important}
}
@media screen and (max-width:359px){
  body.saleMobilePage .mobileHeaderBrand{width:106px!important}body.saleMobilePage .mobileHeaderBrand img{width:104px!important}
  #salesView{padding-left:5px!important;padding-right:5px!important}
  #salesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 58px 38px 38px!important;gap:4px!important;margin-left:1px!important;margin-right:1px!important}
  #salesView .purchaseProductItem{grid-template-columns:43px minmax(0,1fr) auto!important;gap:6px!important}
  #salesView .purchaseProductItem .saleProductThumb{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;min-height:40px!important;max-height:40px!important}
  #salesView .saleProductName{font-size:12px!important}.mobileSalePaymentProduct{grid-template-columns:34px minmax(0,1fr) auto 22px!important;gap:5px!important}.mobileSalePayQty{grid-template-columns:24px 24px 24px!important}
}

/* v307.1 — phone Sell: respect empty cart state and suppress legacy center chevron. */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #salesView .purchaseCartPanel{display:none!important}
  #salesView .purchaseCartPanel.show{display:block!important}
  #salesView .purchaseStage.checkoutCollapsed > .purchaseChevron.saleCompactChevron,
  #salesView .purchaseStage.cartActive.checkoutCollapsed > .purchaseChevron.saleCompactChevron,
  #salesView .purchaseStage > .purchaseChevron.saleCompactChevron{display:none!important}
}


/* =====================================================================
   v308 — Mobile Purchase 4-step flow + mobile Purchase/Sell history cards.
   Existing desktop flows/data structures stay unchanged.
   ===================================================================== */
.mobilePurchaseFlow,.mobilePurchaseCartRow,.mobilePurchaseCartCount{display:none}

@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.purchaseMobilePage{background:#fff!important}
  body.purchaseMobilePage .mobileBottomNav{display:none!important}
  body.purchaseMobilePage .bizWorkspace{padding-bottom:0!important}
  body.purchaseMobilePage .bizTopbar{z-index:110!important;height:64px!important;min-height:64px!important;padding:0 10px!important;background:#ffcd05!important;border-bottom:1px solid #e9b900!important}
  body.purchaseMobilePage .mobileHeaderBrand{display:flex!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:128px!important;height:42px!important;justify-content:center!important;z-index:1!important;pointer-events:none!important}
  body.purchaseMobilePage .mobileHeaderBrand img{width:124px!important;height:36px!important;object-position:center!important}
  body.purchaseMobilePage .mobileMenuToggle{z-index:2!important;width:38px!important;height:38px!important;flex-basis:38px!important}
  body.purchaseMobilePage .topActions{z-index:2!important;gap:8px!important}
  body.purchaseMobilePage .topActions>.topIcon:first-child,body.purchaseMobilePage .settingsAction{display:none!important}
  body.purchaseMobilePage .topActions>.topIcon{width:25px!important;height:25px!important}
  body.purchaseMobilePage .profileTopButton{height:38px!important;gap:3px!important}.purchaseMobilePage .profileTopButton .avatar{width:36px!important;height:36px!important;font-size:14px!important}.purchaseMobilePage .profileTopButton .chev{display:none!important}

  #purchasesView{padding:0 8px calc(76px + env(safe-area-inset-bottom,0px))!important;background:#fff!important}
  #purchasesView .purchaseClone{display:block!important;min-height:calc(100dvh - 64px)!important;height:auto!important;padding:0!important}
  #purchasesView .purchasePicker{padding:10px 0 0!important;background:#fff!important;border:0!important}
  #purchasesView .purchasePicker>h2{font-size:15px!important;color:#17355f!important;margin:0 4px 9px!important}
  #purchasesView .purchaseSearchRow{display:grid!important;grid-template-columns:minmax(0,1fr) 68px 42px 42px!important;gap:6px!important;margin:0 4px 8px!important}
  #purchasesView .purchaseSearch,#purchasesView .purchaseBarcodeField,#purchasesView .pickerTool{height:42px!important;border-radius:6px!important;background:#fff!important}
  #purchasesView .purchaseBarcodeField input{height:40px!important;padding:0 4px!important;font-size:10px!important}#purchasesView .purchaseBarcodeField span{display:none!important}
  #purchasesView .purchaseProductList{padding:0 3px!important}
  #purchasesView .purchaseProductItem{grid-template-columns:48px minmax(0,1fr) auto!important;min-height:72px!important;height:auto!important;gap:9px!important;padding:7px 3px!important;border-bottom:1px solid #e9edf2!important;background:#fff!important}
  #purchasesView .purchaseProductItem .prodIcon.saleProductThumb{width:45px!important;height:45px!important;min-width:45px!important;max-width:45px!important;min-height:45px!important;max-height:45px!important;border-radius:7px!important}
  #purchasesView .purchaseProductName{font-size:13px!important;line-height:1.15!important;color:#17365f!important}
  #purchasesView .purchaseProductMeta{display:grid!important;grid-template-columns:auto auto!important;gap:1px 7px!important;font-size:10.5px!important;line-height:1.2!important;white-space:normal!important}#purchasesView .purchaseProductMeta i{display:none!important}#purchasesView .purchaseMetaStock{grid-column:1/-1!important}
  #purchasesView .purchaseProductItem .addBtn{height:36px!important;padding:0 11px!important;font-size:13px!important;border-radius:5px 0 0 5px!important;background:#112445!important;color:#fff!important}#purchasesView .purchaseProductItem .addMore{height:36px!important;width:31px!important;border-radius:0 5px 5px 0!important;background:#112445!important;color:#fff!important}

  #purchasesView .purchaseStage{display:block!important;width:100%!important;height:auto!important;min-height:0!important;margin:8px 0 0!important;padding:0 3px!important;background:#fff!important}
  #purchasesView .purchaseStageMain{height:auto!important;min-height:0!important;overflow:visible!important;border:0!important;background:#fff!important}
  #purchasesView .purchaseEmptyState,#purchasesView .purchaseCheckoutSummary,#purchasesView .purchaseBatch,#purchasesView .purchaseChevron{display:none!important}
  #purchasesView .purchaseCartPanel{display:none!important;height:auto!important;min-height:0!important;background:#fff!important}.purchaseMobilePage #purchasesView .purchaseCartPanel.show{display:block!important}
  #purchasesView .purchaseCartTop{height:38px!important;padding:0 4px!important;border:0!important;font-size:12px!important;color:#17365f!important}#purchasesView .purchaseCartList{padding:0!important}
  #purchasesView .purchaseCartItem{background:#fff!important;border-top:1px solid #edf0f3!important;border-radius:0!important;padding:0!important;margin:0!important}
  #purchasesView .purchaseCartItemHead,#purchasesView .purchaseCartFields{display:none!important}
  .mobilePurchaseCartRow{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto 24px!important;align-items:center!important;gap:7px!important;min-height:57px!important;padding:7px 3px!important}
  .mobilePurchaseCartRow .purchaseCartThumb{width:36px!important;height:36px!important;border-radius:6px!important;overflow:hidden!important}.mobilePurchaseCartRow .purchaseCartThumb img{width:100%!important;height:100%!important;object-fit:cover!important}
  .mobilePurchaseCartInfo{min-width:0!important;display:grid!important;gap:1px!important}.mobilePurchaseCartInfo b{font-size:11.5px!important;color:#17365f!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mobilePurchaseCartInfo small,.mobilePurchaseCartInfo span{font-size:9.5px!important;color:#65758b!important}.mobilePurchaseCartInfo span strong{color:#1684df!important}
  .mobilePurchaseQtyControl{display:grid!important;grid-template-columns:28px 25px 28px!important;height:30px!important;border:1px solid #dce3ed!important;border-radius:5px!important;overflow:hidden!important}.mobilePurchaseQtyControl button,.mobilePurchaseQtyControl b{border:0!important;border-right:1px solid #e5e9ef!important;background:#fff!important;display:grid!important;place-items:center!important;color:#203b5f!important;font-size:12px!important}.mobilePurchaseQtyControl button:last-child{border-right:0!important}.mobilePurchaseCartRemove{width:22px!important;height:22px!important;border:0!important;border-radius:50%!important;background:#ff4d4f!important;color:#fff!important;font-size:14px!important}
  #purchasesView .purchaseTotalBar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:95!important;height:62px!important;border:0!important;border-radius:0!important;background:#0b67f8!important;color:#fff!important;padding:0 12px 0 14px!important;font-size:13px!important;box-shadow:0 -4px 16px rgba(15,23,42,.12)!important}#purchasesView .purchaseTotalBar>span{font-size:13px!important;font-weight:800!important}#purchasesView .purchaseTotalBar>strong{margin-left:4px!important;font-size:17px!important;color:#fff!important}
  .mobilePurchaseCartCount{display:flex!important;margin-left:auto!important;height:44px!important;min-width:88px!important;padding:0 14px!important;border:0!important;border-radius:8px!important;background:#fff!important;color:#17365f!important;align-items:center!important;justify-content:center!important;gap:12px!important;font-size:17px!important;font-weight:900!important}.mobilePurchaseCartCount b{font-size:24px!important;font-weight:500!important}

  .mobilePurchaseFlow{display:block!important;position:fixed!important;left:0!important;right:0!important;top:64px!important;bottom:0!important;z-index:100!important;background:#fff!important;visibility:hidden!important;pointer-events:none!important;overflow:hidden!important}.mobilePurchaseFlow[aria-hidden="false"]{visibility:visible!important;pointer-events:auto!important}
  .mobilePurchaseFlowStep{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;background:#fff!important;min-height:0!important}.mobilePurchaseFlowStep[hidden]{display:none!important}.mobilePurchaseFlowBody{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:13px 12px 18px!important;background:#fff!important}
  .mobilePurchaseFlowTitle{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 12px!important}.mobilePurchaseBack{width:34px!important;height:34px!important;border:1px solid #dbe3ed!important;border-radius:7px!important;background:#fff!important;color:#19395f!important;font-size:18px!important}.mobilePurchaseFlowTitle small{display:block!important;color:#6b7a90!important;font-size:9px!important;font-weight:800!important;margin-bottom:1px!important}.mobilePurchaseFlowTitle h2{margin:0!important;color:#18365f!important;font-size:16px!important;line-height:1.2!important}
  .mobilePurchaseSupplierSearch{display:grid!important;grid-template-columns:22px minmax(0,1fr) 40px!important;align-items:center!important;height:44px!important;border:1px solid #dce3ed!important;border-radius:6px!important;padding-left:9px!important;margin-bottom:8px!important;color:#718096!important}.mobilePurchaseSupplierSearch input{min-width:0!important;border:0!important;outline:0!important;height:40px!important;font-size:12px!important;color:#17365f!important}.mobilePurchaseSupplierSearch button{height:40px!important;border:0!important;border-left:1px solid #e5e9ef!important;background:#fff!important;color:#0d66ff!important;font-size:18px!important}
  .mobilePurchaseSupplierList{border:1px solid #e1e7ef!important;border-radius:7px!important;overflow:hidden!important;background:#fff!important}.mobilePurchaseSupplierRow{width:100%!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) 24px!important;align-items:center!important;gap:9px!important;min-height:63px!important;padding:7px 10px!important;border:0!important;border-bottom:1px solid #edf0f4!important;background:#fff!important;text-align:left!important}.mobilePurchaseSupplierRow:last-child{border-bottom:0!important}.mobilePurchaseSupplierRow.selected{background:#f2f7ff!important}.mobilePurchaseSupplierAvatar{width:38px!important;height:38px!important;border-radius:50%!important;background:#e9efff!important;color:#2857d7!important;display:grid!important;place-items:center!important;font-size:11px!important;font-weight:850!important}.mobilePurchaseSupplierText{min-width:0!important;display:grid!important;gap:2px!important}.mobilePurchaseSupplierText b{font-size:12px!important;color:#17365f!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mobilePurchaseSupplierText small{font-size:10px!important;color:#607089!important}.mobilePurchaseSupplierRadio{color:#0d66ff!important;font-size:18px!important;text-align:center!important}.mobilePurchaseSupplierEmpty{padding:20px!important;text-align:center!important;color:#6b7890!important;font-size:11px!important}
  .mobilePurchaseAddSupplierRow{width:100%!important;height:43px!important;margin-top:8px!important;border:1px solid #dce3ed!important;border-radius:6px!important;background:#fff!important;color:#0d66ff!important;text-align:left!important;padding:0 12px!important;font-size:11px!important;font-weight:800!important}.mobilePurchaseSelectedSupplier{display:grid!important;grid-template-columns:42px minmax(0,1fr) 32px!important;align-items:center!important;gap:9px!important;margin-top:12px!important;padding:9px!important;border:1px solid #dce3ed!important;border-radius:7px!important;background:#f8fafc!important;color:#17365f!important}.mobilePurchaseSelectedSupplier>span:nth-child(2){display:grid!important;gap:2px!important}.mobilePurchaseSelectedSupplier small{font-size:9px!important;color:#748197!important}.mobilePurchaseSelectedSupplier b{font-size:11.5px!important}.mobilePurchaseSelectedSupplier em{font-size:9.5px!important;font-style:normal!important;color:#5c6f88!important}.mobilePurchaseSelectedSupplier>button{width:30px!important;height:30px!important;border:0!important;border-radius:50%!important;background:#eef1f5!important;color:#6b7687!important}.mobilePurchaseSupplierHint{width:38px!important;height:38px!important;border-radius:50%!important;background:#eef4ff!important;color:#0d66ff!important;display:grid!important;place-items:center!important}
  .mobilePurchaseFlowFooter,.mobilePurchaseSuccessFooter{flex:0 0 auto!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;border-top:1px solid #e7ebf0!important;background:#fff!important;box-shadow:0 -4px 16px rgba(15,23,42,.05)!important}.mobilePurchasePrimary{width:100%!important;height:49px!important;border:0!important;border-radius:6px!important;background:#0d66ff!important;color:#fff!important;font-size:12.5px!important;font-weight:850!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}.mobilePurchasePrimary span{font-size:21px!important;font-weight:400!important}
  .mobilePurchaseConfirmCard,.mobilePurchaseSummaryCard{border:1px solid #e1e7ef!important;border-radius:7px!important;background:#fff!important;margin-bottom:10px!important;padding:10px!important;color:#17365f!important}.mobilePurchaseSectionLabel{display:block!important;font-size:11px!important;font-weight:850!important;margin-bottom:7px!important}.mobilePurchasePaymentPerson{display:grid!important;grid-template-columns:42px minmax(0,1fr) 34px!important;align-items:center!important;gap:9px!important}.mobilePurchasePaymentPerson>span:nth-child(2){display:grid!important;gap:2px!important}.mobilePurchasePaymentPerson b{font-size:12px!important}.mobilePurchasePaymentPerson small{font-size:9.5px!important;color:#526985!important}.mobilePurchasePaymentPerson>button{width:32px!important;height:32px!important;border:0!important;background:transparent!important;color:#0d66ff!important;font-size:18px!important}
  .mobilePurchaseSectionHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:6px!important}.mobilePurchaseSectionHead .mobilePurchaseSectionLabel{margin:0!important}.mobilePurchaseSectionHead>button{height:28px!important;padding:0 8px!important;border:1px solid #0d66ff!important;border-radius:5px!important;background:#fff!important;color:#0d66ff!important;font-size:9.5px!important;font-weight:800!important}
  .mobilePurchasePaymentProducts{display:grid!important;gap:0!important}.mobilePurchasePaymentProduct{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto 24px!important;align-items:center!important;gap:7px!important;min-height:58px!important;border-top:1px solid #edf0f4!important;padding:7px 0!important}.mobilePurchasePaymentProduct:first-child{border-top:0!important}.mobilePurchasePaymentProduct .saleProductThumb{width:36px!important;height:36px!important;border:1px solid #e2e8f0!important;border-radius:6px!important;overflow:hidden!important;display:grid!important;place-items:center!important}.mobilePurchasePaymentProduct .saleProductThumb img{width:100%!important;height:100%!important;object-fit:cover!important}.mobilePurchasePaymentProductInfo{min-width:0!important;display:grid!important;gap:2px!important}.mobilePurchasePaymentProductInfo b{font-size:11.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mobilePurchasePaymentProductInfo small{font-size:9.5px!important;color:#64748b!important}.mobilePurchasePayQty{display:grid!important;grid-template-columns:28px 26px 28px!important;height:30px!important;border:1px solid #dce3ed!important;border-radius:5px!important;overflow:hidden!important}.mobilePurchasePayQty button,.mobilePurchasePayQty b{border:0!important;background:#fff!important;display:grid!important;place-items:center!important;color:#213b5e!important;font-size:12px!important;border-right:1px solid #e5e9ef!important}.mobilePurchasePayQty button:last-child{border-right:0!important}.mobilePurchasePayRemove{width:22px!important;height:22px!important;border:0!important;border-radius:50%!important;background:#ff4d4f!important;color:#fff!important}
  .mobilePurchaseSummaryCard{display:grid!important;gap:0!important;padding:7px 10px!important}.mobilePurchaseSummaryCard>div,.mobilePurchaseDiscountRow,.mobilePurchaseDuePreview{min-height:35px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border-bottom:1px solid #edf0f4!important;font-size:11px!important}.mobilePurchaseSummaryCard>div:last-child{border-bottom:0!important}.mobilePurchaseSummaryCard strong{font-size:12px!important}.mobilePurchaseDiscountRow input{width:58px!important;height:30px!important;border:1px solid #dce3ed!important;border-radius:5px!important;text-align:center!important;color:#17365f!important;font-weight:800!important}.mobilePurchaseSummaryGrand strong{color:#13a23f!important;font-size:16px!important}
  .mobilePurchasePaymentMethods{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:0 0 10px!important}.mobilePurchasePaymentMethods button{height:42px!important;border:1px solid #d8e0eb!important;border-radius:6px!important;background:#fff!important;color:#31445f!important;font-size:11px!important;font-weight:800!important}.mobilePurchasePaymentMethods button.active{background:#0d66ff!important;border-color:#0d66ff!important;color:#fff!important}.mobilePurchasePaidLabel,.mobilePurchaseNoteLabel{display:grid!important;gap:5px!important;margin-top:9px!important;font-size:10px!important;font-weight:800!important;color:#394d68!important}.mobilePurchasePaidLabel b{color:#ef4444!important}.mobilePurchasePaidLabel input,.mobilePurchaseNoteLabel input{width:100%!important;height:41px!important;border:1px solid #dce3ed!important;border-radius:6px!important;padding:0 10px!important;font-size:12px!important;color:#17365f!important}.mobilePurchaseDuePreview{margin-top:5px!important;border-bottom:0!important;color:#526985!important}.mobilePurchaseDuePreview strong{color:#14a043!important}
  .mobilePurchaseSuccessStep{background:#fbfcfe!important}.mobilePurchaseSuccessStep .mobilePurchaseFlowBody{padding-top:24px!important;background:#fbfcfe!important}.mobilePurchaseSuccessHero{min-height:190px!important;border:1px solid #d7efe0!important;border-radius:8px!important;background:linear-gradient(180deg,#f1fcf6,#fbfffd)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:18px!important;color:#17365f!important}.mobilePurchaseSuccessCheck{width:64px!important;height:64px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#06a83d!important;color:#fff!important;font-size:38px!important;font-weight:900!important}.mobilePurchaseSuccessHero h2{margin:11px 0 7px!important;color:#14823a!important;font-size:20px!important}.mobilePurchaseSuccessHero b{font-size:11.5px!important}.mobilePurchaseSuccessHero span{font-size:10px!important;color:#6b7890!important;margin-top:4px!important}.mobilePurchaseSuccessActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:10px 0!important}.mobilePurchaseSuccessActions button{height:65px!important;border:1px solid #dce3ed!important;border-radius:7px!important;background:#fff!important;color:#0d66ff!important;font-size:10.5px!important;font-weight:800!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important}.mobilePurchaseSuccessActions button span{font-size:22px!important}.mobilePurchaseSuccessSummary{border:1px solid #e1e7ef!important;border-radius:7px!important;background:#fff!important;padding:10px!important;color:#17365f!important}.mobilePurchaseSuccessSummary h3{margin:0 0 7px!important;font-size:12px!important}.mobilePurchaseSuccessSummary>div{min-height:36px!important;border-top:1px solid #edf0f4!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;font-size:10.5px!important}.mobilePurchaseSuccessSummary strong{font-size:11px!important;text-align:right!important}.mobilePurchaseSuccessSummary .successDue{color:#12a440!important}.mobilePurchaseSuccessFooter{display:grid!important;gap:8px!important}.mobilePurchaseHome{height:48px!important;border:1px solid #dce3ed!important;border-radius:7px!important;background:#fff!important;color:#17365f!important;font-size:12px!important;font-weight:800!important}
  body.mobilePurchaseFlowOpen{overflow:hidden!important}body.mobilePurchaseFlowOpen .bizWorkspace{overflow:hidden!important}
  body.mobilePurchaseSupplierOnly #purchaseConfirmDrawer{display:none!important}body.mobilePurchaseSupplierOnly #purchaseConfirmScrim{display:none!important}body.mobilePurchaseSupplierOnly .purchaseSupplierDrawer{display:flex!important;z-index:20!important}

  /* Mobile ledger/history: compact reference-like cards from canonical transaction groups. */
  body.purchaseHistoryMobilePage .bizTopbar,body.salesHistoryMobilePage .bizTopbar{height:64px!important;min-height:64px!important;background:#ffcd05!important;border-bottom:1px solid #e9b900!important;display:flex!important}
  #purchaseHistoryView .purchaseMobileHeader,#salesHistoryView .salesMobileHeader{height:48px!important;background:#fff!important;color:#17365f!important;padding:0 12px!important;font-size:18px!important;font-weight:850!important;border-bottom:1px solid #edf0f3!important}
  #purchaseHistoryView .purchaseMobileSummary,#salesHistoryView .salesMobileSummary{display:none!important}
  #purchaseHistoryView .historyHeader,#salesHistoryView .historyHeader{display:flex!important;padding:8px 10px 4px!important}.purchaseHistoryMobilePage #purchaseHistoryView .historyHeader h1,.salesHistoryMobilePage #salesHistoryView .historyHeader h1{font-size:16px!important;color:#17365f!important;margin:0!important}.purchaseHistoryMobilePage #purchaseHistoryView .historyRight,.salesHistoryMobilePage #salesHistoryView .historyRight{display:none!important}
  #purchaseHistoryView .historyFilters,#salesHistoryView .historyFilters{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:6px!important;padding:4px 10px 9px!important;border:0!important}.purchaseHistoryMobilePage #purchaseHistoryView .searchBox,.salesHistoryMobilePage #salesHistoryView .searchBox{grid-column:1!important;height:42px!important;border:1px solid #dce3ed!important;border-radius:6px!important}.purchaseHistoryMobilePage #purchaseHistoryView .purchaseHistoryDatePickerWrap,.salesHistoryMobilePage #salesHistoryView .universalDatePickerWrap{grid-column:2!important;width:42px!important}.purchaseHistoryMobilePage #purchaseHistoryView #purchaseHistoryDateBtn,.salesHistoryMobilePage #salesHistoryView #salesHistoryDateBtn{width:42px!important;height:42px!important;padding:0!important;font-size:0!important;border:1px solid #dce3ed!important;border-radius:6px!important}.purchaseHistoryMobilePage #purchaseHistoryView #purchaseHistoryDateBtn::before,.salesHistoryMobilePage #salesHistoryView #salesHistoryDateBtn::before{content:"▣";font-size:18px!important}.purchaseHistoryMobilePage #purchaseHistoryView #purchaseHistoryCountSelect,.purchaseHistoryMobilePage #purchaseHistoryView #purchaseHistoryRefreshBtn,.salesHistoryMobilePage #salesHistoryView .salesDesktopCount,.salesHistoryMobilePage #salesHistoryView #salesMobileCount,.salesHistoryMobilePage #salesHistoryView #salesHistoryRefreshBtn{display:none!important}
  #purchaseHistoryView .purchaseMobileCards,#salesHistoryView .salesMobileCards{display:grid!important;gap:8px!important;padding:4px 10px 18px!important}.mobileHistoryTxnCard{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto 18px!important;align-items:center!important;gap:8px!important;min-height:82px!important;padding:10px!important;border:1px solid #e3e9f0!important;border-radius:8px!important;background:#fff!important;color:#17365f!important;box-shadow:0 1px 2px rgba(15,23,42,.03)!important}.mobileHistoryDoc{width:38px!important;height:38px!important;border-radius:50%!important;background:#edf4ff!important;color:#0d66ff!important;display:grid!important;place-items:center!important;font-size:18px!important}.mobileHistoryMain{min-width:0!important;display:grid!important;gap:2px!important}.mobileHistoryMain b{font-size:11.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mobileHistoryMain small{font-size:9px!important;color:#718096!important}.mobileHistoryMain em{font-size:10px!important;font-style:normal!important;color:#324a68!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mobileHistorySide{display:grid!important;justify-items:end!important;gap:4px!important}.mobileHistorySide i{font-style:normal!important;background:#e2f8e9!important;color:#0aa13b!important;border-radius:5px!important;padding:4px 8px!important;font-size:9px!important;font-weight:850!important}.mobileHistorySide i.isDue{background:#ffe7e7!important;color:#e23a3a!important}.mobileHistorySide strong{font-size:11px!important;color:#17365f!important}.mobileHistorySide small{font-size:8.5px!important;color:#718096!important}.mobileHistoryChevron{color:#526985!important;font-size:22px!important}.purchaseHistoryMobilePage #purchaseHistoryView .hPanel,.salesHistoryMobilePage #salesHistoryView .hPanel,.salesHistoryMobilePage #salesHistoryView .salesMobilePrint{display:none!important}
}
@media screen and (max-width:359px){
  body.purchaseMobilePage .mobileHeaderBrand{width:106px!important}body.purchaseMobilePage .mobileHeaderBrand img{width:104px!important}
  #purchasesView{padding-left:5px!important;padding-right:5px!important}#purchasesView .purchaseSearchRow{grid-template-columns:minmax(0,1fr) 58px 38px 38px!important;gap:4px!important;margin-left:1px!important;margin-right:1px!important}#purchasesView .purchaseProductItem{grid-template-columns:43px minmax(0,1fr) auto!important;gap:6px!important}#purchasesView .purchaseProductItem .prodIcon.saleProductThumb{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;min-height:40px!important;max-height:40px!important}.mobilePurchaseCartRow,.mobilePurchasePaymentProduct{grid-template-columns:34px minmax(0,1fr) auto 22px!important;gap:5px!important}.mobilePurchaseQtyControl,.mobilePurchasePayQty{grid-template-columns:24px 24px 24px!important}.mobileHistoryTxnCard{grid-template-columns:38px minmax(0,1fr) auto 14px!important;padding:8px!important;gap:6px!important}
}


/* v308.1 — history top/header alignment to the supplied mobile ledger reference. */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  body.purchaseHistoryMobilePage .bizTopbar,body.salesHistoryMobilePage .bizTopbar{position:relative!important;z-index:110!important;padding:0 10px!important}
  body.purchaseHistoryMobilePage .mobileHeaderBrand,body.salesHistoryMobilePage .mobileHeaderBrand{display:flex!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:128px!important;height:42px!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;z-index:1!important}
  body.purchaseHistoryMobilePage .mobileHeaderBrand img,body.salesHistoryMobilePage .mobileHeaderBrand img{width:124px!important;height:36px!important;object-position:center!important}
  body.purchaseHistoryMobilePage .mobileMenuToggle,body.salesHistoryMobilePage .mobileMenuToggle{z-index:2!important;width:38px!important;height:38px!important;flex-basis:38px!important}
  body.purchaseHistoryMobilePage .topActions,body.salesHistoryMobilePage .topActions{z-index:2!important;gap:8px!important}
  body.purchaseHistoryMobilePage .topActions>.topIcon:first-child,body.purchaseHistoryMobilePage .settingsAction,body.salesHistoryMobilePage .topActions>.topIcon:first-child,body.salesHistoryMobilePage .settingsAction{display:none!important}
  body.purchaseHistoryMobilePage .topActions>.topIcon,body.salesHistoryMobilePage .topActions>.topIcon{width:25px!important;height:25px!important}
  body.purchaseHistoryMobilePage .profileTopButton,body.salesHistoryMobilePage .profileTopButton{height:38px!important;gap:3px!important}
  body.purchaseHistoryMobilePage .profileTopButton .avatar,body.salesHistoryMobilePage .profileTopButton .avatar{width:36px!important;height:36px!important;font-size:14px!important}
  body.purchaseHistoryMobilePage .profileTopButton .chev,body.salesHistoryMobilePage .profileTopButton .chev{display:none!important}
  #purchaseHistoryView .purchaseMobileHeader,#salesHistoryView .salesMobileHeader{height:50px!important;padding:0 12px!important;border-bottom:0!important;font-size:17px!important;font-weight:850!important;background:#fff!important;color:#17365f!important}
  #purchaseHistoryView .purchaseMobileHeader button,#salesHistoryView .salesMobileHeader button{display:none!important}
  .purchaseHistoryMobilePage #purchaseHistoryView .historyHeader,.salesHistoryMobilePage #salesHistoryView .historyHeader{display:none!important}
  .purchaseHistoryMobilePage #purchaseHistoryView .historyFilters,.salesHistoryMobilePage #salesHistoryView .historyFilters{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;grid-template-rows:44px!important;gap:6px!important;padding:0 10px 10px!important;margin:0!important;align-items:stretch!important}
  .purchaseHistoryMobilePage #purchaseHistoryView .searchBox,.salesHistoryMobilePage #salesHistoryView .searchBox{grid-column:1!important;grid-row:1!important;width:100%!important;height:44px!important;margin:0!important;min-width:0!important}
  .purchaseHistoryMobilePage #purchaseHistoryView .purchaseHistoryDatePickerWrap,.salesHistoryMobilePage #salesHistoryView .universalDatePickerWrap{grid-column:2!important;grid-row:1!important;width:44px!important;height:44px!important;margin:0!important;position:relative!important}
  .purchaseHistoryMobilePage #purchaseHistoryView #purchaseHistoryDateBtn,.salesHistoryMobilePage #salesHistoryView #salesHistoryDateBtn{width:44px!important;height:44px!important;margin:0!important}
  #purchaseHistoryView .purchaseMobileCards,#salesHistoryView .salesMobileCards{padding-top:0!important}
}
@media screen and (max-width:359px){
  body.purchaseHistoryMobilePage .mobileHeaderBrand,body.salesHistoryMobilePage .mobileHeaderBrand{width:106px!important}body.purchaseHistoryMobilePage .mobileHeaderBrand img,body.salesHistoryMobilePage .mobileHeaderBrand img{width:104px!important}
}

/* =========================================================
   v309 — Purchase desktop sticky right panel
   Scope: Purchase page desktop only. Keep existing width/UI/logic intact;
   allow the left product list to define scroll height while the existing
   right purchase stage stays inside the viewport.
   ========================================================= */
@media screen and (min-width:901px) and (any-hover:hover){
  #purchasesView .purchaseClone{
    height:auto!important;
    min-height:calc(80dvh - 64px)!important;
  }
  #purchasesView .purchaseStage{
    position:sticky!important;
    top:14px!important;
    align-self:start!important;
    height:min(540px,calc(80dvh - 28px))!important;
    min-height:0!important;
    max-height:calc(80dvh - 28px)!important;
  }
  #purchasesView .purchaseStageMain{
    overscroll-behavior:contain!important;
  }
}

/* =========================================================
   v313 — Sell desktop sticky right panel
   Mirrors the existing v309 Purchase desktop behavior only.
   ========================================================= */
@media screen and (min-width:901px) and (any-hover:hover){
  #salesView .sellClone{
    height:auto!important;
    min-height:calc(80dvh - 64px)!important;
  }
  #salesView .purchaseStage{
    position:sticky!important;
    top:14px!important;
    align-self:start!important;
    height:min(540px,calc(80dvh - 28px))!important;
    min-height:0!important;
    max-height:calc(80dvh - 28px)!important;
  }
  #salesView .purchaseStageMain{
    overscroll-behavior:contain!important;
  }
}


/* =========================================================
   v310 — Purchase > Add Product Supplier / Dealer reference UI
   Scope: Supplier / Dealer selector only. Existing supplier data,
   quick-add flow and product form logic remain unchanged.
   ========================================================= */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField{
    margin-bottom:16px!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierLabel{
    margin-bottom:6px!important;
    font-size:12px!important;
    line-height:16px!important;
    font-weight:800!important;
    color:#102946!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierControlRow{
    display:block!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch{
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 48px 0 48px!important;
    border:1px solid #d7e0eb!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#223b5c!important;
    font-size:12px!important;
    font-weight:600!important;
    box-shadow:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch::placeholder{
    color:#74849a!important;
    opacity:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap input#productSupplierSearch:focus{
    border-color:#1684ff!important;
    box-shadow:0 0 0 1px rgba(22,132,255,.12)!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon{
    left:13px!important;
    width:24px!important;
    height:24px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon:before{
    left:8px!important;
    top:2px!important;
    width:7px!important;
    height:7px!important;
    border-color:#0877ff!important;
    border-width:1.7px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierPersonIcon:after{
    left:5px!important;
    bottom:2px!important;
    width:13px!important;
    height:9px!important;
    border-color:#0877ff!important;
    border-width:1.7px!important;
    border-bottom:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle{
    right:5px!important;
    width:34px!important;
    height:44px!important;
    font-size:18px!important;
    color:#111!important;
    font-family:Arial,"Noto Sans Symbols 2","Segoe UI Symbol",sans-serif!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierToggle:after{
    content:none!important;
    display:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear{
    right:39px!important;
    width:28px!important;
    height:44px!important;
    font-size:16px!important;
    color:#75849a!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView{
    left:48px!important;
    right:74px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView b{
    font-size:11.5px!important;
    line-height:14px!important;
    color:#142c4d!important;
    font-weight:800!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierSelectedView small{
    font-size:9.5px!important;
    line-height:12px!important;
    color:#71839a!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:48px!important;
    width:100%!important;
    max-height:232px!important;
    padding:0 0 6px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    border:1px solid #e0e6ee!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:0 10px 24px rgba(16,39,71,.10)!important;
    z-index:500!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    position:relative!important;
    width:100%!important;
    min-height:47px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    gap:0!important;
    margin:0!important;
    padding:5px 12px 5px 54px!important;
    border:0!important;
    border-bottom:1px solid #edf0f4!important;
    border-radius:0!important;
    background:#fff!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]:hover,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id].active{
    background:#f5f9ff!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:""!important;
    position:absolute!important;
    left:15px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:20px!important;
    height:24px!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24' fill='none' stroke='%230877ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='6.5' r='3.3'/%3E%3Cpath d='M4.2 21c.4-5 2.4-7.3 5.8-7.3s5.4 2.3 5.8 7.3'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 24px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] b{
    margin:0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:15px!important;
    font-weight:800!important;
    color:#142c4d!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] small{
    margin:0!important;
    padding:0!important;
    font-size:10px!important;
    line-height:13px!important;
    color:#536985!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button:not([data-product-supplier-id]):not(.productSupplierQuickAdd){
    width:100%!important;
    min-height:45px!important;
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid #edf0f4!important;
    background:#fff!important;
    color:#718096!important;
    text-align:left!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    width:calc(100% - 12px)!important;
    min-height:36px!important;
    height:36px!important;
    margin:6px 6px 0!important;
    padding:0 12px!important;
    border:1px solid #07101d!important;
    border-radius:5px!important;
    background:#07101d!important;
    color:#fff!important;
    box-shadow:none!important;
    cursor:pointer!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd:hover{
    background:#0c1828!important;
    border-color:#0c1828!important;
    transform:none!important;
    filter:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd span{
    display:inline!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd b{
    color:#fff!important;
    font-size:11.5px!important;
    line-height:14px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
}

/* v310 verification corrections — preserve closed-state cleanliness and remove
   legacy result-button pseudo decoration from the black quick-add row. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap #productSupplierClear[hidden]{
    display:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > .productSupplierQuickAdd::before{
    content:none!important;
    display:none!important;
    background:none!important;
    border:0!important;
  }
}

/* v310 visual correction — draw the supplier result avatar with the same
   clean blue outline used in the supplied reference. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:""!important;
    left:24px!important;
    top:13px!important;
    transform:none!important;
    width:7px!important;
    height:7px!important;
    box-sizing:border-box!important;
    border:1.7px solid #0877ff!important;
    border-radius:50%!important;
    background:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::after{
    content:""!important;
    position:absolute!important;
    left:21px!important;
    top:25px!important;
    width:13px!important;
    height:9px!important;
    box-sizing:border-box!important;
    border:1.7px solid #0877ff!important;
    border-bottom:0!important;
    border-radius:10px 10px 0 0!important;
    background:transparent!important;
    pointer-events:none!important;
  }
}


/* v311 — Purchase Add Product non-blocking pending/error row. Scoped only to the Purchase picker. */
#purchasesView .purchaseProductItem.productAddPendingItem{background:#f8fbff!important;border-bottom-color:#dfe9f6!important}
#purchasesView .productAddPendingItem.isFailed{background:#fffafa!important;border-bottom-color:#f2d9d9!important}
#purchasesView .productAddPendingThumb{opacity:.82}
#purchasesView .productAddPendingState{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;color:#607089!important;font-size:10.5px!important;line-height:1.25!important;white-space:normal!important}
#purchasesView .productAddPendingSpinner{width:12px;height:12px;flex:0 0 12px;border:2px solid #c8d7eb;border-top-color:#176ff2;border-radius:50%;animation:productAddPendingSpin .72s linear infinite}
#purchasesView .productAddPendingError{color:#c63a3a;font-weight:800}
#purchasesView .productAddPendingReason{color:#8a5b5b;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#purchasesView .productAddPendingActions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:0 0 auto}
#purchasesView .productAddPendingActions>span{font-size:10px;font-weight:800;color:#5d7392;background:#edf4ff;border:1px solid #dbe8fa;border-radius:999px;padding:4px 8px}
#purchasesView .productAddPendingActions button{height:29px;border:1px solid #d3deeb;border-radius:5px;background:#fff;color:#17365f;padding:0 8px;font-size:10.5px;font-weight:800;cursor:pointer}
#purchasesView .productAddPendingActions button:first-child{border-color:#176ff2;background:#176ff2;color:#fff}
#purchaseAddOverlay .productAddSubmit.isLoading{position:relative}
#purchaseAddOverlay .productAddSubmit.isLoading:before{content:"";display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-2px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:productAddPendingSpin .72s linear infinite}
@keyframes productAddPendingSpin{to{transform:rotate(360deg)}}
@media (max-width:700px){#purchasesView .productAddPendingActions{gap:3px}#purchasesView .productAddPendingActions button{height:28px;padding:0 6px;font-size:9.5px}#purchasesView .productAddPendingReason{max-width:110px}}

/* v312 — Purchase > Add Product Supplier results: single avatar + overlap guard.
   Scoped to the desktop Purchase supplier dropdown only. Data/search/selection logic unchanged. */
@media (min-width:721px){
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    position:relative!important;
    min-width:0!important;
    padding-left:54px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:20px!important;
    height:24px!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24' fill='none' stroke='%230877ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='6.5' r='3.3'/%3E%3Cpath d='M4.2 21c.4-5 2.4-7.3 5.8-7.3s5.4 2.3 5.8 7.3'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 24px!important;
    pointer-events:none!important;
    z-index:0!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::after{
    content:none!important;
    display:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > b,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > small{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:none!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > b{
    line-height:18px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > small{
    line-height:15px!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > b::before,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > b::after,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > small::before,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > small::after{
    content:none!important;
    display:none!important;
  }
}

/* =========================================================
   v314 — Purchase Add Product supplier dropdown overlap fix.
   Scope: desktop/tablet-width drawer styling only (>=721px).
   Keeps supplier data/search/selection/quick-add logic unchanged.
   ========================================================= */
@media (min-width:721px){
  /* The old input wrapper used isolation:isolate, which trapped the absolute
     results list in a lower stacking context. Elevate the whole supplier field
     instead so later form controls (including Online Sale) cannot paint above it. */
  #purchaseAddOverlay[data-source="purchase"] .productSupplierField{
    position:relative!important;
    z-index:80!important;
    isolation:isolate!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierInputWrap{
    isolation:auto!important;
    overflow:visible!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults{
    z-index:20!important;
    background:#fff!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  /* Make the avatar a real grid column instead of an absolutely positioned
     decoration. This guarantees the icon can never sit on top of name/phone. */
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]{
    position:relative!important;
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:0!important;
    align-items:center!important;
    align-content:center!important;
    min-width:0!important;
    min-height:50px!important;
    padding:7px 12px!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::before{
    content:""!important;
    position:static!important;
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    justify-self:center!important;
    transform:none!important;
    width:20px!important;
    height:24px!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24' fill='none' stroke='%230877ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='6.5' r='3.3'/%3E%3Cpath d='M4.2 21c.4-5 2.4-7.3 5.8-7.3s5.4 2.3 5.8 7.3'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 24px!important;
    pointer-events:none!important;
    z-index:auto!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id]::after{
    content:none!important;
    display:none!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > b{
    grid-column:2!important;
    grid-row:1!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > small{
    grid-column:2!important;
    grid-row:2!important;
  }
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > b,
  #purchaseAddOverlay[data-source="purchase"] .productSupplierResults > button[data-product-supplier-id] > small{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* =========================================================
   v315 — Application-wide desktop zoom overlap hardening.
   Responsive/layout-only: keep existing visuals/data/actions, but let shared
   rows and desktop toolbars reflow cleanly when browser zoom reduces the
   available CSS viewport. Mobile/touch layouts are left untouched.
   ========================================================= */

/* Shared Purchase / Sell picker row: icon | flexible content | action.
   The old metadata rules forced one unbroken line inside a fixed-height row;
   at browser zoom that line became wider than the content column and painted
   underneath the stock text / Add controls. */
@media screen and (min-device-width:901px) and (hover:hover) and (pointer:fine){
#purchasesView .purchaseProductItem,
#salesView .purchaseProductItem{
  grid-template-columns:42px minmax(0,1fr) auto!important;
  height:auto!important;
  min-height:66px!important;
  align-items:center!important;
}
#purchasesView .purchaseProductInfo,
#salesView .saleProductInfo{
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
#purchasesView .purchaseProductName,
#salesView .saleProductName{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#purchasesView .purchaseProductMeta,
#salesView .saleProductMeta{
  display:flex!important;
  align-items:center!important;
  align-content:center!important;
  flex-wrap:wrap!important;
  column-gap:7px!important;
  row-gap:2px!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  line-height:1.25!important;
}
#purchasesView .purchaseProductMeta > span,
#salesView .saleProductMeta > span{
  display:flex!important;
  align-items:baseline!important;
  flex-wrap:wrap!important;
  gap:2px!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#purchasesView .purchaseProductMeta > span strong,
#salesView .saleProductMeta > span strong{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
#purchasesView .purchaseProductMeta > i,
#salesView .saleProductMeta > i{
  flex:0 0 auto!important;
}
#purchasesView .purchaseProductItem .addWrap,
#salesView .purchaseProductItem .addWrap{
  min-width:max-content!important;
  flex:0 0 auto!important;
  flex-shrink:0!important;
  align-self:center!important;
}

}

/* Keep desktop Product List / Stock controls intrinsically shrinkable.
   Lowering minimums does not change their normal-width proportions, but prevents
   browser zoom from forcing hidden overflow before the narrow breakpoint. */
@media screen and (min-device-width:901px){
  #productsView .productPartyDesktop{
    grid-template-columns:minmax(260px,1.25fr) minmax(180px,.8fr) minmax(330px,1.35fr)!important;
  }
  #stockView .stockReferenceFilters{
    flex-wrap:wrap!important;
  }
}

/* Desktop device + reduced layout viewport (browser zoom / narrow desktop).
   Override the older 1120px desktop minimum only in this constrained state;
   normal desktop geometry remains unchanged above 1400px. */
@media screen and (min-device-width:901px) and (max-width:1400px) and (hover:hover) and (pointer:fine){
  html,body{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .bizShell{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:clamp(145px,18vw,180px) minmax(0,1fr)!important;
  }
  .bizWorkspace,.viewPane,.hPage{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Purchase / Sell keep the same split UI, but the fixed 528px picker is
     allowed to contract so the sticky right panel never gets squeezed under it. */
  #purchasesView .purchaseClone,
  #salesView .sellClone{
    grid-template-columns:minmax(320px,46%) minmax(0,1fr)!important;
    min-width:0!important;
  }
  #purchasesView .purchasePicker,
  #salesView .sellPicker,
  #purchasesView .purchaseStage,
  #salesView .purchaseStage{
    min-width:0!important;
  }
  #purchasesView .purchaseProductMeta > i,
  #salesView .saleProductMeta > i{
    display:none!important;
  }

  /* Shared desktop headings/toolbars wrap instead of colliding at high zoom. */
  .pageTitleRow,.historyHeader,.dueTitleRow,.contactTitle,.expenseTop,
  #stockView .stockTitleRow{
    min-width:0!important;
    flex-wrap:wrap!important;
    row-gap:8px!important;
  }
  .pageToolbar,.historyRight,.historyFilters,.cashboxToolbar,.dueHistoryTools,
  #stockView .stockViewToolbar,#stockView .stockEditToolbar,
  #stockView .stockReferenceFilters{
    min-width:0!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
    row-gap:8px!important;
  }

  /* Product List: the 3-column dealer/supplier card and seven-control filter
     bar previously had fixed minimums wider than a zoomed desktop viewport. */
  #productsView .productPartyDesktop{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
  }
  #productsView .productPartySummary{
    grid-column:1/-1!important;
  }
  #productsView .productFilters{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #productsView .productFilters .searchBox{
    flex:2 1 220px!important;
    min-width:160px!important;
  }
  #productsView .productDesktopScanBtn{
    flex:0 0 44px!important;
  }
  #productsView .productFilters select{
    flex:1 1 120px!important;
    min-width:100px!important;
    max-width:100%!important;
  }
  #productsView .productDesktopFilterBtn,
  #productsView #productDesktopRefresh{
    flex:0 1 auto!important;
  }
  #productsView .productIconCell{
    min-width:0!important;
  }
  #productsView .productIconCell strong{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Stock/Cashbook controls may wrap; tables keep their own internal scroll. */
  #stockView .stockReferenceFilters .stockSearchBox{
    flex:1 1 220px!important;
    min-width:160px!important;
    max-width:100%!important;
  }
  #stockView .stockReferenceFilters select{
    flex:0 1 130px!important;
    min-width:100px!important;
  }
  #stockView .stockMetricsRef{
    min-width:0!important;
    flex:1 1 260px!important;
    flex-wrap:wrap!important;
  }
  #cashboxView .cashboxToolbar > *{
    max-width:100%!important;
  }
}

/* At the tightest desktop zoom range, give metadata maximum room while the
   action remains fully visible/clickable in its own row. This applies only to
   desktop pointer devices; the existing phone/tablet layout is unchanged. */
@media screen and (min-device-width:901px) and (max-width:880px) and (hover:hover) and (pointer:fine){
  #purchasesView .purchaseProductItem,
  #salesView .purchaseProductItem{
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:4px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  #purchasesView .purchaseProductItem > .prodIcon,
  #salesView .purchaseProductItem > .prodIcon{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
  }
  #purchasesView .purchaseProductInfo,
  #salesView .saleProductInfo{
    grid-column:2!important;
    grid-row:1!important;
  }
  #purchasesView .purchaseProductItem .addWrap,
  #salesView .purchaseProductItem .addWrap{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
  }
}

/* v316 — Dashboard: split only the existing Total Stock card into stock qty + current purchase value. */
#dashboardView #stockSummaryCard{
  overflow:hidden;
}
#dashboardView #stockSummaryCard .stockSummaryMetrics{
  width:100%;
  height:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  align-items:stretch;
  column-gap:10px;
}
#dashboardView #stockSummaryCard .stockSummaryMetric{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  align-items:center;
  gap:7px;
}
#dashboardView #stockSummaryCard .stockSummaryCopy{
  min-width:0;
  align-self:center;
}
#dashboardView #stockSummaryCard .stockSummaryCopy small{
  min-width:0;
  max-width:100%;
  margin:0 0 3px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#dashboardView #stockSummaryCard .stockSummaryCopy strong{
  min-width:0;
  max-width:100%;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#16a34a;
}
#dashboardView #stockSummaryCard .stockSummaryDivider{
  width:1px;
  height:68%;
  align-self:center;
  background:#e7ece9;
}
#dashboardView #stockSummaryCard .stockSummaryIcon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  justify-self:end;
  align-self:center;
  color:#16a34a;
}
#dashboardView #stockSummaryCard .stockSummaryStockIcon{
  background:url("assets/ui/summary-stock.png") center/contain no-repeat;
}
#dashboardView #stockSummaryCard .stockSummaryCostIcon{
  display:grid;
  place-items:center;
  border:1.5px solid currentColor;
  border-radius:3px;
  font:800 13px/1 Arial,sans-serif;
  box-sizing:border-box;
}

/* Browser zoom / constrained desktop: keep the same outer card but stack its two
   read-only metrics internally before either label/value can collide. */
@media screen and (min-device-width:901px) and (max-width:1180px) and (hover:hover) and (pointer:fine){
  #dashboardView #stockSummaryCard .stockSummaryMetrics{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) 1px minmax(0,1fr);
    row-gap:4px;
    column-gap:0;
  }
  #dashboardView #stockSummaryCard .stockSummaryDivider{
    width:100%;
    height:1px;
  }
  #dashboardView #stockSummaryCard .stockSummaryMetric{
    grid-template-columns:minmax(0,1fr) 18px;
    gap:6px;
  }
  #dashboardView #stockSummaryCard .stockSummaryIcon{
    width:17px;
    height:17px;
  }
  #dashboardView #stockSummaryCard .stockSummaryCopy small{
    margin:0 0 1px!important;
  }
}

/* Existing mobile/tablet layout is preserved; only make the internal metric pair
   resilient when the already-responsive dashboard card becomes very narrow. */
@media screen and (max-width:700px), screen and (max-width:900px) and (hover:none) and (pointer:coarse){
  #dashboardView #stockSummaryCard .stockSummaryMetrics{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) 1px minmax(0,1fr);
    row-gap:5px;
    column-gap:0;
  }
  #dashboardView #stockSummaryCard .stockSummaryDivider{
    width:100%;
    height:1px;
  }
  #dashboardView #stockSummaryCard .stockSummaryMetric{
    grid-template-columns:minmax(0,1fr) 19px;
    gap:6px;
  }
  #dashboardView #stockSummaryCard .stockSummaryIcon{
    width:18px;
    height:18px;
  }
}


/* v317 shared non-blocking mutation status; never blocks page interaction. */
.businessMutationCenter{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147482000;
  width:min(340px,calc(100vw - 28px));
  display:grid;
  gap:8px;
  pointer-events:none;
}
.businessMutationCenter[hidden]{display:none!important}
.businessMutationNotice{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #d9e3ef;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.14);
  color:#17324d;
  pointer-events:auto;
}
.businessMutationNotice>div{min-width:0;display:grid;gap:2px}
.businessMutationNotice b,.businessMutationNotice small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.businessMutationNotice b{font-size:13px;font-weight:750}
.businessMutationNotice small{font-size:12px;color:#64748b}
.businessMutationNotice button{border:0;border-radius:8px;padding:7px 10px;background:#0f172a;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.businessMutationSpinner{width:16px;height:16px;border:2px solid #cbd5e1;border-top-color:#16a34a;border-radius:50%;animation:businessMutationSpin .75s linear infinite}
.businessMutationNotice.isFailed{border-color:#fecaca}
.businessMutationNotice.isFailed .businessMutationSpinner{animation:none;border-color:#ef4444;position:relative}
.businessMutationNotice.isFailed .businessMutationSpinner::after{content:"!";position:absolute;inset:-2px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#ef4444}
@keyframes businessMutationSpin{to{transform:rotate(360deg)}}
.businessMutationRowPending{position:relative!important;opacity:.72}
.businessMutationRowPending::after{
  content:attr(data-business-pending-text);
  position:absolute;
  right:8px;
  top:8px;
  z-index:5;
  padding:3px 7px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:10px;
  line-height:1.2;
  font-weight:750;
  pointer-events:none;
}
.businessMutationRowRemoving{opacity:.48}
.businessMutationRowFailed::after{background:#fff1f2;border-color:#fecdd3;color:#be123c}
@media (max-width:700px){.businessMutationCenter{right:10px;bottom:10px;width:calc(100vw - 20px)}}

/* =====================================================================
   v318 — Purchase page reference-layout polish only.
   Reuses the existing Purchase picker/cart/business logic and adds only the
   live stock summary + screenshot-matched desktop/mobile spacing.
   ===================================================================== */
#purchasesView .purchasePicker{
  min-width:0!important;
  box-sizing:border-box!important;
}
#purchasesView .purchaseInventorySummary{
  width:100%!important;
  min-width:0!important;
  min-height:64px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;
  align-items:stretch!important;
  column-gap:12px!important;
  margin:0 0 10px!important;
  padding:8px 12px!important;
  background:#fff!important;
  border:1px solid #dfe5e2!important;
  border-radius:9px!important;
  box-shadow:0 1px 3px rgba(15,23,42,.04)!important;
  color:#31445f!important;
}
#purchasesView .purchaseInventoryMetric{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 24px!important;
  align-items:center!important;
  gap:8px!important;
}
#purchasesView .purchaseInventoryCopy{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
  align-content:center!important;
}
#purchasesView .purchaseInventoryCopy small{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  color:#526174!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#purchasesView .purchaseInventoryCopy strong{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  color:#16a34a!important;
  font-size:22px!important;
  line-height:1.05!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#purchasesView .purchaseInventoryDivider{
  width:1px!important;
  height:72%!important;
  align-self:center!important;
  background:#e4e9e6!important;
}
#purchasesView .purchaseInventoryIcon{
  width:22px!important;
  height:22px!important;
  justify-self:end!important;
  align-self:center!important;
  color:#18ad55!important;
  box-sizing:border-box!important;
}
#purchasesView .purchaseInventoryCube{
  background:url("assets/ui/summary-stock.png") center/contain no-repeat!important;
}
#purchasesView .purchaseInventoryCalculator{
  display:grid!important;
  place-items:center!important;
  border:1.5px solid currentColor!important;
  border-radius:3px!important;
  font:800 13px/1 Arial,sans-serif!important;
}

/* Reference toolbar: Search + scanner shortcut + Add Product + Refresh.
   Keep the existing barcode input/function in the DOM/focus flow, but the
   screenshot presents that control as a compact square scanner button. */
@media screen and (min-width:901px) and (any-hover:hover){
  #purchasesView .purchaseSearchRow{
    grid-template-columns:minmax(0,1fr) 43px 43px 43px!important;
    gap:7px!important;
  }
  #purchasesView .purchaseBarcodeField{
    width:43px!important;
    min-width:43px!important;
    max-width:43px!important;
    position:relative!important;
    overflow:hidden!important;
    cursor:text!important;
  }
  #purchasesView .purchaseBarcodeField input{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    opacity:0!important;
    caret-color:transparent!important;
    cursor:text!important;
  }
  #purchasesView .purchaseBarcodeField span{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    border:0!important;
    display:grid!important;
    place-items:center!important;
    pointer-events:none!important;
    font-size:18px!important;
    line-height:1!important;
  }
  #purchasesView .purchasePicker>h2{
    margin:0 0 8px!important;
    color:#344054!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:800!important;
  }
  #purchasesView .purchaseProductList{
    margin-top:8px!important;
    border-top:1px solid #edf0f2!important;
  }
  #purchasesView .purchaseProductItem{
    background:#fff!important;
    border-bottom:1px solid #edf0f2!important;
  }
  #purchasesView .purchaseProductItem:hover{
    background:#fafbfc!important;
  }
  #purchasesView .purchaseEmptyState{
    color:#667085!important;
    font-size:12px!important;
    font-weight:650!important;
  }
}

/* Desktop zoom safety: keep the screenshot's two metrics in the same card,
   then stack only inside the card when the Purchase picker gets very narrow. */
@media screen and (min-device-width:901px) and (max-width:1180px) and (hover:hover) and (pointer:fine){
  #purchasesView .purchaseInventorySummary{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) 1px minmax(0,1fr)!important;
    row-gap:5px!important;
    column-gap:0!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  #purchasesView .purchaseInventoryDivider{
    width:100%!important;
    height:1px!important;
  }
  #purchasesView .purchaseInventoryMetric{
    grid-template-columns:minmax(0,1fr) 20px!important;
    gap:7px!important;
  }
  #purchasesView .purchaseInventoryIcon{width:19px!important;height:19px!important}
  #purchasesView .purchaseInventoryCopy strong{font-size:18px!important}
}

/* Mobile Purchase keeps the existing four-step flow; only the same summary and
   toolbar are allowed to reflow before the real product list. */
@media screen and (max-width:900px) and (hover:none) and (pointer:coarse), screen and (max-width:700px){
  #purchasesView .purchaseInventorySummary{
    margin:0 4px 10px!important;
    width:calc(100% - 8px)!important;
    min-height:62px!important;
    padding:7px 10px!important;
    column-gap:9px!important;
  }
  #purchasesView .purchaseInventoryMetric{
    grid-template-columns:minmax(0,1fr) 20px!important;
    gap:6px!important;
  }
  #purchasesView .purchaseInventoryIcon{width:19px!important;height:19px!important}
  #purchasesView .purchaseInventoryCopy small{font-size:10.5px!important}
  #purchasesView .purchaseInventoryCopy strong{font-size:18px!important}
}
@media screen and (max-width:360px){
  #purchasesView .purchaseInventorySummary{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) 1px minmax(0,1fr)!important;
    row-gap:5px!important;
    column-gap:0!important;
  }
  #purchasesView .purchaseInventoryDivider{width:100%!important;height:1px!important}
}

/* v318 final visual correction: keep the summary in document flow so the
   Purchase heading starts below it, but use a negative top margin to lift the
   card into the breadcrumb strip exactly like the reference. */
@media screen and (min-width:901px) and (any-hover:hover){
  #purchasesView .purchasePicker{position:relative!important;overflow:visible!important}
  #purchasesView .purchaseInventorySummary{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    min-height:58px!important;
    margin:-42px -18px 10px 44px!important;
    z-index:6!important;
  }
}
/* =========================================
   MOBILE STOCK SUMMARY - NO OVERLAP FIX
   ========================================= */

@media screen and (max-width:700px),
       screen and (max-width:900px) and (hover:none) and (pointer:coarse){

  #dashboardView #stockSummaryCard{
    height:auto !important;
    min-height:175px !important;
    padding:12px 13px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryMetrics{
    width:100% !important;
    height:auto !important;
    min-height:150px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto 1px auto !important;

    row-gap:9px !important;
    column-gap:0 !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryMetric{
    min-width:0 !important;
    min-height:65px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) 20px !important;

    align-items:center !important;
    gap:7px !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryDivider{
    width:100% !important;
    height:1px !important;
    margin:0 !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryCopy{
    min-width:0 !important;
    width:100% !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryCopy small{
    display:block !important;
    margin:0 0 5px !important;

    font-size:15px !important;
    line-height:1.15 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryCopy strong{
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    font-size:18px !important;
    line-height:1.15 !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;

    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  #dashboardView #stockSummaryCard .stockSummaryIcon{
    width:18px !important;
    height:18px !important;
  }
}/* ==================================================
   MOBILE DASHBOARD - FINAL OVERLAP CLEANUP
   Tabs + normal summary cards only
   Stock card remains unchanged
   ================================================== */

@media screen and (max-width:700px),
       screen and (max-width:900px) and (hover:none) and (pointer:coarse){

  /* ---------- PERIOD TABS ---------- */

  #dashboardView .periodTabs{
    min-width:0 !important;
    width:100% !important;
    gap:2px !important;
    box-sizing:border-box !important;
  }

  #dashboardView .periodTabs .periodBtn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    padding:10px 2px !important;

    font-size:14px !important;
    line-height:1.15 !important;
    font-weight:700 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;

    text-align:center !important;
    box-sizing:border-box !important;
  }


  /* ---------- NORMAL SUMMARY CARDS ---------- */

  #dashboardView #salesSummaryCard,
  #dashboardView #purchaseSummaryCard,
  #dashboardView #expenseSummaryCard,
  #dashboardView #receivableSummaryCard,
  #dashboardView #payableSummaryCard{
    height:auto !important;
    min-height:118px !important;

    padding:15px 14px !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
  }


  /* Card titles */

  #dashboardView #salesSummaryCard > small,
  #dashboardView #purchaseSummaryCard > small,
  #dashboardView #expenseSummaryCard > small,
  #dashboardView #receivableSummaryCard > small,
  #dashboardView #payableSummaryCard > small{
    display:block !important;

    max-width:calc(100% - 30px) !important;

    font-size:16px !important;
    line-height:1.2 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }


  /* Big numbers */

  #dashboardView #salesSummaryCard > strong,
  #dashboardView #purchaseSummaryCard > strong,
  #dashboardView #expenseSummaryCard > strong,
  #dashboardView #receivableSummaryCard > strong,
  #dashboardView #payableSummaryCard > strong{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin-top:10px !important;
    padding-right:2px !important;

    font-size:clamp(15px,3.5vw,18px) !important;
    line-height:1.2 !important;
    font-weight:800 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    box-sizing:border-box !important;
  }


  /* Card icons stay inside card */

  #dashboardView #salesSummaryCard > em,
  #dashboardView #purchaseSummaryCard > em,
  #dashboardView #expenseSummaryCard > em,
  #dashboardView #receivableSummaryCard > em,
  #dashboardView #payableSummaryCard > em{
    top:16px !important;
    right:14px !important;
    max-width:24px !important;
  }
}