:root{--bg:#f4f6f3;--panel:#fff;--ink:#17201b;--muted:#758078;--line:#e5e9e5;--green:#1f6b46;--green2:#e3f2e9;--dark:#17241d;--orange:#a55a18;--red:#a43b3b;--shadow:0 8px 30px rgba(20,35,26,.06);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:14px}a{color:var(--green);text-decoration:none}button,input,select{font:inherit}input,select{width:100%;border:1px solid #d9ded9;border-radius:9px;padding:11px 12px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus{border-color:#70a488;box-shadow:0 0 0 3px #e6f2eb}label{display:grid;gap:7px;font-weight:600;color:#4b5850;margin-bottom:14px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:224px;background:var(--dark);padding:22px 14px;color:#fff;display:flex;flex-direction:column;z-index:10}.logo{display:flex;align-items:center;gap:10px;color:#fff;font-size:18px;padding:0 8px 22px}.logo span,.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#d7ef80;color:#18201b;font-weight:900}.sidebar nav{display:grid;gap:5px}.sidebar nav a{color:#aebbb2;padding:11px 12px;border-radius:8px;display:flex;gap:11px;align-items:center;font-weight:600}.sidebar nav a:hover,.sidebar nav a.active{background:#293b31;color:#fff}.sidebar-bottom{margin-top:auto;border-top:1px solid #304238;padding:16px 10px 2px;display:grid;gap:4px}.sidebar-bottom small{color:#84938a}.sidebar-bottom a{margin-top:8px;color:#b9c8bf}.main{margin-left:224px;padding:26px 30px 50px;max-width:1600px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.topbar h1{font-size:24px;margin:0 0 3px}.topbar p,.panel-head p{margin:0;color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center}.date-pill{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 13px;color:#59655e}.btn{border:0;border-radius:9px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}.btn.primary{background:var(--green);color:#fff}.btn.dark{background:var(--dark);color:#fff}.btn.ghost{background:#f3f5f3;color:var(--ink);margin-top:8px}.btn.wide{width:100%}.btn:disabled{opacity:.55;cursor:wait}.menu-btn{display:none;background:transparent;border:0;font-size:24px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.metric{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;display:grid;gap:8px}.metric>span{color:var(--muted);font-weight:600}.metric strong{font-size:23px;letter-spacing:-.5px}.metric small{color:#8a948d}.metric.accent{background:var(--dark);color:#fff;border-color:var(--dark)}.metric.accent>span,.metric.accent small{color:#adbbb2}.metric.warning{border-color:#e8be90;background:#fff9f2}.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}.panel h2,.panel-head h2{font-size:17px;margin:0 0 3px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 18px;border-bottom:1px solid #edf0ed;white-space:nowrap}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#879189;background:#fafbfa}.right{text-align:right}.cell-sub{display:block;color:var(--muted);margin-top:3px}.tag,.stock-pill{display:inline-flex;background:#eff2ef;border-radius:20px;padding:4px 8px;text-transform:capitalize;font-size:12px}.stock-pill.low{background:#fff0e1;color:#934d10}.empty{text-align:center;color:var(--muted);padding:35px!important}.alert{padding:12px 15px;border-radius:9px;margin-bottom:15px}.alert.success{background:#e4f4e9;color:#23643f}.alert.danger{background:#fbe7e7;color:#8f3030}.split-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:18px;align-items:start}.form-panel{padding:20px}.form-panel>h2{margin-bottom:4px}.form-panel .muted{margin-top:0}.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:1fr 1fr}.inline-search{width:240px}.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}.products-panel{padding:16px}.search-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}.search-row span{color:var(--muted);white-space:nowrap}.search{padding:13px 15px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px}.product-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px;cursor:pointer;display:grid;gap:5px;color:var(--ink)}.product-card:hover{border-color:#7faa90;box-shadow:0 5px 15px rgba(20,40,28,.08)}.product-card small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-card>span{color:var(--green);font-weight:800;margin-top:3px}.product-icon{width:34px;height:34px;border-radius:8px;background:var(--green2);color:var(--green);display:grid;place-items:center;font-weight:800;margin-bottom:5px}.cart-panel{background:#fff;border:1px solid var(--line);border-radius:13px;position:sticky;top:18px;box-shadow:var(--shadow)}.cart-title{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.cart-title h2{margin:0;font-size:17px}.text-btn{border:0;background:none;color:var(--green);cursor:pointer}.cart-items{max-height:390px;overflow:auto}.empty-cart{padding:45px 20px;text-align:center;display:grid;gap:5px;color:var(--muted)}.empty-cart strong{color:var(--ink)}.cart-item{padding:13px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.cart-item>div:first-child{display:grid}.cart-item small{color:var(--muted)}.cart-item>strong{text-align:right}.qty-control{display:flex;align-items:center;gap:8px}.qty-control button{width:25px;height:25px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}.cart-totals{padding:16px 18px}.cart-totals>div:not(.form-error){display:flex;justify-content:space-between;margin:8px 0}.cart-totals .grand{font-size:18px;border-top:1px solid var(--line);padding-top:13px;margin-top:12px}.checkout{margin-top:6px;padding:14px}.form-error{color:var(--red);font-size:12px;margin-top:8px}.filter-panel{padding:15px}.filter-panel form{display:flex;align-items:end;gap:10px}.filter-panel label{margin:0}.receipt{max-width:720px;margin:0 auto;padding:28px}.receipt-head,.receipt-meta{display:flex;justify-content:space-between;gap:15px}.receipt-head h2{font-size:22px}.receipt-head p{color:var(--muted);margin-top:3px}.receipt-meta{padding:20px 0;border-block:1px solid var(--line);margin:18px 0}.receipt-meta>div{display:grid;gap:4px}.receipt-meta span{color:var(--muted);font-size:12px}.receipt-total{display:flex;justify-content:flex-end;gap:35px;font-size:19px;padding:20px}.receipt-thanks{text-align:center;color:var(--muted);padding-top:15px}.settings-panel{max-width:600px}.auth-page{min-height:100vh;display:grid;place-items:center;background:#eef1ed;padding:20px}.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:15px;padding:30px;box-shadow:var(--shadow)}.auth-card h1{margin:15px 0 4px}.auth-card .muted{color:var(--muted);margin-top:0;margin-bottom:22px}.auth-card .brand-mark{width:42px;height:42px}.setup-card{width:min(720px,100%)}.setup-card h3{margin-top:22px}.muted{color:var(--muted)}
.dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.debt-card{background:#fffbf5;border-color:#efdfc7}.dashboard-charts{display:grid;grid-template-columns:1.25fr .85fr;gap:18px}.chart-panel{min-height:290px}.trend{font-weight:700}.trend.up{color:#28754e}.trend.down{color:#b24a42}.week-chart{height:205px;display:flex;gap:12px;align-items:flex-end;padding:25px 22px 18px}.week-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.week-value{font-size:10px;color:var(--muted);white-space:nowrap}.week-track{height:145px;width:min(38px,80%);background:#eff2ef;border-radius:7px;display:flex;align-items:flex-end;overflow:hidden}.week-track span{width:100%;background:linear-gradient(180deg,#3a8a61,var(--green));border-radius:7px 7px 0 0;min-height:3px}.week-col small{color:var(--muted);font-weight:700}.rank-list{padding:15px 20px}.rank-row{padding:9px 0}.rank-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.rank-row span{color:var(--muted);font-size:12px}.rank-track{height:7px;background:#edf1ed;border-radius:10px;overflow:hidden}.rank-track span{display:block;height:100%;background:#79a98d;border-radius:10px}.stock-alert{border-color:#efd6b8}.alert-products{display:grid;grid-template-columns:repeat(3,1fr);padding:5px 18px 15px}.alert-products>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3px 9px;padding:12px;border-bottom:1px solid var(--line)}.alert-products strong{grid-column:2}.alert-products small{grid-column:2;color:var(--muted)}.alert-products b{grid-column:3;grid-row:1/3;color:#a45618}.alert-dot{grid-row:1/3;width:9px;height:9px;background:#e38b3c;border-radius:50%}.inventory-actions{display:flex;gap:7px}.inventory-actions .btn{margin:0}.import-bar{display:grid;grid-template-columns:1fr minmax(220px,340px) auto;gap:12px;align-items:center;padding:13px 18px;background:#f7faf7;border-bottom:1px solid var(--line)}.import-bar>div{display:grid}.import-bar span{font-size:12px;color:var(--muted);margin-top:2px}.inventory-search{padding:12px 18px;border-bottom:1px solid var(--line)}.installment-fields{padding:12px;background:#f3f7f4;border:1px solid #dce7df;border-radius:9px;margin-bottom:12px}.balance-preview{padding:10px 12px!important;background:#fff5e9;border-radius:8px;color:#8d4d15}.balance-preview strong{color:#8d4d15}.debt-text{color:#a34d24}.debt-metrics{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.payment-form{display:flex;gap:6px;min-width:390px}.payment-form input{width:130px}.payment-form select{width:150px}.receipt-summary{margin-left:auto;width:min(320px,100%);padding:16px 0}.receipt-summary>div{display:flex;justify-content:space-between;padding:7px 4px;font-size:15px}.receipt-summary .due{border-top:1px solid var(--line);margin-top:5px;padding-top:12px;color:#9a4d1d;font-size:18px}.user-actions{display:flex;align-items:center;gap:12px}.user-actions form{margin:0}.edit-link{font-weight:800;color:var(--green)}.text-action{border:0;background:transparent;padding:0;font-weight:700;cursor:pointer}.danger-text{color:#ad4545}.success-text{color:var(--green)}.form-title-row{display:flex;justify-content:space-between;gap:15px;align-items:start;margin-bottom:18px}.form-title-row h2{margin:0 0 4px}.form-title-row p{margin:0}.form-title-row>a{font-size:24px;color:var(--muted);line-height:1}.optional{font-size:11px;color:var(--muted);font-weight:500;margin-left:6px}.users-layout{grid-template-columns:minmax(0,2fr) minmax(320px,.65fr)}
.customer-select{padding:10px 0}.field-note{font-size:12px;color:#995415;background:#fff4e6;padding:9px 10px!important;border-radius:7px;margin:-5px 0 12px!important}.customer-record{border-color:#cddfd4}.customer-record .panel-head h2{font-size:22px;margin-top:5px}.back-link{font-size:12px;font-weight:700}.customer-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.customer-kpis>div{padding:18px 20px;border-right:1px solid var(--line);display:grid;gap:6px}.customer-kpis>div:last-child{border-right:0}.customer-kpis span{color:var(--muted);font-size:12px;font-weight:700}.customer-kpis strong{font-size:20px}.customer-kpis .has-debt{background:#fff8ef}.customer-kpis .has-debt strong{color:#a34d24}.items-cell{max-width:340px;white-space:normal;line-height:1.45}.customer-layout{grid-template-columns:minmax(0,2.2fr) minmax(300px,.65fr)}
.super-sidebar{background:#101b16}.super-label{margin:0 8px 15px;padding:6px 9px;border:1px solid #42564a;border-radius:6px;color:#d7ef80;font-size:10px;letter-spacing:.13em;font-weight:900;width:max-content}.super-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.super-business-layout{grid-template-columns:minmax(0,2.4fr) minmax(300px,.65fr);scroll-margin-top:20px}.empty-admin-state{text-align:center;padding:55px 15px;color:var(--muted)}.empty-admin-state strong{color:var(--ink)}
@media(max-width:1100px){.metric-grid,.dashboard-kpis{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:1fr 1fr}.pos-layout{grid-template-columns:1fr 340px}.split-layout,.dashboard-charts{grid-template-columns:1fr}.form-panel{max-width:none}.alert-products{grid-template-columns:1fr 1fr}.import-bar{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.2s}.menu-open .sidebar{transform:translateX(0)}.main{margin-left:0;padding:18px}.menu-btn{display:block}.topbar{gap:10px}.topbar>div:nth-child(2){margin-right:auto}.date-pill{display:none}.pos-layout{grid-template-columns:1fr}.cart-panel{position:static}.product-grid{grid-template-columns:1fr 1fr}.customer-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.metric-grid,.debt-metrics{grid-template-columns:1fr}.top-actions .btn{display:none}.product-grid{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}.filter-panel form{display:grid}.receipt-meta{display:grid}.main{padding:14px}.topbar h1{font-size:20px}.alert-products{grid-template-columns:1fr}.inventory-actions{flex-direction:column}.week-value{display:none}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin:0;padding:0}.receipt{border:0;box-shadow:none}.app-shell{display:block}body{background:#fff}}
.brand-icon,.brand-mark{display:block;object-fit:cover;background:transparent;color:transparent;overflow:hidden;flex:0 0 auto}.brand-icon{width:34px;height:34px;border-radius:9px}.auth-card .brand-mark{width:48px;height:48px;border-radius:12px}
.receipt-thanks::after{content:"Powered by Kidaftari";display:block;margin-top:5px;font-size:10px;letter-spacing:.04em;color:#9aa39d}
.report-controls{padding:16px 18px}.report-controls form{display:grid;gap:12px}.report-main-controls{display:grid;grid-template-columns:minmax(170px,1fr) 160px 160px auto auto;gap:10px;align-items:end}.report-main-controls label,.report-extra-controls label{margin:0}.report-main-controls .btn{height:42px;margin:0}.report-more{border-top:1px solid var(--line);padding-top:10px}.report-more summary{cursor:pointer;color:var(--green);font-weight:800;width:max-content}.report-extra-controls{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:10px;padding-top:12px}.report-count{color:var(--muted);font-size:12px}.report-pagination{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted)}.report-pagination>div{display:flex;align-items:center;gap:10px}.report-pagination .btn{margin:0;padding:8px 12px}.report-pagination strong{color:var(--ink);font-size:12px}
@media(max-width:900px){.report-main-controls{grid-template-columns:1fr 1fr}.report-extra-controls{grid-template-columns:1fr 1fr}.report-pagination{align-items:flex-start;gap:10px;flex-direction:column}}
@media(max-width:520px){.report-main-controls,.report-extra-controls{grid-template-columns:1fr}.report-pagination>div{width:100%;justify-content:space-between}}
.metric-link{color:inherit;text-decoration:none;transition:.15s}.metric-link:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,35,26,.08)}.stock-filter-bar{padding:11px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fbfcfb}.stock-filter-bar>span{color:var(--muted);font-size:12px}.stock-filter-tabs{display:flex;gap:6px;flex-wrap:wrap}.stock-filter-tabs a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;color:#667168;font-weight:700;background:#f0f3f0}.stock-filter-tabs a b{font-size:11px;min-width:19px;text-align:center;padding:2px 5px;border-radius:10px;background:#fff;color:#68736b}.stock-filter-tabs a.active{background:var(--dark);color:#fff}.stock-filter-tabs a.active b{color:var(--dark)}.stock-filter-tabs a.active.low-tab{background:#9a6c12}.stock-filter-tabs a.active.out-tab{background:#9d3e3e}.inventory-low-text{color:#956719;font-weight:700}.inventory-out-text{color:#a43b3b;font-weight:700}.stock-status{display:grid;justify-items:start;gap:4px}.stock-status small{color:var(--muted);font-size:11px}.stock-pill.healthy{background:#e7f3eb;color:#2c7048}.stock-pill.low{background:#fff4c9;color:#89660e}.stock-pill.critical{background:#ffead7;color:#a65317}.stock-pill.out{background:#fbe3e3;color:#9e3535}.stock-row.low td{background:#fffdf6}.stock-row.critical td{background:#fff9f3}.stock-row.out td{background:#fff7f7}.stock-row.low td:first-child{box-shadow:inset 3px 0 #d0a42f}.stock-row.critical td:first-child{box-shadow:inset 3px 0 #dc7c32}.stock-row.out td:first-child{box-shadow:inset 3px 0 #c85050}
@media(max-width:620px){.stock-filter-bar{align-items:flex-start;flex-direction:column}.stock-filter-tabs{width:100%}.stock-filter-tabs a{flex:1;justify-content:center;white-space:nowrap}}
.pos-catalog-head{position:relative}.catalog-context{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 2px 13px}.catalog-context>div{display:grid;gap:2px}.catalog-context small,.catalog-context>span{font-size:12px;color:var(--muted)}.catalog-context>span{white-space:nowrap}.catalog-loading,.catalog-empty,.catalog-error{grid-column:1/-1;min-height:150px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:25px}.catalog-error{color:var(--red);background:#fff8f8;border-radius:10px}.catalog-footer{display:flex;justify-content:center;padding-top:6px}.catalog-footer .btn{margin-top:10px}.product-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.product-card-top .product-icon{margin-bottom:5px}.pos-stock-warning{font-size:10px;font-weight:800;color:#9a5917;background:#fff0dc;border-radius:12px;padding:4px 7px;white-space:nowrap}.mobile-cart-bar{display:none}.mobile-cart-bar[hidden]{display:none!important}
@media(max-width:800px){.main{padding-bottom:92px}.products-panel{padding:10px}.pos-catalog-head{position:sticky;top:0;z-index:4;background:#fff;padding-top:2px}.search-row{gap:8px;margin-bottom:9px}.search-row span{font-size:11px}.catalog-context{padding:0 2px 10px}.catalog-context small{display:none}.catalog-context>span{font-size:11px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product-card{min-width:0;min-height:112px;padding:10px;gap:4px}.product-card strong,.product-card small,.product-card>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-card small{font-size:11px}.product-card>span{font-size:13px}.product-icon{width:29px;height:29px;border-radius:7px;margin:0}.pos-stock-warning{font-size:9px;padding:3px 5px}.cart-panel{scroll-margin-top:12px}.mobile-cart-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border:0;border-radius:12px;background:var(--dark);color:#fff;box-shadow:0 10px 30px rgba(12,25,17,.28);cursor:pointer}.mobile-cart-bar>span{display:grid;text-align:left}.mobile-cart-bar small{font-size:10px;color:#aebbb2;margin-top:2px}.mobile-cart-bar b{white-space:nowrap}}
.sale-meta-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}.sale-meta-grid label{margin-bottom:10px;min-width:0}.sale-meta-grid input{min-width:0}
@media(max-width:380px){.sale-meta-grid{grid-template-columns:1fr}}
.pos-flow-layout{display:flex;flex-direction:column;gap:14px}.pos-flow-layout .cart-panel{position:relative;top:auto;width:100%;margin:0;order:1}.pos-flow-layout .products-panel{width:100%;margin:0;order:2;overflow:hidden}.pos-flow-layout .cart-title{align-items:center;padding:13px 16px}.pos-flow-layout .cart-title>div{display:grid;gap:2px}.pos-flow-layout .cart-title small{color:var(--muted);font-size:11px}.pos-flow-layout .cart-items{display:flex;gap:8px;max-height:none;overflow-x:auto;padding:9px 12px;border-bottom:1px solid var(--line);scroll-snap-type:x proximity;scrollbar-width:thin}.pos-flow-layout .empty-cart{min-width:100%;padding:10px 12px;display:flex;justify-content:center;gap:7px}.pos-flow-layout .cart-item{flex:0 0 270px;scroll-snap-align:start;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#fbfcfb}.pos-flow-layout .cart-totals{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;padding:12px 14px}.pos-flow-layout .cart-totals>.pos-checkout-fields{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:9px;align-items:start;margin:0}.pos-flow-layout .pos-checkout-fields label,.pos-flow-layout .customer-select{margin:0;min-width:0}.pos-flow-layout .customer-select{padding:0}.pos-flow-layout .pos-checkout-fields input,.pos-flow-layout .pos-checkout-fields select{padding:9px 10px}.pos-flow-layout .cart-totals>.pos-checkout-summary{display:grid;align-content:start;gap:6px;margin:0;padding-left:14px;border-left:1px solid var(--line)}.pos-flow-layout .pos-checkout-summary>div:not(.form-error){display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0}.pos-flow-layout .pos-checkout-summary .grand{font-size:18px;border-top:1px solid var(--line);padding-top:7px}.pos-flow-layout .pos-checkout-summary .grand strong{font-size:20px}.pos-flow-layout .pos-checkout-summary .balance-preview{padding:7px 9px!important}.pos-flow-layout .checkout{margin:2px 0 0;padding:11px}.pos-flow-layout .product-grid{display:flex;grid-template-columns:none;gap:9px;overflow-x:auto;overflow-y:hidden;padding:1px 1px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}.pos-flow-layout .product-card{flex:0 0 205px;min-width:205px;min-height:112px;scroll-snap-align:start;padding:11px}.pos-flow-layout .catalog-loading,.pos-flow-layout .catalog-empty,.pos-flow-layout .catalog-error{flex:0 0 100%;min-height:105px}.pos-flow-layout .catalog-footer{padding-top:0}
@media(max-width:1200px){.pos-flow-layout .cart-totals{grid-template-columns:minmax(0,1fr) 225px}.pos-flow-layout .cart-totals>.pos-checkout-fields{grid-template-columns:repeat(3,minmax(130px,1fr))}}
@media(max-width:800px){.pos-flow-layout{gap:10px}.pos-flow-layout .cart-title{padding:11px 12px}.pos-flow-layout .cart-items{padding:7px 9px}.pos-flow-layout .empty-cart{font-size:12px;white-space:nowrap;overflow:hidden}.pos-flow-layout .cart-item{flex-basis:235px}.pos-flow-layout .cart-totals{grid-template-columns:1fr;gap:9px;padding:9px}.pos-flow-layout .cart-totals>.pos-checkout-fields{display:flex;overflow-x:auto;gap:8px;padding-bottom:5px;scroll-snap-type:x proximity}.pos-flow-layout .pos-checkout-fields>label,.pos-flow-layout .pos-checkout-fields>.customer-select{flex:0 0 155px;scroll-snap-align:start}.pos-flow-layout .cart-totals>.pos-checkout-summary{grid-template-columns:1fr 1fr;align-items:center;padding:8px 0 0;border-left:0;border-top:1px solid var(--line)}.pos-flow-layout .pos-checkout-summary .balance-preview,.pos-flow-layout .pos-checkout-summary .form-error{grid-column:1/-1}.pos-flow-layout .checkout{margin:0}.pos-flow-layout .products-panel{padding:9px}.pos-flow-layout .product-grid{display:flex;gap:8px}.pos-flow-layout .product-card{flex:0 0 min(62vw,190px);min-width:0;min-height:105px}.pos-flow-layout .catalog-context{padding-bottom:7px}}
.pos-flow-layout .cart-totals>.pos-checkout-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:10px 12px}.pos-flow-layout .product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:1px;scroll-snap-type:none;gap:10px}.pos-flow-layout .product-card{width:auto;min-width:0;min-height:112px;scroll-snap-align:none}.pos-flow-layout .catalog-loading,.pos-flow-layout .catalog-empty,.pos-flow-layout .catalog-error{grid-column:1/-1;min-height:105px}.product-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 2px}.product-pagination[hidden]{display:none!important}.product-pagination .btn{margin:0;padding:8px 12px}.product-pagination .btn:disabled{cursor:default}.product-pagination strong{font-size:12px;color:var(--muted);min-width:88px;text-align:center}
@media(max-width:800px){.pos-flow-layout .cart-totals>.pos-checkout-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:8px}.pos-flow-layout .pos-checkout-fields>label,.pos-flow-layout .pos-checkout-fields>.customer-select{min-width:0;max-width:none;width:auto}.pos-flow-layout .product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:8px}.pos-flow-layout .product-card{width:auto;min-width:0;min-height:105px}.product-pagination{justify-content:space-between}.product-pagination .btn{flex:0 0 auto}}
.pos-flow-layout .cart-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;max-height:none;scroll-snap-type:none;gap:8px}.pos-flow-layout .cart-item{width:auto;min-width:0;max-width:none;scroll-snap-align:none}.pos-flow-layout .empty-cart{grid-column:1/-1;min-width:0}
@media(max-width:800px){.pos-flow-layout .cart-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:7px}.pos-flow-layout .cart-item{width:auto;min-width:0}}

/* Mobile form stability: keep checkout controls inside their grid cells and
   avoid iOS Safari's automatic focus zoom without disabling user zoom. */
@media(max-width:800px){
input,select,textarea{font-size:16px}
.pos-flow-layout .pos-checkout-fields>label,.pos-flow-layout .pos-checkout-fields>.customer-select{min-width:0;width:100%}
.pos-flow-layout .pos-checkout-fields input,.pos-flow-layout .pos-checkout-fields select{display:block;width:100%;min-width:0;max-width:100%}
.pos-flow-layout .pos-checkout-fields input[type="date"]{min-inline-size:0}
}

/* Strong phone containment: prevent native controls and inventory utilities
   from widening the page, while tables retain their own horizontal scroller. */
@media(max-width:520px){
html{-webkit-text-size-adjust:100%}
html,body,.app-shell,.main{width:100%;max-width:100%;overflow-x:hidden}
.main,.panel,.split-layout,.form-panel,.panel-head,.import-bar,.inventory-search,.stock-filter-bar{min-width:0;max-width:100%}
input,select,textarea{font-size:16px!important;min-width:0;max-width:100%}
.pos-flow-layout .cart-totals>.pos-checkout-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 10px}
.pos-flow-layout .pos-checkout-fields>.pos-sale-date,.pos-flow-layout .pos-checkout-fields>.pos-discount{grid-column:1/-1;width:100%;min-width:0}
.pos-flow-layout .pos-checkout-fields input[type="date"]{-webkit-appearance:none;appearance:none;width:100%;min-width:0;max-width:100%}
.import-bar input[type="file"]{width:100%;min-width:0;max-width:100%;overflow:hidden}
.stock-filter-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.stock-filter-tabs a{min-width:0;padding-inline:7px;font-size:12px}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Clear, consistent feedback for both success and error notifications. */
.alert{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.alert::before{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:12px}
.alert.success::before{content:"✓";background:#cae8d4;color:#23643f}
.alert.danger::before{content:"!";background:#f2caca;color:#8f3030}

/* Admin record controls and auditable sale voiding. */
.record-actions{display:flex;align-items:center;gap:12px;white-space:nowrap}.record-actions form{margin:0}.btn.danger{background:#a43b3b;color:#fff}.void-banner{margin:-28px -28px 20px;padding:14px 20px;background:#fff0f0;border-bottom:1px solid #efcaca;color:#8f3030;display:grid;gap:3px}.void-banner strong{font-size:16px}.void-banner span{font-size:12px}.void-sale-form{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.void-sale-form label{margin-bottom:10px}.voided-row td{background:#faf6f6;color:#7e7777}.voided-row a{color:#8c5555}.void-text{color:#a43b3b!important;font-weight:800}
@media(max-width:520px){.record-actions{gap:9px}.void-banner{margin:-28px -14px 18px}}

/* Checkout payment state and visible discount audit trail. */
#amountPaid:disabled{background:#f2f5f2;color:#516057;opacity:1;cursor:not-allowed}
.discount-text,.receipt-summary .discount-line strong{color:#a55a18}
.report-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
.report-head-actions{display:flex;align-items:center;gap:12px}.report-head-actions .btn{margin:0;padding:9px 13px}
.report-note{margin:0 0 18px;padding:12px 15px;border:1px solid #d8e5dc;border-radius:10px;background:#f5faf7;color:#526158}.report-note strong{color:var(--green)}
@media(max-width:1100px){.report-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.report-metrics{grid-template-columns:1fr}.report-head-actions{align-items:flex-end;flex-direction:column;gap:7px}}

/* Dashboard sales trend: responsive, touch-friendly and dependency-free. */
.sales-chart-panel{min-width:0;overflow:hidden}
.sales-chart-head{gap:16px}
.sales-chart-head>div:first-child p{margin-top:4px}
.sales-chart-head>div:first-child p strong{color:var(--ink)}
.sales-chart-actions{display:flex;align-items:center;gap:14px;white-space:nowrap}
.chart-period{display:flex;gap:3px;padding:3px;background:#f0f3f0;border-radius:9px}
.chart-period button{border:0;background:transparent;color:#667168;font-size:12px;font-weight:800;padding:7px 10px;border-radius:7px;cursor:pointer}
.chart-period button:hover{color:var(--green)}
.chart-period button.active{background:#fff;color:var(--green);box-shadow:0 1px 5px rgba(20,35,26,.12)}
.sales-line-chart{position:relative;height:250px;padding:10px 12px 8px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.sales-line-chart svg{display:block;width:100%;height:100%;overflow:visible;cursor:crosshair}
.sales-chart-grid{stroke:#e7ece8;stroke-width:1;vector-effect:non-scaling-stroke}
.sales-chart-axis{fill:#7a867e;font-size:10px;font-weight:600}
.sales-chart-date{font-size:10px}
.sales-chart-area{fill:url(#salesAreaGradient)}
.sales-chart-line{fill:none;stroke:#2e9b6e;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sales-chart-focus{opacity:0;pointer-events:none;transition:opacity .08s}
.sales-chart-focus.is-visible{opacity:1}
.sales-chart-focus-line{stroke:#9dafA4;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.sales-chart-focus-dot{fill:#fff;stroke:#1f7a52;stroke-width:2.5;vector-effect:non-scaling-stroke}
.sales-chart-tooltip{position:absolute;z-index:3;transform:translate(-50%,-100%);min-width:118px;padding:8px 10px;border-radius:8px;background:var(--dark);color:#fff;box-shadow:0 6px 18px rgba(10,24,16,.2);pointer-events:none;text-align:center}
.sales-chart-tooltip.below{transform:translate(-50%,0)}
.sales-chart-tooltip strong,.sales-chart-tooltip span{display:block;white-space:nowrap}
.sales-chart-tooltip strong{font-size:12px}.sales-chart-tooltip span{margin-top:2px;color:#bfcbc3;font-size:10px}
.sales-chart-tooltip[hidden]{display:none!important}
@media(max-width:620px){.sales-chart-head{align-items:flex-start;flex-direction:column}.sales-chart-actions{width:100%;justify-content:space-between}.chart-period button{padding:7px 12px}.sales-line-chart{height:230px;padding-inline:5px}}

/* Small dashboard-card explanations, visible on hover/focus/tap. */
.dashboard-kpis .metric{position:relative;padding-right:44px;overflow:visible}
.dashboard-kpis .metric:hover,.dashboard-kpis .metric:focus-within{z-index:20}
.metric-help{position:absolute;top:14px;right:14px;z-index:8;width:20px;height:20px;border:1px solid #d7ded9;border-radius:50%;display:grid!important;place-items:center;color:#718078!important;background:#f6f8f6;font:800 11px/1 Georgia,serif;cursor:help;outline:none}
.metric-help::before{content:"";position:absolute;right:5px;top:24px;border:6px solid transparent;border-bottom-color:var(--dark);opacity:0;visibility:hidden;transform:translateY(-3px);transition:.12s;pointer-events:none}
.metric-help::after{content:attr(data-help);position:absolute;right:-5px;top:35px;width:min(255px,calc(100vw - 70px));padding:10px 12px;border-radius:9px;background:var(--dark);color:#fff;font:500 12px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;text-align:left;white-space:normal;box-shadow:0 8px 24px rgba(10,24,16,.2);opacity:0;visibility:hidden;transform:translateY(-3px);transition:.12s;pointer-events:none}
.metric-help:hover::before,.metric-help:hover::after,.metric-help:focus::before,.metric-help:focus::after{opacity:1;visibility:visible;transform:translateY(0)}
.metric-help:focus{border-color:#70a488;box-shadow:0 0 0 3px #e6f2eb}
.metric.accent .metric-help{border-color:#496057;background:#27382f;color:#dce8e0!important}
.metric.accent .metric-help:focus{box-shadow:0 0 0 3px rgba(215,239,128,.22)}

/* Business display preferences. */
.settings-stack{display:grid;grid-template-columns:repeat(2,minmax(0,600px));gap:18px;align-items:start}.settings-stack .settings-panel{width:100%;margin:0}.preference-note{margin:2px 0 14px!important}
@media(max-width:1100px){.settings-stack{grid-template-columns:minmax(0,600px)}}

html[data-color-scheme="dark"]{color-scheme:dark;--bg:#0f1512;--panel:#18211c;--ink:#edf4ef;--muted:#9aa99f;--line:#2d3a32;--green:#62c28e;--green2:#1c382a;--dark:#0b120e;--orange:#e3a15e;--red:#e07777;--shadow:0 8px 30px rgba(0,0,0,.2)}
html[data-color-scheme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-color-scheme="dark"] label{color:#dce8e0}
html[data-color-scheme="dark"] .panel,html[data-color-scheme="dark"] .metric:not(.accent),html[data-color-scheme="dark"] .product-card,html[data-color-scheme="dark"] .cart-panel,html[data-color-scheme="dark"] .pos-flow-layout .cart-item,html[data-color-scheme="dark"] .date-pill,html[data-color-scheme="dark"] .auth-card{background:var(--panel);border-color:var(--line);color:var(--ink)}
html[data-color-scheme="dark"] input,html[data-color-scheme="dark"] select,html[data-color-scheme="dark"] textarea,html[data-color-scheme="dark"] .qty-control button{background:#111914;border-color:#34443a;color:var(--ink)}
html[data-color-scheme="dark"] input::placeholder,html[data-color-scheme="dark"] textarea::placeholder{color:#75847a}
html[data-color-scheme="dark"] input:focus,html[data-color-scheme="dark"] select:focus,html[data-color-scheme="dark"] textarea:focus{border-color:#589f77;box-shadow:0 0 0 3px rgba(62,135,91,.2)}
html[data-color-scheme="dark"] th{background:#121a15;color:#8f9e94}html[data-color-scheme="dark"] th,html[data-color-scheme="dark"] td{border-color:#28352d}
html[data-color-scheme="dark"] .tag,html[data-color-scheme="dark"] .stock-pill{background:#253229;color:#d7e3db}
html[data-color-scheme="dark"] .stock-pill.healthy{background:#193a28;color:#83d2a4}html[data-color-scheme="dark"] .stock-pill.low{background:#453915;color:#f0ce68}html[data-color-scheme="dark"] .stock-pill.critical{background:#4a2c17;color:#f1aa70}html[data-color-scheme="dark"] .stock-pill.out{background:#472121;color:#efa0a0}
html[data-color-scheme="dark"] .metric.warning{background:#2b2116;border-color:#665033}html[data-color-scheme="dark"] .debt-card,html[data-color-scheme="dark"] .customer-kpis .has-debt{background:#271e16;border-color:#4b3929}
html[data-color-scheme="dark"] .btn.ghost,html[data-color-scheme="dark"] .stock-filter-tabs a{background:#222d26;color:var(--ink)}html[data-color-scheme="dark"] .btn.primary{background:#28764e;color:#fff}html[data-color-scheme="dark"] .btn.dark{background:#0b120e;color:#fff}
html[data-color-scheme="dark"] .import-bar,html[data-color-scheme="dark"] .stock-filter-bar,html[data-color-scheme="dark"] .inventory-search,html[data-color-scheme="dark"] .installment-fields,html[data-color-scheme="dark"] .report-note{background:#141e18;border-color:var(--line)}
html[data-color-scheme="dark"] .balance-preview,html[data-color-scheme="dark"] .field-note{background:#2d2115;color:#efb67b}html[data-color-scheme="dark"] .balance-preview strong{color:#efb67b}
html[data-color-scheme="dark"] .pos-catalog-head{background:var(--panel)}html[data-color-scheme="dark"] .product-card:hover{border-color:#4a8b68;box-shadow:0 5px 15px rgba(0,0,0,.2)}
html[data-color-scheme="dark"] .chart-period{background:#111914}html[data-color-scheme="dark"] .chart-period button{color:#9aaba0}html[data-color-scheme="dark"] .chart-period button.active{background:#27342c;color:#81d6a7;box-shadow:none}html[data-color-scheme="dark"] .sales-chart-grid{stroke:#314038}html[data-color-scheme="dark"] .sales-chart-axis{fill:#91a197}
html[data-color-scheme="dark"] .rank-track,html[data-color-scheme="dark"] .week-track{background:#26332b}html[data-color-scheme="dark"] .metric-help{background:#222e27;border-color:#405147;color:#b9c9bf!important}
html[data-color-scheme="dark"] .alert.success{background:#173425;color:#8bd3aa}html[data-color-scheme="dark"] .alert.danger{background:#3c2020;color:#efa0a0}
html[data-color-scheme="dark"] .stock-row.low td{background:#211f14}html[data-color-scheme="dark"] .stock-row.critical td{background:#261b14}html[data-color-scheme="dark"] .stock-row.out td{background:#281818}
html[data-color-scheme="dark"] #amountPaid:disabled{background:#202a23;color:#9aa99f}
@media print{html[data-color-scheme="dark"] .receipt{background:#fff!important;color:#17201b!important}html[data-color-scheme="dark"] .receipt th{background:#fafbfa!important;color:#879189!important}html[data-color-scheme="dark"] .receipt td{color:#17201b!important;border-color:#edf0ed!important}}

/* Shared responsive shell: reliable mobile drawer, sticky header and strict
   card containment down to iPhone mini / SE width. */
.sidebar-brand{display:flex;align-items:flex-start;gap:8px}.sidebar-brand .logo{flex:1;min-width:0}.sidebar-close,.nav-backdrop{display:none}.nav-backdrop[hidden]{display:none!important}
.main,.main>*,.metric-grid>*,.dashboard-charts>*,.split-layout>*,.panel,.panel>*,.panel-head>*,.topbar>*,.customer-kpis>*,.alert-products>*,.rank-row>*{min-width:0}
.metric-grid,.dashboard-charts,.split-layout,.panel,.metric,.cart-panel,.products-panel,.chart-panel{width:100%;max-width:100%}
.metric strong,.panel-head h2,.panel-head p,.topbar-title h1,.topbar-title p{max-width:100%;overflow-wrap:anywhere}

@media(max-width:800px){
html,body{width:100%;max-width:100%;overflow-x:hidden}
body.menu-open{overflow:hidden}
.app-shell,.main{width:100%;max-width:100%;min-width:0}
.main{margin-left:0;padding:18px;padding-bottom:92px;overflow-x:hidden}
.sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:min(84vw,320px);max-width:calc(100vw - 42px);height:100vh;height:100dvh;z-index:1000;overflow-y:auto;overscroll-behavior:contain;transform:translate3d(-105%,0,0);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility .22s ease;box-shadow:18px 0 45px rgba(5,15,9,.28)}
.menu-open .sidebar{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto}
.sidebar-brand{position:relative}.sidebar-brand .logo{padding-right:2px}.sidebar-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;margin-top:-2px;border:1px solid #405147;border-radius:9px;background:#1c2d24;color:#fff;font-size:25px;line-height:1;cursor:pointer}
.nav-backdrop{display:block;position:fixed;inset:0;z-index:900;width:100%;height:100%;padding:0;border:0;border-radius:0;background:rgba(5,12,8,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}
.topbar{position:sticky;top:0;z-index:100;min-height:64px;margin:-18px -18px 18px;padding:11px 18px;background:var(--bg);border-bottom:1px solid var(--line);gap:10px}
.menu-btn{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.topbar-title{flex:1;min-width:0;margin-right:auto}.topbar-title h1,.topbar-title p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-title h1{font-size:20px}.topbar-title p{font-size:12px}
.top-actions{flex:0 0 auto;min-width:0}.date-pill{display:none}
.panel,.metric,.cart-panel,.products-panel,.chart-panel{min-width:0;max-width:100%;overflow-wrap:anywhere}
.panel-head{flex-wrap:wrap;align-items:flex-start;gap:10px}.panel-head>div:first-child{flex:1 1 180px}.panel-head>a,.panel-head>.inventory-actions,.panel-head>.report-head-actions{max-width:100%}
.metric{min-width:0}.metric strong{line-height:1.15;word-break:break-word}.dashboard-kpis .metric:hover,.dashboard-kpis .metric:focus-within{z-index:5}
.metric-help::after{width:min(255px,calc(100vw - 58px));max-width:calc(100vw - 58px)}
.dashboard-charts,.split-layout{grid-template-columns:minmax(0,1fr)}
.sales-chart-actions{max-width:100%}.sales-line-chart svg{overflow:hidden}
.alert-products>div{grid-template-columns:auto minmax(0,1fr) auto}.alert-products strong,.alert-products small{min-width:0;overflow-wrap:anywhere}.alert-products b{white-space:nowrap}
.rank-row>div:first-child{min-width:0;flex-wrap:wrap}.rank-row>div:first-child>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:520px){
.main{padding:12px;padding-bottom:88px}
.topbar{margin:-12px -12px 14px;padding:9px 12px;min-height:60px}
.topbar h1{font-size:18px}.topbar p{font-size:11px}.menu-btn{flex-basis:40px;width:40px;height:40px}
.sidebar{width:min(88vw,306px);max-width:calc(100vw - 34px);padding:18px 12px}.sidebar nav a{padding:11px 10px}.logo{padding-bottom:18px}
.metric-grid,.dashboard-kpis,.super-kpis,.report-metrics,.debt-metrics{grid-template-columns:minmax(0,1fr)}
.metric{padding:16px;padding-right:42px!important}.metric strong{font-size:clamp(20px,7vw,23px)}
.panel-head{padding:15px 14px}.panel-head>div:first-child{flex-basis:150px}
.inventory-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}.inventory-actions .btn{width:100%;min-width:0;padding-inline:9px;text-align:center}
.sales-chart-actions{white-space:normal;gap:8px}.chart-period{flex:0 0 auto}.chart-period button{padding:7px 10px}.sales-chart-actions>a{white-space:nowrap}
.sales-line-chart{max-width:100%;overflow:hidden}.sales-line-chart svg{max-width:100%}
.customer-kpis{grid-template-columns:minmax(0,1fr)}.customer-kpis>div{border-right:0;border-bottom:1px solid var(--line)}
.customer-kpis>div:last-child{border-bottom:0}
.stock-filter-tabs a{font-size:11px;white-space:normal;text-align:center;line-height:1.15}
.import-bar,.inventory-search,.stock-filter-bar,.form-panel{padding-left:14px;padding-right:14px}
.form-panel,.panel,.alert{max-width:100%}
}

@media(max-width:360px){
.main{padding:10px;padding-bottom:86px}.topbar{margin:-10px -10px 12px;padding:8px 10px}.topbar-title h1{font-size:17px}.topbar-title p{font-size:10px}
.sidebar{width:calc(100vw - 28px);max-width:calc(100vw - 28px)}
.pos-flow-layout .cart-totals>.pos-checkout-fields{grid-template-columns:minmax(0,1fr)}
.pos-flow-layout .pos-checkout-fields>label,.pos-flow-layout .pos-checkout-fields>.customer-select,.pos-flow-layout .pos-checkout-fields>.pos-sale-date,.pos-flow-layout .pos-checkout-fields>.pos-discount{grid-column:1;width:100%;min-width:0}
.pos-flow-layout .cart-totals>.pos-checkout-summary{grid-template-columns:minmax(0,1fr)}.pos-flow-layout .pos-checkout-summary>*{grid-column:1!important}
.product-pagination{gap:5px}.product-pagination .btn{padding:8px 9px;font-size:11px}.product-pagination strong{min-width:70px;font-size:10px}
.inventory-actions{grid-template-columns:minmax(0,1fr)}
.sales-chart-actions{align-items:flex-start;flex-direction:column}.sales-chart-actions>a{align-self:flex-end}
.metric-help::after{width:calc(100vw - 44px);max-width:calc(100vw - 44px);right:-3px}
}

html[data-color-scheme="dark"] .topbar,html[data-color-scheme="dark"] .menu-btn{background:var(--bg);border-color:var(--line);color:var(--ink)}
@media print{.nav-backdrop,.sidebar-close,.menu-btn{display:none!important}}

/* Keep the page heading available while long dashboards, reports and forms
   scroll. The main container must not become its own scroll box or sticky
   positioning will fail in mobile Safari. */
body{overflow-x:hidden}
.app-shell,.main{overflow:visible!important}
.topbar{position:sticky;top:0;z-index:100;background:var(--bg)}
@media(min-width:801px){.topbar{margin-top:-14px;padding:14px 0 12px;box-shadow:0 1px 0 var(--line)}}

/* Expenses are an outflow, so keep them visually distinct from sales and
   profit without adding another dashboard colour system. */
.expense-card{border-color:#ead8c6}.expense-card strong{color:var(--orange)}
html[data-color-scheme="dark"] .expense-card{background:#251f18!important;border-color:#514232}html[data-color-scheme="dark"] .expense-card strong{color:#e3a15e}

/* iPhone Safari: native date/month controls otherwise keep a minimum inline
   width and can escape narrow report and expense cards. */
input[type="date"],input[type="month"]{box-sizing:border-box;max-width:100%;min-width:0}
input[type="date"]::-webkit-date-and-time-value,input[type="month"]::-webkit-date-and-time-value{min-width:0;width:100%;text-align:left}

@media(max-width:800px){
/* A fixed mobile heading is more reliable than sticky inside Safari's
   overflow/viewport implementation. The drawer and backdrop remain above it. */
.topbar{position:fixed!important;inset:0 0 auto 0!important;z-index:800!important;width:100%;max-width:100%;min-height:64px;margin:0!important;padding:11px 18px!important;box-sizing:border-box;box-shadow:0 1px 0 var(--line)}
.main{padding-top:88px!important}

form,label,.report-main-controls,.report-extra-controls,.report-main-controls>*,.report-extra-controls>*,.form-panel form,.panel-head>form{min-width:0;max-width:100%}
.report-main-controls label,.report-extra-controls label,.form-panel label{width:100%}
input[type="date"],input[type="month"]{display:block;width:100%!important;max-width:100%!important;min-width:0!important;inline-size:100%!important;min-inline-size:0!important;-webkit-appearance:none;appearance:none}
.report-controls,.form-panel{overflow:hidden}
}

@media(max-width:520px){
.topbar{min-height:60px;padding:9px 12px!important}
.main{padding-top:76px!important}
.expense-month-filter{flex:1 1 100%;width:100%}
.expense-month-filter input[type="month"]{width:100%!important}
}

@media(max-width:360px){
.topbar{padding:8px 10px!important}
.main{padding-top:72px!important}
}

/* Dashboard polish: give sales a visible green identity in dark mode and
   prevent the chart title block from reserving 180px vertically on phones. */
.metric.accent.sales-card{background:linear-gradient(135deg,#235b3d,#19452f);border-color:#316b4b}
.metric.accent.sales-card>span,.metric.accent.sales-card small{color:#c3d8ca}
.metric.accent.sales-card strong{color:#fff}
html[data-color-scheme="dark"] .metric.accent.sales-card{background:linear-gradient(135deg,#1d4b34,#173b29);border-color:#326348}

@media(max-width:620px){
.sales-chart-panel{min-height:0}
.sales-chart-head{gap:14px}
.sales-chart-head>div:first-child{flex:0 1 auto;width:100%}
.sales-chart-actions{flex:0 0 auto}
.sales-line-chart{height:220px}
}

/* Expense history: interactive daily trend above the table. */
.expense-trend{padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.expense-trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:4px}
.expense-trend-head>div{display:grid;gap:3px}.expense-trend-head span{color:var(--muted);font-size:12px}.expense-trend-head>b{color:var(--orange);font-size:13px;white-space:nowrap}
.expense-line-chart{position:relative;height:220px;max-width:100%;overflow:hidden;padding:6px 4px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.expense-line-chart svg{display:block;width:100%;height:100%;overflow:hidden;cursor:crosshair}
.expense-chart-area{fill:url(#expenseAreaGradient)}
.expense-chart-line{fill:none;stroke:#d78335;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.expense-chart-focus{opacity:0;pointer-events:none;transition:opacity .08s}.expense-chart-focus.is-visible{opacity:1}
.expense-chart-focus-dot{fill:#fff;stroke:#c36d24;stroke-width:2.5;vector-effect:non-scaling-stroke}
.expense-chart-tooltip{background:#3a281b}
.expenses-layout{grid-template-columns:minmax(270px,.72fr) minmax(0,2fr);align-items:start}

/* New-business guidance keeps an empty dashboard useful instead of looking
   broken. It disappears automatically after the first completed sale. */
.onboarding-panel{overflow:hidden;border-color:#bcd9c8;background:linear-gradient(135deg,var(--panel),#edf7f1)}
.onboarding-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border-bottom:1px solid var(--line)}
.onboarding-intro h2{font-size:22px;margin:7px 0 5px}.onboarding-intro p{margin:0;color:var(--muted)}
.onboarding-label{font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--green)}
.onboarding-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.onboarding-step{min-width:0;display:flex;align-items:flex-start;gap:11px;padding:17px;background:var(--panel);color:var(--ink)}
.onboarding-step:hover{background:#f4faf6}.onboarding-step>b{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--green2);color:var(--green)}
.onboarding-step>span{min-width:0;display:grid;gap:3px}.onboarding-step small{color:var(--muted);line-height:1.35}.onboarding-step.done>b{background:var(--green);color:#fff}
.dashboard-empty-chart{min-height:220px;padding:28px;display:grid;place-items:center;align-content:center;gap:7px;text-align:center;color:var(--muted)}
.dashboard-empty-chart>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--green2);color:var(--green);font-size:22px}.dashboard-empty-chart strong{color:var(--ink);font-size:17px}.dashboard-empty-chart p{max-width:460px;margin:0 0 8px;line-height:1.45}
html[data-color-scheme="dark"] .onboarding-panel{background:linear-gradient(135deg,var(--panel),#152a20)}
html[data-color-scheme="dark"] .onboarding-step:hover{background:#182a21}

/* The drawer must always sit above dashboard cards and tooltips. Disabling
   pointer events on the page while open also prevents empty-state cards from
   intercepting taps intended for the navigation. */
.menu-btn{position:relative;z-index:2;pointer-events:auto!important;touch-action:manipulation}
@media(max-width:800px){
.sidebar{z-index:1200!important}.nav-backdrop{z-index:1100!important}.topbar{z-index:1000!important}
body.menu-open .main{pointer-events:none}body.menu-open .sidebar,body.menu-open .nav-backdrop{pointer-events:auto}
.sidebar nav a,.sidebar-bottom a,.sidebar-close{position:relative;z-index:1;touch-action:manipulation}
.onboarding-steps{grid-template-columns:1fr 1fr}.dashboard-empty-chart{min-height:190px}
}
@media(max-width:520px){
.onboarding-intro{align-items:flex-start;flex-direction:column;padding:18px}.onboarding-intro .btn{width:100%}
.onboarding-steps{grid-template-columns:1fr}.onboarding-step{padding:15px 17px}
.dashboard-empty-chart{min-height:170px;padding:22px 18px}
}
.expenses-layout .expense-history-panel:only-child{grid-column:1/-1}

@media(max-width:1100px){
.expenses-layout{grid-template-columns:minmax(0,1fr)}
.expenses-layout .expense-entry-panel{order:-1}
}
@media(max-width:520px){
.expense-trend{padding:14px 10px 8px}.expense-trend-head{padding-inline:4px;flex-wrap:wrap}.expense-line-chart{height:205px;padding-inline:0}
}
.staff-permissions{margin-top:22px}
.permission-users{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px}
.permission-card{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--panel);display:grid;gap:16px;min-width:0}
.permission-user-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.permission-user-head div{display:grid;gap:4px;min-width:0}.permission-user-head span{color:var(--muted);overflow-wrap:anywhere}
.permission-grid{display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.permission-grid-head,.permission-row{display:grid;grid-template-columns:minmax(120px,1fr) 82px 92px;align-items:center;gap:8px;padding:10px 12px}
.permission-grid-head{background:var(--soft);color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.permission-row+.permission-row{border-top:1px solid var(--border)}
.permission-row label{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--muted);font-size:.84rem}.permission-row input{width:18px;height:18px;accent-color:var(--green)}
.permission-na{text-align:center;color:var(--muted)}
.split-layout:has(.inventory-head):not(:has(aside)){grid-template-columns:minmax(0,1fr)}
.split-layout:has(.inventory-head):not(:has(aside)) .import-bar,.split-layout:has(.inventory-head):not(:has(aside)) .record-actions{display:none}

@media(max-width:900px){.permission-users{grid-template-columns:1fr}}
@media(max-width:480px){.permission-users{padding:14px}.permission-card{padding:14px}.permission-grid-head,.permission-row{grid-template-columns:minmax(88px,1fr) 66px 76px;padding:10px 8px}.permission-row label span{font-size:.76rem}}