/* ============================================================================
   نظام النيل — طبقة نظام التصميم (Design System Layer) · V25.0
   ============================================================================
   الفكرة: النظام كان عنده 61 متغير متفرّقين ومش مترتبين فى مقاييس. الملف ده
   بيكمّلهم لنظام كامل (ألوان بتدرّجات، مسافات، خطوط، حواف، ظلال، حركة، طبقات)
   وبعدين بيعيد تعريف كلاسات Bootstrap اللى القوالب بتستخدمها فعلاً (btn، card،
   form-control، table، badge...) عشان تستهلك المقاييس دي.

   ليه كده؟ عشان الشكل يتغيّر بالكامل من غير ما نلمس 84 قالب ولا 3775 كلاس -
   يعنى صفر مخاطرة على نظام هيتسلّم للإدارة، ونفس نتيجة أى نظام Utility حديث.

   الترتيب: (1) المقاييس  (2) الأساسيات  (3) المكوّنات  (4) الوضع الليلي
   ============================================================================ */

/* ============================================================
   1) المقاييس — Design Tokens
   ============================================================ */
:root {
  /* ---- تدرّج الهوية: أخضر النيل ---- */
  --g-50:#ECFDF3;  --g-100:#D1FADF; --g-200:#A6F4C5; --g-300:#6CE9A6;
  --g-400:#32D583; --g-500:#2EA84E; --g-600:#1E7B36; --g-700:#165B27;
  --g-800:#10441D; --g-900:#0A2E14;

  /* ---- تدرّج الهوية: برتقالي النيل ---- */
  --o-50:#FFF6ED;  --o-100:#FFEAD5; --o-200:#FDDCAB; --o-300:#FEB273;
  --o-400:#FD853A; --o-500:#FF7A1A; --o-600:#E65C00; --o-700:#B84700;
  --o-800:#93370D; --o-900:#7A2E0E;

  /* ---- الرمادي المحايد (أساس كل الأسطح والنصوص) ---- */
  --n-0:#FFFFFF;   --n-25:#FCFDFE;  --n-50:#F8FAFC;  --n-100:#F1F5F9;
  --n-200:#E7ECF2; --n-300:#CFD8E3; --n-400:#94A3B8; --n-500:#64748B;
  --n-600:#475569; --n-700:#334155; --n-800:#1E293B; --n-900:#0F172A;
  --n-950:#080D16;

  /* ============================================================
     مقاييس Carbon (IBM Carbon Design System) — مربوطة بهوية النيل
     ============================================================
     أخدنا **بنية** Carbon: أسطح مسطّحة، حدود رفيعة، حقول بخط سفلي واحد،
     جداول كثيفة، وبلاطات مؤشرات بشريط علوي.

     اللى **ما**أخدناهوش: لون Carbon الأزرق (#0f62fe) والهيدر الأسود (#161616).
     الهوية هنا خضرا - صيدليات النيل - والأزرق كان هيمسحها. فمتغيّرات Carbon
     التفاعلية كلها بتشاور على الأخضر المعتمد، واللى فيه نص أبيض بيستخدم
     الدرجة اللى عدّت فحص التباين (g-600 = 5.33:1).

     والمقاسات: مضغوطة زى ما هى. Carbon بيستخدم 16px padding للبلاطة و48px
     للحقل - المقاسات دى بتقلّل الصفوف اللى بتدخل الشاشة للنص، والمستخدم طلب
     صراحةً الحجم يفضل صغير. فالأحجام من مقياسنا إحنا. */
  --cds-background:var(--n-50);
  --cds-layer-01:var(--n-0);
  --cds-layer-02:var(--n-50);
  --cds-field-01:var(--n-50);
  --cds-border-subtle:var(--n-200);
  --cds-border-strong:var(--n-400);
  --cds-text-primary:var(--n-900);
  --cds-text-secondary:var(--n-600);
  --cds-text-placeholder:var(--n-400);
  /* التفاعلي = أخضر النيل مش أزرق IBM */
  --cds-interactive:var(--g-600);
  --cds-interactive-hover:var(--g-700);
  --cds-link-primary:var(--link);
  --cds-support-success:var(--c-success);
  --cds-support-warning:var(--c-warning);
  --cds-support-error:var(--c-danger);
  /* V36: Alexandria بقى الأساسي بطلب صاحب النظام ("غيّر الخط ده مش عايزه
     خالص") - وهو متغيّر الأوزان 100-900 فبيحل مشكلة الأوزان الغامقة كمان.
     Plex باقي في السلسلة احتياطي فقط لو ملفات Alexandria اتشالت بالغلط */
  --cds-font-family:'Alexandria','IBM Plex Sans Arabic','Cairo','Tajawal',-apple-system,
    BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* مقاسات Carbon بعد الضغط - القيم الأصلية مكتوبة جنب كل واحدة للمقارنة */
  --cds-spacing-compact:6px;   /* Carbon: 16px */
  --cds-field-height:30px;     /* Carbon: 40px */
  --cds-row-height:26px;       /* Carbon: 48px */
  --cds-tile-pad:8px;          /* Carbon: 16px */

  /* ---- الألوان الدلالية ---- */
  --c-success:#16A34A; --c-success-bg:#ECFDF3; --c-success-bd:#A6F4C5;
  --c-warning:#D97706; --c-warning-bg:#FFFBEB; --c-warning-bd:#FDE68A;
  --c-danger:#DC2626;  --c-danger-bg:#FEF2F2;  --c-danger-bd:#FECACA;
  --c-info:#2563EB;    --c-info-bg:#EFF6FF;    --c-info-bd:#BFDBFE;

  /* ---- مقياس المسافات (خطوة 4px) ---- */
  --sp-0:0;      --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;   --sp-6:24px;  --sp-8:32px;  --sp-10:40px; --sp-12:48px;
  --sp-16:64px;

  /* ---- مقياس الخطوط ----
     بالـrem مش بالـpx عن قصد: الـpx مابيستجيبش لإعداد "حجم الخط" فى المتصفح،
     يعنى اللى بيكبّر الخط من إعدادات المتصفح كان مابيحصلش عنده أى تغيير.
     الـrem مربوطة بحجم خط الجذر، فبتكبر معاه. المقاسات هى هى بالظبط عند
     الإعداد الافتراضي (16px)، فالشكل مايتغيّرش لأى مستخدم عادي.
     كمان الأرضية اترفعت من 10px لـ11px - أقل من كده مقروش على الموبايل. */
  --fs-2xs:0.6875rem;  /* 11px - كانت 10px */
  --fs-xs:0.6875rem;   /* 11px */
  --fs-sm:0.78125rem;  /* 12.5px */
  --fs-base:0.84375rem;/* 13.5px */
  --fs-md:0.9375rem;   /* 15px */
  --fs-lg:1.0625rem;   /* 17px */
  --fs-xl:1.25rem;     /* 20px */
  --fs-2xl:1.5rem;     /* 24px */
  --fs-3xl:1.875rem;   /* 30px */
  --fs-4xl:2.375rem;   /* 38px */
  --fw-normal:500; --fw-med:600; --fw-bold:700; --fw-black:800;
  --lh-tight:1.25; --lh-snug:1.45; --lh-normal:1.65;
  --tracking-tight:-0.015em; --tracking-num:-0.02em;

  /* ---- الحواف ---- */
  --r-xs:5px;  --r-sm:7px;  --r-md:10px; --r-lg:14px;
  --r-xl:18px; --r-2xl:24px; --r-full:999px;

  /* ---- الارتفاع (Elevation) — 6 مستويات بدل 3 ----
     V25.1: عمّقنا الظلال شوية عن نسخة V25.0 (كانت خفيفة جدًا وميحسّش بيها
     حد فعليًا) عشان الكروت والأزرار تحس إنها "طايرة" عن الخلفية بوضوح -
     بدون ما نغيّر أي حجم أو مسافة، تعديل بصري بحت فى نفس نظام المتغيرات. */
  --e-0:none;
  --e-1:0 1px 2px rgba(15,23,42,.07);
  --e-2:0 2px 4px rgba(15,23,42,.07), 0 6px 16px -3px rgba(15,23,42,.09);
  --e-3:0 3px 7px rgba(15,23,42,.08), 0 14px 30px -6px rgba(15,23,42,.13);
  --e-4:0 5px 14px rgba(15,23,42,.10), 0 22px 46px -10px rgba(15,23,42,.18);
  --e-5:0 10px 22px rgba(15,23,42,.12), 0 36px 72px -14px rgba(15,23,42,.26);
  --e-brand:0 8px 22px -5px rgba(46,168,78,.40);

  /* ---- الحركة ---- */
  --t-fast:120ms; --t-base:180ms; --t-slow:280ms;
  --ez:cubic-bezier(.4,0,.2,1);
  --ez-out:cubic-bezier(.16,1,.3,1);
  --ez-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- ترتيب الطبقات ---- */
  --z-base:1; --z-raised:10; --z-sticky:100; --z-topbar:1000;
  --z-overlay:5000; --z-dropdown:14000; --z-toast:20000;

  /* ============ ربط المتغيرات القديمة بالمقاييس الجديدة ============
     كل الكود القديم بيستخدم الأسماء دي، فبنعيد تعريفها من المقياس بدل
     قيم ثابتة متفرّقة. كده الشكل بيتغيّر من مكان واحد. */
  --nile-green:var(--g-500);
  /* الأخضر اللى بيتحط تحت نص أبيض لازم يكون أغمق: الأبيض على g-500 (#2EA84E)
     بيدّي 3.08:1 - راسب للنص تحت 18.66px، وده حجم كل أزرارنا. g-600 (#1E7B36)
     بيدّي 5.33:1، وهو نفس أخضر الشريط العلوي - فالهوية بتتماسك مش بتتغيّر.
     الأخضر الأصلي باقى زى ما هو للحدود والخلفيات الخفيفة والأيقونات. */
  --nile-green-on-white:var(--g-600);
  /* لون الروابط: كان --nile-green (#2EA84E) وده 3.08:1 على الأبيض - راسب
     لكل رابط فى النظام. g-600 بيدّي 5.33:1. وفى الداكن بنعكسه لأخضر فاتح
     لأن g-600 نفسه بيدّي 3.33:1 على خلفية داكنة. */
  --link:var(--g-600);
  --nile-green-dark:var(--g-600);
  --nile-green-deep:var(--g-700);
  --nile-green-glow:rgba(46,168,78,.30);
  --nile-orange:var(--o-500);
  --nile-orange-dark:var(--o-600);
  --nile-orange-glow:rgba(255,122,26,.28);
  --odoo-primary:var(--g-600);
  --odoo-primary-dark:var(--g-700);
  --odoo-primary-light:var(--g-500);

  --bg-page:var(--n-50);
  /* الشريط العلوي بقى لون مصمت هادى بدل التدرّج الثقيل - ده أكتر حاجة
     كانت بتدّي إحساس "قالب قديم". */
  --bg-topbar:var(--g-700);
  --topbar-text:#FFFFFF;
  --topbar-glass:rgba(255,255,255,.10);
  --topbar-hover:rgba(255,255,255,.16);
  --topbar-active:rgba(255,255,255,.24);
  --topbar-border:rgba(255,255,255,.14);

  --surface:var(--n-0);
  /* رأس الجدول: المتغيّر ده كان مستخدم فى analytics.css و attendance_hub.css
     لكنه **مش معرّف فى أى مكان**، فكان دايمًا بيقع على القيمة الاحتياطية
     الفاتحة #edf2f5 - حتى فى الوضع الداكن، فالنص الفاتح كان بيختفي عليها
     (1.05:1 = غير مرئي). التعريف هنا بيقفل المشكلة فى كل الجداول مرة واحدة. */
  --surface-2:var(--n-100);
  /* ألوان الأرقام الدلالية. كانت مكتوبة قيم ثابتة جوّه القوالب، فمكانتش
     بتستجيب للثيم: الأحمر #A32D2D على خلفية داكنة بيدّي 2.51:1 - راسب.
     دلوقتي كل ثيم له درجته: فاتح 7.07/5.37/5.33 وداكن 9.35/12.3/12.63. */
  --num-bad:#A32D2D;
  --num-warn:#8A6410;
  --num-ok:var(--g-600);
  --table-head-bg:var(--n-100);
  --table-head-fg:var(--n-700);
  --surface-alt:var(--n-50);
  --surface-hover:var(--n-100);
  --border:var(--n-300);
  --border-soft:var(--n-200);

  --text:var(--n-800);
  --text-dim:var(--n-600);
  --text-faint:var(--n-500);

  --radius-xl:var(--r-xl);
  --radius-lg:var(--r-lg);
  --radius-md:var(--r-md);
  --radius-sm:var(--r-sm);

  --shadow-card:var(--e-2);
  --shadow-dropdown:var(--e-4);
  --shadow-topbar:0 1px 0 rgba(255,255,255,.06), 0 6px 20px -6px rgba(10,46,20,.45);

  --ease:var(--ez);
  --focus-ring:0 0 0 3px rgba(46,168,78,.22);

  /* أسماء كانت مستخدمة فى الكود القديم من غير ما تتعرّف أصلاً - فالقواعد اللى
     بتستعملها كانت بتفشل بصمت وتاخد اللون الافتراضي. بنعرّفها هنا فتشتغل صح. */
  --muted:var(--text-faint);
  --surface-soft:var(--surface-alt);
  --success:var(--c-success);
  --danger:var(--c-danger);
  --info:var(--c-info);
  --warning:var(--c-warning);
}

/* ============================================================
   2) الأساسيات
   ============================================================ */
/* مهم: مابنحطّش font-size على <html> خالص.
   لو حطيناها، الـrem هتتحسب من قيمتنا إحنا مش من إعداد المتصفح، وساعتها
   تكبير الخط من المتصفح مايعملش حاجة - وده بالظبط اللى كان بيحصل قبل كده. */
html{background:var(--bg-page);}
body{
  background:var(--bg-page);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:var(--lh-snug);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{letter-spacing:var(--tracking-tight);font-weight:var(--fw-black);color:var(--text);}
h1{font-size:var(--fs-3xl);} h2{font-size:var(--fs-2xl);} h3{font-size:var(--fs-xl);}
h4{font-size:var(--fs-lg);}  h5{font-size:var(--fs-md);}  h6{font-size:var(--fs-base);}
small,.small{font-size:var(--fs-sm);}
.text-muted{color:var(--text-faint)!important;}
b,strong,.fw-bold{font-weight:var(--fw-black);}

/* إصلاح عام: أي عنصر بسمة [hidden] الحقيقية لازم يختفي فعلاً، حتى لو
   عنصره بيدّي له display:flex/block تاني في مكان تاني بالستايل شيت (زي
   .cp-overlay و .qfab-menu وغيرهم). قاعدة الـ [hidden] الافتراضية من
   المتصفح أضعف من أي قاعدة author عادية، فكانت بتتغلب عليها بسهولة -
   ده بالظبط نفس المشكلة اللي كانت اتصلحت قبل كده لعنصر واحد بس
   (#responsiblePinBox[hidden]) بدل ما تتصلح مرة واحدة وعالمي. */
[hidden]{display:none!important;}

/* الأرقام بخط جدولي ثابت العرض - الأعمدة المالية بتتراص تحت بعض بالظبط */
td,th,.shx-num,.num,input[type=number],
[class*="-val"],[class*="-total"],[class*="Display"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

::selection{background:var(--g-100);color:var(--g-800);}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs);}

/* شريط تمرير رفيع وعصري */
*{scrollbar-width:thin;scrollbar-color:var(--n-300) transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:var(--r-full);
  border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--n-400);background-clip:content-box;}

/* أرقام الحالة الدلالية.
   اللون لوحده مش كافى: اللى عنده عمى ألوان (أو اللى بيطبع الشاشة أبيض وأسود)
   مش هيفرق بين رقم الغياب ورقم الإجازة. فكل درجة معاها علامة شكلية صغيرة
   مختلفة فى الشكل مش فى اللون بس: ✓ للتمام، ◆ للمعلّق، ▲ للعجز/التنبيه.
   العلامة اختيارية بـ.num-mark عشان ما تتكررش فى الخلايا اللى فيها أيقونة أصلاً. */
.num-ok,.num-warn,.num-bad{font-weight:800;}
.num-ok{color:var(--num-ok);}
.num-warn{color:var(--num-warn);}
.num-bad{color:var(--num-bad);}
.num-mark::after{font-size:.78em;font-weight:700;opacity:.9;margin-inline-start:2px;
  display:inline-block;}
/* tint-* للتلوين بس من غير الوزن العريض ولا العلامة: بتتحط على النصوص اللى
   معاها أيقونة أصلاً (⚠️ / ⏳)، فالمعنى موجود من غير اللون والعلامة تبقى تكرار. */
.tint-ok{color:var(--num-ok);}
.tint-warn{color:var(--num-warn);}
.tint-bad{color:var(--num-bad);}
.num-ok.num-mark::after{content:"✓";}
.num-warn.num-mark::after{content:"◆";}
.num-bad.num-mark::after{content:"▲";}
@media print{.num-ok,.num-warn,.num-bad{color:#000;}}

/* ============================================================
   3) المكوّنات — إعادة تنسيق كلاسات Bootstrap المستخدمة فعلاً
   ============================================================ */

/* ---------- الأزرار ---------- */
.btn{
  --btn-bg:var(--surface); --btn-fg:var(--text); --btn-bd:var(--border);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:8px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--fs-sm);
  font-weight:var(--fw-black);
  line-height:1.2;
  letter-spacing:var(--tracking-tight);
  box-shadow:var(--e-1);
  transition:transform var(--t-fast) var(--ez),
             box-shadow var(--t-base) var(--ez),
             background var(--t-fast) var(--ez),
             border-color var(--t-fast) var(--ez);
}
.btn:hover{transform:translateY(-1.5px);box-shadow:var(--e-3);color:var(--btn-fg);}
.btn:active{transform:translateY(0);box-shadow:var(--e-1);}
.btn:focus-visible{box-shadow:var(--focus-ring),var(--e-2);}
.btn:disabled,.btn.disabled{opacity:.55;transform:none;box-shadow:none;cursor:not-allowed;}
.btn-sm{padding:5px 11px;font-size:var(--fs-xs);border-radius:var(--r-sm);}
.btn-lg{padding:11px 22px;font-size:var(--fs-md);border-radius:var(--r-lg);}

/* V25.1: تدرّج لوني بدل اللون المصمت على الأزرار الأساسية - نفس الأخضر بالظبط
   بس بعمق أكتر، وده أكتر حاجة بتدّي إحساس "حديث" للعين من غير ما تغيّر حجم
   ولا موضع أي زرار فى أي صفحة. */
.btn-primary,.btn-success,.btn-brand{
  /* التدرّج كان بيبدأ من g-400 (#32D583) - أبيض عليه ≈2:1، أسوأ من أى حد.
     دلوقتي الطرفين الاتنين بيعدّوا 4.5:1 مع نص أبيض. */
  --btn-bg:linear-gradient(155deg,var(--g-600),var(--g-700));
  --btn-fg:#fff; --btn-bd:var(--g-700);
  box-shadow:var(--e-brand);
}
.btn-primary:hover,.btn-success:hover,.btn-brand:hover{
  --btn-bg:linear-gradient(155deg,var(--g-700),var(--g-800));
  color:#fff;box-shadow:0 10px 26px -6px rgba(46,168,78,.48);
}
.btn-danger{--btn-bg:var(--c-danger);--btn-fg:#fff;--btn-bd:#B91C1C;}
.btn-danger:hover{--btn-bg:#B91C1C;color:#fff;}
.btn-warning{--btn-bg:var(--o-500);--btn-fg:#fff;--btn-bd:var(--o-600);}
.btn-warning:hover{--btn-bg:var(--o-600);color:#fff;}
.btn-secondary,.btn-dark{--btn-bg:var(--n-700);--btn-fg:#fff;--btn-bd:var(--n-800);}
.btn-info{--btn-bg:var(--c-info);--btn-fg:#fff;--btn-bd:#1D4ED8;}

.btn-outline-primary,.btn-outline-success{--btn-bg:transparent;--btn-fg:var(--g-600);--btn-bd:var(--g-300);}
.btn-outline-primary:hover,.btn-outline-success:hover{--btn-bg:var(--g-50);--btn-fg:var(--g-700);--btn-bd:var(--g-500);}
.btn-outline-danger{--btn-bg:transparent;--btn-fg:var(--c-danger);--btn-bd:var(--c-danger-bd);}
.btn-outline-danger:hover{--btn-bg:var(--c-danger-bg);--btn-bd:var(--c-danger);}
.btn-outline-secondary{--btn-bg:transparent;--btn-fg:var(--text-dim);--btn-bd:var(--border);}
.btn-outline-secondary:hover{--btn-bg:var(--surface-hover);--btn-fg:var(--text);}
.btn-outline-warning{--btn-bg:transparent;--btn-fg:var(--o-600);--btn-bd:var(--o-200);}
.btn-outline-warning:hover{--btn-bg:var(--o-50);--btn-bd:var(--o-400);}

/* ---------- الحقول ---------- */
.form-control,.form-select{
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-base);
  font-family:inherit;
  box-shadow:var(--e-1) inset;
  transition:border-color var(--t-fast) var(--ez),
             box-shadow var(--t-fast) var(--ez),
             background var(--t-fast) var(--ez);
}
.form-control::placeholder{color:var(--n-400);font-weight:var(--fw-normal);}
.form-control:hover,.form-select:hover{border-color:var(--n-400);}
.form-control:focus,.form-select:focus{
  border-color:var(--g-500);
  box-shadow:var(--focus-ring);
  background:var(--surface);
  outline:none;
}
.form-control[readonly],.form-control:disabled,.form-select:disabled{
  background:var(--surface-alt);color:var(--text-dim);box-shadow:none;
}
.form-label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-black);
  color:var(--text-dim);
  letter-spacing:.01em;
  margin-bottom:var(--sp-1);
}
.form-check-input:checked{background-color:var(--g-500);border-color:var(--g-600);}
.form-check-input:focus{box-shadow:var(--focus-ring);border-color:var(--g-400);}
.input-group-text{
  background:var(--surface-alt);border:1px solid var(--border);
  color:var(--text-dim);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  border-radius:var(--r-md);
}

/* ---------- البطاقات ---------- */
.card-panel,.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--e-2);
  padding:var(--sp-4);
  transition:box-shadow var(--t-base) var(--ez),
             border-color var(--t-base) var(--ez);
}
.card-panel:hover{box-shadow:var(--e-4);}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--border-soft);
  font-weight:var(--fw-black);
  font-size:var(--fs-base);
  padding:var(--sp-3) var(--sp-4);
}
.section-title{
  font-size:var(--fs-md);
  font-weight:var(--fw-black);
  letter-spacing:var(--tracking-tight);
  color:var(--text);
  display:flex;align-items:center;gap:var(--sp-2);
}

/* ---------- الجداول ---------- */
.table{
  --bs-table-bg:transparent;
  font-size:var(--fs-sm);
  color:var(--text);
  border-color:var(--border-soft);
  margin-bottom:0;
}
.table>thead>tr>th{
  background:var(--surface-alt);
  color:var(--text-faint);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
  letter-spacing:.04em;
  text-transform:none;
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  vertical-align:middle;
}
.table>tbody>tr>td{
  padding:8px 10px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:middle;
}
.table>tbody>tr{transition:background var(--t-fast) var(--ez);}
.table>tbody>tr:hover{background:var(--g-50);}
.table>tbody>tr:last-child>td{border-bottom:0;}
.table-sm>thead>tr>th{padding:6px 8px;}
.table-sm>tbody>tr>td{padding:5px 8px;}
.table-responsive{
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--e-1);
  overflow:auto;
}
.table-responsive>.table{border-radius:inherit;}

/* ---------- الشارات ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;
  border-radius:var(--r-full);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
  letter-spacing:.01em;
  line-height:1.5;
  border:1px solid transparent;
}
.badge.bg-success,.bg-success{background:var(--c-success-bg)!important;color:var(--c-success)!important;border-color:var(--c-success-bd);}
.badge.bg-danger,.badge.bg-error{background:var(--c-danger-bg)!important;color:var(--c-danger)!important;border-color:var(--c-danger-bd);}
.badge.bg-warning{background:var(--c-warning-bg)!important;color:var(--c-warning)!important;border-color:var(--c-warning-bd);}
.badge.bg-info,.badge.bg-primary{background:var(--c-info-bg)!important;color:var(--c-info)!important;border-color:var(--c-info-bd);}
.badge.bg-secondary,.badge.bg-light{background:var(--n-100)!important;color:var(--text-dim)!important;border-color:var(--border-soft);}
.badge.bg-dark{background:var(--n-800)!important;color:#fff!important;}

/* ---------- التنبيهات ---------- */
.alert{
  border-radius:var(--r-md);
  border:1px solid transparent;
  border-inline-start-width:3px;
  padding:10px 14px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-med);
  box-shadow:var(--e-1);
}
.alert-success{background:var(--c-success-bg);color:var(--g-700);border-color:var(--c-success-bd);border-inline-start-color:var(--c-success);}
.alert-danger{background:var(--c-danger-bg);color:#991B1B;border-color:var(--c-danger-bd);border-inline-start-color:var(--c-danger);}
.alert-warning{background:var(--c-warning-bg);color:#92400E;border-color:var(--c-warning-bd);border-inline-start-color:var(--c-warning);}
.alert-info{background:var(--c-info-bg);color:#1E40AF;border-color:var(--c-info-bd);border-inline-start-color:var(--c-info);}
.alert-secondary{background:var(--n-50);color:var(--text-dim);border-color:var(--border-soft);border-inline-start-color:var(--n-400);}

/* ---------- النوافذ المنبثقة ---------- */
.modal-content{
  border:1px solid var(--border-soft);
  border-radius:var(--r-xl);
  box-shadow:var(--e-5);
  background:var(--surface);
}
.modal-header,.modal-footer{border-color:var(--border-soft);padding:var(--sp-4);}
.modal-header{font-weight:var(--fw-black);}
.modal-body{padding:var(--sp-4);}
/* الظل الأسود ورا النوافذ والقوائم اتشال بطلب المستخدم: الطبقة فضلت مكانها
   عشان الضغط برّه النافذة لسه بيقفلها، بس بقت شفافة بالكامل من غير تعتيم
   ولا blur - النافذة نفسها ليها خلفية وحدود وظل، فالفصل البصري لسه واضح. */
.modal-backdrop,.modal-backdrop.show{opacity:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* ---------- القوائم المنسدلة ---------- */
.dropdown-menu{
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--e-4);
  padding:var(--sp-1);
  background:var(--surface);
}
.dropdown-item{
  border-radius:var(--r-sm);
  padding:7px 11px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-med);
  transition:background var(--t-fast) var(--ez);
}
.dropdown-item:hover,.dropdown-item:focus{background:var(--g-50);color:var(--g-700);}

/* ---------- التبويبات ---------- */
.nav-tabs{border-bottom:1px solid var(--border-soft);gap:var(--sp-1);}
.nav-tabs .nav-link{
  border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:8px 14px;font-size:var(--fs-sm);font-weight:var(--fw-black);
  color:var(--text-faint);position:relative;
  transition:color var(--t-fast) var(--ez),background var(--t-fast) var(--ez);
}
.nav-tabs .nav-link:hover{color:var(--text);background:var(--surface-alt);}
.nav-tabs .nav-link.active{color:var(--g-600);background:transparent;}
.nav-tabs .nav-link.active::after{
  content:"";position:absolute;inset-inline:8px;bottom:-1px;height:2px;
  background:var(--g-500);border-radius:var(--r-full);
}

/* ---------- الصفحة ---------- */
.page-body{
  padding:var(--sp-4) var(--sp-8) var(--sp-12);
  max-width:1800px;margin:0 auto;box-shadow:none;
}
.page-title{
  background:transparent;border:0;box-shadow:none;
  padding:0 0 var(--sp-3);margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-soft);
}
.page-title-main{
  font-size:var(--fs-xl);font-weight:var(--fw-black);
  letter-spacing:var(--tracking-tight);color:var(--text);
}

/* ---------- حركات دخول لطيفة ---------- */
.fade-in{animation:dsFade var(--t-slow) var(--ez-out);}
@keyframes dsFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* V25.1: نفس حركة الدخول دي بقت تلقائية على محتوى كل صفحة (من غير ما نحتاج
   نضيف class فى 90+ قالب) - أول ظهور للصفحة بيبقى فيه حركة خفيفة بدل ما
   المحتوى يقفز فجأة. مرة واحدة بس عند التحميل، مش متكررة. */
.page-body,.odoo-content>*:first-child{animation:dsFade var(--t-slow) var(--ez-out);}

/* ============================================================
   4) الوضع الليلي — نفس المقاييس بقيم معكوسة
   ============================================================ */
[data-theme="dark"]{
  /* مقاييس Carbon فى الوضع الداكن - نفس البنية، أسطح معكوسة */
  --cds-background:#0B1220;
  --cds-layer-01:#111827;
  --cds-layer-02:#161E2E;
  --cds-field-01:#161E2E;
  --cds-border-subtle:#28334A;
  --cds-border-strong:#64748B;
  --cds-text-primary:#E7ECF3;
  --cds-text-secondary:#AEB9CA;
  --cds-text-placeholder:#8A97AC;
  --cds-interactive:#2EA84E;
  --cds-interactive-hover:#32D583;
  --link:#4ADE80;
  --num-bad:#FCA5A5;
  --num-warn:#FCD34D;
  --num-ok:#86EFAC;
  --surface-2:#1B2536;
  --table-head-bg:#1B2536;
  --table-head-fg:#CBD5E1;
  --n-0:#111827;   --n-25:#131A27;  --n-50:#161E2E;  --n-100:#1C2536;
  --n-200:#28334A; --n-300:#3A4763; --n-400:#64748B; --n-500:#8A97AC;
  --n-600:#AEB9CA; --n-700:#CBD5E1; --n-800:#E7ECF3; --n-900:#F5F8FC;

  --bg-page:#0B1220;
  --bg-topbar:#0E1A2B;
  --surface:#111827;
  --surface-alt:#161E2E;
  --surface-hover:#1C2536;
  --border:#2E3B54;
  --border-soft:#212C40;
  --text:#E7ECF3;
  --text-dim:#AEB9CA;
  --text-faint:#8A97AC;

  --c-success-bg:rgba(22,163,74,.14);  --c-success-bd:rgba(22,163,74,.34);  --c-success:#4ADE80;
  --c-warning-bg:rgba(217,119,6,.14);  --c-warning-bd:rgba(217,119,6,.34);  --c-warning:#FBBF24;
  --c-danger-bg:rgba(220,38,38,.14);   --c-danger-bd:rgba(220,38,38,.34);   --c-danger:#F87171;
  --c-info-bg:rgba(37,99,235,.14);     --c-info-bd:rgba(37,99,235,.34);     --c-info:#60A5FA;

  --e-1:0 1px 2px rgba(0,0,0,.34);
  --e-2:0 2px 4px rgba(0,0,0,.38), 0 6px 16px -3px rgba(0,0,0,.38);
  --e-3:0 3px 7px rgba(0,0,0,.40), 0 14px 30px -6px rgba(0,0,0,.46);
  --e-4:0 5px 14px rgba(0,0,0,.44), 0 22px 46px -10px rgba(0,0,0,.54);
  --e-5:0 10px 22px rgba(0,0,0,.48), 0 36px 72px -14px rgba(0,0,0,.64);
  --e-brand:0 8px 22px -5px rgba(46,168,78,.42);

  --focus-ring:0 0 0 3px rgba(46,168,78,.30);
}
[data-theme="dark"] .table>tbody>tr:hover{background:rgba(46,168,78,.07);}
[data-theme="dark"] .dropdown-item:hover{background:rgba(46,168,78,.12);color:var(--g-300);}
[data-theme="dark"] ::selection{background:rgba(46,168,78,.30);color:#fff;}
[data-theme="dark"] .alert-success{color:#86EFAC;}
[data-theme="dark"] .alert-danger{color:#FCA5A5;}
[data-theme="dark"] .alert-warning{color:#FCD34D;}
[data-theme="dark"] .alert-info{color:#93C5FD;}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .btn:hover,.card-panel:hover{transform:none!important;}
}

/* ============================================================
   5) المكوّنات المخصصة للنظام — نفس المقاييس
   ============================================================
   الجزء ده بيغطّي الكلاسات الخاصة بالنظام (مش Bootstrap) اللى بتتكرر كتير
   فى القوالب: جداول الإنتربرايز، بطاقات المؤشرات، اللوحات، عناصر القوائم.
   ============================================================ */

/* ---------- جداول الإنتربرايز (74 استخدام) ---------- */
.enterprise-table{width:100%;border-collapse:separate;border-spacing:0;}
.enterprise-table th{
  background:var(--surface-alt)!important;
  color:var(--text-faint)!important;
  font-size:var(--fs-2xs)!important;
  font-weight:var(--fw-black)!important;
  letter-spacing:.04em;
  padding:9px 10px!important;
  border-bottom:1px solid var(--border)!important;
  position:sticky;top:0;z-index:var(--z-raised);
}
.enterprise-table td{
  font-size:var(--fs-sm)!important;
  padding:8px 10px!important;
  border-bottom:1px solid var(--border-soft)!important;
  color:var(--text)!important;
  vertical-align:middle;
}
.enterprise-table tbody tr{transition:background var(--t-fast) var(--ez);}
.enterprise-table tbody tr:hover{background:var(--g-50);}
.enterprise-table tbody tr:last-child td{border-bottom:0!important;}
[data-theme="dark"] .enterprise-table tbody tr:hover{background:rgba(46,168,78,.07);}
.table-wrap{
  border:1px solid var(--border-soft);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--e-1);overflow:auto;
}

/* ---------- بطاقات المؤشرات ---------- */
.kpi-card,.panel{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--e-2);
  transition:box-shadow var(--t-base) var(--ez),transform var(--t-base) var(--ez);
}
.kpi-card{padding:var(--sp-4);overflow:hidden;}
/* V25.1: خط علوي متدرّج بهوية النظام - باهت وقت الاستقرار، بيوضح لما تمرّ
   الماوس. لمسة "مميزة" بسيطة بتفرّق كارت المؤشرات عن أي كارت عادي. */
.kpi-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,var(--g-400),var(--g-600) 55%,var(--o-400));
  opacity:.55;transition:opacity var(--t-base) var(--ez);
}
.kpi-card:hover{box-shadow:var(--e-4);transform:translateY(-2px);}
.kpi-card:hover::before{opacity:1;}
.kpi-label{font-size:var(--fs-xs);font-weight:var(--fw-black);color:var(--text-faint);opacity:1;}
.kpi-value{
  font-size:var(--fs-2xl);font-weight:var(--fw-black);
  letter-spacing:var(--tracking-num);margin:6px 0;color:var(--text);
}
.kpi-meta{font-size:var(--fs-xs);color:var(--text-faint);opacity:1;}
.kpi-grid{gap:var(--sp-3);}
.panel{padding:var(--sp-4);}
.panel-title h2{font-size:var(--fs-lg);font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);}
.eyebrow{
  font-size:var(--fs-2xs);font-weight:var(--fw-black);
  letter-spacing:.12em;color:var(--text-faint);opacity:1;text-transform:uppercase;
}
.page-head h1{font-size:var(--fs-2xl);font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);}
.page-head p{color:var(--text-dim);opacity:1;font-size:var(--fs-sm);}

.stat-card{
  border:1px solid var(--border-soft);border-radius:var(--r-lg);
  box-shadow:var(--e-2);background:var(--surface);
  transition:box-shadow var(--t-base) var(--ez),transform var(--t-base) var(--ez);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--e-3);}
.stat-card::before{width:3px;border-radius:var(--r-full) 0 0 var(--r-full);}

/* ---------- الشارات الهادية ---------- */
.badge-soft{
  border-radius:var(--r-full);padding:3px 10px;
  background:var(--n-100);color:var(--text-dim);
  font-size:var(--fs-2xs);font-weight:var(--fw-black);
  border:1px solid var(--border-soft);
  display:inline-flex;align-items:center;gap:4px;
}
.badge-soft.success{background:var(--c-success-bg);color:var(--c-success);border-color:var(--c-success-bd);}
.badge-soft.danger{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger-bd);}
.badge-soft.warning{background:var(--c-warning-bg);color:var(--c-warning);border-color:var(--c-warning-bd);}

/* ---------- صفوف الفحص والقوائم المصغّرة ---------- */
.check-row{border-radius:var(--r-md);padding:9px 11px;transition:background var(--t-fast) var(--ez);}
.check-row:hover{background:var(--surface-alt);}
.check-row small{color:var(--text-faint);opacity:1;}
.check-status{font-size:var(--fs-2xs);font-weight:var(--fw-black);}
.status-dot{width:8px;height:8px;box-shadow:0 0 0 3px rgba(46,168,78,.14);}
.status-dot.bad{box-shadow:0 0 0 3px rgba(220,38,38,.14);}
.mini-list>div{
  border:1px solid var(--border-soft);border-radius:var(--r-md);
  padding:9px 12px;font-size:var(--fs-sm);
  transition:border-color var(--t-fast) var(--ez),background var(--t-fast) var(--ez);
}
.mini-list>div:hover{border-color:var(--border);background:var(--surface-alt);}
.payroll-summary>div{
  background:var(--surface-alt);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:var(--sp-3);
}
.payroll-summary strong,.payroll-summary b{font-size:var(--fs-lg);font-weight:var(--fw-black);}
.payroll-summary small{color:var(--text-faint);opacity:1;font-size:var(--fs-xs);}
.empty,.empty-state{padding:var(--sp-8);text-align:center;color:var(--text-faint);opacity:1;font-size:var(--fs-sm);}

/* ---------- عناصر القوائم المنسدلة فى الشريط (51 استخدام) ---------- */
.hover-item{
  border-radius:var(--r-sm);padding:7px 10px;
  font-size:var(--fs-sm);font-weight:var(--fw-med);
  transition:background var(--t-fast) var(--ez),color var(--t-fast) var(--ez);
}
.hover-item:hover{background:var(--g-50);color:var(--g-700);}
.hover-item.active{background:var(--g-50);color:var(--g-700);font-weight:var(--fw-black);}
[data-theme="dark"] .hover-item:hover,
[data-theme="dark"] .hover-item.active{background:rgba(46,168,78,.12);color:var(--g-300);}
.item-icon{
  display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:var(--r-xs);background:var(--surface-alt);
  color:var(--text-dim);font-size:12px;flex:none;
}
.hover-item:hover .item-icon,.hover-item.active .item-icon{background:var(--g-100);color:var(--g-700);}
[data-theme="dark"] .hover-item:hover .item-icon{background:rgba(46,168,78,.18);color:var(--g-300);}

/* ---------- الحقول المصغّرة (65 استخدام) ---------- */
.form-control-sm,.form-select-sm{
  min-height:31px;padding:5px 10px;
  font-size:var(--fs-sm);border-radius:var(--r-sm);
}

/* ---------- لوحات V24 ---------- */
.v24-panel{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);box-shadow:var(--e-2);
}
.v24-panel-head h2{font-size:var(--fs-md);font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);}
.v24-kicker{
  font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:.1em;
  color:var(--text-faint);text-transform:uppercase;
}
.v24-kpi{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);box-shadow:var(--e-2);
  transition:box-shadow var(--t-base) var(--ez),transform var(--t-base) var(--ez);
}
.v24-kpi:hover{box-shadow:var(--e-4);transform:translateY(-2px);}
.v24-kpi-label{font-size:var(--fs-xs);font-weight:var(--fw-black);color:var(--text-faint);}

/* ---------- تنسيقات مساعدة متكررة ---------- */
.fw-bold{font-weight:var(--fw-black)!important;}
.text-success{color:var(--c-success)!important;}
.text-danger{color:var(--c-danger)!important;}
.text-warning{color:var(--c-warning)!important;}
.text-primary,.text-info{color:var(--c-info)!important;}
hr{border-color:var(--border-soft);opacity:1;}
code,kbd{
  background:var(--surface-alt);border:1px solid var(--border-soft);
  border-radius:var(--r-xs);padding:1px 6px;font-size:var(--fs-xs);
  color:var(--text-dim);
}

/* ============================================================
   6) شات تسوية الشفت — بأسلوب تطبيقات المحادثة
   ============================================================ */
.chat{
  display:flex;flex-direction:column;
  border:1px solid var(--border-soft);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;box-shadow:var(--e-1);
}
.chat-head{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:8px 12px;background:var(--g-700);color:#fff;
}
.chat-avatar{
  width:30px;height:30px;border-radius:var(--r-full);flex:none;
  display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:14px;
}
.chat-head-t{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
.chat-head-t b{font-size:var(--fs-sm);font-weight:var(--fw-black);}
.chat-head-t span{font-size:var(--fs-2xs);color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-status{
  margin-inline-start:auto;flex:none;
  font-size:var(--fs-2xs);font-weight:var(--fw-black);
  padding:2px 9px;border-radius:var(--r-full);background:rgba(255,255,255,.20);
}
.chat-st-approved{background:rgba(255,255,255,.30);}
.chat-st-rejected{background:rgba(220,38,38,.55);}

.chat-body{
  display:flex;flex-direction:column;gap:6px;
  padding:12px;background:var(--surface-alt);
  max-height:300px;overflow-y:auto;
}
.chat-compact .chat-body{max-height:190px;padding:9px;}
.chat-row{display:flex;}
.chat-row.me{justify-content:flex-end;}
.chat-bubble{
  max-width:78%;padding:6px 11px;
  border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border-soft);
  box-shadow:var(--e-1);
}
.chat-row.me .chat-bubble{
  background:var(--g-100);border-color:var(--g-200);
  border-end-end-radius:var(--r-xs);
}
.chat-row.them .chat-bubble{border-end-start-radius:var(--r-xs);}
[data-theme="dark"] .chat-row.me .chat-bubble{
  background:rgba(46,168,78,.16);border-color:rgba(46,168,78,.32);
}
.chat-who{
  font-size:var(--fs-2xs);font-weight:var(--fw-black);
  color:var(--g-600);margin-bottom:2px;
  display:flex;align-items:center;gap:5px;
}
.chat-who em{
  font-style:normal;font-size:0.6875rem;font-weight:var(--fw-bold);
  background:var(--surface-alt);border:1px solid var(--border-soft);
  color:var(--text-faint);padding:0 6px;border-radius:var(--r-full);
}
.chat-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:0.6875rem;font-weight:var(--fw-black);
  background:var(--o-500);color:#fff;
  padding:1px 8px;border-radius:var(--r-full);margin-bottom:3px;
}
.chat-text{
  font-size:var(--fs-sm);line-height:var(--lh-normal);
  color:var(--text);white-space:pre-wrap;word-break:break-word;
}
.chat-time{
  font-size:0.6875rem;color:var(--text-faint);
  text-align:end;margin-top:2px;direction:ltr;
}
.chat-sys,.chat-empty{
  align-self:center;font-size:var(--fs-2xs);color:var(--text-faint);
  background:var(--surface);border:1px solid var(--border-soft);
  padding:3px 12px;border-radius:var(--r-full);
}
.chat-empty{border-style:dashed;}

.chat-input{
  display:flex;align-items:center;gap:6px;
  padding:8px;border-top:1px solid var(--border-soft);background:var(--surface);
}
.chat-input input[type=text]{
  flex:1;min-height:34px;padding:6px 12px;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface-alt);color:var(--text);
  font-size:var(--fs-sm);font-family:inherit;
}
.chat-input input[type=text]:focus{
  outline:none;border-color:var(--g-500);box-shadow:var(--focus-ring);background:var(--surface);
}
.chat-input button{
  width:34px;height:34px;flex:none;border:0;border-radius:var(--r-full);
  background:var(--g-500);color:#fff;font-size:14px;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--t-fast) var(--ez),transform var(--t-fast) var(--ez);
}
.chat-input button:hover{background:var(--g-600);transform:scale(1.06);}
.chat-clip{
  width:32px;height:32px;flex:none;border-radius:var(--r-full);
  display:grid;place-items:center;cursor:pointer;
  color:var(--text-faint);background:var(--surface-alt);
  border:1px solid var(--border-soft);
  transition:background var(--t-fast) var(--ez),color var(--t-fast) var(--ez);
}
.chat-clip input{position:absolute;opacity:0;width:0;height:0;}
.chat-clip:has(input:checked){background:var(--o-500);color:#fff;border-color:var(--o-600);}
.chat-closed{
  padding:7px 12px;font-size:var(--fs-2xs);color:var(--text-faint);
  background:var(--surface);border-top:1px solid var(--border-soft);text-align:center;
}

/* ---- مرفقات محادثة التسوية (صور بلايت بوكس + تسجيلات صوتية) ---- */
.chat-att-image{
  display:block;margin-top:6px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--border-soft);max-width:220px;
}
.chat-att-image img{display:block;width:100%;max-height:180px;object-fit:cover;}
.chat-att-audio{
  display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;
}
.chat-att-audio audio{height:32px;max-width:220px;}
.chat-att-audio-name{font-size:var(--fs-2xs);color:var(--text-faint);}
.chat-clip-name{
  font-size:var(--fs-2xs);color:var(--text-faint);max-width:90px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- منطقة التركيز: بتضوّى لما المدير ييجى من الإشعار ---- */
.focus-zone{position:relative;transition:box-shadow var(--t-slow) var(--ez),border-color var(--t-slow) var(--ez);}
.focus-zone.is-focused{
  border-color:var(--o-400)!important;
  box-shadow:0 0 0 3px rgba(255,122,26,.22),var(--e-3)!important;
}
.focus-flag{
  position:absolute;inset-block-start:-9px;inset-inline-start:14px;
  background:var(--o-500);color:#fff;font-size:var(--fs-2xs);font-weight:var(--fw-black);
  padding:2px 10px;border-radius:var(--r-full);box-shadow:var(--e-1);
}

/* ============================================================
   7) الشريط العلوي — أنحف وأهدى وأفتح
   ============================================================
   كان ضخم (~58-64px) بلون أخضر غامق جدًا. النسخة دي أنحف (46px)
   وبلون أهدى ومتوافق مع باقي النظام الجديد.
   ============================================================ */
:root{ --bg-topbar:var(--g-600); }
[data-theme="dark"]{ --bg-topbar:#111C2C; }

/* V25.1: تدرّج بدل اللون المصمت - نفس الارتفاع والمقاسات، بس إحساس أعمق
   وأكتر تميّزًا كأول حاجة يشوفها أي حد يفتح النظام. */
.odoo-topbar{
  height:46px!important;min-height:46px!important;
  padding-inline:12px!important;
  gap:8px!important;
  background:linear-gradient(90deg,var(--g-700),var(--g-600) 60%,var(--g-600))!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 2px 10px rgba(10,46,20,.22)!important;
}
[data-theme="dark"] .odoo-topbar{
  background:linear-gradient(90deg,#0B1626,#111C2C 60%,#111C2C)!important;
}
.odoo-topbar .nile-brand-badge{max-width:180px;padding-inline:4px 8px;gap:6px;}
.odoo-topbar .brand-img-wrap{width:28px;height:28px;border-radius:var(--r-sm);}
.odoo-topbar .brand-titles b,.odoo-topbar .brand-main{font-size:var(--fs-sm);}
.odoo-topbar .brand-sub-en{font-size:0.6875rem;opacity:.72;}

.nav-menu-container .nav-link-btn{
  min-height:38px;padding:4px 10px;border-radius:10px;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
}
.tb-end{gap:6px;}
.date-pill{
  height:30px;padding:0 10px;border-radius:var(--r-full);
  font-size:var(--fs-2xs);gap:5px;
  background:var(--topbar-glass);border:1px solid var(--topbar-border);
}
/* الحجم والخلفية الفعليين لزرار البحث/التنبيهات بيتحددوا فى القاعدة
   الأقوى (!important) بعد كده فى نفس الملف - سيبنا هنا بس اللي فعلاً بيوصل
   للشاشة: التركيز بالكيبورد (كان مفيش قاعدة تانية بتحدد ده). */
.enterprise-search-trigger:focus-visible,.enterprise-notify-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.35);}
.user-menu-btn{height:30px;padding:0 8px;border-radius:var(--r-full);font-size:var(--fs-sm);}
.user-menu-btn .avatar-sm{width:24px;height:24px;font-size:0.6875rem;}
.bsw-trigger{height:30px;padding:0 10px;border-radius:var(--r-full);font-size:var(--fs-sm);}

@media (max-width:900px){
  .odoo-topbar{min-height:44px!important;padding-inline:7px!important;}
  .date-pill{display:none;}
}

/* ============================================================
   8) شاشة التقفيل — أحجام أوضح بعد شيل خانة البيان
   ============================================================ */

/* المبلغ فى الفيزا والإنستا: كبير وواضح (البيان اتشال وبقى قيمة تلقائية) */
.shx-big{
  font-size:16px!important;
  font-weight:var(--fw-black)!important;
  height:32px!important;min-height:32px!important;
  text-align:center;letter-spacing:var(--tracking-num);
}
.shx-col-visa .shx-t td:first-child,
.c-coll .shx-sub:nth-child(2) .shx-t td:first-child,
.c-coll .shx-sub:nth-child(3) .shx-t td:first-child{width:auto;}
.c-coll .shx-sub .shx-t th:first-child{text-align:center;}

/* جزء التحصيل صغر بعد شيل البيان، فبنوسّع الدرج على حسابه */
.shx-cols{grid-template-columns:1.15fr 1.35fr 0.85fr;}
.c-drawer .shx-sub-b{min-height:180px;}
.c-drawer .shx-t td{padding:3px;}
.c-drawer .shx-t input,.c-drawer .shx-t select{
  height:28px!important;min-height:28px!important;font-size:12px!important;
}
.c-drawer .shx-t .exp-amt-field,
.c-drawer .shx-t .pur-amt-field{
  font-size:14px!important;font-weight:var(--fw-black)!important;
  height:30px!important;min-height:30px!important;text-align:center;
}
.c-drawer .shx-t th{font-size:0.6875rem;}
.c-drawer .shx-sub-h{font-size:11px;}
.c-drawer .shx-sub-f{font-size:11.5px;}
.c-drawer .shx-sub-f b{font-size:14px;}

@media (max-width:1250px){ .shx-cols{grid-template-columns:1fr 1fr;} }
@media (max-width:850px){ .shx-cols{grid-template-columns:1fr;} }

/* ============================================================
   9) التصغير باللمس — كان ممنوع
   ============================================================
   المشكلة: عناصر كتير كانت بتستخدم 100vw/min-width ثابتة، فلما تصغّر
   الصفحة بتفضل بعرضها وما تصغرش. الحل: نخلي العرض مرن ونسمح بالتصغير.
   ============================================================ */
/* 100% مش none: الاتنين بيمنعوا المتصفح إنه يكبّر الخط من نفسه على الموبايل،
   بس none كمان بتلغي تكبير الخط اللى المستخدم نفسه طالبه من إعدادات المتصفح. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ min-width:0; overflow-x:auto; }
.odoo-topbar,.page-body,.odoo-content{ min-width:0!important; max-width:100%; }
.enterprise-page{ min-width:0; }
.enterprise-table{ min-width:0!important; }
@media (max-width:640px){ .enterprise-table{min-width:0!important;} }

/* الجداول كان عليها min-width:620px، فالصفحة ماكانتش بتصغر عن كده مهما عملت zoom out */
.table-responsive>table{ min-width:0!important; }

/* ============================================================
   10) صندوق الفرع الذكي + نافذة سجل الورديات
   ============================================================ */

/* نافذة سجل الورديات — منفصلة زي بطاقة تعديل الموظف */
.shx-modal{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;padding:16px;}
.shx-modal[hidden]{display:none;}
.shx-modal-back{position:absolute;inset:0;background:transparent;}
.shx-modal-box{
  position:relative;width:min(920px,100%);max-height:82vh;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-xl);box-shadow:var(--e-5);overflow:hidden;
  animation:shxModalIn .2s var(--ez-out);
}
@keyframes shxModalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.shx-modal-box>header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--g-700);color:#fff;
}
.shx-modal-box>header b{font-size:var(--fs-md);font-weight:var(--fw-black);display:block;}
.shx-modal-box>header span{font-size:var(--fs-2xs);color:rgba(255,255,255,.82);}
.shx-modal-box>header button{
  width:30px;height:30px;flex:none;font-size:20px;line-height:1;
  border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  border-radius:var(--r-sm);cursor:pointer;
}
.shx-modal-box>header button:hover{background:rgba(255,255,255,.18);}
.shx-modal-body{overflow:auto;padding:10px 14px;flex:1;}
.shx-modal-body .shx-t th{
  position:sticky;top:0;background:var(--surface);z-index:2;
  font-size:var(--fs-2xs);padding:7px 6px;border-bottom:1px solid var(--border);
}
.shx-modal-body .shx-t td{padding:7px 6px;font-size:var(--fs-sm);}
.shx-modal-box>footer{
  padding:10px 16px;border-top:1px solid var(--border-soft);
  background:var(--surface-alt);font-size:var(--fs-sm);font-weight:var(--fw-black);
  text-align:end;color:var(--text);
}
body.shx-modal-open{overflow:hidden;}
@media (max-width:700px){
  .shx-modal-box{max-height:90vh;}
  .shx-modal-body .shx-t th:nth-child(2),.shx-modal-body .shx-t td:nth-child(2){display:none;}
}

/* ============================================================
   11) إصلاحات حاسمة — قواعد قاطعة تغلب أى كود أقدم
   ============================================================ */

/* ---- (أ) التصغير باللمس: السبب الحقيقي ----
   html{overflow-x:hidden} بتخلّي المتصفح يقصّ العرض عند حدود الشاشة، فالصفحة
   مابتقدرش تتعرض أصغر من الشاشة مهما عملت zoom out. وtouch-action:pan-y على
   الشريط بتلغي إيماءة الاصبعين أصلاً. الاتنين اتصلحوا هنا. */
html{overflow-x:visible!important;}
body{overflow-x:auto!important;}
html,body,.odoo-shell,.odoo-content,.page-body,*{
  touch-action:pan-x pan-y pinch-zoom;
}
.odoo-shell{min-height:auto!important;}
.nav-menu-container{touch-action:pan-x pan-y pinch-zoom!important;}

/* ---- (ب) الحقول المشروطة: قاعدة قاطعة بالكلاس مش بالـstyle ----
   أى كود قديم أو نسخة مخزّنة فى الكاش مش هتقدر تظهرها، لأن الإخفاء بقى
   !important والإظهار محتاج كلاس is-on بيتحط بالجافاسكريبت. */
/* الحقول الشرطية تُنشأ وتُحذف من الـDOM؛ لذلك لا نستخدم display:none عليها. */
.emp-select-wrap{display:none!important;}
.emp-select-wrap.is-on{display:block!important;}

/* ---- (ج) فقاعة اسم القسم والمثلث اللى شكله نجمة — اتشالوا ---- */
.nav-link-btn[data-full]::after,
.nav-link-btn[data-full]::before,
.nav-link-btn[data-full]:hover::after,
.nav-link-btn[data-full]:hover::before,
.nav-link-btn[data-full]:focus-visible::after,
.nav-link-btn[data-full]:focus-visible::before{
  content:none!important;display:none!important;
}

/* ---- (د) الشريط العلوي: لوجو أصغر ومظهر أنضف ---- */
.odoo-topbar{
  height:44px!important;min-height:44px!important;
  background:var(--bg-topbar)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
.nile-brand-badge{
  max-width:150px!important;padding:0 6px!important;gap:6px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
.brand-img-wrap{
  width:24px!important;height:24px!important;
  border-radius:var(--r-xs)!important;padding:0!important;
  background:rgba(255,255,255,.14)!important;border:0!important;
}
.brand-img-wrap img{width:100%!important;height:100%!important;object-fit:contain;}
.brand-titles b,.brand-main{font-size:12px!important;font-weight:800!important;}
.brand-sub-en{font-size:0.6875rem!important;opacity:.6!important;letter-spacing:.06em;}

.nav-menu-container .nav-link-btn{
  min-height:38px!important;height:auto!important;padding:4px 10px!important;
  border-radius:10px!important;
  font-size:12px!important;font-weight:700!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  transition:background var(--t-fast) var(--ez)!important;
}
.nav-menu-container .nav-link-btn:hover{
  background:rgba(255,255,255,.12)!important;transform:none!important;
}
.nav-menu-container .nav-link-btn.active{
  background:rgba(255,255,255,.20)!important;font-weight:800!important;
}
.nav-link-btn .nav-icon{transform:none!important;}
.tb-end{gap:5px!important;}
/* كتلة أيقونات الشريط العلوي (بحث/تنبيهات/وضع ليلي) بحجم واحد موحّد -
   كانت 3 قيم مختلفة (28/30/36px) متراكمة من تعديلات مختلفة فبانت الكتلة
   غير متسقة. ونفس درجات الشفافية المستخدمة فى باقي الشريط (--topbar-*)
   بدل أرقام rgba يدوية مكررة. */
.enterprise-search-trigger,.enterprise-notify-btn,#themeToggleBtn{
  width:32px!important;height:32px!important;
  border-radius:var(--r-sm)!important;
  background:var(--topbar-glass)!important;
  border:1px solid var(--topbar-border)!important;color:#fff!important;
  font-size:13px!important;
  display:inline-grid!important;place-items:center!important;
  transform:none!important;box-shadow:none!important;
}
.enterprise-search-trigger:hover,.enterprise-notify-btn:hover,#themeToggleBtn:hover{
  background:var(--topbar-hover)!important;transform:none!important;
}
#themeToggleBtn i{font-size:14px;line-height:1;}

/* ============================================================
   12) إصلاحات الصور — لوجو، فئات النقدية، بيان المصروفات
   ============================================================ */

/* اللوجو كان صغير أوي — رجّعناه لحجم متناسق مع البار */
.brand-img-wrap{width:30px!important;height:30px!important;border-radius:var(--r-sm)!important;}
.brand-titles b,.brand-main{font-size:12.5px!important;}
.brand-sub-en{font-size:0.6875rem!important;}
.nile-brand-badge{max-width:180px!important;}

/* خانة عدد فئات النقدية: كانت ضيقة والرقم مش باين */
.shx-denoms td:nth-child(2){width:64px!important;}
.shx-denoms .denom-input{
  height:28px!important;min-height:28px!important;
  font-size:14px!important;font-weight:800!important;
  text-align:center!important;padding:2px 4px!important;
}
.shx-denoms td:first-child{width:48px!important;font-size:11.5px;}
.shx-denoms .shx-num{font-size:12px;}

/* بيان المصروفات والمشتريات: كان بيطلع سطر منفصل ضيق جدًا.
   دلوقتي كل حقول العمود تحت بعض بعرض كامل وارتفاع مقروء. */
.c-drawer .shx-t td{padding:3px 4px!important;}
/* مهم: emp-select-wrap مش داخلة هنا خالص. لو دخلت، الـdisplay:block!important
   هيغلب قاعدة الإخفاء وخانة الموظف تظهر دايمًا - وده بالظبط اللى حصل قبل كده. */
.c-drawer .shx-t td>select,
.c-drawer .shx-t td>input[type=text]{
  display:block!important;width:100%!important;
  margin:0 0 3px 0!important;
  height:29px!important;min-height:29px!important;
  font-size:12px!important;
}
/* الغلاف بيفضل مقفول لحد ما الجافاسكريبت يضيف is-on */
.c-drawer .shx-t td>.emp-select-wrap.is-on{
  display:block!important;width:100%!important;margin:0!important;height:auto!important;
}
.c-drawer .shx-t td>.emp-select-wrap.is-on>select{
  display:block!important;width:100%!important;margin:0!important;
  height:29px!important;min-height:29px!important;font-size:12px!important;
}
.c-drawer .shx-t td>input[type=text]:last-child{margin-bottom:0!important;}
.c-drawer .exp-notes-field,.c-drawer .pur-notes-field{
  font-size:12px!important;padding:3px 8px!important;
}
.c-drawer .shx-t td:nth-child(2){width:86px;vertical-align:top;}
.c-drawer .shx-t td:last-child{width:26px;vertical-align:top;}
.c-drawer .exp-amt-field,.c-drawer .pur-amt-field{
  height:29px!important;min-height:29px!important;
  font-size:14px!important;font-weight:800!important;text-align:center!important;
}

/* الحقول اللى بيبنيها الجافاسكريبت */
.shx-cond{
  display:block!important;width:100%!important;
  height:28px!important;min-height:28px!important;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-size:12px;padding:2px 8px;
}
.shx-cond:focus{outline:0;border-color:var(--g-500);box-shadow:var(--focus-ring);}


/* ============================================================
   NILE ERP V25.9 — Premium Shell Refinement
   ============================================================ */
.odoo-topbar{
  min-height:66px!important;
  padding:7px clamp(10px,1.6vw,20px)!important;
  gap:10px!important;
  background:linear-gradient(180deg,rgba(18,116,62,.99),rgba(12,92,48,.99))!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 8px 28px rgba(8,35,22,.22)!important;
}
.odoo-content{padding-top:67px!important;}
@media(max-width:900px){.odoo-content{padding-top:62px!important;}}
@media(max-width:650px){.odoo-content{padding-top:58px!important;}}

/* اللوجو: أكبر ومتزن مع ارتفاع الشريط */
.brand-img-wrap{
  width:50px!important;height:50px!important;
  border-radius:14px!important;padding:5px!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
}
.nile-brand-badge{
  max-width:230px!important;padding:3px 12px 3px 15px!important;
  gap:10px!important;
}
.brand-name-ar{font-size:14px!important;}
.brand-sub-en{font-size:0.6875rem!important;}

/* زر الوضع الليلي: أيقونة فقط (هلال/شمس)، دائري، من غير أي كلمة نص.
   بقى بنفس درجات الشفافية (--topbar-glass/border/hover) المستخدمة فى باقي
   أزرار الشريط العلوي (البحث والتنبيهات)، وبنفس فلسفة "حركة واحدة بس:
   تغيير الخلفية - مفيش نطّ ولا تكبير" المعمول بيها فى V25.1 لباقي أزرار
   الشريط (راجع .tb-icon-btn/.enterprise-search-trigger تحت) - عشان الكتلة
   كلها تتحرك بنفس المنطق ومتبقاش حاجة واحدة "نططة" وسط أزرار هادية. */
#themeToggleBtn{
  width:32px!important;height:32px!important;
  min-width:32px!important;border:1px solid var(--topbar-border)!important;
  background:var(--topbar-glass)!important;
  border-radius:50%!important;display:inline-grid!important;
  place-items:center!important;visibility:visible!important;opacity:1!important;
  transition:background var(--t-fast) var(--ez)!important;
}
#themeToggleBtn #themeIcon{font-size:15px!important;}
#themeToggleBtn:hover{background:var(--topbar-hover)!important;}
#themeToggleBtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.35)!important;}

/* أدوات التكبير: نفس معايير باقي كتلة الأيقونات بالظبط (شفافية موحّدة،
   وحركة الخلفية بس) عشان تبان جزء طبيعي من الشريط مش عنصر مضاف بشكل مختلف. */
.nile-zoom-tools{
  display:inline-flex!important;align-items:center;gap:2px;
  padding:2px;border:1px solid var(--topbar-border);
  border-radius:10px;background:var(--topbar-glass);
  flex-shrink:0;transition:background var(--t-fast) var(--ez);
}
.nile-zoom-btn,.nile-zoom-value{
  height:30px!important;border:0!important;border-radius:7px!important;
  background:transparent!important;color:#fff!important;
  font-weight:900!important;line-height:1!important;
  display:inline-grid!important;place-items:center!important;
  transition:background var(--t-fast) var(--ez)!important;
}
.nile-zoom-btn{width:30px!important;font-size:18px!important;}
.nile-zoom-value{min-width:48px!important;padding:0 6px!important;font-size:0.6875rem!important;
  font-variant-numeric:tabular-nums;}
.nile-zoom-btn:hover,.nile-zoom-value:hover{background:var(--topbar-hover)!important;}
.nile-zoom-btn:focus-visible,.nile-zoom-value:focus-visible{
  outline:none!important;box-shadow:0 0 0 2px rgba(255,255,255,.4)!important;
}
/* لا نمنع touch/pinch على الصفحة. مقياس النظام اختياري بالإضافة إلى Zoom المتصفح. */
body.nile-ui-scaled{overflow-x:auto;}

/* حذف مساحة/كارت الترحيب القديم نهائيًا */
.v24-global-welcome{display:none!important;}

/* ============================================================
   شاشة تقفيل الوردية — تحسين بصري فوق تعريفات style.css الأساسية.
   كل القياسات (flex-basis / min-width / wrap / الألوان) مصدرها الوحيد
   style.css دلوقتي؛ هنا بس تحسين شكلي (تدرّج، ظل، كروت فرعية) ومكوّنات
   لا تتكرر فى أي مكان تانى (البحث فى القوائم، إخفاء خانة كلمة السر).
   ============================================================ */
html, body, .odoo-shell, .odoo-content, .page-body{touch-action:auto!important;}

/* بطاقة الشريط: خلفية متدرجة خفيفة، وكل خانة جوّاها كارت صغير مستقل */
.shx-bar{
  border:1px solid rgba(15,23,42,.08)!important;border-radius:16px!important;
  background:linear-gradient(135deg,var(--surface),var(--surface-alt))!important;
  box-shadow:0 8px 24px rgba(15,23,42,.08)!important;
}
.shx-bar>.shx-when,.shx-bar>.shx-f{
  border:1px solid var(--border-soft)!important;background:var(--surface)!important;
  border-radius:12px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important;
}
.shx-bar>.shx-f{padding:5px 9px 6px!important;}
.shx-bar .shx-when:first-child{
  background:linear-gradient(135deg,rgba(46,168,78,.12),rgba(46,168,78,.04))!important;
  border-color:rgba(46,168,78,.20)!important;
}
.shx-bar .shx-close-main{box-shadow:0 5px 14px rgba(46,168,78,.20)!important;}
.shx-bar label{font-size:0.6875rem!important;font-weight:900!important;color:var(--text-faint)!important;margin-bottom:3px!important;}
.shx-bar select,.shx-bar input{border-radius:8px!important;}
[data-theme="dark"] .shx-bar{border-color:rgba(255,255,255,.08)!important;box-shadow:0 8px 24px rgba(0,0,0,.25)!important;}
[data-theme="dark"] .shx-bar>.shx-when,[data-theme="dark"] .shx-bar>.shx-f{border-color:var(--border)!important;background:var(--surface-alt)!important;}

/* خانة الفرع وخانة مسؤول الشفت: كانت مربّع جوّه مربّع (حدود مزدوجة) وده اللي
   بيدّي إحساس "كبيرة وضخمة" - دلوقتي العنصر جوّه الكارت بقى بلا حدود خاصة بيه
   وخط سفلي بسيط بس، فالكارت الواحد هو اللي بيحمل الشكل، ومساحته الداخلية
   (padding) بقت مستغلة كتسمية+قيمة على سطرين مرتبين بدل فراغ حوالين حقل ضيق. */
.shx-bar .shx-f-branch label i{color:var(--nile-green);font-size:11px;}
.shx-bar .shx-f-branch,.shx-bar .shx-f-wide{gap:2px;}
.shx-bar .shx-f-branch select,.shx-bar .shx-f-branch .shx-ro,
.shx-bar .shx-f-branch .nile-search-select-trigger,
.shx-bar .shx-f-wide select,.shx-bar .shx-f-wide .nile-search-select-trigger{
  border:none!important;border-bottom:1px solid var(--border-soft)!important;
  border-radius:0!important;background:transparent!important;
  padding:0 1px!important;height:24px!important;min-height:24px!important;
  box-shadow:none!important;font-weight:800;
}
.shx-bar .shx-f-branch select:focus,.shx-bar .shx-f-wide select:focus,
.shx-bar .shx-f-branch .nile-search-select-wrap.is-open .nile-search-select-trigger,
.shx-bar .shx-f-wide .nile-search-select-wrap.is-open .nile-search-select-trigger{
  border-bottom-color:var(--nile-green)!important;
}
.shx-bar .shx-f-branch .shx-ro{height:24px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* خانة كلمة السر: مخفية فعليًا لحد ما يتحدد مسؤول الشفت. الإخفاء بسمة
   [hidden] الحقيقية (مش display:none القديمة اللي كانت بتتعارض مع
   flex-direction:column وقت الإظهار). */
#responsiblePinBox[hidden]{display:none!important;}
#responsiblePinInput{letter-spacing:3px;text-align:center;}

/* القوائم المنسدلة البحثية (searchable_select.js): ما تختفيش تحت أي
   جدول أو كارت تانى، وتاخد نفس مقاس الخانة الأصلية بالظبط فى مكانها */
/* اتشالت: اللوحة بقت fixed فى <body> وبتتظبّط بالجافاسكريبت.
   position:absolute!important هنا كانت بتكسر التظبيط الجديد. */
.shx-c,.shx-c-b,.shx-sub,.shx-sub-b,.shx-t,.shx-t tbody,.shx-t tr,.shx-t td,
.shx-cols,.shx-settle,.shx-settle-b{overflow:visible!important;}
.shx .nile-search-select-wrap{width:100%!important;}
.shx .nile-search-select-trigger{width:100%!important;border-radius:6px!important;font-size:12px!important;}
.shx-bar .nile-search-select-trigger{height:28px!important;}
.shx-t .nile-search-select-trigger{height:24px!important;min-height:24px!important;font-size:11px!important;}
.shx-settle-new .nile-search-select-trigger{height:34px!important;}
#trsSlot .nile-search-select-trigger{height:26px!important;}
#settleSlot .nile-search-select-native,
#trsSlot .nile-search-select-native{position:absolute!important;}

/* خزينة الفرع فى صفحة كشوف الحسابات: الحقول الشرطية لا تختفي بسبب الـsearch wrapper */
#supplierField .nile-search-select-wrap,
#employeeField .nile-search-select-wrap,
#expenseCategoryField .nile-search-select-wrap{width:100%!important;}
#supplierField .nile-search-select-trigger,
#employeeField .nile-search-select-trigger,
#expenseCategoryField .nile-search-select-trigger{width:100%!important;}


/* ===========================================================================
   التفاف نص الملاحظات - قاعدة عامة لكل النظام
   ===========================================================================
   الملاحظات وسجل التعديلات والتسويات كانت بتتقص أو تتراكب فوق بعضها، لأن
   خلايا الجداول متضبطة على سطر واحد (white-space:nowrap) وارتفاعات ثابتة.
   النص العربي الطويل مالوش مسافات فى كل مكان، فمن غير break-word/anywhere
   بيخرج برّه خليته ويركب على اللى جنبها.
   القاعدة دي بتخلي أى خانة ملاحظات تتمدد لتحت بدل ما تتقص أو تركب. */
td.notes-column,
td.notes-cell,
.shx-notes,
.an-note,
.table td[class*="note"],
td[class*="note"],
.audit-comment,
.comment-box,
.wrap-text {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.55 !important;
    min-height: auto !important;
    height: auto !important;
    max-width: 320px;
    padding: 8px 10px !important;
    vertical-align: top !important;
    text-align: start !important;
}

/* الصفوف مابقاش ليها ارتفاع مقصوص - بتاخد اللى المحتوى محتاجه */
.enterprise-table tr,
.an-table tr,
.shx-table tr,
.shx-t tr {
    height: auto !important;
}

/* نص طويل جدًا (سجل تدقيق/تسوية) بيتمرّر جوه خليته بدل ما يمدّ الصف كله */
.notes-expandable {
    max-height: 4.8em;
    overflow-y: auto;
    scrollbar-width: thin;
}