/* ==========================================================================
   صفحة «التعاقدات» (#/contracts) — نقل تصميم manzoma-sales-crm.
   كل القواعد **مربوطة بـ`.ctr`** — التصميم الأصلي بيستعمل أسماء عامة
   (`table` · `header` · `.panel` · `.tabs`) وحقنها كده كانت هتسرّب على كل
   صفحات النظام. ودرس فلاتر «قاعدة العملاء» لسه طازة: قاعدة عامة على وسم
   بتفضل تنطبق على عنصر جديد بعد ما اللي اتكتبت له يختفي.

   ⚠️ **والمودالات بتتبني في `body` برّه `.ctr`** — فالتوكنز معرَّفة على
   `.ctr-overlay` كمان، وإلا الكارت بينزل أبيض في الدارك مود (نفس مصيدة
   `.modal.cdb-hist`).
   ========================================================================== */

/* ⚠️ **مافيش سقف عرض هنا**: الجدول ١٧ عمود وبيتحشر في ١٧٠٠px على شاشة
   عريضة، والباقي فراغ (شكوى م. قطب). `.container` بقت بلا سقف، وسقف خاص
   بالصفحة دي كان هيرجّع المشكلة لصفحة واحدة بس — وتفضل تتقري «بق». */
.ctr-page { max-width: none; }

.ctr,
.ctr-overlay {
  /* ------- نهاري: قيم التصميم المرجعي بالحرف ------- */
  --k-ink: #17251e;
  --k-muted: #77847d;
  --k-green: #087a55;
  --k-green-deep: #173f31;
  --k-green-soft: #edf7f2;
  --k-line: #e4eae6;
  --k-line-2: #dce5e0;
  --k-bg: #f4f7f5;
  --k-card: #fff;
  --k-head: #f7faf8;
  --k-rowline: #edf1ef;
  --k-th: #69766f;
  --k-field: #526159;
  --k-tabbg: #e9efec;
  --k-tabfg: #66736c;
  --k-aa-fg: #087553;
  --k-aa-bg: #edf7f2;
  --k-aa-line: #00c76a;
  --k-cs-fg: #4866a8;
  --k-cs-bg: #eef2fb;
  --k-cs-line: #246bfe;
  --k-cs-bar: #7088bd;
  --k-done-fg: #177248;
  --k-done-bg: #e9f7ef;
  --k-pend-fg: #b66b24;
  --k-pend-bg: #fff1e5;
  --k-pay-fg: #6e56a6;
  --k-pay-bg: #f2effb;
  --k-low-fg: #bd4135;
  --k-low-bg: #fff0ed;
  --k-remain: #c3483b;
  --k-lowline: #d45a4b;
  --k-lowfoot: #fff5f3;
  --k-del: #bb4e4e;
  --k-cur: #fffbeb;
  --k-mgr-line: #d49a2f;
  --k-dash: #9baca3;
  /* السطر اللي اتضاف من النظام — لمسة خفيفة تفرّقه عن صفوف الشيت من غير ما
     تسرق العين من الأرقام (طلب م. قطب: «لوّن لي السطور»). */
  --k-newrow: #fbfaf0;
  --k-newline: #d8b53e;
  --k-overlay: rgba(16, 32, 24, .66);
  --k-shadow: 0 2px 9px rgba(22, 40, 30, .07);
  --k-shadow-lg: 0 12px 35px rgba(19, 37, 28, .12);

  color: var(--k-ink);
  font-family: Tahoma, Arial, sans-serif;
  font-size: 14px;
}

/* ------- ليلي: نفس التخطيط، ألوان النظام ------- */
:root[data-theme="dark"] .ctr,
:root[data-theme="dark"] .ctr-overlay {
  --k-ink: var(--ink);
  --k-muted: var(--muted);
  --k-green: #3fbd8d;
  --k-green-deep: #122c24;
  --k-green-soft: #16302a;
  --k-line: var(--line);
  --k-line-2: var(--line-strong);
  --k-bg: var(--card-2);
  --k-card: var(--card);
  --k-head: var(--card-2);
  --k-rowline: var(--line);
  --k-th: var(--muted);
  --k-field: var(--ink);
  --k-tabbg: var(--card-2);
  --k-tabfg: var(--muted);
  --k-aa-fg: #3fbd8d;
  --k-aa-bg: #16302a;
  --k-aa-line: #2f9e75;
  --k-cs-fg: #8db4f5;
  --k-cs-bg: #16203a;
  --k-cs-line: #4a7fd6;
  --k-cs-bar: #5b83c9;
  --k-done-fg: #4cc38a;
  --k-done-bg: #142b21;
  --k-pend-fg: #e0a35f;
  --k-pend-bg: #33251a;
  --k-pay-fg: #c3aefb;
  --k-pay-bg: #241a3d;
  --k-low-fg: #ef7b6d;
  --k-low-bg: #331d1a;
  --k-remain: #ef7b6d;
  --k-lowline: #b4463a;
  --k-lowfoot: #2a1a18;
  --k-newrow: #262110;
  --k-newline: #b99a2f;
  --k-del: #e06a6a;
  --k-cur: #2e2716;
  --k-mgr-line: #c08a2a;
  --k-dash: var(--faint);
  --k-overlay: rgba(0, 0, 0, .62);
  --k-shadow: 0 2px 9px rgba(0, 0, 0, .35);
  --k-shadow-lg: 0 12px 35px rgba(0, 0, 0, .5);
}
/* لو المستخدم على «تفضيل النظام» ومفيش data-theme صريح */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ctr,
  :root:not([data-theme="light"]) .ctr-overlay {
    --k-ink: var(--ink); --k-muted: var(--muted); --k-green: #3fbd8d;
    --k-green-deep: #122c24; --k-green-soft: #16302a;
    --k-line: var(--line); --k-line-2: var(--line-strong); --k-bg: var(--card-2);
    --k-card: var(--card); --k-head: var(--card-2); --k-rowline: var(--line);
    --k-th: var(--muted); --k-field: var(--ink);
    --k-tabbg: var(--card-2); --k-tabfg: var(--muted);
    --k-aa-fg: #3fbd8d; --k-aa-bg: #16302a; --k-aa-line: #2f9e75;
    --k-cs-fg: #8db4f5; --k-cs-bg: #16203a; --k-cs-line: #4a7fd6; --k-cs-bar: #5b83c9;
    --k-done-fg: #4cc38a; --k-done-bg: #142b21;
    --k-pend-fg: #e0a35f; --k-pend-bg: #33251a;
    --k-pay-fg: #c3aefb; --k-pay-bg: #241a3d;
    --k-low-fg: #ef7b6d; --k-low-bg: #331d1a; --k-remain: #ef7b6d;
    --k-lowline: #b4463a; --k-lowfoot: #2a1a18; --k-del: #e06a6a;
    --k-cur: #2e2716; --k-mgr-line: #c08a2a; --k-dash: var(--faint);
    --k-overlay: rgba(0, 0, 0, .62);
    --k-shadow: 0 2px 9px rgba(0, 0, 0, .35);
    --k-shadow-lg: 0 12px 35px rgba(0, 0, 0, .5);
  }
}

/* ------------------------- لافتة «بيانات تجريبية» -------------------------
   ⚠️ **مقصود إنها تبان.** الغرض منها إن اللي بيراجع مايفتكرش الأرقام حقيقية،
   فلو بقت رمادية صغيرة تحت العنوان بتبقى مالهاش لازمة. بتتشال مع دفعة الباك إند. */
.ctr .ctr-preview {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 13px 16px; border-radius: 11px;
  background: var(--k-pend-bg); color: var(--k-pend-fg);
  border: 1px solid var(--k-pend-fg); font-size: 11px;
}
.ctr .ctr-preview b { font-size: 12px; }
.ctr .ctr-preview span { color: var(--k-pend-fg); opacity: .85; }

/* --------------------- تنبيه «المدفوع شامل الضريبة» ---------------------
   أحمر خفيف — بيوصف **الرقم** نفسه وبيفضل على طول، بعكس لافتة «بيانات تجريبية»
   الصفرا اللي بتوصف حالة الصفحة وبتتشال مع الباك إند. اللونين مختلفين عن قصد
   عشان الاتنين لو ظهروا مع بعض مايتقروش على إنهم حاجة واحدة. */
.ctr .ctr-vatnote {
  margin-bottom: 18px; padding: 11px 16px; border-radius: 10px;
  background: var(--k-low-bg); color: var(--k-low-fg);
  border: 1px solid var(--k-low-bg); font-size: 11px; font-weight: 700;
}
.ctr .ctr-vatnote b { font-weight: 700; }

/* ------------------------------- التابات ------------------------------- */
.ctr .ctr-tabsrow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 24px;
}
.ctr .ctr-tabs {
  display: flex; gap: 6px; padding: 5px; width: max-content;
  background: var(--k-tabbg); border-radius: 12px;
}
.ctr .ctr-tabs button {
  color: var(--k-tabfg); cursor: pointer; white-space: nowrap; background: none;
  border: 0; border-radius: 8px; padding: 11px 20px; font: 700 12px inherit;
  font-family: inherit;
}
.ctr .ctr-tabs button.active {
  color: var(--k-green); background: var(--k-card); box-shadow: var(--k-shadow);
}
.ctr .ctr-topbtn {
  color: var(--k-green); cursor: pointer; background: var(--k-card);
  border: 1px solid var(--k-line-2); border-radius: 9px; padding: 10px 16px;
  font: 700 11px inherit; font-family: inherit;
}

/* ------------------------------- شريط الفترة ------------------------------- */
.ctr .ctr-period { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ctr .ctr-period > div { display: flex; align-items: center; gap: 7px; }
.ctr .ctr-period span { color: var(--k-muted); font-size: 10px; }
.ctr .ctr-period select {
  color: var(--k-field); background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 11px;
  width: auto; min-width: 96px;   /* صريح — القاعدة العامة في styles.css بتديها 100% */
}

/* ------------------------------- الهيدر والكروت ------------------------------- */
.ctr .ctr-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.ctr .ctr-head h1 { margin: 0 0 7px; font-size: 23px; }
.ctr .ctr-head p, .ctr .ctr-panelhead p, .ctr .ctr-sectiontitle p, .ctr .ctr-emphead p, .ctr .ctr-calctitle p {
  color: var(--k-muted); margin: 0; font-size: 11px;
}
.ctr .ctr-primary {
  cursor: pointer; font-weight: 700; background: var(--k-green); color: #fff;
  border: 0; border-radius: 9px; padding: 12px 18px; font-family: inherit; font-size: 12px;
}
.ctr .ctr-cards { display: grid; gap: 14px; margin-bottom: 18px; }
.ctr .ctr-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctr .ctr-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ctr .ctr-cards article {
  border: 1px solid var(--k-line); background: var(--k-card); border-radius: 13px;
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
}
.ctr .ctr-cards span { color: var(--k-muted); font-size: 11px; }
.ctr .ctr-cards strong { font-size: 20px; }
.ctr .ctr-cards small { color: var(--k-muted); font-size: 10px; }
.ctr .ctr-cards-4 article:last-child { border-top: 3px solid var(--k-lowline); }
/* ⚠️ **كلاس خاص بكروت المتابعة**: بقوا كارتين (`ctr-cards-2`)، والقاعدة فوق
   على `-4` بس — فالخط الأحمر على «إجمالي المتبقي» كان هيختفي. وكلاس خاص أنضف
   من إضافة `-2` للقاعدة دي، لأن `ctr-cards-2` مستعملة في تابات تانية. */
.ctr .ctr-pendcards article:last-child { border-top: 3px solid var(--k-lowline); }

/* ------------------------------- اللوحات والجداول ------------------------------- */
.ctr .ctr-panel {
  border: 1px solid var(--k-line); background: var(--k-card);
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.ctr .ctr-panelhead {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 18px 20px; flex-wrap: wrap;
}
.ctr .ctr-panel h2, .ctr .ctr-sectiontitle h2, .ctr .ctr-emphead h2, .ctr .ctr-calctitle h2 {
  margin: 0 0 5px; font-size: 15px;
}
.ctr .ctr-commtable > h2 { padding: 18px 20px 12px; }
.ctr .ctr-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctr .ctr-filters input, .ctr .ctr-filters select {
  color: var(--k-field); background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 11px;
}
.ctr .ctr-filters input { width: 280px; max-width: 100%; }
/* 🔴 **عرض صريح للسلكت مش رفاهية.** `styles.css` فيه قاعدة **عامة**
   `input, select, textarea { width: 100% }`، فأي خانة مابنحددّلهاش عرض بتاخد
   عرض حاويتها كله — والفلاتر كانت بتلف على تلات سطور والسلكتس بعرض اللوحة.
   ⚠️ أي `select` أو `input` جديد في الصفحة دي لازم ياخد عرضه صريح، وفيه حرس
      في `contracts.test.mjs` بيرفض أي قاعدة على select/input من غير width. */
.ctr .ctr-filters select { width: auto; min-width: 118px; }

/* 🔴 **اسم الفلتر جنبه.** الاتنين كانوا سلكتس فاضيين ومحدش يعرف مين فيهم
   الشركة ومين المصدر إلا لما يفتحهم. الاسم في `<span>` جوّه الـ`<label>`
   فالضغط عليه بيفتح السلكت. */
.ctr .ctr-fsel {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 8px; padding: 0 0 0 4px; width: auto;
}
.ctr .ctr-fsel > span { color: var(--k-th); font-size: 10px; padding-right: 10px; }
.ctr .ctr-fsel select { border: 0; background: none; padding: 9px 6px 9px 2px; width: auto; }

/* 🔴 **لون القايمة المنسدلة لازم يتكتب صريح على `option`.**
   القايمة نفسها **بيرسمها المتصفّح**، وبياخد خلفيتها من `background-color` بتاع
   الـ`select` — و`.ctr-fsel select` عندها `background: none` عشان تبان جوّه
   الحبّة، والشفاف بيتحسب **أبيض**. فالنص `var(--k-field)` الفاتح كان بينزل
   **أبيض على أبيض** في الدارك مود، والشركتين مش باينين خالص (شكوى سارة).
   ⚠️ **والوراثة من الـ`select` مابتوصلش للـ`option`** — لازم اللونين الاتنين.
   📌 **تاني ظهور لنفس المصيدة**: أول مرة كانت في «قاعدة العملاء» (2026-08-19)،
      و`styles.css` صلّحها لـ`.fsel select option` و`.msel option` **بس** —
      والصفحة دي محدّداتها `.ctr-fsel`، فمكانتش مغطّاة. */
.ctr select option,
.ctr-overlay select option { background-color: var(--k-card); color: var(--k-field); }

/* ── قايمة «مصدر العميل» (اختيار متعدّد) ──
   نفس مكوّن `.ms` بتاع «قاعدة العملاء» — **نفس الماركب ونفس الربط** — والمقاسات
   والألوان بس هي اللي هنا، بتوكنز `--k-*` بتاعة الصفحة.
   ⚠️ **مش نسخة من قواعد `clients.css`**: هي بتقرا `--c-*`، والتوكن المخترع
      بيرجّع فاضي فالعنصر ينزل **بلا لون خالص ومن غير أي خطأ**.
   📌 واللوحة جوّه `.ms` اللي `position:relative` فبتفتح تحت الزرار في RTL. */
.ctr .ms { position: relative; }
.ctr .ms-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--k-card); border: 1px solid var(--k-line-2); border-radius: 8px;
  color: var(--k-field); font: inherit; font-size: 11px; padding: 8px 11px; width: auto;
}
.ctr .ms-btn:hover { border-color: var(--k-green); }
.ctr .ms-lab { color: var(--k-th); font-size: 10px; }
.ctr .ms-val { font-weight: 700; max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ctr .ms-arrow { width: 0; height: 0; flex: none;
  border: 4px solid transparent; border-top-color: var(--k-muted); margin-top: 3px; }
.ctr .ms.open .ms-arrow { transform: rotate(180deg); }
.ctr .ms-panel {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 190px; max-height: 260px; overflow: auto; padding: 5px;
  background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 10px; box-shadow: var(--k-shadow-lg);
}
.ctr .ms.open .ms-panel { display: block; }
.ctr .ms .ms-opt {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 8px; border-radius: 7px; font-size: 11px; color: var(--k-ink);
}
.ctr .ms .ms-opt:hover { background: var(--k-head); }
.ctr .ms .ms-opt input { width: 14px; height: 14px; flex: none; accent-color: var(--k-green); margin: 0; }
.ctr .ms .ms-opt span { flex: 1; min-width: 0; }
.ctr .ms-empty { padding: 8px; font-size: 11px; color: var(--k-muted); }
.ctr .ctr-tablewrap { border-top: 1px solid var(--k-line); overflow-x: auto; }
.ctr .ctr-table { border-collapse: collapse; width: 100%; min-width: 1500px; font-size: 10px; }
.ctr .ctr-table.ctr-mini { min-width: 0; font-size: 10px; }
/* 🔴 **جدول المتابعة أضيق**: بقى ٩ أعمدة بدل ١٣، والـ1500px المشتركة
   كانت هتفرد التسعة على عرض التلتاشر — أعمدة متباعدة **وتمرير أفقي**
   على شاشة لابتوب عادية بلا أي داعي.
   ⚠️ **والقاعدة تلات كلاسات** (0,3,0) عشان تغلب `.ctr .ctr-table` (0,2,0)،
      و`min-width` فاضلة موجودة مش صفر عشان الموبايل يفضل يمرّر بدل ما
      الأعمدة تتكتم على بعضها. */
.ctr .ctr-pendingpanel .ctr-table { min-width: 900px; }

/* شريط اختيار جداول العمولات للطباعة */
.ctr .ctr-tblpick { flex-wrap: wrap; align-items: center; gap: 10px; }
.ctr .ctr-tblpick .ms-opt {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--k-field); cursor: pointer; white-space: nowrap;
}
.ctr .ctr-tblpick .ms-opt input { width: auto; margin: 0; cursor: pointer; }

/* ── كارت المراجعة: بيتفتح ويتقفل بالضغط على الكود ── */
.ctr .ctr-duptoggle {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit;
  color: inherit; font: inherit;
}
.ctr .ctr-duptoggle:hover .ctr-dupcode { text-decoration: underline; }
.ctr .ctr-dupchev { color: var(--k-dash); font-size: 12px; }
.ctr .ctr-dupcode { font-size: 14px; font-weight: 800; color: var(--k-green); }
.ctr .ctr-dupwhy { font-size: 10px; color: var(--k-dash); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr .ctr-dupodoo { color: var(--k-green); font-weight: 800; text-decoration: none; }
/* 🔴 **`display` في القاعدة الأساسية بتغلب `[hidden]{display:none}`** بتاعة
   المتصفّح — من غير السطر ده الجدول بيفضل مفتوح في **كل** كارت والزرار
   يبان معطّل. رابع ظهور لنفس المصيدة بعد `.toast` و`.cch-calls`
   و`.dls-replymenu`. */
.ctr .ctr-dupbody { display: block; }
.ctr .ctr-dupbody[hidden] { display: none; }

/* ── زرار نسخ الكود ── */
.ctr .ctr-codecell { display: inline-flex; align-items: center; gap: 5px; }
.ctr .ctr-copy {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--k-line); background: var(--k-card); color: var(--k-muted);
  border-radius: 6px; cursor: pointer; padding: 0; font: inherit; line-height: 1;
  transition: color .15s, border-color .15s;
}
.ctr .ctr-copy:hover { color: var(--k-green); border-color: var(--k-green); }
.ctr .ctr-table th {
  color: var(--k-th); text-align: right; white-space: nowrap; background: var(--k-head);
  padding: 12px 13px; font-weight: 600; position: sticky; top: 0; z-index: 1;
}
.ctr .ctr-table td {
  white-space: nowrap; vertical-align: middle; border-top: 1px solid var(--k-rowline); padding: 13px;
}
.ctr .ctr-table.ctr-mini td, .ctr .ctr-table.ctr-mini th { padding: 10px 11px; }
.ctr .ctr-table td a { color: var(--k-green); font-weight: 700; text-decoration: none; }
.ctr .ctr-table tfoot td { background: var(--k-head); font-weight: 700; }
.ctr .ctr-empty { color: var(--k-muted); text-align: center !important; padding: 34px !important; }
.ctr .ctr-notes { text-overflow: ellipsis; max-width: 180px; overflow: hidden; }
/* 🔴 **«مطور أعمال»** بيشيل أكتر من اسم مفصولين بـ«، » (٢٥٧ دفعة من ٦٤٥)،
   فكان أعرض عمود في الجدول. الأسماء بتتقص بـ«…» والهوفر بيوريهم كاملين.
   ⚠️ **و`nowrap` مش زيادة**: `text-overflow` مابتشتغلش غير على سطر واحد —
      من غيرها النص بيلفّ والعمود يبقى **أطول** بدل ما يبقى أضيق. */
.ctr .ctr-people { max-width: 130px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ctr .ctr-dash { color: var(--k-dash); }

/* السطر اللي اتضاف من النظام — خلفية خفيفة وشريط على الحافة.
   ⚠️ **`border-inline-start`** مش `border-right`: الصفحة RTL، والحافة الصح
      بتتقلب لوحدها لو الاتجاه اتغيّر يومًا. */
.ctr .ctr-table tr.ctr-new td { background: var(--k-newrow); }
.ctr .ctr-table tr.ctr-new td:first-child { box-shadow: inset 3px 0 0 var(--k-newline); }
.ctr .ctr-legend-new { color: var(--k-muted); font-size: 10px; display: flex;
  align-items: center; gap: 6px; margin-top: 3px; }
.ctr .ctr-legend-new i { width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--k-newrow); border: 1px solid var(--k-newline); }

.ctr .ctr-chip { border-radius: 20px; padding: 5px 8px; font-size: 9px; font-weight: 700; display: inline-block; }
.ctr .ctr-co-aa { color: var(--k-aa-fg); background: var(--k-aa-bg); }
.ctr .ctr-co-cs { color: var(--k-cs-fg); background: var(--k-cs-bg); }
.ctr .ctr-done { color: var(--k-done-fg); background: var(--k-done-bg); }
.ctr .ctr-pending { color: var(--k-pend-fg); background: var(--k-pend-bg); }
.ctr .ctr-pay { color: var(--k-pay-fg); background: var(--k-pay-bg); }
.ctr .ctr-low { color: var(--k-low-fg); background: var(--k-low-bg); padding: 5px 10px; }
.ctr .ctr-remain { color: var(--k-remain); }

.ctr .ctr-edit, .ctr .ctr-del {
  color: var(--k-green); cursor: pointer; background: none; border: 0;
  padding: 4px; font-size: 10px; font-family: inherit;
}
.ctr .ctr-del { color: var(--k-del); }

.ctr .ctr-panel.ctr-pendingpanel tfoot td { background: var(--k-lowfoot); }

/* ------------------------------- الإحصائيات ------------------------------- */
.ctr .ctr-monthlayout {
  display: grid; grid-template-columns: 2fr 1fr; align-items: stretch;
  gap: 14px; margin-bottom: 16px;
}
.ctr .ctr-monthchart { min-height: 450px; padding: 0; }
.ctr .ctr-yearly { padding: 0; }
.ctr .ctr-sectiontitle {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px; flex-wrap: wrap;
}
.ctr .ctr-sectiontitle > strong {
  color: var(--k-green); background: var(--k-green-soft); border-radius: 8px; padding: 7px 13px;
}
.ctr .ctr-legend { display: flex; gap: 18px; font-size: 10px; }
.ctr .ctr-legend span { display: flex; align-items: center; gap: 6px; }
.ctr .ctr-legend span::before {
  content: ""; background: var(--k-green); border-radius: 3px; width: 9px; height: 9px;
}
.ctr .ctr-legend span:last-child::before { background: var(--k-cs-bar); }
.ctr .ctr-chart {
  border-top: 1px solid var(--k-line); display: flex; justify-content: space-around;
  align-items: flex-end; height: 350px; padding: 25px 20px 35px; overflow-x: auto;
}
.ctr .ctr-bar {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 8px; width: 7%; height: 100%;
}
.ctr .ctr-bar > div { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; }
.ctr .ctr-bar i {
  background: var(--k-green); border-radius: 5px 5px 0 0; width: 50%; min-height: 2px; display: block;
}
.ctr .ctr-bar i:last-child { background: var(--k-cs-bar); }
.ctr .ctr-bar small { color: var(--k-muted); font-size: 9px; }
.ctr .ctr-chart-daily { gap: 3px; padding-left: 12px; padding-right: 12px; }
.ctr .ctr-chart-daily .ctr-bar { width: 3%; min-width: 13px; }
.ctr .ctr-chart-daily .ctr-bar > div { gap: 1px; }
.ctr .ctr-chart-daily .ctr-bar small { font-size: 8px; }
.ctr .ctr-yearly tfoot td { color: var(--k-green); background: var(--k-green-soft); }
.ctr .ctr-curmonth td { background: var(--k-cur); }

.ctr .ctr-rolegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ctr .ctr-rolecard { padding: 0; }
.ctr .ctr-rolecard td b { display: flex; align-items: center; gap: 8px; }
.ctr .ctr-rolecard td i {
  width: 22px; height: 22px; color: var(--k-green); background: var(--k-green-soft);
  border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-style: normal;
}
.ctr .ctr-rolecard td strong { color: var(--k-green); }

/* ------------------------------- العمولات ------------------------------- */
.ctr .ctr-commwrap { margin-bottom: 26px; }
.ctr .ctr-commgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ctr .ctr-commtable { padding: 0; margin: 0; }
.ctr .ctr-commval { color: var(--k-green); }
.ctr .ctr-cards.ctr-commcards article:first-child { border-top: 3px solid var(--k-aa-line); }
.ctr .ctr-cards.ctr-commcards article:last-child { border-top: 3px solid var(--k-cs-line); }

.ctr .ctr-empprojects { margin-bottom: 28px; }
.ctr .ctr-emphead {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 20px; flex-wrap: wrap;
}
.ctr .ctr-emphead label { min-width: 260px; font-size: 10px; font-weight: 700; }
.ctr .ctr-emphead select {
  color: var(--k-field); background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 9px; width: 100%; margin-top: 7px; padding: 11px; display: block; font: inherit; font-size: 11px;
}
.ctr .ctr-cotables { border-top: 1px solid var(--k-line); display: grid; gap: 18px; padding: 18px; }
.ctr .ctr-cotable { border: 1px solid var(--k-line); border-radius: 11px; overflow: hidden; }
.ctr .ctr-cotable h3 { margin: 0; padding: 13px 16px; font-size: 13px; }
.ctr .ctr-cotable.ctr-co-aa h3 { color: var(--k-aa-fg); background: var(--k-aa-bg); border-right: 4px solid var(--k-aa-line); }
.ctr .ctr-cotable.ctr-co-cs h3 { color: var(--k-cs-fg); background: var(--k-cs-bg); border-right: 4px solid var(--k-cs-line); }
.ctr .ctr-combined {
  color: #fff; background: linear-gradient(135deg, var(--k-green-deep), var(--k-green));
  border-radius: 12px; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 18px 20px; flex-wrap: wrap;
}
.ctr .ctr-combined > span { font-size: 13px; font-weight: 700; }
.ctr .ctr-combined > div { display: flex; gap: 30px; flex-wrap: wrap; }
.ctr .ctr-combined small { opacity: .8; font-size: 9px; }
.ctr .ctr-combined strong { margin-top: 5px; font-size: 16px; display: block; }
.ctr .ctr-empempty { color: var(--k-muted); text-align: center; padding: 34px; }

/* الموظف يمين والحاسبة شمال — والحاسبة عمود جنبي أضيق (طلب سارة).
   ⚠️ `align-items: start` مقصودة: من غيرها العمودين بياخدوا نفس الطول وكارت
   الحاسبة بيتمطّ فاضي تحت لو لستة مشروعات الموظف طويلة. */
.ctr .ctr-commlayout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px; align-items: start; margin-bottom: 26px;
}
.ctr .ctr-commlayout > .ctr-empprojects { margin-bottom: 0; }
.ctr .ctr-calcside { display: block; }
.ctr .ctr-calctitle { margin: 0 0 12px; }
.ctr .ctr-calc { margin: 0; padding: 22px; }
.ctr .ctr-calcstep { display: flex; align-items: flex-start; gap: 14px; }
.ctr .ctr-calcstep > span {
  width: 30px; height: 30px; color: var(--k-green); background: var(--k-green-soft);
  border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ctr .ctr-calcstep label { flex: 1; font-size: 11px; font-weight: 700; display: block; position: relative; }
.ctr .ctr-calcstep input {
  width: 100%; color: var(--k-ink); background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 9px; margin-top: 8px; padding: 13px 14px; font: 700 18px inherit;
  font-family: inherit; display: block;
}
.ctr .ctr-calcstep label > small { color: var(--k-muted); margin-top: 6px; font-size: 9px; font-weight: 400; display: block; }
.ctr .ctr-readonly strong {
  border: 1px solid var(--k-line); background: var(--k-bg); border-radius: 9px;
  margin-top: 8px; padding: 13px 14px; font-size: 18px; display: block;
}
.ctr .ctr-calcdiv { color: var(--k-dash); margin: 5px 0 5px 12px; font-size: 17px; }
.ctr .ctr-rateinput { position: relative; }
.ctr .ctr-rateinput b { color: var(--k-green); position: absolute; top: 21px; left: 14px; }
.ctr .ctr-calcresult {
  color: #fff; text-align: center; background: linear-gradient(135deg, var(--k-green), var(--k-green-deep));
  border-radius: 14px; margin-top: 24px; padding: 24px;
}
.ctr .ctr-calcresult span { opacity: .8; font-size: 11px; }
.ctr .ctr-calcresult strong { margin: 10px; font-size: 32px; display: block; }
.ctr .ctr-calcresult small { opacity: .7; font-size: 9px; }

/* ------------------------------- المودالات ------------------------------- */
.ctr-overlay {
  z-index: 60; background: var(--k-overlay); display: grid; place-items: center;
  padding: 18px; position: fixed; inset: 0;
}
.ctr-overlay .ctr-modal {
  background: var(--k-card); color: var(--k-ink); border-radius: 16px;
  width: min(940px, 100%); max-height: 94vh; padding: 24px; overflow: auto;
  font-family: Tahoma, Arial, sans-serif;
}
.ctr-overlay .ctr-hist { width: min(1180px, 100%); }
.ctr-overlay .ctr-policy { width: min(720px, 100%); }
.ctr-overlay .ctr-modalhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.ctr-overlay .ctr-modalhead h2 { margin: 0 0 5px; font-size: 15px; }
.ctr-overlay .ctr-modalhead p { color: var(--k-muted); margin: 0; font-size: 11px; }
.ctr-overlay .ctr-close { cursor: pointer; background: none; border: 0; font-size: 25px; color: var(--k-muted); line-height: 1; }
.ctr-overlay .ctr-formgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ctr-overlay .ctr-formgrid label { font-size: 10px; font-weight: 700; }
.ctr-overlay .ctr-formgrid input, .ctr-overlay .ctr-formgrid select {
  width: 100%; margin-top: 6px; display: block; color: var(--k-field); background: var(--k-card);
  border: 1px solid var(--k-line-2); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 11px;
}
.ctr-overlay .ctr-modal footer {
  border-top: 1px solid var(--k-line); display: flex; justify-content: flex-end;
  gap: 9px; margin-top: 22px; padding-top: 17px;
}
.ctr-overlay .ctr-modal footer > button:not(.ctr-primary) {
  border: 1px solid var(--k-line); background: var(--k-card); color: var(--k-ink);
  border-radius: 8px; padding: 10px 18px; cursor: pointer; font: inherit; font-size: 12px;
}
.ctr-overlay .ctr-primary {
  cursor: pointer; font-weight: 700; background: var(--k-green); color: #fff;
  border: 0; border-radius: 9px; padding: 12px 18px; font-family: inherit; font-size: 12px;
}
.ctr-overlay .ctr-percentfield { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ctr-overlay .ctr-percentfield input { flex: 1; margin-top: 0 !important; }
.ctr-overlay .ctr-percentfield span {
  width: 38px; height: 38px; color: var(--k-green); background: var(--k-bg);
  border: 1px solid var(--k-line-2); border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.ctr-overlay .ctr-percenthint { color: var(--k-muted); margin-top: 5px; font-size: 9px; font-weight: 400; display: block; }

/* الاختيار المتعدّد — القايمة بتتفتح بشيل `hidden`.
   ⚠️ **قاعدة `[hidden]` إجبارية**: `display:grid` بتغلب قاعدة المتصفّح
   `[hidden]{display:none}`، فمن غيرها القايمة بتفضل مفتوحة على طول والزرار
   يبان معطّل (نفس بق `.cch-calls` و`.toast` بالحرف). */
.ctr-overlay .ctr-multi { margin-top: 6px; position: relative; }
.ctr-overlay .ctr-multifield { position: relative; }
.ctr-overlay .ctr-multitrigger {
  color: var(--k-field); text-align: right; cursor: pointer; background: var(--k-card);
  border: 1px solid var(--k-line-2); border-radius: 8px; display: flex;
  justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  min-height: 39px; padding: 8px 10px; font: inherit; font-size: 11px;
}
.ctr-overlay .ctr-multitrigger span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ctr-overlay .ctr-multitrigger.opened { border-color: var(--k-green); }
.ctr-overlay .ctr-multiopts {
  z-index: 20; background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 10px; padding: 7px; position: absolute; top: calc(100% + 5px);
  left: 0; right: 0; max-height: 240px; overflow: auto; box-shadow: var(--k-shadow-lg);
  display: grid;
}
.ctr-overlay .ctr-multiopts[hidden] { display: none; }
.ctr-overlay .ctr-multiopts label {
  cursor: pointer; border-radius: 7px; display: flex; align-items: center;
  gap: 8px; padding: 8px; font-size: 11px; font-weight: 400;
}
.ctr-overlay .ctr-multiopts label.checked { color: var(--k-green); background: var(--k-green-soft); }
/* ⚠️ **اسم مسجّل على الصف ومش في «الموظفين».** الودجت بيضيفه عشان
   الحفظ مايمسحهوش في صمت (الحفظ بيقرا المربّعات المعلَّمة)، والعلامة دي
   بتقول للي بيراجع إنه مش من الروستر — مش خطأ، بس يستاهل عين. */
.ctr-overlay .ctr-multiopts label.ctr-extra > span { color: var(--k-muted); font-style: italic; }
.ctr-overlay .ctr-multiopts label.ctr-extra > span::after { content: ' · مش في الموظفين'; font-size: 9px; }
.ctr-overlay .ctr-multiopts input { accent-color: var(--k-green); width: auto !important; margin: 0 !important; }
.ctr-overlay .ctr-multidone {
  background: var(--k-green); color: #fff; cursor: pointer; border: 0; border-radius: 7px;
  width: 100%; margin-top: 6px; padding: 8px; font: 700 11px inherit; font-family: inherit;
}

.ctr-overlay .ctr-histsearch { margin-bottom: 16px; }
.ctr-overlay .ctr-histsearch input {
  width: 100%; color: var(--k-field); background: var(--k-card); border: 1px solid var(--k-line-2);
  border-radius: 9px; padding: 12px 14px; font: inherit; font-size: 13px;
}
.ctr-overlay .ctr-histsum {
  display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px;
  color: var(--k-muted); font-size: 11px;
}
.ctr-overlay .ctr-histsum b { color: var(--k-green); font-size: 13px; margin-right: 5px; }
.ctr-overlay .ctr-tablewrap { border: 1px solid var(--k-line); border-radius: 11px; overflow-x: auto; }
.ctr-overlay .ctr-table { border-collapse: collapse; width: 100%; font-size: 10px; }
.ctr-overlay .ctr-table th {
  color: var(--k-th); text-align: right; white-space: nowrap; background: var(--k-head);
  padding: 10px 11px; font-weight: 600;
}
.ctr-overlay .ctr-table td { white-space: nowrap; border-top: 1px solid var(--k-rowline); padding: 10px 11px; }
.ctr-overlay .ctr-table td a { color: var(--k-green); font-weight: 700; text-decoration: none; }
.ctr-overlay .ctr-chip { border-radius: 20px; padding: 5px 8px; font-size: 9px; font-weight: 700; display: inline-block; }
.ctr-overlay .ctr-pay { color: var(--k-pay-fg); background: var(--k-pay-bg); }
.ctr-overlay .ctr-empty { color: var(--k-muted); text-align: center !important; padding: 34px !important; }

.ctr-overlay .ctr-poltabs {
  background: var(--k-bg); border-radius: 10px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 5px; margin-bottom: 18px;
}
.ctr-overlay .ctr-poltabs button {
  color: var(--k-th); cursor: pointer; background: none; border: 0; border-radius: 7px;
  padding: 11px 8px; font: 700 11px inherit; font-family: inherit;
}
.ctr-overlay .ctr-poltabs button.active { color: var(--k-green); background: var(--k-card); box-shadow: var(--k-shadow); }
.ctr-overlay .ctr-polsection {
  border: 1px solid var(--k-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
}
.ctr-overlay .ctr-polsection h3 { margin: 0 0 10px; font-size: 13px; }
.ctr-overlay .ctr-polsection ul { margin: 0; padding-right: 18px; }
.ctr-overlay .ctr-polsection li { color: var(--k-muted); font-size: 11px; line-height: 1.9; }
.ctr-overlay .ctr-polformula {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--k-green-soft); color: var(--k-green); font-size: 11px; font-weight: 700;
}
.ctr-overlay .ctr-pol-aa { border-right: 4px solid var(--k-aa-line); }
.ctr-overlay .ctr-pol-cs { border-right: 4px solid var(--k-cs-line); }
.ctr-overlay .ctr-pol-mgr { border-right: 4px solid var(--k-mgr-line); }
.ctr-overlay .ctr-pol-team { border-right: 4px solid var(--k-green); }
.ctr-overlay .ctr-polclose { width: 100%; margin-top: 6px; }

/* ══════════ ⏳ تاب «مكررات» — مؤقّت (طلب م. قطب) ══════════
   الشيل: البلوك ده كله. مافيش توكن جديد — كله من البالتة الموجودة. */
.ctr .ctr-dupcard { margin-bottom: 14px; }
.ctr .ctr-dupsum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--k-muted); }
.ctr .ctr-dupsum b { color: var(--k-ink); font-size: 13px; margin-right: 5px; }
.ctr .ctr-dupflags {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 20px; border-top: 1px solid var(--k-line);
}
.ctr .ctr-flag-bad { color: var(--k-low-fg); font-size: 11px; font-weight: 700; }
.ctr .ctr-flag-warn { color: var(--k-pend-fg); font-size: 11px; }
/* ⚠️ **علامة الخبر الكويس** («مدفوع بالكامل») — لون تاني عن التحذير،
   وإلا نتيجة سليمة بتتقرا مشكلة. */
.ctr .ctr-flag-ok { color: var(--k-done-fg); font-size: 11px; }

/* ------------------------------- الشاشات الصغيرة ------------------------------- */
@media (max-width: 1100px) {
  .ctr .ctr-rolegrid { grid-template-columns: 1fr; }
  .ctr .ctr-commgrid { grid-template-columns: 1fr; }
  /* العمودين بيبقوا فوق بعض — الحاسبة تحت مشروعات الموظف */
  .ctr .ctr-commlayout { grid-template-columns: 1fr; }
  .ctr .ctr-commlayout > .ctr-empprojects { margin-bottom: 0; }
}
@media (max-width: 1000px) {
  .ctr .ctr-monthlayout { grid-template-columns: 1fr; }
  .ctr .ctr-monthchart { min-height: 380px; }
}
@media (max-width: 900px) {
  .ctr .ctr-cards-4 { grid-template-columns: 1fr 1fr; }
  .ctr .ctr-panelhead { flex-direction: column; align-items: stretch; }
  .ctr .ctr-filters { flex-wrap: wrap; }
  .ctr .ctr-filters input { width: 100%; }
  .ctr-overlay .ctr-formgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .ctr .ctr-emphead { flex-direction: column; align-items: stretch; }
  .ctr .ctr-emphead label { width: 100%; min-width: 0; }
  .ctr .ctr-combined { flex-direction: column; align-items: flex-start; }
  .ctr .ctr-combined > div { gap: 18px; }
}
@media (max-width: 560px) {
  .ctr .ctr-cards, .ctr .ctr-cards-2, .ctr .ctr-cards-4 { grid-template-columns: 1fr; }
  .ctr .ctr-tabs { width: 100%; overflow-x: auto; }
  .ctr-overlay .ctr-formgrid { grid-template-columns: 1fr; }
  .ctr-overlay .ctr-poltabs { grid-template-columns: 1fr; }
}

/* ------------------------------- الطباعة -------------------------------
   ⚠️ **الثيم النهاري بالقوّة**: الفريق شغّال على الدارك مود، فالورقة كانت
   بتطلع مستطيل أسود. نفس اللي `.cdb` بيعمله بالحرف — والقيم دي **نسخة من
   البالتة النهارية فوق**، فأي تغيير فيها لازم يتعمل في الاتنين. */

/* ------------------- قفل حقول الموظفين في سلة/الإضافات -------------------
   ⚠️ **`[hidden]` محتاجة قاعدة صريحة**: `display` في القاعدة الأساسية بتغلب
      قاعدة المتصفّح `[hidden]{display:none}` — نفس مصيدة `.ctr-multiopts`
      و`.toast` و`.cch-calls` و`.dls-replymenu`. */
.ctr .ctr-rolehint, .ctr-overlay .ctr-rolehint { display: flex; align-items: center; }
.ctr .ctr-rolehint[hidden], .ctr-overlay .ctr-rolehint[hidden] { display: none; }
.ctr .ctr-multi.is-locked, .ctr-overlay .ctr-multi.is-locked { opacity: .5; }
.ctr .ctr-multi.is-locked .ctr-multitrigger,
.ctr-overlay .ctr-multi.is-locked .ctr-multitrigger { cursor: not-allowed; }

@media print {
  .ctr, .ctr-overlay {
    --k-ink: #17251e !important; --k-muted: #77847d !important; --k-green: #087a55 !important;
    --k-green-soft: #edf7f2 !important; --k-line: #e4eae6 !important; --k-line-2: #dce5e0 !important;
    --k-bg: #f4f7f5 !important; --k-card: #fff !important; --k-head: #f7faf8 !important;
    --k-rowline: #edf1ef !important; --k-th: #69766f !important; --k-field: #526159 !important;
    --k-aa-fg: #087553 !important; --k-aa-bg: #edf7f2 !important;
    --k-cs-fg: #4866a8 !important; --k-cs-bg: #eef2fb !important;
    --k-done-fg: #177248 !important; --k-done-bg: #e9f7ef !important;
    --k-pend-fg: #b66b24 !important; --k-pend-bg: #fff1e5 !important;
    --k-pay-fg: #6e56a6 !important; --k-pay-bg: #f2effb !important;
    --k-low-fg: #bd4135 !important; --k-low-bg: #fff0ed !important;
    --k-remain: #c3483b !important; --k-cur: #fffbeb !important;
    /* 🔴 **دول كانوا ناقصين، والنتيجة شريط أسود في وش الورقة.**
       `--k-lowfoot` (تفوت جدول المتابعة) و`--k-newrow` (تلوين الصف الجديد)
       فضلوا بقيمة **الدارك**، فطبعوا مستطيلات سودا بتشرب الحبر.
       📌 والقاعدة اللي كانت ناقصة: **كل توكن الدارك بيعرّفه لازم الطباعة
          تعرّفه** — وفيه حرس دلوقتي بيقارن اللستتين. */
    --k-lowfoot: #fff5f3 !important; --k-lowline: #d45a4b !important;
    --k-newrow: #fbfaf0 !important;  --k-newline: #d8b53e !important;
    --k-aa-line: #00c76a !important; --k-cs-line: #246bfe !important;
    --k-cs-bar: #7088bd !important;  --k-mgr-line: #d49a2f !important;
    --k-green-deep: #173f31 !important;
    --k-tabbg: #e9efec !important;   --k-tabfg: #66736c !important;
    --k-dash: #9baca3 !important;    --k-del: #bb4e4e !important;
    --k-overlay: rgba(16, 32, 24, .66) !important;
    --k-shadow: none !important;     --k-shadow-lg: none !important;
  }
  .ctr .ctr-tabsrow, .ctr .ctr-period, .ctr .ctr-filters, .ctr .ctr-primary { display: none !important; }
  .ctr .ctr-actions, .ctr .ctr-table th.no-print, .ctr .ctr-copy { display: none !important; }
  /* 🔴 **الطباعة الجزئية**: `app.js` بيعلّم اللي مش هيتطبع، وده اللي بيخبّيه.
     من غير `!important` قواعد العرض بتاعت اللوحات بتغلبه. */
  .ctr .ctr-hideprint { display: none !important; }
  .ctr .ctr-tablewrap { overflow: visible !important; }
  /* 🔴 **الجدول لازم يقعد في عرض الورقة — من غير اعتماد على اتجاهها.**
     كان بيتقص من الجنب («الجدول متاكل» — سارة). و`printPage(true)` بيحقن
     `@page { size: A4 landscape }`، **بس كروم بيتجاهل الاتجاه ده لو المستخدم
     غيّر «Layout» بإيده قبل كده** — والصفحة مالهاش سلطة على ده.
     ✅ `table-layout: fixed` + `width: 100%` بيخلّوا الأعمدة **تتقاسم** العرض
        والنص يلفّ — فمستحيل الجدول يعدّي حدّ الورقة، أفقي كان ولا طولي. */
  .ctr .ctr-table {
    width: 100% !important; min-width: 0 !important;
    table-layout: fixed !important; font-size: 8.5px !important;
  }
  .ctr .ctr-table th, .ctr .ctr-table td {
    padding: 4px 3px !important;
    /* ⚠️ **اللفّ إجباري**: من غيره الكلمة الطويلة بتفرد العمود وتكسر التقسيم */
    white-space: normal !important; word-break: break-word !important; overflow: visible !important;
  }
  /* ⚠️ **والملاحظات وأسماء المطوّرين بتتطبع كاملة**: على الشاشة مقصوصين بسطر
     واحد، وعلى الورق دول **معلومة** — نفس قاعدة ملاحظة الاجتماع بالحرف.
     📌 والقاعدة العامة فوق بتلغي `white-space` و`overflow` لكل الخانات، بس
        **مابتلغيش `max-width`** — فلازم تتكتب هنا صراحة. */
  .ctr .ctr-table td.ctr-notes,
  .ctr .ctr-table td.ctr-people { max-width: none !important; text-overflow: clip !important; }
  /* ورأس الجدول بيتكرر على كل صفحة — ٦ صفحات بلا رأس مش مقروءة */
  .ctr .ctr-table thead { display: table-header-group !important; }
  .ctr .ctr-table tr { break-inside: avoid !important; page-break-inside: avoid !important; }
}