/* ============================================================================
   SmartOps — نظام التصميم "Triage"
   ---------------------------------------------------------------------------
   القاعدة الحاكمة الوحيدة:

       اللون محجوز لدرجة الخطورة السريرية. واجهة النظام نفسها محايدة.

   كل بكسل مُشبَع على الشاشة يحمل معنى بروتوكوليًا (كود أحمر، أزرق، أصفر،
   أسود، حالة، أولوية). لا يُستخدم أي لون كزينة. لهذا السبب نُقل لون الهوية
   من الأزرق إلى التيل: الأزرق محجوز لـ«كود أزرق» (توقف القلب) ولا يجوز أن
   ترتديه أزرار الواجهة.

   هذا الملف مستقل تمامًا عن Tailwind: لو تعذّر تحميل الـ CDN داخل شبكة
   المستشفى المغلقة تبقى الواجهة مصمَّمة بالكامل.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. الرموز التصميمية (Design Tokens)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── المقاسات ─────────────────────────────────────────────────────────── */
  /* نظام حواف واحد موثّق: عناصر التحكم والبطاقات 10px، الحاويات 14px،
     الشارات دائرية بالكامل. لا استثناءات. */
  --r-ctl: 10px;
  --r-box: 14px;
  --r-pill: 9999px;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;

  /* كثافة بصرية 7 (لوحة تشغيل): ارتفاعات ضيقة ومضبوطة */
  --h-ctl: 2.5rem;
  --h-bar: 3.5rem;
  --w-rail: 16rem;

  --fs-micro: 0.6875rem;
  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  0.875rem;
  --fs-md:    1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.375rem;
  --fs-num:   1.75rem;

  --font: 'Cairo', 'Segoe UI', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);
  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  color-scheme: light;

  /* ── المحايد: النهار ──────────────────────────────────────────────────── */
  --bg:          #f2f5f7;
  --bg-sunken:   #e7ecef;
  --surface:     #ffffff;
  --surface-2:   #f2f5f7;
  --surface-3:   #e7ecef;
  --line:        #dbe2e8;
  --line-strong: #c2ccd6;

  --text:   #0e141a;   /* 16.9:1 على السطح */
  --text-2: #4a5560;   /*  8.2:1 على السطح */
  --text-3: #5a6774;   /*  6.4:1 على السطح — رُفع بعد قياس أظهر 4.07 فوق أسطح فاتحة */

  /* ── لون التفاعل (تيل) ────────────────────────────────────────────────── */
  /* #0f766e مع نص أبيض = 5.48:1 ويجتاز AA في الوضعين معًا */
  --accent:       #0f766e;
  --accent-hover: #0b5f58;
  --accent-fg:    #ffffff;
  --accent-text:  #0f766e;
  --accent-bg:    #e4f2f0;
  --accent-line:  #9ad2cb;
  --accent-ring:  #14b8a6;

  /* ── ألوان البروتوكول ─────────────────────────────────────────────────── */
  /* كود أحمر — حريق */
  --red:      #dc2626; --red-fg:  #ffffff;
  --red-bg:   #fdecea; --red-line:#f4b3ae; --red-text:#b0201c;
  /* كود أزرق — توقف القلب */
  --blue:     #2563eb; --blue-fg: #ffffff;
  --blue-bg:  #e8eefd; --blue-line:#b3c7f7; --blue-text:#1d4ed8;
  /* كود أصفر — إصابات جماعية (يتطلب نصًا داكنًا دائمًا) */
  --yellow:   #eab308; --yellow-fg:#0e141a;
  --yellow-bg:#fdf5d9; --yellow-line:#edd48a; --yellow-text:#825907;
  /* كود أسود — تهديد أمني (يُميَّز بالمعالجة لا بالتشبّع) */
  --black:    #27272a; --black-fg:#ffffff;
  --black-bg: #e9eaec; --black-line:#b6b9be; --black-text:#27272a;
  --hazard-ink: rgb(39 39 42 / 0.16);
  /* محلول / سليم */
  --green:    #15803d; --green-fg:#ffffff;
  --green-bg: #e6f4ea; --green-line:#a8d5b8; --green-text:#146c35;
  /* قيد التنفيذ / تحذير */
  --amber:    #b45309; --amber-fg:#ffffff;
  --amber-bg: #fdf1e0; --amber-line:#f0c894; --amber-text:#9a4a08;

  --shadow-1: 0 1px 2px rgb(14 20 26 / 0.06), 0 1px 3px rgb(14 20 26 / 0.08);
  --shadow-2: 0 8px 24px -6px rgb(14 20 26 / 0.16), 0 2px 6px rgb(14 20 26 / 0.08);
  --scrim:    rgb(14 20 26 / 0.45);
}

/* ── المحايد: الليل ───────────────────────────────────────────────────────
   ليست الوضع الافتراضي فحسب: شاشات المراقبة تعمل في ممرات مُعتمة ليلاً،
   بينما مكاتب الوردية النهارية تحتاج الوضع الفاتح. الاثنان إلزاميان. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:          #0b0f13;
  --bg-sunken:   #070a0d;
  --surface:     #141a20;
  --surface-2:   #1b232b;
  --surface-3:   #232d37;
  --line:        #28323c;
  --line-strong: #3a4753;

  --text:   #eef2f6;
  --text-2: #a8b4c0;   /* 8.5:1 على السطح */
  --text-3: #7d8b99;   /* 5.2:1 على السطح — أُصلح من slate-500/600 الساقط */

  --accent-text: #5eead4;
  --accent-bg:   #10312e;
  --accent-line: #1d5f58;

  --red-bg:   #2a1214; --red-line:#5d1f21; --red-text:#fca5a5;
  --blue-bg:  #101c33; --blue-line:#1e3a72; --blue-text:#93b4fd;
  --yellow-bg:#2b2209; --yellow-line:#5f4c11; --yellow-text:#f5d372;
  --black-bg: #1e2024; --black-line:#40444b; --black-text:#e4e4e7;
  --hazard-ink: rgb(228 228 231 / 0.16);
  --green-bg: #0f2418; --green-line:#1d4a2c; --green-text:#86e0a8;
  --amber-bg: #2b1d0a; --amber-line:#5e4014; --amber-text:#f4c07a;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.4);
  --scrim:    rgb(3 6 9 / 0.72);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. الأساس
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* لا تُضبط font-size على html إطلاقًا: ضبطها بوحدة rem يُعيد تعريف الوحدة
   نفسها، فينكمش كل رمز مقاس في النظام بما فيه أهداف اللمس. الجذر يبقى
   على 16px والنص الأساسي يُضبط على body وحده. */
html {
  margin: 0;
  background: var(--bg);
}
/* أُزيلت text-size-adjust بصيغتيها. فَيَرفُكس يرفض غير المسبوقة كخاصية
   مجهولة، ويرفض قيمة المسبوقة النسبية، فيطبع تحذيرين عند كل تحميل صفحة.
   وسم viewport يكفي لمنع تضخيم النص على الجوال، فلا حاجة إليها أصلًا. */

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* أرقام جدولية: أعداد اللوحة تتغيّر مع كل استطلاع، وبدون هذا تهتزّ الأعمدة */
.so-num, .so-stat__value, .so-table td, .so-badge, time, [x-text*='count'] {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

[x-cloak] { display: none !important; }

.so-mono { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: -0.01em; }

/* ── إتاحة: حلقة تركيز واحدة على كل شيء تفاعلي ───────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-ctl);
}

.so-skip {
  position: absolute; inset-inline-start: var(--sp-4); top: -100%;
  z-index: 100; padding: var(--sp-2) var(--sp-4);
  background: var(--accent); color: var(--accent-fg);
  border-radius: var(--r-ctl); font-weight: 700;
}
.so-skip:focus { top: var(--sp-4); }

.so-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── شريط التمرير ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-pill);
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. التخطيط: الهيكل
   ═══════════════════════════════════════════════════════════════════════════ */

.so-shell { display: flex; height: 100dvh; overflow: hidden; background: var(--bg); }

.so-rail {
  width: var(--w-rail); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  z-index: 30;
}
[dir='ltr'] .so-rail { border-inline-start: 0; border-inline-end: 1px solid var(--line); }

.so-rail__head {
  height: var(--h-bar); display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: var(--sp-4); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.so-rail__mark {
  width: 2rem; height: 2rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-ctl);
  background: var(--accent); color: var(--accent-fg);
}
.so-rail__mark svg { width: 1.125rem; height: 1.125rem; }
.so-rail__name { font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.01em; }
.so-rail__sub  { font-size: var(--fs-micro); color: var(--text-3); line-height: 1.2; }

.so-rail__nav { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.so-rail__foot { border-top: 1px solid var(--line); padding: var(--sp-2); flex-shrink: 0; }

.so-navitem {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-3); height: var(--h-ctl);
  border: 0; border-radius: var(--r-ctl); background: transparent;
  color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-align: start; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.so-navitem:hover { background: var(--surface-2); color: var(--text); }
.so-navitem svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; opacity: 0.75; }
.so-navitem__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.so-navitem--on {
  background: var(--accent-bg); color: var(--accent-text);
  box-shadow: inset 3px 0 0 var(--accent);
}
[dir='ltr'] .so-navitem--on { box-shadow: inset -3px 0 0 var(--accent); }
.so-navitem--on svg { opacity: 1; }

.so-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.so-topbar {
  height: var(--h-bar); flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: var(--sp-5);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.so-topbar__title { flex: 1; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }

.so-page { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.so-page__stack > * + * { margin-top: var(--sp-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. الأسطح
   ═══════════════════════════════════════════════════════════════════════════ */

.so-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box);
}
.so-card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
}
.so-card__title { flex: 1; font-size: var(--fs-base); font-weight: 700; }
.so-card__body { padding: var(--sp-4); }
.so-card__body--flush { padding: 0; }

.so-section { padding: var(--sp-5); }
.so-section__title { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-4); }
.so-hint {
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.7;
  max-width: 68ch;
}

/* لوحة إرشادية (تُستخدم لشرح الشاشات المعقّدة) */
.so-note {
  border: 1px solid var(--accent-line); background: var(--accent-bg);
  border-radius: var(--r-box); padding: var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.75; color: var(--text);
}
.so-note strong { color: var(--accent-text); }

.so-pre {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: var(--sp-3);
  overflow-x: auto; white-space: pre; color: var(--text-2);
  direction: ltr; text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. بطاقات المؤشرات
   ═══════════════════════════════════════════════════════════════════════════ */

/* عند الكثافة العالية لا نُغلّف الأرقام بصناديق ملوّنة؛ شريط علوي رفيع
   يحمل دلالة الخطورة ويترك الرقم يتنفّس. */
.so-stat {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: var(--sp-4);
}
.so-stat::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: var(--line-strong);
}
.so-stat__label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  display: block; margin-bottom: var(--sp-2);
}
.so-stat__value {
  font-size: var(--fs-num); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--text);
}
.so-stat__foot { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }

.so-stat--red::before    { background: var(--red); }
.so-stat--blue::before   { background: var(--blue); }
.so-stat--amber::before  { background: var(--amber); }
.so-stat--green::before  { background: var(--green); }
.so-stat--accent::before { background: var(--accent); }

.so-stat--red    .so-stat__value { color: var(--red-text); }
.so-stat--amber  .so-stat__value { color: var(--amber-text); }
.so-stat--green  .so-stat__value { color: var(--green-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. الأزرار
   ═══════════════════════════════════════════════════════════════════════════ */

.so-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-ctl); padding-inline: var(--sp-4);
  border-radius: var(--r-ctl); border: 1px solid transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.so-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.so-btn:active:not(:disabled) { transform: translateY(1px); }
.so-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* كل تركيبة أدناه تتجاوز 4.5:1 بين النص والخلفية */
.so-btn--primary { background: var(--accent); color: var(--accent-fg); }
.so-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.so-btn--ghost {
  background: var(--surface); color: var(--text); border-color: var(--line-strong);
}
.so-btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

.so-btn--quiet { background: transparent; color: var(--text-2); }
.so-btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.so-btn--danger  { background: var(--red);   color: var(--red-fg); }
.so-btn--danger:hover:not(:disabled)  { background: #b91c1c; }
.so-btn--confirm { background: var(--green); color: var(--green-fg); }
.so-btn--confirm:hover:not(:disabled) { background: #116631; }
.so-btn--warn    { background: var(--amber); color: var(--amber-fg); }
.so-btn--warn:hover:not(:disabled)    { background: #97450a; }

.so-btn--lg  { height: 3rem; font-size: var(--fs-md); padding-inline: var(--sp-5); }
.so-btn--sm  { height: 2rem; font-size: var(--fs-xs); padding-inline: var(--sp-3); }
.so-btn--block { width: 100%; }

/* زر أيقونة داخل الجداول */
.so-iconbtn {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--r-ctl);
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.so-iconbtn svg { width: 1rem; height: 1rem; }
.so-iconbtn:hover { background: var(--surface-3); color: var(--text); }
.so-iconbtn--danger:hover { background: var(--red-bg); color: var(--red-text); }
.so-iconbtn--confirm:hover { background: var(--green-bg); color: var(--green-text); }

.so-spin { animation: so-spin 0.7s linear infinite; }
@keyframes so-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   7. النماذج
   ═══════════════════════════════════════════════════════════════════════════ */

.so-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.so-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.so-label__req { color: var(--red-text); }
.so-help  { font-size: var(--fs-xs); color: var(--text-3); }
.so-error { font-size: var(--fs-xs); color: var(--red-text); font-weight: 600; }

.so-input, .so-select, .so-textarea {
  width: 100%; min-height: var(--h-ctl);
  padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-sm);
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  transition: border-color var(--dur) var(--ease);
}
.so-textarea { min-height: 5rem; resize: vertical; line-height: 1.7; }

/* التباين مُتحقَّق منه: النص النائب 4.6:1 على السطح في الوضعين */
.so-input::placeholder, .so-textarea::placeholder { color: var(--text-3); opacity: 1; }
.so-input:hover, .so-select:hover, .so-textarea:hover { border-color: var(--text-3); }
.so-input:disabled, .so-select:disabled, .so-textarea:disabled {
  background: var(--surface-3); color: var(--text-3); cursor: not-allowed;
}

.so-select {
  appearance: none; padding-inline-end: var(--sp-6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23667381' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1.125rem;
  background-position: left var(--sp-3) center;
}
[dir='ltr'] .so-select { background-position: right var(--sp-3) center; }
:root[data-theme='dark'] .so-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237d8b99' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.so-select option { background: var(--surface); color: var(--text); }

.so-check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-ctl); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.so-check:hover { background: var(--surface-2); }
.so-check input[type='checkbox'] {
  width: 1.125rem; height: 1.125rem; margin: 0.2rem 0 0; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.so-check__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }

.so-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 640px) { .so-fieldgrid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   8. الشارات — لغة الخطورة
   ═══════════════════════════════════════════════════════════════════════════ */

.so-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0.15rem 0.6rem; border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.6;
  white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--text-2);
}
.so-badge--red    { background: var(--red-bg);    border-color: var(--red-line);    color: var(--red-text); }
.so-badge--blue   { background: var(--blue-bg);   border-color: var(--blue-line);   color: var(--blue-text); }
.so-badge--yellow { background: var(--yellow-bg); border-color: var(--yellow-line); color: var(--yellow-text); }
.so-badge--black  { background: var(--black-bg);  border-color: var(--black-line);  color: var(--black-text); }
.so-badge--green  { background: var(--green-bg);  border-color: var(--green-line);  color: var(--green-text); }
.so-badge--amber  { background: var(--amber-bg);  border-color: var(--amber-line);  color: var(--amber-text); }
.so-badge--accent { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-text); }

/* الأولوية: تدرّج شدّة على محور واحد بدل أربعة ألوان مختلفة.
   الامتلاء يعني الرتبة — يُقرأ فورًا حتى مع عمى الألوان. */
.so-badge--prio-critical { background: var(--red); border-color: var(--red); color: var(--red-fg); }
.so-badge--prio-high     { background: var(--red-bg); border-color: var(--red); color: var(--red-text); }
.so-badge--prio-medium   { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-text); }
.so-badge--prio-low      { background: transparent; border-color: var(--line-strong); color: var(--text-3); }

/* «كود أسود» لا يمكن تمييزه بالتشبّع على خلفية داكنة، فيُميَّز بمعالجة
   شريطية تحذيرية. هذه إشارة مستقلة عن اللون تمامًا، فيقرأها من لا يميّز
   الألوان كما يقرأها غيره. */
.so-hazard {
  background-image: repeating-linear-gradient(
    135deg, transparent 0 5px, var(--hazard-ink) 5px 10px
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. الجداول
   ═══════════════════════════════════════════════════════════════════════════ */

.so-tablewrap { overflow-x: auto; }
.so-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.so-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--sp-3) var(--sp-4);
  text-align: start; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-2); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.so-table tbody td { padding: var(--sp-3) var(--sp-4); vertical-align: middle; }
.so-table tbody tr { border-bottom: 1px solid var(--line); }
.so-table tbody tr:last-child { border-bottom: 0; }
.so-table tbody tr:hover { background: var(--surface-2); }
.so-table tbody tr.is-clickable { cursor: pointer; }

.so-table__primary { font-weight: 600; color: var(--text); }
.so-table__meta    { font-size: var(--fs-xs); color: var(--text-3); }
.so-table__actions { display: flex; align-items: center; gap: var(--sp-1); }

.so-pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--text-2);
  border-top: 1px solid var(--line);
}
.so-pager__nav { display: flex; align-items: center; gap: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. القوائم والحالات
   ═══════════════════════════════════════════════════════════════════════════ */

.so-list { display: flex; flex-direction: column; }
.so-list > * + * { border-top: 1px solid var(--line); }

.so-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  transition: background var(--dur) var(--ease);
}
.so-row.is-clickable { cursor: pointer; }
.so-row.is-clickable:hover { background: var(--surface-2); }
.so-row__main  { flex: 1; min-width: 0; }
.so-row__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-row__meta  { font-size: var(--fs-xs); color: var(--text-3); }

/* حالة فارغة مُركَّبة تُخبر بما ينبغي فعله، لا مجرد «لا توجد بيانات» */
.so-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-4); text-align: center;
}
.so-empty svg { width: 2rem; height: 2rem; color: var(--text-3); opacity: 0.6; }
.so-empty__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.so-empty__hint  { font-size: var(--fs-xs); color: var(--text-3); max-width: 40ch; }
.so-empty--ok svg { color: var(--green-text); opacity: 1; }

/* هيكل تحميل يطابق شكل المحتوى النهائي */
.so-skeleton {
  background: var(--surface-3); border-radius: var(--r-ctl);
  position: relative; overflow: hidden;
}
.so-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(127 143 159 / 0.16), transparent);
  animation: so-shimmer 1.4s infinite;
}
@keyframes so-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.so-skeleton--line { height: 0.75rem; }
.so-skeleton--stat { height: 5.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. النوافذ المنبثقة والتنبيهات
   ═══════════════════════════════════════════════════════════════════════════ */

.so-scrim {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: var(--scrim); backdrop-filter: blur(3px);
}
.so-modal {
  width: 100%; max-width: 34rem; max-height: 90dvh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); box-shadow: var(--shadow-2);
}
.so-modal--wide { max-width: 44rem; }
.so-modal__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.so-modal__title { flex: 1; font-size: var(--fs-md); font-weight: 700; }
.so-modal__body { padding: var(--sp-5); }
.so-modal__body > * + * { margin-top: var(--sp-4); }
.so-modal__foot {
  display: flex; gap: var(--sp-3); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

#toast-container {
  position: fixed; inset-block-end: var(--sp-5); inset-inline-start: var(--sp-5);
  z-index: 90; display: flex; flex-direction: column; gap: var(--sp-2);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 16rem; max-width: 26rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-2);
  border-inline-start: 3px solid var(--line-strong);
  animation: so-rise 200ms var(--ease);
}
.toast-success { border-inline-start-color: var(--green); }
.toast-error   { border-inline-start-color: var(--red); }
.toast-info    { border-inline-start-color: var(--accent); }
@keyframes so-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   12. الحركة — مُبرَّرة فقط
   ═══════════════════════════════════════════════════════════════════════════

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

.so-fade { animation: so-fade 180ms var(--ease); }
@keyframes so-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* النبض يرتدي لون الكود نفسه. حلقة حمراء حول بطاقة «كود أزرق» تناقض
   البروتوكول، ولذلك يُمرَّر اللون عبر متغيّر لكل نوع. */
.so-live { position: relative; --live-ring: var(--red); }
.so-live::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  animation: so-live 1.8s var(--ease) infinite;
}
@keyframes so-live {
  0%   { box-shadow: 0 0 0 0 var(--live-ring);    opacity: 0.5; }
  70%  { box-shadow: 0 0 0 14px var(--live-ring); opacity: 0; }
  100% { box-shadow: 0 0 0 0 var(--live-ring);    opacity: 0; }
}
.so-call--red    { --live-ring: var(--red); }
.so-call--blue   { --live-ring: var(--blue); }
.so-call--yellow { --live-ring: var(--yellow); }
.so-call--black  { --live-ring: var(--black); }

.so-dot {
  width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill);
  flex-shrink: 0; background: var(--text-3);
}
.so-dot--live { background: var(--red); animation: so-blink 1.1s var(--ease) infinite; }
.so-dot--ok   { background: var(--green); }
@keyframes so-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* البديل الثابت: حدّ أحمر سميك يحمل نفس المعنى بلا حركة */
  .so-live { box-shadow: 0 0 0 2px var(--red); }
  .so-dot--live { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. جدار المراقبة — كثافة خاصة بالشاشات الكبيرة
   ═══════════════════════════════════════════════════════════════════════════

   تُقرأ هذه الشاشة من مسافة ستة أمتار في ممر. لا ترث مقاسات المكتب:
   لها سلّم طباعة مستقلّ يتوسّع مع عرض الشاشة عبر clamp().              */

.wall { min-height: 100dvh; background: var(--bg-sunken); padding: clamp(1rem, 2vw, 2rem); }

.wall__bar {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.wall__title { font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.wall__clock {
  font-family: var(--font-mono); font-size: clamp(1.25rem, 2.4vw, 2.25rem);
  font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums;
}

.wall__grid {
  display: grid; gap: clamp(0.75rem, 1.4vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}

/* البطاقة نفسها ترتدي لون الكود: على بُعد ستة أمتار يُقرأ الحقل اللوني
   قبل أن يُقرأ أي نص. */
.wall-call {
  border-radius: var(--r-box); padding: clamp(1rem, 1.8vw, 1.75rem);
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; gap: clamp(0.5rem, 1vw, 0.85rem);
}
.wall-call--red    { background: var(--red);    color: var(--red-fg);    border-color: var(--red);    --live-ring: var(--red); }
.wall-call--blue   { background: var(--blue);   color: var(--blue-fg);   border-color: var(--blue);   --live-ring: var(--blue); }
.wall-call--yellow { background: var(--yellow); color: var(--yellow-fg); border-color: var(--yellow); --live-ring: var(--yellow); }

/* «كود أسود» بطاقة داكنة على خلفية داكنة، فتُميَّز بالشريط التحذيري
   لا بالتشبّع. الشريط هنا أعرض لأنه يُقرأ من ستة أمتار. */
.wall-call--black {
  background: var(--black); color: var(--black-fg); border-color: var(--line-strong);
  --live-ring: var(--line-strong);
  background-image: repeating-linear-gradient(
    135deg, transparent 0 14px, rgb(255 255 255 / 0.07) 14px 28px
  );
}

.wall-call__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }

/* ثنائية اللغة على الجدار: الإنجليزية تتصدّر، والعربية سطر ثانٍ أصغر
   بوضوح كافٍ للقراءة من بعيد. النسبة 0.62 تكفي لتمييز المستويين بلا
   إضعاف السطر الثاني. */
.wall-call__codes { display: flex; flex-direction: column; min-width: 0; }
.wall-call__code {
  font-size: clamp(1.25rem, 2vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1;
}
.wall-call__code-ar {
  font-size: clamp(0.9rem, 1.3vw, 1.25rem); font-weight: 700; line-height: 1.35;
}

.wall-call__state {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
  padding: 0.25rem 0.75rem; border-radius: var(--r-box);
  font-size: clamp(0.75rem, 1vw, 1rem); font-weight: 700; line-height: 1.25;
  background: rgb(255 255 255 / 0.22); border: 1px solid rgb(255 255 255 / 0.35);
}
.wall-call__state-ar { font-size: 0.85em; }

.wall-call__where { display: flex; flex-direction: column; min-width: 0; }
.wall-call__where-en {
  font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.12;
  letter-spacing: -0.02em;
}
.wall-call__where-ar {
  font-size: clamp(1rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.3;
}

.wall-call__detail { display: flex; flex-direction: column; }
.wall-call__detail-en { font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 600; }
.wall-call__detail-ar { font-size: clamp(0.85rem, 1.2vw, 1.15rem); font-weight: 600; }
.wall-call__time {
  font-family: var(--font-mono); font-size: clamp(0.8125rem, 1.1vw, 1.125rem); font-variant-numeric: tabular-nums;
}

.wall__calm {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); min-height: 55dvh; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--r-box);
  color: var(--text-2);
}
.wall__calm svg { width: clamp(3rem, 6vw, 5rem); height: clamp(3rem, 6vw, 5rem); color: var(--green); }
.wall__calm-title { font-size: clamp(1.25rem, 2.6vw, 2.25rem); font-weight: 800; color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   14. الكشك — واجهة لمس داخل القسم
   ═══════════════════════════════════════════════════════════════════════════

   كل هدف لمس ≥ 64px. المستخدم قد يكون مرتديًا قفازات وفي عجلة.          */

.kiosk { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }

.kiosk__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) clamp(1rem, 3vw, 2rem);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.kiosk__dept { font-size: clamp(1.25rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.kiosk__dept-ar {
  margin: 0; font-size: clamp(1rem, 1.9vw, 1.5rem); font-weight: 700;
  color: var(--text-2); line-height: 1.3;
}
.kiosk__label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.kiosk__clock {
  font-family: var(--font-mono); font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums;
}

.kiosk__body {
  flex: 1; display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1rem, 3vw, 2rem); max-width: 78rem; width: 100%; margin-inline: auto;
}

.kiosk__room {
  /* min-height لا height: العنصر داخل حاوية flex عمودية وكان ينكمش
     تحت هدف اللمس الآمن عند ضيق ارتفاع الشاشة. */
  width: 100%; min-height: 4.5rem; flex-shrink: 0; text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
  letter-spacing: 0.15em; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: var(--r-box);
}
.kiosk__room::placeholder { color: var(--text-3); letter-spacing: normal; font-weight: 600; }

/* ثلاثة أعمدة تعطي صفَّي ٣ + ٢ للأكواد الخمسة، بلا زرّ يتيم في صف وحده،
   وبأهداف لمس أكبر. الانهيار مصرَّح به لكل مقاس. */
.kiosk__codes {
  display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1; align-content: center;
}
@media (max-width: 900px) { .kiosk__codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kiosk__codes { grid-template-columns: 1fr; } }

.kiosk-code {
  min-height: 9rem; padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 2px solid transparent; border-radius: var(--r-box);
  font: inherit; font-weight: 800; cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.kiosk-code:active:not(:disabled) { transform: scale(0.975); }
.kiosk-code:hover:not(:disabled)  { filter: brightness(1.06); }
.kiosk-code:disabled { opacity: 0.55; cursor: not-allowed; }
.kiosk-code svg { width: 2.25rem; height: 2.25rem; }

/* المربع ثنائي اللغة: الإنجليزية تتصدّر، والعربية سطر ثانٍ أصغر */
.kiosk-code__name { font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; }
.kiosk-code__name-ar { font-size: clamp(1rem, 1.7vw, 1.375rem); font-weight: 800; opacity: 0.88; line-height: 1.3; }
.kiosk-code__what {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  flex-wrap: wrap; margin-top: 0.15rem;
  font-size: clamp(0.75rem, 1.05vw, 0.9375rem); font-weight: 600; opacity: 0.85;
}
.kiosk-code__what--stack { flex-direction: column; gap: 0.1rem; }
.kiosk-code__sep { opacity: 0.55; }

.kiosk-code--red    { background: var(--red);    color: var(--red-fg); }
.kiosk-code--blue   { background: var(--blue);   color: var(--blue-fg); }
.kiosk-code--yellow { background: var(--yellow); color: var(--yellow-fg); }
.kiosk-code--black  { background: var(--black);  color: var(--black-fg); }
.kiosk-code--plain  { background: var(--surface); color: var(--text); border-color: var(--line-strong); }

.kiosk__roomlabel { font-size: var(--fs-md); text-align: center; }
.kiosk__report { margin-top: auto; }

/* أهداف لمس كبيرة داخل نموذج البلاغ */
.so-input--touch { min-height: 3.25rem; font-size: var(--fs-md); }

/* شاشة التأكيد: تُقرأ من بعيد وتنغلق تلقائيًا بعد ست ثوانٍ */
.kiosk-done {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-6); text-align: center; background: var(--bg);
}
.kiosk-done__mark {
  display: grid; place-items: center;
  width: clamp(5rem, 12vw, 8rem); height: clamp(5rem, 12vw, 8rem);
  border-radius: var(--r-pill); margin-bottom: var(--sp-3);
  background: var(--green); color: #fff;
}
.kiosk-done__mark svg { width: 55%; height: 55%; }
.kiosk-done__mark--ok { background: var(--green); color: #fff; }
.kiosk-done__title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }
.kiosk-done__what  { margin: 0; font-size: clamp(1.125rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--text-2); }
.kiosk-done__sub   { margin: 0 0 var(--sp-4); font-size: var(--fs-md); color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. شاشة الدخول
   ═══════════════════════════════════════════════════════════════════════════ */

.so-auth {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--sp-4); background: var(--bg);
}
.so-auth__card {
  width: 100%; max-width: 25rem; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); box-shadow: var(--shadow-2);
}

/* طيف الأكواد: العلامة المميّزة للنظام. ليست زينة — هذه هي الأكواد
   الأربعة التي بُني SmartOps لإدارتها. */
.so-spectrum { display: flex; height: 4px; }
.so-spectrum span { flex: 1; }

.so-auth__body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.so-auth__brand {
  display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.so-auth__name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.so-auth__tag  { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
.so-auth__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.so-auth__theme { margin: var(--sp-5) auto 0; display: flex; }
.so-auth__foot {
  display: flex; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* زر اللغة: عرض ثابت حتى لا يقفز الشريط العلوي عند التبديل بين EN و ع */
.so-langbtn { min-width: 2.75rem; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════════
   16. عناصر الهيكل المتفرّقة
   ═══════════════════════════════════════════════════════════════════════════ */

.so-alert {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--red-line); border-radius: var(--r-ctl);
  background: var(--red-bg); color: var(--red-text);
  font: inherit; font-size: var(--fs-xs); font-weight: 700;
  cursor: pointer; text-align: start;
}

.so-who { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); }
.so-who__avatar {
  width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--accent-bg);
  color: var(--accent-text); font-size: var(--fs-sm); font-weight: 800;
}
.so-who__text { flex: 1; min-width: 0; }
.so-who__name {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-who__role { font-size: var(--fs-micro); color: var(--text-3); }

.so-live-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-3); font-weight: 600;
}

.so-btn--ghost.is-on {
  background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-line);
}

.so-bell { position: relative; }
.so-bell__count {
  position: absolute; inset-block-start: -2px; inset-inline-start: -2px;
  min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--red); color: var(--red-fg);
  font-size: 0.625rem; font-weight: 800; line-height: 1;
}

.so-scrollbox { max-height: 19rem; overflow-y: auto; }

/* التوزيع: أشرطة بلا مسار خلفي مملوء — النسبة تُقرأ من الطول والرقم معًا */
.so-dist { display: flex; flex-direction: column; gap: var(--sp-3); }
.so-dist__row { display: flex; align-items: center; gap: var(--sp-3); }
.so-dist__name {
  width: 7rem; flex-shrink: 0; font-size: var(--fs-xs); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-dist__track { flex: 1; display: block; min-width: 0; }
.so-dist__bar {
  display: block; height: 6px; border-radius: var(--r-pill);
  background: var(--line-strong); transition: width var(--dur) var(--ease);
}
.so-dist__bar--red    { background: var(--red); }
.so-dist__bar--blue   { background: var(--blue); }
.so-dist__bar--yellow { background: var(--yellow); }
.so-dist__bar--black  { background: var(--black-line); }
.so-dist__bar--accent { background: var(--accent); }
.so-dist__num {
  width: 2.5rem; flex-shrink: 0; text-align: end;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text);
}

/* ── إضافات جدار المراقبة ─────────────────────────────────────────────────── */

/* تنبيه حجب الصوت: شريط لا يحجب.
   الطبقة التي كانت تغطي الشاشة أُزيلت عمدًا، لأن إخفاء جدار النداءات
   خلف رسالة عن الصوت خطر تشغيلي أكبر من الصوت الصامت نفسه. */
.wall__blocked {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  border: 1px solid var(--amber-line); border-radius: var(--r-ctl);
  background: var(--amber-bg); color: var(--amber-text);
}
.wall__blocked svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.wall__blocked-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wall__blocked-text strong { font-size: var(--fs-base); font-weight: 700; }
.wall__blocked-text span { font-size: var(--fs-xs); opacity: 0.9; }

.wall__bar-gap { flex: 1; }
.wall__sound {
  font-size: var(--fs-sm); font-weight: 700;
  padding: 0.15rem 0.65rem; border-radius: var(--r-pill); border: 1px solid transparent;
}
.wall__sound.is-on  { background: var(--green-bg); border-color: var(--green-line); color: var(--green-text); }
.wall__sound.is-off { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-text); }

.wall__last {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl);
}
.wall__last-label { font-size: var(--fs-xs); color: var(--text-3); flex-shrink: 0; }
.wall__last-text {
  font-size: var(--fs-sm); color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 768px) {
  .wall__bar { flex-wrap: wrap; }
  .wall__bar-gap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. مكوّنات الصفحات
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── بطاقة نداء طوارئ: حافة ملوّنة بدل تعبئة كاملة، فالقائمة تبقى قابلة للمسح ── */
.so-call {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: var(--sp-4);
  border-inline-start: 4px solid var(--line-strong);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.so-call--red    { border-inline-start-color: var(--red); }
.so-call--blue   { border-inline-start-color: var(--blue); }
.so-call--yellow { border-inline-start-color: var(--yellow); }
.so-call--black  { border-inline-start-color: var(--black); }

.so-call__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.so-call__title { font-size: var(--fs-md); font-weight: 700; }
.so-call__time { margin: 0; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.so-call__acts { display: flex; gap: var(--sp-2); margin-top: auto; }

/* قائمة حقائق: مصطلح فوق قيمة، تقرأ أسرع من «الاسم: القيمة» في سطر واحد */
.so-call__facts, .so-facts { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; }
.so-call__facts--wrap { gap: var(--sp-3) var(--sp-4); }
.so-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.so-call__facts dt, .so-facts dt {
  font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; margin-bottom: 0.15rem;
}
.so-call__facts dd, .so-facts dd {
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
@media (max-width: 640px) { .so-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.so-card--hover { transition: border-color var(--dur) var(--ease); }
.so-card--hover:hover { border-color: var(--accent-line); }

/* ── الإشعارات ────────────────────────────────────────────────────────────── */
.so-row.is-unread { background: var(--accent-bg); }
.so-row.is-unread:hover { background: var(--accent-bg); }
.so-dot--unread { background: var(--accent); }
.so-notif__body {
  margin: 0.15rem 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
}

/* ── النماذج الطويلة ──────────────────────────────────────────────────────── */
.so-form { max-width: 52rem; display: flex; flex-direction: column; gap: var(--sp-4); }
.so-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.so-formbar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}
.so-field--narrow { max-width: 12rem; }
.so-hint--warn { color: var(--amber-text); }

.so-step {
  border-inline-start: 2px solid var(--line); padding-inline-start: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.so-step__title { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

.so-picklist {
  max-height: 12rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-1);
}

.so-callout {
  border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.7;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.so-callout--red   { background: var(--red-bg);   border-color: var(--red-line);   color: var(--red-text); }
.so-callout--green { background: var(--green-bg); border-color: var(--green-line); color: var(--green-text); }

.so-code {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: 0.25em; direction: ltr; text-align: center;
}
.so-code-input {
  text-align: center; letter-spacing: 0.4em;
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700;
}

.so-quote {
  margin: 0; padding: var(--sp-3); border-radius: var(--r-ctl);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.8; color: var(--text-2); white-space: pre-line;
}

/* ── الخط الزمني ──────────────────────────────────────────────────────────── */
.so-timeline { list-style: none; margin: 0; padding: 0 var(--sp-4) 0 0; }
[dir='ltr'] .so-timeline { padding: 0 0 0 var(--sp-4); }
.so-timeline__item {
  position: relative; padding-bottom: var(--sp-4);
  border-inline-start: 2px solid var(--line); padding-inline-start: var(--sp-4);
}
.so-timeline__item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.so-timeline__item::before {
  content: ''; position: absolute; inset-block-start: 0.35rem; inset-inline-start: -5px;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent); border: 2px solid var(--surface);
}
.so-timeline__head { display: flex; justify-content: space-between; gap: var(--sp-2); }
.so-timeline__who  { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.so-timeline__when { font-size: var(--fs-micro); color: var(--text-3); font-variant-numeric: tabular-nums; }
.so-timeline__body { margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--text-2);
                     line-height: 1.7; white-space: pre-line; }

.so-actionblock {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.so-actionblock__title { font-size: var(--fs-sm); font-weight: 700; }

/* ── صف إعداد شاشة القسم ─────────────────────────────────────────────────── */
.so-kiosk-row {
  display: grid; gap: var(--sp-3); padding: var(--sp-4); align-items: end;
  grid-template-columns: 1.2fr 1fr 1fr auto auto;
}
.so-kiosk-row__dept { align-self: center; }
.so-kiosk-row__active { padding-bottom: 0.35rem; }
.so-kiosk-row__acts { display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 1100px) {
  .so-kiosk-row { grid-template-columns: 1fr 1fr; }
  .so-kiosk-row__dept { grid-column: 1 / -1; }
  .so-kiosk-row__acts { grid-column: 1 / -1; }
}

/* ── مساعدات صغيرة ────────────────────────────────────────────────────────── */
.so-select--auto { width: auto; min-width: 9rem; }
/* مكوّنات أضافها تحويل الوسم الحيّ */
.so-card--pad { padding: var(--sp-4); }
.so-card--pad > .so-card__head { margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4); }
.so-input--icon { padding-inline-start: 2.25rem; }
.so-toolbar--end { justify-content: flex-end; }

.so-input--search { width: 12rem; }

.so-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.so-chip {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--r-ctl);
  background: var(--surface-3); color: var(--text-2); font-size: var(--fs-micro);
}
.so-clamp { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-pre--wrap { white-space: pre-wrap; word-break: break-word; max-height: 12rem; overflow-y: auto; }
.so-mt { margin-top: var(--sp-3); }
.so-mt-sm { margin-top: var(--sp-1); }
.so-sep { color: var(--text-3); }
.so-ok   { color: var(--green-text); }
.so-bad  { color: var(--red-text); }
.so-warn { color: var(--amber-text); font-weight: 600; }

.so-card__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* إخفاء الأعمدة الثانوية على الشاشات الضيّقة، مصرَّح به لكل جدول */
@media (max-width: 1024px) { .so-hide-lg { display: none; } }
@media (max-width: 768px)  { .so-hide-md { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   18. الشبكات المساعدة
   ═══════════════════════════════════════════════════════════════════════════ */

.so-grid       { display: grid; gap: var(--sp-4); }
.so-grid--4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.so-grid--3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.so-grid--2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.so-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

.so-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.so-toolbar__gap { flex: 1; }

/* الانهيار على الجوال مُصرَّح به لكل شبكة، بلا افتراضات */
@media (max-width: 1024px) {
  .so-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --w-rail: 100%; }
  .so-shell { flex-direction: column; height: auto; min-height: 100dvh; }
  .so-rail  { width: 100%; border: 0; border-bottom: 1px solid var(--line); }
  .so-rail__nav { display: flex; overflow-x: auto; padding: var(--sp-2); }
  .so-navitem { width: auto; flex-shrink: 0; }
  .so-navitem--on { box-shadow: inset 0 -3px 0 var(--accent); }
  .so-grid--4, .so-grid--3, .so-grid--2 { grid-template-columns: 1fr; }
  .so-page { padding: var(--sp-4); }
  .so-main { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. طبقة توافق مع الوسم القديم
   ═══════════════════════════════════════════════════════════════════════════

   النسخة الحيّة تستعمل تسعة أصناف من ملف التصميم السابق. تُعرَّف هنا برموز
   النظام الجديد حتى لا ينكسر أي جزء لم يُحوَّل بعد إلى مكوّنات .so-*
   أثناء التحويل التدريجي. تُحذف هذه الطبقة متى اكتمل تحويل الوسم.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-fade { animation: so-fade 180ms var(--ease); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0.15rem 0.6rem; border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.6; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--text-2);
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table thead th {
  padding: var(--sp-3) var(--sp-4); text-align: start; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-2); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.data-table tbody td { padding: var(--sp-3) var(--sp-4); vertical-align: middle; }
.data-table tbody tr { border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }

.nav-active {
  background: var(--accent-bg); color: var(--accent-text);
  box-shadow: inset 3px 0 0 var(--accent);
}
[dir='ltr'] .nav-active { box-shadow: inset -3px 0 0 var(--accent); }

.modal-backdrop { background: var(--scrim); backdrop-filter: blur(3px); }

/* النبض والوميض: نفس مبرّر .so-live، ويحترمان تقليل الحركة عبر القسم 12 */
.emergency-pulse { position: relative; --live-ring: var(--red); }
.emergency-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; animation: so-live 1.8s var(--ease) infinite;
}
.status-blink { animation: so-blink 1.1s var(--ease) infinite; }

.code-card { border-radius: var(--r-box); transition: transform var(--dur) var(--ease); }
.code-card:active { transform: scale(0.975); }
.code-sweep { position: relative; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   19. الطباعة: التقارير تُطبع وتُحفظ في الملف الورقي
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .so-rail, .so-topbar, .so-toolbar, #toast-container, .so-pager { display: none !important; }
  .so-shell, .so-main, .so-page { display: block; height: auto; overflow: visible; }
  .so-card { border-color: #999; break-inside: avoid; }
  body { background: #fff; color: #000; }
}


/* ==== MONITOR-WALL ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   21. بطاقات جدار المراقبة (منقولة من الإنتاج كما هي)
   ═══════════════════════════════════════════════════════════════════════════

   هذه الأصناف تُطبَّق من JavaScript عبر monitorCardClass()، لا من الوسم،
   فلم يلتقطها فحص التوافق الأول. تدرّجاتها مضبوطة للقراءة من مسافة بعيدة
   والنص الأبيض عليها يجتاز WCAG AA بحجم العرض، فنُقلت بلا تغيير.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes code-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.code-sweep {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: code-sweep 2s linear infinite;
}

@keyframes code-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.30), 0 18px 45px -12px rgba(0,0,0,.75); }
  50%      { box-shadow: 0 0 0 14px rgba(255,255,255,0),  0 18px 45px -12px rgba(0,0,0,.75); }
}
.code-card { animation: code-breathe 1.8s ease-in-out infinite; }

/* Per-code colour. Deep enough for white text to clear WCAG AA at display size. */
.code-red    { background: linear-gradient(135deg,#7f1d1d,#b91c1c); border-color:#fca5a5; }
.code-blue   { background: linear-gradient(135deg,#0c4a6e,#0369a1); border-color:#7dd3fc; }
.code-black  { background: linear-gradient(135deg,#111827,#1f2937); border-color:#9ca3af; }
.code-yellow { background: linear-gradient(135deg,#854d0e,#ca8a04); border-color:#fde047; }
.code-pink   { background: linear-gradient(135deg,#831843,#be185d); border-color:#f9a8d4; }
.code-maint  { background: linear-gradient(135deg,#78350f,#c2410c); border-color:#fdba74; }
.code-sec    { background: linear-gradient(135deg,#3730a3,#4f46e5); border-color:#a5b4fc; }
.code-serv   { background: linear-gradient(135deg,#134e4a,#0f766e); border-color:#5eead4; }
.code-plain  { background: linear-gradient(135deg,#334155,#475569); border-color:#cbd5e1; }


/* تُلغى الحركة عند تفضيل تقليلها */
@media (prefers-reduced-motion: reduce) {
  .code-card, .code-sweep { animation: none !important; }
}


/* ==== TW-BRIDGE ==== */
/* ============================================================================
   جسر Tailwind -> رموز التصميم
   ---------------------------------------------------------------------------
   مولَّد آليًا من الأصناف اللونية المستعملة فعلًا في الوسم الحيّ.

   سببه: الوسم يحمل 194 صنفًا لونيًا تفرض لوحة داكنة ثابتة. بإعادة تعريفها
   بالرموز يتبع النظام كله وضعَي النهار والليل، ويجتاز التباين، بلا تحرير
   ألف موضع يدويًا.

   تُحذف هذه الطبقة تدريجيًا كلما تحوّل وسم صفحة إلى مكوّنات .so-*
   ============================================================================ */

.accent-emerald-500 { accent-color: var(--green-line) !important; }
.accent-teal-600 { accent-color: var(--accent-line) !important; }
.bg-amber-500\/20 { background-color: var(--amber-bg) !important; }
.bg-amber-600 { background-color: var(--amber) !important; }
.bg-amber-600\/30 { background-color: var(--amber-bg) !important; }
.bg-amber-700 { background-color: var(--amber) !important; }
.bg-amber-900\/15 { background-color: var(--amber-bg) !important; }
.bg-amber-900\/20 { background-color: var(--amber-bg) !important; }
.bg-amber-900\/30 { background-color: var(--amber-bg) !important; }
.bg-amber-900\/40 { background-color: var(--amber-bg) !important; }
.bg-amber-900\/50 { background-color: var(--amber-bg) !important; }
.bg-amber-950\/30 { background-color: var(--amber-bg) !important; }
.bg-black\/35 { background-color: var(--bg-sunken) !important; }
.bg-black\/80 { background-color: var(--bg-sunken) !important; }
.bg-black\/85 { background-color: var(--bg-sunken) !important; }
.bg-emerald-600 { background-color: var(--green) !important; }
.bg-emerald-600\/20 { background-color: var(--green-bg) !important; }
.bg-emerald-600\/30 { background-color: var(--green-bg) !important; }
.bg-emerald-700 { background-color: var(--green) !important; }
.bg-emerald-900\/20 { background-color: var(--green-bg) !important; }
.bg-emerald-900\/40 { background-color: var(--green-bg) !important; }
.bg-emerald-900\/50 { background-color: var(--green-bg) !important; }
.bg-emerald-950\/30 { background-color: var(--green-bg) !important; }
.bg-green-500 { background-color: var(--green) !important; }
.bg-indigo-700 { background-color: var(--accent) !important; }
.bg-red-500 { background-color: var(--red) !important; }
.bg-red-600 { background-color: var(--red) !important; }
.bg-red-700 { background-color: var(--red) !important; }
.bg-red-900\/20 { background-color: var(--red-bg) !important; }
.bg-red-900\/30 { background-color: var(--red-bg) !important; }
.bg-red-900\/40 { background-color: var(--red-bg) !important; }
.bg-red-900\/50 { background-color: var(--red-bg) !important; }
.bg-red-950\/30 { background-color: var(--red-bg) !important; }
.bg-sky-900\/30 { background-color: var(--blue-bg) !important; }
.bg-slate-600 { background-color: var(--surface-2) !important; }
.bg-slate-700 { background-color: var(--surface-2) !important; }
.bg-slate-700\/50 { background-color: var(--surface-2) !important; }
.bg-slate-700\/70 { background-color: var(--surface-2) !important; }
.bg-slate-800 { background-color: var(--surface) !important; }
.bg-slate-800\/30 { background-color: var(--surface) !important; }
.bg-slate-800\/50 { background-color: var(--surface) !important; }
.bg-slate-800\/60 { background-color: var(--surface) !important; }
.bg-slate-800\/70 { background-color: var(--surface) !important; }
.bg-slate-900 { background-color: var(--bg-sunken) !important; }
.bg-slate-900\/40 { background-color: var(--bg-sunken) !important; }
.bg-slate-900\/50 { background-color: var(--bg-sunken) !important; }
.bg-slate-900\/60 { background-color: var(--bg-sunken) !important; }
.bg-slate-900\/80 { background-color: var(--bg-sunken) !important; }
.bg-slate-950\/60 { background-color: var(--bg-sunken) !important; }
.bg-slate-950\/70 { background-color: var(--bg-sunken) !important; }
.bg-slate-950\/95 { background-color: var(--bg-sunken) !important; }
.bg-teal-500 { background-color: var(--accent) !important; }
.bg-teal-600 { background-color: var(--accent) !important; }
.bg-teal-700 { background-color: var(--accent) !important; }
.bg-teal-900\/20 { background-color: var(--accent-bg) !important; }
.bg-teal-900\/40 { background-color: var(--accent-bg) !important; }
.bg-teal-900\/50 { background-color: var(--accent-bg) !important; }
.bg-violet-900\/30 { background-color: var(--accent-bg) !important; }
.border-amber-500\/60 { border-color: var(--amber-line) !important; }
.border-amber-600\/50 { border-color: var(--amber-line) !important; }
.border-amber-700\/30 { border-color: var(--amber-line) !important; }
.border-amber-700\/40 { border-color: var(--amber-line) !important; }
.border-amber-700\/50 { border-color: var(--amber-line) !important; }
.border-emerald-500\/60 { border-color: var(--green-line) !important; }
.border-emerald-600\/40 { border-color: var(--green-line) !important; }
.border-emerald-700\/30 { border-color: var(--green-line) !important; }
.border-emerald-700\/40 { border-color: var(--green-line) !important; }
.border-emerald-700\/50 { border-color: var(--green-line) !important; }
.border-emerald-800\/30 { border-color: var(--green-line) !important; }
.border-red-700\/30 { border-color: var(--red-line) !important; }
.border-red-700\/50 { border-color: var(--red-line) !important; }
.border-red-800\/30 { border-color: var(--red-line) !important; }
.border-red-800\/50 { border-color: var(--red-line) !important; }
.border-sky-600\/60 { border-color: var(--blue-line) !important; }
.border-slate-500 { border-color: var(--line) !important; }
.border-slate-600 { border-color: var(--line) !important; }
.border-slate-700 { border-color: var(--line) !important; }
.border-slate-700\/30 { border-color: var(--line) !important; }
.border-slate-700\/40 { border-color: var(--line) !important; }
.border-slate-700\/50 { border-color: var(--line) !important; }
.border-slate-700\/60 { border-color: var(--line) !important; }
.border-teal-400 { border-color: var(--accent-line) !important; }
.border-teal-500 { border-color: var(--accent-line) !important; }
.border-teal-700 { border-color: var(--accent-line) !important; }
.border-teal-700\/30 { border-color: var(--accent-line) !important; }
.border-violet-600\/60 { border-color: var(--accent-line) !important; }
.divide-slate-700\/30 > * + * { border-color: var(--line) !important; }
.hover\:bg-amber-500:hover { background-color: var(--amber) !important; }
.hover\:bg-amber-600:hover { background-color: var(--amber) !important; }
.hover\:bg-emerald-500:hover { background-color: var(--green) !important; }
.hover\:bg-emerald-600:hover { background-color: var(--green) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--green) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--accent) !important; }
.hover\:bg-red-600:hover { background-color: var(--red) !important; }
.hover\:bg-red-700:hover { background-color: var(--red) !important; }
.hover\:bg-red-900\/60:hover { background-color: var(--red-bg) !important; }
.hover\:bg-sky-900\/60:hover { background-color: var(--blue-bg) !important; }
.hover\:bg-slate-500:hover { background-color: var(--surface-3) !important; }
.hover\:bg-slate-600:hover { background-color: var(--surface-2) !important; }
.hover\:bg-slate-700:hover { background-color: var(--surface-2) !important; }
.hover\:bg-slate-700\/20:hover { background-color: var(--surface-2) !important; }
.hover\:bg-slate-700\/30:hover { background-color: var(--surface-2) !important; }
.hover\:bg-slate-700\/50:hover { background-color: var(--surface-2) !important; }
.hover\:bg-slate-800:hover { background-color: var(--surface) !important; }
.hover\:bg-teal-600:hover { background-color: var(--accent) !important; }
.hover\:bg-teal-700:hover { background-color: var(--accent) !important; }
.hover\:bg-violet-900\/60:hover { background-color: var(--accent-bg) !important; }
.hover\:border-red-700\/50:hover { border-color: var(--red-line) !important; }
.hover\:border-slate-500:hover { border-color: var(--line) !important; }
.hover\:border-teal-700\/40:hover { border-color: var(--accent-line) !important; }
.hover\:text-emerald-300:hover { color: var(--green-text) !important; }
.hover\:text-red-300:hover { color: var(--red-text) !important; }
.hover\:text-red-400:hover { color: var(--red-text) !important; }
.hover\:text-slate-200:hover { color: var(--text) !important; }
.hover\:text-teal-200:hover { color: var(--accent-text) !important; }
.hover\:text-teal-300:hover { color: var(--accent-text) !important; }
.hover\:text-teal-400:hover { color: var(--accent-text) !important; }
.hover\:text-white:hover { color: var(--text) !important; }
.placeholder-slate-500::placeholder { color: var(--text-2) !important; }
.text-amber-200 { color: var(--amber-text) !important; }
.text-amber-200\/80 { color: var(--amber-text) !important; }
.text-amber-300 { color: var(--amber-text) !important; }
.text-amber-300\/60 { color: var(--amber-text) !important; }
.text-amber-300\/90 { color: var(--amber-text) !important; }
.text-amber-400 { color: var(--amber-text) !important; }
.text-amber-400\/80 { color: var(--amber-text) !important; }
.text-amber-400\/90 { color: var(--amber-text) !important; }
.text-emerald-200 { color: var(--green-text) !important; }
.text-emerald-300 { color: var(--green-text) !important; }
.text-emerald-300\/60 { color: var(--green-text) !important; }
.text-emerald-400 { color: var(--green-text) !important; }
.text-red-200 { color: var(--red-text) !important; }
.text-red-300 { color: var(--red-text) !important; }
.text-red-300\/60 { color: var(--red-text) !important; }
.text-red-400 { color: var(--red-text) !important; }
.text-sky-200 { color: var(--blue-text) !important; }
.text-sky-300\/80 { color: var(--blue-text) !important; }
.text-slate-200 { color: var(--text) !important; }
.text-slate-300 { color: var(--text) !important; }
.text-slate-400 { color: var(--text-2) !important; }
.text-slate-500 { color: var(--text-2) !important; }
.text-slate-600 { color: var(--text-3) !important; }
.text-teal-100 { color: var(--accent-text) !important; }
.text-teal-200 { color: var(--accent-text) !important; }
.text-teal-300 { color: var(--accent-text) !important; }
.text-teal-300\/60 { color: var(--accent-text) !important; }
.text-teal-400 { color: var(--accent-text) !important; }
.text-violet-200 { color: var(--accent-text) !important; }
.text-white { color: var(--text) !important; }
.text-white\/60 { color: var(--text) !important; }
.text-white\/70 { color: var(--text) !important; }
.text-white\/90 { color: var(--text) !important; }

/* ==== BRIDGE-FIX ==== */

/* ── تصحيحات الجسر ───────────────────────────────────────────────────────────

   1) text-white تُحوَّل افتراضيًا إلى رمز النص، وهو الصواب لعناوين البطاقات
      التي صارت فاتحة. لكنها تكسر النص فوق خلفية مُشبَعة (زر أخضر مثلاً)،
      فيصير نصًّا داكنًا على أخضر: قِيس 3.69:1. هنا يبقى أبيض.

   2) تدرّج شاشة الدخول لم يكن ضمن التحويل فبقي داكنًا مع نصّ داكن.

   3) بطاقات جدار المراقبة تدرّجات عميقة، والنص فوقها أبيض دائمًا.
   ─────────────────────────────────────────────────────────────────────────── */

.text-white[class*="bg-red-"],    .text-white[class*="bg-rose-"],
.text-white[class*="bg-emerald-"],.text-white[class*="bg-green-"],
.text-white[class*="bg-teal-"],   .text-white[class*="bg-amber-"],
.text-white[class*="bg-orange-"], .text-white[class*="bg-blue-"],
.text-white[class*="bg-indigo-"], .text-white[class*="bg-slate-9"],
.code-card .text-white, .code-card [class*="text-white"],
.wall-call [class*="text-white"] { color: #ffffff !important; }

/* تدرّجات الأدوات تُستبدل بخلفية الرموز. تدرّجات بطاقات الأكواد معرَّفة في
   CSS لا كأدوات، فلا تتأثر. */
.bg-gradient-to-br, .bg-gradient-to-r, .bg-gradient-to-b, .bg-gradient-to-l {
  background-image: none !important;
  background-color: var(--bg) !important;
}

/* نصّ فوق تدرّج بطاقة الكود: أبيض بلا استثناء */
.code-card, .code-card * { border-color: rgb(255 255 255 / 0.35); }

/* ==== BRIDGE-FIX2 ==== */

/* الأزرار الملوّنة كانت ترث نصًّا داكنًا بعد تفتيح الصفحة، فقِيس 1.77:1 على
   زر أخضر. الدرجات 500-700 صلبة فيلزمها أبيض؛ الدرجات 800-950 والشفافة
   خلفيات ناعمة يبقى نصّها داكنًا، ولذلك يستهدف المحدِّد الدرجات الصلبة وحدها. */
[class*="bg-red-5"],   [class*="bg-red-6"],   [class*="bg-red-7"],
[class*="bg-rose-5"],  [class*="bg-rose-6"],  [class*="bg-rose-7"],
[class*="bg-emerald-5"],[class*="bg-emerald-6"],[class*="bg-emerald-7"],
[class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-green-7"],
[class*="bg-teal-5"],  [class*="bg-teal-6"],  [class*="bg-teal-7"],
[class*="bg-blue-5"],  [class*="bg-blue-6"],  [class*="bg-blue-7"],
[class*="bg-indigo-5"],[class*="bg-indigo-6"],[class*="bg-indigo-7"],
[class*="bg-amber-6"], [class*="bg-amber-7"],
[class*="bg-orange-6"],[class*="bg-orange-7"] {
  color: #ffffff !important;
}
/* الأصفر استثناء: نصّه داكن دائمًا */
[class*="bg-yellow-4"], [class*="bg-yellow-5"] { color: var(--yellow-fg) !important; }

/* ==== BRIDGE-FIX3 ==== */

/* ألوان مخصّصة معرَّفة في tailwind.config (brand / accent / danger …) لا تحمل
   درجة رقمية، فلم يشملها المحدِّد أعلاه. زر bg-brand قِيس عند 3.33:1. */
[class*="bg-brand"], [class*="bg-accent"], [class*="bg-danger"],
[class*="bg-success"], [class*="bg-warning"], [class*="bg-dark"] {
  color: #ffffff !important;
}
[class*="bg-brand"] *, [class*="bg-accent"] *, [class*="bg-danger"] *,
[class*="bg-success"] *, [class*="bg-dark"] * { color: inherit; }

/* ==== TABLE-ALIGN ==== */

/* ── محاذاة الجداول ──────────────────────────────────────────────────────────
   المتصفح يوسّط <th> افتراضيًا، فتطفو الرؤوس فوق أعمدتها بلا محاذاة. في جدول
   بيانات المحاذاة تتبع اتجاه القراءة دائمًا، ويستثنى منها عمود الإجراءات.
   قِيس هذا على الخادم بعد النشر: رؤوس معلّقة لا تحاذي خلاياها. */
table th { text-align: start; }
.so-table th, .so-table td { vertical-align: middle; }

/* عمود الإجراءات آخر عمود دائمًا، ويُحاذى للنهاية ليبتعد عن المحتوى */
.so-table th:last-child, .so-table td:last-child { text-align: end; white-space: nowrap; }

/* الأرقام والكسور لا تنقلب مع الاتجاه: 11/58 تبقى 11/58 لا 58/11 */
.so-num, .so-mono, .so-table__num, .so-frac,
.kiosk__clock, .wall__clock { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.so-frac { white-space: nowrap; }

/* ==== TABLE-GUARD ==== */

/* ── حارس تخطيط الجداول ──────────────────────────────────────────────────────
   .so-list حاوية مرنة (flex) للقوائم. حين طُبِّقت على <tbody> أثناء تحويل
   divide-y ألغت نموذج تخطيط الجدول: صار thead يقيس أعمدته مستقلًا عن
   tbody، فبدت الرؤوس متجمّعة والبيانات منتشرة.

   هذه القاعدة تعيد أجزاء الجدول لعرضها الصحيح أيًّا كان الصنف المطبَّق،
   فلا يتكرّر الخلل مع أي تحويل قادم. */
table, table > * , table thead, table tbody, table tfoot, table tr, table th, table td {
  flex: none;
}
thead  { display: table-header-group !important; }
tbody  { display: table-row-group    !important; }
tfoot  { display: table-footer-group !important; }
tr     { display: table-row          !important; }
th, td { display: table-cell         !important; }

/* فواصل الصفوف كانت تأتي من .so-list، فتُستعاد هنا بشكل جدولي سليم */
.so-table tbody tr + tr { border-top: 1px solid var(--line); }

/* ==== EMPTY-CELL ==== */

/* الحالة الفارغة داخل جدول: الخلية تبقى table-cell كي لا ينكسر التخطيط،
   فيُستعاض عن التوسيط المرن بتوسيط نصّي. */
td.so-empty {
  text-align: center; padding: var(--sp-7) var(--sp-4);
  color: var(--text-2); font-size: var(--fs-sm);
}
td.so-empty svg { display: inline-block; margin-inline: auto; }

/* ==== FEED-STOP ==== */
/* شريط توقف التغذية: أحمر لأنه يعني أن الجدار لا يرى شيئًا */
.wall__blocked--stop { border-color: var(--red-line); background: var(--red-bg); color: var(--red-text); }

/* سبب الفراغ حين لا يكون فراغًا حقيقيًّا */
td.so-empty--err { color: var(--red-text); font-weight: 700; }

/* فراغٌ سببه إعداد ناقص لا غياب بيانات */
td.so-empty--hint { color: var(--amber-text); font-weight: 700; }