/* 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:inherit;background:var(--bg);color:var(--ink);font-size:13.5px;}
.mono{font-family:inherit;font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}
#shell{display:flex;min-height:calc(100vh / var(--z,1));}

/* ===== 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:calc(32vh / var(--z,1));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:calc(100vh / var(--z,1));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 .5s cubic-bezier(.445,.05,.55,.95);}
.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 .5s cubic-bezier(.445,.05,.55,.95);}
.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:inherit;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:inherit;font-variant-numeric:tabular-nums;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:inherit;font-variant-numeric:tabular-nums;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:none;}
body.qb-ready #content{padding-right:56px;}
@media (max-width:760px){ body.qb-ready #content{padding-right:16px;} }
.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:inherit;font-variant-numeric:tabular-nums;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:inherit;font-variant-numeric:tabular-nums;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:inherit;font-variant-numeric:tabular-nums;}
.tag{display:inline-block;font-size:9.5px;padding:2px 7px;border-radius:20px;font-family:inherit;font-variant-numeric:tabular-nums;}
.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:inherit;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:inherit;font-variant-numeric:tabular-nums;}
.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 6px 6px 0;padding:14px 6px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;color:#333;z-index:5;box-shadow:2px 2px 8px rgba(0,0,0,.08);transition:background .2s;}
#prodPanelTab:hover{background:#f2f7fc;}
#prodPanelTab span{writing-mode:vertical-rl;font-size:13px;letter-spacing:.14em;font-weight:700;}
#prodPanelTab .pp-arrow{width:26px;height:26px;border-radius:50%;background:#2E6F99;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 2px 5px rgba(60,141,188,.45);animation:ppNudge 2.4s ease-in-out infinite;}
#prodPanelTab.open .pp-arrow{animation:none;background:#C23A28;box-shadow:0 2px 5px rgba(221,75,57,.4);}
@keyframes ppNudge{0%,70%,100%{transform:translateX(0)}80%{transform:translateX(3px)}90%{transform:translateX(0)}}

.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:inherit;font-variant-numeric:tabular-nums;font-size:10px;color:var(--link);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(--link);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:inherit;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;max-height:calc(100vh - 32px);overflow:auto;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;}
#idleBanner{position:fixed;top:66px;left:50%;transform:translateX(-50%);background:#FBEBEA;color:#7a1e14;border:1px solid #E7A59D;border-radius:6px;padding:8px 12px;z-index:121;font-size:13px;display:flex;gap:10px;align-items:center;}
#idleBanner[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;}

/* Phase 12f: top search, chat */
#topSearch input{width:210px;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-size:12.5px;}
#topSearch input::placeholder{color:rgba(255,255,255,0.65);}
#chatDrawer{position:fixed;right:44px;bottom:16px;width:340px;max-width:calc(100vw / var(--z,1) - 32px);height:460px;max-height:calc(100vh / var(--z,1) - 100px);background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:130;display:flex;flex-direction:column;}
#chatDrawer[hidden]{display:none;}
.chat-badge{display:inline-block;background:#C0392B;color:#fff;border-radius:10px;padding:1px 5px;font-size:10px;writing-mode:horizontal-tb;margin-top:4px;}
.chat-badge[hidden]{display:none;}
@media(max-width:960px){ #topSearch input{width:140px;} }

/* Quick action bar */
#quickbar{position:fixed;top:78px;right:12px;z-index:30;display:none;align-items:flex-start;}
body.qb-ready #quickbar{display:flex;}
#qbToggle{width:30px;height:30px;border:none;border-radius:4px 0 0 4px;background:var(--topbar-2);color:#fff;cursor:pointer;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.25);}
#quickbar:not(.open) #qbToggle{border-radius:4px;opacity:.9;}
#qbToggle:hover{background:var(--topbar-1);}
#qbPanel{background:#0B2A4A;padding:8px;border-radius:0 6px 6px 6px;box-shadow:0 6px 22px rgba(0,0,0,.3);width:300px;max-width:calc(100vw / var(--z,1) - 58px);
  transform-origin:top left;transition:transform .18s ease,opacity .18s ease;}
#quickbar:not(.open) #qbPanel{transform:scaleX(0);opacity:0;pointer-events:none;width:0;padding:0;}
.qb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.qb-item{background:#fff;border:1px solid #D6DEE7;border-radius:3px;padding:7px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-family:inherit;}
.qb-item:hover{background:#EAF2F9;}
.qb-item:focus-visible{outline:2px solid var(--topbar-1);}
.qb-item .qi{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;}
.qb-item .ql{font-size:10px;color:var(--topbar-2);line-height:1.15;text-align:center;}
.qb-search{display:flex;align-items:center;gap:6px;background:#fff;border-radius:3px;margin-top:5px;padding:0 8px;}
.qb-search i{color:var(--ink-soft);font-size:12px;}
.qb-search input{border:none;padding:6px 2px;font-size:11.5px;width:100%;}
.qb-search input:focus{outline:none;}
@media (max-width:760px){ #quickbar{top:auto;bottom:14px;right:12px;flex-direction:row-reverse;align-items:flex-end;} #qbToggle{width:44px;height:44px;border-radius:50%!important;font-size:17px;} #qbPanel{border-radius:6px;margin-right:6px;transform-origin:bottom right;} }
@media print{ #quickbar{display:none!important;} }

/* ------------------------------------------------------------------
   Text format as on Arctic: Roboto throughout, 13px body text,
   24px page titles, 14px bold uppercase panel titles, bold 13px
   table headers and labels, 12px uppercase buttons.
   ------------------------------------------------------------------ */
body{font-family:'Roboto',sans-serif;font-size:13px;color:#333;line-height:1.43;}
input,select,textarea,button{font-family:inherit;}
.mono,td.num,th.num,.tag,.totals-strip{font-variant-numeric:tabular-nums;}
.nitem{font-size:13px;color:#fff;}
.subitem{font-size:13px;color:#DCE8F4;}
.subsubitem{font-size:12.5px;color:#C4D6E8;}
.brandbox .b1{font-size:18px;}
#topbar .tlogo{font-size:17px;}
.view-title{font-size:24px;font-weight:500;color:#333;line-height:1.1;}
.crumb{font-size:12px;color:#333;}
.panel-head{font-size:14px;font-weight:700;text-transform:uppercase;}
table{font-size:13px;}
th{font-size:13px;font-weight:700;color:#333;text-transform:none;letter-spacing:normal;}
td{color:#333;}
label{font-size:13px;font-weight:700;color:#666;}
input,select{font-size:13px;}
.btn{font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.02em;}
.btn.small{font-size:11px;}
.act-btn{font-size:12px;}
.ribbon-card .val{font-size:clamp(18px,1.9vw,30px);font-weight:700;}
.ribbon-card .lab{font-size:clamp(12px,1.05vw,15px);font-weight:400;text-transform:uppercase;letter-spacing:normal;line-height:1.25;}
body.qb-ready .page-head{padding-right:46px;}
@media (max-width:760px){ body.qb-ready .page-head{padding-right:0;} }
.subhead{font-size:12.5px;color:#333;}
.totals-strip .t-label{font-size:12px;}
.totals-strip .t-val{font-size:14px;}
.note{font-size:12px;}
.empty-state,.notif-empty{font-size:13px;}
.qb-item .ql{font-size:10.5px;}

@media print{ html{zoom:1!important;--z:1!important;} }

/* Arctic-style list pages */
.page-head{align-items:flex-end;}
.ph-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.page-head .crumb{font-size:12px;font-weight:700;color:#333;}
.page-head .crumb a{color:#333;text-decoration:none;}
.page-head .crumb .sep{color:#aaa;font-weight:400;margin:0 3px;}
.search-box{display:flex;align-items:center;border:1px solid var(--border);border-radius:3px;background:#fff;min-width:260px;max-width:100%;}
.search-box i{padding:0 10px;color:#555;border-right:1px solid var(--border);align-self:stretch;display:flex;align-items:center;}
.list-toolbar > div.search-box{flex-wrap:nowrap;gap:0;}
.search-box input{border:none!important;flex:1;min-width:0;width:auto!important;padding:7px 9px;}
.search-box input:focus{outline:none;}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
th.sortable i{font-size:10px;color:#bbb;margin-left:3px;}
th.sortable.sorted i{color:var(--link);}
table tr:first-child th{background:#EEF1F4;}
.no-record{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 10px;color:#666;}
.no-record i{font-size:44px;color:#333;margin-bottom:6px;}
.no-record b{color:#333;font-size:13px;}
.no-record span{font-size:12.5px;}
.list-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 14px;}
.print-ico{width:32px;height:30px;border:none;background:#D2D6DE;color:#444;border-radius:2px;cursor:pointer;}
.print-ico:hover{background:#C1C6CE;}
@media (max-width:760px){ .page-head{align-items:flex-start;} .ph-right{justify-content:flex-start;} .search-box{min-width:0;width:100%;} }

/* Party profile (Arctic: customer / supplier details) */
.party-link{color:var(--link);text-decoration:none;}
.pp-wrap{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start;}
.pp-card{background:#fff;border:1px solid var(--border);padding:6px 6px 14px;}
.pp-avatar{height:210px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:72px;font-weight:700;border:4px solid #EEE;}
.pp-name{text-align:center;font-size:20px;font-weight:500;margin-top:14px;line-height:1.2;}
.pp-code{text-align:center;color:#666;margin:6px 0 10px;}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px;}
.pp-kv{padding:0 12px;} .pp-grid .pp-kv{padding:0;}
.pp-kv b{display:block;font-size:12.5px;} .pp-kv span,.pp-kv a{font-size:12.5px;color:#666;} .pp-kv a{color:var(--link);}
.pp-count{display:flex;justify-content:space-between;align-items:center;background:#EEE;margin:6px 12px 0;padding:10px;font-size:14px;} .pp-count b{font-size:15px;}
.pp-actions{display:flex;gap:6px;justify-content:center;margin-top:12px;}
.pp-main{margin:0;}
.pp-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.pp-tabs button{background:none;border:none;padding:11px 16px;font-size:12.5px;font-weight:500;color:#555;cursor:pointer;position:relative;font-family:inherit;}
.pp-tabs button.on{color:var(--topbar-2);}
.pp-tabs button.on:after{content:'';position:absolute;left:50%;bottom:-1px;margin-left:-7px;border:7px solid transparent;border-bottom-color:var(--topbar-1);}
.pp-body{padding:18px;}
.pp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px;}
.pp-stat{box-shadow:0 2px 8px rgba(0,0,0,.15);background:#fff;}
.pp-stat .v{color:#fff;font-size:24px;padding:22px 10px;text-align:center;font-variant-numeric:tabular-nums;} .pp-stat .v small{font-size:12px;}
.pp-stat .l{text-align:center;font-size:18px;padding:14px 6px;}
.pp-stat.blue .v{background:linear-gradient(135deg,#2F6FD6,#56A0F0);} .pp-stat.blue .l{color:#2F6FD6;}
.pp-stat.green .v{background:linear-gradient(135deg,#14A866,#2CD48A);} .pp-stat.green .l{color:#14A866;}
.pp-stat.lime .v{background:linear-gradient(135deg,#4E9A2F,#8ABF2A);} .pp-stat.lime .l{color:#4E9A2F;}
.pp-timeline{border-left:4px solid #DDD;margin-left:34px;padding-left:0;}
.pp-date{margin:14px 0 8px -38px;} .pp-date span{background:#008548;color:#fff;font-size:10.5px;font-weight:700;padding:3px 6px;border-radius:2px;}
.pp-ev{display:flex;gap:12px;margin:0 0 18px -14px;} .pp-ev > i{color:#888;background:#fff;font-size:18px;margin-top:2px;}
.pp-ev > div{flex:1;} .pp-ev-h{display:flex;justify-content:space-between;border-bottom:1px solid #EEE;padding-bottom:4px;margin-bottom:6px;color:#555;}
.pp-ev-h span{font-size:12px;color:#888;} .pp-ev a{color:var(--link);text-decoration:none;display:block;margin-bottom:6px;}
.pp-ev-t{color:#333;}
@media (max-width:900px){ .pp-wrap{grid-template-columns:1fr;} .pp-cards{grid-template-columns:1fr;} }
.rec-tabs{display:flex;gap:4px;padding:0 14px;border-bottom:1px solid var(--border);}
.rec-tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:9px 16px;font-family:inherit;font-size:13px;color:#333;cursor:pointer;}
.rec-tabs button.on{border-bottom-color:var(--topbar-1);color:var(--link);font-weight:700;}
.side-filter{margin-bottom:14px;}
.side-filter .field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.side-filter input{min-width:0;width:100%;}
/* Dashboard, Arctic layout */
.dash-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:14px;align-items:start;margin-bottom:14px;}
.dash-notes{min-height:320px;}
.dash-filter{gap:6px;align-items:center;}
.dash-filter select,.dash-filter input{width:auto;}
.date-ico{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:3px;background:#fff;}
.date-ico i{padding:0 8px;color:#666;border-right:1px solid var(--border);align-self:stretch;display:flex;align-items:center;}
.date-ico input{border:none!important;}
.dash-cap{font-weight:700;font-size:12.5px;text-align:center;margin-bottom:10px;color:#333;}
.dash-2-5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:18px;}
.dash-bo{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.2fr;gap:16px;align-items:start;}
.bo-line{border-left:5px solid;padding-left:12px;} .bo-v{font-size:18px;font-weight:700;}
.bo-cash td{border:1px solid var(--border);font-size:12px;}
.dash-bi{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:14px;align-items:start;}
.dash-bi-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dash-small{border:1px solid var(--border);background:#fff;}
.dash-small-h{background:#2E6F99;color:#fff;font-weight:700;font-size:12px;text-align:center;padding:8px 6px;line-height:1.35;}
.dash-small-s{background:#F4F4F4;color:#2E6F99;font-weight:700;font-size:12px;padding:5px 8px;}
.dash-small td{font-size:12px;}
@media (max-width:1100px){ .dash-top,.dash-2-5,.dash-bo,.dash-bi{grid-template-columns:1fr;} }
/* Invoice create (Arctic layout) */
.pos-panel .panel-body{padding-top:14px;}
.pos-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.pos-grp{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:2px;background:#fff;min-width:0;}
.pos-grp > input,.pos-grp > select{border:none!important;border-radius:0;min-width:0;}
.pos-grow{flex:1;min-width:0;}
.pos-ico{display:flex;align-items:center;justify-content:center;min-width:34px;color:#666;border-right:1px solid var(--border);font-weight:700;}
.pos-add{border:none;border-left:1px solid var(--border);background:#fff;color:var(--link);padding:0 12px;cursor:pointer;}
.pos-walk{border:none;border-right:1px solid var(--border);background:#fff;color:var(--link);padding:0 14px;cursor:pointer;font-family:inherit;}
.pos-walk.on{background:#EAF2F9;}
.pos-bal{color:#D32F2F;font-weight:700;font-size:16px;white-space:nowrap;} .pos-bal b{color:#1A3FD1;}
.pos-loc{width:auto;max-width:200px;}
.pos-walkin-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;background:#F7F9FB;border:1px dashed var(--border);padding:6px;margin-bottom:10px;}
.cart-table th{background:#C9D3DD!important;color:#333;}
.cart-table td{vertical-align:middle;}
.cart-in{text-align:right;padding:4px 6px!important;}
.cart-info{color:#1A57B8;margin-left:6px;} .cart-x{color:#1A57B8;}
.cart-empty{text-align:center;color:#333;padding:8px!important;background:#F4F4F4;}
.cart-table tr.tot td{background:#F7F7F7;border-top:1px solid #EEE;}
.cart-table tr.tot.sub td{font-size:12px;color:#555;}
.cart-table tr.grand td{background:#EFEFEF;}
.cart-others{color:#333;text-decoration:none;}
.cart-detail td{background:#FAFCFE;}
.cart-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;align-items:end;}
.cart-detail-grid label{margin:0 0 2px;font-size:11.5px;}
.cart-detail-grid textarea{width:100%;font-size:12px;}
.cart-serials{margin-top:10px;} .cart-serials th{background:#C9D3DD!important;}
.pos-2col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start;}
.pos-2col .cart-serials{margin-top:0;}
.pos-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px;flex-wrap:wrap;}
.pos-empty{background:#C23A28!important;border-radius:2px 0 0 2px;} .pos-hold{background:#1A57B8!important;border-radius:0 2px 2px 0;padding:8px 12px;}
.pos-held{width:auto;margin-left:8px;}
.pos-sidetabs{position:absolute;right:-2px;top:48px;display:flex;flex-direction:column;gap:4px;}
.pos-sidetabs button{writing-mode:vertical-rl;border:none;color:#fff;padding:12px 6px;font-size:12px;cursor:pointer;border-radius:3px 0 0 3px;font-family:inherit;}
.pos-sidetabs button:nth-child(1){background:#2E6F99;} .pos-sidetabs button:nth-child(2){background:#9A5C00;} .pos-sidetabs button:nth-child(3){background:#0083A3;}
/* Checkout panel */
.co-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:140;}
.co-panel{position:fixed;top:0;right:0;bottom:0;width:min(1150px,96vw);background:#fff;z-index:141;box-shadow:-6px 0 24px rgba(0,0,0,.25);overflow:auto;height:calc(100vh / var(--z,1));}
.co-close{position:absolute;right:10px;top:8px;background:#C23A28;color:#fff;border:none;width:30px;height:30px;cursor:pointer;z-index:2;}
.co-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;padding:18px;}
.co-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.co-stats div{background:#F4F6F8;border:1px solid var(--border);padding:10px;text-align:center;} .co-stats b{display:block;font-size:22px;color:#1A3FD1;} .co-stats span{font-size:11px;color:#666;font-weight:700;}
.co-tabs{display:flex;gap:4px;margin-bottom:10px;} .co-tabs button{flex:1;border:1px solid var(--border);background:#fff;padding:8px;cursor:pointer;font-family:inherit;} .co-tabs button.on{background:var(--topbar-2);color:#fff;border-color:var(--topbar-2);}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;}
.co-f label{margin:0 0 3px;} .co-f textarea{width:100%;}
.co-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.co-receipt{border:1px solid var(--border);padding:12px;font-size:12.5px;align-self:start;}
.co-r-h{background:#2E6F99;color:#fff;font-weight:700;padding:6px 10px;margin:-12px -12px 10px;}
@media (max-width:900px){ .pos-2col,.co-body,.co-grid{grid-template-columns:1fr;} .co-stats{grid-template-columns:1fr 1fr;} }
/* Finance Record trees (Arctic) */
.fin-title{text-align:center;font-size:20px;font-weight:500;margin:0 0 12px;}
.fin-range{display:flex;justify-content:space-between;padding:0 14px 10px;}
.fin-table th{background:#C9D3DD!important;color:#333;vertical-align:middle;}
.fin-table td{padding:6px 8px;}
.fin-l0 td{background:#E4F4F7;} .fin-l1 td{background:#F2FAFB;}
.fin-tog{display:inline-block;width:12px;color:#777;text-decoration:none;}
.fin-led{color:#333;text-decoration:none;} .fin-led:hover{color:var(--link);}
.fin-total td{background:#FDECEC;}
.fin-sec td{background:#CFCFCF!important;font-weight:700;color:#333;}
.fin-net td{font-size:13.5px;}
.fin-sum td{border-top:1px solid #333;border-bottom:3px double #333;}
.fin-table td.fin-v{color:#7A1FA2;}
.fin-btns{display:flex;justify-content:flex-end;gap:4px;margin-top:22px;}
.stock-table th{background:#C9D3DD!important;color:#333;text-align:center;vertical-align:middle;white-space:nowrap;}
.stock-table td{vertical-align:middle;} .stock-table .st-hi{background:#D8F1F7;}
.st-name{color:#333;font-weight:700;text-transform:uppercase;text-decoration:none;font-size:12px;} .st-name:hover{color:var(--link);}
/* Voucher forms (Arctic) */
.vf-title{text-align:center;font-size:20px;font-weight:500;margin:0 0 10px;}
.vf-top{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-bottom:14px;}
.vf-box{display:flex;border:1px solid var(--border);} .vf-box b{padding:7px 12px;border-right:1px solid var(--border);white-space:nowrap;font-size:14px;} .vf-box input{border:none!important;width:150px;background:#F4F4F4;}
.vf-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px 14px;align-items:end;margin-bottom:14px;}
.vf-grid label{margin:0 0 4px;}
.vf-span2{grid-column:span 2;}
.vf-bal{color:#D32F2F;font-size:20px;padding:4px 0;font-variant-numeric:tabular-nums;}
.vf-sel-add{display:flex;} .vf-sel-add select{flex:1;min-width:0;} .vf-sel-add .pos-add{border:1px solid var(--border);border-left:none;}
.vf-with-btn{display:flex;gap:8px;align-items:flex-end;} .vf-with-btn > div{flex:1;}
.vf-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:16px;}
.vf-row1,.vf-row2{display:flex;gap:4px;}
.jv-table td{min-width:90px;} .jv-table select,.jv-table input{min-width:110px;}
@media (max-width:900px){ .vf-grid{grid-template-columns:1fr 1fr;} .vf-span2{grid-column:span 2;} }
/* Role screen (Arctic) */
.role-top{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:620px;margin:0 auto 18px;}
.role-mods td{padding:4px 8px;font-size:12px;border-bottom:1px solid #EEE;} .role-mods{border:1px solid var(--border);}
.switch{position:relative;display:inline-block;width:34px;height:18px;margin:0;} .switch input{opacity:0;width:0;height:0;}
.switch span{position:absolute;inset:0;background:#CCC;border-radius:18px;cursor:pointer;transition:.15s;} .switch span:before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s;}
.switch input:checked + span{background:#2E9E6B;} .switch input:checked + span:before{transform:translateX(16px);}
.role-mat{margin-bottom:10px;} .role-mat th{background:#C9D3DD!important;color:#333;} .role-mat td{padding:4px 8px;font-size:12.5px;}
@media (max-width:760px){ .role-top{grid-template-columns:1fr;} }
/* Customer enquiry (Arctic) */
.enq-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.enq-head b{padding-bottom:10px;}
.enq-tabs button,.enq-subtabs button{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;font-family:inherit;color:var(--topbar-2);}
.enq-tabs button.on{border-bottom-color:#D32F2F;} .enq-subtabs{border-bottom:1px solid var(--border);} .enq-subtabs button.on{border-bottom-color:var(--topbar-1);font-weight:700;}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
.enq-f{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:10px;} .enq-f label{margin:0;text-align:right;color:#4B5A8A;}
.enq-f input[readonly]{background:#EEE;}
.enq-follow{display:grid;grid-template-columns:260px 1fr;gap:16px;border:1px solid var(--border);padding:16px;}
.enq-acc{margin-bottom:2px;} .enq-acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;background:#13805F;color:#fff;border:none;padding:12px 14px;font-size:15px;text-align:left;cursor:pointer;font-family:inherit;gap:6px;}
.enq-acc-b a{display:block;padding:7px 10px;border-bottom:1px solid #EEE;color:#333;text-decoration:none;font-size:12.5px;} .enq-acc-b a span{display:block;color:#888;font-size:11px;} .enq-acc-b a.on{background:#E4F4F7;}
.enq-filters{align-items:center;gap:8px;} .enq-filters label{margin:0;color:#4B5A8A;} .enq-filters input,.enq-filters select{width:auto;}
@media (max-width:900px){ .enq-grid,.enq-follow{grid-template-columns:1fr;} .enq-f{grid-template-columns:1fr;} .enq-f label{text-align:left;} }

/* ===== Reports (Arctic layout) ===== */
.rep-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;}
.rep-side{padding:14px 12px;margin-bottom:0;}
.rs-list{border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:12px;}
.rs-item{padding:8px 10px 8px 16px;cursor:pointer;color:var(--ink);font-size:13px;border-left:2px solid transparent;}
.rs-item:hover{background:#F4F7FA;}
.rs-item.on{color:#C62828;border-left-color:#C62828;}
.rs-sub{display:flex;align-items:center;gap:6px;margin:4px 0;color:var(--ink);font-size:12.5px;}
.rs-sub::before,.rs-sub::after{content:"";flex:1;border-top:1px solid #C62828;}
.rep-sec .rs-sub{margin:6px 8px;}
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rf{display:flex;flex-direction:column;gap:4px;min-width:0;}
.rf label{font-weight:600;font-size:12.5px;margin:0;}
.rf select,.rf input{width:100%;min-width:0;}
.rf-btns{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:14px;}
.rep-main{min-width:0;}
.rep-tools{display:flex;align-items:center;gap:6px;background:#6E7275;padding:6px 30px;}
.rep-tools button{border:0;width:34px;height:30px;color:#fff;cursor:pointer;font-size:14px;}
.rep-tools .rt-print{background:#26C6DA;}.rep-tools .rt-csv{background:#0277BD;}.rep-tools .rt-pdf{background:#BDBDBD;color:#444;}
.rep-tools select{width:auto;border:1px solid #C62828;height:28px;padding:2px 6px;font-size:12.5px;}
.rep-doc{background:#fff;padding:12px 12px 20px;color:#111;}
.rd-head{display:grid;grid-template-columns:200px 1fr 200px;border-bottom:1px solid #DDD;}
.rd-logo{display:flex;align-items:center;justify-content:center;padding:8px;border-right:3px solid #EEE;}
.rd-co{padding:8px 12px;font-size:12.5px;line-height:1.55;border-right:3px solid #EEE;}
.rd-co b:first-child{display:block;margin-bottom:6px;}
.rd-ref{padding:8px 4px;text-align:right;font-size:12.5px;line-height:1.7;}
.rd-title{text-align:center;font-weight:700;font-size:22px;padding:8px 0 4px;border-bottom:1px solid #DDD;text-transform:uppercase;}
.rd-line{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:15px;padding:6px 0;border-bottom:1px solid #DDD;margin-bottom:14px;}
.rd-line div:nth-child(2){text-align:center;}.rd-line div:nth-child(3){text-align:right;}
.rd-note{margin:-6px 0 10px;}
.rd-foot{text-align:center;font-size:12.5px;margin-top:12px;}
table.rep-table{border-collapse:collapse;width:100%;font-size:12.5px;}
table.rep-table th{background:#0076A8;color:#fff;font-weight:700;text-transform:uppercase;border:1px solid #fff;padding:6px 5px;white-space:nowrap;vertical-align:middle;}
table.rep-table th.grp{text-align:center;}
table.rep-table td{border:1px solid #D8D8D8;padding:5px;vertical-align:middle;}
table.rep-table td.num{text-align:right;white-space:nowrap;}
table.rep-table tr.rep-total td,table.rep-table tr.rep-sub td{font-weight:700;color:#1515C8;}
table.rep-table tr.rep-total td.tl,table.rep-table tr.rep-sub td.tl{text-align:center;}
table.rep-table tr.rep-total td{border-top:2px solid #999;}
table.rep-table tr.rep-foot td{font-weight:700;}
table.rep-table tr.rep-band td{font-weight:700;background:#FAFAFA;}
table.rep-table tr.rep-head td{font-weight:700;background:#EEF4F8;}
table.rep-table td.rep-none{text-align:center;padding:10px;}
@media (max-width:1000px){.rep-wrap{grid-template-columns:1fr;}.rd-head{grid-template-columns:1fr;}.rd-logo,.rd-co{border-right:0;}.rd-ref{text-align:left;}.rep-tools{padding:6px 10px;flex-wrap:wrap;}}
@media print{.rep-doc{padding:0;}table.rep-table th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
table.rep-table thead tr th,table.rep-table thead tr:first-child th{background:#0076A8 !important;color:#fff !important;}
.multi-box{display:flex;flex-wrap:wrap;gap:4px 14px;border:1px solid var(--border);padding:6px 8px;border-radius:3px;background:#fff;}.multi-box label{display:flex;align-items:center;gap:5px;font-weight:400;margin:0;}.multi-box input{width:auto;}
.pay-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px;}@media (max-width:900px){.pay-wrap{grid-template-columns:1fr;}}.btn.danger{background:#E74C3C;border-color:#E74C3C;color:#fff;}
.dm-lock{display:flex;flex-direction:column;align-items:center;margin-top:90px;}
.dm-lock h2{font-weight:400;font-size:34px;margin:0 0 10px;}
.dm-lock-row{display:flex;align-items:center;gap:10px;}
.dm-ava{width:72px;height:72px;border-radius:50%;background:#3E2F1B;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;border:4px solid #fff;box-shadow:0 0 0 1px var(--border);}
.dm-pw{display:flex;background:#fff;border:1px solid var(--border);}
.dm-pw input{border:0;width:200px;}
.dm-pw button{border:0;background:#fff;cursor:pointer;padding:0 10px;color:var(--ink-soft);}
.rd-hl{font-size:13.5px;}.rd-hl span{color:#1E88C9;}
.st-bar{background:#0076A8;color:#fff;text-align:center;padding:4px;font-size:12.5px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.st-party{display:flex;justify-content:space-between;gap:16px;background:#E6F6FD;padding:8px 6px;font-size:12.5px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.st-name{font-size:17px;margin-bottom:6px;}
table.st-sum{width:auto;border-collapse:collapse;}table.st-sum th{text-align:right;padding:2px 4px;}table.st-sum td{padding:2px 4px;font-weight:700;border:0;}
table.rep-table.st-table th{background:#B3E5FC !important;color:#111 !important;}table.rep-table.st-table td{background:#E6F6FD;border-color:#fff;}
.swatch-dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.25);vertical-align:-1px;margin-right:4px;}
.ss-box{position:fixed;z-index:10050;background:#fff;border:1px solid #9BB7D1;box-shadow:0 6px 18px rgba(0,0,0,.18);border-radius:3px;}
.ss-box .ss-q{width:calc(100% - 12px);margin:6px;padding:5px 7px;border:1px solid var(--border);font-size:12.5px;}
.ss-list{max-height:260px;overflow-y:auto;}
.ss-opt{padding:6px 10px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;gap:6px;}
.ss-opt.hi{background:#2E6F99;color:#fff;}.ss-opt.on:not(.hi){background:#E8F1F8;}.ss-opt.dis{color:#aaa;cursor:default;}
.ss-sw{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex-shrink:0;}
.ss-none{padding:8px 10px;color:var(--ink-soft);font-size:12.5px;}
/* Sidebar: like Arctic, the menu can scroll well past its last item. */
#navlist{padding-bottom:calc(45vh / var(--z,1));overscroll-behavior:contain;scrollbar-width:thin;}

/* Arctic (AdminLTE) slides menu groups over 500 ms with 'swing' easing; the arrow turns with it. */
.nitem .car,.subitem i.car2{transition:transform .5s cubic-bezier(.445,.05,.55,.95);}

/* ===== Menu strip (Arctic "sidebar-mini"): ≡ slides the menu to icons, the page widens with it ===== */
@media (min-width:961px){
  #menuBtn{display:block;}
  #sidebar{transition:width .3s ease-in-out,padding-left .3s ease-in-out;}
  #stripe{transition:opacity .2s;}
  body.nav-mini #sidebar{width:50px;padding-left:0;}
  body.nav-mini #stripe{opacity:0;pointer-events:none;}
  body.nav-mini .brandbox{padding:16px 0;text-align:center;}
  body.nav-mini .brandbox .blabel,body.nav-mini .brandbox .b2{display:none;}
  body.nav-mini #navwrap,body.nav-mini #navlist{overflow:visible;}
  body.nav-mini #navlist{padding-bottom:6px;}
  body.nav-mini .ngroup{position:relative;}
  body.nav-mini .nitem{justify-content:center;padding:10px 0;}
  body.nav-mini .nitem .nicon{width:auto;font-size:14px;}
  body.nav-mini .nitem .nlabel,body.nav-mini .nitem .car{display:none;}
  body.nav-mini .subwrap{display:none;}
  /* hover: the name and the group's pages float out to the right, as on Arctic */
  body.nav-mini .ngroup:hover > .nitem{background:#1E3A5F;color:#fff;}
  body.nav-mini .ngroup:hover > .nitem .nlabel{display:flex;align-items:center;position:absolute;left:50px;top:0;height:100%;width:220px;padding:0 14px;background:#1E3A5F;color:#fff;z-index:60;font-weight:600;}
  body.nav-mini .ngroup:hover > .subwrap{display:block;position:absolute;left:50px;top:100%;width:220px;max-height:none!important;overflow:visible;background:var(--navy-2);z-index:60;box-shadow:4px 4px 12px rgba(0,0,0,.3);padding:4px 0;}
  body.nav-mini .ngroup:hover > .subwrap .subsubwrap.open{max-height:none;}
}

/* ===== Phone / small screen: Arctic's push menu =====
   The menu slides in from the left under the header and pushes the page to the right;
   a tap on the page slides it back out and the page returns to full width. */
@media(max-width:960px){
  html,body{overflow-x:hidden;}
  #shell{position:relative;}
  #sidebar,body.nav-open #sidebar{display:flex;position:absolute;left:0;top:var(--tbh,58px);bottom:0;z-index:140;box-shadow:none;
    transform:translateX(-100%);transition:transform .3s ease-in-out;}
  body.nav-open #sidebar{transform:translateX(0);}
  #content{transition:transform .3s ease-in-out;}
  body.nav-open #content{transform:translateX(256px);}
  #navwrap{height:calc(100vh - var(--tbh,58px));}
}
/* Left stripe in Arctic's colours (theme1.css: .arctic) */
#stripe{background:linear-gradient(#bb073f,#1600d0,#bb073f)!important;}
#stripe span{color:#fff;}

/* ===== Arctic colours (theme1.css / custome.css): navy #00305d, sky #00a3e3, button blue #0077B0 ===== */
:root{--navy:#00305d;--navy-2:#00284d;--topbar-1:#00a3e3;--topbar-2:#0077B0;--bg:#F1F1F1;}
body{background:#F1F1F1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKUAAABeBAMAAACwUMkzAAAAElBMVEXv7+/z8/Pt7e3v8PDw8fHx8fH73CdHAAAKwklEQVRYw6yWubLAJgxFxaLea49ZeoztHmPTyyz//yspMpNJkfUlPcwg6XB1YDvfab7AiJu4nO+Y8VLOTe24134yrQLNN5Kp+vMqEJrkgT1CDOLGT4fAjYwDQrrQX9KxWmgAgIVq6Y9srdl3QBtWZ49RWuE+3TxbWN5n7Mq66zzcAVzHnc8M4N2T1Dwce+/hNI0hwwJY9ytG2CRWBNfnIX6G5HzTCNlflru1jcqj8FF4FDFf5SUYNU+Aq9axgcm7/S6bdEwnktdR90/BQwSbZvnOC7eyiquk3jRcQuVzN7y6ptEM7lgMRzy/ynKJXZntnCPidvdBjVyXXF9VBI3zrtEaJgnaIU1Tg578lIhMnGi87mvZRmdxHy1zymBYQEp2nosEJc7FaxZmv6qHQ555mf2dHntTQjtub/kAeBv8KhmxC5/VXr0tux4pTWppyxd1zP7o1vWkBAVZn8m70JMqO6978opqXv3SLRYe5vsEKstKEDm3R3G1D3JLqFcSkuWNb/F5J65cCQCldMbtw+cHIh/lA5daJQ4+dDuJyTTpfVKQHzWf0TrlQe34TuZhvKzZi5AA5nJE31aO1C0kynd4MKOBB7mfrqzG7R1zMpN6QSnsYxsUBYzTzujtq9AeGvW5+HT1Pk362n0zB7CFz48TNGje8hACn5MaxoWsS849Uz23MnqGqDisvLDRsGox5Fg+NSUEOKrCr+hXwOCh49THxasleOxYlRm65MUNsgnFPff08VenMN5/VR3BFQcauoJ+zE2uJaPTOsLQfRiSejlcSa0fxc8pLLw7mjnwKZr8/ulwBzA7XOccAndNv14gbMUg6HaLlEWetPIf8Mxm/Y+hA1hu8YAaDWyIz4ZPb6sFKcgRnvheTspTMKWeZ1MrXZzhlXmNyPi42M7iR+M9z9D5Wa0IxdGWFMwvo/+ZJ/g3P/lbOsfCOgHjZICmGzT1zdZDB+grSpmhg4Ia21MoPtFPXJ5hYl2QGmojdwIN25gyLbiyZdw9kskhHk53vmgpDZZ6hkNXKrazZ2tNU6+QI/z4Oe7imXZRvJ9TUw36LEAewHiEH1zKF4qSPZak/XQUlSEOBurWi186iQjCbE7JXgk6958c/cUlGBVdSBSCwt0jGGG5OisfYvfE+7dLnC64z5UNsooS9dfvSQAdEg4gD4WXzz3n2GuctHDsHDq/gpu5cFBOA7B4v8M59MkYpf3LgKShKijRejkGQuhSOh524uOvXA7wF5zF5Ls7HhPchTrTEtacHHYvW40KlVdrUjzWtzcDlAxbomeT6Ao6f49eXhaJx+bYJHd9I27/oSUeeCXbxXAZwU6XMOLnPTweBluJLluhW22YubQkybjHsHbDcodzmOAWcE1zF++Gr65O1QzzAxGm5V6a3rWMnEP/1pujUI2ZYZX5o2CuNdCbtWBZcNfaK4+qwW4cDsDpmzV0GIBdhxY3bZ3WwQFYjYM41QwAavoULPoWAkgos5jd1CkpbBrjxHdQmaPtSmuir4ICrQqnCCzj5ZrPOaf3hvIo0D3ZBzzxVXvi7h1OS+entcABLI3BPT5difHNMOuQn8yxuc1fGqcS6zjFqXBftwgxzs8dI4cjQjgHtw2mcM69wqEU5A6z9Ex8CVOKbUT6d7UASOdkuFRhbABM53qfQPOg99yH0SYPhINcy7B1hFpgBgRrcYx0VSJcn3W79OBVx1oUhiEV7QAuTaNErqLQZbP8DR9BKvSYgmoYAZq52xyR7dws/WPTawDhg7tvfCXCSzEPxFP8FhT9QviaBy5JlVy4doir58A1Kif/i0YBlCkfwSj8iOJLSP+dV4IfbMq/8YAIv2kO6kmmuJQzhMK1GuJoH9OuMeI9v2hQ8QR0u+Ip+HDz2GPH3b6tPO58IU/3tx9qG7oDqG+Un13nOfARC01Gr3A3d1wlO/KKY1H6HXp2atXUaotrzbK1Lue5XPsEXJcqVul/5wnwh/GfTw5FcNY0WDxzTx6l9uMrYFRX4UXN27nONbgUXkrevme5TtvlJVCRgv815ZxmYY7w/+bxaGAD+DM7/fnYIpCKPEherRNGQ52BuA9Ri+x/avoEB3F/rqDuc5FU/4/tRPADbP5GLwl+J7jHV518i/ILed3zG58rKJ4GJTx8bgwKiQHMNahz5WtnHyf3dViBYaMufBntGNEO8IP+/Z1fwU8pvL/r0M3YLA1/n2xqyvSQL8gV/JNT7nKTe0mGWFCejgnoRFYfvlpk3fMLQglJxj4U1AiQXA/4XDno0qeqHG8xbKJHBHRRCAFGavySmM/KFqq3bz3jdxlpev82beqM6fAwxu0MdDGuXISFacsAdcb9ZItQ0CW1QDxQECZOir9CaSH7wSUoo8LAB2JtEvm1f6Lt9Etr5pJsJwhF0Q1IH73aPyD0iZ++4rV/RJn/VNLIp5JUElPmzQCKz95rHfzMtGvxnLPzEPpUtnLVQupyonSVbjIKhVxEJFgvp2sJqxK8dHjx9SlvpaxbY7vKEn7HN04WrY1wwUqvZDccLjV7cyWjqVijgolq3t40R6mlCG5c0k/piweMdbMGA1Rk4a+tHMQ4Tb86IAthrqV6hSwyOzXjCtZJw7ZX+DQtXQVy2+zKfCC1lG1BXNpsXFtNKzngw17PPgXdjcKeEdWs652pUFcAE2TUwhsZ9H/kKdLHwyG+c8mHBVPEg4fyPlRPdnJC1LtMl8vXpzCmzr5gOIMA+Xqv9mM/ZjyRUnEIIfA5rGTrt5miFE2Uhq/BXHNZGT93XJvz9smkZShN2FAv7VnHkmU6z204I5xXxkaDamspUd+PXTn7X095wVf4WgVVJqrDzjwlc6UwZD2xmGLV+axjt48id28h+BXDqBo9i106V5+8YDz4/LFxEj6CNNa80ymuM3b2WoyB1vaD8TDiQoxRxkSlpU/jHutdTy+9/4fOAR5gy82RMv61rbkzH+7asXlNvCU2URctUz/qYeHuRM8q9J7e+sBNq3piXwCzvtTHdiYD9+GbZzwQh7Osmha6wB0Vc4AczOBC02NvYMkyFhSWwexaMnqrnDtcrA6SjewmWdwrDJu8NGexNG4xyJ7P11IvAzTvegvog6JhEg5+GSTF/Yz0QTxYwaxTlVKVdQ+E+Ik3NQ8onfNLFAqaj3DUmxRbj8JlkJ80L8Ed2JcBPXqtjU++t22jzLW6KZpgrxOjJ4i5nxTgrT/C2yLrXGM4FMZrSuoEMTW5n6q+X2Wu5UxEvcShA7HjizeYuaXLe72aIhMdGJOIgBTB4N7tTNVZ/A7RkCcc2Xm9yOls9ld+O1/1S1HSy1Cab3HJ2Pz60SiHGzv8JP7xW00iS8eCYcquedS2WVvktToTH2dsuvHToS5j2yhb4q1+Dz/7JOABD9xAdMRfSsrYmXmV9QabdPWp3QL7bS5+aTW8TlzT1njD2QxDk7GXGZp7bVaDm872oDdGfLBkKOpNSN7EqDHIT2ls5k/eoSS6BPXmqSlZcJNBD+ou4QEN3Eh8xo3tehKBkDtnaV4u+MBb0kOWOih3VHP2p3hBbrF6IUa7Q9Y7hJOs4y5B19sdKbsy7tFGOjVUuebUV+0A3BSVB2os4kE5vhmLMW749AF5xpvP6AmLMFz46PSIuHGoD24VcNMwHk1t/oj2ygNJGrm/59Jo6E9yagiaTK3fWIdCXZA0sk65IatlE6P6MovCZ7epwLkRMeQ8AAAAAElFTkSuQmCC);}
#topbar{background:linear-gradient(to bottom,#00a3e3 0,#00305d 100%);}
#sidebar{background:#00305d;}
.nitem:hover,.subitem:hover{background:#004280;}
.nitem.active{background:#004280;}
.subwrap,.subsubwrap{background:#00305d;}
.panel-head{background:linear-gradient(to bottom,#00a3e3 0,#0077B0 100%);}
.btn{background:#0077B0;}
.btn:hover{background:#00305d;transition:background-color .5s ease-in;}
.act-btn:hover,.pl-action-btn:hover{background:#00305d;}
/* Arctic-style chart text and legends */
.kchart{width:100%;position:relative;}
.kchart svg{display:block;overflow:visible;}
.kchart .kt{font-size:12px;fill:#666;font-family:inherit;}
.kleg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px;color:#666;margin:8px 0;}
.kleg span{display:inline-flex;align-items:center;gap:6px;}
.kleg i{display:inline-block;width:40px;height:12px;border:2px solid;box-sizing:border-box;}
.kleg.col{flex-direction:column;align-items:flex-start;justify-content:flex-start;}

/* ===== Phone & small screens: KHATA's own responsive layout ===== */
.pos-tabbar{display:none;}
@media(max-width:960px){
  /* nothing may push the page wider than the screen */
  .pay-wrap>*,.rep-wrap>*,.page-wrap>*,.grid>*,.dash-top>*,.vf-grid>*,.dash-bo>*,.dash-bi>*,.dash-2-5>*{min-width:0;}
  .panel{max-width:100%;}
  .panel-body{overflow-x:auto;}
  /* wide tables slide sideways; a faded right edge shows there is more */
  .table-scroll,.panel-body{-webkit-overflow-scrolling:touch;}
  .kmore-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 46px),rgba(0,0,0,.18));mask-image:linear-gradient(to right,#000 calc(100% - 46px),rgba(0,0,0,.18));}
  /* invoice create: Categories / Sub Categories / Brands as a row of buttons above the product search */
  .pos-sidetabs:not(.pos-tabbar){display:none;}
  .pos-tabbar{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
  .pos-tabbar button{writing-mode:horizontal-tb;border-radius:3px;padding:8px 12px;flex:1;}
  /* journal voucher: one field under another */
  .jv-table,.jv-table tbody,.jv-table tr,.jv-table td{display:block;width:100%;}
  .jv-table tr:nth-child(-n+2){display:none;}
  .jv-table tr{border:1px solid var(--border);border-radius:6px;margin-bottom:10px;padding:6px 8px;background:#fff;}
  .jv-table td{border:0!important;padding:4px 0!important;text-align:left!important;display:flex;align-items:center;gap:10px;}
  .jv-table td>*{flex:1;min-width:0;}
  .jv-table td::before{flex:0 0 118px;font-size:12px;font-weight:600;color:var(--ink-soft);}
  .jv-table tr:nth-child(n+3) td:nth-child(1)::before{content:'SN';}
  .jv-table tr:nth-child(n+3) td:nth-child(2)::before{content:'Debit Sub-Group';}
  .jv-table tr:nth-child(n+3) td:nth-child(3)::before{content:'Debit Ledger';}
  .jv-table tr:nth-child(n+3) td:nth-child(4)::before{content:'Amount';}
  .jv-table tr:nth-child(n+3) td:nth-child(5)::before{content:'Credit Ledger';}
  .jv-table tr:nth-child(n+3) td:nth-child(6)::before{content:'Credit Sub-Group';}
  .jv-table tr:nth-child(n+3) td:nth-child(7)::before{content:'Cheque No';}
  .jv-table tr:nth-child(n+3) td:nth-child(8)::before{content:'Cheque Date';}
  .jv-table tr:nth-child(n+3) td:nth-child(9)::before{content:'Ref.';}
  .jv-table tr:nth-child(n+3) td:nth-child(10)::before{content:'';}
  .jv-table td.cart-empty::before{content:none!important;}
  .jv-table td:empty{display:none;}
  /* report pages: the list of reports becomes one drop-down */
  .rs-list{display:none;}
  .rs-mobile{display:block!important;margin-bottom:12px;}
  .rep-tools select{max-width:46%;}
  /* dashboard ribbons stay inside their card */
  .ribbon-card{overflow:hidden;}
}
.rs-mobile{display:none;}
@media(max-width:420px){
  #content{padding:12px 10px 40px 10px;}
  .page-head .view-title{font-size:20px;}
  .jv-table td::before{flex-basis:100px;}
}
@media(max-width:960px){.pbtns{flex-wrap:wrap;}.pbtns>*{flex:1 1 auto;}}
@media(max-width:960px){.jv-table tr:nth-child(3) td:nth-child(1){display:none;}}
@media(max-width:600px){.pos-row{flex-wrap:wrap;}.pos-row>.pos-grp{flex:1 1 100%;min-width:0;}.pos-row>.pos-grp select{min-width:0!important;}}
@media(max-width:960px){.ss-box .ss-list{max-height:52vh;}.ss-opt{padding:10px 12px;font-size:14px;}.ss-box .ss-q{font-size:16px;padding:8px;}}
select.ss-touch{pointer-events:none;}
#buildBar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:10060;background:#00305d;color:#fff;padding:10px 12px 10px 16px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px;font-size:13.5px;max-width:calc(100vw - 20px);}
#buildBar button{background:#00a3e3;color:#fff;border:0;border-radius:4px;padding:6px 12px;font-weight:600;cursor:pointer;}
#buildBar .bb-x{background:transparent;font-size:18px;padding:0 4px;}
/* phone: the search list is a sheet near the top of the screen, so the keyboard never hides or closes it */
.ss-back{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10049;}
.ss-box.ss-sheet{left:10px;right:10px;top:10px;width:auto;border-radius:8px;display:flex;flex-direction:column;max-height:calc(100% - 20px);}
.ss-sheet .ss-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0;font-size:15px;}
.ss-sheet .ss-x{border:0;background:none;font-size:26px;line-height:1;color:#666;padding:0 4px;cursor:pointer;}
.ss-sheet .ss-q{font-size:16px;padding:9px;margin:8px 10px;width:calc(100% - 20px);}
.ss-sheet .ss-list{max-height:none;flex:1;overflow-y:auto;padding-bottom:6px;}
.ss-sheet .ss-opt{padding:11px 14px;font-size:15px;border-top:1px solid #F0F0F0;}
/* ===== Scrolling notice board (under the header) ===== */
#noticeBar{display:flex;align-items:stretch;background:#FFF8DC;border-bottom:1px solid #E8D9A0;height:32px;overflow:hidden;font-size:13.5px;}
#noticeBar[hidden]{display:none;}
#noticeBar .nb-label{flex-shrink:0;display:flex;align-items:center;gap:6px;background:#D32F2F;color:#fff;font-weight:700;padding:0 12px;letter-spacing:.04em;font-size:12px;}
#noticeBar .nb-track{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;}
#noticeBar .nb-text{display:inline-block;white-space:nowrap;padding-left:100%;color:#00305d;font-weight:600;animation:nbScroll 30s linear infinite;}
#noticeBar .nb-track:hover .nb-text{animation-play-state:paused;}
@keyframes nbScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){#noticeBar .nb-text{animation-duration:60s!important;}}
@media print{#noticeBar{display:none!important;}}
/* Notice board matched to the blue header */
#noticeBar{background:linear-gradient(90deg,#00305d,#0077B0);border-bottom:0;}
#noticeBar .nb-label{background:#FFC107;color:#00305d;}
#noticeBar .nb-text{color:#fff;}

/* ===== Arctic print views (invoice, voucher, order, estimate) ===== */
.ad-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--border);}
.ad-list{border-right:1px solid var(--border);max-height:calc(100vh / var(--z,1) - 140px);overflow-y:auto;}
.ad-li{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid #F0F0F0;font-size:12.5px;color:#333;border-left:3px solid transparent;}
.ad-li b{display:block;font-weight:500;color:#222;}.ad-li small{color:#1E88C9;font-weight:600;}
.ad-li:hover{background:#F5F8FB;}.ad-li.on{background:#EEF2F7;border-left-color:#C62828;}
.ad-main{min-width:0;}
.ad-tools{margin:0;}
.ad-paper{background:#dfdfdf;padding:10px;overflow-x:auto;}
.adoc{background:#fff;color:#555;font-family:Roboto,Arial,sans-serif;width:21cm;max-width:100%;min-height:29.6cm;padding:.5cm;margin:0 auto;border:1px solid #D3D3D3;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.1);position:relative;font-size:12px;box-sizing:border-box;}
.adoc.landscape{width:29.7cm;min-height:20.9cm;}.adoc.A5{width:14.85cm;min-height:20.9cm;}.adoc.A5.landscape{width:21cm;min-height:14.75cm;}
.adoc.Letter{width:21.6cm;min-height:27.8cm;}.adoc.Letter.landscape{width:27.9cm;min-height:21.5cm;}.adoc.Legal{width:21.6cm;min-height:35.5cm;}.adoc.Legal.landscape{width:35.6cm;min-height:21.5cm;}
.ad-head{display:grid;grid-template-columns:25% 41.66% 33.34%;}
.ad-logo{height:120px;display:flex;align-items:center;justify-content:center;padding:0 10px;}
.ad-logo img{max-width:100%;max-height:110px;}
.ad-info{border-left:3px solid #dfdfdf;padding:10px;min-height:120px;}
.ad-info h4{margin:0 0 4px;font-size:14px;color:#111;font-weight:700;}
.ad-info p{margin:0;font-size:12px;line-height:1.5;color:#333;}.ad-info b{color:#111;}
.ad-inv{border-left:3px solid #dfdfdf;padding:10px;text-align:right;min-height:120px;font-size:12px;line-height:1.6;color:#333;}
.ad-inv b{color:#111;}
.ad-barcode{width:100%;max-width:220px;display:block;margin:0 0 6px auto;fill:#000;}
.adoc hr{border:0;border-top:1px solid #dfdfdf;margin:10px 0;}
.ad-title{text-align:center;font-size:18px;font-weight:700;color:#3785B1;margin:6px 0 10px;letter-spacing:.02em;}
.ad-party{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:14px;}
.ad-party h4{margin:0 0 6px;font-size:14px;color:#222;}.ad-party p{margin:0 0 4px;font-size:12px;color:#333;}.ad-party .ad-pname{font-size:15px;color:#222;}
.ad-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:6px;color:#222;}
.ad-table thead th{border:1px solid #ddd;border-top:2px solid #C62828;border-bottom:2px solid #444;padding:5px 4px;text-align:center;font-weight:700;background:#fff;color:#222!important;}
.ad-table td{border:1px solid #ddd;padding:5px 8px;vertical-align:top;}
.ad-table tbody tr:nth-child(odd)>td{background:#f9f9f9;}
.ad-table td.c{text-align:center;}.ad-table td.r{text-align:right;white-space:nowrap;}
.ad-table .ad-extra{font-size:11px;color:#444;}.ad-code{color:#888;font-size:11px;}
.ad-table tr.ad-sum td{background:#fff!important;font-weight:600;}
.ad-words{margin:8px 0;font-size:12px;color:#222;}.ad-words span{text-transform:uppercase;}
.ad-line{margin:4px 0;font-size:12px;color:#222;padding:4px 6px;border:1px solid #eee;}
.ad-terms{margin-top:14px;font-size:11.5px;color:#333;}.ad-terms p{margin:4px 0 0;white-space:pre-wrap;}
.ad-bottom{display:grid;grid-template-columns:1fr 2fr;align-items:end;gap:10px;margin-top:40px;}
.ad-qr svg{width:90px;height:90px;}
.ad-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ad-sign span,.ad-sign4 span{display:block;border-bottom:1px solid #666;height:40px;}
.ad-sign p,.ad-sign4 p{text-align:center;margin:4px 0 0;font-size:12px;color:#333;}
.ad-sign4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px;}
.ad-sign4 span{border-bottom:1px dashed #888;}
.ad-foot{position:absolute;left:.5cm;right:.5cm;bottom:14px;text-align:center;font-size:10px;color:#333;}
.ad-foot p{margin:-4px 0 0;}
.ad-printonly{display:none;}
@media print{
  .ad-printonly{display:block;}
  .adoc{border:0;box-shadow:none;border-radius:0;width:auto!important;max-width:none;min-height:calc(100vh - 2px);margin:0;padding:0;}
  .ad-foot{left:0;right:0;bottom:0;}
  .ad-table tbody tr:nth-child(odd)>td{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
@media(max-width:960px){
  .ad-wrap{grid-template-columns:1fr;border:0;background:transparent;}
  .ad-list{display:none;}
  .ad-paper{padding:6px 0;}
  .adoc{min-height:0;padding:10px;}
  .ad-head{grid-template-columns:1fr 1fr;}.ad-logo{height:80px;}.ad-info{grid-column:1/-1;order:3;border-left:0;min-height:0;padding:6px 0;}
  .ad-inv{min-height:0;}.ad-foot{position:static;margin-top:20px;}
  .ad-party{grid-template-columns:1fr;gap:6px;}.ad-sign4{grid-template-columns:1fr 1fr;}
}
.ad-table thead th{background:#fff!important;}.ad-logo img{width:auto;max-width:100%;height:auto;max-height:110px;object-fit:contain;}   /* never stretched past its own size (a small logo stays sharp) */
@media(max-width:960px){.adoc{overflow-x:auto;}.ad-table{min-width:520px;}}
.rep-tools .rt-close{background:#C23A28;color:#fff;margin-left:6px;}.rep-tools .rt-close:hover{background:#C23321;}
@media(max-width:960px){.ad-tools>span{display:none;}.ad-tools .rt-close{order:4;margin-left:auto;}.ad-tools select{order:5;flex:1 1 40%;max-width:none;}}
.ph-close{background:#C23A28;color:#fff;border:0;border-radius:3px;width:34px;height:30px;font-size:15px;cursor:pointer;flex-shrink:0;}.ph-close:hover{background:#C23321;}

/* Arctic record tables (custome.css: table-bordered table-striped, thead #c7d2dc, 4px cells, Roboto 13px #333) */
table.arc-table{border-collapse:collapse;width:100%;border:1px solid #9b98ad;font-family:'Roboto',sans-serif;font-size:13px;color:#333;line-height:1.42857;}
table.arc-table th{background:#c7d2dc!important;color:#333;font-weight:700;font-size:13px;text-transform:none;letter-spacing:normal;border:1px solid #babebf;padding:8px 4px;vertical-align:middle;}
table.arc-table td{border:1px solid #e8e6e6;border-bottom:0;padding:4px;vertical-align:middle;color:#333;}
table.arc-table tr:nth-child(even) td{background:#f7f7f7;}
table.arc-table tr:nth-child(odd) td{background:#f5f1f4;}
table.arc-table tr:hover td{background:#eee;}
table.arc-table tr:last-child td{border-bottom:1px solid #e8e6e6;}
table.arc-table .c{text-align:center;}
table.arc-table th.sortable i{color:#6E6E6E;opacity:.6;}
table.arc-table .amopay{color:#C00000;font-weight:500;}
table.arc-table .amorec{color:darkgreen;font-weight:500;}
table.arc-table a.doc-no{color:#333;font-weight:400;text-decoration:none;}
table.arc-table a.doc-no.edited{color:blue;}
table.arc-table a.doc-no:hover{text-decoration:underline;}
table.arc-table .act-btn{background:#0077B0;color:#fff;border:0;border-radius:0;padding:2px 5px;min-width:22px;height:22px;font-size:12px;line-height:18px;margin:3px;display:inline-flex;align-items:center;justify-content:center;}
table.arc-table .act-btn:hover{background:#00305d;color:#fff;}
table.arc-table .act-btn.del{background:#0077B0;}
table.arc-table .act-btn.del:hover{background:#00305d;}
/* Arctic list actions: two buttons a row (eye, edit / return, delete) */
.row-acts{ display:flex; flex-wrap:wrap; justify-content:center; max-width:60px; margin:0 auto; }
.row-acts .note{ flex-basis:100%; }
.pcard .pc-n{ cursor:pointer; }
.pcard .pc-i{ color:orangered; }
.edit-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#FFF8E1; border:1px solid #FFC107; color:#6d4c00; border-radius:4px; padding:8px 12px; margin:8px 0; }
.edit-bar .btn{ margin-left:auto; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .edit-bar{ background:#3a2f0b; color:#ffe08a; } }
:root[data-theme="dark"] .edit-bar{ background:#3a2f0b; color:#ffe08a; }

/* Links made from plain numbers / names in tables, and breadcrumb links */
a.autolink{color:#0073b7;text-decoration:none;cursor:pointer;}
a.autolink:hover{text-decoration:underline;}
.crumb a{cursor:pointer;}
.rep-tools .rt-edit{background:#0077B0;color:#fff;}.rep-tools .rt-del{background:#C23A28;color:#fff;}
.chg-row{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-bottom:1px solid #eee;cursor:pointer;}
.chg-row:last-of-type{border-bottom:0;}
.chg-row i{margin-top:3px;width:16px;text-align:center;}
.chg-row a{color:#0073b7;text-decoration:none;font-size:12.5px;}
.chg-row:hover{background:#f5f7fa;}
.dash-left{min-width:0;}
/* Sales cart: Arctic product card and ⓘ box */
.pcard-box{position:relative;margin:4px 0 10px;border-top:1px solid #eee;}
.pcard-x{background:#C23A28;color:#fff;border:0;width:40px;height:38px;font-size:16px;cursor:pointer;margin-bottom:4px;}
.pcard-t,.pcard-p{width:100%;border-collapse:collapse;font-size:14px;}
.pcard-t th,.pcard-t td{border-bottom:1px solid #eee;padding:8px 6px;text-align:left;vertical-align:top;}
.pcard-t th{width:34%;color:#555;font-weight:700;}
.pcard-p th,.pcard-p td{padding:6px;text-align:left;border-bottom:1px solid #eee;}
.pcard-p th{color:#555;}
.cinfo{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#e8e6e8;padding:8px;border-radius:2px;}
.cinfo table{width:100%;border-collapse:collapse;font-size:13px;}
.cinfo th,.cinfo td{padding:6px 8px;border-bottom:1px solid #d6d4d6;text-align:left;}
.cinfo th{font-weight:700;color:#555;}
.cinfo td.num,.cinfo th.num{text-align:right;}
@media (max-width:600px){ .cinfo{grid-template-columns:1fr;} }
.pcard-t th,.pcard-p th,.cinfo th{background:transparent!important;}
.cinfo{background:#e8e6e8;}
@media (max-width:600px){
  .cart-table{font-size:12.5px;}
  .cart-table th,.cart-table td{padding:6px 3px;}
  .cart-table input.cart-in{width:46px!important;padding:4px 3px;}
  .cart-table td:nth-child(4) input.cart-in{width:60px!important;}
  .cart-table tr.tot input.cart-in{width:64px!important;}
  .cart-table .cart-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* notifications: bell, list, new-order pop-up, menu number */
#bellTop{ position:relative; cursor:pointer; font-size:17px; opacity:.95; }
#bellTop .bell-n{ position:absolute; top:-8px; right:-10px; background:#C23A28; color:#fff; font-size:10px; min-width:17px; height:17px; line-height:17px; text-align:center; border-radius:9px; padding:0 4px; font-family:Roboto,sans-serif; }
#bellBox{ position:fixed; top:64px; right:12px; width:330px; max-width:calc(100vw - 24px); background:#fff; border-radius:6px; box-shadow:0 8px 28px rgba(0,0,0,.25); z-index:1200; overflow:hidden; font-size:13px; color:#333; }
#bellBox .bell-h{ background:linear-gradient(180deg,#00a3e3,#0077B0); color:#fff; font-weight:700; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; }
#bellBox .bell-h button{ background:none; border:0; color:#fff; font-size:20px; cursor:pointer; line-height:1; }
#bellBox .bell-i{ display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-bottom:1px solid #eee; cursor:pointer; }
#bellBox .bell-i:hover{ background:#f3f7fa; }
#bellBox .bell-i i{ margin-top:2px; width:16px; text-align:center; }
#bellBox .bell-i span{ flex:1; }
#bellBox .bell-dot{ width:8px; height:8px; border-radius:50%; background:#C23A28; margin-top:5px; }
#bellBox .bell-none{ text-align:center; color:#888; padding:22px 0; }
#ooPop{ position:fixed; right:16px; bottom:16px; z-index:1300; display:flex; flex-direction:column; gap:8px; max-width:calc(100vw - 32px); }
.oo-pop{ background:#fff; border-left:5px solid #0077B0; border-radius:6px; box-shadow:0 8px 28px rgba(0,0,0,.28); padding:12px 34px 12px 12px; display:flex; gap:10px; cursor:pointer; position:relative; width:320px; max-width:100%; font-size:13px; color:#333; animation:ooIn .35s ease; }
.oo-pop > i{ font-size:22px; color:#0077B0; margin-top:2px; }
.oo-pop small{ color:#888; }
.oo-pop button{ position:absolute; top:4px; right:6px; background:none; border:0; font-size:18px; color:#6E6E6E; cursor:pointer; }
@keyframes ooIn{ from{ transform:translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }
.nav-badge{ display:inline-block; background:#C23A28; color:#fff; font-size:10.5px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 5px; margin-left:6px; font-weight:700; vertical-align:middle; }

#bellBox .bell-x{ background:none; border:0; color:#aaa; cursor:pointer; padding:2px 4px; font-size:13px; border-radius:3px; }
#bellBox .bell-x:hover{ color:#C23A28; background:#fde8e8; }
#bellBox .bell-clear{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:3px; padding:3px 8px; font-size:11.5px; cursor:pointer; font-weight:500; }
#bellBox .bell-foot{ text-align:center; padding:8px; font-size:12px; background:#fafbfc; }

#bellBox .bell-o{ padding:10px 12px; border-bottom:1px solid #eee; background:#f4f9fd; font-size:12.5px; }
#bellBox .bell-o small{ color:#666; }
.oo-acts{ display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.oo-b{ border:0; border-radius:3px; padding:5px 9px; font-size:11.5px; font-weight:500; cursor:pointer; color:#fff; font-family:inherit; }
.oo-b.ok{ background:#008548; } .oo-b.inv{ background:#0077B0; } .oo-b.no{ background:#C23A28; }
.oo-b:hover{ filter:brightness(.9); }
#bellBox .bell-h button.bell-clear{ font-size:11.5px; line-height:1.3; padding:3px 8px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); border-radius:3px; }

/* support tickets (staff) */
.tk-thread{ display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow-y:auto; padding:6px 2px 12px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.tk-msg{ max-width:80%; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.45; }
.tk-msg.cu{ align-self:flex-start; background:#f1f3f6; border-bottom-left-radius:3px; }
.tk-msg.us{ align-self:flex-end; background:#dff0fb; border-bottom-right-radius:3px; }
.tk-msg.sys{ align-self:center; background:none; color:#888; font-size:12px; font-style:italic; padding:0; }
.tk-msg .mh{ font-size:11.5px; color:#777; margin-bottom:3px; font-weight:500; }
.tk-msg .mimgs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.tk-msg .mimgs img{ width:96px; height:96px; object-fit:cover; border-radius:5px; border:1px solid #ddd; }
/* top bar: the search box gives way first, so the icons on the right always fit */
#topSearch{ flex:0 1 210px; min-width:90px; }
#topSearch input{ width:100%; min-width:0; }
@media (min-width:961px) and (max-width:1500px){ #topbar{ gap:12px; } #calcExprInput{ width:90px; } }

@media (max-width:600px){ .cart-table.sv-cart td input.cart-in{ width:40px!important; padding:4px 2px; } .cart-table.sv-cart td:nth-child(5) input.cart-in{ width:54px!important; }
  .cart-table.sv-cart th, .cart-table.sv-cart td{ padding:6px 2px; } }
/* Sales exchange (⇄) */
.ex-row .pos-grp{flex:1 1 0;min-width:180px;}
.ex-btn{color:#17803A!important;}
.ex-pick{border:1px solid var(--border);border-radius:4px;margin:0 0 10px;background:var(--panel,#fff);}
.ex-pick-h{display:flex;gap:6px;align-items:center;padding:6px 10px;background:#eef3ee;border-bottom:1px solid var(--border);}
.ex-pick td .btn{margin:1px 2px;}
.ex-table th{background:#d6ead9!important;}
/* Attendance */
.att-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin-bottom:10px;border:1px solid #cfe0ef;background:#eef6fc;border-radius:4px;}
.att-bar>span{flex:1;min-width:220px;}
.att-pill{display:inline-block;padding:1px 8px;border-radius:10px;border:1px solid var(--border);font-size:11.5px;font-weight:500;white-space:nowrap;}
.att-stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px;}
.att-stats>div{display:flex;gap:6px;align-items:center;border:1px solid var(--border);border-radius:4px;padding:5px 10px;background:#fff;}
.att-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:4px;}
.att-cal-d{border:1px solid var(--border);border-radius:3px;padding:4px 6px;font-size:11.5px;display:flex;flex-direction:column;gap:2px;background:#fff;}
.att-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#bbb;margin-right:5px;}
.att-dot.on{background:#17803A;}
.att-wait{margin-top:12px;padding:10px 12px;border:1px dashed #946000;background:#fff8ec;border-radius:4px;display:flex;flex-direction:column;gap:6px;}
.att-guide ol{margin:0 0 8px 18px;padding:0;line-height:1.9;}
.att-modal{position:fixed;z-index:1001;left:50%;top:12%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));background:#fff;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.att-conn{margin:10px 0;padding:10px 12px;border:1px solid #cfe0ef;background:#f3f8fc;border-radius:4px;}
.att-conn ol{margin:6px 0 6px 18px;padding:0;line-height:1.8;}
.att-prog{margin-bottom:14px;} .att-prog-bar{height:8px;background:#e6ebf0;border-radius:4px;margin-top:6px;overflow:hidden;} .att-prog-bar span{display:block;height:100%;background:#17803A;}
.att-step{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border);}
.att-step-n{flex:0 0 28px;height:28px;border-radius:50%;background:#e6ebf0;color:#555;display:flex;align-items:center;justify-content:center;font-weight:700;}
.att-step.done .att-step-n{background:#17803A;color:#fff;}
.att-step-b{flex:1;min-width:0;} .att-step-b>div{margin-top:3px;color:#555;}
.att-ways{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.att-match{margin-top:10px;border:1px solid var(--border);border-radius:4px;padding:8px;background:#fafbfc;}
@media(max-width:600px){.att-step{flex-wrap:wrap;} .att-step>div:last-child{margin-left:40px;}}
/* Getting Started + Import */
.gs-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:360px;}
.imp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:12px;}
.imp-steps>div{border:1px solid var(--border);border-radius:4px;padding:10px;background:#fafbfc;line-height:1.7;}
.imp-steps b:first-child{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--topbar-1);color:#fff;align-items:center;justify-content:center;margin-right:4px;}
.imp-sum{margin:8px 0;} .imp-err{margin:6px 0;padding:8px 10px;border:1px solid #f1c0c0;background:#fdf2f2;border-radius:4px;color:#a33;max-height:220px;overflow:auto;}
.imp-done{margin:8px 0;padding:10px 12px;border:1px solid #bfe3c8;background:#f0faf2;border-radius:4px;}
tr.imp-bad td{background:#fdf2f2;}
.imp-btn{margin-right:auto;}
@media(max-width:600px){.gs-btns{justify-content:flex-start;margin-left:40px;}}
/* Mobile attendance */
.mob-map{height:340px;border:1px solid var(--border);border-radius:6px;margin-top:10px;background:#eef2f5;} .mob-map.tall{height:480px;}
.mob-link{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.mob-apr{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border);} .mob-apr:first-child{border-top:0;}
.mob-apr img,.mob-noimg{width:58px;height:58px;border-radius:8px;object-fit:cover;flex:0 0 58px;} .mob-noimg{display:flex;align-items:center;justify-content:center;background:#eef2f5;color:#99a;font-size:22px;}
.mob-apr-b{flex:1;min-width:0;} .mob-apr-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.mob-thumb{width:38px;height:38px;border-radius:6px;object-fit:cover;}
@media(max-width:600px){.mob-apr{flex-wrap:wrap;} .mob-apr-a{width:100%;justify-content:flex-start;}}
/* Modules + System Health */
.mod-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--border);} .mod-row:first-of-type{border-top:0;}
.mod-ic{flex:0 0 42px;height:42px;border-radius:10px;background:#eef4fb;color:var(--link);display:flex;align-items:center;justify-content:center;font-size:18px;}
.mod-b{flex:1;min-width:0;}
.mod-sw{position:relative;width:50px;height:28px;flex:0 0 50px;margin:0;cursor:pointer;} .mod-sw input{opacity:0;width:0;height:0;position:absolute;}
.mod-sw span{position:absolute;inset:0;border-radius:14px;background:#c9d1da;transition:.2s;} .mod-sw span:before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s;}
.mod-sw input:checked+span{background:#17803A;} .mod-sw input:checked+span:before{transform:translateX(22px);} .mod-sw input:disabled+span{opacity:.5;}
.sys-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px;} .sys-cards .panel{margin:0;}
.sys-k{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;} .sys-v{font-size:20px;font-weight:700;margin:4px 0 8px;}
.sys-bar{height:8px;background:#e6ebf0;border-radius:4px;overflow:hidden;} .sys-bar.thin{height:6px;} .sys-bar span{display:block;height:100%;}
/* Location Tracking Report (map + timeline) */
.trk-list tr.on td{background:#f1ecfb;} .trk-list tr:hover td{background:#f7f4fc;}
.trk-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:14px;margin-top:12px;align-items:start;}
@media(max-width:900px){.trk-grid{grid-template-columns:1fr;}}
.trk-mapwrap{position:relative;} .trk-mapwrap .mob-map{margin-top:0;height:560px;border-radius:14px;}
.trk-head{position:absolute;top:10px;left:10px;right:10px;z-index:500;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 12px;box-shadow:0 4px 16px rgba(20,20,60,.15);font-size:15px;}
.trk-head b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .trk-head label{display:flex;gap:6px;align-items:center;margin:0;color:#556;font-weight:500;white-space:nowrap;} .trk-head input{width:auto;accent-color:#6d28d9;}
.trk-av{width:34px;height:34px;border-radius:50%;background:#efeaf8;color:#6d28d9;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 34px;}
.trk-legend{position:absolute;left:10px;bottom:22px;z-index:500;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 4px 16px rgba(20,20,60,.15);font-weight:600;font-size:13px;line-height:1.9;}
.trk-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;}
.trk-pin{width:26px;height:34px;position:relative;} .trk-pin:before{content:'';position:absolute;left:1px;top:0;width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);box-shadow:0 1px 4px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.15);}
.trk-pin:after{content:'';position:absolute;left:9px;top:8px;width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.28);}
.trk-stop{width:28px;height:28px;border-radius:50%;background:#f08c00;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.trk-tag{display:inline-block;color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.3);white-space:nowrap;}
.trk-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;} .trk-sum div{background:#f6f3fb;border-radius:10px;padding:8px 2px;} .trk-sum b{display:block;font-size:15px;} .trk-sum span{font-size:11px;color:var(--ink-soft);}
.tl{position:relative;margin:4px 0 10px;} .tl:before{content:'';position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:#e4def0;}
.tl-row{display:flex;gap:12px;align-items:flex-start;padding:7px 0;position:relative;}
.tl-ic{flex:0 0 32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;position:relative;z-index:1;border:3px solid #fff;}
.tl-ic.punch{background:#6d28d9;} .tl-ic.stop{background:#f08c00;} .tl-ic.move{background:#4f7de0;font-size:12px;}
.tl-ic.visit{background:#12a150;font-size:12px;} .tl-ic.stop.home{background:#d7263d;}
/* Duty Summary */
.dt-legend{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);} .dt-legend span{display:inline-block;width:12px;height:12px;border-radius:3px;margin-left:8px;}
.dt-split{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#eef1f5;min-width:140px;}
:is(.dt-split,.dt-legend) .workplace{background:#1676c7;} :is(.dt-split,.dt-legend) .customer{background:#12a150;} :is(.dt-split,.dt-legend) .moving{background:#9fb6e8;} :is(.dt-split,.dt-legend) .other{background:#f0a73a;} :is(.dt-split,.dt-legend) .home{background:#d7263d;}
.dt-flags{display:flex;flex-direction:column;gap:6px;} .dt-flag{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;} .dt-flag div{flex:1;min-width:0;}
.dt-flag.bad{background:#fdecee;color:#8f1d2a;} .dt-flag.warn{background:#fff6e5;color:#7a4e00;}
.dt-days{background:#fafbfd;padding:10px!important;} .dt-days table td,.dt-days table th{font-size:12.5px;}
.dt-place{display:inline-block;padding:2px 8px;border-radius:10px;background:#fff3e0;margin:2px 0;font-size:12px;} .dt-place small{color:#886;}
.dt-place.workplace{background:#e3effa;color:#0d4f8a;} .dt-place.customer{background:#e2f5ea;color:#0b6a35;} .dt-place.home{background:#fde3e6;color:#9b1c2c;}
.dt-arrow{color:#aab;margin:0 5px;font-size:11px;}
.dt-mini{font-size:12px;border-radius:6px;padding:1px 6px;margin:1px 0;} .dt-mini.bad{background:#fdecee;color:#8f1d2a;} .dt-mini.warn{background:#fff6e5;color:#7a4e00;}
/* Customer visits */
.mob-key{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#fafbfd;margin:10px 0;}
.vr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;}
.vr-card{border:1px solid var(--border);border-radius:8px;padding:12px;background:#fff;} .vr-h{display:flex;justify-content:space-between;gap:8px;} .vr-h span{color:var(--ink-soft);font-size:12.5px;white-space:nowrap;}
.vr-dev{display:flex;flex-direction:column;gap:2px;font-size:13px;} .vr-dev b{color:var(--ink-soft);font-weight:500;margin-right:4px;}
.vr-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;} .vr-thumbs a{position:relative;display:block;width:96px;height:96px;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.vr-thumbs img{width:100%;height:100%;object-fit:cover;} .vr-thumbs span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;padding:1px 4px;}
/* page footer, as on Arctic */
#appFooter{background:#fff;border-top:1px solid #d2d6de;padding:14px 18px;color:#444;font-size:14px;margin-top:16px;}
#appFooter .foot-brand{color:#2E6F99;}
@media print{#appFooter{display:none;}}

/* Product panel (Arctic slide style): opens on the left and pushes the cart; big picture cards */
.pos-panel.pp-open{min-height:640px;}
#prodPanelFlyout{position:absolute;left:24px;top:0;bottom:0;width:calc(46% - 24px);background:#fff;border-right:1px solid var(--border);overflow-y:auto;z-index:4;padding:10px 12px;}
.pos-panel.pp-open>.panel-body{margin-left:calc(46% - 8px);}
.ppx-top{position:sticky;top:-10px;background:#fff;padding:2px 0 8px;z-index:2;}
.ppx-letters{display:flex;flex-wrap:wrap;margin:8px 0 6px;} .ppx-letters button{border:1px solid #ddd;background:#fff;color:#333;min-width:30px;padding:5px 7px;margin:0 -1px -1px 0;font:600 12.5px inherit;cursor:pointer;}
.ppx-letters button.on{background:#2E6F99;color:#fff;border-color:#2E6F99;} .ppx-letters button.back{background:#d2d6de;color:#444;}
.ppx-filters{display:flex;gap:6px;flex-wrap:wrap;} .ppx-filters select{flex:1;min-width:120px;padding:5px 6px;font-size:12px;}
.ppx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;border-top:2px solid #c62828;padding-top:12px;}
.ppx-card{border:1px solid #c62828;background:#fff;cursor:pointer;display:flex;flex-direction:column;transition:transform .08s,box-shadow .08s;}
.ppx-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.18);transform:translateY(-1px);} .ppx-card:active{transform:scale(.98);}
.ppx-code{background:#333;color:#fff;font-weight:700;font-size:13px;padding:6px 8px;display:flex;align-items:center;gap:8px;} .ppx-code i{opacity:.55;} .ppx-code span{flex:1;text-align:center;}
.ppx-img{position:relative;height:140px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;} .ppx-img img{max-width:100%;max-height:100%;object-fit:contain;} .ppx-img>i{font-size:46px;color:#d9dde3;}
.ppx-badge{position:absolute;right:5px;top:5px;background:#17803A;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;} .ppx-badge.out{background:#B91C1C;}
.ppx-foot{background:#333;color:#fff;padding:6px 8px;text-align:center;margin-top:auto;}
.ppx-name{font-weight:700;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;}
.ppx-foot small{display:block;font-weight:600;color:#ffd54f;font-size:12px;margin-top:2px;}
@media(max-width:760px){
  #prodPanelFlyout{left:0;width:auto;right:52px;padding:10px;}
  .pos-panel.pp-open>.panel-body{visibility:hidden;height:0;overflow:hidden;padding:0;}
  .pos-panel.pp-open{min-height:80vh;}
  .pos-panel.pp-open #prodPanelTab{left:auto;right:0;width:46px;border-left:1px solid var(--border);border-right:none;border-radius:6px 0 0 6px;}
  .pos-panel.pp-open #prodPanelTab .pp-arrow{width:34px;height:34px;font-size:15px;}
  .ppx-grid{grid-template-columns:repeat(2,1fr);gap:10px;} .ppx-img{height:120px;}
}

/* slow slide in / out (about 0.6 s, like Arctic) */
#prodPanelFlyout.pp-anim{animation:ppIn .65s ease-out;}
#prodPanelFlyout.pp-out{animation:ppOut .55s ease-in forwards;}
@keyframes ppIn{from{transform:translateX(-60px);opacity:0}to{transform:none;opacity:1}}
@keyframes ppOut{from{transform:none;opacity:1}to{transform:translateX(-60px);opacity:0}}
.pos-panel.pp-open.pp-anim>.panel-body{animation:ppPush .65s ease-out;}
.pos-panel.pp-closing>.panel-body{transition:margin-left .55s ease-in;margin-left:0!important;}
@keyframes ppPush{from{margin-left:0}}
#prodPanelFlyout.sv-fly{width:320px;max-width:calc(100% - 30px);box-shadow:2px 0 12px rgba(0,0,0,.12);}
/* Support tickets: cards on a phone (no sideways scrolling, the whole card opens the ticket) */
.tk-cards{display:none;}
@media(max-width:760px){
  .tk-cards{display:flex;flex-direction:column;gap:10px;} .tk-cards+*{display:none;}
  #content .panel-body > .table-scroll:has(+ .tk-cards){display:none;}
  .tk-card{border:1px solid var(--border);border-radius:8px;padding:12px;background:#fff;cursor:pointer;} .tk-card.new{border-left:4px solid #C23A28;}
  .tk-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;} .tk-card-t{font-weight:600;margin-top:4px;}
  .tk-card-m{font-size:13px;color:#444;margin-top:4px;} .tk-card-f{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
}

.ppx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .ppx-head b{font-size:15px;color:#333;}
.ppx-close{border:0;background:#C23A28;color:#fff;font:600 13px inherit;padding:7px 12px;border-radius:4px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;}

/* ---------------- ISP ---------------- */
.isp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:14px;}
.isp-card{background:#fff;border:1px solid #e3e7ee;border-left:4px solid var(--c,#1676c7);border-radius:6px;padding:12px 14px;cursor:pointer;}
.isp-card .k{font-size:12px;color:#667;text-transform:uppercase;letter-spacing:.3px;}
.isp-card .v{font-size:24px;font-weight:700;color:var(--c,#1676c7);margin:2px 0;}
.isp-card .note{margin:0;}
.isp-bars{display:flex;align-items:flex-end;gap:4px;height:150px;}
.isp-bars>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;}
.isp-bars span{display:block;width:100%;background:#1676c7;border-radius:3px 3px 0 0;min-height:2px;}
.isp-bars small{font-size:10px;color:#6A6A7D;margin-top:3px;}
.isp-pkgs{display:flex;flex-wrap:wrap;gap:8px;}
.isp-pkgs span{background:#f1f5fb;border-radius:14px;padding:4px 12px;}
.isp-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.isp-filters select,.isp-filters input[type=date],.isp-filters input[type=month]{width:auto;min-width:130px;}
.isp-filters .search-box{flex:1 1 240px;}
.isp-filters label{display:flex;gap:6px;align-items:center;margin:0;font-weight:400;}
.isp-table tr:not(:first-child){cursor:pointer;}
.isp-table tr:not(:first-child):hover{background:#f6f9fd;}
.isp-on{color:#17803A;font-size:9px;}
.isp-off{color:#c4c9d2;font-size:9px;}
.isp-top{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start;}
.isp-name{font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.isp-kv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0;}
.isp-kv>div{background:#f6f8fb;border-radius:6px;padding:8px 10px;}
.isp-kv span{display:block;font-size:11px;color:#778;text-transform:uppercase;}
.isp-kv b{display:block;font-size:16px;margin:2px 0;}
.isp-kv small{color:#667;}
.isp-net{border:1px dashed #d5dbe5;border-radius:6px;padding:8px 10px;margin:8px 0;}
.isp-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.isp-pay .isp-big{font-size:18px;font-weight:700;}
.isp-calc{background:#f1f7ee;border-radius:6px;padding:8px 10px;margin:8px 0;}
.isp-find input{font-size:18px;padding:10px 10px 10px 36px;}
.isp-found{margin-top:10px;}
.isp-hit{display:flex;justify-content:space-between;gap:10px;padding:10px;border:1px solid #e3e7ee;border-radius:6px;margin-bottom:6px;cursor:pointer;}
.isp-hit:hover{background:#f6f9fd;border-color:#1676c7;}
.isp-rt input,.isp-rt select{min-width:90px;}
.isp-help{background:#f6f8fb;border-radius:6px;padding:10px 12px;margin-top:12px;font-size:13px;}
.isp-help pre{white-space:pre-wrap;font-size:12px;background:#fff;border:1px solid #e3e7ee;padding:8px;border-radius:4px;overflow:auto;}
.isp-tag{display:inline-block;font-size:10px;font-weight:700;background:#1676c7;color:#fff !important;border-radius:3px;padding:1px 5px;margin-left:4px;text-decoration:none;}
.isp-receipt{font-size:13px;padding:10px;}
.isp-receipt table{width:100%;border-collapse:collapse;}
.isp-receipt td{border:1px solid #ccc;padding:5px 7px;}
label.chk{display:flex;gap:6px;align-items:center;font-weight:400;margin:6px 0;}
label.chk input{width:auto;}
@media (max-width:900px){.isp-top{grid-template-columns:1fr;}.isp-kv{grid-template-columns:1fr 1fr;}}
.isp-sum{margin:0 0 10px;padding-left:18px;line-height:1.8;}
.isp-tries{margin-top:6px;font-size:12px;color:#556;}.isp-tries span{color:#6A6A7D;display:inline-block;min-width:78px;}
.isp-onu{margin-top:6px;padding-top:6px;border-top:1px dashed #d5dbe5;}
.fb-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.fb-key{font-size:11px;color:#556;display:inline-flex;align-items:center;gap:3px;margin-left:6px;}
.fb-key i{display:inline-block;width:16px;height:3px;}.fb-key b{display:inline-block;width:9px;height:9px;border-radius:50%;}
.fb-wrap{display:grid;grid-template-columns:1fr 340px;min-height:560px;border-top:1px solid #e3e7ee;}
#fbMap{min-height:max(560px,68vh);}
.fb-side{padding:14px;border-left:1px solid #e3e7ee;font-size:13px;overflow:auto;max-height:max(560px,68vh);background:#fbfcfe;}
.fb-side label{display:block;margin:6px 0 2px;font-size:12px;}.fb-side input,.fb-side select{width:100%;}
.fb-techs{display:flex;flex-wrap:wrap;gap:4px 14px;}
@media (max-width:900px){.fb-wrap{grid-template-columns:1fr;}.fb-side{border-left:0;border-top:1px solid #e3e7ee;max-height:none;}}
.fb-bar select{width:auto;min-width:120px;}
.fb-pin{color:#B91C1C;font-size:26px;text-shadow:0 0 3px #fff,0 0 6px #fff;}
.fb-otdr{margin:10px 0;border:1px solid #e3e7ee;border-radius:6px;padding:6px 8px;background:#fafbfd;}
.fb-otdr summary{cursor:pointer;font-weight:600;}
.fb-core{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid #999;vertical-align:-1px;margin:0 3px;}
.fb-spl select,.fb-spl input{min-width:90px;}
.fb-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.fb-label{display:flex;gap:8px;align-items:center;border:1px dashed #999;padding:6px;font-size:11px;page-break-inside:avoid;}
.fb-label svg{width:96px;height:96px;}
.isp-verdict{border-radius:6px;padding:10px 12px;margin-bottom:8px;}
.isp-verdict div{margin-top:3px;font-size:13px;}
.isp-checks div{padding:3px 0;font-size:13px;}
.isp-path{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;background:#f6f8fb;border-radius:6px;padding:6px 8px;}
.isp-path i{color:#6E6E6E;font-size:11px;}
.isp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:5px;background:#e9eef4;border-radius:10px;width:fit-content;max-width:100%;}
.isp-tabs a{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:7px;color:#2c3a4b;text-decoration:none;font-weight:600;font-size:13.5px;border:1px solid transparent;}
.isp-tabs a i{font-size:14px;color:#5b6b7e;}
.isp-tabs a.on{background:#1676c7;color:#fff;box-shadow:0 2px 6px rgba(22,118,199,.35);} .isp-tabs a.on i{color:#fff;}
.isp-tabs a:not(.on):hover{background:#fff;border-color:#cfd9e4;}
.isp-use span{background:#1676c7;position:relative;display:flex;flex-direction:column;justify-content:flex-end;}
.isp-use span i{display:block;background:#17803A;width:100%;}
.isp-loc{margin-top:6px;font-size:13px;}
.isp-locmap{height:260px;margin-top:6px;border-radius:6px;overflow:hidden;}
.isp-cmap{height:560px;border-top:1px solid #e3e7ee;}
.isp-live-now{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;font-size:15px;}
.isp-live-now b{font-size:24px;}
.isp-live-svg{width:100%;height:110px;background:#f8fafd;border-radius:6px;margin-top:6px;}
/* ISP reports and SMS */
.isr-big{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.isr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;}
.isr-chip{display:inline-flex;gap:6px;align-items:center;background:#eef3f8;border:1px solid #d6e0ea;border-radius:14px;padding:3px 10px;font-size:12px;}
.isr-chip.on{background:#fff4e5;border-color:#f3d19c;}
.isr-chip a{color:#c0392b;text-decoration:none;}
.rep-table td.clickable{cursor:pointer;text-decoration:underline dotted;}
.isr-cond{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.3fr) auto;gap:6px;margin-bottom:6px;align-items:center;}
.isr-checks{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:220px;overflow:auto;padding:6px;border:1px solid var(--border);border-radius:4px;}
.isr-checks .chk{font-weight:400;margin:0;}
.isms-vars{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.isms-var{border:1px solid #cfd8e3;background:#f5f8fb;border-radius:4px;padding:2px 6px;font-size:11.5px;font-family:ui-monospace,monospace;cursor:pointer;color:#1B5E8C;}
.isms-var:hover{background:#e5eef7;}
.isms-phone{background:#e9f7ee;border:1px solid #c7e8d2;border-radius:10px;padding:10px 12px;font-size:13px;max-width:420px;white-space:pre-wrap;}
.isms-kind .panel-head{align-items:center;}
.isms-kind:not(.on){opacity:.8;}
.isms-kind:not(.on) .panel-head{background:#cfd6dd;}
.isms-sw{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer;margin:0;}
.isms-sw input{width:auto;}
.isms-kind textarea,#ismsText{width:100%;}
@media (max-width:700px){.isr-cond{grid-template-columns:1fr 1fr;}}
.rep-tools .btn{width:auto;height:auto;min-width:0;white-space:nowrap;padding:5px 10px;font-size:12px;line-height:1.3;}
/* ISP quick add (NID) */
.nid-sides{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px;}
.nid-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.nid-shot{width:100%;aspect-ratio:1.58;border:2px dashed #c7d2dc;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8795a3;background:#f7f9fb;overflow:hidden;}
.nid-shot i{font-size:34px;}
.nid-shot img{width:100%;height:100%;object-fit:cover;}
input.nid-auto:not(:placeholder-shown){background:#f3faf5;}
@media (max-width:700px){.nid-sides{grid-template-columns:1fr;}}
.best-card{display:flex;align-items:center;gap:18px;padding:18px 22px;margin-bottom:14px;border-radius:10px;background:linear-gradient(135deg,#fff8e1,#ffe9a8);border:1px solid #f0d27a;}
.best-trophy{font-size:52px;line-height:1;}
.best-k{font-size:13px;color:#7a5a00;text-transform:uppercase;letter-spacing:.5px;}
.best-n{font-size:26px;font-weight:700;color:#3a2a00;}
.best-s{font-size:13px;color:#5a4500;}
/* walkie-talkie (office) */
.ptt-ch{border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;}
.ptt-mem{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;} .ptt-mem .chk{font-weight:400;margin:0;}
.ptt-obtn{width:150px;height:150px;border-radius:50%;border:0;margin:18px auto 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:800;font-size:13px;letter-spacing:.05em;cursor:pointer;user-select:none;touch-action:none;
  background:radial-gradient(circle at 45% 22%,#2bb58a 0%,#128a6a 50%,#0b6149 100%);box-shadow:0 0 0 10px #e3f4ee,0 10px 22px rgba(11,97,73,.3);}
.ptt-obtn i{font-size:38px;} .ptt-obtn.on{background:radial-gradient(circle at 45% 22%,#ff6b7a 0%,#d33a4a 50%,#a3202f 100%);box-shadow:0 0 0 10px #fbe3e6,0 10px 22px rgba(211,58,74,.3);transform:scale(.97);}
.ptt-ostate{min-height:26px;margin-top:10px;font-weight:700;}
.ptt-obtn.busy{background:radial-gradient(circle at 45% 22%,#b9bcc8 0%,#8b90a3 50%,#6a6f82 100%);box-shadow:0 0 0 10px #eceef3,0 10px 22px rgba(0,0,0,.15);}

/* fiber map: tools, labels, approval */
.fb-panel{overflow:hidden;}
.fb-tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:10px 12px;background:#f6f8fb;border-bottom:1px solid #e3e7ee;}
.fb-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.fb-glabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#56627A;margin-right:2px;}
.fb-tool{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid #cfd9e4;background:#fff;border-radius:8px;font-weight:600;font-size:13px;color:#2c3a4b;cursor:pointer;}
.fb-tool i{color:#1676c7;font-size:14px;} .fb-tool:hover:not([disabled]){border-color:#1676c7;}
.fb-tool.on{background:#1676c7;border-color:#1676c7;color:#fff;} .fb-tool.on i{color:#fff;} .fb-tool[disabled]{opacity:.45;cursor:not-allowed;}
.fb-type{width:auto !important;min-width:110px;padding:7px 8px;border-radius:8px;}
.fb-chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;margin:0;color:#2c3a4b;} .fb-chk input{width:auto;}
.fb-modebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;background:#fff6dc;border-bottom:1px solid #f0d27a;color:#5a4500;font-size:13.5px;}
.fb-modebar[hidden]{display:none;}
.fb-legend{background:rgba(255,255,255,.94);border-radius:8px;padding:6px 9px;box-shadow:0 1px 6px rgba(0,0,0,.2);font:600 11px sans-serif;color:#334;display:flex;flex-wrap:wrap;gap:4px 10px;max-width:420px;}
.fb-legend span{display:inline-flex;align-items:center;gap:4px;} .fb-legend i{display:inline-block;width:18px;height:4px;border-radius:2px;} .fb-legend i.dash{background:repeating-linear-gradient(90deg,#555 0 5px,transparent 5px 9px);}
.fb-legend b{display:inline-block;width:10px;height:10px;border-radius:50%;box-sizing:border-box;}
.fb-clbl span{display:inline-block;white-space:nowrap;transform:translate(-50%,-50%);background:#fff;border:2px solid;border-radius:10px;padding:1px 7px;font:700 11px sans-serif;color:#223;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.leaflet-tooltip.fb-nlbl{background:rgba(255,255,255,.92);border:0;box-shadow:0 1px 3px rgba(0,0,0,.25);font-weight:700;font-size:11px;padding:1px 6px;color:#1b2a3a;}
.leaflet-tooltip.fb-nlbl.dr{color:#8a5a00;} .leaflet-tooltip.fb-nlbl::before{display:none;}
.fb-vtx{background:#fff;border:3px solid #111;border-radius:50%;box-sizing:border-box;cursor:move;}
.fb-mid{background:#1676c7;color:#fff;border-radius:50%;font:700 13px/16px sans-serif;text-align:center;cursor:pointer;opacity:.85;}
.fb-drag{background:#ffb000;color:#000;border-radius:50%;display:flex !important;align-items:center;justify-content:center;font-size:13px;box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:move;}
.fb-title{display:flex;gap:10px;align-items:flex-start;padding-left:10px;border-left:4px solid var(--c);margin-bottom:10px;} .fb-title i{color:var(--c);font-size:18px;margin-top:2px;} .fb-title b{font-size:15px;}
.fb-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:8px;margin-bottom:8px;font-size:13px;}
.fb-status.draft{background:#fff6dc;color:#6b4a00;border:1px solid #f0d27a;} .fb-status.ok{background:#e6f5ec;color:#15613a;border:1px solid #b9e2c9;}
.fb-status .note{margin:0;}
.fb-hist{margin:0 0 8px;font-size:12px;} .fb-hist summary{cursor:pointer;color:#1676c7;font-weight:600;} .fb-hist div{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed #e3e7ee;} .fb-hist span{color:#56627A;}
.fb-fs{border:0;padding:0;margin:0;min-width:0;} .fb-fs[disabled] input,.fb-fs[disabled] select{background:#f1f3f6;color:#667;}
.fb-empty{color:#56657a;line-height:1.55;} .fb-empty>i{font-size:26px;color:#1676c7;display:block;margin:10px 0 8px;} .fb-empty ul{padding-left:18px;margin:10px 0 0;}
.fb-st{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:700;} .fb-st.draft{background:#fff1c9;color:#6b4a00;} .fb-st.ok{background:#d9f1e3;color:#15613a;}
.fb-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:0;}
@media (max-width:900px){.fb-tools{gap:8px;}.fb-tool span{display:none;}.fb-tool{padding:9px 11px;}}
/* RADIUS setup */
.rad-mode{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:10px;margin-bottom:14px;background:#e8f4ec;border:1px solid #b9e2c9;color:#15613a;} .rad-mode>i{font-size:30px;} .rad-mode>div{flex:1;}
.rad-mode.full{background:#fff3d6;border-color:#f0d27a;color:#6b4a00;}
.rad-check{list-style:none;margin:0;padding:0;} .rad-check li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #eef1f5;} .rad-check li i{font-size:17px;margin-top:1px;}
.rad-check li.ok i{color:#17803A;} .rad-check li.bad i{color:#B91C1C;} .rad-check .note{margin:2px 0 0;}
.rad-cmd{background:#1b2430;color:#e6edf5;padding:10px 12px;border-radius:6px;font-size:12.5px;white-space:pre-wrap;word-break:break-all;margin:6px 0;}
/* API page */
.apx-n{background:rgba(0,0,0,.12);border-radius:9px;padding:0 7px;font-size:11px;}
.apx-scopes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 16px;padding:8px;border:1px solid var(--border);border-radius:6px;}
.apx-scopes .chk{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:0;} .apx-scopes code{font-size:11px;color:#6b7a8c;}
.apx-tag{display:inline-block;background:#eef3f8;border:1px solid #d6e0ea;border-radius:9px;padding:0 7px;margin:1px 3px 1px 0;font-size:11px;font-family:ui-monospace,monospace;} .apx-tag.c{background:#f3ecfd;border-color:#dccbf6;}
.apx-secret{background:#fff8e1;border:1px solid #f0d27a;border-radius:10px;padding:14px 16px;margin-bottom:14px;} .apx-code{display:flex;gap:8px;align-items:center;margin:8px 0;} .apx-code code{flex:1;background:#1b2430;color:#ffe08a;padding:10px 12px;border-radius:6px;font-size:14px;word-break:break-all;}
.apx-m{display:inline-block;min-width:48px;text-align:center;border-radius:4px;font:700 11px sans-serif;padding:1px 5px;color:#fff;} .apx-m.GET{background:#1676c7;} .apx-m.POST{background:#17803A;} .apx-m.PATCH{background:#946000;}
.apx-mini{font-size:12px;margin-top:4px;} .apx-mini td{padding:1px 8px 1px 0;border:0;}

/* ---------- Quick search (Ctrl+K) ---------- */
#cmdkTop,#assistTop{color:#fff;font-size:15px;opacity:.85;flex-shrink:0;}
#cmdkTop:hover,#assistTop:hover{opacity:1;}
.cmdk-wrap{position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:9500;display:flex;justify-content:center;align-items:flex-start;padding:10vh 12px 12px;}
.cmdk{width:640px;max-width:100%;background:#fff;color:#1d2433;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:76vh;}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #e6eaf0;}
.cmdk-in i{color:#7a8496;}
.cmdk-in input{flex:1;border:0;outline:0;font-size:16px;background:transparent;color:inherit;padding:4px 0;}
.cmdk kbd{font:11px/1 inherit;border:1px solid #cfd6e2;border-bottom-width:2px;border-radius:4px;padding:2px 5px;color:#5c6678;background:#f6f8fb;margin:0 2px;}
.cmdk-list{overflow-y:auto;padding:6px;}
.cmdk-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;cursor:pointer;}
.cmdk-row i{width:20px;text-align:center;color:#1676c7;}
.cmdk-row div{flex:1;min-width:0;}
.cmdk-row b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmdk-row span{display:block;font-size:12px;color:#7a8496;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmdk-row em{font-style:normal;font-size:11px;color:#7a8496;border:1px solid #e1e6ee;border-radius:10px;padding:1px 7px;}
.cmdk-row.on{background:#e8f1fb;}
.cmdk-empty{padding:18px 14px;color:#6b7587;font-size:13.5px;line-height:1.6;}
.cmdk-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid #e6eaf0;font-size:11.5px;color:#7a8496;}
@media (max-width:600px){.cmdk-wrap{padding-top:8px;}.cmdk-foot{display:none;}}

/* ===== Header corner and stripe as on Arctic (2026-10-01): the blue top bar runs over the menu, the DESIRE TECHNOLOGY
   logo sits in its left corner, the stripe starts under it with the name in large letters; the top bar itself shows
   only the company name from Company & Setting (no product name there). --tbar = the top bar's height (js/nav.js). ===== */
#stripe span{font-size:17px;font-weight:800;letter-spacing:.16em;color:#DDE8FF;text-shadow:0 1px 2px rgba(0,0,0,.4);}
#topbar .tlogo{display:none;}
#topbar .tag b{font-size:19px;font-weight:800;color:#FFE600;letter-spacing:.03em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#topbar .tag span{font-size:12px;margin-top:1px;}
@media (min-width:961px){ #topbar .tag{flex:0 0 auto;max-width:36vw;} #topSearch{margin-left:auto;} }
@media (min-width:961px) and (max-width:1500px){ #topbar .tag b{font-size:16px;} #topSearch{flex-basis:170px;} }
@media (min-width:961px){
  #sidebar{padding-top:var(--tbar,58px);}
  #stripe{top:var(--tbar,58px);}
  #navwrap{height:calc(100vh / var(--z,1) - var(--tbar,58px));}
  .brandbox{position:absolute;left:0;top:0;width:256px;height:var(--tbar,58px);box-sizing:border-box;padding:0 0 0 22px;display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(to bottom,#00a3e3 0,#00305d 100%);border-bottom:0;z-index:3;cursor:pointer;overflow:hidden;white-space:nowrap;transition:width .3s ease-in-out;}
  .brandbox .b1{display:flex;align-items:center;gap:8px;font-size:25px;font-weight:800;letter-spacing:.07em;line-height:1;color:#fff;}
  .brandbox .b1 i{font-size:23px;}
  .brandbox .b2{font-size:9.5px;letter-spacing:.34em;color:#DCEBFA;margin:4px 0 0 33px;}
  body.nav-mini .brandbox{width:50px;padding:0;align-items:center;}
  body.nav-mini .brandbox .b1 i{font-size:20px;}
}
@media (max-width:960px){
  .brandbox{display:none;}
  #topbar .tag{display:block!important;flex:1 1 calc(100% - 60px);min-width:0;}
  #topbar .tag b{font-size:15px;}
  #topbar .tag span{display:none;}
}

/* action buttons (view / edit / delete …) stay on one line in every list (2026-10-01; they wrapped to two rows) */
td:has(> .act-btn), td:has(> span > .act-btn), td:has(> div > .act-btn){white-space:nowrap;width:1%;}
.act-btn{display:inline-block;white-space:nowrap;}
.row-acts{display:block!important;max-width:none!important;white-space:nowrap;text-align:center;}
.row-acts > .act-btn,table.arc-table .row-acts > .act-btn{display:inline-flex;vertical-align:middle;padding:2px 4px;min-width:20px;margin:0 1px;}
.act-cell{padding-left:4px!important;padding-right:4px!important;}
.row-acts > .note{display:block;white-space:normal;}

/* side panel (HISTORY …) as on Arctic: the page is 8 : 4 (col-md-8 / col-md-4) — the side gets one third (2026-10-01; it was 280px) */
@media (min-width:961px){ .page-side{width:auto;flex:0 0 calc((100% - 14px) / 3);min-width:0;} }

/* ISP client lights (2026-10-01): yellow bulb = online, grey = not connected; green open lock = allowed, red lock = expired / off */
.isp-lights{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.isp-bulb{font-size:14px;}
.isp-bulb.on{color:#f5c400;filter:drop-shadow(0 0 3px rgba(245,196,0,.85));}
.isp-bulb.off{color:#c4c9d2;}
.isp-bulb.unk{color:#d5d9e0;}
.isp-lock{font-size:12px;}
.isp-lock.on{color:#17803A;}
.isp-lock.off{color:#d33a4a;}

/* ===== Themes (2026-10-02): colours come from --th-* set by js/theme.js (Company & Setting → Theme & Colours) ===== */
:root{--th-top1:#00a3e3;--th-top2:#00305d;--th-side:#00305d;--th-side2:#00284d;--th-hover:#004280;--th-btn:#0077B0;--th-s1:#bb073f;--th-s2:#1600d0;--th-name:#FFE600;}
#topbar,.brandbox{background:linear-gradient(to bottom,var(--th-top1) 0,var(--th-top2) 100%);}
#sidebar,.subwrap,.subsubwrap{background:var(--th-side);}
.nitem:hover,.subitem:hover,.nitem.active{background:var(--th-hover);}
.panel-head{background:linear-gradient(to bottom,var(--th-top1) 0,var(--th-btn) 100%);}
.btn{background:var(--th-btn);}
.btn:hover,.act-btn:hover,.pl-action-btn:hover{background:var(--th-top2);}
#stripe{background:linear-gradient(var(--th-s1),var(--th-s2),var(--th-s1))!important;}
#topbar .tag b{color:var(--th-name);}
#noticeBar{background:linear-gradient(90deg,var(--th-top2),var(--th-btn));}
#noticeBar .nb-label{color:var(--th-top2);}
table.arc-table .act-btn,table.arc-table .act-btn.del,.rep-tools .rt-edit,.oo-b.inv{background:var(--th-btn);}
table.arc-table .act-btn:hover,table.arc-table .act-btn.del:hover{background:var(--th-top2);}
#bellBox .bell-h{background:linear-gradient(180deg,var(--th-top1),var(--th-btn));}
#buildBar{background:var(--th-top2);} #buildBar button{background:var(--th-top1);}
.oo-pop{border-left-color:var(--th-btn);} .oo-pop > i{color:var(--th-btn);}
/* Classic header (as before 1 Oct 2026) */
body.hdr-classic #sidebar{padding-top:0!important;}
body.hdr-classic #stripe{top:0!important;}
body.hdr-classic #stripe span{font-size:12px!important;font-weight:700!important;letter-spacing:.25em!important;text-shadow:none!important;}
body.hdr-classic #navwrap{height:calc(100vh / var(--z,1))!important;}
body.hdr-classic .brandbox{position:static!important;display:block!important;width:auto!important;height:auto!important;padding:16px 14px!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.08)!important;}
body.hdr-classic .brandbox .b1{display:block!important;font-size:18px!important;letter-spacing:0!important;}
body.hdr-classic .brandbox .b1 i{font-size:inherit!important;}
body.hdr-classic .brandbox .b2{margin:2px 0 0!important;letter-spacing:.1em!important;font-size:10.5px!important;color:#9FC3E8!important;}
body.hdr-classic.nav-mini .brandbox{padding:16px 0!important;text-align:center;}
body.hdr-classic #topbar .tlogo{display:flex!important;}
body.hdr-classic #topbar .tag{flex:1 1 auto!important;max-width:none!important;}
body.hdr-classic #topbar .tag b{font-size:11px!important;letter-spacing:.06em;}
@media (max-width:960px){ body.hdr-classic #topbar .tag{display:none!important;} }
/* the theme page */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.th-grid.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.th-card{background:#fff;border:2px solid var(--border,#dde3ea);border-radius:8px;padding:8px;text-align:left;cursor:pointer;font:inherit;color:inherit;position:relative;}
.th-card.on{border-color:var(--th-btn);box-shadow:0 0 0 3px rgba(0,0,0,.06);}
.th-card b{display:block;margin-top:6px;font-size:13px;}
.th-prev{height:92px;border-radius:5px;overflow:hidden;border:1px solid #e3e7ee;background:#f1f1f1;display:flex;flex-direction:column;}
.th-top{height:20px;display:flex;align-items:center;gap:6px;padding:0 6px;color:#fff;font-size:9px;font-weight:700;flex-shrink:0;}
.th-top i{font-style:normal;}
.th-body{flex:1;display:flex;}
.th-strip{width:7px;}
.th-side{width:34px;padding-top:4px;}
.th-side span{display:block;height:5px;margin:4px 3px;border-radius:2px;background:rgba(255,255,255,.25);}
.th-main{flex:1;padding:6px;}
.th-ph{height:10px;border-radius:2px;}
.th-line{height:5px;background:#dfe4ea;border-radius:2px;margin:6px 0 0;}
.th-line.short{width:60%;}
.th-btn{width:34px;height:9px;border-radius:2px;margin-top:8px;}
.th-logo{color:#fff;font-weight:800;font-size:9px;letter-spacing:.05em;}
.th-tag{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:1px 6px;border-radius:9px;}
.th-tag.me{top:30px;background:#17803A;}
/* ISP tabs, cards and tools follow the theme too */
.isp-tabs a.on,.fb-tool.on{background:var(--th-btn);border-color:var(--th-btn);box-shadow:0 2px 6px rgba(0,0,0,.2);}
.isp-tag,.isp-bars span,.isp-use span,.fb-mid{background:var(--th-btn);}
.isp-hit:hover,.fb-tool:hover:not([disabled]){border-color:var(--th-btn);}
.isp-card{border-left-color:var(--c,var(--th-btn));} .isp-card .v{color:var(--c,var(--th-btn));}
.fb-tool i,.fb-hist summary,.fb-empty>i,.cmdk-row i{color:var(--th-btn);} .fb-tool.on i{color:#fff;}
/* Profile → My theme swatches */
.th-sw{display:flex;flex-wrap:wrap;gap:10px;}
.th-dot{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;font:inherit;color:inherit;}
.th-dot span{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #cfd6df;}
.th-dot.on span{box-shadow:0 0 0 3px var(--th-btn);}
.th-dot small{font-size:11px;text-align:center;line-height:1.2;}
.isp-pin{color:#e0453a;font-size:14px;margin-left:4px;text-decoration:none;} .isp-pin.none{color:#d5d9e0;}

/* announcement popup (office) */
.ann-wrap{position:fixed;inset:0;z-index:10050;background:rgba(10,20,40,.55);display:flex;align-items:center;justify-content:center;padding:18px;}
.ann-box{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:24px 22px 22px;box-shadow:0 18px 50px rgba(0,0,0,.35);position:relative;}
.ann-box h3{margin:0 0 10px;font-size:20px;}
.ann-box .ann-t{line-height:1.6;white-space:pre-wrap;color:#1d2433;}
.ann-box .ann-b{margin-top:16px;display:inline-block;}
.ann-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:27px;line-height:1;color:#8894a7;cursor:pointer;}
.isms-cost{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.isms-cost input{font:inherit;}
#topbar .tag b{color:#fff!important;}   /* the company name stays white in every theme (user, 2026-10-02) */

/* ===== Dynamic themes (2026-10-02 v2): gradients, a slowly moving top bar, glowing active page =====  — not for Arctic Blue: body.th-arctic keeps the original Arctic look */
body:not(.th-arctic) #topbar,body:not(.th-arctic) .brandbox{background:var(--th-topg,linear-gradient(135deg,#00a3e3,#00305d))!important;background-size:220% 220%!important;animation:thShift 16s ease-in-out infinite;}
@keyframes thShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body:not(.th-arctic) #stripe{background:var(--th-strip)!important;background-size:100% 300%!important;animation:thStrip 12s ease-in-out infinite;}
@keyframes thStrip{0%{background-position:50% 0%}50%{background-position:50% 100%}100%{background-position:50% 0%}}
body:not(.th-arctic) #sidebar{background:var(--th-sideg,#00305d)!important;}
body:not(.th-arctic) .subwrap,body:not(.th-arctic) .subsubwrap{background:rgba(0,0,0,.20)!important;}
body:not(.th-arctic) .nitem:hover,body:not(.th-arctic) .subitem:hover{background:rgba(255,255,255,.07)!important;}
body:not(.th-arctic) .nitem.active{background:linear-gradient(90deg,var(--th-acc-a),transparent 85%)!important;box-shadow:inset 3px 0 0 var(--th-acc);color:#fff;}
body:not(.th-arctic) .nitem.active .nicon{color:var(--th-acc);filter:drop-shadow(0 0 4px var(--th-acc-a));}
body:not(.th-arctic) .subitem.active,body:not(.th-arctic) .subitem.on{color:var(--th-acc)!important;}
body:not(.th-arctic) .panel-head{background:var(--th-headg)!important;}
body:not(.th-arctic) .btn:not(.secondary):not(.danger){background:var(--th-btng)!important;border:0;box-shadow:0 2px 6px rgba(0,0,0,.14);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;}
body:not(.th-arctic) .btn:not(.secondary):not(.danger):hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.20);filter:brightness(1.06);}
body:not(.th-arctic) .isp-tabs a.on,body:not(.th-arctic) .fb-tool.on{background:var(--th-btng)!important;}
body:not(.th-arctic) #noticeBar{background:var(--th-topg)!important;background-size:220% 220%!important;animation:thShift 16s ease-in-out infinite;}
body:not(.th-arctic) input:focus,body:not(.th-arctic) select:focus,body:not(.th-arctic) textarea:focus{outline:2px solid var(--th-acc)!important;outline-offset:0;}
@media (prefers-reduced-motion:reduce){#topbar,.brandbox,#stripe,#noticeBar{animation:none!important;}}
body.th-arctic #topbar,body.th-arctic .brandbox,body.th-arctic #stripe,body.th-arctic #noticeBar{animation:none!important;background-size:auto!important;}

/* Payroll dashboard */
.pd-bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:18px;}
.pd-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;cursor:default;}
.pd-bar i{display:block;width:70%;max-width:46px;min-height:3px;background:var(--th-btng,var(--topbar-2));border-radius:4px 4px 0 0;}
.pd-bar small{margin-top:6px;font-size:11px;color:var(--ink-soft,#5b6577);}
.pd-bar .pd-v{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--ink,#1d2433);}
.pd-bar:hover i{filter:brightness(1.12);}
.pd-meter{height:8px;background:#e6eaf0;border-radius:4px;overflow:hidden;} .pd-meter i{display:block;height:100%;background:var(--th-btng,var(--topbar-2));border-radius:4px;}
.pd-list{display:flex;flex-direction:column;gap:6px;} .pd-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed #e3e7ee;font-size:13px;} .pd-row span{color:var(--ink-soft,#5b6577);}
.pd-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;} .pd-links a{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #e3e7ee;border-radius:8px;text-decoration:none;color:inherit;font-weight:600;font-size:13px;} .pd-links a:hover{border-color:var(--th-btn);} .pd-links i{color:var(--th-btn);}

/* line check: ping from the router */
.isp-ping{margin:8px 0 0;padding:8px 10px;border:1px solid var(--line,#e3e8ef);border-radius:6px;font-size:13px;line-height:1.5;}
.isp-ping .note{margin:2px 0 0;}

/* line quality by ping: bulb shades + the 24-hour strip */
.isp-bulb.on.q-good{color:#ffd400;filter:drop-shadow(0 0 4px rgba(255,212,0,.95));}
.isp-bulb.on.q-fair{color:#c99a00;filter:drop-shadow(0 0 2px rgba(201,154,0,.6));}
.isp-bulb.on.q-bad{color:#a8641e;filter:none;}
.isp-q{font-size:9px;font-weight:700;color:#8a6d00;margin-left:-3px;}
.isp-pq{margin:8px 0 0;}
.isp-pq-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:4px;}
.isp-pq-row{display:flex;gap:1px;height:18px;}
.isp-pq-row i{flex:1;background:#e6e9ee;border-radius:1px;min-width:1px;}
.isp-pq i.q-good{background:#ffd400;}.isp-pq i.q-fair{background:#c99a00;}.isp-pq i.q-bad{background:#a8641e;}.isp-pq i.q-noreply{background:#efe3a8;}
.isp-pq-ax{display:flex;justify-content:space-between;font-size:10px;color:#6A6A7D;margin-top:2px;}
.isp-pq-key{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:#556;margin-top:4px;}
.isp-pq-key span{display:inline-flex;align-items:center;gap:4px;}
.isp-pq-key i{display:inline-block;width:10px;height:10px;border-radius:2px;background:#e6e9ee;}

/* Client List: tap the lights (phones), and the key to them */
.isp-lights{cursor:pointer;padding:4px 2px;}
.isp-keybtn{color:#fff;opacity:.9;font-size:14px;}
.isp-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;padding:8px 10px;margin:4px 0 10px;border:1px solid var(--line,#e3e8ef);border-radius:6px;background:#fafbfc;}
.isp-key span{display:inline-flex;align-items:center;gap:5px;}

/* ISP → POP Summary */
.pop-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
.pop-chips.small{margin:6px 0 8px;}
.pop-chip{border:1px solid var(--line,#d6dde6);background:#fff;border-radius:16px;padding:5px 12px;font-size:13px;cursor:pointer;color:#334;}
.pop-chip b{margin-left:4px;color:var(--th-btn,#0077B0);}
.pop-chip.on{background:var(--th-btn,#0077B0);border-color:var(--th-btn,#0077B0);color:#fff;}
.pop-chip.on b{color:#fff;}
.pop-table td,.pop-table th{white-space:nowrap;}
.pop-table td a{font-weight:600;}
.pop-z{color:#b8c0cc;}
.pop-tot td{background:#eef4fa;font-weight:600;border-top:2px solid #c9d6e3;}
.pop-meter{height:4px;background:#e6ebf1;border-radius:2px;margin-top:4px;min-width:90px;}
.pop-meter i{display:block;height:100%;background:#17803A;border-radius:2px;}
.pop-own{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;}
.pop-own.own{background:#e3f2ff;color:#0b5c99;}.pop-own.dealer{background:#fff1dc;color:#8a5200;}.pop-own.unset{background:#f0f2f5;color:#778;}
.pop-cards{display:none;}
.pop-dealers > div{display:flex;gap:6px;margin:0 0 6px;align-items:center;}
.pop-dealers input{flex:1;min-width:0;}
@media (max-width: 760px){
  .pop-wide{display:none;}
  .pop-cards{display:grid;gap:10px;padding:10px;}
  .pop-card{border:1px solid var(--line,#e3e8ef);border-radius:8px;padding:10px 12px;background:#fff;}
  .pop-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .pop-card-big{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px;}
  .pop-card-big a{font-size:26px;font-weight:700;}
  .pop-card-big span{font-size:12px;color:#667;}
  .pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px;font-size:13px;}
  .pop-grid > div{display:flex;justify-content:space-between;gap:6px;border-bottom:1px dashed #edf0f4;padding:3px 0;}
  .pop-grid > div span{color:#667;}
  .pop-grid > div.z{opacity:.55;}
  .pop-grid small{color:#a33;}
}
@media print{ .pop-chips,.pop-owners,.isp-tabs{display:none!important;} .pop-wide{display:block!important;} .pop-cards{display:none!important;} }
@media (max-width: 760px){ .pop-tiles .isp-cards{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;} .pop-tiles .isp-card{padding:10px 12px;margin:0;} .pop-tiles .isp-card .v{font-size:20px;} .pop-tiles .isp-card .note{font-size:11px;} }

.pop-head{display:flex;width:100%;border:0;cursor:pointer;text-align:left;font:inherit;justify-content:space-between;align-items:center;min-height:44px;}
.pop-head-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:4px 12px;font-size:12px;white-space:nowrap;}

.pop-add{display:flex;gap:6px;align-items:center;margin:6px 0;}
.pop-add input,.pop-add select{flex:1;min-width:0;}
.pop-add-pop{margin-top:10px;padding-top:10px;border-top:1px dashed #d6dde6;}
.pop-plus{flex:0 0 44px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;}
@media (max-width: 760px){ .pop-add-pop{flex-wrap:wrap;} .pop-add-pop input[name=np_name]{flex-basis:100%;} }
@media (max-width: 760px){ .pop-end{height:90px;} }
.pop-newpop{margin:0 0 10px;padding:10px;border:1px dashed var(--th-btn,#0077B0);border-radius:6px;background:#f5faff;}
.pop-newpop label{font-weight:600;font-size:13px;}
.pop-newpop .pop-add-pop{margin:6px 0 0;padding:0;border:0;}

/* Client List: ticks and the bulk bar (owner change) */
.isp-ck{width:34px;text-align:center;}
.isp-ck input{width:18px;height:18px;cursor:pointer;}
.isp-table tr.isp-picked td{background:#eef6ff;}
.isp-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 12px 10px;padding:8px 12px;border:1px solid #b9d6f2;background:#eef6ff;border-radius:6px;font-size:13px;position:sticky;top:0;z-index:5;}
.isp-bulk.hint{background:#fff8e6;border-color:#f1d38a;}
.pop-move{font-size:12px;white-space:nowrap;}
.pop-move-btn{margin:8px 0 2px;width:100%;}
.pop-own{white-space:nowrap;}

/* client page: reach, photo, notes, documents, power history */
.isp-reach{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f1fb;color:#0b5c99!important;font-size:12px;font-weight:600;text-decoration:none;}
.isp-reach.wa{background:#e3f7ea;color:#137a3a!important;}
.isp-face{width:44px;height:44px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px;border:2px solid #fff;box-shadow:0 0 0 1px #d6dde6;cursor:pointer;}
.isp-nform,.isp-dform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;}
.isp-nform input[name=text]{flex:1 1 260px;min-width:0;}
.isp-ndue{display:inline-flex;align-items:center;gap:6px;font-size:13px;}
.isp-note{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid #eef1f5;}
.isp-note.done{opacity:.55;}
.isp-ntext{flex:1;min-width:0;}
.isp-ntype{flex:0 0 auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:#eef1f5;color:#445;white-space:nowrap;}
.isp-ntype.t-payment{background:#fff1dc;color:#8a5200;}.isp-ntype.t-complaint{background:#fdecec;color:#a11;}.isp-ntype.t-onu{background:#e8f1fb;color:#0b5c99;}.isp-ntype.t-feedback{background:#e3f7ea;color:#137a3a;}
.isp-ndone{font-size:12px;white-space:nowrap;display:inline-flex;gap:4px;align-items:center;}
.isp-file{position:relative;overflow:hidden;}
.isp-file input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.isp-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.isp-doc{border:1px solid #e3e8ef;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;position:relative;font-size:13px;}
.isp-doc img{width:100%;height:120px;object-fit:cover;border-radius:6px;background:#f3f5f8;}
.isp-doc .isp-pdf{display:flex;align-items:center;justify-content:center;height:120px;font-size:46px;color:#c0392b;background:#fbf1f0;border-radius:6px;}
.isp-doc .act-btn{position:absolute;top:12px;right:12px;}
.isp-pw{width:100%;height:auto;max-height:180px;}
.isp-pw-weak{stroke:#B91C1C;stroke-dasharray:4 4;stroke-width:1;}
.isp-pw-t{font-size:11px;fill:#778;}
.isp-cab input,.isp-cab select{width:100%;min-width:70px;}
@media (max-width: 760px){ .isp-nform select,.isp-nform input,.isp-nform .btn{flex:1 1 100%;} .isp-dform > *{flex:1 1 100%;} }

/* dealers: settings row, account panel */
.pop-dealer{flex-wrap:wrap;}
.pop-dealer select{flex:0 0 auto;min-width:130px;}
.pop-pct{display:inline-flex;align-items:center;gap:4px;}
.pop-pct input{width:80px;}
.pop-month{padding:3px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.6);}
.pop-acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 12px;}
.pop-acc-grid > div{border:1px solid #e3e8ef;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.pop-acc-grid span{font-size:12px;color:#667;}
.pop-acc-grid b{font-size:20px;}
.pop-acc-grid small{font-size:12px;color:#667;}
.pop-acc-btns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.pop-acc-rows{margin:0 0 10px;}
.pop-acc-rows summary{cursor:pointer;font-weight:600;padding:6px 0;}
@media (max-width: 760px){ .pop-acc-btns .btn{flex:1 1 100%;} }
.pop-dmpct{width:80px;text-align:right;}
.pop-dm td,.pop-dm th{white-space:nowrap;}

/* client class badge, scheduled changes */
.isp-cls{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:9px;vertical-align:middle;margin-left:4px;}
.isp-cls.c-vip{background:#fff3c4;color:#8a6200;}.isp-cls.c-free{background:#e3f7ea;color:#137a3a;}.isp-cls.c-staff{background:#ece7fb;color:#4a2fa0;}
.isp-schs{margin:8px 0 0;display:flex;flex-direction:column;gap:4px;}
.isp-sch{font-size:13px;padding:6px 10px;border-radius:6px;background:#f5f8fc;border:1px solid #e1e8f0;}
.isp-sch.s-waiting{background:#fff8e6;border-color:#f1d38a;}.isp-sch.s-failed{background:#fdecec;border-color:#f3b9b9;}.isp-sch.s-done,.isp-sch.s-cancelled{opacity:.7;}
.isp-sch-st{font-size:11px;font-weight:700;margin-left:6px;text-transform:uppercase;color:#667;}
.pop-login.on{color:#1e7a46!important;border-color:#9fd3b2!important;}

/* a dealer login: no company-only tools (search, calculator, staff chat, bell, assistant, serial/product rails, quick actions, notice bar) */
body.dealer-view #topSearch,body.dealer-view #topbarCalc,body.dealer-view #chatTop,body.dealer-view #bellTop,body.dealer-view #rightrail,body.dealer-view #quickbar,body.dealer-view #noticeBar{display:none!important;}

/* login log */
.al-b{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:9px;white-space:nowrap;}
.al-b.al-ok{background:#e3f7ea;color:#137a3a;}.al-b.al-off{background:#eef1f5;color:#556;}.al-b.al-bad{background:#fdecec;color:#a11;}.al-b.al-warn{background:#fff3d9;color:#8a5a00;}
.al-cards{display:none;}
@media (max-width: 760px){ .al-wide{display:none;} .al-cards{display:grid;gap:8px;padding:10px;} .al-card{border:1px solid var(--line,#e3e8ef);border-radius:8px;padding:8px 10px;background:#fff;font-size:13px;display:flex;flex-direction:column;gap:3px;} .al-r{display:flex;justify-content:space-between;gap:8px;align-items:center;} }
select.isp-need{outline:2px solid #B91C1C;outline-offset:1px;}

/* new connection requests */
.ld-list{display:grid;gap:10px;}
.ld-card{border:1px solid var(--line,#e3e8ef);border-radius:8px;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:4px;}
.ld-top{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px;}
.ld-st{font-size:11px;font-weight:700;padding:2px 9px;border-radius:9px;color:#fff;background:var(--c);white-space:nowrap;}
.ld-name{font-size:15px;}
.ld-note{font-size:13px;background:#f7f9fc;border-left:3px solid #c9d6e3;padding:4px 8px;}
.ld-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px;}
.ld-acts select{min-height:32px;}
.ld-hist{font-size:12.5px;border-top:1px dashed #e1e7ee;padding-top:6px;display:flex;flex-direction:column;gap:3px;}
.ld-hist span:first-child{color:#667;margin-right:4px;}
/* phones: room under every page, so the round quick button (bottom right) never covers the last buttons */
@media (max-width: 760px){ #content{padding-bottom:96px;} }
/* the closed quick bar must not catch taps: its hidden panel kept a 50 x 255 px invisible strip over the right edge of every page */
#quickbar:not(.open){pointer-events:none;} #quickbar:not(.open) #qbToggle{pointer-events:auto;} #quickbar:not(.open) #qbPanel{height:0;overflow:hidden;}
.ipm-c{display:inline-block;margin:2px 10px 2px 0;font-size:13px;white-space:nowrap;}

/* client page: tap the tiles, last receipt, more */
.isp-tap{cursor:pointer;position:relative;transition:box-shadow .15s;}
.isp-tap:hover{box-shadow:0 0 0 2px #b9d6f2 inset;}
.isp-tap-i{font-size:10px;color:#8aa;margin-left:4px;}
.isp-last{font-size:13px;margin:0 0 8px;padding:6px 10px;background:#f5f8fc;border:1px solid #e1e8f0;border-radius:6px;}
.isp-more{display:inline-block;font-size:12px;margin:4px 0 2px;}
.isp-more-box{border-top:1px dashed #d6dde6;margin-top:6px;padding-top:6px;}
.isp-more-h{font-size:12px;font-weight:700;color:#334;margin:6px 0 4px;text-transform:uppercase;}
.isp-more-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;font-size:13px;}
.isp-more-g span{display:block;color:#778;font-size:11px;}

.isp-usage-sum{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 8px;}.isp-usage-sum>div{flex:1 1 140px;border:1px solid #e1e8f0;border-radius:6px;padding:6px 10px;background:#f8fafc;}.isp-usage-sum span{display:block;font-size:11px;color:#778;text-transform:uppercase;}.isp-usage-sum b{font-size:16px;color:#1676c7;}.isp-usage-sum small{display:block;color:#17803A;}

.olt-tbl td{vertical-align:top;}.olt-on{color:#1e7a46;font-weight:600;white-space:nowrap;}.olt-off{color:#B91C1C;white-space:nowrap;}.olt-lk{white-space:nowrap;color:#778;font-size:12px;}.olt-lk.on{color:#7a4fd0;font-weight:600;}

.isp-side{display:flex;flex-direction:column;gap:14px;min-width:0;}.isp-side>.panel{margin:0;}

.isp-rchit{display:inline-block;font-size:12px;background:#eef6ff;color:#1676c7;border-radius:4px;padding:1px 6px;margin-bottom:2px;}

.gr-svg{width:100%;height:130px;display:block;}.gr-d{color:inherit;font-weight:400;font-size:12px;padding:1px 5px;border-radius:4px;text-decoration:none;}.gr-d.on{background:rgba(255,255,255,.25);font-weight:700;}

/* AI Calling */
.aic-chat{max-height:560px;overflow:auto;display:flex;flex-direction:column;gap:6px;}
.aic-msg{max-width:85%;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.45;background:#f1f4f8;align-self:flex-start;}
.aic-msg.ai{background:#e6f0fa;align-self:flex-end;}
.aic-msg span{display:block;font-size:10px;font-weight:700;color:#667;text-transform:uppercase;margin-bottom:1px;}
.aic-kb{border:1px solid #e1e8f0;border-radius:8px;padding:8px;margin:0 0 10px;background:#fbfcfe;}
.aic-kb.off{opacity:.6;}
.aic-kb-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;}
.aic-kb-h input:first-child{flex:1 1 220px;font-weight:600;}
.aic-kb textarea{width:100%;}
.aic-sub{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#667);padding:10px 12px 4px}
.aic-work{padding:8px 0;border-top:1px solid var(--line,#e5e7eb)}.aic-work:first-of-type{border-top:0}.aic-chips{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}.aic-chips .chk{margin:0;font-weight:400}
.aic-savebar{height:64px}.aic-savebar .btn{position:fixed;right:88px;bottom:20px;z-index:900;min-width:130px;box-shadow:0 6px 18px rgba(0,0,0,.25)}@media print{.aic-savebar{display:none}}

/* ---------- Dashboard exactly as on Arctic (values from arctic-reference css/custome.css + arctic.css + home.html, 2026-10-06) ---------- */
/* TODAY boxes: .shortcuts .small-box — gradient #0092cc → #605ca8, square, icon 44px left at 22px / 16px in rgba(0,48,93,.53), number 30px bold top right, label 15px uppercase */
.ribbon-card{border-radius:0;box-shadow:none;color:#fff;padding:10px;min-height:100px;display:block;text-align:right;}
/* the four colours stay KHATA's own (user, 2026-10-06: the earlier colours look better) */
.ribbon-card.rc-purchase{background:linear-gradient(135deg,#5B4FCF,#8579E8);} .ribbon-card.rc-expenses{background:linear-gradient(135deg,#D68A2C,#EFB35C);}
.ribbon-card.rc-goods{background:linear-gradient(135deg,#4F8FCF,#79B4E8);} .ribbon-card.rc-service{background:linear-gradient(135deg,#C0392B,#E36B5C);}
.ribbon-card .icon{position:absolute;left:22px;top:16px;font-size:44px;color:rgba(0,0,0,.2);opacity:1;transition:font-size .3s linear;}
.ribbon-card:hover .icon{font-size:64px;}
.ribbon-card .val{position:relative;z-index:5;font-size:30px;font-weight:bold;margin:0 0 18px 0;line-height:1.1;white-space:nowrap;}
.ribbon-card .lab{position:relative;z-index:5;font-size:15px;font-weight:400;text-transform:uppercase;letter-spacing:normal;padding-top:7px;margin:0;opacity:1;}
/* the green TODAY ribbon in the top-left corner (custome.css .ribbon span) */
.ribbon-tag{position:absolute;left:-26px;top:14px;right:auto;width:100px;padding:0;transform:rotate(-45deg);background:#79A70A;background:linear-gradient(#9BC90D 0%,#79A70A 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);color:#fff;font-size:10px;font-weight:bold;line-height:20px;text-align:center;text-transform:uppercase;letter-spacing:normal;z-index:6;}
/* Profit & loss callouts: 16px, weight 600, #666 (net) / #999 (income, expense); the text under it at 14px */
.bo-line .bo-v{font-size:16px;font-weight:600;color:#666;margin-bottom:10px;}
.bo-line .note{font-size:14px;color:inherit;margin:0;}
.bo-line{color:#666;padding:15px 30px 15px 15px;border-left-width:5px;border-radius:3px;}
/* Cash, bank & mobile: info-box — 50px icon square, number 15px bold, account line uppercase */
.balance-card{border-radius:2px;padding:0;min-height:50px;margin-bottom:1px;gap:0;overflow:hidden;}
.balance-card>i{width:50px;height:50px;line-height:50px;text-align:center;font-size:18px;background:rgba(0,0,0,.2);flex:0 0 50px;}
.balance-card>div{padding:5px 10px;min-width:0;text-transform:uppercase;}
.balance-card .val{font-size:15px;font-weight:bold;}
.balance-card .sub{font-size:13px;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bc-cash{background:#008548;} .bc-mobile{background:#C23A28;} .bc-bank{background:#2E6F99;}
/* Business insights tiles: the name large (15px bold, uppercase), the amount under it in normal weight */
.mini-stat{border-radius:0;display:block;padding:8px 10px;}
.mini-stat i{display:block;font-size:13px;margin-bottom:4px;opacity:1;}
.mini-stat .lab{font-size:15px;font-weight:bold;letter-spacing:normal;text-transform:uppercase;opacity:1;}
.mini-stat .val{font-size:13px;font-weight:400;}
/* charts: Chart.js 2 look — 12px #666 legend */
.kleg{font-size:12px;}
.bo-line{padding-right:0;} .bo-line .bo-v{white-space:nowrap;}

/* ISP client page: ✎ edit in place */
.isp-pen{font-size:11px;color:#0077B0;margin-left:4px;padding:2px 4px;border-radius:4px;}
.isp-pen:hover{background:#e6f3fa;}

/* System Health: data by part */
.sys-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#eef1f5;margin:2px 0 10px;}
.sys-stack span{display:block;height:100%;}
.sys-grp{border-top:1px solid #eef1f5;padding:6px 0;}
.sys-grp summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.sys-grp .sys-gv{margin-left:auto;font-weight:700;}
.sys-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 6px;}

/* Support Tickets: AI / manual */
.tk-sums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:0 0 10px;}
.tk-sum{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;border:1px solid #e3dcf5;background:#faf8fe;border-radius:8px;padding:10px 12px;cursor:pointer;min-height:44px;}
.tk-sum i{color:#6a3fc1;font-size:18px;margin-top:2px;}
.tk-sum.on{border-color:#6a3fc1;box-shadow:0 0 0 2px #6a3fc133;}
.tk-msg.ai{border-left:3px solid #6a3fc1;}

/* Dashboard: each cash / bank / mobile balance opens its ledger */
a.balance-card.bc-link{color:#fff;text-decoration:none;cursor:pointer;}
a.balance-card.bc-link:hover{filter:brightness(1.08);}
a.balance-card.bc-link:active{filter:brightness(0.95);}

/* search suggestions (highlighted) */
.isp-sug{position:fixed;z-index:3000;background:#fff;border:1px solid #cfd8e3;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.15);max-height:60vh;overflow:auto;display:none;}
.isp-sug-i{padding:7px 10px;cursor:pointer;border-bottom:1px solid #f1f3f6;font-size:13px;}
.isp-sug-i.on,.isp-sug-i:hover{background:#eaf3fc;}
.isp-sug-all{padding:8px 10px;color:#0077B0;cursor:pointer;font-weight:600;font-size:13px;}
mark.hl{background:#ffe066;color:inherit;padding:0 1px;border-radius:2px;}

/* AI Call Setting: search inside the page */
.aic-find{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:2px solid #0077B0;border-radius:8px;padding:6px 10px;margin:0 0 12px;}
.aic-find>i{color:#0077B0;} .aic-find input{flex:1;min-width:180px;border:0;outline:0;font-size:15px;padding:6px 2px;background:transparent;}
.aic-hit{outline:2px solid #f0b400;background:#fff6cc !important;border-radius:4px;}

/* ⏻ restart the ONU (next to the ONU power) */
.onu-pwr{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid #f26a10;background:#fff;color:#f26a10;cursor:pointer;vertical-align:middle;margin:0 4px;padding:0;font-size:13px;transition:background .15s,color .15s;}
.onu-pwr:hover{background:#f26a10;color:#fff;} .onu-pwr.off{border-color:#bbb;color:#bbb;} .onu-pwr.off:hover{background:#fff;color:#6E6E6E;}

/* OLT & ONU: every number opens its ONU list */
.onu-n{cursor:pointer;border-bottom:2px dotted currentColor;} .onu-links a{white-space:nowrap;display:inline-block;text-decoration:none;border-bottom:1px dotted currentColor;color:inherit;padding:4px 0;} .isp-card.onu-sel{box-shadow:0 0 0 2px var(--c,#1676c7) inset;} .onu-grid > div{cursor:pointer;} .onu-grid > div:hover{background:#f4f8fd;}

/* ↑ / ↓ to the top / the bottom of a long page */
#pgArrows{position:fixed;right:14px;bottom:16px;z-index:29;display:flex;flex-direction:column;gap:6px;}
#pgArrows button{width:38px;height:38px;border-radius:50%;border:none;background:var(--topbar-2,#00305d);color:#fff;font-size:15px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.28);opacity:.85;}
#pgArrows button:hover{opacity:1;}
#pgArrows button[hidden]{display:none;}
@media (max-width:760px){ #pgArrows{right:auto;left:10px;bottom:14px;} #pgArrows button{width:42px;height:42px;} }
body:not(.qb-ready) #pgArrows{display:none;}
@media print{ #pgArrows{display:none!important;} }

/* Arctic's right-side slides (srlslide / glslide / kchatslide): a tab on each panel's left edge; a click slides the panel in (0.4 s), the other tabs hide */
#rightrail{position:static;display:block;top:auto;transition:none;}
.arc-slide{position:fixed;bottom:37px;right:0;z-index:1103;transform:translateX(100%);transition:transform .4s ease-in-out;box-sizing:border-box;}
.arc-slide.open{transform:none;box-shadow:0 6px 24px rgba(0,0,0,.25);}
.arc-srl{width:min(750px,calc(100vw - 60px));height:min(840px,calc(100vh - 120px));background:#fff;border:1px solid #d9d7d7;padding:10px;}
.arc-gl{width:min(450px,calc(100vw - 60px));height:min(650px,calc(100vh - 120px));background:#00305d;padding:10px;}
.arc-kc{width:min(340px,calc(100vw - 60px));height:min(460px,calc(100vh - 120px));background:#00305d;}
.arc-tab{position:absolute;left:-32px;width:32px;height:65px;writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.4;transition:opacity .2s;user-select:none;}
.arc-tab:hover,.arc-slide.open .arc-tab{opacity:1;}
.arc-srl .arc-tab{background:#008548;bottom:148px;} .arc-gl .arc-tab{background:#ff0000;bottom:80px;} .arc-kc .arc-tab{background:#9A5C00;bottom:14px;}
#rightrail.one-open .arc-slide:not(.open) .arc-tab{display:none;}
.arc-tab .chat-badge{transform:rotate(180deg);margin:4px 0 0;}
.arc-body{height:100%;overflow-y:auto;}
.arc-search{display:flex;align-items:center;gap:8px;border:1px solid #c9d3de;border-radius:3px;padding:0 10px;background:#fff;margin:4px auto 10px;max-width:520px;}
.arc-search input{border:none;flex:1;padding:9px 2px;font-size:14px;outline:none;background:transparent;} .arc-search i{color:#7a8899;}
.arc-list a{display:block;padding:6px 8px;border-bottom:1px solid #eef1f5;color:inherit;text-decoration:none;} .arc-list a:hover{background:#eef5fc;}
.arc-srl-h{display:flex;gap:8px;align-items:center;margin:4px 0 8px;font-size:14px;}
.arc-gl-list table{width:100%;background:#fff;} .arc-gl-list th{background:#e9eef4;}
#kcSlide #chatDrawer{position:static;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;}
@media(max-width:960px){ #rightrail{display:block;} .arc-tab{display:none;} .arc-slide:not(.open){visibility:hidden;} .arc-slide{bottom:70px;} }   /* phone: no side tabs (as before); the top-bar chat icon still opens the Chat panel */
@media print{ #rightrail{display:none!important;} }
#pgArrows{right:44px;} @media (max-width:760px){ #pgArrows{right:auto;} }

.onu-more-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 2px;}

/* Network Management */
.nms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;padding:10px;}
.nms-dev{display:flex;gap:10px;align-items:flex-start;border:1px solid #e3e8ef;border-left:5px solid #9aa5b1;border-radius:6px;padding:8px 10px;background:#fff;cursor:pointer;}
.nms-dev.up{border-left-color:#17803A;} .nms-dev.down{border-left-color:#c0182b;background:#fff4f4;} .nms-dev .note{margin:1px 0 0;}
.nms-dot{width:12px;height:12px;border-radius:50%;background:#9aa5b1;margin-top:3px;flex:none;} .nms-dev.up .nms-dot{background:#17803A;box-shadow:0 0 6px #17803A;} .nms-dev.down .nms-dot{background:#c0182b;animation:nmsBlink 1s infinite;}
@keyframes nmsBlink{50%{opacity:.25;}}
.nms-sev{display:inline-block;color:#fff;border-radius:3px;padding:0 6px;font-size:10.5px;font-weight:700;text-transform:uppercase;vertical-align:1px;}
.nms-al tr.hot td{background:#fff1f1;} .nms-al tr.acked td{background:#fffbea;}
.nms-ppl{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px;} .nms-pp{display:flex;gap:6px;} .nms-pp input{flex:1;min-width:0;}
#nmsBar{position:sticky;left:0;right:0;top:0;z-index:2000;background:#c0182b;color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.35);animation:nmsPulse 1.2s infinite;}
@keyframes nmsPulse{50%{background:#8f0f1e;}}
.nms-bar-in{display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap;} .nms-bar-in > i{font-size:20px;} .nms-bar-t{flex:1;min-width:180px;font-size:14px;} .nms-bar-t span{opacity:.85;}
#nmsBar .btn{background:#fff;color:#c0182b;border-color:#fff;} #nmsBar .btn.secondary{background:transparent;color:#fff;border-color:#fff;}
@media print{ #nmsBar{display:none!important;} }

/* network diagram */
.nd-tree{background:#fff;border:1px solid #e3e8ef;border-radius:8px;padding:12px;}
.nd-root{display:inline-block;background:#0b2a4a;color:#fff;border-radius:18px;padding:6px 14px;font-weight:700;}
.nd-branch{margin:10px 0 0 14px;padding-left:16px;border-left:2px solid #c9d6e4;}
.nd-router{display:inline-flex;gap:6px;align-items:center;border:1px solid #c9d6e4;border-radius:6px;padding:6px 10px;background:#f6f9fc;margin-left:-16px;position:relative;}
.nd-router::before{content:'';position:absolute;left:-2px;top:50%;width:16px;border-top:2px solid #c9d6e4;transform:translateX(-100%);}
.nd-kids{margin:6px 0 0 18px;padding-left:16px;border-left:2px dashed #d5dde8;}
.nd-olt{border:1px solid #e3e8ef;border-left:5px solid #9aa5b1;border-radius:6px;margin:8px 0;background:#fff;} .nd-olt.up{border-left-color:#17803A;} .nd-olt.down{border-left-color:#c0182b;background:#fff4f4;}
.nd-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;cursor:pointer;} .nd-car{margin-left:auto;color:#667;}
.nd-router .nms-dot,.nd-olt .nms-dot{display:inline-block;margin:0;} .nd-router.up .nms-dot,.nd-olt.up .nms-dot{background:#17803A;} .nd-router.down .nms-dot,.nd-olt.down .nms-dot{background:#c0182b;}
.nd-tag{background:#eef3f8;border-radius:10px;padding:1px 8px;font-size:11.5px;} .nd-tag.fib{background:#e6f4ff;color:#0a5a99;} .nd-tag.bad{background:#fdecec;color:#c0182b;font-weight:700;}
.nd-pons{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;padding:0 10px 10px;}
.nd-pon{border:1px solid #e3e8ef;border-top:4px solid #17803A;border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:1px;font-size:12px;cursor:pointer;background:#fbfdff;}
.nd-pon.weak{border-top-color:#946000;} .nd-pon.down{border-top-color:#c0182b;background:#fff4f4;} .nd-pon.sel{box-shadow:0 0 0 2px #0077B0 inset;}
.nd-ponbox{margin:0 10px 10px;border-top:1px solid #eef1f5;padding-top:6px;}
.nd-dbar{height:6px;background:#eef1f5;border-radius:3px;overflow:hidden;margin-bottom:2px;} .nd-dbar i{display:block;height:100%;background:#0077B0;}
tr.nd-sum td{background:#f4f7fb;}
@media (max-width:760px){ .nd-tree{padding:8px;} .nd-branch{margin-left:2px;padding-left:8px;} .nd-router{margin-left:-8px;} .nd-router::before{width:8px;} .nd-kids{margin-left:2px;padding-left:6px;} .nd-pons{grid-template-columns:1fr 1fr;padding:0 6px 8px;} .nd-ponbox{margin:0 4px 8px;} .nd-onus td,.nd-onus th{padding:5px 6px;} .nd-onus td:nth-child(2){min-width:90px!important;} }

.nms-map{height:440px;border-radius:6px;border:1px solid #e3e8ef;} @media (max-width:760px){ .nms-map{height:360px;} }
.nms-place{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px;} .nms-place select{max-width:100%;}
.nms-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:#556;margin-top:6px;} .nms-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px;}
.nms-pin{background:none;border:none;} .nms-pin-in{border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);font-size:13px;}
.nms-pin-in.down,.nms-pin-in.dark{animation:nmsBlink 1s infinite;}
/* NMS physical view (js/nmsnet.js) */
.pw-dots{-webkit-text-security:disc;}
.nms-vsw{display:inline-flex;border:1px solid #c9d6e6;border-radius:8px;overflow:hidden;vertical-align:middle;}
.nms-vsw button{border:0;background:#fff;color:#0a5a99;padding:6px 10px;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.nms-vsw button.on{background:#0077B0;color:#fff;font-weight:700;}
.nms-gwrap{padding:6px 8px 0;}
.nms-graph{width:100%;height:auto;max-height:620px;display:block;background:#f6f9fd;border-radius:8px;user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y pinch-zoom;}
.nms-gwrap.arr .nms-graph{touch-action:none;outline:2px dashed #0077B0;}
.nms-gn{cursor:grab;} .nms-gn:active{cursor:grabbing;}
.nms-gnt{font-size:12px;fill:#223;text-anchor:middle;font-weight:600;paint-order:stroke;stroke:#f6f9fd;stroke-width:3px;}
.nms-gl{cursor:pointer;} .nms-gt{font-size:11.5px;fill:#333;text-anchor:middle;font-weight:700;paint-order:stroke;stroke:#f6f9fd;stroke-width:3px;} .nms-gt.op{fill:#556;font-weight:600;font-size:10.5px;} .nms-gt.bad{fill:#c0182b;}
.nms-gfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;}
.nms-key{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;} .nms-key i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.nms-st{display:inline-block;border-radius:10px;padding:1px 9px;font-size:11.5px;font-weight:700;background:#eef1f5;color:#667;text-transform:lowercase;white-space:nowrap;}
.nms-st.up{background:#e3f6e8;color:#1e7e34;} .nms-st.down,.nms-st.disabled{background:#fdecec;color:#c0182b;} .nms-st.open{background:#eef1f5;color:#556;}
.nms-lt tr.down td,.nms-lt tr.disabled td{background:#fff7f7;}
.nms-badge{display:inline-block;border-radius:8px;padding:2px 9px;font-size:12px;font-weight:800;vertical-align:3px;} .nms-badge.ok{background:#e3f6e8;color:#1e7e34;} .nms-badge.bad{background:#c0182b;color:#fff;} .nms-badge.wait{background:#fff3d6;color:#9a6a00;}
.nms-rb{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:#8a90a6;} .nms-rb.ok{background:#17803A;} .nms-rb.bad{background:#c0182b;} .nms-rb.wait{background:#946000;}
.nms-ring-h{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start;} .nms-ring-h h3{margin:0 0 4px;font-size:20px;} .nms-ring-b{display:flex;gap:8px;flex-wrap:wrap;}
.nms-ringadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .nms-ringadd select{width:auto;max-width:100%;}
.nms-ringpick{max-height:240px;overflow:auto;border:1px solid #e3e7ee;border-radius:6px;padding:6px;}
.nms-ringpick label{display:block;margin:2px 0;font-weight:400;}
.nms-lstate{font-size:13px;} .nms-spark{width:100%;height:90px;background:#f6f9fd;border-radius:6px;margin-top:4px;}
.nms-ups{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:8px;}
.nms-up{border:1px solid #e3e7ee;border-left:4px solid #8a90a6;border-radius:8px;padding:10px;background:#fff;} .nms-up.up{border-left-color:#17803A;} .nms-up.down,.nms-up.disabled{border-left-color:#c0182b;background:#fffafa;}
.nms-up-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0;} .nms-up-g span{display:block;font-size:11px;color:#778;text-transform:uppercase;} .nms-up-g b{font-size:13px;}
.nms-up-a{display:flex;gap:6px;flex-wrap:wrap;}
@media (max-width:600px){ .nms-up-g{grid-template-columns:repeat(2,1fr);} .nms-ups{grid-template-columns:1fr;} .nms-vsw button{padding:6px 8px;} }
@media (max-width:700px){ .nms-gnt{font-size:24px;stroke-width:5px;} .nms-gt{font-size:22px;stroke-width:5px;} .nms-gt.op{font-size:19px;} .nms-gn circle:first-of-type{r:20px;} .nms-graph{min-height:300px;} }
.nms-grp{border:1px solid #e3e7ee;border-left:4px solid #8a90a6;border-radius:6px;padding:7px 10px;margin:0 0 8px;font-size:13px;line-height:1.9;} .nms-grp.ok{border-left-color:#17803A;} .nms-grp.half{border-left-color:#946000;background:#fffaf0;} .nms-grp.bad{border-left-color:#c0182b;background:#fff5f5;}
.nms-short{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 12px 2px;font-size:12px;color:#556;border-top:1px solid #eef1f5;} .nms-short span{white-space:nowrap;} .nms-short b{color:#0a3d6b;background:#eaf3fb;border-radius:4px;padding:0 5px;margin-right:3px;}
.nms-shortedit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;} .nms-shortedit label{margin:0;font-weight:600;}
/* NMS: KHATA-format ring header, short-name key, end tags, link card, faceplate */
.nms-ring .panel-body .kv{grid-template-columns:130px 1fr;}
.nms-ring-h{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;} .nms-ring-b{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;}
.nms-showbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px 0;}
.nms-gp{font-size:11px;fill:#334;text-anchor:middle;font-weight:600;paint-order:stroke;stroke:#f6f9fd;stroke-width:3px;}
.nms-shortk{padding:8px 12px 4px;border-top:1px solid #eef1f5;} .nms-sk{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2px 18px;font-size:12.5px;}
.nms-sk>div{display:grid;grid-template-columns:76px 1fr;gap:6px;} .nms-sk .s{font-weight:700;color:#223;} .nms-sk span:last-child{color:#556;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nms-short{display:none;}
.nms-ends{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0;} .nms-end{border:1px solid #e3e7ee;border-radius:6px;padding:8px 10px;} .nms-end .kv{grid-template-columns:100px 1fr;}
.nms-face{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px;margin:4px 0 6px;}
.nms-port{border:1px solid #cfd6df;border-top:5px solid #8a90a6;border-radius:5px;padding:4px 5px;background:#fff;font-size:11.5px;display:flex;flex-direction:column;gap:1px;text-align:center;min-height:56px;}
.nms-port b{font-size:13px;color:#223;} .nms-port span{color:#445;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .nms-port i{font-style:normal;font-weight:600;}
.nms-port.up{border-top-color:#17803A;} .nms-port.down{border-top-color:#c0182b;background:#fff7f7;} .nms-port.empty{border-top-color:#c8ced8;background:#f7f8fa;} .nms-port.off{border-top-color:#222;background:#eef0f3;}
.nms-port[onclick]{cursor:pointer;} .nms-port[onclick]:hover{box-shadow:0 0 0 2px #0084bf33;}
@media (max-width:700px){ .nms-gp{font-size:20px;stroke-width:5px;} .nms-ends{grid-template-columns:1fr;} .nms-sk{grid-template-columns:1fr;} }
.sys-click{cursor:pointer;transition:box-shadow .15s;} .sys-click:hover,.sys-click.on{box-shadow:0 0 0 2px #0084bf55;} .sys-more{float:right;font-size:11px;color:#0a5a99;text-transform:none;font-weight:600;}
.sys-det td{vertical-align:top;} .sys-det tr.sub td:first-child{padding-left:22px;color:#556;} .sys-cmd{background:#f3f5f8;border:1px solid #e3e7ee;border-radius:4px;padding:1px 5px;font-size:11.5px;white-space:nowrap;}
.sys-det td.num{white-space:nowrap;} .sys-det a{color:#0a5a99;}

/* Menus & Features (js/menuctl.js) */
.mc-table tr.mc-top td{background:#f4f7fb;}
.mc-table tr.mc-off td:first-child{color:#6E6E6E;text-decoration:line-through;}
.mc-hid{color:#b07800;font-weight:600;} .mc-bg{color:#56627A;font-size:12px;} .mc-hidm{display:block;font-size:11px;opacity:.65;margin-left:16px;} .mc-hidgrp{border-top:1px solid rgba(255,255,255,.12);margin-top:6px;}

/* Support Tickets dashboard (js/support.js tkDash) — cards like the OLT card */
.tkd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:14px;}
.tkd-card{background:#fff;border:1px solid #e3e7ee;border-left:5px solid #1676c7;border-radius:12px;padding:14px 16px;}
.tkd-t{font-size:12.5px;color:#5c6577;text-transform:uppercase;letter-spacing:.3px;}
.tkd-n{display:block;font-size:24px;font-weight:800;margin:4px 0 6px;text-decoration:none;}
.tkd-ls{font-size:14px;line-height:2;}
.tkd-l{color:inherit;text-decoration:none;border-bottom:1.5px dotted #9aa3b5;padding-bottom:1px;white-space:nowrap;}
.tkd-l.on{background:#fff4c9;border-radius:4px;padding:0 4px;}
/* NMS: why an alarm rang, who closed it with which reason */
.nms-cause{margin-top:4px;font-size:12px;line-height:1.4;padding:4px 8px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 8%,#fff);border-radius:0 6px 6px 0;}
.nms-cause b{color:var(--c);margin-right:4px;}
.nms-fixed{margin-top:4px;font-size:12px;color:#5a4a00;background:#fff7d6;padding:4px 8px;border-radius:6px;}
.nms-rs{display:flex;flex-direction:column;gap:4px;margin:4px 0 10px;} .nms-r{display:flex;gap:8px;align-items:center;font-weight:400;padding:6px 8px;border:1px solid #e3e6ee;border-radius:8px;cursor:pointer;} .nms-r input{width:auto;margin:0;}
.nms-chip{display:inline-block;background:#eef3fb;border-radius:14px;padding:3px 10px;font-size:12px;margin:0 4px 4px 0;} .nms-chip b{color:#0077B0;}

/* dealer wallet */
.pop-wallet{border:1px solid #cfe7d8;background:#f2fbf5;border-radius:10px;padding:10px 12px;margin:0 0 10px;}
.pop-wallet>div{display:flex;flex-direction:column;} .pop-wallet span{font-size:12px;color:#466;font-weight:600;} .pop-wallet b{font-size:22px;color:#1e7a46;} .pop-wallet small{color:#567;}
.pop-wallet.low{border-color:#f1c2c2;background:#fff5f5;} .pop-wallet.low b{color:#c0392b;}
.pop-wallet details{margin-top:6px;} .pop-wallet summary{cursor:pointer;font-size:12.5px;color:#0b6b8a;}
.pop-wallet.neg b{color:#c0392b;}

/* the company looking at a dealer's own books */
.book-bar{position:fixed;left:50%;transform:translateX(-50%);top:8px;z-index:99990;background:#2b1d55;color:#fff;border-radius:22px;padding:8px 14px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;gap:8px;align-items:center;max-width:calc(100vw - 24px);flex-wrap:wrap;}
.book-bar button{border:0;border-radius:14px;padding:4px 10px;background:#fff;color:#2b1d55;font-weight:700;cursor:pointer;}
/* goods from the company in a dealer's books */
.dl-in{border:1px solid #e3e6ee;border-radius:10px;padding:10px 12px;margin:0 0 10px;} .dl-in.wait{border-color:#f0c36d;background:#fffaf0;}
.dl-in-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;} .dl-in-st{margin-left:auto;font-weight:700;font-size:12px;color:#8a6d00;} .dl-in:not(.wait) .dl-in-st{color:#1e7a46;}
.dl-ord-row{display:grid;grid-template-columns:1fr 90px;gap:6px;margin-bottom:6px;}
.dbk{border:1px solid #d8d2ee;border-radius:12px;padding:10px 12px;margin:10px 0;background:#faf9ff;} .dbk-h{font-weight:800;font-size:13px;color:#4b2fa0;margin-bottom:8px;letter-spacing:.3px;}
.dbk-sec{margin-top:10px;} .dbk-ord{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #eee;flex-wrap:wrap;} .dbk-ord.new{background:#fff8e6;}
.dp-menus{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 12px;} .dp-menu{display:flex;justify-content:space-between;align-items:center;font-weight:400;padding:4px 8px;border:1px solid #e3e6ee;border-radius:8px;margin:0;}

/* Admin inside a dealer's panel */
#dlImpBar{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:9998;background:#8e44ad;color:#fff;padding:5px 8px 5px 12px;border-radius:20px;font-size:13px;box-shadow:0 3px 12px rgba(0,0,0,.3);display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);white-space:nowrap}
#dlImpBar .btn{background:#fff;color:#8e44ad;border:0;padding:3px 10px;font-weight:700}
#dlImpBar b{overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){#dlImpBar{top:auto;bottom:78px;font-size:12px}}
.pop-loginas{background:#8e44ad!important;color:#fff!important}

/* company switch (several companies in one install) */
.co-switch{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:6px;padding:2px 8px;margin:0 6px;cursor:pointer;font-size:13px;vertical-align:middle;}
.co-switch:hover{background:rgba(255,255,255,.3);}

/* KHATA Cloud: account state bar + the Super Admin menu picker */
.cl-bar{background:#fff7d6;border:1px solid #f0d27a;color:#6b5200;padding:7px 12px;margin:8px 12px 0;border-radius:6px;font-size:13px;}
.cl-bar.gr{background:#ffe9d1;border-color:#f3b06b;color:#7a3e00;}
.cl-bar.ro{background:#fde2e0;border-color:#e99a93;color:#8a1c12;}
.cl-menus summary{cursor:pointer;color:var(--topbar-2);font-weight:600;}
.cl-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 14px;margin-top:8px;max-height:320px;overflow:auto;}
.cl-mg b{display:block;font-size:12px;margin-bottom:2px;}
.cl-mg label{display:block;font-size:12px;font-weight:400;}
.cl-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px;}
.cl-mods label{font-weight:400;font-size:12.5px;}

/* ===== Readability pass (2026-10-11, user: unclear / blurry text and colour combination problems — every page checked).
   Arctic's light blue #00a3e3 as TEXT on white is 2.9 : 1 (hard to read); text now uses a darker shade of the theme colour (≥ 4.5 : 1).
   The blue buttons, grey notes and the smallest texts are a little stronger. Backgrounds, the top bar and the menu stay as they were. ===== */
:root{ --link: color-mix(in srgb, var(--topbar-1) 58%, #000); --ink-soft:#56627A; }
.party-link,.history-entry .htext a,.pp-kv a,.pp-ev a,.rec-tabs button.on,.fin-led:hover,.st-name:hover,th.sortable.sorted i,.barcode-code,.enq-subtabs button.on{color:var(--link)!important;}
body.th-arctic .btn:not(.secondary):not(.danger):not(:hover){background:#0079b2;}
.note,.muted{color:var(--ink-soft);}
.barcode-code{font-size:11px;}
.pbtns button:disabled{color:#8a8f98;cursor:default;}   /* a page button that cannot be used: still readable */
/* phone: the sales / purchase form's "PRODUCT PANEL" tab sat over the left edge of the boxes — on a phone it is a small button above the form (2026-10-12) */
@media (max-width:700px){
  .pos-panel:not(.pp-open) #prodPanelTab{position:static;flex-direction:row;justify-content:center;gap:8px;margin:10px 12px 0;border:1px solid var(--border);border-radius:6px;padding:7px 10px;}
  .pos-panel:not(.pp-open) #prodPanelTab span{writing-mode:horizontal-tb;letter-spacing:.06em;font-size:12px;}
  .pos-panel:not(.pp-open) #prodPanelTab .pp-arrow{width:22px;height:22px;font-size:11px;}
  .pos-panel:not(.pp-open)>.panel-body{padding-left:12px!important;}
  .pos-panel:not(.pp-open){display:flex;flex-direction:column;} .pos-panel:not(.pp-open) #prodPanelTab{order:-1;}
}

/* Network Diagram → Fiber tree */
.ntr-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px;} .ntr-bar select,.ntr-bar input{padding:6px 8px;border:1px solid #c9d6e6;border-radius:6px;} .ntr-bar input{flex:1;min-width:180px;}
.nms-vsw button.on{background:#0077B0;color:#fff;}
.ntr-pon{border:1px solid #e1e8f0;border-radius:8px;padding:8px 10px;margin:0 0 10px;background:#fbfcfe;} .ntr-ph{font-size:13px;margin-bottom:4px;}
.ntr-sw{overflow-x:auto;} .ntr-svg{width:100%;min-width:720px;height:auto;display:block;} .ntr-dim{opacity:.25;}
.ntr-box{margin:6px 0 4px;padding-left:10px;border-left:3px solid #d5e2ef;} .ntr-bh{font-size:12.5px;margin-bottom:4px;}
.ntr-cls{display:flex;flex-wrap:wrap;gap:5px;}
.ntr-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid #d5dde8;border-radius:12px;background:#fff;font-size:12px;color:#1d2733;text-decoration:none;}
.ntr-chip i{width:8px;height:8px;border-radius:50%;display:inline-block;} .ntr-chip span{color:#56627A;} .ntr-chip em{color:#C23A28;font-size:10px;} .ntr-chip:hover{border-color:#0077B0;}
.ntr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 10px;} .ntr-tile{background:#fff;border:1px solid #dfe6ef;border-left:4px solid #0077B0;border-radius:6px;padding:7px 10px;}
.ntr-tile span{display:block;font-size:11px;text-transform:uppercase;color:#56627A;} .ntr-tile b{font-size:18px;color:#1d2733;}
@media (max-width:520px){.ntr-tiles{grid-template-columns:1fr 1fr;}}

/* Fiber tree drawing + fault finder (js/ftdraw.js) */
.ftd-wrap{overflow-x:auto;border:1px solid #e1e8f0;border-radius:8px;background:#fbfcfe;padding:6px;} .ftd-svg{display:block;} .ftd-dim{opacity:.22;} .ftd-c{cursor:pointer;}
.ftd-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:#56627A;margin:6px 0 0;} .ftd-key i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px;}
.ftd-faults{display:grid;gap:8px;} .ftd-f{border:1px solid #e1e8f0;border-left:4px solid var(--c);border-radius:6px;padding:8px 10px;background:#fff;} .ftd-fh{font-size:12.5px;color:#56627A;} .ftd-fh b{color:#1d2733;} .ftd-go{float:right;font-size:12px;}
.ftd-ft{font-size:13.5px;font-weight:600;color:#1d2733;margin:3px 0;} .ftd-fd{font-size:12.5px;} .ftd-fc{font-size:12px;color:#56627A;margin-top:2px;} .ftd-fx{font-size:12px;color:#56627A;margin-top:3px;}
.ftd-fn{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;} .ftd-fn a{font-size:12px;padding:3px 8px;border:1px solid #0077B0;border-radius:12px;color:#0077B0;text-decoration:none;}
.ftd-ok{padding:8px 10px;border-radius:6px;background:#E8F5EC;color:#17803A;font-size:13px;}
.ntr-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;} .ntr-chips button{flex:none;border:1px solid #c9d6e6;background:#fff;border-radius:14px;padding:4px 10px;font-size:12.5px;cursor:pointer;} .ntr-chips button.on{background:#0077B0;color:#fff;border-color:#0077B0;} .ntr-chips button.on small{color:#e6f1fa!important;}
.ntr-fb{background:#C23A28;color:#fff;border-radius:8px;padding:0 6px;font-size:11px;} .ntr-list{margin-top:8px;} .ntr-list summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--link,#0077B0);}

.ftd-sp{cursor:pointer;} .ftd-sp:hover rect{stroke:#FFB300;}

/* fault finder pictures (ক card line, খ strips) */
.ftd-mini{margin:4px 0 2px;} .ftd-mini svg{width:100%;max-width:440px;height:auto;display:block;}
.ftd-cnt{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0;} .ftd-cnt span{font-size:11.5px;font-weight:700;border-radius:10px;padding:1px 8px;} .ftd-cnt .ok{background:#E8F5EC;color:#17803A;} .ftd-cnt .bad{background:#fff;border:1px solid var(--c);color:var(--c);}
.ftd-strip{border:1px solid #e1e8f0;border-radius:8px;padding:8px 10px;background:#fff;margin-bottom:10px;}
.ftd-sh{display:grid;grid-template-columns:110px 1fr 1fr auto;font-size:10.5px;color:#7A8699;margin-bottom:2px;} .ftd-sh span:first-child{font-weight:700;color:#56627A;text-transform:uppercase;} .ftd-sh span:nth-child(3){text-align:center;}
.ftd-srow{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:0;padding:3px 0;cursor:pointer;border-radius:4px;} .ftd-srow:hover{background:#F2F7FC;}
.ftd-sl{font-size:12px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;} .ftd-sl small{color:#7A8699;}
.ftd-sb{display:inline-block;font-style:normal;background:#C23A28;color:#fff;border-radius:8px;padding:0 5px;font-size:10px;font-weight:700;line-height:15px;}
.ftd-sbar{position:relative;height:16px;margin-right:8px;} .ftd-sbar::before{content:'';position:absolute;left:0;right:0;top:7px;height:2px;background:#E4E9F0;}
.ftd-seg{position:absolute;top:5px;height:6px;border-radius:3px;} .ftd-seg.ok{background:#17803A;} .ftd-seg.cut{background:repeating-linear-gradient(90deg,#C23A28 0 6px,#F3B6AE 6px 9px);} .ftd-seg.loss{background:#C2410C;}
.ftd-dot{position:absolute;top:3px;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.ftd-x{position:absolute;top:-3px;pointer-events:none;transform:translateX(-50%);color:#C23A28;font-weight:900;font-size:14px;}
@media (max-width:520px){ .ftd-srow{grid-template-columns:104px 1fr;} .ftd-sl{font-size:11.5px;} .ftd-sh{display:block;margin-bottom:4px;} .ftd-sh span:not(:first-child){display:none;} }

/* why users are off, by OLT */
.ftd-stats{margin-top:10px;border:1px solid #e1e8f0;border-radius:8px;padding:8px 10px;background:#fff;} .ftd-st-h{font-size:12px;font-weight:700;color:#56627A;text-transform:uppercase;margin-bottom:6px;} .ftd-st-h small{text-transform:none;font-weight:400;}
.ftd-st{width:100%;border-collapse:collapse;font-size:12.5px;} .ftd-st th{font-size:11px;color:#56627A;font-weight:600;text-align:right;padding:4px 6px;border-bottom:1px solid #e1e8f0;white-space:nowrap;} .ftd-st th:first-child,.ftd-st td:first-child{text-align:left;}
.ftd-st th i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;} .ftd-st td{text-align:right;padding:5px 6px;border-bottom:1px solid #f0f3f7;white-space:nowrap;} .ftd-st tr[onclick]{cursor:pointer;} .ftd-st tr[onclick]:hover{background:#F2F7FC;}
.ftd-st tr.tot td{font-weight:700;border-top:2px solid #e1e8f0;} .ftd-st-0{color:#B0B8C4;} .ftd-st td:last-child{width:22%;min-width:90px;}
.ftd-st-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#EEF1F5;} .ftd-st-bar.ok{background:#DDF0E3;}

.ftd-stm{display:none;} .ftd-stm-r{padding:7px 0;border-bottom:1px solid #f0f3f7;cursor:pointer;} .ftd-stm-r.tot{cursor:default;border-bottom:0;border-top:2px solid #e1e8f0;}
.ftd-stm-t{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-bottom:4px;} .ftd-stm-t span{color:#56627A;white-space:nowrap;}
.ftd-stm-c{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;} .ftd-stm-c span{font-size:11px;border:1px solid var(--c);color:var(--c);border-radius:9px;padding:0 7px;}
@media (max-width:520px){ .ftd-stats .table-scroll{display:none;} .ftd-stm{display:block;} }

/* client profile card (fiber tree drawing) */
.ftd-card{position:fixed;z-index:100000;overflow-y:auto;width:300px;max-width:calc(100vw - 20px);background:#fff;border:1px solid #d5dde8;border-radius:10px;box-shadow:0 10px 30px rgba(0,30,60,.22);padding:10px 12px;font-size:12.5px;}
.ftd-card[hidden]{display:none!important;} .ftd-cx{position:absolute;right:6px;top:4px;border:0;background:none;font-size:15px;cursor:pointer;color:#56627A;}
.ftd-ch{display:flex;align-items:center;gap:6px;font-size:13.5px;padding-right:18px;} .ftd-ch i{width:10px;height:10px;border-radius:50%;flex:none;} .ftd-cs{font-size:12px;font-weight:600;margin:2px 0 6px;}
.ftd-cg{display:grid;gap:2px;} .ftd-cg div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #eef1f5;padding:2px 0;} .ftd-cg span{color:#56627A;} .ftd-cg b{text-align:right;font-weight:600;}
.ftd-cb{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;} .ftd-c.ftd-hl rect{stroke-width:3;filter:drop-shadow(0 0 3px rgba(0,119,176,.6));} .ftd-c:hover rect{stroke-width:2.5;}

.ftd-stitle{font-size:11px;font-weight:700;color:#56627A;text-transform:uppercase;margin-bottom:2px;} .ftd-sh,.ftd-srow{grid-template-columns:150px 1fr!important;} .ftd-sh{grid-template-columns:150px 1fr 1fr auto!important;}
.ftd-sl{overflow:visible;} .ftd-sbs{display:inline-flex;gap:3px;margin-left:auto;padding-right:8px;} .ftd-seg.power{background:#7C3AED;}
@media (max-width:520px){ .ftd-srow{grid-template-columns:128px 1fr!important;} .ftd-sh{display:none!important;} }

.ftd-dot{cursor:pointer;} .ftd-dot:hover,.ftd-dot.ftd-hl{transform:translateX(-50%) scale(1.5);box-shadow:0 0 0 2px #FFB300;z-index:2;}
.ftd-spl{max-height:220px;overflow-y:auto;border:1px solid #eef1f5;border-radius:6px;} .ftd-spr{display:grid;grid-template-columns:10px auto 1fr auto;gap:6px;align-items:center;padding:4px 6px;border-bottom:1px solid #f3f5f8;cursor:pointer;font-size:12px;}
.ftd-spr:hover{background:#F2F7FC;} .ftd-spr i{width:8px;height:8px;border-radius:50%;} .ftd-spr span{color:#56627A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ftd-spr small{color:#56627A;white-space:nowrap;}

.onu-readbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:#56627A;margin:0 0 10px;} .onu-age{font-size:10.5px;color:#7A8699;font-weight:400;white-space:nowrap;}

/* Arctic look on a computer (user, 2026-10-12, screenshots ours vs Arctic): the page reaches the right edge; the quick menu is a pale grey ☰
   at the right edge that slides its panel in when the mouse is on it (Arctic .quickslide: top 130 px, 0.4 s); thinner Serial / Product / Chat tabs */
@media (min-width:761px){
  body.qb-ready #content{padding-right:20px;} body.qb-ready .page-head{padding-right:0;}
  #quickbar{top:130px;right:0;z-index:9999;flex-direction:row;align-items:flex-start;transform:translateX(300px);transition:transform .4s ease-in-out;pointer-events:none;}
  #quickbar.open{transform:none;}
  #quickbar #qbToggle,#quickbar:not(.open) #qbToggle{pointer-events:auto;width:24px;height:34px;padding:0;border-radius:3px 0 0 3px;background:#ccc;color:#333;opacity:.4;box-shadow:none;font-size:13px;}
  #quickbar #qbToggle:hover,#quickbar.open #qbToggle{opacity:1;background:#ccc;}
  #quickbar #qbPanel,#quickbar:not(.open) #qbPanel{transform:none;opacity:1;width:300px;height:auto;padding:8px;overflow:visible;border-radius:0 0 0 6px;pointer-events:auto;}
  #quickbar:not(.open) #qbPanel{visibility:hidden;transition:visibility 0s .4s;} #quickbar.open #qbPanel{visibility:visible;}
  .arc-tab{left:-28px;width:28px;height:62px;font-size:14px;}
}

.att-pull{border:1px solid #e1e8f0;border-radius:6px;padding:8px 10px;margin:0 0 8px;} .att-pull-h{margin-bottom:6px;} .att-pull-f{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;} .att-pull-f label{display:flex;flex-direction:column;font-size:12px;gap:2px;} .att-pull-f label.chk{flex-direction:row;align-items:center;gap:6px;} .att-pull-s{margin-top:8px;font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* Price List panels (Arctic right-side-add 460 px / right-side wide): js/pricelist.js */
.pl-side{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100vw;background:#fff;z-index:1200;box-shadow:-6px 0 24px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .3s ease-in-out;display:flex;flex-direction:column;}
.pl-side.wide{width:calc(100vw - 250px);min-width:min(100vw,420px);} .pl-side.open{transform:none;} .pl-in{display:flex;flex-direction:column;height:100%;min-height:0;}
.pl-h{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,var(--topbar-1,#00a3e3),var(--th-btn,#0077B0));color:#fff;padding:10px 14px;font-weight:700;font-size:13px;} .pl-x{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;}
.pl-b{padding:14px;overflow-y:auto;flex:1;} .pl-b label{display:block;font-size:12.5px;margin-bottom:3px;}
.pl-cfg{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;margin-bottom:10px;} .pl-cfg label{display:flex;flex-direction:column;font-size:12px;gap:2px;} .pl-cfg label.chk{flex-direction:row;align-items:center;gap:5px;}
.pl-bcw{display:flex;flex:1;min-height:0;} .pl-bcl{width:260px;border-right:1px solid #e1e8f0;display:flex;flex-direction:column;min-height:0;} .pl-bcl input{margin:8px;width:auto;}
.pl-bcl ul{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;} .pl-bcl li{padding:7px 10px;border-bottom:1px solid #f0f3f7;cursor:pointer;font-size:12.5px;display:flex;flex-direction:column;} .pl-bcl li span{font-size:11px;color:#56627A;} .pl-bcl li:hover{background:#F2F7FC;} .pl-bcl li.active{background:#0077B0;color:#fff;} .pl-bcl li.active span{color:#e6f1fa;}
.pl-bcr{flex:1;padding:12px;overflow:auto;background:#f4f6f9;} .pl-sheet{background:#fff;margin:0 auto;padding:6mm;box-shadow:0 1px 6px rgba(0,0,0,.15);} .pl-sheet.A4.portrait{width:210mm;} .pl-sheet.A4.landscape{width:297mm;} .pl-sheet.A5.portrait{width:148mm;} .pl-sheet.A5.landscape{width:210mm;} .pl-sheet.Letter.portrait{width:216mm;} .pl-sheet.Letter.landscape{width:279mm;}
.pl-grid{display:grid;gap:3mm;} .pl-lab{border:1px dashed #bbb;padding:2mm;text-align:center;} .pl-ln{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pl-lb svg{width:100%;height:34px;} .pl-lc{font-size:10px;letter-spacing:1px;} .pl-lp{font-size:12px;font-weight:700;}
.pl-stw{display:flex;justify-content:center;padding:10px;background:#f4f6f9;border-radius:6px;margin-bottom:10px;} .pl-st{background:#fff;border:1px solid #ccc;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4px;overflow:hidden;}
.pl-sc{font-size:10px;color:#555;} .pl-sn{font-size:12px;max-height:2.6em;overflow:hidden;} .pl-sp{font-size:20px;font-weight:700;} .pl-sb svg{width:90%;height:30px;} .pl-scd{font-size:10px;letter-spacing:.5px;}
.pl-bc svg{width:96px;height:26px;display:block;margin:0 auto;}
@media (max-width:760px){ .pl-side,.pl-side.wide{width:100vw;min-width:0;} .pl-bcw{flex-direction:column;} .pl-bcl{width:auto;max-height:180px;border-right:0;border-bottom:1px solid #e1e8f0;} .pl-sheet{transform-origin:top left;} }
/* as Arctic: list headings may break onto two lines (Old / Price, Last / Update) so wide lists fit beside HISTORY */
table.arc-table th.sortable{white-space:normal;} table.arc-table th{line-height:1.25;}
.pl-bc svg{width:80px;height:24px;}
table.arc-table td .act-btn{margin:1px;} .pl-list table.arc-table{font-size:12px;} .pl-list table.arc-table th{font-size:12px;padding:6px 3px;} .pl-list table.arc-table td{padding:4px 3px;}
.history-entry .hsub{font-size:11.5px;color:#333;margin-top:2px;}
.vf-bal{font-size:17px;font-weight:700;color:#333;margin:0 0 8px;} .vf-bal i{color:#C23A28;font-size:14px;} .vf-plus{display:flex;gap:4px;} .vf-plus select{flex:1;} .vf-plus .btn{padding:0 10px;}

/* corner logo picture (Company Setup → App logo) */
.brandbox .b1 img.bicon{width:30px;height:30px;object-fit:contain;vertical-align:middle;margin:-4px 2px 0 0;background:#fff;border-radius:7px;padding:2px}
body.nav-collapsed .brandbox .b1 img.bicon,.collapsed .brandbox .b1 img.bicon{width:26px;height:26px}