/* KHATA — base theme (moved from index.html) */
:root{
  --navy:#0B2A4A; --navy-2:#082036; --maroon:#7A1638; --maroon-2:#5C0F2A;
  --topbar-1:#1B75B5; --topbar-2:#0E4C82;
  --bg:#EEF1F5; --card:#FFFFFF; --border:#DCE2E8;
  --ink:#16232F; --ink-soft:#66748A;
  --ribbon:#7FA31E;
  --dr:#C0392B; --cr:#1E7A46;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--ink);font-size:13.5px;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
#shell{display:flex;min-height:100vh;}

/* ===== Sidebar ===== */
#sidebar{width:256px;flex-shrink:0;background:var(--navy);display:flex;position:relative;padding-left:34px;}
#stripe{position:absolute;left:0;top:0;bottom:0;width:34px;background:linear-gradient(180deg,var(--maroon),var(--maroon-2));display:flex;align-items:center;justify-content:center;}
#stripe{align-items:flex-start;}
#stripe span{position:sticky;top:32vh;writing-mode:vertical-rl;transform:rotate(180deg);color:#F3D9DF;font-weight:700;letter-spacing:0.25em;font-size:12px;}
#navwrap{flex:1;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow:hidden;}
.brandbox{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,0.08);}
.brandbox .b1{color:#fff;font-weight:700;font-size:17px;}
.brandbox .b2{color:#9FC3E8;font-size:10.5px;letter-spacing:0.1em;margin-top:2px;}
#navlist{flex:1;overflow-y:auto;padding:6px 0;}
.nitem{color:#CFE0F2;padding:9px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.8px;}
.nitem .nicon{width:15px;text-align:center;color:#8FB4DD;font-size:12px;}
.nitem:hover{background:rgba(255,255,255,0.06);}
.nitem.active{background:rgba(255,255,255,0.1);color:#fff;}
.nitem .car{margin-left:auto;font-size:9px;transition:transform .15s;color:#7FA3C9;}
.nitem.open .car{transform:rotate(90deg);}
.subwrap{max-height:0;overflow:hidden;transition:max-height .18s ease;}
.subwrap.open{max-height:2000px;}
.subitem{padding:7px 14px 7px 30px;color:#A9C4DE;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:7px;}
.subitem:hover{background:rgba(255,255,255,0.05);color:#fff;}
.subitem.active{color:#fff;font-weight:600;}
.subitem i.car2{margin-left:auto;font-size:8px;transition:transform .15s;}
.subitem.open i.car2{transform:rotate(90deg);}
.subsubwrap{max-height:0;overflow:hidden;transition:max-height .18s ease;}
.subsubwrap.open{max-height:1000px;}
.subsubitem{padding:6px 14px 6px 46px;color:#8FB0CE;font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.subsubitem:hover{background:rgba(255,255,255,0.05);color:#fff;}
.subsubitem.active{color:#fff;font-weight:600;}

/* ===== Topbar ===== */
#main{flex:1;min-width:0;display:flex;flex-direction:column;}
#topbar{background:linear-gradient(90deg,var(--topbar-1),var(--topbar-2));color:#fff;padding:10px 20px;display:flex;align-items:center;gap:18px;}
#topbar .tlogo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;flex-shrink:0;}
#topbar .tag{flex:1;min-width:0;overflow:hidden;font-family:'IBM Plex Sans',sans-serif;padding:0;border-radius:0;font-size:inherit;display:block;}
#topbar .tag b{display:block;font-size:11px;color:#FFE9A8;letter-spacing:0.06em;}
#topbar .tag span{display:block;font-size:11.5px;color:#E4F0FA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#topbarCalc{display:flex;gap:6px;align-items:center;flex-shrink:0;}
#calcExprInput{width:110px;padding:7px 9px;border:1px solid rgba(255,255,255,0.3);border-radius:4px;background:rgba(255,255,255,0.12);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:right;}
#calcExprInput::placeholder{color:rgba(255,255,255,0.6);}
#calcExprInput:focus{outline:none;background:rgba(255,255,255,0.2);}
#calcResultInput{width:70px;padding:7px 9px;border:1px solid rgba(255,255,255,0.3);border-radius:4px;background:rgba(255,255,255,0.18);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:right;font-weight:600;}
.tuser{text-align:right;flex-shrink:0;font-size:11.5px;line-height:1.5;color:#E4F0FA;}
.tuser b{color:#fff;}
.tavatar{width:34px;height:34px;border-radius:50%;background:#0A1F33;border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0;}
#refreshBtn{color:#fff;font-size:15px;cursor:pointer;flex-shrink:0;opacity:0.85;}
#refreshBtn:hover{opacity:1;}

#content{padding:18px 20px 50px 20px;max-width:1320px;}
.view-title{font-size:19px;font-weight:700;margin-bottom:2px;}
.view-sub{color:var(--ink-soft);font-size:12.5px;margin-bottom:16px;}
.crumb{font-size:11.5px;color:var(--ink-soft);margin-bottom:6px;}

.grid{display:grid;gap:14px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
.panel{background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:16px;}
.panel-head{background:linear-gradient(90deg,var(--topbar-1),var(--topbar-2));color:#fff;padding:9px 14px;border-radius:6px 6px 0 0;font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:8px;justify-content:space-between;}
.panel-body{padding:14px;}
.notif-empty{color:var(--ink-soft);text-align:center;padding:26px 0;font-size:12.5px;}
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.filter-bar select,.filter-bar input{width:auto;padding:7px 9px;font-size:12.5px;}
.filter-bar .btn{padding:7px 16px;}

.ribbon-card{position:relative;overflow:hidden;border-radius:8px;color:#fff;padding:16px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;}
.ribbon-card .icon{position:absolute;left:14px;top:14px;font-size:22px;opacity:0.9;}
.ribbon-card .val{font-family:'IBM Plex Mono',monospace;font-size:clamp(15px,1.5vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;margin-top:26px;}
.ribbon-card .lab{font-size:10.5px;letter-spacing:0.08em;opacity:0.95;font-weight:600;}
.ribbon-tag{position:absolute;top:8px;right:-30px;background:var(--ribbon);color:#fff;font-size:9.5px;font-weight:700;padding:3px 34px;transform:rotate(40deg);letter-spacing:0.06em;}
.rc-purchase{background:linear-gradient(135deg,#5B4FCF,#8579E8);}
.rc-expenses{background:linear-gradient(135deg,#D68A2C,#EFB35C);}
.rc-goods{background:linear-gradient(135deg,#4F8FCF,#79B4E8);}
.rc-service{background:linear-gradient(135deg,#C0392B,#E36B5C);}

.mini-stat{background:var(--topbar-2);color:#fff;border-radius:5px;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;}
.mini-stat i{font-size:16px;opacity:0.85;}
.mini-stat .lab{font-size:10px;letter-spacing:0.05em;opacity:0.9;}
.mini-stat .val{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:700;}

.balance-card{border-radius:6px;color:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.bc-cash{background:#1E7A46;} .bc-mobile{background:#B23A2E;} .bc-bank{background:#2A5C8A;}
.balance-card i{font-size:16px;opacity:0.9;}
.balance-card .val{font-weight:700;font-size:13.5px;}
.balance-card .sub{font-size:10.5px;opacity:0.9;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;font-size:10.2px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);padding:7px 9px;border-bottom:1px solid var(--border);}
td{padding:7px 9px;border-bottom:1px solid #F0F2F5;vertical-align:top;}
tr:last-child td{border-bottom:none;}
tr.clickable:hover{background:#F7F9FB;cursor:pointer;}
td.num,th.num{text-align:right;font-family:'IBM Plex Mono',monospace;}
.tag{display:inline-block;font-size:9.5px;padding:2px 7px;border-radius:20px;font-family:'IBM Plex Mono',monospace;}
.tag-dr{background:#FBEBEA;color:var(--dr);}
.tag-cr{background:#E7F4EC;color:var(--cr);}
.tag-type{background:#EEF2F6;color:var(--ink-soft);}
.subhead{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--topbar-2);background:#EAF2F9;padding:6px 9px;}

label{display:block;font-size:11.5px;color:var(--ink-soft);margin:10px 0 4px 0;font-weight:600;}
label:first-child{margin-top:0;}
input,select{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:4px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;background:#fff;}
input:focus,select:focus{outline:2px solid var(--topbar-1);outline-offset:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.btn{background:var(--topbar-2);color:#fff;border:none;border-radius:4px;padding:8px 16px;font-size:12.8px;font-weight:600;cursor:pointer;}
.btn:hover{background:var(--navy);}
.btn.secondary{background:#fff;border:1px solid var(--border);color:var(--ink);}
.btn.secondary:hover{background:#F3F5F7;}
.btn.small{padding:5px 10px;font-size:11.5px;}
.type-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.type-tab{padding:6px 13px;border:1px solid var(--border);border-radius:20px;font-size:12px;cursor:pointer;background:#fff;color:var(--ink-soft);font-weight:600;}
.type-tab.active{background:var(--topbar-2);border-color:var(--topbar-2);color:#fff;}
.item-row{display:grid;grid-template-columns:2.2fr 0.8fr 0.9fr 0.9fr auto;gap:8px;align-items:end;margin-bottom:8px;}
.totals-strip{display:flex;justify-content:flex-end;gap:24px;padding:10px 14px;background:#F7F9FB;border-top:1px solid var(--border);font-family:'IBM Plex Mono',monospace;}
.totals-strip .t-label{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;}
.totals-strip .t-val{font-size:13.5px;font-weight:700;}
.note{font-size:11px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}
.required-star{color:var(--dr);}
.empty-state{text-align:center;padding:30px 10px;color:var(--ink-soft);font-size:12.5px;}
.stamp{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:8.5px;font-weight:700;border:1.5px solid currentColor;transform:rotate(-8deg);flex-shrink:0;}

.pos-bar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.pos-chip{border:1px solid var(--border);border-radius:4px;padding:7px 10px;color:var(--ink-soft);background:#F7F9FB;}
.pos-walkin{width:110px;flex-shrink:0;border-color:var(--topbar-1);color:var(--topbar-2);font-weight:600;}
.pos-search,.pos-search2{flex:1;min-width:160px;}
.pos-plus{border:1px solid var(--topbar-1);background:#fff;color:var(--topbar-2);border-radius:4px;padding:7px 12px;cursor:pointer;}
.pos-plus:hover{background:var(--topbar-1);color:#fff;}
.pos-bal{font-weight:700;color:var(--dr);white-space:nowrap;padding:0 4px;}
.pos-bal b{color:var(--topbar-2);}
.pos-search-wrap{flex:1;min-width:200px;display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:4px;padding:0 8px;color:var(--ink-soft);}
.pos-search-wrap input{border:none;padding:8px 0;}
.pos-search-wrap input:focus{outline:none;}
.pos-icon-btn{border:1px solid var(--border);background:#F7F9FB;border-radius:4px;padding:8px 12px;cursor:pointer;color:var(--topbar-2);}
.pos-mini{flex:1;min-width:140px;}
.pos-table{margin-top:6px;}
.pos-table th{background:#DCE6EE;}
.pos-table td{border-bottom:1px solid var(--border);}
#prodPanelTab{position:absolute;left:-1px;top:70px;background:#fff;border:1px solid var(--border);border-left:none;border-radius:0 4px 4px 0;padding:10px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-soft);z-index:5;}
#prodPanelTab span{writing-mode:vertical-rl;font-size:9.5px;letter-spacing:0.1em;font-weight:700;}
#prodPanelFlyout{position:absolute;left:24px;top:70px;bottom:14px;width:220px;background:#fff;border:1px solid var(--border);border-radius:0 6px 6px 0;box-shadow:2px 0 10px rgba(0,0,0,0.08);overflow-y:auto;z-index:4;}
.pp-item{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #F0F2F5;cursor:pointer;font-size:12px;}
.pp-item:hover{background:var(--bg);}
.pricelist-wrap{display:flex;gap:14px;align-items:flex-start;}
.pricelist-main{flex:1;min-width:0;}
.pricelist-history{width:300px;flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:6px;}
.pl-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;flex-wrap:wrap;gap:10px;}
.pl-toolbar select{width:auto;}
.pl-toolbar input{width:200px;}
.barcode-bars{display:flex;align-items:flex-end;height:26px;gap:1px;}
.barcode-bars span{width:2px;background:#1a1a1a;}
.barcode-code{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--topbar-1);text-align:center;}
.pl-action-btn{background:var(--topbar-2);color:#fff;border:none;border-radius:3px;padding:5px 7px;cursor:pointer;margin-right:2px;font-size:11px;}
.pl-action-btn:hover{background:var(--navy);}
.history-date{display:inline-block;background:var(--cr);color:#fff;font-size:10.5px;padding:3px 10px;border-radius:3px;margin-bottom:8px;}
.history-entry{display:flex;gap:8px;padding:0 14px 16px 14px;position:relative;}
.history-entry .hdot{width:8px;height:8px;border-radius:50%;background:var(--topbar-1);margin-top:5px;flex-shrink:0;}
.history-entry .htext a{color:var(--topbar-1);font-size:12px;display:block;}
.history-entry .htime{font-size:10px;color:var(--ink-soft);}
.qa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.qa-item{background:#fff;border:1px solid var(--border);border-radius:6px;padding:14px 8px;text-align:center;cursor:pointer;}
.qa-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.qa-item .qi{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px auto;color:#fff;font-size:17px;}
.qa-item .ql{font-size:11px;color:var(--ink);font-weight:600;}

#rightrail{position:fixed;right:0;top:130px;display:flex;flex-direction:column;z-index:20;}
.rail-tab{writing-mode:vertical-rl;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.1em;padding:12px 6px;cursor:pointer;}
.rail-serial{background:#2E9E6B;} .rail-product{background:#D9647A;} .rail-chart{background:#C9A24B;}


@media(max-width:960px){
  #sidebar{display:none;}
  .grid-4,.grid-6{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  #rightrail{display:none;}
  .qa-grid{grid-template-columns:repeat(3,1fr);}
}

/* ===== Phase 1: page engine (list / create / edit) ===== */
textarea{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:4px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;background:#fff;min-height:64px;resize:vertical;}
textarea:focus{outline:2px solid var(--topbar-1);outline-offset:0;}
input[type=color]{padding:2px;height:34px;}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.page-head .view-title{margin-bottom:0;}
.page-head .crumb{margin-bottom:0;}
.page-wrap{display:flex;gap:14px;align-items:flex-start;}
.page-main{flex:1;min-width:0;}
.page-side{width:280px;flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:6px;}
.list-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.list-toolbar select{width:auto;}
.list-toolbar input[type=search]{width:220px;max-width:100%;}
.list-toolbar > div{min-width:0;max-width:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.page-main .panel{min-width:0;max-width:100%;}
.list-toolbar .grow{flex:1;}
.table-scroll{overflow-x:auto;}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap;}
.pager .pbtns{display:flex;gap:4px;}
.pager button{border:1px solid var(--border);background:#fff;border-radius:3px;padding:4px 10px;cursor:pointer;font-size:12px;}
.pager button.on{background:var(--topbar-2);border-color:var(--topbar-2);color:#fff;}
.pager button:disabled{opacity:.45;cursor:default;}
.act-btn{background:var(--topbar-2);color:#fff;border:none;border-radius:3px;padding:5px 8px;cursor:pointer;margin-right:3px;font-size:11px;}
.act-btn:hover{background:var(--navy);}
.act-btn.del{background:#C0392B;}
.act-btn.del:hover{background:#962d22;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;}
.form-grid .full{grid-column:1 / -1;}
.form-grid label{margin-top:8px;}
.form-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--border);vertical-align:middle;margin-right:6px;}
.pill-st{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600;}
.pill-st.on{background:#E7F4EC;color:var(--cr);}
.pill-st.off{background:#FBEBEA;color:var(--dr);}
.soon{border:1px dashed var(--border);background:#fff;border-radius:6px;padding:28px;text-align:center;color:var(--ink-soft);}
.soon b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#16232F;color:#fff;padding:10px 18px;border-radius:5px;font-size:13px;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.2);}
#saveState{font-size:10.5px;color:#CFE6F8;flex-shrink:0;white-space:nowrap;}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:13px;}
.kv dt{color:var(--ink-soft);font-weight:600;font-size:12px;}
.kv dd{margin:0;}
.danger-zone{border:1px solid #F1C4BF;background:#FDF5F4;border-radius:6px;padding:14px;}
@media(max-width:960px){
  .page-wrap{flex-direction:column;align-items:stretch;}
  .page-main{width:100%;}
  .page-side{width:100%;}
  .form-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  #content{padding:14px 16px 40px 16px;}
  #topbar{flex-wrap:wrap;gap:10px;padding:10px 16px;}
  #topbarCalc{display:none;}
}
#dialog{position:fixed;inset:0;background:rgba(10,20,30,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;}
#dialog[hidden]{display:none;}
.dlg-box{background:#fff;border-radius:8px;max-width:440px;width:100%;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.dlg-msg{font-size:14px;line-height:1.5;}
#menuBtn{display:none;background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:4px 6px;}
@media(max-width:960px){
  #menuBtn{display:block;}
  body.nav-open #sidebar{display:flex;position:fixed;left:0;top:0;bottom:0;z-index:150;box-shadow:4px 0 20px rgba(0,0,0,.3);}
  #topbar .tag{display:none;}
}
@media print{
  #sidebar,#topbar,#rightrail,.page-head button,.page-side{display:none!important;}
  #content{padding:0;max-width:none;}
  .panel{border:none;}
}

/* Phase 10: hide actions the signed-in role may not use */
body.no-delete .act-btn.del{display:none!important;}
body.no-edit .act-btn[title="Edit"]{display:none!important;}
body.no-print .page-head .btn:has(.fa-print){display:none!important;}
#logoutBtn[hidden]{display:none;}
#syncBanner{position:fixed;top:66px;left:50%;transform:translateX(-50%);background:#FBF1DE;color:#6b4e12;border:1px solid #E5C77F;border-radius:6px;padding:8px 12px;z-index:120;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;gap:10px;align-items:center;}
#syncBanner[hidden]{display:none;}

/* Phase 12: product panel filters */
.pager-l{border:1px solid var(--border);background:#fff;border-radius:3px;padding:2px 5px;font-size:10.5px;cursor:pointer;min-width:22px;}
.pager-l.on{background:var(--topbar-2);border-color:var(--topbar-2);color:#fff;}
#prodPanelFlyout select{padding:4px 6px;font-size:12px;}