/* ============================================================================
   طبقة Carbon — البنية من IBM Carbon، والهوية والمقاسات من النيل
   ============================================================================
   إيه اللى اتاخد من Carbon:
     • حقول مسطّحة بخط سفلي واحد بدل إطار كامل (Carbon field)
     • حلقة تركيز جوّه الحقل (outline-offset سالب) بدل ظل برّه
     • جداول كثيفة برأس رمادي وحدود رفيعة
     • بلاطات مؤشرات مسطّحة بشريط علوي ملوّن
     • هيدر UI Shell بمؤشر سفلي للقسم النشط

   إيه اللى **ما**اتاخدش، وليه:
     • الأزرق #0f62fe والهيدر الأسود #161616 — دى هوية IBM. هوية النظام ده
       خضرا (صيدليات النيل)، فكل حاجة تفاعلية بتشاور على --cds-interactive
       وهو الأخضر المعتمد اللى عدّى فحص التباين (5.33:1 مع الأبيض).
     • مقاسات Carbon (padding 16px، حقل 48px، صف 48px) — دى بتقلّل الصفوف
       اللى بتدخل الشاشة للنص تقريبًا. المستخدم طلب الحجم يفضل صغير، فالمقاسات
       من مقياسنا المضغوط.
     • سطور الـpadding الكبيرة على أعمدة الملاحظات — دى بالذات هى اللى كانت
       بتخلّي ارتفاع الصف 57px بدل 33px.
   ============================================================================ */

/* ============================================================
   1) الحقول — Carbon Field (خط سفلي واحد)
   ============================================================ */
.cds-field .form-control,
.cds-field .form-select,
.form-control.cds,
.form-select.cds,
.an-input.cds,
.an-select.cds{
  background-color:var(--cds-field-01);
  border:0;
  border-bottom:1px solid var(--cds-border-strong);
  border-radius:0;
  color:var(--cds-text-primary);
  transition:background-color .11s var(--ez),border-color .11s var(--ez);
}
.cds-field .form-control:hover,
.cds-field .form-select:hover,
.form-control.cds:hover,.form-select.cds:hover{
  background-color:var(--surface-hover);
}
/* حلقة التركيز جوّه الحقل - علامة Carbon المميزة.
   outline-offset سالب عشان الحلقة ماتزوّدش مقاس الحقل ولا تزحلق اللى جنبه. */
.cds-field .form-control:focus,
.cds-field .form-select:focus,
.form-control.cds:focus,.form-select.cds:focus{
  outline:2px solid var(--cds-interactive);
  outline-offset:-2px;
  box-shadow:none;
  background-color:var(--cds-layer-01);
}
.cds-field .form-control::placeholder{color:var(--cds-text-placeholder);}

/* ============================================================
   2) النص فى القوائم المنسدلة — صفر قصّ
   ============================================================
   المشكلة الحقيقية: اسم الموظف أو الصنف الطويل كان بيتقص بـellipsis،
   فالمستخدم بيشوف "د. عبدالله سلامة الس…" ومش عارف ده مين بالظبط.

   ملاحظة مهمة: القاعدة دى مقصورة على **القوائم المنسدلة** - مش على خلايا
   الجداول. لو طبقناها على الجداول، عمود التاريخ بيلفّ على تلات سطور وارتفاع
   الصف يتضاعف (اتقاس: 57px بدل 33px). */
.nile-search-select-panel,
.nile-search-select-list,
.nile-search-select-item,
.dropdown-menu,
.dropdown-item{
  max-width:none;
  white-space:normal;
  text-overflow:clip;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.45;
}
.nile-search-select-item,
.dropdown-item{
  height:auto;
  min-height:var(--cds-field-height);   /* 30px مضغوط - Carbon بيقول 38 */
  display:flex;
  align-items:center;
  padding:5px 10px;
  font-size:var(--fs-sm);
}
/* عنصر القائمة اللى فيه سطرين بيفضل مقروء - مابنقصّهوش */
.nile-search-select-item{white-space:normal;}

/* ============================================================
   3) الجداول — Carbon Data Table (مضغوط)
   ============================================================ */
.cds-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--cds-layer-01);}
.cds-table thead th{
  background:var(--table-head-bg);
  color:var(--table-head-fg);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
  letter-spacing:.02em;
  text-align:start;
  padding:5px 8px;
  border-bottom:1px solid var(--cds-border-subtle);
  white-space:nowrap;
}
.cds-table tbody td{
  font-size:var(--fs-xs);
  padding:4px 8px;
  border-bottom:1px solid var(--cds-border-subtle);
  color:var(--cds-text-primary);
  vertical-align:middle;
}
.cds-table tbody tr{transition:background .11s var(--ez);}
.cds-table tbody tr:hover td{background:var(--surface-hover);}

/* ============================================================
   4) بلاطات المؤشرات — Carbon Tile بشريط علوي
   ============================================================ */
.cds-tile{
  background:var(--cds-layer-01);
  border:1px solid var(--cds-border-subtle);
  border-top:3px solid var(--cds-interactive);
  border-radius:0;                       /* Carbon مسطّح - مفيش أركان مدوّرة */
  padding:var(--cds-tile-pad);
  display:grid;gap:2px;align-content:start;
  min-width:0;
}
.cds-tile > small,.cds-tile .cds-tile-label{
  color:var(--cds-text-secondary);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cds-tile > b,.cds-tile .cds-tile-value{
  font-size:15px;
  font-weight:var(--fw-black);
  color:var(--cds-text-primary);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-num);
  direction:ltr;text-align:start;
}
.cds-tile .cds-tile-sub{color:var(--cds-text-placeholder);font-size:var(--fs-2xs);}
.cds-tile.is-success{border-top-color:var(--cds-support-success);}
.cds-tile.is-warning{border-top-color:var(--cds-support-warning);}
.cds-tile.is-error{border-top-color:var(--cds-support-error);}
.cds-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:6px;
}

/* ============================================================
   5) هيدر UI Shell — بنية Carbon بلون النيل
   ============================================================
   Carbon بيقول هيدر أسود #161616. سايبينه أخضر عن قصد: ده لون الهوية،
   واستبداله بالأسود بيمسح شخصية النظام. اللى أخدناه من Carbon هو **المؤشر
   السفلي للقسم النشط** - علامة واضحة إنك فين من غير ألوان زيادة. */
.odoo-topbar .nav-link-btn{position:relative;}
.odoo-topbar .nav-link-btn.is-active::after,
.odoo-topbar .nav-link-btn[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:6px;bottom:0;height:3px;
  background:#fff;border-radius:2px 2px 0 0;
}

/* ============================================================
   6) شبكة أقسام النظام (Department Hub)
   ============================================================ */
/* نسخة مطابقة لشاشة التطبيقات الرئيسية في أودو (Odoo home menu):
   - خلفية رمادية فاتحة #F0F1F5 ممتدة لعرض الشاشة كلها (خدعة box-shadow
     بـ100vmax + clip-path عشان نكسر حدود حاوية المحتوى من غير ما نلمس
     layout عام في base.html)
   - مفيش هيدر ولا عنوان ولا عدّاد ولا تقسيم مجموعات — أودو بيعتمد على
     الـnavbar العلوي للتعريف بالقسم
   - حقل فلترة صغير متوسّط فوق الجريد
   - جريد واحدة مسطّحة: أيقونة فلات كبيرة + الاسم بس. الأيقونة لون صافٍ
     من غير تدرجات ولا لمعة ولا ظلال تقيلة — الفلات الصافي هو روح أودو. */
.hub-page{
  max-width:1060px;margin-inline:auto;
  display:grid;gap:26px;align-content:start;grid-auto-rows:max-content;
  background:#F0F1F5;
  box-shadow:0 0 0 100vmax #F0F1F5;
  clip-path:inset(0 -100vmax);
  padding-block:10px 40px;min-height:70vh;
}
/* حقل الفلترة: متوسّط وصغير وبسيط زي أودو — أبيض بحواف رفيعة، من غير
   pill مبالغ فيه ولا توهّج. */
.hub-search{
  display:flex;align-items:center;gap:8px;
  max-width:400px;margin:0 auto;width:100%;
  background:#fff;border:1px solid #D8DADD;
  border-radius:6px;padding:8px 14px;color:#8A8D91;
  transition:border-color .16s var(--ez),box-shadow .16s var(--ez);
}
.hub-search:focus-within{
  border-color:var(--cds-interactive);
  box-shadow:0 0 0 3px rgba(46,168,78,.14);
}
.hub-search i{font-size:14px}
.hub-search input{
  border:0;outline:0;background:transparent;width:100%;
  font:inherit;font-size:13px;color:#212529;
}
.hub-grid{
  /* flex+wrap مش grid: الصف الناقص بيتوسّط فعليًا - grid auto-fill بيحجز
     خانات فاضية بعرض الحاوية كلها فالصف الناقص كان بيلزق يمين (RTL).
     V32: الفجوات اتقلّت (44→32px) مع تصغير البلاطات بطلب صاحب النظام -
     لسه فيه هواء مريح حوالين كل تطبيق زي أودو بس من غير تكبير مبالغ فيه. */
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:32px 6px;padding-top:8px;
}
.hub-grid .hub-card{width:104px;flex:0 0 104px;}
.hub-grid .hub-empty{flex:1 1 100%;}
/* البلاطة: أيقونة فلات كبيرة + الاسم تحتها بس. مفيش خلفية ولا حدود —
   الـhover بيظهر هايلايت رمادي خفيف مستدير زي أودو بالظبط. */
.hub-card{
  /* --tc بتتسند inline من باليتة القالب لكل بلاطة. القيمة الافتراضية هنا
     (أخضر النيل) احتياط لو بلاطة وصلت من غير لون - وكمان عشان متغيّر CSS
     مستخدم من غير تعريف بيبقى خطر صامت (بيقع على fallback كل حتة لوحدها). */
  --tc:#1E7B36;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 6px;border-radius:10px;
  text-decoration:none;color:inherit;text-align:center;
  transition:background .16s var(--ez);
}
/* الأيقونة: لون صافٍ 100% بدون أي تدرج أو طبقات — زي أيقونات أودو الفلات.
   حواف مستديرة خفيفة (مش pill) وظل واحد بسيط جدًا للفصل عن الخلفية.
   V32: الحجم اتصغّر (96→72px والأيقونة 44→32px) بطلب صاحب النظام
   ("الأيقونات كبيرة، صغّرها شوية") - النسبة بين الأيقونة والبلاطة محفوظة
   عشان الشكل يفضل متوازن.
   V35: تصغير تاني (72→60px والأيقونة 32→25px) بطلب صاحب النظام ("صغّر
   أيقونات صفحة الأقسام شوية كمان"). */
.hub-card-icon{
  width:60px;height:60px;display:grid;place-items:center;
  border-radius:10px;color:#fff;font-size:25px;
  background:var(--tc);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:transform .16s var(--ez),box-shadow .16s var(--ez);
}
.hub-card:hover{background:rgba(0,0,0,.045);}
.hub-card:hover .hub-card-icon{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.hub-card:active .hub-card-icon{transform:none;transition:none;}
.hub-card:focus-visible{outline:2px solid var(--cds-interactive);outline-offset:2px;}
.hub-card-title{
  font-size:12px;font-weight:700;color:#212529;line-height:1.4;
}
/* الوصف مخفي بصريًا (نمط sr-only) — لسه موجود في DOM عشان قارئات الشاشة
   واختبارات الحراسة (hub-card-desc)، والمستخدم بيشوفه كتلميح title عند
   الوقوف على البلاطة. مفيش font-size هنا عمدًا عشان قاعدة حرس الحد
   الأدنى 11px متتكسرش على عنصر مخفي أصلًا. */
.hub-card-desc{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hub-card.hub-hidden{display:none;}
.hub-empty{
  grid-column:1/-1;padding:26px;text-align:center;
  color:var(--cds-text-secondary);font-size:var(--fs-sm);
  background:var(--cds-layer-01);border:1px dashed var(--cds-border-subtle);
  border-radius:14px;
}

@media(max-width:560px){
  .hub-grid{grid-template-columns:1fr;}
  .cds-tiles{grid-template-columns:1fr 1fr;}
}

/* زرار "صفحة القسم" فى ترويسة لوحة القوائم */
.nav-launcher-actions{display:flex;align-items:center;gap:7px;}
.nav-launcher-hub{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:0;
  border:1px solid var(--cds-border-subtle);
  border-top:2px solid var(--cds-interactive);
  background:var(--cds-layer-01);
  color:var(--cds-text-primary)!important;
  font-size:var(--fs-2xs);font-weight:var(--fw-black);
  text-decoration:none;white-space:nowrap;
}
.nav-launcher-hub:hover{background:var(--surface-hover);border-color:var(--cds-interactive);}
.nav-launcher-hub i{color:var(--cds-interactive);}

/* ============================================================
   §7) شريط الأقسام V27 — العقد النهائي القاطع (آخر ملف CSS، بيكسب أي قاعدة أقدم)
   ------------------------------------------------------------
   - القوائم المنسدلة اتلغت: كل قسم لينك مباشر لصفحته (Department Hub).
   - كل قسم بلاطة أيقونة ملوّنة ثابتة المقاس (--nc) + اسمه جنبها.
   - ممنوع قصّ الأسماء (ellipsis) أو تصغير الخط لدرجة التداخل:
     الأسماء كاملة على الديسكتوب، أيقونات-فقط أنيقة على التابلت،
     صفّين ببلاطات + ميكرو-ليبل على الموبايل - من غير أي سحب خالص.
   ============================================================ */

/* ---- (أ) ممنوع قصّ أسماء الأقسام نهائيًا ---- */
.nav-menu-container .nav-link-btn > span:not(.nav-icon):not(.caret),
.nav-menu-container .nav-link-btn .nav-label{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
.nav-menu-container .nav-menu-item{flex:0 0 auto!important;min-width:0!important;}
.nav-menu-container .nav-link-btn{width:auto!important;justify-content:flex-start!important;}

/* ---- (ب) بلاطة الأيقونة الملوّنة: مقاس واحد لكل الأقسام ---- */
/* تعريف افتراضي للمتغيّر --nc: قيمته الحقيقية بتيجي inline من base.html لكل قسم،
   بس لازم يبقى ليه تعريف فى الستايل نفسه (قاعدة توكنز التصميم فى المشروع). */
.odoo-topbar .nav-link-btn{--nc:rgba(255,255,255,.16);gap:7px!important;padding:4px 9px!important;border-radius:12px!important;}
.odoo-topbar .nav-link-btn .nav-icon{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  border-radius:9px!important;
  background:var(--nc, rgba(255,255,255,.16))!important;
  color:#fff!important;
  font-size:15px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-shadow:0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.odoo-topbar .nav-link-btn:hover .nav-icon,
.odoo-topbar .nav-link-btn:focus-visible .nav-icon{
  transform:translateY(-2px) scale(1.07)!important;
  box-shadow:0 5px 12px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.25)!important;
}
/* القسم النشط: هالة بلون أيقونته بدل التعتيم - واضح من غير ما يبوّظ الشكل */
.odoo-topbar .nav-link-btn.active{
  background:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)!important;
}

/* ---- (ج) تابلت/لابتوب صغير (701-1199px): أيقونات-فقط، الاسم فى tooltip ---- */
@media (min-width:701px) and (max-width:700px){
  .odoo-topbar .nav-link-btn{padding:4px 6px!important;}
  .odoo-topbar .nav-link-btn .nav-label{display:none!important;}
  .odoo-topbar .nav-link-btn .nav-icon{
    width:32px!important;height:32px!important;flex-basis:32px!important;
    font-size:16px!important;border-radius:9px!important;
  }
  .odoo-topbar .nile-brand-copy{display:none!important;}
}

/* ---- (د) موبايل (≤700px): صفّين، كل الأقسام ظاهرة، مفيش سحب ولا زر قائمة ---- */
@media (max-width:700px){
  .odoo-topbar{
    height:auto!important;min-height:56px!important;
    flex-wrap:wrap!important;
    padding:5px 7px 9px!important;gap:5px!important;
  }
  .odoo-topbar .tb-start{display:contents!important;}
  .odoo-topbar .nile-brand-link{order:1;flex:0 0 auto;}
  .odoo-topbar .nile-brand-copy{display:none!important;}
  .odoo-topbar .brand-img-wrap{width:36px!important;height:36px!important;}
  .odoo-topbar .tb-end{order:2;flex:0 0 auto;margin-inline-start:auto;gap:4px!important;}
  .odoo-topbar .date-pill,
  .odoo-topbar .user-welcome-card,
  .odoo-topbar .nile-zoom-tools{display:none!important;}  /* التكبير باللمس (Pinch) موجود أصلاً */
  .odoo-topbar .theme-toggle-btn,
  .odoo-topbar .enterprise-search-trigger,
  .odoo-topbar .enterprise-notify-btn{width:34px!important;height:34px!important;min-width:34px!important;}
  .odoo-topbar .user-menu-btn{height:34px!important;min-width:34px!important;padding:4px!important;}
  .odoo-topbar .user-menu-btn > span{display:none!important;}

  .odoo-topbar .nav-menu-container{
    order:3;flex:1 1 100%!important;min-width:0!important;
    display:flex!important;flex-wrap:nowrap!important;
    justify-content:space-between!important;align-items:stretch!important;
    gap:3px!important;padding:3px 0 0!important;margin:0!important;
    overflow-x:auto;overflow-y:hidden!important;position:static!important;
    background:none!important;border:0!important;box-shadow:none!important;
    width:100%!important;height:auto!important;max-height:none!important;
  }
  /* 8 أقسام على صفّين (4+4): الاسم 11px مقروء (أرضية إمكانية القراءة فى المشروع)
     وكل حاجة ظاهرة من غير سحب ولا زر قائمة */
  .odoo-topbar .nav-menu-item{flex:1 1 22%!important;min-width:0!important;overflow:hidden!important;}
  .odoo-topbar .nav-link-btn{
    width:100%!important;min-height:48px!important;height:auto!important;
    flex-direction:column!important;justify-content:center!important;align-items:center!important;
    gap:2px!important;padding:4px 1px!important;border-radius:10px!important;
    font-size:11px!important;font-weight:700!important;line-height:1.15!important;
    white-space:nowrap!important;text-align:center!important;
  }
  .odoo-topbar .nav-link-btn .nav-icon{
    width:26px!important;height:26px!important;flex-basis:26px!important;
    font-size:13px!important;border-radius:7px!important;
  }
  .odoo-topbar .nav-link-btn .nav-label{
    display:block!important;max-width:100%!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .odoo-topbar .nav-link-btn:hover{transform:none!important;}

  /* مبدّل الفروع ثابت (fixed) تحت الشريط - ينزل تحت صفوف البلاطات */
  .bsw-wrap{top:158px!important;}

  /* الشريط تلته صفوف (~152px) - المحتوى بينزل بقدر الارتفاع الجديد */
  .odoo-content{padding-top:156px!important;}
}

/* شاشة ضيقة جدًا (≤430px): البلاطة تصغر شوية - الخط يفضل 11px (أرضية القراءة) */
@media (max-width:430px){
    .odoo-topbar .nav-label{display:none!important;}
  .odoo-topbar .nav-link-btn .nav-icon{width:24px!important;height:24px!important;flex-basis:24px!important;font-size:12px!important;}
}

/* ---- (هـ) أولوية المساحة للأقسام: التاريخ واسم المستخدم يتخفّوا بدري ---- */
@media (max-width:1500px){
  .odoo-topbar .date-pill{display:none!important;}
}
@media (max-width:1400px){
  .odoo-topbar .user-menu-btn > span{display:none!important;}
}

/* ==========================================================================
   §8) باس التايبوجرافي والعرض V28 — بطلب صاحب النظام: "العرض متداخل وغير مرتب
   وغير احترافي". التشخيص لقى ٣ أمراض حقيقية (مش إحساس بس):
   أ) قواعد letter-spacing سالبة (-.02em / -0.3px / -.2px) مطبّقة على نصوص
      عربية (كل h1، .page-title، عناوين اللوجين). العربي خط نسخي — الحروف
      لازم تتصل ببعضها، وأي تقارب قسري بيفصّل الوصلات فيظهر النص مكسّر
      ومتداخل. ده كان أكبر سبب للإحساس بعدم الاحترافية.
   ب) مبدّل الفروع العائم على الموبايل كان بيغطي شريط الذكر (تداخل مباشر).
   ج) كارت الترحيب على الموبايل كان بيعصّر نص التحية في عمود ضيق فتتكسر
      كلمة تحت كلمة.
   ========================================================================== */

/* (أ) تصفير التباعد الحرفي على كل النصوص — العربي ميتباعدش أبدًا.
   بنغطي العناصر النصية كلها عشان نلغي القواعد السالبة المتناثرة في الطبقات
   القديمة من غير ما نعدّلها واحدة واحدة (نفس فلسفة الطبقة دي: تصحيح مركزي
   من غير هدم). الاستثناءات اللاتينية الصرفة بترجع بتباعدها تحت مباشرة. */
h1,h2,h3,h4,h5,h6,p,td,th,li,label,small,strong,b,em,span,a,div,button,
input,select,textarea,.page-title,.page-head h1,.btn,.badge,
.form-control,.form-select{
  letter-spacing:0!important;
}
/* الاستثناءات: شعارات لاتينية صرفة — التباعد هنا مقصود وشكله حلو */
.brand-sub-en{letter-spacing:1.2px!important;}          /* "NILE ERP" */
.v24-kicker,.eyebrow{letter-spacing:.09em!important;}   /* LIVE SNAPSHOT / TREND */

/* (ب) ارتفاع سطر مريح للعربي — الـ 1.5 الافتراضي بتاع اللاتيني بيخنق
   الصاعدات والهوابط العربية. العناوين تفضل أضيق (1.5) عشان متمطش. */
body{line-height:1.65;}
h1,h2,h3,h4,h5,h6,.page-title{line-height:1.5;}

/* أرقام الجداول والمؤشرات بعرض ثابت (tabular) — الأرقام تتصف تحت بعضها
   في الأعمدة بدل ما كل رقم ياخد عرض مختلف. Plex بيدعم tnum للأرقام اللاتينية. */
.v24-kpi strong,.kpi-value,.enterprise-table td,.enterprise-table th,td.num,.num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

@media (max-width:700px){
  /* (ب-موبايل) مبدّل الفروع ينزل زر عائم أسفل يمين الشاشة فوق شريط التنقل
     السفلي (64px) — كان ثابت أعلى المحتوى وبيغطي شريط الذكر. القائمة بتفتح
     لفوق بدل تحت عشان متخرجش بره الشاشة. */
  .bsw-wrap{top:auto!important;bottom:78px!important;inset-inline-end:auto!important;inset-inline-start:10px!important;}
  .bsw-menu{inset-block-start:auto!important;inset-block-end:calc(100% + 8px)!important;}

  /* (ج-موبايل) كارت الترحيب: الأفاتار + نص التحية ياخدوا الصف الأول كامل،
     والشارات والأزرار تلف في صف تاني — مفيش تكسير كلمة-تحت-كلمة تاني */
  .v24-welcome-banner{row-gap:8px!important;}
  .v24-welcome-banner > .tw-flex-1{flex:1 1 calc(100% - 52px)!important;}
}

/* ============================================================
   V31 — تايبوجرافي صفحة الدخول (طلب صاحب النظام: "خط وكتابة
   عصرية احترافية"). الاسم العربي عنوان رئيسي بخط Plex غامق،
   والإنجليزي تحته بحروف متباعدة (letter-spacing مسموح للاتيني
   بس - العربي ممنوع عشان اتصال الحروف) باللون الدهبي #d4a93f
   بتاع إطار اللوجو، والسطرين التوضيحيين بأوزان وألوان هادية
   متدرجة. التنبيهات جوه الكارت بخط موحد وحجم مريح للقراءة.
   ============================================================ */
.login-card h5.login-brand-ar{
  /* V36: صفحة الدخول كلها بالخط القديم بطلب صاحب النظام (زي قاعدة
     .guest-wrap تحت) - اتشال Plex من هنا كمان */
  font-family:Tahoma,'Segoe UI',Arial,sans-serif!important;
  font-size:23px!important;font-weight:700!important;color:#0f2418!important;
  line-height:1.5;margin-bottom:2px!important;
}
.login-brand-en{
  text-align:center;font-family:Tahoma,'Segoe UI',Arial,sans-serif; /* V36: خط قديم */
  font-size:11px;font-weight:600;letter-spacing:2.5px!important;color:#b8902e;
  margin-bottom:12px;
}
.login-card>p.login-tagline{
  font-size:13px!important;font-weight:500;color:#52655a!important;margin-bottom:4px!important;
}
.login-card>p.login-sub{
  font-size:13px!important;font-weight:600;color:#31473a!important;margin-bottom:22px!important;
}
.login-card .alert{
  font-family:Tahoma,'Segoe UI',Arial,sans-serif; /* V36: خط قديم */
  font-size:12.5px;font-weight:600;line-height:1.7;
}

/* ============================================================
   V33 (2026-09): أيقونات زجاجية (Glassmorphism) + نايت مود صفحات الأقسام
   ------------------------------------------------------------
   الجزء الأول — الزجاجية:
   طلب المستخدم: "خلّي الأيقونات جلاسيه زجاجيه جماليه سواء في البار أو جوا القسم".
   تقنية الزجاج على لون هوية ثابت (--nc للبار / --tc للأقسام):
   • لون الهوية يفضل هو الطبقة السفلية (نحافظ على تمييز الأقسام بالألوان).
   • فوقه تدرّج قطري من أبيض شبه شفاف (أعلى) لشفاف (النص) لأسود خفيف (أسفل)
     = الانعكاس الزجاجي الكلاسيكي (لمعة علوية + عمق سفلي).
   • حد أبيض شفاف + Inset highlights (خط مضيء فوق + ظل داخلي تحت)
     يحاكي سماكة حافة الزجاج.
   • بدون backdrop-filter: خلف الأيقونة خلفية متدرجة/معقدة والأداء على
     الأجهزة الضعيفة أهم؛ التدرّج الداخلي يعطي نفس الإحساس بصفر تكلفة.
   بدائل مرفوضة: أيقونات بيضاء شفافة بدون لون (تفقد هوية الأقسام)،
   backdrop-filter: blur (تكلفة أداء + تغبيش خلفية تشتت النظر).
   الجزء الثاني — النايت مود:
   عطل مُبلّغ: صفحات الأقسام لا تتحول للوضع الليلي.
   السبب: قواعد V24 كتبت ألواناً فاتحة ثابتة (#F0F1F5 / #fff / #212529)
   خارج متغيرات الثيم. الحل: Overrides تحت [data-theme="dark"] تقرأ
   نفس متغيرات النظام (--bg-page / --surface / --text ...) فيندمج
   الهب مع باقي النظام بدل ثيم موازٍ منفصل.
   ============================================================ */

/* --- أيقونات صفحات الأقسام: زجاج ملوّن --- */
.hub-card-icon{
  /* V36: رجوع اللون الكامل بطلب صاحب النظام ("الأيقونات بقت باهتة، رجّعها
     بدرجة لونها اللي قبل") - الشفافية الـ 62% بتاعة V35 اتشالت، ولون الهوية
     رجع صافي 100% تحت اللمعة الزجاجية. الحجم الصغير (60px) ثابت زي ما طلب. */
  background:
    linear-gradient(160deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.07) 48%, rgba(0,0,0,.10) 100%),
    var(--tc);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:
    0 8px 20px rgba(15,40,25,.18),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px rgba(0,0,0,.10);
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.hub-card:hover .hub-card-icon{
  box-shadow:
    0 12px 26px rgba(15,40,25,.24),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(0,0,0,.08);
}

/* --- أيقونات البار العلوي: زجاج ملوّن فوق الشريط الأخضر --- */
.nav-link-btn .nav-icon{
  background:
    linear-gradient(160deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 50%, rgba(0,0,0,.12) 100%),
    var(--nc, rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    0 3px 10px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -6px 10px rgba(0,0,0,.14);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.nav-link-btn:hover .nav-icon,
.nav-link-btn.active .nav-icon{
  background:
    linear-gradient(160deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.14) 50%, rgba(0,0,0,.08) 100%),
    var(--nc, rgba(255,255,255,.22));
  box-shadow:
    0 5px 14px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -6px 10px rgba(0,0,0,.10);
}

/* --- النايت مود لصفحات الأقسام (إصلاح العطل المُبلّغ) --- */
[data-theme="dark"] .hub-page{
  background:var(--bg-page);
  box-shadow:0 0 0 100vmax var(--bg-page);
}
[data-theme="dark"] .hub-search{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text-faint);
}
[data-theme="dark"] .hub-search:focus-within{
  background:var(--surface-alt);
  border-color:var(--cds-interactive);
  box-shadow:0 0 0 3px rgba(62,207,106,.15);
}
[data-theme="dark"] .hub-search input{
  color:var(--text);
}
[data-theme="dark"] .hub-search input::placeholder{
  color:var(--text-faint);
}
[data-theme="dark"] .hub-card:hover{
  background:rgba(255,255,255,.06);
}
[data-theme="dark"] .hub-card-title{
  color:var(--text);
}
[data-theme="dark"] .hub-card-icon{
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 8px 20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -10px 18px rgba(0,0,0,.22);
}

/* ============================================================
   V34 (2026-09): منع التثقيل الصناعي للخط (font-synthesis)
   ------------------------------------------------------------
   عطل مُبلّغ: "حاسس إن الخط مقطع" حتى بعد ما صفحة الفحص أكدت إن
   الخطوط بتتحمّل صح (4/4 خضرا).
   التشخيص: مقارنة حرف-بحرف بين صورة المستخدم ورندر الساندبوكس أثبتت
   إن الخط نفسه (Plex) واصل فعلًا — الحروف متصلة وصحيحة، لكن الحواف
   مهتزة والنص تقيل بطريقة غريبة. السبب: عشرات القواعد في الطبقات
   القديمة بتطلب أوزان 800 و900 (page-title, stat-card, section-title,
   كروت اللوجين, fw-black على كل العناوين h1-h6...) بينما ملفات Plex
   المستضافة بتوقف عند 700. كروم في الحالة دي مش بيثبّت على 700 زي ما
   كان متوقع — بيولّد وزن صناعي: بيسمّك حواف الحرف خوارزميًا فتتلطخ
   الحواف وتتسد الفتحات الداخلية، وعلى شاشة ويندوز عادية (DirectWrite)
   النتيجة بتبان "مقطعة". لينكس بيولّدها أنضف شوية — عشان كده الرندر
   عندي كان باين سليم والصورة عند المستخدم وحشة.
   الحل المركزي (نفس فلسفة الطبقة: تصحيح واحد بدل تعديل عشرات القواعد):
   ١) font-synthesis:none على الجذر — أي طلب وزن أكبر من 700 يرجع
      أقرب وزن حقيقي (700) بحدوده النضيفة بدل التسميك الصناعي. الخاصية
      موروثة فبتغطي كل العناصر والقواعد القديمة والمستقبلية.
   ٢) توحيد توكن --fw-black على 700 عشان التوكن يعكس الواقع.
   بديل مرفوض: تنزيل أوزان Plex 800/900 — غير موجودة أصلًا من IBM
   (العائلة بتوقف عند 700)، وخط تاني هيغيّر هوية النظام اللي اختارها
   صاحبه من معاينة 6 فونتات.
   ============================================================ */
html{font-synthesis:none;}
:root{--fw-black:700;}

/* ============================================================
   V35 (2026-09): خط أملأ للنظام + صفحة اللوجين بالخط القديم
   ------------------------------------------------------------
   ١) "خلي الخط مليان شوية لأنه خفيف": معظم نصوص النظام كانت بتورّث
      الوزن الافتراضي 400. رفعنا وزن الجسم كله لـ 500 (ملف Plex 500
      الحقيقي موجود، فالرفع بيستخدم حروفًا حقيقية مش تسميك صناعي -
      خصوصًا بعد ما V34 قفل الـ font-synthesis). العناوين والأزرار
      اللي ليها أوزان صريحة مش بتتأثر.
   ٢) "صفحة التسجيل تكون لوحدها بالخط القديم": حاوية الضيوف
      (.guest-wrap - اللوجين وصفحات ما قبل الدخول) بقت بخط ويندوز
      الكلاسيكي (Tahoma ثم Segoe UI) اللي كان باين قبل ترقية الخطوط.
      الـ !important ضروري لأن حقول الإدخال والأزرار ليها خطوط
      افتراضية من المتصفح وبوتستراب ومش بتورّط تلقائيًا.
   ============================================================ */
body{font-weight:500;}
.guest-wrap, .guest-wrap input, .guest-wrap button, .guest-wrap select, .guest-wrap textarea{
  font-family:'IBM Plex Sans Arabic','Alexandria','Segoe UI',Arial,sans-serif !important;
}

/* ============================================================
   V36 (2026-09): تنظيم جداول تقارير التحليلات
   ------------------------------------------------------------
   بطلب صاحب النظام ("التقارير مش مرتبة ولا منظمة"):
   ١) .an-emp-name — اسم الموظف في جداول التحليل الشهري ممنوع يتكسر
      على سطور (كان بيتعصر لحروف رأسية لما الجدول يضيق).
   ٢) رؤوس مجموعات الجداول (.an-th-group) — صف رأس تجميعي فوق رؤوس
      الأعمدة (زي "البيع" و"التكلفة والربح" في تقرير الأصناف الشامل)
      عشان الجداول العريضة تتقري كمجموعات مش كأعمدة سايبة.
   ============================================================ */
.an-emp-name{white-space:nowrap;}
.an-table thead tr.an-th-group th{
  background:var(--surface-alt);color:var(--text-faint);
  font-size:11px;font-weight:700;text-align:center;
  border-bottom:1px solid var(--border);padding:4px 8px;
}
.an-table thead tr.an-th-group th:not(:last-child){border-inline-end:1px solid var(--border);}

@media(max-width:700px){.odoo-topbar .nav-label{display:none!important}}

@media(max-width:700px){.odoo-topbar .nav-label,.odoo-topbar .nav-link-btn[data-full]::after,.odoo-topbar .nav-link-btn[data-full]::before{display:none!important}}