@import url('fonts.css');
:root{
    --navy:#111d32;--navy-2:#1d2d48;--blue:#2563eb;--blue-2:#eaf1ff;--teal:#0f9f91;
    --ink:#1c283a;--muted:#778398;--line:#e7ebf1;--page:#f4f6fa;--white:#fff;
    --green:#168458;--orange:#d77b11;--red:#d44747;--shadow:0 10px 30px rgba(24,39,75,.06);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.65 var(--app-font)}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{background:var(--navy);color:#dbe4f1;min-height:100vh;padding:20px 14px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.brand{display:flex;align-items:center;gap:11px;padding:3px 10px 24px;color:white}
.brand-mark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,#3986ff,#1d57d6);color:#fff;font-weight:800;letter-spacing:-1px;box-shadow:0 8px 18px #1d57d650}
.brand strong{display:block;font-size:17px;letter-spacing:.3px}.brand small{display:block;color:#95a4bb;font-size:10px;margin-top:1px}
.nav-caption{font-size:10px;color:#72839d;padding:15px 12px 7px;font-weight:bold}
.nav-list{overflow-y:auto;flex:1;padding-bottom:10px;scrollbar-width:thin}
.nav-link{display:flex;align-items:center;gap:11px;min-height:40px;padding:8px 11px;margin:2px 0;border-radius:9px;color:#c2cddd;font-size:12px;transition:.15s}
.nav-link>span{width:20px;color:#91a1b8;text-align:center;font-size:15px}.nav-link:hover{color:#fff;background:#ffffff0b}.nav-link.active{background:#263c60;color:#fff;font-weight:bold}.nav-link.active>span{color:#6ea5ff}
.nav-link.pos-link{background:#155bd5;color:white;margin-top:4px}.nav-link.pos-link>span{color:white}.nav-link.pos-link.active{background:#3478f6}
.sidebar-footer{border-top:1px solid #ffffff15;margin-top:8px;padding:14px 6px 4px;display:flex;align-items:center;gap:9px}
.avatar{width:36px;height:36px;background:#304460;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:bold}
.user-mini{min-width:0;flex:1}.user-mini strong,.user-mini small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-mini strong{font-size:11px;color:#fff}.user-mini small{font-size:10px;color:#95a4bb}
.icon-button{width:31px;height:31px;border:0;border-radius:8px;background:#ffffff10;color:#cbd6e7;cursor:pointer}
.main-area{min-width:0;display:flex;flex-direction:column}
.topbar{min-height:90px;padding:18px 30px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.eyebrow{font-size:11px;color:#8490a2}.topbar h1{font-size:21px;margin:2px 0 0;color:#162339}
.top-actions{display:flex;align-items:center;gap:12px}.status-pill{font-size:11px;color:#56816f;display:flex;align-items:center;gap:6px}.status-pill i{width:7px;height:7px;background:#22b581;border-radius:50%}
.page-content{padding:24px 30px 30px;flex:1;max-width:1800px;width:100%;margin:0 auto}
.footer{border-top:1px solid var(--line);margin:0 30px;padding:15px 0 18px;color:#8b96a8;font-size:10px}.footer span{margin-right:10px}
.mobile-menu{display:none;border:0;background:#f0f4fa;border-radius:8px;padding:6px 9px;margin-left:9px}
.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.welcome-row h2{font-size:19px;margin:0 0 4px}.welcome-row p,.panel-heading p{margin:0;color:var(--muted);font-size:11px}
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 15px;display:flex;align-items:center;gap:12px;min-width:0;box-shadow:0 3px 12px #1e2c4610}
.stat-icon{width:43px;height:43px;flex:0 0 43px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:13px}
.stat-card span,.stat-card strong,.stat-card small{display:block}.stat-card span{font-size:10px;color:#8490a2}.stat-card strong{font-size:17px;line-height:1.4;margin:2px 0;white-space:nowrap}.stat-card small{font-size:9px;color:#97a1b1;white-space:nowrap}
.stat-card.blue .stat-icon{background:#eaf1ff;color:#3374eb}.stat-card.violet .stat-icon{background:#f1eaff;color:#8055d9}.stat-card.teal .stat-icon{background:#e2f7f4;color:#139c91}.stat-card.orange .stat-icon{background:#fff1df;color:#d5821d}.stat-card.green .stat-icon{background:#e2f6ed;color:#168458}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:17px}
.quick-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 15px;display:grid;grid-template-columns:41px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;transition:.15s}
.quick-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfd9e8}.quick-icon{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px}.quick-card b{font-size:12px}.quick-card small{font-size:10px;color:var(--muted)}.blue-bg{background:#eaf1ff;color:#2563eb}.teal-bg{background:#e4f8f4;color:#078f7c}.violet-bg{background:#f1ebff;color:#7950cd}.orange-bg{background:#fff0dd;color:#d47912}
.two-column{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);gap:15px}
.panel,.content-card{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 3px 12px #1e2c4608}
.panel-heading{padding:17px 18px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h3{font-size:13px;margin:0 0 3px}.text-link{font-size:10px;color:var(--blue);font-weight:bold}
.table-wrap{overflow:auto;width:100%}table{width:100%;border-collapse:collapse;white-space:nowrap}th{font-size:10px;font-weight:bold;color:#778398;background:#f8f9fb;text-align:right;padding:11px 14px;border-top:1px solid #f0f2f5;border-bottom:1px solid #edf0f4}td{font-size:11px;padding:11px 14px;border-bottom:1px solid #eff1f5}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfcfe}.block{display:block}.muted{color:var(--muted)}.amount{font-weight:bold;color:#1f334f}.empty-cell{text-align:center;color:#8a95a5;padding:25px}
.badge{display:inline-flex;padding:3px 9px;border-radius:30px;font-size:9px;font-weight:bold}.badge-green{color:#13754b;background:#e6f6ed}.badge-red{color:#bd3c3c;background:#fff0ef}.badge-orange{color:#a86612;background:#fff3e1}.badge-blue{color:#235bb5;background:#eaf1ff}.badge-gray{color:#657286;background:#eef1f5}
.stock-alert-list{padding:0 15px 10px}.stock-alert-row{display:flex;gap:9px;align-items:center;padding:10px 2px;border-bottom:1px solid #f0f2f5}.stock-alert-row:last-child{border:0}.product-dot{width:31px;height:31px;border-radius:10px;background:#f0f4fb;color:#4670b4;display:grid;place-items:center;font-weight:bold}.stock-alert-row>div{flex:1;min-width:0}.stock-alert-row b,.stock-alert-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-alert-row b{font-size:10px}.stock-alert-row small{font-size:9px;color:#9aa4b2}.stock-qty{color:#c87519;font-weight:bold;font-size:10px}
.empty-state{padding:24px 12px;text-align:center;font-size:11px;color:#8d99aa}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.page-heading h2{font-size:17px;margin:0}.page-heading p{font-size:11px;color:var(--muted);margin:3px 0 0}
.btn{border:1px solid transparent;border-radius:8px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-size:11px;font-weight:bold;transition:.15s;white-space:nowrap}
.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn-primary{background:#2869e8;color:#fff;box-shadow:0 5px 12px #2869e824}.btn-light{background:#fff;border-color:#e1e6ed;color:#536176}.btn-success{background:#138966;color:#fff}.btn-danger{background:#d74646;color:#fff}.btn-small{padding:7px 10px;font-size:10px}.btn-block{width:100%}
.icon-action{border:0;background:#edf3ff;color:#2563eb;border-radius:7px;padding:6px 9px;font-size:10px;cursor:pointer}.icon-action.danger{background:#fff0ef;color:#c33}
.alert{padding:11px 14px;border-radius:9px;margin-bottom:14px;font-size:11px;position:relative}.alert ul{margin:5px 0 0;padding-right:20px}.alert-success{background:#e9f7ef;color:#176d49;border:1px solid #d2eedc}.alert-danger{background:#fff0ef;color:#9b3030;border:1px solid #f6d7d4}.alert-close{position:absolute;left:10px;top:7px;border:0;background:transparent;color:inherit;font-size:17px;cursor:pointer}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}.search-form{display:flex;align-items:center;gap:7px;max-width:530px;width:100%}.search-form input{flex:1}.toolbar-meta{font-size:10px;color:var(--muted)}
input,select,textarea{min-height:39px;border:1px solid #dfe4eb;border-radius:8px;background:#fff;color:var(--ink);padding:8px 10px;outline:none;width:100%;font-size:11px;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:#8fb1fa;box-shadow:0 0 0 3px #2d6de817}textarea{min-height:80px;resize:vertical}
label{display:grid;gap:6px;font-size:10px;font-weight:bold;color:#536075}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .span-2{grid-column:1/-1}.form-stack{display:grid;gap:15px}.form-actions{display:flex;justify-content:flex-start;gap:8px;margin-top:17px;padding-top:14px;border-top:1px solid #edf0f4}
.content-card{padding:17px}.content-card+.content-card{margin-top:14px}.content-card h3{font-size:13px;margin:0 0 13px}.check-row{display:flex;align-items:center;gap:7px;font-weight:normal}.check-row input{width:16px;min-height:16px}
.filters{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.filters label{min-width:135px}
.pagination{display:flex;gap:4px;align-items:center;justify-content:center;padding:14px}.pagination a,.pagination span{padding:6px 9px;border:1px solid var(--line);border-radius:6px;font-size:10px;background:#fff}.pagination .active span{background:var(--blue);border-color:var(--blue);color:#fff}
.stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.mini-stat{padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}.mini-stat span,.mini-stat strong{display:block}.mini-stat span{color:var(--muted);font-size:10px}.mini-stat strong{font-size:16px;margin-top:3px}
.form-error{color:#c03939;font-size:11px;min-height:16px;margin:4px 0}
.receipt-page{max-width:620px;margin:10px auto;background:#fff;padding:25px;border:1px solid var(--line);border-radius:10px}
.lock-overlay{position:fixed;inset:0;background:#111d32ee;z-index:1000;display:grid;place-items:center;padding:20px}.lock-overlay[hidden]{display:none}.lock-card{width:min(360px,100%);background:#fff;border-radius:16px;padding:26px;box-shadow:0 25px 70px #0005;text-align:center}.lock-card h2{margin:7px 0;font-size:18px}.lock-card p{color:var(--muted);font-size:11px}.lock-card form{margin-top:12px}.lock-symbol{margin:auto;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#eaf1ff;color:#2563eb;font-size:28px}
.footer{margin-top:auto}
.inline-form{display:inline}.inline-editor{min-width:235px;padding:12px;display:grid;gap:9px;position:absolute;z-index:10;left:20px;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}details{position:relative}summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}.text-red{color:#c84747;font-weight:bold}.text-green{color:#168458;font-weight:bold}
.chart-bars{height:210px;display:flex;align-items:flex-end;gap:8px;overflow-x:auto;padding:12px 8px 3px;border-bottom:1px solid #e7ebf1}.chart-column{height:100%;min-width:48px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}.chart-column b{font-size:9px;color:#536176}.chart-track{height:145px;width:24px;background:#f0f4fa;border-radius:6px 6px 2px 2px;display:flex;align-items:flex-end;overflow:hidden}.chart-track i{display:block;width:100%;background:linear-gradient(180deg,#64a0ff,#2869e8);border-radius:6px 6px 2px 2px}.chart-column small{font-size:9px;color:#7f8ca0}.summary-list>div{display:flex;justify-content:space-between;gap:8px;padding:10px 3px;border-bottom:1px solid #eff1f5;font-size:11px}.summary-list>div span{color:#6f7d90}.summary-list>div b{color:#25354c}.summary-list .summary-total{border:0;border-radius:8px;background:#edf5ff;margin-top:8px;padding:12px}.summary-list .summary-total b{color:#1554b2}.receipt-meta{display:grid;gap:5px;padding:8px 0;font-size:10px}.receipt-meta div{display:flex;justify-content:space-between;gap:5px}.receipt-meta span{color:#667080}.receipt-head{text-align:center}.receipt-head h2{font-size:16px;margin:0 0 4px}.receipt-head p{font-size:9px;margin:1px 0}.receipt-head strong{font-size:12px}.receipt-page hr{border:0;border-top:1px dashed #999;margin:9px 0}
/* Login */
.login-page{min-height:100vh;background:radial-gradient(circle at 15% 14%,#315d9c 0,transparent 29%),linear-gradient(135deg,#111d32,#1b2b45);display:grid;place-items:center;padding:24px}
.login-page{min-height:100svh}
.login-credit{text-align:right;margin-top:16px;max-width:100%;overflow-wrap:anywhere}
.login-brand .login-credit p{margin:0;color:#e5edf8;font-size:14px;line-height:1.9}.login-credit p:first-child{font-weight:700}.login-credit a{color:inherit}
.login-wrap{width:min(920px,100%);min-height:550px;background:#fff;border-radius:20px;display:grid;grid-template-columns:1fr 1.05fr;overflow:hidden;box-shadow:0 26px 90px #07111e66}
.login-brand{position:relative;padding:54px 48px;background:linear-gradient(145deg,#17263f,#203d65);color:#fff;overflow:hidden}.brand-mark-large{width:58px;height:58px;border-radius:18px;font-size:19px}
.login-brand-title{font-size:26px;font-weight:bold;margin-top:21px}.login-brand p{font-size:13px;color:#c0d2ea;line-height:2}
.login-illustration{position:absolute;left:0;bottom:-10px;width:100%;height:190px;opacity:.28;color:#82bbff}.login-illustration span{position:absolute;font-size:170px;left:15%;bottom:-43px}.login-illustration b{position:absolute;font-size:110px;left:48%;bottom:2px}.login-illustration i{position:absolute;font-size:100px;left:70%;bottom:12px}
.login-panel{padding:58px 54px;display:flex;flex-direction:column;justify-content:center}.login-panel h1{font-size:23px;margin:3px 0}.login-panel .muted{color:#8a95a5;font-size:11px;margin:4px 0 24px}.login-panel label{font-size:11px}.login-panel input{min-height:43px}.login-panel .check-row{display:flex}.login-panel .check-row input{width:15px;min-height:15px}.login-foot{font-size:9px;color:#a1aab8;border-top:1px solid #edf0f5;margin-top:26px;padding-top:13px;text-align:center}.mobile-brand{display:none}
@media(max-width:1250px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-grid .stat-card:nth-child(4),.stats-grid .stat-card:nth-child(5){grid-column:span 1}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;right:0;top:0;width:265px;transform:translateX(110%);transition:.2s;box-shadow:-10px 0 30px #111d3240}.sidebar.open{transform:translateX(0)}.main-area{width:100%}.mobile-menu{display:inline-block}.topbar{padding:15px 18px;min-height:75px}.topbar h1{display:inline;font-size:17px}.page-content{padding:17px}.footer{margin:0 17px}.two-column{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.top-actions .status-pill{display:none}.topbar{align-items:flex-start}.topbar h1{font-size:15px}.page-content{padding:13px}.welcome-row{align-items:flex-start;flex-direction:column}.welcome-row .btn{width:100%}.stats-grid{gap:8px}.stat-card{padding:12px 10px;gap:8px}.stat-icon{width:35px;height:35px;flex-basis:35px}.stat-card strong{font-size:13px}.stat-card small{white-space:normal}.quick-grid{gap:8px}.quick-card{padding:10px;grid-template-columns:33px 1fr;column-gap:8px}.quick-icon{width:33px;height:33px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .btn{width:100%}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.stat-strip{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.search-form{max-width:100%}.filters{align-items:stretch;flex-direction:column}.filters label{width:100%}.login-wrap{grid-template-columns:1fr;min-height:0}.login-brand{display:none}.login-panel{padding:34px 24px}.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.mobile-brand strong{font-size:16px}.receipt-page{padding:14px;margin:0 auto}.footer{font-size:9px}}
@media(max-width:560px){.report-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.report-stats .stat-card{grid-column:auto}.inline-editor{position:fixed;left:12px;right:12px;top:20%;max-height:65vh;overflow:auto}}
@media(max-width:560px){.login-brand{display:block;padding:24px}.login-brand-title{margin-top:12px}.login-panel .mobile-brand{display:none}}
.shortcut-overlay{position:fixed;inset:0;z-index:1000;background:#10182799;display:grid;place-items:center;padding:18px}
.shortcut-overlay[hidden]{display:none}
.shortcut-card{position:relative;width:min(520px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 24px 70px #10182740}
.shortcut-card h2{margin:0 0 4px;font-size:18px}.shortcut-card>p,.shortcut-card>small{color:var(--muted);font-size:11px}
.shortcut-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0}
.shortcut-card dl div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:8px}
.shortcut-card dt{min-width:42px;padding:3px 5px;text-align:center;border:1px solid #d9e1ee;border-bottom-width:2px;border-radius:5px;background:#f8faff;color:#31588e;font-weight:bold;font-size:10px}
.shortcut-card dd{margin:0;color:#46546a;font-size:10px}
.shortcut-close{position:absolute;left:14px;top:12px;border:0;background:#f0f3f8;border-radius:7px;width:30px;height:30px;font-size:20px;cursor:pointer}
@media(max-width:520px){.shortcut-card dl{grid-template-columns:1fr}.top-actions #shortcutHelpButton{font-size:9px;padding:6px}}
.function-bar{position:fixed;right:0;bottom:0;left:0;z-index:25;display:flex;align-items:center;gap:12px;min-height:66px;padding:7px 18px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -5px 20px #18274b10}
.function-bar-title{flex:0 0 auto;color:#64748b;font-size:10px;font-weight:bold}
.function-bar-keys{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;width:100%}
.function-key{min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 7px;border:1px solid #e3e8f0;border-radius:8px;background:#fbfcfe;color:#26364d;cursor:pointer;transition:background .15s,border-color .15s}
.function-key:hover:not(:disabled),.function-key:focus-visible{background:#eef4ff;border-color:#b9cef3;outline:2px solid #8db5ff;outline-offset:1px}
.function-key:disabled{opacity:.45;cursor:not-allowed}
.function-key kbd{flex:0 0 auto;padding:3px 5px;border:1px solid #d6deea;border-bottom-width:2px;border-radius:5px;background:#fff;color:#31588e;font:700 9px var(--app-font)}
.function-key span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:bold}
.shell{padding-bottom:66px}
.topbar{gap:12px}.topbar>div{min-width:0}.top-actions{flex-wrap:wrap}.purchase-line>label{min-width:0}#returnSettlement{display:block;padding:10px 0;overflow-wrap:anywhere;font-weight:bold}.receipt-page table{white-space:normal}.receipt-page td{overflow-wrap:anywhere}
@media(max-width:1050px){.function-bar{align-items:flex-start;flex-direction:column;gap:4px;padding:6px 10px}.function-bar-title{display:none}.function-bar-keys{grid-template-columns:repeat(6,minmax(68px,1fr));overflow-x:auto;padding-bottom:2px}.function-key{min-height:38px;flex-direction:column;gap:2px;padding:3px}.function-key span{max-width:100%;font-size:8px}.shell{padding-bottom:98px}}
@media(max-width:560px){.function-bar{padding:5px 7px}.function-bar-keys{grid-template-columns:repeat(12,58px);gap:4px}.function-key{min-height:38px}.shell{padding-bottom:94px}}
@media print{body{background:#fff}.sidebar,.topbar,.footer,.no-print,.alert,.function-bar,.shortcut-overlay{display:none!important}.shell{display:block;padding:0}.page-content{padding:0}.receipt-page{border:0;border-radius:0;box-shadow:none;margin:0 auto;padding:0;width:76mm;max-width:76mm;font-size:10px}.receipt-page table td,.receipt-page table th{padding:4px 2px;font-size:9px}.receipt-page .receipt-head{text-align:center}.receipt-page hr{border:0;border-top:1px dashed #444}.receipt-page .receipt-total{font-size:12px;font-weight:bold}}