/* FoloIQ Radar — الواجهة */
:root{
  --bg:#0a0f18; --bg2:#0f1724; --card:#121b2b; --card2:#16202f;
  --line:#1e2a3d; --line2:#2a3a52;
  --txt:#dbe6f5; --muted:#7d8ea8; --dim:#5a6b85;
  --accent:#00d3a7; --accent2:#12b8ff;
  --crit:#ff4d5e; --high:#ff9838; --med:#ffd447; --low:#5cc8ff; --ok:#2ee6a8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); min-height:100vh;
  font-family:"Segoe UI","Tahoma","Cairo","Noto Kufi Arabic",system-ui,sans-serif;
  font-size:14px; line-height:1.6;
}
a{color:var(--accent2);text-decoration:none}
h1,h2,h3{margin:0 0 10px;font-weight:700}
h3{font-size:14px;color:#a9bdd8;letter-spacing:.2px}
.muted{color:var(--muted);font-size:12px}
.dim{color:var(--dim)}

/* ===== شريط علوي ===== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;background:linear-gradient(180deg,#0e1826,#0b1220);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:10px;font-size:15px}
.top-right{display:flex;align-items:center;gap:14px}
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(46,230,168,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(46,230,168,0)}100%{box-shadow:0 0 0 0 rgba(46,230,168,0)}}
.health{
  padding:4px 14px;border-radius:20px;font-weight:700;font-size:13px;
  background:rgba(46,230,168,.12);color:var(--ok);border:1px solid rgba(46,230,168,.3)
}
.health.warn{background:rgba(255,212,71,.12);color:var(--med);border-color:rgba(255,212,71,.3)}
.health.bad{background:rgba(255,77,94,.12);color:var(--crit);border-color:rgba(255,77,94,.35)}

/* ===== التبويبات ===== */
.tabs{display:flex;gap:2px;padding:0 14px;background:var(--bg2);
  border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:53px;z-index:35}
.tabs button{
  background:none;border:none;color:var(--muted);padding:12px 15px;cursor:pointer;
  font-family:inherit;font-size:13.5px;border-bottom:2px solid transparent;white-space:nowrap
}
.tabs button:hover{color:var(--txt)}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;
  background:var(--crit);color:#fff;font-size:11px;line-height:17px;text-align:center;margin-inline-start:4px}
.badge:empty{display:none}
.badge.ok{background:var(--ok);color:#06231a}

main{padding:18px;max-width:1600px;margin:0 auto}
.tab{display:none}
.tab.active{display:block}

/* ===== البطاقات ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.row>.card{flex:1 1 320px;margin-bottom:16px}
.grow{flex:2 1 500px}

/* ===== KPI ===== */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi.crit::before{background:var(--crit)} .kpi.high::before{background:var(--high)}
.kpi.med::before{background:var(--med)} .kpi.ok::before{background:var(--ok)}
.kpi .k-label{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.kpi .k-val{font-size:25px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:11px;color:var(--dim);margin-top:3px}

/* ===== الجداول ===== */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:start;padding:8px 10px;color:var(--muted);font-weight:600;font-size:11.5px;
   border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--card2)}
.tbl-wrap{overflow-x:auto;max-height:520px;overflow-y:auto}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;direction:ltr;display:inline-block}

/* ===== العناصر ===== */
.pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;white-space:nowrap}
.p-crit{background:rgba(255,77,94,.15);color:var(--crit)}
.p-high{background:rgba(255,152,56,.15);color:var(--high)}
.p-med{background:rgba(255,212,71,.14);color:var(--med)}
.p-low{background:rgba(92,200,255,.14);color:var(--low)}
.p-ok{background:rgba(46,230,168,.14);color:var(--ok)}
.p-gray{background:#1d2838;color:var(--muted)}

.risk-bar{height:5px;border-radius:3px;background:#1d2838;overflow:hidden;min-width:56px}
.risk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--med),var(--crit))}

.item{padding:11px 12px;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:flex-start}
.item:last-child{border-bottom:none}
.item:hover{background:var(--card2)}
.item .i-body{flex:1;min-width:0}
.item .i-title{font-weight:600;margin-bottom:2px}
.item .i-meta{font-size:11.5px;color:var(--dim)}
.sev-dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none}
.s-critical{background:var(--crit)} .s-high{background:var(--high)}
.s-medium{background:var(--med)} .s-low{background:var(--low)}

/* ===== أزرار وحقول ===== */
.btn,.btn-sm,.btn-ghost{
  border:1px solid var(--line2);background:var(--card2);color:var(--txt);
  border-radius:8px;cursor:pointer;font-family:inherit
}
.btn{padding:9px 20px;font-size:13px}
.btn-sm{padding:4px 11px;font-size:11.5px}
.btn-ghost{padding:5px 12px;font-size:12px;background:transparent;color:var(--muted)}
.btn:hover,.btn-sm:hover,.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger:hover{border-color:var(--crit);color:var(--crit)}

input,select,textarea{
  background:var(--bg2);border:1px solid var(--line2);color:var(--txt);
  border-radius:8px;padding:7px 11px;font-family:inherit;font-size:13px
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar label{font-size:12px;color:var(--muted)}
.check{display:flex;align-items:center;gap:5px;cursor:pointer}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:3px 10px;border-radius:14px;background:var(--card2);border:1px solid var(--line2);
  font-size:11.5px;cursor:pointer}
.chip.on{border-color:var(--accent);color:var(--accent)}

.field{margin-bottom:11px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%}

/* ===== الرسوم ===== */
.chart{width:100%;height:190px;position:relative}
.chart svg{width:100%;height:100%;overflow:visible}
.bar-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}
.bar-row .bl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bt{height:7px;border-radius:4px;background:var(--accent2);min-width:2px}
.bar-row .bv{width:72px;text-align:end;color:var(--muted);font-variant-numeric:tabular-nums}

/* ===== النافذة ===== */
.modal{display:none;position:fixed;inset:0;background:rgba(3,7,14,.82);z-index:100;
  padding:24px;overflow-y:auto}
.modal.show{display:block}
.modal-box{background:var(--card);border:1px solid var(--line2);border-radius:14px;
  max-width:920px;margin:20px auto;padding:22px;position:relative}
.modal-x{position:absolute;inset-inline-end:14px;top:10px;background:none;border:none;
  color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
pre{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:13px;
  overflow-x:auto;font-size:12px;direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-word}
.fix-box{background:rgba(46,230,168,.06);border:1px solid rgba(46,230,168,.25);
  border-radius:9px;padding:13px;margin-top:11px}
.fix-box h4{margin:0 0 7px;color:var(--ok);font-size:13px}

.toast{position:fixed;bottom:24px;inset-inline-start:24px;background:var(--card2);
  border:1px solid var(--accent);color:var(--txt);padding:11px 20px;border-radius:9px;
  z-index:200;opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:none}

.empty{text-align:center;padding:34px;color:var(--dim);font-size:13px}

/* ===== صفحة الدخول ===== */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(circle at 50% 35%,#132033,#070c14 65%)}
.login-card{background:var(--card);border:1px solid var(--line2);border-radius:16px;
  padding:34px;width:340px;text-align:center}
.login-card h1{font-size:19px;margin-bottom:2px}
.login-card .sub{color:var(--muted);font-size:12px;margin:0 0 20px}
.login-card label{display:block;text-align:start;font-size:12px;color:var(--muted);margin:11px 0 4px}
.login-card input{width:100%}
.login-card button{width:100%;margin-top:18px;padding:10px;background:var(--accent);
  border:none;border-radius:8px;color:#052a22;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}
.radar-logo{color:var(--accent);margin-bottom:10px}
.alert-box{background:rgba(255,77,94,.12);border:1px solid rgba(255,77,94,.3);
  color:var(--crit);padding:9px;border-radius:8px;font-size:12.5px;margin-bottom:6px}
.foot{margin-top:18px;font-size:11px;color:var(--dim)}

@media(max-width:760px){
  main{padding:12px}
  .row>.card{flex:1 1 100%}
  .grid-kpi{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .kpi .k-val{font-size:20px}
}

/* ============================================================
   شاشة الرادار
   ============================================================ */
.radar-wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.radar-card{flex:1 1 560px;min-width:340px}
.radar-feed-card{flex:1 1 420px;min-width:320px;max-height:760px;overflow-y:auto}

.radar-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0}
#radarCanvas{
  display:block;border-radius:50%;cursor:crosshair;
  background:radial-gradient(circle at 50% 50%,#08131c,#060b12 70%);
  box-shadow:0 0 0 1px rgba(0,211,167,.22), 0 0 46px rgba(0,211,167,.10) inset;
}
.radar-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:var(--muted)}
.radar-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:4px;vertical-align:middle}

.rstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-top:14px}
.rstat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;text-align:center}
.rstat.ok{border-color:rgba(46,230,168,.32)}
.rstat.med{border-color:rgba(255,212,71,.32)}
.rstat.crit{border-color:rgba(255,77,94,.45);background:rgba(255,77,94,.05)}
.rs-l{font-size:10.5px;color:var(--muted);margin-bottom:3px}
.rs-v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}

.rfeed{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.rfeed:hover{background:var(--card2)}
.rfeed:last-child{border-bottom:none}

/* شريط التنبيه العلوي */
.rbanner{
  position:sticky;top:96px;z-index:30;margin-bottom:12px;padding:11px 16px;
  border:1px solid transparent;border-radius:10px;background:var(--card);
  font-size:13.5px;opacity:0;transform:translateY(-8px);
  transition:.3s;pointer-events:none;max-height:0;overflow:hidden
}
.rbanner.show{opacity:1;transform:none;max-height:90px;pointer-events:auto}

/* وميض الشاشة */
.radar-flash{
  position:fixed;inset:0;pointer-events:none;z-index:90;
  opacity:0;transition:opacity .45s
}

/* أدوات الصوت */
.snd-ctl{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.snd-ctl select,.snd-ctl input[type=range]{padding:3px 7px;font-size:11.5px}
.snd-ctl input[type=range]{width:78px;accent-color:var(--accent)}
.btn-sm.snd-on{border-color:var(--ok);color:var(--ok);
  box-shadow:0 0 10px rgba(46,230,168,.22)}

@media(max-width:760px){
  .radar-feed-card{max-height:none}
  .rbanner{top:92px}
}

/* ---------- قنوات الشحن ---------- */
.chans{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:13px}
.chan{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--ch);
  border-radius:11px;padding:13px 14px;cursor:pointer;transition:.18s}
.chan:hover{border-color:var(--ch);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.chan-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.chan-i{font-size:19px;line-height:1}
.chan-t{font-size:13px;font-weight:700;color:var(--ch)}
.chan-d{font-size:10.5px;color:var(--dim)}
.chan-pct{margin-inline-start:auto;font-size:15px;font-weight:700;color:var(--ch);
  font-variant-numeric:tabular-nums}
.chan-v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:6px}
.chan-bar{height:4px;border-radius:3px;background:#1d2838;overflow:hidden;margin-bottom:8px}
.chan-bar i{display:block;height:100%;background:var(--ch)}
.chan-meta{font-size:11px;color:var(--muted)}
.chan-meths{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.chan-m{display:flex;gap:7px;align-items:center;font-size:11px;padding:2px 0;color:var(--muted)}
.chan-m span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chan-m b{color:var(--txt);font-variant-numeric:tabular-nums}
.chan-m i{font-style:normal;color:var(--dim);min-width:26px;text-align:end}

/* ---------- تحليل سبب البطء ---------- */
.accent-card{border-color:rgba(0,211,167,.3);background:linear-gradient(180deg,rgba(0,211,167,.05),transparent)}
.danger-card{border-color:rgba(255,77,94,.3);background:linear-gradient(180deg,rgba(255,77,94,.05),transparent)}

.verdict{display:flex;align-items:center;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.v-big{font-size:46px;font-weight:800;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(0,211,167,.3)}
.v-t{font-size:15px;font-weight:600;margin-bottom:3px}
.v-s{font-size:12.5px;color:var(--muted);max-width:620px;line-height:1.7}

.wfbar{display:flex;height:26px;border-radius:7px;overflow:hidden;background:#111a26;margin-bottom:12px}
.wfbar span{height:100%;transition:width .4s;cursor:help}
.wflegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:7px}
.wfl{display:flex;align-items:center;gap:7px;font-size:11.5px;background:var(--bg2);
  border:1px solid var(--line);border-radius:7px;padding:6px 9px}
.wfl i{width:9px;height:9px;border-radius:2px;flex:none}
.wfl span{flex:1;color:var(--muted)}
.wfl b{font-variant-numeric:tabular-nums}
.wfl em{font-style:normal;color:var(--dim);min-width:32px;text-align:end}

.minibar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#1d2838;min-width:64px}
.minibar i{display:block;height:100%}

.warnbox{background:rgba(255,152,56,.08);border:1px solid rgba(255,152,56,.28);
  border-radius:9px;padding:10px 13px;font-size:12.5px;color:var(--high);margin-bottom:12px;line-height:1.7}

/* ============================================================
   مركز القيادة
   ============================================================ */
.cc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;margin-bottom:16px}

.cc-grid{display:grid;gap:16px;align-items:start;
  grid-template-columns:minmax(320px,0.95fr) minmax(300px,1.05fr) minmax(320px,1fr)}
.cc-radar{align-self:start}
.cc-mid{display:flex;flex-direction:column;gap:16px}
.cc-mid .card{margin-bottom:0}
.cc-feed{max-height:720px;overflow-y:auto}
.cc-live{grid-column:1/-1}
.cc-grid>.card{margin-bottom:0}

.chart.sm{height:120px}
.radar-hint{text-align:center;font-size:11px;margin-top:6px}
.radar-legend{justify-content:center;margin-top:8px}

.cc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}

/* صفوف اللوحات المصغّرة */
.ccrow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line)}
.ccrow:last-child{border-bottom:none}
.ccrow.warn{background:rgba(255,77,94,.05);border-radius:7px}
.cc-a{flex:1;min-width:0}
.cc-b{text-align:end;white-space:nowrap}
.cc-t{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-s{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ok)}
.cc-v.dim{color:var(--muted)}

.cclive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.cclive{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-width:0}

@media(max-width:1280px){
  .cc-grid{grid-template-columns:1fr 1fr}
  .cc-feed{grid-column:1/-1;max-height:520px}
}
@media(max-width:820px){
  .cc-grid{grid-template-columns:1fr}
  .cc-feed,.cc-live{grid-column:auto}
}

.cc-left{display:flex;flex-direction:column;gap:16px}
.cc-left .card{margin-bottom:0}
.ccbar{display:flex;height:4px;border-radius:2px;overflow:hidden;background:#1d2838;margin:4px 0}
.ccbar i{display:block;height:100%}
.cc-v.bad{color:var(--crit)}

/* ---------- الفحص الشامل ---------- */
.finding{padding:0;overflow:hidden;border-inline-start:3px solid var(--line2)}
.finding.sev-critical{border-inline-start-color:var(--crit)}
.finding.sev-high{border-inline-start-color:var(--high)}
.finding.sev-medium{border-inline-start-color:var(--med)}
.finding.sev-low{border-inline-start-color:var(--low)}

.fd-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .15s}
.fd-head:hover{background:var(--card2)}
.fd-i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:16px;flex:none}
.fd-t{flex:1;min-width:0}
.fd-title{font-size:13.5px;font-weight:600;margin-bottom:3px}
.fd-meta{font-size:11px;color:var(--dim)}
.fd-r{display:flex;align-items:center;gap:7px;flex:none}
.fd-caret{color:var(--muted);transition:transform .2s;font-size:13px}

.fd-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fd-body.open{max-height:1800px;overflow:auto}
.fd-sec{padding:0 16px 12px}
.fd-sec h4{margin:10px 0 6px;font-size:12px;color:var(--muted);font-weight:600}
.fd-sec pre{margin:0;font-size:12px;line-height:1.85;direction:rtl;text-align:start;
  font-family:inherit;background:var(--bg2);border-color:var(--line)}
.fd-sec.fix pre{background:rgba(0,211,167,.06);border-color:rgba(0,211,167,.22);color:#c8f5e8}
.fd-acts{display:flex;gap:8px;flex-wrap:wrap;padding:6px 16px 16px}

.topfix{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
  background:var(--bg2);border:1px solid var(--line);margin-bottom:8px;cursor:pointer;transition:.15s}
.topfix:hover{border-color:var(--accent);transform:translateX(-3px)}
.tf-n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#04241d;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.tf-b{flex:1;min-width:0}
.tf-t{font-size:13px;font-weight:600}
.tf-s{font-size:11px;color:var(--muted)}