/* Layout: fixed side rail (collapses to a top bar on phones), content column of cards and tables.
   Colours follow the VoodooCall brand (voodoocall.net): deep navy, cyan -> violet -> pink. */
:root{
  --bg:#050816; --panel:#0c1230; --fg:#e8ecff; --muted:#93a0c8; --line:#1f2750; --soft:#131a3d;
  --c1:#22d3ee; --c2:#8b5cf6; --c3:#f472b6; --grad:linear-gradient(120deg,var(--c1),var(--c2) 55%,var(--c3));
  --accent:#22d3ee; --accent-fg:#ffffff; --accent-soft:#102a4a;
  --ok:#34d399; --ok-soft:#0d2f2c; --warn:#fbbf24; --warn-soft:#2e2611; --crit:#fb7185; --crit-soft:#3a1428;
  --rail:#070b1f; --rail-fg:#aab4dc; --rail-active:#171e48;
  --f:"Cairo","Space Grotesk","Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
  --mono:ui-monospace, Consolas, "Cascadia Mono", monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-size:15px;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.rail{background:var(--rail);color:var(--rail-fg);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail .brand{color:#fff;font-weight:700;font-size:17px;padding:4px 10px 16px;display:flex;align-items:center;gap:10px}
.rail .brand .dot{width:10px;height:10px;border-radius:50%;background:#3fd28b;box-shadow:0 0 0 4px rgba(63,210,139,.18)}
.rail a{color:var(--rail-fg);padding:8px 12px;border-radius:8px;display:block}
.rail a:hover{background:var(--rail-active);text-decoration:none;color:#fff}
.rail a.on{background:var(--rail-active);color:#fff;font-weight:600}
.rail .sep{height:1px;background:rgba(255,255,255,.08);margin:10px 4px}
.rail .who{margin-top:auto;font-size:13px;padding:10px;color:var(--rail-fg)}
.rail .who b{color:#fff;display:block}
.rail .who a{display:inline;padding:0}
main{padding:24px clamp(16px,3vw,36px) 48px;min-width:0;display:flex;flex-direction:column;gap:18px}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.stat .l{color:var(--muted);font-size:13px}
.stat .s{font-size:12px;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;width:0;transition:width .4s}
.bar.warn i{background:var(--warn)} .bar.crit i{background:var(--crit)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:1px 9px;border-radius:99px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.crit{background:var(--crit-soft);color:var(--crit)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--soft);font-weight:600;color:var(--muted);font-size:13px;position:sticky;top:0}
tr:last-child td{border-bottom:0}
td.num,.num{font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.mono{font-family:var(--mono);font-size:13px;direction:ltr;unicode-bidi:isolate}
form.inline{display:inline}
input,select,button,textarea{font:inherit;color:inherit}
input,select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-width:0}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button,.btn{background:var(--accent);color:var(--accent-fg);border:0;border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:600;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.danger{background:var(--crit);color:#fff}
button.sm{padding:3px 10px;font-size:13px}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.flash{padding:10px 14px;border-radius:10px;font-weight:500}
.flash.ok{background:var(--ok-soft);color:var(--ok)} .flash.err{background:var(--crit-soft);color:var(--crit)}
.alerts{display:flex;flex-direction:column;gap:6px}
.alert{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:8px;background:var(--soft)}
.alert.crit{background:var(--crit-soft)} .alert.warn{background:var(--warn-soft)}
.alert .t{font-size:12px;color:var(--muted);direction:ltr;white-space:nowrap}
svg.chart{width:100%;height:150px;display:block;direction:ltr}
svg.chart .area{fill:var(--accent-soft)} svg.chart .line{fill:none;stroke:var(--accent);stroke-width:2}
svg.chart .cap{stroke:var(--crit);stroke-dasharray:4 4;stroke-width:1}
svg.chart .grid{stroke:var(--line);stroke-width:1}
svg.chart text{fill:var(--muted);font-size:11px}
.cores{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;align-items:end;height:50px}
.cores i{display:block;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}
.cores i.hot{background:var(--warn)} .cores i.crit{background:var(--crit)}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(380px,100%)}
.login form{display:flex;flex-direction:column;gap:12px}
.login input{width:100%}
.err{color:var(--crit)}
.result{font-family:var(--mono);font-size:13px;background:var(--soft);border-radius:8px;padding:10px 12px;white-space:pre-wrap;direction:ltr;text-align:left;min-height:1em}
.result:empty{display:none}
details summary{cursor:pointer;color:var(--accent);font-weight:600}
.empty{color:var(--muted);text-align:center;padding:24px}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:10px;gap:2px}
  .rail .brand{width:100%;padding-bottom:6px}
  .rail .sep,.rail .who{display:none}
  .rail a{padding:6px 10px;font-size:14px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.credit{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center;flex-wrap:wrap}
.credit img{border-radius:8px;flex:none}
.credit b{color:var(--fg);font-weight:600}
.login{grid-template-rows:1fr auto;gap:18px}
.login .credit{border-top:0;padding-top:0}
.problems{display:flex;flex-direction:column;gap:8px}
.problem{border:1px solid var(--line);border-inline-start:4px solid var(--muted);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.problem.crit{border-inline-start-color:var(--crit)} .problem.warn{border-inline-start-color:var(--warn)} .problem.info{border-inline-start-color:var(--accent)}
.problem .ph{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.problem .fix{font-size:14px;background:var(--soft);border-radius:6px;padding:6px 10px}
.problem .fix span{font-weight:700;color:var(--ok)}
#map{height:min(70vh,640px);border-radius:12px;border:1px solid var(--line);z-index:0}
.leaflet-container{font:inherit}
.leaflet-popup-content{direction:rtl;text-align:right;margin:10px 12px}
.speed .big{font-size:30px;font-weight:700;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
a.card{color:inherit;text-decoration:none} a.card:hover{border-color:var(--accent)}
a.card.bad{border-color:var(--crit)} a.card.bad #prob-total{color:var(--crit)}
.plog{margin:0;padding:6px 10px 6px 10px;list-style:none;border-inline-start:2px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--fg)} .plog li:first-child{font-weight:600}
/* VoodooCall brand: V mark, wordmark, MikroTik division line */
.vc-mark{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;flex:none;font:700 21px/1 "Space Grotesk",Arial,sans-serif;color:#fff;box-shadow:0 0 26px -6px var(--c1);text-decoration:none}
.vc-mark:hover{text-decoration:none}
.vc-word{font:700 19px/1.1 "Space Grotesk",Arial,sans-serif;letter-spacing:.05em;direction:ltr;color:#fff}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rail .brand{flex-direction:column;align-items:stretch;gap:8px;padding:2px 6px 14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)}
.rail .brand .vc{display:flex;align-items:center;gap:10px;padding:0;color:#fff}
.rail .brand .vc:hover{background:none}
.rail .brand .dept{font-size:12px;font-weight:600;color:var(--rail-fg);line-height:1.5}
.rail .brand .dept b{display:block;color:#fff;font-size:14px}
.rail a.on{box-shadow:inset -3px 0 0 var(--c1)}
button,.btn{background:var(--grad);color:#fff;box-shadow:0 8px 26px -12px var(--c2)}
button.ghost,.btn.ghost{box-shadow:none}
button.danger{background:var(--crit);box-shadow:none}
.login .brandhead{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.login .brandhead .vc-mark{width:72px;height:72px;border-radius:22px;font-size:40px}
.login .brandhead .vc-word{font-size:28px}
.login .brandhead .dept{color:var(--muted);font-size:13px}
.login .card h1{text-align:center;font-size:18px}
.credit .vc-mark{width:34px;height:34px;border-radius:11px;font-size:19px}
.credit a.site{font-family:"Space Grotesk",var(--f);direction:ltr}
.login .brandhead .vc{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-decoration:none}
.stat .v.small{font-size:17px;direction:rtl}
.stat .v.small.mono{direction:ltr}
/* menu on the right always: drawer with a ☰ button on narrow screens, clear logout button */
.topbar{display:none}
.rail .who .logout{display:block;margin-top:10px;text-align:center;padding:7px 10px;border-radius:8px;color:#fff;font-weight:600}
.rail .who .logout:hover{border-color:var(--crit);color:var(--crit);text-decoration:none}
.navbtn{font-size:20px;line-height:1;padding:6px 12px}
a.btn.sm{padding:4px 12px;font-size:13px}
@media (max-width:860px){
  .shell{display:block}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;background:var(--rail);padding:8px 12px;border-bottom:1px solid var(--line)}
  .topbar b{flex:1;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rail{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(280px,84vw);height:100vh;z-index:50;flex-direction:column;flex-wrap:nowrap;padding:18px 12px;gap:4px;transform:translateX(100%);transition:transform .2s;box-shadow:-12px 0 40px rgba(0,0,0,.5)}
  body.nav-open .rail{transform:none}
  .rail .brand{width:auto}
  .rail .sep,.rail .who{display:block}
  .rail a{padding:8px 12px;font-size:15px}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40}
}
/* subscribers module */
.tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}
.tabs a{padding:5px 12px;border-radius:8px;color:var(--muted)}
.tabs a.on{background:var(--soft);color:var(--fg);font-weight:600}
.tabs a:hover{text-decoration:none;color:var(--fg)}
a.card.stat.sel{border-color:var(--c1)}
.card.bulk{flex-direction:row}
.stack{display:flex;flex-direction:column;gap:14px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0}
legend{padding:0 6px;color:var(--muted);font-size:13px}
.row label.wide{flex:1 1 260px} .row label.wide input{width:100%}
.idimg{max-width:280px;max-height:200px;border-radius:8px;border:1px solid var(--line)}
td.err,.v.err{color:var(--crit)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 14px}
.checks label{display:flex;gap:6px;align-items:baseline;font-size:14px}
/* reports: horizontal bars */
.bars{display:flex;flex-direction:column;gap:6px}
.bar-row{display:grid;grid-template-columns:70px 1fr 70px 1fr 70px;gap:6px;align-items:center;font-size:13px}
.bar-row.two{grid-template-columns:minmax(80px,140px) 1fr 70px}
.bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden;display:block}
.bar i{display:block;height:100%;border-radius:99px;background:var(--c1)}
.bar.out i{background:var(--c3)} .bar.alt i{background:var(--c2)}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c1);vertical-align:middle}
.key.out{background:var(--c3)}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:90px}
.hours i{display:block;background:var(--c2);border-radius:3px 3px 0 0;min-height:2px}
.hours-l{display:grid;grid-template-columns:repeat(24,1fr);font-size:10px;color:var(--muted);text-align:center;direction:ltr}
.wide-in{width:100%}
td.note{min-width:180px} .note-in{width:100%;border-color:transparent;background:transparent} .note-in:hover,.note-in:focus{border-color:var(--line);background:var(--panel)}
.note-in.ok{border-color:var(--ok)} .note-in.bad{border-color:var(--crit)}
.my{max-width:900px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px} .my .head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.support{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:14px;align-items:start}
.support .chats{display:flex;flex-direction:column;gap:4px;max-height:75vh;overflow:auto;padding:8px}
.chatrow{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit}
.chatrow:hover,.chatrow.sel{background:var(--ok-soft)} .chatrow.closed{opacity:.6} .chatrow .last{flex-basis:100%;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:55vh;min-height:120px;overflow:auto;padding:8px 2px}
.msg{max-width:78%;padding:8px 12px;border-radius:14px;white-space:pre-wrap;word-break:break-word}
.msg span{display:block;font-size:12px;opacity:.7;margin-top:2px}
.msg.them{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.msg.me{align-self:flex-end;background:var(--ok-soft)}
.support textarea,#dchat textarea{flex:1 1 260px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
@media (max-width:760px){.support{grid-template-columns:1fr} .support .chats{max-height:30vh}}
progress.qbar{width:100%;height:12px;border:0;border-radius:6px;background:var(--line);overflow:hidden;appearance:none}
progress.qbar::-webkit-progress-bar{background:var(--line);border-radius:6px} progress.qbar::-webkit-progress-value{background:var(--ok);border-radius:6px}
progress.qbar::-moz-progress-bar{background:var(--ok)} progress.qbar.over::-webkit-progress-value{background:var(--crit)} progress.qbar.over::-moz-progress-bar{background:var(--crit)}