/* ═══════════════════════════════════════════════════════
 *  status.css — أُستخرِج آليًا من pages/status.php
 *  المقطع 1 من 1 · سطور 57–57 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 * ═══════════════════════════════════════════════════════ */
.dvStat{--pb:#2563EB;--pb2:#1e3fae;--nv:#0D1B3E;--ink:#1f2937;--mut:#6b7480;--faint:#6b7280;--line:#e8ebf1;--soft:#f6f8fc;--soft2:#eef4ff;--ok:#10B981;--okd:#10B981;--okbg:#e8f7ee;--okbar:#10B981;--amber:#b45309;--amberbg:#fffbeb;--orange:#ea580c;color-scheme:light}
.dvStat{color:var(--ink);line-height:1.9;font-family:'Segoe UI','Segoe UI Arabic',Tahoma,Arial,sans-serif;background:#fff;overflow-x:clip;direction:rtl}
.dvStat .w{max-width:1080px;margin:0 auto;padding:0 24px}
.dvStat section{padding:52px 0}
.dvStat .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--soft2);color:var(--pb);font-weight:800;font-size:.78rem;padding:7px 15px;border-radius:999px;border:1px solid #dbe6ff;margin-bottom:16px}
.dvStat .eyebrow svg{width:15px;height:15px}
.dvStat h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:900;color:var(--nv);letter-spacing:-.02em;line-height:1.28;margin:0 0 14px}
.dvStat h2{font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:800;color:var(--nv);letter-spacing:-.4px;line-height:1.4;margin:0 0 8px}
.dvStat h3{color:var(--nv);font-weight:800;margin:0}
.dvStat p{margin:0;color:var(--mut)}
.dvStat .lead{font-size:1.02rem;color:var(--mut);line-height:1.9;max-width:660px}
.dvStat .g{background:linear-gradient(120deg,var(--pb),#6a86ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dvStat .shead{margin-bottom:22px}
.dvStat .mono{font-family:'SFMono-Regular',ui-monospace,Consolas,'Roboto Mono',monospace;direction:ltr;unicode-bidi:isolate}
/* reveal */
.dvStat .rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.dvStat .rv.in{opacity:1;transform:none}

/* HERO + overall banner */
.dvStat .hero{background:radial-gradient(1000px 440px at 50% -12%,#eaf1ff 0%,#fff 62%);text-align:center;padding:60px 0 34px}
.dvStat .banner{max-width:840px;margin:6px auto 0;background:linear-gradient(135deg,#ecfdf3,#f5fefb);border:1px solid #bbf7d0;border-radius:22px;padding:30px 30px;display:flex;align-items:center;justify-content:center;gap:18px;text-align:start;box-shadow:0 18px 44px rgba(22,163,74,.10)}
.dvStat .bdot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--ok);position:relative;box-shadow:0 0 0 5px rgba(22,163,74,.16)}
.dvStat .bdot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(22,163,74,.45);animation:dvStatPulse 2.4s ease-out infinite}
@keyframes dvStatPulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.dvStat .bmain{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:900;color:var(--okd);letter-spacing:-.3px}
.dvStat .bupd{margin-top:4px;font-size:.86rem;color:#4b7358;font-weight:600}
.dvStat .bupd .mono{color:var(--okd);font-weight:800}
.dvStat .herolinks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.dvStat .hl{display:inline-flex;align-items:center;gap:7px;color:var(--nv);font-weight:800;font-size:.84rem;padding:9px 16px;border-radius:11px;border:1px solid var(--line);background:#fff;text-decoration:none;transition:.18s}
.dvStat .hl:hover{border-color:#c9d6f2;background:var(--soft)}
.dvStat .hl svg{width:15px;height:15px;color:var(--pb)}

/* COMPONENTS */
.dvStat .panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 26px;box-shadow:0 10px 30px rgba(13,27,62,.05)}
.dvStat .comprow{padding:22px 0;border-bottom:1px solid var(--line)}
.dvStat .comprow:last-child{border-bottom:0}
.dvStat .crhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px;flex-wrap:wrap}
.dvStat .cname{display:flex;flex-direction:column;gap:1px}
.dvStat .cnm{font-weight:800;color:var(--nv);font-size:1.02rem;display:flex;align-items:center;gap:9px}
.dvStat .cnm::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.dvStat .csub{font-size:.76rem;color:var(--faint);font-family:'SFMono-Regular',ui-monospace,Consolas,monospace;direction:ltr;unicode-bidi:isolate;padding-inline-start:18px}
.dvStat .cstat{display:flex;align-items:center;gap:14px}
.dvStat .cpct{font-weight:800;color:var(--nv);font-size:.92rem}
.dvStat .pill{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.78rem;padding:5px 13px;border-radius:999px;background:var(--okbg);color:var(--okd);border:1px solid #bbf7d0}
.dvStat .pill .pd{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.dvStat .cbars{display:flex;gap:2px;height:34px;align-items:stretch}
.dvStat .cbars .b{flex:1 1 0;min-width:0;border-radius:2px;background:var(--okbar);transition:transform .15s,background .15s}
.dvStat .cbars .b.am{background:var(--amber)}
.dvStat .cbars .b:hover{transform:scaleY(1.14);background:var(--okd)}
.dvStat .cbars .b.am:hover{background:#b45309}
.dvStat .crfoot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:.73rem;color:var(--faint);font-weight:700}

/* SUMMARY CARDS */
.dvStat .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dvStat .scard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;text-align:center;box-shadow:0 8px 24px rgba(13,27,62,.04)}
.dvStat .scard .sk{font-size:.84rem;color:var(--mut);font-weight:700;margin-bottom:10px}
.dvStat .scard .sv{font-size:2rem;font-weight:900;color:var(--okd);letter-spacing:-.5px;line-height:1}
.dvStat .scard.rt .sv{color:var(--pb)}
.dvStat .scard .su{font-size:.78rem;color:var(--faint);font-weight:700;margin-top:8px}

/* LEGEND */
.dvStat .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.dvStat .lg{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-weight:700;font-size:.86rem;color:var(--nv)}
.dvStat .lg .ld{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.dvStat .lg.ok .ld{background:var(--ok)}
.dvStat .lg.deg .ld{background:var(--amber)}
.dvStat .lg.part .ld{background:var(--orange)}
.dvStat .lg.mnt .ld{background:var(--pb)}
.dvStat .lg small{color:var(--faint);font-weight:600;font-size:.78rem}

/* INCIDENTS */
.dvStat .note{border-inline-start:4px solid var(--pb);background:var(--soft2);border-radius:0 12px 12px 0;padding:14px 16px;color:#33415a;font-size:.92rem;line-height:1.85}
.dvStat .note.good{border-color:var(--ok);background:var(--okbg)}
.dvStat .note b{color:var(--nv)}
.dvStat .note.good b{color:var(--okd)}
.dvStat .inclist{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.dvStat .inc{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:#fff;transition:box-shadow .2s}
.dvStat .inc:hover{box-shadow:0 10px 26px rgba(13,27,62,.06)}
.dvStat .inctop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.dvStat .incdate{font-family:'SFMono-Regular',ui-monospace,Consolas,monospace;font-size:.82rem;color:var(--faint);font-weight:700;direction:ltr}
.dvStat .rtag{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.74rem;padding:3px 11px;border-radius:999px;background:var(--okbg);color:var(--okd);border:1px solid #bbf7d0}
.dvStat .rtag svg{width:12px;height:12px}
.dvStat .inc h3{font-size:1rem;margin-bottom:5px}
.dvStat .inc p{font-size:.9rem;color:var(--mut);line-height:1.8}

/* SUBSCRIBE */
.dvStat .sub{background:linear-gradient(135deg,#eef4ff,#f8fbff);border:1px solid #dbe6ff;border-radius:22px;padding:38px 32px;text-align:center}
.dvStat .sub h2{margin-bottom:8px}
.dvStat .sub p{max-width:520px;margin:0 auto 20px}
.dvStat .subform{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap}
.dvStat .subform input{flex:1 1 220px;border:1px solid #cdd8ee;border-radius:12px;padding:13px 16px;font-size:.95rem;font-family:inherit;color:var(--nv);background:#fff;outline:none;transition:.18s;direction:ltr;text-align:left}
.dvStat .subform input:focus{border-color:var(--pb);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.dvStat .subform button{border:0;cursor:pointer;background:var(--pb);color:#fff;font-weight:800;font-size:.95rem;font-family:inherit;padding:13px 26px;border-radius:12px;box-shadow:0 10px 24px rgba(37,99,235,.26);transition:.2s}
.dvStat .subform button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,99,235,.32)}
.dvStat .subnote{font-size:.78rem;color:var(--faint);margin-top:14px}

/* HOW WE CALCULATE */
.dvStat .calc{border:1px dashed var(--line);border-radius:16px;padding:20px 22px;background:var(--soft);font-size:.9rem;color:var(--mut);line-height:1.85}
.dvStat .calc b{color:var(--nv)}

@media(max-width:720px){
  .dvStat .banner{flex-direction:row;padding:24px 20px}
  .dvStat .sgrid{grid-template-columns:1fr}
  .dvStat .panel{padding:6px 18px}
  .dvStat .crhead{align-items:flex-start}
}

/* ══ بند ٠‑٢ · ٢١ أغسطس ٢٠٢٦ — حالات حقيقية للّافتة والشارات ══
   كانت اللوحة كلها خضراء ثابتة لأنها لم تكن تعرض حالة بل صورة لحالة.
   الآن للّافتة أربع حالات، وأخطرها بصريًّا هي `is-unknown`: لا يجوز أن
   تبدو مطمئنة، فالجهل بالحالة ليس سلامة. ونبض النقطة يبقى للأخضر وحده
   حتى لا يوحي بحياة في لوحة لا تعرف شيئًا. */
.dvStat .banner.is-degraded{background:linear-gradient(135deg,#fffbeb,#fefce8);border-color:#fde68a;box-shadow:0 18px 44px rgba(180,83,9,.10)}
.dvStat .banner.is-degraded .bmain,.dvStat .banner.is-degraded .bupd .mono{color:var(--amber)}
.dvStat .banner.is-degraded .bdot{background:var(--amber);box-shadow:0 0 0 5px rgba(180,83,9,.16)}

.dvStat .banner.is-down{background:linear-gradient(135deg,#fef2f2,#fff5f5);border-color:#fecaca;box-shadow:0 18px 44px rgba(220,38,38,.10)}
.dvStat .banner.is-down .bmain,.dvStat .banner.is-down .bupd .mono{color:#b91c1c}
.dvStat .banner.is-down .bdot{background:#dc2626;box-shadow:0 0 0 5px rgba(220,38,38,.16)}

.dvStat .banner.is-unknown{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-color:#d7dde7;box-shadow:0 18px 44px rgba(15,23,42,.07)}
.dvStat .banner.is-unknown .bmain,.dvStat .banner.is-unknown .bupd .mono{color:#475569}
.dvStat .banner.is-unknown .bdot{background:#94a3b8;box-shadow:0 0 0 5px rgba(100,116,139,.15)}

/* النبض للأخضر وحده */
.dvStat .banner.is-degraded .bdot::after,
.dvStat .banner.is-down     .bdot::after,
.dvStat .banner.is-unknown  .bdot::after{display:none}

/* شارات المكوّنات */
.dvStat .pill.deg{background:var(--amberbg);color:var(--amber);border-color:#fde68a}
.dvStat .pill.deg .pd{background:var(--amber)}
.dvStat .pill.down{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.dvStat .pill.down .pd{background:#dc2626}
.dvStat .pill.unk{background:#f1f5f9;color:#475569;border-color:#d7dde7}
.dvStat .pill.unk .pd{background:#94a3b8}

/* قائمة الأعطال المفتوحة تحت اللافتة */
.dvStat .issues{max-width:840px;margin:14px auto 0;display:flex;flex-direction:column;gap:8px}
.dvStat .iss{display:flex;align-items:center;gap:10px;text-align:start;padding:11px 15px;border-radius:14px;border:1px solid var(--line);background:#fff}
.dvStat .iss.crit{border-color:#fecaca;background:#fef2f2}
.dvStat .iss.warn{border-color:#fde68a;background:var(--amberbg)}
.dvStat .isev{flex:0 0 auto;font-weight:800;font-size:.72rem;padding:3px 10px;border-radius:999px}
.dvStat .iss.crit .isev{background:#fee2e2;color:#b91c1c}
.dvStat .iss.warn .isev{background:#fef3c7;color:var(--amber)}
.dvStat .ittl{font-size:.88rem;font-weight:700;color:var(--ink)}

/* حادثة ما زالت مفتوحة — لا تأخذ شارة «تم الحل» الخضراء */
.dvStat .rtag.open{background:var(--amberbg);color:var(--amber);border-color:#fde68a}