/* =============================================================
   تقرير الإنجاز الأسبوعي — مساحة .fwk-*
   -------------------------------------------------------------
   سطح «تشغيل وقراءة»: كثافةٌ ثابتة وبنيةٌ متوقَّعة. لا حركة دائمة،
   ولا زجاج (الزجاج محصور بالكروم الطافي في DESIGN.md)، والحركة على
   transform/opacity وحدهما بمدّة var(--f-dur).

   الأنصاف من سلّم DESIGN.md حصراً: 8 · 12 · 16 · 20 · 26. وحيث
   تعشّق سطحٌ داخل سطح، النصف الداخلي = الخارجي ناقص الحاشية — لا
   رقمٌ يُقرَّب بالنظر (٥٧٪ من إعلانات المشروع كانت خارج السلّم
   بأرقامٍ تبعد بكسلاً واحداً عن توكن؛ لا نزيد عليها).
   ============================================================= */

.fwk {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── شريط الاختيار والعدّادات ─────────────────────────────── */
.fwk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  box-shadow: var(--f-shadow-sm);
}

.fwk-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  flex: 1 1 320px;
}
.fwk-pick__l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.82rem/1 var(--f-sans);
  color: var(--f-ink-2);
  white-space: nowrap;
}
.fwk-pick select {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 8px 10px;
  font: 500 0.88rem/1.4 var(--f-sans);
  color: var(--f-ink);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  /* 16 (الشريط) − 4 (الحاشية + الحشوة الفعلية) = 12 على السلّم */
  border-radius: var(--f-r);
  transition: border-color var(--f-dur) var(--f-ease);
}
.fwk-pick select:hover { border-color: var(--f-border-2); }

.fwk-counts {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.fwk-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-inline-size: 68px;
  padding: 6px 10px;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  /* الرقم يقود والتسمية تسنده — تباينٌ في الوزن لا في اللون وحده */
  font-variant-numeric: tabular-nums;
}
.fwk-count b {
  font: 700 1.06rem/1.2 var(--f-disp, var(--f-sans));
  color: var(--f-ink);
}
.fwk-count small {
  font: 500 0.7rem/1.3 var(--f-sans);
  color: var(--f-ink-3);
}
/* الدلالة في الحدّ والحبر لا في أرضيةٍ ملوّنة: أرضيةٌ ملوّنة على
   عدّادٍ صغير تُنتج تضاداً حرجاً في السمة الليلية. */
.fwk-count--ok   { border-color: color-mix(in oklab, var(--f-ok) 42%, var(--f-border)); }
.fwk-count--ok b { color: var(--f-ok); }
.fwk-count--open { border-color: color-mix(in oklab, var(--f-warn) 42%, var(--f-border)); }
.fwk-count--open b { color: var(--f-warn); }

.fwk-export { margin-inline-start: auto; }

/* ── المرشّحات ───────────────────────────────────────────── */
.fwk-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.fwk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-inline-size: 0;
  padding: 0 10px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  color: var(--f-ink-3);
  transition: border-color var(--f-dur) var(--f-ease);
}
.fwk-search input {
  flex: 1 1 auto;
  min-inline-size: 0;
  /* هدف اللمس ٣٦ ≥ أرضية ٢٨ المعتمدة في final_board.css § ٢٠ */
  block-size: 36px;
  border: 0;
  background: none;
  font: 500 0.86rem/1.4 var(--f-sans);
  color: var(--f-ink);
}

/* مؤشّر التركيز — درسان مدفوعا الثمن، والثاني كشفه القياس هنا:
   ١) `outline:none` على الحقل ونقلُ الأثر إلى `border-color` على الحاوية
      **ليس مؤشّر تركيز**: لا يُدرَك في السمة الليلية ولا يجتاز 3:1.
   ٢) ونقلُ الحلقة إلى `:focus-within` على **الحاوية** لا يكفي أيضاً —
      `tests/a11y-audit.js` يسأل العنصرَ المركَّز نفسه: هل تغيّر
      `outline`/`box-shadow` عليه حين طابق `:focus-visible`؟ والحاويةُ
      ليست العنصرَ المركَّز، فبقي الحقلُ مبلَّغاً بلا حلقة.
   فالحلقة على **الحقل** بإزاحةٍ سالبة، فتُرى ملتصقةً بالحافة الداخلية
   للحاوية (شكلُ ما أردتُه) والمؤشّرُ على العنصر الذي يملك التركيز فعلاً.
   وبأصنافٍ صريحة لا داخل `:where()` (نوعيتها صفر فتُدهَس)،
   و`!important` لأن ظلالاً تزيينيةً في الشلال تحملها أصلاً. */
.fwk-search:focus-within { border-color: var(--f-focus); }
.fwk-search input:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: -3px !important;
  border-radius: var(--f-r-sm);
}
.fwk-pick select:focus-visible,
.fwk-toggle:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}

.fwk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 0 12px;
  font: 600 0.8rem/1 var(--f-sans);
  color: var(--f-ink-2);
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  cursor: pointer;
  transition: color var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
.fwk-toggle:hover { border-color: var(--f-border-2); }
/* عيبٌ كامنٌ صُحِّح: كان `color: var(--f-navy)` — ولم يُبلَّغ في القياس
   الأول لأن الزرّ **لم يكن مضغوطاً** وقت القياس، فالحالةُ غير مرسومة
   لا تُقاس. وقياسُ نظيره في `.fst-chip.is-on` أعطى **1.01** ليلاً.
   فالكحلي لا يُكتب حبراً لنصّ، والدلالةُ في الحدّ والأرضية.
   ودرسٌ في القياس نفسه: **حالاتُ التفاعل تُقاس مرسومةً** — قياسُ شاشةٍ
   في حالتها الابتدائية وحدها يُخفي كل ما تحت `:hover` و`.is-on`. */
.fwk-toggle.is-on {
  color: var(--f-ink);
  border-color: var(--f-focus);
  background: var(--f-surface-2);
}

.fwk-shown {
  font: 500 0.78rem/1 var(--f-sans);
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}

/* ── الجدول ─────────────────────────────────────────────── */
/* التمرير الأفقي في حاوية الجدول وحدها: الصفحة تبقى بلا تجاوز
   (scrollWidth − clientWidth = 0) على ١٤٤٠/١٠٢٤/٧٦٨/٣٩٠. */
.fwk-tablewrap {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  box-shadow: var(--f-shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.fwk-tablewrap:focus-visible {
  outline: 2px solid var(--f-focus);
  outline-offset: 2px;
}

.fwk-cap {
  caption-side: top;
  text-align: start;
  padding: 11px 14px 9px;
  font: 600 0.8rem/1.4 var(--f-sans);
  color: var(--f-ink-3);
  border-block-end: 1px solid var(--f-border);
}

.fwk-table {
  inline-size: 100%;
  min-inline-size: 1080px;      /* دون هذا تتكسّر الأعمدة الاثنا عشر */
  border-collapse: collapse;
  font: 500 0.82rem/1.45 var(--f-sans);
  font-variant-numeric: tabular-nums;
}

.fwk-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;                    /* داخل الحاوية فقط — سلّم الطبقات في
                                    DESIGN.md محفوظ (topbar 50 · overlay 100) */
  padding: 9px 10px;
  text-align: start;
  white-space: nowrap;
  font: 700 0.76rem/1.3 var(--f-sans);
  color: var(--f-ink-2);
  background: var(--f-surface-2);
  border-block-end: 1px solid var(--f-border-2);
}

.fwk-table tbody td {
  padding: 9px 10px;
  vertical-align: middle;
  color: var(--f-ink);
  border-block-end: 1px solid var(--f-border);
}
.fwk-table tbody tr:last-child td { border-block-end: 0; }
.fwk-table tbody tr:hover td { background: var(--f-surface-2); }

.fwk-table tbody tr.is-done td { color: var(--f-ink-2); }
/* المنجَز يُهدَأ بحدٍّ جانبيٍّ رقيق لا بأرضيةٍ خضراء تُغرق الصفّ */
.fwk-table tbody tr.is-done td:first-child {
  box-shadow: inset 2px 0 0 var(--f-ok);
}

.fwk-c-num  { inline-size: 46px; text-align: center; color: var(--f-ink-3); }
.fwk-c-done { inline-size: 58px; text-align: center; }
.fwk-c-svc  { min-inline-size: 190px; font-weight: 600; }
.fwk-c-note { min-inline-size: 240px; }

.fwk-none { color: var(--f-ink-3); }

.fwk-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 26px;
  min-block-size: 22px;
  padding: 0 6px;
  font: 700 0.82rem/1 var(--f-sans);
  color: var(--f-ink-3);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
}
.fwk-flag--ok {
  color: var(--f-ok);
  border-color: color-mix(in oklab, var(--f-ok) 45%, var(--f-border));
}

.fwk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.fwk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  /* أرضية النصّ 11.2px في DESIGN.md — 0.72rem = 11.52px فوقها */
  font: 600 0.72rem/1.5 var(--f-sans);
  color: var(--f-ink-2);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  white-space: nowrap;
}
.fwk-chip--state { color: var(--f-ink-2); border-color: var(--f-border-2); }
.fwk-chip--warn {
  color: var(--f-warn);
  border-color: color-mix(in oklab, var(--f-warn) 48%, var(--f-border));
}

.fwk-nores,
.fwk-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 14px;
  font: 500 0.85rem/1.5 var(--f-sans);
  color: var(--f-ink-3);
}

.fwk-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 11px 13px;
  font: 500 0.79rem/1.65 var(--f-sans);
  color: var(--f-ink-3);
  background: var(--f-surface-2);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
}
.fwk-foot .m-ico,
.fwk-foot svg { flex: 0 0 auto; margin-block-start: 2px; }

/* ── الاستجابة: إعادةُ بناءٍ لا تصغيرٌ ───────────────────── */
@media (max-width: 900px) {
  .fwk-export { margin-inline-start: 0; inline-size: 100%; justify-content: center; }
  .fwk-shown  { margin-inline-start: 0; }
  .fwk-counts { inline-size: 100%; }
  .fwk-count  { flex: 1 1 0; }
}

@media (max-width: 520px) {
  .fwk-bar { padding: 10px; gap: 10px; }
  .fwk-cap { padding-inline: 10px; }
  .fwk-table thead th,
  .fwk-table tbody td { padding: 8px; }
}

@media print {
  .fwk-bar, .fwk-tools, .fwk-foot { display: none !important; }
  .fwk-tablewrap { overflow: visible; border: 0; box-shadow: none; }
  .fwk-table { min-inline-size: 0; font-size: 0.7rem; }
  .fwk-table thead th { position: static; }
}