/* ══════════════════════════════════════════════════════════════════════════
   OpsMaster — طبقة الهوية البصرية
   ══════════════════════════════════════════════════════════════════════════

   ⚠️⚠️⚠️ هذا الملف يُحمَّل **آخر ما يُحمَّل**، ويُشيَّل بسطر واحد.

   استبدال طبقة التنسيق في منتج فيه ستون شاشة دفعةً واحدة مقامرة. فكُتب
   هذا كطبقةِ صقلٍ تعلو ما هو قائم: إن بدت شاشةٌ غير صحيحة، يُحذف سطر
   الرابط من القالب ويعود كل شيء إلى ما كان — بلا تراجعٍ ولا نشرٍ ثانٍ.

   ⚠️⚠️ ولا يُلمس هنا أي صنف من أصناف تايلويند (`.bg-white` وأخواتها).
   الأصناف تُكتب في الشاشات ويُعاد بناؤها، وتجاوزُها من هنا يجعل مصدر
   الشكل موضعين — فيُعدَّل أحدهما ويبقى الآخر، ولا يُعرف أيّهما الفاعل.

   فالتعامل هنا مع **العناصر** (body · h1 · input · table) ومع رموزٍ
   على `:root`. وهذا وحده يغيّر الإحساس بلا أن يكسر بنية.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ ٠ · الخطوط المستضافة محليًّا ══════════════════════════════════════════

   ⚠️⚠️⚠️ **الخطّان الآن داخل الخادم — لا CDN ولا اعتماد على جهاز المستخدم.**

   كان السلّم السابق يقول «استعمل أحسن خطٍّ عربي **موجود** على الجهاز».
   وهذا يعني أن نفس الشاشة تبدو مختلفة عند كل عميل: خطُّ آبل على الماك،
   و«دبي» عند من ثبّته، و`Segoe UI` عند البقية — أي أن هوية المنتج
   البصرية كانت تُقرَّر على أجهزةٍ لا نملكها.

   ⚠️⚠️ الآن: مِلفّان بصيغة woff2 من `public/fonts/`:
     · **IBM Plex Sans Arabic** — متن الواجهة. صُمِّم للعربية أصلًا (لا
       لاتينيٌّ مُعرَّب)، ومقروء في الأحجام الصغيرة التي تملأ الجداول.
     · **Readex Pro** — العناوين. أعرضُ عدًّا وأوضحُ تمييزًا، فيصنع
       الفرقَ بين عنوانٍ ومتن دون تكبيرٍ مبالغ.

   كلاهما برخصة SIL Open Font License — تجاريٌّ ومسموح بإعادة التوزيع
   داخل منتجٍ يُباع. نسخةُ الرخصة بجوارهما في `public/fonts/`.

   ⚠️ `font-display: swap` تعرض النصّ بخطٍّ احتياطي فورًا ثم تُبدِّله —
   فلا تظهر شاشةٌ بيضاء إن تأخّر الملف. و`unicode-range` غير مذكورة
   عمدًا: الملفّ الواحد يحمل العربية واللاتينية معًا. */

@font-face {
  font-family: "OpsSans";
  src: url("../fonts/plex-arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpsSans";
  src: url("../fonts/plex-arabic-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpsSans";
  src: url("../fonts/plex-arabic-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpsSans";
  src: url("../fonts/plex-arabic-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "OpsDisplay";
  src: url("../fonts/readex-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpsDisplay";
  src: url("../fonts/readex-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpsDisplay";
  src: url("../fonts/readex-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpsDisplay";
  src: url("../fonts/readex-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ⚠️ الظلّ الواحد المتدرّج — لا ظلال متفرّقة لكل بطاقة.
     سلّمُ ارتفاعٍ واحد هو ما يجعل الشاشات تبدو من منتجٍ واحد. */
  --ops-shadow-1: 0 1px 2px -1px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .05);
  --ops-shadow-2: 0 2px 4px -2px rgb(15 23 42 / .07), 0 6px 16px -4px rgb(15 23 42 / .08);
  --ops-shadow-3: 0 8px 24px -8px rgb(15 23 42 / .14);

  --ops-hairline: rgb(15 23 42 / .07);
  --ops-surface: #ffffff;

  /* ⚠️⚠️ خلفية الصفحة ليست رماديًّا مسطّحًا: تدرّجٌ شديد الخفوت يمنع
     إحساس «الورقة الميتة» الذي يصنعه لونٌ واحد على شاشةٍ كبيرة. */
  --ops-canvas: #f6f7f9;

  /* ⚠️ اسمان اثنان فقط للخطوط في المنتج كلّه — ومن هنا يُغيَّران معًا. */
  --ops-font-ui: "OpsSans", "SF Arabic", "Geeza Pro", "Dubai",
                 "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --ops-font-display: "OpsDisplay", var(--ops-font-ui);
}

/* ══ ١ · الطباعة ═══════════════════════════════════════════════════════════

   ⚠️⚠️⚠️ **الخط أول ما تراه العين وآخر ما يُنتبه إليه.**

   كان `Segoe UI` — وهو خط ويندوز الافتراضي، أي حرفيًّا ما يظهر حين لا
   يُختار خط. وهذه أوضح إشارةٍ بصرية في منتجٍ عربي إلى أنه قالب.

   ⚠️⚠️ ولا يُحمَّل خطٌّ من شبكةٍ خارجية: منتجٌ يُركَّب في منشآت مغلقة
   لا يجوز أن يتعلّق شكلُه بخادمٍ لا نملكه. فتُذكر هنا أفضلُ الخطوط
   العربية الموجودة فعلًا على أجهزة المستخدمين، مرتّبةً بالجودة —
   وأولها ما يوجد يُستعمل، وآخرها `Segoe UI` كما كان.

   ⚠️ و`ss01`/`ss02` في `font-feature-settings` تُحسّن أشكال بعض
   المحارف العربية في الخطوط التي تدعمها، وتُتجاهَل بصمت فيما سواها. */
body {
  font-family: var(--ops-font-ui);

  font-feature-settings: "ss01", "ss02", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* ⚠️ العربية تحتاج ارتفاع سطرٍ أكبر من اللاتينية: الحروف ذات النزول
     والصعود أكثر، والنص المضغوط يُقرأ بصعوبة ويُتعب عينًا تقضي عليه
     ساعات. */
  line-height: 1.65;

  background-color: var(--ops-canvas);
  color: #1e293b;
}

/* ⚠️⚠️ العناوين أضيق تتبّعًا وأثقل وزنًا وأقصر سطرًا — والفرق بين
   عنوانٍ ونصٍّ عادي هو ما يصنع التسلسل البصري. وبلا تسلسل تبدو الشاشة
   قائمةً مسطّحة مهما حسُنت ألوانها. */
h1, h2, h3, h4, .ops-heading {
  font-family: var(--ops-font-display);
  line-height: 1.35;

  /* ⚠️ التتبّع السالب لا يُطبَّق على العربية: حروفها متّصلة، وتضييقُها
     يلصق الوصلات ويجعل الكلمة كتلةً واحدة. فيُقصر على الاتجاه اللاتيني. */
  font-weight: 700;
}

[dir="ltr"] :where(h1, h2, h3, h4, .ops-heading) {
  letter-spacing: -0.011em;
}

/* ⚠️ الأرقام بعرضٍ ثابت: عمودُ أرقامٍ تتراقص خاناته يبدو مهتزًّا، ولا
   تُقارَن قيمتان فيه بالنظر. وهذه تفصيلةٌ لا يلحظها أحد — ويلحظ غيابَها
   الجميع. */
.font-mono, table td, table th, [dir="ltr"] {
  font-variant-numeric: tabular-nums;
}

/* ══ ٢ · الأسطح ════════════════════════════════════════════════════════════

   ⚠️⚠️ **الحدّ الشعري بدل الإطار الرمادي.** إطارٌ بلون `#e5e7eb` يرسم
   صندوقًا؛ وحدٌّ بشفافيةٍ خفيفة يرسم **ارتفاعًا**. والفرق بينهما هو
   الفرق بين شاشةٍ مرسومة وشاشةٍ مبنيّة. */
.bg-white,
.rounded-xl.border,
.rounded-2xl.border {
  border-color: var(--ops-hairline);
}

/* ⚠️ الظلّ يُستبدل لا يُضاف: ظلال تايلويند الافتراضية أثقل مما يليق
   بشاشةٍ فيها عشرون بطاقة. */
.shadow-sm { box-shadow: var(--ops-shadow-1) !important; }
.shadow-md { box-shadow: var(--ops-shadow-2) !important; }
.shadow-lg { box-shadow: var(--ops-shadow-3) !important; }

/* ══ ٣ · التركيز ═══════════════════════════════════════════════════════════

   ⚠️⚠️⚠️ **حلقة تركيزٍ ظاهرة ليست زينة — هي شرط استعمالٍ بلوحة المفاتيح،
   وشرط قبولٍ في أي مراجعة وصولٍ (accessibility) عند عميل كبير.**

   ومن يملأ نموذجًا طويلًا بالتبويب بلا حلقة تركيز لا يعرف أين هو. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(37 99 235 / .55);
  outline-offset: 2px;
  border-radius: 6px;
}

:where(input, select, textarea):focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / .12);
}

/* ══ ٤ · حقول الإدخال ══════════════════════════════════════════════════════

   ⚠️ الانتقال اللطيف عند التمرير والتركيز يجعل النموذج يبدو **مستجيبًا**.
   والنموذج الجامد يبدو صورةً لا أداة. */
:where(input, select, textarea) {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

:where(input, select, textarea):hover:not(:focus):not([readonly]):not([disabled]) {
  border-color: rgb(15 23 42 / .18);
}

:where(input, textarea)::placeholder {
  color: rgb(100 116 139 / .55);
}

/* ⚠️⚠️ الحقل المعطّل يجب أن **يبدو** معطّلًا: حقلٌ لا يستجيب ويبدو عاديًّا
   يجعل المستخدم يضغط ويعيد ويظنّ المنظومة معطوبة. */
:where(input, select, textarea)[disabled],
:where(input, select, textarea)[readonly] {
  background-color: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
}

/* ══ ٥ · الجداول ═══════════════════════════════════════════════════════════

   ⚠️⚠️ **الرأس يلتصق عند التمرير.** جدولٌ من أربعين صفًّا يفقد عناوين
   أعمدته بعد الصفّ العاشر، فيقرأ المستخدم أرقامًا لا يعرف ما هي —
   ويُضطرّ إلى الصعود والنزول. */
table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ops-surface);
  backdrop-filter: saturate(180%) blur(6px);
}

/* ⚠️ تمييز الصفّ بالمرور: العين تتوه في جدولٍ عريض بين العمود الأول
   والأخير، والخلفية الخفيفة تربط الصفّ بعضه ببعض. */
table tbody tr {
  transition: background-color .12s ease;
}

table tbody tr:hover {
  background-color: rgb(241 245 249 / .7);
}

/* ⚠️⚠️ نظير الوضع الليليّ — غيابه كان يُبيّض الصفّ عند المرور فيختفي نصّه.
   قِيس التباين وقتها ١٫٠٥ : ١، أي نصٌّ أبيض على أبيض. */
:root[data-theme="dark"] table tbody tr:hover {
  background-color: rgb(255 255 255 / .05);
}

/* ══ ٦ · الحركة ════════════════════════════════════════════════════════════

   ⚠️⚠️⚠️ **كان كل عنصر في كل صفحة يتحرّك عند كل فتح — وهذه أشهر علامة
   على القالب الجاهز.**

   حركةٌ تعمّ كل شيء لا تدلّ على شيء، وتؤخّر القراءة نصف ثانية في كل
   مرة، وتُتعب من يفتح الشاشة مئة مرة في اليوم. والحركة في المنتج
   المحترم **تخدم معنى**: تدخل من موضعها، وتسرع، ثم تختفي.

   ⚠️ واحترام `prefers-reduced-motion` ليس تزيّدًا: من يعاني دوارًا
   حركيًّا لا يستطيع استعمال شاشةٍ ترتجّ. */
main > div > * {
  animation: opsEnter .22s cubic-bezier(.22, .61, .36, 1) both !important;
}

@keyframes opsEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.kpi-card {
  animation: opsEnter .26s cubic-bezier(.22, .61, .36, 1) both !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ ٧ · شريط التمرير ══════════════════════════════════════════════════════
   ⚠️ تفصيلة صغيرة يراها المستخدم آلاف المرات في اليوم. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(15 23 42 / .16);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: rgb(15 23 42 / .28); }

/* ⚠️ التحديد بلون العلامة التجارية لا بالأزرق الافتراضي — تفصيلةٌ
   تُشعر بأن أحدًا انتبه. */
::selection { background: rgb(37 99 235 / .18); }

/* ══ ٨ · الطباعة على ورق ═══════════════════════════════════════════════════

   ⚠️⚠️⚠️ **كشف الإخلاء يُطبع، ووقتَ الإنذار لا شاشة ولا شبكة.**

   والصفحة التي تُطبع ومعها قائمةٌ جانبية وأزرار تُهدر نصف الورقة على ما
   لا يُقرأ — ويقف من يحمله عند نقطة التجمّع بورقةٍ ناقصة. */
@media print {
  aside, nav, .no-print,
  button:not(.print-keep),
  [role="navigation"] { display: none !important; }

  body { background: #fff !important; }

  main, main > div { margin: 0 !important; padding: 0 !important; }

  .shadow-sm, .shadow-md, .shadow-lg { box-shadow: none !important; }

  /* ⚠️ الصفّ لا يُقطع بين ورقتين: اسمٌ في ورقة وحالتُه في التالية
     يجعل الكشف غير قابل للقراءة أصلًا. */
  tr, .avoid-break { break-inside: avoid; page-break-inside: avoid; }

  a[href]::after { content: ""; }
}

/* ══ شبكة بطاقات تملأ العرض ══════════════════════════════════════════

   ⚠️⚠️⚠️ **شبكة الأعمدة الثابتة تنهار مع التبويبات.**

   كان ملفّ الزيارة `lg:grid-cols-3`: عمودٌ رئيسي بثلثين وجانبيٌّ بثلث.
   ويعمل ذلك ما دامت كل البطاقات ظاهرة. فلمّا صارت الصفحة تبويبات، صار
   تبويبٌ كامل («التصريح») بطاقاته كلّها في العمود الجانبي — فيُرسم في
   ثلث الشاشة، ويبقى ثلثاها بياضًا. والعكس في تبويبٍ آخر.

   ⚠️⚠️ **فالعرض يُقسَّم على ما ظهر، لا على ما كُتب في القالب.**
   `auto-fit` يطوي المسارات الفارغة، فثلاث بطاقاتٍ تصير ثلاثة أعمدة،
   وبطاقتان تصيران نصفين، وواحدةٌ تملأ العرض — بلا أن يعرف القالب أي
   تبويبٍ مفتوح.

   ⚠️ و`min(100%, 22rem)` لا `22rem` وحدها: على شاشة هاتفٍ أضيق من
   ٢٢rem تفيض البطاقة خارج الصفحة، ويظهر تمريرٌ أفقي لا يُفهم سببه.
   ═══════════════════════════════════════════════════════════════════ */

.ops-cards{
  display: grid;
  gap: 1.5rem;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* ما يُقرأ سطرًا سطرًا — كالخطّ الزمني — يمتدّ على العرض كله. */
.ops-cards > .ops-card-wide{ grid-column: 1 / -1; }

@media print {
  .ops-cards{ display: block; }
  .ops-cards > *{ margin-bottom: 1rem; }
}

/* ══ الوضع الليلي ══════════════════════════════════════════════════════

   ⚠️⚠️⚠️ **هذه الكتلة وحدها تلمس أصناف تايلويند، والقاعدة أعلاه تمنع ذلك.**

   المنع قائمٌ ومقصود للوضع الفاتح: مصدران للشكل يعني أن يُعدَّل أحدهما
   ويبقى الآخر. لكن الوضع الليلي لا سبيل إليه غير ذلك — البديل إضافة
   `dark:` على كل صنفٍ في ثلاثمئة وثلاثين شاشة، وهو ما يُنسى في أول
   شاشةٍ جديدة. فالاستثناء مسوَّرٌ بثلاثة قيود: لا يعمل إلا داخل
   `[data-theme="dark"]`، ولا يمسّ إلا ما يلي، وهو **مولَّد** فلا يتباعد.

   ⚠️⚠️⚠️ **ولا يُقلب السلّم كلّه — يُقلب طرفه غير الملتبس وحده.**

   القلب الكامل يفترض أن كل درجةٍ فاتحة خلفيةٌ وكل غامقة نصّ. وهذا غير
   صحيح: `text-gray-300` قد يكون نصًّا على القائمة الجانبية الغامقة
   أصلًا — وقلبُه يجعله أسود على أسود. و`bg-gray-900` قد تكون رقاقةً
   غامقة مقصودة — وقلبُها يجعلها بيضاء في شاشةٍ سوداء.

   فالمقلوب: الخلفيات 50–200، والنصوص 500–950، والحدود 50–300. وما
   عداها يُترك — وهو أصلًا مقروءٌ على الغامق.

   ⚠️⚠️ **و`white` لا يُقلب إلا في `bg-white` وحدها.** `text-white`
   و`bg-white/10` و`border-white/10` كلّها على سطحٍ غامقٍ أصلًا.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"]{
  --ops-canvas: rgb(13 17 23);
  --ops-surface: rgb(22 27 34);
  --ops-hairline: rgb(255 255 255 / .09);
  --ops-shadow-1: 0 1px 2px -1px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .4);
  --ops-shadow-2: 0 2px 4px -2px rgb(0 0 0 / .5), 0 6px 16px -4px rgb(0 0 0 / .5);
  --ops-shadow-3: 0 8px 24px -8px rgb(0 0 0 / .7);
  color-scheme: dark;
}
:root[data-theme="dark"] body{ color: rgb(201 209 217); }

/* سطح البطاقة. */
:root[data-theme="dark"] .bg-white{ background-color: var(--ops-surface) !important; }
:root[data-theme="dark"] .bg-white\/60{ background-color: rgb(22 27 34 / .6) !important; }
:root[data-theme="dark"] .bg-white\/70{ background-color: rgb(22 27 34 / .7) !important; }
:root[data-theme="dark"] .bg-white\/80{ background-color: rgb(22 27 34 / .8) !important; }

/* ── slate ─────────────────────────────────────────────────── */
:root[data-theme="dark"] .bg-slate-50{ background-color: rgb(15 23 42) !important; }
:root[data-theme="dark"] .bg-slate-100{ background-color: rgb(30 41 59) !important; }
:root[data-theme="dark"] .bg-slate-200{ background-color: rgb(51 65 85) !important; }
:root[data-theme="dark"] .text-slate-500{ color: rgb(148 163 184) !important; }
:root[data-theme="dark"] .text-slate-600{ color: rgb(203 213 225) !important; }
:root[data-theme="dark"] .text-slate-700{ color: rgb(226 232 240) !important; }
:root[data-theme="dark"] .text-slate-800{ color: rgb(241 245 249) !important; }
:root[data-theme="dark"] .text-slate-900{ color: rgb(248 250 252) !important; }
:root[data-theme="dark"] .text-slate-950{ color: rgb(248 250 252) !important; }
:root[data-theme="dark"] .border-slate-50{ border-color: rgb(15 23 42) !important; }
:root[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(15 23 42) !important; }
:root[data-theme="dark"] .ring-slate-50{ --tw-ring-color: rgb(15 23 42) !important; }
:root[data-theme="dark"] .border-slate-100{ border-color: rgb(30 41 59) !important; }
:root[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(30 41 59) !important; }
:root[data-theme="dark"] .ring-slate-100{ --tw-ring-color: rgb(30 41 59) !important; }
:root[data-theme="dark"] .border-slate-200{ border-color: rgb(51 65 85) !important; }
:root[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(51 65 85) !important; }
:root[data-theme="dark"] .ring-slate-200{ --tw-ring-color: rgb(51 65 85) !important; }
:root[data-theme="dark"] .border-slate-300{ border-color: rgb(71 85 105) !important; }
:root[data-theme="dark"] .divide-slate-300 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(71 85 105) !important; }
:root[data-theme="dark"] .ring-slate-300{ --tw-ring-color: rgb(71 85 105) !important; }

/* ── gray ─────────────────────────────────────────────────── */
:root[data-theme="dark"] .bg-gray-50{ background-color: rgb(17 24 39) !important; }
:root[data-theme="dark"] .bg-gray-100{ background-color: rgb(31 41 55) !important; }
:root[data-theme="dark"] .bg-gray-200{ background-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .text-gray-500{ color: rgb(156 163 175) !important; }
:root[data-theme="dark"] .text-gray-600{ color: rgb(209 213 219) !important; }
:root[data-theme="dark"] .text-gray-700{ color: rgb(229 231 235) !important; }
:root[data-theme="dark"] .text-gray-800{ color: rgb(243 244 246) !important; }
:root[data-theme="dark"] .text-gray-900{ color: rgb(249 250 251) !important; }
:root[data-theme="dark"] .text-gray-950{ color: rgb(249 250 251) !important; }
:root[data-theme="dark"] .border-gray-50{ border-color: rgb(17 24 39) !important; }
:root[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(17 24 39) !important; }
:root[data-theme="dark"] .ring-gray-50{ --tw-ring-color: rgb(17 24 39) !important; }
:root[data-theme="dark"] .border-gray-100{ border-color: rgb(31 41 55) !important; }
:root[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(31 41 55) !important; }
:root[data-theme="dark"] .ring-gray-100{ --tw-ring-color: rgb(31 41 55) !important; }
:root[data-theme="dark"] .border-gray-200{ border-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .ring-gray-200{ --tw-ring-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .border-gray-300{ border-color: rgb(75 85 99) !important; }
:root[data-theme="dark"] .divide-gray-300 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(75 85 99) !important; }
:root[data-theme="dark"] .ring-gray-300{ --tw-ring-color: rgb(75 85 99) !important; }

/* ⚠️⚠️ لون العلامة: لا يُقلب — لكنه يحتاج معالجةً عند طرفيه.

   لوحاتٌ مثل «جرافيت» و«كحلي عميق» ألوانها رماديةٌ غامقة أصلًا، فـ
   `text-brand-700` عليها يصير غير مرئيٍّ على خلفيةٍ غامقة. والحلّ ليس
   قلب السلّم — القائمة الجانبية تستعمل `bg-brand-950` ويجب أن تبقى
   غامقة — بل **رفع النصّ وحده إلى الدرجات الفاتحة**، وإغماق الرقاقات
   الفاتحة وحدها. فالأزرار والقائمة تبقى كما هي. */
:root[data-theme="dark"] .text-brand-600{ color: rgb(var(--brand-300)) !important; }
:root[data-theme="dark"] .text-brand-700{ color: rgb(var(--brand-300)) !important; }
:root[data-theme="dark"] .text-brand-800{ color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .text-brand-900{ color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .text-brand-950{ color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .bg-brand-50{ background-color: rgb(var(--brand-900) / .28) !important; }
:root[data-theme="dark"] .bg-brand-100{ background-color: rgb(var(--brand-900) / .28) !important; }
:root[data-theme="dark"] .bg-brand-50\/60{ background-color: rgb(var(--brand-900) / .22) !important; }
:root[data-theme="dark"] .border-brand-100{ border-color: rgb(var(--brand-700)) !important; }
:root[data-theme="dark"] .border-brand-200{ border-color: rgb(var(--brand-700)) !important; }
:root[data-theme="dark"] .ring-brand-200{ --tw-ring-color: rgb(var(--brand-700)) !important; }

/* حقول الإدخال: الخلفية والحدّ والنصّ معًا، وإلا ظهر حقلٌ أبيض في شاشةٍ سوداء. */
:root[data-theme="dark"] :where(input, select, textarea){
  background-color: rgb(13 17 23) !important;
  border-color: rgb(255 255 255 / .12) !important;
  color: rgb(201 209 217) !important;
}
:root[data-theme="dark"] :where(input, select, textarea)::placeholder{ color: rgb(110 118 129) !important; }

/* رأس الجدول اللاصق: خلفيةٌ مصمتة وإلا ظهر النصّ فوق النص. */
:root[data-theme="dark"] :where(table) :where(thead th){ background-color: rgb(22 27 34) !important; }

/* مكوّنا لوحة الأوامر وشريط التبويبات مكتوبان بألوانٍ صريحة — لهما هنا نظيرهما. */
:root[data-theme="dark"] .ops-cmdk-panel{ background: rgb(22 27 34) !important; border-color: rgb(255 255 255 / .10) !important; }
:root[data-theme="dark"] #ops-cmdk-input{ color: rgb(201 209 217) !important; background: transparent !important; }
:root[data-theme="dark"] #ops-cmdk-input::placeholder{ color: rgb(110 118 129) !important; }
:root[data-theme="dark"] .ops-cmdk-field{ border-bottom-color: rgb(255 255 255 / .10) !important; }
:root[data-theme="dark"] .ops-cmdk-esc{ background: rgb(13 17 23) !important; color: rgb(139 148 158) !important; border-color: rgb(255 255 255 / .12) !important; }
:root[data-theme="dark"] .ops-cmdk-item{ color: rgb(201 209 217) !important; }
:root[data-theme="dark"] .ops-cmdk-item[aria-selected="true"]{ background: rgb(var(--brand-900) / .45) !important; color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .ops-cmdk-sub, :root[data-theme="dark"] .ops-cmdk-group, :root[data-theme="dark"] .ops-cmdk-empty{ color: rgb(139 148 158) !important; }
:root[data-theme="dark"] .ops-cmdk-chip{ background: rgb(255 255 255 / .07) !important; color: rgb(139 148 158) !important; }
:root[data-theme="dark"] .ops-cmdk-foot{ background: rgb(13 17 23) !important; border-top-color: rgb(255 255 255 / .10) !important; color: rgb(139 148 158) !important; }
:root[data-theme="dark"] .ops-cmdk-foot kbd, :root[data-theme="dark"] .ops-cmdk-hint kbd{ background: rgb(22 27 34) !important; color: rgb(139 148 158) !important; border-color: rgb(255 255 255 / .14) !important; }
:root[data-theme="dark"] .ops-panes-bar{ background: rgb(13 17 23) !important; }
:root[data-theme="dark"] .ops-pane-tab{ background: rgb(255 255 255 / .04) !important; color: rgb(139 148 158) !important; }
:root[data-theme="dark"] .ops-pane-tab[aria-selected="true"]{ background: rgb(22 27 34) !important; color: rgb(var(--brand-200)) !important; border-color: rgb(255 255 255 / .10) !important; }
:root[data-theme="dark"] .ops-pane-count{ background: rgb(255 255 255 / .07) !important; color: rgb(139 148 158) !important; }

/* ══ الوضع الليليّ · صيغ الحالات والشفافيّة ═══════════════════════════
   مولَّدة من جرد الأصناف المستعملة فعلًا في ٤٠٥ قوالب (٢٣ سبتمبر ٢٠٢٦).

   ⚠️⚠️ الكتلة الأصليّة تغطّي الصنف المجرّد وحده: `.bg-gray-50`. ولا تغطّي
   `hover:bg-gray-50` ولا `bg-gray-50/60` — لأنّ اسم الصنف يختلف فيختلف
   المحدِّد. فكان الصفّ يعود أبيضَ بمجرّد المرور عليه، والنصّ عليه يختفي.

   ⚠️ و`bg-white/5` إلى `bg-white/30` **لا تُقلب**: طبقةٌ شفّافة فوق سطحٍ
   غامقٍ أصلًا، وقلبُها يجعلها سوداء على أسود. القاعدة نفسها في الكتلة
   الأولى، وهذه امتدادٌ لها لا استثناء منها.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .hover\:bg-gray-50:hover{ background-color: rgb(17 24 39) !important; }
:root[data-theme="dark"] .hover\:text-brand-700:hover{ color: rgb(var(--brand-300)) !important; }
:root[data-theme="dark"] .hover\:text-brand-900:hover{ color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .hover\:bg-brand-50:hover{ background-color: rgb(var(--brand-900) / .28) !important; }
:root[data-theme="dark"] .hover\:text-gray-800:hover{ color: rgb(243 244 246) !important; }
:root[data-theme="dark"] .bg-gray-50\/70{ background-color: rgb(17 24 39 / 0.7) !important; }
:root[data-theme="dark"] .bg-gray-50\/60{ background-color: rgb(17 24 39 / 0.6) !important; }
:root[data-theme="dark"] .hover\:bg-gray-50\/70:hover{ background-color: rgb(17 24 39 / 0.7) !important; }
:root[data-theme="dark"] .hover\:bg-gray-200:hover{ background-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .hover\:bg-slate-50:hover{ background-color: rgb(15 23 42) !important; }
:root[data-theme="dark"] .bg-brand-50\/50{ background-color: rgb(var(--brand-900) / 0.14) !important; }
:root[data-theme="dark"] .hover\:text-gray-700:hover{ color: rgb(229 231 235) !important; }
:root[data-theme="dark"] .hover\:bg-white:hover{ background-color: var(--ops-surface) !important; }
:root[data-theme="dark"] .hover\:bg-gray-100:hover{ background-color: rgb(31 41 55) !important; }
:root[data-theme="dark"] .hover\:bg-brand-100:hover{ background-color: rgb(var(--brand-900) / .28) !important; }
:root[data-theme="dark"] .hover\:text-gray-900:hover{ color: rgb(249 250 251) !important; }
:root[data-theme="dark"] .ring-slate-200\/70{ --tw-ring-color: rgb(51 65 85 / 0.7) !important; }
:root[data-theme="dark"] .group:hover .group-hover\:text-brand-800{ color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .ring-gray-200\/80{ --tw-ring-color: rgb(55 65 81 / 0.8) !important; }
:root[data-theme="dark"] .bg-brand-50\/40{ background-color: rgb(var(--brand-900) / 0.112) !important; }
:root[data-theme="dark"] .hover\:text-slate-800:hover{ color: rgb(241 245 249) !important; }
:root[data-theme="dark"] .text-brand-900\/80{ color: rgb(var(--brand-200) / 0.8) !important; }
:root[data-theme="dark"] .hover\:bg-gray-50\/60:hover{ background-color: rgb(17 24 39 / 0.6) !important; }
:root[data-theme="dark"] .bg-gray-100\/95{ background-color: rgb(31 41 55 / 0.95) !important; }
:root[data-theme="dark"] .bg-white\/95{ background-color: rgb(22 27 34 / 0.95) !important; }
:root[data-theme="dark"] .hover\:ring-slate-300:hover{ --tw-ring-color: rgb(71 85 105) !important; }
:root[data-theme="dark"] .group:hover .group-hover\:text-brand-700{ color: rgb(var(--brand-300)) !important; }
:root[data-theme="dark"] .hover\:border-gray-300:hover{ border-color: rgb(75 85 99) !important; }
:root[data-theme="dark"] .hover\:border-brand-200:hover{ border-color: rgb(var(--brand-700)) !important; }
:root[data-theme="dark"] .hover\:bg-gray-50\/80:hover{ background-color: rgb(17 24 39 / 0.8) !important; }
:root[data-theme="dark"] .hover\:ring-gray-300:hover{ --tw-ring-color: rgb(75 85 99) !important; }
:root[data-theme="dark"] .text-brand-700\/70{ color: rgb(var(--brand-300) / 0.7) !important; }
:root[data-theme="dark"] .hover\:text-brand-800:hover{ color: rgb(var(--brand-200)) !important; }
:root[data-theme="dark"] .hover\:text-slate-600:hover{ color: rgb(203 213 225) !important; }
:root[data-theme="dark"] .hover\:bg-brand-50\/60:hover{ background-color: rgb(var(--brand-900) / 0.168) !important; }
:root[data-theme="dark"] .hover\:bg-slate-50\/70:hover{ background-color: rgb(15 23 42 / 0.7) !important; }
:root[data-theme="dark"] .hover\:bg-slate-200:hover{ background-color: rgb(51 65 85) !important; }
:root[data-theme="dark"] .text-brand-900\/75{ color: rgb(var(--brand-200) / 0.75) !important; }
:root[data-theme="dark"] .ring-gray-200\/70{ --tw-ring-color: rgb(55 65 81 / 0.7) !important; }
:root[data-theme="dark"] .focus\:bg-white:focus{ background-color: var(--ops-surface) !important; }
:root[data-theme="dark"] .hover\:text-gray-600:hover{ color: rgb(209 213 219) !important; }
:root[data-theme="dark"] .hover\:text-slate-900:hover{ color: rgb(248 250 252) !important; }
:root[data-theme="dark"] .hover\:bg-brand-50\/40:hover{ background-color: rgb(var(--brand-900) / 0.112) !important; }
:root[data-theme="dark"] .border-gray-200\/70{ border-color: rgb(55 65 81 / 0.7) !important; }
:root[data-theme="dark"] .hover\:bg-white\/70:hover{ background-color: rgb(22 27 34 / 0.7) !important; }
:root[data-theme="dark"] .hover\:border-gray-200:hover{ border-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .hover\:ring-brand-200:hover{ --tw-ring-color: rgb(var(--brand-700)) !important; }

:root[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(31 41 55) !important; }
:root[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(17 24 39) !important; }
:root[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(30 41 59) !important; }
:root[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(55 65 81) !important; }
:root[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]){ border-color: rgb(15 23 42) !important; }