/* PBX Console design system.
   Colors are tokens (one place to retheme). Layout uses logical properties (inline-start/end) so Arabic (dir=rtl) mirrors with no extra rules,
   except a few transforms marked [dir=rtl]. No inline styles anywhere: the CSP forbids them. */
/* "Mint" look (owner's design, 2026-10-23): mint gradient page, light sidebar with round icon bubbles, dark teal accent pills,
   large rounded translucent cards, pastel dashboard tiles. Platform Config > Theme still overrides --acc (and can bring back a dark sidebar). */
:root{
  --acc:#0f3d3e;--acc-d:#0a2c2d;--acc-l:#e1efed;--acc-t:#fff;
  --side:transparent;--side-2:#e3eeec;--side-3:#d3e3e0;--side-t:#3a5654;--side-h:#0f2a2b;--side-bubble:#e3edeb;
  --bg:#eef6f5;--bg-top:#f2f7f6;--surface:#fff;--glass:rgba(255,255,255,.74);--line:#dfeae8;--line-2:#ebf3f2;--text:#0f2a2b;--muted:#5d7472;--faint:#93a6a4;
  --ok:#0f7a43;--ok-l:#e5f5ec;--bad:#c4321f;--bad-l:#fdeeec;--warn:#9a5b00;--warn-l:#fff5e6;
  --r:18px;--r-sm:12px;--r-card:24px;--shadow:0 1px 2px rgba(15,61,62,.04),0 6px 18px rgba(15,61,62,.05);--shadow-lg:0 16px 40px rgba(15,61,62,.14);
  --side-w:268px;--top-h:72px}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans Arabic",Tahoma,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg-top) 0%,#eaf5f4 45%,#e1f4f7 100%) fixed;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h3{font-size:16px;margin-block-end:12px}
code{background:var(--line-2);padding:1px 5px;border-radius:4px;font-size:12.5px}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.grow{flex:1}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:var(--side-w);flex:none;background:var(--side);color:var(--side-t);position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--side-3) transparent;transition:width .18s}
.brand{display:flex;align-items:center;gap:12px;height:var(--top-h);padding-inline:22px;position:sticky;top:0;background:var(--bg-top);z-index:2}
.mark{width:36px;height:36px;border-radius:50%;background:var(--acc);display:grid;place-items:center;flex:none}
.mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bname{color:var(--side-h);font-size:19px;font-weight:600;white-space:nowrap;letter-spacing:-.01em}.bname b{font-weight:700}
.brand .collapse{margin-inline-start:auto;color:var(--muted)}
.brand .collapse:hover{background:var(--side-2);color:var(--text)}
.side nav{padding:6px 16px 28px}
.sec{margin-block-end:2px}
/* a section: its icon sits in a round bubble; the section of the open page gets a dark bubble */
.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding-block:5px;padding-inline:5px 8px;border-radius:999px;color:var(--side-h);font-weight:500;user-select:none}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary>.ico:first-child{width:36px;height:36px;padding:9px;border-radius:50%;background:var(--side-bubble);color:var(--side-h);transition:background .15s,color .15s}
.sec>summary:hover{background:rgba(255,255,255,.65)}
.sec.cur>summary{font-weight:600}
.sec.cur>summary>.ico:first-child{background:var(--acc);color:#fff}
.sec .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev .ico{width:14px;height:14px;transition:transform .15s;opacity:.6}
.sec[open] .chev .ico{transform:rotate(90deg)}
[dir=rtl] .chev .ico{transform:scaleX(-1)}
[dir=rtl] .sec[open] .chev .ico{transform:rotate(90deg)}
/* the pages of a section; the open page is a dark pill (the design's "Dashboard" item) */
.sub{display:grid;gap:2px;padding:4px 0 10px;margin-inline-start:22px;padding-inline-start:12px;border-inline-start:1px dashed var(--side-3)}
.sub a{color:var(--side-t);padding:8px 14px;font-size:13.5px;border-radius:999px}
.sub a:hover{color:var(--side-h);background:rgba(255,255,255,.7);text-decoration:none}
.sub a.on{color:#fff;background:var(--acc);font-weight:500;box-shadow:0 6px 16px rgba(15,61,62,.18)}
.sub a.hit{color:var(--side-h);background:rgba(255,255,255,.7)}
main{flex:1;min-width:0;display:flex;flex-direction:column}
main>*{min-width:0}   /* without this a wide table stretches the page instead of scrolling inside its card */
.top{background:rgba(242,247,246,.82);backdrop-filter:blur(12px);display:flex;align-items:center;gap:10px;padding-inline:28px;height:var(--top-h);position:sticky;top:0;z-index:20}
.ibtn{background:none;border:0;color:var(--muted);width:38px;height:38px;padding:0;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer}
.ibtn:hover{background:#fff;color:var(--text)}
.burger{display:none}
.msearch{position:relative;width:min(360px,40vw)}
.msearch input{width:100%;min-height:44px;padding-inline-start:40px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px}
.msearch input:focus{background:#fff}
.ico-in{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);color:var(--faint);display:flex}
.msearch-res{position:absolute;top:calc(100% + 8px);inset-inline:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;max-height:60vh;overflow:auto;z-index:40}
.msearch-res a{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;color:var(--text)}
.msearch-res a small{color:var(--faint)}
.msearch-res a:hover,.msearch-res a.sel{background:var(--acc-l);text-decoration:none}
.msearch-res p{margin:8px 10px;color:var(--muted)}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;padding-inline:8px;font-variant-numeric:tabular-nums}
.clock .tz{font-size:11px;color:var(--faint)}
#clock{font-weight:600;font-size:13px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;padding:8px 14px;font-weight:600;font-size:13px;color:var(--text)}
.chip:hover{border-color:var(--faint);background:#fff}
.user>summary{padding:4px 10px 4px 4px;border-radius:999px}
.user>summary:hover{background:rgba(255,255,255,.75)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.who{display:grid;line-height:1.25}.who b{font-weight:600;font-size:15px}.who small{color:var(--muted);font-size:12px}
.phead{padding:20px 28px 0;display:grid;gap:6px}
.phead h1{font-size:28px;font-weight:600;letter-spacing:-.02em}
/* breadcrumb as a filled accent bar (pill), themed via --acc so Platform Config > Theme recolors it too */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;background:var(--acc);color:var(--acc-t);padding:9px 18px;border-radius:999px;width:fit-content;max-width:100%;box-shadow:var(--shadow)}
.crumb>*+*::before{content:"/";margin-inline-end:8px;color:color-mix(in srgb,var(--acc-t) 45%,transparent)}
.crumb a{color:color-mix(in srgb,var(--acc-t) 78%,transparent)}.crumb a:hover{color:var(--acc-t);text-decoration:none}
.crumb .cur{color:var(--acc-t);font-weight:600}
/* big rounded "glass" cards on the gradient */
.card{background:var(--glass);backdrop-filter:blur(14px);margin:18px 28px 28px;padding:24px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.imp{background:var(--warn-l);color:var(--warn);padding:8px 24px;border-block-end:1px solid #f3d3a6;display:flex;gap:12px;align-items:center}
.shade{display:none}
/* collapsed sidebar (icon rail), remembered per browser */
.nav-mini .side{width:68px}
.nav-mini .bname,.nav-mini .lbl,.nav-mini .chev,.nav-mini .sub{display:none}
.nav-mini .brand{padding-inline:18px;flex-direction:column;justify-content:center;gap:0}
.nav-mini .brand .mark{display:none}
.nav-mini .brand .collapse{margin:0}
.nav-mini .sec>summary{justify-content:center;padding:5px 0}
.nav-mini .side nav{padding-inline:10px}

/* ---------- messages ---------- */
.flash{margin:16px 28px 0;padding:12px 16px;border-radius:14px;border:1px solid;font-size:13.5px}
.flash ul{margin:4px 0 0;padding-inline-start:18px}
.card .flash{margin:0 0 16px}
.flash.ok{background:var(--ok-l);color:var(--ok);border-color:#bfe5cf}
.flash.bad{background:var(--bad-l);color:var(--bad);border-color:#f5c6bf}
.okmsg{color:var(--ok)}.err{color:var(--bad)}.hint{color:var(--muted);font-size:12.5px}.inl{display:inline}

/* ---------- buttons ---------- */
/* pill buttons: dark teal primary, white secondary */
.btn,button{font:inherit;font-weight:500;background:var(--acc);color:var(--acc-t);border:1px solid var(--acc);padding:9px 18px;border-radius:999px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;line-height:1.35}
.btn:hover,button:hover{background:var(--acc-d);border-color:var(--acc-d);text-decoration:none}
.btn .ico{width:16px;height:16px}
.btn.ghost{background:#fff;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:#f6fbfa;border-color:var(--faint)}
.btn.outline{background:#fff;color:var(--text);border-color:var(--line)}
.btn.outline:hover,.btn.outline.on{background:var(--acc-l);border-color:var(--acc);color:var(--acc)}
.btn.danger{background:var(--bad);border-color:var(--bad)}.btn.danger:hover{background:#a52818}
.btn.sm{padding:5px 12px;font-size:13px}
.lnk,.lnk:hover{background:none;color:var(--acc);padding:0 4px;border:0}
.backlink{display:inline-block;margin-block-end:12px;font-weight:500}

/* ---------- dropdowns ---------- */
.dropdown{position:relative}
.dropdown>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.dropdown>summary::-webkit-details-marker{display:none}
.menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;z-index:30;min-width:220px;display:grid;gap:2px}
.menu.right{inset-inline-start:auto;inset-inline-end:0}
.menu a,.menu-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:var(--text);background:none;width:100%;text-align:start;border:0;font-weight:400}
.menu a:hover,.menu-btn:hover{background:var(--acc-l);color:var(--text);text-decoration:none}
.menu-btn.on{color:var(--acc);font-weight:600}
.menu form{margin:0}
.menu .chk{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:6px}
.menu .chk:hover{background:var(--bg)}
.cols .menu{max-height:60vh;overflow:auto}
.cols .menu .btn{margin-top:6px}

/* ---------- inputs ---------- */
input,select,textarea{font:inherit;color:inherit;padding:8px 12px;border:1px solid #d6e4e1;border-radius:12px;background:#fff;max-width:100%;min-height:38px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--acc-l);border-color:var(--acc)}
input[type=checkbox]{min-height:0;width:16px;height:16px;accent-color:var(--acc);margin:0}
.search{position:relative;display:block}
.search .ico{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--faint);width:15px;height:15px;pointer-events:none}
.search input{width:100%;padding-inline-end:30px;border-radius:999px}
.pw{position:relative;display:block}
.pw input{width:100%;padding-inline-end:42px}
.pw .ibtn{position:absolute;inset-inline-end:2px;top:50%;transform:translateY(-50%);width:32px;height:32px}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;margin:0}
.switch i{position:absolute;inset:0;background:#cfd5df;border-radius:12px;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start .15s}
.switch input:checked+i{background:var(--acc)}
.switch input:checked+i::after{inset-inline-start:23px}
.switch input:focus-visible+i{outline:3px solid var(--acc-l)}

/* ---------- list pages ---------- */
.toolbar{display:flex;gap:8px;align-items:center;margin-block-end:14px;flex-wrap:wrap}
.size select{min-width:76px}
.fpanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 18px;align-items:end;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-block-end:14px}
.fpanel .field>span{font-size:12.5px}
.fbtns{display:flex;gap:8px}
.range{display:flex;gap:6px;align-items:center}.range input{flex:1;min-width:0}
.fpanel .field.wide{grid-column:1/-1;max-width:420px}
/* Platform Reports > Log Viewer: dark terminal-like box, one color per log level */
.logview{margin:0;max-height:70vh;overflow:auto;background:#0f2a2b;color:#d6deeb;border-radius:var(--r);padding:14px 16px;font:12.5px/1.55 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.logview .bad{color:#ff8a80}.logview .warn{color:#ffd166}.logview .dim{color:#7f8ea3}.logview .note{color:#8ab4ff}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:12px 14px;border-block-end:1px solid var(--line-2);white-space:nowrap}
thead th{background:#f4f9f8;font-weight:600;font-size:12.5px;color:var(--muted);border-block-end:1px solid var(--line)}
thead .filters th{background:#fff;padding:6px 8px;font-weight:400}
.filters input,.filters select{width:100%;min-width:110px;padding-block:5px;min-height:34px;font-size:13px;border-radius:999px}
tbody tr:hover{background:#f4faf9}
tbody tr:last-child td{border-block-end:0}
th.num,td.num{text-align:end;font-variant-numeric:tabular-nums}
th a.sort{color:inherit;display:inline-flex;gap:6px;align-items:center}
th a.sort:hover{color:var(--acc);text-decoration:none}
th a.sort::after{content:"";width:0;height:0;border-inline:4px solid transparent;border-block-start:5px solid #c5ccd8;opacity:.9}
th a.sort.asc::after{border-block-start:0;border-block-end:5px solid var(--acc)}
th a.sort.desc::after{border-block-start-color:var(--acc)}
.w1{width:1%}
.acts{display:flex;gap:2px;align-items:center}
.acts a,.acts button{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;color:var(--muted);background:none;border:0}
.acts .ico{width:17px;height:17px}
.acts a:hover,.acts button:hover{background:var(--acc-l);color:var(--acc)}
.acts .del:hover{background:var(--bad-l);color:var(--bad)}
.acts .ok{color:var(--ok)}.acts .ok:hover{background:var(--ok-l);color:var(--ok)}
.empty{text-align:center;color:var(--muted);padding:36px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;color:var(--muted);flex-wrap:wrap;font-size:13px}
.pager nav{display:flex;gap:4px;flex-wrap:wrap}
.pager a,.pager span.cur{min-width:36px;text-align:center;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:#fff}
.pager a:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
.pager span.cur{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-block-end:14px}
.totals div{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;background:#fff}
.totals small{display:block;color:var(--muted);font-size:12px}
.totals b{font-size:19px;font-variant-numeric:tabular-nums}
/* Standalone CRM app (/App): a focused phone-style screen, centered column with a bottom nav */
body.appshell{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);max-width:520px;margin-inline:auto;box-shadow:0 0 40px rgba(15,61,62,.06)}
.apptop{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--acc);color:var(--acc-t)}
.apphome{color:var(--acc-t);font-weight:700;font-size:16px;text-decoration:none}
.apptop .ibtn{color:var(--acc-t);background:none;border:0;cursor:pointer}
.apptop-menu{position:relative}.apptop-menu>summary{list-style:none}.apptop-menu .menu{position:absolute;inset-inline-end:0;top:110%;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);display:grid;min-width:170px;overflow:hidden;z-index:10}
.apptop-menu .menu a,.apptop-menu .menu button{padding:11px 16px;text-align:start;background:none;border:0;font:inherit;color:var(--text);text-decoration:none;cursor:pointer}
.apptop-menu .menu a:hover,.apptop-menu .menu button:hover{background:var(--line-2)}
.appmain{flex:1;padding:14px 16px 90px;overflow-y:auto}
.appnav{position:fixed;inset-inline:0;bottom:0;max-width:520px;margin-inline:auto;display:flex;background:#fff;border-block-start:1px solid var(--line);box-shadow:0 -2px 12px rgba(15,61,62,.06)}
.appnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 12px;color:var(--muted);font-size:11px;text-decoration:none}
.appnav a.on{color:var(--acc)}.appnav .ico{width:22px;height:22px}
.appsearch{margin-block-end:12px}.appsearch .search{width:100%}
.applist{display:flex;flex-direction:column;gap:8px}
.appitem{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--text)}
.appitem:hover{border-color:var(--faint)}
.appitem-main{display:grid;gap:2px;min-width:0}.appitem-main b{font-size:14.5px}.appitem-main small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appitem-side{display:grid;justify-items:end;gap:4px;flex:none}.appitem-side .mono{font-variant-numeric:tabular-nums;font-size:12.5px}
.badge{background:var(--acc-l);color:var(--acc);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600;white-space:nowrap}
.appcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin-block-end:14px}
.appcard h2{font-size:21px;margin-block-end:6px}
.appmeta{font-size:14px;margin-block-start:4px}.appmeta.muted{color:var(--muted);font-size:12.5px}
.calllink{display:inline-flex;align-items:center;gap:5px;color:var(--acc);font-weight:600;text-decoration:none}.calllink .ico{width:16px;height:16px}
.appnotes{margin-block-start:10px;color:var(--muted);font-size:13.5px;white-space:pre-wrap}
.appnote{display:grid;gap:8px;margin-block-end:16px}
.appnote textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font:inherit;resize:vertical}
.apph{font-size:14px;color:var(--muted);margin:16px 0 8px;font-weight:600}
.approw{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-block-end:6px;display:grid;gap:2px}
.approw b{font-size:12.5px}.approw span{font-size:13.5px}.approw small{font-size:11.5px}
.appback{display:inline-flex;align-items:center;gap:2px;color:var(--muted);text-decoration:none;font-size:13px;margin-block-end:10px}
.appback .ico{width:16px;height:16px;transform:scaleX(-1)}[dir=rtl] .appback .ico{transform:none}
.appempty{text-align:center;padding:40px 0}

.statusbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-block-end:14px;background:#fafbfc}
.statusbar>span:nth-child(2){flex:1}.statusbar .dot{margin:0;background:var(--faint)}.statusbar.on{background:var(--ok-l);border-color:#bfe5cf}.statusbar.on .dot{background:#0ca30c}
.bulkbar{display:flex;gap:10px;align-items:center;margin-block-end:10px}
/* role permission grid */
.perms td,.perms th{text-align:center}.perms td:first-child,.perms th:first-child{text-align:start}
.perms tr.sec-row td{background:#f8f9fb;font-weight:600;color:#475467;text-align:start;font-size:12.5px}
.perms input{width:17px;height:17px}

/* expandable report rows */
tr.detail>td{background:#f8f9fb;white-space:normal;padding:12px 16px}
.subtable{display:grid;gap:6px;margin-block-end:10px}.subtable:last-child{margin:0}
.subtable>b{font-size:12.5px;color:#475467}
/* as wide as its own columns (a % of a wide list would push columns off screen); sticks to the visible start while the list scrolls sideways */
.subtable{position:sticky;inset-inline-start:16px;width:max-content;max-width:calc(100vw - 340px)}
.subtable table{background:#fff;border:1px solid var(--line);border-radius:8px;width:auto;min-width:420px}
@media (max-width:900px){ .subtable{max-width:calc(100vw - 48px)} .subtable table{min-width:0} }
.subtable th,.subtable td{padding:6px 12px;font-size:13px}
.acts button.on{background:var(--acc-l);color:var(--acc)}
.acts button.on .ico{transform:rotate(45deg)}

/* ---------- charts ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible;direction:ltr}   /* axes and numbers read left to right in Arabic too */
.chart .hit{cursor:crosshair}
.chart .hit:hover{fill:rgba(15,61,62,.06)}
.tip{position:fixed;z-index:60;pointer-events:none;background:#0f2a2b;color:#fff;font-size:13px;padding:8px 12px;border-radius:12px;box-shadow:var(--shadow-lg);white-space:nowrap}

/* ---------- tool pages: test dial trace, invoice ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.verdict{padding:12px 16px;border-radius:8px;font-weight:600;margin-block-end:12px}
.verdict.ok{background:var(--ok-l);color:var(--ok)}.verdict.bad{background:var(--bad-l);color:var(--bad)}
.trace td{white-space:normal;vertical-align:top}
.trace .s-ok{color:var(--ok)}.trace .s-bad{color:var(--bad)}.trace .s-warn{color:var(--warn)}
.kv{width:auto}.kv th{background:none;font-weight:500;color:var(--muted);text-align:start;padding-inline-end:28px}
.kv td,.kv th{border-block-end:1px solid var(--line-2)}
.kv tr.total td,.kv tr.total th{font-size:16px;color:var(--text);border-block-start:2px solid var(--line);font-weight:600}
.num{text-align:end;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--line-2);color:#475467}
.badge.Review{background:var(--warn-l);color:var(--warn)}.badge.Paid{background:var(--ok-l);color:var(--ok)}.badge.Unpaid,.badge.PartiallyPaid{background:var(--bad-l);color:var(--bad)}
.inline-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}

/* ---------- forms: label beside the field on wide screens, two columns ---------- */
.form{display:grid;gap:16px}
.tabs{display:flex;gap:4px;border-block-end:1px solid var(--line);flex-wrap:wrap;overflow-x:auto}
.tabbtn{background:none;color:var(--muted);border-radius:0;border:0;border-block-end:2px solid transparent;margin-block-end:-1px;padding:10px 14px;font-weight:500}
.tabbtn:hover{background:none;color:var(--text);border-color:transparent;border-block-end-color:var(--line)}
.tabbtn.on{border-block-end-color:var(--acc);color:var(--acc)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;padding-top:4px}
.field{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:12px;align-items:center}
.field>span:first-child{font-weight:500;font-size:13.5px;color:#344054}
.field>input,.field>select,.field>textarea,.field>.pw,.field>.stack{width:100%}
.field .stack{display:grid;gap:4px}
.field .req{color:var(--bad);font-weight:600}
.field.check{display:flex;gap:10px;align-items:center}
.field.wide{grid-column:1/-1;grid-template-columns:minmax(120px,calc((100% - 40px) * .19)) minmax(0,1fr);align-items:start}   /* same label width as a half-width field */
.field textarea{width:100%;resize:vertical;min-height:120px;line-height:1.5}
.field input.info{background:var(--bg);color:var(--muted)}
.field input.color{width:64px;height:38px;padding:3px;cursor:pointer}
.fgroup{grid-column:1/-1;font-size:15px;margin:10px 0 0;padding-block-end:8px;border-block-end:1px solid var(--line)}
.fgroup:first-child{margin-top:0}
/* a switch with dependent fields sits alone on its row; the first field it shows starts the next row (under the switch, not beside it) */
.fields>.ctl{grid-column-start:1}.fields>.ctl+.field{grid-column-start:1}
/* Platform Config > Theme: choices as cards with a preview ([Pick]); ready-made colors under the color pickers */
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pick-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;min-width:84px;background:var(--surface)}
.pick-opt:hover{border-color:var(--acc)}
.pick-opt input{position:absolute;opacity:0;pointer-events:none}
.pick-opt:has(input:checked){border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-l)}
.pick-opt:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.pick-opt small{font-size:12px;color:var(--muted)}.pick-opt:has(input:checked) small{color:var(--text);font-weight:600}
.mock{display:grid;grid-template-columns:18px 1fr;grid-template-rows:8px 1fr;width:72px;height:46px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.mock i{display:block}.mock .m-side{grid-row:1/3;background:#0f2a2b}.mock .m-top{background:var(--bg-top);border-block-end:1px solid var(--line)}.mock .m-body{background:linear-gradient(180deg,#eaf5f4,#e1f4f7)}
.mock.LightSidebar .m-side{background:var(--bg-top);border-inline-end:1px solid var(--line)}
.dotc{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.iconsample{display:flex;gap:4px;align-items:center;justify-content:center;height:28px;color:var(--text)}.iconsample b{font-size:16px}.iconsample .ico{width:16px;height:16px}
/* (i) beside a label ([Help]): the text shows on hover or keyboard focus */
.help{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;margin-inline-start:6px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;font-size:11px;line-height:1;cursor:help;vertical-align:middle}
.help:hover::after,.help:focus::after{content:attr(data-help);position:absolute;top:22px;inset-inline-start:-8px;z-index:20;width:280px;padding:9px 12px;border-radius:8px;background:#172033;color:#fff;font-weight:400;font-size:13px;line-height:1.6;white-space:normal;box-shadow:0 6px 18px rgba(16,24,40,.18)}
.sla{margin-top:18px}.sla input[type=number]{max-width:130px;text-align:end}
.stack{display:flex;flex-direction:column;gap:5px;min-width:0}
.colorpick{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cp{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.cp.on,.cp:hover{box-shadow:0 0 0 2px var(--text)}
.imgpick{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.preview{width:200px;height:90px;border:1px dashed #d5dae3;border-radius:8px;display:grid;place-items:center;background:#fafbfc;overflow:hidden}
.preview img{max-width:100%;max-height:100%;object-fit:contain}
.imgpick .btn{cursor:pointer}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--acc-l);border-radius:8px;padding:10px 12px;color:#344054;margin:0;font-size:13px}
.note>b{background:#98a2b3;color:#fff;border-radius:4px;padding:1px 7px;font-size:11px;letter-spacing:.4px;flex:none}
.note p{margin:0 0 4px}.note p:last-child{margin:0}
.note-box{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-block-end:14px;background:#fafbfc}
.note-box ol{margin:8px 0 0;padding-inline-start:20px}
.ptabs{margin-block-end:18px}.ptabs a.tabbtn{color:var(--muted);text-decoration:none}.ptabs a.tabbtn.on{color:var(--acc)}
table.params td:last-child{width:220px}table.params input{width:100%}table.params tr.bad input{border-color:var(--bad);background:var(--bad-l)}
table.labels td{white-space:normal;vertical-align:middle}table.labels input{width:100%}.lbl-key{color:#475467;font-size:13px;width:45%}
.tsearch input{min-width:200px}
.blogo{max-height:40px;max-width:190px;object-fit:contain}
img.avatar{object-fit:cover}
.llogo{max-height:56px;max-width:220px;object-fit:contain}
.about{color:var(--muted);font-size:13px;margin:0;white-space:pre-line}
.fpanel .field,.form>.field:only-child{grid-template-columns:1fr;gap:5px}
.field.bad input,.field.bad select{border-color:var(--bad);background:var(--bad-l)}
.actions{display:flex;gap:10px;justify-content:center;border-block-start:1px solid var(--line);padding-top:18px;margin-top:4px}
.confirm{max-width:680px;display:grid;gap:12px}
.confirm .actions{justify-content:flex-start}
.confirm ul{margin:0}

/* ---------- dashboard ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tile{display:flex;gap:14px;align-items:center;background:var(--glass);border:1px solid rgba(255,255,255,.9);padding:18px 20px;border-radius:var(--r-card);color:var(--muted);transition:box-shadow .15s,border-color .15s}
.tile:hover{box-shadow:var(--shadow-lg);border-color:transparent;text-decoration:none}
.tile .ico{width:40px;height:40px;color:var(--acc);background:var(--acc-l);border-radius:10px;padding:9px}
.tile b{display:block;font-size:24px;color:var(--text);line-height:1.15;font-variant-numeric:tabular-nums}

.bare{margin:18px 28px 28px;display:grid;gap:18px}
.bare>.flash{margin:0}
.livenote{display:flex;gap:8px;align-items:center;margin:0}
/* dashboard tiles: pastel cards (lime, teal, pink, lavender...), dark text, the icon in a white bubble */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#dfe9e7;border:0;border-radius:22px;padding:18px 20px;color:var(--text);min-height:132px;transition:box-shadow .15s,transform .15s}
a.kpi:hover{box-shadow:var(--shadow-lg);text-decoration:none;transform:translateY(-2px)}
.kpi-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.6);color:var(--text)}
.kpi-i .ico{width:19px;height:19px}
.kpi-v{display:grid;gap:4px;min-width:0}
.kpi-t{font-size:13px;color:#33504e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:#0f2a2b;font-variant-numeric:tabular-nums}
.kpi.c1{background:#dcefb0}.kpi.c2{background:#ffd9c2}.kpi.c3{background:#a9ddd2}.kpi.c4{background:#f7e2a6}
.kpi.c5{background:#f4c3c8}.kpi.c6{background:#c7cbf3}.kpi.c7{background:#e2cdf3}.kpi.c8{background:#f6cfc4}.kpi.c9{background:#d3e5ea}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cbox{background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;min-width:0}
.cbox.wide{grid-column:1/-1}
.cbox>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cbox h2{font-size:18px;font-weight:600}.cbox header small{color:var(--muted);font-size:12.5px}
.cctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cctl input[type=date],.cctl select{min-height:34px;padding-block:4px;font-size:13px;border-radius:999px}
.legend{list-style:none;margin:0;padding:0;display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:#344054}
.legend li{display:flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;flex:none}
.donut{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:20px;align-items:center}
.legend.col{flex-direction:column;flex-wrap:nowrap}
.legend.col li{display:grid;grid-template-columns:10px 1fr auto;gap:8px;padding:4px 0;border-block-end:1px solid var(--line-2)}
.legend.col b{font-weight:600;font-variant-numeric:tabular-nums}
.cempty{display:grid;place-items:center;min-height:200px;color:var(--faint);font-size:17px;text-align:center}
.ctable>summary{cursor:pointer;color:var(--muted);font-size:12.5px;width:max-content}
.ctable .tablewrap{margin-top:8px;max-height:280px;overflow:auto}
.ctable th,.ctable td{padding:6px 10px;font-size:13px}
h3.count{margin:0;font-size:18px}
/* Dashboard > System: four equal cards (icon bubble, title, status badge; thin ring; three figures), then the services list.
   Status colors: good = teal, warn = amber, crit = red (checked palette colors); the badge always says the word too. */
.sysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.scard{grid-template-rows:auto 1fr auto;gap:16px}
.shead{display:flex;align-items:center;gap:10px}
.shead h2{flex:1;font-size:16px;margin:0}
.stitle{flex:1;min-width:0;display:grid;justify-items:start;gap:4px}.stitle h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sico{align-self:flex-start}.scard .sico{width:42px;height:42px}
.sico{width:38px;height:38px;border-radius:50%;background:var(--side-bubble);color:var(--text);display:grid;place-items:center;flex:none}
.sico .ico{width:18px;height:18px}
.sico.big{width:52px;height:52px;margin-inline:auto;margin-block-end:10px;color:var(--faint)}.sico.big .ico{width:24px;height:24px}
.sbadge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--line-2);color:var(--muted)}
.sbadge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sbadge.good{background:#e1f3ef;color:#1f7a6e}.sbadge.warn{background:#fbeedd;color:#9a5b00}.sbadge.crit{background:#f9e3e2;color:#a8322f}
.sbody{display:grid;place-items:center;min-height:170px}
.snone{text-align:center;color:var(--muted);font-size:13.5px;align-content:center}
.ring{width:160px;height:160px;display:block}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .track{stroke:#e6efed}
.ring .arc{stroke:#2f9e8f;transition:stroke-dasharray .4s}.ring.warn .arc{stroke:#cf7f2e}.ring.crit .arc{stroke:#c0504d}
.ring .rv{font-size:26px;font-weight:600;fill:var(--text);text-anchor:middle;font-variant-numeric:tabular-nums}
.ring .rc{font-size:11px;fill:var(--muted);text-anchor:middle}
.sstats{display:grid;gap:8px;margin:0;padding-top:14px;border-block-start:1px solid var(--line-2)}
.sstats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sstats div{display:grid;gap:2px;text-align:center}
.sstats dt{font-size:11.5px;color:var(--muted)}.sstats dd{margin:0;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sfoot{margin:0;text-align:center}
.path{display:block;word-break:break-all}
.services .shead{margin-block-end:4px}
.uptime{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--muted)}.uptime b{color:var(--text)}
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.svc-i{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:#fff}
.svc-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--line-2);color:var(--muted)}
.svc-ico .ico{width:18px;height:18px;stroke-width:2.2}
.svc-i.up .svc-ico{background:#e1f3ef;color:#1f7a6e}.svc-i.down .svc-ico{background:#f9e3e2;color:#a8322f}
.svc-t{flex:1;min-width:0;display:grid;gap:2px}
.svc-t b{font-size:14px}.svc-t small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--faint)}
@media (max-width:1000px){ .charts{grid-template-columns:1fr} .donut{grid-template-columns:1fr} }
@media (max-width:900px){ .bare{margin:12px} }

/* ---------- printable invoice ---------- */
body.print-doc{background:#e9ecf2}
.doc{background:#fff;max-width:820px;margin:24px auto;padding:40px 48px;border-radius:10px;box-shadow:var(--shadow)}
.doc-h{display:flex;justify-content:space-between;align-items:flex-start;border-block-end:2px solid var(--text);padding-block-end:16px}
.doc-brand{font-size:22px}.doc-title{text-align:end}.doc-title h1{font-size:26px;letter-spacing:2px}.doc-title p{margin:4px 0 0;color:var(--muted)}
.doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.doc-meta div{display:grid;gap:2px}.doc-meta small{color:var(--muted);margin-top:6px}
.doc-t{width:100%;border:1px solid var(--line)}.doc-t td,.doc-t th{padding:9px 12px}
.doc-t tfoot th,.doc-t tfoot td{border-block-start:1px solid var(--line)}.doc-t tfoot tr:first-child th{border-block-start:2px solid var(--text);font-size:16px}
.doc-notes{color:var(--muted);font-size:13px;margin-top:16px}.doc-f{margin-top:28px;color:var(--muted);font-size:12px;text-align:center;white-space:pre-line}
.sub-k{font-weight:400;padding-inline-start:24px}
@media print{ body.print-doc{background:#fff} .doc{box-shadow:none;margin:0;max-width:none;padding:0} .no-print{display:none} }

/* ---------- login ---------- */
body.login{display:grid;place-items:center;background:radial-gradient(900px 500px at 15% 10%,#d9efe9,transparent),radial-gradient(800px 500px at 90% 90%,#d7eef5,transparent),var(--bg-top);min-height:100vh;padding:20px}
.lbox{background:var(--glass);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);width:420px;max-width:100%;padding:34px;border-radius:28px;display:grid;gap:14px;box-shadow:var(--shadow-lg)}
.lbox h2{font-size:22px}
.lbox form{display:grid;gap:12px}
.lbox input:not([type=hidden]){padding:11px 12px;width:100%}
.lbox .tabs button{flex:1}
.wide{width:100%;padding:11px;justify-content:center}
.forgot{text-align:end;color:var(--muted);font-size:13px}
.ver{text-align:center;color:var(--faint);font-size:12px}
.lhead{display:flex;gap:14px;align-items:center}.lhead .mark{width:44px;height:44px;border-radius:12px}.lhead .mark svg{width:22px;height:22px}.lhead .hint{margin:2px 0 0}
.lfoot{display:flex;gap:6px;align-items:center;border-block-start:1px solid var(--line);padding-top:12px}
.lfoot .lnk{font-weight:400;color:var(--muted)}.lfoot .lnk.on{color:var(--acc);font-weight:600}.lfoot .ver{margin-inline-start:auto}

/* ---------- phones and small tablets ---------- */
@media (max-width:1100px){ .fields{grid-template-columns:1fr} }
@media (max-width:900px){
  .side{position:fixed;inset-inline-start:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .2s;background:var(--bg-top)}
  [dir=rtl] .side{transform:translateX(100%)}
  .nav-open .side{transform:none;box-shadow:var(--shadow-lg)}
  .nav-open .shade{display:block;position:fixed;inset:0;background:rgba(15,23,41,.45);z-index:40}
  .nav-mini .side{width:var(--side-w)}
  .nav-mini .bname,.nav-mini .lbl,.nav-mini .chev{display:revert}.nav-mini .sub{display:grid}
  .brand .collapse{display:none}
  .burger{display:inline-grid}
  .hide-sm{display:none!important}
  .top{padding-inline:10px;gap:6px}
  .msearch{width:auto;flex:1}
  .phead{padding:16px 12px 0}
  .phead h1{font-size:22px}
  .card{margin:12px;padding:16px;border-radius:20px}
  .flash{margin:12px 12px 0}
  .field,.field.wide{grid-template-columns:1fr;gap:6px}
  .grid2{grid-template-columns:1fr}
  .toolbar .grow{display:none}
}