/* ═══════════════════════════════════════════════════════════════════════════
   أنماط اللوحات المرسومة على الخادم — لوحة القيادة · مركز قيادة الأداء
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ سبب وجود هذا الملف: هذه الأصناف كانت معرَّفة **داخل جافاسكربت**
   (execdash.js فيه CSS نصًّا يُحقن بـ<style> عند التحميل، و perfdir.js مثله).
   فصفحة Razor ترسم الأصناف نفسها وتستمد تنسيقها من وحدةٍ يُفترض حذفها بعد
   التحويل — فبمجرد حذفها تصير الشاشة نصًّا بلا تنسيق. الأنماط الآن في ملف
   أنماط حقيقي، والشاشة الخادمية لا تتعلّق بأي سكربت.

   ⚠️ استعلامات الوسائط في آخر الملف: الاستعلام لا يزيد الأولوية، فقاعدة
   متأخّرة في الملف تغلبه ولو كان أخصّ. (site.css:518 غلب استعلامًا في ٣٠٠.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── المشترك ───────────────────────── */
.xdview { display: flex; flex-direction: column; gap: 12px; }

.xdbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card, #fff);
}
.xdbar > b { font-size: 14px; }

/* الأرقام الكبيرة */
.xdhero { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; }
.xdh {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card, #fff);
  border-top: 3px solid var(--navy, #1B3157);
  min-width: 0;                     /* بلا هذا يدفع المحتوى 1fr خارج الحاوية */
}
.xdh.ok   { border-top-color: var(--ok,   #127A55); }
.xdh.warn { border-top-color: var(--warn, #B7791F); }
.xdh.bad  { border-top-color: var(--bad,  #C73A3A); }
.xdht { font-size: 11.5px; color: var(--mut); }
.xdhv { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.xdhs { font-size: 11px; color: var(--mut); }

/* الشبكة */
/* ⚠️ كان repeat(auto-fit,minmax(290px,1fr)) مع align-items:start وspan ثابتة.
   المقيس: ٣٨٣ بكسل فراغ ميت — ٢٦١ تحت «الفروع» (tall span-2 محتواه ٤٣١ في
   مسار ٦٩٢) و١٢٢ تحت «التغطية» (١٧١ في مسار ٢٩٣٫٦). أعمدة معلومة يرصّ عليها
   pack في execdash.js صفوفًا ممتلئة، وstretch يسوّي أطوال الصف الواحد. */
.xdgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; align-items: stretch; }
.xdp {
  border: 1px solid var(--line); border-radius: 11px; background: var(--card, #fff);
  overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;          /* ليملأ المسار حين يمتدّ الصف */
}
.xdp > .xdpb { flex: 1; }
.xdp.wide { grid-column: span 2; }
.xdp.tall { grid-row: span 2; }
/* امتداد يقرّره pack بعد معرفة عدد اللوحات — لا ثقب في الشبكة */
.xdp.sp1 { grid-column: span 1; }
.xdp.sp2 { grid-column: span 2; }
.xdp.sp3 { grid-column: span 3; }
.xdph {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 13px; border-bottom: 1px solid var(--line2, #EDEFF3);
}
.xdph > b { font-size: 12.5px; }
.xdpb { padding: 12px 13px; }

/* الحلقات */
.xdrings { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-around; }
.xdring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xdring svg { display: block; }
.xdrv {
  position: absolute; top: 0; inset-inline-start: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.xdring svg + .xdrv { height: 100%; }
.xdrv > b  { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.xdrv > em { font-style: normal; font-size: 9px; color: var(--mut); text-align: center; max-width: 66px; line-height: 1.2; }
.xdrs { text-align: center; font-size: 10px; }

/* الأشرطة */
.xdhb { display: flex; flex-direction: column; gap: 6px; }
.xdhr { display: grid; grid-template-columns: 104px 1fr 52px; gap: 9px; align-items: center; font-size: 11.5px; }
.xdhn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.xdhbar { height: 9px; border-radius: 5px; background: var(--line2, #EDEFF3); overflow: hidden; }
.xdhbar > i { display: block; height: 100%; border-radius: 5px; }
/* شريط بجزأين — الحرج ثم الأخف. flex لا float: العائم داخل شريط ٩ بكسل هشّ. */
.xdhbar.two { display: flex; }
.xdhbar.two > i { border-radius: 0; flex: none; }
.xdhbar.two > i:first-child { border-start-start-radius: 5px; border-end-start-radius: 5px; }
.xdhbar.two > i:last-child  { border-start-end-radius: 5px;  border-end-end-radius: 5px; }
.xdhr > b { text-align: end; font-variant-numeric: tabular-nums; }

/* حلقة بجانب قائمة */
.xdsplit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.xdsr { flex: 1; min-width: 150px; }

.xdp .vwrap { padding-inline: 12px; }
.xdp .hmap  { overflow-x: auto; }

/* ──────────────────── مركز قيادة الأداء ──────────────────── */

/* شريط الفلاتر — التصنيف يسري على كل ما تحته، فيُرفع فوق */
.pdfil { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pdfil a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11.5px; text-decoration: none; color: inherit; background: var(--card, #fff);
}
.pdfil a:hover { border-color: var(--navy, #1B3157); }
.pdfil a.on { background: var(--navy, #1B3157); color: #fff; border-color: var(--navy, #1B3157); }
.pdfil a > span { font-variant-numeric: tabular-nums; opacity: .75; }
.pdfil a.on > span { opacity: .9; }

/* درجة الجودة */
.pdq { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pdqs { font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pdqp { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 6px; }

/* أنماط الملاحظات */
.pdgs { display: flex; flex-direction: column; gap: 8px; }
.pdg {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--card, #fff); border-inline-start: 3px solid var(--line);
}
.pdg.high { border-inline-start-color: var(--bad,  #C73A3A); }
.pdg.med  { border-inline-start-color: var(--warn, #B7791F); }
.pdg.low  { border-inline-start-color: var(--mut,  #7A8699); }
.pdg > summary {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 9px 12px; cursor: pointer; list-style: none;
}
.pdg > summary::-webkit-details-marker { display: none; }
.pdg > summary::before { content: "▸"; font-size: 10px; color: var(--mut); }
.pdg[open] > summary::before { content: "▾"; }
.pdg > summary > b { font-size: 12.5px; }
.pdgn {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--line2, #EDEFF3); font-variant-numeric: tabular-nums;
}
.pdg.high .pdgn { background: #FBE9E7; color: #A02A1D; }
.pdg.med  .pdgn { background: #FDF3E2; color: #8A5B08; }
.pdgd { font-size: 11px; color: var(--mut); flex-basis: 100%; }
.pdgb { padding: 0 12px 10px; }
.pdgb table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pdgb th, .pdgb td {
  padding: 5px 8px; text-align: start;
  border-bottom: 1px solid var(--line2, #EDEFF3); vertical-align: top;
}
.pdgb th { font-size: 10.5px; color: var(--mut); font-weight: 600; }
.pdgb td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdmore { font-size: 11px; color: var(--mut); padding-top: 6px; }

/* جاهزية الإغلاق */
.pdrd { display: flex; flex-direction: column; gap: 5px; }
.pdrr {
  display: grid; grid-template-columns: 130px 66px 1fr; gap: 9px;
  align-items: center; font-size: 11.5px; padding: 4px 0;
  border-bottom: 1px solid var(--line2, #EDEFF3);
}
.pdrr:last-child { border-bottom: 0; }
.pdrn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdrb { font-size: 10.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdtag { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-align: center; }
.pdtag.ok  { background: #E4F4EC; color: #0E5F42; }
.pdtag.bad { background: #FBE9E7; color: #A02A1D; }

/* ⚠️ أي جدول قد يتجاوز حاويته يحتاج أبًا يمرّر — وإلا خرج من الصندوق */
.pdscroll { overflow-x: auto; }

/* ──────────────── مصدر البيانات — datasource.js ──────────────── */
/* ⚠️ البادئة dsx لا ds: الصنف .dsum مأخوذ في site.css في ٧ مواضع. */

/* شريحة حصيلة المصادر في الشريط العلوي — تملأ الفاصل الذي كان ٦٨٦ بكسل فارغة */
.xdsrcchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--line); background: var(--line2, #EDEFF3); color: var(--mut);
}
.xdsrcchip > b { font-variant-numeric: tabular-nums; color: inherit; }
.xdsrcchip.open { background: #FDF3E2; border-color: #E8D3A6; color: #8A5B08; }
.xdsrcchip.done { background: #E4F4EC; border-color: #BFE3D2; color: #0E5F42; }

.xdfoot { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line2, #EDEFF3); }

/* بطاقة رقم بلا قيمة — بلا لون حالة، فالغياب ليس إخفاقًا */
.xdh.dsxna { border-top-color: var(--line, #D9E0EC); }
.xdh.dsxna .xdhv { color: var(--mut); font-weight: 700; }
.dsxwhy { display: block; margin: 2px 0 7px; line-height: 1.45; }

/* سطر المصدر تحت قيمة موجودة */
.dsxsrc { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--mut); margin-top: 4px; }
.dsxdot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.dsxdot.x { background: var(--s3, #29ABE2); }   /* مرتبط بمصدر خارجي */
.dsxdot.m { background: var(--s2, #C9A227); }   /* إدخال يدوي أو محتسب */

/* الخياران */
.dsxp { display: flex; gap: 6px; flex-wrap: wrap; }
.dsxp .btn { white-space: nowrap; }
.dsxnop { align-self: center; }

/* مصدر مسجَّل وبياناته لم تصل */
.dsxw {
  font-size: 11px; color: #0E5F42; background: #E4F4EC;
  border: 1px solid #BFE3D2; border-radius: 7px; padding: 4px 9px; margin: 2px 0 7px;
}

/* جسم لوحة بلا بيانات */
.dsxe { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; padding: 4px 0 2px; }
.dsxeh { font-size: 12.5px; font-weight: 700; }
.dsxet { font-size: 11.5px; color: var(--mut); line-height: 1.5; }
.dsxef { font-size: 10.5px; }

/* القائمة المجمّعة: بيان في كل صف ومعه خياراه */
.dsxl { display: flex; flex-direction: column; gap: 7px; }
.dsxli {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card, #fff);
}
.dsxln { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsxln > b { font-size: 12px; }
.dsxln > .xs { line-height: 1.45; }

/* ─────────────────── الاستجابة — آخر الملف ─────────────────── */
@media (max-width: 1100px) {
  .xdgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xdp.sp2, .xdp.sp3 { grid-column: span 2; }
}
@media (max-width: 960px) {
  .xdp.wide { grid-column: span 1; }
  .xdp.tall { grid-row: span 1; }
}
@media (max-width: 760px) {
  .xdgrid { grid-template-columns: 1fr; }
  .xdp.sp1, .xdp.sp2, .xdp.sp3 { grid-column: span 1; }
  .dsxp { flex-direction: column; align-items: stretch; }
  .dsxli { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .xdhv { font-size: 24px; }
  .xdhr { grid-template-columns: 88px 1fr 46px; }
  .pdrr { grid-template-columns: 100px 58px 1fr; }
  .pdqs { font-size: 30px; }
}