/* ═══════════════════════════════════════════════════════════════════════════
   أنماط ناقصة — لوحة التخطيط · الميزانية · نافذة إضافة برنامج
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ سبب وجود هذا الملف: العلامات مكتوبة والأنماط لم تُكتب. قيس على الـDOM
   المرسوم عبر ١٢ دورًا و١٩ شاشة: **٢٨ صنفًا** تصل المستخدم بلا أي تعريف نمط،
   منها ٢٦ في «لوحة التخطيط» وحدها — فتظهر الشاشة نصًّا خامًا بلا صناديق ولا
   شبكة ولا حدود. صفر قاعدة `.pb*` في التطبيق كله قبل هذا الملف.

   ⚠️ لماذا ملف منفصل لا إضافة إلى site.css: `site.css` ينتهي باستعلام وسائط
   (السطر ٢٢٤٤). والقاعدة المقرَّرة في هذا المشروع أن استعلامات الوسائط تأتي
   **آخر الملف** — فإضافة قواعد بعدها تغلبها وتكسر الاستجابة. الملف منفصل
   ويُحمَّل بعده، واستعلاماته في آخره.

   البنية مقروءة من shared.js لا مفترضة:
     pbBar     21840   ·  pbGroup   22265   ·  pbDetail4 22299
     pbDots    22260   ·  planboard 22339   ·  budfr     budget.js:504
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────── شريط الأدوات والمفتاح ───────────────────── */
.pbbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.pbbar .spacer { flex: 1 1 auto; }

.pblg, .pbleg {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 11px; color: var(--mut);
}
.pblg > i, .pbleg > i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  margin-inline-start: 6px; flex: none;
}
.pblg > i:first-child, .pbleg > i:first-child { margin-inline-start: 0; }

/* ───────────────────────── حاوية المجموعات ───────────────────────── */
.pbwrap { display: flex; flex-direction: column; gap: 8px; }

.pbg {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card, #fff); overflow: hidden;
  /* ⚠️ عرض صريح لا ضمني. القياس: بدونه يصير .pbg بعرض ٥٥١ بكسل داخل حاوٍ
     عرضه ٢٤٦، فتُدفع الصفحة ٢٩٩ بكسل أفقيًا. السبب أن عرض صفّ الحاوية
     المرنة يساوي أعرض عنصر فيه، فيتمدّد الجميع إلى عرض الجدول (٥٥١، ثمانية
     أعمدة) — و min-width:0 وحدها لا تكفي هنا لأن المحور العرضي ليس محور
     الحاوية. width:100% قيمة قاطعة تُلزم العنصر بعرض أبيه، فيتقيّد معه حاوي
     التمرير .tw ويمرّر الجدول داخله بدل أن يدفع الصفحة. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pbg.on { border-color: var(--navy2, #29ABE2); }

/* حاوي التمرير لا يتجاوز أباه مهما اتّسع الجدول */
.pbg > .tw { max-width: 100%; overflow-x: auto; }

/* رأس المجموعة زرٌّ — يُصفَّر ثم يُبنى شبكةً */
.pbgh {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 120px 46px auto;
  align-items: center; gap: 10px;
  width: 100%; padding: 10px 13px;
  cursor: pointer; font: inherit; color: inherit; text-align: start;
}
.pbgh:hover { background: var(--faint, #F7F8FA); }
.pbgh:focus-visible { outline: 2px solid var(--navy2, #29ABE2); outline-offset: -2px; }
.pbg.on > .pbgh { border-bottom: 1px solid var(--line2, #EDEFF3); }

.pbgc { font-size: 9px; color: var(--mut); line-height: 1; }

.pbgn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pbgn > b {
  font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pbgb {
  height: 8px; border-radius: 4px; background: var(--line2, #EDEFF3); overflow: hidden;
}
.pbgb > i { display: block; height: 100%; border-radius: 4px; }

.pbgp {
  font-size: 12px; font-weight: 800; text-align: end;
  font-variant-numeric: tabular-nums;
}

.pbge, .pbgd {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
.pbge { background: var(--warnb, #FDF3E2); color: var(--warn, #8A5B08); }
.pbgd { background: var(--okb,  #E4F4EC); color: var(--ok,   #0E5F42); }

/* ───────────────────────── جدول الخانات ───────────────────────── */
/* ⚠️ .tw هو الأب الممرِّر — الجدول أعرض من حاويته بحكم عدد الأعمدة */
.pbt { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pbt th, .pbt td {
  padding: 6px 8px; border-bottom: 1px solid var(--line2, #EDEFF3);
  vertical-align: middle;
}
.pbt th {
  font-size: 10.5px; font-weight: 600; color: var(--mut);
  text-align: center; white-space: nowrap;
  background: var(--faint, #F7F8FA);
  position: sticky; top: 0; z-index: 2;
}
.pbt th:first-child, .pbt td:first-child { text-align: start; min-width: 190px; }
.pbt tbody tr:hover { background: var(--faint, #F7F8FA); }
.pbt tbody tr:last-child td { border-bottom: 0; }

/* خانة بأربع حالات */
.pbc4 {
  text-align: center; cursor: pointer; padding: 5px 6px;
  border-inline: 1px solid var(--line2, #EDEFF3);
}
.pbc4:hover { background: var(--line2, #EDEFF3); }
.pbc4.on {
  background: var(--navy2, #29ABE2); color: #fff;
  box-shadow: inset 0 0 0 2px var(--navy, #1B3157);
}
.pbc4.on .pbcn { color: #fff; }

.pbdots { display: flex; gap: 3px; justify-content: center; margin-bottom: 3px; }
.pbdot  { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }

.pbcn {
  display: block; font-size: 10px; color: var(--mut);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* خانة لا تنطبق */
.pbna { text-align: center; color: var(--mut); opacity: .45; cursor: default; }

/* ───────────────────────── لوحة التفصيل ───────────────────────── */
.pbd {
  border-top: 1px solid var(--line); background: var(--faint, #F7F8FA);
  padding: 11px 13px;
}
.pbdh {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.pbdh > b { font-size: 12.5px; }
.pbdh .spacer { flex: 1 1 auto; }
.pbdg {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--line2, #EDEFF3); color: var(--mut);
}

/* أربع بطاقات: مستهدف · خطة · اعتماد · تنفيذ */
.pb4g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 9px;
}
.pb4 {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card, #fff); padding: 10px 12px;
  border-inline-start: 3px solid var(--line);
}
.pb4.ok   { border-inline-start-color: var(--ok,    #127A55); }
.pb4.run  { border-inline-start-color: var(--navy2, #29ABE2); }
.pb4.part,
.pb4.auto { border-inline-start-color: var(--warn,  #B7791F); }
.pb4.thin,
.pb4.none,
.pb4.bad  { border-inline-start-color: var(--bad,   #BB3325); }
.pb4.na   { border-inline-start-color: var(--line); opacity: .7; }

.pb4h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); }
.pb4h > i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pb4h > b { font-weight: 600; }

.pb4m {
  font-size: 18px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.pb4s { font-size: 10.5px; color: var(--mut); line-height: 1.35; }
.pb4 > .btn { margin-top: 6px; align-self: flex-start; }

/* برامج الخانة */
.pbpl {
  display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
  border-top: 1px solid var(--line2, #EDEFF3); padding-top: 9px;
}
.pbp {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 62px 44px;
  gap: 9px; align-items: center; font-size: 11px; padding: 3px 0;
}
.pbpn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbpt { font-size: 10px; color: var(--mut); white-space: nowrap; }
.pbpi { color: var(--ok, #127A55); font-weight: 700; font-variant-numeric: tabular-nums; }
.pbpr { text-align: end; font-variant-numeric: tabular-nums; color: var(--mut); }

/* حالات فارغة */
.pbempty, .pbx { color: var(--mut); font-size: 11px; }
.pbds { display: flex; gap: 6px; flex-wrap: wrap; }

/* ───────────────────────── الميزانية ───────────────────────── */
/* .budfr شبكة 190px/1fr/74px معرَّفة في budget.js — و.budfn عمودها الأول */
.budfn {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--mut);
}

/* ─────────────────── نافذة إضافة برنامج ─────────────────── */
.pqeff {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--faint, #F7F8FA); font-size: 11.5px;
}

/* ─────────────────── الاستجابة — آخر الملف ─────────────────── */
@media (max-width: 960px) {
  .pbgh { grid-template-columns: 14px minmax(0, 1fr) 84px 40px; }
  .pbgh > .pbge, .pbgh > .pbgd { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .pbbar { gap: 7px; }
  .pb4m { font-size: 15px; }
  .pbp { grid-template-columns: minmax(0, 1fr) 56px 40px; }
  .pbp > .pbpt { display: none; }
  .pbt th:first-child, .pbt td:first-child { min-width: 140px; }
}