@charset "UTF-8";
/* ==========================================================================
   NHRPS — نظام إدارة وتخطيط الموارد البشرية للقوة البحرية العراقية
   لغة التصميم: "لوحة المواقف" — لوحة عمليات مسطّرة بالنحاس على أرضية حبر بحري.
   لا ظلال، لا زوايا دائرية — البنية كلها خطوط مسطّرة كما في لوحة غرفة العمليات.
   ========================================================================== */

/* ---------------------------------------------------------------- الخطوط */

@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-400-arabic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-500-arabic.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-600-arabic.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-700-arabic.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/plexar-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* الكوفي — للعناوين الكبيرة فقط: طابع نُصُبي مؤسسي */
@font-face {
  font-family: 'Kufi';
  src: url('../fonts/kufi-600-arabic.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: 'Kufi';
  src: url('../fonts/kufi-600-latin.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* المونو — لأرقام الجداول ورموز القطع والتواريخ */
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* ------------------------------------------------------------ الرموز اللونية

   لغة التصميم: «الفضة» بألوان الشعار الرسمي.

   البنية كما اختيرت: أرضية فاتحة، وخطوط دقيقة، وانضباط في صرف اللون.
   أما الألوان نفسها فمستخرجة من شعار قيادة القوة البحرية لا مختارة اعتباطاً:

     كحلي الشعار   ‎#243060‎   ← لون الحبر النشط: العناوين والحالة النشطة
     ذهب المرساة   ‎#B49C54‎   ← أساس ‎--cat-2‎ ودرجة المتابعة
     أخضر الغار    ‎#188448‎   ← أساس درجة «صالح»
     بنّي الحبل    ‎#905448‎   ← أساس ‎--cat-4‎
     أزرق الحلقة   ‎#3090B4‎   ← أساس ‎--cat-3‎
     أحمر العَلَم   ‎#CC0C24‎   ← أساس درجة «حرج»

   قاعدتان تحكمان التوزيع:
     • الأخضر محجوز للحالة وحدها ولا يدخل ألوان التصنيف، فلا يُقرأ تصنيفٌ
       محايد على أنه «سليم».
     • ألوان التصنيف متباعدة بالقياس لا بالنظر: أدنى فرق ‎CIEDE2000‎ بينها
       ‎30.4‎ نهاراً و‎26.5‎ ليلاً، وكلها فوق ‎3:1‎ تبايناً مع أرضيتها.        */

:root {
  /* الوضع النهاري — الأصل. الرماديات مائلة قليلاً إلى الكحلي لا محايدة تماماً */
  --ink:        #F2F3F6;
  --ink-2:      #E8EAEF;
  --deck:       #FFFFFF;
  --deck-2:     #EAECF1;
  --deck-3:     #DDE1E9;
  --rule:       #D2D6DF;
  --rule-2:     #9AA1AF;

  /* اللون النشط هو كحلي الشعار */
  --accent:     #243060;
  --accent-hi:  #35468A;
  --accent-dim: #9AA1AF;
  --accent-lo:  #C3C8D4;

  --foam:       #141A2B;
  --haze:       #4C5666;
  /* كان ‎#6B7688‎ فيهبط إلى 3.89:1 على الأسطح المرتفعة، وهو دون الحدّ
     المقبول لنصٍّ بحجم ١٠٫٥ إلى ١٢ بكسل. الآن 5.3:1 في أسوأ الحالات. */
  --dim:        #57616F;

  /* ألوان الحالة — دلالية فقط */
  --fit:        #12783F;
  --fit-soft:   #2E9459;
  --fit-bg:     #E3F2E9;
  --maint:      #9A5B0F;
  --maint-bg:   #FBEEDC;
  --out:        #B01226;
  --out-bg:     #FBE4E5;
  --sea:        #4C5666;
  --sea-bg:     #EAECF1;

  /* ألوان التصنيف في الرسوم — من الشعار، وبلا أخضر */
  --cat-1:      #243060;   /* كحلي الميدان */
  --cat-2:      #B08A1E;   /* ذهب المرساة */
  --cat-3:      #3A93B8;   /* أزرق الحلقة */
  --cat-4:      #7C5142;   /* بنّي الحبل */

  --edge:   inset 0 1px 0 rgba(255, 255, 255, .9);
  --well:   inset 0 1px 2px rgba(20, 26, 43, .10);

  --shell-rail: 258px;
  --shell-head: 60px;

  /* حشو منطقة العمل — مُسمّى هنا لا على ‎.main‎ لأنّ ثلاثة أشياء تقيس عليه:
     ترويسة الجدول الملتصقة تُزيحه لتقف عند حافّة المنطقة، والتمدّد الجانبي
     يستردّه، وشريط الرأس يحاذي به أزراره. رقمٌ واحد يُغيَّر فيتبعه الثلاثة —
     وهذا بعينه ما كان ناقصاً: الشريط كان يحمل ‎18px‎ مكتوبة بيدها فتقف أزراره
     قبل حافّة المحتوى بسبعة عشر بكسلاً على الشاشات العريضة.

     و‎--sbw‎ عرضُ شريط تمرير منطقة العمل. يقيسه app.js مرّةً ويكتبه هنا، لأنّه
     يقع داخل صندوق المنطقة في جهة النهاية — فحافّة المحتوى تبعد عن حافّة
     الشاشة بالحشو وبعرض الشريط معاً، لا بالحشو وحده. */
  --pad-block: 22px;
  --pad-inline: 24px;
  --pad-end: 56px;
  /* القيمة الابتدائية هي عرض الشريط المرسوم في ‎::-webkit-scrollbar‎ أدناه،
     فتصحّ الحافّة من أوّل رسمة قبل أن يعمل القياس. وما بعد القياس أدقّ:
     متصفّحٌ آخر، أو شريطٌ طافٍ لا يشغل عرضاً. */
  --sbw: 11px;
  /* ما استردّته اللوحة الممتدّة من حشو منطقة العمل الآن. يكتبه tables.js
     مع كل تمدّد ويصفّره مع كل انكماش، ويطرحه شريط الرأس من حشوه فتبقى
     أزراره على حافّة المحتوى أينما ذهبت. */
  --bleed-now: 0px;

  /* حافّة المحتوى في جهة النهاية — يحاذيها شريط الرأس */
  --edge-end: calc(var(--pad-inline) + var(--sbw));

  --f-body: 'Plex Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-disp: 'Kufi', 'Plex Arabic', 'Segoe UI', sans-serif;
  --f-mono: 'Plex Mono', 'Consolas', monospace;

  /* علامات مسطرة الجاهزية — تُحقن من الإعدادات في وسم <html> */
  --tick-crit: 70%;
  --tick-good: 80%;
  --tick-full: 95%;

  --step: 4px;
  color-scheme: light;
}

/* الوضع الليلي — العائلة نفسها مرفوعة الإضاءة، لا انقلاب آلي */
:root[data-theme="dark"] {
  --ink:        #12141A;
  --ink-2:      #0B0D12;
  --deck:       #1B1F29;
  --deck-2:     #1A1E27;
  --deck-3:     #262C3A;
  --rule:       #262C3A;
  --rule-2:     #444C60;

  --accent:     #C7D2F0;
  --accent-hi:  #E4EAFA;
  --accent-dim: #6B7688;
  --accent-lo:  #3A4256;

  --foam:       #EDEFF4;
  --haze:       #A9B2C4;
  --dim:        #98A3B6;

  --fit:        #4FBE85;
  --fit-soft:   #7FD3A8;
  --fit-bg:     #10301F;
  --maint:      #E09A3C;
  --maint-bg:   #33260C;
  --out:        #E2685B;
  --out-bg:     #341613;
  --sea:        #9AA4B4;
  --sea-bg:     #232833;

  --cat-1:      #7C86E8;
  --cat-2:      #E3BC4E;
  --cat-3:      #4FC8EE;
  --cat-4:      #CE9585;

  --edge:   inset 0 1px 0 rgba(255, 255, 255, .045);
  --well:   inset 0 1px 3px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* --------------------------------------------------------------- الأساسيات */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--ink); }

body {
  margin: 0;
  color: var(--foam);
  font-family: var(--f-body);
  font-size: calc(14px * var(--f-scale, 1));
  line-height: var(--lh, 1.65);
  letter-spacing: var(--tracking, 0em);
  font-weight: var(--w-body, 400);
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;

  /* أرضية مستوية عمداً: هذا الاتجاه يقوم على الدقة لا على الأجواء */
  background: var(--ink);
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--w-title, 600); line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }

/* الأرقام دائماً بعرض ثابت ومحاذاة لاتينية داخل النص العربي */
.mono, td .num, .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: -0.01em;
}

.ico { width: 18px; height: 18px; flex: none; }
.ico--sm { width: 15px; height: 15px; }
.ico--lg { width: 22px; height: 22px; }

:focus-visible {
  outline: var(--focus-w, 2px) solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent); color: var(--ink); }

/* شريط التمرير */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--ink-2); }
::-webkit-scrollbar-thumb:hover { background: var(--rule-2); }

/* =================================================================== الهيكل

   شريط الرأس خارج شبكة الهيكل عمداً: عنصر الشبكة لا يلتصق إلا داخل حدود
   خانته، وخانة الرأس بارتفاع الرأس نفسه — فلا مسافة يتحرّك فيها. بإخراجه
   صار التصاقه محسوباً على الصفحة كلها، فيبقى ظاهراً مهما طال التمرير.      */

/* هيكل تطبيقي لا صفحة تُمرَّر: البدن بارتفاع النافذة ولا يُمرَّر إطلاقاً،
   فيبقى شريط الرأس والشريط الجانبي ثابتين في مكانهما، ولا يظهر شريط
   تمرير للصفحة كلها — بل داخل منطقة العمل وحدها حيث المحتوى فعلاً. */
body.app {
  block-size: 100vh;
  block-size: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app > .head { flex: none; }

.shell {
  display: grid;
  grid-template-columns: var(--shell-rail) 1fr;
  align-items: stretch;
  flex: 1 1 auto;
  min-block-size: 0;
}

/* ------------------------------------------------------------- شريط الرأس */

.head {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--shell-head);
  /* لا حشو في جهة البداية: كتلة الاسم تملأ عرض الشريط الجانبي تماماً
     فتتطابق حافّتها مع حافّته بدل أن تنتهي قبله بقليل.

     وفي جهة النهاية حافّةُ المحتوى نفسها لا رقمٌ قريب منها: الأزرار تقف حيث
     تنتهي اللوحات تحتها بالضبط — وتمشي معها حين تتمدّد اللوحة فتستردّ الحشو،
     بالانتقال نفسه الذي تمشي به. */
  padding-inline: 0 calc(var(--edge-end) - var(--bleed-now));
  transition: padding-inline-end .18s ease;
  /* الشريط سطحٌ أبيض، والشريط الجانبي مثله، فيؤلّفان معاً كروم الواجهة.
     والفاصل السفلي حدٌّ حقيقي في صندوق الشريط لا عنصرٌ زائف تحته: بذلك
     ينطبق انتقالُ الخلفية على الخطّ نفسه فيُقرآن حدّاً واحداً، بخلاف
     الخطّ المستقلّ الذي كان يقف بجوار انتقال الخلفية فيبدوان اثنين. */
  background: var(--deck);
  border-block-end: 1px solid var(--rule-2);
}

.head__crest {
  display: flex;
  align-items: center;
  gap: 12px;
  /* العرض نفسه الذي للشريط الجانبي، والحشو نفسه، فتصطف الحوافّ رأسياً */
  inline-size: var(--shell-rail);
  flex: none;
  box-sizing: border-box;
  padding-inline: 16px;
  border-inline-end: 1px solid var(--rule-2);
  height: 100%;
}
/* الشعار صورة رسمية بألوانها — الاستثناء الوحيد لقاعدة «اللون للحالة» */
.crest { display: block; flex: none; object-fit: contain; }
.head__crest .crest { width: 34px; height: 34px; }

.head__titles { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.head__title {
  font-family: var(--f-disp);
  font-size: calc(14.5px * var(--f-scale, 1));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foam);
}
.head__sub { font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); }

/* شعار التشكيل. كان له خطّ فاصل في جهة البداية، وكتلةُ الاسم لها خطّ
   في جهة النهاية، وبينهما فراغ الشبكة — فظهرا خطّين رأسيّين متجاورين.
   يبقى خطُّ كتلة الاسم وحده لأنه يحاذي حافّة الشريط الجانبي. */
/* اسم الجدول الملتصق — يحلّ محلّ الشعار ما دامت ترويسته ظاهرة */
.head__pinned {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: calc(12.5px * var(--f-scale, 1));
  font-weight: 600;
  color: var(--foam);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42ch;
}
.head__pinned.is-on { display: flex; }
/* الاقتصاص على النصّ نفسه: ‎text-overflow‎ لا أثر له على حاوية مرنة، فكان
   الاسم يُقصّ في منتصف كلمته بلا نقاطٍ تدلّ على ما بعدها. */
.head__pinned > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head__pinned .ico { color: var(--accent); flex: none; }
.head__pinned.is-on ~ .head__motto { display: none; }

/* ترويسةُ الشاشة الممتلئة — عنوانُها وأزرارُها في شريط الرأس، لأنّ ما تحته
   لوحٌ يملأ منطقة العمل من حافّةٍ إلى حافّة ولا سطرَ فيه لعنوان. */
.head__page {
  display: none;
  align-items: center;
  gap: 14px;
  min-inline-size: 0;
}
.head__page.is-on { display: flex; }
.head__page.is-on ~ .head__motto { display: none; }
.head__page__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-disp); font-size: calc(13.5px * var(--f-scale, 1)); font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.head__page__title .ico { color: var(--accent); }
/* ‎min-inline-size: 0‎ وإلا كان أدنى مقاسٍ للسطر مقاسَ نصّه كاملاً: لا ينكمش
   ولا تعمل النقاط، فتُدفع الأزرارُ بعده خارج الخانة فتقع على حقل البحث. */
.head__page__meta {
  font-size: calc(11px * var(--f-scale, 1)); color: var(--dim);
  min-inline-size: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head__page__acts { display: flex; align-items: center; gap: 8px; flex: none; }

/* ما يضيق به الشريط يُطوى بالترتيب: التفصيلُ أوّلاً ثم العنوان، وتبقى
   الأزرار — هي الفعل، والعنوانُ مكتوبٌ في الشريط الجانبي على كل حال. */
@media screen and (max-width: 1280px) { .head__page__meta { display: none; } }
@media screen and (max-width: 1040px) { .head__page__title { display: none; } }

.head__motto {
  font-size: calc(11.5px * var(--f-scale, 1));
  color: var(--haze);
  height: 100%;
  display: flex;
  align-items: center;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head__spacer { flex: 1; }

.head__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* مربّعٌ لا ينضغط: بلا هذا يتنازل الزرّ عن عرضه حين يضيق الشريط فيخرج
     مستطيلاً بعرض 31.6 وارتفاع 34، وأيقونته في غير مركزه. */
  flex: none;
  width: 34px; height: 34px;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck);
  color: var(--haze);
  cursor: pointer;
  transition: color .14s, border-color .14s, background-color .14s;
}
.head__btn:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--deck-2); }

/* البحث العام في شريط الرأس.
   يقف قبل أزرار الشريط ويأخذ ما فضل من عرضه إلى حدّ، فلا يزاحم اسمَ
   اللوحة الملتصق ولا يختفي على الشاشات المتوسطة. */
.head__search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 320px;
  min-width: 0;
  height: 34px;
  padding-inline: 10px;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck);
}
.head__search:focus-within { border-color: var(--accent-dim); }

.head__search-label {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--haze);
}

.head__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--foam);
  font: inherit;
  font-size: calc(13px * var(--f-scale, 1));
  outline: none;
}
.head__search-input::placeholder { color: var(--dim); }
/* الزرّ الذي يضعه المتصفّح داخل حقل البحث يرث لوناً لا يُقرأ على الخلفية
   الداكنة، ولا وظيفة له هنا: الحقل يُفرَّغ بالمفتاح كأيّ حقل. */
.head__search-input::-webkit-search-cancel-button { display: none; }

/* نصٌّ لقارئ الشاشة وحده — يبقى في شجرة الوصول ولا يُرى ولا يُطبع */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* على الشاشة الضيّقة يُطوى الحقل إلى أيقونته: الشريطُ فيه اسمُ اللوحة
   وأزرارُ الوضع والطباعة، وحقلُ بحثٍ بعرضٍ ثابت كان يدفعها خارجه.
   و@media screen لا @media وحدها: ورقةُ A4 عرضُها ٧٠٣ نقاط، فقاعدةٌ بلا
   ‎screen‎ تسري على الطباعة فتُخفي ما لا يُراد إخفاؤه. */
@media screen and (max-width: 900px) {
  .head__search { flex-basis: 44px; }
  .head__search-input { display: none; }
}

/* تُعرض أيقونة الوضع المقصود لا الوضع الحالي:
   نهاراً قمرٌ (اضغط لتُظلم)، وليلاً شمسٌ (اضغط لتُضيء). */
.head__btn--theme .ico-sun { display: none; }
:root[data-theme="dark"] .head__btn--theme .ico-moon { display: none; }
:root[data-theme="dark"] .head__btn--theme .ico-sun  { display: inline-flex; }

/* زر إظهار القائمة لا يظهر إلا على الشاشات الضيقة */
.head__btn--menu { display: none; }

/* ---------------------------------------------------------- شريط التنقّل */

/* بطاقة المستخدم والتذييل ثابتان، والتمرير داخل قائمة التنقّل وحدها.
   الشريط نفسه لا يُمرَّر (overflow: hidden) وإلا انزلق الطرفان معه. */
.rail {
  background: var(--deck);
  /* الفاصل في جهة النهاية حيث يلتقي الشريط بمنطقة العمل — كان في جهة
     البداية أي على حافّة الصفحة الخارجية فلا يفصل شيئاً. ووزنه ولونه
     كفاصل شريط الرأس، فيمتدّان معاً خطاً واحداً متصلاً حول الكروم. */
  border-inline-end: 1px solid var(--rule-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  block-size: 100%;
  min-block-size: 0;
}

/* بطاقة المستخدم وحدها ثابتة؛ القائمة والتذييل يُمرَّران معاً.
   وحين تقصر القائمة يهبط التذييل إلى أسفل الشريط بـ margin تلقائي. */
.rail__user { flex: none; }

.rail__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.rail__bottom { margin-block-start: auto; }
.rail__scroll::-webkit-scrollbar { width: 8px; }
.rail__scroll::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--deck); }

.rail__bottom { border-block-start: 1px solid var(--rule); }

.rail__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-block-end: 1px solid var(--rule);
  background: var(--deck-2);
  box-shadow: var(--edge);
}
.rail__avatar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--accent);
  border: 0;
  color: var(--deck);
  font-family: var(--f-disp);
  font-size: calc(14px * var(--f-scale, 1));
  font-weight: 700;
  flex: none;
  overflow: hidden;
}
/* الوجهُ يملأ المربّع ويُقتصّ من أطرافه — كصورة الفرد في ترويسة سجلّه:
   صورةٌ تُحشر بنسبتها الأصلية في أربعين نقطةً تترك فراغين وتُصغّر الرأس
   بينهما حتى لا يُعرَف صاحبه. */
.rail__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ‎min-inline-size: 0‎ شرطُ الاقتطاع لا زينة: عنصرُ الشبكة المرنة أصلُه ألّا
   يضيق دون محتواه، فبدونها يدفع الاسمُ الطويلُ عرضَ الشريط ولا يُطوى منه
   حرف. */
.rail__who { min-inline-size: 0; }

/* سطرٌ واحدٌ لكلٍّ منهما، وما جاوز العرضَ طُوي بنقاطٍ من آخره: الرتبةُ وأوّلُ
   الاسم أوّلُ ما يُقرأ، وباقي الأسماء الرباعية يقوله ‎title‎ عند الوقوف. */
.rail__name,
.rail__role {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail__name { font-size: calc(12.5px * var(--f-scale, 1)); font-weight: 600; }
.rail__role { font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); }

.rail__group { padding-block: 14px 4px; }
/* عناوين مجموعات التنقّل — بلا تباعد حروف: الخط العربي متصل */
.rail__label {
  padding-inline: 16px;
  font-size: calc(10.5px * var(--f-scale, 1));
  font-weight: 700;
  color: var(--haze);
  display: flex;
  align-items: center;
  gap: 9px;
}
/* شرطة قصيرة تفصل المجموعة عمّا قبلها دون خط كامل */
.rail__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.nav { display: flex; flex-direction: column; padding-block: 5px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(var(--nav-y, 7px) + 1px) 16px;
  color: var(--haze);
  font-size: calc(13px * var(--f-scale, 1));
  border-inline-start: 2px solid transparent;
  transition: background-color .14s, color .14s, border-color .14s;
}
.nav__item:hover { background: var(--deck-2); color: var(--foam); }
.nav__item.is-active {
  background: var(--deck-2);
  color: var(--accent);
  border-inline-start-color: var(--accent);
  font-weight: 600;
}
.nav__item .ico { opacity: .85; }
.nav__item.is-active .ico { opacity: 1; }

.nav__count {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--f-scale, 1));
  color: var(--dim);
  background: var(--deck-3);
  padding: 1px 6px;
}

.rail__foot {
  margin-block-start: auto;
  padding: 12px 16px;
  border-block-start: 1px solid var(--rule);
  font-size: calc(10.5px * var(--f-scale, 1));
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rail__logout {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 8px 16px;
  border: 0; background: transparent;
  color: var(--out);
  font-family: inherit; font-size: calc(13px * var(--f-scale, 1));
  cursor: pointer;
  border-inline-start: 2px solid transparent;
  transition: background-color .14s, border-color .14s;
}
.rail__logout:hover { background: var(--out-bg); border-inline-start-color: var(--out); }

/* ------------------------------------------------------------ منطقة العمل */

.main {
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* مجرى الشريط محجوز دائماً: بدونه تنزاح حافّة المحتوى أحد عشر بكسلاً
     كلّما طالت الصفحة أو قصُرت عن ملء الشاشة — وشريط الرأس يحاذي هذه
     الحافّة، فتنزاح معها أزراره. */
  scrollbar-gutter: stable;
  padding: var(--pad-block) var(--pad-inline) var(--pad-end);
}

.page__head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding-block-end: 15px;
  margin-block-end: 22px;
  border-block-end: 1px solid var(--rule);
  position: relative;
}
/* الخط النحاسي تحت عنوان الصفحة — قصير ومحاذٍ للبداية، كتوقيع */
.page__head::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 72px;
  height: 1px;
  background: var(--accent);
}
.page__eyebrow {
  font-size: calc(10.5px * var(--f-scale, 1));
  font-weight: 600;
  color: var(--accent);
  margin-block-end: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* شرطة نحاسية قصيرة تسبق السطر التمهيدي بدل تكبير التباعد */
.page__eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* مسار الوصول داخل سطر التسمية.

   المقاسُ موروث عن السطر والسهمُ أصغر من صندوق حرفه، فالسطرُ لا يرتفع
   بكيلا يزيح العنوان: شاشةٌ لها مسارٌ وشاشةٌ بلا مسار يبدأ محتواهما عند
   العلوّ نفسه. والآباء خافتون والتسمية نحاسية، فيُقرأ الترتيب لونياً. */
.page__trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-inline-size: 0;
  font-weight: 500;
  color: var(--dim);
}
.page__trail a { color: inherit; }
.page__trail a:hover { color: var(--accent); }
.page__trail .ico { width: 10px; height: 10px; opacity: .65; }
/* سهمٌ لا تسمية بعده لا يشير إلى شيء — ولا يقع إلا في ترويسة بلا تسمية */
.page__eyebrow > .page__trail:last-child .ico:last-child { display: none; }
/* عنوان مجموعة داخل الصفحة — يفصل شبكتين من البطاقات دون ترويسة صفحة
   ثانية. يستعير خطّ الشريط الجانبي وشرطته: التقسيم واحد فليكن شكله واحداً. */
.section__title {
  font-size: calc(10.5px * var(--f-scale, 1));
  font-weight: var(--w-title-hi, 700);
  color: var(--haze);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block: 22px 11px;
}
.section__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.section__title:first-of-type { margin-block-start: 4px; }

.page__title {
  font-family: var(--f-disp);
  font-size: calc(26px * var(--f-scale, 1));
  font-weight: var(--w-title-hi, 700);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page__meta { font-size: calc(12px * var(--f-scale, 1)); color: var(--dim); margin-block-start: 4px; }
.page__actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* موضعُ زرّ موقف الشاشة حين لا يكون لها صفُّ أزرار — يُرى فوق الترويسة
   ولا يُدسّ في غير موضعه. وأكثرُ الشاشات لها صفّها فلا يُرسم هذا. */
.pagelinks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }

/* =============================================================== الإطارات */

/* الإطار العادي — صفيحة لها حافّة عليا تلتقط الضوء */
.frame {
  background: var(--deck);
  border: var(--bw, 1px) solid var(--rule);
  /* ‎--shade‎ ظلُّ الارتفاع، وأصلُه صفرٌ لا يُرسم منه شيء — فاللوحة بلا
     تعديلٍ تبقى مسطّحةً كما هي في أصل التصميم (انظر design.css) */
  box-shadow: var(--edge), var(--shade, 0 0 0 0 transparent);
  margin-block-end: var(--frame-gap, 18px);
  /* مرجعٌ لحلقة الترشيح أدناه. آمنٌ هنا: كل عنصر مطلق داخل اللوحات له
     أصلٌ موضوع خاصّ به (اللوحة النحاسية، المؤشّر، خانة الموقف). */
  position: relative;
}

/* لوحة نتائج تبدّلت بعد ترشيح: حافة نحاسية تخبو — الإشارة الوحيدة على أنّ
   الطلب جرى حين تعود النتيجة مطابقة لما كان معروضاً.

   طبقةٌ فوق المحتوى لا outline على اللوحة: الحدّ والحاشية يُرسمان في طور
   زخرفة العنصر، أي تحت أبنائه الموضوعين. وترويسة الجدول لاصقة (position:
   sticky) بـ z-index: 2، فكانت خلفيّتها تطمس الحلقة عند طرفيها فتبدو
   الحافة مقطوعة خلف الترويسة. الطبقة ترتفع فوقها فتُرى كاملة، وتُمرَّر
   النقرات من خلالها بـ pointer-events. */
@keyframes frame-refresh {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.frame.is-refreshed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 3;                       /* فوق الترويسة اللاصقة (2) */
  animation: frame-refresh .6s ease-out forwards;
}

/* لوحة الموقف — الصفيحة النحاسية: خط نحاس علوي مصمت وإطار داخلي مزدوج.
   تُحجَز للوحة الرئيسية في كل شاشة، فيبقى للنحاس معنى. */
.frame--board {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--deck), inset 0 0 0 4px var(--accent-lo),
              var(--shade, 0 0 0 0 transparent);
  padding: 4px;
  position: relative;
}
.frame--board::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  height: 2px;
  background: var(--accent);
}

/* ترويسة اللوحة على سطح البطاقة لا على شريط رمادي.

   كانت وشريطُ الترشيح وترويسةُ أعمدة الجدول ثلاثتها بلون واحد (‎--deck-2‎)،
   فتُقرأ كتلةً واحدة لا ثلاث طبقات: عنوان اللوحة، وأدوات ترشيحها، وأسماء
   أعمدتها. والآن الشريط الرمادي واحد — ترويسة الأعمدة — فيُعرف أنّه بداية
   الجدول لا امتداد ما فوقه. ولوحة الموقف النحاسية كانت شفّافة أصلاً، فاتّفق
   الشكلان بعد أن كانا مختلفين بلا سبب. */
.frame__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-card-y, 12px) var(--pad-card, 15px);
  border-block-end: 1px solid var(--rule);
  background: var(--deck);
}
.frame--board > .frame__head {
  background: transparent;
  border-block-end: 1px solid var(--accent);
}

.frame__title {
  font-family: var(--f-disp);
  font-size: calc(14px * var(--f-scale, 1));
  font-weight: var(--w-title-hi, 700);
  display: flex; align-items: center; gap: 9px;
}
.frame__title .ico { color: var(--accent); }
.frame--board .frame__title { color: var(--accent); }

.frame__note { font-size: calc(11.5px * var(--f-scale, 1)); color: var(--dim); font-family: var(--f-body); font-weight: 400; }
.frame__tools { margin-inline-start: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-inline-size: 0; }
/* الترويسة تلتفّ حين لا يسع العرضُ العنوانَ وأدواته: كانت ‎nowrap‎ ضمناً
   فيفيض عدّادُ الصلاحية عن اللوحة على الشاشات الضيّقة. */
.frame__head { flex-wrap: wrap; }
.frame__title { min-inline-size: 0; }
.frame__body { padding: var(--pad-card, 15px); }
.frame__body--flush { padding: 0; }
.frame__foot {
  padding: calc(var(--pad-card-y, 12px) - 1px) var(--pad-card, 15px);
  border-block-start: 1px solid var(--rule);
  background: var(--deck-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* لوحات المواقف جنباً إلى جنب — تخطيط اللوحة الورقية المعتمدة للوحدة.

   كانت هذه القواعد تعيش في هيكل طباعة مستقلّ لا يُرى على الشاشة، فيخرج من
   النظام شكلان للورقة الواحدة. والآن اللوحة تُقرأ على الشاشة كما تُطبع،
   ويطبعها زرٌّ في ترويستها — مسارٌ واحد لا معاينة تسبقه. */
.boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.boards > .frame { margin: 0; break-inside: avoid; }
.boards > .frame--wide { grid-column: 1 / -1; }

/* بطاقة تُنقر كاملةً — تقارير وما شابهها.
   عمودٌ مرن كي ينزل الذيل إلى القاع مهما قصُر النصّ فوقه. */
.frame--card {
  display: flex;
  flex-direction: column;
  margin: 0;
  transition: border-color .12s, box-shadow .12s;
}
.frame--card > .frame__foot { margin-block-start: auto; justify-content: space-between; }
.frame--card:hover { border-color: var(--accent-dim); }

/* بطاقةٌ تفتح نافذةً لا تغادر الصفحة — زرٌّ لا رابط. والزرُّ يرث من المتصفّح
   خطَّه وتوسيطَ نصّه وحشوَه وعرضَه بمحتواه، فيُردّ إلى هيئة البطاقة كي لا
   يُقرأ في الصفّ شكلان لاختيارٍ واحد. */
button.frame--card {
  inline-size: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

/* دعوةُ الفتح: كانت 11.5 بكسل بوزن عادي، وهي الفعل المقصود في البطاقة —
   تباينها كان وافياً (10.7) لكنّ حجمها لا. */
.report__open {
  font-size: calc(12.5px * var(--f-scale, 1));
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .1px;
}

/* ================================================================= الجداول */

/* ======================================= الجداول: الالتصاق والتمدّد الجانبي

   ترويسة الجدول كانت موسومة sticky منذ البداية ولم تلتصق قطّ، والسبب هنا:
   overflow-x: auto يجعل الغلاف وعاءَ تمريرٍ على المحورين معاً لا على الأفقي
   وحده. فتلتصق الترويسة بوعاءٍ لا يتحرّك رأسياً أبداً — أي لا تلتصق بشيء.

   و clip يقصّ الزائد كما يقصّه auto لكنّه لا ينشئ وعاء تمرير، فتتخطّاه
   الترويسة إلى منطقة العمل، وهي وعاء التمرير الحقيقي في هذا الهيكل.

   وما لا يتّسع له العرض حتى بعد التمدّد يستعيد تمريره الأفقي بـ is-scrollable
   ويتنازل عن التصاق ترويسته — صفقةٌ يعرفها من يقرأ جدولاً بأربعة عشر عموداً،
   ولا تُفرض على بقيّة جداول النظام. */

.tbl-wrap { overflow-x: clip; }
.tbl-wrap.is-scrollable { overflow-x: auto; }

/* وما يُمرَّر تخبو حافّته.

   الجدول المقصوص بحدٍّ قاطع يُقرأ منتهياً عند ذلك الحدّ: قيس على كشف
   الطلاب 661 بكسلاً خارج الغلاف بلا ما يدلّ عليها. والخبوّ يقول إنّ بعده
   بقيّة، ويُرفعه tables.js متى بلغ التمرير آخره. */
.tbl-wrap.is-scrollable {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent 100%);
}
:root[dir="ltr"] .tbl-wrap.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
}
.tbl-wrap.is-scrollable.is-end,
:root[dir="ltr"] .tbl-wrap.is-scrollable.is-end { -webkit-mask-image: none; mask-image: none; }

/* ------------------------------------------------------- التمدّد الجانبي

   حين تُمرَّر لوحةٌ فيها جدول طويل وتلتصق ترويسته، تتمدّد اللوحة إلى حافّتي
   منطقة العمل فتكسب عرض الحشو من الجهتين. الغاية عمليّة لا زخرفية: الجدول
   يُقرأ في اللحظة التي يحتاج فيها إلى أوسع عرض ممكن، ويعود إلى مكانه فور
   خروجه من العين فلا تفقد الصفحة إيقاعها.

   المقدار يقيسه tables.js ويحقنه في ‎--bleed‎: لا رقم مكتوب هنا، لأنّ الحشو
   يختلف بين شاشة عريضة وضيّقة، والقياس وحده يعرف كم من الفراغ يُستردّ. */

.frame.is-bleeding {
  margin-inline-start: calc(var(--bleed, 0px) * -1);
  margin-inline-end:   calc(var(--bleed, 0px) * -1);
}

/* آخر لوحة في الصفحة تبلغ حافّتها السفلى.

   حين لا شيء تحت الجدول، يبقى تحته فراغُ حشوِ منطقة العمل — شريطٌ فارغ
   يقطع الصفحة قبل أن تنتهي. فتُلغيه اللوحة الأخيرة بهامش سالب فتصل إلى
   الحافّة، ويُقرأ الجدول امتداداً للصفحة لا بطاقةً طافية فيها.

   ورقمٌ ثابت لا مقيس: الهامش السفلي السالب لا يحرّك اللوحة بل يرفع ما
   بعدها، فيُقاس أثره من ارتفاع المحتوى لا من موضعها. وارتفاع المحتوى
   يُقرأ عدداً صحيحاً والهامش الذي حرّكه كسريّ، فيتأرجح القياس بين رقمين
   بلا استقرار. والحشو معلوم سلفاً، فلا حاجة إلى قياسه أصلاً. */
/* اللوحة الممتدّة تفقد إطارها الجانبي.

   الإطار يقول «هذه بطاقة على صفحة». وحين تبلغ اللوحة حافّتي منطقة العمل
   لم تعد بطاقةً بل صارت الصفحةَ نفسها، فخطٌّ رأسيّ على الحافّة يُقرأ بقيّةً
   من شكلٍ سابق لا حدّاً لشيء.

   واللوحة النحاسية تفقد معه حلقتها الداخلية: هي إطارُ لوحةِ موقفٍ معلَّقة،
   ولا معنى لتأطير ما لا حوافّ له. */
.frame.is-bleeding {
  border-inline-color: transparent;
}
.frame--board.is-bleeding {
  box-shadow: none;
  padding-inline: 0;
}
.frame--board.is-bleeding::before { display: none; }

/* لا ‎.main >‎: اللوحة قد تكون داخل لسان، فتُطابَق أينما كانت ما دام
   tables.js قد حكم بأنّها آخر ما يُرسم.

   ويُشترط التمدّد معه: بلوغُ الحافّة السفلى نصفُ هيئةِ الجدول الممتدّ، لا
   قاعدةً عامّة لكل لوحة أخيرة. فُصلا مرّةً فبدت لوحةٌ ساكنة — لا تلتصق
   ترويستها ولا تتمدّد — ملتصقةً بحافّة الشاشة بلا سبب ظاهر، كلوحة الموقف
   الموحّد في أوّل ألسنة العهدة.

   واللوحة التي لا تتمدّد بطاقةٌ على صفحة، والبطاقة يحيط بها فراغُها. */
.frame.is-bleeding.is-last-frame {
  /* يستبدل هامشَ اللوحة الأصلي (18px) لا يُضاف إليه، فالإزاحة الكلّية
     أربعة وسبعون: ثمانية عشر هامشُها وستّة وخمسون حشوُ المنطقة. */
  margin-block-end: calc(var(--pad-end, 56px) * -1);
}

/* الانتقال على الهوامش وحدها: تحريك العرض يعيد تخطيط الجدول كل إطار */
.frame { transition: margin-inline-start .18s ease, margin-inline-end .18s ease; }

/* أثناء تبديل المحتوى لا انتقال: اللوحة الجديدة تصل إلى عرضها الصحيح
   فوراً. الحركة تليق بتمدّدٍ يستجيب لتمرير المستخدم، لا بإعادة بناء
   الصفحة — هناك تُقرأ ارتداداً لا استجابة. */
:root.is-swapping .frame,
:root.is-swapping .head { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .frame, .head { transition: none; }
}

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(12.5px * var(--f-scale, 1) * var(--tbl-scale, 1));
}

/* جدولٌ لا يُمرَّر فيه لا تلتصق ترويسته: يضع tables.js‏ can-stick على غلافه
   حين يستحقّ ذلك، فتبقى ترويسات الجداول الصغيرة في مواضعها. */
.tbl-wrap:not(.can-stick) table.tbl th { position: static; }

table.tbl th {
  background: var(--deck-2);
  color: var(--haze);
  font-weight: 600;
  font-size: calc(11px * var(--f-scale, 1));
  text-align: start;
  padding: calc(var(--cell-y, 8px) + 2px) var(--cell-x, 11px);
  border-block-end: 1px solid var(--rule-2);
  white-space: nowrap;
  position: sticky;
  /* تقف عند حافّة منطقة العمل لا عند حافّة محتواها. بلا هذه الإزاحة تبقى
     فرجةٌ بقدر الحشو العلوي تمرّ الصفوف خلالها فوق الترويسة الملتصقة —
     تُرى شريطاً من نصف سطر يتحرّك حيث لا ينبغي أن يتحرّك شيء. */
  /* تحت شريط الترشيح لا تحته مباشرةً على حافّة المنطقة: ‎--bar-h‎ صفرٌ
     حين لا شريط، فتقف الترويسة على الحافّة كما كانت. */
  inset-block-start: calc(var(--pad-block, 22px) * -1 + var(--bar-h, 0px));
  z-index: 3;
  box-shadow: var(--edge);
}

/* حين تلتصق الترويسة فعلاً يظهر تحتها ظلٌّ خافت، فيُقرأ أنّ الصفوف تمرّ
   من تحتها لا أنّ الجدول انتهى عندها. ولا يُلمس حدّها السفلي: هو قائم
   أصلاً، وتكراره بظلٍّ داخليّ يُثخّن الخط بكسلاً في كل جداول النظام. */
.tbl-wrap.is-pinned table.tbl th {
  /* بلا ‎--edge‎ وهي ملتصقة.

     ‎--edge‎ خطٌّ أبيض بعرض بكسل داخل الحافّة العليا (‎inset 0 1px 0 rgba(255,
     255,255,.9)‎) — بريقُ حافّةٍ يليق ببطاقة قائمة على سطح. لكنّ الترويسة
     الملتصقة تقف تحت حدّ الشريط العلوي مباشرة، فيُقرأ البريق شريطاً أبيض
     بينهما لا بريقَ حافّة. قيس على شاشة العهدة: بكسلان أبيضان (255,255,255)
     يعلوان الترويسة الرمادية (234,236,241).

     ويعود في السكون: هناك اللوحةُ بطاقةٌ وللبريق معنى. */
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .28);
}

/* وأوّل بكسل من الترويسة يُطلى بطبقة خلفها.

   الحدود مدمجة (border-collapse: collapse)، والحدّ المدمج ملكُ الجدول لا
   الخليّة، فخلفيّةُ الخليّة لا تبلغ صفَّ البكسلات الذي يشغله — ويهاجر الحدُّ
   مع الجدول حين تلتصق هي، فيبقى ذلك الصفّ بلا طلاء تُرى منه أرضيةُ اللوحة
   البيضاء. لا الظلّ الداخليّ يبلغه ولا الخارجيّ.

   وطبقةٌ موضوعةٌ خلف المحتوى تبلغه: الخليّة الملتصقة أصلٌ موضوع، فتُقاس
   الطبقة عليها وتمتدّ بكسلاً فوقها. */
.tbl-wrap.is-pinned table.tbl th::after {
  content: '';
  position: absolute;
  inset: -1px 0 0 0;
  background: var(--deck-2);
  z-index: -1;
}
table.tbl td {
  padding: var(--cell-y, 8px) var(--cell-x, 11px);
  border-block-end: 1px solid var(--rule);
  vertical-align: middle;
}
/* تظليل الصفوف الزوجية بفارق ضئيل جداً — يقود العين عبر السطر الطويل
   دون أن يقطع اللوحة إلى شرائح */
table.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rule) 22%, transparent); }
table.tbl tbody tr:hover { background: var(--deck-2); }
table.tbl tbody tr:last-child td { border-block-end: 0; }

table.tbl .t-num { text-align: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
table.tbl .t-center { text-align: center; }
table.tbl .t-end { text-align: end; }
table.tbl .t-tight { width: 1%; white-space: nowrap; }

/* صف الإجمالي — يُقرأ كخلاصة اللوحة: خط نحاسي فاصل وأرقام نحاسية */
table.tbl tfoot td, table.tbl tr.is-total td {
  background: var(--deck-2);
  border-block-start: 1px solid var(--accent-lo);
  border-block-end: 0;
  font-weight: 600;
  color: var(--accent);
  padding-block: 10px;
}
table.tbl tfoot tr:hover td, table.tbl tr.is-total:hover td { background: var(--deck-2); }

/* صفُّ عنوانِ مجموعةٍ داخل الجدول — يقسم اللوحةَ الواحدة إلى أبوابها.

   جدولٌ تُحرَّر خاناتُه فئةً فئة يحتاج فاصلاً يُقرأ عنواناً لا سطرَ بيان:
   خطٌّ نحاسيٌّ فوقه وأرضيةٌ كأرضية الذيل، ولا يستجيب للمرور لأنّه ليس
   صفّاً يُنقر. */
table.tbl tr.tbl__group td {
  background: var(--deck-2);
  border-block-start: 1px solid var(--accent-lo);
  font-weight: 600;
  color: var(--accent);
  padding-block: 7px;
}
table.tbl tr.tbl__group:hover td { background: var(--deck-2); }

/* الجدول المسطّر بالكامل — للوحات المواقف (كما في اللوحة الورقية) */
table.tbl--ruled th, table.tbl--ruled td { border: var(--bw, 1px) solid var(--rule); }
table.tbl--ruled { border: var(--bw, 1px) solid var(--rule-2); }
table.tbl--ruled tbody tr:nth-child(even) { background: transparent; }

/* الجدول الكثير الأعمدة يلتزم أعراضه المعلَنة.

   في التخطيط التلقائي يكون العرض اقتراحاً لا إلزاماً: المتصفّح يوزّع المدى
   على قدر ما تطلبه ترويسةُ كل عمود، فيأخذ عمودُ حالٍ ترويستُه طويلة مئتَي
   بكسل، ويبقى لعمود الأعطال — وهو موضع الخبر — تسعون، فتنزل كلمةٌ في كل
   سطر ويطول الصفّ حتى يملأ الورقة. والتخطيط الثابت يجعل ما أُعلن هو ما
   يُنفَّذ، وما لم يُعلن يقتسم الباقي. */
.tbl--fixed { table-layout: fixed; }
.tbl--fixed th, .tbl--fixed td { overflow-wrap: break-word; }

/* الترويسة تلتفّ في الجدول الملزَم.

   الأصل ‎nowrap‎ لأنّ عنوان العمود سطرٌ واحد في الجداول العادية، وعرضُها
   يتّسع لما فيه. أمّا هنا فالعرض مفروض، فترويسةٌ لا تلتفّ تفيض على جارتها
   وتُقرأ ملتصقةً بها: «منظومة الاتصالاتالملاحظات والأعطال». */
.tbl--fixed th { white-space: normal; vertical-align: bottom; }

/* السطر التفصيلي — نصٌّ طويل يخرج من عمودٍ ضيّق إلى عرض الجدول كلّه.

   الأعطال وملاحظات المنظومات نصوصٌ تُقرأ جملةً، وحشرُها في عمودٍ من مئتَي
   بكسل ينزل الكلمة في سطر ويطيل الصفّ حتى يملأ الورقة. فتنزل تحت صفّها
   بعنوانها، وتبقى مقترنةً به لأنّها بلا حدٍّ فاصل عنه. */
.tbl__detail > td {
  border-block-start: 0 !important;
  padding-block: 0 9px;
  font-size: calc(11.5px * var(--f-scale, 1));
  line-height: 1.75;
}
.tbl__detail dt {
  display: inline;
  font-weight: 600;
  color: var(--haze);
}
.tbl__detail dd { display: inline; margin: 0; }
.tbl__detail dl { margin: 0; }
.tbl__detail dl + dl { margin-block-start: 3px; }
.tbl__detail ul { margin: 0; padding-inline-start: 16px; display: inline-block; vertical-align: top; }

table.tbl--compact td, table.tbl--compact th { padding: 5px 8px; font-size: calc(12px * var(--f-scale, 1)); }


/* ====================== الكشف على الهاتف: بطاقةٌ لكل صفّ لا جدولٌ يُمرَّر

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

   فيصير كل صفٍّ بطاقةً: اسمُ الحقل في جهة البداية وقيمتُه أمامه، والسطر
   الأوّل — اسمُ الشخص أو القطعة — عنوانُ البطاقة بلا وسم. وأسماء الحقول
   ليست مكتوبة في القوالب: يقرؤها tables.js من ترويسة العمود ويكتبها في
   ‎data-label‎، فلا يُعاد كتابة عنوانٍ في موضعين ولا يفترقان.

   وهذا لكشوف الصفوف وحدها (‎tbl--stack‎): من يقرأ لوحة موقفٍ أو شبكة احتياج
   يقرأ الشبكة نفسها — الأعمدة فيها تُقارَن ببعضها، وتفكيكها إلى بطاقات
   يُتلف المعنى. تلك تبقى جدولاً يُمرَّر أفقياً.                           */

@media screen and (max-width: 620px) {
  table.tbl--stack,
  table.tbl--stack > tbody,
  table.tbl--stack > tbody > tr,
  table.tbl--stack > tbody > tr > td { display: block; width: auto; }

  /* الترويسة تصير شريط ترتيب.

     أسماء الأعمدة انتقلت إلى داخل البطاقات، فلم يبقَ للترويسة عملٌ إلا
     واحد: أعمدةٌ تُنقر فتُرتَّب. وإخفاؤها كلَّها يسلب الكشفَ ترتيبَه على
     الهاتف — وكشفُ ثمانمئة سجلّ لا يُقرأ بلا ترتيب. فتبقى منها الأعمدة
     التي تُنقر وحدها، أزراراً في صفّ يلتفّ، ويعلوها اسمُ ما تفعله.

     وترتيبُ الخادم وترتيبُ المتصفّح كلاهما يضع ‎aria-sort‎ على ترويسته،
     فمحدِّدٌ واحد يكفيهما. ولوحةٌ لا تُرتَّب لا شريط لها أصلاً. */
  table.tbl--stack > thead { display: block; }
  table.tbl--stack > thead:not(:has(th[aria-sort])) { display: none; }

  /* صفٌّ واحد يُمرَّر لا ثلاثة تلتفّ: تسعة أوسمة تلتفّ إلى مئة بكسل من
     الأدوات فوق شريط ترشيحٍ هو ثلاثة أسطر أصلاً. والهيئة هيئةُ شريط
     الألسنة نفسها، فلا يتعلّم القارئ نمطين لشيء واحد. */
  table.tbl--stack > thead > tr {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 9px;
    margin-block-end: 9px;
    border-block-end: 1px solid var(--rule);
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
  }
  :root[dir="ltr"] table.tbl--stack > thead > tr {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  table.tbl--stack > thead > tr.is-end,
  :root[dir="ltr"] table.tbl--stack > thead > tr.is-end { -webkit-mask-image: none; mask-image: none; }
  table.tbl--stack > thead > tr::-webkit-scrollbar { display: none; }
  table.tbl--stack > thead > tr::before {
    content: 'ترتيب';
    font-size: calc(10.5px * var(--f-scale, 1));
    font-weight: 600;
    color: var(--dim);
    flex: none;
  }

  table.tbl--stack > thead th { display: none; }
  table.tbl--stack > thead th[aria-sort] {
    display: inline-flex;
    align-items: center;
    position: static;
    /* ‎t-tight‎ يقول ‎width: 1%‎ — «انكمش إلى محتواك» في شبكة الجدول. وعنصرُ
       الصفّ المرن يقرؤها عرضاً محدَّداً بثلاثة بكسلات، ويأخذ منها أدنى مقاسه
       التلقائي، فيخرج الوسم بعشرين بكسلاً ونصُّه مقصوص. */
    width: auto;
    flex: none;
    padding: 4px 9px;
    border: var(--bw, 1px) solid var(--rule);
    border-block-end: 1px solid var(--rule);
    background: var(--deck-2);
    box-shadow: none;
    white-space: nowrap;
  }
  table.tbl--stack > thead th[aria-sort='ascending'],
  table.tbl--stack > thead th[aria-sort='descending'] {
    border-color: var(--accent-dim);
    background: var(--deck-3);
  }
  /* الطبقة التي تطلي أوّل بكسل من الترويسة الملتصقة لا موضع لها هنا */
  table.tbl--stack > thead th::after { z-index: auto; }
  table.tbl--stack > thead th[aria-sort]::after { position: static; }

  table.tbl--stack { border: 0; }

  /* عمودٌ مرن لا كتلة: العنوان يُرفع إلى رأس البطاقة والإجراءات تهبط إلى
     قاعها بـ ‎order‎ مهما كان موضع عمودَيهما في الجدول. اسمُ الشخص يقع بعد
     رقم إحصائه في الكشف، ولا يصحّ أن يكون كذلك في بطاقةٍ عنوانُها اسمه. */
  table.tbl--stack > tbody > tr {
    display: flex;
    flex-direction: column;
    border: var(--bw, 1px) solid var(--rule);
    background: var(--deck);
    margin-block-end: 8px;
    padding-block: 2px;
    break-inside: avoid;
  }
  table.tbl--stack > tbody > tr:nth-child(even) { background: var(--deck); }
  table.tbl--stack > tbody > tr:hover { background: var(--deck); }
  table.tbl--stack > tbody > tr:last-child { margin-block-end: 0; }

  table.tbl--stack > tbody > tr > td {
    display: grid;
    grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
    align-items: baseline;
    /* كثافةٌ تليق بقائمةٍ طويلة: البطاقة بتسعة حقول كانت 290 بكسلاً، وصفحةٌ
       من مئة سجلّ في التقاعد تبلغ ثلاثين ألف بكسل — أربعين شاشة. */
    gap: 0 10px;
    padding: 2px 10px;
    line-height: 1.55;
    border: 0;
    /* المحاذاة الوسطى والرقمية مبنيّتان على عمودٍ في شبكة؛ وفي البطاقة
       تقف القيمة أمام اسمها فتُقرأ من جهة البداية كأيّ سطر.

       و‎justify-items‎ يلزم لأنّ الخليّة صارت شبكة: الشارة والرمز عناصر
       مؤطَّرة، وعنصرُ الشبكة يتمدّد إلى عرض خانته ما لم يُمنع — فكانت
       شارة «بالخدمة» تمتدّ عرض البطاقة كأنّها حقل إدخال. */
    text-align: start;
    justify-items: start;
    /* رمزٌ طويل بلا فراغات — اسم ملف نسخة احتياطية، رقم وطني — لا يجد في
       البطاقة عموداً يتّسع له كما في الجدول، فيُكسر حيث بلغ الحافّة. */
    overflow-wrap: anywhere;
  }
  /* التخصيص هنا أعلى من ‎table.tbl .t-num‎ عمداً: تلك قاعدةُ عمودٍ في شبكة */
  table.tbl--stack > tbody > tr > td.t-num,
  table.tbl--stack > tbody > tr > td.t-center,
  table.tbl--stack > tbody > tr > td.t-end,
  table.tbl--stack > tfoot > tr > td.t-num,
  table.tbl--stack > tfoot > tr > td.t-center,
  table.tbl--stack > tfoot > tr > td.t-end { text-align: start; }
  /* والعرض المفروض على الأعمدة الضيّقة لا معنى له خارج الشبكة */
  table.tbl--stack > tbody > tr > td.t-tight,
  table.tbl--stack > tfoot > tr > td.t-tight { width: auto; white-space: normal; }

  /* خليّةٌ اتجاهها لاتيني — تاريخٌ أو رمز يحمل صنف ‎.mono‎ — تقلب ترتيب
     خانتَي الشبكة، لأنّ ترتيب الخانات يتبع اتجاه الحاوية لا اتجاه الصفحة.
     فكان اسمُ الحقل يقف في الجهة المقابلة لأسماء إخوته في البطاقة نفسها.

     ولا يُقلَب اتجاه الخليّة علاجاً: رمزٌ يخلط حرفاً برقم («P-701») يُعاد
     ترتيبه في فقرة عربية فيخرج مقلوباً. فتُوضع الخانتان بالترتيب الصريح
     ويبقى الاتجاه لاتينياً كما يجب أن يكون. */
  table.tbl--stack > tbody > tr > td.mono,
  table.tbl--stack > tfoot > tr > td.mono {
    grid-template-columns: minmax(0, 1fr) minmax(0, 11ch);
    justify-items: end;
    text-align: end;
  }
  table.tbl--stack > tbody > tr > td.mono::before,
  table.tbl--stack > tfoot > tr > td.mono::before { grid-column: 2; grid-row: 1; }
  table.tbl--stack > tbody > tr > td::before {
    content: attr(data-label);
    color: var(--haze);
    font-family: var(--f-body);
    font-size: calc(10.5px * var(--f-scale, 1));
    font-weight: 500;
    line-height: 1.55;
  }

  /* عمودٌ بلا عنوان (الإجراءات، ورقم التسلسل) لا يحتاج نصف البطاقة */
  table.tbl--stack > tbody > tr > td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  table.tbl--stack > tbody > tr > td[data-label=""]::before { display: none; }

  /* رقم التسلسل يصف موضع الصفّ في شبكةٍ لم تعد قائمة */
  table.tbl--stack > tbody > tr > td[data-stack="index"] { display: none; }

  /* عنوان البطاقة: أوّل حقلٍ ذي معنى — الاسم غالباً — يُرفع سطراً كاملاً
     بحجمٍ أكبر وخطّ فاصل تحته، كترويسة البطاقة. */
  /* حقلٌ ثانويّ يُطلب بـ ‎data-card="minor"‎ على ترويسته: عمرٌ ومدّةُ خدمة
     تُقرآن في صفحة السجلّ، ووجودُهما في كل بطاقة يضاعف طول الكشف. */
  table.tbl--stack > tbody > tr > td[data-stack="minor"] { display: none; }

  table.tbl--stack > tbody > tr > td[data-stack="head"] {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 7px;
    margin-block-end: 2px;
    border-block-end: 1px solid var(--rule);
    font-size: calc(13.5px * var(--f-scale, 1));
    font-weight: 600;
    order: -1;
  }
  table.tbl--stack > tbody > tr > td[data-stack="head"]::before { display: none; }

  /* الإجراءات في قاع البطاقة، مصطفّةً إلى جهة النهاية كما في صفّ الجدول */
  table.tbl--stack > tbody > tr > td[data-stack="actions"] {
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: 2px;
    padding-block: 8px;
    border-block-start: 1px solid var(--rule);
    background: var(--deck-2);
    order: 1;
  }
  table.tbl--stack > tbody > tr > td[data-stack="actions"]::before { display: none; }

  /* خليّةٌ فارغة في بطاقة سطرٌ فارغ يُقرأ عطلاً */
  table.tbl--stack > tbody > tr > td[data-empty] { display: none; }

  /* والمجموع بطاقةٌ أخيرة بلونه النحاسي: صفٌّ بثمانية أعمدة يطلب 374
     بكسلاً فيدفع اللوحةَ كلَّها خارج الشاشة لو بقي جدولاً. */
  table.tbl--stack > tfoot,
  table.tbl--stack > tfoot > tr,
  table.tbl--stack > tfoot > tr > td { display: block; width: auto; }

  table.tbl--stack > tfoot > tr {
    border: var(--bw, 1px) solid var(--accent-lo);
    margin-block-start: 8px;
    padding-block: 2px;
  }
  table.tbl--stack > tfoot > tr > td {
    display: grid;
    grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
    padding: 5px 12px;
    border: 0;
    text-align: start;
    justify-items: start;
  }
  table.tbl--stack > tfoot > tr > td::before {
    content: attr(data-label);
    color: var(--haze);
    font-family: var(--f-body);
    font-size: calc(10.5px * var(--f-scale, 1));
    font-weight: 500;
  }
  table.tbl--stack > tfoot > tr > td[data-label=""],
  table.tbl--stack > tfoot > tr > td[data-stack="head"] { grid-template-columns: minmax(0, 1fr); }
  table.tbl--stack > tfoot > tr > td[data-label=""]::before,
  table.tbl--stack > tfoot > tr > td[data-stack="head"]::before { display: none; }
  table.tbl--stack > tfoot > tr > td[data-stack="head"] {
    padding-block: 9px;
    border-block-end: 1px solid var(--accent-lo);
    font-size: calc(13px * var(--f-scale, 1));
  }

  /* اللوحة الحاوية تفقد حشوها الداخلي: البطاقات لها حوافّها */
  .tbl-wrap.is-stacked { overflow-x: visible; padding: 8px; }
  .tbl-wrap.is-stacked ~ .pager,
  .frame > .tbl-wrap.is-stacked + .pager { border-block-start: 1px solid var(--rule); }

  /* المسطرة والشارة داخل البطاقة تأخذان عرض القيمة لا عرض العمود */
  table.tbl--stack .gauge { min-width: 0; }
}


/* ==================== عرض ثابت لأعمدة كشف الأفراد (على الشاشة وحدها)

   الكشف مجزّأ على صفحات، وعرض الأعمدة يُحسب من محتوى الصفحة المعروضة
   وحدها. فحين يُرتَّب، تأتي صفوف أخرى بأسماء وحدات وأصناف أطول أو
   أقصر، فتتزحزح الأعمدة: قيس أسوأ زحزحة 110 بكسل في «الصنف» و110 في
   «الوحدة» عبر ثلاث وعشرين حالة ترتيب. الجدول لا يتغيّر عرضه، بل يُعاد
   توزيعه — وهو ما يُقرأ اهتزازاً.

   والنسب لا البكسلات: صندوق الجدول 1292 بكسل عند عرض 1600، و972 عند
   1280، والنسبة تتبعه والرقم الثابت لا يتبعه.

   ولا يُعمَّم table-layout: fixed على table.tbl أبداً: قاعدة t-tight
   تقول width: 1%، وهي في التخطيط التلقائي «انكمش إلى المحتوى» وفي الثابت
   «واحد بالمئة من عرض الجدول» — أي نحو ثلاثة عشر بكسلاً. تعميمها يطبق
   الأعمدة الضيّقة في كل جداول النظام.

   ومحصورٌ في الشاشة: كتلة الطباعة تُعيد ضبط هذه الأعمدة نفسها عمداً
   (width: auto) بعد أن ثبت أنّ width: 1% على الورق يمنح عموداً واحداً
   كل الفائض. فلو تسرّبت هذه القواعد إلى الطباعة لأبطلت ذلك.            */

/* ومشروطٌ بعرضٍ يكفيها.

   النسب حُسبت على صندوق جدولٍ بين 972 و1292 بكسلاً — أي على شاشة مكتب.
   وتحت ذلك يصير ‎7.5%‎ من الصندوق ثلاثةً وخمسين بكسلاً لعمودٍ ترويسته
   «الرقم الإحصائي» وحدها خمسة وسبعون، فيخرج نصّها من خانتها. والتخطيط الثابت
   يقصّ ولا يتّسع، فالخارج يقع فوق العمود المجاور.

   وتحت ذلك العرض يُمرَّر الجدول أفقياً أصلاً (أو يصير بطاقات على الهاتف)،
   فالتخطيط التلقائي هناك أصحّ: يعطي كل عمود ما يسعه. والاهتزاز عند الترتيب
   الذي دعا إلى تثبيته لا يقع إلا حيث يتّسع العرض لتوزيعٍ آخر. */
@media screen and (min-width: 1140px) {
  table.tbl#peopleTable { table-layout: fixed; }

  #peopleTable .col-idx     { width: 3.5%;  }
  #peopleTable .col-sn      { width: 8.5%;  }
  #peopleTable .col-rank    { width: 9.5%;  }
  #peopleTable .col-spec    { width: 14%;   }
  #peopleTable .col-name    { width: 16.5%; }
  #peopleTable .col-unit    { width: 19.5%; }
  #peopleTable .col-age     { width: 4.5%;  }
  #peopleTable .col-service { width: 5.5%;  }
  #peopleTable .col-retire  { width: 9.5%;  }
  #peopleTable .col-status  { width: 9%;    }

  /* اسم وحدة طويل بلا فراغات لا يُخرج العمود عن عرضه المقرّر */
  #peopleTable td { overflow-wrap: anywhere; }
  /* والترويسة تلتفّ بدل أن تفيض: ‎nowrap‎ العامّة تصحّ في تخطيطٍ تلقائيّ
     يوسّع العمود لها، ولا تصحّ في تخطيطٍ ثابت لا يوسّع شيئاً. */
  #peopleTable th { white-space: normal; overflow-wrap: anywhere; }
}

/* حالة الفراغ — لوحة لا شيء فيها ليست عطلاً يُعتذَر عنه بسطر باهت، بل موضعٌ
   يُقال فيه سببُ الخلوّ ويُعرض المخرج منه، بالسعة نفسها التي يُعرض بها الجدول.

   العلامة تأخذ هيئة الصفيحة النحاسية (frame--board): إطارٌ مصمت وداخله إطارٌ
   ثانٍ خافت. هي توقيع النظام البصري في لوحاته الرئيسية، فتُصغَّر هنا حول
   الأيقونة بدل استقدام شكل غريب عنه — والنظام كلّه قائم الزوايا لا دائرة فيه.

   والمحدِّد ‎> .ico‎ مقصود: العلامة هي الأيقونة المباشرة وحدها. لولاه لأخذت
   أيقونةُ الزرّ تحتها القياسَ نفسه فظهرت صفيحةٌ شاحبة داخل الزرّ. */

.tbl__empty {
  padding: 64px 24px 56px;
  text-align: center;
  color: var(--dim);
  animation: empty-in .42s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes empty-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.tbl__empty > .ico {
  width: 60px;
  height: 60px;
  padding: 18px;
  margin-block-end: 26px;
  color: var(--accent);
  background: var(--deck);
  border: var(--bw, 1px) solid var(--accent);
  box-shadow: inset 0 0 0 3px var(--deck), inset 0 0 0 4px var(--accent-lo);
}

/* أوّل فقرة عنوان، وما بعدها شرح. القوالب القديمة تكتب فقرة واحدة فتُقرأ
   عنواناً، والجديدة تُضيف سطر شرح — والقاعدتان تكفيان الحالتين. */
.tbl__empty p {
  margin: 0 auto 10px;
  max-width: 44ch;
  font-family: var(--f-disp);
  font-size: calc(17px * var(--f-scale, 1));
  font-weight: 700;
  line-height: 1.55;
  color: var(--foam);
}
.tbl__empty p ~ p,
.tbl__empty p.small {
  max-width: 54ch;
  font-family: var(--f-body);
  font-size: calc(13px * var(--f-scale, 1));
  font-weight: 400;
  line-height: 1.9;
  color: var(--dim);
}
.tbl__empty p:last-of-type { margin-block-end: 26px; }

/* ما بحث عنه المستخدم يُعاد إليه كما كتبه: معزولاً عن اتجاه الجملة العربية
   كي لا تتقاذفه المحارف، ومؤطَّراً كي يُقرأ نصّاً منقولاً لا كلمةً في السطر. */
.tbl__empty .mono {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--f-mono);
  font-size: calc(12px * var(--f-scale, 1));
  color: var(--accent);
  background: var(--deck-2);
  border: var(--bw, 1px) solid var(--rule);
  padding: 1px 7px;
  margin-inline: 2px;
}

.tbl__empty .btn { margin-inline: 3px; }



/* ================================ مسطرة الجاهزية — العنصر المميّز للنظام ===

   مستعارة من علامات الغاطس على بدن السفينة: مجرى غائر يمتلئ بقدر نسبة
   التكامل، وتحته شريط تدريج تُرسم عليه علامات العتبات.

   العلامات كانت من قبل ألواحاً معتمة تُطبع فوق الامتلاء فتقطعه إلى كتل.
   الآن هي شرطات دقيقة أسفل المجرى: تُقرأ كتدريج آلة قياس، ولا تعبث بالامتلاء.

   ومواضعها ليست أرقاماً مكتوبة هنا، بل متغيّرات تُحقن من الإعدادات
   (‎--tick-crit / --tick-good / --tick-full‎) — فإن غيّر المدير سياسة
   القيادة تحرّكت العلامات معها.                                              */

.gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 156px;
}

.gauge__track {
  position: relative;
  flex: 1;
  height: 9px;
  background: var(--deck-3);
  border: var(--bw, 1px) solid var(--rule-2);
}

.gauge__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--g-pct, 0%);
  background: var(--g-color, var(--sea));
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}

/* تدريج محفور في قاع المجرى — العلامات عند العتبات المضبوطة في الإعدادات.
   يُرسم داخل المجرى لا تحته حتى لا يتدلّى خارج الخانة في الجداول الضيّقة،
   وبألوان شفّافة فوق الامتلاء بدل ألواح معتمة تقطعه. */
.gauge__track::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* علامة واحدة فقط: خط القرار الحرج، ممتدّة خارج المجرى لتُقرأ كعلامة
     مسطرة لا كقطعة من الامتلاء. أقلّ توقيع في المجموعة عمداً. */
  inset-block: -3px;
  inset-inline: 0;
  background: linear-gradient(to left, transparent calc(var(--tick-crit) - 1px),
      var(--accent) calc(var(--tick-crit) - 1px), var(--accent) var(--tick-crit),
      transparent var(--tick-crit));
  background-repeat: no-repeat;
}

.gauge__val {
  font-family: var(--f-mono);
  font-size: calc(12px * var(--f-scale, 1));
  font-weight: 600;
  min-width: 46px;
  text-align: end;
  color: var(--g-color, var(--foam));
  direction: ltr;
  unicode-bidi: isolate;
}

.gauge--lvl-ok   { --g-color: var(--fit); }
.gauge--lvl-good { --g-color: var(--fit-soft); }
.gauge--lvl-warn { --g-color: var(--maint); }
.gauge--lvl-bad  { --g-color: var(--out); }
/* ملاكٌ لم يُحدَّد: لا لونَ حكمٍ ولا امتلاء — المجرى وحده، والقيمة شَرطة.
   ولو أُعطي لوناً من ألوان الحكم لقُرئ حكماً، وهو غياب حكم. */
.gauge--lvl-none { --g-color: var(--line, #c9ccd1); }
.gauge--lvl-none .gauge__val { color: var(--muted, #6b7280); }

/* المسطرة داخل خانة مؤشّر أو خليّة جدول: ‎156‎ بكسلاً حدٌّ أدنى يصلح في سطرٍ
   مستقلّ، ولا يصلح في ذيل خانةٍ عرضها ‎149‎، ولا في عمودٍ من ثمانية. عمودان
   منها كانا يدفعان كشف الوحدات ستّةً وعشرين بكسلاً خارج غلافه عند 768،
   وكشف القطع تسعةً وخمسين عند 834. */
.stat__foot .gauge, .stat .gauge { min-width: 0; }
table.tbl .gauge { min-inline-size: 92px; }

/* نسخة كبيرة تُستخدم في رأس لوحة الوحدة */
.gauge--lg .gauge__track { height: 14px; }
.gauge--lg .gauge__val { font-size: calc(16px * var(--f-scale, 1)); min-width: 58px; }

/* مسطرة تقدّمٍ لا مسطرة موقف: تقيس ما أُنجز من عمل جارٍ (صفحات التعرّف
   الضوئي) لا نسبة تكاملٍ إلى ملاك. فلا معنى لعلامة القرار الحرج فيها —
   لا عتبة تُقارَن بها — وتركُها يوحي بحدٍّ ليس له وجود. */
.gauge--plain .gauge__track::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .gauge__fill { transition: none; }
}

/* =============================================================== المؤشرات */

/* خطوط الشبكة تخصّ الخانة نفسها لا جيرانها.

   كانت كل خانة تحمل حدّاً في جهة بدايتها وتُستثنى الأولى وحدها. وهذا يصحّ
   في صفٍّ واحد فقط: ‎auto-fit‎ يلفّ الخانات إلى سطر ثانٍ على الشاشات الضيّقة،
   وحدُّ الخانة لا يعرف أنّها صارت أوّل سطرها — فيبقى خطٌّ رأسيّ معلّقاً عند
   حافّة اللوحة، وتخلو الحدود بين سطرين من خطٍّ أفقيّ أصلاً.

   والحلّ حلقةٌ حول كل خانة تُرسم خارج صندوقها بمقدار بكسل، وفجوةٌ ببكسل
   واحد بينها وبين جارتها — فتتطابق الحلقتان في الفجوة نفسها فتُقرآن خطاً
   واحداً، وتُغلق الخانة على نفسها من جهاتها الأربع فتصحّ الشبكة ملتفّةً
   كانت أم في صفّ.

   ولا تُصبغ أرضية الحاوية بلون الخط: خمسُ خانات في أربعة أعمدة تترك ثلاث
   خانات فارغة في السطر الثاني، ولا أحد يرسم فيها شيئاً — فتخرج كتلةً
   رمادية مصمتة بعرض ثلاثة أرباع اللوحة. (قيست على الموقف الفني عند 768.) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck);
  margin-block-end: 18px;
}

.stat {
  padding: 15px 16px 14px;
  background: var(--deck);
  box-shadow: 0 0 0 1px var(--rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
  position: relative;
}

/* قضيب لوني رفيع أعلى الخانة يحمل نغمة المؤشر — يُقرأ الموقف قبل الرقم */
.stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: transparent;
}
.stat--fit::before   { background: var(--fit); }
.stat--maint::before { background: var(--maint); }
.stat--out::before   { background: var(--out); }
.stat--sea::before   { background: var(--sea); }
.stat--accent::before { background: var(--accent); }

.stat__label {
  font-size: calc(11px * var(--f-scale, 1));
  color: var(--haze);
  min-inline-size: 0;
  display: flex; align-items: center; gap: 6px;
}
.stat__label .ico { width: 13px; height: 13px; color: var(--dim); }
.stat__value {
  font-family: var(--f-mono);
  font-size: calc(32px * var(--f-scale, 1));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  /* الصندوق ينكمش إلى مقاس رقمه ويقف حيث يقف اسمه.

     ‎text-align: start‎ يُحسب على اتجاه العنصر نفسه، واتجاهه لاتيني ليُقرأ
     الرقم صحيحاً — فبدايتُه اليسار، أي الجهة المقابلة للاسم في صفحة عربية.
     وهو صندوق يتمدّد إلى عرض الخانة، فيقف الرقم في حافّةٍ واسمُه في الحافّة
     الأخرى: قيس بينهما 198 بكسلاً عند عرض 1920. و‎align-self‎ يُحسب على
     اتجاه الحاوية لا العنصر، فيصحّ في الاتجاهين. */
  align-self: flex-start;
}
.stat__unit { font-family: var(--f-body); font-size: calc(12px * var(--f-scale, 1)); color: var(--dim); font-weight: 400; }
/* سطر الذيل يحمل نسبةً وبياناً؛ في خانة بعرض 166 بكسل على الهاتف كان يفيض
   بضعة بكسلات فيُقصّ آخر حرف منه. */
.stat__foot { font-size: calc(11px * var(--f-scale, 1)); color: var(--dim); overflow-wrap: anywhere; }

.stat--fit   .stat__value { color: var(--fit); }
.stat--maint .stat__value { color: var(--maint); }
.stat--out   .stat__value { color: var(--out); }
.stat--sea   .stat__value { color: var(--sea); }
.stat--accent .stat__value { color: var(--accent); }

/* ================================================================ الشارات */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: calc(11px * var(--f-scale, 1));
  font-weight: 500;
  border: var(--bw, 1px) solid;
  white-space: nowrap;
}
.badge--neutral { color: var(--haze); border-color: var(--rule-2); background: var(--deck-2); }

/* ------------------------------------------------- وسمُ عمليةٍ في السجلّ

   الشارة لها إطارٌ وأرضية، فتُقرأ زرّاً يُنقر. وسجلّ العمليات كلّه أوسمة في
   عمود واحد، فيبدو صفّاً من الأزرار لا كشفَ ما جرى — والقارئ يبحث فيه عن
   «ماذا حدث» لا عن شيء يضغطه.

   فنقطةٌ ملوّنة ونصّ: اللون يفرّق بين الإنشاء والحذف والدخول كما كان، والشكل
   يقول إنّ هذا خبرٌ لا إجراء. */
.op {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(11.5px * var(--f-scale, 1));
  white-space: nowrap;
  color: var(--haze);
}
.op::before {
  content: '';
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.op--fit     { color: var(--fit); }
.op--out     { color: var(--out); }
.op--maint   { color: var(--maint); }
.op--sea     { color: var(--sea); }
.op--accent  { color: var(--accent); }
.op--neutral { color: var(--dim); }
.badge--fit     { color: var(--fit);   border-color: var(--fit);   background: var(--fit-bg); }
.badge--maint   { color: var(--maint); border-color: var(--maint); background: var(--maint-bg); }
.badge--out     { color: var(--out);   border-color: var(--out);   background: var(--out-bg); }
.badge--sea     { color: var(--sea);   border-color: var(--sea);   background: var(--sea-bg); }
.badge--accent   { color: var(--accent); border-color: var(--accent-dim); background: transparent; }

/* رمز معرّف: رقم بدن، رمز وحدة، رقم إحصائي — دائماً بالمونو النحاسي */
.tag-code {
  font-family: var(--f-mono);
  font-size: calc(11.5px * var(--f-scale, 1));
  font-weight: 500;
  color: var(--accent);
  border: var(--bw, 1px) solid var(--accent-dim);
  padding: 1px 6px;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;   /* «P-701» لا يُكسر عند الشرطة فيصير سطرين */
  display: inline-block;
}

/* ================================================================ الأزرار */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--btn-y, 7px) var(--btn-x, 14px);
  font-family: inherit;
  font-size: calc(12.5px * var(--f-scale, 1));
  font-weight: 500;
  border: var(--bw, 1px) solid var(--rule-2);
  background: var(--deck-2);
  color: var(--foam);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--deck-3); border-color: var(--accent-dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--deck);
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.btn--ghost { background: transparent; border-color: var(--rule); color: var(--haze); }
.btn--ghost:hover { color: var(--foam); border-color: var(--rule-2); background: var(--deck-2); }

.btn--danger { color: var(--out); border-color: var(--out); background: transparent; }
.btn--danger:hover { background: var(--out-bg); }

.btn--sm { padding: 4px 9px; font-size: calc(11.5px * var(--f-scale, 1)); }
.btn--icon { padding: 5px; width: 28px; height: 28px; }
.btn--block { width: 100%; min-inline-size: 0; white-space: normal; }

/* ------------------------------------------------- القائمة المنسدلة (درج)

   ‎<details>‎ في ظاهره زرّ: ‎<summary>‎ يحمل صنف ‎.btn‎ نفسه فلا يُفرَّق عن
   جيرانه في الصفّ، ويسقط عنه مثلّثُ المتصفّح لأنّ في الزرّ سهمَه.

   واللوحة موضوعةٌ لا مدفوعة: لو دفعت ما تحتها لَقفز الجدولُ كلّه عند كل
   فتحة. وحدُّها من ‎--accent-dim‎ كحدّ النوافذ — هي وأخواتها طبقةٌ فوق
   الشاشة، والحدّ هو ما يقول ذلك قبل الظلّ. */
.menu { position: relative; display: inline-block; }
.menu > summary { inline-size: 100%; list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu[open] > summary { background: var(--deck-3); border-color: var(--accent-dim); }
/* السهم يدور مع الدرج: هيئة الزرّ تقول إن كان مفتوحاً بلا نصٍّ يُقرأ */
.menu__caret { transition: transform .14s; }
.menu[open] .menu__caret { transform: rotate(180deg); }

.menu__pop {
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline-start: 0;
  z-index: 30;
  min-inline-size: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: var(--bw, 1px) solid var(--accent-dim);
  background: var(--deck);
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  font-size: calc(12.5px * var(--f-scale, 1));
  color: var(--foam);
  white-space: nowrap;
}
.menu__item:hover { background: var(--deck-2); color: var(--accent); }
.menu__item .ico { color: var(--dim); }
.menu__item:hover .ico { color: var(--accent); }


.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* وصفُّ الأزرار يحمل فصلَه عمّا قبله — ‎14‎ بكسلاً، كفاصل التنبيه وشريط الحفظ.

   كان بلا هامشٍ علويّ، وصندوقُ الملاحظة الذي يسبقه بلا هامشٍ سفليّ، فالتقى
   الحدّان على صفر: يلصق زرّا «إصدار الوثيقة» و«إلغاء» بقاع الصندوق حتى
   يُقرآ ذيلاً له لا إجراءً يليه. وموضعُه بناءُ الكتب — في أنواعها الستّة
   جميعاً، فالصفُّ هناك يتلو الملاحظة لا لوحةً.

   و‎:not(:first-child)‎ لأنّ الصفَّ قد يفتتح جسمَ لوحةٍ فيكفيه حشوُ أبيه.
   وما سبقه بهامشٍ سفليّ — كاللوحة — ينطبق الهامشان فيبقى الأوسع. */
.btn-row:not(:first-child) { margin-block-start: 14px; }

/* ================================================================ النماذج */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
}
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.field--wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* حقلٌ لا يخصّ النوع المختار في نافذة الحوار — display الصريح أعلاه يتغلّب
   على [hidden] الافتراضي، فيُنصّ على إخفائه. */
.field[hidden] { display: none; }

.field__label {
  font-size: calc(11.5px * var(--f-scale, 1));
  font-weight: 500;
  color: var(--haze);
  display: flex; align-items: center; gap: 5px;
}
.field__label .req { color: var(--out); }
.field__hint { font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); }
.field__error { font-size: calc(11px * var(--f-scale, 1)); color: var(--out); display: flex; align-items: center; gap: 5px; }

.input, .select, .textarea {
  width: 100%;
  padding: var(--ctrl-y, 7px) var(--ctrl-x, 10px);
  font-family: inherit;
  font-size: calc(13px * var(--f-scale, 1));
  /* ارتفاع صريح لا مُستنتَج من قياسات الخط.
     بدونه تحسب المتصفّحات ارتفاع <select> من مقاييس نصّ خياره المحدَّد،
     فيخرج أقصر من حقل الإدخال المجاور له بمقدار بكسلين — والاثنان يقفان
     جنباً إلى جنب في شريط الترشيح. ويزيد الأمر أنّ القياس يختلف بحسب
     أكان الخط قد حُمّل وقت بناء العنصر أم لا. سطرٌ صريح يُنهي الأمرين. */
  line-height: 1.45;
  color: var(--foam);
  /* background-color لا background: الاختصار يمسح بقيّة خصائص الخلفية،
     ومنها سهم <select> المرسوم بتدرّجين وموضعه. ولأنّ الانتقال كان على
     الاختصار أيضاً، كان السهم ينزلق إلى الزاوية العليا ثم يعود عند كل
     تحويم — حركة لا معنى لها ولّدها إعلانُ لونٍ لا أكثر. */
  background-color: var(--deck-2);
  border: var(--bw, 1px) solid var(--rule-2);
  transition: border-color .12s, background-color .12s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--rule-2); background-color: var(--deck-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--deck-3);
}
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--out); }

.input--num { font-family: var(--f-mono); text-align: center; direction: ltr; }
.input--sm { padding: 4px 7px; font-size: calc(12px * var(--f-scale, 1)); }

/* القائمة المصغّرة — أخت الحقل المصغّر، تُستعمل داخل خلايا الجداول حيث
   القائمة أداةُ صفٍّ لا حقلَ نموذج. */
.select--sm { padding: 4px 24px 4px 7px; font-size: calc(12px * var(--f-scale, 1)); }

/* حقل رقمي داخل خليّة جدول لا ينكمش تحت مقاس عدده.

   خانات الملاك ‎t-center‎ في خلايا ضيّقة، والخليّة تنكمش إلى محتواها فينكمش
   الحقل معها — فيُقصّ العدد ذو الخمس منازل، ويُدفع مؤشّر الكتابة خارج
   الحقل. والقيمة نفسها هي بيت القصيد من الشاشة. */
table.tbl .input--num { min-inline-size: 6.5ch; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--haze) 50%), linear-gradient(135deg, var(--haze) 50%, transparent 50%);
  background-position: 12px calc(50% - 2px), 17px calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* السهم مرسوم على الحافّة اليسرى (background-position مقياسٌ فيزيائي لا
     منطقي)، واليسار في نظامٍ من اليمين إلى اليسار هو جهة النهاية. فكان
     الحشو يُفرَض في جهة البداية — أي على الجهة المقابلة للسهم — فيمتدّ
     النصّ حتى يلامسه. */
  padding-inline-end: 30px;
}

.textarea { min-height: 76px; resize: vertical; line-height: 1.6; }

/* ------------------------------------------- المنتقي: حقلٌ واحد يُكتب فيه فينسدل

   القوائم الطويلة — الأفراد قبل غيرهم — يحلّ محلّها app.js حقلَ كتابةٍ تنسدل
   تحته نتائجُه مرشَّحةً وقتَ الكتابة. وكان فوقها حقلُ بحثٍ منفصل، فكانت العينُ
   تنتقل بين أداتين لعملٍ واحد ولا ترى أثرَ ما كتبت حتى تفتح ما تحته.

   والقائمة الأصلية باقية تحت الحقل لا تُرى: هي ما يحمل الاسم والقيمة وهي ما
   يُرسَل. وتُخفى بالشفافية لا بـ‎display: none‎ — المتصفّح يرفض أن يصوّب رسالة
   «هذا الحقل مطلوب» على عنصرٍ لا وجود له في التخطيط، فيبتلع الرسالة ويقف
   الإرسال بلا بيان. */

.combo { position: relative; min-inline-size: 0; }

.combo__native {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
}

/* السهم كسهم القائمة نفسِه: ما حلّ محلّها يُقرأ قائمةً لا حقلَ نصّ */
.combo__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--haze) 50%), linear-gradient(135deg, var(--haze) 50%, transparent 50%);
  background-position: 12px calc(50% - 2px), 17px calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 30px;
  text-overflow: ellipsis;
}
.combo.is-open .combo__input { border-color: var(--accent); background-color: var(--deck-3); }

/* اللوحة معلَّقة في النافذة (‎fixed‎) لا في الحقل: جسمُ نافذة الحوار وشريطُ
   الترشيح كلاهما يقصّ ما فاض عنه، فلوحةٌ مطلقةٌ داخلهما تُقصّ عند الحافّة.
   وموضعُها يحسبه app.js ويعيد حسابه مع كل تمرير. */
.combo__pop {
  position: fixed;
  z-index: 60;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: var(--bw, 1px) solid var(--accent-dim);
  background: var(--deck);
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .6);
}
.combo__pop[hidden] { display: none; }

.combo__opt {
  padding: 7px 10px;
  font-size: calc(12.5px * var(--f-scale, 1));
  line-height: 1.5;
  color: var(--foam);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo__opt.is-on { font-weight: 500; }
/* المعلَّم واحدٌ في اللوحة سواءٌ بلغه السهم أم المؤشّر: لونٌ واحد لحالٍ واحدة،
   وإلّا ظهر معلَّمان فلم يُعرف أيّهما يأخذه مفتاح الإدخال. */
.combo__opt.is-active { background: var(--deck-2); color: var(--accent); }

.combo__none { padding: 9px 10px; font-size: calc(12px * var(--f-scale, 1)); color: var(--dim); }

/* في الشريط يقف المنتقي حيث كانت قائمتُه، بعرضها لا بعرض الحقول */
.toolbar .combo { flex: none; max-inline-size: 220px; }


input[type="date"] { font-family: var(--f-mono); direction: ltr; text-align: start; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

.check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: calc(12.5px * var(--f-scale, 1)); user-select: none; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: none; }

.switch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck-2);
}
.switch-row__text { flex: 1; min-width: 0; }
.switch-row__title { font-size: calc(12.5px * var(--f-scale, 1)); font-weight: 500; }
.switch-row__hint { font-size: calc(11px * var(--f-scale, 1)); color: var(--dim); }

/* ================================================================ التبويبات */

.tabs {
  display: flex;
  /* لا overflow هنا: تحديده على محور واحد يقلب المحور الآخر إلى auto تلقائياً
     (قاعدة CSS: visible مع غير-visible تصير auto)، فيصير الشريط وعاء تمرير
     رأسياً. وتبويبة تتجاوز وعاءها بـ 1px من هامشها السالب — ذلك القدر وحده
     كان يكفي لإظهار شريط تمرير رأسي على الشريط، ويقصّ حلقة التركيز أيضاً.
     التفاف السطر يغني عن التمرير: التبويبات قليلة وتنزل سطراً عند الضيق. */
  flex-wrap: wrap;
  gap: 0;
  border-block-end: 1px solid var(--rule);
  margin-block-end: 18px;
}
.tab {
  padding: 9px 15px;
  font-size: calc(12.5px * var(--f-scale, 1));
  font-weight: 500;
  color: var(--haze);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
  background: none; border-inline: 0; border-block-start: 0;
  font-family: inherit;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--foam); }
.tab.is-active { color: var(--accent); border-block-end-color: var(--accent); }
.tab.is-active .ico { color: var(--accent); }
.tab .ico { width: 15px; height: 15px; }
.tab__count { font-family: var(--f-mono); font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ترويسة قابلة للترتيب — المثلّث يظهر باهتاً عند التمرير فيُعرف أنّ العمود
   يُنقَر، ويصمت في الأعمدة التي لا تُرتَّب (الإجراءات، التسلسل). */
table.tbl th[aria-sort] { cursor: pointer; user-select: none; }

/* الترتيب من الخادم يجعل الترويسة رابطاً لا خليّة تُنقر: الرابط يُفتح في
   تبويب، ويُنسخ، ويُعلنه قارئ الشاشة وجهةً — وهذا صحيح، فالترتيب هنا يغيّر
   العنوان فعلاً.

   ويبقى الرابط سطريّاً (inline) عمداً. جُعل كتليّاً مرّةً ليملأ الخليّة
   فيتّسع موضع النقر، فدفع علامةَ الترتيب — وهي شقيقته في الخليّة — إلى سطر
   تحته، فصار كل عمود سطرين وارتفع صفّ الترويسة كلّه بقدر أطول خليّة فيه.
   موضع نقرٍ أوسع لا يساوي ترويسةً بضعف ارتفاعها. */
table.tbl th > a.th-sort {
  color: inherit;
  text-decoration: none;
}
table.tbl th > a.th-sort:hover { color: var(--accent); }
table.tbl th[aria-sort]:hover { color: var(--accent); }

table.tbl th[aria-sort]::after {
  content: '';
  display: inline-block;
  inline-size: 0;
  block-size: 0;
  margin-inline-start: 6px;
  vertical-align: middle;
  border-inline: 3px solid transparent;
  border-block-end: 4px solid currentColor;
  opacity: 0;
  transition: opacity .12s;
}
table.tbl th[aria-sort]:hover::after   { opacity: .4; }
table.tbl th[aria-sort='ascending'],
table.tbl th[aria-sort='descending']   { color: var(--accent); }
table.tbl th[aria-sort='ascending']::after  { opacity: 1; }
table.tbl th[aria-sort='descending']::after { opacity: 1; rotate: 180deg; }

/* =============================================================== التنبيهات */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: var(--bw, 1px) solid;
  border-inline-start-width: 3px;
  margin-block-end: 14px;
  font-size: calc(12.5px * var(--f-scale, 1));
}
.alert .ico { flex: none; margin-block-start: 1px; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: 600; margin-block-end: 2px; }
.alert--info    { color: var(--sea);   border-color: var(--sea);   background: var(--sea-bg); }
.alert--success { color: var(--fit);   border-color: var(--fit);   background: var(--fit-bg); }
.alert--warning { color: var(--maint); border-color: var(--maint); background: var(--maint-bg); }
.alert--danger  { color: var(--out);   border-color: var(--out);   background: var(--out-bg); }

.alert__close {
  background: none; border: 0; color: inherit; cursor: pointer;
  opacity: .6; padding: 0; display: flex;
}
.alert__close:hover { opacity: 1; }

/* الرسائل الطائرة */
.flashes {
  position: fixed;
  inset-block-start: calc(var(--shell-head) + 12px);
  inset-inline-start: 18px;
  z-index: 60;
  width: min(380px, calc(100vw - 36px));
  display: flex; flex-direction: column; gap: 8px;
}
.flashes .alert {
  margin: 0;
  background: var(--deck);
  animation: flash-in .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes flash-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* في البوابة لا شريطَ رأسٍ تُعلَّق تحته ولا منطقةَ عملٍ تطفو فوقها.

   شاشات الدخول والتنصيب تستعمل هيكلاً بلا ترويسة، فكان موضعُ الرسالة
   محسوباً على ارتفاع ترويسةٍ غير موجودة: تقف فوق بطاقة الدخول تغطّي
   الشعار وتتجاوز حافّتيها. والقالب يضعها داخل البطاقة أصلاً، فتُترك
   حيث وُضعت. */
.gate .flashes {
  position: static;
  inset: auto;
  width: auto;
  margin-block-end: 14px;
}
.gate .flashes .alert { animation: none; }

/* ============================================================ شجرة الوحدات */

.tree { font-size: calc(13px * var(--f-scale, 1)); }
.tree__node { border-block-end: 1px solid var(--rule); }
.tree__node:last-child { border-block-end: 0; }

.tree__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  transition: background-color .12s;
}
.tree__row:hover { background: var(--deck-2); }
.tree__row[data-depth="1"] { padding-inline-start: 34px; }
.tree__row[data-depth="2"] { padding-inline-start: 58px; }
.tree__row[data-depth="3"] { padding-inline-start: 82px; }

/* خط الانتماء الهرمي */
.tree__row[data-depth]:not([data-depth="0"])::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--rule-2);
  margin-inline-start: -18px;
  margin-inline-end: 6px;
  flex: none;
}

.tree__name { font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tree__name:hover { color: var(--accent); }
.tree__meta { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

/* ------------------------------- الطيّ في شجرة الجدول (شاشة الوحدات)

   الصفّ المطويّ لا يُحذف من الجدول: يُخفى بصنفٍ عليه. وللبحث أن يتخطّى
   الطيّ كلَّه بصنفٍ واحد على الجدول — ‎:not(.is-seeking)‎ تقول الحالتين في
   قاعدة واحدة، ولا تكتب display على الصفّ أثناء البحث فلا تنازع هيئةَ
   البطاقات على الهاتف.

   وما طُوي لا يُطبع: الورقة تحمل ما على الشاشة، ومن أراد الهيكل كلَّه
   فتحه قبل الطباعة بزرّ «فتح الكل». */

.tbl:not(.is-seeking) tr.is-fold { display: none; }

.tree-fold {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--dim);
  background: none;
  border: var(--bw, 1px) solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: color .12s, background-color .12s, border-color .12s;
}
.tree-fold:hover { color: var(--accent); border-color: var(--rule-2); background: var(--deck-2); }
.tree-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tree-fold .ico { transition: transform .14s; }

/* السهم يشير إلى ما سيقع: مفتوحٌ فإلى أسفل حيث التابعات، ومطويٌّ فإلى
   جهة القراءة — يساراً في العربية ويميناً في الإنكليزية. */
.tree-fold[aria-expanded="false"] .ico { transform: rotate(90deg); }
:root[dir="ltr"] .tree-fold[aria-expanded="false"] .ico { transform: rotate(-90deg); }

/* صفٌّ بلا تابعات: فراغٌ بمقاس الزرّ يحفظ محاذاة الأسماء */
.tree-fold--leaf { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .tree-fold, .tree-fold .ico { transition: none; }
}

/* ============================================================== الرسوم البيانية */

.chart { width: 100%; display: block; }
.chart text { font-family: var(--f-body); fill: var(--haze); }
.chart .chart__num { font-family: var(--f-mono); }

.legend { display: flex; flex-direction: column; gap: 7px; }
.legend__item {
  display: flex; align-items: center; gap: 9px; font-size: calc(12px * var(--f-scale, 1));
  /* الاسم يبتلع كل الفائض فينفصل العدد عنه بعرض اللوحة: قيس 551 بكسلاً
     بين «أقل من 30 سنة» وعددها على لوحة القيادة عند 960. والقيد على السطر
     لا على الكتلة، فمفاتيح الرسوم الأفقية تبقى كما هي. */
  max-inline-size: 34ch;
}
.legend__swatch { width: 10px; height: 10px; flex: none; border: var(--bw, 1px) solid rgba(0,0,0,.25); }
.legend__label { flex: 1; min-width: 0; }
.legend__value { font-family: var(--f-mono); font-weight: 500; }
.legend__pct { font-family: var(--f-mono); font-size: calc(11px * var(--f-scale, 1)); color: var(--dim); min-width: 42px; text-align: end; }

/* ================================================================ التخطيط */

.cols { display: grid; gap: 18px; }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cols--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* فاصلُ الشبكة عمّا بعدها — ‎18‎ بكسلاً، كفاصل اللوحة والمؤشّرات سواء.

   كانت الشبكةُ بلا هامشٍ سفليّ، واللوحةُ التي تليها لا هامشَ لها من أعلى
   (‎.frame‎ يحمل ‎margin-block-end‎ وحده)، فالتقى الحدّان على صفر. وأظهرُ
   ما يكون ذلك في أبواب الأقسام — الإجازات والتنقلات والتكليف — حيث تلصق
   بطاقاتُ الخيار بلوحة «آخر ما سُجّل» حتى تُقرأ ترويسةً لها لا خياراتٍ
   قائمةً بذاتها، ومثلُه كلُّ شبكةٍ تليها لوحة.

   و‎.main >‎ قصداً لا توسّعاً: الشبكةُ داخل جسم اللوحة أو داخل لسانٍ لها
   حشوُ أبيها فلا يُزاد عليه. والهامشُ السطريُّ حيث كُتب يغلب هذه القاعدة،
   فيبقى ما رُقِّع من قبلُ على ما هو عليه. */
.main > .cols { margin-block-end: 18px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck);
  margin-block-end: 16px;
}
.toolbar__search { flex: 1; min-width: 180px; position: relative; }

/* زرّ إلغاء الترشيح في نهاية الشريط — في جهة النهاية لا البداية.

   هو إجراءٌ يُنهي لا مرشِّحٌ يُضاف، فموضعه حيث ينتهي الصفّ لا حيث يبدأ.
   وكان قبل حقل البحث فبدا محشوراً بين حافّة اللوحة والحقل.

   ويحمل نصّه كاملاً: أيقونةٌ وحدها في صفٍّ من ستّ قوائم لا يُهتدى إليها،
   وقد وسع الشريطَ نصُّها بعد أن حُدّت عروض القوائم. */
.toolbar__clear {
  margin-inline-start: auto;      /* يُدفع إلى جهة النهاية مهما ضاق الصفّ */
  flex: none;
  color: var(--out);
  border-color: color-mix(in srgb, var(--out) 35%, transparent);
}
.toolbar__clear:hover {
  background: color-mix(in srgb, var(--out) 12%, transparent);
  border-color: var(--out);
}

/* التسمية وحقلها عنصرٌ واحد.

   كانتا ابنين منفصلين للشريط، فيقع الالتفاف بينهما: «إلى» تنزل إلى جانب
   حقل «من» فتُقرأ تسميةً له، ويقف حقل «إلى» في سطرٍ تالٍ بلا اسم — ومدى
   التاريخ لا يُقرأ. */
.toolbar__pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-inline-size: 0;
}
.toolbar__pair .input, .toolbar__pair .select { min-inline-size: 0; }

/* قوائم الشريط لا تتّسع بقدر أطول خيار فيها.

   كانت كلٌّ منها تأخذ عرض أطول نصّ تحمله — «مقر قيادة القوة البحرية» وحدها
   246 بكسلاً — فتطلب القوائمُ الستّ وحقلُ البحث 1227 بكسلاً في شريط عرضه
   1106، فينكسر إلى سطرين قبل أن يُرشَّح شيء. والشريط ملتصق فوق الجدول، وكل
   سطر فيه ينزل بالجدول كلّه.

   والمقصوص هو المعروض لا المتاح: القائمة تُفتح بأسمائها كاملة. */
.toolbar .select { max-width: 150px; text-overflow: ellipsis; }
/* 220 لا 260: مع زرّ الإلغاء يبلغ المطلوبُ المتاحَ بالضبط عند 260، فأيّ
   اسم وحدة أطول أو نافذة أضيق تكسر الشريط إلى سطرين. */
.toolbar .toolbar__search { max-width: 220px; }

/* شريط الترشيح داخل اللوحة: شريطٌ لا بطاقة.
   خارج اللوحة كان يحمل إطاره وظلّه وهامشه فيُقرأ عنصراً قائماً بذاته. وحين
   صار جزءاً من اللوحة التي يُرشِّحها لم يعد يحتاج شيئاً من ذلك: يفصله عن
   الترويسة فوقه والجدول تحته خطّان، ويأخذ أرضية أفتح ليُقرأ أدواتٍ لا بيانات. */
/* شريط الترشيح يلتصق فوق الجدول الذي يُرشِّحه.

   الترشيح يُطلب غالباً بعد النظر في الصفوف لا قبله — ومن يقرأ الصفّ
   المئتين ليضيّق الكشف كان عليه أن يصعد إلى أعلى الصفحة ثمّ يعود. فيبقى
   الشريط في موضعه، وتلتصق تحته ترويسةُ الأعمدة، فتُقرأ الطبقتان معاً:
   بم يُرشَّح، وما اسم كل عمود.

   وارتفاعه يقيسه tables.js ويحقنه في ‎--bar-h‎، لأنّه يلتفّ إلى سطرين على
   الشاشات الضيّقة — وترويسة الأعمدة تحتاج أن تعرف كم تنزل. */
.frame > .toolbar {
  position: sticky;
  inset-block-start: calc(var(--pad-block, 22px) * -1);
  z-index: 4;
  border-inline: 0;
  border-block-start: 0;
  margin-block-end: 0;
  /* سطح البطاقة لا الرمادي: الحقول نفسها ‎--deck-2‎، فلو كان الشريط بلونها
     لذابت فيه — وهو ما جعل الترشيح عسير الرؤية. */
  background: var(--deck);
  border-block-end: 1px solid var(--rule);
}
.frame > .frame__head + .toolbar { border-block-start: 1px solid var(--rule); }
.toolbar__search .ico {
  position: absolute;
  inset-inline-start: 9px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  pointer-events: none;
}
.toolbar__search .input { padding-inline-start: 32px; }

/* شريط التصفّح: الأرقام في جهة البداية والبيان في جهة النهاية.
   كان في الوسط، فبدا زينةً تحت الجدول لا أداةً تُستعمل — والوسط في شريط
   عريض يبعد الأرقام عن حافّة العين التي تنتهي عندها قراءة الصفّ الأخير. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border-block-start: 1px solid var(--rule);
}

/* الأرقام تلتفّ ولا تُدفع خارج الشريط: كشفٌ بواحد وعشرين صفحة يطلب 330
   بكسلاً، والشريط على هاتف بعرض 360 يملك 304. */
.pager__pages { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-inline-size: 0; }

.pager__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;      /* يلزم جهة النهاية ولو غابت الأرقام */
  font-size: calc(11.5px * var(--f-scale, 1));
  color: var(--dim);
}
.pager__range .mono { color: var(--foam); }
.pager__size { display: flex; align-items: center; gap: 6px; }
.pager__size label { font-size: calc(11.5px * var(--f-scale, 1)); }

/* قائمة مصغَّرة — تجلس في شريط التصفّح دون أن تنافس أرقامه */
.select--xs {
  width: auto;
  min-width: 62px;
  height: 26px;
  padding-block: 0;
  padding-inline: 8px 26px;
  font-size: calc(11.5px * var(--f-scale, 1));
  font-family: var(--f-mono);
  /* طبقتان في background-image، فقيمةٌ واحدة تضع المثلّثين في موضع واحد */
  background-position: 9px calc(50% - 2px), 14px calc(50% - 2px);
}
.pager__pages a, .pager__pages span {
  min-width: 30px; height: 30px;
  display: grid; place-items: center;
  padding-inline: 8px;
  font-family: var(--f-mono);
  font-size: calc(12px * var(--f-scale, 1));
  border: var(--bw, 1px) solid var(--rule);
  color: var(--haze);
}
.pager__pages a:hover { border-color: var(--accent-dim); color: var(--accent); }
.pager__pages .is-current { background: var(--accent); border-color: var(--accent); color: var(--deck); font-weight: 600; }
.pager__pages .is-disabled { opacity: .35; }



.muted { color: var(--dim); }
.small { font-size: calc(11.5px * var(--f-scale, 1)); }
.nowrap { white-space: nowrap; }
.text-fit { color: var(--fit); }
.text-maint { color: var(--maint); }
.text-out { color: var(--out); }
.text-accent { color: var(--accent); }
.mt-0 { margin-block-start: 0; }
.mb-0 { margin-block-end: 0; }

/* =========================================================== بوابة الدخول

   خلفية البوابة مخطّط ملاحي لمنطقة عمل القوة البحرية في شمالي الخليج:
   شبكة إحداثيات، وخطوط أعماق، وأسبار، ووردة بوصلة، وخط ساحل شطّ العرب
   ورأس الفاو. يُرسم على لوحة canvas بخطوط شعرية بلون الحبر نفسه — فلا
   يخرج عن لغة «الفضة» ولا يحتاج أي ملف خارجي.

   البوابة هي الشاشة الوحيدة التي ليست أداة عمل، فتحتمل هوية لا تحتملها
   شاشات التشغيل. وما دون ذلك يبقى الانضباط: لا لون، ولا حركة إلا مسحة
   رادار واحدة بطيئة تتوقف إن طلب النظام تقليل الحركة.                    */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* المخطّط نفسه */
.gate__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: -2;
  /* يخفت المخطّط نحو منتصف الشاشة حتى تبقى البطاقة هي البؤرة */
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 46%,
                        transparent 0%, rgba(0,0,0,.55) 46%, #000 78%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 46%,
                transparent 0%, rgba(0,0,0,.55) 46%, #000 78%);
}

/* مسحة الرادار — تدور حول مركز وردة البوصلة نفسه */
.gate__sweep {
  position: absolute;
  left: 74%;
  top: 34%;
  width: min(1180px, 118vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent) 11%, transparent) 0deg,
    color-mix(in srgb, var(--accent) 4%, transparent) 22deg,
    transparent 52deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 58%, transparent 76%);
  mask-image: radial-gradient(circle, #000 0%, #000 58%, transparent 76%);
  animation: gate-sweep 28s linear infinite;
  will-change: transform;
}
@keyframes gate-sweep { to { rotate: 360deg; } }

/* البطاقة ترتفع فوق المخطّط بحلقة من لون الأرضية تفصلها عنه */
.gate__card {
  position: relative;
  z-index: 1;
  width: min(438px, 100%);
  /* زرّ الدخول ‎btn--block‎ ونصّه ‎nowrap‎، فكان يفرض على البطاقة عرضاً أدنى
     يتجاوز الشاشة دون 345 بكسلاً فيُقصّ إطارها. */
  min-inline-size: 0;
  background: var(--deck);
  border: var(--bw, 1px) solid var(--accent);
  box-shadow:
    inset 0 0 0 4px var(--deck),
    inset 0 0 0 5px var(--rule),
    0 0 0 10px color-mix(in srgb, var(--ink) 72%, transparent);
  padding: 34px 32px 28px;
}

.gate__crest { display: flex; justify-content: center; margin-block-end: 16px; }
.gate__org   { text-align: center; font-size: calc(11.5px * var(--f-scale, 1)); color: var(--dim); }
.gate__title {
  font-family: var(--f-disp);
  font-size: calc(19px * var(--f-scale, 1));
  font-weight: 700;
  text-align: center;
  margin-block: 6px 4px;
  line-height: 1.4;
}
.gate__sub { text-align: center; font-size: calc(12px * var(--f-scale, 1)); color: var(--haze); margin-block-end: 24px; }
.gate__sub--code {
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--f-scale, 1));
  letter-spacing: .16em;
  color: var(--accent-dim);
}
.gate__rule { height: 1px; background: var(--rule-2); margin-block: 20px; }
.gate__foot { text-align: center; font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); margin-block-start: 20px; line-height: 1.8; }
.gate .field { margin-block-end: 14px; }

/* شريط توقيع المخطّط أسفل الشاشة — كتذييل الخارطة الورقية */
.gate__chartnote {
  position: absolute;
  inset-inline-start: 20px;
  inset-block-end: 16px;
  z-index: 0;
  font-family: var(--f-mono);
  font-size: calc(9.5px * var(--f-scale, 1));
  color: var(--dim);
  opacity: .75;
  direction: ltr;
  unicode-bidi: isolate;
  pointer-events: none;
}

@media screen and (max-width: 620px) {
  .gate__sweep { display: none; }
  .gate__chartnote { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gate__sweep { animation: none; opacity: .5; }
}

@media print {
  .gate__chart, .gate__sweep, .gate__chartnote { display: none !important; }
}

/* مفتاح الاسترداد */
.recovery-key {
  font-family: var(--f-mono);
  font-size: calc(17px * var(--f-scale, 1));
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  background: var(--ink);
  border: 1px dashed var(--accent-dim);
  padding: 16px;
  text-align: center;
  direction: ltr;
  /* الكسر عند الشرطات لا في وسط المجموعة: ‎break-all‎ كان يبدأ السطر بشرطة
     ويُنهي الذي قبله بحرفٍ يتيم، ومفتاحٌ يُنسخ مرّةً واحدة لا يحتمل لبساً. */
  overflow-wrap: break-word;
  line-height: 1.8;
  user-select: all;
}

/* ========================================================== نوافذ الحوار */

dialog {
  padding: 0;
  border: var(--bw, 1px) solid var(--accent-dim);
  background: var(--deck);
  color: var(--foam);
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  box-shadow: inset 0 0 0 3px var(--deck), inset 0 0 0 4px var(--rule);
}
dialog::backdrop { background: rgba(3, 10, 18, .74); }

.dlg__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-block-end: 1px solid var(--accent-dim);
}
.dlg__title {
  font-family: var(--f-disp);
  font-size: calc(14px * var(--f-scale, 1)); font-weight: 700;
  color: var(--accent);
  display: flex; align-items: center; gap: 9px;
}
.dlg__close {
  margin-inline-start: auto;
  background: none; border: 0; color: var(--haze); cursor: pointer;
  display: flex; padding: 4px;
}
.dlg__close:hover { color: var(--out); }

/* البدن يأخذ ما بقي من ارتفاع الحوار لا رقماً مقدَّراً.

   كان ‎calc(100vh - 210px)‎ يحجز مئتين وعشرة بكسلات لترويسةٍ وذيلٍ مجموعهما
   مئة وتسعة، فيخسر النموذج ربع مساحته — وعلى شاشةٍ مستلقية قصيرة يخسر
   أكثر. والحوار عمودٌ مرن، فالبدن يقيس نفسه. */
dialog { display: flex; flex-direction: column; }
dialog:not([open]) { display: none; }
.dlg__head, .dlg__foot { flex: none; }
.dlg__body { padding: 16px; overflow-y: auto; flex: 1 1 auto; min-block-size: 0; }
.dlg__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  border-block-start: 1px solid var(--rule);
  background: var(--deck-2);
}
.dlg__foot .btn-spacer { margin-inline-start: auto; }

/* ====================================================== أدوات مساعدة */

.row-actions { display: flex; gap: 5px; align-items: center; justify-content: flex-end; }
.row-actions form { display: inline-flex; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; font-size: calc(12.5px * var(--f-scale, 1)); align-items: baseline; }
.kv dt { color: var(--haze); }
.kv dd { margin: 0; font-weight: 500; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.avatar-lg {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  background: var(--deck-2);
  border: var(--bw, 1px) solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--f-disp); font-size: calc(26px * var(--f-scale, 1)); font-weight: 700;
  flex: none;
  overflow: hidden;
}
/* الوجهُ يملأ المربّع ويُقتصّ من أطرافه: صورةٌ تُحشر في مربّعٍ بنسبتها
   الأصلية تترك فراغين على جانبيها، ورأسٌ صغيرٌ في وسط الفراغ لا يُعرَف
   صاحبه في ترويسةٍ ارتفاعها ٧٢ نقطة. */
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== الصورة الشخصية في لوح سجلّ الفرد ===== */
.photo-card { display: grid; gap: 9px; justify-items: center; text-align: center; }
/* ٣:٤ نسبةُ صورة الهوية، وهي التي تُطبع في الإضبارات الورقية */
.photo-card__img {
  width: 100%; max-width: 188px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck-2);
}
.photo-card__empty {
  width: 100%; max-width: 188px;
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  border: 1px dashed var(--rule-2);
  background: var(--deck-2);
  color: var(--dim);
}
.photo-card__empty .ico { width: 44px; height: 44px; }
/* وجهُ الحساب مربّعٌ لا ٣:٤: هو بعينه ما يُعرض في الشريط مربّعاً مقتصّاً من
   أطرافه، والمعاينةُ تُري الرافعَ ما سيراه لا قَصّةً أخرى منه. */
.photo-card--face .photo-card__img,
.photo-card--face .photo-card__empty { aspect-ratio: 1 / 1; max-width: 150px; }
/* حقلُ الملف ثم زرُّ الحفظ في سطرٍ واحد ما اتّسع، وسطرين إن ضاق العمود.
   والحقلُ يُترك أصليّاً كما في شاشة المستمسكات: زرُّ المتصفّح يقول اسمَ
   الملف المختار بعد اختياره، وبديلُه المزخرف يُخفي ذلك فلا يدري الرافعُ
   أوقع اختيارُه أم لا. */
.photo-card__form { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.photo-card__file { max-width: 100%; }
.photo-card__hint { margin: 0; line-height: 1.7; }

.note-box {
  padding: 11px 13px;
  border: var(--bw, 1px) solid var(--rule);
  border-inline-start: 3px solid var(--accent-dim);
  background: var(--deck-2);
  font-size: calc(12.5px * var(--f-scale, 1));
  line-height: 1.7;
}

/* شريط تصفية أفقي */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { min-width: 150px; }
.filters .field--sm { min-width: 118px; }

/* حجاب الدرج الجانبي — لا وجود له إلا حيث يصير الشريط درجاً */
.rail-scrim { display: none; }

/* عناصر الطباعة مخفيّة على الشاشة */
.print-only { display: none; }
.psheet, .psheet__class, .pfoot, .psign { display: none; }

/* =============================================================== الاستجابة

   كلّها ‎screen‎ لا ‎all‎ — وهذا شرطٌ لا زينة.

   استعلامُ الوسائط يقيس على صندوق الصفحة عند الطباعة كما يقيس على النافذة
   على الشاشة. وصندوق ورقة A4 عمودية بهوامش ‎14mm/12mm‎ يساوي ‎186mm‎ — أي
   ‎703‎ بكسلاً. فكلّ عتبة هنا فوق ذلك تنطبق على الورق: تُعاد بناء ترويسة
   الشاشة على الورقة، فيُرسم خطٌّ رماديّ وتوقيعٌ نحاسيّ بعرض 72 بكسلاً فوق
   خطّ الوثيقة الرسمي — خطّان في وثيقة تُوقَّع وتُؤرشَف بدل خطّ واحد.
   (قيس بتوليد PDF فعلي: أصغر علامة تنطبق هي ‎704‎، ولا تنطبق ‎703‎.)

   وهيئةُ الشاشة الضيّقة لا تخصّ الورق أصلاً مهما ضاق قياسه: الورقة لا
   تُمرَّر ولا تُلمس، فلا بطاقاتٍ فيها ولا ألسنةً تنزلق ولا أزراراً تحت
   خطّ العنوان.

   النظام يُدار من شاشة مكتب في غرفة العمليات، ويُقرأ من هاتف في الممرّ.
   والفرق بينهما ليس فرقَ عرضٍ يُطوى بالتفاف الأعمدة: ما يصلح لوحةً على
   جدار — شبكةُ أعمدةٍ تُقارَن ببعضها — لا يصلح في كفّ. لذلك تتدرّج الشاشة
   على أربع مراتب لا على واحدة:

     ‎1280‎ ← الأعمدة الثلاثة تصير عمودين: المنطقة بعد الشريط الجانبي 974
             بكسلاً، وثلث ذلك ‎‎324‎‎ — أضيق من أن يحمل لوحةً وجدولها.
     ‎960‎  ← الشريط الجانبي يصير درجاً، والرأس يتخفّف، والحشو ينكمش.
     ‎820‎  ← الألسنة تصير شريطاً يُمرَّر بدل أن تنكسر إلى ثلاثة أسطر.
     ‎720‎  ← ترويسة الشاشة تُعاد بناؤها: الخطّ لعنوانها، والأزرار تحته.
     ‎620‎  ← كشوف الصفوف تصير بطاقات (‎tbl--stack‎ أعلاه).
     ‎430‎  ← عمودٌ واحد في كل شيء.                                        */

@media screen and (max-width: 1280px) {
  /* والأربعُ تنزل إلى اثنتين لا إلى ثلاث: بطاقاتُ باب القسم صارت أربعاً منذ
     دخلت فئةُ الطلاب، وثلاثةُ أعمدةٍ تترك رابعةً يتيمةً في سطرها. فتُقرأ
     ‎2×2‎، وربعُ ‎974‎ بكسلاً — ‎222‎ — أضيقُ من سطر وصفِ البطاقة أصلاً. */
  .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 1180px) {
  .cols--2, .cols--2-1, .cols--1-2 { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 960px) {
  :root {
    --pad-block: 18px;
    --pad-inline: 15px;
    --pad-end: 40px;
  }

  .shell { grid-template-columns: 1fr; }
  /* الدرج يلتصق بحافة البداية (اليمين في العربية) ويخرج منها عند الإغلاق.
     استخدام inset-inline-end كان يضعه على اليسار فيدفعه translateX داخل الشاشة. */
  .rail {
    position: fixed;
    inset-block-start: var(--shell-head);
    inset-inline-start: 0;
    block-size: calc(100dvh - var(--shell-head));
    /* لا يبلغ حافّة الشاشة المقابلة: بقيّةٌ من الصفحة تبقى مرئية فيُعرف
       أنّ الدرج طبقةٌ فوقها لا شاشةٌ حلّت محلّها. */
    width: min(var(--shell-rail), calc(100vw - 52px));
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 40;
    border-inline-end: 1px solid var(--rule-2);
  }
  .rail.is-open { transform: none; }
  /* في الاتجاه من اليسار لليمين يكون الإخفاء إلى الجهة المقابلة */
  :root[dir="ltr"] .rail { transform: translateX(-100%); }
  :root[dir="ltr"] .rail.is-open { transform: none; }

  /* حجابٌ تحت الدرج. النقر خارجه يغلقه منذ البداية، لكن بلا أثرٍ مرئيّ
     كان الدرج يبدو لوحاً معلّقاً في الصفحة لا طبقةً فوقها — ولا يُعرف أنّ
     ما تحته لا يُنقر. */
  .rail-scrim {
    position: fixed;
    inset: var(--shell-head) 0 0;
    z-index: 39;
    background: color-mix(in srgb, var(--foam) 42%, transparent);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
  }
  .rail.is-open ~ .rail-scrim { opacity: 1; visibility: visible; }

  /* شريط الرأس يتخفّف: كتلةُ الاسم كانت بعرض الشريط الجانبي كاملاً (258)
     لتحاذي حافّته — ولا شريطَ جانبياً هنا تُحاذيه. وبقاؤها بذلك العرض هو
     ما كان يدفع الشريط 57 بكسلاً خارج شاشة الهاتف، فتنزلق الصفحة كلّها
     أفقياً ويخرج زرّ القائمة عن الشاشة. */
  .head {
    gap: 10px;
    /* الحافّتان حافّتا المحتوى تحته: زرّ القائمة يقف حيث تبدأ اللوحات،
       وزرّ الطباعة حيث تنتهي. وكان الشريط بلا حشوٍ في جهة البداية أصلاً
       فيلتصق زرّ القائمة بحافّة الشاشة التصاقاً تامّاً. */
    padding-inline: var(--pad-inline) var(--edge-end);
  }
  .head__crest {
    inline-size: auto;
    min-inline-size: 0;
    flex: 0 1 auto;
    border-inline-end: 0;
    padding-inline: 0;
  }
  .head__titles { min-inline-size: 0; }
  .head__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .head__sub { display: none; }
  .head__motto { display: none; }
  .head__btn--menu { display: inline-flex; }

  .boards { grid-template-columns: minmax(0, 1fr); }

  .flashes { inset-inline: 12px auto; width: min(380px, calc(100vw - 24px)); }
}

/* ============================== الجداول بين البطاقة والمكتب (621 - 960)

   البطاقات تقف عند 620، والعتبات التي تليها تُعيد ترتيب الشريط الجانبي
   وأشرطة الترشيح ولا تمسّ الجدول نفسه — فيأخذ اللوحُ شبكةَ المكتب كاملةً
   في صندوقٍ بثلثي عرضها: كشفُ الإحلال يُخفي 214 بكسلاً عند 768.

   فحشوٌ أضيق وخطٌّ أصغر يستردّان نحو مئة بكسل من كل جدول، وأرضيةُ عرضٍ
   تمنع الانهيار في الاتجاه الآخر: الجدول في غلافٍ ضيّق ينكمش إلى أضيق
   محتواه، فتنكسر كل خليّة إلى عشرة أسطر ويخرج صفٌّ واحد أطول من الشاشة
   (قيس 456 بكسلاً لصفٍّ في الموقف الفني عند 360). فيُعطى عرضاً يُقرأ
   ويُمرَّر إليه بدل أن يُسحق. */
@media screen and (max-width: 960px) {
  table.tbl { font-size: calc(12px * var(--f-scale, 1)); }
  table.tbl th { padding: 8px 7px; font-size: calc(10.5px * var(--f-scale, 1)); }
  table.tbl td { padding: 7px 7px; }
  table.tbl--compact th, table.tbl--compact td { padding: 5px 6px; }

  /* وليس ‎max-content‎: قيس على الموقف الفني 9217 بكسلاً */
  .tbl-wrap.is-scrollable > table.tbl:not(.tbl--stack) { min-inline-size: 560px; }
}

@media screen and (max-width: 820px) {
  .cols--3, .cols--4 { grid-template-columns: minmax(0, 1fr); }

  /* الألسنة شريطٌ يُمرَّر لا صفوفٌ تنكسر.

     ثمانية ألسنة في شاشة الوحدة تنكسر إلى ثلاثة أسطر، وكلٌّ منها يحمل
     حدّاً سفلياً بهامشٍ سالب — فتُرسم ثلاثة خطوط متقطّعة يقف اللسان النشط
     على أحدها بلا دلالة على موضعه من البقيّة.

     والمحوران يُصرَّحان معاً: تحديد أحدهما وحده يقلب الآخر إلى ‎auto‎، وهامش
     اللسان السالب يتجاوز الوعاء ببكسل — وذلك القدر كان يكفي لإظهار شريط
     تمرير رأسيّ على الشريط. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* حافّةٌ تخبو في جهة النهاية: شريطٌ مقصوصٌ بحدٍّ قاطع يُقرأ منتهياً،
       والخبوّ يقول إنّ بعده بقيّة. ويُرفعه app.js متى بلغ الشريط آخره. */
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
  }
  /* الفيض في الاتجاه المعاكس حين تنقلب جهة القراءة */
  :root[dir="ltr"] .tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .tabs.is-end, :root[dir="ltr"] .tabs.is-end { -webkit-mask-image: none; mask-image: none; }
}

@media screen and (max-width: 720px) {
  /* ترويسة الشاشة: الخطّ لعنوانها، والأزرار تحته.

     كانت الأزرار تلتفّ إلى سطرٍ ثانٍ داخل الترويسة، فينزل معها حدُّها
     السفليّ وخطُّها النحاسيّ — فيُقرأ الخطّ فاصلاً تحت صفٍّ من الأزرار لا
     توقيعاً تحت عنوان. والخطّ يخصّ العنوان، فيُنقل إلى كتلته، وتخرج
     الأزرار من تحته صفّاً قائماً بذاته. */
  .page__head {
    display: block;
    padding-block-end: 0;
    border-block-end: 0;
  }
  .page__head::after { display: none; }

  .page__head > :first-child {
    position: relative;
    min-inline-size: 0;
    padding-block-end: 13px;
    border-block-end: 1px solid var(--rule);
  }
  .page__head > :first-child::after {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    width: 72px;
    height: 1px;
    background: var(--accent);
  }

  .page__actions {
    margin: 13px 0 0;
    display: flex;
    gap: 8px;
  }
  .page__actions > * { justify-content: center; }
  /* أزرارٌ متساوية تملأ العرض — لصفٍّ فيه زرّان فأكثر.

     زرٌّ واحد يملأ العرض يُقرأ لوحاً لا زرّاً: عشرُ شاشات لها إجراء واحد
     («تعديل الوحدة»، «تصدير»)، فكان يخرج شريطاً بعرض الشاشة. و‎:has‎ يميّز
     الحالتين بلا وسمٍ في القوالب. */
  .page__actions:has(> :nth-child(2)) > * { flex: 1 1 auto; }

  /* الحلقة الداخلية للوحة الموقف تأكل ثمانية بكسلات من كل جهة، وهي على
     شاشة الهاتف عشرة بالمئة من العرض. */
  .frame--board { padding: 2px; }

  .kv { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 12px; }
}

@media screen and (max-width: 640px) {
  .form-grid, .form-grid--2 { grid-template-columns: minmax(0, 1fr); }

  /* الشدّ إلى عرضٍ متساوٍ يليق بشاشة هاتف؛ وفي لوحٍ بعرض 720 يخرج الزرّ
     بثلاثمئة وستّة وثلاثين بكسلاً — لوحٌ لا زرّ. */
  .page__actions:has(> :nth-child(2)) > * { flex: 1 1 0; }

  /* وأربعةُ أزرار صفّان من اثنين، لا ثلاثةٌ وزرٌّ وحيد: الرابعُ كان ينزل
     وحده إلى سطرٍ بعرض الشاشة — اللوحُ الذي كُتبت القاعدةُ أعلاه لتمنعه.
     و‎:last-child‎ يحصرها في الأربعة: خمسةٌ بهذه القاعدة تُبقي خامسَها وحيداً. */
  .page__actions:has(> :nth-child(4):last-child) > * { flex: 1 1 calc(50% - 4px); }

  /* الرقم يلتصق باسمه.

     ‎.stat__value‎ صندوقٌ يملأ عرض الخانة ونصُّه محاذٍ لجهة بداية اتجاهه —
     واتجاهه لاتيني (‎direction: ltr‎ ليُقرأ الرقم صحيحاً)، فبدايته اليسار.
     وذلك مقبولٌ في خانة بعرض 186 بكسلاً على المكتب، وغيرُ مقبول في خانة
     تملأ عرض الهاتف: يقف الاسمُ في حافّة والرقمُ في الحافّة المقابلة.
     فيُشدّ الصندوق إلى مقاس محتواه ويقف حيث يقف اسمه. */
  .page__title { font-size: calc(20px * var(--f-scale, 1)); }
  .page__eyebrow::before { width: 12px; }

  /* شريط الترشيح لا يلتصق هنا: قوائمه الستّ تنكسر إلى أربعة أسطر فيأكل
     ثلث الشاشة قبل أن يُقرأ صفٌّ واحد — و‎--bar-h‎ ينزل بترويسة الأعمدة
     بقدره فتختفي تحته. */
  .frame > .toolbar { position: static; }

  /* حقل البحث سطرٌ كامل، والقوائم مناصفة — لا ستّة حقول متفاوتة العرض */
  .toolbar { gap: 8px; padding: 10px; }
  .toolbar .toolbar__search { flex: 1 1 100%; max-width: none; }
  .toolbar .select { flex: 1 1 calc(50% - 4px); max-width: none; min-inline-size: 0; }
  .toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .toolbar__clear { flex: 1 1 100%; margin-inline-start: 0; }

  .filters .field, .filters .field--sm { min-width: 0; flex: 1 1 calc(50% - 5px); }

  .pager { padding: 10px; gap: 8px; }
  .pager__meta { flex-wrap: wrap; gap: 8px; }

  .tree__row[data-depth="1"] { padding-inline-start: 24px; }
  .tree__row[data-depth="2"] { padding-inline-start: 38px; }
  .tree__row[data-depth="3"] { padding-inline-start: 52px; }
  .tree__meta { margin-inline-start: auto; gap: 8px; }

  /* اسم اللوحة الملتصقة زينةُ شاشةٍ عريضة: هنا يزاحم اسم التشكيل نفسه */
  .head__pinned { display: none !important; }

  /* الحوار يملأ الشاشة تقريباً: نافذةٌ صغيرة وسط شاشة صغيرة تُقرأ ضائعة */
  dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 24px);
  }
  .dlg__body { max-height: calc(100dvh - 168px); }
  .dlg__foot .btn { flex: 1 1 auto; justify-content: center; }

  .gate { padding: 16px; }
  .gate__card { padding: 26px 20px 22px; }
}

@media screen and (max-width: 560px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dt { font-size: calc(11px * var(--f-scale, 1)); }
  .kv dd { margin-block-end: 8px; }
  /* القيمة تقف تحت اسمها.

     القيم الرقمية (رقم البطاقة، الهاتف، التاريخ) تحمل صنف ‎.mono‎ واتجاهه
     لاتيني، فبدايتُها اليسار. وذلك صحيح ما دامت في عمودٍ ثانٍ إلى يسار
     أسمائها؛ فإذا نزلت تحتها في عمودٍ واحد وقفت في الحافّة المقابلة لاسمها
     بعرض الشاشة كاملاً بينهما. */
  .kv dd.mono { text-align: end; }

  .btn-row > .btn, .btn-row > form > .btn { flex: 1 1 auto; justify-content: center; }
}

@media screen and (max-width: 430px) {
  .stat__value { font-size: calc(26px * var(--f-scale, 1)); }
  .page__title { font-size: calc(18px * var(--f-scale, 1)); }
  .page__actions { flex-wrap: wrap; }
  .head { gap: 8px; }
}

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

/* ============================================== شاشة الإعدادات — شريط الحفظ

   ملتصقٌ بقاع منطقة العمل لا واقفٌ في ذيل اللوح: لوح «الضوابط» وحده ثمانية
   عشر حقلاً في شاشتين، وزرُّ الحفظ في قاعه يعني أن يمرّر الضابط الشاشة كلّها
   ليحفظ رقماً غيّره في أعلاها — ثمّ يمرّر راجعاً ليرى أثره.

   وخلفيّةٌ صمّاء وحدٌّ علويّ وظلٌّ صاعد: الصفوف تمرّ من تحته، فلولا الثلاثة
   لقُرئ الزرّ طافياً فوق النصّ بلا سببٍ ظاهر. */

.settings__save {
  position: sticky;
  /* وقفتُه عند حافّة المنطقة لا عند حافّة محتواها — كما تُزاح ترويسة الجدول
     الملتصقة بالحشو العلوي. فـ ‎inset-block-end: 0‎ يقف عند حافّة المحتوى،
     فيبقى تحته شريطٌ بقدر الحشو السفلي (‎--pad-end‎) تمرّ فيه الصفوف ظاهرةً
     تحت الشريط — يُقرأ الشريط ثقباً في الصفحة لا قاعاً لها. */
  inset-block-end: calc(var(--pad-end, 56px) * -1);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-end: 18px;
  padding: 12px 15px;
  background: var(--deck-2);
  border: var(--bw, 1px) solid var(--rule);
  box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, .28);
}
.settings__save-note { font-size: calc(11.5px * var(--f-scale, 1)); color: var(--dim); }

/* ======================================================= لوحة عتبات القرار */

.thresholds__note {
  border-inline-start: 2px solid var(--accent-dim);
  padding-inline-start: 11px;
  margin-block-end: 18px;
  line-height: 1.7;
}

.thresholds__group { margin-block-end: 20px; }
.thresholds__group:last-of-type { margin-block-end: 0; }

.thresholds__legend {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(11px * var(--f-scale, 1));
  font-weight: 600;
  color: var(--accent);
  margin-block-end: 10px;
}
.thresholds__legend::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.thresholds__preview {
  margin-block-start: 22px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--rule);
}
.thresholds__scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 22px;
  padding-block-end: 4px;
}

/* ======================================= البرقيات — ما يستحق نظر الآمر

   بديل صناديق التنبيه الملوّنة العريضة: أسطر مسطّرة كثيفة، لكل سطر قضيب
   لوني عند بدايته يحمل درجة الأهمية. الكثافة هنا مقصودة — لوحة عمليات
   تُقرأ سطراً سطراً، لا بطاقات تتنافس على الانتباه.                        */

.dispatches { display: flex; flex-direction: column; }

.dispatch {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  padding: 11px 15px;
  border-block-end: 1px solid var(--rule);
  border-inline-start: 3px solid var(--tone, var(--rule-2));
  transition: background-color .14s;
}
.dispatch:last-child { border-block-end: 0; }
.dispatch:hover { background: var(--deck-2); }

.dispatch--danger  { --tone: var(--out); }
.dispatch--warning { --tone: var(--maint); }
.dispatch--info    { --tone: var(--sea); }
.dispatch--success { --tone: var(--fit); }

/* وسم الأهمية — بعرض ثابت حتى تصطفّ النصوص تحت بعضها */
.dispatch__mark {
  font-size: calc(10.5px * var(--f-scale, 1));
  font-weight: 600;
  color: var(--tone);
  border: var(--bw, 1px) solid var(--tone);
  padding: 2px 9px;
  min-width: 62px;
  text-align: center;
  white-space: nowrap;
}

.dispatch__text { font-size: calc(12.5px * var(--f-scale, 1)); line-height: 1.6; color: var(--foam); }

.dispatch__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(11.5px * var(--f-scale, 1));
  color: var(--dim);
  white-space: nowrap;
  transition: color .14s;
}
.dispatch:hover .dispatch__cta { color: var(--accent); }

@media screen and (max-width: 860px) {
  .dispatch { grid-template-columns: max-content minmax(0, 1fr); gap: 10px; }
  .dispatch__cta { grid-column: 2; }
}


/* ============================================= مؤشّر الانتقال بين الشاشات

   التنقّل صار يستبدل منطقة العمل وحدها بدل إعادة تحميل الصفحة، فاختفت
   الومضة البيضاء التي كانت تُعلم المستخدم أنّ شيئاً يحدث. هذا الشريط
   يعوّضها — لكن لا يظهر إلا إن تأخّر الردّ عن جزء من الثانية. وعلى جهاز
   محلي نادراً ما يظهر، وهذا هو المقصود: وميضٌ للحظة أسوأ من لا شيء. */

.nav-bar {
  position: fixed;
  inset-block-start: var(--shell-head);
  inset-inline: 0;
  block-size: 2px;
  z-index: 60;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
:root.is-navigating .nav-bar { opacity: 1; }

.nav-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 32%;
  background: var(--accent);
  animation: nav-sweep 1s linear infinite;
}

/* يتحرّك من جهة البداية إلى جهة النهاية — ومع RTL ينعكس تلقائياً */
@keyframes nav-sweep {
  from { inset-inline-start: -32%; }
  to   { inset-inline-start: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar::after { animation: none; inline-size: 100%; opacity: .45; }
}


/* ======================================================== اختيار نمط الألوان */

.schemes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}

.scheme {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck);
  cursor: pointer;
  transition: border-color .14s, background-color .14s;
}
.scheme:hover { border-color: var(--rule-2); background: var(--deck-2); }
.scheme.is-active { border-color: var(--accent); background: var(--deck-2); }

/* البطاقة شبكةٌ، و‎display‎ في القاعدة يعلو على ‎display:none‎ الذي يعطيه
   المتصفّح للسمة ‎hidden‎ — فتُكتب صراحةً، وإلا ظهرت بطاقةُ اللوحة
   المخصَّصة قبل أن يُمسّ لون. */
.scheme[hidden] { display: none; }

/* زر الاختيار مخفي بصرياً لا وظيفياً — البطاقة نفسها هي المفتاح */
.scheme input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.scheme:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.scheme__sw {
  display: grid;
  grid-template-columns: repeat(3, 13px);
  grid-auto-rows: 13px;
  gap: 2px;
  flex: none;
}
.scheme__sw i { display: block; inline-size: 13px; block-size: 13px; border: var(--bw, 1px) solid rgba(0,0,0,.16); }

.scheme__body { min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
.scheme__name { font-size: calc(13px * var(--f-scale, 1)); font-weight: 600; }
.scheme__fam {
  font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.scheme__tick { color: var(--accent); opacity: 0; transition: opacity .14s; }
.scheme.is-active .scheme__tick { opacity: 1; }

@media screen and (max-width: 560px) { .schemes { grid-template-columns: 1fr; } }

/* ====================================================== مخطَّط الهيكل التنظيمي

   لوحةُ عمليات لا رسمٌ بياني: صناديقُ مسطَّرة على أرضيةٍ مشبَّكة، وخطوطُ
   ارتباطٍ بعرض شعرة تنزل من الأمّ إلى بناتها. لا ظلال ولا زوايا دائرية،
   كما في بقية النظام.

   وخطوط الارتباط ترسمها هذه القواعد على حواف ‎<li>‎ و‎<ul>‎، لا ‎<svg>‎ ولا
   حسابُ إحداثيات في المتصفّح. فالمخطَّط يخرج تامّاً من الخادم: يُقرأ ويُطبع
   ويُبحث فيه بلا سطر جافاسكربت. وما يضيفه ‎orgchart.js‎ — التكبير والتحريك
   والطيّ والسحب — يعمل على ‎transform‎ واحدة فوق ما رُسم.

   والخصائص المنطقية هنا ليست تجميلاً: أوّلُ الإخوة في العربية أيمنُهم،
   و‎inset-inline-start‎ تقرأ ذلك من اتجاه المستند بلا استثناءٍ يُكتب.       */

.org {
  /* حالةُ الكاميرا — يكتبها ‎orgchart.js‎ هنا لا على العنصر نفسه، فتبقى
     ‎transform‎ في ورقة الأنماط وتغلبها قاعدةُ الطباعة أدناه. سمةُ ‎style‎
     على العنصر تعلو كلَّ قاعدة، فكان المخطَّط يُطبع بمقدار تكبير الشاشة
     ووضعية تمريرها. */
  --org-x: 0px;
  --org-y: 0px;
  --org-s: 1;

  /* مقاسُ الرصف وهيئتُه.

     القيمُ هنا أوائلُ لا أحكام: لوح «هيئة المخطَّط» يكتب ما يبدّله منها في
     سمة ‎style‎ على هذا العنصر نفسِه ويحفظه المتصفّح، فلا قاعدةَ تنسيقٍ
     تُخترع في الجافاسكربت ولا صنفَ يُقلَّب.

     والألوانُ تُكتب بالاحتياط ‎var(--org-t0, var(--accent))‎: ما بدّله
     المستخدم يُكتب، وما تركه يقع على لون النمط الجاري — فلا يُحمل اختيارُ
     نهارٍ إلى ليل، ولا يُجمَّد المخطَّط على ألوان نمطٍ هُجر. */
  --org-wide: 224px;         /* عرض صندوق الوحدة — ثابت كي يستوي الرصف */
  --org-box: var(--org-wide);
  --org-drop: 30px;          /* نزول الخط من الصندوق إلى قضيب الإخوة */
  --org-gap: 16px;           /* الفسحة بين الإخوة */
  --org-tone: var(--haze); /* لون مستوى التشكيل — يُبدَّل بعمقه */

  --org-edge: 1px;           /* سمك حدّ الصندوق */
  --org-cap: 2px;            /* سمك سطر المستوى فوقه — به يُقرأ عمقُ التشكيل */
  --org-round: 0px;          /* استدارة حوافّه — والأصل حرفٌ قائم كوثيقة */
  --org-shade: var(--edge);  /* ظلُّه */

  /* سمك خطوط الارتباط.

     شعرةٌ واحدة تختفي متى صُغِّر المخطَّط — والمخطَّط يُنظر إليه مصغَّراً
     أكثر مما يُنظر إليه بحجمه: عند ٦٠٪ تصير الشعرةُ ستّةَ أعشار البكسل
     فيبهت الرابط حتى لا يُتتبَّع. وسمكان ونصفٌ يُبقيه ظاهراً لكنّه يجعل
     اللوحَ خطوطاً بينها صناديق لا صناديقَ بينها خطوط — والخطُّ خادمٌ للرسم
     لا الرسمُ له. فبكسلٌ ونصف: يُتتبَّع عند التصغير ولا يزاحم ما يصله، ومن
     أراد غيرَه ضبطه من لوح الهيئة. */
  --org-line: 1.5px;
  --org-half: .75px;
}

/* شريطُ الأدوات هو كلُّ ما فوق اللوح، فحدُّه السفلي هو الفصل بينه وبين
   اللوح، والعلوي سطرُ النحاس الذي يحمله كلُّ لوحِ مواقف في النظام. */
.org__bar {
  margin: 0;
  border-inline: 0;
  border-block-start: 2px solid var(--accent);
  border-block-end: 1px solid var(--rule-2);
}
.org__bar__group { display: flex; align-items: center; gap: 6px; }
.org__zoom { font-family: var(--f-mono); font-size: calc(15px * var(--f-scale, 1)); font-weight: 600; line-height: 1; }
.org__bar__group + .org__bar__group { margin-inline-start: 4px; }

/* مفتاحٌ يبقى مضغوطاً: حالتُه تُقرأ من الشريط لا من أثرها في اللوح */
.org__flip__off, .org__flip__on { display: inline-flex; }
.org__flip__on { display: none; }
.org__flip[aria-pressed="true"] .org__flip__on  { display: inline-flex; }
.org__flip[aria-pressed="true"] .org__flip__off { display: none; }
.org__flip[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--deck-3);
  font-weight: 600;
}

/* بطاقةُ الوحدة لا تُفتح إلا على وحدة.

   لوحٌ جانبيٌّ دائمُ الحضور يقتطع ثلاثمئة بكسلٍ من عرض المخطَّط ليقول
   «اختر وحدة». فلا يُفتح إلا باختيار، ويُغلق بإلغائه — والمخطَّط يستردّ
   عرضَه. */
.org__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-block-size: 0;
}
.org.has-sel .org__wrap { grid-template-columns: minmax(0, 1fr) 296px; }

/* وصفُّها لا يطول بطول اللوح الجانبيّ: العمودُ إلى جانب المخطَّط ليس وعاءَ
   تمرير، فأدنى مقاسٍ له محتواه كلُّه — فيتمدّد صفُّ الشبكة إلى ما بلغه اللوحُ
   ويخرج عن الشاشة، ويبقى جوفُ اللوح بمقاس ما فيه فلا يُمرَّر منه شيء: تُسحب
   المقابضُ فلا يُبلغ آخرُها. وردُّ أدناه إلى صفرٍ يوقف الصفَّ عند ارتفاع
   المنطقة، فينزل الفائضُ إلى الجوف يُمرَّر فيه — يُنظر ‎.org__inspect‎
   و‎.org__skin‎. */
.org__inspect { display: none; }
.org.has-sel .org__inspect { display: flex; }

/* ------------------------------------------------------ شاشةٌ تملأ النافذة

   المخطَّط ليس لوحةً في مجرى صفحة: هو أداةٌ تُمسك باليد وتُجرّ ويُكبَّر
   فيها. وتمريرُ الصفحة تحتها يزاحم تمريرَ اللوح نفسِه — تُدار العجلة
   لتكبيره فتنزلق الصفحةُ من تحته — وحشوُ منطقة العمل حولها يقتطع من
   مساحةٍ هي كلُّ ما في الشاشة.

   فتأخذ منطقةَ العمل كاملةً بلا حشوٍ ولا هامش: شريطُ الأدوات بمقاسه،
   واللوحُ يأخذ ما بقي مهما بقي، ولا يُمرَّر شيءٌ خارجَه. وعنوانُ الشاشة
   وأزرارُها في شريط الرأس — يُنظر ‎.head__page‎.

   وحبسُ التمرير فوق عتبة العمود الواحد وحدها: تحتها تنزل بطاقةُ الوحدة
   تحت المخطَّط فيطول المحتوى عن النافذة، وحبسُه حينئذٍ يخفي نصفَه. */
.main:has(.org--full) { padding: 0; }
.org.is-live .org__head { display: none; }
.org__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }

@media screen and (min-width: 1081px) {
  .main:has(.org--full) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scrollbar-gutter: auto;
  }

  .org--full {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }
  .org--full > .org__bar { flex: none; }
  .org--full > .org__wrap { flex: 1 1 auto; }
  .org--full .org__stage { block-size: auto; }
}

/* ------------------------------------------------------- الإطار والأرضية */

.org__stage {
  position: relative;
  overflow: hidden;
  block-size: clamp(440px, 70vh, 880px);
  cursor: grab;
  touch-action: none;
  background-color: var(--ink);

  /* اللوحُ يُجرّ باليد، والجرُّ على نصٍّ يُظلِّله: تُسحب الوحدة فيصير نصفُ
     المخطَّط أزرقَ محدَّداً خلفها. ولا نصَّ يُنسخ من لوحٍ يُحرَّك — والنسخُ
     من بطاقة الوحدة إلى جانبه، وهي خارج هذا القيد. */
  user-select: none;
  -webkit-user-select: none;

  /* الشبكة تتحرّك وتتمدّد مع المخطَّط، فتُقرأ الحركة حركةَ ورقةٍ تُسحب
     تحت العين لا انزلاقَ صورةٍ فوق أرضية ساكنة. */
  background-image:
    linear-gradient(to bottom, var(--org-grid-hue, var(--rule)) 1px, transparent 1px),
    linear-gradient(to right,  var(--org-grid-hue, var(--rule)) 1px, transparent 1px);
  background-size: var(--org-grid, 26px) var(--org-grid, 26px);
  background-position: var(--org-gx, 0px) var(--org-gy, 0px);
}
.org__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.org.is-panning .org__stage { cursor: grabbing; }

/* بلا جافاسكربت لا كاميرا ولا طيّ ولا بطاقة: يبقى المخطَّط كاملاً في وعاءٍ
   يُمرَّر، وتُرفع عنه أدواتٌ لا تعمل. وهذا هو الأصل الذي يُبنى عليه — لا
   حالٌ استثنائية تُحتمل. */
.org:not(.is-live) .org__bar,
.org:not(.is-live) .org__inspect,
.org:not(.is-live) .org__fold,
.org:not(.is-live) .org__quick,
.org:not(.is-live) .org__rail { display: none; }
.org:not(.is-live) .org__wrap { grid-template-columns: minmax(0, 1fr); }

/* والقيدان اللذان وُضعا للسحب يُرفعان معه: ‎touch-action‎ كانت تمنع تمرير
   الوعاء بالإصبع فيصير ما تحت أوّل شاشةٍ غيرَ مبلوغ على اللوحيّ، و‎user-select‎
   تمنع نسخ اسم وحدةٍ من مخطَّطٍ لا يُسحب فيه شيء أصلاً. */
.org:not(.is-live) .org__stage {
  overflow: auto;
  block-size: auto;
  max-block-size: 78vh;
  cursor: auto;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
}
.org:not(.is-live) .org__canvas { position: static; transform: none; }

/* ------------------------------------------------------------ سلّم المستويات

   شقيقُ اللوح لا ابنُه: لو سكن داخل ‎.org__canvas‎ لكبُر وصغُر معه وانزلق
   عن الشاشة مع أوّل جرّة. فيبقى ثابتاً في حافّة الإطار، ويكتب فيه
   ‎orgchart.js‎ موضعَ كلّ طبقةٍ وارتفاعَها من حساب الكاميرا وحدها. */

.org__rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 128px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* يحجب ما مرّ تحته: اللوح يُجرّ فتمرّ الصناديق خلف السلّم، وسلّمٌ شفّاف
     تختلط أسماؤه بأسمائها. وأرضيّتُه أرضيّةُ الإطار بلا شبكة، فيُقرأ
     حاشيةً على الورقة لا لوحاً ثانياً فوقها. */
  background: var(--ink);
}
.org__rail::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  border-inline-end: 1px solid var(--rule);
}
.org__lane {
  position: absolute;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 13px 10px;
  font-size: calc(10px * var(--f-scale, 1));
  line-height: 1.45;
  color: var(--dim);
  border-block-start: 1px solid var(--rule);
}
/* ‎display: flex‎ أعلى تخصيصاً من قاعدة المتصفّح ‎[hidden] { display: none }‎،
   فالطبقةُ المخفيّة كانت تبقى مرسومة بلا موضعٍ يُكتب لها — تتكوّم في رأس
   الحاشية وتُطبع أسماؤها بعضُها فوق بعض. (كما ‎.field[hidden]‎ أعلاه.) */
.org__lane[hidden] { display: none; }
.org__lane:first-child { border-block-start: 0; }
.org__lane__tone { inline-size: 14px; block-size: 3px; flex: none; background: var(--org-tone); }

/* سطران فأكثرُ ما يحتمله الاسم المشتقّ («فوج ومقر قيادة وغيرها»)، وما زاد
   يُقطع بنقاط — والحاشيةُ تسمّي الطبقة ولا تصفها. */
.org__lane__txt {
  min-inline-size: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.org__lane--d0 { --org-tone: var(--org-t0, var(--accent)); }
.org__lane--d1 { --org-tone: var(--org-t1, var(--cat-2)); }
.org__lane--d2 { --org-tone: var(--org-t2, var(--cat-3)); }
.org__lane--d3 { --org-tone: var(--org-t3, var(--cat-4)); }
.org__lane--d4 { --org-tone: var(--org-t4, var(--haze)); }


.org__canvas {
  position: absolute;
  inset-block-start: 0;
  left: 0;                       /* فيزيائيّ قصداً: مبدأ ‎transform‎ يُقاس منه */
  inline-size: max-content;
  padding: 30px 40px 44px;
  transform-origin: 0 0;
  transform: translate(var(--org-x), var(--org-y)) scale(var(--org-s));
  will-change: transform;
}

/* --------------------------------------------------------- الشجرة وخطوطها */

.org__level {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--org-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* الفسحة بين الأمّ وقضيب بناتها — وفيها ينزل خطُّها.

   وسمكُ الخط ونصفُ إزاحته يُقرآن من متغيّرٍ واحد: الخطُّ يُرسم بحدٍّ على
   صندوقٍ عرضُه صفر، فموضعُه المضبوط ‎50%‎ ناقصَ نصفِ سمكه — وإلا انزاح عن
   مركز الصندوق بمقدار يزيد كلّما غلُظ. */
.org__node > .org__level {
  position: relative;
  padding-block-start: var(--org-drop);
}
.org__node > .org__level::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% - var(--org-half));
  block-size: var(--org-drop);
  border-inline-start: var(--org-line) solid var(--org-link-hue, var(--org-tone));
}

/* والخطُّ النازل من الأمّ يأخذ لونَ بناتها لا لونَها هي، فيخرج الرابط
   بلونٍ واحد من الصندوق إلى الصندوق. */
.org__node--d0 > .org__level::before { --org-tone: var(--org-t1, var(--cat-2)); }
.org__node--d1 > .org__level::before { --org-tone: var(--org-t2, var(--cat-3)); }
.org__node--d2 > .org__level::before { --org-tone: var(--org-t3, var(--cat-4)); }
.org__node--d3 > .org__level::before { --org-tone: var(--org-t4, var(--haze)); }

.org__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: var(--org-drop);
}
.org__level--root > .org__node { padding-block-start: 0; }

/* الخط الصاعد من الصندوق إلى قضيب الإخوة */
.org__node::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% - var(--org-half));
  block-size: var(--org-drop);
  border-inline-start: var(--org-line) solid var(--org-link-hue, var(--org-tone));
}

/* قضيب الإخوة: يمتدّ من مركز أوّلهم إلى مركز آخرهم لا إلى حافّة الصفّ.

   وهو مرسومٌ على كلّ أخٍ لا مرّةً على الصفّ — لا عنصرَ في المستند يمثّل
   الصفَّ إلا ‎<ul>‎ نفسُه وهو أوسعُ منه. فلو أخذ كلُّ أخٍ عرضَه وحدَه
   لانقطع القضيبُ في كلّ فسحةٍ بينهم: ستّةَ عشرَ بكسلاً بيضاء تُقرأ خطّاً
   مقطَّعاً لا خطّاً واحداً. فيمدّ كلٌّ طرفَيه نصفَ الفسحة، فيلتقيان في
   منتصفها بلا أثرٍ للوصل. */
.org__node::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--org-gap) / -2);
  border-block-start: var(--org-line) solid var(--org-link-hue, var(--org-tone));
}
.org__node:first-child::after { inset-inline-start: calc(50% - var(--org-half)); }
.org__node:last-child::after  { inset-inline-end:   calc(50% - var(--org-half)); }
.org__node:only-child::after,
.org__level--root > .org__node::before,
.org__level--root > .org__node::after { display: none; }

.org__seat { position: relative; display: flex; flex-direction: column; align-items: center; }

/* -------------------------------------------------------- صندوق الوحدة */

.org__box {
  position: relative;
  inline-size: var(--org-box);
  padding: 9px 11px 10px;
  background: var(--org-fill, var(--deck));
  border: var(--org-edge) solid var(--org-rim, var(--rule));
  border-block-start: var(--org-cap) solid var(--org-tone);
  border-radius: var(--org-round);
  box-shadow: var(--org-shade);
  transition: border-color .12s, background-color .12s;
}
.org__box:hover { border-color: var(--accent-dim); }
.org[data-org-write] .org__box { cursor: grab; }

/* عمقُ التشكيل يُقرأ من لون سطره العلوي — تصنيفٌ لا حالة، فألوانُه ألوانُ
   التصنيف في الرسوم ولا أخضر فيها: الأخضر محجوز للحالة وحدها. */
.org__node--d0 { --org-tone: var(--org-t0, var(--accent)); }
.org__node--d1 { --org-tone: var(--org-t1, var(--cat-2)); }
.org__node--d2 { --org-tone: var(--org-t2, var(--cat-3)); }
.org__node--d3 { --org-tone: var(--org-t3, var(--cat-4)); }
.org__node--d4 { --org-tone: var(--org-t4, var(--haze)); }

/* الجذر رأسُ الوثيقة: أعرضُ قليلاً وأثقلُ سطراً */
.org__level--root > .org__node > .org__seat > .org__box {
  inline-size: calc(var(--org-box) + 30px);
  border-block-start-width: calc(var(--org-cap) + 1px);
  background: var(--org-fill, var(--deck-2));
}
.org__level--root > .org__node > .org__seat > .org__box .org__name { font-size: calc(14px * var(--f-scale, 1)); }

.org__node.is-off > .org__seat > .org__box { opacity: .55; border-style: dashed; }

.org__meta {
  display: flex; align-items: center; gap: 7px;
  margin-block-end: 5px; min-block-size: 21px;
}
.org__type {
  font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim);
  margin-inline-start: auto; white-space: nowrap;
}

.org__name {
  display: block;
  font-size: calc(12.5px * var(--f-scale, 1)); font-weight: 600; line-height: 1.5;
  color: var(--foam);
  overflow-wrap: anywhere;
}
.org__name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.org__nums {
  display: flex; gap: 4px;
  margin-block-start: 8px;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 7px;
}
.org__num { flex: 1; min-inline-size: 0; text-align: center; }
.org__num b {
  display: block;
  font-family: var(--f-mono); font-size: calc(13px * var(--f-scale, 1)); font-weight: 600;
  color: var(--foam); line-height: 1.25;
}
.org__num i { display: block; font-size: calc(9.5px * var(--f-scale, 1)); font-style: normal; color: var(--dim); }
.org__num--out b { color: var(--out); }

.org__box .gauge { margin-block-start: 7px; }

.org__flags { display: flex; flex-wrap: wrap; gap: 5px; margin-block-start: 7px; }
.org__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  font-size: calc(10px * var(--f-scale, 1));
  color: var(--haze);
  border: var(--bw, 1px) solid var(--rule);
  background: var(--deck-2);
}
.org__chip .ico { width: 12px; height: 12px; }
.org__chip--roll { color: var(--dim); }

/* أزرارُ اليد السريعة: تعديلٌ وإضافةُ تابعة. وبقيّةُ الأفعال في البطاقة
   الجانبية — صندوقٌ بستّة أزرار يصير شريطَ أدوات لا عقدةً في هيكل.

   وموضعُها داخل الصندوق في خانة اسم النوع، تحلّ محلَّه عند المرور. كانت
   معلّقةً فوق حافّته فتقع على خطّ الارتباط وعلى رمز الوحدة معاً — أيقونتان
   تطفوان على ما تحتهما بلا أرضية. والخانةُ محجوزةٌ بمقاسها في صفّ الترويسة
   فلا يتزحزح شيءٌ حين تظهر.

   و‎pointer-events‎ تُطفأ ما دامت شفّافة: زرٌّ بلا لون يبقى يلتقط النقر،
   فتُفتح نافذةُ تعديلٍ على وحدةٍ أراد المستخدم اختيارها لا تعديلها. */
.org__quick {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 9px;
  display: flex;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.org__box:hover .org__quick,
.org__box:focus-within .org__quick { opacity: 1; pointer-events: auto; }
.org__box:hover .org__type,
.org__box:focus-within .org__type { visibility: hidden; }

.org__act {
  display: flex; align-items: center; justify-content: center;
  inline-size: 21px; block-size: 21px;
  padding: 0;
  color: var(--haze);
  background: var(--deck);
  border: var(--bw, 1px) solid var(--rule-2);
  cursor: pointer;
}
.org__act .ico { width: 13px; height: 13px; }
.org__act:hover { color: var(--accent); border-color: var(--accent); background: var(--deck-2); }
.org__act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --------------------------------------------------------------- الطيّ */

.org__fold {
  position: relative;
  z-index: 1;
  margin-block-start: calc(var(--org-drop) / 2 - 8px);
  min-inline-size: 26px; block-size: 16px;
  padding: 0 5px;
  font-family: var(--f-mono); font-size: calc(10px * var(--f-scale, 1)); font-weight: 600; line-height: 1;
  color: var(--haze);
  background: var(--deck);
  border: var(--bw, 1px) solid var(--rule-2);
  cursor: pointer;
}
.org__fold:hover { color: var(--accent); border-color: var(--accent); }
.org__fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.org__fold::before { content: '−'; margin-inline-end: 3px; }
.org__node.is-shut > .org__seat > .org__fold::before { content: '+'; }
.org__node.is-shut > .org__seat > .org__fold {
  color: var(--accent); border-color: var(--accent-dim); background: var(--deck-2);
}
.org__node.is-shut > .org__level { display: none; }

/* --------------------------------------------------------- الاختيار والسحب */

.org__node.is-sel > .org__seat > .org__box {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.org__node.is-lift > .org__seat > .org__box { opacity: .3; }

/* التركيزُ يقع على ‎<li>‎ لأنّها ‎treeitem‎، وهي تحتضن الفرعَ كلَّه — فإطارٌ
   عليها يحيط بعشرين صندوقاً. يُنقل الإطارُ إلى صندوقها وحدَه. */
.org__node:focus { outline: none; }
.org__node:focus-visible > .org__seat > .org__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* الإسقاط داخل الوحدة: تصير المسحوبةُ تابعةً لها. واللون هنا حالةٌ لا
   تصنيف — «يقع» أو «لا يقع» — فيؤخذ من درجتَي الحالة. */
.org__box.is-into { box-shadow: inset 0 0 0 2px var(--fit); border-color: var(--fit); }
.org__box.is-deny {
  box-shadow: inset 0 0 0 2px var(--out);
  border-color: var(--out);
  /* والرفضُ يُقرأ بلا لون: حدٌّ متقطّع لا مصمت. أحمرُ الرفض وأخضرُ القبول
     يتساويان لمن لا يفرّق بينهما، ولا علامةَ أخرى تفصلهما. */
  border-style: dashed;
}

/* علامةُ الموضع بين الإخوة.

   فوق البطاقة المسحوبة لا تحتها: البطاقة تتبع المؤشّر، والمؤشّر واقفٌ على
   موضع الإسقاط — فكانت تغطّي العلامةَ إلا طرفَها الأعلى، فتُقرأ شَرطةً
   قصيرة معلّقة لا خطَّ إدراجٍ بين صندوقين. */
.org__caret {
  position: absolute;
  z-index: 70;
  inline-size: 4px;
  background: var(--fit);
  pointer-events: none;
}

/* والمسحوبُ شارةٌ صغيرة تتبع اليد، لا صورةٌ عن الصندوق بمقاسه: تقول ما في
   اليد ولا تحجب ما تحتها — الهدفَ وإطارَه وعلامةَ الموضع. */
.org__ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 7px;
  max-inline-size: 260px;
  padding: 6px 11px;
  font-size: calc(12px * var(--f-scale, 1));
  font-weight: 600;
  line-height: 1.4;
  color: var(--deck);
  background: var(--accent);
  border: var(--bw, 1px) solid var(--accent-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org__ghost__code {
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--f-scale, 1));
  font-weight: 500;
  padding: 0 5px;
  border: var(--bw, 1px) solid var(--accent-lo);
  direction: ltr;
  unicode-bidi: isolate;
  flex: none;
}

/* --------------------------------------------------------------- البحث */

.org.is-finding .org__node > .org__seat > .org__box { opacity: .28; }
.org.is-finding .org__node.is-hit > .org__seat > .org__box {
  opacity: 1;
  border-color: var(--maint);
  box-shadow: inset 0 0 0 2px var(--maint);
}

/* الوحدةُ التي حُفظت للتوّ يُشار إليها لحظةً، فيُعرف أين وقع ما وقع */
@keyframes org-mark {
  0%, 100% { box-shadow: inset 0 0 0 2px transparent; }
  50%      { box-shadow: inset 0 0 0 2px var(--accent); }
}
.org__node.is-new > .org__seat > .org__box {
  border-color: var(--accent);
  animation: org-mark 1s ease-in-out 3;
}

/* ------------------------------------------------------- العرض المختصر */

.org.is-lean { --org-box: calc(var(--org-wide) - 34px); }
.org.is-lean .org__nums,
.org.is-lean .org__box .gauge,
.org.is-lean .org__flags { display: none; }

/* --------------------------------------------------------- بطاقة الوحدة */

/* ‎display‎ تكتبه قاعدة ‎.org.has-sel‎ أعلاه، فلا يُكتب هنا ثانيةً */
.org__inspect {
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;                          /* الفائضُ يُمرَّر في الجوف — يُنظر ‎.org__wrap‎ */
  border-inline-end: 1px solid var(--rule);   /* حيث تلتقي باللوح */
  background: var(--deck);
}
.org__inspect__head {
  display: flex; align-items: center; gap: 8px;
  flex: none;
  padding: 10px 13px;
  border-block-end: 1px solid var(--rule);
  background: var(--deck-2);
}
.org__inspect__title {
  font-family: var(--f-disp); font-size: calc(12px * var(--f-scale, 1)); font-weight: 700; color: var(--accent);
  display: flex; align-items: center; gap: 7px;
}
.org__inspect__head .dlg__close { margin-inline-start: auto; }
.org__inspect__body { flex: 1 1 auto; overflow-y: auto; padding: 13px; min-block-size: 0; }

.org__detail__head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.org__detail__type { font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); }
.org__detail__name {
  display: block;
  font-family: var(--f-disp); font-size: calc(14px * var(--f-scale, 1)); font-weight: 700; line-height: 1.55;
  color: var(--foam);
  margin-block-start: 7px;
}
.org__detail__name:hover { color: var(--accent); }
.org__detail__path {
  font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim); line-height: 1.8;
  margin-block: 3px 11px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--rule);
}

.org__kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 13px; }
.org__kv dt { font-size: calc(11px * var(--f-scale, 1)); color: var(--dim); white-space: nowrap; }
.org__kv dd { font-size: calc(12px * var(--f-scale, 1)); margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }

.org__detail__acts { display: flex; flex-direction: column; gap: 8px; }
.org__detail__acts .btn-row { gap: 6px; }
.org__detail__acts .btn-row > form { display: contents; }

.org__switches { display: flex; flex-direction: column; gap: 9px; }

/* --------------------------------------------------- لوح هيئة المخطَّط

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

   وما يُضبط هنا متغيّراتُ هذه الورقة نفسِها تُكتب على جذر المخطَّط —
   لا ورقةَ أنماطٍ تُركَّب في المتصفّح ولا صنفَ يُخترع لكل لون.          */

.org__skin {
  display: none;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;                          /* الفائضُ يُمرَّر في الجوف — يُنظر ‎.org__wrap‎ */
  border-inline-end: 1px solid var(--rule);
  background: var(--deck);
}
.org.has-skin .org__wrap { grid-template-columns: minmax(0, 1fr) 296px; }
.org.has-skin .org__skin { display: flex; }
.org.has-skin .org__inspect { display: none; }

.org__set { display: flex; flex-direction: column; gap: 9px; }
.org__set + .org__set {
  margin-block-start: 13px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--rule);
}
.org__set__h { font-family: var(--f-disp); font-size: calc(11px * var(--f-scale, 1)); font-weight: 700; color: var(--accent); }
.org__set .check { font-size: calc(11.5px * var(--f-scale, 1)); color: var(--haze); }

.org__dial { display: flex; align-items: center; gap: 8px; }
/* اسمُ المقبض سطرٌ واحد: الأسماء تحمل معها اسمَ الطبقة («الثاني — قاعدة
   ولواء»)، وسطرٌ ثانٍ يُقفز بالمقبض عن صفّه فيصير اللوحُ درجاً. */
.org__dial__l {
  flex: 1 1 auto; min-inline-size: 0;
  font-size: calc(11.5px * var(--f-scale, 1)); color: var(--haze);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org__dial__v {
  flex: none; inline-size: 42px; text-align: center;
  font-family: var(--f-mono); font-size: calc(10.5px * var(--f-scale, 1)); color: var(--dim);
}
.org__slide {
  flex: none; inline-size: 94px; block-size: 16px;
  accent-color: var(--accent); cursor: pointer;
}
.org__slide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* حقلُ اللون مربّعٌ صغير: المتصفّحات تحشوه من داخله فيخرج اللونُ شحيحاً
   في إطارٍ عريض — يُنزع الحشو ويُترك الإطارُ حدّاً واحداً. */
.org__hue {
  flex: none; inline-size: 30px; block-size: 21px;
  padding: 0; cursor: pointer;
  background: var(--deck-2);
  border: var(--bw, 1px) solid var(--rule-2);
}
.org__hue::-webkit-color-swatch-wrapper { padding: 2px; }
.org__hue::-webkit-color-swatch { border: 0; }
.org__hue::-moz-color-swatch { border: 0; }
.org__hue:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* «تلقائي» ليست لوناً فارغاً بل لونُ النمط الجاري: ما لم يُبدَّل يتبع
   الوضعَ الليلي والنمطَ المختار، وزرُّ الردّ هو ما يعيده إلى ذلك — فيُطفأ
   ما دام متبوعاً أصلاً، ولا يَعِد بردٍّ لا شيءَ يُردّ فيه. */
.org__dial__say { flex: none; inline-size: 50px; font-size: calc(10px * var(--f-scale, 1)); color: var(--dim); }
.org__dial.is-set .org__dial__say {
  font-family: var(--f-mono); color: var(--haze);
  direction: ltr; unicode-bidi: isolate;
}
.org__undo:disabled { opacity: .32; cursor: default; }
.org__undo:disabled:hover { color: var(--haze); border-color: var(--rule-2); background: var(--deck); }

.org__skin__foot {
  flex: none;
  padding: 10px 13px;
  border-block-start: 1px solid var(--rule);
  background: var(--deck-2);
}


/* ولا دليلَ ألوانٍ في قاع الشاشة: حاشيةُ المستويات إلى جانب اللوح تحمل
   اسمَ كلّ طبقةٍ ولونَها معاً، ومفتاحٌ ثانٍ يقول ما تقوله هي. */

@media (prefers-reduced-motion: reduce) {
  .org__node.is-new > .org__seat > .org__box { animation: none; }
}

/* البطاقة تنزل تحت المخطَّط على الشاشات الضيّقة — والقيد على الشاشة وحدها:
   ورقةُ A4 عرضها 703 بكسلاً، فقيدٌ غيرُ مقيَّد يبلغ الورق. */
@media screen and (max-width: 1080px) {
  .org__wrap,
  .org.has-sel .org__wrap,
  .org.has-skin .org__wrap { grid-template-columns: minmax(0, 1fr); }
  .org__inspect,
  .org__skin { border-inline-end: 0; border-block-start: 1px solid var(--rule); }
  .org__inspect__body { max-block-size: 340px; }
}
@media screen and (max-width: 620px) {
  .org__stage { block-size: 60vh; }
}

/* ==================================== الحقول على اللمس — لا تكبير عند النقر

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

   ولا يُعالَج هذا في وسم ‎viewport‎ بـ‎user-scalable=no‎: المتصفّح يتجاهله
   منذ سنين، وهو — لو عُمل به — يمنع التكبير اليدويّ أيضاً، وذاك حقٌّ لا
   يُسلب. المقاسُ وحده يكفي: ستّة عشر بكسلاً فلا يجد المتصفّح سبباً يُكبّر
   من أجله، ويبقى التكبير بالإصبعين على حاله لمن أراده.

   والقيد على ‎pointer: coarse‎ لا على عرض الشاشة: المكتبُ لا يُكبّر مهما
   ضاقت نافذتُه، واللوحيُّ يُكبّر مهما اتّسعت شاشتُه. والزيادةُ في المقاس
   تكبّر معها مساحةَ النقر — وهي على الإصبع مكسبٌ لا كلفة.

   وموضع القاعدة في آخر قواعد الشاشة مقصود: ‎.input--sm‎ و‎.select--xs‎
   مكتوبةٌ بعد ‎.input‎ بتخصيصٍ مساوٍ، فلو وُضعت هذه بينها لغلبها ما يليها
   بصمت وبقيت حقولُ الجداول وشريطِ التصفّح على مقاسها المُكبِّر.          */

@media screen and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .input, .select, .textarea,
  .input--sm, .select--sm, .select--xs,
  .head__search-input { font-size: calc(16px * var(--f-scale, 1)); }

  /* القائمة المصغّرة ارتفاعُها مصرَّحٌ به لا مستنتَج، فلا يتّسع لخطٍّ أكبر */
  .select--xs { height: 32px; }
}

/* ================================================================ الطباعة

   اللوحة المطبوعة وثيقة تُوقَّع وتُؤرشَف، لا لقطة شاشة. لذلك:

   • تُفرض الأرضية البيضاء بأولوية تتجاوز الوضع الليلي ونمط الألوان معاً.
   • تبقى ألوان الحالة (صالح/متابعة/حرج) — إخفاؤها يُفقد الورقة معناها.
   • تتكرّر رؤوس الجداول على كل صفحة، ولا ينكسر صفٌّ في منتصفه.
   • لا يخرج عمودٌ خارج عرض الورقة: ما يخرج يُبتر عند حافة الورق بلا أثر.

   وموضع هذه القاعدة في آخر الملف مقصود. قواعد الطباعة تساوي قواعد الشاشة
   في التخصيص غالباً، فالمتأخّرة تغلب. حين كانت هذه القاعدة في وسط الملف
   كان كل ما كُتب بعدها يُبطل نظيره هنا بصمت: البرقيات كانت تُطبع بمقاييس
   الشاشة، ورابط «التفاصيل» فيها يظهر على الورق رغم إخفائه هنا.            */

@media print {

  /* الأرضية والحبر.

     ‎!important‎ ليست زينة: ‎schemes.css‎ يُحمَّل بعد هذا الملف ويكتب
     ‎:root[data-scheme="…"]‎ بالتخصيص نفسه، فكان النمط المختار يغلب هذه
     القيم — تُطبع اللوحات بأرضية رملية أو عاجية وبنحاسٍ ليس نحاس الوثيقة.
     الوسم ينهي المسألة مهما جاء بعده من ملفات أو أنماط.                  */
  :root,
  :root[data-theme],
  :root[data-scheme],
  :root[data-scheme][data-theme] {
    --ink: #FFF !important; --ink-2: #FFF !important;
    --deck: #FFF !important; --deck-2: #FFF !important; --deck-3: #FFF !important;
    --rule: #C3C7D0 !important; --rule-2: #5A6272 !important;
    --accent: #243060 !important; --accent-hi: #35468A !important;
    --accent-dim: #8B93A3 !important; --accent-lo: #243060 !important;
    --foam: #141A2B !important; --haze: #333B4B !important; --dim: #4C5666 !important;

    /* ألوان الحالة والتصنيف مطابقة للشاشة حرفاً بحرف —
       الورقة والشاشة يجب أن تحملا الرسم نفسه، لا رسمين متقاربين */
    --fit: #12783F !important; --fit-soft: #2E9459 !important; --fit-bg: #FFF !important;
    --maint: #9A5B0F !important; --maint-bg: #FFF !important;
    --out: #B01226 !important; --out-bg: #FFF !important;
    --sea: #4C5666 !important; --sea-bg: #FFF !important;

    --cat-1: #243060 !important; --cat-2: #B08A1E !important;
    --cat-3: #3A93B8 !important; --cat-4: #7C5142 !important;

    --edge: none !important; --well: none !important;
    color-scheme: light;
  }

  /* بلا هذا تُسقط المتصفحات كل الخلفيات، فتختفي أشرطة الجاهزية والشارات */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body {
    background: #FFF !important;
    color: #141A2B;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  @page { margin: 14mm 12mm; size: A4 portrait; }

  /* ---------- ما لا يُطبع ---------- */
  .head, .rail, .rail-scrim, .page__actions, .toolbar, .filters,
  .btn, .btn-row, .menu, .flashes, .no-print, .pager,
  dialog, .row-actions, .tabs, .dlg, .combo__pop { display: none !important; }

  /* التبويبات: تُطبع كل الألواح لا اللوح النشط وحده.
     ولا يُقفز بكل لوحٍ إلى صفحة جديدة: كل لوح يحمل لوحته وعنوانها، وكان
     القفز يترك صفحات فارغة بمقدار عدد التبويبات ويقذف التواقيع وحدها. */
  .tab-panel { display: block !important; }
  .tab-panel + .tab-panel { margin-block-start: 12pt; }

  /* حبس التمرير يقتصر على الشاشة — على الورق يمتدّ المستند كاملاً */
  body.app { block-size: auto; overflow: visible; display: block; }
  .shell { display: block; }
  /* حشو المتن السفلي يُخلي للتذييل الثابت شريطَه في قاع كلّ ورقة.

     ‎box-decoration-break: clone‎ هو مناط الحكم: بدونه يُقسَّم صندوق المتن
     على الورقات فيقع حشوُه السفلي مرّةً واحدة — في ذيل الورقة الأخيرة —
     وتمضي بقيّة الورقات إلى قاعها، فيطبع شريطُ التذييل فوق آخر صفٍّ فيها.
     ومع ‎clone‎ يُستنسخ الحشو في كلّ قصاصةٍ من الصندوق، فتقف الصفوف فوق
     الشريط في كل ورقة. والقيمة: ارتفاع ‎.pfoot‎ — سطرٌ وحدُّه وحشوُه نحو
     تسع عشرة نقطة — وفوقه فسحةٌ تفصله عن آخر سطر.                        */
  .main  {
    padding: 0 0 26pt;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    overflow: visible;
    block-size: auto;
  }
  .rail__scroll { overflow: visible; }
  .cols, .cols--2, .cols--3, .cols--2-1, .cols--1-2 { display: block; }

  /* لوحات الوحدة تبقى عمودين على الورق.

     عرضُ الورقة يُقاس في استعلامات الوسائط كما يُقاس عرضُ النافذة، وA4
     عمودية 794 بكسلاً — أي دون عتبة 960 التي تطوي اللوحات إلى عمود واحد
     على الشاشات الضيّقة. فتخرج لوحةُ الوحدة على ستّ ورقات بدل ثلاث،
     ويضيع تخطيطُ اللوحة الورقية المعتمدة الذي بُنيت عليه. */
  .boards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8pt;
  }
  .boards > .frame--wide { grid-column: 1 / -1; }

  /* ---------- ترويسة الوثيقة — تظهر في الطباعة فقط ---------- */
  .print-only { display: block !important; }

  .psheet {
    display: flex !important;
    align-items: flex-start;
    gap: 12pt;
    padding-block-end: 7pt;
    margin-block-end: 11pt;
    border-block-end: 2pt solid #243060;
  }
  .psheet__crest { flex: none; }
  .psheet__mid   { flex: 1; text-align: center; }

  /* الأسطر الثلاثة عناصر ‎span‎ — تسكن داخل ‎<main>‎ فلا تُكتب ‎<div>‎ —
     وكانت بلا ‎display‎ فترصف في سطر واحد: اسم الوزارة واسم القيادة وعنوان
     اللوحة متلاصقة كجملة واحدة. الورقة المستقلة تبنيها ‎<div>‎ فتنزل صحيحة،
     وهذه كانت تخرج مغايرة لها في كل شاشة تُطبع من زرّ الطباعة.            */
  .psheet__parent,
  .psheet__org,
  .psheet__title { display: block; }

  .psheet__parent { font-size: 8.5pt; color: #333; }
  .psheet__org    { font-family: var(--f-disp); font-size: 15pt; font-weight: 700; margin-block: 1pt; }
  .psheet__title  { font-size: 11pt; font-weight: 600; }
  .psheet__meta   { font-size: 8pt; color: #333; text-align: start; line-height: 1.7; white-space: nowrap; }
  .psheet__meta b { font-weight: 600; color: #141A2B; }

  .psheet__class {
    display: block !important;
    margin-block-end: 6pt;
    padding: 2pt 0;
    border-block: 1pt solid #243060;
    text-align: center;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* التذييل شريطٌ جارٍ في أسفل كلّ ورقة، لا سطرٌ يقف حيث انتهى المتن.

     هكذا هي الورقة المُصدَّرة: ‎PdfWriter::drawFoot()‎ يُنادى مع كلّ صفحة
     فيرسم الشريط على ‎MARGIN_Y + FOOT_H‎ من حافّة الورق. وكان طبعُ الشاشة
     يخالفها — التذييل عنصرٌ في مجرى المستند فيقع تحت آخر جدولٍ فيه — فتخرج
     وثيقةٌ من ثلاث ورقات وهويّتُها وتاريخُها في وسط الورقة الأخيرة، وتحتهما
     ثلثا الصفحة بياضاً، والورقتان الأوليان بلا ذيلٍ أصلاً.

     و‎fixed‎ في الطباعة يُقاس على منطقة متن الورقة لا على النافذة، ويُعيده
     المتصفّح على كلّ ورقة. ولا يُزاح إلى هامش ‎@page‎ بإزاحةٍ سالبة ولا
     بـ‎transform‎: ما يُرسم تحت قاع المنطقة يقذفه المتصفّح إلى الورقة التالية
     — جُرّب فخرج الشريط من رأس الورقة الثانية، وبقيت الأولى بلا ذيل. فمقامه
     داخل المنطقة عند ‎bottom: 0‎، والفسحة تُخلى له من المتن لا من الهامش —
     يُنظر حشو ‎.main‎ أعلاه.                                              */
  .pfoot {
    display: block !important;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding-block-start: 6pt;
    border-block-start: 1pt solid #243060;
    font-size: 8pt;
    color: #333;
  }
  /* سطرُ الذيل سطرٌ واحد لا ينكسر.

     الشريطُ محجوزٌ بحشوٍ ثابت على ‎.main‎ بمقدار سطرٍ واحد، فإذا انكسر إلى
     سطرين خرج من حجزه وعلا على آخر صفٍّ في الورقة. وقد وقع: طُبع «الأربعاء،
     9 أيلول / 2026» في سطرين والوسطُ في سطرين، فارتفع الشريط عن موضعه.

     فالطرفان — اسمُ النظام والتاريخ — لا يُقصّان ولا ينكسران، والوسطُ وحده
     يتقلّص ثم يُقصّ بنقاطٍ إن ضاقت الورقة. وهو أَولى الثلاثة بالقصّ: جملةٌ
     تُقرأ مرّةً وتُفهم، بخلاف تاريخِ الوثيقة واسمِ الجهة. */
  .pfoot__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12pt;
  }
  .pfoot__row > span { white-space: nowrap; }
  .pfoot__row > span:nth-child(2) {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .psign { display: flex !important; justify-content: space-between; gap: 26pt; margin-block-start: 20pt; break-inside: avoid; }
  .psign__box  { display: block; text-align: center; font-size: 9pt; min-width: 140pt; }
  /* الهامش الرأسي لا يعمل على عنصر سطري، فكان خط التوقيع يلتصق بعنوانه
     ويخرج الحقل بلا فراغٍ يُوقَّع فيه — ثلاثة عناوين معلّقة في الهواء. */
  .psign__line {
    display: block;
    border-block-start: 1pt solid #243060;
    margin-block-start: 34pt;
    padding-block-start: 4pt;
  }

  /* ---------- عنوان الصفحة ---------- */
  .page__head {
    border-block-end: 1pt solid #243060;
    padding-block-end: 5pt;
    margin-block-end: 9pt;
  }
  .page__head::after { display: none; }
  /* العنوان يظهر في ترويسة الوثيقة، فلا يُكرَّر هنا */
  .page__title { display: none; }
  .page__eyebrow { color: #243060; font-size: 8pt; }
  .page__eyebrow::before { background: #243060; }
  .page__meta { font-size: 8.5pt; color: #333; }

  /* ---------- الإطارات ---------- */
  .frame {
    border: 1pt solid #243060;
    margin-block-end: 8pt;
    break-inside: avoid;
    box-shadow: none !important;
  }
  /* لوحةٌ فيها جدول طويل يجب أن تنساب على الصفحات مع تكرار رأس الجدول.
     ‎break-inside: avoid‎ عليها كان يقذف السجلّ كاملاً إلى الصفحة التالية،
     فتخرج صفحة أولى فارغة إلا من الترويسة، وتزيد عدّة الورق بلا فائدة. */
  .frame:has(tbody tr:nth-child(10)) { break-inside: auto; }

  .frame--board { box-shadow: none !important; border: 2pt double #243060; padding: 0; }
  .frame--board::before { display: none; }
  .frame__head {
    background: #FFF !important;
    border-block-end: 1pt solid #243060;
    padding: 5pt 7pt;
    /* عنوان اللوحة لا يبقى وحيداً في ذيل الصفحة وجدولُه في التي تليها */
    break-after: avoid;
  }
  .frame__title { font-size: 10.5pt; color: #243060; }
  .frame__title .ico { display: none; }
  .frame__note { font-size: 8pt; }
  .frame__body { padding: 7pt; }
  .frame__foot { display: none; }

  /* ---------- الجداول ---------- */
  /* القصّ الأفقي كان يبتر الأعمدة الأخيرة من كل جدول عريض */
  .tbl-wrap, .tbl-wrap.is-scrollable { overflow: visible !important; }

  /* التمدّد الجانبي أثرٌ من الشاشة يقيسه tables.js ويرفعه عند الطباعة.
     وتُكتب هنا أيضاً لئلا تتعلّق سلامة الورقة بلحاق حدثٍ في المتصفّح:
     إطارٌ بقي متمدّداً يخرج بهامش سالب خارج حدود الورق.               */
  /* الورق لا يُمرَّر: لا تمدّد جانبياً ولا سحبٌ إلى القاع.

     والسحب السفلي خطرٌ هنا بوجه خاصّ: «آخر لوحة» حُكم به على الشاشة، وفي
     الطباعة تظهر بعدها ورقةُ الوثيقة وشريطُ التواقيع — فهامشٌ سالب بستّة
     وخمسين بكسلاً يسحبهما إلى داخل الجدول. */
  .frame.is-bleeding { margin-inline: 0; }
  /* بالتخصيص نفسه لا بأقلّ منه: القاعدة على الشاشة
     (‎.frame.is-bleeding.is-last-frame‎) أخصّ بصنف، فكانت تغلب هذا السطر
     ويبقى الهامش السالب على الورق — فتُسحب التواقيع والتذييل إلى داخل
     الصفوف الأخيرة. ولا يُتَّكل على ‎beforeprint‎ في tables.js: النصّ
     مؤجَّل (defer) وقد لا يكون عمل بعد حين يُضغط أمر الطباعة. */
  .frame.is-last-frame,
  .frame.is-bleeding.is-last-frame { margin-block-end: 18px; }
  .frame { transition: none !important; }

  table.tbl { font-size: 9pt; width: 100%; }
  /* رؤوس الأعمدة تتكرّر على كل صفحة، والمجموع يُذيّل كل صفحة */
  table.tbl thead { display: table-header-group; }
  table.tbl tfoot { display: table-footer-group; }
  table.tbl tr    { break-inside: avoid; }

  /* الورق لا يُمرَّر: لا التصاق ولا تمدّد، والغلاف يُظهر كل الأعمدة */
  .tbl-wrap, .tbl-wrap.is-scrollable { overflow: visible !important; }
  .frame.is-bleeding { margin-inline: 0 !important; }

  /* وبقيّة ما تكتبه دورة التمرير يُبطَل هنا بتخصيصٍ يغلبه.

     كانت هذه الأصناف تُرفع بـ ‎beforeprint‎، فتنكمش اللوحة أمام عين القارئ
     لحظةَ فتح نافذة الطباعة. والإبطال في التنسيق أصحّ: لا يُرى على الشاشة،
     ولا يتعلّق بلحاق حدثٍ في المتصفّح.

     واللوحة الممتدّة تفقد حدّها الجانبي على الشاشة (صارت الصفحةَ نفسها)،
     وذلك الصنف أخصّ من قاعدة ‎.frame‎ هنا فيغلبها — فتخرج على الورق بحدّين
     من أربعة. */
  .frame.is-bleeding { border-inline-color: #243060; }

  /* وخبوّ الحافّة علامةُ «بعده بقيّة» لمن يُمرّر؛ والورقة تُظهر كل الأعمدة،
     فلا يبقى منه إلا ثلاثون بكسلاً باهتة في أوّل كل جدول. */
  .tbl-wrap.is-scrollable,
  :root[dir="ltr"] .tbl-wrap.is-scrollable {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* والطبقة التي تطلي أوّل بكسل من الترويسة الملتصقة: ترويسة الورق ساكنة
     (position: static)، فتُقاس الطبقة المطلقة على أصلٍ آخر وتطلي ما ليس لها. */
  .tbl-wrap.is-pinned table.tbl th::after { content: none; }


  table.tbl th {
    background: #EAECF1 !important;
    color: #141A2B;
    border: 0.75pt solid #243060;
    padding: 4pt 6pt;
    position: static;
    box-shadow: none !important;
  }
  table.tbl td { border: 0.75pt solid #243060; padding: 3.5pt 6pt; }

  /* الأرقام تلتصق بعرضها، فيبقى عمود البيان واسعاً ولا تتكسّر الأسماء
     إلى أربعة أسطر داخل اللوحات المتجاورة */
  /* الأرقام لا تنكسر سطراً — لكنها لا تُشدّ إلى أضيق عرضٍ ممكن.

     ‎width: 1%‎ كان يعني أنّ كل عمود رقمي يأخذ أدنى ما يسعه، وأنّ الفائض
     كلّه يقع في عمودٍ واحد: «الأشخاص» في موقف القوة كان يأخذ 445 من 699،
     و«الفئة العمرية» 617 من 699 لكلمتين، وشبكة الاحتياج — وكلُّ أعمدتها
     أرقام — كانت تعطي «ضباط/شهر 1» تسعة أضعاف جاره. مع ‎auto‎ يوزّع
     المتصفّح الفائض بنسبة محتوى كل عمود، فتخرج اللوحة موزونة. والالتصاق
     محفوظ: ‎nowrap‎ يمنع كسر الرقم، فلا يضيق عمودٌ تحت عرض عدده.        */
  table.tbl .n, table.tbl .t-center, table.tbl .t-tight, table.tbl .t-num {
    width: auto;
    white-space: nowrap;
  }
  /* لكن رأس العمود يلتفّ: رأسٌ مثل «أعطال مفتوحة» كان يفرض على عموده
     عرضاً أكبر مما تحتاجه أرقامه، فتتراكم الزيادات حتى يخرج آخر عمود
     خارج الورقة. (التخصيص هنا أعلى من قاعدة ‎nowrap‎ أعلاه عمداً.)      */
  table.tbl th,
  table.tbl th.n,
  table.tbl th.t-center,
  table.tbl th.t-tight { white-space: normal; }

  /* وأعمدة الأرقام تكتفي بحشوٍ أضيق من أعمدة النص */
  table.tbl .n, table.tbl .t-center, table.tbl .t-tight, table.tbl .t-num { padding-inline: 4pt; }

  /* عمود الإجراءات: أزراره لا تُطبع فتبقى خانة فارغة مسطّرة تمتدّ على طول
     السجلّ وتسرق من عرضه — وهي أوّل ما يُدفع خارج الورقة حين يضيق العرض. */
  table.tbl th:empty,
  table.tbl td:has(> .row-actions:only-child),
  table.tbl td:has(> a.btn:only-child),
  table.tbl td:has(> form:only-child),
  /* وخانة الذيل المقابلة لعمود الإجراءات فارغةٌ أصلاً، فلولا انكماشها معه
     بقي في الجدول عمودٌ نحيل بحشوٍ بلا محتوى على طول الورقة. والتخصيص
     بـ tfoot مقصود: خانةٌ فارغة في متن الجدول قد تعني «لا رقم هنا»
     وعمودُها فوقها ذو عنوان، فلا تُمسّ. */
  table.tbl tfoot td:empty {
    width: 0;
    padding-inline: 0;
  }

  /* حقول الإدخال داخل الجداول. خانتها تنكمش إلى ‎1%‎ عند الطباعة فينكمش
     الحقل معها ويُقصّ رقمه، فيخرج على الورق مربّعٌ فارغ لا عدد فيه —
     وعمود «الملاك المعتمد» في لوحات الوحدة هو بيت القصيد من الورقة. */
  table.tbl .input,
  table.tbl .select {
    width: auto;
    min-width: 6ch;
    padding: 1pt 3pt;
    font-size: 9pt;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button { display: none; }

  table.tbl td:first-child, table.tbl th:first-child { width: auto; }
  table.tbl tbody tr:nth-child(even) { background: #F5F6F9 !important; }
  table.tbl tbody tr:hover { background: transparent !important; }
  table.tbl tfoot td, table.tbl tr.is-total td {
    background: #EAECF1 !important;
    color: #243060;
    font-weight: 700;
    border: 0.75pt solid #243060;
  }
  table.tbl tr.tbl__group td {
    background: #EAECF1 !important;
    color: #243060;
    font-weight: 700;
  }
  table.tbl--compact td, table.tbl--compact th { padding: 2.5pt 5pt; font-size: 8.5pt; }
  .tbl__empty { padding: 10pt; font-size: 9pt; background: none; animation: none; }
  .tbl__empty > .ico { display: none; }
  .tbl__empty p { font-size: 9pt; color: #141A2B; }

  /* ---------- المؤشرات ---------- */
  /* صفٌّ واحد متساوي الخانات. كان ‎auto-fit‎ يلفّ خمس خانات إلى 3+2 فيخرج
     صفٌّ ثانٍ بخانات أعرض من خانات الأول — شبكة مكسورة على ورقة رسمية. */
  .stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* الخانات تحمل حدودها على الورق، فالفجوة التي ترسم الخطوط على الشاشة
       تُضاف إليها خطاً ثانياً */
    gap: 0;
    border: 1pt solid #243060;
    break-inside: avoid;
    box-shadow: none !important;
    background: #FFF !important;
  }
  .stat {
    border-inline-start: 0.75pt solid #243060;
    padding: 6pt 8pt;
    /* الحلقة تُرسم على الشاشة لتصحّ الشبكة الملتفّة؛ والورق صفٌّ واحد
       تكفيه حدود الخانات. */
    box-shadow: none !important;
  }
  .stat:first-child { border-inline-start: 0; }
  .stat__label { font-size: 8pt; color: #222; }
  .stat__label .ico { display: none; }
  .stat__value { font-size: 17pt; }
  .stat__foot  { font-size: 7.5pt; color: #333; }
  /* قضيب النغمة يبقى: هو ما يميّز الحرج عن السليم على الورق.
     والخانة المحايدة تأخذ رمادياً بدل الشفاف، وإلا انقطع الشريط اللوني
     أعلى المؤشرات بفجوة بيضاء بعرض خانة كاملة. */
  .stat::before { height: 3pt; background: #8B93A3; }

  /* ---------- مسطرة الجاهزية ----------
     مطابقة للشاشة تماماً: امتلاء مصمت بلون الدرجة. كانت تُطبع مخطّطة
     ليتمايز الحرج عن السليم على طابعة أحادية اللون، لكن النسبة مكتوبة
     بجانب كل شريط أصلاً فتحمل القيمة مهما غاب اللون — والتطابق مع
     الشاشة أولى من تمييز مكرّر.                                       */
  .gauge { min-width: 78pt; gap: 5pt; }
  .gauge__track { border: 0.75pt solid var(--rule-2); height: 7pt; background: var(--deck-3) !important; }
  .gauge__fill  { background: var(--g-color) !important; }
  /* النسبة لا تُقصّ: عرضٌ يسع «100٪» و«33.3٪» معاً وسطرٌ واحد لا ينكسر */
  .gauge__val { font-size: 8.5pt; min-width: 27pt; white-space: nowrap; }
  .gauge__track::after { background: none !important; border-inline-start: 0.75pt solid var(--accent); inset-inline-start: var(--tick-crit); width: 0; }

  /* داخل الجداول الأعمدة تتزاحم، فالمسطرة أوّل من يتنازل عن عرضه: عمودان
     منها بعرض 92pt كانا يدفعان لوحة الأسطول 20mm خارج الورقة، فيُبتر عمود
     «نسبة الصلاحية» كاملاً عند حافة الورق ولا يبقى منه إلا رقمٌ مقصوص. */
  table.tbl .gauge { min-width: 58pt; gap: 4pt; }

  /* ---------- الشارات والرموز ---------- */
  .badge {
    border: 0.75pt solid currentColor;
    background: #FFF !important;
    font-size: 8pt;
    padding: 0.5pt 4pt;
  }
  .tag-code { border: 0.75pt solid #243060; color: #243060; font-size: 8pt; }
  .code     { border: 0.75pt solid #243060; color: #243060; }

  /* ---------- الرسوم ---------- */
  .chart { max-width: 100%; height: auto; }
  .chart text { fill: #141A2B; }
  .legend__swatch { border: 0.5pt solid #243060; }
  /* المفتاح يلتصق برسمه: ‎flex:1‎ على الاسم كان يقذف العدد والنسبة إلى
     الطرف المقابل من الورقة، فينفصل الرقم عن اسمه بعرض الصفحة كاملاً. */
  .legend { max-width: 96mm; }
  .legend__item { font-size: 8.5pt; gap: 7pt; }
  .legend__label { flex: 0 1 auto; }

  /* ---------- التنبيهات والبرقيات ---------- */
  .alert {
    border: 0.75pt solid currentColor;
    background: #FFF !important;
    break-inside: avoid;
    font-size: 9pt;
  }
  .alert .ico { display: none; }
  .dispatches { border: 0.75pt solid #243060; }
  .dispatch {
    border-block-end: 0.5pt solid #243060;
    border-inline-start: 2.5pt solid currentColor;
    break-inside: avoid;
    padding: 4pt 7pt;
  }
  .dispatch__cta { display: none; }
  .dispatch__mark { border: 0.75pt solid currentColor; font-size: 8pt; }
  .dispatch__text { font-size: 9pt; color: #141A2B; }

  /* ---------- الشجرة والنماذج ---------- */
  .tree__row { break-inside: avoid; }
  .input, .select, .textarea { border: 0.75pt solid #243060; background: #FFF !important; color: #141A2B; }
  .kv { font-size: 9pt; }
  .note-box { border: 0.75pt solid #243060; background: #FFF !important; break-inside: avoid; }

  a { text-decoration: none; color: #141A2B; }
  h1, h2, h3, .frame__title { break-after: avoid; }

  /* ---------- ورقة الجرد ----------

     كشفٌ عارٍ: اسمُ الوحدة وجدولُها، ورقمُ الورقة في هامش القاع.

     الجردُ يُقابَل بالأضابير اسماً اسماً على مدى ورقاتٍ عدّة، فما يُقرأ
     منه مرّةً واحدة — ترويسةُ الجهة وشعارُها وسطرُ التصنيف وتاريخُ الطبع
     واسمُ المُعِدّ — يأخذ من الورقة الأولى ثلثَها بلا أن يُقرأ، وصناديقُ
     التواقيع تُذيّل كشفاً لا يُوقَّع بل يُطابَق. فتُرفع كلُّها عن هذه
     الشاشة وحدها، ويبقى الجدول يبتدئ من رأس الورقة الأولى.

     و‎.rhead‎ هو المنتقى: عنوانُ الورقة نفسُه وسمُها، فلا صنفَ فارغٌ
     يُحمل لأجل قاعدة.                                                    */
  .main:has(.rhead) .psheet,
  .main:has(.rhead) .psheet__class,
  .main:has(.rhead) .psign,
  .main:has(.rhead) .pfoot,
  .main:has(.rhead) .page__head { display: none !important; }

  /* والحشوُ المحجوز لشريط الذيل يُردّ: لا ‎.pfoot‎ هنا، ورقمُ الورقة يسكن
     هامشَ ‎@page‎ لا منطقةَ المتن — فحجزُ ستٍّ وعشرين نقطةً في قاع كلّ
     ورقةٍ يقطع الجدولَ قبل أوانه ويزيد الورق بلا سبب. */
  .main:has(.rhead) { padding-block-end: 0; }

  /* واللوحةُ تنحلّ عن جدولها: حدُّها النحاسي المزدوج وعنوانُها صيغةُ
     شاشةٍ تفصل لوحةً عن أخواتها، وليس في الورقة إلا واحدة — والجدولُ
     يحمل حدودَه في خاناته. */
  .main:has(.rhead) .frame {
    border: 0;
    margin: 0;
    padding: 0;
    break-inside: auto;
  }
  .main:has(.rhead) .frame__head { display: none !important; }

  .rhead {
    display: block !important;
    margin-block-end: 7pt;
    text-align: center;
    font-size: 13pt;
    font-weight: 700;
    color: #141A2B;
  }

  /* ---------- مخطَّط الهيكل التنظيمي ----------

     لا يُطبع، ويُقال ذلك على الورق بدل أن تخرج ورقةٌ مشوّهة.

     المخطَّط شاشةُ عملٍ لا وثيقة: لوحٌ يُجرّ ويُكبَّر ويُطوى، وحدودُه
     حدودُ النافذة لا حدودُ الورقة. وما يمتدّ عرضاً بعشرين وحدةً لا يبلغ
     الورقة إلا بتصغيرٍ يُذهب أرقامَه — أو بقصٍّ يُذهب نصفَه. والهيكلُ
     نفسُه له وثيقتُه المسطَّرة في ‎/units‎: جدولٌ يحمل ما يحمله المخطَّط
     من ملاكٍ وموجودٍ ونقص، ويتكرّر رأسُه على كلّ ورقة.

     فلا زرَّ طباعةٍ في هذه الشاشة، ومن طبع المتصفّحَ من فوقها خرج له سطرٌ
     يقول أين الوثيقة — لا صفحةٌ بيضاء ولا مخطَّطٌ مبتور.                */
  .org { display: none !important; }

  .main:has(.org)::after {
    content: 'مخطَّط الهيكل شاشةُ استعراضٍ لا تُطبع — الهيكل مسطَّراً في شاشة «الوحدات والتشكيلات».';
    display: block;
    padding: 10pt 0;
    font-size: 10pt;
    color: #333;
  }
}