/* ============================================================
   نظام تصميم محافظ العمر القابضة — V1
   OHC Portfolio Tracker — design system
   ------------------------------------------------------------
   كل شيء هنا مُنطاق تحت الفئة .ds حتى يتعايش مع style.css القديم
   أثناء الترحيل التدريجي: ضع class="ds" على حاوية الصفحة المُرحّلة،
   وعند اكتمال ترحيل كل القوالب ضعها على <body> واحذف style.css.
   المتغيّرات مُعرَّفة على .ds لا على :root للسبب نفسه (style.css
   يعرّف --ink و--muted و--bg بقيم أخرى على :root).
   RTL أولاً: خصائص منطقية فقط — inline-start/inline-end.
   ============================================================ */

.ds{
  /* الهوية */
  --brand-gold:#BF9534;
  --brand-gold-ink:#8A6A16;      /* الذهبي كنصّ — 5.1:1 على أبيض */
  --brand-gold-soft:#F3EBDA;
  --brand-charcoal:#15181C;
  --brand-copper:#BE8C63;

  /* الأسطح والنص */
  --bg:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F7F5F1;
  --line:#E8E4DC;
  --line-strong:#D8D2C7;
  --ink:#15181C;
  --ink-2:#4A4F57;
  --muted:#7A8088;               /* أيقونات وفواصل ونصّ ≥ 20px فقط */

  /* الحالات: fill للنقطة والشريط · ink للنصّ · bg للخلفية */
  --state-pending:#8A9099;  --state-pending-ink:#5F666E; --state-pending-bg:#F1F2F4;
  --state-green:#1E8E5A;    --state-green-ink:#16734A;   --state-green-bg:#E7F3EC;
  --state-amber:#C98A1B;    --state-amber-ink:#8A5D00;   --state-amber-bg:#FBF2DF;
  --state-red:#C0392B;      --state-red-ink:#A62E22;     --state-red-bg:#FBECEA;
  --state-decision:#6B4FBB; --state-decision-ink:#5A41A1;--state-decision-bg:#F0ECFA;

  /* الوضع الداكن — كوكبيت المجلس فقط */
  --dark-bg:#15181C;
  --dark-surface:#1F2329;

  /* المحافظ الإحدى عشرة — نقطة تمييز فقط */
  --p-DIY:#BF9534; --p-HVN:#D4A64A; --p-AST:#3E6E9E; --p-ASH:#6BA368;
  --p-AXS:#15181C; --p-SMH:#7B5EA7; --p-RGL:#D2691E; --p-ZRR:#2F9C95;
  --p-SRM:#B5485D; --p-ENG:#5B7C99; --p-SUP:#8A8F98;

  /* الخط */
  --font-ar:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-11:11px; --fs-12:12.5px; --fs-14:14px; --fs-16:16px;
  --fs-20:20px; --fs-28:28px; --fs-40:40px; --lh:1.6;

  /* المسافات والشكل */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --r-card:10px; --r-chip:6px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(21,24,28,.06);

  box-sizing:border-box;
  font-family:var(--font-ar);
  font-size:var(--fs-14);
  line-height:var(--lh);
  color:var(--ink);
  background:var(--bg);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

.ds[data-theme="dark"], .ds .is-dark{
  --bg:#15181C; --surface:#1F2329; --surface-2:#262B32;
  --line:#2E343B; --line-strong:#3A4149;
  --ink:#F2F0EB; --ink-2:#C2C7CD; --muted:#8A9099;
  --brand-gold-ink:#D9AF55;   /* 6.3:1 على الفحمي */
  --brand-gold-soft:#2A2519;
  --state-pending-ink:#AFB6BE; --state-pending-bg:#262B32;
  --state-green-ink:#5CC28D;   --state-green-bg:#16271F;
  --state-amber-ink:#E3B057;   --state-amber-bg:#2A2314;
  --state-red-ink:#E88275;     --state-red-bg:#2C1A18;
  --state-decision-ink:#A991E8;--state-decision-bg:#221C33;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  color:var(--ink);
  background:var(--bg);
}

.ds *, .ds *::before, .ds *::after{ box-sizing:border-box }
.ds h1,.ds h2,.ds h3,.ds h4,.ds p,.ds ul,.ds ol{ margin:0 }
.ds ul{ padding-inline-start:18px }
.ds table{ border-collapse:collapse; width:100% }
.ds button{ font:inherit; color:inherit; cursor:pointer }
.ds a{ color:var(--brand-gold-ink) }
.ds a:hover{ color:var(--ink) }

/* ---------- أدوات مساعدة ---------- */
.ds .row{ display:flex; align-items:center }
.ds .col{ display:flex; flex-direction:column }
.ds .wrap{ flex-wrap:wrap }
.ds .grow{ flex:1 1 auto; min-width:0 }
.ds .between{ justify-content:space-between }
.ds .start{ align-items:flex-start }
.ds .g1{ gap:var(--s1) } .ds .g2{ gap:var(--s2) } .ds .g3{ gap:var(--s3) }
.ds .g4{ gap:var(--s4) } .ds .g6{ gap:var(--s6) } .ds .g8{ gap:var(--s8) }
.ds .t11{ font-size:var(--fs-11) } .ds .t12{ font-size:var(--fs-12) }
.ds .t14{ font-size:var(--fs-14) } .ds .t16{ font-size:var(--fs-16) }
.ds .t20{ font-size:var(--fs-20) } .ds .t28{ font-size:var(--fs-28) }
.ds .t40{ font-size:var(--fs-40) }
.ds .w500{ font-weight:500 } .ds .w600{ font-weight:600 } .ds .w700{ font-weight:700 }
.ds .ink2{ color:var(--ink-2) }
.ds .dim{ color:var(--muted) }          /* ≥ 20px أو أيقونات فقط */
.ds .tight{ line-height:1.35 }
.ds .nowrap{ white-space:nowrap }
.ds .clip1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ds .clip2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ds .mono{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; letter-spacing:-.01em }
.ds .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate }
.ds .pdot{ width:8px; height:8px; border-radius:50%; flex:none; display:inline-block }

/* ---------- 1 · شريحة الحالة ---------- */
.ds .pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--r-chip); padding:2px 8px;
  font-size:var(--fs-12); font-weight:500; line-height:1.5;
  white-space:nowrap; border:1px solid transparent;
}
.ds .pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.ds .pill--pending { background:var(--state-pending-bg);  color:var(--state-pending-ink) }
.ds .pill--green   { background:var(--state-green-bg);    color:var(--state-green-ink) }
.ds .pill--amber   { background:var(--state-amber-bg);    color:var(--state-amber-ink) }
.ds .pill--red     { background:var(--state-red-bg);      color:var(--state-red-ink) }
.ds .pill--decision{ background:var(--state-decision-bg); color:var(--state-decision-ink) }
.ds .pill--quiet   { background:transparent; color:var(--ink-2); border-color:var(--line-strong) }
.ds .pill--layer   { background:transparent; border-color:var(--line-strong); color:var(--ink-2); font-weight:600 }
.ds .pill--layer-core{ border-color:var(--brand-gold); color:var(--brand-gold-ink); background:var(--brand-gold-soft) }
.ds .pill--id{
  font-family:var(--font-mono); font-size:var(--fs-11);
  direction:ltr; unicode-bidi:isolate; letter-spacing:-.02em;
  background:var(--surface-2); color:var(--ink-2); border-color:var(--line);
}

/* ---------- 2 · شريط التقدم ---------- */
.ds .prog{ display:flex; align-items:center; gap:var(--s3) }
.ds .prog__track{
  position:relative; height:6px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line);
  flex:1 1 auto; min-width:80px; overflow:visible;
}
.ds .prog__fill{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:999px; background:var(--state-green) }
.ds .prog__fill--amber{ background:var(--state-amber) }
.ds .prog__fill--red{ background:var(--state-red) }
.ds .prog__plan{ position:absolute; inset-block:-4px; width:2px; border-radius:1px; background:var(--brand-gold) }
.ds .prog__val{
  font-family:var(--font-mono); font-size:var(--fs-12); color:var(--ink-2);
  min-width:44px; direction:ltr; unicode-bidi:isolate; text-align:start;
}
.ds .prog--pending .prog__track{ background:transparent; border:1px dashed var(--state-pending) }
.ds .prog--pending .prog__val{ color:var(--state-pending-ink); font-family:var(--font-ar); font-size:var(--fs-11); min-width:0 }

/* ---------- 3 · بلاطة الرقم ---------- */
.ds .stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s4);
  min-width:168px; box-shadow:var(--shadow-1);
}
.ds .stat__num{
  font-family:var(--font-mono); font-size:var(--fs-40); font-weight:500;
  line-height:1.1; letter-spacing:-.02em; direction:ltr; unicode-bidi:isolate;
}
.ds .stat__label{ font-size:var(--fs-14); font-weight:600; margin-top:2px }
.ds .stat__ctx{ font-size:var(--fs-11); color:var(--ink-2); margin-top:var(--s1) }
.ds .stat--pending .stat__num{
  font-family:var(--font-ar); font-size:var(--fs-20); font-weight:600;
  color:var(--state-pending-ink); letter-spacing:0;
}
.ds .stat--accent{ border-color:var(--brand-gold); background:var(--brand-gold-soft) }

/* ---------- 4 · بطاقة النتيجة ومحور القياس ---------- */
.ds .kr-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s4); box-shadow:var(--shadow-1);
}
.ds .kr-card__top{ display:flex; align-items:flex-start; gap:var(--s3); justify-content:space-between }
.ds .kr-card__title{ font-size:var(--fs-16); font-weight:700; line-height:1.4 }
.ds .kr-card__meta{ font-size:var(--fs-12); color:var(--ink-2) }
/* محور القياس: شريط فوق، وثلاثة أعمدة نصّية تحته — لا تموضع مطلق فلا تتداخل
   التسميات مهما طالت (خط الأساس قد يكون جملة كاملة في بيانات Deep Dive). */
.ds .kr-axis{ margin-block:var(--s4) var(--s2) }
.ds .kr-axis__bar{
  position:relative; height:14px; display:flex; align-items:center;
}
.ds .kr-axis__line{
  position:absolute; inset-inline:0; top:6px; height:2px;
  background:var(--line-strong); border-radius:1px;
}
.ds .kr-axis--pending .kr-axis__line{ background:transparent; border-top:2px dashed var(--state-pending) }
.ds .kr-axis__done{ position:absolute; top:6px; height:2px; border-radius:1px; background:var(--state-green) }
.ds .kr-axis__node{
  position:absolute; top:0; width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line-strong);
}
.ds .kr-axis__node--base  { inset-inline-start:0; border-color:var(--ink-2) }
.ds .kr-axis__node--target{ inset-inline-end:0; border-color:var(--brand-gold); background:var(--brand-gold) }
.ds .kr-axis__node--now   { transform:translateX(50%); border-color:var(--state-green); background:var(--state-green) }
.ds .kr-axis__labels{
  display:grid; gap:4px var(--s3); margin-top:8px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.ds .kr-axis__labels--3{ grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr) }
.ds .kr-axis__lab{ min-width:0 }
.ds .kr-axis__lab b{
  display:block; font-size:var(--fs-12); font-weight:600;
  line-height:1.45; overflow-wrap:anywhere;
}
/* الأرقام الصرفة فقط تُعزل LTR؛ النصّ العربي المختلط يبقى على اتجاهه */
.ds .kr-axis__lab b.num-only{
  font-family:var(--font-mono); font-weight:500;
  direction:ltr; unicode-bidi:isolate;
}
.ds .kr-axis__lab span{ display:block; font-size:var(--fs-11); color:var(--ink-2); line-height:1.45; overflow-wrap:anywhere }
.ds .kr-axis__lab--mid{ text-align:center }
.ds .kr-axis__lab--mid b{ direction:ltr }
.ds .kr-axis__lab--end{ text-align:end }

/* ---------- 5 · صف المبادرة ---------- */
.ds .init{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.ds .init + .init{ margin-top:6px }
.ds .init__bar{ width:3px; align-self:stretch; border-radius:2px; background:var(--state-pending); flex:none }
.ds .init__main{ flex:1 1 auto; min-width:0 }
.ds .init__title{ font-size:var(--fs-14); font-weight:600; line-height:1.45 }
.ds .init__sub{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); font-size:var(--fs-11); color:var(--ink-2); margin-top:2px }
.ds .init__side{ display:flex; align-items:center; gap:var(--s3); flex:none }
.ds .init--open{ border-color:var(--brand-gold); box-shadow:0 0 0 3px var(--brand-gold-soft) }
.ds summary{ list-style:none; cursor:pointer }
.ds summary::-webkit-details-marker{ display:none }
.ds details.init{ display:block }
.ds details.init > summary{ display:flex; align-items:center; gap:var(--s3) }
.ds details.init[open]{ border-color:var(--brand-gold); box-shadow:0 0 0 3px var(--brand-gold-soft) }
.ds .init__panel{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px dashed var(--line-strong) }

/* ---------- 6 · المعلم على خط زمني ---------- */
.ds .ms{ position:relative; padding-inline-start:26px }
.ds .ms::before{ content:""; position:absolute; inset-inline-start:7px; top:6px; bottom:6px; width:2px; background:var(--line); border-radius:1px }
.ds .ms__item{ position:relative; padding-block:var(--s2) }
.ds .ms__dot{
  position:absolute; inset-inline-start:-26px; top:12px;
  width:16px; height:16px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line-strong);
}
.ds .ms__item--due  .ms__dot{ border-color:var(--state-amber); background:var(--state-amber-bg) }
.ds .ms__item--over .ms__dot{ border-color:var(--state-red); background:var(--state-red) }
.ds .ms__item--done .ms__dot{ border-color:var(--state-green); background:var(--state-green) }
.ds .ms__title{ font-size:var(--fs-14); font-weight:600 }
.ds .ms__meta{ font-size:var(--fs-11); color:var(--ink-2); margin-top:2px }
.ds .ms__ev{
  font-size:var(--fs-11); color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-chip);
  padding:4px 8px; margin-top:6px; display:inline-block;
}

/* ---------- 7 · شجرة المشاريع والمهام ---------- */
.ds .tree{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--surface) }
.ds .tree__row{ display:flex; align-items:center; gap:var(--s3); padding:10px var(--s4); border-top:1px solid var(--line) }
.ds .tree__row:first-child{
  border-top:0; background:var(--surface-2);
  font-size:var(--fs-11); color:var(--ink-2); font-weight:600; padding-block:8px;
}
.ds .tree__row--child{ padding-inline-start:44px; background:var(--surface) }
.ds .tree__code{ font-family:var(--font-mono); font-size:var(--fs-11); color:var(--ink-2); width:28px; flex:none; direction:ltr }

/* ---------- 8 · بطاقة القرار ---------- */
.ds .dec{
  background:var(--surface); border:1px solid var(--line);
  border-inline-start:3px solid var(--state-decision);
  border-radius:var(--r-card); padding:var(--s4);
}
.ds .dec__ref{
  font-family:var(--font-mono); font-size:var(--fs-11);
  color:var(--state-decision-ink); background:var(--state-decision-bg);
  border-radius:var(--r-chip); padding:2px 7px; direction:ltr; unicode-bidi:isolate;
}
.ds .dec__text{ font-size:var(--fs-14); font-weight:600; line-height:1.5; margin-top:var(--s2) }
.ds .dec__meta{ display:flex; flex-wrap:wrap; gap:var(--s4); font-size:var(--fs-11); color:var(--ink-2); margin-top:var(--s3) }

/* ---------- 9 · جدول السجل وشرائح التصفية ---------- */
.ds .chips{ display:flex; flex-wrap:wrap; gap:6px }
.ds .chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-strong); background:var(--surface);
  border-radius:var(--r-pill); padding:4px 10px;
  font-size:var(--fs-12); color:var(--ink-2); text-decoration:none;
}
.ds .chip b{ font-family:var(--font-mono); font-size:var(--fs-11); color:var(--ink) }
.ds .chip--on{ background:var(--brand-charcoal); border-color:var(--brand-charcoal); color:#fff }
.ds .chip--on b{ color:#fff }
.ds .tbl{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden }
.ds .tbl th{
  font-size:var(--fs-11); font-weight:600; color:var(--ink-2); text-align:start;
  padding:10px var(--s3); background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.ds .tbl td{ font-size:var(--fs-12); padding:10px var(--s3); border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55 }
.ds .tbl tr:last-child td{ border-bottom:0 }
.ds .tbl td.w-long{ min-width:280px }
.ds .tbl-scroll{ overflow-x:auto }

/* ---------- 10 · نموذج التحديث ---------- */
.ds .form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4) }
.ds .field{ margin-top:var(--s3) }
.ds .field > label{ display:block; font-size:var(--fs-11); font-weight:600; color:var(--ink-2); margin-bottom:6px }
.ds .input, .ds .select, .ds .area{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-chip);
  background:var(--surface); color:var(--ink); font:inherit;
  font-size:var(--fs-14); padding:10px var(--s3);
}
.ds .area{ min-height:64px; resize:vertical }
.ds .input::placeholder, .ds .area::placeholder{ color:var(--muted) }
.ds .input:focus-visible, .ds .select:focus-visible, .ds .area:focus-visible,
.ds .btn:focus-visible, .ds .chip:focus-visible{
  outline:2px solid var(--brand-gold); outline-offset:2px;
}
.ds .range{ width:100%; accent-color:var(--brand-gold); height:28px }
.ds .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  border-radius:var(--r-chip); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink);
  font-size:var(--fs-14); font-weight:600; padding:10px var(--s4);
  min-height:44px; text-decoration:none;
}
.ds .btn--primary{ background:var(--brand-gold); border-color:var(--brand-gold); color:#241B04 }
.ds .btn--dark{ background:var(--brand-charcoal); border-color:var(--brand-charcoal); color:#fff }
.ds .btn--sm{ min-height:32px; padding:5px var(--s3); font-size:var(--fs-12); font-weight:600 }
.ds .btn--ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink-2) }
.ds .btn--block{ width:100% }
.ds .btn[disabled]{ opacity:.55; cursor:not-allowed }

/* ---------- 11 · سجل النشاط ---------- */
.ds .act{ display:flex; gap:var(--s3); padding-block:var(--s3); border-top:1px solid var(--line) }
.ds .act:first-child{ border-top:0 }
.ds .av{
  width:28px; height:28px; border-radius:50%;
  background:var(--brand-gold-soft); color:var(--brand-gold-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-11); font-weight:700; flex:none;
}
.ds .act__body{ flex:1 1 auto; min-width:0; font-size:var(--fs-12); color:var(--ink-2) }
.ds .act__body b{ color:var(--ink); font-weight:600 }

/* ---------- 12 · بلاطة الغاية ---------- */
.ds .goal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4); box-shadow:var(--shadow-1) }
.ds .goal__ico{
  width:34px; height:34px; border-radius:var(--r-chip);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-gold-soft); color:var(--brand-gold-ink);
}
.ds .goal__name{ font-size:var(--fs-16); font-weight:700; margin-top:var(--s3) }
.ds .goal__target{ font-family:var(--font-mono); font-size:var(--fs-20); margin-top:2px; direction:ltr; unicode-bidi:isolate }
.ds .goal__sub{ font-size:var(--fs-11); color:var(--ink-2); margin-top:var(--s1) }
.ds .goal__foot{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3) }

/* ---------- 13 · الخريطة الحرارية ---------- */
.ds .heat{ display:grid; gap:4px }
.ds .heat__cell{
  height:34px; border-radius:var(--r-chip);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-11); font-weight:600; border:1px solid transparent;
}
.ds .heat__cell--pending{ background:var(--state-pending-bg); color:var(--state-pending-ink); border-color:var(--line) }
.ds .heat__cell--na{ background:transparent; border:1px dashed var(--line-strong); color:var(--muted) }
.ds .heat__cell--green{ background:var(--state-green-bg); color:var(--state-green-ink); border-color:var(--state-green) }
.ds .heat__cell--amber{ background:var(--state-amber-bg); color:var(--state-amber-ink); border-color:var(--state-amber) }
.ds .heat__cell--red  { background:var(--state-red-bg);   color:var(--state-red-ink);   border-color:var(--state-red) }
.ds .heat__rowhead{ display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-12); height:34px }

/* ---------- 14 · الهيكل والتنقّل ---------- */
.ds.app{ display:flex; min-height:100vh }
.ds .side{
  width:248px; flex:none; background:var(--brand-charcoal); color:#EDEAE3;
  display:flex; flex-direction:column; padding:var(--s4) 0;
}
.ds .side__brand{ padding:0 var(--s4) var(--s4); display:flex; align-items:center; gap:var(--s3) }
.ds .side__mark{
  width:34px; height:34px; border-radius:9px; background:var(--brand-gold); color:#241B04;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.ds .side__name{ font-size:var(--fs-14); font-weight:700; line-height:1.3; display:block }
.ds .side__role{ font-size:var(--fs-11); color:#9AA0A8; display:block }
.ds .side__group{ padding:var(--s3) var(--s4) 6px; font-size:var(--fs-11); color:#8E959D; font-weight:600 }
.ds .nav{
  display:flex; align-items:center; gap:var(--s3);
  padding:9px var(--s4); font-size:var(--fs-14); color:#D6D2C9;
  border-inline-start:3px solid transparent; text-decoration:none;
}
.ds .nav:hover{ background:#1B1F24; color:#fff }
.ds .nav--on{ background:#20242A; color:#fff; border-inline-start-color:var(--brand-gold); font-weight:600 }
.ds .nav__count{
  margin-inline-start:auto; font-family:var(--font-mono); font-size:var(--fs-11);
  background:#2C3138; color:#EDEAE3; border-radius:var(--r-pill); padding:1px 7px;
}
.ds .nav__count--alert{ background:var(--state-amber); color:#241B04 }
.ds .side__foot{ margin-top:auto; padding:var(--s4); border-top:1px solid #272C33; display:flex; gap:var(--s3); align-items:center }
.ds .main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; background:var(--bg) }
.ds .topbar{
  height:56px; flex:none; display:flex; align-items:center; gap:var(--s4);
  padding:0 var(--s6); background:var(--surface); border-bottom:1px solid var(--line);
}
.ds .crumb{ display:flex; align-items:center; gap:6px; font-size:var(--fs-12); color:var(--ink-2); flex-wrap:wrap }
.ds .crumb__sep{ color:var(--muted) }
.ds .crumb__node{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-chip); padding:2px 8px; text-decoration:none; color:inherit }
.ds .crumb__node--on{ background:var(--brand-gold-soft); border-color:var(--brand-gold); color:var(--brand-gold-ink); font-weight:600 }
.ds .search{
  display:flex; align-items:center; gap:var(--s2);
  border:1px solid var(--line-strong); border-radius:var(--r-chip);
  padding:7px var(--s3); width:300px; color:var(--muted); font-size:var(--fs-12);
}
.ds .page{ padding:var(--s6); flex:1 1 auto; min-width:0 }
.ds .tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line) }
.ds .tabs a{
  padding:10px 18px; font-size:var(--fs-14); color:var(--ink-2);
  border-bottom:2px solid transparent; text-decoration:none;
  min-height:44px; display:flex; align-items:center; gap:7px;
}
.ds .tabs a.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--brand-gold) }
.ds .tabs a .n{ font-family:var(--font-mono); font-size:var(--fs-11); color:var(--muted) }
.ds .tabbar{ display:none; border-top:1px solid var(--line); background:var(--surface) }
.ds .tabbar__item{
  flex:1 1 0; min-height:56px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  font-size:var(--fs-11); color:var(--ink-2); text-decoration:none;
}
.ds .tabbar__item--on{ color:var(--brand-gold-ink); font-weight:600 }

/* ---------- 15 · الحالات الموحّدة ---------- */
.ds .empty{
  border:1px dashed var(--line-strong); border-radius:var(--r-card);
  background:var(--surface); padding:var(--s8) var(--s4);
  text-align:center; color:var(--ink-2);
}
.ds .empty b{ display:block; font-size:var(--fs-16); color:var(--ink); margin-bottom:6px }
.ds .empty p{ font-size:var(--fs-12); max-width:420px; margin-inline:auto }
.ds .err{
  border:1px solid var(--state-red); background:var(--state-red-bg);
  border-radius:var(--r-card); padding:var(--s4);
  color:var(--state-red-ink); font-size:var(--fs-12);
}
.ds .skel{ background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2)); border-radius:var(--r-chip); height:12px }
.ds .toast{
  display:inline-flex; align-items:center; gap:var(--s3);
  background:var(--brand-charcoal); color:#fff; border-radius:var(--r-card);
  padding:var(--s3) var(--s4); font-size:var(--fs-12);
  box-shadow:0 8px 24px rgba(21,24,28,.22);
}

/* ---------- بطاقات ولوحات عامة ---------- */
.ds .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-1) }
.ds .card__h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:var(--s4) var(--s4) var(--s3) }
.ds .card__h b{ font-size:var(--fs-16); font-weight:700 }
.ds .card__h span{ font-size:var(--fs-11); color:var(--ink-2) }
.ds .card__b{ padding:0 var(--s4) var(--s4) }
.ds .sec{ margin-top:var(--s8) }
.ds .sec__h{ display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s4) }
.ds .sec__h b{ font-size:var(--fs-16); font-weight:700 }
.ds .sec__h span{ font-size:var(--fs-12); color:var(--ink-2) }
.ds .note{
  border-inline-start:3px solid var(--brand-gold); background:var(--brand-gold-soft);
  border-radius:var(--r-chip); padding:var(--s3) var(--s4);
  font-size:var(--fs-12); color:var(--ink-2);
}
.ds .demo-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-11); font-weight:600;
  color:var(--state-decision-ink); background:var(--state-decision-bg);
  border:1px dashed var(--state-decision); border-radius:var(--r-chip); padding:2px 8px;
}
/* شريط إنجاز الدورة — مربّع لكل مبادرة */
.ds .cycle{ display:flex; gap:3px }
.ds .cycle__seg{ height:8px; flex:1 1 0; border-radius:2px; background:transparent; border:1px dashed var(--state-pending) }
.ds .cycle__seg--done{ background:var(--brand-gold); border:1px solid var(--brand-gold) }

/* ---------- التجاوب — نقطة كسر واحدة ---------- */
@media (max-width:900px){
  .ds .side{ display:none }
  .ds .tabbar{ display:flex; position:sticky; bottom:0; z-index:5 }
  .ds .topbar{ padding:0 var(--s4); gap:var(--s3) }
  .ds .search{ width:auto; flex:1 1 auto }
  .ds .page{ padding:var(--s4) }
  .ds .init{ flex-wrap:wrap }
  .ds .init__side{ width:100%; justify-content:space-between }
  .ds .tbl-scroll > .tbl{ min-width:760px }
  .ds .btn{ min-height:44px }
}

/* ---------- الطباعة A4 — الكوكبيت والتقارير ---------- */
@media print{
  @page{ size:A4; margin:14mm }
  .ds .side, .ds .topbar, .ds .tabbar, .ds .btn, .ds .search{ display:none !important }
  .ds, .ds .card, .ds .stat, .ds .kr-card{ background:#fff !important; color:#000; box-shadow:none !important }
  .ds .card, .ds .stat, .ds .kr-card, .ds .tbl{ border-color:#CCC !important; break-inside:avoid }
  .ds .page{ padding:0 }
  .ds a{ color:#000; text-decoration:none }
}