/* =====================================================
   صيدليات النيل - NILE PHARMACIES ENTERPRISE ULTRA UI
   الهوية الرسمية المعتمدة (الأخضر الصيدلي الملكي والبرتقالي الدافئ)
   ===================================================== */

/* الفونت الأساسي بقى Alexandria (متغيّر الأوزان 100-900) مستضاف محليًا في
   static/fonts - شيلنا التحميل من جوجل نهائيًا عشان السيستم يشتغل بنفس الشكل
   على الشبكة الداخلية حتى لو النت فاصل. Cairo وPlus Jakarta Sans كانوا بيجوا
   من جوجل فاتستبدلوا: Alexandria بيغطي العربي واللاتيني بكل الأوزان. */
/* fonts.css is linked directly from base.html so the browser can preload it. */

:root {
  color-scheme: light;
  /* Nile Pharmacy Official Brand Palette */
  --nile-green: #2EA84E;
  --nile-green-dark: #1E7B36;
  --nile-green-deep: #165B27;
  --nile-green-glow: rgba(46, 168, 78, 0.35);
  
  --nile-orange: #FF7A1A;
  --nile-orange-dark: #E65C00;
  --nile-orange-glow: rgba(255, 122, 26, 0.35);

  --odoo-primary: #1E7B36;
  --odoo-primary-dark: #165B27;
  --odoo-primary-light: #2EA84E;
  --odoo-teal: #00A09D;

  /* Light Theme Canvas */
  --bg-page: #F3F6F9;
  --bg-topbar: linear-gradient(135deg, #19582A 0%, #1E7B36 50%, #299745 100%);
  --topbar-text: #FFFFFF;
  --topbar-glass: rgba(255, 255, 255, 0.14);
  --topbar-hover: rgba(255, 255, 255, 0.22);
  --topbar-active: rgba(255, 255, 255, 0.32);
  --topbar-border: rgba(255, 255, 255, 0.20);

  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;
  --surface-hover: #F1F5F9;
  --border: #CBD5E1;
  --border-soft: #E2E8F0;

  --text: #1E293B;
  --text-dim: #475569;
  --text-faint: #64748B;

  --gold: #D97706;
  --gold-dim: #B45309;
  --teal: #0D9488;
  --blue: #2563EB;
  --violet: #7C3AED;
  --red: #EF4444;
  --amber: #F59E0B;

  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-dropdown: 0 16px 40px -4px rgba(15, 23, 42, 0.18), 0 6px 16px -2px rgba(15, 23, 42, 0.08);
  --shadow-topbar: 0 4px 24px rgba(22, 91, 39, 0.35);
}

/* ----------------- Dark Theme Canvas ----------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --odoo-primary: #2EA84E;
  --odoo-primary-dark: #1E7B36;
  --odoo-primary-light: #43C165;

  --bg-page: #0B121A;
  --bg-topbar: linear-gradient(135deg, #0D1B13 0%, #11281A 50%, #0A1911 100%);
  --topbar-text: #F1F5F9;
  --topbar-glass: rgba(255, 255, 255, 0.07);
  --topbar-hover: rgba(255, 255, 255, 0.14);
  --topbar-active: rgba(255, 255, 255, 0.24);
  --topbar-border: rgba(255, 255, 255, 0.10);

  --surface: #121F2C;
  --surface-alt: #0E1824;
  --surface-hover: #1A2C3D;
  --border: #22374E;
  --border-soft: #1B2B3E;

  --text: #F1F5F9;
  --text-dim: #94A3B8;
  --text-faint: #64748B;

  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.40);
  --shadow-dropdown: 0 20px 50px rgba(0, 0, 0, 0.70);
  --shadow-topbar: 0 4px 28px rgba(0, 0, 0, 0.55);
}

/* -----------------------------------------------------------------------
   إصلاح تباين حقيقي فى الوضع الداكن: عناصر Bootstrap الجاهزة (bg-light,
   bg-white, text-dark, alert-*) بتيجي بألوان ثابتة من مكتبة Bootstrap نفسها
   مش من متغيرات النظام - يعني فى الوضع الداكن كانت بتفضل بألوان الوضع الفاتح
   بالظبط (نص غامق على خلفية غامقة = نص مختفي عمليًا، أو "جزيرة" فاتحة وسط
   صفحة داكنة). الإصلاح: أي حد من العناصر دي، لو موجود داخل صفحة فى الوضع
   الداكن، بياخد ألوان النظام الداكن نفسها بدل ألوان Bootstrap الثابتة.
   ----------------------------------------------------------------------- */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-body { background: var(--surface-alt) !important; color: var(--text) !important; }
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black { color: var(--text) !important; }
[data-theme="dark"] .border-white { border-color: var(--border) !important; }

[data-theme="dark"] .alert-success { background: rgba(46, 168, 78, 0.16); color: #6FE39A; border-color: rgba(46, 168, 78, 0.35); }
[data-theme="dark"] .alert-danger  { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.4); }
[data-theme="dark"] .alert-warning { background: rgba(255, 122, 26, 0.18); color: #FDBA74; border-color: rgba(255, 122, 26, 0.4); }
[data-theme="dark"] .alert-info    { background: rgba(37, 99, 235, 0.18); color: #93C5FD; border-color: rgba(37, 99, 235, 0.4); }

* {
  /* V36: صاحب النظام قال "غيّر الخط ده مش عايزه خالص" - Alexandria بقى
     الأساسي (متغيّر الأوزان 100-900 فالعناوين الغامقة بترسم صح من غير
     تغميق صناعي)، وPlex باقي احتياطي لو ملفات Alexandria اتشالت */
  font-family: 'Alexandria', 'IBM Plex Sans Arabic', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
html, body {
  background: var(--bg-page);
  margin: 0;
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
  /* overflow-x:hidden اتشال: هو اللى كان مانع تصغير الصفحة (zoom out) لأنه
     بيقصّ العرض عند حدود الشاشة فمابتقدرش تتعرض أصغر منها. */
}
a { color: var(--link); text-decoration: none; transition: all .15s ease; }
a:hover { color: var(--nile-orange); }

/* =====================================================
   PREMIUM ODOO TOPBAR DESIGN
   ===================================================== */
.odoo-shell { min-height: 100vh; display: flex; flex-direction: column; }

.odoo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 1vw, 12px);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--topbar-border);
  padding: clamp(6px, 0.8vw, 0px) clamp(8px, 1.5vw, 16px);
  min-height: 60px;
  flex-wrap: nowrap;
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  color: var(--topbar-text);
  box-shadow: var(--shadow-topbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* التجميد بـposition:fixed معناه الشريط بقى خارج تدفق الصفحة تمامًا، فمحتاجين نسيب مساحة
   فارغة بارتفاعه فى أول المحتوى تحته عشان أول عنصر فى الصفحة ميختفيش وراه. */
.odoo-content { padding-top: 61px; }
@media (max-width: 900px) { .odoo-content { padding-top: 55px; } }
@media (max-width: 650px) { .odoo-content { padding-top: 51px; } }

.tb-start, .tb-end {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 10px);
}
/* باج حقيقي كان بيسبب اختفاء زرار المظهر وزرار اسم المستخدم برّه حدود الشاشة على بعض
   عروض الشاشات (مكفيش مساحة كافية لكل عناصر الشريط فى صف واحد، ومفيش تمرير أفقي متاح
   بسبب overflow-x:hidden على الصفحة كلها). الحل: نضمن إن tb-end (المظهر + المستخدم)
   منها تصغّرش أو تختفي أبدًا، ونخلي منطقة الروابط فى النص هي اللي تتمرر أفقيًا لو محتاجة. */
.tb-start { flex: 1 1 auto; min-width: 0; }
.tb-end { flex-shrink: 0; }
.user-welcome-card { flex-shrink: 2; }

/* ---------- BRANDING LOGO (لوجو صيدليات النيل الحقيقي) ---------- */
.nile-brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 4px 10px 4px 14px;
  border-inline-end: 1px solid var(--topbar-border);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.nile-brand-badge:hover {
  transform: translateY(-1px);
}
.brand-img-wrap {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--topbar-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--topbar-border);
  flex-shrink: 0;
  transition: transform .2s ease, background .2s ease;
}
.brand-img-wrap:hover { transform: translateY(-1px); background: var(--topbar-hover); }
.brand-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.brand-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-name-ar {
  font-weight: 900;
  font-size: clamp(13px, 1.3vw, 16.5px);
  color: #FFFFFF;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  min-width: 0;
}
.brand-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 20px;
}
.brand-name-ar .tag-pro {
  background: linear-gradient(135deg, #FF7A1A 0%, #E65C00 100%);
  color: #FFF;
  font-size:0.6875rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(230, 92, 0, 0.45);
  flex-shrink: 0;
}
.brand-sub-en {
  font-size:0.6875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1.2px;
  font-family: 'Alexandria', 'IBM Plex Sans Arabic', 'Cairo', sans-serif; /* V36: Alexandria أولًا */
  text-transform: uppercase;
}

/* Hotline Pill Badge */
.hotline-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: var(--nile-green-dark);
  font-weight: 900;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 1.5px solid #FF7A1A;
}
.hotline-pill i {
  color: #FF7A1A;
  font-size: 14px;
}

/* Executive User Welcome & Date Info - بيصغّر تلقائيًا على الشاشات الأصغر لكن مايتقصش خالص */
.user-welcome-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(2px, 0.35vw, 4px) clamp(6px, 0.9vw, 12px);
  background: var(--topbar-glass);
  border: 1px solid var(--topbar-border);
  border-radius: 24px;
  font-size: clamp(9px, 0.85vw, 13px);
  font-weight: 600;
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.user-welcome-card .greeting-avatar {
  width: clamp(17px, 1.7vw, 26px);
  height: clamp(17px, 1.7vw, 26px);
  border-radius: 50%;
  background: linear-gradient(135deg, #FF7A1A 0%, #E65C00 100%);
  color: #FFF;
  font-weight: 900;
  font-size: clamp(9px, 0.9vw, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 122, 26, 0.4);
  flex-shrink: 0;
}
.user-welcome-card strong {
  color: #FFF;
  font-weight: 800;
}
.date-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 12px);
  background: var(--topbar-glass);
  border: 1px solid var(--topbar-border);
  border-radius: 24px;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  flex-shrink: 0;
}
.date-pill i {
  color: #FFD54F;
}
.live-clock-sep { opacity: 0.5; }
.live-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #FFD54F;
  min-width: 62px;
  display: inline-block;
  text-align: center;
}

/* ---------- خانة البحث القابلة للاختيار (Selectable Search) ---------- */
.searchable-dropdown-panel {
  display: none;
  position: fixed;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  z-index: 1600;
}
.searchable-dropdown-panel.show { display: block; }
.searchable-dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.searchable-dropdown-item:last-child { border-bottom: none; }
.searchable-dropdown-item:hover { background: var(--surface-hover); color: var(--nile-green-dark); }
.searchable-dropdown-search {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--nile-green);
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  background: var(--surface-alt);
}

/* ---------- NAVIGATION MENU (HOVER DROPDOWNS) ---------- */
.nav-menu-container {
  display: flex;
  align-items: center;
  gap: clamp(0px, 0.2vw, 4px);
  flex: 1 1 auto;
  min-width: 40px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.nav-menu-item {
  position: relative;
  flex-shrink: 0;
}
.nav-link-btn {
  position: relative;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: clamp(10.5px, 1.05vw, 13.5px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  overflow: visible;
}
.nav-link-btn:hover, .nav-menu-item:hover > .nav-link-btn {
  background: var(--topbar-hover);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
  transform: translateY(-1px) scale(1.015);
}
.nav-link-btn:active { transform: translateY(0) scale(0.96); transition-duration: .1s; }
.nav-link-btn.active {
  background: var(--topbar-active);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.15);
}
/* بلاطة أيقونة القسم: مقاس ثابت ولون مميز لكل قسم (--nc بيتحط inline فى
   base.html) - الشكل ده بيدّي كل قسم "بيت" واضح فالأيقونات متدخلش فى بعضها،
   وبيخلي البار مقروء من أول نظرة حتى قبل ما تقرا أي اسم. */
.nav-link-btn .nav-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--nc, rgba(255, 255, 255, .16));
  color: #FFFFFF;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease;
}
.nav-link-btn:hover .nav-icon { transform: translateY(-2px) scale(1.07); box-shadow: 0 5px 12px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav-link-btn .nav-label { line-height: 1.1; }
.nav-link-btn .caret {
  font-size:0.6875rem;
  opacity: .75;
  transition: transform .2s ease;
}
.nav-menu-item:hover .caret {
  transform: rotate(180deg);
}

/* =====================================================
   LUXURY FLYOUT & MEGA MENU STYLING (PERFECT VIEWPORT CONSTRAINTS)
   ===================================================== */
.nav-hover-menu {
  display: none !important;
  position: fixed !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.22), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
  min-width: 260px;
  max-width: calc(100vw - 20px) !important;
  padding: 10px !important;
  z-index: 12000 !important;
  margin: 0 !important;
  animation: flyoutSlide .18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flyoutSlide {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* حالة الفتح بالنقر فقط */
.nav-hover-menu.menu-open {
  display: block !important;
}

/* القائمة الميجا العريضة للأقسام الكبرى (تصميم عمودين متناسق تماماً بعرض مدمج وذكي) */
.nav-hover-menu.mega-menu {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  width: 530px !important;
  min-width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
  padding: 16px 18px !important;
}

.nav-hover-menu.mega-menu.menu-open {
  display: flex !important;
}

.nav-hover-menu.mega-menu .mega-col {
  flex: 1 1 50% !important;
  min-width: 210px !important;
  padding: 0 6px !important;
  border-inline-end: 1px solid var(--border-soft) !important;
  border-bottom: none !important;
  margin: 0 !important;
}

.nav-hover-menu.mega-menu .mega-col:last-child {
  border-inline-end: none !important;
}

.dropdown-header-title {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--nile-green-dark) !important;
  padding: 3px 4px 6px !important;
  margin-bottom: 6px !important;
  border-bottom: 2px solid rgba(46, 168, 78, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: 0.15px !important;
  white-space: nowrap !important;
}

.hover-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 9px !important;
  margin-bottom: 2px !important;
  border-radius: 7px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.hover-item:hover {
  background: var(--surface-hover) !important;
  color: var(--nile-green-dark) !important;
  transform: translateX(-2px) !important;
}

.hover-item.active {
  background: var(--nile-green) !important;
  color: #FFFFFF !important;
}

.hover-item.active .item-icon {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.hover-item .item-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  background: var(--surface-alt) !important;
  flex-shrink: 0 !important;
}

.hover-item-divider {
  height: 1px !important;
  background: var(--border-soft) !important;
  margin: 5px 2px !important;
}

@media (max-width: 600px) {
  .nav-hover-menu.mega-menu {
    flex-direction: column !important;
    width: 92vw !important;
    min-width: 270px !important;
    max-width: calc(100vw - 20px) !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .nav-hover-menu.mega-menu .mega-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-inline-end: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }
}
/* ---------- TOPBAR RIGHT CONTROLS ---------- */
.export-dropdown { position: relative; }
.export-btn {
  background: linear-gradient(135deg, rgba(255, 122, 26, 0.32) 0%, rgba(230, 92, 0, 0.32) 100%);
  border: 1px solid rgba(255, 122, 26, 0.55);
  color: #FFF;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 800;
  border-radius: 20px;
  padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1.1vw, 14px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all .2s ease;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.export-btn:hover {
  background: linear-gradient(135deg, rgba(255, 122, 26, 0.55) 0%, rgba(230, 92, 0, 0.55) 100%);
  box-shadow: 0 4px 14px rgba(255, 122, 26, 0.4);
  color: #FFF;
}
.export-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  min-width: 260px;
  padding: 8px;
  display: none;
  z-index: 1100;
  animation: flyoutSlide .22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.export-dropdown.pinned-open .export-menu { display: block; }
.export-menu.show-export { display: block; }
.export-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.export-item:hover {
  background: var(--surface-hover);
  color: var(--nile-green-dark);
  transform: translateX(-3px);
}

/* Theme Switcher Button */
.theme-switch-btn {
  background: var(--topbar-glass);
  border: 1px solid var(--topbar-border);
  color: var(--topbar-text);
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: clamp(12px, 1.1vw, 16px);
  transition: all .2s ease;
  flex-shrink: 0;
}
.theme-switch-btn:hover {
  background: var(--topbar-hover);
  transform: rotate(20deg) scale(1.05);
}

/* User Profile Badge */
.user-menu { position: relative; }
.user-menu-btn {
  background: var(--topbar-glass);
  border: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  padding: clamp(3px, 0.4vw, 4px) clamp(7px, 0.9vw, 10px) clamp(3px, 0.4vw, 4px) clamp(4px, 0.5vw, 6px);
  border-radius: 24px;
  cursor: pointer;
  color: var(--topbar-text);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  transition: all .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.user-menu-btn:hover {
  background: var(--topbar-hover);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.avatar-sm {
  width: clamp(22px, 2.1vw, 28px);
  height: clamp(22px, 2.1vw, 28px);
  border-radius: 50%;
  background: linear-gradient(135deg, #FF7A1A 0%, #E65C00 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(11px, 1vw, 13px);
  box-shadow: 0 2px 8px rgba(255, 122, 26, 0.4);
  flex-shrink: 0;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  min-width: 220px;
  padding: 14px;
  display: none;
  z-index: 1100;
}
.user-dropdown.show { display: block; animation: flyoutSlide .22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ud-name { font-weight: 800; color: var(--text); font-size: 14.5px; }
.ud-role { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ud-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.ud-logout:hover { color: #DC2626; }

/* ---------- GUEST (LOGIN) — NILE PHARMACY PREMIUM ---------- */
.guest-wrap{
  min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:28px 16px;
  background:url('/static/login_bg.jpg') center center/cover no-repeat;
  isolation:isolate;
}
.guest-wrap::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(7,43,25,.40),rgba(16,93,48,.18) 48%,rgba(10,42,28,.34));pointer-events:none}
.guest-wrap::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 43%,rgba(255,255,255,.18),transparent 34%);pointer-events:none}
.login-card{
  position:relative;z-index:2;width:min(470px,94vw);padding:78px 38px 30px;
  border:1px solid rgba(255,255,255,.48);border-radius:28px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);
  box-shadow:0 30px 80px rgba(4,38,22,.30),inset 0 1px 0 rgba(255,255,255,.7);
}
.login-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.42);border-radius:20px;pointer-events:none}
.login-card .brand-mark{
  position:absolute;top:-48px;left:50%;transform:translateX(-50%);width:104px;height:104px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;margin:0;
  border:4px solid #d4a93f;box-shadow:0 12px 30px rgba(0,0,0,.25),0 0 0 8px rgba(255,255,255,.16);z-index:3
}
.login-card .brand-mark img{width:78%;height:78%;object-fit:contain}
.login-card h5{position:relative;color:#13261b;font-size:19px;line-height:1.35;margin-bottom:8px!important;font-weight:900;letter-spacing:-.2px}
.login-card>p{position:relative;color:#31473a!important}
.login-card>p:nth-of-type(2){font-size:13px!important;margin-bottom:22px!important;color:#52655a!important}
.login-card .alert{position:relative;border-radius:12px}
.login-card label{color:#31473a;font-weight:800}
.login-field-wrap{position:relative}
.login-field-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:2;color:#2ea84e;font-size:17px;pointer-events:none}
.login-input.form-control{
  min-height:50px;padding:10px 44px 10px 44px!important;border-radius:14px!important;border:1px solid rgba(43,86,60,.22)!important;
  background:rgba(255,255,255,.76)!important;color:#17271e!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(20,60,36,.04);font-weight:700
}
.login-input.form-control:focus{border-color:#2ea84e!important;box-shadow:0 0 0 4px rgba(46,168,78,.12),inset 0 1px 0 rgba(255,255,255,.8)!important}
.login-password-toggle{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#6b7c72;cursor:pointer;z-index:2}
.login-password-toggle:hover{background:rgba(46,168,78,.09);color:#1e7b36}
.login-extra-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-top:7px}
.login-extra-row>span{display:flex;align-items:center;gap:5px;order:2}
.login-extra-row>a{order:1;color:#3e5548!important;text-decoration:none;font-weight:700}
.login-extra-row a:hover{color:#1e7b36!important}
.login-extra-row input{accent-color:#2ea84e}
.login-extra-row label{font-weight:700!important;color:#53675b!important}
.login-card .btn-brand{
  position:relative;min-height:50px;border-radius:14px!important;border:0!important;background:linear-gradient(135deg,#1E7B36,#165B27)!important;
  box-shadow:0 10px 22px rgba(25,130,63,.28);font-size:15px;font-weight:900;transition:transform .18s ease,box-shadow .18s ease
}
.login-card .btn-brand:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(25,130,63,.34)}
.login-card .btn-brand:active{transform:translateY(0)}
.login-card>.text-center.mt-3{position:relative;margin-top:18px!important}
.login-card>.text-center.mt-3 a{color:#4f6257!important;font-weight:700}
.login-legal-links{position:fixed;bottom:20px;left:0;right:0;text-align:center;z-index:3}
.login-legal-links a{color:rgba(255,255,255,.92);font-size:12px;text-decoration:none;margin:0 9px;text-shadow:0 1px 4px rgba(0,0,0,.35);font-weight:700}
.login-legal-links a:hover{text-decoration:underline}
.login-footer-credit{position:fixed;bottom:4px;left:0;right:0;text-align:center;z-index:3;
  font-size:0.6875rem;color:rgba(255,255,255,.45);letter-spacing:.5px;font-weight:400;pointer-events:none}
@media(max-width:600px){
  .guest-wrap{align-items:center;padding:68px 12px 60px}
  .login-card{width:min(430px,96vw);padding:72px 20px 25px;border-radius:24px}
  .login-card .brand-mark{width:92px;height:92px;top:-43px}
  .login-card h5{font-size:17px}
  .login-legal-links{bottom:13px}
}
/* ---------- PAGE CONTENT ---------- */
.odoo-content { flex: 1; min-width: 0; }
.app-footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px 22px;
  font-size:11px;color:var(--text-faint,#8FA3C0);opacity:.6;}
.app-footer .footer-dot{opacity:.5;}
.app-footer .footer-credit{cursor:default;letter-spacing:.4px;transition:opacity .2s;}
.app-footer .footer-credit:hover{color:var(--gold,#E0B04E);opacity:1;}
.page-body { padding: 10px 40px 50px; max-width: 1800px; margin: 0 auto; box-shadow: inset 0 1px 0 var(--border); }
.page-title { color: var(--text); font-weight: 800; margin-bottom: 8px; font-size: 1.4rem; }
.page-title:empty { display: none; margin: 0; }

.page-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 22px; margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.page-header .welcome { font-size: 15px; color: var(--text-dim); }
.page-header .welcome strong { color: var(--nile-green); font-weight: 800; }
.page-header .datebar { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- CARDS & KPI PANELS ---------- */
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 15px 17px; box-shadow: var(--shadow-card); position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-dropdown); }
.stat-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--icon-c, var(--nile-green)); }
.stat-card .icon-badge {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--icon-c, var(--nile-green)) 14%, transparent); color: var(--icon-c, var(--nile-green)); font-size: 18px; margin-bottom: 0;
}
[data-theme="dark"] .stat-card .icon-badge.bg-light,
.stat-card .icon-badge.bg-light { background: color-mix(in srgb, var(--icon-c, var(--nile-green)) 14%, transparent) !important; }
.stat-card .label { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.stat-card .value { font-size: 22px; font-weight: 800; color: var(--text); margin-top: 2px; }
.stat-card .sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.stat-card.tone-teal { --icon-c: var(--nile-green); }
.stat-card.tone-blue { --icon-c: var(--blue); }
.stat-card.tone-violet { --icon-c: var(--violet); }
.stat-card.tone-gold { --icon-c: var(--nile-orange); }
.stat-card.tone-red { --icon-c: var(--red); }
.stat-card.acc-خزينة { --icon-c: var(--nile-green); }
.stat-card.acc-باي-موب { --icon-c: var(--blue); }
.stat-card.acc-انستا-باي { --icon-c: var(--violet); }
a:has(> .stat-card) { color: inherit; display: block; text-decoration: none; }
a:has(> .stat-card):hover .stat-card { border-color: var(--icon-c, var(--nile-green)); }

/* تصغير الأيقونات عالميًا فى كل الصفحة - واجهة أنضف وأقل ضخامة (استثناء اللوجو/الأيقونات
   الأساسية فى الشريط العلوي والقائمة، دول محتفظين بحجمهم زي ما هو) */
.card-panel i.bi, .section-title i.bi, .table i.bi, .btn i.bi, .badge i.bi,
h1 i.bi, h2 i.bi, h3 i.bi, h4 i.bi, h5 i.bi, .page-title i.bi {
  font-size: 0.85em;
}
.stat-card .icon i.bi { font-size: 17px !important; }

.card-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-card);
}
/* شبكة أمان: أي جدول من غير غلاف .table-responsive (موجودة فى شاشات كتير قديمة فى النظام)
   بيخلي البطاقة نفسها تتمرر أفقيًا بدل ما محتواها يفيض ويتداخل مع العناصر جنبها - بيحل مشكلة
   "الجداول داخلة فى بعضها" فورًا وعلى مستوى النظام كله، من غير الحاجة لتعديل كل شاشة لوحدها. */
.card-panel { overflow-x: auto; }
.card-panel > table, .card-panel table:not(.table-responsive table) { max-width: 100%; }
.section-title { font-weight: 800; color: var(--text); margin-bottom: 16px; font-size: 17px; }

/* ---------- TABLES ---------- */
.table { background: transparent; color: var(--text); margin-bottom: 0; font-size: 14px; }
.table thead th {
  background: var(--surface-alt); color: var(--text-dim); font-weight: 800; font-size: 13.5px;
  border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .2px; padding: 13px 16px;
}
.table td, .table th { vertical-align: middle; font-size: 14px; border-color: var(--border-soft); padding: 12px 16px; }
.table-sm > :not(caption) > * > * { padding: 9px 12px; font-size: 13.5px; }
.table-hover > tbody > tr:hover > * { background: var(--surface-hover); color: var(--text); }
.table-bordered { border-color: var(--border-soft); }
.table-light, .table-light > td, .table-light > th { background: var(--surface-alt) !important; color: var(--text) !important; }
.table-secondary, .table-secondary > td { background: var(--surface-hover) !important; color: var(--text) !important; }
.table-danger, .table-danger > td { background: rgba(239, 68, 68, 0.12) !important; color: var(--text) !important; }
.table-responsive { border-radius: var(--radius-md); border: 1px solid var(--border-soft); }

/* ---------- FORMS & SMART KEYBOARD FOCUS ---------- */
.form-control, .form-select {
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-size: 13.5px; border-radius: var(--radius-sm);
  padding: 8px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.form-control:focus, .form-select:focus {
  background: var(--surface); border-color: var(--nile-green); color: var(--text);
  box-shadow: 0 0 0 0.18rem rgba(46, 168, 78, 0.22);
  outline: none;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-alt); color: var(--text-dim); }
.form-label { color: var(--text-dim); margin-bottom: 4px; }
.form-check-input { background-color: var(--surface); border-color: var(--border); }
.form-check-input:checked { background-color: var(--nile-green); border-color: var(--nile-green); }
.perm-allow:checked { background-color: var(--success, #16a34a); border-color: var(--success, #16a34a); }
.perm-view:checked { background-color: var(--info, #2563eb); border-color: var(--info, #2563eb); }
.perm-deny:checked { background-color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
.input-group-text { background: var(--surface-alt); border-color: var(--border); color: var(--text-dim); }

/* ---------- BUTTONS ---------- */
.btn-brand {
  background: linear-gradient(135deg, var(--nile-green-dark) 0%, var(--nile-green-deep) 100%);
  border: 1px solid var(--nile-green-deep); color: #FFF; font-weight: 700; border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(46, 168, 78, 0.25);
}
.btn-brand:hover { background: var(--nile-green-dark); color: #FFF; box-shadow: 0 4px 14px rgba(46, 168, 78, 0.35); }
.btn-outline-secondary { color: var(--text-dim); border-color: var(--border); border-radius: var(--radius-sm); }
.btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.btn-outline-primary { color: var(--nile-green); border-color: var(--nile-green); border-radius: var(--radius-sm); }
.btn-outline-primary:hover { background: var(--nile-green); color: #FFF; }
.btn-outline-success { color: var(--teal); border-color: var(--teal); border-radius: var(--radius-sm); }
.btn-outline-success:hover { background: var(--teal); color: #FFF; }
.btn-outline-danger { color: var(--red); border-color: var(--red); border-radius: var(--radius-sm); }
.btn-outline-danger:hover { background: var(--red); color: #FFF; }

/* ---------- BADGES & ALERTS ---------- */
.badge.bg-light { background: var(--surface-hover) !important; color: var(--text) !important; }
.badge.bg-secondary { background: var(--surface-alt) !important; color: var(--text-dim) !important; border: 1px solid var(--border); }
.badge.bg-success { background: rgba(46, 168, 78, 0.15) !important; color: #1E7B36 !important; border: 1px solid rgba(46, 168, 78, 0.3); font-weight: 700; }
.badge.bg-danger { background: rgba(239, 68, 68, 0.15) !important; color: #DC2626 !important; border: 1px solid rgba(239, 68, 68, 0.3); font-weight: 700; }
.badge.bg-warning { background: rgba(255, 122, 26, 0.18) !important; color: #C04D00 !important; border: 1px solid rgba(255, 122, 26, 0.4); font-weight: 700; }

/* حالة الفرق فى تقفيل الشفتات: مطابق=أخضر، فى حدود المسموح=أزرق، فوق المسموح=أحمر */
.badge-status-ok, .badge-status-allowed, .badge-status-over {
  display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 800;
}
.badge-status-ok { background: rgba(46, 168, 78, 0.15); color: #1E7B36; border: 1px solid rgba(46, 168, 78, 0.35); }
.badge-status-allowed { background: rgba(37, 99, 235, 0.15); color: #2563EB; border: 1px solid rgba(37, 99, 235, 0.35); }
.badge-status-over { background: rgba(239, 68, 68, 0.15); color: #DC2626; border: 1px solid rgba(239, 68, 68, 0.35); }
.badge.bg-info { background: rgba(37, 99, 235, 0.15) !important; color: #1D4ED8 !important; border: 1px solid rgba(37, 99, 235, 0.3); font-weight: 700; }

.alert { border-radius: var(--radius-md); border-width: 1px; }
.alert-success { background: rgba(46, 168, 78, 0.12); color: #1E7B36; border-color: rgba(46, 168, 78, 0.25); }
.alert-danger { background: rgba(239, 68, 68, 0.12); color: #B91C1C; border-color: rgba(239, 68, 68, 0.25); }
.alert-warning { background: rgba(255, 122, 26, 0.15); color: #9A3E00; border-color: rgba(255, 122, 26, 0.3); }
.alert-info { background: rgba(37, 99, 235, 0.12); color: #1E40AF; border-color: rgba(37, 99, 235, 0.25); }

/* ---------- MISC ---------- */
.total-box { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 18px; }
.total-box .t-label { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.total-box .t-value { font-size: 21px; font-weight: 800; color: var(--text); }

/* ---------- كروت مؤشرات كشف حساب المورد (KPIs) + بار أعمار الديون + كونسول التسوية ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 992px) { .kpi-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
.kpi-card { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px 14px; }
.kpi-card .k-label { font-size: 11.5px; color: var(--text-dim); font-weight: 700; margin-bottom: 4px; }
.kpi-card .k-value { font-size: 19px; font-weight: 800; color: var(--text); }
.kpi-card.kpi-highlight { background: rgba(255, 122, 26, 0.10); border-color: rgba(255, 122, 26, 0.3); }
.kpi-card.kpi-highlight .k-value { color: #C2540A; }

.aging-bar { display: flex; width: 100%; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-soft); }
.aging-seg { min-width: 3px; }
.aging-seg.seg-current { background: #9CA3AF; }
.aging-seg.seg-b1_30 { background: #FACC15; }
.aging-seg.seg-b31_60 { background: #FB923C; }
.aging-seg.seg-b61_90 { background: #F87171; }
.aging-seg.seg-b90_plus { background: #DC2626; }
.aging-legend-item { display: flex; align-items: center; gap: 5px; }
.aging-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.aging-dot.seg-current { background: #9CA3AF; }
.aging-dot.seg-b1_30 { background: #FACC15; }
.aging-dot.seg-b31_60 { background: #FB923C; }
.aging-dot.seg-b61_90 { background: #F87171; }
.aging-dot.seg-b90_plus { background: #DC2626; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.status-pill.paid { background: rgba(46, 168, 78, 0.15); color: #1E7B36; border: 1px solid rgba(46, 168, 78, 0.3); }
.status-pill.partial { background: rgba(255, 190, 26, 0.18); color: #92620A; border: 1px solid rgba(255, 190, 26, 0.35); }
.status-pill.open { background: rgba(239, 68, 68, 0.15); color: #B91C1C; border: 1px solid rgba(239, 68, 68, 0.3); }

.recon-item { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; }
.recon-alloc-form select { max-width: 140px; }

/* ---------- معالج الاستيراد بالجملة العام (شاشات: الجدول الرسمي/بصمة/فواتير المشتريات) ---------- */
.imp-wizard { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 16px; }
.imp-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.imp-err-list { max-height: 220px; overflow-y: auto; padding-inline-start: 18px; margin-bottom: 0; }
.imp-summary .status-pill { font-size: 12px; }
.card { background: var(--surface); border-color: var(--border); color: var(--text); border-radius: var(--radius-md); }
.modal-content { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-lg); }

/* ---------- نظام النافذة المنبثقة الاحتياطي - يضمن الشكل الصح حتى لو Bootstrap من الإنترنت
   اتأخر أو اتحجب (خلفية معتمة، تمركز فى النص، تمرير داخلي لو المحتوى طويل) ---------- */
.modal.nile-modal-open {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1060;
  overflow-y: auto;
  padding: 30px 12px;
}
.modal.nile-modal-open .modal-dialog {
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
}
.modal.nile-modal-open .modal-dialog.modal-xl { max-width: 1100px; }
.modal.nile-modal-open .modal-dialog.modal-lg { max-width: 900px; }
.modal.nile-modal-open .modal-dialog.modal-sm { max-width: 400px; }
.modal.nile-modal-open .modal-content {
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.modal.nile-modal-open .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
}
.nile-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1055;
}
body.nile-modal-body-lock { overflow: hidden; }

/* حجم أصغر لخانات النوافذ المنبثقة تحديدًا (بطاقة الموظف مثلًا) - عشان أكبر عدد من الحقول
   يظهر مع بعض من غير ما تحتاج تتمرر كتير، ولو احتجت تتمرر يبقى شريط التمرير واضح ومضمون */
.modal .form-control, .modal .form-select {
  padding: 6px 10px;
  font-size: 12.5px;
  min-height: 32px;
}
.modal .form-label { font-size: 12px; margin-bottom: 3px; }
.modal .row.g-3 { --bs-gutter-y: 0.6rem; }
.modal .row.g-3 > * { padding-top: 0.4rem; }
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: var(--surface-alt); }
.modal-body::-webkit-scrollbar-thumb { background: var(--nile-green); border-radius: 10px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1350px) {
  .date-pill { display: none; }
}
@media (max-width: 1200px) {
  .hotline-pill { display: none; }
}
@media (max-width: 991.98px) {
  .nav-menu-container { padding-top: 0; border-top: 0; }
  .page-body { padding: 16px; }
}


/* =========================================================
   RESPONSIVE TOPBAR V2 — صف واحد دائمًا + القوائم داخل الشاشة
   ========================================================= */
.odoo-topbar{
  flex-wrap:nowrap !important;
  height:64px;
  min-height:64px;
  padding:6px clamp(8px,1.2vw,18px);
  overflow:visible;
}
.tb-start{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(3px,.55vw,9px);
  overflow:hidden;
}
.tb-end{flex:0 0 auto;min-width:max-content;}
.nile-brand-badge{min-width:0;max-width:210px;padding-inline:6px 10px;gap:7px;}
.brand-img-wrap{width:40px;height:40px;border-radius:10px;}
.brand-titles{min-width:0;overflow:hidden;}
.brand-sub-en{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-menu-container{
  flex:1 1 auto !important;
  min-width:0 !important;
  flex-wrap:nowrap !important;
  overflow-x:clip;
  overflow-y:visible;
  scrollbar-width:none;
  white-space:nowrap;
  padding:0 !important;
  border:0 !important;
}
.nav-menu-container::-webkit-scrollbar{display:none;}
.nav-menu-item{flex:0 0 auto;}
.nav-link-btn{font-size:clamp(10px,.9vw,13px);padding:6px clamp(5px,.65vw,10px);gap:4px;}
.nav-hover-menu{max-width:calc(100vw - 16px);}
.nav-hover-menu.mega-menu{max-width:calc(100vw - 16px);}
.user-menu{position:relative;flex:0 0 auto;}
.user-menu-btn{max-width:180px;white-space:nowrap;overflow:hidden;}
.user-menu-btn > span{overflow:hidden;text-overflow:ellipsis;}
.user-dropdown{
  position:fixed !important;
  z-index:9999 !important;
  min-width:0 !important;
  margin:0 !important;
}

/* رفع قسم إدخال الوردية وتكثيفه بصريًا بدون لمس بلوك تقفيل الشيفت */
.page-body{padding-top:10px;}
.page-title{margin-bottom:10px;}
.shift-entry-panel{margin-top:-2px;}
.shift-entry-header{
  padding:14px 20px 12px;
  min-height:62px;
  background:linear-gradient(135deg,var(--surface),var(--surface-alt));
  position:relative;
}
.shift-entry-header:before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--nile-green),var(--nile-green-dark));
}
.shift-entry-title{font-size:19px!important;}
.shift-date-badge{min-width:120px;padding:7px 11px;}
.shift-basic-card{padding:17px 18px;margin-bottom:14px;background:linear-gradient(180deg,var(--surface-alt),var(--surface));}
.shift-basic-card .row{--bs-gutter-y:.7rem;}
.shift-basic-card .form-control,.shift-basic-card .form-select{min-height:40px;}
.shift-basic-card .form-label{margin-bottom:5px;}

@media (max-width:1200px){
  .brand-titles{display:none;}
  .nile-brand-badge{max-width:58px;border-inline-end:0;padding-inline:2px 6px;}
  .nav-link-btn{font-size:0.6875rem;padding-inline:5px;}
}
@media (max-width:900px){
  .odoo-topbar{height:58px;min-height:58px;padding-inline:6px;}
  .brand-img-wrap{width:36px;height:36px;}
  .user-welcome-card{display:none;}
  .nav-menu-container{gap:1px;}
  .theme-switch-btn{padding:4px 6px!important;}
  .user-menu-btn{padding:4px 6px!important;}
  .page-body{padding-inline:10px;padding-top:8px;}
}
@media (max-width:600px){
  .odoo-topbar{height:54px;min-height:54px;}
  .nav-link-btn{font-size:0.6875rem;padding:5px 4px;}
  .nav-link-btn .nav-icon{font-size:13px;}
  .nile-brand-badge{padding-inline:0 4px;}
  .shift-entry-header{padding:11px 13px 10px;min-height:54px;}
  .shift-entry-title{font-size:16px!important;}
  .shift-date-badge{min-width:104px;padding:6px 8px;}
  .shift-basic-card{padding:15px 12px;}
}

/* =========================================================
   FINAL RESPONSIVE POLISH — TOPBAR + SHIFT PAGE
   ========================================================= */
.odoo-topbar{overflow:visible!important;flex-wrap:nowrap!important;}
.tb-start{min-width:0!important;overflow:visible!important;}
.nav-menu-container{overflow-x:clip!important;overflow-y:visible!important;flex-wrap:nowrap!important;gap:2px!important;min-width:0!important;}
.nav-menu-item{flex:0 0 auto!important;}
.nav-link-btn .caret{flex:0 0 auto;font-size:0.6875rem!important;}
.nile-brand-badge{max-width:230px!important;}

/* القائمة المنسدلة: تفتح بالكليك وتتموضع بالـ JS داخل الشاشة */
.nav-hover-menu{display:none!important;position:fixed!important;z-index:12000!important;margin:0!important;}
.nav-hover-menu.menu-open{display:block!important;}
.nav-hover-menu.mega-menu.menu-open{display:flex!important;}
.user-dropdown{z-index:12001!important;}

/* عنوان إدخال الوردية أصغر وأعلى */
.shift-entry-panel{margin-top:-8px!important;margin-bottom:14px!important;}
.shift-entry-header{padding:10px 18px 9px!important;min-height:50px!important;}
.shift-entry-title{font-size:16px!important;line-height:1.3!important;}
.shift-entry-title:before{width:28px!important;height:28px!important;border-radius:8px!important;font-size:18px!important;}
.shift-date-badge{min-width:108px!important;padding:6px 9px!important;border-radius:10px!important;}
.shift-entry-panel form{padding:13px 18px 18px!important;}
.shift-basic-card{padding:14px 16px!important;margin-bottom:12px!important;}
.shift-basic-card .row{--bs-gutter-y:.45rem!important;}
.shift-basic-card .form-control,.shift-basic-card .form-select{min-height:38px!important;}
.shift-basic-card .form-label{font-size:11.5px!important;}

/* البحث والتصفية: لوحة واحدة مرتبة */
.shift-history-filters{padding:15px 18px!important;border-radius:14px!important;background:linear-gradient(180deg,var(--surface),var(--surface-alt))!important;}
.history-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--border-soft);}
.history-filter-head .section-title{font-size:14px!important;}
.filter-hint{font-size:0.6875rem;color:var(--text-faint);font-weight:600;}
.history-filter-form{--bs-gutter-x:.65rem!important;--bs-gutter-y:.5rem!important;}
.history-filter-form .form-label{font-size:0.6875rem!important;color:var(--text-faint);font-weight:800!important;}
.history-filter-form .form-control,.history-filter-form .form-select{min-height:37px!important;font-size:12px!important;border-radius:9px!important;}
.history-filter-form .btn{min-height:37px!important;border-radius:9px!important;font-weight:800;}

/* KPI أفقية واحترافية */
.shift-kpi-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px!important;margin-bottom:14px!important;}
.shift-kpi-row .box{min-width:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:12px 15px!important;border-radius:13px!important;background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:0 5px 18px rgba(15,23,42,.045)!important;position:relative;overflow:hidden;}
.shift-kpi-row .box:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--nile-green);}
.shift-kpi-row .box:nth-child(2):before{background:#2563EB;}
.shift-kpi-row .box:nth-child(3):before{background:#F59E0B;}
.shift-kpi-row .box:nth-child(4):before{background:#EF4444;}
.shift-kpi-row .l{font-size:0.6875rem!important;color:var(--text-faint)!important;font-weight:800!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shift-kpi-row .v{font-size:19px!important;font-weight:900!important;color:var(--text)!important;white-space:nowrap;direction:ltr;}

@media(max-width:1200px){
  .brand-titles,.date-pill{display:none!important;}
  .nile-brand-badge{max-width:58px!important;padding-inline:2px!important;}
  .nav-link-btn{font-size:0.6875rem!important;padding-inline:3px!important;}
}
@media(max-width:950px){
  .user-welcome-card{display:none!important;}
  .nav-link-btn{font-size:0.6875rem!important;}
  .nav-link-btn .caret{display:none!important;}
  .shift-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:650px){
  .brand-img-wrap{width:34px!important;height:34px!important;}
  .history-filter-head{align-items:flex-start;flex-direction:column;gap:3px;}
  .filter-hint{font-size:0.6875rem;}
  .shift-kpi-row{grid-template-columns:1fr;}
}

/* ==========================================================
   نسخة النظام للطباعة/PDF - "نسخة النظام" الاحترافية
   ========================================================== */
@media print {
  body { background: #FFFFFF !important; }
  .odoo-topbar, .app-footer, .export-wrap, .btn, form, .alert,
  .export-dropdown, .theme-switch-btn, .user-menu, .no-print { display: none !important; }
  .odoo-shell, .odoo-content, .page-body { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .card-panel { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .page-title { font-size: 20px !important; margin-bottom: 12px; }
  table { width: 100% !important; border-collapse: collapse !important; }
  table th, table td { border: 1px solid #999 !important; color: #000 !important; padding: 6px 8px !important; }
  table thead th { background: #EEEEEE !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]:after { content: ""; }
  .badge { border: 1px solid #999 !important; color: #000 !important; background: #FFF !important; }
}


/* =========================================================
   NILE ERP — UNIVERSAL RESPONSIVE SYSTEM V17
   الهدف: نفس الواجهة تتكيف مع Desktop / Laptop / Tablet / Mobile
   بدون قص المحتوى أو خروج القوائم خارج الشاشة.
   ========================================================= */
/* html overflow-x:hidden اتشال - كان بيمنع الزوم أوت */
body { overflow-x: auto; width: auto; min-width: 0; }  /* auto مش hidden عشان الزوم أوت يشتغل */
.odoo-shell, .odoo-content, .page-body { width: 100%; min-width: 0; max-width: 100%; }
.page-body { padding-inline: clamp(10px, 2vw, 28px); }
.page-body > *, .card, .card-body, .row, [class*="col-"], .modal-dialog, .modal-content { min-width: 0; max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }

/* سطح المحتوى: البطاقات والجداول لا تكسر عرض الشاشة */
.card, .panel, .section-card, .content-card { overflow: hidden; }
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.table-responsive > table { min-width: 620px; margin-bottom: 0; }
.form-control, .form-select { width: 100%; min-width: 0; }
.row { --bs-gutter-x: clamp(.55rem, 1vw, 1rem); }

/* سطح التصفح الرئيسي: لا يتم ضغط النصوص حتى تتداخل */
.odoo-topbar { width: 100%; max-width: 100vw; }
.tb-start { min-width: 0 !important; }
.nav-menu-container { min-width: 0 !important; }
.nav-link-btn { min-width: 0 !important; }

/* القوائم المنسدلة: دائمًا داخل الـviewport مهما كان مكان الزر */
.nav-hover-menu {
  box-sizing: border-box !important;
  width: min(530px, calc(100vw - 24px)) !important;
  max-height: min(72vh, 620px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.nav-hover-menu.mega-menu { width: min(530px, calc(100vw - 24px)) !important; }
.nav-hover-menu .hover-item { min-width: 0 !important; }
.nav-hover-menu .hover-item > span:last-child { min-width: 0; overflow-wrap: anywhere; white-space: normal !important; }

/* الهاتف: لا يوجد تمرير أفقي للـTopbar - كل الأقسام ظاهرة فى صف تانٍ ثابت. */
@media (max-width: 700px) {
  /* ============ موبايل: الشريط صفّين وكل الأقسام ظاهرة (مفيش سحب ولا زر قائمة) ============
     الصف الأول: اللوجو + مبدّل الفروع + أدوات النهاية (مستخدم/مظهر/تنبيهات).
     الصف الثاني: كل أقسام النظام بلاطات أيقونة ملوّنة + اسم صغير تحتها -
     موزّعة بالتساوي على عرض الشاشة، فكل حاجة باينة من غير أي تمرير. */
  .odoo-topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 5px 7px 7px !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  /* tb-start بيتذوّب: اللوجو والناف بار بقوا أولاد الشريط مباشرة عشان نقدر
     نوزّعهم على صفّين بالـorder */
  .tb-start { display: contents !important; }
  .nile-brand-link { order: 1; flex: 0 0 auto; }
  .nile-brand-copy { display: none !important; }
  .brand-img-wrap { width: 36px !important; height: 36px !important; }
  .odoo-topbar > .bsw-wrap { order: 2; flex: 0 1 auto; min-width: 0; }
  .odoo-topbar > .bsw-wrap .bsw-trigger span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-end { order: 3; flex: 0 0 auto; margin-inline-start: auto; gap: 4px !important; }
  .user-welcome-card, .date-pill { display: none !important; }
  .nile-zoom-tools { display: none !important; }  /* التكبير باللمس (Pinch) موجود أصلاً */
  .theme-toggle-btn, .enterprise-search-trigger, .enterprise-notify-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .user-menu-btn { height: 34px !important; min-width: 34px !important; padding: 4px !important; }
  .user-menu-btn > span { display: none !important; }

  /* قواعد بلاطات الأقسام على الموبايل مركزها carbon_layer.css §7 (آخر ملف)
     عشان ميبقاش فيه مصدرين لنفس العقد. */

  .page-body { padding: 10px !important; }
  .page-title { font-size: 17px !important; margin-bottom: 9px !important; }
  .app-footer { flex-wrap: wrap; gap: 6px; font-size:0.6875rem; }

  /* الحقول تتحول تلقائيًا لعمود واحد على الهاتف */
  .row > [class*="col-"] { width: 100%; }
  .row > .col-auto { width: auto; max-width: 100%; }

  /* بطاقات الإحصائيات: عمودان عند الهاتف، والبطاقة لا تضغط النص */
  .shift-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .shift-kpi-row .box { padding: 10px !important; }
  .shift-kpi-row .l { white-space: normal !important; line-height: 1.3; }
  .shift-kpi-row .v { font-size: 16px !important; }
}

@media (max-width: 430px) {
  .odoo-topbar { padding-inline: 5px !important; }
  .nav-link-btn .nav-icon { width: 24px !important; height: 24px !important; flex-basis: 24px !important; font-size: 12px !important; }
  .shift-kpi-row { grid-template-columns: 1fr !important; }
  .page-body { padding-inline: 7px !important; }
}

/* التابلت: كل الأقسام ظاهرة في صف واحد، لكن بأبعاد مرنة دون تداخل */
@media (min-width: 701px) and (max-width: 1199px) {
  /* ============ تابلت/لابتوب صغير: بلاطات أيقونة ملوّنة فقط ============
     بدل تصغير الخط لحد ما الأسماء كانت بتتقصّ وتدخل فى بعضها، بنخفي الليبل
     خالص ونسيب بلاطة الأيقونة الملوّنة تتكلم - والاسم الكامل فى title tooltip.
     كده كل الأقسام ظاهرة كاملة من غير سحب ولا تداخل على أي عرض. */
  .odoo-topbar { gap: 4px !important; padding-inline: 6px !important; }
  .nile-brand-copy, .user-welcome-card, .date-pill { display: none !important; }
  .brand-img-wrap { width: 36px !important; height: 36px !important; }
  .nav-menu-container { gap: 4px !important; justify-content: flex-start !important; }
  .nav-menu-item { flex: 0 0 auto !important; }
  .nav-link-btn { padding: 4px 6px !important; gap: 0 !important; }
  .nav-link-btn .nav-label { display: none !important; }
  .nav-link-btn .nav-icon {
    width: 32px !important; height: 32px !important; flex-basis: 32px !important;
    font-size: 16px !important; border-radius: 9px !important;
  }
  .tb-end { gap: 3px !important; }
}

/* منع النصوص الطويلة من كسر البطاقات أو الخروج من الشاشة */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.page-title, .alert, td, th, label, .form-text, .text-break {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Modal عالمي: المحتوى يتكيف مع كل شاشة */
.modal-dialog { width: min(96vw, 1000px) !important; margin: .75rem auto !important; }
.modal-content { max-height: calc(100dvh - 1.5rem); }
.modal-body { overflow-x: hidden; }
@media (max-width: 600px) {
  .modal-dialog { width: calc(100vw - 12px) !important; margin: 6px auto !important; }
  .modal-content { border-radius: 14px !important; }
  .modal-header, .modal-footer { padding: 9px 11px !important; }
  .modal-body { padding: 10px !important; }
}


/* =====================================================
   V19 ENTERPRISE UX LAYER
   ===================================================== */
.enterprise-notify-btn{position:relative;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--topbar-border);border-radius:12px;color:var(--topbar-text);background:var(--topbar-glass);text-decoration:none;flex:0 0 auto;transition:transform .15s ease,background .15s ease}
.enterprise-notify-btn:hover{background:var(--topbar-hover);color:#fff;transform:translateY(-1px)}
.enterprise-notify-btn i{font-size:16px}.enterprise-notify-badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#dc2626;color:#fff;font:800 9px/18px 'Cairo',sans-serif;text-align:center;border:2px solid var(--surface)}
.tb-icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--topbar-border);border-radius:12px;color:var(--topbar-text);background:var(--topbar-glass);text-decoration:none;flex:0 0 auto;transition:transform .28s cubic-bezier(0.34, 1.56, 0.64, 1),background .2s ease,box-shadow .2s ease}
.tb-icon-btn:hover{background:var(--topbar-hover);color:#fff;transform:translateY(-2px) scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tb-icon-btn:active{transform:translateY(0) scale(0.92);transition-duration:.1s}
.tb-icon-btn i{font-size:16px}
.enterprise-search-trigger{height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--topbar-border);border-radius:12px;background:var(--topbar-glass);color:var(--topbar-text);font:700 11px 'Cairo',sans-serif;cursor:pointer;white-space:nowrap}
.enterprise-search-trigger:hover{background:var(--topbar-hover)}.enterprise-search-trigger kbd{font:700 9px monospace;padding:2px 5px;border:1px solid rgba(255,255,255,.25);border-radius:5px;background:rgba(0,0,0,.12)}
.enterprise-search-overlay{position:fixed;inset:0;background:transparent;z-index:30000;display:none;padding:8vh 16px 16px}.enterprise-search-overlay.is-open{display:block}
.enterprise-search-panel{width:min(720px,100%);margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:hidden}.enterprise-search-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-soft)}.enterprise-search-head>i{color:var(--nile-green);font-size:18px}.enterprise-search-head input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:700 14px 'Cairo',sans-serif}.enterprise-search-head button{border:0;background:var(--surface-alt);color:var(--text-dim);width:34px;height:34px;border-radius:9px}.enterprise-search-results{max-height:60vh;overflow:auto;padding:8px}.enterprise-search-result{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:var(--text);font-weight:700;text-decoration:none}.enterprise-search-result:hover{background:var(--surface-hover);color:var(--nile-green)}.enterprise-search-result i{color:var(--text-faint)}.enterprise-search-empty{text-align:center;padding:35px 10px;color:var(--text-faint)}
.enterprise-page-header{margin-bottom:18px}.enterprise-notification-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.enterprise-notification-card{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--border);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-card);color:var(--text);text-decoration:none;min-width:0;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.enterprise-notification-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-dropdown);color:var(--text)}.notification-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--surface-alt);flex:0 0 auto;font-size:19px}.severity-danger .notification-icon{color:#dc2626;background:rgba(239,68,68,.1)}.severity-warning .notification-icon{color:#d97706;background:rgba(245,158,11,.1)}.severity-info .notification-icon{color:#2563eb;background:rgba(37,99,235,.1)}.notification-body{min-width:0;flex:1}.notification-title{font-weight:900;font-size:14px;margin-bottom:3px}.notification-text{font-size:12px;color:var(--text-dim);overflow-wrap:anywhere}.notification-arrow{color:var(--text-faint)}.enterprise-empty-state{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed var(--border);border-radius:18px;background:var(--surface)}.enterprise-empty-state i{font-size:48px;color:var(--nile-green)}.enterprise-empty-state h4{margin:12px 0 5px;font-weight:900}.enterprise-empty-state p{margin:0;color:var(--text-dim)}
.enterprise-notification-card{position:relative}
.notification-link-area{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--text);flex:1;min-width:0}
.notif-read{opacity:.55}
.notif-unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#dc2626;margin-inline-start:6px;vertical-align:middle}
.notif-mark-read-btn{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}
.notif-mark-read-btn:hover{background:var(--nile-green);color:#fff;border-color:var(--nile-green)}
/* Dense-data safety: every flex/grid child may shrink without forcing horizontal overflow. */
.odoo-content,.page-body,.card-panel,.stat-card,.table-responsive,.row,[class*="col-"]{min-width:0}.table-responsive{max-width:100%}.form-control,.form-select,.btn{max-width:100%}img,svg,video,canvas{max-width:100%;height:auto}
@media (max-width:900px){.enterprise-search-trigger span,.enterprise-search-trigger kbd{display:none}.enterprise-search-trigger{width:40px;padding:0;justify-content:center}.enterprise-notification-grid{grid-template-columns:1fr}}
@media (max-width:700px){.enterprise-notify-btn,.enterprise-search-trigger{height:38px;width:38px}.enterprise-notify-badge{min-width:16px;height:16px;line-height:16px;font-size:0.6875rem}.enterprise-search-overlay{padding:12vh 8px 8px}.enterprise-search-panel{border-radius:16px}}
@media (max-width:430px){.enterprise-notify-btn{width:36px}.enterprise-search-trigger{width:36px}.enterprise-search-head{padding:10px}.enterprise-search-result{font-size:12px}}
/* V20 Enterprise Control Center */
.enterprise-page{max-width:1600px;margin:auto;padding:24px;min-width:0}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:22px}.eyebrow{font-size:11px;letter-spacing:.12em;opacity:.6}.page-head h1{margin:.25rem 0;font-size:30px}.page-head p{margin:0;opacity:.68}.head-actions{display:flex;gap:8px;flex-wrap:wrap}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.kpi-card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card)}.kpi-card{padding:18px}.kpi-label{font-size:13px;opacity:.65}.kpi-value{font-size:27px;font-weight:800;margin:7px 0}.kpi-meta{font-size:12px;opacity:.55}.control-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);gap:14px;margin-bottom:14px}.panel{padding:18px;overflow:hidden}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.panel-title h2{font-size:17px;margin:0}.table-wrap{overflow:auto}.enterprise-table{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}.enterprise-table th,.enterprise-table td{padding:11px 10px;border-bottom:1px solid var(--border-soft);white-space:nowrap;color:var(--text)}.enterprise-table th{text-align:right;font-size:12px;opacity:.6}.enterprise-table td{font-size:13px}.badge-soft{border-radius:999px;padding:5px 9px;background:var(--surface-alt);color:var(--text-dim);font-size:11px}.badge-soft.success{background:rgba(46,168,78,.14);color:#1E7B36}[data-theme="dark"] .badge-soft.success{color:#6FE39A}.badge-soft.danger{background:rgba(239,68,68,.14);color:#B91C1C}[data-theme="dark"] .badge-soft.danger{color:#FCA5A5}.checks{display:grid;gap:4px}.check-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px}.check-row:hover{background:var(--surface-alt)}.check-row>div{min-width:0;flex:1}.check-row small{display:block;opacity:.55;margin-top:2px}.status-dot{width:9px;height:9px;border-radius:50%;background:#30a46c;flex:none}.status-dot.bad{background:#e5484d}.check-status{font-size:11px;font-weight:700}.payroll-summary{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px}.payroll-summary>div{padding:14px;background:var(--surface-alt);border-radius:12px}.payroll-summary strong,.payroll-summary b{display:block;font-size:18px;color:var(--text)}.payroll-summary small{display:block;opacity:.58;margin-top:4px}.mini-list{display:grid;gap:7px}.mini-list>div{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--border-soft);border-radius:10px}.empty{padding:20px;text-align:center;opacity:.55}.audit-integrity p{margin:0;opacity:.72}@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-grid{grid-template-columns:1fr}}@media(max-width:640px){.enterprise-page{padding:12px}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:23px}.kpi-grid{grid-template-columns:1fr}.payroll-summary{grid-template-columns:1fr}.enterprise-table{min-width:560px}}

/* =====================================================
   NILE ERP V21 — GLOBAL ENTERPRISE DESIGN SYSTEM
   Progressive enhancement layer. Existing page-specific CSS remains compatible.
   ===================================================== */
:root{
  --color-primary:var(--nile-green-dark);--color-secondary:var(--nile-orange);
  --color-success:#16803c;--color-warning:#b45309;--color-danger:#c62828;--color-info:#2563eb;
  --color-background:var(--bg-page);--color-surface:var(--surface);--color-border:var(--border);--color-text:var(--text);
  --focus-ring:0 0 0 3px rgba(46,168,78,.20);
  --ease:cubic-bezier(.2,.7,.2,1);
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:0;box-shadow:var(--focus-ring);}
.page-head h1,h1{letter-spacing:-.02em}.page-head p{color:var(--text-dim);max-width:72ch}
.panel,.card-panel,.content-card,.section-card{border:1px solid var(--border-soft);box-shadow:var(--shadow-card);}
.btn{border-radius:9px;font-weight:700;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.badge,.badge-soft{white-space:nowrap}
.empty{padding:28px 16px;text-align:center;color:var(--text-faint)}

.nile-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.nile-table-search{position:relative;min-width:min(320px,100%);flex:1}
.nile-table-search i{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none}
.nile-table-search input{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;padding:8px 36px 8px 12px;min-height:38px}
.nile-table-tools{display:flex;align-items:center;gap:8px}.nile-tool-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;padding:8px 11px;font:700 12px Cairo;cursor:pointer}.nile-tool-btn:hover{background:var(--surface-hover)}
.nile-table-count{font-size:12px;color:var(--text-faint)}
.nile-table-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 0;color:var(--text-dim);font-size:12px}
.nile-page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}.nile-page-btn:disabled{opacity:.45;cursor:not-allowed}
.nile-column-menu{position:fixed;z-index:30000;min-width:210px;max-width:calc(100vw - 24px);max-height:55vh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-dropdown);padding:8px}
.nile-column-menu label{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;font-size:12px;cursor:pointer}.nile-column-menu label:hover{background:var(--surface-hover)}
.nile-toast-host{position:fixed;z-index:50000;inset-inline-end:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;max-width:min(390px,calc(100vw - 32px))}
.nile-toast{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-dropdown);font-size:13px;animation:nileToastIn .22s var(--ease)}
.nile-toast button{margin-inline-start:auto;border:0;background:transparent;color:var(--text-faint);font-size:20px;cursor:pointer}.nile-toast-success i{color:var(--color-success)}.nile-toast-danger i{color:var(--color-danger)}.nile-toast-warning i{color:var(--color-warning)}.nile-toast-info i{color:var(--color-info)}
@keyframes nileToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:700px){
  body{padding-bottom:70px}
  .nile-mobile-bottom-nav{position:fixed;z-index:14000;inset-inline:0;bottom:0;height:64px;background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--border);box-shadow:0 -8px 28px rgba(15,23,42,.10);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(12px)}
  .nile-mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-faint);font-size:0.6875rem;font-weight:700;text-decoration:none}.nile-mobile-bottom-nav i{font-size:18px}.nile-mobile-bottom-nav a.active{color:var(--num-ok)}
  .nile-table-toolbar{align-items:stretch}.nile-table-search{min-width:100%}.nile-table-tools{justify-content:space-between}
  .enterprise-table{font-size:12px}.enterprise-table th,.enterprise-table td{white-space:nowrap}
  .page-head{gap:10px}.page-head h1{font-size:22px}.page-head p{font-size:12px}
}
@media(min-width:701px){#nileMobileBottomNav{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================
   V24.1 — SMART COMMAND CENTER
   Presentation-only layer. لا يغيّر منطق المعاملات.
   ===================================================== */
.v24-command-center{max-width:1640px;margin:0 auto;padding:24px 22px 34px;min-width:0}
.v24-hero{display:flex;justify-content:space-between;gap:24px;align-items:stretch;padding:20px 22px;border-radius:20px;background:linear-gradient(135deg,#123e21 0%,#1e7b36 52%,#2ea84e 100%);color:#fff;box-shadow:0 14px 34px rgba(22,91,39,.18);position:relative;overflow:hidden;margin-bottom:14px}
.v24-hero:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;inset-inline-start:-90px;bottom:-190px;background:rgba(255,255,255,.08);pointer-events:none}
.v24-hero-copy{position:relative;z-index:1}.v24-eyebrow{font-size:0.6875rem;font-weight:900;letter-spacing:.09em;opacity:.78;margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap}.v24-hero h1{font-size:22px;font-weight:900;margin:0 0 4px}.v24-hero p{margin:0;max-width:720px;font-size:12.5px;opacity:.84;line-height:1.6}.v24-hero-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11px;opacity:.88}.v24-hero-meta i{margin-inline-end:5px}.v24-live-dot i{font-size:0.6875rem;vertical-align:middle}.v24-hero-actions{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:12px;min-width:285px}.v24-branch-filter{display:flex;align-items:center;gap:8px}.v24-branch-filter label{font-size:11px;font-weight:800;white-space:nowrap}.v24-branch-filter select{min-width:165px;border:0;border-radius:10px;padding:8px 12px;background:rgba(255,255,255,.94);color:#1e293b;font-weight:700}.v24-action-row{display:flex;gap:8px}.v24-light-btn{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}.v24-light-btn b{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;margin-inline-start:5px;border-radius:20px;background:#fff;color:#1e7b36;font-size:0.6875rem}
.v24-status-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:15px;box-shadow:var(--shadow-card);margin-bottom:25px}.v24-status-main{display:flex;align-items:center;gap:11px}.v24-status-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}.v24-status-icon.success{background:#e9f8ee;color:#1e8e43}.v24-status-icon.warning{background:#fff7e6;color:#b77900}.v24-status-icon.danger{background:#fff0f0;color:#d72d35}.v24-status-main strong{display:block;font-size:13px}.v24-status-main small{display:block;color:var(--text-faint);font-size:11px;margin-top:2px}.v24-status-link{font-size:12px;font-weight:800;white-space:nowrap}.v24-status-link i{margin-inline-start:5px}
.v24-section-head,.v24-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.v24-section-head{margin:0 2px 11px}.v24-kicker{display:block;color:var(--nile-green);font-size:0.6875rem;letter-spacing:.13em;font-weight:900}.v24-section-head h2,.v24-panel-head h2,.v24-quick-panel h2{font-size:18px;font-weight:900;margin:2px 0 0}.v24-period{font-size:11px;color:var(--text-faint);background:var(--surface);border:1px solid var(--border-soft);padding:6px 10px;border-radius:9px;direction:ltr}.v24-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.v24-kpi{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:11px;align-items:center;padding:15px 16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow-card);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;min-width:0;position:relative;overflow:hidden}.v24-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.08);border-color:var(--border)}.v24-kpi:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--tone)}.v24-kpi-icon{grid-row:1/4;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--tone) 12%,transparent);color:var(--tone);font-size:18px}.v24-kpi-label{font-size:11px;color:var(--text-faint);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v24-kpi strong{font-size:19px;line-height:1.25;font-weight:900;direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v24-kpi strong em{font-style:normal;font-size:0.6875rem;font-weight:800;color:var(--text-faint)}.v24-kpi small{font-size:0.6875rem;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v24-text-value{font-size:16px!important;direction:rtl!important}.tone-green{--tone:#2ea84e}.tone-blue{--tone:#2563eb}.tone-violet{--tone:#7c3aed}.tone-gold{--tone:#d97706}.tone-red{--tone:#ef4444}.tone-amber{--tone:#f59e0b}.tone-teal{--tone:#0d9488}.tone-slate{--tone:#64748b}.tone-orange{--tone:#ea580c}
.v24-neg{color:#ef4444!important}
.v24-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:14px;margin-bottom:14px}.v24-panel,.v24-quick-panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:17px;box-shadow:var(--shadow-card);padding:17px;min-width:0}.v24-panel-head{margin-bottom:13px}.v24-panel-head>a{font-size:11px;font-weight:800}.v24-panel-head>a i{margin-inline-start:5px}.v24-panel-head>i{font-size:19px;color:var(--nile-green);opacity:.8}.v24-branch-list{display:grid;gap:7px}.v24-branch-row{display:grid;grid-template-columns:minmax(145px,1.1fr) repeat(5,minmax(70px,.6fr)) auto;align-items:center;gap:8px;padding:11px 10px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-alt);transition:background .15s ease}.v24-branch-row:hover{background:var(--surface-hover)}.v24-branch-name{min-width:0}.v24-branch-name strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v24-branch-name small,.v24-branch-number small{display:block;color:var(--text-faint);font-size:0.6875rem;margin-top:2px}.v24-mini-status{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:6px}.v24-mini-status.success{background:#2ea84e}.v24-mini-status.warning{background:#f59e0b}.v24-mini-status.danger{background:#ef4444}.v24-branch-number{text-align:center}.v24-branch-number b{font-size:12px;direction:ltr;display:block}.v24-state{font-size:0.6875rem;font-weight:900;border-radius:999px;padding:5px 8px;white-space:nowrap}.v24-state.success{color:#18733a;background:#e9f8ee}.v24-state.warning{color:#9a6500;background:#fff5dc}.v24-state.danger{color:#bd252d;background:#ffeded}.v24-focus-list{display:grid;gap:7px}.v24-focus{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:10px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-alt)}.v24-focus>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.v24-focus strong{display:block;font-size:11px}.v24-focus small{display:block;color:var(--text-faint);font-size:0.6875rem;margin-top:2px}.v24-focus>i{font-size:11px;color:var(--text-faint)}.v24-focus.danger>span{background:#fff0f0;color:#d72d35}.v24-focus.warning>span{background:#fff7e6;color:#b77900}.v24-focus.info>span{background:#eaf2ff;color:#2563eb}.v24-all-good{text-align:center;padding:27px 10px}.v24-all-good i{display:block;font-size:34px;color:var(--nile-green);margin-bottom:7px}.v24-all-good strong{display:block;font-size:13px}.v24-all-good span{font-size:0.6875rem;color:var(--text-faint)}.v24-quick-panel{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center}.v24-quick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.v24-quick-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-alt);color:var(--text);font-size:0.6875rem;font-weight:800}.v24-quick-grid a:hover{color:var(--nile-green);background:var(--surface-hover);transform:translateY(-1px)}.v24-quick-grid i{font-size:18px;color:var(--nile-green)}.v24-empty{text-align:center;padding:28px;color:var(--text-faint)}.v24-empty i{display:block;font-size:30px;margin-bottom:6px}.v24-empty strong{display:block;color:var(--text);font-size:12px}.v24-empty span{font-size:0.6875rem}
.v24-rank-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;font-size:13px;font-weight:900;color:var(--text-faint);margin-inline-end:4px}
.v24-rank-badge.gold,.v24-rank-badge.silver,.v24-rank-badge.bronze{font-size:15px}
[data-theme="dark"] .v24-status-icon.success{background:#12351f}.v24-hero .btn-brand{background:#fff;color:#185e2b;border-color:#fff}.v24-hero .btn-brand:hover{background:#f1f5f9;color:#165b27}.v24-hero .btn-light{box-shadow:none}
@media(max-width:1200px){.v24-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v24-main-grid{grid-template-columns:1fr}.v24-quick-panel{grid-template-columns:1fr}.v24-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.v24-command-center{padding:12px 10px 24px}.v24-hero{padding:16px 14px;flex-direction:column}.v24-hero h1{font-size:19px}.v24-hero-actions{align-items:stretch;min-width:0}.v24-branch-filter{justify-content:space-between}.v24-branch-filter select{flex:1}.v24-action-row>*{flex:1;text-align:center}.v24-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.v24-kpi{padding:12px}.v24-kpi-icon{width:35px;height:35px;font-size:15px}.v24-kpi strong{font-size:16px}.v24-branch-row{grid-template-columns:1fr 1fr;gap:7px}.v24-branch-name{grid-column:1/-1}.v24-state{justify-self:end}.v24-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v24-status-strip{align-items:flex-start}.v24-status-link{padding-top:5px}}
@media(max-width:430px){.v24-kpi-grid{grid-template-columns:1fr}.v24-hero-meta{gap:8px;flex-direction:column}.v24-status-strip{flex-direction:column}.v24-branch-number{text-align:right}.v24-quick-panel{padding:14px}}

/* ================================================================
   V24 STAGE 2 — SMART SEMANTIC STATE COLOR SYSTEM
   Presentation-only layer: no business/data behavior is changed.
   States: success / info / warning / danger / neutral
   ================================================================ */
:root{
  --v24-state-success:#16803c;
  --v24-state-success-bg:rgba(22,128,60,.11);
  --v24-state-success-border:rgba(22,128,60,.26);
  --v24-state-info:#2563eb;
  --v24-state-info-bg:rgba(37,99,235,.10);
  --v24-state-info-border:rgba(37,99,235,.25);
  --v24-state-warning:#a86200;
  --v24-state-warning-bg:rgba(245,158,11,.13);
  --v24-state-warning-border:rgba(245,158,11,.30);
  --v24-state-danger:#c62835;
  --v24-state-danger-bg:rgba(220,38,38,.10);
  --v24-state-danger-border:rgba(220,38,38,.27);
  --v24-state-neutral:var(--text-dim,#64748b);
  --v24-state-neutral-bg:var(--surface-alt,#f5f7fa);
  --v24-state-neutral-border:var(--border,#e2e8f0);
}
.v24-semantic-state{--v24-state-fg:var(--v24-state-neutral);--v24-state-bg:var(--v24-state-neutral-bg);--v24-state-border:var(--v24-state-neutral-border);color:var(--v24-state-fg)!important;background:var(--v24-state-bg)!important;border-color:var(--v24-state-border)!important;}
.v24-state-success{--v24-state-fg:var(--v24-state-success);--v24-state-bg:var(--v24-state-success-bg);--v24-state-border:var(--v24-state-success-border);}
.v24-state-info{--v24-state-fg:var(--v24-state-info);--v24-state-bg:var(--v24-state-info-bg);--v24-state-border:var(--v24-state-info-border);}
.v24-state-warning{--v24-state-fg:var(--v24-state-warning);--v24-state-bg:var(--v24-state-warning-bg);--v24-state-border:var(--v24-state-warning-border);}
.v24-state-danger{--v24-state-fg:var(--v24-state-danger);--v24-state-bg:var(--v24-state-danger-bg);--v24-state-border:var(--v24-state-danger-border);}
.v24-state-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:24px;padding:4px 9px;border:1px solid var(--v24-state-border)!important;border-radius:999px!important;background:var(--v24-state-bg)!important;color:var(--v24-state-fg)!important;font-size:11px;font-weight:800;line-height:1.15;white-space:nowrap;vertical-align:middle;}
.v24-state-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px;opacity:.9;}
.v24-state-pill[data-state-label]::after{content:attr(data-state-label);font-size:0.6875rem;font-weight:900;opacity:.78;}
/* When a badge already contains a meaningful status text, do not duplicate it visually. */
.v24-state-pill::after{display:none;}
.v24-state-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;vertical-align:middle;margin-inline-end:5px;}
.v24-status-card{position:relative;border:1px solid var(--v24-state-border);background:var(--v24-state-bg);border-radius:14px;}
.v24-status-card::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--v24-state-fg);}
.v24-status-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:var(--v24-state-fg);}
.v24-status-label::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
[data-state="success"]{--v24-state-fg:var(--v24-state-success);--v24-state-bg:var(--v24-state-success-bg);--v24-state-border:var(--v24-state-success-border);}
[data-state="info"]{--v24-state-fg:var(--v24-state-info);--v24-state-bg:var(--v24-state-info-bg);--v24-state-border:var(--v24-state-info-border);}
[data-state="warning"]{--v24-state-fg:var(--v24-state-warning);--v24-state-bg:var(--v24-state-warning-bg);--v24-state-border:var(--v24-state-warning-border);}
[data-state="danger"]{--v24-state-fg:var(--v24-state-danger);--v24-state-bg:var(--v24-state-danger-bg);--v24-state-border:var(--v24-state-danger-border);}
[data-state="neutral"]{--v24-state-fg:var(--v24-state-neutral);--v24-state-bg:var(--v24-state-neutral-bg);--v24-state-border:var(--v24-state-neutral-border);}
[data-state] .v24-state-dot{color:var(--v24-state-fg);}
[data-state] .v24-status-label{color:var(--v24-state-fg);}
[data-state] .v24-status-label::before{background:var(--v24-state-fg);}
[data-theme="dark"]{
  --v24-state-success:#4ade80;--v24-state-success-bg:rgba(34,197,94,.12);--v24-state-success-border:rgba(74,222,128,.25);
  --v24-state-info:#60a5fa;--v24-state-info-bg:rgba(59,130,246,.13);--v24-state-info-border:rgba(96,165,250,.25);
  --v24-state-warning:#fbbf24;--v24-state-warning-bg:rgba(245,158,11,.14);--v24-state-warning-border:rgba(251,191,36,.28);
  --v24-state-danger:#fb7185;--v24-state-danger-bg:rgba(239,68,68,.13);--v24-state-danger-border:rgba(251,113,133,.27);
}
@media (prefers-reduced-motion:reduce){.v24-state-pill,.v24-status-card{transition:none!important;}}

/* ===== V24 Stage 3: Command Palette (⌨️) ===== */
.cp-trigger{position:fixed;inset-block-start:16px;inset-inline-end:16px;z-index:1200;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--border-soft);background:var(--surface);color:var(--text-faint);font-size:12px;font-weight:800;box-shadow:var(--shadow-card);cursor:pointer}
.cp-trigger:hover{color:var(--nile-green);border-color:var(--nile-green)}
.cp-trigger kbd{font-size:0.6875rem;font-family:inherit;background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:6px;padding:2px 6px;direction:ltr}
.cp-overlay{position:fixed;inset:0;z-index:1300;background:transparent;display:flex;align-items:flex-start;justify-content:center;padding:11vh 16px 16px}
.cp-modal{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.28);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.cp-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-soft)}
.cp-input-row i{color:var(--text-faint)}
.cp-input-row input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-size:14px;font-family:inherit}
.cp-input-row kbd{font-size:0.6875rem;color:var(--text-faint);border:1px solid var(--border-soft);border-radius:6px;padding:2px 7px}
.cp-results{overflow-y:auto;padding:6px}
.cp-group-label{font-size:0.6875rem;font-weight:900;color:var(--text-faint);padding:9px 10px 4px;letter-spacing:.04em}
.cp-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);font-size:13px;font-weight:700;text-decoration:none}
.cp-item.active,.cp-item:hover{background:var(--surface-alt);color:var(--nile-green)}
.cp-item-icon{font-size:15px}
.cp-empty{padding:24px;text-align:center;color:var(--text-faint);font-size:12px}
.cp-footer{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--border-soft);font-size:0.6875rem;color:var(--text-faint)}
.cp-footer kbd{border:1px solid var(--border-soft);border-radius:5px;padding:1px 6px;margin-inline-end:3px}
@media(max-width:600px){.cp-trigger span{display:none}.cp-trigger kbd{display:none}.cp-overlay{padding:6vh 10px 10px}}

/* ===== V24 Stage 5: Branch Switcher (🏢) ===== */
.bsw-wrap{position:relative;display:inline-flex;align-items:center;z-index:1600;margin-inline:6px}
.bsw-trigger{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--border-soft);background:var(--surface);color:var(--text);font-size:12px;font-weight:800;box-shadow:var(--shadow-card);cursor:pointer;max-width:220px}
.bsw-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsw-trigger:hover{border-color:var(--nile-green)}
.bsw-caret{font-size:0.6875rem;color:var(--text-faint)}
.bsw-menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-width:220px;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;box-shadow:0 18px 44px rgba(15,23,42,.22);padding:6px}
.bsw-item{display:flex;align-items:center;gap:9px;width:100%;text-align:start;padding:9px 10px;border:none;background:transparent;border-radius:9px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer}
.bsw-item:hover{background:var(--surface-alt)}
.bsw-item.active{color:var(--nile-green);background:color-mix(in srgb,var(--nile-green) 10%,transparent)}
@media(max-width:600px){.bsw-wrap{margin-inline:3px}.bsw-trigger{max-width:150px}}

/* ===== V24 Stage 10: Breadcrumbs (🧭) ===== */
.v24-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px;margin-bottom:6px;font-size:12px}
.v24-crumb-home{color:var(--text-faint);display:flex;align-items:center}
.v24-crumb-sep{font-size:0.6875rem;color:var(--text-faint)}
.v24-crumb-app{color:var(--text-faint);font-weight:800;text-decoration:none}
.v24-crumb-app:hover{color:var(--nile-green)}
.v24-crumb-current{color:var(--text);font-weight:900}

/* ===== V24 Stage 6: Interactive Charts (📊) ===== */
.v24-chart{padding:6px 4px 0}
.v24-chart-svg{width:100%;height:146px;overflow:visible}
.v24-bar-rev{fill:var(--nile-green,#2ea84e)}
.v24-bar-exp{fill:#ef4444;opacity:.75}
.v24-bar-label{font-size:18px;fill:var(--text-faint);font-weight:600}
.v24-chart-baseline{stroke:var(--border-soft);stroke-width:1}
.v24-chart-legend{display:flex;gap:14px;justify-content:center;margin-top:6px;font-size:0.6875rem;color:var(--text-faint)}
.v24-legend-dot{display:inline-block;width:8px;height:8px;border-radius:3px;margin-inline-end:5px}
.v24-legend-dot.rev{background:var(--nile-green,#2ea84e)}
.v24-legend-dot.exp{background:#ef4444;opacity:.75}
.v24-branch-panel{margin-bottom:20px}

/* ===== V24 Stage 13: Detail Drawer (📌) ===== */
.v24-drawer-trigger{cursor:pointer}
.v24-drawer-trigger:hover{background:var(--surface-hover)!important}
.v24d-overlay{position:fixed;inset:0;z-index:1400;background:transparent}
.v24d-panel{position:fixed;inset-block:0;inset-inline-end:0;width:320px;max-width:88vw;background:var(--surface);box-shadow:-16px 0 40px rgba(15,23,42,.2);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .22s ease}
.v24d-panel.open{transform:translateX(0)}
.v24d-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-soft)}
.v24d-head h3{font-size:14px;font-weight:900;margin:0}
.v24d-close{border:none;background:var(--surface-alt);width:30px;height:30px;border-radius:9px;color:var(--text-faint);cursor:pointer}
.v24d-close:hover{color:var(--text)}
.v24d-body{padding:14px 16px;flex:1;overflow-y:auto}
.v24d-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:12px}
.v24d-row span{color:var(--text-faint)}
.v24d-row b{font-weight:900;direction:ltr}
.v24d-neg{color:#ef4444!important}
.v24d-foot{padding:14px 16px;border-top:1px solid var(--border-soft)}

/* ===== V24 Stage 14: Dark Mode Toggle (🌙) ===== */
.thm-trigger{position:fixed;inset-block-start:16px;inset-inline-end:210px;z-index:1200;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border-soft);background:var(--surface);color:var(--text-faint);box-shadow:var(--shadow-card);cursor:pointer;font-size:14px}
.thm-trigger:hover{color:var(--nile-green);border-color:var(--nile-green)}
@media(max-width:600px){.thm-trigger{inset-inline-end:16px;inset-block-start:112px}}

/* ===== V24 Stage 11: Global Quick Actions FAB (⚡) ===== */
.qfab-wrap{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:1200}
.qfab-trigger{width:52px;height:52px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--nile-green,#2ea84e),var(--nile-green-dark,#1e7b36));color:#fff;font-size:20px;box-shadow:0 10px 26px rgba(46,168,78,.4);cursor:pointer}
.qfab-trigger:hover{filter:brightness(1.08)}
.qfab-menu{position:absolute;inset-block-end:calc(100% + 12px);inset-inline-end:0;min-width:180px;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;box-shadow:0 18px 44px rgba(15,23,42,.22);padding:6px;display:flex;flex-direction:column;gap:2px}
.qfab-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;color:var(--text);font-size:12px;font-weight:800;text-decoration:none}
.qfab-item:hover{background:var(--surface-alt);color:var(--nile-green)}
@media(max-width:600px){.qfab-wrap{inset-block-end:16px;inset-inline-end:16px}}

/* ===== V24 Stage 16: Empty States (🗂️) ===== */
.v24-empty-state{text-align:center;padding:44px 20px;color:var(--text-faint)}
.v24-empty-state i{display:block;font-size:36px;margin-bottom:10px;opacity:.6}
.v24-empty-state strong{display:block;color:var(--text);font-size:14px;font-weight:900;margin-bottom:4px}
.v24-empty-state span{font-size:12px}

/* ===== V24 Stage 17: Navigation Loading Bar (💀) ===== */
.v24-loadbar{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:2000;background:linear-gradient(90deg,var(--nile-green,#2ea84e),var(--nile-orange,#ff7a1a));width:0%;transition:width .3s ease;box-shadow:0 0 8px rgba(46,168,78,.6)}

/* ===== V24 Stage 18: In-System Assistant (🤖) ===== */
.ast-trigger{position:fixed;inset-block-end:22px;inset-inline-end:86px;z-index:1200;width:52px;height:52px;border-radius:50%;border:none;background:var(--surface);color:var(--nile-green,#2ea84e);font-size:20px;box-shadow:var(--shadow-card);cursor:pointer;border:1px solid var(--border-soft)}
.ast-trigger:hover{border-color:var(--nile-green)}
.ast-panel{position:fixed;inset-block-end:86px;inset-inline-end:22px;z-index:1300;width:340px;max-width:90vw;max-height:70vh;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.25);display:flex;flex-direction:column;overflow:hidden}
.ast-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border-soft);font-weight:900;font-size:13px}
.ast-close{border:none;background:var(--surface-alt);width:26px;height:26px;border-radius:8px;color:var(--text-faint);cursor:pointer}
.ast-input-row{padding:10px 14px}
.ast-input-row input{width:100%;border:1px solid var(--border-soft);border-radius:10px;padding:8px 12px;font-size:12px;background:var(--surface-alt);color:var(--text)}
.ast-results{overflow-y:auto;padding:0 14px 14px;flex:1}
.ast-card{padding:10px;border:1px solid var(--border-soft);border-radius:11px;margin-bottom:8px;background:var(--surface-alt)}
.ast-q{font-size:12px;font-weight:900;margin-bottom:4px}
.ast-a{font-size:11px;color:var(--text-faint);line-height:1.6}
.ast-link{display:inline-block;margin-top:6px;font-size:0.6875rem;font-weight:800;color:var(--nile-green);text-decoration:none}
.ast-empty{font-size:11px;color:var(--text-faint);text-align:center;padding:20px}
.ast-foot{padding:8px 14px;font-size:0.6875rem;color:var(--text-faint);border-top:1px solid var(--border-soft);text-align:center}
@media(max-width:600px){.ast-trigger{inset-inline-end:70px;inset-block-end:16px}.ast-panel{inset-block-end:76px;inset-inline-end:12px}}

/* ===== V24 Stage 20: Nile Pulse (💓) ===== */
.v24-pulse{display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px;padding:3px 9px;border-radius:999px;font-size:0.6875rem;font-weight:900;letter-spacing:.05em;vertical-align:middle}
.v24-pulse-dot{width:7px;height:7px;border-radius:50%;display:inline-block;animation:v24pulse 1.6s ease-in-out infinite}
.v24-pulse-healthy{background:rgba(46,168,78,.14);color:#2ea84e}
.v24-pulse-healthy .v24-pulse-dot{background:#2ea84e}
.v24-pulse-elevated{background:rgba(245,158,11,.14);color:#b77900}
.v24-pulse-elevated .v24-pulse-dot{background:#f59e0b}
.v24-pulse-critical{background:rgba(239,68,68,.14);color:#d72d35}
.v24-pulse-critical .v24-pulse-dot{background:#ef4444}
@keyframes v24pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
@media (prefers-reduced-motion:reduce){.v24-pulse-dot{animation:none}}

/* ===== V24 Stage 19: Executive Mode (👔) ===== */
.v24-exec-mode .v24-quick-panel,
.v24-exec-mode .qfab-wrap,
.v24-exec-mode .ast-trigger{display:none!important}

/* ===== Notification status (3-state) ===== */
.notif-row.notif-settled { opacity: .6; }
.notif-status-btn.active.btn-outline-secondary { background: var(--text-faint); border-color: var(--text-faint); color: #fff; }
.notif-status-btn.active.btn-outline-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.notif-status-btn.active.btn-outline-success { background: #2ea84e; border-color: #2ea84e; color: #fff; }

/* V24 final hardening: employee performance cards + interactive chart tooltip */
.v24-employee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.v24-employee-card{border:1px solid var(--border-soft);background:var(--surface);border-radius:16px;padding:16px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;transition:transform .16s ease,border-color .16s ease}
.v24-employee-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--nile-green) 35%,var(--border-soft))}
.v24-employee-head{display:flex;align-items:center;gap:10px}.v24-employee-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-alt);color:var(--nile-green);font-size:17px}.v24-employee-name{min-width:0;flex:1}.v24-employee-name strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v24-employee-name small{display:block;color:var(--text-faint);font-size:0.6875rem;margin-top:2px}.v24-employee-meta{display:flex;justify-content:space-between;gap:8px;color:var(--text-faint);font-size:0.6875rem}.v24-employee-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v24-employee-meta i{margin-inline-end:4px}.v24-employee-kpi{padding:10px 12px;border-radius:12px;background:var(--surface-alt)}.v24-employee-kpi small{display:block;color:var(--text-faint);font-size:0.6875rem}.v24-employee-kpi strong{display:block;font-size:18px;margin-top:2px}.v24-employee-kpi em{font-size:0.6875rem;font-style:normal;color:var(--text-faint)}
.v24-chart{position:relative}.v24-chart-bar{cursor:pointer;outline:none}.v24-chart-bar:focus{filter:brightness(.94);stroke:var(--text);stroke-width:1}.v24-chart-tooltip{position:absolute;z-index:20;min-width:200px;padding:8px 10px;border:1px solid var(--border-soft);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);font-size:0.6875rem;font-weight:800;text-align:center;pointer-events:none}
@media(max-width:900px){.v24-employee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.v24-employee-grid{grid-template-columns:1fr}.v24-chart-tooltip{min-width:170px}}

/* V24.1 — Dashboard chrome cleanup: remove the redundant white heading strip and make the command center tighter. */
.dashboard-body{padding-top:6px!important;}
.dashboard-body .v24-command-center{padding-top:6px;}
.v24-hero-compact{padding:14px 18px!important;border-radius:16px!important;gap:16px!important;margin-bottom:10px!important;min-height:118px;}
.v24-hero-compact .v24-eyebrow{margin-bottom:3px;}
.v24-command-title{font-size:18px!important;font-weight:950!important;line-height:1.2;margin:0 0 2px!important;}
.v24-hero-compact h1{font-size:15px!important;margin:0 0 2px!important;font-weight:850!important;}
.v24-hero-compact p{font-size:11.5px!important;line-height:1.45!important;}
.v24-hero-compact .v24-hero-meta{margin-top:7px!important;gap:10px!important;font-size:0.6875rem!important;}
.v24-hero-compact .v24-hero-actions{min-width:255px!important;gap:8px!important;}
.v24-hero-compact .v24-action-row{gap:6px!important;flex-wrap:wrap;justify-content:flex-end;}
.v24-hero-compact .v24-action-row .btn{padding:6px 10px!important;font-size:0.6875rem!important;border-radius:9px!important;}
@media(max-width:760px){.dashboard-body{padding-top:2px!important}.dashboard-body .v24-command-center{padding-top:3px}.v24-hero-compact{padding:12px 13px!important;min-height:auto}.v24-command-title{font-size:17px!important}.v24-hero-compact h1{font-size:14px!important}.v24-hero-compact .v24-action-row{justify-content:stretch}.v24-hero-compact .v24-action-row>*{min-width:0}.v24-hero-compact .v24-hero-actions{min-width:0!important}}

/* V24.1 — Salary details: always available, with a compact readable breakdown. */
.payroll-detail-box{border:1px solid var(--border);background:var(--surface-alt);border-radius:12px;padding:12px 14px;}
.payroll-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.payroll-detail-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;}
.payroll-detail-grid>div{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 9px;}
.payroll-detail-grid span{display:block;font-size:0.6875rem;color:var(--text-faint);margin-bottom:2px;}
.payroll-detail-grid strong{font-size:12px;}
@media(max-width:900px){.payroll-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:520px){.payroll-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* V25 premium welcome + interactive payroll/chart polish */
.v24-global-welcome{margin:8px 14px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid rgba(15,35,58,.09);background:rgba(255,255,255,.92);border-radius:14px;box-shadow:0 6px 18px rgba(15,35,58,.06);backdrop-filter:blur(10px);position:relative;z-index:3}.v24-welcome-main{display:flex;align-items:center;gap:9px;min-width:0}.v24-welcome-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#eaf7ef;color:#16803a;font-size:14px}.v24-welcome-main strong{display:block;font-size:12px;font-weight:900;color:var(--text)}.v24-welcome-main span{display:block;font-size:0.6875rem;color:var(--muted)}.v24-welcome-main b{font-variant-numeric:tabular-nums}.v24-welcome-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.v24-welcome-action{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(15,35,58,.09);background:#fff;color:var(--text);border-radius:9px;padding:6px 9px;font-size:0.6875rem;font-weight:800;text-decoration:none;transition:.18s ease}.v24-welcome-action:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(15,35,58,.08);color:#16803a}.v24-welcome-action b{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:50%;background:#dc3545;color:#fff;font-size:0.6875rem}.v24-hero-subtitle{margin:2px 0 0!important;font-size:11px!important;opacity:.82}.v24-chart-bar{cursor:pointer;transition:transform .18s ease,filter .18s ease,opacity .18s ease;transform-box:fill-box;transform-origin:center bottom}.v24-chart-bar:hover,.v24-chart-bar:focus,.v24-chart-bar.is-hover{filter:brightness(1.12) drop-shadow(0 5px 6px rgba(0,0,0,.16));transform:scaleY(1.025)}.v24-bar-label{font-weight:800}.v24-month-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.v24-month-kpis>div{padding:10px;border:1px solid rgba(15,35,58,.08);border-radius:10px;background:var(--surface-soft,#f7f8fa)}.v24-month-kpis small{display:block;color:var(--muted);font-size:0.6875rem}.v24-month-kpis b{display:block;margin-top:3px;font-size:13px}.v24-month-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(15,35,58,.1);font-size:11px}.v24-month-line b{font-variant-numeric:tabular-nums}@media(max-width:760px){.v24-global-welcome{margin:6px 8px 9px;padding:7px 9px;align-items:flex-start}.v24-welcome-actions{width:100%;justify-content:flex-start}.v24-welcome-action{flex:1;justify-content:center;min-width:90px}.v24-global-welcome{flex-direction:column}.v24-month-kpis{grid-template-columns:1fr 1fr}}
[data-theme="dark"] .v24-global-welcome{background:rgba(22,28,36,.94);border-color:rgba(255,255,255,.08)}[data-theme="dark"] .v24-welcome-action{background:#1d2631;color:#e8edf2;border-color:rgba(255,255,255,.08)}

/* V26 Command Center: compact rotating dhikr ribbon + restored personal dashboard header */
.v24-dhikr-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px;padding:5px 7px;border:1px solid rgba(22,128,58,.10);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,248,.96));border-radius:13px;box-shadow:0 5px 16px rgba(15,35,58,.045);overflow:hidden}
.v24-dhikr-tabs{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.v24-dhikr-tab{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:9px;padding:5px 8px;font-size:0.6875rem;font-weight:850;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:.22s ease}
.v24-dhikr-tab:hover{background:rgba(22,128,58,.06);color:#16803a;transform:translateY(-1px)}
.v24-dhikr-tab.is-active{background:#eaf7ef;color:#126b2f;border-color:rgba(22,128,58,.12);box-shadow:0 3px 9px rgba(22,128,58,.08)}
.v24-dhikr-message{min-width:300px;text-align:center;color:#356044;font-size:0.6875rem;font-weight:800;white-space:nowrap}
.v24-dhikr-message span{display:inline-block;transition:opacity .25s ease,transform .25s ease}.v24-dhikr-message span.is-changing{animation:v24DhikrIn .45s ease both}
@keyframes v24DhikrIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.v24-command-meta{margin-top:6px!important;gap:12px!important}.v24-command-meta span{display:inline-flex;align-items:center;gap:4px}.v24-command-meta b{font-variant-numeric:tabular-nums}
[data-theme="dark"] .v24-dhikr-strip{background:linear-gradient(180deg,rgba(27,36,45,.97),rgba(22,30,38,.97));border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .v24-dhikr-tab{color:#b8c4cf}.v24-dhikr-tab.is-active{color:#bce8c9;background:rgba(37,145,72,.18);border-color:rgba(108,207,135,.18)}[data-theme="dark"] .v24-dhikr-message{color:#b7d8c0}
@media(max-width:760px){.v24-dhikr-strip{align-items:stretch;flex-direction:column;gap:3px;padding:5px}.v24-dhikr-tabs{width:100%;justify-content:center}.v24-dhikr-tab{flex:1;justify-content:center;padding:5px 4px;font-size:0.6875rem}.v24-dhikr-message{min-width:0;width:100%;font-size:0.6875rem;padding:2px 0 4px}.v24-command-meta{gap:7px!important}.v24-command-meta span{font-size:0.6875rem}}

/* عناصر مشتركة لشريط الذكر (زخرفة + توهج خلفي) - قبل تنويعات المظهر الخاصة بكل صفحة */
.v24-dhikr-strip{position:relative}
.v24-dhikr-glow{position:absolute;inset:0;pointer-events:none;opacity:.5}
.v24-dhikr-ornament{opacity:.45;font-size:11px;padding:0 2px;font-weight:400}
.v24-dhikr-text{margin:0 3px}

/* شريط الذكر - مظهر "shift" مختلف ومزخرف خصيصًا لصفحة تقفيل الوردية: تدرج ذهبي/زمردي
   دافئ، توهج متحرك خفيف خلف النص، وحدود مزخرفة بدل الشكل المسطح البسيط المستخدم فى
   مركز القيادة - عشان يبقى واضح إنها لحظة مختلفة (ختام وردية) مش تكرار لنفس الشريط. */
.v24-dhikr-shift{
  margin:0 0 14px;padding:9px 14px;border-radius:16px;
  border:1px solid rgba(212,168,83,.35);
  background:linear-gradient(115deg,rgba(30,58,44,.97) 0%,rgba(20,66,48,.97) 45%,rgba(35,74,52,.97) 100%);
  box-shadow:0 10px 26px rgba(15,35,58,.14),inset 0 0 0 1px rgba(255,255,255,.03);
}
.v24-dhikr-shift .v24-dhikr-glow{
  background:radial-gradient(60% 140% at 15% 50%,rgba(212,168,83,.22),transparent 60%),
             radial-gradient(60% 140% at 85% 50%,rgba(212,168,83,.16),transparent 60%);
  animation:v24DhikrGlowShift 7s ease-in-out infinite alternate;
}
@keyframes v24DhikrGlowShift{from{opacity:.35;transform:translateX(-2%)}to{opacity:.7;transform:translateX(2%)}}
.v24-dhikr-shift .v24-dhikr-tab{color:rgba(232,240,232,.72);font-size:0.6875rem;padding:6px 10px;border-radius:999px}
.v24-dhikr-shift .v24-dhikr-tab:hover{background:rgba(212,168,83,.14);color:#f3e3bd;transform:translateY(-1px)}
.v24-dhikr-shift .v24-dhikr-tab.is-active{background:linear-gradient(135deg,#d4a853,#c99339);color:#20321f;border-color:transparent;box-shadow:0 4px 12px rgba(212,168,83,.35);font-weight:900}
.v24-dhikr-shift .v24-dhikr-message{color:#f3ead2;font-size:11px;letter-spacing:.2px}
.v24-dhikr-shift .v24-dhikr-ornament{color:#d4a853;opacity:.8;font-size:13px}
[data-theme="dark"] .v24-dhikr-shift{background:linear-gradient(115deg,rgba(16,32,24,.97) 0%,rgba(12,38,27,.97) 50%,rgba(18,40,28,.97) 100%);border-color:rgba(212,168,83,.28)}
@media(max-width:760px){.v24-dhikr-shift{padding:7px 8px}.v24-dhikr-shift .v24-dhikr-message{font-size:0.6875rem}}

/* بحث داخل قوائم الاختيار (select) فى كل النظام - searchable_select.js */
.nile-search-select-wrap{position:relative}
.nile-search-select-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;overflow:hidden}
.nile-search-select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:right;cursor:pointer;position:relative}
.nile-search-select-trigger::after{content:"";display:inline-block;width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5;margin-inline-start:6px;flex-shrink:0}
.nile-search-select-trigger.is-placeholder{color:var(--text-faint,#8FA3C0)}
.nile-search-select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:start}
/* اللوحة بقت بتتنقل لـ<body> وبتتظبّط بالجافاسكريبت (position + width)،
   عشان مفيش أب بـoverflow:hidden يقدر يقصّها. fixed مش absolute: مرجعها
   الشاشة نفسها مش أقرب أب. `display` بقى مربوط بـ.is-open على اللوحة نفسها
   لأنها مابقتش بنت الـwrap. */
.nile-search-select-panel{display:none;position:fixed;z-index:14000;
  background:var(--surface,#fff);border:1px solid var(--border,#dfe6ee);
  border-radius:12px;box-shadow:0 14px 38px rgba(15,35,58,.20),0 2px 6px rgba(15,35,58,.10);
  overflow:hidden;display:none;flex-direction:column}
.nile-search-select-panel.is-open{display:flex}
.nile-search-select-input{width:100%;border:none;border-bottom:1px solid var(--border,#dfe6ee);padding:9px 12px;font-size:13px;outline:none;background:var(--surface-alt,#f7f9fc)}
.nile-search-select-list{max-height:230px;overflow-y:auto;flex:1 1 auto}
.nile-search-select-item{padding:8px 12px;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nile-search-select-item:hover{background:color-mix(in srgb, var(--nile-green,#2EA84E) 12%, transparent)}
.nile-search-select-item.is-selected{background:color-mix(in srgb, var(--nile-green,#2EA84E) 18%, transparent);font-weight:700}
.nile-search-select-item.is-disabled{opacity:.4;cursor:default}
.nile-search-select-empty{padding:12px;text-align:center;font-size:12px;color:var(--text-faint,#8FA3C0)}
[data-theme="dark"] .nile-search-select-panel{background:var(--surface,#182636)}

/* ===== ترقية شكل القوائم المنسدلة البحثية (نفس السلوك، شكل أرقى وأحدث) =====
   حركة ظهور ناعمة، عناصر بشكل "حبّة" بينها مسافة بدل صفوف ملزّقة فى بعض،
   علامة صح واضحة للمختار، أيقونة بحث فى الخانة، وسهم بيتقلب لما القائمة تتفتح. */
.nile-search-select-panel{
  transform-origin:top center;border-radius:12px;
  animation:nileSelectPanelIn .15s cubic-bezier(.2,.7,.2,1);
}
/* لما مافيش مساحة تحت الزرار بتتفتح لفوق - فالحركة لازم تطلع من تحت */
.nile-search-select-panel.is-flipped{transform-origin:bottom center;}
@keyframes nileSelectPanelIn{
  from{opacity:0;transform:translateY(-4px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
/* الصفحة كلها RTL، فبداية الخانة (start) بصريًا على اليمين - الأيقونة والـ
   padding بيتحسبوا على أساس كده مباشرة. */
.nile-search-select-input{
  padding-inline-start:30px;padding-inline-end:12px;border-radius:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238FA3C0' stroke-width='1.6'><circle cx='7' cy='7' r='5'/><path d='M11 11l3.5 3.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:calc(100% - 10px) center;background-size:14px;
}
.nile-search-select-input:focus{background-color:var(--surface);}
.nile-search-select-list{padding:4px;}
.nile-search-select-item{
  border-radius:8px;margin:1px 0;padding-inline-end:26px;position:relative;
  transition:background .12s ease,color .12s ease;
}
.nile-search-select-item.is-selected::after{
  content:"✓";position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);
  color:var(--nile-green);font-weight:900;font-size:12px;
}
.nile-search-select-trigger{transition:border-color .15s var(--ease,ease),box-shadow .15s var(--ease,ease);}
.nile-search-select-trigger::after{transition:transform .15s var(--ease,ease);}
.nile-search-select-trigger:hover{border-color:var(--nile-green);}
.nile-search-select-wrap.is-open .nile-search-select-trigger{
  border-color:var(--nile-green)!important;box-shadow:0 0 0 3px rgba(46,168,78,.14);
}
.nile-search-select-wrap.is-open .nile-search-select-trigger::after{transform:rotate(225deg);}

/* V24.18 — Global branch switcher: floating, persistent and independent of page layout. */
.bsw-wrap{
  position:fixed!important;
  top:78px!important;
  inset-inline-end:18px!important;
  margin:0!important;
  z-index:1800!important;
}
.bsw-trigger{
  min-height:38px;
  padding:8px 13px!important;
  border-radius:12px!important;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 28px rgba(15,23,42,.14)!important;
}
.bsw-menu{inset-inline-end:0!important;inset-inline-start:auto!important;min-width:230px!important;}
@media(max-width:760px){.bsw-wrap{top:70px!important;inset-inline-end:10px!important}.bsw-trigger{max-width:180px!important;padding:7px 10px!important}.bsw-menu{min-width:205px!important}}

/* V24.18 — Professional page chrome: consistent hierarchy without changing page logic. */
.page-body:not(.dashboard-body) > .page-title{
  display:flex;align-items:center;min-height:36px;margin:0 0 8px!important;padding:7px 16px!important;
  border:1px solid var(--border-soft);border-radius:16px;background:linear-gradient(135deg,var(--surface),var(--surface-alt));
  box-shadow:var(--shadow-card);font-size:20px!important;font-weight:900!important;letter-spacing:-.02em;
  position:relative;overflow:hidden;
}
.page-body:not(.dashboard-body) > .page-title:before{content:"";width:4px;height:20px;border-radius:8px;background:var(--nile-green);margin-inline-end:11px;flex:none;}
/* البقعة الدائرية الخضراء الشفافة (130px بلون اللوجو بشفافية 6%) اتشالت بطلب صريح -
   كانت بتبان كأنها لطخة/خطأ فى التصميم، خصوصًا فى الصفحات اللى عنوانها فاضي. */
[data-theme="dark"] .page-body:not(.dashboard-body) > .page-title{background:linear-gradient(135deg,var(--surface),var(--surface-alt));}

/* Reduce the chart's unused lower white area by roughly half. */
.v24-chart{padding:2px 4px 0!important;}
.v24-chart-svg{height:82px!important;}

/* Make post-close actions unmistakable in shift preview. */
.shift-post-close-actions{border:1px solid rgba(217,119,6,.22);background:linear-gradient(135deg,var(--surface),rgba(245,158,11,.05));border-radius:14px;padding:11px 13px;margin-bottom:12px;}
.shift-post-close-actions .title{font-size:12px;font-weight:900;margin-bottom:4px;}
.page-title{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important}
.page-title-main{position:relative;z-index:1;font-size:20px;font-weight:900;line-height:1.25}
.page-title-sub{position:relative;z-index:1;font-size:0.6875rem;color:var(--text-faint);font-weight:600;line-height:1.4;max-width:900px}
.page-body:not(.dashboard-body) > .page-title:before{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);margin:0!important}
.page-body:not(.dashboard-body) > .page-title{padding-inline-start:32px!important}
.v24-chart-svg{height:70px!important;}
.v24-chart-legend{margin-top:3px!important;}

/* =====================================================================
   V25 — إعادة هيكلة الواجهة (طبقة التكرير النهائية)
   المبدأ: لون واحد للهوية بدل قوس قزح، كثافة أعلى، حذف الزخرفة اللى
   مابتضيفش معلومة. الطبقة دي متأخرة عمدًا عشان تفوز على القواعد القديمة
   من غير ما نحذفها ونكسر شاشات قايمة.
   ===================================================================== */

/* ---------- رأس الصفحة: سطر واحد هادى بدل صندوق كبير ---------- */
.page-body:not(.dashboard-body) > .page-title{
  min-height:0!important; margin:2px 0 12px!important; padding:0 0 9px!important;
  border:0!important; border-bottom:1px solid var(--border-soft)!important;
  border-radius:0!important; background:none!important; box-shadow:none!important;
  font-size:17px!important; font-weight:800!important; letter-spacing:-.01em;
  overflow:visible!important;
}
.page-body:not(.dashboard-body) > .page-title:before{
  content:""!important; position:static!important; transform:none!important;
  width:3px!important; height:15px!important; border-radius:3px!important;
  background:var(--nile-green)!important; margin-inline-end:9px!important; flex:none;
}
.page-title-main{font-size:17px!important;font-weight:800!important;line-height:1.25}
.page-title-sub{display:none!important}

/* V25.2 — مثبت الفرع داخل الشريط العلوي بدل الصندوق العائم الذي كان يحجب المحتوى. */
.odoo-topbar>.bsw-wrap{position:relative!important;top:auto!important;inset-inline-end:auto!important;margin-inline:3px!important;z-index:1600!important;order:2;flex:0 1 auto;min-width:0}
.odoo-topbar>.bsw-wrap .bsw-trigger{min-height:28px!important;height:28px!important;max-width:132px!important;padding:3px 7px!important;border-radius:7px!important;box-shadow:none!important;font-size:10px!important;backdrop-filter:none}
.odoo-topbar>.bsw-wrap .bsw-trigger i{font-size:9px!important}.odoo-topbar>.bsw-wrap .bsw-trigger span{max-width:82px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odoo-topbar>.bsw-wrap .bsw-menu{top:calc(100% + 5px)!important;min-width:205px!important}

/* عنوان الصفحة كسطر صغير، والإجراءات السريعة بحجم لا يحجب الخلايا السفلية. */
.page-body:not(.dashboard-body)>.page-title{margin:1px 0 7px!important;padding:0 0 5px!important;font-size:14px!important;letter-spacing:0!important}.page-title-main{font-size:14px!important;line-height:1.2!important}
.qfab-wrap{inset-block-end:10px!important;inset-inline-end:10px!important}.qfab-trigger{width:36px!important;height:36px!important;font-size:13px!important;box-shadow:0 4px 14px rgba(15,23,42,.18)!important}.qfab-menu{inset-block-end:calc(100% + 6px)!important;min-width:160px!important;border-radius:9px!important}.qfab-item{padding:7px 9px!important;font-size:10px!important}

/* V25.3 — محدد الفرع زر صغير في الركن السفلي، وقائمته تفتح لأعلى. */
.bsw-wrap{position:fixed!important;top:auto!important;inset-block-end:9px!important;inset-inline-end:9px!important;margin:0!important;z-index:1600!important}
.bsw-trigger{width:32px!important;height:32px!important;min-height:32px!important;max-width:32px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important;box-shadow:0 4px 14px rgba(15,23,42,.18)!important;font-size:0!important;overflow:hidden}
.bsw-trigger>i:first-child{font-size:12px!important}.bsw-trigger span,.bsw-trigger .bsw-caret{display:none!important}.bsw-menu{inset-block-start:auto!important;inset-block-end:calc(100% + 6px)!important;inset-inline-end:0!important;min-width:190px!important;max-height:260px!important;border-radius:9px!important;padding:4px!important}.bsw-item{padding:6px 8px!important;font-size:10px!important;border-radius:6px!important}

/* ---------- بنود القوائم: أيقونة صامتة، الأخضر للنشط بس ---------- */
.hover-item{font-size:12.5px!important;padding:6px 8px!important;gap:8px!important;
  font-weight:650!important;transition:background .12s ease,color .12s ease!important}
.hover-item:hover{transform:none!important;background:var(--surface-hover)!important}
.hover-item .item-icon{width:22px!important;height:22px!important;font-size:11.5px!important;
  background:transparent!important;color:var(--text-faint)!important;border-radius:5px!important}
.hover-item:hover .item-icon{color:var(--num-ok)!important}
.hover-item.active{background:rgba(46,168,78,.10)!important;color:var(--nile-green-deep)!important;
  font-weight:800!important;box-shadow:inset 2px 0 0 var(--nile-green)!important}
.hover-item.active .item-icon{background:transparent!important;color:var(--num-ok)!important}

/* ---------- عناوين مجموعات القائمة: تسمية هادية بدل شريط مرسوم ---------- */
.dropdown-header-title{
  font-size:0.6875rem!important;font-weight:800!important;color:var(--text-faint)!important;
  border-bottom:0!important;padding:8px 8px 3px!important;margin-bottom:1px!important;
  letter-spacing:.02em!important;
}
.dropdown-header-title i{display:none!important}

/* ---------- البطاقات والعناوين الداخلية: كثافة أعلى ---------- */
.card-panel{padding:14px 15px!important;border-color:var(--border-soft)!important;
  border-radius:12px!important}
.section-title{font-size:13.5px!important;font-weight:800!important;margin-bottom:10px!important;
  color:var(--text)!important;letter-spacing:-.005em}

/* ---------- الجداول: صفوف أنحف ورأس واضح ---------- */
.enterprise-table th{font-size:11px!important;font-weight:800!important;
  color:var(--text-faint)!important;padding:8px 10px!important;letter-spacing:.01em}
.enterprise-table td{font-size:12.5px!important;padding:8px 10px!important;
  vertical-align:middle!important}

/* ---------- المدخلات: ارتفاع موحّد ومريح ---------- */
.form-control-sm,.form-select-sm{font-size:12.5px!important;padding:5px 9px!important;
  border-radius:8px!important}
.btn-sm{font-size:12px!important;padding:5px 11px!important;border-radius:8px!important;
  font-weight:700!important}
label.small,.form-label{font-size:11px!important;font-weight:700!important;
  color:var(--text-dim)!important;margin-bottom:3px!important}

/* ---------- مسافة أهدأ بين الأقسام ---------- */
.card-panel.mb-3{margin-bottom:12px!important}
.card-panel.mb-4{margin-bottom:14px!important}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- وضوح تركيز لوحة المفاتيح (وصولية) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--nile-green)!important;outline-offset:2px!important;
}

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

/* ---------- الخلفية: تدرج رأسي هادى بدل القطري بـ3 ألوان ---------- */
.odoo-topbar{
  background:linear-gradient(180deg,#1B6B30 0%,#175C29 100%)!important;
  border-bottom:1px solid rgba(0,0,0,.18)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.16)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* محصورة على الشاشات الكبيرة: تحت 700px القائمة بقت لوح منسدل بشبكة،
   والقواعد دي هتكسره لو اتطبقت هناك. */
@media (min-width:701px){
/* ---------- منطقة التنقل: صف واحد مايلفّش، وبيتمرّر لو ضاق ---------- */
.nav-menu-container{
  flex-wrap:nowrap!important;row-gap:0!important;gap:1px!important;
  overflow-x:clip!important;overflow-y:visible!important;
  scrollbar-width:none!important;-ms-overflow-style:none!important;
}
.nav-menu-container::-webkit-scrollbar{display:none!important}

/* ---------- أزرار الأقسام: أكبر وأهدى، بمؤشر تبويب سفلي ---------- */
.nav-link-btn{
  font-size:clamp(12px,1.02vw,13.5px)!important;
  font-weight:650!important;
  padding:9px 11px 8px!important;
  gap:6px!important;
  border-radius:7px 7px 0 0!important;
  color:rgba(255,255,255,.86)!important;
  transition:background .13s ease,color .13s ease!important;
  position:relative!important;
  border-bottom:2px solid transparent!important;
}
.nav-link-btn:hover,.nav-menu-item:hover > .nav-link-btn{
  background:rgba(255,255,255,.10)!important;color:#fff!important;
  transform:none!important;box-shadow:none!important;
}
.nav-link-btn:active{transform:none!important}

/* التبويب النشط: مؤشر أبيض صريح تحته - أوضح بكتير من بقعة شفافة */
.nav-link-btn.active{
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;font-weight:800!important;
  border-bottom:2px solid #FFFFFF!important;
  box-shadow:none!important;
}

/* الأيقونة والسهم: ثابتين، مافيش تكبير ولا لفّ */
.nav-link-btn .nav-icon{font-size:14px!important;opacity:.9!important;transition:none!important}
.nav-link-btn:hover .nav-icon{transform:none!important;opacity:1!important}
.nav-link-btn.active .nav-icon{opacity:1!important}
.nav-link-btn .caret{font-size:0.6875rem!important;opacity:.5!important;transition:none!important}
.nav-menu-item:hover .caret{transform:none!important;opacity:.8!important}

}

/* ---------- التاريخ والساعة: معلومة سياقية هادية مش عنصر لامع ---------- */
.date-pill{
  background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.14)!important;
  font-size:11.5px!important;font-weight:600!important;border-radius:7px!important;
  padding:5px 9px!important;color:rgba(255,255,255,.85)!important;
}
.date-pill i{color:rgba(255,255,255,.6)!important;font-size:11px!important}
.live-clock{color:rgba(255,255,255,.95)!important;font-weight:700!important;
  min-width:auto!important;letter-spacing:.01em}
.live-clock-sep{opacity:.35!important}

/* ---------- القوائم المنسدلة: ظل أخف وحركة أسرع ---------- */
.nav-hover-menu{
  border-radius:10px!important;padding:7px!important;
  border-color:var(--border-soft)!important;
  box-shadow:0 10px 28px -6px rgba(15,23,42,.20),0 2px 8px -2px rgba(15,23,42,.08)!important;
  animation:flyoutSlide .12s ease-out forwards!important;
}
.nav-hover-menu.mega-menu{padding:12px 13px!important;gap:12px!important;width:500px!important}

/* ---------- قائمة المستخدم: بنود الحساب اللى اتنقلت من الشريط ---------- */
.ud-sep{height:1px;background:var(--border-soft);margin:7px 0}
.ud-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  color:var(--text);font-size:12.5px;font-weight:650;text-decoration:none;
  transition:background .12s ease;
}
.ud-item:hover{background:var(--surface-hover);color:var(--num-ok)}
.ud-item i{font-size:13px;color:var(--text-faint);width:16px;text-align:center}
.ud-item:hover i{color:var(--num-ok)}

/* ---------- أزرار الأدوات: حجم موحّد وهدوء ---------- */
.tb-icon-btn,.theme-switch-btn,.enterprise-notify-btn{
  transition:background .12s ease!important;transform:none!important;
}
.tb-icon-btn:hover,.theme-switch-btn:hover,.enterprise-notify-btn:hover{
  background:rgba(255,255,255,.14)!important;transform:none!important;
}
.enterprise-search-trigger{
  transition:background .12s ease!important;transform:none!important;
  font-size:12px!important;border-radius:7px!important;
}
.enterprise-search-trigger:hover{transform:none!important}

/* =====================================================================
   V25.2 — نافذة تفاصيل الشهر (الرسم البياني ← التحليل التنفيذي)
   ===================================================================== */
.v24-drill .modal-header{align-items:flex-start;padding:14px 16px 11px;border-bottom:1px solid var(--border-soft)}
.v24-drill .modal-title{font-size:15px!important;font-weight:800!important}
.v24-drill-sub{font-size:11px;color:var(--text-faint);font-weight:600;margin-top:2px;direction:ltr;text-align:right}
.v24-drill .modal-body{padding:14px 16px}
.v24-drill .modal-footer{padding:10px 16px;border-top:1px solid var(--border-soft);gap:7px}
.v24-drill-loading,.v24-dd-empty{padding:26px 10px;text-align:center;color:var(--text-faint);
  font-size:12.5px;font-weight:600}
.v24-dd-error{padding:18px 12px;text-align:center;color:var(--red);font-size:12.5px;font-weight:700;
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.25);border-radius:9px}
.v24-dd-error small{color:var(--text-faint);font-weight:600}

/* المؤشرات الأساسية */
.v24-dd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
@media(max-width:640px){.v24-dd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v24-dd-kpi{background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:9px;
  padding:9px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.v24-dd-kpi small{font-size:0.6875rem;color:var(--text-faint);font-weight:700}
.v24-dd-kpi b{font-size:16px;font-weight:900;color:var(--text);direction:ltr;text-align:right;
  font-variant-numeric:tabular-nums}
.v24-dd-chip{font-size:0.6875rem;font-weight:800;border-radius:20px;padding:1px 6px;width:fit-content}
.v24-dd-chip.up{background:rgba(46,168,78,.14);color:var(--nile-green-deep)}
.v24-dd-chip.down{background:rgba(239,68,68,.12);color:#B91C1C}
.v24-dd-chip.neutral{background:var(--surface-hover);color:var(--text-faint)}

/* مؤشرات ثانوية */
.v24-dd-mini{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.v24-dd-mini span{font-size:0.6875rem;font-weight:650;color:var(--text-dim);background:var(--surface-alt);
  border:1px solid var(--border-soft);border-radius:7px;padding:4px 8px}
.v24-dd-mini b{font-variant-numeric:tabular-nums;color:var(--text);font-weight:800}
.v24-dd-mini b.minus{color:#B91C1C}
.v24-dd-mini b.plus{color:var(--nile-green-deep)}

/* عناوين الأقسام داخل النافذة */
.v24-dd-sec{font-size:11px;font-weight:800;color:var(--text-faint);margin:14px 0 7px;
  padding-bottom:4px;border-bottom:1px solid var(--border-soft)}

/* صفوف الأشرطة النسبية */
.v24-dd-row{margin-bottom:8px}
.v24-dd-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px}
.v24-dd-row-top span{font-size:12px;font-weight:650;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v24-dd-row-top b{font-size:12.5px;font-weight:800;color:var(--text);direction:ltr;
  font-variant-numeric:tabular-nums;flex-shrink:0}
.v24-dd-track{height:5px;background:var(--surface-hover);border-radius:4px;overflow:hidden}
.v24-dd-track i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--nile-green) 0%,var(--nile-green-dark) 100%)}
.v24-dd-note{font-size:0.6875rem;color:var(--text-faint);font-weight:600;margin-top:2px}

/* الشفتات الشاذة */
.v24-dd-outliers{display:flex;flex-direction:column;gap:5px}
.v24-dd-out{display:flex;align-items:center;gap:9px;background:rgba(245,158,11,.07);
  border:1px solid rgba(245,158,11,.28);border-radius:8px;padding:7px 9px}
.v24-dd-out span{font-size:11.5px;font-weight:700;color:var(--text);flex:1;min-width:0}
.v24-dd-out b{font-size:12.5px;font-weight:800;direction:ltr;font-variant-numeric:tabular-nums}
.v24-dd-out small{font-size:0.6875rem;color:var(--text-faint);font-weight:650;flex-shrink:0}

/* تلميح إن العمود قابل للضغط */
.v24-chart-bar{cursor:pointer;transition:opacity .12s ease}
.v24-chart-bar:hover,.v24-chart-bar:focus{opacity:.82}
.v24-chart-bar:focus-visible{outline:2px solid var(--nile-green);outline-offset:2px}

/* ---------- V25.3 شاشة الموظفين: مؤشرات بدل فقرة الشرح ---------- */
.emp-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
@media(max-width:900px){.emp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.emp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.emp-kpi{background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;
  padding:9px 11px;min-width:0}
.emp-kpi small{display:block;font-size:0.6875rem;font-weight:700;color:var(--text-faint);margin-bottom:2px}
.emp-kpi b{font-size:19px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums}
.emp-kpi.warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.06)}
.emp-kpi.warn b{color:#92610A}

.pay-tag{font-size:0.6875rem;font-weight:800;border-radius:20px;padding:2px 8px;white-space:nowrap}
.pay-tag.h{background:rgba(37,99,235,.10);color:#1D4ED8}
.pay-tag.m{background:rgba(46,168,78,.12);color:var(--nile-green-deep)}
.miss{font-size:0.6875rem;font-weight:700;color:#92610A;background:rgba(245,158,11,.10);
  border-radius:5px;padding:1px 6px}

/* ---------- V25.4 وضع تعديل حساب السيولة: إشارة بصرية واضحة ---------- */
#cashAcctBox.editing{
  border-color:var(--nile-green)!important;
  box-shadow:0 0 0 3px rgba(46,168,78,.14)!important;
}
#cashAcctBox.editing #cashAcctFormTitle{color:var(--nile-green-deep)!important}

/* =====================================================================
   V25.5 — تحسينات الشريط: تلميح منبثق، بحث مصغّر، حذف الفراغ، خط فاصل ثابت
   ===================================================================== */

/* ---------- 1) تلميح منبثق بالنص الكامل عند الوقوف على القسم ----------
   على شاشات اللاب الصغيرة اسم القسم بيتقص، فالتلميح بيعرضه كامل. */
@media (min-width:701px){
  .nav-link-btn[data-full]{ position:relative; }
  .nav-link-btn[data-full]::after{
    content:attr(data-full);
    position:absolute; top:calc(100% + 7px); inset-inline-start:50%;
    transform:translateX(50%) translateY(-3px);
    background:#0F2233; color:#fff; font-size:11.5px; font-weight:700;
    padding:5px 10px; border-radius:6px; white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    opacity:0; visibility:hidden; pointer-events:none; z-index:1200;
    transition:opacity .14s ease, transform .14s ease;
  }
  .nav-link-btn[data-full]:hover::after,
  .nav-link-btn[data-full]:focus-visible::after{
    opacity:1; visibility:visible; transform:translateX(50%) translateY(0);
  }
  /* لما القائمة المنسدلة مفتوحة (مثبّتة) نخفي التلميح عشان ما يغطّيهاش */
  .nav-menu-item:hover .nav-link-btn[data-full]::after,
  .nav-menu-item.is-pinned .nav-link-btn[data-full]::after{ opacity:0; visibility:hidden; }

  /* النص يتقص بنقط بدل ما يتقطع فجأة */
  .nav-link-btn > span:not(.nav-icon):not(.caret){
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;
  }
}

/* ---------- 2) البحث السريع: أيقونة مربعة زي باقي الأدوات ---------- */
.enterprise-search-trigger{
  width:34px!important; height:34px!important; padding:0!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  border-radius:8px!important; min-width:0!important; gap:0!important;
}
.enterprise-search-trigger i{ font-size:15px!important; margin:0!important; }
.enterprise-search-trigger span,
.enterprise-search-trigger kbd{ display:none!important; }

/* ---------- 3) حذف الفراغ الأبيض تحت الشريط ---------- */
.v24-global-welcome{
  margin:0 0 10px!important; border-radius:0!important;
  border-inline:0!important; border-top:0!important;
  box-shadow:none!important; backdrop-filter:none!important;
  background:var(--surface)!important; padding:7px 16px!important;
}
.v24-welcome-icon{ display:none!important; }
.v24-welcome-action:hover{ transform:none!important; box-shadow:none!important; }

/* ---------- 4) خط فاصل ثابت تحت الشريط فى كل النظام ---------- */
.odoo-topbar{ box-shadow:0 1px 0 rgba(15,35,58,.14), 0 2px 6px rgba(0,0,0,.10)!important; }
.page-body{ padding-top:10px!important; }
.page-body > *:first-child{ margin-top:0!important; }

/* ---------- 5) اللوجو أكبر شوية ---------- */
/* الحاوية كانت 46px بحشو 4px، فالصورة الفعلية كانت ~38px. كبّرنا الاتنين
   مع تقليل الحشو عشان اللوجو نفسه يكبر فعليًا مش الإطار بس. */
.brand-img-wrap{ width:54px!important; height:54px!important; padding:3px!important;
  border-radius:14px!important; }
.brand-img-wrap img{ width:100%!important; height:100%!important; object-fit:contain!important; }
.brand-img-wrap:hover{ transform:none!important; }

/* ---------- 6) تمرير القائمة بعجلة الماوس أفقيًا ---------- */
.nav-menu-container{ scroll-behavior:smooth; overscroll-behavior-x:contain; }

/* =====================================================================
   V25.6 — إصلاح الوضع الليلي
   الطبقات السابقة استخدمت ألوان ثابتة (خصوصًا تدرج الشريط الأخضر)
   فكانت بتتغلب على متغيرات النايت مود وتخلي عناصر مضيّة أو نص غير واضح.
   ===================================================================== */
[data-theme="dark"] .odoo-topbar{
  background:linear-gradient(180deg,#11281A 0%,#0C1D12 100%)!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.45)!important;
}
[data-theme="dark"] .nav-link-btn{ color:rgba(241,245,249,.82)!important; }
[data-theme="dark"] .nav-link-btn:hover{ background:rgba(255,255,255,.09)!important; color:#fff!important; }
[data-theme="dark"] .nav-link-btn.active{
  background:rgba(46,168,78,.20)!important; color:#fff!important;
  border-bottom-color:var(--odoo-primary-light,#43C165)!important;
}
[data-theme="dark"] .date-pill{
  background:rgba(255,255,255,.07)!important; border-color:rgba(255,255,255,.12)!important;
  color:rgba(241,245,249,.85)!important;
}

/* شريط الترحيب والفواصل */
[data-theme="dark"] .v24-global-welcome{
  background:var(--surface)!important; border-color:var(--border-soft)!important;
}

/* بنود القوائم المنسدلة */
[data-theme="dark"] .hover-item{ color:var(--text)!important; }
[data-theme="dark"] .hover-item:hover{ background:var(--surface-hover)!important; color:#fff!important; }
[data-theme="dark"] .hover-item .item-icon{ color:var(--text-faint)!important; }
[data-theme="dark"] .hover-item:hover .item-icon{ color:var(--odoo-primary-light)!important; }
[data-theme="dark"] .hover-item.active{
  background:rgba(46,168,78,.18)!important; color:#fff!important;
  box-shadow:inset 2px 0 0 var(--odoo-primary-light)!important;
}
[data-theme="dark"] .hover-item.active .item-icon{ color:var(--odoo-primary-light)!important; }
[data-theme="dark"] .dropdown-header-title{ color:var(--text-faint)!important; }

/* رأس الصفحة */
[data-theme="dark"] .page-body:not(.dashboard-body) > .page-title{
  border-bottom-color:var(--border)!important; color:var(--text)!important;
}
[data-theme="dark"] .page-title-main{ color:var(--text)!important; }
[data-theme="dark"] .section-title{ color:var(--text)!important; }

/* نافذة تفاصيل الشهر */
[data-theme="dark"] .v24-drill .modal-content{ background:var(--surface); color:var(--text); }
[data-theme="dark"] .v24-dd-kpi{ background:var(--surface-alt); border-color:var(--border); }
[data-theme="dark"] .v24-dd-kpi b{ color:var(--text); }
[data-theme="dark"] .v24-dd-chip.down{ background:rgba(239,68,68,.20); color:#FCA5A5; }
[data-theme="dark"] .v24-dd-chip.up{ background:rgba(46,168,78,.20); color:#86EFAC; }
[data-theme="dark"] .v24-dd-chip.neutral{ background:var(--surface-hover); color:var(--text-dim); }
[data-theme="dark"] .v24-dd-mini span{ background:var(--surface-alt); border-color:var(--border); color:var(--text-dim); }
[data-theme="dark"] .v24-dd-mini b{ color:var(--text); }
[data-theme="dark"] .v24-dd-mini b.minus{ color:#FCA5A5; }
[data-theme="dark"] .v24-dd-mini b.plus{ color:#86EFAC; }
[data-theme="dark"] .v24-dd-row-top span,
[data-theme="dark"] .v24-dd-row-top b{ color:var(--text); }
[data-theme="dark"] .v24-dd-track{ background:var(--surface-hover); }
[data-theme="dark"] .v24-dd-out{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.30); }
[data-theme="dark"] .v24-dd-out span,
[data-theme="dark"] .v24-dd-out b{ color:var(--text); }
[data-theme="dark"] .v24-dd-error{ background:rgba(239,68,68,.12); color:#FCA5A5; }

/* شاشة الموظفين */
[data-theme="dark"] .emp-kpi{ background:var(--surface-alt); border-color:var(--border); }
[data-theme="dark"] .emp-kpi b{ color:var(--text); }
[data-theme="dark"] .emp-kpi.warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
[data-theme="dark"] .emp-kpi.warn b{ color:#FCD34D; }
[data-theme="dark"] .pay-tag.h{ background:rgba(37,99,235,.22); color:#93C5FD; }
[data-theme="dark"] .pay-tag.m{ background:rgba(46,168,78,.22); color:#86EFAC; }
[data-theme="dark"] .miss{ background:rgba(245,158,11,.16); color:#FCD34D; }

/* حسابات السيولة - وضع التعديل */
[data-theme="dark"] #cashAcctBox.editing{
  border-color:var(--odoo-primary-light)!important;
  box-shadow:0 0 0 3px rgba(46,168,78,.22)!important;
}
[data-theme="dark"] #cashAcctBox.editing #cashAcctFormTitle{ color:var(--odoo-primary-light)!important; }

/* عناصر عامة كانت بتفضل بيضا أو باهتة */
[data-theme="dark"] .card-panel{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .enterprise-table th{ color:var(--text-dim)!important; }
[data-theme="dark"] .enterprise-table td{ color:var(--text)!important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
  background:var(--surface-alt); border-color:var(--border); color:var(--text);
}
[data-theme="dark"] .form-control::placeholder{ color:var(--text-faint); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{
  background:var(--surface-alt); color:var(--text);
  border-color:var(--odoo-primary); box-shadow:0 0 0 3px rgba(46,168,78,.18);
}
[data-theme="dark"] label.small,
[data-theme="dark"] .form-label{ color:var(--text-dim)!important; }
[data-theme="dark"] .text-muted{ color:var(--text-faint)!important; }
[data-theme="dark"] code{ background:var(--surface-hover); color:#86EFAC; }
[data-theme="dark"] .modal-content{ background:var(--surface); color:var(--text); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer{ border-color:var(--border); }
[data-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }
[data-theme="dark"] .btn-outline-secondary{ color:var(--text-dim); border-color:var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover{ background:var(--surface-hover); color:var(--text); }

/* صف الصافي فى درج تفاصيل الفرع: يتقرا كنتيجة معادلة مش كصف عادي */
.v24d-total{ border-top:1px solid var(--border)!important; font-weight:900!important; }
.v24d-total b{ color:var(--nile-green-deep)!important; font-size:14px!important; }
[data-theme="dark"] .v24d-total b{ color:#86EFAC!important; }

/* =====================================================================
   V25.7 — معاينة الشفت: المعلومات تتكيّف مع الشاشة بدل السحب الجانبي
   الجداول هنا صفوفها قليلة الأعمدة ومقروءة، فبدل ما ندي المستخدم شريط
   سحب أفقي عشان يشوف آخر عمودين، بنحوّل كل صف لبطاقة على الشاشات الضيقة
   وكل خانة بتاخد عنوان عمودها من data-label.
   ===================================================================== */
#shiftPreviewPage .table-responsive{ overflow-x:visible!important; }
#shiftPreviewPage table{ width:100%!important; }

@media (max-width:820px){
  #shiftPreviewPage .table-responsive{ overflow:visible!important; }
  #shiftPreviewPage table,
  #shiftPreviewPage thead,
  #shiftPreviewPage tbody,
  #shiftPreviewPage tr,
  #shiftPreviewPage th,
  #shiftPreviewPage td{ display:block!important; width:auto!important; }

  #shiftPreviewPage thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

  #shiftPreviewPage tbody tr{
    border:1px solid var(--border-soft); border-radius:10px;
    padding:8px 10px; margin-bottom:8px; background:var(--surface);
  }
  #shiftPreviewPage tbody td{
    display:flex!important; justify-content:space-between; align-items:center; gap:12px;
    border:0!important; border-bottom:1px dashed var(--border-soft)!important;
    padding:6px 0!important; text-align:start!important;
  }
  #shiftPreviewPage tbody tr td:last-child{ border-bottom:0!important; }
  #shiftPreviewPage tbody td::before{
    content:attr(data-label); font-size:0.6875rem; font-weight:800;
    color:var(--text-faint); flex:0 0 auto;
  }
  #shiftPreviewPage tbody td:not([data-label])::before{ content:""; }
}

/* V24.18 EXACT UX — نفس كثافة الصفحة الرئيسية في كل الشاشات */
.v24-global-welcome{margin-bottom:0!important;padding-block:6px!important;}
.page-body{padding-top:6px!important;padding-bottom:10px!important;}
.page-body:not(.dashboard-body) > .page-title{margin-top:0!important;margin-bottom:8px!important;padding-bottom:7px!important;}
.app-footer{padding-top:6px!important;padding-bottom:8px!important;}
.shift-sequence-locked{cursor:not-allowed!important;background-color:var(--surface-alt)!important;font-weight:800!important;}

/* V24.20 — شاشة تقفيل الورديات: شريط الذكر فوق العنوان ومساحة الهيدر أقل قليلًا فقط. */
.shift-close-page{padding-top:2px!important;}
.shift-close-page .v24-dhikr-strip{margin-top:0!important;margin-bottom:5px!important;}
.shift-close-page > .page-title{margin-top:0!important;margin-bottom:7px!important;padding-bottom:6px!important;}
.shift-close-page .shift-entry-panel{margin-top:0!important;}

/* =========================================================
   V24.22 — شريط الأقسام العلوي: إلغاء السحب + بمب جمالي بالاسم الكامل
   ========================================================= */

/* 1) إلغاء السحب/التمرير الأفقي نهائيًا (ماوس، لمس، أو Trackpad)
   مهم: لو حطينا overflow-x:hidden مع overflow-y:visible، المتصفح بيحوّل الرأسي
   لـauto غصب عنه - وساعتها عجلة الماوس فوق الشريط بتشد الكلام لفوق ويختفي.
   الحل الصح هو overflow-x:clip، لأنه بيقص الأفقي من غير ما يخلي الرأسي قابل للتمرير،
   وبيسيب فقاعة اسم القسم تنزل بره الشريط عادي. */
.nav-menu-container{
  overflow-x:clip !important;
  overflow-y:visible !important;
  overflow-clip-margin:14px;
  flex-wrap:nowrap !important;
  overscroll-behavior:none !important;
  touch-action:pan-y !important;   /* اللمس الأفقي مايسحبش الشريط */
  scroll-snap-type:none !important;
}
.nav-menu-container::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}

/* 2) البمب الجمالي: القسم يطلع لفوق ويكبر شوية بحركة ناعمة */
.nav-menu-item{overflow:visible !important;}
.nav-link-btn{
  transform-origin:center bottom;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), background .18s ease,
             color .18s ease, box-shadow .22s ease !important;
}
.nav-menu-container .nav-link-btn:hover,
.nav-menu-container .nav-link-btn:focus-visible,
.nav-menu-item:hover > .nav-link-btn{
  transform:translateY(-3px) scale(1.07) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.22) !important;
  z-index:5;
}

/* 3) الاسم الكامل بيظهر فى فقاعة تحت القسم - حتى لو النص متقصّر بالنقط
      على شاشة لاب صغيرة. الفقاعة فوق كل حاجة ومابتزقّش باقي الأقسام. */
.nav-menu-item{position:relative !important;}
.nav-link-btn[data-full]::after{
  content:attr(data-full);
  position:absolute;
  inset-block-start:calc(100% + 9px);
  inset-inline-start:50%;
  transform:translateX(50%) translateY(-5px);
  background:var(--surface,#fff);
  color:var(--text,#0f172a);
  border:1px solid var(--border-soft,rgba(15,23,42,.12));
  border-radius:10px;
  padding:6px 12px;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:12500;
  transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.nav-link-btn[data-full]::before{
  content:"";
  position:absolute;
  inset-block-start:calc(100% + 4px);
  inset-inline-start:50%;
  transform:translateX(50%) rotate(45deg);
  width:9px;height:9px;
  background:var(--surface,#fff);
  border-inline-start:1px solid var(--border-soft,rgba(15,23,42,.12));
  border-block-start:1px solid var(--border-soft,rgba(15,23,42,.12));
  opacity:0;visibility:hidden;pointer-events:none;z-index:12501;
  transition:opacity .18s ease;
}
.nav-link-btn[data-full]:hover::after,
.nav-link-btn[data-full]:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(50%) translateY(0);
}
.nav-link-btn[data-full]:hover::before,
.nav-link-btn[data-full]:focus-visible::before{opacity:1;visibility:visible;}

/* الفقاعة تختفي وقت ما القائمة المنسدلة نفسها مفتوحة عشان ماتغطّيهاش */
.nav-menu-item.menu-pinned .nav-link-btn[data-full]::after,
.nav-menu-item.menu-pinned .nav-link-btn[data-full]::before{opacity:0 !important;visibility:hidden !important;}

@media (prefers-reduced-motion:reduce){
  .nav-menu-container .nav-link-btn:hover,
  .nav-menu-item:hover > .nav-link-btn{transform:none !important;}
  .nav-link-btn[data-full]::after{transition:opacity .1s ease;}
}

/* زرار مساعد النظام العائم اتشال من القوالب - القاعدة دي حاجز أخير لو أى قالب
   قديم/مخزّن فى الكاش لسه بيرسمه، عشان الدائرة الخضراء ماتظهرش تانى خالص. */
.ast-trigger,.ast-panel{display:none !important;visibility:hidden !important;}

/* حاجز أخير: أى قاعدة أقدم بتخلى شريط الأقسام قابل للتمرير الرأسي (وده اللى كان بيخلي
   الكلام يتشد لفوق ويختفي مع عجلة الماوس) بتتلغي هنا. */
.nav-menu-container,
.nav-menu-container .nav-menu-item{
  max-height:none !important;
  scroll-behavior:auto !important;
}

/* =========================================================
   V24.29 — خزينة الفرع فى شاشة التقفيل + محادثة التسوية
   بالألوان الأساسية للهوية (أخضر النيل + برتقالي) من غير أى تدرّجات.
   ========================================================= */

/* ---------- كارت خزينة الفرع ---------- */
.trs-card{
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:var(--surface);
  overflow:hidden;
}
.trs-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;
  background:var(--nile-green-dark);
  color:#fff;
}
.trs-head h6{margin:0;font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;}
.trs-balance{font-size:18px;font-weight:900;letter-spacing:-.02em;}
.trs-body{padding:14px 16px;}

/* شرائح الاتجاه: توريد أخضر / صرف برتقالي - نفس ألوان الهوية */
.trs-seg{display:flex;gap:8px;margin-bottom:14px;}
.trs-seg input{position:absolute;opacity:0;width:0;height:0;}
.trs-seg label{
  flex:1;text-align:center;cursor:pointer;user-select:none;
  padding:9px 10px;border-radius:10px;font-weight:800;font-size:13px;
  border:1.5px solid var(--border-soft);
  background:var(--surface-alt,transparent);
  color:var(--text-dim);
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
}
.trs-seg label:hover{transform:translateY(-1px);border-color:var(--border);}
.trs-seg input:checked + label.trs-in{
  background:var(--nile-green);border-color:var(--nile-green-dark);color:#fff;
}
.trs-seg input:checked + label.trs-out{
  background:var(--nile-orange);border-color:var(--nile-orange-dark);color:#fff;
}
.trs-seg input:focus-visible + label{box-shadow:var(--focus-ring);}

.trs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.trs-field label{font-size:11px;font-weight:800;color:var(--text-dim);margin-bottom:4px;display:block;}
.trs-amount{font-size:20px!important;font-weight:900!important;letter-spacing:-.02em;}
.trs-hint{
  font-size:11px;color:var(--text-dim);margin-top:10px;
  padding:8px 10px;border-radius:8px;
  background:rgba(46,168,78,.06);
  border-inline-start:3px solid var(--nile-green);
  border-radius:0 8px 8px 0;
}
.trs-log{margin-top:14px;border-top:1px solid var(--border-soft);padding-top:10px;}
.trs-log-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 0;border-bottom:1px dashed var(--border-soft);font-size:12.5px;
}
.trs-log-row:last-child{border-bottom:0;}
.trs-amt-in{color:var(--num-ok);font-weight:800;}
.trs-amt-out{color:var(--nile-orange-dark);font-weight:800;}

/* ---------- محادثة التسوية ---------- */
.stl-thread{
  display:flex;flex-direction:column;gap:10px;
  max-height:420px;overflow-y:auto;padding-inline-end:4px;
}
.stl-msg{
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:9px 12px;
  background:var(--surface-alt,transparent);
  max-width:82%;
  align-self:flex-start;
}
.stl-msg.stl-mine{
  align-self:flex-end;
  background:rgba(46,168,78,.07);
  border-color:rgba(46,168,78,.35);
}
.stl-msg-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--text-dim);margin-bottom:3px;
}
.stl-time{margin-inline-start:auto;font-size:0.6875rem;color:var(--text-faint);}
.stl-msg-body{font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;}
.stl-tag{
  background:var(--nile-orange);color:#fff;
  font-size:0.6875rem;font-weight:800;padding:2px 8px;border-radius:10px;
}
@media (max-width:600px){.stl-msg{max-width:94%;}}


/* =========================================================
   V24.31 — شاشة تقفيل الورديات: تصميم مضغوط يبات في شاشة واحدة
   مبني من الصفر على الموك أب. ألوان الهوية، مسطّح، بلا تدرّجات.
   ========================================================= */
.shx{--shx-r:9px;--shx-gap:7px;display:flex;flex-direction:column;gap:var(--shx-gap);
  font-size:12px;line-height:1.35;}
.shx *{box-sizing:border-box;}

/* حقول موحّدة وصغيرة عبر الشاشة كلها */
.shx input,.shx select{
  width:100%;min-height:26px;height:26px;padding:2px 6px;
  border:1px solid var(--border-soft);border-radius:6px;
  background:var(--surface);color:var(--text);
  font-size:12px;font-family:inherit;
}
.shx input:focus,.shx select:focus{outline:0;border-color:var(--nile-green);box-shadow:var(--focus-ring);}
.shx input[readonly]{background:var(--surface-alt);}
.shx .shx-num{text-align:center;font-weight:800;font-variant-numeric:tabular-nums;}

/* ---------- 1) الشريط العلوي ---------- */
/* V25.1: ظل خفيف على كل عناصر شاشة التقفيل (كانت أسطح مستوية تمامًا، حدودها
   بس اللي بتفصلها عن الخلفية) - نفس الأحجام والمسافات بالظبط، بس إحساس
   "طبقات" حقيقي بدل السطح المفلطح. */
.shx-bar{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  padding:8px 11px;border-radius:var(--shx-r);
  background:var(--surface);border:1px solid var(--border-soft);
  box-shadow:var(--e-1);
}
.shx-f{display:flex;flex-direction:column;gap:3px;min-width:120px;}
.shx-f-wide{flex:1 1 170px;}
.shx-f-pin{max-width:128px;position:relative;}
.shx-f-shift{min-width:auto;}
.shx-f>label{font-size:0.6875rem;font-weight:800;color:var(--text-dim);}
.shx-ro{min-height:26px;display:flex;align-items:center;padding:0 7px;border-radius:6px;
  background:var(--surface-alt);border:1px solid var(--border-soft);font-weight:800;}
/* رسالة التحقق من كلمة السر (صح/غلط/تنبيه) كانت بتتكتب جوّه عمود الشريط
   العلوي نفسه، فلو الرسالة طويلة كانت بتزوّد ارتفاع الخانة وتمطّط شريط
   الأدوات كله لتحت. دلوقتي هي بالونة عائمة (position:absolute) تحت خانة
   الرقم السري مباشرة - بتظهر فوق أي حاجة تانية من غير ما تأثّر على ارتفاع
   الشريط خالص، مهما كان طول الرسالة. */
.shx-pin{
  position:absolute;top:100%;inset-inline-start:0;margin-top:3px;z-index:60;
  display:none;width:max-content;max-width:190px;font-size:0.6875rem;line-height:1.4;
  font-weight:700;padding:4px 8px;border-radius:7px;
  background:var(--surface);border:1px solid var(--border-soft);
  box-shadow:0 6px 16px rgba(15,23,42,.14);
}
.shx-pin:not(:empty){display:block;}
.shx-pin.is-ok{color:var(--num-ok);border-color:rgba(46,168,78,.4);}
.shx-pin.is-bad{color:#DC2626;border-color:rgba(220,38,38,.4);}
/* الرسالة العائمة (.shx-pin) بتختفي وحدها بعد 15 ثانية (JS)، لكن خانة الإدخال نفسها
   بتفضل ملوّنة كمؤشر دائم للحالة - أخضر=صح، أحمر=غلط أو مفيش كلمة سر خالص. لونين بس
   من غير حالة تنبيه صفراء تالتة. */
#responsiblePinInput.is-ok{border-color:var(--nile-green-dark);background:rgba(46,168,78,.06);}
#responsiblePinInput.is-bad{border-color:#DC2626;background:rgba(220,38,38,.06);}

.shx-segs{display:flex;gap:4px;}
.shx-seg{
  min-width:62px;height:26px;padding:0 10px;border-radius:6px;
  border:1px solid var(--border-soft);background:var(--surface-alt);
  color:var(--text-dim);font-weight:800;font-size:12px;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.shx-seg:hover:not(:disabled){border-color:var(--nile-green);}
/* الخلفية بقت g-600 مش g-500: الأبيض على #2EA84E كان 3.08:1 - راسب. */
.shx-seg.is-active{background:var(--nile-green-on-white);border-color:var(--nile-green-on-white);color:#fff;}
.shx-seg:disabled{cursor:default;}
.shx-seg:disabled:not(.is-active){opacity:.6;}

.shx-acts{display:flex;gap:6px;margin-inline-start:auto;align-items:flex-end;}
/* V25.1: تدرّج + ظل + رفعة بسيطة عند الـhover بدل اللون المصمت المفلطح -
   نفس ارتفاع وحجم الزرار بالظبط، بس بيحس المستخدم إنه ضغط حاجة "حقيقية". */
.shx-b1{
  height:28px;padding:0 14px;border:0;border-radius:6px;
  background:linear-gradient(155deg,var(--nile-green-dark),var(--nile-green-deep));
  color:#fff;font-weight:800;font-size:12px;cursor:pointer;
  white-space:nowrap;box-shadow:0 3px 10px -3px rgba(46,168,78,.55);
  transition:background .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
}
.shx-b1:hover{
  background:linear-gradient(155deg,var(--nile-green-dark),var(--nile-green-deep));
  color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(46,168,78,.6);
}
.shx-b1:active{transform:translateY(0);box-shadow:0 2px 6px -2px rgba(46,168,78,.5);}
.shx-b-sm{height:26px;width:100%;}
.shx-b2{
  height:28px;padding:0 12px;display:inline-flex;align-items:center;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);
  color:var(--text);font-weight:800;font-size:12px;cursor:pointer;
  white-space:nowrap;text-decoration:none;transition:border-color .15s var(--ease);
}
.shx-b2:hover{border-color:var(--nile-green);color:var(--text);}

.shx-sub{font-size:0.6875rem;color:var(--text-dim);padding-inline:3px;}

/* ---------- 2) بطاقات المؤشرات: صفين × 5 ---------- */
.shx-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--shx-gap);}
.shx-k{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  padding:7px 10px;border-radius:var(--shx-r);
  border:1px solid var(--border-soft);background:var(--surface);
  box-shadow:var(--e-1);transition:box-shadow .15s var(--ease),transform .15s var(--ease);
}
.shx-k:hover{box-shadow:var(--e-2);transform:translateY(-1px);}
.shx-k>span{font-size:0.6875rem;font-weight:800;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:4px;}
.shx-k>span i{font-size:11px;opacity:.75;flex:0 0 auto;}
.shx-k>b{font-size:19px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.shx-k>input{
  border:0!important;background:transparent!important;padding:0!important;
  height:24px!important;min-height:24px!important;
  font-size:19px;font-weight:900;letter-spacing:-.02em;text-align:start;
  font-variant-numeric:tabular-nums;
}
.shx-k>input:focus{box-shadow:none!important;}
.shx-badge{font-size:0.6875rem;font-style:normal;font-weight:800;opacity:.85;}
.shx-b-dim{color:var(--text-dim);}

/* لوحة ألوان واحدة مبسّطة: الأخضر (كاش/فيزا محصّل فعلاً) والأحمر (فرق/تجاوز
   محتاج انتباه) هما اللونين الدلاليين الوحيدين. باقي البطاقات محايدة. */
.k-sales{background:var(--surface-alt);border-color:var(--border-soft);}
.k-sales>b,.k-sales>input{color:var(--text);}
.k-cash{background:rgba(46,168,78,.08);border-color:rgba(46,168,78,.4);}
.k-cash>b,.k-cash>input{color:var(--nile-green);}
.k-insta{background:var(--surface-alt);border-color:var(--border-soft);}
.k-insta>b,.k-insta>input{color:var(--text);}
.k-total{background:var(--surface-alt);border-color:var(--border-soft);}
.k-total>b{color:var(--num-ok);}
.k-exp,.k-pur{background:var(--surface-alt);border-color:var(--border-soft);}
.k-exp>b,.k-pur>b{color:var(--text-dim);}
/* كارت "الفرق الكلي" و"فوق المسموح": كانوا بلون أحمر ثابت مهما كانت الحالة
   (حتى لو الشفت مطابق) - دلوقتي الوضع الافتراضي محايد، واللون بيتحدد فعليًا
   بجافاسكريبت (recalcTotals) حسب حالة الفرق الحقيقية: مطابق/مسموح/فوق المسموح. */
.k-var,.k-exc{background:var(--surface-alt);border-color:var(--border-soft);}
.k-var>b,.k-exc>b{color:var(--text);}
.k-var.st-ok,.k-exc.st-ok{background:rgba(46,168,78,.10);border-color:rgba(46,168,78,.4);}
.k-var.st-ok>b,.k-exc.st-ok>b{color:var(--num-ok);}
.k-var.st-allowed{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.4);}
.k-var.st-allowed>b{color:#2563EB;}
.k-var.st-over,.k-exc.st-over{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.4);}
.k-var.st-over>b,.k-exc.st-over>b{color:#DC2626;}
.k-neu{background:var(--surface-alt);}

/* ---------- 3) صندوق التسوية: هيدر محايد، الشارة البرتقالية هي اللون
   الوحيد فيه، وحجمها على قد كلمتها مش شريط بعرض الصفحة ---------- */
.shx-settle{padding:0;border-radius:var(--shx-r);
  background:var(--surface);border:1px solid var(--border-soft);overflow:hidden;
  box-shadow:var(--e-2);}
.shx-settle>header{
  display:flex;align-items:center;gap:7px;padding:8px 12px;
  font-size:12.5px;font-weight:900;color:var(--text);letter-spacing:.2px;
  border-bottom:1px solid var(--border-soft);background:transparent;
}
.shx-settle>header i{color:var(--nile-orange-dark);}
.shx-settle>header em{font-style:normal;background:var(--nile-orange);color:#fff;
  font-size:0.6875rem;font-weight:800;padding:2px 9px;border-radius:20px;margin-inline-start:4px;}

/* ---------- 4) الخمس أعمدة: هوية لونية واحدة للهيدر/الفوتر (الأخضر
   الغامق لهوية النظام)، والفرق بين الأعمدة بالعنوان والأيقونة بس ---------- */
.shx-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--shx-gap);align-items:start;}
.shx-c{display:flex;flex-direction:column;min-width:0;border-radius:var(--shx-r);
  border:1px solid var(--border-soft);background:var(--surface);overflow:hidden;
  box-shadow:var(--e-2);transition:box-shadow .18s var(--ease);}
.shx-c:hover{box-shadow:var(--e-3);}
.shx-c>header{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 9px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--nile-green-dark),var(--nile-green-deep));
}
.shx-c>header i{margin-inline-end:4px;opacity:.9;}
.shx-c>header button{
  width:20px;height:20px;line-height:1;padding:0;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  border-radius:5px;font-size:13px;font-weight:800;cursor:pointer;
}
.shx-c>header button:hover{background:rgba(255,255,255,.18);}
.shx-c-b{padding:6px;flex:1;}
.shx-c>footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 9px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--nile-green-dark),var(--nile-green-deep));
}
.shx-c>footer b{font-size:14px;font-variant-numeric:tabular-nums;}
[data-theme="dark"] .shx-c>header,[data-theme="dark"] .shx-c>footer{background:#0d2417;}

.shx-t{width:100%;border-collapse:collapse;font-size:11px;}
.shx-t th{font-size:0.6875rem;font-weight:800;color:var(--text-dim);padding:3px 4px;
  text-align:start;border-bottom:1px solid var(--border-soft);white-space:nowrap;}
.shx-t td{padding:2px 3px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
.shx-t tbody tr:last-child td{border-bottom:0;}
.shx-t td:last-child{width:22px;}
.shx-denoms td:first-child{font-weight:800;white-space:nowrap;width:44px;}
.shx-denoms td:nth-child(2){width:52px;}
.shx-denoms .shx-num{color:var(--nile-green);}
.shx-x{width:20px;height:20px;padding:0;line-height:1;border:0;border-radius:5px;
  background:rgba(163,45,45,.16);color:#e07070;font-weight:800;cursor:pointer;}
.shx-x:hover{background:rgba(163,45,45,.3);}
.shx-dash{color:var(--text-faint);font-size:11px;}
.emp-select-wrap+.shx-dash{display:none;}
.emp-select-wrap[style*="none"]+.shx-dash{display:inline;}
.shx-clip{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shx-in{color:var(--nile-green);}
.shx-out{color:var(--nile-orange);}
.shx-trs-tbl td{font-size:0.6875rem;}
.shx-trs-form{display:flex;flex-direction:column;gap:4px;margin-top:6px;
  padding-top:6px;border-top:1px dashed var(--border-soft);}
.shx-trs-form .shx-segs-sm label{
  flex:1;text-align:center;height:24px;line-height:22px;border-radius:6px;
  border:1px solid var(--border-soft);background:var(--surface-alt);
  color:var(--text-dim);font-size:0.6875rem;font-weight:800;cursor:pointer;
}
.shx-segs-sm input{position:absolute;opacity:0;width:0;height:0;}
.shx-segs-sm input:checked+label.trs-in{background:var(--nile-green-on-white);border-color:var(--nile-green-on-white);color:#fff;}
.shx-segs-sm input:checked+label.trs-out{background:var(--nile-orange);border-color:var(--nile-orange-dark);color:#fff;}
.shx-hint{font-size:0.6875rem;color:var(--text-dim);}

/* زرار أداة صغير عام (تصدير/طباعة/فلتر...) - قابل للاستخدام جوّه أو برّه هيدر
   الكارت الأخضر (.shx-c>header). دايمًا مضغوط بارتفاع ثابت زي باقي نظام shx. */
.shx-tool{height:24px;padding:0 8px;font-size:0.6875rem;border-radius:6px;border:1px solid var(--border-soft);
  background:var(--surface);color:var(--text-dim);font-weight:800;text-decoration:none;
  display:inline-flex;align-items:center;gap:3px;cursor:pointer;}
.shx-tool:hover{border-color:var(--nile-green);color:var(--text);}
/* V26: نص الزرار مايتقسمش على سطرين لما الجدول يضيق (شاشة المستخدمين بقى فيها عمود
   "ملف الموظف" زيادة، فأعمدة الإجراءات كانت بتتخنق وكلمة زي "تعديل" تتكسر نصين). */
.shx-tool{white-space:nowrap;}
/* جوّه هيدر الكارت فيه قاعدة عامة (.shx-c>header button) بتخلي أي <button> مقاسه
   20×20px (مصممة لأزرار الأيقونة الصغيرة زي "+")، فبنلغيها هنا عشان زرار الأداة
   اللي فيه نص (زي "تصدير" و"مطابقة تلقائية") ميتقصّش، ونديله مظهر يتناسب مع خلفية الهيدر الغامقة. */
.shx-c>header .shx-tool{width:auto;height:22px;padding:0 8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);color:#fff;font-size:0.6875rem;}
.shx-c>header .shx-tool:hover{background:rgba(255,255,255,.26);border-color:#fff;color:#fff;}

/* شارة حالة صغيرة عامة (معتمد/معلّق/مفتوح/جزئي...) */
.shx-pill{font-size:0.6875rem;font-weight:800;padding:1px 7px;border-radius:999px;white-space:nowrap;}
.shx-pill.open{background:rgba(163,45,45,.14);color:var(--num-bad);}
.shx-pill.partial{background:rgba(224,163,56,.16);color:#8A6410;}
.shx-pill.ok{background:rgba(46,168,78,.14);color:var(--num-ok);}
.shx-pill.pending{background:rgba(224,163,56,.16);color:#8A6410;}

.shx-notes{width:100%;}
.shx-warn{padding:6px 10px;border-radius:var(--shx-r);font-size:11px;font-weight:800;
  background:rgba(186,117,23,.15);border:1px solid rgba(186,117,23,.45);color:#e0a338;}

/* ---------- الاستجابة ---------- */
@media (max-width:1250px){
  .shx-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .shx-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:850px){
  .shx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .shx-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .shx-acts{margin-inline-start:0;width:100%;}
  .shx-acts>*{flex:1;}
}
@media (max-width:560px){
  .shx-kpis,.shx-cols{grid-template-columns:1fr;}
  .shx-f,.shx-f-wide,.shx-f-pin{min-width:100%;max-width:none;}
}

/* ---- V24.32: تعديلات الشاشة (يوم/تاريخ، صف مؤشرات مصغّر، صندوق تسوية تفاعلي) ---- */
.shift-close-page{padding-top:0!important;}
.shift-close-page .shx{margin-top:0;}

/* اليوم فوق التاريخ فوق الساعة */
.shx-when{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:92px;padding:3px 10px;border-radius:7px;
  background:var(--surface-alt);border:1px solid var(--border-soft);align-self:stretch;
}
.shx-when b{font-size:12px;font-weight:900;line-height:1.25;}
.shx-when span{font-size:0.6875rem;color:var(--text-dim);font-variant-numeric:tabular-nums;line-height:1.25;}
.shx-when i{font-size:0.6875rem;font-style:normal;color:var(--text-faint);line-height:1.25;}
.shx-bar{align-items:stretch;}
.shx-f{justify-content:flex-end;}
.shx-acts{align-items:center;}
.shx-f select:disabled{background:var(--surface-alt);color:var(--text);opacity:1;}

/* الصف التاني من المؤشرات أصغر */
.shx-kpis-sm .shx-k{padding:5px 9px;}
.shx-kpis-sm .shx-k>b{font-size:15px;}
.shx-kpis-sm .shx-k>span{font-size:0.6875rem;}
.k-visa{background:rgba(46,168,78,.10);border-color:rgba(46,168,78,.4);}
.k-visa>input{color:var(--nile-green);}
.c-visa>header,.c-visa>footer{background:var(--nile-green-deep);}

/* صندوق التسوية التفاعلي: هيدر محايد بدل شريط لون بعرض الصفحة، وشبكة
   واضحة لتقديم الطلب بدل صف مضغوط بلا تسميات */
.shx-settle-b{padding:6px;display:flex;flex-direction:column;gap:6px;}
.shx-settle-new{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;}
.shx-settle-submit-field{align-self:end;}
.shx-settle-submit-field .shx-b1{width:100%;height:34px;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;}
@media (max-width:620px){
  .shx-settle-new{grid-template-columns:1fr 1fr;}
  .shx-settle-submit-field{grid-column:1/-1;}
}

/* الحقل الديناميكي (تسمية فوق عنصر): مستخدم فى صندوق التسوية وفى خزينة
   الفرع (settleSlot/trsSlot) - تعريف واحد يغطي الاتنين، وارتفاع أكبر
   بس فى صندوق التسوية (شبكة أوسع) بينما خزينة الفرع تفضل مضغوطة زي باقي حقولها */
.shx-dynamic-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.shx-dynamic-field label{font-size:0.6875rem;font-weight:800;color:var(--text-dim);margin:0;}
.shx-dynamic-field select,.shx-dynamic-field input{width:100%;border-radius:8px;height:26px;}
.shx-settle-new .shx-dynamic-field select,
.shx-settle-new .shx-dynamic-field input{height:34px;}
#settleSlot,#trsSlot{display:block;}
#settleSlot:empty,#trsSlot:empty{display:none;}
#settleSlot>.shx-dynamic-field,#trsSlot>.shx-dynamic-field{width:100%;}
.shx-settle-list{display:flex;flex-direction:column;gap:4px;
  max-height:104px;overflow-y:auto;}
.shx-req{border:1px solid var(--border-soft);border-radius:7px;padding:4px 7px;}
.shx-req-h{display:flex;align-items:center;gap:8px;font-size:0.6875rem;flex-wrap:wrap;}
.shx-req-h a{font-weight:800;}
.shx-req-h i{font-style:normal;color:var(--text-dim);margin-inline-start:auto;}
.shx-req-a{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap;}
.shx-req-a form{display:flex;gap:4px;flex:1 1 220px;}
.shx-req-a input{flex:1;}
.shx-b-rej{height:26px;padding:0 10px;border:1px solid rgba(163,45,45,.5);border-radius:6px;
  background:rgba(163,45,45,.14);color:#e07070;font-weight:800;font-size:11px;cursor:pointer;}
.shx-settle-empty{padding:2px 4px;}

/* زرار "مراسلة" + عدّاد الرسايل - بيفتح تاب المحادثة العائم بتاع نفس الطلب */
.shx-chat-open{
  display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;
  border:none;background:rgba(37,99,235,.12);color:#2563eb;
  font-weight:800;font-size:0.6875rem;padding:3px 9px;border-radius:999px;cursor:pointer;
  white-space:nowrap;
}
.shx-chat-open:hover{background:rgba(37,99,235,.22);}
.shx-chat-count{
  background:#DC2626;color:#fff;border-radius:999px;
  padding:0 5px;font-size:0.6875rem;font-weight:800;line-height:1.5;
}

/* تاب المحادثة العائم - مخفي افتراضيًا (display:none) فمالوش أي تأثير على حجم أو
   تخطيط شاشة التقفيل خالص لحد ما يتفتح. وقتها بيطفو فوق الصفحة (position:fixed) بشكل
   مستقل زي شات موبايل حقيقي، من غير ما يزحزح أو يوسّع أي عنصر تاني فى الصفحة. */
.shx-chat-float{
  display:none;position:fixed;z-index:2000;
  inset-inline-end:18px;bottom:18px;
  width:340px;max-width:calc(100vw - 24px);
  height:min(520px,calc(100vh - 90px));
  border-radius:18px;overflow:hidden;
  box-shadow:0 20px 55px rgba(15,23,42,.38);
}
.shx-chat-float.is-open{display:flex;flex-direction:column;}
.shx-chat-float .chat{flex:1;min-height:0;border:none;border-radius:0;box-shadow:none;}
.shx-chat-close{
  position:absolute;top:8px;inset-inline-end:8px;z-index:5;
  width:26px;height:26px;border-radius:50%;border:none;
  background:rgba(255,255,255,.22);color:#fff;font-weight:800;line-height:1;font-size:16px;
  cursor:pointer;display:grid;place-items:center;
}
.shx-chat-close:hover{background:rgba(255,255,255,.36);}
@media (max-width:480px){
  .shx-chat-float{inset-inline-end:8px;inset-inline-start:8px;width:auto;bottom:8px;height:72vh;}
}

/* فلاتر مودال "شفتات الوردية" (اللي بيفتح لما تضغط ليلي/صباحي/مسائي فى شاشة تقفيل
   الوردية) - بحث بالتاريخ/الفرع/المسؤول/بحث حر من جوّه المودال نفسه من غير ما تسيب
   الشاشة. */
.shx-log-filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:end;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-soft);
}
.shx-log-filters .shx-dynamic-field{flex:1 1 118px;min-width:110px;}
.shx-log-search-field{flex:1 1 160px;}
.shx-log-reset-btn{height:26px;width:auto;flex:none;padding:0 12px;white-space:nowrap;}

/* شارة "وضع العرض فقط" فى أعلى شاشة معاينة الشفت المقفول */
.shx-locked-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(186,117,23,.15);border:1px solid rgba(186,117,23,.45);color:#e0a338;
  font-weight:800;font-size:11px;padding:6px 12px;border-radius:var(--shx-r);
}

/* بانر مراجعة/اعتماد المحاسب - بيظهر بس فى وضع العرض لشفت لسه "بانتظار مراجعة المحاسب"،
   عشان المحاسب يعتمد أو يرفض من نفس شاشة المعاينة من غير ما يحتاج يروح لصفحة تانية. */
.shx-review-banner{
  margin:0 0 10px;padding:10px 12px;border-radius:10px;
  background:rgba(224,163,56,.10);border:1px solid rgba(224,163,56,.4);
}
.shx-review-banner .shx-req-h{font-size:12.5px;gap:6px;}
.shx-review-banner .shx-req-h i{font-style:normal;color:#e0a338;font-size:15px;}
.shx-review-banner > .shx-hint{font-size:11px;margin:4px 0 8px;display:block;}
.shx-review-banner .shx-req-dec{gap:8px;flex-wrap:wrap;}
.shx-review-banner .shx-req-dec input[type=text]{min-width:220px;}
.shx-review-banner .shx-b1,.shx-review-banner .shx-b-rej{width:auto;height:30px;padding:0 14px;}

/* رسايل المسؤول عن الشفت (موظف - هويته الوحيدة كلمة سر تأكيد المسؤولية) - بتظهر مباشرة
   على الشاشة بمجرد ما يدخل اسمه ورقمه السري صح، من غير ما يحتاج يفتح شاشة رسائل منفصلة.
   نفس فلسفة .shx-review-banner (بانر ملحوظ فوق باقي الشاشة) لكن بلون محايد/أخضر خفيف
   (مش تحذيري) عشان الرسالة مش تنبيه مشكلة، هي شات عادي. */
.shx-empmsg{
  margin:0 0 10px;padding:8px 12px;border-radius:10px;
  background:rgba(46,168,78,.06);border:1px solid rgba(46,168,78,.35);
}
.shx-empmsg-h{display:flex;align-items:center;gap:8px;font-size:12px;}
.shx-empmsg-h i{font-style:normal;color:var(--num-ok);font-size:14px;}
.shx-empmsg-h b{font-weight:900;}
.shx-empmsg-count{
  background:var(--nile-green);color:#fff;border-radius:20px;padding:1px 7px;
  font-size:0.6875rem;font-weight:900;
}
.shx-empmsg-toggle{
  margin-inline-start:auto;border:0;background:transparent;color:var(--text-dim);
  font-size:11px;font-weight:800;cursor:pointer;padding:2px 6px;
}
.shx-empmsg.is-flash{animation:shxEmpFlash 1.1s ease 2;}
@keyframes shxEmpFlash{
  0%,100%{background:rgba(46,168,78,.06);}
  50%{background:rgba(46,168,78,.18);}
}
.shx-empmsg-body{margin-top:7px;display:flex;flex-direction:column;gap:8px;}
.shx-empmsg-body.is-collapsed{display:none;}
.shx-empmsg-empty{font-size:0.6875rem;color:var(--text-dim);}
.shx-empmsg-thread{
  border:1px solid var(--border-soft);border-radius:8px;background:var(--surface);
  padding:7px 8px;
}
.shx-empmsg-msgs{display:flex;flex-direction:column;gap:5px;max-height:180px;overflow-y:auto;}
.shx-empmsg-row{display:flex;}
.shx-empmsg-row.mine{justify-content:flex-end;}
.shx-empmsg-row.theirs{justify-content:flex-start;}
.shx-empmsg-bubble{
  max-width:80%;border-radius:9px;padding:6px 9px;font-size:11px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.shx-empmsg-row.mine .shx-empmsg-bubble{background:var(--nile-green);color:#fff;border-bottom-left-radius:2px;}
.shx-empmsg-row.theirs .shx-empmsg-bubble{background:var(--surface-alt);border:1px solid var(--border-soft);border-bottom-right-radius:2px;}
.shx-empmsg-from{font-size:0.6875rem;font-weight:800;opacity:.8;margin-bottom:2px;}
.shx-empmsg-row.mine .shx-empmsg-from{color:rgba(255,255,255,.85);}
.shx-empmsg-row.theirs .shx-empmsg-from{color:var(--text-dim);}
.shx-empmsg-time{font-size:0.6875rem;font-weight:700;opacity:.7;margin-top:3px;direction:ltr;text-align:left;}
.shx-empmsg-reply{display:flex;gap:6px;margin-top:6px;}
.shx-empmsg-reply input{
  flex:1;height:28px;border:1px solid var(--border);border-radius:7px;
  padding:0 9px;font-size:11px;background:var(--surface);color:var(--text);
}
.shx-empmsg-reply button{
  height:28px;padding:0 12px;border:0;border-radius:7px;background:var(--nile-green);
  color:#fff;font-weight:800;font-size:11px;cursor:pointer;white-space:nowrap;
}
.shx-empmsg-reply button:disabled{opacity:.6;cursor:default;}

/* خزينة الفرع: شكل "شيت" حقيقي - عرض أعمدة ثابت (مش بيتحرك حسب طول النص) وخطوط
   فاصلة بين كل خلية وتانية، زي أي جدول إكسل. table-layout:fixed هي المفتاح هنا:
   من غيرها عمود "البيان" كان بيتمدد حسب طول النص ويضغط عمودي الأرقام معاه. */
.shx-trs-tbl{table-layout:fixed;}
.shx-trs-tbl th:nth-child(2),.shx-trs-tbl th:nth-child(3){width:56px;text-align:center;}
.shx-trs-tbl td:nth-child(2),.shx-trs-tbl td:nth-child(3){width:56px;}
.shx-trs-tbl th,.shx-trs-tbl td{border-inline-start:1px solid var(--border-soft);}
.shx-trs-tbl th:first-child,.shx-trs-tbl td:first-child{border-inline-start:0;}
.shx-trs-tbl tbody tr:nth-child(even){background:rgba(15,23,42,.025);}
[data-theme="dark"] .shx-trs-tbl tbody tr:nth-child(even){background:rgba(255,255,255,.03);}
.shx-trs-open td{font-weight:800;background:var(--surface-alt);}
.shx-trs-tbl .shx-in{color:var(--nile-green);}
.shx-trs-tbl .shx-out{color:var(--nile-orange);}

/* =========================================================
   V24.33 — تناسق الشريط، دمج الجداول، قوائم ما تختفيش، خزينة احترافية
   ========================================================= */

/* ---- الشريط العلوي: صف واحد ثابت دايمًا مهما ظهرت خانة كلمة السر أو
   اختفت - flex-wrap:nowrap بدل الالتفاف القديم اللي كان بيرمي زرار
   الاعتماد لصف تاني. كل خانة بيها flex-shrink عشان تتقلّص بدل ما تلف. ---- */
.shx-bar{align-items:end;gap:8px;flex-wrap:nowrap;}
.shx-bar .shx-f{flex:1 1 0;min-width:0;max-width:none;}
/* الفرع ومسؤول الشفت كانوا بيكبروا وياخدوا أي مساحة فاضية فى الشريط
   (فرق واضح جدًا عن خانة الرقم السري الثابتة) - دلوقتي متسقّفين بحد
   أقصى، وخانة الرقم السري بقت أعرض شوية عشان رسالة التحقق تتكتب
   بوضوح من غير ما تنكسر. */
.shx-bar .shx-f-branch{flex:1.1 1 130px;max-width:190px;}
.shx-bar .shx-f-wide{flex:1.4 1 160px;max-width:220px;}
.shx-bar .shx-f-pin{flex:0 0 128px;max-width:128px;min-width:0;}
.shx-bar .shx-f-shift{flex:0 0 auto;}
.shx-when{flex:0 0 88px;align-self:end;height:52px;justify-content:center;}
.shx-f>select,.shx-f>input{height:28px;min-height:28px;}
.shx-seg{height:28px;line-height:26px;padding:0 13px;min-width:58px;}
.shx-segs{gap:5px;}
.shx-acts{align-self:end;gap:6px;flex:0 0 auto;margin-inline-start:auto;}
.shx-acts>*{height:28px;}
@media (max-width:960px){
  .shx-bar{flex-wrap:wrap;}
  .shx-bar .shx-f,.shx-bar .shx-f-branch,.shx-bar .shx-f-wide{flex:1 1 150px;max-width:none;}
  .shx-acts{flex:1 1 100%;margin-inline-start:0;}
}

/* ---- القوائم مابتختفيش تحت الجداول ---- */
.shx-c,.shx-c-b,.shx-sub,.shx-sub-b,.shx-t,.shx-t tbody,.shx-t tr,.shx-t td{overflow:visible;}
.shx-c{overflow:visible;}
.shx-c>header{border-radius:var(--shx-r) var(--shx-r) 0 0;}
.shx-c>footer{border-radius:0 0 var(--shx-r) var(--shx-r);}
.shx-t select,.shx-t input{position:relative;z-index:1;}
.shx-t select:focus{z-index:40;}
/* القاعدة القديمة اتشالت: كانت محاولة إصلاح القصّ بالـz-index، وده مابيشتغلش
   أصلاً - overflow بيقصّ مهما كان الـz-index. الحل الحقيقي فى searchable_select.js. */

/* ---- الكروت المدمجة: أعمدة جوّه كارت واحد بنفس الارتفاع ---- */
.shx-cols{grid-template-columns:1.5fr 1fr 0.85fr;align-items:stretch;}
.shx-c{height:100%;}
.shx-c-b{display:flex;flex-direction:column;}
.shx-split3,.shx-split2{display:grid;gap:6px;padding:6px;}
.shx-split3{grid-template-columns:repeat(3,minmax(0,1fr));}
.shx-split2{grid-template-columns:repeat(2,minmax(0,1fr));}
.shx-sub{display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--border-soft);border-radius:7px;background:var(--surface-alt);}
.shx-sub-h{
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  padding:4px 7px;font-size:0.6875rem;font-weight:800;color:var(--text-dim);
  border-bottom:1px solid var(--border-soft);
}
.shx-sub-h button{
  width:18px;height:18px;line-height:1;padding:0;flex:0 0 auto;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:4px;font-size:12px;font-weight:800;cursor:pointer;
}
.shx-sub-h button:hover{border-color:var(--nile-green);color:var(--nile-green);}
.shx-sub-b{padding:4px;flex:1;min-height:150px;}
.shx-sub-f{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 7px;border-top:1px solid var(--border-soft);
  font-size:0.6875rem;font-weight:800;
}
.shx-sub-f b{font-size:12.5px;font-variant-numeric:tabular-nums;}
.shx-sub .shx-t td{padding:2px;}
.shx-sub .shx-t input,.shx-sub .shx-t select{height:24px;min-height:24px;font-size:11px;margin-bottom:2px;}
.shx-sub .shx-t input:last-child,.shx-sub .shx-t select:last-child{margin-bottom:0;}

/* ---- الخزينة الاحترافية ---- */
.c-trs .shx-c-b{padding:6px;gap:6px;}
.shx-trs-chip{background:rgba(255,255,255,.2);padding:1px 8px;border-radius:9px;
  font-size:11px;font-variant-numeric:tabular-nums;}
.shx-trs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
.shx-trs-stat{display:flex;flex-direction:column;gap:1px;padding:5px 7px;
  border-radius:7px;border:1px solid var(--border-soft);background:var(--surface-alt);}
.shx-trs-stat span{font-size:0.6875rem;font-weight:800;color:var(--text-dim);}
.shx-trs-stat b{font-size:13px;font-variant-numeric:tabular-nums;}
.s-in{border-color:rgba(46,168,78,.45);} .s-in b{color:var(--nile-green);}
.s-out{border-color:rgba(255,122,26,.45);} .s-out b{color:var(--nile-orange);}

/* كاش كل وردية من ورديات اليوم بترتيبها - جنب وارد/منصرف، فوقهم مباشرة */
.shx-trs-shifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
.shx-trs-shift{display:flex;flex-direction:column;gap:1px;padding:5px 7px;
  border-radius:7px;border:1px solid rgba(46,168,78,.4);background:rgba(46,168,78,.07);}
.shx-trs-shift span{font-size:0.6875rem;font-weight:800;color:var(--text-dim);}
.shx-trs-shift b{font-size:13px;font-variant-numeric:tabular-nums;color:var(--nile-green);}
.shx-trs-shift.is-pending{border-color:var(--border-soft);background:var(--surface-alt);}
.shx-trs-shift.is-pending b{color:var(--text-faint);}
/* الوردية الشغالة دلوقتي (بيتم تقفيلها): كارتها بيتزامن لحظيًا مع "إجمالي
   الكاش" وهو لسه بيتكتب - لونها مميز (أزرق زي حالة "مسموح") عشان تتفرق بصريًا
   عن الأرقام المرحّلة فعلاً (خضراء) قبل ما تتقفل. */
.shx-trs-shift.is-live{border-color:rgba(37,99,235,.45);background:rgba(37,99,235,.08);
  animation:shxLivePulse 1.6s ease-in-out infinite;}
.shx-trs-shift.is-live b{color:#2563EB;}
.shx-trs-live-tag{font-style:normal;font-weight:900;color:#2563EB;font-size:0.6875rem;
  background:rgba(37,99,235,.15);border-radius:6px;padding:0 4px;margin-inline-start:2px;}
@keyframes shxLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.18);}50%{box-shadow:0 0 0 3px rgba(37,99,235,.05);}}
.shx-trs-log{border:1px solid var(--border-soft);border-radius:7px;
  background:var(--surface-alt);max-height:118px;overflow-y:auto;min-height:0;padding:3px;}
.shx-trs-log .shx-t th{position:sticky;top:0;background:var(--surface-alt);z-index:2;}
.shx-trs-form{display:flex;flex-direction:column;gap:4px;}
.shx-trs-form>*{width:100%;}

/* ---- صندوق التسوية: منظّم + محادثة ---- */
.shx-thread{display:flex;flex-direction:column;gap:3px;margin:4px 0;
  max-height:88px;overflow-y:auto;}
.shx-msg{padding:3px 7px;border-radius:7px;background:var(--surface-alt);
  border:1px solid var(--border-soft);font-size:0.6875rem;max-width:88%;align-self:flex-start;}
.shx-msg.mine{align-self:flex-end;background:rgba(46,168,78,.08);border-color:rgba(46,168,78,.35);}
.shx-msg b{font-weight:800;margin-inline-end:5px;}
.shx-msg em{font-style:normal;background:var(--nile-orange);color:#fff;font-size:0.6875rem;
  padding:0 6px;border-radius:8px;margin-inline-end:5px;}
.shx-msg i{font-style:normal;color:var(--text-faint);font-size:0.6875rem;margin-inline-start:5px;}
.shx-req-msg,.shx-req-dec{display:flex;gap:4px;margin-top:3px;align-items:center;}
.shx-req-msg input[type=text],.shx-req-dec input[type=text]{flex:1;}
.shx-chk{display:flex;align-items:center;gap:3px;font-size:0.6875rem;color:var(--text-dim);white-space:nowrap;}
.shx-chk input{width:auto;height:auto;min-height:0;}

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

/* =========================================================
   V24.34 — إيقاع بصري موحّد: ارتفاع صفوف ثابت، ظل خفيف،
   لوحة فلترة الورديات جوّه الصفحة، وسم دور المرسل.
   ========================================================= */

/* ---- ارتفاع صفوف موحّد: مفيش عمود بيتمطّط أطول من التاني ---- */
.shx-t tbody tr{height:30px;}
.shx-sub .shx-t tbody tr{height:auto;min-height:28px;}
.shx-denoms tbody tr{height:28px;}
.shx-trs-tbl tbody tr{height:26px;}
.shx-t td,.shx-t th{vertical-align:middle;}

/* ---- ارتفاع خفيف ومنحنيات موحّدة ---- */
.shx-c{box-shadow:0 1px 2px rgba(15,23,42,.05),0 4px 14px rgba(15,23,42,.05);
  transition:box-shadow .16s var(--ease);}
.shx-c:hover{box-shadow:0 2px 4px rgba(15,23,42,.06),0 8px 20px rgba(15,23,42,.08);}
.shx-k,.shx-settle,.shx-bar{box-shadow:0 1px 2px rgba(15,23,42,.04);}
.shx-k{transition:transform .16s var(--ease),box-shadow .16s var(--ease);}
.shx-k:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.09);}
.shx-sub{transition:border-color .16s var(--ease);}
.shx-sub:focus-within{border-color:var(--nile-green);}
.shx-t tbody tr{transition:background .13s var(--ease);}
.shx-t tbody tr:hover{background:rgba(46,168,78,.045);}

/* ---- لوحة فلترة الورديات (بتفتح مكانها من غير تنقّل) ---- */
.shx-log{
  border:1px solid var(--border-soft);border-radius:var(--shx-r);
  background:var(--surface);overflow:hidden;
  box-shadow:0 4px 16px rgba(15,23,42,.07);
  animation:shxLogIn .18s var(--ease);
}
@keyframes shxLogIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.shx-log-h{
  display:flex;align-items:center;gap:10px;padding:6px 10px;
  background:#0f6e56;color:#fff;font-size:11px;
}
.shx-log-h b{font-weight:800;}
.shx-log-h span{color:rgba(255,255,255,.85);font-size:0.6875rem;}
.shx-log-h button{
  margin-inline-start:auto;width:20px;height:20px;line-height:1;padding:0;
  border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  border-radius:5px;font-size:13px;font-weight:800;cursor:pointer;
}
.shx-log-h button:hover{background:rgba(255,255,255,.18);}
.shx-log-b{max-height:168px;overflow-y:auto;padding:5px 8px;}
.shx-log-b .shx-t td{font-size:11px;padding:3px 5px;}
.shx-st{font-style:normal;font-size:0.6875rem;font-weight:800;padding:1px 8px;border-radius:9px;}
.shx-st.ok{background:rgba(46,168,78,.16);color:var(--nile-green);}
.shx-st.wait{background:rgba(255,122,26,.16);color:var(--nile-orange);}
.shx-seg.is-open{outline:2px solid var(--nile-green);outline-offset:1px;}

/* ---- وسم دور المرسل فى المحادثة ---- */
.shx-msg u{
  text-decoration:none;font-size:0.6875rem;font-weight:800;
  background:var(--surface);border:1px solid var(--border-soft);
  color:var(--text-dim);padding:0 6px;border-radius:8px;margin-inline-end:5px;
}
.stl-role{
  font-size:0.6875rem;font-weight:800;background:var(--surface-alt);
  border:1px solid var(--border-soft);color:var(--text-dim);
  padding:0 7px;border-radius:9px;
}

/* ---- اللمس: التكبير مايكسرش اللوحات الثابتة ---- */
.shx,.shx-cols,.shx-kpis{touch-action:auto;}
@media (pointer:coarse){
  .shx-t tbody tr{height:34px;}
  .shx input,.shx select{min-height:30px;height:30px;}
}

/* =====================================================================
   V26 — الرسائل الداخلية المباشرة والتذكيرات: النافذة المنبثقة اللحظية
   ===================================================================== */
.nile-msg-toast-stack{position:fixed;top:78px;inset-inline-end:20px;z-index:36000;display:flex;flex-direction:column;gap:10px;width:min(360px,90vw);pointer-events:none;}
.nile-msg-toast{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:14px;display:flex;gap:11px;animation:nileMsgToastIn .25s var(--ease,ease) both;}
.nile-msg-toast.is-closing{animation:nileMsgToastOut .2s ease both;}
@keyframes nileMsgToastIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes nileMsgToastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.97)}}
.nile-msg-toast-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--surface-alt);color:var(--nile-green-dark,var(--nile-green));display:flex;align-items:center;justify-content:center;font-size:16px;}
.nile-msg-toast-body{flex:1;min-width:0}
.nile-msg-toast-from{font:800 10.5px 'Cairo',sans-serif;color:var(--text-dim);margin-bottom:2px;}
.nile-msg-toast-title{font:800 13.5px 'Cairo',sans-serif;color:var(--text);margin-bottom:3px;}
.nile-msg-toast-snippet{font:600 12px 'Cairo',sans-serif;color:var(--text-dim);line-height:1.5;word-break:break-word;}
.nile-msg-toast-meta{font:700 11.5px 'Cairo',sans-serif;color:var(--text-dim);margin-top:3px;}
.nile-msg-toast-actions{display:flex;gap:8px;margin-top:9px;}
.nile-msg-toast-open{flex:1;text-align:center;background:var(--nile-green);color:#fff;border-radius:8px;padding:6px 10px;font:800 11.5px 'Cairo',sans-serif;text-decoration:none;}
.nile-msg-toast-open:hover{filter:brightness(.95);color:#fff;}
.nile-msg-toast-dismiss{border:1px solid var(--border);background:transparent;color:var(--text-dim);border-radius:8px;padding:6px 10px;font:700 11.5px 'Cairo',sans-serif;cursor:pointer;}
.nile-msg-toast-dismiss:hover{background:var(--surface-alt);}
@media (max-width:480px){.nile-msg-toast-stack{top:64px;inset-inline-end:8px;inset-inline-start:8px;width:auto;}}

/* شارة عداد التذكيرات الملوّنة فى شاشة التذكيرات */
.rmd-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;font:800 12px 'Cairo',sans-serif;border:1px solid var(--border);background:var(--surface-alt);}
.rmd-chip b{font-size:15px}
.rmd-chip.rmd-overdue{color:#c62828;border-color:rgba(198,40,40,.35)}
.rmd-chip.rmd-today{color:#b45309;border-color:rgba(180,83,9,.35)}
.rmd-chip.rmd-upcoming{color:#a16207;border-color:rgba(161,98,7,.3)}
.rmd-chip.rmd-paid{color:#16803c;border-color:rgba(22,128,60,.3)}

/* =====================================================================
   V26 — تحديث الصفحة الرئيسية: شيل قسم "تنبيهات حرجة" وقسم "يحتاج
   انتباهك" (بطلب صريح)، وحوّل لوحة الاتجاه الشهري لعرض كامل بدل ما
   تكون نص لوحة جنب فراغ. القواعد دي متأخرة عمدًا فى الملف عشان تكسب
   على أي !important أقدم كان مظبوط على مقاس اللوحة الضيقة القديمة.
   ===================================================================== */
.v24-trend-panel{margin-bottom:20px}
.v24-panel-head{flex-wrap:wrap;row-gap:10px}
.v24-trend-quick{display:flex;align-items:center;gap:18px}
.v24-trend-quick span{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-inline-start:16px;border-inline-start:1px solid var(--border-soft)}
.v24-trend-quick span:first-child{padding-inline-start:0;border-inline-start:none}
.v24-trend-quick small{font-size:0.6875rem;font-weight:800;color:var(--text-faint);white-space:nowrap}
.v24-trend-quick b{font-size:16px;font-weight:900;direction:ltr}
.v24-trend-quick b.rev{color:var(--nile-green,#2ea84e)}
.v24-trend-quick b.exp{color:#ef4444}
.v24-chart{padding:14px 8px 4px!important}
.v24-chart-svg{width:100%;height:220px!important;overflow:visible}
.v24-chart-legend{margin-top:12px!important}
@media(max-width:760px){
  .v24-trend-quick{width:100%;justify-content:space-between;gap:0}
  .v24-trend-quick span{padding-inline-start:0;border-inline-start:none;align-items:flex-start}
  .v24-chart-svg{height:170px!important}
}