/* Interface faces (v1.58.0): Inter + Noto Kufi Arabic, the services pair, loaded once by the page head
   (index.php) without blocking. Settings ▸ Theme can still pick another face per customer. */
:root{
  --ink:#eef2f9; --ink2:#ffffff; --panel:#ffffff; --panel2:#f3f6fc;
  --line:#e7edf6; --line2:#d5dfec;
  --txt:#0f1a29; --mut:#586675; --mut2:#93a1b3;
  --amber:#2563eb; --amber-d:#1d4ed8; --amber-soft:rgba(37,99,235,.10);
  --pos:#12996b; --neg:#e0484d; --info:#3b82f6;
  --rad:16px; --rad-sm:10px;
  --shadow:0 1px 2px rgba(16,26,40,.05), 0 18px 36px -18px rgba(16,26,40,.24);
  --shadow-sm:0 1px 2px rgba(16,26,40,.06);
  --ring:0 0 0 3px var(--amber-soft);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter','Cairo',system-ui,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--ink);color:var(--txt);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em}
small{font-weight:600}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num.pos{color:var(--pos)} .num.neg{color:var(--neg)} .num.zero{color:var(--mut)}
.muted{color:var(--mut)} .muted.small{font-size:12px}
code{font-family:var(--mono);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:5px;color:var(--amber)}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:700;font-size:13px;border:1px solid var(--line2);
  background:var(--ink2);color:var(--txt);border-radius:var(--rad-sm);padding:9px 15px;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s,transform .06s;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:var(--shadow-sm)}
.btn:hover{border-color:var(--amber);color:var(--amber-d)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{background:linear-gradient(180deg,#3b74f2,var(--amber));border-color:var(--amber-d);color:#fff;
  box-shadow:0 6px 15px -5px rgba(37,99,235,.55)}
.btn-primary:hover{filter:brightness(1.05);color:#fff;border-color:var(--amber-d);box-shadow:0 9px 22px -6px rgba(37,99,235,.65)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--mut);box-shadow:none}
.btn-ghost:hover{background:var(--panel2);color:var(--txt);border-color:transparent}
.btn-danger{color:var(--neg);border-color:transparent;background:transparent;box-shadow:none}
.btn-danger:hover{background:rgba(224,74,79,.11);border-color:transparent;color:var(--neg)}
.btn.lg{padding:13px 22px;font-size:15px;width:100%;justify-content:center;border-radius:12px}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.xs{padding:4px 9px;font-size:11.5px}

/* ---------- auth / setup ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 600px at 75% -15%, #dbe6fb 0%, var(--ink) 55%)}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);padding:30px;box-shadow:var(--shadow)}
.auth-card.setup{max-width:480px;text-align:center}
.auth-card h1{font-size:22px;margin:18px 0 8px}
.auth-card form{display:flex;flex-direction:column;gap:13px;margin-top:18px}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mut);font-weight:700}
.auth-card input{font-family:var(--sans)}
.lang-switch{display:inline-block;margin-top:14px;color:var(--amber);font-weight:700;font-size:13px}
.err{color:var(--neg);font-size:12.5px;font-weight:700}
.setup-log{text-align:start;background:var(--ink);border:1px solid var(--line);border-radius:var(--rad-sm);
  padding:12px;margin-top:16px;font-family:var(--mono);font-size:12px;max-height:240px;overflow:auto;white-space:pre-wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px}
.brand .dot{width:11px;height:11px;border-radius:4px;background:linear-gradient(135deg,#3b74f2,var(--amber-d));box-shadow:0 0 0 4px var(--amber-soft)}
.brand-logo{height:26px;width:auto;max-width:130px;object-fit:contain;border-radius:6px}

/* ---------- inputs ---------- */
input,select,textarea{font-family:var(--sans);font-size:13.5px;color:var(--txt);background:var(--ink2);
  border:1px solid var(--line2);border-radius:var(--rad-sm);padding:10px 12px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--mut2)}
input[type=checkbox]{width:auto;accent-color:var(--amber)}
select{cursor:pointer}
label.field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut);font-weight:700}
label.inline{flex-direction:row;align-items:center;gap:8px;color:var(--txt)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:248px;flex:0 0 248px;background:var(--ink2);border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{padding:18px 18px 8px;border-bottom:1px solid var(--line)}
.side-user{position:relative;margin:10px 12px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
.side-user:hover,.side-user:focus{background:var(--amber-soft);border-color:var(--amber);outline:none}
.su-ava{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3b74f2,var(--amber-d));color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.su-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.su-meta .su-name{font-weight:800;font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-meta small{color:var(--mut2);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.su-caret{color:var(--mut2);font-size:11px;flex:0 0 auto}
.user-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--panel);border:1px solid var(--line2);
  border-radius:12px;box-shadow:0 12px 34px rgba(20,30,45,.16);padding:6px;z-index:60;display:flex;flex-direction:column;gap:2px}
.um-item{display:block;width:100%;text-align:start;padding:9px 12px;border:none;background:none;border-radius:8px;
  font:inherit;font-size:13px;font-weight:600;color:var(--txt);cursor:pointer;text-decoration:none}
.um-item:hover{background:var(--amber-soft)}
.um-danger{color:#dc2626}
.um-danger:hover{background:rgba(220,38,38,.10)}
.ver{color:var(--mut2);font-size:11px;text-align:center;padding-top:8px}
.side .bt{font-size:13.5px;line-height:1.25}
.side nav{flex:1;overflow:auto;padding:10px 10px}
.side nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:var(--mut);font-weight:700;font-size:13.5px;margin-bottom:2px;transition:background .14s,color .14s}
.side nav a:hover{background:var(--panel2);color:var(--txt)}
.side nav a.on{background:var(--amber-soft);color:var(--amber-d);font-weight:800}
.side nav a.on::before{content:"";position:absolute;inset-inline-start:0;top:7px;bottom:7px;width:3px;border-radius:0 4px 4px 0;background:var(--amber)}
.side nav a .ic{width:22px;text-align:center;font-size:15px;opacity:.9}
.side-foot{border-top:1px solid var(--line);padding:12px}
.who{font-weight:700;font-size:13px;display:flex;flex-direction:column}
.who small{color:var(--mut2);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.side-actions{display:flex;gap:8px;align-items:center;margin-top:10px}
.lang-switch{border:1px solid var(--line2);border-radius:6px;padding:4px 9px;font-size:12px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:5}
.page-title{font-size:18px;flex:1}
.rate-chip{display:inline-flex;align-items:center;height:38px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  color:var(--amber-d);background:var(--amber-soft);cursor:pointer;border:1px solid rgba(37,99,235,.2);
  padding:0 14px;border-radius:999px;transition:background .15s,border-color .15s}
.rate-chip:hover{background:rgba(37,99,235,.16);border-color:var(--amber)}
.content{padding:22px;max-width:1320px;width:100%}

/* ---------- cards / panels ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow-sm)}
.card + .card{margin-top:18px}
.card-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.card-head h2{font-size:15px;flex:1}
.card-body{padding:18px 20px}
.card-body.tight{padding:0}

/* KPI grid */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:17px 19px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.kpi::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--amber)}
.kpi .k-lbl{color:var(--mut);font-size:12px;font-weight:700}
.kpi .k-val{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.kpi.green::before{background:var(--pos)} .kpi.red::before{background:var(--neg)} .kpi.blue::before{background:var(--info)}

/* ---------- tables ---------- */
.tbl-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--panel2);color:var(--mut);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;padding:11px 14px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--panel2)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:end;font-family:var(--mono);font-variant-numeric:tabular-nums}
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--mut)}
.tag.cust{color:var(--info);border-color:rgba(90,169,230,.35);background:rgba(90,169,230,.1)}
.tag.sup{color:var(--amber-d);border-color:rgba(37,99,235,.28);background:var(--amber-soft)}
.tag.off{opacity:.5}
.dual{display:inline-flex;flex-direction:column;line-height:1.2}
.dual b{font-size:12.5px} .dual span{font-size:11px;color:var(--mut)}

/* toolbar */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .grow{flex:1;min-width:160px}
.toolbar input,.toolbar select{max-width:260px}
.empty{padding:40px;text-align:center;color:var(--mut)}

/* ---------- forms grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px}
.fgrid .full{grid-column:1/-1}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
fieldset{border:1px solid var(--line);border-radius:var(--rad-sm);padding:14px;margin:0 0 14px}
legend{padding:0 8px;font-weight:800;font-size:12.5px;color:var(--amber)}

/* dual ledger entry signature: side-by-side cust/sup */
.ledger-sides{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ledger-side{border:1px solid var(--line);border-radius:var(--rad-sm);padding:12px;background:var(--ink2)}
.ledger-side h4{margin:0 0 10px;font-size:12.5px;display:flex;align-items:center;gap:7px}
.ledger-side.cust h4{color:var(--info)} .ledger-side.sup h4{color:var(--amber)}
.ledger-side h4::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(6,9,13,.72);display:grid;place-items:center;padding:20px;z-index:50;backdrop-filter:blur(2px)}
.modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);
  width:100%;max-width:760px;max-height:90vh;overflow:auto;padding:24px;position:relative;box-shadow:var(--shadow)}
.modal-box h3{font-size:17px;margin-bottom:16px}
.modal-x{position:absolute;inset-inline-end:14px;top:14px;background:none;border:none;color:var(--mut);font-size:17px;cursor:pointer}
.modal-x:hover{color:var(--txt)}

/* ---------- toast ---------- */
.toast{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translateX(-50%);
  background:#0f1a29;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:12px 20px;
  font-weight:700;font-size:13px;z-index:60;box-shadow:0 18px 44px -12px rgba(0,0,0,.5)}
.toast.ok{border-color:var(--pos);color:#67e0a3} .toast.bad{border-color:var(--neg);color:#fca5a5}

/* statement print sheet */
.statement-sheet{background:#fff;color:#10151c;border-radius:var(--rad);padding:0;overflow:hidden}
.statement-sheet .sh-head{padding:18px 22px;background:#10151c;color:#fff;display:flex;justify-content:space-between;align-items:center}
.statement-sheet table{font-size:12.5px}
.statement-sheet thead th{background:#eef2f6;color:#43505f;position:static}
.statement-sheet tbody td{border-color:#e3e9ef}
.statement-sheet tbody tr:hover{background:#f6f9fb}
.statement-sheet .num.pos{color:#138a5a} .statement-sheet .num.neg{color:#cc3a3f}
.sh-foot{padding:14px 22px;display:flex;justify-content:flex-end;gap:30px;border-top:2px solid #10151c;font-weight:800}

.help{font-size:11.5px;color:var(--mut2);margin-top:4px}
.only-mobile{display:none}

@media (max-width:860px){
  .side{position:fixed;z-index:40;transform:translateX(-110%);transition:.2s;box-shadow:var(--shadow)}
  html[dir=rtl] .side{transform:translateX(110%)}
  .side.open{transform:translateX(0)!important}
  .only-mobile{display:inline-flex}
  .ledger-sides{grid-template-columns:1fr}
  .content{padding:14px}
}
@media print{
  .side,.topbar,.form-actions,.row-actions,.toolbar,.btn{display:none!important}
  body{background:#fff} .content{padding:0} .statement-sheet{box-shadow:none}
}

/* ---------- backup utilities ---------- */
.btn-sm{padding:4px 9px;font-size:12px;border-radius:var(--rad-sm)}
.mono{font-family:var(--mono);font-size:12px;color:var(--mut)}
#bkTable td{vertical-align:middle}
#bkTable .btn-sm{margin-inline-start:4px}
.auto-toggle{display:flex;gap:10px;align-items:flex-start;background:var(--ink2);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:11px 13px;margin:4px 0 16px;cursor:pointer;font-size:13px;line-height:1.5}
.auto-toggle input{margin-top:3px;width:17px;height:17px;accent-color:var(--amber);flex:0 0 auto;cursor:pointer}
.auto-toggle span{color:var(--mut)}

/* ---- Vendor console ---- */
.vendor-shell{max-width:1180px;margin:0 auto;padding:18px}
.vendor-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;margin-bottom:16px;background:var(--panel,#12161f);
  border:1px solid var(--line,#232a36);border-radius:14px}
.vendor-top .brand{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.vc-grid{display:grid;grid-template-columns:1fr;gap:16px}
.vc-grid .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* vendor-in-tenant banner chip */
.vendor-chip{display:inline-flex;align-items:center;gap:8px;height:38px;
  padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:800;
  background:#fff7ed;color:#b45309;border:1px solid #fed7aa}
.vendor-chip .btn{padding:2px 8px}

.notice{padding:10px 12px;border-radius:10px;background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.30);color:var(--amber,#f59e0b);font-size:.9rem}

/* ---- Expired-screen module store ---- */
.store-list{display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow:auto;
  border:1px solid var(--line);border-radius:12px;padding:8px}
.auth-card label.store-row{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:9px;color:var(--txt);font-weight:600;font-size:14px;cursor:pointer;
  border:1px solid transparent;margin:0}
.auth-card label.store-row:hover{background:var(--amber-soft)}
.store-row>span{display:flex;align-items:center;gap:9px;color:var(--txt)}
.store-row input[type=checkbox]{width:18px;height:18px;margin:0}
.store-row b{font-family:var(--mono);color:var(--txt);white-space:nowrap;font-size:14px}
.store-row.store-base{background:var(--amber-soft);border-color:transparent}
.store-row.store-base b{color:var(--amber)}
.store-row.is-free{cursor:default}
.store-row.is-free b{color:var(--pos,#16a34a);font-weight:700;font-size:12.5px}
.total-box{display:flex;align-items:center;gap:6px;font-size:1.1rem;font-weight:800;
  padding:8px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber)}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}

/* ---- Vendor reports ---- */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.kpi{background:var(--panel,#12161f);border:1px solid var(--line,#232a36);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi-n{font-size:1.5rem;font-weight:800;font-family:'IBM Plex Mono',monospace}
.kpi-l{font-size:.72rem;color:var(--mut)}
.kpi.ok .kpi-n{color:var(--pos,#22c55e)} .kpi.warn .kpi-n{color:var(--amber,#f59e0b)} .kpi.bad .kpi-n{color:var(--neg,#ef4444)}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.rep-h{font-size:.86rem;margin:0 0 6px;color:var(--mut);font-weight:700}
.rep-t{width:100%;border-collapse:collapse;font-size:.85rem}
.rep-t td{padding:4px 6px;border-bottom:1px solid var(--line,#232a36)}
.rep-bar-cell{width:55%} 
.rep-bar{display:inline-block;height:8px;border-radius:4px;background:var(--amber,#f59e0b);min-width:2px}

/* ---- In-tenant reports ---- */
.rep-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.rep-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.rep-filter label{display:flex;flex-direction:column;font-size:.8rem;gap:2px}
.rep-print{margin-inline-start:auto}
.rep-bar.neg{background:var(--neg,#ef4444)}
@media print{
  .side,.topbar,.no-print,#menuBtn{display:none!important}
  .main,.content,.shell{display:block!important;margin:0!important;padding:0!important}
  .card{break-inside:avoid;border:1px solid #ccc}
  body{background:#fff;color:#000}
}

/* ---- Service reminders status ---- */
.tag.st-overdue{background:rgba(239,68,68,.15);color:var(--neg,#ef4444);border:1px solid rgba(239,68,68,.4)}
.tag.st-soon{background:rgba(245,158,11,.15);color:var(--amber,#f59e0b);border:1px solid rgba(245,158,11,.4)}
.tag.st-ok{background:rgba(34,197,94,.12);color:var(--pos,#22c55e);border:1px solid rgba(34,197,94,.35)}
tr.st-overdue td:first-child{box-shadow:inset 3px 0 var(--neg,#ef4444)}
tr.st-soon td:first-child{box-shadow:inset 3px 0 var(--amber,#f59e0b)}

/* ---- Tabs (service module) ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tab{background:none;border:none;color:var(--mut);padding:10px 16px;cursor:pointer;
  font-size:.92rem;font-weight:600;border-bottom:2px solid transparent;border-radius:0}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--txt);font-weight:800;border-bottom-color:var(--amber)}
.tab-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--neg);
  color:#fff;font-size:.72rem;line-height:18px;text-align:center;margin-inline-start:4px}

/* ---- Multi-service visit checkboxes ---- */
.chk-grid{border:1px solid var(--line,#232a36);border-radius:10px;padding:10px 12px;margin:4px 0 12px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.chk-title{grid-column:1/-1;font-size:.78rem;color:var(--mut);font-weight:700;margin-bottom:2px}
.chk{display:flex;align-items:center;gap:6px;font-size:.9rem;cursor:pointer}
.chk input{width:auto;margin:0}

/* ---- Sidebar sections (editable nav) ---- */
.nav-sec{margin-bottom:2px}
.nav-sec-h{display:flex;align-items:center;gap:7px;width:100%;background:none;border:none;cursor:pointer;
  color:var(--mut2);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 12px 4px;text-align:start;font-family:var(--sans)}
.nav-sec-h:hover{color:var(--txt)}
.nav-sec-h .chev{font-size:9px;transition:.15s;opacity:.75}
.nav-sec.collapsed .nav-sec-h .chev{transform:rotate(-90deg)}
.nav-sec.collapsed .nav-sec-body{display:none}
/* nav editor */
.nav-ed-sec{border:1px solid var(--line);border-radius:var(--rad-sm);padding:10px;margin-bottom:10px;background:var(--panel2)}
.nav-ed-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.nav-ed-head input{padding:5px 8px;font-size:13px;max-width:150px}
.nav-ed-mod{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;margin:4px 0;font-size:13px}
.nav-ed-mod .grow{flex:1}
.nav-ed-mod select{padding:3px 6px;font-size:12px;max-width:130px}
.mini{padding:2px 7px;font-size:12px;line-height:1.4;border-radius:6px}

/* ===== Features & Pricing (store) page ===== */
.store-page{max-width:1100px}
.store-hero h2{margin:0 0 4px;font-size:22px}
.store-hero{margin-bottom:14px}
.store-sec{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);margin:22px 0 10px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.mod-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.mod-card:hover{border-color:var(--amber);box-shadow:0 10px 30px rgba(20,30,45,.08)}
.mod-card.is-active{border-color:var(--amber)}
.mod-card.is-included{opacity:.96}
.mod-shot{background:#eef3fb;padding:12px 12px 0}
.mod-shot .sv{display:block;width:100%;height:auto;border-radius:10px 10px 0 0}
.mod-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.mod-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mod-top h4{margin:0;font-size:15px}
.chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--amber-soft);color:var(--amber-d)}
.chip.on{background:#dcfce7;color:#15803d}
.mod-feats{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.mod-feats li{position:relative;padding-inline-start:20px;font-size:13px;color:var(--txt)}
.mod-feats li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--amber);font-weight:800}
.mod-foot{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
.mod-price b{font-size:18px}
.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:700;font-size:13px;
  border:1px solid var(--line2);border-radius:10px;padding:7px 11px;user-select:none}
.switch:has(input:checked){background:var(--amber-soft);border-color:var(--amber);color:var(--amber-d)}
.switch input{accent-color:var(--amber);width:16px;height:16px}
.store-bar{position:sticky;bottom:0;margin-top:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 -6px 24px rgba(20,30,45,.06)}
.store-bar .field.inline{margin:0}
.store-total{margin-inline-start:auto;text-align:end}
.store-total div b{font-size:22px}
.nav-store{color:var(--amber-d);font-weight:800}
.nav-store.on{background:var(--amber-soft)}

/* demo read-only chip */
.demo-chip{display:inline-flex;align-items:center;gap:6px;height:38px;font-weight:800;font-size:12px;
  color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;padding:0 14px}

/* segmented month/year toggle */
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:3px;gap:2px}
.seg-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:9px;font-weight:800;font-size:13px;color:var(--mut);cursor:pointer;user-select:none;transition:.15s;margin:0}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt:has(input:checked){background:var(--ink2);color:var(--amber-d);box-shadow:var(--shadow-sm)}
/* price table in vendor pricing */
.price-tbl input{max-width:120px;text-align:end;font-family:var(--mono)}
.price-tbl td[data-disc]{color:var(--pos);font-weight:700}

/* history / audit */
.act-ins{color:var(--pos);background:rgba(18,153,107,.12);border-color:rgba(18,153,107,.3)}
.act-upd{color:var(--amber-d);background:var(--amber-soft);border-color:rgba(37,99,235,.28)}
.act-del{color:var(--neg);background:rgba(224,74,79,.10);border-color:rgba(224,74,79,.3)}
tr.is-reversed{opacity:.5}
.hist-diff{font-size:12px;max-width:340px}
.hist-diff div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modern topbar action cluster */
.top-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.top-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:1px solid var(--line2);background:var(--ink2);color:var(--mut);border-radius:11px;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,color .15s;text-decoration:none}
.top-btn:hover{color:var(--amber-d);border-color:var(--amber);background:var(--amber-soft)}
.top-btn.on{color:var(--amber-d);border-color:var(--amber);background:var(--amber-soft)}
.top-btn svg{width:18px;height:18px}
@media (max-width:560px){ .top-actions{gap:6px} .vendor-chip{display:none} }

/* prominent "try the demo" button */
.demo-cta{width:100%;justify-content:center;gap:9px;background:var(--amber-soft);
  border:1px solid var(--amber);color:var(--amber-d);box-shadow:none;font-weight:800}
.demo-cta:hover{background:rgba(37,99,235,.16);border-color:var(--amber-d);color:var(--amber-d);filter:none}
.demo-cta svg{width:18px;height:18px;flex:0 0 auto}

/* appearance color swatches */
.swatches{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.swatch{width:30px;height:30px;border-radius:9px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line2), var(--shadow-sm);cursor:pointer;padding:0;transition:transform .1s}
.swatch:hover{transform:scale(1.08)}
.swatch:disabled{cursor:not-allowed;opacity:.5}

/* =======================================================================
   Console theme — the same chrome as the admin app: dark navy rail,
   tinted page, elevated cards. The accent stays this app's own, so every
   rule below reads --amber / --ink rather than hard-coding a colour, and
   Settings ▸ Theme (accent, font, size, dark mode) still overrides it:
   theme_head() is injected after this file.
   ======================================================================= */
:root{
  --ink:#f4f6fb;
  --line:#eaedf4; --line2:#dde3ee;
  --shadow-sm:0 1px 2px rgba(20,33,60,.05),0 4px 16px rgba(20,33,60,.06);
  --shadow:0 12px 32px rgba(20,33,60,.14);
  --side-1:#1a2a48; --side-2:#101a30; --side-hover:#243653;
  --side-ink:#c7d2e6; --side-dim:#8ea9d8;
}
body{font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 600px at 100% -5%,var(--amber-soft),transparent 60%),
                   radial-gradient(900px 500px at -5% 0%,rgba(22,36,63,.06),transparent 55%);
  background-attachment:fixed}

/* ---- the rail ---- */
.side{background:linear-gradient(180deg,var(--side-1),var(--side-2));border-inline-end:0;padding:14px 10px}
.side .brand{background:#fff;color:#16243f;border-bottom:0;border-radius:14px;
  padding:13px 14px;margin-bottom:14px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.side .brand .bt{color:#16243f}
.side-user{margin:0 0 14px;padding:10px 12px;border:0;border-radius:var(--rad-sm);background:rgba(255,255,255,.06)}
.side-user:hover,.side-user:focus{background:rgba(255,255,255,.13);border:0}
.su-meta .su-name{color:#fff}
.su-meta small,.su-caret,.ver{color:var(--side-dim)}
.side nav{padding:0}
.side nav a{color:var(--side-ink);font-weight:600;padding:10px 12px;border-radius:var(--rad-sm)}
.side nav a:hover{background:var(--side-hover);color:#fff}
.side nav a.on{color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)),var(--amber)}
.side nav a.on::before{display:none}
.side nav a .ic{opacity:1}
.nav-sec-h{color:var(--side-dim);font-size:10px;letter-spacing:.6px;padding:14px 12px 4px}
.nav-sec-h:hover{color:#fff}
.side-foot{border-top:1px solid rgba(255,255,255,.10);padding:12px 4px 4px}

/* ---- surfaces ---- */
.topbar{background:rgba(255,255,255,.88)}
.card{box-shadow:var(--shadow-sm)}

/* =======================================================================
   v1.58.0 — refresh: the services look. Lighter type, one radius scale,
   flat accent buttons, quiet table headers, numbers in the same face as the
   text (tabular figures keep columns aligned). Tokens only where possible,
   so Settings ▸ Theme (accent, font, size, dark mode) still layers on top.
   ======================================================================= */
:root{
  --sans:'Inter','Noto Kufi Arabic',system-ui,'Segoe UI',sans-serif;
  --mono:var(--sans);
  --pos:#15803d; --neg:#dc2626;
  --rad:16px; --rad-sm:12px; --rad-lg:20px;
  --ring:0 0 0 3px var(--amber-soft);
  /* names the Fuel Drain screen uses — mapped so dark mode follows them */
  --muted:var(--mut); --fg:var(--txt); --hover:var(--panel2);
}
html[lang=ar] body{font-family:var(--sans)}
body{font-size:14.5px;line-height:1.55}
h1,h2,h3{font-weight:700;letter-spacing:-.005em}
.num,td.num,th.num,.kpi .k-val,.kpi-n,.rate-chip,.store-row b,.price-tbl input,.setup-log{font-family:var(--sans);font-variant-numeric:tabular-nums}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* buttons: flat accent, one weight */
.btn{font-weight:600;border-radius:var(--rad-sm)}
.btn-primary{background:var(--amber);border-color:var(--amber);box-shadow:0 1px 2px rgba(16,26,40,.08),0 4px 12px -4px var(--amber-soft)}
.btn-primary:hover{background:var(--amber-d);border-color:var(--amber-d);filter:none;box-shadow:0 2px 6px rgba(16,26,40,.10),0 8px 18px -6px var(--amber-soft)}
.btn.lg{border-radius:14px}
.demo-cta{font-weight:600}

/* inputs and labels */
input,select,textarea{border-radius:var(--rad-sm)}
label.field,.auth-card label,.chk-title{font-weight:600}
legend{font-weight:700}

/* cards, tables */
.card-head{padding:14px 20px}
.card-head h2{font-size:15.5px;font-weight:600}
thead th{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--mut)}
.tag{font-weight:600}
.kpi .k-lbl{font-weight:600}
.kpi .k-val{font-weight:700;font-size:25px;letter-spacing:-.01em}
.kpi-n{font-weight:700}
.modal-box{border-radius:var(--rad-lg)}

/* navigation: lighter, flat active pill */
.brand{font-weight:700}
.side nav a{font-weight:500}
.side nav a.on{font-weight:600;background:var(--amber);box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.nav-sec-h{font-weight:700}
.su-meta .su-name{font-weight:600}
.su-ava{font-weight:700}
.tab{font-weight:500}
.tab.on{font-weight:600}
.seg-opt{font-weight:600}
.total-box,.nav-store,.vendor-chip,.demo-chip{font-weight:700}

/* toast: centred in both directions (inset-inline-start flipped it off-centre in Arabic) */
.toast{inset-inline-start:auto;left:50%;font-weight:600}

/* v1.59.1 — phones: the top bar wraps instead of pushing the page sideways (Arabic overflowed 74 px at 393 px wide). */
@media (max-width:560px){
  .topbar{flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .page-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
  .top-actions .app-ver{display:none}
  .rate-chip,.demo-chip{height:34px;padding:0 10px}
  .top-btn{width:34px;height:34px}
}