/* ============================================================
   design-system.css — نظام التصميم الموحّد لنظام accounts_fund
   ------------------------------------------------------------
   الغرض: مصدر واحد لكل الألوان والمسافات والمكونات، بدل تكرار
   الأنماط في 36 صفحة منفصلة.

   طريقة الاستخدام في أي صفحة:
     <link rel="stylesheet" href="design-system.css">
   ثم احذف كتلة <style> المضمّنة من تلك الصفحة.
   ============================================================ */

/* ---------- 1. الرموز التصميمية (Design Tokens) ---------- */
:root {
  /* الألوان الأساسية — تُعدَّل من هنا فقط لتغيير هوية النظام كاملاً */
  --c-bg:            #f4f6f9;
  --c-surface:       #ffffff;
  --c-surface-alt:   #f8fafc;
  --c-border:        #e2e8f0;
  --c-border-strong: #cbd5e1;

  --c-text:          #1e293b;
  --c-text-muted:    #64748b;
  --c-text-subtle:   #94a3b8;

  --c-primary:       #2563eb;  /* أغمق من #3b82f6 ليحقق تباين WCAG AA على الأبيض */
  --c-primary-hover: #1d4ed8;
  --c-primary-soft:  #eff6ff;

  --c-success:       #15803d;
  --c-success-soft:  #dcfce7;
  --c-warning:       #b45309;
  --c-warning-soft:  #fef3c7;
  --c-danger:        #b91c1c;
  --c-danger-soft:   #fee2e2;
  --c-info:          #0369a1;
  --c-info-soft:     #e0f2fe;

  /* مقياس المسافات — 4px كوحدة أساس (بدل 39 قيمة حشو عشوائية) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;

  /* مقياس الطباعة — 7 أحجام فقط (بدل 41 حجماً متفرقاً) */
  --t-xs:   0.75rem;   /* تسميات دقيقة، نصوص مساعدة */
  --t-sm:   0.85rem;   /* نص الجداول، التسميات */
  --t-base: 0.95rem;   /* النص الأساسي والحقول */
  --t-md:   1.05rem;   /* عناوين البطاقات */
  --t-lg:   1.25rem;   /* عناوين الأقسام */
  --t-xl:   1.5rem;    /* عنوان الصفحة */
  --t-2xl:  1.9rem;    /* أرقام لوحة المعلومات */

  --lh-tight: 1.3;  --lh-base: 1.6;

  /* أنصاف الأقطار والظلال */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.07);
  --shadow-lg: 0 10px 25px -5px rgba(15,23,42,.10);

  /* أبعاد التخطيط */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 70px;
  --secnav-h: 52px;       /* شريط القسم العلوي */
  --control-h: 44px;      /* ارتفاع موحّد لكل الحقول والأزرار */
  --control-h-sm: 36px;
  --content-max: 1400px;

  /* الحركة */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s;  --dur-base: .25s;

  /* طبقات z-index مرتبة (بدل أرقام عشوائية متضاربة) */
  --z-sidebar: 1000;  --z-dropdown: 1100;  --z-modal: 1200;  --z-toast: 1300;
}

/* ---------- 2. الأساسيات ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
  font-size: var(--t-base); line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. التخطيط ---------- */
.app-main {
  margin-inline-start: var(--sidebar-w);
  padding: var(--s-5);
  transition: margin var(--dur-base) var(--ease);
}
.app-main.is-expanded { margin-inline-start: var(--sidebar-w-collapsed); }
/* خمس عشرة شاشة تضبط body{display:flex}؛ بلا flex يشحّ عرض المحتوى فيها
   ويترك فراغاً على اليسار. الخصائص تُتجاهَل خارج حاوية flex فلا ضرر. */
body > .app-main { flex: 1 1 auto; min-width: 0; }
/* حشو أضيق على الجوال — 20px تلتهم عرضاً ثميناً على شاشة 360px */
@media screen and (max-width: 640px) { .app-main { padding: var(--s-3); } }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: var(--shadow-md); margin-bottom: var(--s-5);
  max-width: var(--content-max);
}
.card__title {
  font-size: var(--t-lg); font-weight: 700; color: var(--c-text);
  margin: 0 0 var(--s-4); display: flex; align-items: center; gap: var(--s-2);
}
.card__title i { color: var(--c-primary); font-size: .9em; }

/* ---------- 4. نظام الشبكة المرن (Container Queries) ----------
   يقيس عرض *الحاوية* لا الشاشة — فيتكيّف تلقائياً داخل أي سياق:
   نافذة كاملة، عمود جانبي، بطاقة ضيقة، أو WebView داخل تطبيق جوال.
   هذا يجعل التخطيط يعمل بنفس الجودة عند تحويل الموقع لتطبيق. */

.card, .form-section, .info-card, .filter-card, .app-main {
  container-type: inline-size;
}

/* شبكة 12 عموداً — تُطبَّق على النماذج الجديدة التي تستخدم .field.
   الصفحات القديمة التي تعرّف .form-grid كـ flex تحتفظ بتعريفها (يأتي بعدنا). */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4); align-items: start;
}
.form-section {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5) var(--s-4); padding: var(--s-5);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface-alt);
}
.form-section__title {
  grid-column: 1 / -1; font-size: var(--t-sm); font-weight: 700;
  color: var(--c-text-muted); display: flex; align-items: center; gap: var(--s-2);
}
.field { grid-column: span 4; display: flex; flex-direction: column; min-width: 0; }
.col-2 { grid-column: span 2; }  .col-3  { grid-column: span 3; }
.col-4 { grid-column: span 4; }  .col-6  { grid-column: span 6; }
.col-8 { grid-column: span 8; }  .col-12 { grid-column: 1 / -1; }

.field__label {
  margin-bottom: var(--s-2); font-weight: 600; font-size: var(--t-sm);
  color: #475569; display: flex; align-items: center; gap: var(--s-1);
  line-height: var(--lh-tight);
}
.field__label i { color: var(--c-text-subtle); font-size: .9em; }
/* مؤشر تلقائي للحقول الإلزامية — لا يحتاج تعديل HTML */
.field__label:has(+ input[required])::after,
.field__label:has(+ select[required])::after,
.field__label:has(+ textarea[required])::after {
  content: "*"; color: var(--c-danger); font-weight: 700; margin-inline-start: 2px;
}
.field__hint {
  font-size: var(--t-xs); color: var(--c-text-subtle);
  margin-top: var(--s-1); min-height: 16px; line-height: var(--lh-tight);
}
.field__error { font-size: var(--t-xs); color: var(--c-danger); margin-top: var(--s-1); font-weight: 600; }


/* ---------- حماية عامة من انسحاق النماذج داخل الشبكات ----------
   أي <form> يقع مباشرة داخل حاوية شبكية يمتد على كامل الأعمدة */
.form-grid > form, .filter-grid > form, .card > form,
.form-section > form, .stats-row > form, .summary-grid > form { grid-column: 1 / -1; }

/* ---------- 5. عناصر التحكم ---------- */
.input, .select, .textarea,
.field input, .field select, .field textarea {
  height: var(--control-h); padding: 0 var(--s-3); width: 100%;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-family: inherit; font-size: var(--t-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea, .field textarea { height: auto; min-height: 84px; padding: var(--s-3); resize: vertical; }
.field input:hover, .field select:hover { border-color: #94a3b8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.field input:disabled, .field select:disabled {
  background: #f1f5f9; color: var(--c-text-subtle); cursor: not-allowed;
}
.is-invalid { border-color: var(--c-danger) !important; }

/* ---------- 6. الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 var(--s-5); border: 1px solid transparent;
  border-radius: var(--r-md); font-family: inherit; font-size: var(--t-base);
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary   { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-hover); }
.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-surface-alt); }
.btn--danger    { background: var(--c-danger); color: #fff; }
.btn--success   { background: var(--c-success); color: #fff; }
.btn--sm, .btn-sm { height: var(--control-h-sm); padding: 0 var(--s-3); font-size: var(--t-sm); }
.btn--icon      { width: var(--control-h-sm); padding: 0; }
.btn:disabled   { opacity: .55; cursor: not-allowed; }
/* حالة الانتظار — تمنع النقر المزدوج على الشبكات البطيئة */
.btn.is-loading { pointer-events: none; opacity: .7; }
.btn.is-loading::before {
  content: ""; width: 14px; height: 14px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 7. بطاقات الخيارات ---------- */
.option-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--c-surface);
  border: 1.5px solid var(--c-border); border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.option-card:hover { border-color: var(--c-border-strong); background: var(--c-surface-alt); }
.option-card.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); }
.option-card input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--c-primary); cursor: pointer; flex-shrink: 0; }
.option-card__text  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-card__title { font-weight: 700; font-size: var(--t-sm); }
.option-card__desc  { font-size: var(--t-xs); color: var(--c-text-subtle); line-height: var(--lh-tight); }

/* ---------- 8. الجداول ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  background: #f1f5f9; padding: var(--s-3); text-align: start;
  font-weight: 600; color: #475569; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;   /* رأس ثابت عند التمرير */
}
.table td { padding: var(--s-3); border-top: 1px solid var(--c-border); }
.table tbody tr:hover { background: var(--c-surface-alt); }
.table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table--numeric td { font-variant-numeric: tabular-nums; } /* محاذاة الأرقام عمودياً */

/* ---------- 9. الشارات والتنبيهات ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-3); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700;
}
.badge--success { background: var(--c-success-soft); color: var(--c-success); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.badge--info    { background: var(--c-info-soft);    color: var(--c-info); }
.badge--neutral { background: #f1f5f9; color: var(--c-text-muted); }

.alert {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  margin-bottom: var(--s-4); font-weight: 600; font-size: var(--t-sm);
  display: flex; align-items: flex-start; gap: var(--s-2);
  border-inline-start: 3px solid;
}
.alert--success { background: var(--c-success-soft); color: var(--c-success); border-color: var(--c-success); }
.alert--warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: var(--c-warning); }
.alert--danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: var(--c-danger); }
.alert--info    { background: var(--c-info-soft);    color: var(--c-info);    border-color: var(--c-info); }

/* ---------- 9.5 مكونات إضافية شائعة ---------- */

/* لوحة فلترة أعلى التقارير */
/* حاوية الفلاتر: كتلة عادية — الشبكة تكون على النموذج بداخلها لا عليها.
   (جعلها شبكة يجعل أي <form> بداخلها عنصراً في عمود واحد فيُسحق المحتوى) */
.filter-card {
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5);
}
/* أي نموذج/حاوية مباشرة داخل بطاقة الفلاتر تأخذ العرض الكامل */
.filter-card > form, .filter-card > div { width: 100%; }
/* حقول موضوعة مباشرة داخل .filter-card (بلا نموذج شبكي) تنتظم تلقائياً */
.filter-card > .field, .filter-card > .form-group {
  display: inline-flex; vertical-align: bottom; min-width: 220px; margin-inline-end: var(--s-4);
}
.filter-card__actions { grid-column: span 3; display: flex; gap: var(--s-2); align-items: flex-end; }

/* تبويبات التصفية (قيد المراجعة / معتمدة / مرفوضة) */
.tabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); flex-wrap: wrap; }
.tabs a {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; background: #f1f5f9; color: var(--c-text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tabs a:hover { background: var(--c-border); }
.tabs a.is-active, .tabs a.active { background: var(--c-primary); color: #fff; }

/* بطاقات الأرقام الإحصائية */
.stats-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.stats-row > .stat-box { grid-column: span 3; }
.stat-box {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); text-align: center;
}
.stat-box__num { font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; direction: ltr; }
.stat-box__label { color: var(--c-text-muted); font-size: var(--t-xs); margin-top: var(--s-1); }
/* شريط لوني جانبي اختياري لتصنيف البطاقة */
.stat-box--success { border-inline-start: 3px solid var(--c-success); }
.stat-box--danger  { border-inline-start: 3px solid var(--c-danger); }
.stat-box--warning { border-inline-start: 3px solid var(--c-warning); }
.stat-box--info    { border-inline-start: 3px solid var(--c-primary); }


/* ---------- 9.7 صفحات المصادقة (دخول، استعادة، تحقق) ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--s-5); background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}
.auth-card {
  background: var(--c-surface); width: 100%; max-width: 420px;
  padding: var(--s-8) var(--s-6); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.auth-header { text-align: center; margin-bottom: var(--s-6); }
.auth-header .logo-icon {
  width: 62px; height: 62px; margin: 0 auto var(--s-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-soft); color: var(--c-primary);
  border-radius: 50%; font-size: 1.6rem;
}
.auth-header h1, .auth-header h2 {
  font-size: var(--t-xl); font-weight: 700; color: var(--c-text); margin: 0 0 var(--s-2);
}
.auth-header p { color: var(--c-text-muted); font-size: var(--t-sm); margin: 0; }

/* حقل بأيقونة داخلية */
.input-with-icon { position: relative; }
.input-with-icon > i {
  position: absolute; inset-inline-start: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--c-text-subtle); pointer-events: none; font-size: .9em;
}
.input-with-icon > input { padding-inline-start: var(--s-8); }

.auth-card .form-group { margin-bottom: var(--s-4); display: flex; flex-direction: column; }
.auth-card .form-label { margin-bottom: var(--s-2); font-weight: 600; font-size: var(--t-sm); color: #475569; }
.auth-card .form-control {
  height: var(--control-h); padding: 0 var(--s-3); width: 100%;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-base); background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.auth-card .form-control:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.auth-card .btn-submit, .auth-card .btn-verify, .auth-card .btn-whatsapp {
  width: 100%; height: var(--control-h); border: none; border-radius: var(--r-md);
  background: var(--c-primary); color: #fff; font-family: inherit;
  font-size: var(--t-base); font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  transition: background var(--dur-fast) var(--ease);
}
.auth-card .btn-submit:hover, .auth-card .btn-verify:hover { background: var(--c-primary-hover); }
.auth-card .btn-whatsapp { background: #16a34a; }
.auth-card .btn-whatsapp:hover { background: #15803d; }

.auth-actions, .back-to-login, .forgot-link { text-align: center; margin-top: var(--s-4); font-size: var(--t-sm); }
.auth-actions a, .back-to-login a, .forgot-link a { color: var(--c-primary); text-decoration: none; font-weight: 600; }
.auth-actions a:hover, .back-to-login a:hover, .forgot-link a:hover { text-decoration: underline; }

/* ---------- 9.8 بطاقة الملف الشخصي ---------- */
.profile-card {
  background: linear-gradient(135deg, #1e3a8a, var(--c-primary));
  color: #fff; padding: var(--s-6); border-radius: var(--r-lg);
  margin-bottom: var(--s-5); display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: var(--s-4);
}
.profile-card h1, .profile-card h2 { font-size: var(--t-lg); margin: 0; }
.profile-card p { opacity: .9; font-size: var(--t-sm); margin: var(--s-1) 0 0; }
.profile-card__stat { text-align: end; }
.profile-card__stat-num { font-size: var(--t-xl); font-weight: 700; direction: ltr; }
.profile-card__stat-label { font-size: var(--t-xs); opacity: .9; }

/* ---------- 9.9 النوافذ المنبثقة ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: none; align-items: center; justify-content: center;
  z-index: var(--z-modal); padding: var(--s-4);
}
.modal.is-open { display: flex; }
.modal__content {
  background: var(--c-surface); border-radius: var(--r-lg); padding: var(--s-6);
  width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); position: relative;
}
.modal__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.modal__title { font-size: var(--t-md); font-weight: 700; margin: 0; }
.modal__close {
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--c-text-subtle); cursor: pointer; padding: var(--s-1);
  border-radius: var(--r-sm);
}
.modal__close:hover { color: var(--c-danger); background: var(--c-danger-soft); }

/* ---------- 9.10 الترقيم وشريط الأدوات ---------- */
.toolbar {
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.toolbar__spacer { flex: 1; }
.search-box { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search-box > i {
  position: absolute; inset-inline-start: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--c-text-subtle); pointer-events: none;
}
.search-box > input {
  width: 100%; height: var(--control-h); padding: 0 var(--s-8) 0 var(--s-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-base);
}
.search-box > input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

.pagination { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-sm);
  text-decoration: none; color: var(--c-text); font-size: var(--t-sm); font-weight: 600;
}
.pagination a:hover { background: var(--c-surface-alt); border-color: var(--c-border-strong); }
.pagination .is-current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- 9.8 بطاقات الملخص المالي (لوحة المعلومات) ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.summary-grid > .summary-card { grid-column: span 3; }
.summary-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm);
  border-inline-start: 3px solid var(--c-border-strong);
}
.summary-card__header {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--c-text-muted); font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-2);
}
.summary-card__amount {
  font-size: var(--t-xl); font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: start;
}
.summary-card--success { border-inline-start-color: var(--c-success); }
.summary-card--danger  { border-inline-start-color: var(--c-danger); }
.summary-card--warning { border-inline-start-color: var(--c-warning); }
.summary-card--info    { border-inline-start-color: var(--c-primary); }

/* تقسيم فرعي داخل البطاقة (كاش / شبكة، نقدي / آجل) */
.balance-split { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--c-border); display: grid; gap: var(--s-1); }
.balance-item { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--c-text-muted); }
.balance-item strong, .balance-item .num { font-variant-numeric: tabular-nums; direction: ltr; }

/* بطاقة معلومات عامة داخل الصفحة */
.info-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); margin-bottom: var(--s-5); }
.info-title { font-size: var(--t-md); font-weight: 700; color: var(--c-text); margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2); border-bottom: 2px solid var(--c-surface-alt); padding-bottom: var(--s-2); }
.info-title i { color: var(--c-primary); }

.widgets-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-5); }
@media screen and (max-width: 992px) { .widgets-row { grid-template-columns: 1fr; } }

/* فئات توافق مع الصفحات القديمة (تُستخدم في السندات والموردين والموازنات) */
.btn-info { background: var(--c-info); color: #fff; border: none; border-radius: var(--r-sm); padding: 5px var(--s-3); font-size: var(--t-xs); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; }
.btn-info:hover { filter: brightness(.93); }
.card-amount-input { font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.controls-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-4); }
.pagination-buttons { display: flex; gap: var(--s-2); justify-content: center; align-items: center; margin-top: var(--s-4); flex-wrap: wrap; }
.pagination-buttons a, .pagination-buttons span { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--c-border); text-decoration: none; color: var(--c-text); font-size: var(--t-sm); }
.pagination-buttons a:hover { background: var(--c-surface-alt); }
.pagination-buttons .active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- 9.9 توافق فئات النماذج القديمة ----------
   الصفحات القديمة تستخدم .form-group/.form-control بدل .field
   هذه التعريفات تجعلها تُعرض بنفس جودة النظام الجديد دون إعادة كتابة HTML */
/* تعريف احتياطي فقط: يُطبَّق حين لا تعرّف الصفحة .form-group بنفسها.
   نتجنب min-width و margin القسريين لئلا نكسر تخطيطات flex القائمة. */
/* ===== خاصّية hidden تعلو على كل display =====
   مواصفةُ HTML تجعل `[hidden]` تُخفي العنصر، لكنّ أيّ قاعدةِ مؤلِّفٍ
   تضع `display` تُبطلها (قاعدةُ المؤلِّف تعلو على قاعدة المتصفّح).
   و`.form-group { display:flex }` أدناه أبطلتها في كل النظام: حقلٌ
   كُتب فيه `hidden` يبقى مرئياً — «باب المصروف» في سند الصرف كان
   يظهر مع «سداد مستحقات مورد» وهو لا يخصّه.
   والعلاج قاعدةٌ واحدة تسبق الجميع بدل استثناءٍ في كل شاشة. */
[hidden] { display: none !important; }

.form-group { display: flex; flex-direction: column; }
/* التباعد يأتي من فجوة الحاوية؛ نضيف هامشاً فقط للحقول خارج أي شبكة/flex */
.card > .form-group, .info-card > .form-group { margin-bottom: var(--s-4); }
.form-group > label,
.form-group .form-label {
  margin-bottom: var(--s-2); font-weight: 600; font-size: var(--t-sm);
  color: #475569; display: flex; align-items: center; gap: var(--s-1); line-height: var(--lh-tight);
}
.form-group > label i { color: var(--c-text-subtle); font-size: .9em; }

.form-control {
  height: var(--control-h); padding: 0 var(--s-3); width: 100%;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-family: inherit; font-size: var(--t-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea.form-control { height: auto; min-height: 84px; padding: var(--s-3); resize: vertical; }
.form-control:hover { border-color: #94a3b8; }
.form-control:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.form-control:disabled, .form-control[readonly] { background: #f1f5f9; color: var(--c-text-subtle); }
input[type="file"].form-control { padding: var(--s-2); height: auto; }

/* شبكة النماذج القديمة */
/* شبكة النماذج القديمة — تتبع نفس نظام 12 عموداً المرن */
.form-grid:not([class*="col-"]) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
/* يُطبَّق فقط حين تكون .form-grid شبكة فعلاً (الصفحات الجديدة) */
.form-grid > .form-group { grid-column: span 4; }
.form-grid > .full-width { grid-column: 1 / -1; }
.form-grid .full-width, .full-width { grid-column: 1 / -1; }

/* بطاقة الملف الشخصي (بوابة الموظف) */
.profile-card {
  background: linear-gradient(135deg, #1e3a8a, var(--c-primary)); color: #fff;
  padding: var(--s-6); border-radius: var(--r-lg); margin-bottom: var(--s-5);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-4);
}
.profile-card h2 { font-size: var(--t-lg); margin: 0; }
.profile-card p { opacity: .9; font-size: var(--t-sm); margin: var(--s-1) 0 0; }
.profile-card .num, .profile-card .lbl { direction: ltr; }
.lbl { color: var(--c-text-muted); font-size: var(--t-xs); }

/* أزرار قديمة شائعة */
.btn-submit, .btn-filter, .btn-save {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 var(--s-5); border: none; border-radius: var(--r-md);
  background: var(--c-primary); color: #fff; font-family: inherit;
  font-size: var(--t-base); font-weight: 600; cursor: pointer;
}
.btn-submit:hover, .btn-filter:hover, .btn-save:hover { background: var(--c-primary-hover); }
.btn-reset, .btn-back {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 var(--s-5); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text);
  font-family: inherit; font-size: var(--t-base); font-weight: 600; cursor: pointer; text-decoration: none;
}

/* شبكة فلاتر التقارير */
.filter-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.filter-grid > .form-group { grid-column: span 3; }
.filter-grid .form-group { margin-bottom: 0; }
.btn-container { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* ---------- 10. الحالات الفارغة والتحميل ---------- */.empty-state { text-align: center; padding: var(--s-10); color: var(--c-text-subtle); }
.empty-state i { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: var(--s-3); }
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm); height: 1em;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 11. الوصولية (WCAG 2.1 AA) ---------- */
/* تركيز واضح للوحة المفاتيح دون إزعاج مستخدمي الفأرة */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm);
}
/* رابط تخطي للمحتوى — أول عنصر في الصفحة لمستخدمي لوحة المفاتيح */
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: var(--s-2);
  background: var(--c-primary); color: #fff; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md); z-index: var(--z-toast);
}
.skip-link:focus { inset-inline-start: var(--s-2); }
/* نص مخفي بصرياً لكن مقروء لقارئات الشاشة */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* هدف لمس 44×44 وفق إرشادات Apple وGoogle */
.btn, .option-card, .table td a { min-height: 36px; }
@media (pointer: coarse) { .btn, .btn--icon { min-height: 44px; min-width: 44px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --c-border: #94a3b8; --c-border-strong: #64748b; --c-text-muted: #475569; }
}

/* ---------- 12. التدويل (RTL/LTR) ---------- */
/* استخدام الخصائص المنطقية يجعل التخطيط يعمل في الاتجاهين تلقائياً */
[dir="ltr"] .app-main { margin-inline-start: var(--sidebar-w); }
/* منع كسر التخطيط عند الترجمة لنصوص أطول (الألمانية/الفرنسية) */
.field__label, .btn, .card__title { overflow-wrap: break-word; hyphens: auto; }
.btn { max-width: 100%; }
/* الأرقام دائماً LTR حتى داخل نص عربي */
.num, .table--numeric td, input[type="number"] { direction: ltr; text-align: start; unicode-bidi: plaintext; }


/* ---------- 13. الاستجابة القائمة على الحاوية ----------
   نقاط التوقف تقيس عرض الحاوية الأم لا نافذة المتصفح، فالنتيجة:
   • نفس المكوّن يعمل بجودة كاملة في صفحة عريضة أو عمود ضيق
   • التخطيط لا ينكسر داخل WebView التطبيقات أو النوافذ المنقسمة
   • لا حاجة لتعديل أي HTML عند تغيير مكان المكوّن */

/* الحاوية واسعة (≥ 1000px): التوزيع الكامل */
@container (min-width: 1000px) {
  .form-grid > .form-group { grid-column: span 3; }
  .filter-grid > .form-group { grid-column: span 3; }
  .stats-row > .stat-box { grid-column: span 3; }
  .summary-grid > .summary-card { grid-column: span 3; }
}

/* الحاوية متوسطة (700–999px): عمودان إلى ثلاثة */
@container (max-width: 999px) {
  .field, .col-2, .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 6; }
  .form-grid > .form-group,
  .filter-grid > .form-group { grid-column: span 6; }
  .stats-row > .stat-box,
  .summary-grid > .summary-card { grid-column: span 4; }
}

/* الحاوية ضيقة (500–699px): عمودان */
@container (max-width: 699px) {
  .field, .col-2, .col-3, .col-4 { grid-column: span 6; }
  .col-6, .col-8 { grid-column: 1 / -1; }
  .stats-row > .stat-box,
  .summary-grid > .summary-card { grid-column: span 6; }
}

/* الحاوية ضيقة جداً (< 500px): عمود واحد — الجوال أو لوحة جانبية */
@container (max-width: 499px) {
  .field, .col-2, .col-3, .col-4, .col-6, .col-8,
  .form-grid > .form-group, .filter-grid > .form-group,
  .stats-row > .stat-box, .summary-grid > .summary-card { grid-column: 1 / -1; }
  .form-section { padding: var(--s-3); }
  .btn:not(.btn--inline):not(.btn--icon) { width: 100%; }
  .btn-container { flex-direction: column; align-items: stretch; }
}

/* احتياطي للمتصفحات القديمة التي لا تدعم Container Queries */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 1200px) {
    .field, .col-2, .col-3, .col-4 { grid-column: span 6; }
    .form-grid > .form-group, .filter-grid > .form-group { grid-column: span 6; }
  }
  @media screen and (max-width: 768px) {
    .field, .col-2, .col-3, .col-4, .col-6, .col-8,
    .form-grid > .form-group, .filter-grid > .form-group,
    .stats-row > .stat-box, .summary-grid > .summary-card { grid-column: 1 / -1; }
    .btn:not(.btn--inline) { width: 100%; }
  }
}

/* تخطيط الصفحة نفسه يتبع الشاشة (لا الحاوية) — سلوك صحيح للقائمة الجانبية */
@media screen and (max-width: 992px) {
  .app-main { margin-inline-start: 0; padding: var(--s-3); }
  .card { padding: var(--s-4); }
}

/* ---------- 14.5 جاهزية التطبيق (WebView / PWA) ----------
   تحسينات تجعل الواجهة تبدو أصيلة عند تغليفها كتطبيق جوال */

/* احترام المنطقة الآمنة (النوتش والشريط السفلي في الأجهزة الحديثة) */
@supports (padding: env(safe-area-inset-top)) {
  .app-main {
    padding-top: max(var(--s-5), env(safe-area-inset-top));
    padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
    padding-inline-start: max(var(--s-5), env(safe-area-inset-left));
    padding-inline-end: max(var(--s-5), env(safe-area-inset-right));
  }
}

/* منع تكبير iOS التلقائي عند التركيز على الحقول (يحدث تحت 16px) */
@media (pointer: coarse) {
  .form-control, .field input, .field select, .field textarea,
  input, select, textarea { font-size: 16px; }
}

/* تمرير سلس بزخم على iOS + منع السحب المطاطي المزعج داخل التطبيق */
.table__scroll, .app-main { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* منع تحديد النص عند الضغط المطوّل على الأزرار (سلوك تطبيقات أصيلة) */
.btn, .option-card, .tabs a, .badge { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* منع الكسر الأفقي مهما ضاقت الشاشة */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, canvas, table { max-width: 100%; }

/* الجداول تتحول لبطاقات على الشاشات الضيقة جداً (قراءة أسهل من التمرير) */
@media screen and (max-width: 560px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .table--stack tr {
    display: block; margin-bottom: var(--s-3); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-2); background: var(--c-surface);
  }
  .table--stack td {
    display: flex; justify-content: space-between; gap: var(--s-3);
    border: none; border-bottom: 1px dashed var(--c-border); padding: var(--s-2);
  }
  .table--stack td:last-child { border-bottom: none; }
  .table--stack td::before {
    content: attr(data-label); font-weight: 700; color: var(--c-text-muted); font-size: var(--t-xs);
  }
}


/* ---------- 13.5 تحسينات الجوال الحرجة ---------- */
@media screen and (max-width: 992px) {
  /* المحتوى يملأ الشاشة — القائمة أصبحت منزلقة */
  .app-main { margin-inline-start: 0 !important; padding: var(--s-3); }

  /* الجداول تمرّر أفقياً بدل كسر التخطيط */
  table { min-width: 100%; }
  .table__scroll, .rpt-table__scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--s-3) * -1);
    padding-inline: var(--s-3);
  }

  /* البطاقات بحشو أقل */
  .card { padding: var(--s-4); border-radius: var(--r-md); }

  /* النماذج عمود واحد */
  .form-grid, .filter-grid, .rpt-toolbar { grid-template-columns: 1fr; }
  .rpt-toolbar { flex-direction: column; align-items: stretch; }
  .rpt-actions { margin-inline-start: 0; }
  .rpt-btn { flex: 1; justify-content: center; }

  /* المؤشرات عمودان — و`.rpt-kpis` مستثناة: شبكتُها تتكيّف بذاتها */
  .stats-row, .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 560px) {
  .stats-row, .summary-grid { grid-template-columns: 1fr; }
  .card__title { font-size: var(--t-md); }
  .rpt-kpi__num { font-size: 1.3rem; }
}


/* ---------- 13.6 إصلاح شامل للجوال ----------
   بعض الصفحات القديمة تعرّف هامشاً ثابتاً (margin-right: 260px) بأسماء
   فئات مختلفة (.main-content · #main-content · .wrap). على الجوال أصبحت
   القائمة منزلقة، فيجب إلغاء الهامش لكل هذه الأنماط دفعة واحدة. */
@media screen and (max-width: 992px) {
  .main-content,
  #main-content,
  .app-main,
  .wrap,
  body > div[style*="margin-right"],
  main[style*="margin-right"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-inline: 0 !important;
    padding: var(--s-3) !important;
    padding-top: 68px !important;   /* مساحة زر القائمة العائم */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* منع أي عنصر من تجاوز عرض الشاشة */
  body { overflow-x: hidden; }
  .card, .info-card, .form-section, table { max-width: 100%; }

  /* النصوص الطويلة تلتف بدل القطع */
  .card__title, .info-title, h1, h2, h3 {
    word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;
  }
}

/* ---------- 14. الطباعة ---------- */
@media print {
  .sidebar, .btn, .no-print, .skip-link { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #cbd5e1; break-inside: avoid; }
  .table th { position: static; }
  body { background: #fff; font-size: 11pt; }
  /* لا نطبع عنوان الرابط بعده: في شاشات النظام أغلب الروابط أزرار فلترة
     تحمل مسارات طويلة مُرمَّزة، فكانت تُغرق المستند الرسمي بسطور URL.
     (إن لزم إظهار عنوان لرابط خارجي، أضف له class="print-url".) */
  a[href].print-url::after { content: " (" attr(href) ")"; font-size: 9pt; color: #64748b; }
}

/* ---------- 15. شريط القسم العلوي (section_nav.php) ---------- */
/* الغرض: التنقّل بين شاشات القسم الواحد بنقرة، والإجابة عن «أين أنا؟».
   يُرسم كأول عنصر في التدفق بعد القائمة الجانبية، ويلتصق بأعلى النافذة
   عند التمرير — فيبقى في المتناول في الكشوف الطويلة (1,200 صف). */
/* مثبَّت لا لاصق (fixed لا sticky): خمس عشرة شاشة تضبط
   body{display:flex} — فأي عنصر في تدفّق الجسد يصير عنصر flex فيُمطّ
   ارتفاعه لارتفاع الصف كاملاً (قِيس: 1596px بدل 52px). الإخراج من
   التدفّق يجعل الشريط مستقلاً عن تخطيط كل صفحة، ويُعوَّض ارتفاعه
   بحشو أعلى الجسد يضيفه section_nav.php. */
.secnav {
  position: fixed; top: 0; z-index: 900;
  inset-inline-start: var(--sidebar-w);   /* البداية = اليمين حيث القائمة */
  inset-inline-end: 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  height: var(--secnav-h);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  transition: inset-inline-start var(--dur-base) var(--ease);
}
.secnav.is-expanded { inset-inline-start: var(--sidebar-w-collapsed); }

/* هوية القسم — ثابتة لا تنزلق مع الأزرار */
.secnav__id { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.secnav__id-icon {
  width: 30px; height: 30px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-primary-soft); color: var(--c-primary); font-size: .85rem;
}
.secnav__id-text {
  font-size: var(--t-sm); font-weight: 700; color: var(--c-text);
  white-space: nowrap;
}
.secnav__id::after {
  content: ''; width: 1px; height: 22px; background: var(--c-border); margin-inline-start: var(--s-2);
}

/* شريط الأزرار المنزلق — تلاشٍ عند الطرفين يوحي بوجود المزيد */
.secnav__scroll {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.secnav__scroll::-webkit-scrollbar { display: none; }
.secnav__track { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) 2px; }

.secnav__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  color: var(--c-text-muted); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.secnav__chip i { font-size: .8em; opacity: .85; }
.secnav__chip:hover { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }
.secnav__chip:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.secnav__chip.is-active {
  background: var(--c-primary-soft); color: var(--c-primary);
  border-color: rgba(37, 99, 235, .28); font-weight: 700;
}
.secnav__chip.is-active i { opacity: 1; }

.secnav__sep { flex: 0 0 auto; width: 1px; height: 16px; background: var(--c-border); margin: 0 5px; }

/* أدوات التنقّل في **بداية السطر** (اليمين في العربية) لا في طرفه الأيسر:
   الأنظمة العربية تضع الرجوع والقائمة حيث تبدأ العين القراءة. */
.secnav__home, .secnav__menu {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-muted); text-decoration: none; font-size: .95rem;
  cursor: pointer; font-family: inherit;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.secnav__home:hover, .secnav__menu:hover {
  color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-soft);
}
.secnav__home:focus-visible, .secnav__menu:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* على الشاشات الكبيرة القائمة ظاهرة دائماً ولها زرّ طيّ داخلها */
.secnav__menu { display: none; }

@media screen and (max-width: 992px) {
  /* القائمة الجانبية درجٌ منزلق هنا، فالشريط يملأ العرض ويظهر زرّ فتحها
     **داخله**. كان الزرّ يطفو فوق الشريط في الزاوية فيزاحمه ويقتطع منه
     66px فارغة — الآن هو عنصر أول في السطر بترتيب واضح. */
  .secnav { inset-inline-start: 0 !important; padding: 0 var(--s-3); gap: var(--s-2); }
  .secnav__menu { display: grid; }
}
@media screen and (max-width: 560px) {
  /* الاسم يُخفى ويبقى رمز القسم: العرض للأزرار أنفع من عنوانٍ يعرفه المستخدم */
  .secnav__id-text { display: none; }
  .secnav__id::after { margin-inline-start: var(--s-1); }
  .secnav__chip { padding: 7px 11px; }
}
@media print { .secnav { display: none !important; } }

/* ---------- 16. شريط الموظف (بلا قائمة جانبية) ---------- */
/* حساب الموظف المحدود لا يرى هيكل النظام الإداري: بوابته هي بيته، ومن أي
   شاشة عمل يرجع إليها بزرّ واحد. الترتيب عربي: الرجوع في بداية السطر
   (اليمين)، والعنوان في الوسط، والخروج في نهايته. */
.empnav {
  position: fixed; top: 0; z-index: 900;
  inset-inline: 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  height: var(--secnav-h);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.empnav__back, .empnav__out {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: var(--r-md);
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: var(--t-xs); font-weight: 700; text-decoration: none;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.empnav__back:hover { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-soft); }
.empnav__out:hover  { color: var(--c-danger);  border-color: var(--c-danger);  background: var(--c-danger-soft); }
.empnav__back:focus-visible, .empnav__out:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* شعار البوابة حين لا يوجد «رجوع» — ليبقى العنوان في موضعه نفسه */
.empnav__brand {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-primary-soft); color: var(--c-primary); font-size: .9rem;
}
.empnav__title {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: var(--t-sm); font-weight: 700; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media screen and (max-width: 420px) {
  /* الشاشات الضيقة: تبقى الأيقونات وتُخفى الكلمات — العنوان أولى بالعرض */
  .empnav { padding: 0 var(--s-3); gap: var(--s-2); }
  .empnav__back span, .empnav__out span { display: none; }
  .empnav__back, .empnav__out { padding: 0 10px; }
}
@media print { .empnav { display: none !important; } }