/* لوحة حراج — نظام التصميم. T819.
 *
 * ورقة واحدة بلا خطوة بناء: القوالب (~25) عناصر دلالية عارية (جداول، نماذج،
 * روابط)، فالنظام كلّه محدّدات عناصر + أصناف وراثية (.alarm/.clean/.money…).
 * لا أصناف مساعدة تُكتب في القوالب، ولا إطار يُجمَّع — ملف يُنسخ مع النشر.
 *
 * اللوحة هادئة عمداً: رمادي مريمي للأرضية، فيروزي عميق واحد للتمييز، وألوان
 * الحالات خافتة إلا حيث يجب أن يستحيل التجاوز (.alarm). كل القياسات
 * `logical` (inset/inline/block) فيعمل RTL من غير استثناء.
 */

/* ===========================================================================
   النظام اللوني — أربع طبقاتٍ تُركَّب، وكلُّ طبقةٍ كتلةٌ مستقلّة
   ---------------------------------------------------------------------------
   كان اللون هنا كتلةً واحدة (`:root`) بقيمٍ مباشرة، وذلك كافٍ للوحةٍ بمظهرٍ
   واحد. ولمّا صار للمالك أن يختار — مظهراً فاتحاً أو داكناً، ولوناً أساسياً من
   ستّة، وشريطاً جانبياً فاتحاً أو داكناً — صارت التوليفات ٢٤. وكتابةُ ٢٤ لوحةً
   بيدٍ تعني أن تصحيح لونٍ في واحدةٍ يتركه راسباً في ثلاثٍ وعشرين.

   فالطبقات:

   ١. `:root` — المحايدات وألوان الحالات وأبعاد التخطيط. هذه هي الحالة الفاتحة.
   ٢. `[data-accent]` — ستّ درجاتٍ لا غير للّون الأساسي (`--a050…--a700`
      و`--a-dim` للمظهر الداكن). لا كتلةَ أساسٍ تلمس شيئاً آخر.
   ٣. `[data-scheme="dark"]` — يقلب المحايدات، ويرفع درجة الأساسي إلى `--a300`
      لأن `--a700` على أرضيةٍ داكنة نصٌّ لا يُقرأ.
   ٤. `[data-sidebar]` — لون الشريط الجانبي وحده، مستقلاً عن المظهر.

   والربط بـ`var()` لا بتكرار القيمة: `--brand-dark` يشير إلى `--a700` في
   الفاتح وإلى `--a300` في الداكن، فدرجةُ اللون تُكتب مرّةً واحدة.

   `ops/checks/console_colours_are_readable.py` يركّب الطبقات نفسها ويفكّ
   `var()` ثم يقيس كل زوجٍ في **كل** توليفة — لأن لوحةَ ألوانٍ يختارها المستخدم
   بلا حارسٍ هي بابٌ مفتوحٌ لاختيارٍ لا يُقرأ.
   ======================================================================== */

:root {
  /* ---- المحايدات (المظهر الفاتح) ------------------------------------- */
  --ground: #f4f6fb;
  --panel: #ffffff;
  --raised: #f7f9fd;          /* رأس الجدول، وصفٌّ عند المرور، وكتلة كود */
  --ink: #172033;
  --ink-soft: #3d4d66;
  --muted: #5a6b85;
  --line: #e2e8f1;
  --line-soft: #eef2f8;

  /* حدّ الحقل مكوّن واجهة، وحدّه ٣:١ (معيار 1.4.11): حقلٌ حدّه لا يُرى يجعل
     النموذج مساحةً بيضاء لا يُعرف أين يُكتب فيها، وأول من يفقده من يقرأ على
     شاشةٍ باهتة أو في ضوء نهار. */
  --field-border: #78899f;

  /* ---- ربط اللون الأساسي ---------------------------------------------
     ثلاثة أدوارٍ لا دورٌ واحد، لأن لكلٍّ حدَّ تباينٍ مختلفاً:
     · --brand      ما ليس نصّاً — حدٌّ، إطار، تدرّج. الحدّ ٣:١.
     · --brand-solid خلفيةٌ يُكتب فوقها بالأبيض — الزرّ. الحدّ ٤٫٥.
     · --brand-dark  نصٌّ ملوّن على البطاقة — الروابط. الحدّ ٤٫٥.
     خلطُ الثلاثة في متغيّر واحد يعني أن تصحيح الزرّ يُطفئ التدرّج. */
  --brand: var(--a500);
  --brand-solid: var(--a700);
  --brand-dark: var(--a700);
  --brand-soft: var(--a050);
  /* إطار التركيز ليس `--brand-solid`: الأخير خلفيةٌ يُكتب فوقها بالأبيض فيجب
     أن يكون **غامقاً**، وإطارُ التركيز خطٌّ يُرسم على الصفحة فيجب أن يُرى
     عليها — وعلى صفحةٍ داكنة الغامقُ لا يُرى. كشفه الحارس: البنفسجي `#6127c4`
     على `#171d2b` نسبته ٢٫٠٨ والحدّ ٣، أي أن من يتنقّل بلوحة المفاتيح في
     المظهر الداكن كان يفقد أثره تماماً. */
  --focus: var(--a700);

  /* ---- الشريط الجانبي (الافتراضي فاتح) -------------------------------- */
  --side: #ffffff;
  --side-ink: #172033;
  --side-dim: #5a6b85;
  --side-line: #e2e8f1;
  --side-hover: var(--a050);
  /* اللون الأساسي **داخل** الشريط يتبع لون الشريط لا لون الصفحة: من اختار
     صفحةً فاتحة وشريطاً داكناً كان القسمُ الحالي عنده `--a700` على `--a-dim`
     — نسبةُ ٢٫٧٣، أي أن السطر الوحيد الذي يقول «أنت هنا» هو أقلّ سطرٍ يُقرأ
     في القائمة. كشفه الحارس في أول تشغيلٍ له على التوليفات. */
  --side-accent: var(--a700);

  /* ---- ألوان الحالة ---------------------------------------------------- */
  --danger: #b42318;
  --danger-strong: #a91d13;   /* لا يتبع المظهر — انظر `.env-badge` */
  --danger-soft: #fdecea;
  --danger-line: #f0b8b1;
  --ok: #12704a;
  --ok-soft: #e6f5ee;
  --ok-line: #b7dcc6;
  --warn: #8a5a00;
  --warn-soft: #fbf1da;
  --warn-line: #ecd9ac;
  --info: #175cd3;
  --info-soft: #e9f0fd;
  --info-line: #c3d5f8;

  /* ---- لوحة التحليلات: لغةُ لونٍ ثانية، للأرقام لا للتنقّل -------------
     الشريط والنماذج تتبع اللون الأساسي الذي يختاره المالك. هذه الثلاثة
     للبطاقات وحدها، ووظيفتها التمييز لا التزيين: المال بنفسجي، والمزاد
     فيروزي، والناس كهرماني — فالعين تجد الكتلة قبل أن تقرأ عنوانها. ولا
     تتغيّر باختيار اللون الأساسي، وإلا صارت بطاقةُ المال بلون بطاقة المزاد
     عند اختيارٍ بعينه، وضاع التصنيف كلّه. */
  --money: #6d4aa8;
  --money-soft: #f2edfb;
  --auction: #0f6f75;
  --auction-soft: #e6f5f5;
  --people: #8a5a00;
  --people-soft: #fbf2e0;

  /* ---- الشكل ----------------------------------------------------------- */
  --radius: .65rem;
  --radius-lg: 1rem;
  --shadow: 0 1px 2px rgb(23 32 51 / .05), 0 6px 18px rgb(23 32 51 / .05);
  --shadow-lift: 0 10px 28px rgb(23 32 51 / .12);
  --topbar-h: 3.65rem;   /* يقرأه الرأسُ اللاصق للجدول — قيمةٌ واحدة لا اثنتان */
  /* ١٩rem لا ١٧: القائمة صارت أربعةً وستّين صفّاً (T831)، وفي كلٍّ من
     المحجوزة حبّةُ حالةٍ تأخذ عرضها — فكان أطولُ اسمٍ يُقصّ بعد ثلاث كلمات.
     ورأسيّاً لا يُدفَع شيء: الشريط يمرّر وحده أصلاً. */
  --sidebar-w: 19rem;
  --sidebar-w-mini: 4.6rem;
  /* حشوةُ خليّة الجدول أفقيّاً — تُقرأ في `th, td` وهناك شرحُ قياسها. */
  --cell-pad-x: .45rem;
  --ring: color-mix(in srgb, var(--brand) 26%, transparent);
}

/* ---- اللون الأساسي: سبعة، وكلٌّ خمسُ درجاتٍ وحده ------------------------
   الأزرق افتراضٌ لا صدفة: هويّة اللوحة التي أقرّها المالك في T819. والباقي
   اختيارٌ يُحفظ في المتصفّح، ولا يُغيّر ملفاً على الخادم.

   و`--a500` هنا **حدٌّ وإطار لا نصّ**، فحدُّه ٣:١. وأربعةٌ من الستّة كانت
   دونه منذ كُتبت — الكهرمانيّ ٢٫٢٨ على الأرضية — لأن الحارس لم يكن يقيس هذا
   الدور أصلاً (T855). فغُمّقت إلى أدنى ما يبلغ الحدَّ: تغميقٌ بالحدّ الأدنى
   يُبقي اللون معروفاً، والقفزُ إلى درجةٍ غامقةٍ يجعل الستّة تتشابه. */
:root, :root[data-accent="azure"] {
  --a050: #e6f2fc; --a300: #8ec8ee; --a500: #3991c9; --a700: #1f6f9f; --a-dim: #10293c;
}
:root[data-accent="violet"] {
  --a050: #f1ecfd; --a300: #bda6f4; --a500: #8b5cf6; --a700: #6127c4; --a-dim: #221a3d;
}
:root[data-accent="teal"] {
  --a050: #e2f5f3; --a300: #6ed2ca; --a500: #159e95; --a700: #0c766e; --a-dim: #0b2c2a;
}
:root[data-accent="emerald"] {
  --a050: #e6f6ee; --a300: #74d5a7; --a500: #109d5f; --a700: #077547; --a-dim: #0a2c1e;
}
:root[data-accent="amber"] {
  --a050: #fdf2da; --a300: #f2c96f; --a500: #bc7a0d; --a700: #8f5d09; --a-dim: #2e2410;
}
:root[data-accent="rose"] {
  --a050: #fdeaee; --a300: #f5a0af; --a500: #ef4463; --a700: #b0113a; --a-dim: #2e1119;
}
/* الذهبيّ — هويّةُ حراج نفسها (`#a88118` في لوحته القديمة). وهو أصعبُ
   الستّة: الذهبُ الفاتح على الأبيض لا يبلغ ٣:١ فلا يصلح حدّاً، فأُخذت درجةُ
   الهويّة نفسُها لـ`--a500` (٤٫٠ على الأبيض) ونُزلت `--a700` إلى بنّيٍّ
   ذهبيّ يحمل نصّاً أبيض. والحارس هو الذي حسم القيم لا العين. */
:root[data-accent="gold"] {
  --a050: #faf2dd; --a300: #d9b45c; --a500: #a88118; --a700: #6d5209; --a-dim: #2b2308;
}

/* ---- المظهر الداكن -----------------------------------------------------
   ليس عكساً حسابياً للفاتح: الأبيض الصريح على أسود صريح يهتزّ، فالأرضية
   كحليّة والنصّ رماديٌّ فاتح لا أبيض. وألوان الحالة تُرفع درجةً كاملة —
   `#b42318` على `#171d2b` نسبته دون الثلاثة، أي أن الإنذار نفسه كان سيختفي. */
:root[data-scheme="dark"] {
  --ground: #0e131e;
  --panel: #171d2b;
  --raised: #1c2433;
  --ink: #e7ecf4;
  --ink-soft: #c0cbdb;
  --muted: #9aa8bf;
  --line: #2a3345;
  --line-soft: #232b3a;
  --field-border: #7b8ba5;

  --brand-dark: var(--a300);
  --brand-soft: var(--a-dim);
  --focus: var(--a300);

  --side: #131926;
  --side-ink: #e7ecf4;
  --side-dim: #9aa8bf;
  --side-line: #262f40;
  --side-hover: var(--a-dim);
  --side-accent: var(--a300);

  --danger: #fca19a;
  --danger-strong: #a91d13;
  --danger-soft: #2d1512;
  --danger-line: #5c2a24;
  --ok: #63d3a4;
  --ok-soft: #0d2a1f;
  --ok-line: #1d5a43;
  --warn: #f0c268;
  --warn-soft: #2c2210;
  --warn-line: #57451a;
  --info: #93b8ff;
  --info-soft: #131f38;
  --info-line: #2a3c62;

  --money: #c4a9f2;
  --money-soft: #211a35;
  --auction: #59cbd0;
  --auction-soft: #0b2a2c;
  --people: #f0c268;
  --people-soft: #2c2210;

  --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .3);
  --shadow-lift: 0 12px 32px rgb(0 0 0 / .45);
}

/* ---- الشريط الجانبي: يتبع المظهر، أو يُختار له لونٌ وحده -----------------
   `data-sidebar="auto"` (الافتراضي) لا يكتب كتلةً أصلاً، فيأخذ قيم المظهر
   نفسه. والقيم الثلاث الباقية تكسر التبعيّة عمداً: أكثر من عملَ على اللوحة
   يريد شريطاً داكناً وصفحةً فاتحة — وهو ما تفعله اللوحة القديمة التي يعمل
   عليها المالك يومياً. */
:root[data-sidebar="dark"],
:root[data-sidebar="gradient"] {
  --side: #131926;
  --side-ink: #e7ecf4;
  --side-dim: #9aa8bf;
  --side-line: #262f40;
  --side-hover: var(--a-dim);
  --side-accent: var(--a300);
}
:root[data-scheme="dark"][data-sidebar="light"] {
  --side: #ffffff;
  --side-ink: #172033;
  --side-dim: #5a6b85;
  --side-line: #e2e8f1;
  --side-hover: var(--a050);
  --side-accent: var(--a700);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  /* قلبُ المظهر انتقالٌ قصير لا ومضة: الشاشة كلّها تتغيّر دفعةً واحدة،
     وتغيّرٌ فوريٌّ بهذا الحجم يُقرأ عطلاً لا اختياراً. */
  transition: background-color .2s ease, color .2s ease;
  background: var(--ground);
  color: var(--ink);
  /* «Cairo» أولاً — خطُّ لوحة v1 نفسِه — والنظامُ خلفه: ورقةُ الخطوط تُحمَّل
     قبل هذه في `base.html`، وإن تعذّر ملفٌّ منها لا تصير الصفحةُ بلا خطّ. */
  font-family: "Cairo", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.7;
}

.layout { display: flex; min-height: 100vh; align-items: stretch; }

/* ---------------------------------------------------------------------------
   الشريط الجانبي — ثلاث حالات لا واحدة
   ---------------------------------------------------------------------------
   `data-nav` على `<html>` يقول أيّها: `full` (الافتراضي) و`mini` (أيقونات
   بعرض ٤٫٦rem) و`off` (مخفيّ تماماً). والحالة تُحفظ في المتصفّح فتبقى بين
   الصفحات — من طوى الشريط لا يريد أن يُفتَح له عند كل نقرة.

   ولماذا `data-*` على الجذر لا صنفٌ على `.sidebar`: لأن الطيّ يغيّر عرض
   الصدفة كلّها وعرض الشريط العلوي معها، وسمةٌ واحدة في الأعلى أرخص من ثلاثة
   أصنافٍ يجب أن تُضبط معاً — ولأن السمة تُكتب **قبل الرسم** بسطرٍ في `<head>`،
   فلا يومض الشريط مفتوحاً ثم ينطوي أمام العين.
   ------------------------------------------------------------------------ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--side);
  color: var(--side-ink);
  border-inline-end: 1px solid var(--side-line);
  padding: 1.1rem .8rem 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  transition: width .22s cubic-bezier(.2, .7, .3, 1);
}

/* المتدرّج زينةٌ فوق الداكن لا لونٌ ثالث: الرموز نفسها والحدود نفسها. */
:root[data-sidebar="gradient"] .sidebar {
  background: linear-gradient(170deg, var(--a700) 0%, #131926 62%);
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  padding: .3rem .35rem;
  margin-bottom: 1.1rem;
  border-radius: .7rem;
}
/* مربّع الحرف: هويّةٌ تبقى مرئيةً حين ينطوي الشريط ولا يبقى مكانٌ لكلمة. */
.brand__mark {
  flex: none;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  background: linear-gradient(135deg, var(--a500), var(--a700));
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 4px 12px var(--ring);
}
.brand__words { min-width: 0; }
.brand strong { display: block; color: var(--side-ink); font-size: 1.02rem; line-height: 1.3; white-space: nowrap; }
.brand small { display: block; color: var(--side-dim); font-size: .72rem; white-space: nowrap; }

.nav-sec {
  margin: 1.1rem .55rem .35rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--side-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  position: relative;
  color: var(--side-ink);
  text-decoration: none;
  font-size: .89rem;
  padding: .48rem .6rem;
  border-radius: .55rem;
  white-space: nowrap;
}
/* الرمز مربّعٌ ثابت العرض: القائمة تبقى مستقيمةً حين ينطوي الشريط، ولا
   يتحرّك سطرٌ عن مكانه لأن اسمه أطول. */
.nav__icon {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  /* خطٌّ مرسومٌ لا مساحةٌ ممتلئة، و`currentColor` فيتلوّن مع السطر نفسه —
     وهو ما لا يفعله الإيموجي: نظام التشغيل يرسمه بلونه هو مهما كان القسم. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .62;
  transition: opacity .15s ease;
}
.nav a:hover .nav__icon { opacity: .9; }
.nav a.active .nav__icon { opacity: 1; stroke-width: 1.9; }
/* `nowrap` لا لفّ: أطول اسمٍ في القائمة «التحكم في صفحات المستخدمين» يلتفّ
   سطرين فيصير صفُّه ضعفَ جيرانه، وقائمةٌ من أربعةٍ وستّين صفّاً بارتفاعاتٍ
   مختلفة تُمسح بالعين أبطأ. والاسم كاملاً في `title` و`data-label`. */
.nav__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* سطرُ الخروج: نموذجٌ يُقرأ سطراً. الزرّ يرث هندسة `.nav a` بالكامل — والفرق
   الوحيد أنه يُرسِل `POST`، وهو الفرق الذي لا يُرى ولا يجوز أن يختفي: رابطٌ
   ينهي الجلسة على `GET` ينهيها من أي `<img src>`. والإعادةُ للصفر لازمة لأن
   `.form-card button` في الورقة يعطي الأزرار شكل زرٍّ ممتلئ. */
/* والنموذج نفسه يُعاد إلى الصفر: قاعدة `form` في هذه الورقة تعطي كل نموذجٍ
   شكلَ بطاقة (خلفية وإطار وحشو)، فبقيت حول الزرّ صندوقاً — وهو العطل نفسه
   الذي احتاج `.sign-out` في الشريط العلوي أن يُعاد صفراً في T833. */
.nav-out {
  margin: .2rem 0 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  box-shadow: none;
}
.nav-out button {
  display: flex;
  align-items: center;
  gap: .6rem;
  inline-size: 100%;
  padding: .5rem .7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--side-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.nav-out button:hover { background: var(--side-hover); }
:root[data-nav="mini"] .nav-out button { justify-content: center; padding-inline: 0; }

/* المدخل المحجوز: مكانُ شاشةٍ لم تُبنَ بعد (T831).
   يأخذ هندسة الرابط نفسها — فالقائمة تُقرأ صفّاً واحداً لا صفَّين — ويفترق
   عنه في ثلاثة أشياء كلُّها تقول «لا تضغط»: لا مؤشّر يد، ولا خلفيةَ تحوّم،
   وحبّةٌ مكتوبةٌ في الحافة. والتخفيت وحده لم يكن ليكفي: اللون في شريطٍ داكن
   يُقرأ «معطّل» أو «ثانويّ» بحسب من ينظر، والكلمة لا تُقرأ إلا كما هي. */
.nav__soon {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  color: var(--side-ink);
  opacity: .55;
  cursor: default;
  user-select: none;
}
.nav__soon .nav__icon { opacity: .5; }
.nav__tag {
  margin-inline-start: auto;
  flex: none;
  padding: .1rem .4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .62rem;
  line-height: 1.5;
  white-space: nowrap;
  opacity: .85;
}

.nav a:hover { background: var(--side-hover); color: var(--side-ink); }
/* القسم الحالي: خلفيةٌ خفيفة ونصٌّ باللون الأساسي وشريطٌ على الحافة — لا
   مستطيلٌ مصمت. المصمت كان يجعل السطر الوحيد الملوّن في الشريط هو الذي
   **أنت فيه بالفعل**، أي أن أوضح إشارةٍ في القائمة تخدم أقلّ سؤالٍ يُسأل. */
.nav a.active {
  background: var(--side-hover);
  color: var(--side-accent);
  font-weight: 700;
}
.nav a.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -.8rem;
  inset-block: .35rem;
  inline-size: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--side-accent);
}

/* ---- المطوي: أيقوناتٌ وحدها ------------------------------------------- */
:root[data-nav="mini"] .sidebar { width: var(--sidebar-w-mini); padding-inline: .55rem; }
:root[data-nav="mini"] .brand__words,
:root[data-nav="mini"] .nav__text { display: none; }
:root[data-nav="mini"] .brand { justify-content: center; padding-inline: 0; }
:root[data-nav="mini"] .nav a,
:root[data-nav="mini"] .nav__soon { justify-content: center; padding-inline: 0; }
/* الحبّة تختفي مع النصّ: «قريباً» في شريطٍ بعرض ٤٫٦rem تقصّ نفسها، والدائرة
   الباهتة تقول ما تقوله. والاسم كاملاً في `title` كما لبقيّة الصفوف. */
:root[data-nav="mini"] .nav__tag { display: none; }
:root[data-nav="mini"] .nav a.active::before { inset-inline-start: -.55rem; }
/* عنوان القسم يصير خطاً: حذفه يجعل اثني عشر رمزاً كتلةً واحدة بلا فواصل. */
:root[data-nav="mini"] .nav-sec {
  overflow: hidden;
  text-indent: -100vw;
  margin: .8rem .3rem;
  border-top: 1px solid var(--side-line);
  height: 1px;
}
/* الاسم يظهر عند المرور — والسمة `title` تحمله أيضاً للوحة المفاتيح واللمس. */
:root[data-nav="mini"] .nav a::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-start: calc(100% + .5rem);
  padding: .3rem .6rem;
  border-radius: .4rem;
  background: var(--ink);
  color: var(--panel);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 20;
}
:root[data-nav="mini"] .nav a:hover::after,
:root[data-nav="mini"] .nav a:focus-visible::after { opacity: 1; transform: none; }

/* ---- المخفيّ ------------------------------------------------------------ */
:root[data-nav="off"] .sidebar { width: 0; padding: 0; border: 0; overflow: hidden; }

.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* الشريط العلوي: مفتاح الطيّ، شارة البيئة، اسم المستخدم، والمظهر. */
.topbar {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .6rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* أزرار الشريط العلوي كلّها شكلٌ واحد: مربّعٌ شفّاف يتلوّن عند المرور. لا
   `background` افتراضي لأن ثلاثة أزرارٍ مصمتة في شريطٍ واحد تتنافس مع زرّ
   الفعل في الصفحة نفسها. */
.icon-btn {
  flex: none;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .55rem;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
/* رسمٌ مضمَّنٌ لا محرفٌ نصّيّ: `☰` و`◐` و`✕` كان يرسمها نظامُ التشغيل — وهي
   حجّة T837 نفسُها التي أخرجت الإيموجي من الشريط والرموزَ الهندسية من بطاقات
   الأرقام. والسمكُ والزوايا هنا هي هي في `.nav__icon` و`.act svg`، لأن ما
   يجعل الرسوم تُقرأ مجموعةً واحدة هو التطابقُ في السمك لا التشابهُ في الموضوع. */
.btn__icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--line); box-shadow: none; }
.icon-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-dark); }

/* الاسم ينكمش ويُقصّ بنقاطٍ بدل أن يدفع الشريط خارج الشاشة.
 *
 * الشريط العلويّ صفٌّ مرن، وابنُ المرن لا ينكمش دون محتواه افتراضياً
 * (`min-width: auto`) — فاسمٌ طويل يجعل الشريط أعرض من الشاشة، ومعه الصفحة
 * كلّها. والاسم أولى ما يُقصّ هنا: بقيّة الشريط أزرارٌ وشارةُ بيئة، وكلٌّ
 * منها معلومةٌ لا تُقصّ (المادة ٥-٦). */
.user {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user__mark { flex: none; }
/* حرفان في دائرة: يعرّفان صاحب الجلسة بلا صورةٍ تُرفع ولا حقلٍ يُضاف. */
.user__mark {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 700;
}

/* الخروج نموذجٌ لأنه POST، ويُقرأ زرّاً هادئاً لا زرّ فعل — المساحة التي
   يأخذها في الشريط يجب أن تقول «مغادرة» لا «نفّذ». */
/* ورثَ هذا النموذجُ بطاقةَ النماذج كلها — خلفيةً وحدّاً وظلاً وحشوةً ١٫٢rem —
   فصار زرُّ الخروج داخل مربّعٍ أبيض، **ورفع الشريط العلوي إلى ٩٨px**. لم يظهر
   في اختبار (الصفحة تُرسم)، وقُرئ «تصميماً» لا عطلاً. الإعادةُ صريحةٌ هنا لأن
   القاعدة العامة `form {…}` تنطبق على كل `<form>` في اللوحة، وهذا واحدٌ منها. */
.sign-out {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  box-shadow: none;
}
.sign-out button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .8rem;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.sign-out button:hover { color: var(--ink); border-color: var(--muted); }

.env-badge {
  font-size: .75rem;
  padding: .15rem .65rem;
  border-radius: 999px;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
/* بيئة واحدة يجب أن تصرخ: الإنتاج أحمر مصمت، والباقي همس. */
/* الإنتاج لا يتبع المظهر: `--danger` في الداكن لونٌ فاتح، والأبيض فوقه لا
   يُقرأ — وشارةُ «إنتاج» هي آخر ما يُسمح له أن يبهت. فلها زوجها الثابت. */
.env-badge[data-env="production"] {
  background: var(--danger-strong);
  border-color: var(--danger-strong);
  color: #fff;
  font-weight: 700;
}
.env-badge[data-env="development"] {
  background: var(--info-soft);
  border-color: var(--info-soft);
  color: var(--info);
}
.env { /* الاسم القديم، يُبقى عاملاً حيث وُجد. */
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: .25rem;
  background: var(--raised);
  font-size: .75rem;
  color: var(--muted);
}

/* ===========================================================================
   طبقةُ العرض — رأسُ الصفحة، وشريطُ الفلاتر، والجدول. T836.
   ---------------------------------------------------------------------------
   كل ما تحته **محدّدات عناصر**، لا أصناف تُكتب في القوالب. وهذا ليس ذوقاً:
   القوالب ثلاثون، وأربعةٌ منها كُتبت هذا الأسبوع وستّة كُتبت قبل شهر. صنفٌ
   جديد يعني ثلاثين تعديلاً، ونسيانَ واحدٍ منها هو الشاشةُ التي تبدو مكسورة
   بعد كل تحسين. فالورقة تعرف `table` و`form[method="get"]` و`main h1`،
   والقالبُ يبقى HTML دلاليّاً عارياً كما هو مكتوبٌ في رأس `console/base.html`.
   ======================================================================== */

/* اللوحة تملأ الشاشة — T842.
 *
 * كان `max-width: 82rem` (١٣١٢ بكسل)، فعلى شاشة ١٩٢٠ يبقى **ثلثُ العرض
 * فارغاً** والجداول محشورةٌ في عمودٍ ضيّق. وسقفُ العرض قاعدةُ **قراءة**:
 * سطرٌ من ثمانين حرفاً يُتعب العين. لكن هذه ليست شاشة قراءة — هي جداولٌ من
 * سبعة إلى اثني عشر عموداً، وكلّما اتّسعت ظهرت أعمدةٌ أكثر بلا تمرير. وقد
 * وضع v1 لوحته على العرض كلّه، ولذلك سُئل عنها.
 *
 * وما يحتاج سقفاً يحمله بنفسه ولا يفرضه على غيره: `form` عند ٤٦rem،
 * و`.login-split` عند ٥٠rem — فحذفُ السقف هنا لا يجعل حقلاً واحداً أعرض.
 *
 * وحُذف الرمز `--shell-max` معه: رمزٌ لا يقرؤه أحد يبقى في الملفّ فيُظنّ
 * ساري المفعول، فيُعدَّل رقمُه يوماً ولا يتغيّر شيء. */
main { padding: 1.5rem 1.8rem 4rem; max-width: none; }

/* رأس الصفحة: العنوان وتحته خطٌّ رفيع، والسطر التالي وصفٌ لا فقرة.
   `h1 + p` يلتقط سطر الوصف حيث وُجد، ولا يُطلب من أحدٍ أن يضيف صنفاً. */
/* رأس الصفحة: العنوان في جهة وأفعالها في الأخرى، على سطرٍ واحد يلتفّ عند
   الضيق. الأفعال كانت فقرةً تحت العنوان في اثنتي عشرة شاشة. */
.page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-block-end: 1.1rem;
}
main h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}

.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
/* رابطٌ في منطقة الأفعال يُقرأ زرّاً هادئاً: هو فعلٌ لا جملة. ومحدّد عنصرٍ لا
   صنفٌ يُكتب في القالب — القوالب اثنتا عشرة، وصنفٌ منسيٌّ في واحدةٍ منها هو
   الشاشة التي تبدو مكسورة. */
.page__actions a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .9rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--panel);
  color: var(--brand-dark);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.page__actions a:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  text-decoration: none;
}
.page + p { margin-block-start: -.7rem; color: var(--muted); font-size: .88rem; }
main h2 { font-size: 1.02rem; font-weight: 650; margin: 1.9rem 0 .7rem; }
main p { margin: .6rem 0; }

main a { color: var(--brand-dark); }
main a:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* ---- شريط الفلاتر ------------------------------------------------------
   كان نموذج البحث يرث بطاقة النماذج كلها — حشوةً ١٫٢rem وحدّاً وظلاً وعرضاً
   أقصى ٤٦rem — فيبدو استمارةَ إدخالٍ فوق كل قائمة. وهو ليس استمارة: هو
   **شريط أدوات**. فصار صفّاً واحداً يلتفّ، بحقولٍ تتمدّد وزرٍّ في طرفه. */
form[method="get"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: .7rem .8rem;
  margin: 0 0 1rem;
  max-width: none;
}
form[method="get"] p { margin: 0; }
form[method="get"] input, form[method="get"] select {
  width: auto;
  min-inline-size: 9rem;
  padding-block: .45rem;
}
/* حقل البحث يأخذ ما بقي: هو المدخل الأول، والقوائم المنسدلة بعرض محتواها.
 *
 * **و`>` لا نزولاً في الشجرة.** `flex-basis` لا يعني عرضاً ولا ارتفاعاً بل
 * «المحور الرئيسيَّ لأبيه» — فحقلٌ ملفوفٌ في عمودٍ (لصيقةٌ فوقه) يقرأ
 * `14rem` **ارتفاعاً** فيصير 224px طولاً. وقع ذلك مرّتين: في شريط الفلاتر
 * حين لُفّت حقولُه بلصائق، وفي «كتالوج السيارات» حيث حقولُه ملفوفةٌ أصلاً
 * في `.cat-filters__field` — وهناك بقي العطلُ ظاهراً حتى رآه المالك.
 *
 * والقاعدةُ كُتبت لحقلٍ **ابنٍ مباشرٍ** لصفٍّ أفقيّ، فحُدّت بذلك. */
form[method="get"] > input[type="search"],
form[method="get"] > .filters__main > input[type="search"] { flex: 1 1 14rem; min-inline-size: 12rem; }
form[method="get"] button { margin: 0; padding-inline: 1.1rem; }
form[method="get"] label { display: none; }
/* الفاصل قبل الزرّ: يفصل «ماذا تبحث» عن «ابحث» بلا كلمة. */
form[method="get"] button[type="submit"] { margin-inline-start: auto; }

/* ---- الجدول ------------------------------------------------------------
   بطاقةٌ برأسٍ لاصق: قوائم اللوحة تُمرَّر (٥٠ صفّاً في الصفحة)، ورأسٌ يغيب
   عند التمرير يجعل العمود السابع رقماً بلا اسم — وهو أكثر ما يُسأل عنه في
   شاشات المال. */
/* الجدول يمرّر أفقياً **داخل نفسه**، في كل مقاس — T842.
 *
 * العطل مقيسٌ في المتصفّح (2026-09-07): على **٩٠٠ بكسل** تفيض صفحة
 * «المزايدات المقبولة» أفقياً بـ١٤٣ بكسل، و«كتالوج المركبات» بـ١٠٥،
 * و«ما بعد البيع» بـ٩٢ — أي أن الصفحة **كلّها** تُسحب جانباً، فيغيب الشريط
 * الجانبي والرأس عن يمين الشاشة. وعلى ١٠٢٤ ما زالت الأولى تفيض بـ١٩.
 *
 * ولماذا لم يظهر على الجوال: كانت هناك قاعدة `main table { display: block;
 * overflow-x: auto }` **داخل `max-width: 56rem` وحدها**. فتحت ٨٩٦ بكسل يمرّر
 * الجدول، وفوقها لا يمرّر شيء — والفجوة هي بالضبط مقاسُ اللوح الأفقي وشاشة
 * الحاسوب الصغيرة، أي ما يفتح عليه الموظّف اللوحة فعلاً.
 *
 * وقد حلّ الغلاف محلّ تلك القاعدة، وكسبنا بذلك أمرين لا واحداً:
 *
 * ١. **الجدول يبقى جدولاً.** `display: block` يُخرج الصفوف والخانات من شجرة
 *    الوصول في محرّكاتٍ عدّة، فيقرأ قارئُ الشاشة قائمةَ نصوصٍ لا جدولاً بأعمدة
 *    مسمّاة — على شاشات المال بالذات؛
 * ٢. **الرأس اللاصق يبقى لاصقاً** بلا أن يعتمد على حظّ المحرّك مع كتلةٍ
 *    مُمرَّرة.
 *
 * و`min-inline-size: 0` على الغلاف ليست زينة: هو ابنُ عنصرٍ مرن، وابنُ المرن
 * لا ينكمش دون محتواه افتراضياً (`min-width: auto`) — وهذا هو سبب فيضان
 * الصفحة نفسه، لا عرضُ الجدول.
 */
.scroller {
  overflow-x: auto;
  min-inline-size: 0;
  /* الهامش انتقل من الجدول إلى غلافه، فلا يتغيّر التباعد بين الشاشات. */
  margin: 0 0 1.2rem;
  /* شريطُ تمريرٍ رفيع لا يقطع حافّة البطاقة المدوّرة. */
  border-radius: var(--radius-lg);
}
.scroller > table { margin: 0; }

/* ---- جدولُ سبعةَ عشرَ عموداً: يضيق ولا يُمرَّر ------------------------------
   يستعمله «ما بعد البيع» و«القرارات المنتهية» (يرث قالبَها).

   **`white-space: nowrap` تبقى، وهي أهمُّ سطرٍ هنا.** جُرِّب إلغاؤها وقِيس:
   الجدولُ ينزل من ١٨٦٣ إلى ١٤٣٣ بكسلاً — **وارتفاعُ الصفّ يقفز من ٦٨ إلى
   ١٢٦**، أي أربعةَ عشرَ صفّاً في الشاشة تصير سبعة. فالعرضُ لا يُشترى بنصف
   الصفوف؛ يُشترى من الحشوة والخطّ والحدود الدنيا.

   **وكان هنا `min-inline-size: 92rem` فحُذفت** (٢٠٢٦-٠٩-١٤). حجّتُها كانت أن
   `width: 100%` يضغط الأعمدة فيلفّ اسمُ المزاد ثلاثةَ أسطر — **و`nowrap`
   أعلاه تمنع ذلك وحدَها**، فالعرضُ الأدنى كان يحرس ما هو محروس. وثمنُها
   مقيس: بعد ضغط الحشوة والخطّ توقّف الجدولُ عند ١٤٧٢ بالضبط (= ٩٢rem) وهو
   **سقفٌ كاذب** يفرض تمريراً لم يعد له سبب. قِيس بعد الحذف: ١٤٥٩ في غلافٍ
   ١٤٥٩، أي صفرَ فيض، وارتفاعُ الصفّ ٦٤ كما كان.

   والحشوةُ ٤ بكسل والخطُّ ٠٫٧٨ريم هنا وحدَهما لا في اللوحة كلّها: سبعةَ عشرَ
   عموداً تدفع الفرقَ أربعاً وثلاثين مرّة، وجدولُ ستّةِ أعمدةٍ لا يحتاجه. */
.scroller--wide td,
.scroller--wide th { white-space: nowrap; }
.scroller--wide th,
.scroller--wide td { padding-inline: 4px; font-size: .78rem; }
/* خانةُ الأفعال هنا **أيقونةٌ واحدة** (سند الدفع) — و`td.actions` العامّة
   تفرض ٩ريم لصفوفٍ فيها ثلاثُ أيقونات، فكانت الخانةُ تأخذ ١٤٤ بكسلاً
   لتعرض ٤٩. والهدفُ اللمسيُّ باقٍ على الزرّ نفسه (`.act` ٢٫٢ريم). */
.scroller--wide td.actions { min-inline-size: 0; }
/* والسطرُ الخافت تحت القيمة يبقى سطراً ثانياً مقصوداً، لا لفّاً عارضاً. */
.scroller--wide td small { display: block; }

/* نصٌّ يُقَصُّ بثلاث نقاط ويبقى كاملاً في `title` — **لا يُحذف**. المالك
   طلب «نفس الداتا المعروضة وعدد الأعمدة»، واسمُ المركبة وحدَه كان ٢٨١ بكسلاً
   من ١٧٤٣ (قِيس على ٢٨٨ مركبةً مرحَّلة في `?which=rejected`). فالقصُّ يردّه
   إلى سقفه، والقيمةُ تُقرأ بالمرور عليه — ولا يُقَصُّ في ملفّ التصدير ولا في
   شاشة التفصيل، فهما ليسا شاشةً ضيّقة.

   و`--clip` متغيّرٌ لأن السقفَ يختلف بالعمود، و**صنفٌ لا `style=` في السطر**:
   السقفُ يضيق على الشاشات الأضيق (الكتلة تحته)، والسطرُ يغلب استعلامَ
   الوسائط فلا يضيق شيء. */
.cell-clip {
  display: inline-block;
  max-inline-size: var(--clip, 9rem);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.clip-name { --clip: 9rem; }
.clip-model { --clip: 9rem; }
.clip-buyer { --clip: 8rem; }
.clip-aname { --clip: 6rem; }

/* دون ١٥٣٦ بكسلاً يضيق الغلافُ نفسُه: ١٤٥٩ على منفذ ١٦٠٠ و١٢٩٩ على ١٤٤٠
   (بالشريط مطويّاً في الحالين). فالسقوفُ والحشوةُ تنزل معه — قِيس على
   `?which=rejected`: ١٣٧٥ في غلافٍ ١٢٩٩ قبل هذه الكتلة، و١٢٩٩ بعدها.

   ولماذا بخطوةٍ واحدة لا بسُلَّم: قياسان اثنان لا يرسمان سُلَّماً، وخطوةٌ
   مقيسةٌ أصدقُ من ثلاثٍ مُخمَّنة. */
@media (max-width: 96rem) {
  .scroller--wide th,
  .scroller--wide td { padding-inline: 3px; }
  .clip-name { --clip: 7rem; }
  .clip-model { --clip: 7rem; }
  .clip-buyer { --clip: 7rem; }
  .clip-aname { --clip: 5rem; }
}

/* سطرٌ ثانٍ في خليّةٍ قائمة يحمل ما لا يستحقّ عموداً — «القرارات المنتهية»
   تضع فيه القرارَ ووقتَه بعد أن حُذف عمودُ «القرار».

   **كلمةٌ ملوّنةٌ لا لونٌ وحدَه**: صفٌّ يُميَّز بلونه فقط لا يُقرأ لمن لا
   يميّز الأحمرَ من الأخضر، ولا يُنسَخ مع النصّ. واللونُ من النغمة نفسِها
   التي تلوّن الحبّة (`tones.py`) فلا خريطةَ ثانية تفترق عنها.

   وثمنُه صفرٌ: خليّةُ المزاد بجواره تحمل سطرين أصلاً فالصفُّ لا يعلو
   (قِيس: ٦٤ بكسلاً قبل وبعد)، والسطرُ أقصرُ من اسم المركبة فوقه فالعمودُ
   لا يتّسع. */
.cell-note {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
}
.cell-note[data-tone="ok"] { color: var(--ok); }
.cell-note[data-tone="warn"] { color: var(--warn); }
.cell-note[data-tone="bad"] { color: var(--danger); }
.cell-note[data-tone="info"] { color: var(--info); }
.cell-note[data-tone="money"] { color: var(--money); }
.cell-note[data-tone="auction"] { color: var(--auction); }

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin: 0 0 1.2rem;
  /* لا `overflow: hidden` هنا: كان يدوّر الأركان **ويُبطل** `position: sticky`
     على رأس الجدول — أي أن الرأس اللاصق أعلاه كان زينةً لا تعمل. الأركان
     تُدوَّر على الخانات الطرفية بدلاً منه. */
}
thead tr:first-child th:first-child { border-start-start-radius: var(--radius-lg); }
thead tr:first-child th:last-child { border-start-end-radius: var(--radius-lg); }
tbody tr:last-child td:first-child { border-end-start-radius: var(--radius-lg); }
tbody tr:last-child td:last-child { border-end-end-radius: var(--radius-lg); }
th, td {
  /* الحشوةُ الأفقيّة متغيّرٌ لأنها **أكبرُ مشترٍ للعرض في اللوحة كلّها**:
     سبعةَ عشرَ عموداً تدفع ثمنَها أربعاً وثلاثين مرّة. قِيس على «كتالوج
     السيارات» بحساب المالك على منفذ ١٦٠٠: الجدولُ ١٥٥٧ في غلافٍ ١٢٢٨ (يفيض
     ٣٢٩) — وخفضُها وحدَها إلى ٦ بكسل ردّه إلى ١٢٨٨، ومع لفّ `.mono` إلى
     ١٢٢٨، أي صفرَ فيضٍ (٢٠٢٦-٠٩-١٤).

     وثمنُها مذكور: الخلايا تتقارب، ولا حدودَ رأسيّةً بينها تفصلها — فالفصلُ
     صار بالفراغ وحدَه. وذلك أرخصُ من تمريرٍ أفقيّ في كلّ شاشة، وأرخصُ من
     خطٍّ أصغرَ لا يُقرأ (قِيس: الخطُّ الأصغر لم يُعطِ بكسلاً واحداً بعد
     هذين العلاجين). */
  padding: .68rem var(--cell-pad-x);
  border-block-end: 1px solid var(--line-soft);
  text-align: start;
  font-size: .88rem;
  vertical-align: top;
}
thead th, tr:first-child th {
  position: sticky;
  top: 0;                      /* داخل `.scroller`: المرجع أعلى الغلاف لا الشريط العلوي */
  z-index: 2;
  background: var(--raised);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  border-block-end: 1px solid var(--line);
}
tbody tr { transition: background .12s ease; }
tbody tr:hover, tr:hover td { background: var(--raised); }
tr:last-child th, tr:last-child td { border-block-end: 0; }

/* الأرقام في عمودٍ تستقيم خاناتها: `tabular-nums` على كل خانةٍ تحمل رقماً،
   لا على `.money` وحدها — عمودُ «عدد المركبات» يُقارَن بالعين كما يُقارَن
   عمود المبالغ. */
td.count, td.money, th.count, th.money { font-variant-numeric: tabular-nums; }

/* ---- الحبّة: حالةٌ تُقرأ لوناً وكلمةً معاً --------------------------------
   الحالة كانت نصّاً عارياً في خانة («فشلت»، «منتهٍ»، «مسحوبة») فتُقرأ صفّاً
   صفّاً. والحبّة تُمسح بالعين. واللون **لا يحمل المعنى وحده**: الكلمة داخلها
   دائماً، فمن لا يميّز الأحمر من الأخضر يقرأ الجملة نفسها (المادة ٤ في
   `_stat.html` نفسها). */
.pill {
  display: inline-block;
  padding: .16rem .6rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--line-soft);
  color: var(--ink-soft);
}
.pill[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); }
.pill[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); }
.pill[data-tone="bad"] { background: var(--danger-soft); color: var(--danger); }
.pill[data-tone="info"] { background: var(--info-soft); color: var(--info); }
/* أشدُّ من `bad`: أرضيّةٌ مصمتة لا باهتة. الدرجةُ الرابعة في مؤقّت متابعة النقل
   («تنبيه المالك» عند ٣٠ يوماً) لو أخذت نبرةً غيرَ معرَّفةٍ لسقطت إلى الرماديّ
   الافتراضيّ — فيخرج أخطرُ صفٍّ في الجدول أهدأَ من الذي قبله. */
.pill[data-tone="critical"] { background: var(--danger); color: #fff; }
.pill[data-tone="money"] { background: var(--money-soft); color: var(--money); }
.pill[data-tone="auction"] { background: var(--auction-soft); color: var(--auction); }

/* ---- المصغّرة في الجدول ------------------------------------------------
   ٢٧ صورةً في قاعدة العرض، ولم تكن **واحدةٌ** منها تُعرض في اللوحة: لا في
   القائمة ولا في صفحة التفصيل. والصورةُ هي أسرع ما يعرّف سيارةً — أسرع من
   اللوت ومن الاسم — ولذلك تعرضها قائمة v1. */
.thumb {
  display: inline-block;
  vertical-align: middle;
  inline-size: 3rem;
  block-size: 2.25rem;
  margin-inline-end: .6rem;
  border-radius: .4rem;
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--line);
}
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.thumb__none {
  display: grid;
  place-items: center;
  block-size: 100%;
  color: var(--muted);
  font-size: .8rem;
}
.thumb__name { vertical-align: middle; }

/* معرض صفحة التفصيل: الغلاف أولاً، والباقي بجواره. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
  gap: .6rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.shots li { margin: 0; }
.shots img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--raised);
  display: block;
}
/* الغلاف يُعلَن بحدٍّ لا بترتيب: الترتيب يضيع عند فرزٍ مختلف. */
.shots li[data-cover="true"] img { border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }

/* ---- معرضُ الصور المُدار (T866) --------------------------------------- */
/* شريطُ العودة: المعرضُ يُفتح من صفٍّ في مزاد، لا من الشريط الجانبي، فطريقُ
   العودة نصٌّ في الصفحة لا سهمُ المتصفّح — والسهمُ بعد `POST` يعود إلى
   الاستمارة المرسَلة لا إلى الشاشة السابقة. */
.crumbs {
  margin: 0 0 1rem;
  font-size: .92rem;
}
.crumbs__sep {
  color: var(--muted);
  margin-inline: .45rem;
}
/* استمارةُ الرفع فوق الصور: الشاشةُ تُفتح غالباً لأن الصفّ قال «بلا صور». */
.shots-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.2rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}
.shots-upload label { font-weight: 700; }
.shots-upload input[type="file"] { flex: 1 1 14rem; min-inline-size: 0; }
/* المعرضُ المُدار أوسعُ من معرض القراءة: تحته صفُّ أفعالٍ يحتاج عرضاً يُقرأ. */
.shots--managed {
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
}
.shots__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-block-start: .4rem;
}
/* الاستمارةُ حول الزرّ لا تُزيح شيئاً: `display: contents` يجعل الزرّ نفسه
   عنصرَ الـflex، وبدونه يصير لكلّ زرٍّ صندوقٌ يكسر المحاذاة. */
.shots__act { display: contents; }

/* ---- لا شيء هنا -------------------------------------------------------- */
.empty { color: var(--muted); }
/* خانةٌ فارغة تمتدّ على الجدول كلّه ليست صفّاً — هي حالة. تُوسَّط وتُعطى
   مساحةً تقول «بحثتُ ولم أجد» لا «انقطع الجدول». */
td.empty, td[colspan] .empty, td[colspan].empty {
  text-align: center;
  padding-block: 2.4rem;
  font-size: .92rem;
}

/* ---- سطر العدّ والصفحات ------------------------------------------------
   `table + p` هو سطرُ «كذا صفّاً · صفحة ١ من ٣» في كل قائمة، بلا استثناء.
   كان نصّاً عائماً تحت الجدول؛ صار شريطاً هادئاً يُقرأ جزءاً من القائمة. */
table + p {
  margin: -.4rem 0 1.6rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-block-start: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--panel);
  color: var(--muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

/* النماذج بطاقة واحدة: حقل فوق حقل، وخطأ الحقل بجانبه لا في أعلى الصفحة. */
form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.25rem;
  max-width: 46rem;
}
form p { margin: .9rem 0; }
form p:first-child { margin-top: 0; }
form p:last-child { margin-bottom: 0; }
label { display: block; font-size: .83rem; font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--field-border);
  border-radius: .45rem;
  padding: .5rem .7rem;
  width: 100%;
  max-width: 26rem;
}
/* إطار التركيز بـ--brand-solid لا --brand: مكوّنات الواجهة تحتاج ٣:١، و--brand
   يبلغ ٢٫٦٩ على الأرضية الرمادية — أي أن من يتنقّل بلوحة المفاتيح يفقد أثره
   على نصف الشاشات. */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="file"] { border-style: dashed; background: var(--raised); }
/* نماذج البحث سطرٌ واحد لا بطاقة حقول مكدّسة. */
form[method="get"] input, form[method="get"] select { width: auto; }
form > input, form > select, form > button { margin-inline-end: .5rem; margin-block: .25rem; }

/* أزرار: إرسال فيروزي، وإلغاء رابط هادئ بجانبه. */
button, input[type="submit"] {
  font: inherit;
  font-weight: 700;
  background: var(--brand-solid);
  color: #fff;
  border: 0;
  border-radius: .45rem;
  padding: .55rem 1.3rem;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover {
  background: var(--brand-dark);
  box-shadow: 0 4px 14px var(--ring);
}
form a {
  display: inline-block;
  margin-inline-start: .75rem;
  font-size: .9rem;
}
/* أخطاء النموذج: القائمة خطأ عام، والغليظ خطأ حقل. */
form ul {
  list-style: none;
  margin: 0 0 .8rem;
  padding: .7rem 1rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: .45rem;
  color: var(--danger);
  font-size: .88rem;
}
form strong { color: var(--danger); font-size: .85rem; }

/* الرسائل العامة (base) موسومة: نجاح أخضر ورفض أحمر — لا `<p><strong>` عمياء. */
.notice {
  border-radius: .5rem;
  padding: .7rem 1rem;
  margin: 0 0 1.2rem;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: .92rem;
}
.notice.success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.notice.error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.notice.warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.notice.info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }

/* الخلاف المالي هو الشيء الوحيد الذي يستحيل تجاوزه: حدّ أحمر وإنذار هادئ. */
.alarm {
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-inline-start: 4px solid var(--danger);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin: 1rem 0;
}
.alarm strong { color: var(--danger); }
.clean {
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-inline-start: 4px solid var(--ok);
  border-radius: .5rem;
  padding: .6rem .9rem;
  margin: 1rem 0;
}

.reason { font-weight: 600; }
/* المبلغ يُقرأ كما في الدفتر: أرقام لاتينية متجاورة لا تتكسر بين السطور. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: embed; }
.count { font-weight: normal; color: var(--muted); font-size: .8em; font-variant-numeric: tabular-nums; }

/* الجسم الخام دليلٌ يُعرض كما وصل: لوحة فاتحة بخط أحادي تُظهر الشارد. */
pre {
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .9rem 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .83rem;
  direction: ltr;
  text-align: left;
}

ul { padding-inline-start: 1.4rem; }
li { margin: .25rem 0; }

/* الدخول: سماء فاتحة بتوهّجات بيبي بلو تنجرف ببطء، وبطاقة بيضاء تطفو فوقها.
 * الحركة `transform` و`opacity` فقط، وكلها تتوقف مع `prefers-reduced-motion`. */
/* ---------------------------------------------------------------------------
   صفحة الدخول — عمودان: لوحةُ هويّة وبطاقةُ نموذج. T827.
   ---------------------------------------------------------------------------
   بطاقةٌ وحيدةٌ وسط فراغ كانت تُقرأ «نافذةَ نظامٍ داخلي» لا «بابَ منصّة»،
   وشكلُ العمودين هو ما اعتاده المالك في v1 وما ترسمه القوالب التي أرسلها.

   وكل لونٍ هنا من الرموز: الصفحة تتبع المظهر واللون الأساسي المختارَين —
   كانت خارج النظام كلّه، فمن اختار الداكن يخرج من اللوحة فيصطدم بصفحةٍ
   بيضاء ناصعة، وهي أول ما يُرى بعد كل انتهاء جلسة.
   ------------------------------------------------------------------------ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--brand-soft) 0%, transparent 60%),
    radial-gradient(50rem 36rem at 10% 110%, var(--brand-soft) 0%, transparent 55%),
    var(--ground);
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
/* التوهّجات لونُ الأساسي مخفَّفاً بـ`color-mix` لا قيماً مكتوبة: كانت ثلاث
   زرقاواتٍ ثابتة، فمن يختار الكهرماني يرى هالاتٍ زرقاء خلف بطاقةٍ كهرمانية. */
.orb-a {
  width: 34vmax; height: 34vmax;
  inset-inline-start: -8vmax; top: -10vmax;
  background: color-mix(in srgb, var(--a500) 42%, transparent);
  animation: drift-a 16s ease-in-out infinite alternate;
}
.orb-b {
  width: 28vmax; height: 28vmax;
  inset-inline-end: -6vmax; bottom: -8vmax;
  background: color-mix(in srgb, var(--a300) 40%, transparent);
  animation: drift-b 20s ease-in-out infinite alternate;
}
.orb-c {
  width: 16vmax; height: 16vmax;
  inset-inline-start: 12%; bottom: 12%;
  background: color-mix(in srgb, var(--a300) 48%, transparent);
  animation: drift-a 24s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4vmax, 3vmax) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.08); }
  to { transform: translate(-3vmax, -4vmax) scale(1); }
}

/* الشبكة: اللوحة أضيق من البطاقة عمداً — النموذج هو العمل، واللوحة سياقه. */
.login-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(20rem, 26rem);
  align-items: stretch;
  gap: 1.25rem;
  width: 100%;
  max-width: 50rem;
  animation: rise .45s ease both;
}

.login-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.9rem;
  border-radius: 1.25rem;
  /* المتدرّج من درجتَي اللون الأساسي إلى كحليّ ثابت: الطرف الداكن لا يتبع
     المظهر لأن النصّ فوقه أبيض دائماً، وطرفٌ يفتحّ في المظهر الفاتح كان
     سيُسقط الأبيض تحت ٤٫٥. الزوج مقيسٌ في الحارس على `--a700` وحده. */
  background: linear-gradient(155deg, var(--a700) 0%, #131926 78%);
  color: #fff;
  box-shadow: 0 24px 60px rgb(11 16 26 / .3);
}

.login-side__brand { display: flex; align-items: center; gap: .8rem; }
.login-side__brand strong { display: block; font-size: 1.25rem; line-height: 1.45; color: #fff; }
.login-side__brand small { display: block; font-size: .78rem; color: rgb(255 255 255 / .9); }

/* ٠٫٩ لا ٠٫٨٢: الأبيض الصريح على `--a700` يبلغ ٥٫٤٨ في أسوأ لون، وتخفيفه
   إلى ٠٫٨٢ يُنزله إلى ٤٫٢٣ — أي **تحت** الحدّ. قِيست، فرُفعت. وهذه جملةٌ
   تُقرأ لا خلفيّةٌ تُرى. */
.login-side__line {
  margin: 0;
  font-size: .88rem;
  line-height: 1.85;
  color: rgb(255 255 255 / .9);
}

.login-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* الحبّة تُظلَّل لا تُفتَّح: خلفيةٌ بيضاء بـ١٠٪ فوق `--a700` تُنزل الأبيض
   إلى ٤٫٥٠ — على الحدّ بالضبط، وأي تعديلٍ لاحقٍ في درجةٍ واحدة يُسقطه.
   وسوادٌ بـ١٨٪ يرفعه إلى ٧٫٣ ويعطي العمق نفسه. */
.login-pills li {
  margin: 0;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .3);
  background: rgb(0 0 0 / .18);
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
}

/* الشارة تُدفَع إلى القاع: آخرُ ما تقع عليه العين قبل الانتقال إلى النموذج. */
.login-side .env-badge { margin-block-start: auto; align-self: flex-start; }

.login-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-lift);
  padding: 2rem 2.1rem;
  width: 100%;
}
.login-card__title { margin: 0 0 .2rem; font-size: 1.35rem; }
.login-card__hint { margin: 0 0 1.2rem; font-size: .85rem; color: var(--muted); }

.login-mark {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 1rem;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--a300) 0%, var(--a700) 100%);
  box-shadow: 0 6px 16px rgb(0 0 0 / .28);
}
/* النموذج هنا داخل بطاقة أصلاً — لا بطاقة ثانية حوله. */
.login-form { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
.login-form input { max-width: none; }
.login-form button[type="submit"] { width: 100%; margin-top: .6rem; padding-block: .7rem; }

/* الشاشة الضيّقة: عمودٌ واحد، واللوحة فوق النموذج مختصرةً — لا تُحذف، لأن
   شارة البيئة فيها والمادة ٥-٦ لا تسقط بضيق الشاشة. */
@media (max-width: 46rem) {
  .login-split { grid-template-columns: 1fr; max-width: 26rem; }
  .login-side { padding: 1.3rem 1.4rem; gap: .75rem; }
  .login-side__line { display: none; }
}
/* زرّ العين بجانب حقل كلمة المرور في شبكة — لا إحداثيات مطلقة تنكسر تحت
 * سطر الخطأ. ولا يرسل النموذج أبداً (`type="button"`). */
.password-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .4rem; }
.password-wrap label { grid-column: 1 / -1; }
.password-wrap input { grid-column: 1; min-width: 0; }
.password-wrap br, .password-wrap strong { grid-column: 1 / -1; }
.peek {
  grid-column: 2;
  width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: .45rem;
  color: var(--muted);
  cursor: pointer;
}
.peek:hover { background: var(--brand-soft); color: var(--brand-dark); box-shadow: none; }
.peek[aria-pressed="true"] { color: var(--brand-dark); background: var(--brand-soft); }

/* الحركة — هادئة ومهنية: دخولٌ يرتفع قليلاً، وضغطة تُحَسّ، ولا شيء يرقص.
 * كلها `transform` و`opacity` فلا تُحرّك التخطيط، وتُحترم
 * `prefers-reduced-motion` في آخر الملف. */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.login-card { animation: rise .45s ease both; }
main { animation: fade .3s ease both; }
.notice { animation: rise .3s ease both; }

.nav a { transition: background .15s ease, color .15s ease; }
main a { transition: color .15s ease; }
button, input[type="submit"] {
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
button:active, input[type="submit"]:active { transform: translateY(1px); }
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
}
tbody tr, tr { transition: background .12s ease; }

/* الشاشات الصغيرة: الجانبي شريط علوي، والجداول تُمرَّر أفقياً لا تُكسَر. */
/* ---------------------------------------------------------------------------
   الشاشة الضيّقة: الشريط **درجٌ منزلق** لا صفٌّ فوق المحتوى.
   ---------------------------------------------------------------------------
   كانت القاعدة هنا تسطّح الشريط إلى صفٍّ من الروابط يلتفّ فوق الصفحة، وذلك
   كافٍ لثلاثة عشر رابطاً بلا أيقونات (T819). ولمّا صارت ستّة عشر برموزها صار
   الصفُّ **٤٧٧px ارتفاعاً**، فتبدأ الصفحة عند `y=533` — أي نصفُ شاشةٍ من
   تنقّلٍ قبل أول كلمةٍ من المحتوى. وقيس على عرض ٧٣١px.

   والأسوأ أن `data-nav="mini"` كان يبقى نافذاً هنا (`:root[data-nav="mini"]
   .sidebar` تسبق `.sidebar` في الأولوية)، فيصير الشريط عموداً بعرض ٤٫٦rem
   **فوق** المحتوى لا بجانبه. فالحالات الثلاث تُوحَّد هنا: على الضيّق لا
   «مطويّ» — هناك مفتوحٌ أو مغلق.
   ------------------------------------------------------------------------ */
@media (max-width: 56rem) {
  .layout { flex-direction: column; }

  /* `fixed` لا `static`: الدرج يطفو فوق الصفحة ولا يزيحها، فالمحتوى يبقى في
     أعلى الشاشة حيث يُتوقَّع. و`!important` على العرض لأن حالات `data-nav`
     أعلى أولويةً وليست ذات معنى هنا. */
  .sidebar {
    position: fixed;
    inset-block: 0;
    /* `inset-inline-start` أي **اليمين** في RTL — الجهة التي يقف فيها الشريط
       في الوضع العريض. درجٌ ينزلق من الجهة المقابلة يجعل الشاشتين شاشتين
       مختلفتين لا مقاسين لواحدة. (و`translateX` فيزيائيّ لا منطقيّ، فإخفاءُ
       ما على اليمين يكون بدفعه يميناً: `+100%`.) */
    inset-inline-start: 0;
    inline-size: min(var(--sidebar-w), 82vw) !important;
    block-size: 100vh;
    padding: 1.1rem .8rem 2rem !important;
    z-index: 30;
    box-shadow: -18px 0 44px rgb(9 13 21 / .3);
    transform: translateX(100%);          /* RTL: الدرج على اليمين، يخرج يميناً */
    visibility: hidden;
  }
  :root[data-nav="full"] .sidebar { transform: none; visibility: visible; }

  /* الرموز والأسماء يعودان: الدرج بعرضه الكامل، ولا معنى لإخفاء نصٍّ فيه. */
  :root[data-nav="mini"] .brand__words,
  :root[data-nav="mini"] .nav__text { display: revert; }
  :root[data-nav="mini"] .brand,
  :root[data-nav="mini"] .nav a { justify-content: flex-start; padding-inline: .6rem; }
  :root[data-nav="mini"] .nav-sec {
    overflow: revert;
    text-indent: 0;
    block-size: auto;
    border-top: 0;
    margin: 1.1rem .55rem .35rem;
  }
  :root[data-nav="mini"] .nav a::after { content: none; }

  /* حجابٌ خلف الدرج: نقرةٌ خارجه تغلقه — أول ما تجرّبه اليد. ولا عنصرَ له في
     القالب: `::before` على الصدفة يكفي، ونقرتُه يلتقطها `theme.js`. */
  .shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgb(9 13 21 / .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  :root[data-nav="full"] .shell::before { opacity: 1; pointer-events: auto; }

  main { padding: 1.2rem 1rem 2.5rem; }
  .topbar { padding: .6rem 1rem; }
  /* حُذفت `main table { display: block; overflow-x: auto }`: صارت في
     `.scroller` وتسري على كل مقاس، لا تحت ٥٦rem وحدها — انظر سببها كاملاً
     عند تعريف الغلاف. */
  form { max-width: none; }
  .page { align-items: flex-start; }
}

/* من يطلب تقليل الحركة تُطفأ كلها — أداة عمل لا عرض.
   و`data-motion="off"` هو الطلب نفسه من داخل اللوحة: من لا يستطيع تغيير
   إعداد النظام كلّه — جهازٌ مشترك، أو مستأجَر — يطفئها هنا. القاعدتان
   واحدة لأن الأثر واحد. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation: none !important; transition: none !important; }

/* شبكة الرئيسية: كرتٌ لكل شاشة، اسمُها وما تفعله.
 *
 * `auto-fill` مع `minmax` بدل عدد أعمدة مكتوب: عدد الكروت يتغيّر بالصلاحيات
 * — مالكٌ يرى اثني عشر وموظف دعمٍ يرى ثلاثة — فشبكةٌ بثلاثة أعمدة ثابتة تترك
 * لصاحب الثلاثة صفّاً وحيداً وفراغين، وللمالك أربعة صفوف ضيّقة.
 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: .75rem;
  margin: .8rem 0 1.6rem;
}
.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--ink);
  border-inline-start: 3px solid var(--brand);
}
.card strong { display: block; color: var(--brand-dark); font-size: 1rem; }
.card span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.55; }
/* المرور يرفع الكرت ويغمّق حدّه — لا يفتحّ نصّه. */
.card:hover { border-color: var(--brand); box-shadow: var(--shadow-lift); }
.card:hover strong { color: var(--ink); }

/* ===========================================================================
   لوحة التحليلات
   ---------------------------------------------------------------------------
   ثلاثة قرارات تحكم ما تحته:

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

.board-alarms,
.board-stats {
  display: grid;
  /* `auto-fit` يقرّر بعدد ما يتّسع، فلا نقطة انكسارٍ تُصان يدوياً. */
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: .85rem;
  margin-block-end: 1.4rem;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.05rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow);
  /* الحافة المنطقية لا اليمنى: الصفحة RTL وتنقلب معها. */
  border-inline-start: 3px solid var(--brand);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: stat-in .34s cubic-bezier(.2, .7, .3, 1) backwards;
}

/* تتابعٌ قصير — ستّ بطاقات في ربع ثانية. أطول من ذلك انتظارٌ لا إيقاع. */
.stat:nth-child(1) { animation-delay: .02s; }
.stat:nth-child(2) { animation-delay: .06s; }
.stat:nth-child(3) { animation-delay: .10s; }
.stat:nth-child(4) { animation-delay: .14s; }
.stat:nth-child(5) { animation-delay: .18s; }
.stat:nth-child(6) { animation-delay: .22s; }
.stat:nth-child(n + 7) { animation-delay: .26s; }

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

a.stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--field-border);
}

a.stat:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* الصفّ العلوي: الرمز على حافة البداية، والحبّة على مقابلها. */
.stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-block-end: .15rem;
}

.stat__label {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .01em;
}

.stat__value {
  display: block;
  font-size: 1.9rem;
  line-height: 1.05;
  font-weight: 650;
  /* أرقامٌ بعرضٍ ثابت: عمودٌ من المبالغ يجب أن تستقيم خاناته. */
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
  text-align: start;
}

/* الرمز في مربّعه — تزيينيٌّ صراحةً، ولذلك `aria-hidden` في القالب. */
/* مربّعٌ ملوَّن ورسمٌ بالخط داخله. الحشو على `<svg>` نفسه لا على غلافٍ ثانٍ:
   المسار مقيسٌ على `viewBox` فينكمش إلى صندوق المحتوى وحده. وسُمك الخط هو سُمك
   الشريط — وهو ما يجعل الاثنين مجموعةً واحدة لا رسمين متشابهين. */
.stat__icon {
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: .58rem;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat--money .stat__icon { background: var(--money-soft); color: var(--money); }
.stat--auction .stat__icon { background: var(--auction-soft); color: var(--auction); }
.stat--people .stat__icon { background: var(--people-soft); color: var(--people); }
.stat--ok .stat__icon { background: var(--ok-soft); color: var(--ok); }
.stat--brand .stat__icon { background: var(--brand-soft); color: var(--brand-dark); }
.stat--warn .stat__icon { background: var(--panel); color: var(--warn); }
.stat--alarm .stat__icon { background: var(--panel); color: var(--danger); }

/* الدلتا حبّةٌ: مقارنةٌ لا زخرفة، ومقروءةٌ في لمحة عند حافة البطاقة. */
.delta {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
}
.delta--up { color: var(--ok); background: var(--ok-soft); }
.delta--down { color: var(--danger); background: var(--danger-soft); }
.delta--flat { color: var(--muted); background: var(--line-soft); }

/* والجملة كاملةً تحت الرقم: اللون والسهم يقولان الاتجاه لمن يراهما، وهذه
   تقوله لمن لا يراهما. لا معلومةَ محمولةٌ على لونٍ وحده. */
.stat__delta-note { font-size: .72rem; color: var(--muted); }

/* الخطّ المصغَّر: شكلٌ لا رقم — والرقم مكتوبٌ فوقه. */
.stat__spark {
  inline-size: 100%;
  block-size: 2rem;
  margin-block: .1rem;
  overflow: visible;
}
.stat__spark polyline {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* يُرسم كما يُرسم بقلم: طولٌ كبيرٌ يكفي أي مسار، يتقلّص إلى صفر. */
  stroke-dasharray: 400;
  animation: draw .8s ease-out .25s backwards;
}
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.stat--auction .stat__spark polyline { stroke: var(--auction); }
.stat--warn .stat__spark polyline { stroke: var(--warn); }

.stat__detail { font-size: .75rem; color: var(--ink-soft); line-height: 1.55; }

/* التذييل خلف فاصل، كما في القالب المرجعي: يقول إلى أين، والبطاقة كلها هي
   الهدف القابل للّمس. */
.stat__action {
  margin-block-start: auto;
  padding-block-start: .6rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: .75rem;
  font-weight: 500;
  color: var(--brand-dark);
}
a.stat:hover .stat__action { color: var(--ink); }

/* التصنيف بالحافة، والخلفية تبقى بيضاء: ستّ بطاقاتٍ ملوّنة الخلفية تصير
   لوحةَ ألوانٍ لا لوحةَ أرقام. */
.stat--money { border-inline-start-color: var(--money); }
.stat--money .stat__value { color: var(--money); }
.stat--auction { border-inline-start-color: var(--auction); }
.stat--auction .stat__value { color: var(--auction); }
.stat--people { border-inline-start-color: var(--people); }
.stat--people .stat__value { color: var(--people); }
.stat--ok { border-inline-start-color: var(--ok); }
.stat--ok .stat__value { color: var(--ok); }
.stat--brand { border-inline-start-color: var(--brand); }
.stat--brand .stat__value { color: var(--brand-dark); }

/* التنبيه وحده يلوّن خلفيته، لأنه وحده يريد أن يُقرأ أولاً. */
.stat--warn {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-line, var(--line));
}
.stat--warn .stat__value { color: var(--warn); }

.stat--alarm {
  border-inline-start-color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}
.stat--alarm .stat__value { color: var(--danger); }

/* نبضةٌ واحدة عند الدخول ثم سكون. اللوحة أداةُ عملٍ لا لافتة. */
.stat--alarm { animation: stat-in .34s cubic-bezier(.2,.7,.3,1) backwards, alarm-once 1.1s ease-out .3s 1; }
@keyframes alarm-once {
  0%   { box-shadow: 0 0 0 0 rgb(180 35 24 / .28); }
  100% { box-shadow: 0 0 0 14px rgb(180 35 24 / 0); }
}

/* ---- الرسوم ------------------------------------------------------------ */

/* `min(21rem, 100%)` لا `21rem` — T842.
 *
 * ‏`minmax(21rem, 1fr)` تعني «لا أقلّ من ٢١rem مهما ضاقت الشاشة»، فعلى
 * ٣٢٠ بكسل يصير العمود ٣٣٦ ويُخرج الصفحة من حدّها. و`min(…, 100%)` تقرأ:
 * ٢١rem حين تتّسع، وعرضُ الحاوية حين لا تتّسع — وهو ما يُقصد دائماً من
 * `auto-fit`، ولا يقوله `minmax` وحده. قِيس: الصفحة كانت تفيض ٣٢ بكسل. */
.board-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: 1rem;
}

.figure {
  padding: 1.15rem 1.25rem 1.3rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  animation: stat-in .34s cubic-bezier(.2,.7,.3,1) .3s backwards;
}

.figure__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-block-end: 1rem;
  padding-block-end: .7rem;
  border-block-end: 1px solid var(--line-soft);
}
.figure h2 { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink); }
.figure__action { font-size: .75rem; color: var(--brand-dark); }
.figure__note { font-size: .72rem; color: var(--muted); }

.bars__share {
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
  padding-inline-start: .5rem;
}

/* أشرطة أفقية والرقم مكتوبٌ بجوارها: قطاعان متقاربان في دائرة لا يُقرآن إلا
   بالتحويم، والتحويم لا يقع على لمسة. */
/* ---- الدائرة ومفتاحها -------------------------------------------------- */

.wheel { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.wheel__disc {
  flex: none;
  inline-size: 8.5rem;
  block-size: 8.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: wheel-in .6s cubic-bezier(.2,.7,.3,1) .2s backwards;
}
@keyframes wheel-in { from { transform: rotate(-90deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* الثقب يحمل الإجمالي: الدائرة تقول النسب، ومركزها يقول «من كم». */
.wheel__hole {
  inline-size: 5.6rem;
  block-size: 5.6rem;
  border-radius: 50%;
  background: var(--panel);
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.15;
}
.wheel__hole strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.wheel__hole span { font-size: .7rem; color: var(--muted); }

.wheel__key { flex: 1 1 11rem; margin: 0; padding: 0; list-style: none; }
.wheel__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding-block: .35rem;
  border-block-end: 1px solid var(--line-soft);
  font-size: .82rem;
}
.wheel__item:last-child { border-block-end: 0; }
.wheel__dot { inline-size: .6rem; block-size: .6rem; border-radius: 3px; background: var(--line); }
/* بترتيب `WHEEL` في `dashboard.py` — قائمتان تتطابقان، واختبارٌ يثبّت ذلك. */
.wheel__dot[data-slice="0"] { background: #1a9aa1; }
.wheel__dot[data-slice="1"] { background: #4aa5df; }
.wheel__dot[data-slice="2"] { background: #8c6ad6; }
.wheel__dot[data-slice="3"] { background: #c9891a; }
.wheel__dot[data-slice="4"] { background: #21a06a; }
.wheel__dot[data-slice="5"] { background: #e05a4c; }
.wheel__name { color: var(--ink); }
.wheel__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.wheel__share { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .75rem; min-inline-size: 2.6rem; text-align: end; }

.bars { inline-size: 100%; border-collapse: collapse; }
.bars th {
  text-align: start;
  font-weight: 500;
  font-size: .85rem;
  color: var(--ink);
  padding-block: .35rem;
  white-space: nowrap;
}
.bars__track { inline-size: 100%; padding-inline: .7rem; }
.bars__fill {
  display: block;
  block-size: .55rem;
  min-inline-size: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--auction), var(--brand));
  transform-origin: right center;   /* RTL: تنمو من حيث تبدأ */
  animation: bar-grow .55s cubic-bezier(.2,.7,.3,1) .18s backwards;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bars__count {
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  text-align: end;
  color: var(--ink);
  padding-inline-start: .4rem;
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  block-size: 9.5rem;
}
.spark__day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  block-size: 100%;
  gap: .3rem;
}
.spark__bar {
  inline-size: 100%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--brand), var(--auction));
  transform-origin: bottom;
  animation: spark-grow .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.spark__day:nth-child(1) .spark__bar { animation-delay: .18s; }
.spark__day:nth-child(2) .spark__bar { animation-delay: .23s; }
.spark__day:nth-child(3) .spark__bar { animation-delay: .28s; }
.spark__day:nth-child(4) .spark__bar { animation-delay: .33s; }
.spark__day:nth-child(5) .spark__bar { animation-delay: .38s; }
.spark__day:nth-child(6) .spark__bar { animation-delay: .43s; }
.spark__day:nth-child(7) .spark__bar { animation-delay: .48s; }
@keyframes spark-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.spark__count { font-size: .7rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.spark__label { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .stat__value { font-size: 1.5rem; }
  .spark { block-size: 7rem; }
}

/* ===========================================================================
   لوحة المظهر — الدرج الذي يختار منه المالك. T833.
   ---------------------------------------------------------------------------
   لماذا درجٌ لا صفحة إعدادات: الاختيار بصريّ، ومن يجرّب لوناً يريد أن يرى
   الشاشة التي يعمل عليها تتغيّر تحته لا أن ينتقل إلى شاشةٍ أخرى ثم يعود.

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

   ولا `<form>` هنا **بحكمٍ صريح**: `test_the_chrome_writes_nothing_but_the_way_out`
   يشترط أن الشيء الوحيد الذي يُرسِل في إطار اللوحة هو الخروج. درجٌ فيه نموذج
   يكسره — وهو محقّ: إطارٌ يكتب هو إطارٌ يُضغط عليه بالخطأ من كل صفحة.
   ======================================================================== */

.themer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(21rem, 92vw);
  z-index: 40;
  background: var(--panel);
  border-inline-start: 1px solid var(--line);
  box-shadow: -18px 0 44px rgb(23 32 51 / .16);
  padding: 1.1rem 1.2rem 2rem;
  overflow-y: auto;
  transition: transform .26s cubic-bezier(.2, .7, .3, 1), visibility .26s;
}
/* `visibility` مع `transform` لا `transform` وحدها: درجٌ مُزاحٌ خارج الشاشة
   تبقى أزراره في ترتيب `Tab` — فمن يتنقّل بلوحة المفاتيح يمرّ بأربعة عشر زرّاً
   لا يراها قبل أن يصل إلى الصفحة. و`visibility` تُخرجها من الترتيب وتبقى
   قابلةً للانتقال، فلا ينكسر الانزلاق. */
.themer[aria-hidden="true"] { transform: translateX(-100%); visibility: hidden; }
.themer[aria-hidden="false"] { transform: none; visibility: visible; }

.themer__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-block-end: .8rem;
  margin-block-end: .4rem;
  border-block-end: 1px solid var(--line-soft);
}
.themer__head h2 { margin: 0; font-size: .98rem; font-weight: 700; }
.themer__head .icon-btn { margin-inline-start: auto; }

.themer__group { margin-block: 1.05rem; }
.themer__group > h3 {
  margin: 0 0 .1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.themer__hint { margin: 0 0 .5rem; font-size: .75rem; color: var(--muted); line-height: 1.5; }

/* الخيارات صفٌّ من الأزرار، والمختار يُعرَف بـ`aria-pressed` لا بصنفٍ — فما
   يقوله قارئُ الشاشة وما يراه المبصر شيءٌ واحد، ولا يفترقان عند تعديلٍ لاحق. */
.themer__row { display: flex; flex-wrap: wrap; gap: .4rem; }
.themer__opt {
  flex: 1 1 auto;
  min-inline-size: 4.2rem;
  padding: .42rem .6rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.themer__opt:hover { background: var(--raised); color: var(--ink); box-shadow: none; }
.themer__opt[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* عيّنات اللون: الدائرة هي اللون نفسه، فالاختيار يُرى قبل أن يُقرأ اسمه.
   والاسم مكتوبٌ في `aria-label` لمن لا يرى الدائرة. */
.themer__swatches { display: flex; flex-wrap: wrap; gap: .55rem; }
.themer__swatch {
  inline-size: 2.1rem;
  block-size: 2.1rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.themer__swatch:hover { transform: scale(1.1); box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgb(23 32 51 / .18); }
.themer__swatch[aria-pressed="true"] {
  border-color: var(--panel);
  box-shadow: 0 0 0 2px var(--swatch);
}
.themer__swatch[data-accent="gold"]    { --swatch: #a88118; }
.themer__swatch[data-accent="azure"]   { --swatch: #3991c9; }
.themer__swatch[data-accent="violet"]  { --swatch: #8b5cf6; }
.themer__swatch[data-accent="teal"]    { --swatch: #159e95; }
.themer__swatch[data-accent="emerald"] { --swatch: #109d5f; }
.themer__swatch[data-accent="amber"]   { --swatch: #bc7a0d; }
.themer__swatch[data-accent="rose"]    { --swatch: #ef4463; }

.themer__reset {
  inline-size: 100%;
  margin-block-start: 1.2rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  font-size: .82rem;
}
.themer__reset:hover { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); box-shadow: none; }

/* الحجاب: نقرةٌ خارج الدرج تغلقه — وهو أول ما تجرّبه اليد قبل أن تبحث عن ×. */
.themer-veil {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgb(9 13 21 / .38);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.themer-veil[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

/* ---- صقلُ لوحة التحليلات على النظام الجديد ---------------------------- */

/* الشريط العلويّ للبطاقة بلون تصنيفها: أرقّ من حافةٍ بعرض ٣px على الجانب،
   ويُرى في المظهرين — الحافة الجانبية كانت تختفي تحت ظلّ البطاقة في الداكن. */
.stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 30%, transparent));
  opacity: 0;
  transition: opacity .18s ease;
}
a.stat:hover::before, a.stat:focus-visible::before { opacity: 1; }
.stat--money::before { background: linear-gradient(90deg, var(--money), color-mix(in srgb, var(--money) 25%, transparent)); }
.stat--auction::before { background: linear-gradient(90deg, var(--auction), color-mix(in srgb, var(--auction) 25%, transparent)); }
.stat--people::before { background: linear-gradient(90deg, var(--people), color-mix(in srgb, var(--people) 25%, transparent)); }

.stat { border-radius: var(--radius-lg); }
.figure { border-radius: var(--radius-lg); }

/* الرقم الكبير يعدّ إلى قيمته عند أول رسم — والقيمة النهائية مكتوبةٌ في
   النصّ نفسه، فمن أطفأ الحركة أو قرأ بقارئ شاشة يرى الرقم كاملاً لا صفراً. */
.stat__value { transition: color .2s ease; }

/* الظلّ يرتفع مع الحافة: التحويم يقول «هذه بابٌ» بشيئين لا بواحد. */
a.stat:hover { box-shadow: var(--shadow-lift); }

/* الشبكة تتنفّس على الشاشات العريضة بدل أن تمطّ ستّ بطاقاتٍ إلى عرض الشاشة. */
@media (min-width: 96rem) {
  .board-alarms, .board-stats { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
}

/* الشاشات الصغيرة: الدرج يملأ العرض، والشريط يُخفى لا يُطوى. */
@media (max-width: 56rem) {
  .themer { inline-size: 100vw; }
  .topbar { padding: .55rem .9rem; }
}

/* ===========================================================================
   شاشة المزادات: شريط الأدوات، والنوافذ، وتخصيص الأعمدة — T846
   ======================================================================== */

.toolbar { margin: 0 0 .9rem; }
/* خليّةُ أفعالِ الصفّ: رسومٌ متجاورة بمساحة لمسٍ كافية. T852.

   والحدُّ الأدنى ٢٫٢ريم لأن هدفَ اللمس أصغرُ من ذلك يُخطئه الإصبع — والرسمُ
   وحده ١ريم. والاسمُ في `title`/`aria-label` لا في النصّ: أربعُ كلماتٍ في
   خليّةٍ تكسر الصفَّ سطرين، والجدولُ هو غرضُ الشاشة. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem;
  white-space: nowrap;
}

.row-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.row-actions a:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* الحذفُ وحده بلونه: الفعلُ الذي لا يُتراجَع عنه لا يُميَّز باللون فقط —
   له شاشتُه التي تسأل وترفض — ولكنّ لونَه يجعل الإصبعَ يتردّد قبل أن يصل. */
.row-actions a.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}
.row-actions .row-icon { margin-inline-end: 0; inline-size: 1.05rem; block-size: 1.05rem; }

/* ---- قوائمُ النشاط المطويّة ----------------------------------------------
   ملفُّ العميل ستُّ قوائمَ بمئتي صفٍّ مجتمعة، ومن يفتحه يسأل عن **واحدة**.
   فكلٌّ مطويّةٌ بعدّادها ظاهر: المطويُّ يُعرف حجمُه قبل فتحه، والصفحةُ تُقرأ
   في شاشةٍ واحدة بدل تمريرٍ طويل.

   و`<details>` لا لوحُ ألسنةٍ بجافاسكربت: تعمل بلا سطرٍ واحد، وتبقى في
   الطباعة، ويفتحها `Ctrl+F` حين يبحث الموظّف عن رقمٍ داخلها. T857 */
.activity {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin: 0 0 .7rem;
  overflow: hidden;
}

.activity > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

/* المثلّثُ الافتراضيّ يقع على اليسار في RTL أحياناً ويختلف بين المتصفّحات —
   فيُطفأ ويُرسم سهمٌ بحرفٍ واحد يدور مع الفتح. */
.activity > summary::-webkit-details-marker { display: none; }

.activity > summary::after {
  content: "‹";
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 1.1rem;
  transition: transform .15s ease;
}

.activity[open] > summary::after { transform: rotate(-90deg); }
.activity > summary:hover { background: var(--raised); }
.activity__title { font-size: .95rem; }

/* الجدولُ داخلها بلا حدٍّ ولا ظلّ: المطويّةُ هي البطاقة، وحدّان متداخلان
   يصنعان خطّاً مزدوجاً عند الحافة. */
.activity table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* ---- شبكةُ «البيانات الكاملة» --------------------------------------------
   أربعون حقلاً في عمودٍ واحد شريطٌ يُمرَّر، وفي شبكةٍ تُمسح بالعين. و`<dl>`
   هو الوسمُ الصحيح لزوجِ اسمٍ وقيمة، فيُعلنه قارئُ الشاشة زوجاً لا صفَّ جدول
   بلا رأس. T857 */
.record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .1rem .9rem;
  margin: 0 0 1.3rem;
  padding: .8rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.record__pair {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 0;
  border-block-end: 1px solid var(--line-soft);
}

.record dt {
  flex: 0 0 9.5rem;
  color: var(--muted);
  font-size: .78rem;
}

.record dd {
  margin: 0;
  font-size: .86rem;
  overflow-wrap: anywhere;
}

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

   فأربعٌ أو خمسٌ في صفٍّ واحد على الشاشة العادية، وارتفاعُها ثلثُ الأولى:
   عنوانٌ ورقمٌ وسطرٌ خافت، والرسمُ صغيرٌ في الحافة. T852. */
.board-stats--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap: .65rem;
  margin-block-end: 1.1rem;
}

.board-stats--compact .stat {
  gap: .25rem;
  padding: .75rem .95rem;
  border-radius: 12px;
  border-inline-start-width: 3px;
  box-shadow: var(--shadow-sm);
  min-block-size: 6.2rem;
  justify-content: space-between;
}

.board-stats--compact .stat__value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: start;
  direction: rtl;
}
.board-stats--compact .stat__label {
  font-size: .8rem;
  font-weight: 600;
}
.board-stats--compact .stat__icon {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  padding: .45rem;
  border-radius: 9px;
}
.board-stats--compact .stat__top {
  margin-block-end: .35rem;
}

.board-stats--compact .stat__detail {
  font-size: .72rem;
  line-height: 1.4;
  color: var(--muted);
}
.board-stats--compact .stat__action { font-size: .72rem; }

/* ---- الألسنة -------------------------------------------------------------
   «الأدوار» كانت صفحةً في الشريط بجوار «إدارة المشرفين»، وكلتاهما لا تُفتح
   إلا من الأخرى عملياً — فصارتا لسانين على شاشةٍ واحدة (T852).

   والحالةُ محمولةٌ على `aria-current` لا على اللون وحده: من لا يميّز التخفيت
   يحتاج أن يعرف أين هو، وقارئُ الشاشة يقرؤها «الصفحة الحالية». والخطُّ السفليّ
   بسمك بكسلين لأن الحدَّ الكامل يجعل اللسان زرّاً — وهو ليس زرّاً. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-block-end: 1rem;
  border-block-end: 1px solid var(--line);
}

.tab {
  padding: .5rem .9rem;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.tab:hover { color: var(--ink); border-block-end-color: var(--line); }

.tab[aria-current="page"] {
  color: var(--brand-dark);
  border-block-end-color: var(--brand);
}

/* سطرُ الشرح تحت العنوان. جملةٌ واحدة تقول ما تجيبه الشاشة — وv1 يضعها في
   كل صفحةٍ من صفحاته، وهي إحسانٌ فيه: العنوان يسمّي، وهذا يقول لماذا تُفتح. */
.lede {
  margin-block: -.4rem 1.1rem;
  max-inline-size: 62ch;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7;
}

/* رسمٌ صغير داخل خليّة جدول — التاجُ بجوار «المالك» مثلاً. يرث `currentColor`
   فيتلوّن مع نصّه، و`aria-hidden` في القالب لأنه تزيينٌ والاسمُ مكتوبٌ بجواره. */
.row-icon {
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -.12em;
  margin-inline-end: .2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* زر الإجراء الرئيسي في رأس الصفحة: يبرز بلون المنظومة المصمت لتمييز الإنشاء عن التصدير */
/* زرُّ «طباعة» في إقرار الخروج يحمل رسمَ طابعةٍ بدل `🖨️` — وهي صفحةٌ تُطبَع
   فعلاً: الإيموجي يخرج من الطابعة ملوَّناً بأسلوب نظام التشغيل بجوار نصٍّ
   أسود. (T837 — الذيل) */
.page__actions .btn-primary svg { inline-size: .9rem; block-size: .9rem; flex: none; }
.page__actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--brand-solid);
  color: #fff;
  border-color: var(--brand-solid);
}
.page__actions .btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 2px 8px var(--ring);
}

/* شريط الفلاتر: بطاقة متكاملة تجمع البحث الفوري والقوائم المنسدلة والفرز المتقدم دون كسر السطر */
.filters {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: .85rem 1rem;
  margin: 0 0 1.1rem;
  box-shadow: var(--shadow);
}
.filters__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  inline-size: 100%;
}
.filters__main input[type="search"] {
  flex: 1 1 14rem;
  min-inline-size: 11rem;
}
.filters__main select {
  flex: 0 0 auto;
  min-inline-size: 8.5rem;
}

/* ---- شريطُ فلاترٍ في سطرٍ واحد ------------------------------------------
   شاشةُ «ما بعد البيع» تحمل بحثاً وخمسَ قوائم وزرّاً وإلغاءً — سبعةُ عناصرَ
   تلفُّ سطرين بالعرض الافتراضيّ (`min-inline-size: 8.5rem` × ٥ لا تتّسع).
   والمالك يريدها سطراً واحداً منظّماً.

   فالبحثُ يأخذ ضعفَ حصّة القائمة (`flex: 2`)، والقوائمُ تتقاسم الباقي
   بالتساوي وتُسمَح بالانكماش (`min-inline-size: 0` يلغي الأدنى الموروث)،
   والزرُّ ثابت. `nowrap` على المكتب، ويعود `wrap` تحت ١١٠٠ بكسل كي لا
   تنسحق على شاشةٍ ضيّقة. */
.filters--row .filters__main {
  flex-wrap: nowrap;
}
.filters--row .filters__main > * {
  min-inline-size: 0;
}
.filters--row .filters__main input[type="search"] {
  flex: 2 1 9rem;
}
.filters--row .filters__main select {
  flex: 1 1 6.5rem;
  min-inline-size: 0;
}
.filters--row .filters__main .btn-primary,
.filters--row .filters__reset {
  flex: 0 0 auto;
}
.filters--row .filters__reset {
  margin-inline-start: 0;
}
@media (max-width: 1100px) {
  .filters--row .filters__main {
    flex-wrap: wrap;
  }
  .filters--row .filters__main select {
    flex: 1 1 8rem;
  }
}
/* زر الفلترة المتقدمة في شريط الفلاتر */
.btn-advanced {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-advanced:hover, .btn-advanced.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.btn-advanced__icon {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.filters__reset {
  font-size: .82rem;
  color: var(--muted);
  text-decoration: underline;
  padding: .3rem .5rem;
  margin-inline-start: auto;
}
.filters__reset:hover {
  color: var(--danger);
}

/* شريط تحكم الجدول: يجمع إحصاء النتائج مع زر تخصيص الأعمدة فوق رأس الجدول */
.table-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .75rem;
}
/* أربعةُ أصنافٍ كُتبت في قوالب شاشة المزادات (T846 · T853) ولم تُوصَف —
   وجدها `ops/checks/every_class_is_styled.py` أوّلَ ما شُغِّل. وصنفٌ بلا قاعدة
   لا يكسر شيئاً، ولذلك يبقى: الصفحة تُرسم وكلُّ فحصٍ أخضر والشكلُ وحده خطأ. */

/* أرقامٌ تستقيم خاناتُها في عمود — مثل `td.count` تماماً، ولكن على عنصرٍ
   داخل الخليّة لا على الخليّة نفسها. */
.tnum { font-variant-numeric: tabular-nums; }

/* أفعالُ شريط الجدول: تُدفَع إلى الحافة المقابلة للمعلومة. */
.table-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-inline-start: auto;
}

/* «١٢ صفّاً · صفحة ٢ من ٥» — سطرٌ خافتٌ تحت الجدول. */
.table-footer__count {
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* استمارةُ نقلةٍ داخل صفحة المزاد: سطرٌ واحد ينكسر على الضيّق، لا بطاقةٌ
   تفصل الفعل عمّا يقع عليه. */
.operations-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-block: .6rem 1rem;
}

.table-bar__info {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* تخصيص الأعمدة: قائمة منسدلة عائمة فوق الصفحة تحفظ التفضيل بالجهاز ولا تدفع بيانات الجدول */
.columns {
  position: relative;
  display: inline-block;
  margin: 0;
}
.columns summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink-soft);
  user-select: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: .35rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.columns summary:hover {
  color: var(--brand-dark);
  border-color: var(--field-border);
}
.columns[open] > summary {
  color: var(--brand-dark);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.columns__grid {
  position: absolute;
  inset-block-start: calc(100% + .4rem);
  inset-inline-end: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: .75rem;
  min-inline-size: 18.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem .8rem;
  margin: 0;
}
.columns__grid label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
  padding: .2rem .35rem;
  border-radius: calc(var(--radius) - 2px);
  transition: background .12s ease, color .12s ease;
}
.columns__grid label:hover {
  background: var(--raised);
  color: var(--ink);
}
.columns__grid input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
  margin: 0;
}

/* رقم المزاد كمعرّف مميز: يسهل النقر والتعرف عليه */
.row-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
}
.row-num:hover {
  text-decoration: underline;
}

/* المصغّرة: مقاسٌ ثابت في الترميز وفي الورقة لمنع القفزات عند وصول الصورة */
.thumb--none {
  display: inline-block;
  inline-size: 3.1rem;
  block-size: 2.4rem;
  border-radius: .4rem;
  background: var(--line-soft);
}

/* الحبّة زرّاً: تفاعل بصري واضح عند الوقوف مع المحافظة على معيار الحالة */
.pill--button {
  cursor: pointer;
  border: 1px solid var(--line);
  font: inherit;
  font-size: .74rem;
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.pill--button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--ring);
  border-color: currentColor;
}
.pill--filter {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .7rem;
}

/* تذييل الجدول والتنقل بين الصفحات: يلتحم بأسفل الغلاف ككتلة متصلة */
.table-footer, .scroller + p, table + p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: -.4rem 0 1.6rem;
  padding: .65rem 1rem;
  border: 1px solid var(--line);
  border-block-start: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--panel);
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
}
.pagination {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--raised);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.pagination__btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  text-decoration: none;
}
.pagination__current {
  font-size: .78rem;
  color: var(--muted);
  padding: 0 .3rem;
}

/* ---- النوافذ -------------------------------------------------------------
   `<dialog>` يعطينا حبسَ التركيز وEscape و`::backdrop` بلا سطر جافاسكربت.
   والعرض `min(30rem, 92vw)` فلا تفيض على الهاتف. */
.modal {
  /* التوسيطُ صريحٌ لا متروكٌ للمتصفّح: قاعدةُ `dialog` الافتراضية تضع
     `margin: auto`، وأيُّ قاعدةٍ سابقة تمسّ `margin` على العناصر تُلغيها —
     فتنزل النافذةُ إلى أسفل الشاشة وتظهر نصفُها. وقع ذلك هنا. */
  margin: auto;

  /* وسقفُ الارتفاع مع تمريرٍ داخليّ: ثمانَ عشرةَ قدرةً في نافذةٍ بلا سقف
     تمتدّ خارج الشاشة، فيختفي زرُّ الحفظ تحت الحافة ولا يُعرف أنه هناك. */
  max-block-size: min(86vh, 48rem);
  overflow: auto;

  inline-size: min(30rem, 92vw);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-lift);
}
/* نافذةُ الصلاحيات أعرض: ثمانَ عشرةَ قدرةً في عمودٍ من ٣٠ريم تصير قائمةً
   تُمرَّر، والقرارُ يحتاج أن تُرى كلُّها معاً — «ماذا يملك هذا الدور» سؤالٌ
   عن المجموعة لا عن سطر. */
.modal--wide { inline-size: min(46rem, 94vw); }

/* ---- سندُ الدفع في نافذة --------------------------------------------------
   نافذةٌ أعرضُ قليلاً تحمل مستنداً منظّماً في أقسام: رأسٌ فيه الرقمُ وأزرارُ
   الفعل، ثم شبكةُ «الأطراف/المركبة» جنباً إلى جنب، ثم كتلةُ المبلغ. القصدُ
   أن يُقرأ السندُ في نظرةٍ لا أن يُمرَّر. T869. */
.voucher { inline-size: min(42rem, 94vw); }
.voucher__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-block-end: .8rem;
  margin-block-end: 1rem;
  border-block-end: 2px solid var(--line);
}
.voucher__head h2 { margin: 0; }
.voucher__num {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.voucher__actions { display: flex; gap: .4rem; flex: 0 0 auto; }
/* «الأطراف» و«المركبة» عمودان على المكتب، يطويان إلى واحدٍ على الضيّق. */
.voucher__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1rem;
  margin-block-end: 1rem;
}
.voucher__block h3,
.voucher__money h3 {
  margin: 0 0 .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}
.voucher__block .record,
.voucher__money .record {
  grid-template-columns: 1fr;
  margin: 0;
}
/* الإجمالي المستحقّ أبرزُ سطرٍ في السند: هو ما يُقرأ أوّلاً. */
.voucher__total { font-size: 1.15rem; font-weight: 800; }

/* ---- طباعةُ السند وحدَه ---------------------------------------------------
   لا تُطبَع النافذةُ نفسها: `<dialog open>` في «الطبقة العليا» (top layer)،
   وطباعتُها bug في المتصفّح يُخرج **صفحةً فارغة** — وقع ذلك. فالجسمُ يُنسَخ
   عند الطباعة إلى `#voucherPrint` (عنصرٌ في التدفّق العاديّ) ويُطبَع هو.

   `#voucherPrint` مخفيٌّ على الشاشة دائماً؛ وعند الطباعة، إن كان ممتلئاً،
   يُخفى كلُّ ما عداه ويظهر وحدَه. والشرطُ `:not(:empty)` يُبقي طباعةَ الصفحة
   العاديّة (والسندُ مغلق، فالهدفُ فارغ) سليمةً. */
/* طباعةُ السند تجري في `<iframe>` مستقلٍّ بأنماطه (انظر `after_sales.js`)، لا
   بطباعة هذه الصفحة — فلا حاجةَ إلى قواعد `@media print` هنا. `<dialog open>`
   في الطبقة العليا يُرسَم فوق أيّ طباعةٍ للصفحة، فكانت تخرج صفحةٌ فارغة. */

/* القدرات: عمودان على الشاشة العادية، وواحدٌ على الضيّقة. والمعرّفُ الخام
   بجوار الاسم العربيّ لأنه ما يظهر في رسائل الرفض وفي `tasks.md` — فمن يقرأ
   «`money.act` غير مسموحة» يجدها هنا بعينها. */
.caps {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .9rem 1rem;
  margin: 0 0 1rem;
}

.caps legend { padding-inline: .4rem; font-size: .82rem; font-weight: 600; color: var(--muted); }

.caps__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .3rem .2rem;
  font-weight: 400;
  cursor: pointer;
}

.caps__row:hover { background: var(--line-soft); border-radius: 6px; }
.caps__row code { font-size: .72rem; color: var(--muted); }

@media (min-width: 46rem) {
  .caps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
  .caps legend { grid-column: 1 / -1; }
}

.modal::backdrop { background: rgb(0 0 0 / .5); }
.modal h2 { margin: 0 0 .9rem; font-size: 1.1rem; }
.modal p { margin: 0 0 .8rem; }
.modal label { display: block; margin-block-end: .25rem; font-size: .86rem; font-weight: 600; }
.modal input[type="text"],
.modal input[type="datetime-local"],
.modal select { inline-size: 100%; max-inline-size: none; }
.modal .count { display: block; margin-block-start: .25rem; }
.modal__buttons { display: flex; gap: .5rem; margin: 1.1rem 0 0; }
.modal__buttons button[type="submit"] { flex: 1; }

/* عمود التحكم أيقونات — T846. مربّعٌ مريح بنقلة ناعمة وحالة خطر مميزة */
/* الأزرارُ تلتفّ ولا تُقصّ. كانت `nowrap`، فثمانيةُ أيقوناتٍ في خانةٍ
   واحدة تخرج خارج حدّ العمود على الشاشة الضيّقة — يراها الموظّف واحدةً
   ويظنّ الباقيَ مفقوداً. صفّان من أربعةٍ يُريان كلَّها. */
.actions { white-space: normal; }
.actions .act { flex: none; }
td.actions { min-inline-size: 9rem; }
.actions { display: flex; flex-wrap: wrap; gap: .15rem; }
.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin: .1rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.act svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.act:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: translateY(-1px);
}
.act--edit:hover {
  background: rgba(34, 197, 94, .12);
  border-color: rgb(34, 197, 94);
  color: rgb(22, 163, 74);
}
.act--export:hover {
  background: rgba(20, 184, 166, .12);
  border-color: rgb(20, 184, 166);
  color: rgb(13, 148, 136);
}
.act--cars:hover {
  background: rgba(234, 179, 8, .12);
  border-color: rgb(234, 179, 8);
  color: rgb(202, 138, 4);
}
.act--reschedule:hover {
  background: rgba(14, 165, 233, .12);
  border-color: rgb(14, 165, 233);
  color: rgb(2, 132, 199);
}
.act--fees:hover {
  background: rgba(168, 85, 247, .12);
  border-color: rgb(168, 85, 247);
  color: rgb(147, 51, 234);
}
/* الخطرُ يُقرأ ساكناً لا عند المرور. T860
   ----------------------------------------------------------------------
   كانت الألوانُ كلُّها على `:hover` وحده، فالعمودُ سبعُ أيقوناتٍ رماديّةٍ
   متطابقة: «التعديل» و«الحذف» لا يُفرَّق بينهما إلا بتمرير المؤشّر وقراءة
   التلميح. وزرُّ الحذف بالذات لا يُكتشَف بالنقر.
   فالخطرُ وحده يحمل لونَه ساكناً — لونان في العمود لا سبعة، والفرقُ يُقرأ
   قبل النقر لا بعده. */
.act--danger,
.act--del {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  color: var(--danger);
}
.act--danger:hover,
.act--del:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.act--grants:hover {
  background: rgba(99, 102, 241, .12);
  border-color: rgb(99, 102, 241);
  color: rgb(79, 70, 229);
}
.act--pages:hover {
  background: rgba(14, 165, 233, .12);
  border-color: rgb(14, 165, 233);
  color: rgb(2, 132, 199);
}
.act--key:hover {
  background: rgba(245, 158, 11, .12);
  border-color: rgb(245, 158, 11);
  color: rgb(217, 119, 6);
}

/* ملاحظات المشرفين والتدقيق الإداري */
.staff-notes {
  margin-block-start: 1.5rem;
  padding: .85rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.staff-notes > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-soft);
  user-select: none;
}
.staff-notes > summary:hover {
  color: var(--brand);
}
.staff-notes__icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  color: var(--brand);
  flex-shrink: 0;
}
.staff-notes__body {
  margin-block-start: .75rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.65;
}
.staff-notes__body p {
  margin: .35rem 0;
}

/* ---- شاشة المزادات: عناصر العرض المتطابقة مع v1 — T849 ---- */

/* الفلترة المتقدمة المنبثقة: تطفو فوق الصفحة كقائمة منسدلة ولا تدفع الجدول */
.dropdown-filter {
  position: relative;
  display: inline-block;
}
.btn-advanced {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--panel);
  color: var(--ink-soft);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-advanced:hover,
.btn-advanced.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.btn-advanced__icon {
  inline-size: .95rem;
  block-size: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dropdown-filter__menu {
  position: absolute;
  inset-block-start: calc(100% + .4rem);
  inset-inline-start: 0;
  z-index: 40;
  min-inline-size: 19rem;
  padding: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.dropdown-filter__menu[hidden] {
  display: none;
}
.dropdown-filter__menu .field {
  margin-block-end: .8rem;
}
.dropdown-filter__menu label {
  display: block;
  margin-block-end: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.dropdown-filter__menu input {
  inline-size: 100%;
}

/* عمود المعاينة والمصغّرات */
.table-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 60px;
  block-size: 42px;
  margin-inline-end: 0;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: .35rem;
}

/* مكدّس الإحصاءات والخلايا المركبة */
.stat-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}
.car-title {
  font-weight: 700;
  color: var(--ink);
  font-size: .84rem;
  display: block;
}
.auction-sub {
  color: var(--muted);
  font-size: .74rem;
  display: block;
}
.stat-main {
  font-weight: 600;
  color: var(--ink);
  font-size: .82rem;
  display: block;
}
.stat-sub {
  color: var(--muted);
  font-size: .74rem;
  display: block;
}

/* الفترة الزمنية: تاريخ البدء بالأخضر والانتهاء بالأحمر */
.time-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.time-start {
  color: var(--ok);
  font-weight: 700;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.time-end {
  color: var(--danger);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

/* شارة الحالة مع نقطة الحالة الدائرية */
.auction-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.status-dot {
  display: inline-block;
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: 50%;
  background: currentColor;
}



/* خانةُ المقياس: رقمٌ واحد يُقرأ بلمحة، ووصفٌ تحته، وشريطٌ حين للرقم مقام.
   ثلاثةُ أسطرٍ متساوية الوزن تُقرأ سطراً سطراً — والصفُّ فيه ستُّ خاناتٍ
   كهذه، فستّةَ عشرَ سطراً في صفٍّ واحد. */
.metric { display: flex; flex-direction: column; gap: .12rem; min-inline-size: 0; }
.metric__n {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.metric__label { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.metric__note {
  font-size: .74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 12rem;
}

/* الشريط: نسبةٌ تُرى قبل أن تُقرأ. `role="img"` مع `aria-label` كاملة، فمن
   لا يراه يسمع الرقمين — ولا يعتمد المعنى على اللون وحده. */
.bar {
  display: block;
  block-size: .3rem;
  inline-size: 100%;
  max-inline-size: 7rem;
  margin-block-start: .25rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.bar > i { display: block; block-size: 100%; background: var(--ok); border-radius: 999px; }
.bar--warn > i { background: var(--warn); }

/* ---- شاشة تفاصيل المزاد وتوزيع عناصره — T850 ---- */

/* إلغاء قيود النماذج العريضة داخل شاشات المزاد */
#bulkForm,
form.filters {
  max-width: none;
  inline-size: 100%;
}
#bulkForm {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.operations-panel .operations-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  inline-size: 100%;
}

/* كارت المزاد الرئيسي والشبكة الوصفية */
.auction-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-block-end: 1.25rem;
}
.auction-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--line-soft);
}
.auction-card__title-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.auction-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}
.auction-card__badges {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.auction-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap: .75rem;
  margin-block-start: 1rem;
}
.auction-meta-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: .75rem .95rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.auction-meta-item:hover {
  border-color: var(--line);
  background: var(--panel);
}
.auction-meta-icon {
  flex: none;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: .45rem;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--brand-dark);
}
.auction-meta-icon svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auction-meta-body {
  min-inline-size: 0;
  flex: 1;
}
.auction-meta-label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  margin-block-end: .15rem;
}
.auction-meta-value {
  display: block;
  font-size: .94rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* لوحة إدارة العمليات ودورة الحياة */
.operations-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.4rem;
  margin-block-end: 1.4rem;
}
.operations-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
  padding-block-end: .75rem;
  border-block-end: 1px solid var(--line-soft);
}
.operations-panel__head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}
.operations-form__fields {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.operations-form__fields .field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
  min-inline-size: 14rem;
}
.operations-form__fields label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.operations-form__fields input,
.operations-form__fields select {
  inline-size: 100%;
  max-inline-size: none;
}
.operations-idle {
  padding: .65rem .9rem;
  background: var(--raised);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .84rem;
}
.operations-blocked {
  margin-block-start: .9rem;
  padding-block-start: .75rem;
  border-block-start: 1px dashed var(--line);
}
.operations-blocked__label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  margin-block-end: .45rem;
}
.operations-blocked__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.operations-blocked__list li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--raised);
  padding: .25rem .6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  font-size: .78rem;
}
.blocked-reason {
  color: var(--muted);
}

/* أزرار مساعدة */
.btn-danger-sm {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border: 1px solid var(--danger-line);
  border-radius: .4rem;
  background: var(--danger-soft);
  color: var(--danger);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn-danger-sm:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--panel);
  color: var(--ink-soft);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.code-font {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  direction: ltr;
  display: inline-block;
}
.pill--count {
  background: var(--line-soft);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink-soft);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-secondary:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

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

/* عنوانٌ للقارئ الآليّ وحده: النائبُ في الخانة يقول الاسمَ، وعنوانٌ فوقه
   يقوله مرّتين — لكن حقلاً بلا `<label>` لا يُعلَن اسمُه لقارئ الشاشة. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* شبكةُ الخانات: أعمدةٌ **متساوية** تلفّ بالتساوي. وبالـ`flex` كانت الثمانُ
   تتقاسم ما بقي من العرض فيقع ستٌّ في سطرٍ واثنتان في الثاني، وأعراضُها
   مختلفة — وذلك ما يجعل الشريط يُقرأ غيرَ منظَّم. */
.filters__grid {
  inline-size: 100%;
  display: grid;
  /* أعمدةٌ أضيق (8rem): ثمانُ خاناتٍ في صفٍّ واحد على الشاشة العريضة، لا
     ستٌّ وسطرٌ ناقص. وحقلُ الرقم لا يحتاج عرضَ حقلِ الاسم. */
  /* flexٌ يلفّ لا شبكة: الحقولُ بعرضٍ ثابتٍ صغير، والزرُّ **جنبها** في الطرف
     بعرض محتواه — لا في صفٍّ وحده. والعرضُ الثابت يمنع التمطيط على الشاشة
     العريضة، فتبقى صغيرةً كما طلب المالك، والفراغُ الزائد على الطرف. */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 1.1rem;
  row-gap: .7rem;
  align-items: center;
}
/* الخصوصيةُ عاليةٌ عمداً: قاعدةٌ عامّة `form[method="get"] input[type="search"]`
   تفرض `min-inline-size: 12rem` و`flex: 1 1 14rem`، فالحقلُ كان يطفح خارج
   خانته إلى 192 بكسل مهما ضاقت الشبكة. فنبطل الحدّ الأدنى والـflex هنا. */
.filters .filters__grid input[type="search"],
form[method="get"] .filters__grid input[type="search"] {
  flex: 0 0 8rem;
  inline-size: 8rem;
  min-inline-size: 8rem;
  max-inline-size: 8rem;
  block-size: 1.85rem;
  padding-inline: .55rem;
  font-size: .78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
/* الزرُّ جنب الحقول بعرض محتواه، لا خانةً في الصفّ. */
.filters__search {
  flex: 0 0 auto;
  margin: 0;
  block-size: 1.85rem;
  padding-inline: 1.3rem;
  font-size: .8rem;
}
.filters .filters__grid .filters__reset { flex: 0 0 auto; margin: 0; }
.filters__actions {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block-start: .5rem;
}
.filters__actions button[type="submit"] {
  margin: 0;
  block-size: 2rem;
  padding-inline: 1.6rem;
  font-size: .84rem;
  white-space: nowrap;
}

/* والتبويباتُ ثلاثةُ أعمدةٍ متساوية لا ثلاثةُ أسطرٍ متكدّسة. */
.filters__tabs {
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: .4rem 1.2rem;
  padding-block-end: .6rem;
  margin-block-end: .2rem;
  border-block-end: 1px solid var(--line-soft);
}

.filters .tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin-block-end: 0;
  padding-block: 0;
  border-block-end: none;
}
.filters .tabs .vf-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  margin-inline-end: .15rem;
}
.filters .tabs .vf-label::after { content: ":"; }
.filters .tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink-soft);
  text-decoration: none;
  margin-block-end: 0;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.filters .tabs .tab:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.filters .tabs .tab[aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.filters .tabs .tab[aria-current="page"] .pill {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
/* `.filters__main` هنا **لا يُلغي اللفَّ**: كانت هذه القاعدة أخصَّ من
   `.filters__main` الأساسية وبلا `flex-wrap`، فصفُّ الفلاتر في شاشة المزادات
   يطفح أفقياً بدل أن يلفّ. */
.filters .filters__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.filters .filters__main button[type="submit"] {
  margin-inline-start: 0;
  padding: .35rem 1.4rem;
  font-size: .84rem;
}

/* عددا المزاد تحت اسمه: رقمان بارزان ووصفٌ خافت — لا سطرُ نصٍّ متساوي الوزن.
   الموظّف يفتح الشاشة ليعرف «كم فيه وكم متاح»، فيجب أن يُقرآ قبل الاسم لا
   بعد جملةٍ طويلة. */
.auction-counts { display: block; margin-block-start: .2rem; font-size: .8rem; color: var(--muted); }
.auction-counts b { font-size: .95rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.auction-counts__on { color: var(--ok); }
.auction-counts__sep { margin-inline: .3rem; opacity: .5; }

/* ===========================================================================
   بطاقات الأدوار والصلاحيات — Role Cards Grid
   =========================================================================== */
.role-cards-grid {
  display: grid;
  /* `min(360px, 100%)` لا `360px` عارياً: حدٌّ أدنى مطلق أوسع من حاويته
     يدفع الشبكة خارج الشاشة، فتُسحب الصفحة أفقياً على الجوّال. T861 */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 1.25rem;
  margin-block: 1.5rem;
}

@media (max-width: 640px) {
  .role-cards-grid {
    grid-template-columns: 1fr;
  }
}

.role-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

.role-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand);
}

.role-card--owner {
  border-inline-start: 4px solid #d97706;
}

.role-card--builtin {
  border-inline-start: 4px solid var(--brand);
}

.role-card--custom {
  border-inline-start: 4px solid var(--auction);
}

.role-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-block-end: 1rem;
}

.role-card__identity {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.role-card__avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}

.role-card--owner .role-card__avatar {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.role-card__avatar svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.role-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.role-card__slug {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  color: var(--muted);
  direction: ltr;
  margin-block-start: .2rem;
}

.role-card__reason {
  margin-block: .4rem .85rem;
  padding: .5rem .75rem;
  background: var(--raised);
  border-radius: var(--radius);
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  border: 1px solid var(--line-soft);
}

.role-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-block-end: 1rem;
}

.role-card__metric-box {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.role-card__metric-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}

.role-card__metric-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.role-stat-link {
  color: var(--brand-dark);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 700;
}

.role-stat-link:hover {
  text-decoration: underline;
}

.role-card__caps-section {
  margin-block-end: 1.25rem;
  flex-grow: 1;
}

.role-card__caps-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-block-end: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.role-card__caps-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-block-size: 120px;
  overflow-y: auto;
  padding-inline-end: .25rem;
}

.cap-chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.3;
}

.role-card__footer {
  border-block-start: 1px solid var(--line);
  padding-block-start: .85rem;
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.role-card__lock-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

.role-card__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline-start: auto;
}

.btn-primary-sm {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  background: var(--brand-solid);
  border: 1px solid var(--brand-solid);
  border-radius: var(--radius);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, opacity .12s ease;
}

.btn-primary-sm:hover {
  opacity: .9;
}



/* «مراجعة العروض» — زرٌّ يحمل عدداً، ولذلك يُقرأ ساكناً. T860
   ----------------------------------------------------------------------
   بقيّةُ الأزرار أفعالٌ متاحة دائماً؛ وهذا **تنبيهٌ**: لا يظهر إلا حين تنتظر
   مركبةٌ قراراً، وعددُها عليه. ولونٌ لا يُرى إلا عند المرور يجعل التنبيه
   يُفوَّت — وهو الشيء الوحيد في الصفّ الذي يطلب فعلاً اليوم. */
.act--review {
  inline-size: auto;
  gap: .25rem;
  padding-inline: .35rem;
  border-color: color-mix(in srgb, rgb(245, 158, 11) 45%, var(--line));
  background: rgba(245, 158, 11, .1);
  color: rgb(180, 83, 9);
}
.act--review:hover {
  background: rgba(245, 158, 11, .2);
  border-color: rgb(245, 158, 11);
  color: rgb(146, 64, 14);
}
.act__count {
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* سطرٌ يقول أين يُفعَل ما لا يُفعَل هنا. T859 · T860
   ----------------------------------------------------------------------
   يظهر في نافذةٍ نُزع منها حقلٌ لأن نافذةً أخرى تملكه، وعلى شاشةٍ مُرشَّحة
   تقول على أيّ شيءٍ رُشِّحت. وهو **إرشادٌ لا تحذير**: هادئٌ بلا لون خطر،
   ومفصولٌ عن الحقول بخطٍّ جانبيّ كي لا يُقرأ عنواناً لما تحته. */
.hint {
  margin: .6rem 0;
  padding: .5rem .7rem;
  border-inline-start: 3px solid var(--line-strong, var(--line));
  border-radius: .3rem;
  background: var(--panel-soft, var(--panel));
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.6;
}
.hint strong { color: var(--ink); font-weight: 700; }
.hint a { color: var(--brand-dark); }

/* خطأُ حقلٍ تحت حقله. كان لوناً مكتوباً `style=""` ثلاثَ مرّاتٍ في قالبٍ
   واحد، والصنفُ الذي بجانبه لا يصفه أحد — فتغييرُ لون الأخطاء غداً يعني
   البحثَ في القوالب لا في الورقة. T861 */
.field-error {
  display: block;
  margin-block-start: .3rem;
  color: var(--danger);
  font-size: .78rem;
  font-weight: 600;
}

/* زرُّ الرجوع فوق عنوان الصفحة. T864
   ----------------------------------------------------------------------
   فوقه لا بجانبه: العنوانُ هو الشاشة التي أنت فيها، والرجوعُ سياقٌ لها —
   وسطرٌ صغير فوقه يُقرأ «أنت هنا، وجئت من هناك» بلا أن ينافس العنوان. */
.page__back {
  display: block;
  margin-block-end: .2rem;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
.page__back:hover { color: var(--brand-dark); text-decoration: underline; }

/* غلافُ التمرير بعرضٍ مقيَّد أو بفراغٍ تحته — صنفاً لا `style=""`.
   والصنفُ يجب أن يبقى آخرَ ما في الوسم قبل `<table>`: حارسُ الأغلفة
   يقرأ `class="…scroller…">` ملتصقاً بالجدول، و`style` بعده يُخفيه عنه. */
.scroller--narrow { max-inline-size: 42rem; margin-block-end: 1.5rem; }
.scroller--spaced { margin-block-end: 2rem; }

/* الشريطُ المجمَّع على مركبات المزاد. T865
   ----------------------------------------------------------------------
   ملتصقٌ بأسفل النافذة (`sticky`) لأن الجدولَ ثلاثمئةُ صفّ: من اختار في
   أعلاه ثم مرّر لأسفل يجب أن يبقى الفعلُ في يده، لا أن يعود ليجده. */
/* الشريطُ **فوق** الجدول لا تحته، ولاصقٌ من أعلى: المزادُ ثلاثمئة سيارة،
   ومن اختار في الصفّ الأربعين لا يجد شريطاً تحته إلا بعد تمريرٍ إلى القاع.
   وفوقَه يبقى في المكان الذي جاء منه الاختيار. والظلُّ انقلب معه — كان
   يُلقى إلى أعلى ليفصله عمّا فوقه، وصار إلى أسفل. */
.bulkbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-block: 0 .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--brand);
  border-radius: .6rem;
  background: var(--panel);
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}
.bulkbar[hidden] {
  display: none !important;
}
.bulkbar__count { font-size: .82rem; font-weight: 700; color: var(--ink); }
.bulkbar__count b { color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.bulkbar__field { display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 14rem; }
.bulkbar__field span { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.bulkbar__field input { flex: 1; min-inline-size: 0; }
.bulkbar__group { display: inline-flex; align-items: center; gap: .25rem; }
.bulkbar select,
.bulkbar input[type="text"] {
  padding: .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--panel);
  color: var(--ink);
  font-size: .8rem;
}
.bulkbar button {
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--panel);
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.bulkbar button:hover { background: var(--brand-soft); border-color: var(--brand); }
.bulkbar__danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.bulkbar__danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* عمودُ الاختيار: ضيّقٌ ولا يتمدّد مع الجدول. */
.pick { inline-size: 2.2rem; text-align: center; }

/* شريط فلاتر مركبات المزاد — T868.
   ----------------------------------------------------------------------
   تبويباتُ الحالة والصور والتسويق هي `.tabs`/`.tab` نفسُها — لا أصنافَ جديدة
   لسلوكٍ موجود. والصنفُ الوحيد هنا تسميةُ المجموعة («الحالة:»)، بلون النصّ
   الثانويّ على البطاقة — وهو زوجٌ مقيسٌ في الحارس، لا لونَ جديد. */
.vf-label {
  align-self: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- تخصيص الأعمدة: نافذةٌ ومكوّنٌ مشترك (T869) --------------------- */
.columns-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
  max-inline-size: 22rem;
  inline-size: 90vw;
  background: var(--panel);
  color: var(--ink);
  color-scheme: light dark;
}
.columns-modal form,
.columns-list { background: var(--panel); }
.columns-modal::backdrop { background: rgb(0 0 0 / 45%); }
.columns-modal form { padding: 1.1rem 1.2rem; }
.columns-modal__head h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.columns-modal__head p { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); }
.columns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-block-size: 22rem;
  overflow-y: auto;
}
.columns-list__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: grab;
}
.columns-list__row { background: var(--panel); }
.columns-list__row:hover { background: var(--raised); }
.columns-list__row.is-dragging { opacity: .5; border-color: var(--brand); }
.columns-list__grip { color: var(--muted); font-size: 1rem; cursor: grab; user-select: none; }
.columns-list__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  font-size: .88rem;
  cursor: pointer;
}
.columns-modal__foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-block-start: 1rem;
  padding-block-start: .8rem;
  border-block-start: 1px solid var(--line-soft);
}
.columns-modal__foot button[type="button"] {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .4rem 1rem;
  color: var(--ink-soft);
  cursor: pointer;
}

/* ---- استمارةُ المزاد المقسّمة (T870) --------------------------------- */
/* تملأ عرض المحتوى كاملاً — لا بطاقةٌ ضيّقةٌ يمينَ فراغٍ واسع. وثلاثةُ أعمدةٍ
   ثابتة تملأ كلَّ صفٍّ (لا `auto-fit` يخلّف أعمدةً فارغةً فتتكدّس الحقولُ في
   جانب). تتراجع إلى عمودين ثم عمود على الشاشات الأضيق. */
.auction-form { max-inline-size: none; }
.auction-form .form-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .auction-form .form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .auction-form .form-grid { grid-template-columns: 1fr; }
}
.form-section {
  margin-block-end: 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.form-section__title {
  margin: 0 0 .9rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--brand-dark);
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--line-soft);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem 1.1rem;
}
.form-grid .field { display: flex; flex-direction: column; gap: .3rem; }
/* حقلُ خانةِ الاختيار: الخانةُ والعنوانُ في صفٍّ أفقيّ، لا عنوانٌ فوق خانةٍ
   تمتدّ على العرض. */
.form-grid .field:has(input[type="checkbox"]) {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
}
.form-grid .field:has(input[type="checkbox"]) label { margin: 0; }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-grid .field label { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.form-grid .field input:not([type="checkbox"]):not([type="radio"]),
.form-grid .field select {
  inline-size: 100%;
  block-size: 2.3rem;
  padding-inline: .65rem;
  font-size: .88rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink);
}
.form-grid .field select { block-size: 2.4rem; }
.form-grid .field--error input,
.form-grid .field--error select { border-color: var(--danger); }
.field__hint { font-size: .76rem; color: var(--muted); }
.field__error { font-size: .78rem; color: var(--danger); }
.form-actions { display: flex; align-items: center; gap: .8rem; }
.btn-cancel {
  padding: .5rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
}
.btn-cancel:hover { background: var(--raised); }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ==== شريطُ التمرير وخاناتُ الاختيار — ثيمُ اللوحة في النظام كلّه (T871) ==== */

/* شريطُ التمرير: رفيعٌ بلون الثيم لا الأسودُ العريض الافتراضيّ. يُطبَّق على
   كل ما يُمرَّر في اللوحة — الجداول، والنوافذ، والقوائم — مصدرٌ واحد. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* خاناتُ الاختيار: مربّعٌ بلون الثيم يمتلئ بالعلامة عند التحديد، لا المربّعُ
   الرماديُّ الافتراضيّ المختلفُ بين المتصفّحات. `accent-color` سطرٌ واحدٌ
   يلوّنها في كل متصفّحٍ حديث ويبقي سلوكَها الأصليّ (تركيزٌ، لوحةُ مفاتيح). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
  inline-size: 1.05rem;
  block-size: 1.05rem;
  cursor: pointer;
}

/* ---- أفعالُ الصفّ المفردة: نقلٌ وحذف — نظيرُ عمود التحكّم في v1 (T872) --- */
/* «نقل» ليس خطراً ولا فعلاً عادياً: يحرّك سيارةً بين مزادين، فلونٌ ثالثٌ
   هادئٌ (brand) يميّزه عن «تفاصيل/تعديل» المحايدة وعن «حذف» الحمراء. */
.act--move {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand-dark);
}
.act--move:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

.row-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
  max-inline-size: 26rem;
  inline-size: 90vw;
  background: var(--panel);
  color: var(--ink);
}
.row-modal::backdrop { background: rgb(0 0 0 / 45%); }
.row-modal form { padding: 1.2rem 1.3rem; }
.row-modal__title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; }
.row-modal__field { display: flex; flex-direction: column; gap: .3rem; margin-block-end: .9rem; }
.row-modal__field span { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.row-modal__field input,
.row-modal__field select {
  inline-size: 100%;
  block-size: 2.3rem;
  padding-inline: .65rem;
  font-size: .88rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink);
}
.row-modal__note {
  margin: 0 0 1rem;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
}
.row-modal__foot {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line-soft);
}
.row-modal__foot button[type="button"] {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .45rem 1.1rem;
  color: var(--ink-soft);
  cursor: pointer;
}

/* ==== تصميمٌ موحّدٌ لكل النوافذ في النظام (T874) ==================== */
/* يستهدف عنصرَ `dialog` نفسَه، فيشمل `.modal` و`.columns-modal` و`.row-modal`
   وأيَّ نافذةٍ قادمة بلا تكرار. القواعدُ الخاصّة بكلٍّ (المقاس) تبقى، وهذا
   يوحّد الأرضيّةَ والحدّ والظلّ والحركة. */
dialog[open] {
  animation: dialog-in .16s cubic-bezier(.2, .7, .3, 1);
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* الخلفُ المموّه: زجاجيٌّ شفّافٌ لا حجبٌ أسودُ صلب — يُبقي سياقَ الشاشة
   مرئياً خلف النافذة، فيُقرأ أنها طبقةٌ فوق العمل لا شاشةٌ أخرى. */
dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
}

/* الظلُّ العميقُ والحدُّ الناعم: يرفعان النافذةَ عن الخلف المموّه. تُطبَّق على
   الثلاثة صراحةً لأن `box-shadow` كان مختلفاً بين `.modal` و`.row-modal`. */
dialog.modal,
dialog.columns-modal,
dialog.row-modal {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 1rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
    0 24px 60px -12px rgb(0 0 0 / 45%),
    0 8px 20px -8px rgb(0 0 0 / 35%);
}

/* نافذةُ التفاصيل/التعديل المحقونة (T875): أوسعُ لأنها تحمل استمارةً بأقسام
   أو شبكةَ تفاصيل — لا سطرَ تأكيدٍ كنوافذ الصفّ. */
.row-ajax-modal {
  inline-size: min(48rem, 94vw);
  max-block-size: 88vh;
  padding: 1.4rem 1.5rem;
}
.row-ajax-modal .auction-form,
.row-ajax-modal .form-section { max-inline-size: none; }

/* ---- شبكةُ تفاصيل السيارة: زوجُ اسمٍ وقيمة، بحقول v1 (T875) ---------- */
/* كلُّ حقلٍ خليّةٌ عموديّة: عنوانٌ صغيرٌ خافتٌ فوق، وقيمةٌ واضحةٌ تحته —
   لا `space-between` أفقيٌّ يقذف القيمةَ إلى الطرف المقابل فتقفز العين. وثلاثةُ
   أعمدةٍ على الشاشة العريضة، تنزل إلى عمودٍ على الضيّقة. */
.vehicle-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .1rem .4rem;
  margin: 0 0 1rem;
}
.vehicle-facts > div {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .5rem .6rem;
  border-radius: var(--radius);
}
.vehicle-facts > div:hover { background: var(--raised); }
.vehicle-facts dt {
  font-weight: 600;
  color: var(--muted);
  font-size: .74rem;
  margin: 0;
}
.vehicle-facts dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.vehicle-facts dd a { font-weight: 600; }
.vehicle-facts .money { font-variant-numeric: tabular-nums; }

.vehicle-facts .fact--pending { color: var(--muted); font-size: .8rem; font-weight: 400; }
.vehicle-facts__foot { margin: 1.1rem 0 0; }

/* ---- زرُّ التسويق على الصفّ: toggle لا حبّة عرض (T877) --------------- */
.mkt-toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  font-size: .76rem;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mkt-toggle:hover { border-color: var(--brand); color: var(--brand-dark); }
.mkt-toggle.is-on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.mkt-toggle::before { content: "📣"; font-size: .7rem; opacity: 0; }
.mkt-toggle.is-on::before { opacity: 1; }
.mkt-toggle:disabled { opacity: .5; cursor: wait; }
/* ---- صفُّ فلاترٍ تحت رأس الجدول — أسلوبُ v1 -------------------------------
   كان بحثُ كل عمودٍ في صندوقٍ منفصلٍ فوق الجدول؛ والمالك أراد أسلوبَ العرض
   القديم: مُدخَلٌ صغيرٌ **تحت كل عمود** محاذٍ له. الصفُّ لاصقٌ تحت الرأس عند
   التمرير كالرأس نفسِه، فيبقى الفلترُ مرئياً على جدولٍ طويل. T878 */
.col-filters th {
  padding: .25rem .35rem;
  background: var(--raised);
  position: sticky;
  /* تحت صفِّ الرأس مباشرةً: الرأسُ لاصقٌ عند 0، وارتفاعُه ~2.4rem. */
  top: 2.6rem;
  z-index: 2;
}
.col-filter {
  inline-size: 100%;
  min-inline-size: 0;
  padding: .3rem .45rem;
  font-size: .78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.col-filter:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring);
}

/* ---- كروتُ اختيار المزاد — أسلوبُ عرض v1 (`chooser.php`) -----------------
   الاختيارُ كروتٌ لا جدول: بطاقةُ مزادٍ تُنقَر كلُّها، أكبرُ هدفَ لمسٍ وأوضحُ
   إيقاعاً من صفٍّ يُقرأ يميناً ويساراً. T879 */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.2rem;
}
.pick-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pick-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.pick-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.pick-card__id {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--raised);
  padding: .12rem .5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.pick-card__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}
.pick-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
/* شريحةٌ صغيرة — بيانٌ واحدٌ لا يُفعَل. تُستعمل في كروت المزاد والسيارة. */
.chip {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--raised);
  border: 1px solid var(--line);
  padding: .18rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chip--count { color: var(--brand-dark); border-color: var(--brand); }
/* حبّةٌ برسمٍ داخلها: الرسمُ `<svg>` مضمَّنٌ لا محرف `🎨`/`🏷️`/`👤` — وكان
   المحرفُ يرسمه نظامُ التشغيل ملوّناً بأسلوبه، وهو ما رفضه المالك (T837).
   و`inline-flex` لأن الرسمَ والكلمةَ سطرٌ واحد لا سطران على الالتفاف. */
.chip:has(svg) { display: inline-flex; align-items: center; gap: .3rem; }
.chip svg { inline-size: .85rem; block-size: .85rem; flex: none; }
.arch-card__noimg svg { inline-size: 1.6rem; block-size: 1.6rem; }
.arch-card__actions .btn-sm svg,
.arch-card__actions .btn-odoo svg { inline-size: .85rem; block-size: .85rem; vertical-align: -.15em; }
.pick-card__cta {
  margin-block-start: auto;
  padding: .55rem .8rem;
  background: var(--brand-solid);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  text-align: center;
  border-radius: var(--radius);
}

/* ---- كروتُ سيارات المزاد — أسلوبُ عرض v1 (`manage.php`) ------------------
   الجدولُ صار كروتاً بطلب المالك: بطاقةٌ لكل سيارة تحمل صورتَها وحالتَها
   وأزرارَها. الصورةُ أوّلاً لأنها ما يُميّز السيارةَ في نظرة على الساحة. T880 */
.veh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.2rem;
}
.veh-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.veh-card:hover { border-color: var(--brand); box-shadow: var(--shadow-lift); }
.veh-card__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--raised);
  overflow: hidden;
}
.veh-card__img img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* الطبقةُ السفلى: تظهر حين لا صورةَ أو حين تفشل الصورةُ فتُزال من فوقها. */
.veh-card__noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* فجوةٌ بين الرسم والكلمة: الرسمُ `<svg>` مضمَّنٌ لا محرف `📷`، فلا مسافةَ
     نصّيّةٌ تفصلهما من تلقاء نفسها. T837 */
  gap: .35rem;
  color: var(--muted);
  font-size: .82rem;
}
.veh-card__badge {
  position: absolute;
  inset-block-end: .4rem;
  inset-inline-start: .4rem;
  background: rgb(0 0 0 / .72);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: var(--radius);
}
.veh-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .8rem .9rem;
}
.veh-card__title { margin: 0; font-size: .98rem; font-weight: 800; }
.veh-card__title a { color: var(--ink); text-decoration: none; }
.veh-card__title a:hover { color: var(--brand-dark); }
.veh-card__meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.veh-card__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.veh-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-block-start: .3rem;
  padding-block-start: .6rem;
  border-block-start: 1px solid var(--line-soft);
}
.veh-card__inline { display: inline; margin: 0; }

/* السيارةُ المخفيّةُ عن العملاء: تُعتَّم قليلاً وتُوسَم بشريطٍ مائل، فيُعرَف
   في نظرةٍ أيُّها مطويٌّ عن القوائم — دون إخفائه عن الموظّف الذي يديره. */
/* المركبةُ التي جاء الموظّفُ من أجلها من «بحث عن سيارة» (`?focus=`).
   حدٌّ يبقى ووميضٌ ينطفئ: الوميضُ يقول «هنا» في اللحظة الأولى، والحدُّ يبقى
   ليُجيب بعد ثانيتين حين يكون الموظّفُ قد رفع عينَه عن الشاشة ثمّ عاد.
   ووميضٌ وحده — كما في v1 (`mv-focus-row`، ٢٫٦ ثانية ثمّ يُحذف الصنف) —
   يترك من فاتته اللحظةُ أمام جدولٍ لا تعليمَ فيه.

   و`prefers-reduced-motion` تُسقط الحركةَ وتُبقي الحدّ: التعليمُ معلومة، لا زينة. */
.veh-card--focus {
  outline: 2px solid var(--gold, #a88118);
  outline-offset: -2px;
  scroll-margin-block: 96px;  /* الترويسةُ لاصقةٌ بارتفاع ٥٨ — بلا هذا يقف الصفُّ تحتها */
}
.veh-card--focus { animation: veh-focus-flash 2.4s ease-in-out 1; }
@keyframes veh-focus-flash {
  0%, 100% { background: transparent; }
  15%, 55% { background: color-mix(in srgb, var(--gold, #a88118) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .veh-card--focus { animation: none; }
}

.veh-card--hidden { opacity: .62; }
.veh-card--hidden .veh-card__img::after {
  content: "مخفيّة";
  position: absolute;
  inset-block-start: .4rem;
  inset-inline-end: .4rem;
  background: rgb(0 0 0 / .72);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: var(--radius);
}
/* أيقونتا الرؤية على الكارت: «إخفاء» محايدة، و«إظهار» تلفت النظر (مخفيّةٌ
   تنتظر إعادةَ عرض) بلونِ التنبيه. تركبان نمطَ `.act` العام. */
.act--hide:hover { color: var(--ink); border-color: var(--line); }
.act--show { color: var(--warn, #b45309); border-color: var(--warn, #b45309); }
.act--show:hover { background: var(--warn-soft, #fef3c7); }

/* ---- نافذةُ صور المركبة — رفعٌ وعرضٌ في مكان واحد ------------------------
   أعرضُ من نوافذ النماذج: المعرضُ شبكةُ صورٍ تحتاج فُسحة. رأسٌ ثابتٌ فيه
   الاسمُ وزرُّ الإغلاق، وجسمٌ يُمرَّر تحته. T882 */
.images-modal { inline-size: min(52rem, 94vw); padding: 0; }
.images-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: 1rem 1.3rem;
  border-block-end: 1px solid var(--line);
  position: sticky;
  inset-block-start: 0;
  background: var(--panel);
  z-index: 1;
}
.images-modal__title { margin: 0; font-size: 1.02rem; font-weight: 800; }
.images-modal__scroll { padding: 1.1rem 1.3rem 1.3rem; }
.modal__close {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink-soft);
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.modal__close:hover { border-color: var(--brand); color: var(--ink); }
/* زرُّ الإغلاق رسمٌ مضمَّن لا محرف `✕`: نافذتان في اللوحة تُغلقان، وكانت
   واحدةٌ منهما بالرسم والأخرى بالمحرف. و`inline-flex` ليتوسّط الرسمُ المربّعَ
   كما كان المحرف يتوسّطه. (T837 — الذيل) */
.modal__close { display: inline-flex; align-items: center; justify-content: center; }
/* و`flex: none` لازمٌ لا زينة: الزرُّ صار حاوياً مرناً ليتوسّط الرسمُ فيه،
   والعنصرُ المرن ينكمش افتراضياً — فقِيس عرضُ الرسم على الشاشة **صفراً**
   وارتفاعُه ١٤٫٤ (أي شريطٌ رأسيّ لا صليب). */
.modal__close svg { inline-size: .9rem; block-size: .9rem; flex: none; }
.gallery-msgs { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }

/* بطاقةُ مزادٍ بلا سيارات في مُنتقي التعديل السريع: لا تُفتح، فتُعتّم ويغيب
   زرُّها — الصفرُ في وجه الكارت لا خلف الضغطة. */
.pick-card--empty { opacity: .55; cursor: default; }
.pick-card--empty:hover { border-color: var(--line); box-shadow: var(--shadow); transform: none; }
.pick-card__cta--off { background: var(--raised); color: var(--muted); }

/* ---- تعديل سريع للعدادات — كروتُ سياراتٍ يحفظ كلٌّ منها وحده. T883 -------- */
.qe__bar {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0 0 1rem;
}
.qe__hint { margin: 0; color: var(--muted); font-size: .85rem; }
.qe__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.qe__search { position: relative; flex: 1 1 18rem; display: flex; align-items: center; }
/* الأيقونة في بداية السطر المنطقيّة (يمينُ RTL)، والحشوُ المنطقيّ يُبعد النصّ
   عنها — بحشوٍ فيزيائيّ كانت تركب الكلامَ في العربية. */
.qe__search-ic { position: absolute; inset-inline-start: .75rem; font-size: .85rem; opacity: .6; pointer-events: none; }
.qe__search input {
  inline-size: 100%;
  padding-block: .55rem;
  padding-inline-start: 2.2rem;
  padding-inline-end: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
}
.qe__search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }

/* صفُّ الفلاتر: قائمةٌ منسدلة لكل حقلٍ عدا المسافة ورقم الموقف. تُبنى خياراتُها
   من التعدادات (لوحة/وقود/حالة) ومن القيم الحاضرة فعلاً (محرك/مفتاح). */
.qe__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.qe__filter { display: inline-flex; flex-direction: column; gap: .15rem; }
.qe__filter > span { font-size: .68rem; font-weight: 800; color: var(--muted); padding-inline-start: .2rem; }
.qe__filter select {
  padding: .4rem 1.8rem .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  min-inline-size: 8rem;
}
.qe__filter select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.qe__filter select.is-on { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.qe__filters-reset {
  align-self: flex-end;
  padding: .4rem .7rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.qe__filters-reset:hover { color: var(--ink); border-color: var(--line); }
.qe__count {
  padding: .4rem .7rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 800;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qe__more { text-align: center; padding: 1rem 0 .2rem; }

.qe-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}
.qe-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: .9rem 1rem;
  transition: border-color .15s ease, background .2s ease;
  min-inline-size: 0;
}
.qe-card--off { display: none; }
.qe-card--saved { border-color: var(--ok, #16a34a); background: var(--ok-soft, rgb(22 163 74 / .06)); }
.qe-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding-block-end: .6rem;
  margin-block-end: .7rem;
  border-block-end: 1px solid var(--line-soft);
}
.qe-card__title { font-weight: 800; font-size: .92rem; color: var(--ink); line-height: 1.4; min-inline-size: 0; overflow-wrap: anywhere; }
.qe-card__sub { display: block; margin-block-start: .2rem; font-family: var(--mono, ui-monospace, monospace); font-size: .74rem; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
/* سطرُ التعارض: يظهر حين يردّ الخادم ٤٠٩ «عُدِّل هذا الكارت من نافذةٍ أخرى»،
   ويحمل ما صار إليه الحقل. لونُ الخطر لأنه رفضُ كتابة، وداخلَ الكارت لا في
   توستٍ يختفي بعد ثانيتين — الموظّفُ يحتاج أن يقرأه وهو ينظر إلى الخانة. */
.qe-card__clash {
  margin: 0 0 .7rem; padding: .45rem .6rem; border-radius: var(--radius);
  border: 1px solid var(--danger, #dc2626);
  background: var(--danger-soft, rgb(220 38 38 / .07));
  color: var(--ink); font-size: .78rem; font-weight: 700; line-height: 1.6;
  overflow-wrap: anywhere;
}
.qe-card__act { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.qe-card__status { min-inline-size: 1.4rem; text-align: center; font-size: 1rem; }
.qe-card__save {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--raised); color: var(--ink-soft);
  inline-size: 2.1rem; block-size: 2.1rem; border-radius: var(--radius); cursor: pointer; padding: 0;
}
.qe-card__save svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qe-card__save:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.qe-card__save:disabled { opacity: .5; cursor: wait; }
.qe-field { margin-block-end: .8rem; min-inline-size: 0; }
.qe-field:last-child { margin-block-end: 0; }
.qe-label { display: block; margin-block-end: .3rem; font-size: .74rem; font-weight: 800; color: var(--muted); }
.qe-card input[type=number], .qe-card input[type=text] {
  inline-size: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.qe-card input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.qe-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.qe-chip { display: inline-flex; cursor: pointer; margin: 0; }
.qe-chip input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.qe-chip span {
  display: inline-block;
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  color: var(--ink-soft);
  background: var(--panel);
  white-space: nowrap;
  transition: .12s;
}
.qe-chip:hover span { border-color: var(--brand); color: var(--brand-dark); }
.qe-chip input:checked + span { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }
.qe-chip--other input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.qe-other { margin-block-start: .4rem; }
.qe-photo {
  display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .5rem;
  padding: .35rem .7rem; border: 1.5px dashed var(--line); border-radius: var(--radius);
  font-size: .76rem; font-weight: 800; color: var(--ink-soft); cursor: pointer;
}
.qe-photo:hover { border-color: var(--brand); border-style: solid; color: var(--brand-dark); }
.qe-photo.has { border-style: solid; border-color: var(--ok, #16a34a); color: var(--ok, #16a34a); }
/* بعد الحفظ: الزرُّ يبقى أخضرَ يقول «محفوظة» — أثرٌ دائمٌ فلا يُظنّ أنّ الرفع
   ضاع حين تُمسح المعاينة. */
.qe-photo.saved { border-style: solid; border-color: var(--ok, #16a34a); background: var(--ok-soft, rgb(22 163 74 / .08)); color: var(--ok, #16a34a); }
.qe-photo__prev { inline-size: 1.4rem; block-size: 1.4rem; border-radius: 4px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.qe-spin {
  display: inline-block; inline-size: .85rem; block-size: .85rem;
  border: 2.4px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: qeSpin .7s linear infinite; vertical-align: -1px;
}
@keyframes qeSpin { to { transform: rotate(360deg); } }
.qe-toast {
  position: fixed; inset-block-start: 1.1rem; inset-inline-start: 50%; transform: translateX(50%);
  background: var(--ink); color: var(--panel); padding: .6rem 1.1rem; border-radius: var(--radius);
  font-weight: 800; font-size: .84rem; z-index: 9999; box-shadow: var(--shadow-lift);
}
/* ولونٌ مثبَّت هنا أيضاً، وهذا عطلٌ **قائمٌ قبل هذا العمل** كشفه القياس على
   الشاشة: `--ok` يقلب في المظهر الداكن إلى `#63d3a4` — أخضرَ فاتح، وعليه نصٌّ
   أبيض بنسبة **١٫٨٤** (والحدّ ٤٫٥). أي أن رسالةَ «حُفظ» كانت لا تُقرأ في
   المظهر الداكن أصلاً. و`#12704a` (قيمةُ `--ok` في المظهر الفاتح) نسبتُه مع
   الأبيض **٦٫١٠** في المظهرين — والتوستُ طبقةٌ تحمل خلفيّتها ولا ترث الصفحة،
   فلا معنى لأن يتبدّل لونُها مع المظهر. و`--bad` غيرُ معرَّفٍ أصلاً فالبديل
   `#dc2626` هو العامل، ونسبتُه **٤٫٨٣** — يمرّ، فتُرك. */
.qe-toast--ok { background: #12704a; color: #fff; }
.qe-toast--err { background: var(--bad, #dc2626); color: #fff; }
/* نغمةٌ ثالثة: «حُفظت البيانات ورُفضت الصورة» و«حُفظ ٩ وفشل ١» ليستا فشلاً —
   شيءٌ كُتب فعلاً. كانتا تحملان `⚠` في النصّ واللونَ الأحمر معاً، فالمحرف
   يقول تحذيراً واللونُ يقول خطأً. (T837 — الذيل)

   ولونٌ مثبَّت لا `var(--warn)`: الرمزُ يقلب `--warn` في المظهر الداكن إلى
   `#f0c268` — أصفرَ شاحب، وعليه نصٌّ أبيض بنسبة ١٫٩، أي لا يُقرأ. والمثبَّت
   `#8a5a00` نسبتُه مع الأبيض **٥٫٩٣** في المظهرين معاً، لأن التوستَ طبقةٌ
   فوق الصفحة تحمل خلفيّتها معها ولا ترث شيئاً. */
.qe-toast--warn { background: #8a5a00; color: #fff; }
/* الرسمُ والكلمة سطرٌ واحد، والرسمُ يرث `currentColor` — وهو ما لا يفعله
   المحرفُ الذي كان يبدأ كلَّ رسالة. */
.qe-toast { display: inline-flex; align-items: center; gap: .45rem; }
.qe-toast svg { flex: none; }
/* علامةُ حالة الحفظ في رأس الكارت: رسمٌ لا محرف، ولونٌ يقول الحالة. */
.qe-card__status { display: inline-flex; align-items: center; justify-content: center; gap: .12rem; }
.qe-card__status.is-ok { color: var(--ok, #16a34a); }
.qe-card__status.is-bad { color: var(--bad, #dc2626); }
.qe__search-ic { display: inline-flex; }
.qe__search-ic svg { inline-size: .95rem; block-size: .95rem; }
.qe-photo__lbl { display: inline-flex; align-items: center; gap: .3rem; }
#qeSaveAll { display: inline-flex; align-items: center; gap: .35rem; }
#qeSaveAll svg { inline-size: .9rem; block-size: .9rem; flex: none; }
@media (max-width: 600px) { .qe-list { grid-template-columns: 1fr; } }

/* ---- كتالوج السيارات: أدواتٌ صغيرة مشتركة. T884 ------------------------- */
/* حقلُ تاريخٍ بلصيقةٍ فوقه في صفّ الفلاتر — ليُعرف أيُّ تاريخٍ يُطلب. */
.filters__date { display: inline-flex; flex-direction: column; gap: .15rem; font-size: .68rem; font-weight: 800; color: var(--muted); }
.filters__date input { font: inherit; font-size: .82rem; font-weight: 700; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
.filters__date input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
/* زرٌّ يبدو رابطاً — لفتح نافذةٍ من داخل خلية جدول (الصور). */
.link-btn { appearance: none; border: 0; background: none; padding: 0; color: var(--brand-dark); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.link-btn:hover { text-decoration: underline; }
/* خليّةُ موعد المزاد: بدايةٌ ونهايةٌ سطرين. */
.sched { display: flex; flex-direction: column; gap: .1rem; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
/* `overflow-wrap: anywhere` لا `break-word`: الثانيةُ تكسر عند الرسم ولا
   تُنقِص **العرضَ الأدنى** للعمود، فالجدولُ يبقى عريضاً كما كان. والأولى
   تُنقِصه، فيُصبح للمتصفّح أن يضغط عمودَ الشاصي حين يضيق الغلاف وحده.

   ولماذا لا `max-width` بعددِ محارف: رقمُ اللوحة `.mono` أيضاً وهو ستّةُ
   محارف — وسقفٌ ثابتٌ يكسره بلا سبب. وبهذه القاعدة لا يُكسر شيءٌ ما دام
   المكان يتّسع؛ الشاصي (١٧ محرفاً، ١٦٣ بكسلاً وهو أعرضُ عمودٍ في الكتالوج)
   هو أوّلُ ما يلتفّ لأنه أطولُ ما في الصفّ. وثمنُه: صفُّ الكتالوج يصير
   سطرين حين يضيق العرض. */
.mono { font-family: var(--mono, ui-monospace, monospace); font-size: .82rem; overflow-wrap: anywhere; }

/* صفُّ فلاتر الكتالوج — شبكةٌ من حقولٍ معنونة (لصيقةٌ فوق كل حقل كـ v1)،
   وصفُّ الأزرار يمتدّ العرضَ كلَّه أسفلها. */
/* `form.cat-filters` لا `.cat-filters` وحده: قاعدةُ `form[method="get"]`
   العامّة تضع flex بتخصيصٍ أعلى من الصنف، فيلزم مطابقتُها بالعنصر لتُغلَب. */
form.cat-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: start;
  gap: .8rem;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cat-filters__field { display: flex; flex-direction: column; gap: .3rem; min-inline-size: 0; }
/* تخصيصٌ أعلى من `form[method="get"] label { display:none }` (تُخفي لصائقَ
   فلاتر v2 اعتماداً على placeholder): هنا اللصيقةُ فوق الحقل مطلوبةٌ صراحةً. */
form.cat-filters .cat-filters__field label { display: block; font-size: .74rem; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-filters__field input, .cat-filters__field select {
  inline-size: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  box-sizing: border-box;
}
.cat-filters__field input:focus, .cat-filters__field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
/* تخصيصٌ أعلى من `form[method="get"] input[type="search"]` (٠،١،٢): تلك تضع
   `flex:1 1 14rem`، وفي حقلٍ عموديّ يصير الأساسُ ارتفاعاً (224px). نُبطلها. */
form.cat-filters .cat-filters__field input,
form.cat-filters .cat-filters__field select { flex: 0 0 auto; min-inline-size: 0; }
.cat-filters__actions { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; }

/* صفُّ «إضافة سيارة يدويًا» أعلى الشاشة — موضعُ v1، تحت البطاقات. */
.cat-add-row { margin: 0 0 1rem; }

/* ---- الخروج ونقل الملكية: ألسنةٌ وبوابةٌ وإقرار. T887 --------------------- */
.ex-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-block-end: 1px solid var(--line); }
.ex-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: .6rem .9rem; font: inherit; font-weight: 800; font-size: .88rem;
  color: var(--muted); border-block-end: 3px solid transparent; margin-block-end: -1px;
}
.ex-tab:hover { color: var(--ink); }
.ex-tab.is-on { color: var(--brand-dark); border-block-end-color: var(--brand-solid); }
.ex-tab__n { display: inline-block; min-inline-size: 1.2rem; padding: 0 .35rem; margin-inline-start: .25rem; font-size: .72rem; background: var(--raised); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.ex-tab.is-on .ex-tab__n { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
/* **نموذجٌ داخل خليّةِ جدول، فيُنزَع عنه رداءُ البطاقة صراحةً.** القاعدةُ
   العامّة `form {…}` تعطي كلَّ `<form>` في اللوحة خلفيةً وحدّاً وظلاً وحشوةَ
   ‏`1.2rem 1.4rem` و`margin-bottom: 1.25rem` — وهي بطاقةٌ صحيحةٌ لنموذجٍ في
   صفحة، وكارثةٌ لزرٍّ في صفّ: `margin` وحده كان منزوعاً هنا، فبقيت الحشوةُ
   والحدُّ فصار **كلُّ زرٍّ في الجدول داخل مربّعٍ، وارتفاعُ الصفّ ١٢٣px**.
   وهذه ثالثُ مرّة: `.sign-out` رفع الشريطَ العلويَّ إلى ٩٨px للسبب نفسه،
   و`.filters` قبله. من يكتب `<form>` في هذه اللوحة يرث البطاقةَ ما لم ينزعها. */
.ex-inline {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin: 0; padding: 0; max-width: none;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.ex-inline input[type=file] { max-inline-size: 11rem; font-size: .76rem; }

/* أزرارُ الإجراءات: أيقونةٌ ورسمةٌ ونصٌّ معاً، بأنميشن دخولٍ وتفاعلٍ عند المرور. */
.actions--nowrap { display: inline-flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.ex-act {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .32rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink-soft); font: inherit; font-size: .78rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
  /* **ولا أنميشنَ دخولٍ هنا.** كان `exActIn` يبدأ من `opacity: 0` و
     `scale(.92)` و`translateY(4px)`. وثلاثةُ ألسنةٍ من أربعةٍ تُبنى `hidden`،
     والمتصفّحُ **يوقف** أنميشن ما لا يُعرَض — فتبقى الأزرار عند اللقطة
     الأولى: مُصغَّرةً ومُزاحةً، أو **غيرَ مرئيّةٍ أصلاً** (`opacity: 0`)،
     ما دامت الصفحةُ في تبويبٍ خلفيّ. قِيس الاثنان على الشاشة: `matrix(0.92,
     0, 0, 0.92, 0, 4)` مع `both`، و`opacity: 0` مع `forwards`.
     وزرٌّ يختفي ثمنٌ لا تساويه حركةُ ثلث ثانية. وحركةُ المرور (`transition`)
     باقيةٌ: لا لقطةَ أولى لها تتجمّد عندها. */
}
.ex-act svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.ex-act:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); transform: translateY(-1px); }
.ex-act:hover svg { transform: scale(1.18) rotate(-6deg); }
.ex-act:active { transform: translateY(0) scale(.97); }
.ex-act--edit:hover { border-color: var(--warn, #b45309); color: var(--warn, #b45309); background: var(--warn-soft, #fef3c7); }
/* «إنشاء الخروج» أبرزُ قليلاً — فعلٌ رئيسيّ بلون العلامة. */
.ex-act--create { border-color: var(--brand); color: var(--brand-dark); }
.ex-act--create:hover { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }
.ex-act--papers:hover { border-color: var(--ok, #15803d); color: var(--ok, #15803d); background: var(--ok-soft, #dcfce7); }
/* «تأكيد النقل» فعلُ اللسان الرئيسيّ — يُقرأ قبل غيره في الصفّ. */
.ex-act--transfer { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.ex-act--transfer:hover { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }
.ex-upload { display: inline; margin: 0; }

/* مجموعاتُ الاختيار في نافذة الأوراق: نوعُ الخروج وسببُه.
   و`[hidden]` بـ`!important` ضرورةٌ لا زينة: `.modal label` أعلاه تُعلن
   `display:block`، وقاعدةُ المؤلِّف تغلب `[hidden]` في ورقة المتصفّح — فحقلُ
   إثبات النقل كان يبقى ظاهراً بعد إخفائه من الشيفرة. */
.modal [hidden] { display: none !important; }
.ex-choice { margin: 0 0 .7rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.ex-choice legend { padding-inline: .3rem; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.ex-choice__opt { display: flex !important; align-items: center; gap: .45rem; margin-block-end: .3rem; font-weight: 600; cursor: pointer; }
.ex-choice__opt:last-child { margin-block-end: 0; }
.ex-choice__opt input { inline-size: auto; margin: 0; accent-color: var(--brand-solid, currentColor); }
@media (prefers-reduced-motion: reduce) { .ex-act, .ex-act svg { transition: none !important; } }

/* ---- لسانُ متابعة نقل الملكية -------------------------------------------
   الصفُّ يُلوَّن بدرجة تأخّره، والمحظورُ يسبق التأخّر: `data-ban` بعد `data-late`
   في الترتيب فيغلبه عند التساوي في الخصوصيّة. والتلوينُ خفيفٌ عمداً — أرضيّةٌ
   لا تُذهب قراءةَ النصّ فوقها في الوضعين الفاتح والداكن. */
.ex-row[data-late="1"] > td { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.ex-row[data-late="2"] > td { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.ex-row[data-late="3"] > td { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.ex-row[data-ban] > td { background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* اثنا عشرَ عموداً في عرضٍ واحد: بلا `nowrap` يلتفّ رقمُ الجوّال على أربعة
   أسطرَ ورقمُ المطالبة على سطرين، فيصير الصفُّ الواحد كتلةً بارتفاع خمسة صفوف
   ولا يُقرأ الجدولُ مسحاً بالعين. الالتفافُ يُمنع، والفائضُ يُمرَّر أفقياً في
   `.scroller` — وهو ما يفعله جدولُ v1 حرفيّاً. */
/* **جدولُ هذه الشاشة أضيقُ حقلاً من كلّ جداول اللوحة: اثنا عشر عموداً.**
   والحشوةُ الأفقيّة العامّة `--cell-pad-x: .45rem` (٧٫٢px) كافيةٌ لجدولٍ من
   ستّة أعمدة، وعند اثني عشر يلتصق آخرُ كلمةٍ في عمودٍ بأوّل كلمةٍ في الذي
   يليه — فتُقرأ الجملتان جملةً واحدة. قاله المالك: «الكلام داخل في بعضه».
   وv1 يعطيها `padding: 8px 10px` و`font-size: 13px` **ووسطاً** لا بدايةً،
   وثلاثتُها تصنع الفراغ: الوسطُ وحده يترك هامشين بدل هامشٍ واحد.
   والعمودُ الأوّل (السيارة) يبقى إلى البداية: اسمٌ عربيٌّ متغيّرُ الطول
   يُقرأ من حافّةٍ ثابتة. */
/* **وخليّةُ الأفعال هنا ليست شبكةَ الأيقونات.** القاعدةُ العامّة صارت
   `td.actions { display: grid; grid-template-columns: repeat(3, 1.85rem) }`
   — وهي صحيحةٌ لأزرار `.act`: مربّعاتٌ بأيقونةٍ بلا نصّ، تستقيم رأسياً بين
   الصفوف. وأزرارُ هذه الشاشة `.ex-act`: **أيقونةٌ ونصٌّ معاً كـ v1**
   («الإقرار/الباركود» · «رفع الموقّع» · «تعديل»). فحُشرت في خانةِ ١٫٨٥rem
   فصار عرضُ الزرّ ٣٠px ونصُّه يطفح خارجه **ويركب على الزرّ المجاور** — وهو
   ما رآه المالك كلاماً فوق كلام. قِيس: `cellW 144` و`.ex-act` ٣٠px ونصُّها
   «الإقرار/الباركود».
   فتُستثنى خلايا هذه الشاشة وحدها، وتبقى الشبكةُ لكلّ اللوحة. */
.ex-pane td.actions {
  display: flex; flex-wrap: wrap; gap: .3rem;
  justify-content: center; align-items: center;
  grid-template-columns: none;
}

.ex-pane th, .ex-pane td { padding-inline: .62rem; padding-block: .5rem; font-size: .82rem; text-align: center; }
.ex-pane thead th { font-size: .74rem; }
.ex-pane tbody td:first-child, .ex-pane thead th:first-child { text-align: start; }

/* شريطُ فلترة المرحلة. **والتصديرُ ليس فيه**: سطرٌ فوقه وحده كما في v1 — سبعةُ
   عناصرَ في صفٍّ واحد تركت ٥٧px فراغاً من ١٢١٢، فبدا الصفُّ مرصوصاً وضاقت
   كلمةُ «إلى» إلى ١٦px بين خانتَي تاريخ. */
.ex-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .7rem; }
.ex-filter__q { max-inline-size: 21rem; flex: 1 1 16rem; }
.ex-filter input[type=date] { inline-size: 9.5rem; }
.ex-filter .muted { font-size: .78rem; white-space: nowrap; }
.ex-filter__n { margin-inline-start: auto; font-weight: 700; }
.ex-export { display: flex; margin: 0 0 .5rem; }
/* صفٌّ يُخفيه الفلتر: `[hidden]` على `<tr>` تغلبه قاعدةُ `display: table-row`
   في ورقة المتصفّح، فلا يختفي بلا هذا السطر — وهو عطلُ `.modal [hidden]` نفسُه
   في موضعٍ آخر. */
tr.ex-row[hidden] { display: none !important; }
.ex-row > td { white-space: nowrap; }
/* والخليّتان الوحيدتان اللتان تُستثنَيان هما اللتان تحملان نموذجاً — ومعهما
   `flex-wrap` يُطفأ: صفٌّ واحدٌ بارتفاع خمسة أسطرَ يقتل الجدولَ نفسَه الذي
   مُنع الالتفافُ لأجله. */
.ex-row > td:has(.ex-note), .ex-row > td:has(.ex-inline) { white-space: normal; }
.ex-row .ex-inline { flex-wrap: nowrap; }
.ex-row .ex-inline input[type=file] { max-inline-size: 7.5rem; font-size: .7rem; }
/* و«تأكيد النقل» في سطرٍ واحد: الخليّةُ ضيّقةٌ فيلتفّ النصُّ على سطرين ويصير
   الزرُّ أطولَ من صفّه. */
.ex-row .ex-inline button { white-space: nowrap; }
/* المرفقاتُ الثلاثة في سطرٍ واحد: التفافُها يرفع الصفَّ ١٤px لأجل رابطٍ ثانٍ،
   والعرضُ متاحٌ أفقياً في `.scroller`. */
.ex-files { display: flex; flex-wrap: nowrap; gap: .25rem; }
/* ونموذجُ الملاحظة مثلُه — انظر `.ex-inline` أعلاه. */
.ex-note {
  display: flex; gap: .3rem; align-items: center;
  margin: 0; padding: 0; max-width: none;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.ex-note textarea {
  flex: 1; inline-size: 8rem; min-inline-size: 0; block-size: 1.9rem; resize: vertical;
  font: inherit; font-size: .78rem; padding: .3rem .4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
}

.ex-gate { max-inline-size: 30rem; margin: 1rem auto; text-align: center; padding: 1.6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ex-gate h2 { margin: 0 0 .3rem; }
.ex-gate__form { display: flex; gap: .5rem; margin-block-start: 1rem; }
.ex-gate__scan { margin: .6rem 0 0; }
.ex-gate__reader { margin: .8rem auto 0; max-inline-size: 26rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.ex-gate__reader video { inline-size: 100%; display: block; }
.ex-gate__result { margin-block-start: 1rem; }
/* الحقائقُ الستُّ شبكةً لا سطراً: الحارسُ يطابقها بالعين على ورقةٍ بيده،
   والمطابقةُ أسرع في عمودين منها في جملةٍ واحدة طويلة. */
.ex-gate__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem .9rem; margin: 0; text-align: start; }
.ex-gate__facts div { display: flex; gap: .4rem; align-items: baseline; border-block-end: 1px dashed var(--line); padding-block-end: .35rem; }
.ex-gate__facts dt { color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.ex-gate__facts dd { margin: 0; font-weight: 700; }
.ex-gate__bad { margin: .8rem 0 0; padding: .55rem .7rem; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-weight: 700; }
/* ونموذجُ التأكيد ينزع بطاقةَ النماذج كـ`.ex-inline` — القاعدةُ العامّة
   `form {…}` تُلبسها كلَّ `<form>` في اللوحة. */
.ex-gate__confirm {
  margin: 1rem 0 0; padding: 0; max-width: none;
  background: none; border: 0; box-shadow: none;
}
.ex-gate__confirm .btn-primary { inline-size: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.ex-gate__input { flex: 1 1 auto; padding: .7rem .9rem; font: inherit; font-size: 1.1rem; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-align: center; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); text-transform: uppercase; }
.ex-gate__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

/* إقرارُ واستلام المركبة — ورقةٌ قانونيّة تُطبَع. */
.decl { max-inline-size: 50rem; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; line-height: 1.7; }
.decl__org { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block-end: 1rem; border-block-end: 2px solid var(--line); }
.decl__org h2 { margin: 0; font-size: 1.05rem; }
.decl__barcode { text-align: center; }
.decl__barcode svg { max-inline-size: 100%; background: #fff; border-radius: var(--radius); padding: .3rem; }
.decl__code { margin: .2rem 0 0; font-family: var(--mono, ui-monospace, monospace); font-weight: 800; letter-spacing: .12em; font-size: .82rem; }
.decl__title { text-align: center; margin: 1rem 0 .3rem; font-size: 1.15rem; }
.decl__date { text-align: center; color: var(--muted); margin: 0 0 1rem; font-size: .9rem; }
.decl__recipient { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .4rem .9rem; margin: 0 0 1rem; padding: .8rem 1rem; background: var(--raised); border-radius: var(--radius); }
.decl__recipient > div { display: flex; gap: .4rem; }
.decl__recipient dt { color: var(--muted); font-weight: 700; margin: 0; }
.decl__recipient dd { margin: 0; font-weight: 800; }
.decl__lead { font-weight: 800; margin: 1rem 0 .4rem; }
.decl__clauses { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .5rem; font-size: .88rem; }
.decl__clauses li { padding-inline-start: .2rem; }
.decl__sub { margin: 1.4rem 0 .5rem; font-size: .95rem; }
/* جدولُ بيانات المركبة: يملأ العرضَ كاملاً ويلتفّ محتواه — لا تمريرَ أفقيّ،
   فيظهر بأعمدته العشرة كلِّها في صفحةٍ واحدة عند الطباعة. */
.decl__veh { inline-size: 100%; border-collapse: collapse; font-size: .74rem; table-layout: fixed; }
.decl__veh th, .decl__veh td { border: 1px solid var(--line); padding: .35rem .3rem; text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.decl__veh th { background: var(--raised); font-weight: 800; }
/* حاوي الجدول في الإقرار لا يُمرَّر — الجدولُ يفيت أصلاً. */
.decl .scroller { overflow: visible; }
.decl__notes { margin: 1.2rem 0; padding: .8rem; border: 1px dashed var(--line); border-radius: var(--radius); min-block-size: 2.5rem; }
.decl__foot { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-end; margin-block-start: 1.5rem; font-size: .9rem; font-weight: 700; }
.decl__idimg { display: flex; flex-direction: column; gap: .3rem; }
.decl__idimg span { font-size: .74rem; color: var(--muted); }
.decl__idimg img { max-inline-size: 9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.decl__idbox { display: flex; align-items: center; justify-content: center; inline-size: 9rem; block-size: 5.5rem; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .78rem; }
@media print {
  /* لا يُطبَع إلا الإقرار: يُخفى الشريطُ الجانبيّ والعلويّ ورأسُ الصفحة (فيه
     زرّا الطباعة والرجوع)، ويُفرَد المحتوى على العرض كلِّه. */
  .sidebar, .topbar, .page, .notice { display: none !important; }
  .layout, .shell, main { display: block !important; margin: 0 !important; padding: 0 !important; max-inline-size: none !important; background: #fff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff !important; }
  /* الثيمُ داكن، فتُجبَر ألوانُ الإقرار فاتحةً في الورق مهما كان مظهرُ الشاشة:
     ورقةٌ سوداء لا تُطبَع. */
  .decl, .decl * { color: #000 !important; background: transparent !important; box-shadow: none !important; border-color: #999 !important; }
  .decl { background: #fff !important; border: 0 !important; max-inline-size: none !important; padding: 0 !important; line-height: 1.6; }
  .decl__recipient, .decl__notes { background: #f3f3f3 !important; }
  .decl__veh th { background: #e8e8e8 !important; }
  /* الجدولُ كاملاً في الورق: خطٌّ أصغر ولا تمريرَ، فتظهر الأعمدةُ العشرة معاً. */
  .decl .scroller { overflow: visible !important; }
  .decl__veh { font-size: .6rem !important; table-layout: fixed !important; inline-size: 100% !important; }
  .decl__veh th, .decl__veh td { padding: .2rem !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  .decl__barcode svg { background: #fff !important; block-size: 40px !important; }
  .decl .muted, .decl__idimg span { color: #555 !important; }

  /* صفحةٌ واحدة: يُضغَط كلُّ شيء ليدخل في ورقةٍ واحدة (٩ فقرات + جدول + توقيع). */
  @page { size: A4 portrait; margin: 8mm; }
  .decl { line-height: 1.28 !important; font-size: 8.6pt !important; }
  .decl__org { padding-block-end: .3rem !important; margin-block-end: .3rem !important; }
  .decl__org h2 { font-size: 11pt !important; }
  .decl__title { font-size: 11pt !important; margin: .3rem 0 .1rem !important; }
  .decl__date { margin: 0 0 .3rem !important; font-size: 8pt !important; }
  .decl__recipient { padding: .3rem .5rem !important; margin: 0 0 .35rem !important; gap: .1rem .8rem !important; }
  .decl__lead { margin: .35rem 0 .15rem !important; }
  .decl__clauses { gap: .12rem !important; font-size: 8pt !important; padding-inline-start: 1rem !important; }
  .decl__sub { margin: .5rem 0 .2rem !important; font-size: 9pt !important; }
  .decl__notes { margin: .4rem 0 !important; padding: .35rem !important; min-block-size: 1.4rem !important; }
  .decl__foot { margin-block-start: .5rem !important; gap: .5rem 2rem !important; font-size: 8.5pt !important; }
  .decl__idimg img, .decl__idbox { max-inline-size: 6rem !important; block-size: 3.4rem !important; inline-size: 6rem !important; }
}

/* ---- أرشيف المزادات: صفٌّ يُوسَّع إلى كروت سياراته. T886 ------------------ */
/* الصفُّ كلُّه قابلٌ للنقر — يُوسِّع لا يفتح صفحة. */
.arch-row--clickable { cursor: pointer; transition: background .12s ease; }
.arch-row--clickable:hover { background: var(--raised); }
.arch-row--clickable[aria-expanded="true"] { background: var(--brand-soft); }
/* علامةُ التوسّع — مثلّثٌ يدور، لا زرّ. */
.arch-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 1.6rem; block-size: 1.6rem; border-radius: var(--radius);
  color: var(--ink-soft); font-size: .8rem; line-height: 1;
  border: 1px solid var(--line); background: var(--panel);
}
.arch-toggle.is-open { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }
/* علامةُ الطيّ: رسمٌ واحدٌ يُدار، لا محرفان يُبدَّلان. كان القالبُ يحمل `▸`
   ويكتب JS فوقه `▾` بـ`textContent` — فالشكلُ والحالة في مكانين، وحذفُ محرفٍ
   من القالب يترك السطرَ في JS يعيده. الآن الصنفُ `is-open` وحدَه يقلبه.
   والدورانُ ٩٠ درجة لا ١٨٠: السهمُ يشير يميناً مطوياً وأسفلَ مفتوحاً، كما
   كان `▸`/`▾` بالضبط. (T837 — الذيل) */
.arch-toggle svg { inline-size: .8rem; block-size: .8rem; transition: transform .15s ease; }
.arch-toggle.is-open svg { transform: rotate(90deg); }
/* ألسنةُ شاشة الخروج وأزرارُها: الرسمُ والكلمةُ سطرٌ واحد. كانت `📤` `🔄`
   `🗄️` `🚧` `✅` — يرسمها نظامُ التشغيل بأسلوبه، وتكبر مع حجم الخطّ. */
.ex-tab { display: inline-flex; align-items: center; gap: .35rem; }
/* **مقاسٌ واحدٌ وسُمكٌ واحد لكلّ رسمٍ في هذه الشاشة.** كانت رسومُ الألسنة
   ‏`.9rem` بسُمك `2` (السُمكُ من خاصّية `_act_icon.html` لأن لا قاعدةَ تكتبه)،
   ورسومُ الأفعال `1rem` بسُمك `1.7` — أي مقاسان وسُمكان في عرضٍ واحد. ورسمان
   بسُمكين لا يُقرآن مجموعةً واحدة ولو كانا من الملفّ نفسه (T837: التطابقُ في
   السُمك هو ما يصنع المجموعة، لا التشابهُ في الموضوع).
   ويُكتَب هنا في قاعدةٍ واحدة لا في أربع، فلا يُنسى واحدٌ عند أيّ تعديلٍ لاحق. */
.ex-tab svg,
.ex-act svg,
.ex-inline .btn-primary-sm svg,
.ex-gate__form svg {
  inline-size: 1rem; block-size: 1rem; flex: none; stroke-width: 1.7;
}
.ex-inline .btn-primary-sm { display: inline-flex; align-items: center; gap: .3rem; }
/* «إضافة سيارة يدويًا» — كانت `➕`. */
.cat-add-row .btn-primary { display: inline-flex; align-items: center; gap: .35rem; }
.cat-add-row .btn-primary svg { inline-size: .9rem; block-size: .9rem; flex: none; }
.arch-panel > td { padding: 0 !important; background: var(--raised); }
.arch-panel__inner { padding: 1rem 1.1rem; }
.arch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.arch-card {
  display: flex; gap: .7rem; padding: .7rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.arch-card--paid { border-inline-start: 3px solid var(--ok, #16a34a); }
.arch-card--unsold { opacity: .72; }
.arch-card__img {
  flex: 0 0 5rem; inline-size: 5rem; block-size: 5rem; border-radius: var(--radius);
  overflow: hidden; background: var(--raised); display: flex; align-items: center; justify-content: center;
}
.arch-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.arch-card__noimg { font-size: .68rem; color: var(--muted); }
.arch-card__body { min-inline-size: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; }
.arch-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.arch-card__title { margin: 0; font-size: .9rem; font-weight: 800; }
.arch-card__title small { color: var(--muted); font-weight: 600; }
.arch-card__badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.arch-card__meta { display: flex; flex-wrap: wrap; gap: .3rem; }
/* الأرقامُ تحت لصائقها لا بجانبها — لصيقةٌ صغيرةٌ فوق قيمةٍ بارزة، وكلُّ
   زوجٍ في صفٍّ يملأ العرض فيقرأ من فوقٍ لتحت: كلمةٌ ثم رقمُها تحتها. */
.arch-card__money { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; padding-block-start: .5rem; border-block-start: 1px solid var(--line-soft); }
.arch-card__money > div { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.arch-card__lbl { font-size: .68rem; font-weight: 700; color: var(--muted); }
.arch-card__money strong { font-size: .95rem; font-weight: 800; }
@media (max-width: 480px) { .arch-card__money { grid-template-columns: 1fr; } }
.arch-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: auto; padding-block-start: .3rem; }
.btn-odoo { border-color: #714B67; color: #714B67; }
.btn-odoo:hover { background: #714B67; color: #fff; border-color: #714B67; }
/* دخولُ الكروت متدرّجاً حين تُحقَن — يُحترَم `prefers-reduced-motion`. */
.arch-cards .arch-card { animation: archIn .3s ease both; }
.arch-cards .arch-card:nth-child(2) { animation-delay: .04s; }
.arch-cards .arch-card:nth-child(3) { animation-delay: .08s; }
.arch-cards .arch-card:nth-child(4) { animation-delay: .12s; }
.arch-cards .arch-card:nth-child(n+5) { animation-delay: .16s; }
@keyframes archIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .arch-cards .arch-card { animation: none !important; } }

/* أنميشنُ الأيقونات الأساسية في الصفوف (عرض · مزايدات · فاتورة · صور):
   نبضةٌ لطيفةٌ عند المرور، وارتدادٌ عند الضغط، ودخولٌ متدرّج أول تحميل.
   يُحترَم `prefers-reduced-motion`: من أطفأ الحركةَ لا يراها. */
.act svg, .link-btn { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.act:hover svg { transform: scale(1.18) rotate(-3deg); }
.act:active svg { transform: scale(.92); }
.link-btn:hover { transform: scale(1.06); }
.actions .act { animation: actIn .32s ease both; }
.actions .act:nth-child(2) { animation-delay: .05s; }
.actions .act:nth-child(3) { animation-delay: .1s; }
@keyframes actIn { from { opacity: 0; transform: translateY(4px) scale(.9); } to { opacity: 1; transform: none; } }
/* أيقوناتُ بطاقات الأرقام: تطفو قليلاً حين يمرّ المؤشّر على البطاقة. */
.stat__icon { transition: transform .2s ease; }
.stat:hover .stat__icon, a.stat:hover .stat__icon { transform: translateY(-2px) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .act svg, .link-btn, .actions .act, .stat__icon { animation: none !important; transition: none !important; transform: none !important; }
}

/* لوحةُ «السيارات المحددة لهذا المزاد» في نموذج الإنشاء — مرشدُ v1. */
.form-section.picked { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.picked__list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.picked__item { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem .6rem; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.picked__from { margin-inline-start: auto; font-size: .74rem; }

/* شريطُ أدوات الكتالوج: النصُّ يميناً والأزرارُ يساراً، يلتفّ على الضيّق. */
.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 1rem; }
.cat-toolbar__meta { margin: 0; color: var(--muted); font-size: .82rem; flex: 1 1 16rem; }
.cat-toolbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.row-select { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--brand-solid); cursor: pointer; }
/* زرُّ الفاتورة برقمها بجانب الأيقونة. */
.act--review { inline-size: auto; padding-inline: .5rem; gap: .35rem; }
.act__lbl { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.act--bids:hover { color: var(--warn, #b45309); border-color: var(--warn, #b45309); }
.actions--nowrap { white-space: nowrap; }

/* النافذةُ العامّة (تفاصيل · مزايدات · إضافة) — أعرضُ قليلاً، رأسٌ ثابت. */
.cmodal { inline-size: min(46rem, 94vw); padding: 0; }
.cmodal__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1rem 1.3rem; border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; background: var(--panel); z-index: 1; }
.cmodal__title { margin: 0; font-size: 1rem; font-weight: 800; }
.cmodal__title small { font-weight: 600; color: var(--muted); font-size: .82rem; }
.cmodal__body { padding: 1.1rem 1.3rem 1.3rem; }
.bids-table { inline-size: 100%; border-collapse: collapse; }
.bids-table th, .bids-table td { padding: .5rem .6rem; text-align: start; border-block-end: 1px solid var(--line-soft); }
.bids-table th { font-size: .74rem; font-weight: 800; color: var(--muted); }
.bids-table__muted { opacity: .55; }

/* ---- منطقةُ سحب وإفلات الصور — أسلوبُ رفع v1 ------------------------------
   الاستمارةُ نفسُها تعمل بلا جافاسكربت (`<input type=file>`)، وهذه تزيّنها:
   منطقةٌ تُسحَب إليها الصور أو تُضغَط، ومعايناتٌ فورية قبل الرفع. T881 */
.dropzone {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4.5rem;
  padding: 1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--raised);
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dropzone:hover { border-color: var(--brand); color: var(--ink-soft); }
.dropzone--over {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}
/* المُدخَلُ الحقيقيّ مخفيٌّ بصرياً لا وظيفياً: النقرُ على المنطقة يصله لأنه
   داخل `<label>`، فيبقى عاملاً للوحة المفاتيح وقارئ الشاشة. */
.dropzone [data-file-input] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.dropzone__preview {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: .7rem;
}
.dropzone__preview img {
  inline-size: 4rem;
  block-size: 4rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}


/* زرٌّ يبدو نصّاً — حين يكون الفعلُ فتحَ نافذةٍ لا الذهابَ إلى صفحة.
   يُصفّر زخرفةَ الأزرار العامّة (خلفيةٌ ملوّنة وحشوةٌ ووزنُ خطّ) كلَّها: خليّةٌ
   في جدولٍ تحمل اسمَ سيارة، لا زرّاً أزرقَ يصرخ في كل صفّ. */
.linkish {
  appearance: none; border: 0; padding: 0; margin: 0; background: none;
  color: inherit; font: inherit; font-weight: inherit; cursor: pointer;
  text-align: start; border-radius: 0;
}
.linkish:hover { text-decoration: underline; background: none; }


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

   ثلاثة تغييرات، كلٌّ منها يجيب سؤالاً:

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

   ولا لونَ جديد ولا خطَّ جديد: كل قيمةٍ هنا من `:root`، فالمظهر الداكن
   والألوان السبعة تتبع بلا كتلةٍ ثانية تُصان.
   ======================================================================== */

/* ---- عنوانُ الكتلة ------------------------------------------------------ */

/* عنوانٌ صغيرٌ وخطٌّ يمتدّ منه إلى آخر السطر: يفصل الكتل بلا أن يأخذ سطراً
   بحجم عنوانٍ ثانٍ ينافس `<h1>` الصفحة. */
.board-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .75rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
}

.board-eyebrow::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--line);
}

.board-eyebrow--alarm { color: var(--danger); }
.board-eyebrow--alarm::after { background: var(--danger-line); }

/* العدّاد حبّةٌ صغيرة بجوار الاسم — «٣» بعد «ما يحتاج نظراً» أسرع من عدّ
   البطاقات بالعين. */
.board-eyebrow__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  padding-inline: .35rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* ---- هرمُ البطاقة ------------------------------------------------------- */

/* القاع مستوٍ في الصفّ كلّه: التذييل يُدفَع إلى أسفل البطاقة بـ`auto`، فلا
   تصير التذييلاتُ سلّماً حين تختلف أطوالُ سطور الشرح. */
.stat { padding: 1.15rem 1.25rem 1rem; gap: .35rem; }

.stat__label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

/* الرقم هو الرسالة: أكبر وأثقل، وخاناتُه مستقيمة فلا يرقص عرضُه بين قيمتين. */
.stat__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

.stat__detail { margin-block-start: .15rem; }



/* الشريطُ العلويّ يُرى دائماً لا عند المرور وحده: هو التصنيف نفسه، وتصنيفٌ
   لا يظهر إلا تحت الفأرة لا يُقرأ على شاشةٍ لمسيّة أصلاً. ويثخن عند المرور. */
.stat::before { opacity: .85; block-size: 3px; transition: opacity .18s ease, block-size .18s ease; }
a.stat:hover::before, a.stat:focus-visible::before { opacity: 1; block-size: 4px; }

/* ---- الرسوم ------------------------------------------------------------- */

/* اللوحتان بارتفاعٍ واحد في الصفّ: رسمان بقاعين مختلفين يتركان درجةً بيضاء
   تحت أقصرهما تُقرأ فراغاً لا تسويةً. */
.board-figures { align-items: stretch; }
.figure { padding: 1.25rem 1.35rem; }
.figure__head { margin-block-end: 1.1rem; }
.figure h2 { font-size: .95rem; }

/* رابطُ اللوحة يُقرأ فعلاً لا جملة: حبّةٌ خفيفة بلون الأساسي. */
.figure__action {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--brand-soft);
  text-decoration: none;
  font-weight: 600;
  transition: background .18s ease;
}
.figure__action:hover { background: color-mix(in srgb, var(--brand) 18%, var(--panel)); text-decoration: none; }
.figure__action span[aria-hidden] { transition: transform .18s ease; }
.figure__action:hover span[aria-hidden] { transform: translateX(-3px); }

/* ---- الشاشة الضيّقة ----------------------------------------------------- */

@media (max-width: 40rem) {
  /* الرأس عمودٌ واحد، والحكم تحته لا بجانبه — حبّةٌ بنصٍّ كامل بجوار اسمٍ
     طويل تقصّ أحدهما. */
  .stat__value { font-size: 1.7rem; }
}

/* من طلب تقليل الحركة: النبضةُ تسكن، والرأس يظهر بلا صعود. أداةُ عملٍ لا عرض. */
@media (prefers-reduced-motion: reduce) {
}

/* لوحةٌ بلا بيانات تقول ذلك بجملة، والرسمُ الفارغ يبقى تحتها خافتاً ليُفهم
   أن المحور موجودٌ وأن الصفر صفرٌ حقيقي — لا أن الرسم لم يُحمَّل. */
.figure__empty {
  margin: 0 0 .6rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  background: var(--line-soft);
  color: var(--muted);
  font-size: .8rem;
}
.figure__empty + .spark { opacity: .45; }


/* ===========================================================================
   بطاقةُ الرقم — على هيئة لوحة v1 التي أقرّها المالك
   ---------------------------------------------------------------------------
   الشكلُ المرجعي: `haraj1.com.sa/application/admin_v2` — بطاقةٌ بيضاء، عليها
   **شريطٌ مصمتٌ بعرضها كاملاً في أعلاها**، ورمزٌ في مربّعٍ مستديرٍ على حافة
   البداية، وحبّةُ سياقٍ على مقابلها، ثم عنوانٌ خافتٌ صغير فرقمٌ كبير فسطرُ
   شرح.

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

   فهنا: **إشارةٌ واحدة، مصمتة، في مكانٍ واحد** — الشريط الأعلى. والحافة
   الجانبية تُلغى، والحدُّ يستوي على الجهات الأربع.

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

/* ---- الهيئة ------------------------------------------------------------- */

.stat {
  /* حدٌّ واحدٌ على الجهات الأربع: التصنيفُ في الشريط الأعلى وحده. */
  border: 1px solid var(--line);
  border-inline-start-width: 1px;
  border-inline-start-color: var(--line);
  padding: 1.35rem 1.3rem 1.1rem;
  gap: .4rem;
}

/* الشريط الأعلى: مصمتٌ بعرض البطاقة، ظاهرٌ دائماً. أربعةُ بكسلات لا ثلاثة —
   ثلاثةٌ تحت زوايا `1rem` تُقرأ خيطاً لا شريطاً. */
.stat::before {
  block-size: 4px;
  opacity: 1;
  background: var(--brand);
  transition: block-size .18s ease;
}
a.stat:hover::before, a.stat:focus-visible::before { block-size: 5px; opacity: 1; }

.stat--money::before   { background: var(--money); }
.stat--auction::before { background: var(--auction); }
.stat--people::before  { background: var(--people); }
.stat--ok::before      { background: var(--ok); }
.stat--brand::before   { background: var(--brand); }
.stat--warn::before    { background: var(--warn); }
.stat--alarm::before   { background: var(--danger); }

/* التنبيهُ بطاقةٌ بيضاء كأخواتها — الشريطُ والرقمُ وعنوانُ الكتلة تقول ما
   تقوله، والخلفيةُ الملوّنة صارت وزناً رابعاً بلا قولٍ رابع. */
.stat--warn, .stat--alarm { background: var(--panel); }
.stat--alarm { border-color: var(--danger-line); }
.stat--warn  { border-color: var(--warn-line); }

/* ---- الصفّ العلوي ------------------------------------------------------- */

.stat__top { margin-block-end: .5rem; }

/* المربّعُ أكبرُ وأكثرُ استدارة — هو أول ما تجده العينُ في البطاقة، وثِقَلُه
   يجب أن يوازن الرقمَ تحته. */
.stat__icon {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: .62rem;
  border-radius: 13px;
}
.stat--warn .stat__icon  { background: var(--warn-soft);   color: var(--warn); }
.stat--alarm .stat__icon { background: var(--danger-soft); color: var(--danger); }

/* حبّةُ السياق: أكبرُ حشوةً قليلاً لتقع في وزن المربّع المقابل لها. */
.delta { padding: .28rem .6rem; font-size: .73rem; }

/* ---- النصّ -------------------------------------------------------------- */

.stat__label { font-size: .8rem; font-weight: 600; color: var(--muted); }

/* الرقم هو الرسالة. `700` لا `650`: الوزنُ الوسيط على شاشةٍ باهتة يُقرأ
   عادياً، والفرقُ بينه وبين العنوان فوقه هو ما يجعل البطاقة تُقرأ في لمحة. */
.stat__value {
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-block: .1rem .15rem;
}

.stat__detail { font-size: .76rem; line-height: 1.6; color: var(--muted); }

/* ---- التذييل ------------------------------------------------------------ */

/* لوحةُ v1 بلا تذييل — وبطاقتُها ليست رابطاً أصلاً. وهذه بطاقةٌ **كلُّها**
   رابط، فالتذييل يقول **إلى أين** قبل النقر؛ حذفُه يترك بطاقةً تُفتح ولا
   يُعرف على ماذا. فيبقى، خلف خطٍّ رفيع وبوزنٍ خافت — سطرُ وجهةٍ لا زرّ. */

/* ---- الخطّ المصغَّر ------------------------------------------------------ */

/* يقع فوق التذييل لا ملتصقاً بالرقم: هو سياقُ الرقم لا زخرفتُه. */
.stat__spark { margin-block-start: .35rem; }

/* ---- الشاشة الضيّقة ----------------------------------------------------- */

@media (max-width: 40rem) {
  .stat { padding: 1.15rem 1.1rem 1rem; }
  .stat__value { font-size: 1.85rem; }
  .stat__icon { inline-size: 2.5rem; block-size: 2.5rem; padding: .56rem; }
}

/* حبّةُ الوحدة: تقع حيث تقع المقارنة، وبوزنها نفسه — فالصفّ العلويّ في كل
   بطاقةٍ صارت له كتلتان، رمزٌ وحبّة، لا رمزٌ وفراغ. ومحايدةُ اللون عمداً:
   المقارنةُ تلوّن لأنها تقول اتجاهاً، والوحدةُ لا تقول شيئاً يُلوَّن. */
.stat__unit {
  display: inline-flex;
  align-items: center;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-size: .73rem;
  font-weight: 600;
  white-space: nowrap;
}
.stat--money .stat__unit   { background: var(--money-soft);   color: var(--money); }
.stat--auction .stat__unit { background: var(--auction-soft); color: var(--auction); }
.stat--people .stat__unit  { background: var(--people-soft);  color: var(--people); }
.stat--warn .stat__unit    { background: var(--warn-soft);    color: var(--warn); }
.stat--alarm .stat__unit   { background: var(--danger-soft);  color: var(--danger); }


/* ===========================================================================
   رأسُ الرئيسية — لافتةٌ لا سطر
   ---------------------------------------------------------------------------
   في لوحة v1 التي أرسلها المالك: عنوانٌ كبيرٌ في مربّع رمزٍ ذهبيّ، وتحته سطرُ
   ترحيبٍ باسم صاحب الجلسة ودوره، وجملةٌ تقول ما تلخّصه الصفحة. وكان الرأسُ هنا
   عنواناً صغيراً في حافة الشاشة لا يفرّق عن رأس أي قائمة — فالصفحةُ تبدأ بلا
   شيءٍ يقول «هذه هي اللوحة».

   ولا رأسان: كتلةُ `.hero` التي وُضعت قبل هذه أُلغيت، وما كان فيها انتقل
   **داخل** رأس الإطار عبر `{% block actions %}`. عنوانٌ فوق عنوانٍ مرّةً
   واحدة كافٍ ليُقرأ أحدُهما زخرفةً.

   والتخصيصُ بـ`.board` على `<main>` لا بنسخ الإطار: رأسُ القوائم يبقى سطراً
   وأفعاله كما هو في ستٍّ وتسعين شاشة، وهذه وحدها لافتة.
   ======================================================================== */

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

   فما بقي هو ما يقوله الرأسُ فعلاً: كتلةُ الرمز، والعنوان، وسطرُ الترحيب.
   والفصلُ عمّا تحته بالمسافة وحدها. */
.board .page {
  display: block;
  padding: .35rem 0 0;
  margin-block-end: 1.9rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: rise .34s ease both;
}

/* ---- العنوان ------------------------------------------------------------ */

.board .page h1 {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  border: 0;
  padding: 0;
}

/* مربّعُ الرمز: هو ما يجعل الرأسَ لافتةً لا سطراً — كتلةٌ ملوّنةٌ تقع عليها
   العين قبل أن تقرأ حرفاً. وبلون الأساسي المصمت لأنه يحمل رسماً أبيض. */
.board .page__crest, .board-crest {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 14px;
  background: var(--brand-solid);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent);
}

/* ---- سطرُ الترحيب ------------------------------------------------------- */

/* منطقةُ الأفعال في الإطار تحمل هنا **نصّاً** لا أزراراً: فتُصفَّر هندستُها
   الأفقية وتصير عموداً تحت العنوان. ولو تُركت صفّاً لالتفّت الجملةُ بجوار
   العنوان وقُصّت. */
.board .page__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin-block-start: .95rem;
  padding-inline-start: 3.8rem;   /* بمحاذاة النصّ لا بمحاذاة المربّع */
}

.board-hello {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.board-hello strong { font-weight: 700; color: var(--ink); }
.board-hello__say { color: var(--muted); }

/* حبّةُ الدور: اسمٌ عربيٌّ من `ConsoleRole.label` لا الـslug اللاتيني. */
.board-role {
  display: inline-block;
  padding: .12rem .55rem;
  margin-inline: .2rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .75rem;
  font-weight: 700;
  vertical-align: .05em;
}

/* ---- الحكم -------------------------------------------------------------- */

.board-verdict {
  margin: .15rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.board-verdict--ok    { color: var(--ok);     background: var(--ok-soft);     border-color: var(--ok-line); }
.board-verdict--alarm { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }

/* نقطةٌ تنبض — إشارةُ «الآن» وحدها، والنصّ بجوارها يقول العدد والسبب. */
.board-pulse {
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: currentColor;
  animation: hero-pulse 2s ease-in-out infinite;
}

/* زرُّ الرجوع لا مكان له هنا: الرئيسية لا شيء فوقها، والقاعدة مكتوبةٌ في
   `base.html` — وهذا يحرسها لو عاد صفُّها إلى السجلّ يوماً. */
.board .page__back { display: none; }

/* ---- الشاشة الضيّقة ----------------------------------------------------- */

@media (max-width: 40rem) {
  .board .page { padding: .25rem 0 0; }
  .board .page h1 { font-size: 1.3rem; gap: .6rem; }
  .board .page__crest, .board-crest { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
  .board .page__crest svg, .board-crest svg { width: 22px; height: 22px; }
  /* الحشوةُ تُلغى: عمودٌ مزاحٌ بـ3.8rem على شاشةٍ بعرض 24rem يبقى له الثلث. */
  .board .page__actions { padding-inline-start: 0; }
  .board-hello { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .board .page { animation: none; }
  .board-pulse { animation: none; }
}

/* إطارُ النبضة. كان مع كتلة `.hero` المحذوفة، فبقي اسمُه في `.board-pulse`
   بلا تعريف — وحركةٌ بلا إطارٍ لا تُخطئ، تسكت فحسب. */
@keyframes hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}


/* ===========================================================================
   البطاقة: عنوانٌ بجوار الرمز، وتذييلٌ بقرصِ سهم
   ---------------------------------------------------------------------------
   أمرُ المالك: «خلى العناوين جنب الأيقونة مش تحتها وبخط بولد»، و«خلى افتح
   دي بشكل أفضل».

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

   فصارت سطرين: **«ما هذا»** (رمزٌ وعنوانٌ غليظ، وحبّةُ الوحدة على المقابل)،
   ثم **«كم هو»** (الرقم). والتذييلُ سطرُ وجهةٍ بقرصٍ فيه سهم.
   ======================================================================== */

/* ---- «ما هذا» ----------------------------------------------------------- */

/* الرمزُ والعنوانُ مجموعةٌ واحدة، و`min-inline-size: 0` عليها لأن `flex` لا
   يسمح لابنه بالانكماش تحت عرض محتواه بدونها — فعنوانٌ طويل كان يدفع حبّة
   الوحدة خارج البطاقة بدل أن يلتفّ. */
.stat__ident {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-inline-size: 0;
}

.stat__top { align-items: flex-start; gap: .6rem; margin-block-end: .55rem; }

/* العنوان: غليظٌ وبلون الحبر لا خافتاً — هو الذي يقول ما يعدّه الرقم.
   وسطران كحدٍّ أقصى ثم قصٌّ بنقاط: «التحكم في صفحات المستخدمين» في بطاقةٍ
   بعرض ١٥rem يأخذ ثلاثة أسطر ويدفع الرقمَ خارج ارتفاع الصفّ. */
.stat__label {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* الرمزُ لا ينكمش مع العنوان بجواره. */
.stat__icon { flex: none; }

/* الحبّة تبقى في أعلى الصفّ حين يلتفّ العنوان سطرين — لا تنزل إلى منتصفه. */
.stat__top > .delta, .stat__top > .stat__unit { flex: none; margin-block-start: .15rem; }

/* الرقمُ صار وحده في سطره، فلا حاجة لهامشٍ يفصله عن عنوانٍ لم يعد فوقه. */
.stat__value { margin-block: 0 .2rem; }

/* ---- التذييل ------------------------------------------------------------ */

.stat__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-block-start: auto;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.stat__action-text { transition: color .18s ease; }

/* القرص: خلفيةٌ خافتة وسهمٌ فيها، يمتلئ بلون البطاقة عند المرور. هدفٌ بصريٌّ
   لا زرّ — البطاقة كلّها هي الرابط، وهذا يقول ذلك في لمحة. */
.stat__go {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

a.stat:hover .stat__action-text, a.stat:focus-visible .stat__action-text { color: var(--ink); }
a.stat:hover .stat__go, a.stat:focus-visible .stat__go {
  background: var(--brand-solid);
  color: #fff;
  transform: translateX(-2px);
}
a.stat--money:hover .stat__go,   a.stat--money:focus-visible .stat__go   { background: var(--money); }
a.stat--auction:hover .stat__go, a.stat--auction:focus-visible .stat__go { background: var(--auction); }
a.stat--people:hover .stat__go,  a.stat--people:focus-visible .stat__go  { background: var(--people); }
a.stat--warn:hover .stat__go,    a.stat--warn:focus-visible .stat__go    { background: var(--warn); }
a.stat--alarm:hover .stat__go,   a.stat--alarm:focus-visible .stat__go   { background: var(--danger); }

/* ---- الشاشة الضيّقة ----------------------------------------------------- */

@media (max-width: 40rem) {
  .stat__label { font-size: .88rem; }
  .stat__ident { gap: .55rem; }
}


/* ===========================================================================
   البطاقة: الشريطُ جانبيّ، والنصُّ على عمودٍ واحد
   ---------------------------------------------------------------------------
   أمرُ المالك: «خلى الكلام منظم أكتر جوّه المربعات»، و«خلى الاستروك جانبي».

   والأول كشف عطلاً لا ذوقاً: **الرقم كان مُحاذى إلى يسار البطاقة** وكلُّ ما
   حوله إلى يمينها. السببُ سطرٌ في القاعدة القديمة —

       .stat__value { direction: ltr; text-align: start; }

   و`direction: ltr` تقلب معنى `start` إلى **اليسار**. فكان «70,000.00» يقف
   على حافةٍ والعنوانُ وسطرُ الشرح على الحافة المقابلة، والعينُ تقفز بينهما في
   كل بطاقة. و`direction: ltr` نفسها صحيحةٌ وتبقى — بدونها يتكسّر ترتيب
   الفاصلة والنقطة في المبلغ — والإصلاحُ في المحاذاة وحدها: `end` داخل صندوقٍ
   `ltr` هي اليمين، أي حافةُ بداية البطاقة في صفحةٍ RTL.

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

/* ---- الشريط: جانبيٌّ لا علويّ ------------------------------------------- */

/* الشريطُ العلويّ يُلغى — `inset-block: 0` مع `inline-size` يقلبه إلى عمودٍ
   على حافة البداية، والحافةُ منطقيّةٌ لا يمنى فتنقلب مع الاتجاه. */
.stat::before {
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  inline-size: 4px;
  block-size: auto;
  opacity: 1;
  transition: inline-size .18s ease;
}
a.stat:hover::before, a.stat:focus-visible::before { inline-size: 6px; block-size: auto; }

/* حشوةٌ أوسعُ على حافة الشريط: نصٌّ يلامس شريطاً ملوّناً يُقرأ ملتصقاً به. */
.stat { padding-inline-start: 1.5rem; }

/* ---- النصّ: عمودٌ واحد، حافّتُه حافّةُ البطاقة -------------------------- */

/* **الإصلاح**: `end` داخل صندوقٍ `ltr` هي اليمين — أي حافةُ البداية في صفحةٍ
   RTL. فالرقمُ يقف الآن تحت العنوان تماماً لا على الحافة المقابلة له. */
.stat__value { text-align: end; }

/* سطرُ الشرح يُقصّ بعد سطرين: بطاقةٌ شرحُها ثلاثةُ أسطر ترفع الصفَّ كلّه
   لأجلها، فتصير خمسُ بطاقاتٍ فارغةً من الأسفل لأجل واحدة. والنصُّ كاملاً في
   `title` لمن أراده. */
.stat__detail {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .77rem;
  line-height: 1.6;
  color: var(--muted);
}

/* إيقاعٌ واحد لكل البطاقات: عنوانٌ، فراغٌ، رقمٌ، فراغٌ أصغر، شرحٌ، ثم تذييل.
   و`gap` على البطاقة كان يوزّع المسافة بالتساوي بين أشياءَ غيرِ متساوية
   الوزن، فتساوى ما بين الرقم وشرحه وما بين العنوان والرقم. */
.stat { gap: 0; }
.stat__value { margin-block: .25rem .3rem; }

/* ---- الحبّة والرمز ------------------------------------------------------ */

/* الحبّةُ تحاذي منتصفَ الرمز لا أعلاه: صفٌّ فيه مربّعٌ بـ2.75rem وحبّةٌ
   بـ1.5rem، ومحاذاتُهما من الأعلى تترك الحبّة معلّقةً بلا ما يسندها. */
.stat__top { align-items: center; }
.stat__top > .delta, .stat__top > .stat__unit { margin-block-start: 0; }

/* ---- الشاشة الضيّقة ----------------------------------------------------- */

@media (max-width: 40rem) {
  .stat { padding-inline-start: 1.3rem; }
}

/* ===========================================================================
   البطاقة: الرقمُ قُصاد العنوان
   ---------------------------------------------------------------------------
   أمرُ المالك. وكانت البطاقة تُقرأ سطرين — اسمٌ في سطر وعددُه في الذي تحته —
   فتنزل العينُ بينهما، وفي شبكةٍ من ثماني بطاقاتٍ تنزل ثماني مرّات. صارت
   سطراً واحداً: «ما هذا» على حافة البداية، و«كم هو» على مقابلها.
   ======================================================================== */

/* الكتلةُ المقابلة: رقمٌ وتحته حبّتُه. `flex: none` فلا تنكمش أمام عنوانٍ
   طويل — العنوانُ هو الذي يُقصّ (سطران بـ`line-clamp`)، لأن نصفَ رقمٍ لا
   يُقرأ ونصفَ اسمٍ يُقرأ. */
.stat__figure {
  flex: none;
  display: flex;
  flex-direction: column;
  /* في صفحةٍ RTL هذه هي الحافة اليسرى — أي نهايةُ البطاقة. */
  align-items: flex-end;
  gap: .35rem;
}

/* الصفُّ يتوسّط: عنوانٌ من سطرين ورقمٌ من سطر يجب أن يتقابلا في منتصفهما، لا
   أن يتعلّق الرقمُ بأعلى العنوان. */
.stat__top { align-items: center; margin-block-end: .7rem; }

/* أصغرُ من 2.15rem لأنه صار يقاسم السطرَ مع العنوان والرمز — و«70,000.00»
   بـ2.15rem في بطاقةٍ بعرض 20rem لا يترك للاسم مكاناً. و`nowrap` لأن رقماً
   يلتفّ سطرين ليس رقماً. */
.stat__value {
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}

/* الحبّةُ تحت الرقم، محاذيةً لحافته لا لحافة البطاقة. */
.stat__figure .delta, .stat__figure .stat__unit { align-self: flex-end; }

/* سطرُ الشرح يمتدّ تحت الاثنين، لا تحت العنوان وحده. */
.stat__detail { margin-block-start: 0; }

/* الخطُّ المصغَّر تحت الشرح: صار الرقمُ في الصفّ العلوي، فلا شيء فوق الخطّ
   يفسّره إن بقي ملتصقاً بأعلى البطاقة. */
.stat__spark { margin-block-start: .5rem; }

@media (max-width: 40rem) {
  .stat__value { font-size: 1.5rem; }
}

/* الرأسُ بلا صندوق: العنوانُ يكبر قليلاً لأنه لم يعد يستعير حضورَه من لوحٍ
   تحته، والفصلُ عمّا يليه بالمسافة لا بحدّ — خطٌّ هنا وخطُّ «أرقام المنصّة»
   بعده بسطرين يصيران خطّين متجاورين بلا شيءٍ بينهما. */
.board .page h1 { font-size: 1.75rem; }
.board .page__actions { padding-inline-start: 3.95rem; margin-block-start: .25rem; }

@media (max-width: 40rem) {
  .board .page h1 { font-size: 1.35rem; }
}

/* محاذاةُ سطر الترحيب تحت **نصّ** العنوان لا تحت مربّع الرمز: الإزاحة
   محسوبةٌ من مقاس المربّع وفجوته لا مكتوبةً بالتقريب — كانت `3.95rem` رقماً
   مقدَّراً بالعين، ويكفي أن يتغيّر المربّعُ نصفَ ريم ليفترق السطران. */
.board { --crest: 3rem; --crest-gap: .8rem; }
.board .page__crest, .board .page__crest, .board-crest { inline-size: var(--crest); block-size: var(--crest); }
.board .page h1 { gap: var(--crest-gap); }
.board .page__actions { padding-inline-start: calc(var(--crest) + var(--crest-gap)); }

@media (max-width: 40rem) {
  .board { --crest: 2.5rem; --crest-gap: .6rem; }
  /* على الضيّق تُلغى الإزاحة: عمودٌ مزاحٌ بـ3.1rem على شاشةٍ بعرض 24rem
     يبقى له الثلثان. */
  .board .page__actions { padding-inline-start: 0; }
}

/* العنوانُ ومربّعُه أصغر — أمرُ المالك. كان 1.75rem ومربّعاً بـ3rem، وذلك
   حجمُ رأسٍ داخل لوحٍ يسنده؛ ولمّا زال اللوحُ صار الاثنان يصرخان على أرضيةٍ
   عارية. و1.45rem تبقى أكبرَ من `main h1` العامّ (1.5rem؟ لا — أصغر بقليل)
   بقدرِ ما يميّز الرئيسية، لا بقدرِ ما ينافس ما تحتها.

   والإزاحةُ تحت العنوان تتبع وحدَها: `--crest` يدخل في `calc` الذي يحاذي
   سطرَ الترحيب، فتصغيرُ المربّع يحرّك السطرَ معه بلا رقمٍ ثانٍ يُعدَّل. */
.board { --crest: 2.45rem; --crest-gap: .7rem; }
.board .page h1 { font-size: 1.45rem; }
.board .page__crest, .board .page__crest, .board-crest { border-radius: 12px; }
.board .page__crest svg, .board-crest svg { width: 21px; height: 21px; }

@media (max-width: 40rem) {
  .board { --crest: 2.1rem; --crest-gap: .55rem; }
  .board .page h1 { font-size: 1.2rem; }
  .board .page__crest svg, .board-crest svg { width: 18px; height: 18px; }
}

/* ===========================================================================
   رأسُ الرئيسية على هيئة v1: متوسّطٌ، وتحته خطٌّ
   ---------------------------------------------------------------------------
   «ونفس الشكل». وفي مرجعهم: العنوانُ ومربّعُه في وسط الصفحة، وسطرُ الترحيب
   متوسّطٌ تحته، ثم خطٌّ رفيع يفصل الرأسَ عن الأرقام.

   والتوسيطُ هنا يلغي حسابَ الإزاحة الذي كان يحاذي سطرَ الترحيب تحت نصّ
   العنوان — لا حاجة إليه حين يتوسّط الاثنان على محورٍ واحد. فيُصفَّر، ويبقى
   `--crest` مستعملاً في مقاس المربّع وحده.
   ======================================================================== */

.board .page { text-align: center; }
.board .page h1 { justify-content: center; }

.board .page__actions {
  padding-inline-start: 0;
  align-items: center;
  /* الخطُّ الفاصل من مرجعهم: يفصل الرأسَ عمّا تحته بلا مسافةٍ واسعة. وعنوانُ
     «أرقام المنصّة» بعده له خطُّه الممتدّ من اسمه، والاثنان لا يتجاوران —
     بينهما كتلةُ الترحيب وهامشُها. */
  padding-block-end: 1.15rem;
  border-block-end: 1px solid var(--line);
}

.board-hello { text-align: center; }

/* حبّةُ الإنذار تتوسّط مع ما فوقها. */
.board-verdict { align-self: center; }

@media (max-width: 40rem) {
  .board .page__actions { padding-block-end: .9rem; }
}

/* ===========================================================================
   أرضيةُ اللوحة — شبكةُ نقطٍ خافتة، وتوهّجٌ في الزاوية
   ---------------------------------------------------------------------------
   «ضيف في خلفية الصفحة زي نقط أو أي حاجة تخلي فيه حركة مش سادة كده».

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

   * **شبكةُ نقط** — `radial-gradient` مكرَّرة، نقطةٌ بقطر 1px كل 22px. بلون
     الحبر مخفَّفاً بـ`color-mix` لا بقيمةٍ مكتوبة، فتتبع المظهرَ الداكن بلا
     كتلةٍ ثانية: نقطةٌ داكنةٌ على أرضيةٍ فاتحة، وفاتحةٌ على داكنة.
   * **توهّجان** بلون الأساسي عند الحافتين العلويّتين — كبيران وخافتان
     جداً، يكسران استواءَ اللون الواحد على شاشةٍ عريضة.

   وكلُّه على `main` وحده: الشريطُ الجانبي والشريطُ العلويّ لهما ألوانُهما،
   ونقطةٌ خلف قائمةٍ من أربعةٍ وستّين سطراً ضجيجٌ لا نسيج. و`background-attachment`
   متروكٌ افتراضياً — الثابتُ عند التمرير يجعل النقاطَ تسبح تحت المحتوى، وهو
   بعينه ما يسرق الانتباه.
   ======================================================================== */

main {
  position: relative;
  background-image:
    /* توهّجٌ عند حافة البداية العليا */
    radial-gradient(60rem 26rem at 88% -8%,
      color-mix(in srgb, var(--brand) 11%, transparent) 0%, transparent 62%),
    /* وآخرُ أبردُ عند المقابلة */
    radial-gradient(48rem 22rem at 6% 2%,
      color-mix(in srgb, var(--auction) 7%, transparent) 0%, transparent 60%),
    /* شبكةُ النقط */
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb, var(--ink) 7%, transparent) 1.15px, transparent 0);
  background-size: auto, auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* البطاقاتُ واللوحاتُ تبقى مصمتةً فوق النسيج: نقطةٌ تُرى خلف رقمٍ ماليّ
   تجعله يُقرأ على ورقٍ مبقّع. وهي `--panel` أصلاً — هذا يحرس ذلك صراحةً. */
.stat, .figure { background-color: var(--panel); }

/* المظهرُ الداكن: النقطةُ تُرفع قليلاً لأن `--ink` فيه فاتحٌ أصلاً، ومزجُه
   بـ14٪ يختفي على أرضيةٍ سوداء. */
[data-scheme="dark"] main {
  background-image:
    radial-gradient(60rem 26rem at 88% -8%,
      color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 62%),
    radial-gradient(48rem 22rem at 6% 2%,
      color-mix(in srgb, var(--auction) 9%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb, var(--ink) 11%, transparent) 1.15px, transparent 0);
  background-size: auto, auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* الرمزُ أصغر — ومسارُه صار أعمدةً، فسُمكُ الخطّ يُضبط في الورقة لا في
   القالب: `stroke-width` هناك قيمةٌ واحدة لكل المقاسات. */
.board { --crest: 2.1rem; --crest-gap: .6rem; }
.board .page__crest, .board .page__crest, .board-crest { border-radius: 11px; }
.board .page__crest svg, .board-crest svg { width: 18px; height: 18px; }

@media (max-width: 40rem) {
  .board { --crest: 1.9rem; --crest-gap: .5rem; }
  .board .page__crest svg, .board-crest svg { width: 16px; height: 16px; }
  /* النقاطُ تتباعد على الضيّق: شبكةٌ بـ22px على شاشةٍ بعرض 24rem تُقرأ
     ضجيجاً لا نسيجاً. */
  main, [data-scheme="dark"] main { background-size: auto, auto, 28px 28px; }
}

/* ===========================================================================
   الرأسُ إلى حافة البداية، والنقطُ أشفّ
   ---------------------------------------------------------------------------
   «خلى ده في اليمين، وزوّد شفافية النقط أكتر».

   والتوسيطُ كان قد وُضع على هيئة لوحة v1، فيُرَدّ: العنوانُ ومربّعُه على
   حافة البداية — يمينُ الصفحة في RTL — وسطرُ الترحيب تحته محاذياً **نصَّ**
   العنوان لا المربّع.

   والإزاحةُ محسوبةٌ من `--crest` وفجوته لا مكتوبةً بالتقريب: القاعدةُ نفسُها
   التي جعلت تصغيرَ المربّع مرّتين لا يحتاج تعديلَ رقمٍ ثانٍ.

   والنقطُ خُفّفت من 19٪ إلى 11٪ في الفاتح، ومن 26٪ إلى 16٪ في الداكن —
   في موضعها من كتلة الأرضية أعلاه، لا بقاعدةٍ ثانيةٍ تنسخ التدرّجَ كلَّه
   لتغيّر رقماً فيه.
   ======================================================================== */

.board .page { text-align: start; }
.board .page h1 { justify-content: flex-start; }
.board-hello { text-align: start; }
.board-verdict { align-self: flex-start; }
.board .page__actions {
  align-items: flex-start;
  padding-inline-start: calc(var(--crest) + var(--crest-gap));
}

@media (max-width: 40rem) {
  /* الإزاحةُ تُلغى على الضيّق: عمودٌ مزاحٌ بـ2.4rem على شاشةٍ بعرض 24rem
     يبقى له أقلُّ من ثلاثة أرباعه. */
  .board .page__actions { padding-inline-start: 0; }
}

/* ===========================================================================
   سطرُ الشرح، وزرُّ الوجهة
   ---------------------------------------------------------------------------
   «خلى الكلام اللي تحت العناوين في المربعات شكله احترافي أكتر، والزرّ اللي
   تحت شكله أفضل».

   ---- سطرُ الشرح -------------------------------------------------------
   كان `.76rem` رمادياً بسطرٍ قدره 1.6، وثلاثةُ عيوبٍ فيه لا واحد:

   * **أرقامُه لا تستقيم.** «بقيمة 126,000.00 ريال» رقمٌ لاتينيٌّ داخل جملةٍ
     عربية، وبلا `tabular-nums` تختلف عروضُ خاناته فيهتزّ السطرُ بين بطاقةٍ
     وأخرى.
   * **يتيمٌ في آخره.** جملةٌ من تسع كلماتٍ في بطاقةٍ بعرض 17rem تترك كلمةً
     واحدةً في السطر الثاني. و`text-wrap: pretty` يوازن السطرين فلا تبقى
     كلمةٌ وحدها — ومن لا يدعمه يرى ما كان يراه، لا أقلّ.
   * **ملتصقٌ بالرقم فوقه.** فراغٌ قدرُه `.15rem` بين رقمٍ بـ1.7rem وسطرِ
     شرحه يجعلهما كتلةً واحدة.

   ---- الزرّ -------------------------------------------------------------
   كان نصّاً على حافةٍ وقرصاً على مقابلها يفصل بينهما خطٌّ فوقهما: **ثلاثةُ
   عناصرَ لفعلٍ واحد**، وبينها فراغٌ بعرض البطاقة يقطع الجملةَ عن سهمها.

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

.stat__detail {
  margin-block-start: .4rem;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.stat__action {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  inline-size: auto;
  margin-block-start: auto;
  margin-block-end: 0;
  padding: .42rem .8rem;
  padding-block-start: .42rem;
  border-block-start: 0;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: .75rem;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}

/* فُسحةٌ فوق الحبّة تفصلها عن الشرح — على البطاقة لا على الحبّة، فتبقى
   الحبّةُ ملتصقةً بقاع البطاقة حين يقصُر الشرح. */
.stat__action { margin-block-start: auto; }
.stat__detail + .stat__action, .stat__spark + .stat__action { margin-block-start: .9rem; }
.board-stats .stat__action, .board-alarms .stat__action { margin-block-start: auto; }

/* السهمُ داخل الحبّة: رسمٌ لا قرص. */
.stat__go {
  inline-size: auto;
  block-size: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  transition: transform .18s ease;
}
.stat__go svg { width: 12px; height: 12px; stroke-width: 2.6; }

a.stat:hover .stat__action, a.stat:focus-visible .stat__action {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
a.stat:hover .stat__go, a.stat:focus-visible .stat__go { transform: translateX(-3px); }

a.stat--money:hover .stat__action,   a.stat--money:focus-visible .stat__action   { background: var(--money-soft);   color: var(--money); }
a.stat--auction:hover .stat__action, a.stat--auction:focus-visible .stat__action { background: var(--auction-soft); color: var(--auction); }
a.stat--people:hover .stat__action,  a.stat--people:focus-visible .stat__action  { background: var(--people-soft);  color: var(--people); }
a.stat--warn:hover .stat__action,    a.stat--warn:focus-visible .stat__action    { background: var(--warn-soft);    color: var(--warn); }
a.stat--alarm:hover .stat__action,   a.stat--alarm:focus-visible .stat__action   { background: var(--danger-soft);  color: var(--danger); }

/* في التنبيه والتحذير خلفيةُ البطاقة ملوّنةٌ أصلاً، فحبّةٌ بـ`--line-soft`
   فوقها تُقرأ رقعةً رماديّة. تأخذ لونَ البطاقة مخفَّفاً. */
.stat--alarm .stat__action { background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); }
.stat--warn .stat__action  { background: color-mix(in srgb, var(--warn) 11%, transparent);  color: var(--warn); }

/* ===========================================================================
   زرُّ الوجهة في وسط البطاقة
   ---------------------------------------------------------------------------
   «خلى افتح ده في نص المربع».

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

   وثلاثُ لمساتٍ تجعله يُقرأ زرّاً لا حبّة:

   * **حدٌّ شفّافٌ يتلوّن** عند المرور. الحدُّ على الزرّ ليس كالحدّ على
     البطاقة: البطاقةُ سطحٌ يُرى بذاته، والزرُّ شيءٌ يُضغط ويجب أن يُعرف
     طرفُه قبل أن تصله اليد.
   * **حشوةٌ أوسع** (`.5rem` × `1.05rem`): هدفُ لمسٍ بارتفاع 30px أصغرُ من
     أن يُصاب بإصبع، والزيادةُ ترفعه إلى 34.
   * **انتقالٌ على الحدّ واللون معاً**، فلا يقفز أحدُهما قبل الآخر.
   ======================================================================== */

.stat__action {
  align-self: center;
  padding: .5rem 1.05rem;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

a.stat:hover .stat__action, a.stat:focus-visible .stat__action {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
}
a.stat--money:hover .stat__action,   a.stat--money:focus-visible .stat__action   { border-color: color-mix(in srgb, var(--money) 32%, transparent); }
a.stat--auction:hover .stat__action, a.stat--auction:focus-visible .stat__action { border-color: color-mix(in srgb, var(--auction) 32%, transparent); }
a.stat--people:hover .stat__action,  a.stat--people:focus-visible .stat__action  { border-color: color-mix(in srgb, var(--people) 32%, transparent); }
a.stat--warn:hover .stat__action,    a.stat--warn:focus-visible .stat__action    { border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
a.stat--alarm:hover .stat__action,   a.stat--alarm:focus-visible .stat__action   { border-color: color-mix(in srgb, var(--danger) 34%, transparent); }

/* ===========================================================================
   الزرّ: خطٌّ فاصلٌ فوقه، ولونُ شريط بطاقته، وزاويةٌ لا قوس
   ---------------------------------------------------------------------------
   «ضيف قبله خط شفاف زي ما كان موجود، وخلى كل زر بلون الاستروك، وغيّر الشكل
   البيضاوي لشكل احترافي أكتر».

   **وغلافان لا واحد.** الخارجيُّ (`.stat__action`) يحمل الخطَّ الفاصل فيمتدّ
   بعرض البطاقة، والداخليُّ (`.stat__btn`) يحمل الزرَّ فيأخذ حجمَ محتواه
   ويتوسّط. وبواحدٍ كان لا بدّ من خسارة أحدهما: خطٌّ بعرض الزرّ لا يفصل
   شيئاً، وزرٌّ بعرض البطاقة شريطٌ لا زرّ.

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

   **والزاوية 10px لا قوس.** الحبّةُ الكاملة (`999px`) شكلُ **وسمٍ** — وهي
   شكلُ حبّة الوحدة وحبّة المقارنة في أعلى البطاقة نفسِها. فزرٌّ بالشكل
   نفسِه يُقرأ وسماً ثالثاً لا فعلاً، والزاويةُ الأليَن تفرزه عنهما.
   ======================================================================== */

/* ---- الغلاف: الخطّ الفاصل وحده ------------------------------------------ */

.stat__action {
  align-self: stretch;
  display: flex;
  justify-content: center;
  inline-size: auto;
  margin-block-start: auto;
  padding: .95rem 0 0;
  border: 0;
  border-block-start: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}
.stat--alarm .stat__action { background: none; border-block-start-color: color-mix(in srgb, var(--danger) 18%, transparent); }
.stat--warn .stat__action  { background: none; border-block-start-color: color-mix(in srgb, var(--warn) 20%, transparent); }

/* ---- الزرّ ------------------------------------------------------------- */

.stat__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .75rem;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-dark);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.stat--money .stat__btn   { background: var(--money-soft);   color: var(--money); }
.stat--auction .stat__btn { background: var(--auction-soft); color: var(--auction); }
.stat--people .stat__btn  { background: var(--people-soft);  color: var(--people); }
.stat--ok .stat__btn      { background: var(--ok-soft);      color: var(--ok); }
.stat--warn .stat__btn    { background: var(--warn-soft);    color: var(--warn); }
.stat--alarm .stat__btn   { background: var(--danger-soft);  color: var(--danger); }

/* المرور: يمتلئ مصمتاً والنصُّ أبيض. والأبيضُ على هذه الدرجات كلِّها فوق
   4.5:1 — هي درجاتُ `--money`/`--auction`/`--people`/`--warn`/`--danger`
   نفسُها التي تُكتب بالأبيض فوقها في الحبّات والشارات. */
a.stat:hover .stat__btn, a.stat:focus-visible .stat__btn { background: var(--brand-solid); color: #fff; }
a.stat--money:hover .stat__btn,   a.stat--money:focus-visible .stat__btn   { background: var(--money);   color: #fff; }
a.stat--auction:hover .stat__btn, a.stat--auction:focus-visible .stat__btn { background: var(--auction); color: #fff; }
a.stat--people:hover .stat__btn,  a.stat--people:focus-visible .stat__btn  { background: var(--people);  color: #fff; }
a.stat--ok:hover .stat__btn,      a.stat--ok:focus-visible .stat__btn      { background: var(--ok);      color: #fff; }
a.stat--warn:hover .stat__btn,    a.stat--warn:focus-visible .stat__btn    { background: var(--warn);    color: #fff; }
a.stat--alarm:hover .stat__btn,   a.stat--alarm:focus-visible .stat__btn   { background: var(--danger);  color: #fff; }

a.stat:hover .stat__go, a.stat:focus-visible .stat__go { transform: translateX(-3px); }

/* ===========================================================================
   التحويم: تغييرٌ واحدٌ لا أربعة
   ---------------------------------------------------------------------------
   «خلى لما أقف عليهم يكون الشكل أبسط وأفضل».

   وكان الوقوفُ على بطاقةٍ يُحدث **أربعةَ** أشياءٍ معاً: تقفز البطاقة 3px،
   ويثخن ظلُّها، ويمتلئ زرُّها مصمتاً، **ويُصبغ الغلافُ حولَ الزرّ برقعةٍ
   ملوّنة**. والرقعةُ عطلٌ لا اختيار: قاعدةُ `a.stat:hover .stat__action`
   من طبقةٍ سابقة، حين كان `.stat__action` هو الزرَّ نفسَه؛ ثم انقسم إلى
   غلافٍ وزرّ، فبقيت الصبغةُ على الغلاف تحت الزرّ وحولَه.

   فصار التحويمُ **شيئاً واحداً**: الزرُّ يمتلئ. وهو الشيءُ الذي يُضغط،
   وهو وحده الذي يجب أن يقول إنه يُضغط.

   والقفزةُ حُذفت: ثماني بطاقاتٍ ترتفع تحت المؤشّر وهو يمرّ عليها إيقاعٌ
   مكسور، والارتفاعُ يزيح ما تحت البطاقة بصرياً في شبكةٍ من صفّين.
   ======================================================================== */

/* الغلافُ لا يُصبَغ — لا في السكون ولا في التحويم. هو خطٌّ فاصلٌ وحده. */
.stat__action,
a.stat:hover .stat__action,
a.stat:focus-visible .stat__action,
a.stat--money:hover .stat__action,   a.stat--money:focus-visible .stat__action,
a.stat--auction:hover .stat__action, a.stat--auction:focus-visible .stat__action,
a.stat--people:hover .stat__action,  a.stat--people:focus-visible .stat__action,
a.stat--warn:hover .stat__action,    a.stat--warn:focus-visible .stat__action,
a.stat--alarm:hover .stat__action,   a.stat--alarm:focus-visible .stat__action {
  background: none;
  border-inline: 0;
  border-block-end: 0;
  border-radius: 0;
  color: inherit;
  padding-inline: 0;
}

/* البطاقةُ تسكن: حدٌّ أغمقُ قليلاً وظلٌّ أخفّ، بلا ارتفاع. */
a.stat:hover, a.stat:focus-visible {
  transform: none;
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow: 0 2px 10px rgb(23 32 51 / .06);
}

/* ===========================================================================
   البطاقةُ أضيقُ وأقصر
   ---------------------------------------------------------------------------
   «صغّر طول وعرض المربعات شويه».

   **والعرضُ لا يُكتب، يُكتب حدُّه الأدنى.** الشبكةُ `auto-fit` تقرّر بعدد ما
   يتّسع، فتصغيرُ الحدّ الأدنى من 15.5rem إلى 13.2rem يزيد عموداً على العرض
   الذي يعمل عليه المالك — والبطاقةُ تضيق لأن الثلاثةَ تقتسم ما كان بين
   اثنتين، لا لأن رقماً أُملي عليها.

   **والطولُ يُقصَّر من ستّة مواضع لا من واحد.** بطاقةٌ أقصرُ بحشوةٍ وحدها
   تصير نصّاً محشوراً في إطار؛ فنُقص من كلِّ ما بين أسطرها بنسبةٍ واحدة:
   الحشوة، ومربّع الرمز، والرقم، وما بين الصفّ العلويّ وما تحته، وما بين
   الشرح والزرّ، وحشوةُ الزرّ نفسِه. فالإيقاعُ يبقى كما هو، مصغَّراً.
   ======================================================================== */

/* **والعرضُ نزل إلى 15rem لا إلى 13.2.** جُرّب 13.2 أوّلاً فأعطى ثلاثةَ
   أعمدةٍ على شاشة المالك — وبطاقةً بعرض 217px. وذلك أضيقُ ممّا يحتمله
   ترتيبُ «الرقم قُصاد العنوان»: «70,000.00» بـ1.5rem يأخذ 95px، والرمزُ
   وفجوتُه 48، فلا يبقى للاسم إلا 37 — و«إجمالي التأمين» انقصّ في منتصف
   كلمتيه. فالحدُّ الأدنى العمليُّ لهذا الترتيب نحو 15rem، وما دونه يكسره.

   والتصغيرُ يقع حيث يتّسع: على الشاشات العريضة ينزل الحدُّ من 17rem إلى
   15.5rem، فتزيد الأعمدةُ وتضيق البطاقات — وعلى شاشة المالك يبقى عمودان
   وتقصُر البطاقةُ وحدَها. */
.board-alarms, .board-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .7rem;
}
@media (min-width: 96rem) {
  .board-alarms, .board-stats { grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); }
}

.stat { padding: 1.05rem 1.1rem .9rem; padding-inline-start: 1.25rem; }

.stat__icon { inline-size: 2.3rem; block-size: 2.3rem; padding: .52rem; border-radius: 11px; }
.stat__top { margin-block-end: .5rem; }
.stat__label { font-size: .85rem; }
.stat__value { font-size: 1.5rem; }
.stat__unit, .delta { padding-block: .22rem; font-size: .7rem; }

.stat__detail { margin-block-start: .3rem; font-size: .74rem; line-height: 1.55; }
.stat__spark { margin-block-start: .35rem; }

.stat__action { padding-block-start: .7rem; }
.stat__btn { padding: .42rem .85rem; font-size: .72rem; border-radius: 9px; }

@media (max-width: 40rem) {
  .stat { padding: .95rem 1rem .85rem; padding-inline-start: 1.15rem; }
  .stat__value { font-size: 1.35rem; }
}

/* ===========================================================================
   الرسمُ داخل البطاقة: مساحةٌ وخطٌّ ونقطةُ اليوم — وبطاقتُه أعرض
   ---------------------------------------------------------------------------
   «خلى مربع مزايدات مرفوضة أعرض وفيه رسم بياني احترافي أكتر، وخلى كلمة افتح
   بخط بولد عشان تكون واضحة».

   **والعرضُ قاعدةٌ لا استثناء**: كلُّ بطاقةٍ تحمل رسماً تأخذ عمودين. رسمٌ
   بعرض بطاقةٍ عادية سبعةُ أعمدةٍ في 150px — أي ٢١px للعمود الواحد، وهو عرضٌ
   لا يُقرأ منه شكل. وبطاقتان تحملان رسماً اليوم («مزايدات مرفوضة» و«المزايدات»)،
   فالقاعدةُ تشملهما معاً بدل أن تُسمّى إحداهما بالاسم وتُنسى الأخرى.

   **والرسمُ ثلاثُ طبقات** بدل خطٍّ واحد:

   * **مساحةٌ** تحت الخطّ تُقرأ حجماً قبل أن يُتتبَّع الخطّ.
   * **خطٌّ** فوقها يقول الاتجاه.
   * **نقطةٌ** على طرفه تقول «هنا اليوم» بلا تتبّعٍ إلى الطرف.

   والنقطةُ عنصرُ HTML فوق الرسم لا `<circle>` داخله: الرسمُ يُمطّ أفقياً
   (`preserveAspectRatio="none"`) فتتحوّل كلُّ دائرةٍ فيه إلى قطعٍ ناقص.
   ======================================================================== */

@media (min-width: 48rem) {
  .board-stats .stat--chart, .board-alarms .stat--chart { grid-column: span 2; }
}

.stat__chart {
  position: relative;
  display: block;
  margin-block-start: .45rem;
  block-size: 3.1rem;
}

.stat__spark {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.stat__spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* السُّمكُ لا يُمطّ مع الرسم: بلا هذا يصير الخطُّ شعرةً على بطاقةٍ عريضة
     وحبلاً على ضيّقة، لأن المطَّ الأفقيَّ يقسم سُمكَه. */
  vector-effect: non-scaling-stroke;
}
.stat__spark-area {
  fill: color-mix(in srgb, currentColor 13%, transparent);
  stroke: none;
}

.stat__spark-dot {
  position: absolute;
  inline-size: .45rem;
  block-size: .45rem;
  margin: -.225rem 0 0 -.225rem;   /* مركزُها على النقطة لا ركنُها */
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--panel);
}

.stat--money .stat__chart   { color: var(--money); }
.stat--auction .stat__chart { color: var(--auction); }
.stat--people .stat__chart  { color: var(--people); }
.stat--warn .stat__chart    { color: var(--warn); }
.stat--alarm .stat__chart   { color: var(--danger); }
.stat--ok .stat__chart      { color: var(--ok); }
.stat__chart                { color: var(--brand-dark); }

/* حلقةُ النقطة تأخذ لونَ البطاقة المصبوغة لا الأبيضَ المصمت. */
.stat--warn .stat__spark-dot  { box-shadow: 0 0 0 2px var(--warn-soft); }
.stat--alarm .stat__spark-dot { box-shadow: 0 0 0 2px var(--danger-soft); }

/* ---- «افتح» غليظة ------------------------------------------------------- */

/* 700 لا 600: الزرُّ كلمتان في حبّةٍ صغيرة، ووزنٌ وسيطٌ فيها يُقرأ نصّاً
   عادياً بخلفيةٍ ملوّنة لا فعلاً. */
.stat__btn { font-weight: 700; }

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

   وفُسحةٌ تحته تفصله عن خطّ الزرّ، وارتفاعٌ أكبرُ في البطاقة العريضة: رسمٌ
   بعرض ٦٥٠px وارتفاع ٥٠ خطٌّ مستوٍ تقريباً مهما تحرّكت بياناتُه. */
.stat__chart { margin-block: .55rem .15rem; }
.stat--chart .stat__chart { block-size: 3.8rem; }

/* ===========================================================================
   شبكةُ الرسوم: صفٌّ من بطاقتين
   ---------------------------------------------------------------------------
   «طلّع كارت المستخدمين للأعلى وخلى كارت المزايدات ومزايدات مرفوضة في صف».

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

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

   و`22rem` حدّاً أدنى: أضيقُ منه يعيد الرسمَ إلى العرض الذي لا يُقرأ منه
   شكل، وعندها ينزل إلى عمودٍ واحد — بطاقةٌ عريضةٌ فوق أخرى أصدقُ من
   بطاقتين ضيّقتين برسمين مسحوقين.
   ======================================================================== */

.board-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: .7rem;
  margin-block-end: 1.4rem;
}

/* المدُّ إلى عمودين لم يعد له معنى: البطاقةُ في شبكتها الخاصّة أصلاً. */
@media (min-width: 48rem) {
  .board-stats .stat--chart, .board-alarms .stat--chart { grid-column: auto; }
}

/* الحدُّ الأدنى 16.5rem لا 15: الخمسةَ عشرَ أعطت **أربعةَ** أعمدةٍ على شاشة
   المالك (1366px) وبطاقةً بعرض 250px، فانقصّ «إجمالي التأمين» في منتصف
   كلمتيه — وهو العطلُ نفسُه الذي ظهر عند 13.2rem وصُحّح إلى 15، ثم عاد عند
   عرضٍ أكبر لأن العمودَ الرابع ظهر.

   والقاعدةُ التي خرجت من المحاولتين: ترتيبُ «الرقم قُصاد العنوان» يحتاج
   **16.5rem على الأقل**. «70,000.00» بـ1.5rem يأخذ 95px، والرمزُ وفجوتُه
   48، والحشوةُ 38 — فما دون 264px لا يترك للاسم عرضاً يُقرأ. */
.board-alarms, .board-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}
@media (min-width: 96rem) {
  .board-alarms, .board-stats { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
}

/* ===========================================================================
   الزرُّ ممتلئٌ دائماً — لا عند التحويم وحده
   ---------------------------------------------------------------------------
   «خلى شكل الأربع كروت زي ما هو من غير ما أقف عليه، بس خفّف درجة لونهم
   شويه، وخلى كلمة افتح بلون أبيض».

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

   **و٨٨٪ لا أقلّ.** «خفّف الدرجة» له حدٌّ يقطعه: النصُّ أبيضُ فوقه، وكلُّ
   درجةٍ تُخفَّف تقرّب نسبةَ التباين من الأرضية. قيست خمسُ نسبٍ على الدرجات
   الخمس قبل الاختيار:

       الدرجة        100%   92%   88%   84%   80%
       بنفسجي        6.57  5.49  4.98  4.57  4.19
       فيروزي        5.91  4.98  4.63  4.26  3.91
       كهرماني       5.93  5.01  4.58  4.23  3.89
       أحمر          6.57  5.78  5.41  5.02  4.64
       أخضر          6.10  5.18  4.75  4.35  3.99

   فـ٨٨٪ أفتحُ مزيجٍ يبقى فيه أضعفُها (الكهرماني، 4.58) فوق الحدّ 4.5.
   و٨٤٪ يُسقط ثلاثاً من خمس.

   **واللونُ الأساسي يبقى مصمتاً بلا تخفيف**: `--brand-solid` معرَّفٌ في رأس
   الورقة بأنه «خلفيةٌ يُكتب فوقها بالأبيض — الزرّ، الحدّ 4.5»، أي أنه
   **معايَرٌ على الحدّ نفسِه** في الألوان السبعة كلِّها. وتخفيفُه يُسقطه
   تحته في بعضها، ولا سبيل إلى قياس السبعة من هنا.
   ======================================================================== */

.stat__btn {
  background: var(--brand-solid);
  color: #fff;
}
.stat--money .stat__btn   { background: color-mix(in srgb, var(--money) 88%, #fff);   color: #fff; }
.stat--auction .stat__btn { background: color-mix(in srgb, var(--auction) 88%, #fff); color: #fff; }
.stat--people .stat__btn  { background: color-mix(in srgb, var(--people) 88%, #fff);  color: #fff; }
.stat--ok .stat__btn      { background: color-mix(in srgb, var(--ok) 88%, #fff);      color: #fff; }
.stat--warn .stat__btn    { background: color-mix(in srgb, var(--warn) 88%, #fff);    color: #fff; }
.stat--alarm .stat__btn   { background: color-mix(in srgb, var(--danger) 88%, #fff);  color: #fff; }

/* التحويمُ يعمّق بدل أن يملأ: الامتلاءُ صار الحالةَ الساكنة، فبقي للتحويم
   أن يقول «هذه هي» بدرجةٍ أغمق — تغييرٌ واحدٌ صغير لا قلبٌ كامل. */
a.stat:hover .stat__btn, a.stat:focus-visible .stat__btn { background: var(--brand-solid); color: #fff; }
a.stat--money:hover .stat__btn,   a.stat--money:focus-visible .stat__btn   { background: var(--money);   color: #fff; }
a.stat--auction:hover .stat__btn, a.stat--auction:focus-visible .stat__btn { background: var(--auction); color: #fff; }
a.stat--people:hover .stat__btn,  a.stat--people:focus-visible .stat__btn  { background: var(--people);  color: #fff; }
a.stat--ok:hover .stat__btn,      a.stat--ok:focus-visible .stat__btn      { background: var(--ok);      color: #fff; }
a.stat--warn:hover .stat__btn,    a.stat--warn:focus-visible .stat__btn    { background: var(--warn);    color: #fff; }
a.stat--alarm:hover .stat__btn,   a.stat--alarm:focus-visible .stat__btn   { background: var(--danger);  color: #fff; }

/* ===========================================================================
   أربعةُ أعمدةٍ على الشاشة العريضة — وشبكةُ أمانٍ للعنوان الطويل
   ---------------------------------------------------------------------------
   «خلى الأربعة دول في نفس السطر».

   وكان `auto-fit` بحدٍّ أدنى 16.5rem يعطي **ثلاثة** أعمدةٍ على 1366px، فتنزل
   البطاقةُ الرابعة وحدها. والحدُّ 16.5 لم يُختر ذوقاً: هو أضيقُ عرضٍ يتّسع
   فيه ترتيبُ «الرقم قُصاد العنوان» لأطول اسمٍ مع أعرض رقم («إجمالي التأمين»
   و«70,000.00») — وما دونه كان الاسمُ يُقصّ في منتصف كلمته.

   فالحلُّ ليس خفضَ الحدّ وحدَه، بل **رفعَ سببِه**:

   * **الصفُّ العلويُّ يلتفّ** حين لا يتّسع (`flex-wrap`). فالرقمُ ينزل تحت
     العنوان في البطاقة الضيّقة بدل أن يُقصَّ الاسم. تراجعٌ مرتّبٌ لا كسر:
     من يرى بطاقةً ضيّقة يرى سطرين مقروءين، لا سطراً واحداً ناقصاً.
   * **وأربعةُ أعمدةٍ صريحةٌ فوق 78rem** لا `auto-fit`. العددُ هنا قرارٌ
     («أربعتها في سطر») لا نتيجةَ حساب، وكتابتُه رقماً أصدقُ من تعييرِ حدٍّ
     أدنى حتى يصادف أن يعطيَه.
   ======================================================================== */

/* الاسمُ يأخذ ما يحتاج ثم يلتفّ الرقمُ تحته. و`flex: 1 1 55%` لا `auto`:
   بـ`auto` يبقى الاسمُ على سطره ويُقصّ لأن الالتفافَ لا يقع إلا إذا طلب
   أحدُ العنصرين عرضاً أكبر من أساسه. */
.stat__top { flex-wrap: wrap; row-gap: .15rem; }
.stat__ident { flex: 1 1 55%; }
.stat__figure { flex: 0 1 auto; }

@media (min-width: 78rem) {
  .board-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===========================================================================
   الرسمُ منحنىً، والزرُّ أخفُّ درجةً — كلٌّ إلى حدِّه هو
   ---------------------------------------------------------------------------
   «خفّف درجة لون أزرار افتح قليلاً، وغيّر شكل الرسم البياني لشكل احترافي
   أكتر».

   ---- الزرّ -------------------------------------------------------------
   كان تخفيفاً واحداً (٨٨٪) على الدرجات كلّها، وذلك يترك كلَّ درجةٍ عند
   نسبةٍ مختلفة من الحدّ: الأحمرُ عند 5.41 والكهرمانيُّ عند 4.58 — أي أن
   الأحمر كان يحتمل تخفيفاً أكبرَ بكثير ولم يُعطَه.

   فصار **لكلِّ درجةٍ حدُّها هي**، محسوباً بالبحث عن أفتح مزيجٍ يبقى عنده
   الأبيضُ فوق 4.55:

       بنفسجي  84%  →  4.57        أحمر    80%  →  4.64
       فيروزي  88%  →  4.63        أخضر    87%  →  4.61
       كهرماني 88%  →  4.58

   ---- الرسم --------------------------------------------------------------
   كان سبعَ نقاطٍ موصولةٍ بمستقيمات — أي سبعَ زوايا حادّةٍ في 50px من
   الارتفاع، وهو أول ما يميّز رسماً مرتجلاً من رسمِ لوحةٍ مصنوعة. صار
   منحنىً (Catmull-Rom، في `dashboard.py`) يمرّ بكل نقطةٍ بالضبط.

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

/* ---- الزرّ: كلُّ درجةٍ إلى حدّها --------------------------------------- */

.stat--money .stat__btn   { background: color-mix(in srgb, var(--money) 84%, #fff); }
.stat--auction .stat__btn { background: color-mix(in srgb, var(--auction) 88%, #fff); }
.stat--people .stat__btn  { background: color-mix(in srgb, var(--people) 88%, #fff); }
.stat--ok .stat__btn      { background: color-mix(in srgb, var(--ok) 87%, #fff); }
.stat--warn .stat__btn    { background: color-mix(in srgb, var(--warn) 88%, #fff); }
.stat--alarm .stat__btn   { background: color-mix(in srgb, var(--danger) 80%, #fff); }

/* ---- الرسم -------------------------------------------------------------- */

.stat__spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* السُّمكُ لا يُمطّ مع الرسم: بلا هذا يصير الخطُّ شعرةً على بطاقةٍ عريضة
     وحبلاً على ضيّقة، لأن المطَّ الأفقيَّ يقسم سُمكَه. */
  vector-effect: non-scaling-stroke;
}
.stat__spark-area { fill: color-mix(in srgb, currentColor 16%, transparent); stroke: none; }

.stat__spark-dot {
  inline-size: .55rem;
  block-size: .55rem;
  margin: -.275rem 0 0 -.275rem;
  box-shadow: 0 0 0 2.5px var(--panel), 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}
.stat--warn .stat__spark-dot,
.stat--alarm .stat__spark-dot {
  box-shadow: 0 0 0 2.5px var(--panel), 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}

/* ===========================================================================
   سطرُ الشرح وسطرُ المقارنة: أوضحُ لوناً وأثقلُ وزناً
   ---------------------------------------------------------------------------
   «خلى الكلام ده واضح وعريض أكتر» — «أقل 100% عن الأسبوع الماضي» و«0 خلال
   ٢٤ ساعة».

   وكان السطران بلون `--muted` ووزنٍ عادي ومقاسٍ `.72`–`.74rem`. و`--muted`
   على البطاقة البيضاء نسبتُه **5.42** — فوق حدّ النصّ الصغير (4.5) بهامشٍ
   ضيّق، وهو أضعفُ من أن يُقرأ في ضوء نهارٍ على شاشةٍ باهتة. و`--ink-soft`
   يعطي **8.57** على البطاقة نفسِها، و7.9 على بطاقة التحذير المصبوغة.

   فالتغييرُ ثلاثةٌ معاً — لونٌ أغمق، ووزنٌ 500 و600، ومقاسٌ أكبرُ قليلاً —
   لأن أيّاً منها وحدَه لا يكفي: نصٌّ أغمقُ بوزنٍ رفيعٍ يبقى رفيعاً، ووزنٌ
   أثقلُ بلونٍ باهتٍ يبقى باهتاً.

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

.stat__detail {
  font-size: .81rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}

.stat__delta-note {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* والشاشاتُ السبعُ التي تستعمل البطاقة المضغوطة تأخذ اللونَ نفسَه: العلّةُ
   واحدةٌ فيها — سطرُ شرحٍ بـ`--muted` — ولو تُرك لصار في اللوحة سطران
   بوضوحين مختلفين لسببٍ لا أحدَ يعرفه. والمقاسُ يبقى مضغوطاً كما هو. */
.board-stats--compact .stat__detail { color: var(--ink-soft); font-weight: 500; }

/* ===========================================================================
   خطُّ الرأس يُحذف، وسطرُ الشرح يصغُر في البطاقات الأربع وحدها
   ---------------------------------------------------------------------------
   «شيل الخط تحت الهيدر اللي قبل أرقام المنصة»، و«صغّر الكلام اللي تحت
   العنوان في الأربع مربعات اللي في الأعلى فقط».

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

   **والتصغيرُ في `board-stats` وحدها**: بطاقاتُ الرسم في شبكتها الخاصّة
   (`board-charts`) فتبقى على المقاس الأكبر — وهي أعرضُ وأطول، وسطرُ شرحٍ
   صغيرٌ فيها يسبح في فراغها. واللونُ والوزنُ اللذان رُفعا في الخطوة السابقة
   يبقيان: المطلوبُ مقاسٌ أصغر لا وضوحٌ أقلّ.
   ======================================================================== */

.board .page__actions { padding-block-end: 0; border-block-end: 0; }

.board-stats .stat__detail { font-size: .75rem; line-height: 1.55; }

/* ===========================================================================
   «الصورة العامّة»: سطرُ تعريفٍ، ولوحتان مرتَّبتان
   ---------------------------------------------------------------------------
   «خلى الصورة العامة وما تحتها بشكل احترافي أكتر، وضيف سطر كلام تحت الصورة
   العامة».

   **السطر** يقول ما تجيبه اللوحتان. وعنوانُ الكتلة كلمتان لا تقولان ما
   الفرقَ بينه وبين «أرقام المنصّة» فوقه — وكلتاهما أرقامٌ عن المنصّة.
   والفرقُ أن تلك **عدّادات** وهذه **توزيعٌ وحركة**.

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

   * **خطٌّ تحت الرأس** يفصله عمّا يشرحه، وحشوةٌ أوسعُ حوله.
   * **الدائرةُ أكبرُ وحلقتُها أثخن**، ورقمُها في مركزها أثقلُ وزناً — هي
     الرقمُ الوحيدُ في اللوحة، وكانت بوزن سطرٍ عادي.
   * **مفتاحُ الدائرة** صفوفٌ أعلى، والحبّةُ فيه دائرةٌ لا مربّعٌ مستدير:
     الدائرةُ تقول «هذه قطعةٌ من تلك الدائرة»، والمربّعُ يقول «وسمٌ آخر».
   * **أعمدةُ الحركة** برؤوسٍ مستديرة وقاعدةٍ مرسومة، وأرقامُها فوقها
     بخاناتٍ مستقيمة.
   ======================================================================== */

.board-lede {
  margin: -.35rem 0 1rem;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
  max-inline-size: 52rem;
}

/* ---- اللوح ------------------------------------------------------------- */

.figure { padding: 1.35rem 1.45rem 1.5rem; }

.figure__head {
  padding-block-end: .85rem;
  margin-block-end: 1.15rem;
  border-block-end: 1px solid var(--line-soft);
}
.figure h2 { font-size: 1rem; font-weight: 700; }

/* ---- الدائرة ------------------------------------------------------------ */

.wheel { gap: 1.6rem; }
.wheel__disc { inline-size: 8.5rem; block-size: 8.5rem; }
/* الثقبُ أضيقُ نسبةً: حلقةٌ أثخنُ تُقرأ قطاعاتُها المتقاربة، وثقبٌ يكفي رقماً. */
.wheel__hole { inline-size: 5.3rem; block-size: 5.3rem; }
.wheel__hole strong { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.wheel__hole span { font-size: .72rem; font-weight: 600; }

.wheel__item { padding-block: .55rem; gap: .6rem; }
/* دائرةٌ لا مربّعٌ مستدير: الحبّةُ هنا **قطعةٌ من الدائرة** المجاورة، لا
   وسمٌ ثالثٌ بجوار حبّات الوحدة والمقارنة في البطاقات فوقها. */
.wheel__dot { inline-size: .62rem; block-size: .62rem; border-radius: 50%; }
.wheel__name { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.wheel__count { font-size: .95rem; color: var(--ink); }
.wheel__share { font-size: .78rem; font-weight: 600; }

/* ---- أعمدة الحركة ------------------------------------------------------- */

.spark { padding-block-end: .2rem; border-block-end: 1px solid var(--line-soft); }
.spark__bar {
  border-start-start-radius: 5px;
  border-start-end-radius: 5px;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.spark__count { font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.spark__label { font-size: .7rem; font-weight: 500; margin-block-start: .45rem; }

/* ===========================================================================
   عناوينُ الكتل: كحليّةٌ غامقة — و«الصورة العامّة» تنزل قليلاً
   ---------------------------------------------------------------------------
   «نزّل الصورة العامة لتحت شويه وغمّقها بلون كحلي».

   **والكحليُّ مشتقٌّ لا مكتوب**: `color-mix` بين `--ink` وأزرقٍ صريح بنسبة
   ٨٠٪ إلى ٢٠٪. وذلك لأن `--ink` **ينقلب** في المظهر الداكن (من `#172033`
   إلى لونٍ فاتح)، فقيمةٌ كحليّةٌ مكتوبةٌ بيدٍ تصير نصّاً غامقاً على أرضيةٍ
   سوداء لا يُقرأ. والمزيجُ يتبع الانقلاب.

   وقيس على أرضية الصفحة قبل الاعتماد: `#182b55`، تباينُه **12.81** — وكان
   `--muted` عند **5.01**. أي أن العنوان صار يُقرأ قبل ما تحته لا معه.

   **والعناوينُ الثلاثةُ معاً** لا «الصورة العامّة» وحدها: هي عنصرٌ واحدٌ
   مكرَّر، وواحدٌ كحليٌّ بين رماديَّين يُقرأ خطأً في الطباعة لا قصداً.
   وعنوانُ الإنذار يبقى أحمر — لونُه معناه حالةٌ لا رتبة.

   **والنزول** على «الصورة العامّة» وحدها (`#head-figures`): هي الكتلةُ
   الوحيدةُ التي يسبقها **رسمان** لا بطاقات، والفصلُ عن كتلةِ رسومٍ يحتاج
   فراغاً أوسعَ من الفصل عن صفٍّ من الأرقام.
   ======================================================================== */

.board-eyebrow {
  color: color-mix(in srgb, var(--ink) 80%, #1a56db);
  font-size: .82rem;
}
.board-eyebrow::after { background: var(--line); }
.board-eyebrow--alarm { color: var(--danger); }

#head-figures { margin-block-start: 2.3rem; }
.board-lede { color: var(--ink-soft); }

/* ===========================================================================
   عطلٌ في المظهر الداكن: أبيضُ على درجاتٍ فاتحة
   ---------------------------------------------------------------------------
   زرُّ الوجهة يُملأ بدرجة تصنيف بطاقته **مخفَّفةً بالأبيض** ونصُّه أبيض.
   وذلك حُسب على الفاتح حيث الدرجاتُ غامقة (`--money: #6d4aa8`). لكنّ المظهرَ
   الداكن **يقلب الدرجات إلى فاتحة** (`--money: #c4a9f2`) — فصار الزرُّ
   لوحةً باستيل ونصُّه أبيض. القياس:

       بنفسجي  #cdb7f4   أبيضٌ عليه 1.80    غامقٌ عليه 10.25
       فيروزي  #6dd1d6              1.79              10.30
       كهرماني #f2c97a              1.57              11.77
       أحمر    #fdb4ae              1.71              10.81
       أخضر    #77d9b0              1.70              10.83

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

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

[data-scheme="dark"] .stat--money .stat__btn   { background: var(--money);   color: var(--ground); }
[data-scheme="dark"] .stat--auction .stat__btn { background: var(--auction); color: var(--ground); }
[data-scheme="dark"] .stat--people .stat__btn  { background: var(--people);  color: var(--ground); }
[data-scheme="dark"] .stat--ok .stat__btn      { background: var(--ok);      color: var(--ground); }
[data-scheme="dark"] .stat--warn .stat__btn    { background: var(--warn);    color: var(--ground); }
[data-scheme="dark"] .stat--alarm .stat__btn   { background: var(--danger);  color: var(--ground); }

/* والتحويمُ يُفتّح بدل أن يُغمّق — الاتجاهُ ينقلب مع المظهر كما تنقلب الدرجة. */
[data-scheme="dark"] a.stat--money:hover .stat__btn,   [data-scheme="dark"] a.stat--money:focus-visible .stat__btn   { background: color-mix(in srgb, var(--money) 78%, #fff);   color: var(--ground); }
[data-scheme="dark"] a.stat--auction:hover .stat__btn, [data-scheme="dark"] a.stat--auction:focus-visible .stat__btn { background: color-mix(in srgb, var(--auction) 78%, #fff); color: var(--ground); }
[data-scheme="dark"] a.stat--people:hover .stat__btn,  [data-scheme="dark"] a.stat--people:focus-visible .stat__btn  { background: color-mix(in srgb, var(--people) 78%, #fff);  color: var(--ground); }
[data-scheme="dark"] a.stat--ok:hover .stat__btn,      [data-scheme="dark"] a.stat--ok:focus-visible .stat__btn      { background: color-mix(in srgb, var(--ok) 78%, #fff);      color: var(--ground); }
[data-scheme="dark"] a.stat--warn:hover .stat__btn,    [data-scheme="dark"] a.stat--warn:focus-visible .stat__btn    { background: color-mix(in srgb, var(--warn) 78%, #fff);    color: var(--ground); }
[data-scheme="dark"] a.stat--alarm:hover .stat__btn,   [data-scheme="dark"] a.stat--alarm:focus-visible .stat__btn   { background: color-mix(in srgb, var(--danger) 78%, #fff);  color: var(--ground); }

/* ===========================================================================
   «حالات المزادات» في سطرٍ وحدَه — دائرةٌ ومفتاحٌ بأشرطة
   ---------------------------------------------------------------------------
   «خلى مربع حالة المزاد في سطر لوحده وصمّمه بشكل احترافي أكتر».

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

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

   والصفُّ صار **شبكةً بأعمدةٍ ثابتة** لا صفَّ `flex`: بلا ذلك يتغيّر موضعُ
   الرقم والنسبة بين صفٍّ وصفّ بحسب طول الاسم، فلا يستقيم عمودٌ يُقرأ نزولاً.
   ======================================================================== */

/* كلُّ لوحةٍ في سطرها: الأولى دائرةٌ ومفتاح، والثانيةُ سبعةُ أعمدة — ولا
   شيء يربح من وقوفهما جنباً إلى جنب. */
.board-figures { grid-template-columns: 1fr; }

.wheel { gap: 2.2rem; flex-wrap: nowrap; align-items: center; }
.wheel__disc { flex: none; }
.wheel__key { flex: 1 1 auto; min-inline-size: 0; }

/* أربعةُ أعمدة: حبّةٌ واسمٌ يمتدّ، فعددٌ، فشريطٌ يأخذ ما بقي، فنسبة. */
.wheel__item {
  display: grid;
  grid-template-columns: auto minmax(6rem, max-content) 2.5rem minmax(4rem, 1fr) 3rem;
  align-items: center;
  gap: .75rem;
  padding-block: .7rem;
}

.wheel__count { text-align: start; }
.wheel__share { min-inline-size: 0; }

.wheel__track {
  block-size: .4rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.wheel__fill {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: var(--line);
}
/* بترتيب `WHEEL` في `dashboard.py` — القائمةُ نفسُها التي تلوّن الحبّات
   والقطاعات، فلا يفترق شريطٌ عن حبّته. */
.wheel__fill[data-slice="0"] { background: #1a9aa1; }
.wheel__fill[data-slice="1"] { background: #4aa5df; }
.wheel__fill[data-slice="2"] { background: #8c6ad6; }
.wheel__fill[data-slice="3"] { background: #c9891a; }
.wheel__fill[data-slice="4"] { background: #21a06a; }
.wheel__fill[data-slice="5"] { background: #e05a4c; }

/* الشاشةُ الضيّقة: الشريطُ يُطوى ويبقى الرقمُ والنسبة — عمودٌ بعرض 4rem
   لشريطٍ ليس شريطاً. والدائرةُ تنزل فوق المفتاح. */
@media (max-width: 52rem) {
  .wheel { flex-wrap: wrap; gap: 1.2rem; }
  .wheel__item { grid-template-columns: auto 1fr 2.5rem 3rem; }
  .wheel__track { display: none; }
}

/* ===========================================================================
   «حالات المزادات»: دائرةٌ ولوحاتُ حالة
   ---------------------------------------------------------------------------
   «غيّر تصميم مربع حالات المزاد لتصميم احترافي جداً».

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

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

   واللوحُ يحمل **حدّاً علوياً بلون حالته**، وهو اللون نفسُه في القطاع
   والحبّة والشريط — أربعةُ مواضعَ من قائمةٍ واحدة (`WHEEL` في
   `dashboard.py`)، فلا يفترق واحدٌ منها عن البقية.

   والدائرةُ يكتب ثقبُها «إجمالي المزادات» لا «مزاد»: كلمةٌ واحدةٌ تحت رقمٍ
   في وسط دائرةٍ لا تقول أهو مجموعُ القطاعات أم أكبرُها.
   ======================================================================== */

.wheel { gap: 2rem; align-items: center; }

/* الدائرةُ تُحاط بحلقةٍ خافتةٍ تفصلها عن اللوح — قطاعٌ فاتحٌ على سطحٍ أبيض
   ينتهي في الهواء بلا حافّة. */
.wheel__disc {
  box-shadow: 0 0 0 1px var(--line-soft), 0 8px 22px rgb(23 32 51 / .07);
}
.wheel__hole {
  inline-size: 5.6rem;
  block-size: 5.6rem;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.wheel__hole strong { font-size: 2.1rem; }
.wheel__hole span { font-size: .66rem; line-height: 1.3; text-align: center; }

/* ---- لوحاتُ الحالة ------------------------------------------------------ */

.wheel__key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .7rem;
}

.wheel__item {
  display: block;
  padding: .85rem .95rem .9rem;
  border: 1px solid var(--line);
  border-block-start-width: 3px;
  border-radius: 12px;
  background: var(--panel);
}
.wheel__item:last-child { border-block-end: 1px solid var(--line); }

.wheel__item[data-slice], .wheel__item { border-block-start-color: var(--line); }
.wheel__item:nth-child(1) { border-block-start-color: #1a9aa1; }
.wheel__item:nth-child(2) { border-block-start-color: #4aa5df; }
.wheel__item:nth-child(3) { border-block-start-color: #8c6ad6; }
.wheel__item:nth-child(4) { border-block-start-color: #c9891a; }
.wheel__item:nth-child(5) { border-block-start-color: #21a06a; }
.wheel__item:nth-child(6) { border-block-start-color: #e05a4c; }

.wheel__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-block-end: .35rem;
}
.wheel__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wheel__share {
  flex: none;
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  min-inline-size: 0;
  text-align: end;
}

.wheel__count {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-block-end: .55rem;
}

.wheel__track { display: block; block-size: .3rem; }

@media (max-width: 52rem) {
  .wheel__track { display: block; }
  .wheel { flex-wrap: wrap; }
}

/* ===========================================================================
   «حالات المزادات»: شريطٌ مكدَّسٌ بدل الدائرة
   ---------------------------------------------------------------------------
   «غيّر لتصميم أفضل».

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

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

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

.dist { display: block; }

/* ---- الإجمالي ----------------------------------------------------------- */

.dist__total {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .9rem;
}
.dist__total strong {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dist__total span { font-size: .82rem; font-weight: 600; color: var(--muted); }

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

.dist__bar {
  display: flex;
  block-size: 1.1rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}

/* فاصلٌ بلون اللوح بين القطع: قطعتان بلونين متقاربين بلا فاصلٍ تُقرآن
   قطعةً واحدة. و`border` لا `gap`: الفجوةُ تُضاف إلى مجموع النسب فيفيض
   الشريطُ عن مئةٍ، والحدُّ يُقتطع من عرض القطعة نفسِها. */
.dist__seg { flex: none; min-inline-size: 2px; box-sizing: border-box; }
.dist__seg + .dist__seg { border-inline-start: 2px solid var(--panel); }

.dist__seg[data-slice="0"] { background: #1a9aa1; }
.dist__seg[data-slice="1"] { background: #4aa5df; }
.dist__seg[data-slice="2"] { background: #8c6ad6; }
.dist__seg[data-slice="3"] { background: #c9891a; }
.dist__seg[data-slice="4"] { background: #21a06a; }
.dist__seg[data-slice="5"] { background: #e05a4c; }

/* ---- المفتاح ------------------------------------------------------------ */

.dist__key {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.9rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.dist__item { display: flex; align-items: center; gap: .5rem; }

.dist__dot { inline-size: .62rem; block-size: .62rem; border-radius: 50%; background: var(--line); }
.dist__dot[data-slice="0"] { background: #1a9aa1; }
.dist__dot[data-slice="1"] { background: #4aa5df; }
.dist__dot[data-slice="2"] { background: #8c6ad6; }
.dist__dot[data-slice="3"] { background: #c9891a; }
.dist__dot[data-slice="4"] { background: #21a06a; }
.dist__dot[data-slice="5"] { background: #e05a4c; }

.dist__name { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.dist__count { font-size: .95rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dist__share {
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-inline-start: .15rem;
}

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

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

   ولا حدودَ بين الصفوف: الشريطُ نفسُه يفصل، وخطٌّ فوق شريطٍ خطّان.
   ======================================================================== */

.dist__rows { display: grid; gap: 1.15rem; margin: 0; padding: 0; list-style: none; }

.dist__row { display: block; }

.dist__line {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-block-end: .5rem;
}

.dist__dot {
  flex: none;
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  background: var(--line);
  align-self: center;
}

/* الاسمُ يأخذ ما بقي فيُدفع العددُ والنسبةُ إلى الحافة المقابلة — فيستقيم
   عمودُ الأرقام نزولاً مهما اختلفت أطوالُ الأسماء. */
.dist__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.dist__count {
  flex: none;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dist__share {
  flex: none;
  min-inline-size: 3rem;
  text-align: end;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dist__track {
  display: block;
  block-size: .55rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.dist__fill {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  /* حدٌّ أدنى يُرى: حالةٌ بنسبة ١٪ شريطُها بعرض ٦px على لوحةٍ بعرض ٩٠٠،
     وذلك خيطٌ لا شريط — والقارئُ يظنّ الحالةَ صفراً وهي ليست كذلك. */
  min-inline-size: .55rem;
  background: var(--line);
}

.dist__fill[data-slice="0"], .dist__dot[data-slice="0"] { background: #1a9aa1; }
.dist__fill[data-slice="1"], .dist__dot[data-slice="1"] { background: #4aa5df; }
.dist__fill[data-slice="2"], .dist__dot[data-slice="2"] { background: #8c6ad6; }
.dist__fill[data-slice="3"], .dist__dot[data-slice="3"] { background: #c9891a; }
.dist__fill[data-slice="4"], .dist__dot[data-slice="4"] { background: #21a06a; }
.dist__fill[data-slice="5"], .dist__dot[data-slice="5"] { background: #e05a4c; }

/* ===========================================================================
   «حالات المزادات»: حلقةٌ لكلّ حالة
   ---------------------------------------------------------------------------
   اختارها المالكُ من أربعة أشكالٍ رُسمت له بخطّ اللوحة وألوانها، بعد ستّ
   محاولاتٍ لم تُرضِه — والسؤالُ بعد السادسة كان أرخصَ من سابعة.

   **والحلقةُ هنا ليست قطاعاً من دائرةٍ واحدة.** كلُّ حالةٍ حلقتُها كاملةٌ
   تُملأ بنسبتها من الإجمالي. والفرقُ ليس شكلياً: قطاعٌ في دائرةٍ مشتركة
   يُقارَن بجيرانه ولا يُقرأ وحدَه، وحلقةٌ ممتلئةٌ بنسبتها تُقرأ وحدَها
   («ثمانون بالمئة») ثم تُقارَن. وهذا ما تسأله اللوحةُ فعلاً: «كم منها
   منتهٍ؟» لا «أيّهما أكبر؟».

   والرقمُ في وسط حلقته لا تحتها: هو ما تُفتح اللوحةُ لأجله.
   ======================================================================== */

.rings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem 2.6rem;
  margin: 0;
  padding: .3rem 0 .2rem;
  list-style: none;
}

.rings__one { text-align: center; inline-size: 6.6rem; }

/* `conic-gradient` بحدٍّ حادٍّ لا متدرّج: النسبةُ تنتهي عند رقمها بالضبط،
   وتدرّجٌ عندها يجعل الحدَّ يُقرأ «نحو الثمانين» لا «ثمانين». وما بقي بلون
   المسار الخافت لا شفّافاً — الشفّافُ على لوحٍ أبيض يجعل الحلقةَ قوساً
   معلّقاً لا حلقةً ناقصة. */
.rings__ring {
  display: grid;
  place-items: center;
  inline-size: 6.6rem;
  block-size: 6.6rem;
  border-radius: 50%;
  margin-inline: auto;
  background:
    conic-gradient(var(--slice, var(--line)) 0 var(--share),
                   var(--line-soft) var(--share) 100%);
}

.rings__hole {
  display: grid;
  place-items: center;
  inline-size: 4.75rem;
  block-size: 4.75rem;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rings__name {
  display: block;
  margin-block-start: .65rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.rings__share {
  display: block;
  margin-block-start: .1rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* بترتيب `WHEEL` في `dashboard.py` — القائمةُ نفسُها في كل موضعٍ يُلوَّن. */
.rings__ring[data-slice="0"] { --slice: #1a9aa1; }
.rings__ring[data-slice="1"] { --slice: #4aa5df; }
.rings__ring[data-slice="2"] { --slice: #8c6ad6; }
.rings__ring[data-slice="3"] { --slice: #c9891a; }
.rings__ring[data-slice="4"] { --slice: #21a06a; }
.rings__ring[data-slice="5"] { --slice: #e05a4c; }

@media (max-width: 40rem) {
  .rings { gap: 1rem 1.6rem; }
  .rings__one, .rings__ring { inline-size: 5.4rem; }
  .rings__ring { block-size: 5.4rem; }
  .rings__hole { inline-size: 3.9rem; block-size: 3.9rem; font-size: 1.2rem; }
}

/* ===========================================================================
   لوحُ الحالات: كلامٌ على حافة البداية، وحلقاتٌ على مقابلها
   ---------------------------------------------------------------------------
   «خلى الدايرتين في الشمال وضيف كلام وخطوط في اليمين عشان حاسّه المربع فاضي».

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

   و«الحالة الأكثر» تُحسب بـ`max` في `dashboard.py` لا بحلقةٍ في القالب:
   المقارنةُ قاعدةٌ، والقالبُ مكانٌ لا يُختبَر.

   والحلقاتُ لا تنكمش (`flex: none`) والكلامُ يأخذ ما بقي: حلقةٌ تضيق تحت
   ستّ حالاتٍ تصير قرصاً، والنصُّ يلتفّ ولا يضيع.
   ======================================================================== */

.states {
  display: flex;
  align-items: center;
  gap: 2rem 2.4rem;
  flex-wrap: wrap;
}

.states__brief { flex: 1 1 15rem; min-inline-size: 0; }
.states .rings { flex: 0 1 auto; justify-content: flex-end; padding: 0; }

/* ---- الإجمالي ----------------------------------------------------------- */

.states__lead {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 1rem;
}
.states__lead strong {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.states__lead span { font-size: .84rem; font-weight: 600; color: var(--muted); }

/* ---- الأسطر والخطوط ----------------------------------------------------- */


/* ===========================================================================
   كتلةُ التعريف: شبكةُ خانات لا قائمةَ سطورٍ عريضة
   ---------------------------------------------------------------------------
   «خلى الكلام بشكل احترافي أكتر ومنظّم».

   وكان كلُّ سطرٍ يمدّ اسمَه على حافةٍ وقيمتَه على مقابلها، وبينهما فراغٌ من
   أربعمئة بكسل — فتُقرأ القيمةُ ولا يُعرف لأيّ اسمٍ هي إلا بعودةٍ بالعين
   عبر الفراغ. وهو عيبُ كل قائمةِ `dt`/`dd` تُمدّ على عرضٍ واسع.

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

   ورتبتان لا ثلاث: اسمٌ خافتٌ صغير، وقيمةٌ بلون الحبر. والفصلُ بخطٍّ واحدٍ
   فوق كلّ صفٍّ — لا إطارَ حول كل خانة: أربعةُ صناديقَ داخل صندوقٍ داخل لوحٍ
   ثلاثُ طبقاتٍ من الحدود على شيءٍ واحد.
   ======================================================================== */

.brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.6rem;
  margin: 0;
}

.brief__cell {
  padding-block: .7rem;
  border-block-start: 1px solid var(--line-soft);
  min-inline-size: 0;
}
/* الخانةُ العريضةُ تمتدّ على العمودين: قيمتُها جملةٌ لا رقم. */
.brief__cell--wide { grid-column: 1 / -1; }

.brief dt {
  font-size: .73rem;
  font-weight: 600;
  color: var(--muted);
  margin-block-end: .2rem;
}
.brief dd {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
/* قيمةُ «المصدر» جملةٌ تُقرأ لا رقمٌ يُلمح: أخفُّ وزناً وأصغرُ مقاساً. */
.brief__cell--wide dd { font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.brief dd b { font-weight: 700; color: var(--ink); padding-inline-start: .2rem; }

@media (max-width: 40rem) {
  .brief { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   لونٌ في كتلة التعريف، وزرُّ اللوحة يُقرأ زرّاً
   ---------------------------------------------------------------------------
   «دخّل ألوان في المربع مع الكلام، وخلى دايرة القائمة بشكل احترافي أكتر».

   **واللونُ يحمل معنىً لا يُرشّ.** القيمةُ في «الحالة الأكثر» تأخذ **لون
   حلقتها**، ورتبتُها محسوبةٌ في `dashboard.py` وتُكتب في `data-slice` —
   فالعينُ تربط السطرَ بحلقته بلا أن تقرأ الاسمَ مرّتين. وبدون الرتبة كان
   اللونُ يُبحث عنه بمقارنة الاسم بالأسماء في حلقةٍ داخل القالب.

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

   **وزرُّ اللوحة** كان حبّةً خفيفةً بنصٍّ ملوّن، وزرُّ البطاقة تحته ممتلئٌ
   بنصٍّ أبيض — زرّان بلغتين في صفحةٍ واحدة. فصار على اللغة نفسِها: ممتلئٌ،
   زاويتُه 10px لا قوسٌ كامل، ونصُّه أبيضُ بـ700.
   ======================================================================== */

/* ---- الخانات ------------------------------------------------------------ */

.brief { gap: .55rem; }

.brief__cell {
  padding: .7rem .85rem;
  border: 0;
  border-radius: 10px;
  background: var(--raised);
}

.brief dd { display: flex; align-items: center; gap: .4rem; }

/* حبّةٌ صغيرةٌ بلون الحالة قبل اسمها — الرابطُ البصريُّ بالحلقة. */
.brief__dot {
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.brief dd[data-slice="0"] { color: #1a9aa1; }
.brief dd[data-slice="1"] { color: #4aa5df; }
.brief dd[data-slice="2"] { color: #8c6ad6; }
.brief dd[data-slice="3"] { color: #c9891a; }
.brief dd[data-slice="4"] { color: #21a06a; }
.brief dd[data-slice="5"] { color: #e05a4c; }
.brief dd[data-slice] b { color: inherit; }

/* خانةُ العدد بلون الأساسي وسطحُها مصبوغٌ به مخفَّفاً. */
.brief__cell--brand { background: var(--brand-soft); }
.brief__cell--brand dd { color: var(--brand-dark); }

.brief__cell--wide { background: none; padding-inline: 0; padding-block-end: 0; }
.brief__cell--wide dt { color: var(--muted); }

/* ---- زرُّ اللوحة -------------------------------------------------------- */

.figure__action {
  padding: .45rem .95rem;
  border-radius: 10px;
  background: var(--brand-solid);
  color: #fff;
  font-weight: 700;
  font-size: .76rem;
  box-shadow: none;
}
.figure__action:hover {
  background: color-mix(in srgb, var(--brand-solid) 85%, #000);
  color: #fff;
  text-decoration: none;
}
[data-scheme="dark"] .figure__action { background: var(--brand-solid); color: #fff; }

/* ===========================================================================
   عطلٌ في القراءة: ألوانُ القطاعات نصّاً
   ---------------------------------------------------------------------------
   القيمةُ في «الحالة الأكثر» أُعطيت لونَ حلقتها في الخطوة السابقة. وقيست
   الألوانُ الستّة نصّاً على سطح الخانة (`--raised` = `#f7f9fd`) فرسبت
   **كلُّها**:

       #1a9aa1 → 3.22    #4aa5df → 2.57    #8c6ad6 → 3.87
       #c9891a → 2.82    #21a06a → 3.16    #e05a4c → 3.47

   والحدُّ 4.5. وهي ألوانُ **تعبئة** لا ألوانُ حروف: قُرِّرت لقطاعٍ في دائرةٍ
   وحبّةٍ في مفتاح — والفِلّةُ الملوّنةُ تحتاج 3:1 والنصُّ 4.5، فما يصلح
   للأولى لا يصلح للثاني، وهو فرقٌ يُنسى لأن اللون واحد.

   فلكلٍّ **نظيرٌ غامقٌ للنصّ**، محسوبٌ بالبحث عن أغمق مزيجٍ يبلغ 4.6:

       0  81٪  #157d82 → 4.65      3  75٪  #976714 → 4.67
       1  72٪  #3577a1 → 4.63      4  80٪  #1a8055 → 4.67
       2  90٪  #7e5fc1 → 4.64      5  85٪  #be4c41 → 4.63

   **والحبّةُ تبقى باللون الأصلي**: هي زخرفةٌ (`aria-hidden`) وتُقرأ رابطاً
   بصرياً بالحلقة، ولونُها يجب أن يطابق الحلقةَ لا أن يقاربها.
   ======================================================================== */

.brief dd[data-slice="0"] { color: #157d82; }
.brief dd[data-slice="1"] { color: #3577a1; }
.brief dd[data-slice="2"] { color: #7e5fc1; }
.brief dd[data-slice="3"] { color: #976714; }
.brief dd[data-slice="4"] { color: #1a8055; }
.brief dd[data-slice="5"] { color: #be4c41; }

.brief dd[data-slice="0"] .brief__dot { background: #1a9aa1; }
.brief dd[data-slice="1"] .brief__dot { background: #4aa5df; }
.brief dd[data-slice="2"] .brief__dot { background: #8c6ad6; }
.brief dd[data-slice="3"] .brief__dot { background: #c9891a; }
.brief dd[data-slice="4"] .brief__dot { background: #21a06a; }
.brief dd[data-slice="5"] .brief__dot { background: #e05a4c; }

/* ===========================================================================
   الإجماليُّ كحليّ، ولوحُ «المزايدات — سبعة أيام» يُقرأ
   ---------------------------------------------------------------------------
   «خلى خمسة دي بلون كحلي، وخلى مربع المزايدات بشكل احترافي أكتر».

   والكحليُّ هو المزيجُ نفسُه المستعمل في عناوين الكتل — `--ink` مع أزرقٍ
   صريح — لا قيمةٌ ثانيةٌ تُكتب: قيمتان لكحليٍّ واحدٍ تفترقان عند أوّل تعديل.

   ---- لوحُ المزايدات ----------------------------------------------------
   كان رأساً، ثم صندوقاً رمادياً يقول «لا مزايدة»، ثم سبعةَ أعمدةٍ صفرية في
   فراغٍ بارتفاع 180px. وثلاثةُ عيوب:

   * **لا مقدارَ فوق الرسم.** سبعةُ أعمدةٍ بلا مجموع تُقرأ نسباً بلا مقام،
     و«العمود الأطول هو أعلى يوم» تقول كيف يُقرأ الرسمُ ولا تقول كم.
   * **الصفرُ يُعرَض عطلاً.** صندوقٌ رماديٌّ يطفو فوق الرسم يُقرأ رسالةَ
     خطأ؛ والصفرُ **قيمةٌ** — أسبوعٌ بلا مزايدةٍ خبرٌ يُقال في السطر.
   * **لا مسطرةَ للأعمدة.** عمودٌ في فراغٍ أبيض لا يُقاس إلا برقمه، فالرسمُ
     زينةٌ فوق أرقامٍ لا رسمٌ يُقرأ.

   فصار: سطرُ مقدارٍ فيه المجموعُ وأعلى يوم، ثم أعمدةٌ على **خطوطٍ أفقيةٍ
   خافتة** تقيسها، ثم القاعدة.
   ======================================================================== */

.states__lead strong { color: color-mix(in srgb, var(--ink) 80%, #1a56db); }

/* ---- سطرُ المقدار ------------------------------------------------------- */

.trend__lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  margin: 0 0 1.1rem;
}
.trend__lead > strong {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 80%, #1a56db);
  font-variant-numeric: tabular-nums;
}
.trend__lead > span { font-size: .84rem; font-weight: 600; color: var(--muted); }

.trend__peak {
  margin-inline-start: auto;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--auction-soft);
  color: var(--auction);
  font-size: .76rem !important;
  font-weight: 700 !important;
}
.trend__peak b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* «لا مزايدة» ليست ذروةً: حبّةٌ محايدةٌ لا فيروزيّة. */
.trend__peak--none { background: var(--line-soft); color: var(--muted) !important; }

/* ---- مسطرةُ الأعمدة ----------------------------------------------------- */

/* أربعةُ خطوطٍ أفقيةٍ خافتة خلف الأعمدة — مسطرةٌ تقيسها. ومرسومةٌ خلفيةً
   لا عناصر: سبعةُ `<span>`ات لخطوطٍ لا تقول شيئاً لقارئ الشاشة. */
.spark {
  position: relative;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    var(--line) calc(25% - 1px),
    var(--line) 25%
  );
  background-position: 0 -1px;
  padding-block-start: .4rem;
  border-block-end: 1px solid var(--line);
}
.spark__bar { position: relative; z-index: 1; }

/* الصندوقُ الرمادي حُذف: الخبرُ انتقل إلى سطر المقدار. */
.figure__empty { display: none; }
.figure__empty + .spark { opacity: 1; }

/* خطوطُ المسطرة بـ`--line` لا `--line-soft`: الثاني (#eef2f8) على لوحٍ أبيض
   فرقُه عن الأرضية أربعُ درجاتٍ من 255 — يُرسم ولا يُرى، وهو أسوأُ من ألّا
   يُرسم لأنه يُصان بلا أن يعمل. */
.spark { background-position: 0 -1px; }

/* ===========================================================================
   رسمُ سبعة أيام: أعمدةٌ هادئة، والذروةُ وحدها غامقة
   ---------------------------------------------------------------------------
   اختاره المالكُ من أربعة أشكالٍ رُسمت له ببياناتٍ حقيقية — أعمدةٌ بمسطرة،
   ومنحنىً بمساحة، وصفوفٌ أفقية، وهذا.

   **والعمودُ شكلُ اليوم الصادق**: سبعةُ أيامٍ قيمٌ منفصلة، والمنحنى يوحي
   باتّصالٍ بينها — أنّ العددَ مرّ بقيمةٍ ما بين ليلتين، وهو ما لا يحدث.

   **والذروةُ تُعلَّم بدل أن تُشرَح.** كانت في الرأس جملةٌ تقول «العمود
   الأطول هو أعلى يوم» — أي شرحُ كيفيةِ قراءة الرسم. وتعليمُ اليوم نفسِه
   يغني عنها: العينُ تجده قبل أن تقرأ رقماً.

   وبقيّةُ الأعمدة بلونٍ مخفَّف لا رماديّ: الرماديُّ يقول «معطَّل»، والمخفَّفُ
   يقول «من العائلة نفسِها وأقلّ».
   ======================================================================== */

.spark { gap: .6rem; background-image: none; border-block-end: 1px solid var(--line); }

.spark__bar {
  background: color-mix(in srgb, var(--auction) 30%, #fff);
  border-radius: 8px 8px 0 0;
  /* حدٌّ أدنى يُرى: يومٌ بمزايدةٍ واحدةٍ من خمس عشرة ارتفاعُه 6px، وذلك خطٌّ
     لا عمود — والقارئُ يظنّه صفراً وهو ليس كذلك. وصفرٌ حقيقيٌّ يبقى صفراً:
     القاعدةُ في `_trend` تعطيه `0` لا `2`. */
  min-block-size: .35rem;
}
.spark__day--top .spark__bar { background: var(--auction); }

.spark__count { color: var(--muted); font-weight: 700; }
.spark__day--top .spark__count { color: var(--auction); font-weight: 800; }
.spark__day--top .spark__label { color: var(--auction); font-weight: 700; }

[data-scheme="dark"] .spark__bar { background: color-mix(in srgb, var(--auction) 34%, var(--panel)); }
[data-scheme="dark"] .spark__day--top .spark__bar { background: var(--auction); }

/* ===========================================================================
   أسبوعٌ بلا مزايدة: جوابٌ لا فراغ
   ---------------------------------------------------------------------------
   «خلى الشكل أفضل عشان حاسّه المربع فاضي».

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

   وكان الأسبوعُ الفارغ يُرسم سبعةَ أعمدةٍ بارتفاع صفرٍ في لوحٍ بارتفاع
   9.5rem: فراغٌ يشغل مساحةَ رسمٍ ولا يقول ما يقوله الرسم.

   **والأسبوعُ الفارغ سؤالٌ لا خبر**: «هل توقّفت المنصّة أم أن النافذة
   ضيّقة؟». فصار مكانَ الرسم جوابٌ — متى كانت آخر مزايدةٍ وكم مضى عليها،
   وبابٌ إلى قائمتها. وذلك يملأ اللوحَ **بما يُقرأ** لا بما يُملأ به.
   ======================================================================== */

.trend-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
  padding: 2rem 1rem 1.9rem;
  border-radius: 14px;
  background: var(--raised);
  border: 1px dashed var(--line);
  color: var(--muted);
}

.trend-none > svg { color: color-mix(in srgb, var(--auction) 55%, var(--muted)); margin-block-end: .2rem; }

.trend-none__say {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.trend-none__last {
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
}
.trend-none__last b {
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.trend-none__go {
  margin-block-start: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: 10px;
  background: var(--auction);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease;
}
.trend-none__go:hover { background: color-mix(in srgb, var(--auction) 85%, #000); color: #fff; text-decoration: none; }
[data-scheme="dark"] .trend-none__go { background: var(--auction); color: var(--ground); }

/* ===========================================================================
   الشريط العلويّ: رسومٌ لا محارف، وفواصلُ تُرتِّب ما فيه
   ---------------------------------------------------------------------------
   «خلى الخط الأبيض اللي في الهيدر احترافي أكتر هو والأيقونات كمان».

   **والأيقونتان كانتا محرفين نصّيين** — `☰` و`◐`. وشكلُ المحرف يتبع الخطَّ
   المثبَّت على الجهاز لا الورقةَ: سُمكُه ومقاسُه ومحاذاتُه تختلف بين جهازٍ
   وجهاز، وقد تسقط إلى خطٍّ احتياطيٍّ فتصير شكلاً ثالثاً. وهما يقعان في ورقةٍ
   كلُّ رمزٍ فيها `<svg>` بسُمكٍ واحد — فيُقرآن دخيلين ولو أُحسن مقاسُهما.

   فصارا رسمين بالسُّمك نفسِه، يرثان `currentColor` فيتلوّنان مع زرّهما.

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

   وارتفاعُه ثابتٌ بـ`--topbar-h` كما كان — الرأسُ اللاصقُ للجداول يقرأ
   القيمةَ نفسَها، وتغييرُها هنا وحدَها يُزيح كلَّ رأسِ جدولٍ في اللوحة.
   ======================================================================== */

.topbar {
  padding-inline: 1.2rem;
  gap: .45rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 2px rgb(23 32 51 / .03);
}

/* ---- أزرارُ الرسوم ------------------------------------------------------- */

.icon-btn {
  inline-size: 2.3rem;
  block-size: 2.3rem;
  border-radius: 9px;
  color: var(--ink-soft);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.icon-btn:hover { background: var(--raised); color: var(--ink); border-color: var(--line); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-btn svg { display: block; }

/* ---- فاصلٌ يفرز أدواتِ الإطار عن صاحب الجلسة ---------------------------- */

.user { margin-inline-start: auto; }
.user::before {
  content: "";
  inline-size: 1px;
  block-size: 1.4rem;
  background: var(--line);
  margin-inline-end: .85rem;
  flex: none;
}

.user__mark {
  inline-size: 2rem;
  block-size: 2rem;
  background: var(--brand-solid);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}
.user { font-weight: 700; color: var(--ink); }

/* ---- الخروج ------------------------------------------------------------- */

.sign-out button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 9px;
  border-color: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .78rem;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
/* الخروجُ يحمرّ عند المرور لا في السكون: هو فعلٌ لا رجعة فيه في هذه الجلسة،
   ولونٌ دائمٌ يجعله يصرخ في كل صفحةٍ بلا أن يكون مطلوباً. */
.sign-out button:hover {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}
.sign-out button svg { flex: none; }

/* ===========================================================================
   زرُّ الخروج أحمرُ في السكون
   ---------------------------------------------------------------------------
   «خلى زر تسجيل خروج لونه أحمر وشكله أفضل».

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

   **ودرجتان لا واحدة**: خلفيةٌ حمراءُ خفيفةٌ ونصٌّ أحمرُ غامق في السكون، ثم
   **يمتلئ مصمتاً والنصُّ أبيض** عند المرور. فالسكونُ يقول «انتبه» والمرورُ
   يقول «وأنت الآن عليه».

   وقيست الحالتان في المظهرين قبل الاعتماد:

       فاتح  — نصٌّ على خلفيةٍ خفيفة 5.75    ·  أبيضُ على المصمت 6.57
       داكن  — نصٌّ على خلفيةٍ خفيفة 8.72    ·  أرضيةٌ على المصمت 9.47

   وفي الداكن **النصُّ لونُ الأرضية لا الأبيض**: `--danger` هناك فاتحٌ
   (`#fca19a`)، والأبيضُ عليه 1.75 — خُمسُ الحدّ. وهي العلّةُ نفسُها التي
   وقعت في أزرار البطاقات وصُحّحت بالقلب نفسِه.
   ======================================================================== */

.sign-out button {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
  font-weight: 700;
}
.sign-out button:hover,
.sign-out button:focus-visible {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.sign-out button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* الداكن: الدرجةُ فاتحةٌ فينقلب النصُّ إلى لون الأرضية. */
[data-scheme="dark"] .sign-out button:hover,
[data-scheme="dark"] .sign-out button:focus-visible { color: var(--ground); }

/* ===========================================================================
   تنظيفُ الشريط العلويّ
   ---------------------------------------------------------------------------
   «امسح كلمة development ونظّف الهيدر والأيقونات اللي فيه».

   وشارةُ البيئة أُخفيت في `development` وحدها لا حُذفت — السببُ في القالب.

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

   * **ارتفاعٌ ثابت** (`--topbar-h`) لا يتبع أطولَ ما فيه: بلا ذلك يتغيّر
     ارتفاعُ الشريط بين صفحةٍ فيها الشارةُ وصفحةٍ بلا شارة، ويقفز معه كلُّ
     ما تحته — والرأسُ اللاصقُ للجداول يقرأ هذه القيمةَ نفسَها.
   * **الأزرارُ الثلاثةُ بمقاسٍ واحد** (2.3rem): مفتاحُ الطيّ والمظهرُ
     والخروجُ — وكان الخروجُ أقصرَ منهما بربع، فيبدو الصفُّ غيرَ مستوٍ.
   * **الفاصلُ يقع قبل صاحب الجلسة** لا بين كل شيئين: فاصلٌ واحدٌ يفرز
     مجموعتين، وفاصلان يفرزان ثلاثاً فيصير الشريطُ شبكةً.
   ======================================================================== */

.topbar { min-block-size: var(--topbar-h); padding-block: 0; }

.icon-btn, .sign-out button { block-size: 2.3rem; }
.sign-out button { padding-inline: .9rem; }

/* الفراغُ الذي كانت الشارةُ تشغله يُطوى: `margin-inline-start: auto` على
   كتلة المستخدم يدفعها إلى الطرف المقابل سواءٌ وُجدت الشارةُ أم لا. */
.topbar > .env-badge { margin-inline-end: auto; }

/* الشارةُ حين تظهر (الإنتاج وما ليس `development`) أثقلُ وزناً: هي تحذيرٌ
   لا وسمٌ محايد. */
.env-badge { font-weight: 700; letter-spacing: .01em; }

/* ===========================================================================
   شاشاتُ القوائم: الرأس، والبطاقاتُ المضغوطة، وشريطُ الفلاتر
   ---------------------------------------------------------------------------
   «خلى الصفحة دي بشكل احترافي أكتر» — قيلت في «إدارة المستخدمين»، وما تحته
   يقع على كل شاشةٍ لها رأسٌ ووصفٌ وبطاقاتٌ وفلاتر، وهي أكثرُ شاشات اللوحة.

   * **سطرُ الوصف** كان مضبوطاً بـ`style=` في القالب — `-.4rem` في القاعدة
     و`.6rem` في الشاشة، أي قيمتان لمسافةٍ واحدة. صار في الورقة وحدها.
   * **خمسُ بطاقاتٍ في صفٍّ لا أربعٌ وواحدة**: الحدُّ الأدنى 12.5rem يعطي
     أربعةَ أعمدةٍ على شاشة المالك، فتنزل الخامسةُ وحدها وتترك صفّاً بربع
     امتلاء. و11.5rem يعطي خمسةً في العرض نفسِه.
   * **حقولُ الفلاتر بارتفاعٍ واحد**: `input` و`select` و`button` كلٌّ منها
     يُحسب ارتفاعُه من حشوته وخطّه، فيفترق الثلاثةُ ببكسلاتٍ تُرى في صفّ.
     وارتفاعٌ مصرَّحٌ به يجعل الصفَّ مستقيماً.
   ======================================================================== */

/* ---- سطرُ الوصف --------------------------------------------------------- */

.lede { margin-block: .1rem 1.15rem; font-size: .88rem; color: var(--ink-soft); }

/* ---- البطاقاتُ المضغوطة ------------------------------------------------- */

.board-stats--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr));
  gap: .7rem;
}
/* بلا حدٍّ أدنى للارتفاع: بطاقةٌ لها زرٌّ وأخرى بلا زرٍّ تتساويان بالتمدّد
   في الشبكة (`align-items: stretch` الافتراضي)، والحدُّ الأدنى يضيف فراغاً
   تحت البطاقات القصيرة في الصفوف التي لا زرَّ في أيٍّ منها. */
.board-stats--compact .stat { min-block-size: 0; padding: .85rem 1rem .8rem; }
.board-stats--compact .stat__value { font-size: 1.5rem; }


/* ===========================================================================
   رأسُ الشاشة: الرجوعُ في صفّ الأفعال، وزرُّ التصدير يُقرأ زرّاً
   ---------------------------------------------------------------------------
   «شيل كلمة الرئيسية اللي فوق العنوان، وصغّر الكلام تحت العنوان شويه، وخلى
   زر تصدير شكله احترافي».

   **وزرُّ الرجوع لم يُحذف.** القاعدةُ المكتوبة في T864 أنه يحمل اسمَ ما
   يعود إليه فيُقرأ قبل النقر — «← المزادات» لا سهمٌ لا يُعرف إلى أين، لأن
   `history.back()` يعود إلى **الطلب** السابق لا الشاشة. فبقي الاسمُ وتغيّر
   موضعُه: كان سطراً قائماً بذاته يعلو العنوان، فأولُ ما يُقرأ في الشاشة
   اسمُ شاشةٍ **أخرى**. صار في الطرف المقابل على السطر نفسِه.

   **وأزرارُ الرأس صنفان لا واحد**: الرجوعُ **هادئ** (بلا خلفيةٍ حتى يُمَرَّ
   عليه) لأنه طريقُ خروجٍ لا فعل، والتصديرُ **محدَّدٌ بحدّ** لأنه فعلٌ يُنتج
   ملفّاً. وكانا شكلاً واحداً، فيتنافسان على انتباهٍ واحد.
   ======================================================================== */

/* ---- سطرُ الوصف أصغر ---------------------------------------------------- */

.lede { font-size: .82rem; line-height: 1.75; }

/* ---- الرأس -------------------------------------------------------------- */

.page { align-items: center; gap: .75rem 1rem; }
.page__actions { gap: .5rem; }

/* ---- زرُّ الرجوع: هادئ ---------------------------------------------------- */

.page__back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .75rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.page__back:hover {
  background: var(--raised);
  border-color: var(--line);
  color: var(--ink);
  text-decoration: none;
}
.page__back svg { flex: none; }

/* ---- زرُّ التصدير وأخواته: فعلٌ محدَّد ------------------------------------ */

.page__actions a:not(.page__back) {
  padding: .5rem 1.05rem;
  border-radius: 9px;
  border-color: var(--field-border);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: .79rem;
  font-weight: 700;
}
.page__actions a:not(.page__back):hover {
  background: var(--brand-soft);
  border-color: var(--brand-solid);
  color: var(--brand-dark);
}

/* ===========================================================================
   سطرُ الوصف يرتفع، وزرُّ التصدير يحمل رمزَه ولونَه
   ---------------------------------------------------------------------------
   «قلّل ده شويه وارفعه قليلاً فوق، وخلى زر تصدير إكسيل بشكل ولون أفضل».

   **والرمزُ في الورقة لا في القوالب.** رابطُ التصدير مكتوبٌ في **أربعةٍ
   وعشرين** قالباً، وإضافةُ `<svg>` إلى كلٍّ منها أربعةٌ وعشرون تعديلاً
   ونسيانُ واحدٍ منها هو الشاشةُ التي تبدو مكسورة — وهي العلّةُ التي كُتبت
   في رأس «طبقة العرض» ولأجلها صارت القاعدةُ **محدِّداتِ عناصرَ لا أصنافاً
   تُكتب في القالب**.

   والرمزُ `mask` لا `background-image`: القناعُ يأخذ لونَه من
   `background: currentColor`، فيتحوّل مع النصّ إلى الأبيض عند المرور.
   وصورةٌ خلفيةً تبقى بلونها المخبوز فيها ولا تتبع شيئاً.
   ======================================================================== */

.lede { margin-block-start: -.35rem; }

.page__actions a:not(.page__back) {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--brand-dark);
}
.page__actions a:not(.page__back)::before {
  content: "";
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-export) center / contain no-repeat;
          mask: var(--icon-export) center / contain no-repeat;
}
.page__actions a:not(.page__back):hover {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: #fff;
}
[data-scheme="dark"] .page__actions a:not(.page__back):hover { color: #fff; }

/* ورقةٌ تنزل من صندوقٍ — رمزُ «احفظ ملفاً»، لا جدولٌ ولا حرفُ X. */
:root {
  --icon-export: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='M7 10l5 5 5-5'/><path d='M12 15V3'/></svg>");
}

/* ===========================================================================
   سطرُ الوصف يلتصق بعنوانه، وزرُّ التصدير يمتلئ
   ---------------------------------------------------------------------------
   «ارفع تحت العنوان شويه، وخلى زر تصدير واضح».

   **والمسافةُ كانت في مكانين**: `margin-block-end: 1.1rem` على رأس الصفحة
   و`margin-block-start` سالبٌ على السطر يسحبه إليها. ورفعُه أكثرَ بزيادة
   السالب يجعل الرقمين يتنازعان — فالرأسُ هو الذي قلّ هامشُه حين يتبعه سطرُ
   وصف، والسطرُ يبدأ من الصفر.

   و`:has()` لا صنفٌ يُكتب في القالب: القوالبُ أربعةٌ وعشرون، وصنفٌ منسيٌّ
   في واحدٍ منها هو الشاشةُ التي تبدو مكسورة.

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

.page:has(+ .lede) { margin-block-end: .35rem; }
.lede { margin-block-start: 0; }

.page__actions a:not(.page__back) {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: #fff;
  box-shadow: 0 1px 2px rgb(23 32 51 / .06);
}
.page__actions a:not(.page__back):hover {
  background: color-mix(in srgb, var(--brand-solid) 86%, #000);
  border-color: color-mix(in srgb, var(--brand-solid) 86%, #000);
  color: #fff;
}

/* ===========================================================================
   خطٌّ يفصل رأسَ الشاشة عمّا تحته
   ---------------------------------------------------------------------------
   «ضيف خط شفاف فوق المربعات يفصل بين العنوان وبينهم».

   **والخطُّ على ما يلي السطرَ لا على السطر نفسِه.** `.lede` محدودٌ بـ`62ch`
   — وهو مقياسُ قراءةٍ مقصود، فسطرٌ أطولُ من ذلك تتعب العينُ في العودة إلى
   أوّله — فحدٌّ سفليٌّ عليه يرسم خطّاً بطول النصّ لا بعرض الشاشة، ويقف حيث
   انتهت الجملةُ وكأنه خطأٌ في الرسم.

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

   و`--line-soft` لا `--line`: هو فاصلُ **إيقاعٍ** لا حدُّ صندوق — يقول «هنا
   ينتهي التعريفُ ويبدأ العمل»، ولا ينبغي أن يُقرأ قبل ما يفصله.
   ======================================================================== */

.lede { margin-block-end: 0; }
.lede + * {
  /* `--line` لا `--line-soft`: الأرضيةُ `#f4f6fb` والثاني `#eef2f8` — أي
     أنه **أفتحُ من الأرضية**، فيُرسم خطٌّ أبيضُ على رمادي لا فاصلٌ يُرى.
     و`--line` (`#e2e8f1`) أغمقُ منها فيُقرأ خطّاً. وهي العلّةُ نفسُها التي
     وقعت في مسطرة رسم السبعة أيام. */
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.2rem;
  margin-block-start: 1.1rem;
}

/* ===========================================================================
   البطاقةُ المضغوطة: تُختصر، وترتفع عن أرضيتها
   ---------------------------------------------------------------------------
   «ضيف شادو للمربعات وقصّر طولها وخلى شكلها احترافي أكتر».

   **وطولُها لم يأتِ من حشوةٍ بل من ثقبٍ في وسطها.** كانت
   `justify-content: space-between`، فالمحتوى يُدفع إلى الطرفين ويبقى
   الفراغُ **بينهما** — وبطاقةٌ في الصفّ لها زرٌّ تجعل الصفَّ كلَّه بارتفاعها
   (`align-items: stretch`)، فيتّسع الثقبُ في الأربع الأخريات.

   فالمحتوى يُرصّ إلى الأعلى (`flex-start`)، والفراغُ ينزل إلى القاع حيث لا
   يُقرأ ثقباً. وهذا وحدَه يقصّر البطاقةَ المرئيّة قبل أن تُمَسّ حشوة.

   ومعه: حشوةٌ أضيق، ورمزٌ أصغر، ورقمٌ أصغر — والمجموع 166px ← 132.

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

.board-stats--compact .stat {
  justify-content: flex-start;
  gap: .15rem;
  padding: .8rem .95rem .75rem;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgb(23 32 51 / .05),
    0 4px 14px rgb(23 32 51 / .055);
}
a.stat:hover, a.stat:focus-visible { box-shadow: 0 2px 4px rgb(23 32 51 / .06), 0 8px 22px rgb(23 32 51 / .09); }

[data-scheme="dark"] .board-stats--compact .stat {
  box-shadow: inset 0 0 0 1px var(--line);
  background-color: color-mix(in srgb, var(--panel) 94%, #fff);
}

.board-stats--compact .stat__top { margin-block-end: .25rem; }
.board-stats--compact .stat__icon { inline-size: 2rem; block-size: 2rem; padding: .42rem; border-radius: 8px; }
.board-stats--compact .stat__label { font-size: .78rem; }
.board-stats--compact .stat__value { font-size: 1.35rem; }
.board-stats--compact .stat__detail { margin-block-start: .35rem; font-size: .71rem; line-height: 1.45; }

/* التذييلُ يتبع محتواه لا قاعَ البطاقة: `auto` في شاشة اللوحة يسوّي تذييلات
   صفٍّ من ثمانٍ، وهنا يفتح ثقباً في أربعٍ لأجل واحدة. */
.board-stats--compact .stat__action {
  margin-block-start: .55rem;
  padding-block-start: .55rem;
}
.board-stats--compact .stat__btn { padding: .35rem .75rem; font-size: .7rem; border-radius: 8px; }

/* الطولُ في الصفّ يحدّده **أطولُ بطاقةٍ فيه**، وهي ذاتُ الزرّ — فالتقليمُ
   يقع عليها لا على الأربع الأخريات. وكتلةُ الزرّ كانت: هامشٌ .55 + خطٌّ +
   حشوةٌ .55 + زرٌّ بحشوةٍ .35×2 — أربعةُ مقاديرَ لشيءٍ واحد. */
.board-stats--compact .stat__action {
  margin-block-start: .4rem;
  padding-block-start: .4rem;
}
.board-stats--compact .stat__btn { padding: .3rem .7rem; }
.board-stats--compact .stat__detail { line-height: 1.4; }
.board-stats--compact .stat { padding-block: .75rem .7rem; }

/* ===========================================================================
   عنوانُ البطاقة: ثمانمئةٍ لا ستّمئة
   ---------------------------------------------------------------------------
   «خلى العناوين بولد بشكل احترافي وواضح».

   وكان `600` بمقاس `12.48px` — ووزنُ 600 في «Cairo» يقع بين العاديّ والغليظ
   فيُقرأ **عادياً مُثخَّناً** لا عنواناً، خصوصاً عند هذا المقاس الصغير.
   و«Cairo» خطٌّ متغيّرٌ مداه 400–800، أي أن 700 و800 **موجودان فعلاً** في
   الملفّ ولا يُصطنعان بتغليظٍ يرسمه المتصفّح.

   فصار 800 — أقصى ما في الملفّ — ومقاسُه `.84rem`. والفرقُ عن الرقم بجواره
   يبقى قائماً: الرقمُ 1.35rem بلون تصنيفه، والعنوانُ .84rem بلون الحبر —
   يفترقان بالمقاس واللون لا بالوزن وحده.
   ======================================================================== */

.stat__label { font-weight: 800; color: var(--ink); }
/* الوزنُ على المحدِّد نفسِه لا على `.stat__label` وحده: القاعدةُ المضغوطة
   `.board-stats--compact .stat__label` نوعيّتُها (0,2,0) وتغلب (0,1,0)،
   فكتابةُ الوزن هناك وحدَه تُغيّر المقاسَ ولا تُغيّر الوزن — وقد وقع. */
.board-stats--compact .stat__label { font-size: .84rem; font-weight: 800; letter-spacing: -.005em; }

/* ===========================================================================
   شريطٌ واحدٌ لا شريطان، وحقلُ البحث يقول إنه بحث
   ---------------------------------------------------------------------------
   «مربع حسابات محظورة في الاستروك الجانبي لونين ذهبي وبني — خلي بني بس،
   وخلى مربع اللي فيه البحث بشكل احترافي أكتر».

   **والشريطان عطلٌ من تراكم قاعدتين**، لا اختيار:

   * `.stat` يرسم شريطَه في `::before` — عرضُه 4px بلون التصنيف.
   * و`.stat--warn` يلوّن **حدَّه كلَّه** بـ`--warn-line` (`#ecd9ac` ذهبيّ
     فاتح) ليُقرأ التنبيهُ بلا تحويم، ومن ذلك الحدُّ على حافة البداية —
     وعرضُه هناك 3px في البطاقة المضغوطة.

   فوقع الذهبيُّ الفاتح ملاصقاً للبنّيّ الغامق: شريطٌ من لونين، وكلٌّ منهما
   كُتب لسببٍ صحيحٍ وحده.

   والإصلاح: **حافةُ البداية بلا حدٍّ أصلاً** — `::before` هو الشريط، وحدَه،
   في كل بطاقة. والحدُّ الملوَّن يبقى على الجهات الثلاث الأخرى فيؤدّي وظيفته.
   ======================================================================== */

.stat { border-inline-start-width: 0; }
.board-stats--compact .stat { border-inline-start-width: 0; }
.stat::before { inline-size: 4px; }






/* ===========================================================================
   حقولُ الفلترة: حدٌّ أخفّ، وسهمٌ داخلَ الحقل بلونٍ يخصّه
   ---------------------------------------------------------------------------
   «خفّف الاستروك حول المربعات وخلى شكلها أفضل، والأسهم بلون مختلف وجوّه
   المربع مش لازقة».

   **والحدُّ لا يُخفَّف إلى ما يشاء.** `--field-border` معرَّفٌ في رأس الورقة
   بأنه مكوّنُ واجهةٍ حدُّه ٣:١ (معيار 1.4.11): «حقلٌ حدُّه لا يُرى يجعل
   النموذجَ مساحةً بيضاء لا يُعرف أين يُكتب فيها، وأول من يفقده من يقرأ على
   شاشةٍ باهتة أو في ضوء نهار».

   وقيس قبل التخفيف: الحاليُّ `#78899f` عند **3.57**، و`--line` الذي يبدو
   البديلَ الطبيعيَّ عند **1.23** — أي ثلث الحدّ. وأفتحُ مزيجٍ يمرّ هو 91٪
   عند 3.10، وذلك هامشٌ من خمسِ مئةٍ من الدرجة. فاختير **94٪** (`#818fa4`،
   3.25): أخفُّ ممّا كان، وفوق الحدّ بهامشٍ يحتمل تدوير المتصفّح.

   **والسهمُ كان سهمَ المتصفّح**: شكلُه ومقاسُه ولونُه من النظام لا من
   الورقة، ويلتصق بحافة الحقل لأن المتصفّح لا يترك له حشوة. فصار رسماً
   واحداً في كل منصّة، بلون الأساسي لا بأسود النظام، وبينه وبين الحافة
   `.85rem`.
   ======================================================================== */

.filters__main input[type="search"],
.filters__main select {
  border-color: color-mix(in srgb, var(--field-border) 94%, #fff);
  border-radius: 10px;
}
.filters__main input[type="search"]:hover,
.filters__main select:hover { border-color: var(--field-border); }

.filters__main select {
  appearance: none;
  -webkit-appearance: none;
  /* حشوةٌ تفصل السهمَ عن الحافة ومن النصّ عنه. */
  padding-inline: .9rem 2.3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6fa3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left .85rem center;
  background-size: 13px 13px;
}

/* الرسمُ خلفيةٌ لا يرثُ `currentColor`، فلونُه مكتوبٌ فيه. وهو درجةٌ من
   عائلة الأزرق لا الأساسيَّ المتغيّر: الأخيرُ يصير كهرمانياً أو وردياً
   باختيار المالك، وسهمُ قائمةٍ وردية يُقرأ زينةً لا أداة. */

/* ===========================================================================
   حدُّ الحقل أخفّ — وما اشتراه ذلك
   ---------------------------------------------------------------------------
   «خفّف درجة لون الاستروك لشكل احترافي». وقد قيل مرّتين، فنُفِّذ.

   **والثمنُ يُقال لا يُخفى**: `--field-border` حدُّه ٣:١ بمعيار 1.4.11، وأيُّ
   درجةٍ أفتحَ من 94٪ تنزل تحته:

       94%  #8090a5  3.26  يمرّ        72%  #9eaaba  2.36  دون
       85%  #8c9bad  2.84  دون         66%  #a6b1c0  2.17  دون

   فالمختارُ 72٪ (`#9eaaba`، **2.36**) — أخفُّ بوضوحٍ، ودون الحدّ.

   **وثلاثةٌ تُعوّض ما فُقد**، فالحقلُ يبقى موجوداً للعين لا للمقياس وحده:

   * **سطحٌ أفتحُ من اللوح** (`--raised`) يملأ الحقلَ فيُعرَف بمساحته لا
     بخطّه — وهو ما يفعله الحدُّ أصلاً.
   * **الحدُّ الكاملُ يعود عند المرور**: من يقصد الحقلَ يراه بـ3.57.
   * **وإطارُ التركيز لم يُمَسّ**: من يتنقّل بلوحة المفاتيح يرى `--focus`
     بسُمك 2px وحلقةً حوله — وتلك هي الحالةُ التي يُفقد فيها الأثرُ فعلاً.
   ======================================================================== */

.filters__main input[type="search"],
.filters__main select {
  border-color: color-mix(in srgb, var(--field-border) 72%, #fff);
  background-color: var(--raised);
}
.filters__main input[type="search"]:hover,
.filters__main select:hover {
  border-color: var(--field-border);
  background-color: var(--panel);
}
.filters__main input[type="search"]:focus,
.filters__main select:focus {
  background-color: var(--panel);
  border-color: var(--focus);
}

/* ===========================================================================
   الحدُّ أخفُّ مرّةً ثالثة، والسهمُ أغلظُ وأوضح
   ---------------------------------------------------------------------------
   «خفّف لون استروك مربع البحث واللي جنبه، وخلى الأسهم بولد وواضحة».

   وقيست خمسُ درجاتٍ أخرى أسفلَ ما وصلنا إليه:

       72%  #9eaaba  2.36   (الحاليّ)      42%  #c6cdd7  1.60
       60%  #aeb8c5  2.01                 35%  #d0d6dd  1.46
       50%  #bcc4cf  1.76                 28%  #d9dee4  1.35

   فالمختارُ **50٪** (`#bcc4cf`، **1.76**). وأدنى من ذلك يصير الحدُّ خيطاً
   يُساوي حدَّ الجدول المجاور، فتذوب الحقولُ في اللوح.

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

   **والسهمُ**: سُمكُه 2.4 ← **3.1**، ومقاسُه 13px ← **15**. وهو رسمُ
   `background-image` لا نصّ — فـ«bold» فيه سُمكُ خطٍّ لا وزنُ محرف.
   ولونُه يبقى `#1d6fa3`: قيس على سطح الحقل الجديد فكان **5.17**، والحدُّ 3.
   ======================================================================== */

.filters__main input[type="search"],
.filters__main select {
  border-color: color-mix(in srgb, var(--field-border) 50%, #fff);
}

.filters__main select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6fa3' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  background-size: 15px 15px;
  padding-inline-end: 2.45rem;
}

/* الحدُّ أخفُّ مرّةً رابعة — 50٪ ← **35٪** (`#d0d6dd`، 1.46 على اللوح).
   وهو أقربُ إلى `--line` (1.23) منه إلى ما بدأ به (3.57).

   وعنده يقف الحدُّ عن كونه حدّاً: ما دون ذلك يساوي حدَّ الجدول المجاور،
   فلا يُعرف أين ينتهي الحقلُ وتبدأ القائمةُ التي تليه. والذي يحمل الحقلَ
   الآن هو **سطحُه** لا خطُّه — ولذلك رُفع السطحُ درجةً معه (`--raised`
   مخلوطٌ بالأرضية) ليبقى الفرقُ بينه وبين اللوح مرئياً بعد أن خفّ الخطّ. */
.filters__main input[type="search"],
.filters__main select {
  border-color: color-mix(in srgb, var(--field-border) 35%, #fff);
  background-color: color-mix(in srgb, var(--raised) 55%, var(--ground));
}

/* ===========================================================================
   لوحُ الفلاتر يرتفع عن أرضيته
   ---------------------------------------------------------------------------
   «ضيف شادو للمربع اللي فيه مربع البحث».

   وكان عليه `--shadow` — ظلُّ اللوحة العامّ، كُتب يوم كانت الأرضيةُ لوناً
   مسطّحاً. وقد صار للصفحة **نسيجٌ** (شبكةُ النقط)، والنسيجُ يبتلع الظلَّ
   الخفيف: النقطُ تمرّ تحت حافة اللوح فلا يُرى أين ينتهي.

   فظلّان كالبطاقات: **قريبٌ** يحدّ اللوحَ عن النقط، و**بعيدٌ واسع** يعطيه
   ارتفاعاً. وحدُّه يخفّ معهما — لوحٌ له ظلٌّ وحدٌّ ظاهرٌ يُقرأ مرسوماً
   ومرفوعاً معاً، وهو تناقض.

   وفي الداكن حدٌّ لا ظلّ: الظلُّ الأسودُ على أرضيةٍ سوداء لا يُرى، وهي
   القاعدةُ نفسُها في البطاقات واللوحات.
   ======================================================================== */

/* **والمحدِّد `form.filters` لا `.filters`.**

   كُتبت أوّلاً `.filters` فلم تعمل: شريطُ الفلاتر `<form method="get">`،
   وفي الورقة قاعدةٌ قديمة `form[method="get"] { box-shadow: none }`
   نوعيّتُها **(0,1,1)** وتغلب `.filters` **(0,1,0)** مهما تأخّرت في الملفّ.

   وكُشف ذلك بقياسٍ غريب: `<div class="filters">` يُصنع في الصفحة يأخذ الظلَّ،
   و`<form class="filters">` نفسُه لا يأخذه — فالفرقُ في الوسم لا في الصنف،
   وذلك لا يقع إلا من محدِّدٍ يذكر الوسم. */
form.filters {
  border-color: var(--line-soft);
  box-shadow:
    0 1px 2px rgb(23 32 51 / .05),
    0 6px 20px rgb(23 32 51 / .07);
}
[data-scheme="dark"] form.filters {
  border-color: var(--line);
  box-shadow: none;
}

/* ===========================================================================
   شريطُ الجدول: عنوانٌ برتبته، وعدٌّ يُقرأ عدّاً، وزرٌّ يقابله
   ---------------------------------------------------------------------------
   «قائمة المستخدمين ١٤ — خلي شكلها احترافي أكتر هي وزر تصدير اللي قصادها».

   وكان العنوانُ مضبوطاً بـ`style=` في القالب (`1.1rem`، `800`، `--ink`)،
   وحاويةُ الأفعال كذلك. وسبعةُ قوالبَ تحمل الشريطَ نفسَه، فالضبطُ بيدٍ في
   كلٍّ منها سبعةُ أماكنَ للقاعدة الواحدة — وواحدٌ منها يُنسى فيبدو مكسوراً.
   نُقلت إلى الورقة.

   * **العنوانُ** يأخذ رتبةَ ما تحته لا رتبةَ `<h1>`: هو اسمُ جدولٍ في صفحة،
     لا اسمُ الصفحة.
   * **العدُّ حبّةٌ محايدةٌ لا زرقاء**: كان بلون الأساسي فيُقرأ **رابطاً**
     يُنقر — وهو عددٌ لا يُنقر. والرقمُ فيه بخاناتٍ مستقيمة.
   * **وزرُّ التصدير يقابله** برسمِ الورقة النازلة نفسِه الذي في رأس الصفحة
     (`--icon-export`)، فالفعلُ الواحد شكلٌ واحدٌ أينما وقع — وهو **ثانويٌّ
     هنا**: زرُّ الرأس يصدّر كلَّ ما طابق المرشِّحات، وهذا يصدّر الصفحةَ
     المعروضة، فلا يصحّ أن يتساويا في الوزن.
   ======================================================================== */

.table-bar { margin-block-end: .85rem; }

.table-bar__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}

.table-bar__actions { display: flex; align-items: center; gap: .5rem; }

/* العدّ: حبّةٌ محايدة. */
.table-bar__title .pill--filter {
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: .12rem .5rem;
}

/* زرُّ تصدير الصفحة — ثانويّ، وبرسم زرِّ الرأس نفسِه. */
.table-bar__actions .btn-sm {
  padding: .42rem .8rem;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--field-border) 45%, #fff);
  font-weight: 700;
}
.table-bar__actions .btn-sm::before {
  content: "";
  inline-size: 13px;
  block-size: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-export) center / contain no-repeat;
          mask: var(--icon-export) center / contain no-repeat;
}
.table-bar__actions .btn-sm:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* ===========================================================================
   الجدول: رأسٌ يُقرأ رأساً، وصفوفٌ لها إيقاع
   ---------------------------------------------------------------------------
   «خلى الجدول وعناوينه شكله احترافي أكتر».

   * **رأسُ الجدول كان بمقاس المحتوى ووزنه تقريباً** (`.88rem`)، فيُقرأ صفّاً
     أوّلَ لا رأساً. صار أصغرَ وأثقلَ وأخفَّ لوناً وبتباعدٍ بين حروفه — وهي
     الصفاتُ التي تقول «هذا تصنيفٌ لا بيان» في كل جدولٍ مطبوع.
   * **وخطُّه السفليُّ مصمتٌ لا خافت**: هو الحدُّ بين التصنيف والبيان، وأثقلُ
     من الخطوط التي تفصل صفّاً عن صفّ.
   * **والصفوفُ تتنفّس**: حشوةٌ رأسيّةٌ أوسع، ومحاذاةٌ إلى الوسط لا إلى
     الأعلى — خليّةٌ فيها سطرٌ واحد بجوار خليّةٍ فيها سطران كانت تتعلّق
     بالسقف فيُقرأ الصفُّ مائلاً.
   * **والمرورُ يلوّن الصفَّ كلَّه** بلونٍ أخفَّ من `--raised`: الأخيرُ هو
     لونُ رأس الجدول نفسِه، فصفٌّ تحت المؤشّر كان يصير بلون الرأس.
   ======================================================================== */

thead th, tr:first-child th {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .012em;
  color: var(--muted);
  padding-block: .8rem;
  border-block-end: 1px solid var(--line);
}

th, td { vertical-align: middle; padding-block: .78rem; }

td { color: var(--ink-soft); }
td strong, td b { color: var(--ink); }

tbody tr:hover, tr:hover td {
  background: color-mix(in srgb, var(--raised) 55%, var(--panel));
}

/* عمودُ المعرّف: رقمٌ يُقارَن نزولاً، فخاناتُه مستقيمةٌ ولونُه خافت. */
td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* أزرارُ الصفّ تتقارب: ثلاثةُ رسومٍ بينها فجوةٌ واسعة تُقرأ ثلاثةَ أعمدة. */
.row-actions { gap: .3rem; }

/* ===========================================================================
   الجدول: لوحٌ يطفو، ورأسٌ بلا رقعةٍ رمادية
   ---------------------------------------------------------------------------
   «مفيش حاجة اتغيرت».

   وقد تغيّرت — لكن ما تغيّر كان **صقلاً يُقاس ولا يُرى**: وزنُ الرأس 700 ←
   800، وتباعدُ حروفه .03 ← .012، وحشوةٌ رأسيّةٌ بـ1.5px، ومحاذاةٌ إلى الوسط.
   وذلك يُحسّن القراءةَ ولا يُغيّر **هيئة** الجدول، والمطلوبُ هيئة.

   فتغييران يُريان:

   * **رأسٌ بلا رقعةٍ رمادية.** كان `--raised` يملؤه، فيُقرأ الجدولُ صندوقاً
     فيه شريطٌ ملوّنٌ في أعلاه. والرأسُ الحديثُ يُعرَف **بخطٍّ تحته** لا
     بخلفيةٍ وراءه — فالخطُّ يثخن إلى 2px بلون الحبر مخفَّفاً، والخلفيةُ
     تصير بلون اللوح.

     **وتبقى الخلفيةُ مصمتةً لا شفّافة**: الرأسُ `position: sticky`، وشفّافُه
     يُظهر الصفوفَ تمرّ تحته عند التمرير.

   * **لوحٌ بلا حدٍّ وبظلّ**، كالبطاقات وشريط الفلاتر: حدٌّ رفيعٌ حول جدولٍ
     فوق أرضيةٍ لها نسيجٌ يجعله يبدو مرسوماً عليها لا موضوعاً فوقها.
   ======================================================================== */

table {
  border: 0;
  box-shadow:
    0 1px 2px rgb(23 32 51 / .05),
    0 6px 20px rgb(23 32 51 / .07);
}
[data-scheme="dark"] table { box-shadow: inset 0 0 0 1px var(--line); }

thead th, tr:first-child th {
  background: var(--panel);
  border-block-end: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
  padding-block: .9rem;
}

/* خطوطُ الصفوف أخفُّ: صارت أكثرَ ظهوراً حين زال الحدُّ الخارجيُّ وابيضّ
   الرأس، فتُقرأ شبكةً لا فواصل. */
th, td { border-block-end: 1px solid color-mix(in srgb, var(--line) 62%, transparent); }

/* رأسُ الجدول يعود إلى خلفيته الرمادية (`--raised`) بأمر المالك — والخطُّ
   الثخينُ تحته يبقى: الرقعةُ تفصله عمّا تحته، والخطُّ يحدُّ الفصل. وكان
   قبل هذه الخطوة يحمل أحدَهما بلا الآخر مرّتين — رقعةً بخطٍّ رفيع، ثم
   خطّاً ثخيناً بلا رقعة. */
thead th, tr:first-child th { background: var(--raised); }

/* ===========================================================================
   شريطٌ في أعلى الجدول
   ---------------------------------------------------------------------------
   «ضيف استروك في الجدول من الأعلى».

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

   **والشريطُ على خلايا الرأس لا على `<table>`**: الجدولُ `border-collapse:
   separate` ولا `overflow: hidden` عليه (لأنها تُبطل `position: sticky`
   على الرأس — مكتوبٌ في موضعه)، فحدٌّ على الجدول نفسِه يمرّ **خلف** الزوايا
   المدوَّرة التي تُرسم على الخلايا الطرفية، فيبرز مستقيماً من قوسين.
   وحدٌّ على الخلايا يتبع استدارتَها.

   ولونُه `--brand` فيتبع اختيارَ المالك كما تتبعه البطاقات.
   ======================================================================== */

thead th, tr:first-child th {
  border-block-start: 3px solid var(--brand);
}

/* الشريطُ أرقُّ وأخفُّ لوناً: 3px ← **2px**، و`--brand` مصمتاً ← مخفَّفاً
   بـ55٪. وهو حدُّ لوحٍ لا حدُّ بطاقة: البطاقةُ عرضُها 16rem فشريطُها يُقرأ
   في لمحة، والجدولُ يمتدّ بعرض الصفحة — فالشريطُ نفسُه عليه يصير خطّاً
   بطول ألف بكسل، ويثقل بقدر ما يطول. */
thead th, tr:first-child th {
  border-block-start-width: 2px;
  border-block-start-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

/* ===========================================================================
   رأسُ الجدول أغمق، والحبّاتُ وأزرارُ الصفّ تُنقَّح
   ---------------------------------------------------------------------------
   «غمّق العناوين شويه، وخلى مربعات النوع وشركة بشكل احترافي أكتر،
   وإجراءات».

   * **الرأسُ** كان `--muted` (5.01 على رقعته الرمادية) — يُقرأ ولا يُمسَح.
     صار `--ink-soft` (7.6): عناوينُ أعمدةٍ تُقرأ **مرّةً** ثم تُحفظ مواضعُها،
     فيجب أن تُلتقط من النظرة الأولى.

   * **الحبّةُ** كانت خلفيةً ملوّنةً بلا حدّ، فتبدو **رقعةً** لا وسماً —
     وحافّةُ اللون تذوب في خلفية الصفّ حين تتقاربان. فصار لها حدٌّ **مشتقٌّ
     من لونها هي** (`currentColor` بـ22٪): وسمُ «نشط» أخضرُ الحدّ، و«محظور»
     أحمرُه، بلا قاعدةٍ لكلّ حالةٍ على حدة. وزاويتُها 7px لا قوسٌ كامل —
     القوسُ شكلُ الحبّات في البطاقات فوق، وهذه بيانٌ في جدولٍ لا وسمٌ في لوح.

   * **أزرارُ الصفّ** تتقارب وتصغُر (2.2rem ← 2rem، والفجوة .3 ← .25)، وحدُّها
     في السكون يخفّ: أربعةُ مربّعاتٍ بحدٍّ كامل في كلِّ صفٍّ من خمسة وعشرين
     تُقرأ **عموداً خامساً من الشبكة** لا أفعالاً. ويعود الحدُّ كاملاً عند
     المرور، فمن يقصدها يراها.
   ======================================================================== */

thead th, tr:first-child th { color: var(--ink-soft); }

.pill {
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding: .2rem .55rem;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.row-actions { gap: .25rem; }
.row-actions a {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
}
.row-actions a:hover { border-color: var(--brand); color: var(--brand-dark); }
.row-actions .row-icon { inline-size: .95rem; block-size: .95rem; }

/* ===========================================================================
   أزرارُ الصفّ: `.act` لا `.row-actions a`
   ---------------------------------------------------------------------------
   القاعدةُ كُتبت أوّلاً على `.row-actions a` فلم تمسّ شيئاً في هذه الشاشة:
   جداولُ اللوحة تستعمل **صنفين مختلفين** لأزرار الصفّ — `.row-actions a`
   في بعضها و`.act` في ستّة قوالبَ منها هذه. وكُشف بالنظر في القالب بعد أن
   ظهر أن شيئاً لم يتغيّر، لا بالقياس.

   * **الحذفُ لا يحمر في السكون.** كان حدُّه ولونُه أحمرين دائماً، فخمسةٌ
     وعشرون صفّاً فيها خمسةٌ وعشرون زرّاً أحمر — والأحمرُ الذي يُرى في كل
     سطرٍ يتوقّف عن كونه تحذيراً. فيحمرّ عند المرور وحدَه، وله شاشتُه التي
     تسأل وترفض على أي حال.
   * **وحدُّ السكون يخفّ للأربعة**: أربعةُ مربّعاتٍ بحدٍّ كامل في كل صفٍّ
     تُقرأ عموداً خامساً من الشبكة لا أفعالاً.
   * **والقفزةُ تُلغى** (`translateY(-1px)` ودورانُ الرسم): زرٌّ يقفز ويدور
     تحت المؤشّر في جدولٍ يُمسح بالعين صفّاً صفّاً حركةٌ تلاحق اليد.
   ======================================================================== */

.act {
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  margin: 0;
}
.act:hover { transform: none; border-color: var(--brand); }
.act:hover svg { transform: none; }

.act--danger, .act--del { border-color: color-mix(in srgb, var(--line) 70%, transparent); color: var(--muted); }
.act--danger:hover, .act--del:hover { border-color: var(--danger); color: var(--danger); }

.actions .act { animation: none; }
.actions { text-align: center; }
.actions .row-actions, .actions > div { justify-content: center; gap: .25rem; }

/* ===========================================================================
   رمزُ الشاشة في رأسها، والنقطُ أخفّ
   ---------------------------------------------------------------------------
   «ضيف أيقونة جنب الهيدر إدارة المستخدمين، وخفّف لون نقط الخلفية قليلاً».

   **والرمزُ من السجلّ لا من القالب.** `navigation.icon_for` تعطي رسمَ
   الشاشة نفسَه الذي يرسم سطرَها في الشريط الجانبي، فرأسُ الشاشة وسطرُها في
   القائمة يقولان الشيءَ نفسَه — ورمزان مختلفان لشاشةٍ واحدة يجعلان المرءَ
   يظنّهما شاشتين. وهو في الإطار مرّةً واحدة، لا يُكتب في ستٍّ وتسعين قالباً.

   **ورمزُ الرئيسية كان مكتوباً بيده** في `dashboard.html` — ثلاثةُ أعمدةٍ
   رُسمت هناك — فحُذف: صار يأتي من السجلّ كغيره، والرئيسيةُ صفٌّ في `PAGES`
   لها رسمُها.

   والنقطُ: 11٪ ← **7٪** في الفاتح، و16٪ ← **11٪** في الداكن.
   ======================================================================== */

/* رمزُ الشاشة في رأس القوائم: مربّعٌ خفيفٌ لا مصمت — الرأسُ هنا سطرٌ فيه
   عنوانٌ وأفعال، لا لافتةٌ كرأس الرئيسية، ومربّعٌ مصمتٌ فيه يزن أكثرَ من
   الاسم بجواره. */
.page__crest {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.page__crest svg { width: 18px; height: 18px; }

main h1 { display: flex; align-items: center; gap: .6rem; }

/* ===========================================================================
   ذيلُ الجدول: قطعةٌ منه لا صندوقٌ تحته
   ---------------------------------------------------------------------------
   «خلى المربع الأبيض اللي فيه 14 حساب ده بشكل احترافي».

   **وكان صندوقاً مستقلاً بحكم قاعدتين تعارضتا.** الذيلُ كُتب ليلتحم بالجدول:
   `border-block-start: 0` وزاويتان سفليّتان مدوَّرتان وهامشٌ سالبٌ
   بـ`-.4rem`. وذلك يعمل ما دام الجدولُ بحدٍّ وهامشُه `.4rem`.

   ثم تغيّر شيئان: الجدولُ صار **بلا حدٍّ وبظلّين**، وغلافُه `.scroller`
   يحمل هامشاً سفلياً قدرُه `1.2rem`. فانفصل الذيلُ بثمانية بكسلات، وبقي
   حدُّه الكاملُ يرسم صندوقاً حول شيءٍ يفترض أنه نصفُ صندوق.

   فالهامشُ السالبُ صار `-1.2rem` — قيمةَ هامش الغلاف نفسَها لا رقماً
   يُقارب — والحدودُ الجانبيةُ والسفليّةُ حُذفت، وبقي **خطٌّ علويٌّ واحد**
   يفصله عن آخر صفّ. وظلُّه ظلُّ الجدول نفسُه فيبدوان قطعةً واحدة.

   **وسطرُ العدّ يصير أوضح**: الرقمُ فيه هو الجواب («كم صفّاً طابق؟»)،
   وكان بلون `--muted` كبقيّة الجملة.
   ======================================================================== */

.table-footer, .scroller + p, table + p {
  margin-block-start: -1.2rem;
  padding: .75rem 1.1rem;
  border: 0;
  border-block-start: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  box-shadow:
    0 1px 2px rgb(23 32 51 / .05),
    0 6px 20px rgb(23 32 51 / .07);
}
[data-scheme="dark"] .table-footer,
[data-scheme="dark"] .scroller + p,
[data-scheme="dark"] table + p { box-shadow: inset 0 0 0 1px var(--line); border-block-start-color: var(--line); }

/* أزرارُ الصفحات تُقرأ أزراراً: الحاليةُ محدَّدةٌ لا رقمٌ عائم. */
.pagination__current {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.85rem;
  block-size: 1.85rem;
  padding-inline: .4rem;
  border-radius: 8px;
  background: var(--brand-solid);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  block-size: 1.85rem;
  padding-inline: .8rem;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pagination a:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  text-decoration: none;
}

/* ===========================================================================
   سطرُ العدّ: الأرقامُ فيه هي الجواب
   ---------------------------------------------------------------------------
   «خلى شكله احترافي أكتر».

   وكان جملةً واحدةً بلونٍ واحد: «14 حساباً · صفحة 1 من 1». والأرقامُ الثلاثةُ
   فيها هي **الجواب** — كم طابق، وأين أنا، وكم بقي — والكلماتُ بينها نحوٌ
   يربطها. فمساواتُها في اللون والوزن تجعل العينَ تقرأ الجملةَ كاملةً لتلتقط
   ثلاثةَ أرقام.

   فصارت الأرقامُ بلون الحبر وبوزن 800، والكلامُ بينها خافتاً. والفاصلُ
   نقطةٌ **مرسومةٌ لا محرفاً**: `·` في خطٍّ عربيٍّ يقع في ارتفاعٍ يختلف عن
   نظيره في اللاتيني، فيبدو معلّقاً بين سطرين.

   والتحويلُ آليٌّ على سبعة مواضع في سبعة قوالب — لا يُكتب بيدٍ فيُنسى في
   واحد.
   ======================================================================== */

.table-footer .tf__n, .scroller + p .tf__n, table + p .tf__n {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tf__sep {
  display: inline-block;
  inline-size: .3rem;
  block-size: .3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  margin-inline: .6rem;
  vertical-align: .1em;
}

.table-footer, .scroller + p, table + p { color: var(--muted); font-weight: 600; }

/* حشوةُ الذيل الأفقيّةُ تساوي حشوةَ خليّة الجدول (`.9rem`)، فيستقيم أوّلُ
   حرفٍ فيه مع أوّل حرفٍ في العمود الأوّل. وكانت `1.1rem` — فرقٌ قدرُه
   `.2rem`، قيس في الصفحة المرسومة: حافّةُ نصّ الخليّة 1002.8 وحافّةُ نصّ
   الذيل 999.6، أي 3.2px. وذلك لا يُرى وحدَه، لكنه يُرى حين يقع تحت عمودٍ
   من خمسةٍ وعشرين صفّاً كلُّها مستقيمة. */
.table-footer, .scroller + p, table + p { padding-inline: .9rem; }

/* الذيلُ ينزل قليلاً عن الجدول — بأمر المالك. والهامشُ السالبُ كان `-1.2rem`
   وهو قيمةُ هامش `.scroller` بالضبط، فيلتحم الاثنان بلا فاصل. صار `-.85rem`
   فيبقى بينهما نحوُ ستّة بكسلات: يُقرآن قطعتين متجاورتين لا قطعةً واحدة،
   ويبقى الذيلُ أقربَ إلى جدوله منه إلى ما بعده.

   والخطُّ العلويُّ يُحذف معه: خطٌّ يفصل ما بينه وبين ما فوقه فراغٌ أصلاً
   فاصلٌ ثانٍ بلا شيءٍ يفصله. */
.table-footer, .scroller + p, table + p {
  margin-block-start: -.85rem;
  border-block-start: 0;
  border-radius: var(--radius-lg);
}
[data-scheme="dark"] .table-footer,
[data-scheme="dark"] .scroller + p,
[data-scheme="dark"] table + p { border-block-start: 0; }

/* ===========================================================================
   حالةُ الفراغ: كتلةٌ تقول ما يُفعل، لا فقرةٌ في وسط بياض
   ---------------------------------------------------------------------------
   «خلى الصفحة دي بشكل احترافي أكتر» — قيلت في «تقرير مزايدات مستخدم»، وهي
   شاشةٌ **تبدأ فارغةً بطبيعتها**: لا تقريرَ قبل أن تُسأل عن أحد.

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

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

.blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-align: center;
  padding: 3rem 1.5rem 3.2rem;
  border-radius: 16px;
  background: var(--panel);
  border: 1px dashed color-mix(in srgb, var(--line) 85%, var(--muted));
  color: var(--muted);
}
.blank > svg { color: color-mix(in srgb, var(--brand) 45%, var(--muted)); margin-block-end: .4rem; }
.blank__say { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.blank__hint { margin: 0; font-size: .82rem; font-weight: 500; color: var(--muted); max-inline-size: 42ch; }

/* التنبيهُ نبرةٌ لا شكلٌ ثانٍ: الحدُّ والرسمُ يأخذان لونَه، والباقي كما هو. */
.blank--warn { border-color: var(--warn-line); background: color-mix(in srgb, var(--warn-soft) 45%, var(--panel)); }
.blank--warn > svg { color: var(--warn); }
.blank--warn .blank__say { color: var(--warn); }

/* ===========================================================================
   سطرُ الوصف يحاذي نصَّ العنوان، وما بعده ينزل
   ---------------------------------------------------------------------------
   «نزّل مربع البحث لتحت شويه، وخلى الكلام اللي تحت الهيدر يجي شمال شويه».

   **والإزاحةُ محسوبةٌ من مقاس الرمز لا مكتوبة.** صار لرأس كل شاشةٍ رمزٌ في
   مربّع، فالعنوانُ يبدأ بعد المربّع وفجوته — وسطرُ الوصف تحته كان يبدأ من
   حافة الصفحة، فيسبق العنوانَ بـ44px ويُقرأ الاثنان غيرَ مستقيمين.

   والمقاسان صارا رمزين (`--page-crest` و`--page-crest-gap`) يقرؤهما المربّعُ
   والفجوةُ والإزاحةُ معاً — فتصغيرُ الرمز يوماً يحرّك السطرَ معه بلا رقمٍ
   ثانٍ يُعدَّل. وهي القاعدةُ نفسُها التي جعلت تصغيرَ رمز الرئيسية مرّتين لا
   يحتاج تعديلاً.

   وما يلي السطرَ ينزل: `1.2rem` ← `1.5rem` فوق الخطّ الفاصل.
   ======================================================================== */

:root { --page-crest: 2.15rem; --page-crest-gap: .6rem; }

main h1 { gap: var(--page-crest-gap); }
.page__crest { inline-size: var(--page-crest); block-size: var(--page-crest); }

.lede { padding-inline-start: calc(var(--page-crest) + var(--page-crest-gap)); }
.lede + * { padding-block-start: 1.5rem; }

@media (max-width: 40rem) {
  /* الإزاحةُ تُلغى على الضيّق: 2.75rem من شاشةٍ بعرض 24rem عُشرُها. */
  .lede { padding-inline-start: 0; }
}

/* الفراغُ تحت الخطّ الفاصل يزيد: `1.5rem` ← `1.9rem`. وهو على `.lede + *`
   فيقع في كل شاشةٍ لها سطرُ وصف — والزيادةُ محسوبةٌ بذلك: ستُّ بكسلاتٍ
   ونصف تُقرأ تنفّساً في هذه الشاشة ولا تُقرأ فجوةً في شاشةٍ تحتها شبكةُ
   بطاقات. */
.lede + * { padding-block-start: 1.9rem; }

/* **والفراغُ لم يقع قطّ حيث كُتب.** `.lede + *` نوعيّتُها (0,1,0)، ونماذجُ
   البحث تحمل `form[method="get"] { margin: 0 0 1rem }` بنوعيّة (0,1,1) —
   فتغلبها وتُصفّر الهامشَ العلويّ. قيس فكان الفراغُ بين سطر الوصف والنموذج
   **صفراً**، بعد أربع زياداتٍ كُتبت عليه.

   فالفراغُ انتقل إلى `.lede` نفسِه (هامشٌ سفليّ، لا ينازعه شيء)، وبقي على
   `.lede + *` ما لا يُنازَع فيه: الخطُّ وحشوتُه. وأُضيف محدِّدٌ يكافئ القاعدةَ
   القديمة نوعيّةً لنماذج البحث وحدها. */
.lede { margin-block-end: 1.25rem; }
.lede + *,
.lede + form[method="get"] {
  margin-block-start: 0;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--line);
}

/* ===========================================================================
   أفعالُ الرأس: فعلٌ أوّلٌ واحد، ورمزٌ لمن يستحقّه
   ---------------------------------------------------------------------------
   «خلى الصفحة دي بشكل احترافي أكتر» — قيلت في «قائمة المزادات»، وفيها
   **أربعةُ أفعالٍ في الرأس**، وهي أكثرُ شاشةٍ في اللوحة فعلاً.

   **وعطلان، كلاهما من قاعدةٍ كُتبت لشاشةٍ فيها فعلٌ واحد:**

   * **رمزُ التصدير على الأربعة.** القاعدةُ كانت
     `.page__actions a:not(.page__back)::before` — أي «كلُّ رابطٍ في صفّ
     الأفعال»، وذلك صحيحٌ في شاشةٍ فعلُها التصديرُ وحده. وفي هذه الشاشة يحمل
     «+ مزاد جديد» و«بحث عن سيارة» و«عمليات مجمعة» رسمَ ورقةٍ نازلةٍ من
     صندوق — أي أنها **تقول إنها تُصدّر ملفّاً** وهي لا تفعل.

     فصار الرمزُ على `a[href*="export"]` وحدَه: الشرطُ على **ما يفعله
     الرابط** لا على موضعه.

   * **أربعةٌ ممتلئةٌ بلون الأساسي تتنافس.** والرأسُ فيه فعلٌ أوّلٌ واحد
     («+ مزاد جديد»، وهو الوحيد الذي يحمل `btn-primary` في القالب)، والباقي
     طرقٌ إلى شاشاتٍ أخرى. فالممتلئُ له وحدَه، والبقيّةُ محدَّدةٌ بحدّ.
   ======================================================================== */

.page__actions a:not(.page__back)::before { content: none; }

.page__actions a[href*="export"]::before {
  content: "";
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-export) center / contain no-repeat;
          mask: var(--icon-export) center / contain no-repeat;
}

/* الثانويّ: سطحُ اللوح وحدٌّ ونصٌّ بلون الحبر. */
.page__actions a:not(.page__back):not(.btn-primary) {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--field-border) 55%, #fff);
  color: var(--ink-soft);
  box-shadow: none;
}
.page__actions a:not(.page__back):not(.btn-primary):hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* **والفعلُ الوحيد في الرأس أوّليٌّ ولو لم يحمل `btn-primary`.**

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

   و`:only-child` يفرّق بينهما بلا صنفٍ يُكتب في القالب: فعلٌ وحدَه لا ينافسه
   شيء، فلا معنى لتخفيفه. */
.page__actions a:only-child:not(.page__back) {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: #fff;
  box-shadow: 0 1px 2px rgb(23 32 51 / .06);
}
.page__actions a:only-child:not(.page__back):hover {
  background: color-mix(in srgb, var(--brand-solid) 86%, #000);
  border-color: color-mix(in srgb, var(--brand-solid) 86%, #000);
  color: #fff;
}

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

   و`main:not(.board)` تستثني الرئيسية: رأسُها لافتةٌ عمودية، و`page__actions`
   فيها تحمل **سطرَ الترحيب** لا أزراراً — وهامشٌ عليها هناك يزيح نصّاً لا
   يُزاح. */
main:not(.board) .page__actions { margin-block-start: .45rem; }

/* ===========================================================================
   حقلُ البحث يملأ ما بقي — سقفُ النماذج لا يسري عليه
   ---------------------------------------------------------------------------
   «خلى المربعات موزّعة في مربع البحث بشكل أفضل عشان باين فاضي من الآخر».

   **والفراغُ من سقفٍ لا من توزيع.** `input, select, textarea` في قاعدة
   النماذج العامّة تحمل `max-width: 26rem` — وهو صوابٌ هناك: حقلُ نصٍّ أعرضُ
   من ذلك في استمارةٍ عمودية يجعل العينَ تقطع مسافةً بين آخر الحرف وأوّل
   السطر التالي.

   لكنّ حقلَ البحث في شريطٍ أفقيٍّ ليس حقلَ استمارة: وظيفتُه أن يأخذ ما بقي
   بعد القوائم والزرّ. فوقف عند 416px بينما الشريطُ 951 — قيس فكان المستعملُ
   762، أي **189px فارغةٌ في الطرف**، وهي التي رآها المالك.

   فالسقفُ يُلغى لحقول البحث في نماذج `get` وحدها، ويبقى على ما سواها.
   ======================================================================== */

form[method="get"] input[type="search"],
.filters__main input[type="search"] { max-inline-size: none; }
form[method="get"] > input[type="search"],
.filters__main > input[type="search"] { flex: 1 1 14rem; }

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

   وفي هذا العمود **ستّةُ أفعالٍ أو سبعة** في الصفّ الواحد — أكثرُ خليّةٍ في
   اللوحة عملاً. وكانت أزرارُها عناصرَ سطريّةً يلفّها المتصفّح كما يلفّ
   الكلمات: صفٌّ فيه أربعةٌ وآخرُ فيه ثلاثة، وثالثٌ فيه واحد — بلا محاذاةٍ
   بين صفٍّ وصفّ، فتُقرأ كومةً.

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

   والأزرارُ أصغرُ قليلاً هنا (1.85rem) — ستّةُ مربّعاتٍ بـ2rem في خليّةٍ
   واحدة تجعل الصفَّ أطولَ من سطرين.
   ======================================================================== */

td.actions {
  display: grid;
  grid-template-columns: repeat(3, 1.85rem);
  gap: .28rem;
  justify-content: center;
  align-content: center;
}

td.actions .act {
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: 7px;
}
td.actions .act svg { inline-size: .9rem; block-size: .9rem; }

/* زرُّ المراجعة يحمل عدداً فيمتدّ على الخانات الثلاث: رقمٌ في مربّعٍ
   بـ1.85rem يُقصّ. */
td.actions .act--review { grid-column: 1 / -1; inline-size: auto; }

/* ===========================================================================
   عمودا «التفعيل» و«الصور»: نسبةٌ تُقرأ نسبةً
   ---------------------------------------------------------------------------
   «خلى التفعيل والصور أفضل».

   **والشريطُ كان يبدو كتلةً خضراء لا مقياساً.** مسارُه `--line-soft`
   (`#eef2f8`) على خليّةٍ بيضاء — فرقُ ستِّ درجاتٍ من 255، أي أنه **يُرسم
   ولا يُرى**؛ فلا يظهر إلا الجزءُ الممتلئ، ومقياسٌ بلا مقامٍ ليس مقياساً.
   صار المسارُ `--line` وارتفاعُه 5px بدل 4.

   **والرقمان صارا معاً**: «٢ / ٢» تُقرأ نسبةً في لمحة، و«٢» فوق «متاحة من ٢»
   تجعل العينَ تجمعهما من سطرين. والمقامُ أخفُّ لوناً ووزناً: هو السياقُ لا
   الجواب.

   **ولونُ الشريط لم يُمَسّ**: شريطُ الصور يصير كهرمانياً حين تنقص صورة
   (`bar--warn` يضعه القالبُ بشرطٍ على البيانات)، وشريطُ التفعيل أخضرُ
   دائماً. وتلوينُ الثاني بالحالة يحتاج شرطاً في القالب لا قاعدةً في الورقة
   — والورقةُ لا تقارن قيمتين.
   ======================================================================== */

.bar {
  block-size: .32rem;
  background: var(--line);
  max-inline-size: 6.5rem;
}

.metric__n { display: flex; align-items: baseline; gap: .22rem; }
.metric__of {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.metric__label { font-size: .74rem; font-weight: 600; }
.metric__note { font-size: .72rem; font-weight: 600; }

/* ===========================================================================
   صقلُ عمود التحكّم — داخل الشبكة التي اختارها المالك
   ---------------------------------------------------------------------------
   رُسمت له أربعةُ أشكال (الشبكة، وصفٌّ بلا حدود، وثلاثةٌ و«⋯»، وزرُّ
   «إجراءات» واحد) فاختار الشبكةَ كما هي. فالتخطيطُ لا يُمَسّ، والصقلُ داخلَه:

   * **سُمكُ الرسم يزيد إلى 2** بعد أن صغُر الزرُّ إلى 1.85rem والرسمُ إلى
     0.9rem: خطٌّ بسُمك 1.7 على رسمٍ بهذا المقاس يصير شعرةً، والرسومُ الثمانيةُ
     تُقرأ متشابهةً لأن ما يفرّقها تفاصيلُ لا تُرى.
   * **الحدُّ يظهر عند المرور ولا يبرز في السكون**: ثمانيةُ مربّعاتٍ محدَّدةٍ
     في خليّةٍ واحدة تُقرأ شبكةً ثانيةً داخل الجدول.
   * **وخانةُ الزرّ تُضاء كلُّها** عند المرور بلون فعلِه — فالهدفُ 1.85rem
     كاملاً لا الرسمُ في وسطه.
   ======================================================================== */

td.actions .act svg { stroke-width: 2; }
td.actions .act {
  border-color: transparent;
  background: var(--raised);
}
td.actions .act:hover,
td.actions .act:focus-visible {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
td.actions .act--danger:hover,
td.actions .act--del:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* ===========================================================================
   كروتُ اختيار المزاد: البطاقةُ هي الزرّ
   ---------------------------------------------------------------------------
   «خلى الصفحة دي بشكل احترافي أكتر».

   **والبطاقةُ كلُّها `<a>` أصلاً** — مكتوبٌ في رأس قالبها أن ذلك مقصود:
   «الكارتُ هدفُ لمسٍ أكبر». ثم يقع في قاعها **زرٌّ ممتلئٌ بعرضها** يقول
   «فتح إدارة + سيارات» — أي هدفُ لمسٍ ثانٍ داخل الأوّل، يفعل ما يفعله.
   وخمسةُ كروتٍ في شبكةٍ تعني خمسةَ أزرارٍ زرقاءَ ممتلئةٍ تصرخ بالقوّة نفسِها،
   فلا يُعرف أيُّها المقصود — وكلُّها المقصود.

   فصار التذييلُ **سطرَ وجهةٍ** خلف خطٍّ رفيع: يقول إلى أين تذهب البطاقةُ إن
   نُقرت، ويتلوّن معها عند المرور. وهي لغةُ بطاقات الأرقام في الرئيسية نفسُها.

   **والبطاقةُ ترتفع عند المرور** بحدٍّ وظلّ — فالهدفُ كلُّه يستجيب لا جزءٌ
   منه.

   والوسومُ الثلاثةُ (العددُ والبدءُ والانتهاء) تصير سطراً واحداً بفواصل:
   ثلاثُ حبّاتٍ في بطاقةٍ بعرض 17rem تلتفّ سطرين وتُقرأ ثلاثةَ أشياءَ
   منفصلة، وهي **بيانٌ واحد**: متى وكم.
   ======================================================================== */

.pick-card { gap: .5rem; }
.pick-card:hover {
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow: 0 2px 4px rgb(23 32 51 / .06), 0 10px 26px rgb(23 32 51 / .09);
  transform: none;
}

.pick-card__id { font-size: .74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-card__title { font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1.4; margin: 0; }

/* سطرٌ واحدٌ بفواصلَ لا ثلاثُ حبّات. */
.pick-card__meta { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); line-height: 1.7; }
.pick-card__meta .chip {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
  white-space: normal;
}
.pick-card__meta .chip + .chip::before {
  content: "·";
  margin-inline: .45rem;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}
.pick-card__meta .chip--count { color: var(--ink); font-weight: 800; }

/* التذييلُ سطرُ وجهةٍ لا زرٌّ ثانٍ. */
.pick-card__cta {
  margin-block-start: auto;
  padding: .7rem 0 0;
  border-block-start: 1px solid var(--line-soft);
  background: none;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-align: start;
  border-radius: 0;
  transition: color .15s ease;
}
.pick-card:hover .pick-card__cta { color: var(--brand-dark); }
.pick-card__cta span[aria-hidden] { transition: transform .15s ease; display: inline-block; }
.pick-card:hover .pick-card__cta span[aria-hidden] { transform: translateX(-3px); }
.pick-card__cta--off { background: none; color: var(--muted); }

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

   ولونُه `--brand-dark` لا `--brand`: الأوّلُ معرَّفٌ في رأس الورقة نصّاً
   ملوّناً على البطاقة بحدّ 4.5، والثاني لِما ليس نصّاً (حدٌّ وإطارٌ وتدرّج)
   بحدّ 3 — وهو يرسب نصّاً. والفرقُ بينهما هو بعينه ما كُتبا لأجله. */
.pick-card__cta { color: var(--brand-dark); }
.pick-card:hover .pick-card__cta { color: var(--brand-solid); text-decoration: underline; text-underline-offset: .25em; }

/* سطرُ الوجهة يصير زرّاً أزرقَ متوسّطاً بنصٍّ أبيض — بأمر المالك.

   وبحجم محتواه لا بعرض البطاقة: خمسةُ كروتٍ في شبكةٍ تعني خمسةَ أزرارٍ،
   وزرٌّ يمتدّ من حافةٍ إلى حافة يصرخ بقدر عرضه. والخطُّ الرفيعُ فوقه يبقى
   فاصلاً بينه وبين بيان البطاقة. */
.pick-card__cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block-start: auto;
  padding: .5rem 1.05rem;
  border-radius: 9px;
  background: var(--brand-solid);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  text-align: center;
  transition: background .15s ease;
}
/* والخطُّ الفاصلُ ينتقل إلى **سطر البيان** فوقه: حدٌّ على زرٍّ بحجم محتواه
   يرسم خطّاً بطول الزرّ لا بعرض البطاقة، وزائفٌ مُزاحٌ بـ`transform` رقمٌ
   يُقدَّر بالعين ويفترق عن موضعه عند أوّل تغييرٍ في الحشوة — جُرّب فلم
   يظهر. والحدُّ على ما فوقه يصيب دائماً. */
.pick-card__cta { border-block-start: 0; }
.pick-card__meta {
  padding-block-end: .85rem;
  border-block-end: 1px solid var(--line-soft);
  margin-block-end: .2rem;
}
.pick-card { padding-block-end: 1.15rem; }

.pick-card:hover .pick-card__cta,
.pick-card:focus-visible .pick-card__cta {
  background: color-mix(in srgb, var(--brand-solid) 86%, #000);
  color: #fff;
  text-decoration: none;
}
.pick-card__cta--off { background: var(--line-soft); color: var(--muted); }

/* ===========================================================================
   لوحةُ الفلاتر: ظلٌّ، ورأسٌ، وحقولٌ محفورة
   ---------------------------------------------------------------------------
   «ضيف شادو لمربع الفلترة وخلى تصميمه احترافي أكتر».

   **الظلّ**: `form.cat-filters` لا `.cat-filters` — قاعدةُ `form[method="get"]`
   العامّة فيها `box-shadow: none` بتخصيصِ (٠،١،١)، والصنفُ وحده (٠،١،٠)
   يخسرُها صامتاً. هذا الفخُّ ابتلع أربعَ محاولاتٍ في هذه الجلسة.

   **ورأسٌ للّوحة**: كانت تبدأ باللصائق مباشرةً، فتُقرأ امتداداً للبطاقات
   فوقها لا كتلةً لها وظيفة. فسطرٌ في أعلاها يقول «تصفية النتائج» وتحته خطّ —
   والنصُّ في `::before` لا في القالب لأن اللوحة استمارةٌ واحدةٌ في شاشةٍ
   واحدة، وصفٌّ في القالب لأجل كلمتين يُلزم كلَّ من نسخها بنسخهما.

   **والحقولُ محفورة**: كانت بيضاءَ داخل لوحةٍ بيضاء، فلا يُرى منها إلا حدٌّ
   بلون `--line`. فصارت بأرضيّة الصفحة (`--ground`) — الحقلُ يُقرأ فجوةً في
   اللوحة، وهي إشارةُ «اكتب هنا» بلا حاجةٍ إلى حدٍّ غليظ. وعند التركيز يعود
   أبيضَ مع الحلقة: الحقلُ النشط يرتفع، والباقي يهدأ.
   ======================================================================== */

form.cat-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem 1rem;
  align-items: end;
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: var(--shadow);
}

/* رأسُ اللوحة. */
form.cat-filters::before {
  content: "تصفية النتائج";
  grid-column: 1 / -1;
  padding-block-end: .85rem;
  border-block-end: 1px solid var(--line);
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: -.005em;
}

.cat-filters__field { display: flex; flex-direction: column; gap: .35rem; min-inline-size: 0; }
form.cat-filters .cat-filters__field label {
  margin: 0;
  font-size: .75rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.cat-filters__field input,
.cat-filters__field select {
  inline-size: 100%;
  max-inline-size: none;
  block-size: 2.7rem;
  padding-inline: .8rem;
  background: var(--ground);
  border-color: var(--line);
  border-radius: var(--radius);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cat-filters__field input:hover,
.cat-filters__field select:hover { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); }
.cat-filters__field input:focus,
.cat-filters__field select:focus { background: var(--panel); border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

/* رمزُ نتقويم المتصفّح أسودُ مصمتٌ افتراضاً فيسحب العين إلى أربع نقاطٍ لا
   تقول شيئاً. يخفت حتى يُلمس. */
.cat-filters__field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .45;
  cursor: pointer;
  transition: opacity .16s ease;
}
.cat-filters__field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.cat-filters__field input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: .9; }

/* قاعُ الاستمارة: خطٌّ فوقه فيُقرأ خاتمةً لا حقلاً سابعاً، و«مسح الفلاتر»
   على الحافة المقابلة — فعلٌ مضادٌّ لا يقف بجوار الفعل الأساسي. */
.cat-filters__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-block-start: .15rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}
/* `form[method="get"] button[type="submit"] { margin-inline-start: auto }`
   (سطر ٧٢٣) يُصيب زرَّ التطبيق أيضاً، فيقتسم الزرّان الفراغَ ويقف الأساسيُّ
   في **منتصف** السطر — قيس: هامشٌ 364.75px على كلٍّ منهما. يُبطَل هنا،
   ويُدفع «مسح الفلاتر» وحدَه إلى الحافة المقابلة. */
/* أمرُ المالك: «خلّي مربّعي تطبيق الفلاتر وحذف في النصّ واعرض». فالزرّان
   في منتصف قاعِ اللوحة وبعرضٍ أدنى واحدٍ لكليهما — لا زرٌّ على حافةٍ وآخرُ
   على مقابلها. و«مسح الفلاتر» صار زرّاً محدوداً بحقٍّ لا رابطاً مسطوراً:
   في المنتصف بجوار زرٍّ مصمتٍ يُقرأ الرابطُ المسطور نصّاً هارباً. */
form.cat-filters .cat-filters__actions { justify-content: center; gap: .75rem; }
form.cat-filters .cat-filters__actions > button[type="submit"] { margin-inline-start: 0; }
form.cat-filters .cat-filters__actions > .btn-primary,
form.cat-filters .cat-filters__actions > .btn-ghost {
  flex: 0 0 auto;
  min-inline-size: 11rem;
  block-size: 2.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
}

/* حقلُ البحث وحالةُ المزاد يملآن الصفَّ الأول (عمودان لكلٍّ)، والتواريخُ
   الأربعةُ صفٌّ تامٌّ تحتهما — لا صفٌّ ناقصٌ بخانتين فارغتين كما كان. */
.cat-filters__field:nth-of-type(1),
.cat-filters__field:nth-of-type(2) { grid-column: span 2; }
@media (max-width: 68rem) {
  .cat-filters__field:nth-of-type(1),
  .cat-filters__field:nth-of-type(2) { grid-column: span 1; }
}

@media (max-width: 68rem) { form.cat-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { form.cat-filters { grid-template-columns: minmax(0, 1fr); } }

/* «مسح الفلاتر» بحدٍّ وأرضيّة: `.btn-ghost` هنا بلا حدٍّ ولا خلفيّة، فبجوار
   زرٍّ مصمتٍ في المنتصف يُقرأ نصّاً سائباً لا زرّاً مساوياً. */
form.cat-filters .cat-filters__actions > .btn-ghost {
  background: var(--panel);
  /* أمرُ المالك: «غمّق الاستروك قليلاً وخلّي لونه أزرق». حدٌّ بلون الأساسيّ
     مخلوطاً بالخطّ — أغمقُ من `--line` وأخفُّ من الأساسيّ المصمت، فيُقرأ
     زرّاً ثانويّاً من عائلة الأساسيِّ لا منافساً له. */
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  color: var(--brand-dark);
}
form.cat-filters .cat-filters__actions > .btn-ghost:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

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

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

.cat-toolbar {
  align-items: center;
  gap: .9rem 1rem;
  margin: 0 0 .9rem;
  padding: .8rem .95rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* النصُّ بشرطةٍ ملوّنةٍ على حافته: يميّزه عن الأزرار في سطرٍ واحدٍ معها،
   ويمنعه أن يُقرأ تذييلَ ما قبله. */
.cat-toolbar__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.55;
}
.cat-toolbar__meta::before {
  content: "";
  flex: none;
  inline-size: 3px;
  block-size: 1.7em;
  border-radius: 2px;
  background: var(--brand);
}

.cat-toolbar__actions { gap: .45rem; }

.cat-toolbar__actions > button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  block-size: 2.45rem;
  padding-inline: .95rem;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* الدرجةُ الثانية: حدٌّ وأرضيّةٌ بيضاء. لا لونَ مصمتٌ إلا لفعلٍ يُنشئ. */
.cat-toolbar__actions > .btn-ghost {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.cat-toolbar__actions > .btn-ghost:hover {
  background: var(--ground);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  color: var(--ink);
}

/* الرموز: قناعٌ لا صورة، فترث `currentColor` وتنقلب مع المظهر والحالة. */
.cat-toolbar__actions > button::before {
  content: "";
  flex: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.cat-toolbar__actions > [data-select-create] {
  --ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>');
}
.cat-toolbar__actions > [data-select-all] {
  --ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>');
}
.cat-toolbar__actions > button[onclick] {
  --ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>');
}

@media (max-width: 52rem) {
  .cat-toolbar__actions { inline-size: 100%; }
  .cat-toolbar__actions > button { flex: 1 1 auto; justify-content: center; }
}

/* ===========================================================================
   جدولُ الكتالوج — صفٌّ يُقرأ في سطر
   ---------------------------------------------------------------------------
   «خلّي البيانات وتصميمها اللي في الجدول بشكل احترافي».

   العطلُ الأول بنيويٌّ لا لونيّ: الغلافُ كان `.scroller` عارياً، فالجدولُ
   يُضغَط في عرض الشاشة وستّةَ عشرَ عموداً تتقاسمه — «غير محدد» تلفُّ سطرين،
   واسمُ السيارة ثلاثة، فيقارب ارتفاعُ الصفّ 100px ولا يُرى إلا أربعةُ صفوف.
   `scroller--wide` (المكتوبة أصلاً لما بعد البيع) تمنع اللفَّ وتُمرّر أفقياً.
   وثمنُها صريح: من يقرأ آخرَ الأعمدة يمرّر.

   والباقي فرزُ الأنواع: السيارةُ اسمٌ غليظٌ وسنةٌ خافتة، والأرقامُ بخاناتٍ
   مستقيمة، والشاصي والّلوحة أحاديّةُ العرض أصغرُ وأخفتُ (سلسلةُ 17 محرفاً
   لا تُقرأ، تُطابَق — فوزنُها البصريُّ يجب أن يكون أقلَّ ما يمكن)، والشرطةُ
   «—» تخفت حتى لا تُقرأ قيمةً، والصورُ حبّةٌ برمز آلة تصوير لا محرفُ إيموجي
   يختلف رسمُه من نظامٍ إلى نظام.
   ======================================================================== */

/* رأسٌ أوضح: حبرٌ أغمقُ من `--muted` — سطرُ العناوين يُقرأ في جدولٍ بستّةَ
   عشرَ عموداً قبل أن تُقرأ خانةٌ واحدة. */
.cat-table thead th {
  color: var(--ink-soft);
  font-size: .73rem;
  font-weight: 800;
  background: var(--raised);
}

.cat-table td { vertical-align: middle; padding-block: .6rem; }

/* السيارة: الاسمُ سطرٌ والسنةُ تحته بوزنٍ خافت. */
.cat-table td strong { font-weight: 700; color: var(--ink); }
.cat-table td small { font-size: .72rem; color: var(--muted); margin-block-start: .1rem; }

/* السلاسلُ الأحاديّة: أصغرُ وأخفت، ولا تُحاذى كالنصّ. */
.cat-table td.mono { font-size: .76rem; color: var(--ink-soft); letter-spacing: -.01em; }

.cat-table td.count { font-variant-numeric: tabular-nums; font-weight: 600; }

/* موعدُ المزاد: بدايةٌ فوق ونهايةٌ تحتها خافتة، بخاناتٍ مستقيمة. */
.cat-table td.sched { font-variant-numeric: tabular-nums; font-size: .78rem; line-height: 1.5; }
.cat-table td.sched > span { display: block; }
.cat-table td.sched > .muted { font-size: .74rem; }

/* الشرطةُ «—»: قيمةٌ غائبةٌ لا قيمةٌ مكتوبة. */
.cat-nil { color: var(--line); font-weight: 700; }

/* حبّةُ الصور: رمزٌ ورقمٌ في إطارٍ خفيف — هدفُ نقرٍ يُرى أنه هدف. */
.cat-table .link-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.cat-table .link-btn:hover { background: var(--brand-soft); border-color: var(--brand); }

/* خانةُ التحديد تضيق: عمودٌ بحشوةٍ كاملةٍ لمربّعٍ بـ1rem يسرق عرضاً من
   ستّةَ عشرَ عموداً تتنازعه. */
.cat-table th:first-child, .cat-table td:first-child { padding-inline: .7rem; width: 1%; }

/* الصفُّ المحدَّد يُرى محدَّداً: أرضيّةٌ خفيفةٌ بلون الأساسيّ. بلا هذا يكون
   الدليلُ الوحيدُ على التحديد علامةً بـ1rem في طرف صفٍّ عرضُه 92rem. */
.cat-table tbody tr:has(.row-select:checked) { background: var(--brand-soft); }

/* ===========================================================================
   الشريط الجانبي كحليٌّ بكتابةٍ بيضاء — هو الافتراضي الآن
   ---------------------------------------------------------------------------
   «خلّي السايدبار لونه كحلي والكتابة أبيض».

   وهذا **يبدّل الافتراضيّ** لا يضيف خياراً: `:root` كان يعطي شريطاً أبيضَ
   (#ffffff/#172033)، فتُكتب هنا قيمُه كحليّةً بتخصيصٍ مساوٍ وترتيبٍ لاحق.

   والكحليُّ #10294f لا الفحميُّ #131926 الموجودُ في خيار «داكن»: الأولُ لونٌ
   يُرى، والثاني رماديٌّ شبهُ أسود. وهما خياران مختلفان ويبقيان كذلك.

   والقيمُ الستّ تُكتب **كلُّها** معاً — لا `--side` وحدَها: خلفيّةٌ كحليّةٌ
   مع `--side-accent` الذي هو `--a700` الغامق تجعل القسمَ الحالي — وهو السطرُ
   الوحيد الذي يقول «أنت هنا» — أقلَّ سطرٍ يُقرأ في القائمة. وهذا عطلٌ وقع
   هنا من قبلُ وكُتب في تعليق `--side-accent` أعلاه.

   وخيارُ «فاتح» في درج المظهر يبقى يعمل: كان معرَّفاً للمظهر الداكن وحده —
   لأن الفاتحَ كان يرثه من `:root` — والآن صار له صفٌّ مستقلّ.

   ثم أُغمِق مرّةً ثانيةً بأمر المالك: #10294f ← #0b1e3d. والتباينات عليه:
   الأبيض 16.57، والخافت #a8bcdb 8.59، واللون الأساسي #7fd0ff 9.76 — وكانت
   14.46 و7.49 و8.52 على الأوّل.
   ======================================================================== */

:root {
  --side: #0b1e3d;
  --side-ink: #ffffff;
  --side-dim: #a8bcdb;
  --side-line: #1c3054;
  --side-hover: rgb(255 255 255 / .09);
  --side-accent: #7fd0ff;
}

/* «فاتح» في درج المظهر: صفٌّ مستقلٌّ بعد أن صار الافتراضيُّ كحليّاً. */
:root[data-sidebar="light"] {
  --side: #ffffff;
  --side-ink: #172033;
  --side-dim: #5a6b85;
  --side-line: #e2e8f1;
  --side-hover: var(--a050);
  --side-accent: var(--a700);
}

/* المتدرّجُ يتبع الكحليَّ لا الفحميّ. */
:root[data-sidebar="gradient"] .sidebar {
  background: linear-gradient(170deg, #12305e 0%, #081831 62%);
}

.nav a, .nav__soon, .nav-out button { font-weight: 700; }
.nav a.active { font-weight: 800; }
.nav-sec { font-weight: 800; }

/* أسماءُ الأقسام أعرض: 0.89rem → 0.96rem، وعناوينُ المجموعات 0.68 → 0.74،
   والرمزُ معها 1.15 → 1.25rem لئلا يصغر بجوار نصٍّ كبر. وعرضُ الشريط يزيد
   1rem: النصُّ الأكبر في عرضٍ ثابتٍ يقصّ «تقرير مزايدات مستخدم» — وهو أطولُ
   سطرٍ في القائمة. */
.nav a, .nav__soon, .nav-out button { font-size: .96rem; letter-spacing: -.005em; }
.nav-sec { font-size: .74rem; letter-spacing: .04em; }
.nav__icon { inline-size: 1.25rem; block-size: 1.25rem; }
:root { --sidebar-w: 20rem; }

/* عناوينُ المجموعات أعرض: 0.74 → 0.84rem، والتباعدُ بين الحروف ينزل إلى
   0.02em — التباعدُ الواسع يُصغّر الحرفَ بصريّاً وإن كبر قياسُه، وهو مكتوبٌ
   لعناوينَ لاتينيّةٍ صغيرة لا لعربيّةٍ متّصلة. وهامشٌ أعلى أوسعُ معه: عنوانٌ
   كبر ولم يبتعد عمّا قبله يُقرأ تذييلاً للقسم السابق لا رأساً للتالي. */
.nav-sec { font-size: .84rem; letter-spacing: .02em; margin-block-start: 1.35rem; }

/* ===========================================================================
   الشريط الكحليّ — صقلٌ بعد تبديل اللون
   ---------------------------------------------------------------------------
   «خلّي شكله احترافي أكتر». والقيمُ التي كانت تُرسم على أبيضَ صارت تُرسم على
   كحليٍّ غامق، وثلاثةٌ منها لم تعد تعمل هناك:

   ١) **شريطُ التمرير** رماديُّ النظام: شقٌّ فاتحٌ بعرض الشريط كلِّه على أرضيّةٍ
      كحليّة. صار من ألوان الشريط نفسه.

   ٢) **القسمُ الحالي** خلفيّتُه `--side-hover` وهي بياضٌ بشفافيّة 9% — ونفسُها
      خلفيّةُ التحويم. فالسطرُ الذي أنت فيه والسطرُ الذي تحت الفأرة سواء.
      صارت أغمقَ وأزرقَ منها، ومعها حدٌّ رفيعٌ يحيطها.

   ٣) **الهويّةُ** كانت تعوم فوق القائمة بلا ما يفصلها. وخطٌّ تحتها هو أرخصُ
      ما يفصل.

   ولا تُعاد هيئةُ 7398bc0 المرفوضة: لا هويّةٌ لاصقة، ولا خطوطٌ مع عناوين
   الأقسام، ولا خروجٌ يُدفع إلى القاع، ولا إزاحةٌ عند التحويم.
   ======================================================================== */

/* شريطُ التمرير: من لون الشريط لا من لون النظام. */
.sidebar { scrollbar-color: #2b4472 transparent; }
.sidebar::-webkit-scrollbar { inline-size: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #2b4472; border-radius: 99px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* خطٌّ يفصل الهويّة عن القائمة. */
.brand { border-block-end: 1px solid var(--side-line); border-radius: 0; padding-block-end: .85rem; margin-bottom: .9rem; }

/* التحويمُ يخفّ، والحاليُّ يثقل — فيفترقان. */
.nav a:hover { background: rgb(255 255 255 / .06); }
.nav a.active {
  background: rgb(127 208 255 / .13);
  box-shadow: inset 0 0 0 1px rgb(127 208 255 / .22);
}

/* الرموزُ أوضحُ على الكحليّ: 0.62 كانت مكتوبةً لخطٍّ داكنٍ على أبيض. */
.nav__icon { opacity: .72; }
.nav a.active .nav__icon { opacity: 1; }