/* ============================================================================
   RHC UI — طبقة الهوية النهائية (أكتوبر 2026)

   ليه ملف منفصل؟ custom.css بيتحمّل *قبل* style.css بتاع الثيم، فأي قاعدة
   فيه بنفس الـspecificity كانت بتتلغي — وده سبب إن الواجهة كانت خليط:
   بانر بنفسجي (custom.css) + زراير كحلي (الثيم) + تدرّج سماوي في السايدبار.
   الملف ده بيتحمّل *آخر حاجة* في الـhead، فهو المرجع الوحيد للألوان.

   الألوان مأخوذة من لوجو RHG نفسه: التيل #0a6f7f والأحمر بتاع الصليب.
   ============================================================================ */

:root {
  --rhc-brand: #0a6f7f;
  --rhc-brand-600: #085d6a;
  --rhc-brand-700: #064b56;
  --rhc-brand-50: #e7f3f5;
  --rhc-brand-100: #cfe7eb;
  --rhc-brand-ring: rgba(10, 111, 127, .22);
  --rhc-accent: #c3262e;

  --rhc-ink: #1b2a33;
  --rhc-ink-2: #44535d;
  --rhc-muted: #6f7f89;
  --rhc-line: #e3e9ec;
  --rhc-surface: #ffffff;
  --rhc-canvas: #f3f6f7;

  --rhc-ok: #1e8a52;
  --rhc-warn: #b7791f;
  --rhc-bad: #c3262e;

  --rhc-r-sm: 8px;
  --rhc-r: 12px;
  --rhc-r-lg: 16px;
  --rhc-shadow: 0 1px 2px rgba(16, 42, 51, .04), 0 2px 8px rgba(16, 42, 51, .04);
  --rhc-shadow-lg: 0 12px 32px rgba(16, 42, 51, .14);
}

/* ---------- الخلفية والنص ---------- */
body[class*="theme-"] {
  background: var(--rhc-canvas) !important;
  color: var(--rhc-ink);
}
body[class*="theme-"] .dash-container,
body[class*="theme-"] .dash-content { background: transparent !important; }

/* الأرقام بنفس العرض عشان أعمدة الفلوس تتصف تحت بعض */
.table td, .table th, .rhc-stat h3, .card h3, .card h4, .card h5 {
  font-variant-numeric: tabular-nums;
}

/* ---------- اللون الأساسي — بيكسب أي ثيم متختار من الإعدادات ---------- */
body[class*="theme-"] .btn-primary,
body[class*="theme-"] .progress-bar:not([class*="bg-"]) {
  background: var(--rhc-brand) !important;
  border-color: var(--rhc-brand) !important;
  color: #fff !important;
}
body[class*="theme-"] .btn-primary:hover,
body[class*="theme-"] .btn-primary:focus,
body[class*="theme-"] .btn-primary:active {
  background: var(--rhc-brand-600) !important;
  border-color: var(--rhc-brand-600) !important;
}
body[class*="theme-"] .btn-outline-primary {
  color: var(--rhc-brand) !important;
  border-color: var(--rhc-brand) !important;
  background: transparent !important;
}
body[class*="theme-"] .btn-outline-primary:hover {
  background: var(--rhc-brand) !important;
  color: #fff !important;
}
body[class*="theme-"] .btn-light-primary,
body[class*="theme-"] .badge.bg-light-primary {
  background: var(--rhc-brand-50) !important;
  color: var(--rhc-brand-700) !important;
  border-color: var(--rhc-brand-50) !important;
}
body[class*="theme-"] .btn-light-primary:hover {
  background: var(--rhc-brand) !important;
  color: #fff !important;
}
body[class*="theme-"] .bg-primary,
body[class*="theme-"] .list-group-item.active,
body[class*="theme-"] .nav-pills .nav-link.active,
body[class*="theme-"] .nav-pills .show > .nav-link {
  background: var(--rhc-brand) !important;
  border-color: var(--rhc-brand) !important;
}
body[class*="theme-"] .text-primary { color: var(--rhc-brand) !important; }
body[class*="theme-"] a:not([class]),
body[class*="theme-"] .breadcrumb-item a { color: var(--rhc-brand); }
body[class*="theme-"] a:not([class]):hover { color: var(--rhc-brand-700); }
body[class*="theme-"] .nav-link { color: var(--rhc-ink-2); }
body[class*="theme-"] .nav-link:hover { color: var(--rhc-brand); }
body[class*="theme-"] .page-item.active .page-link,
body[class*="theme-"] .dataTable-pagination .active a {
  background: var(--rhc-brand) !important;
  border-color: var(--rhc-brand) !important;
  color: #fff !important;
}
body[class*="theme-"] .alert-primary {
  background: var(--rhc-brand-50);
  border-color: var(--rhc-brand-100);
  color: var(--rhc-brand-700);
}

/* ---------- الفورم ---------- */
body[class*="theme-"] .form-control,
body[class*="theme-"] .form-select,
body[class*="theme-"] .select2-container--default .select2-selection--single,
body[class*="theme-"] .choices__inner {
  border-color: var(--rhc-line);
  border-radius: var(--rhc-r-sm);
  min-height: 42px;
}
body[class*="theme-"] .form-control:focus,
body[class*="theme-"] .form-select:focus,
body[class*="theme-"] .form-check-input:focus {
  border-color: var(--rhc-brand) !important;
  box-shadow: 0 0 0 3px var(--rhc-brand-ring) !important;
}
body[class*="theme-"] .form-check-input:checked {
  background-color: var(--rhc-brand) !important;
  border-color: var(--rhc-brand) !important;
}
body[class*="theme-"] .form-label,
body[class*="theme-"] .col-form-label { color: var(--rhc-ink-2); font-weight: 600; }
body[class*="theme-"] .form-control::placeholder { color: #9aa8b1; }
/* الخانات المطلوبة: نجمة حمرا واضحة بدل ما الحفظ يرفض من غير ما حد يعرف ليه */
body[class*="theme-"] .required::after,
body[class*="theme-"] label.required::after { color: var(--rhc-accent); }

/* ---------- الكروت ---------- */
body[class*="theme-"] .card {
  border: 1px solid var(--rhc-line) !important;
  border-radius: var(--rhc-r-lg) !important;
  box-shadow: var(--rhc-shadow) !important;
}
body[class*="theme-"] .card:hover { box-shadow: var(--rhc-shadow) !important; }
body[class*="theme-"] .card .card-header {
  border-bottom: 1px solid var(--rhc-line);
  padding: 1rem 1.25rem;
}
body[class*="theme-"] .card .card-header h5 { color: var(--rhc-ink); font-size: 1rem; }

/* ---------- السايدبار ---------- */
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item > .dash-link {
  border-radius: 10px;
  color: var(--rhc-ink-2);
}
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item > .dash-link:hover {
  background: var(--rhc-brand-50);
  color: var(--rhc-brand-700);
}
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.dash-trigger > .dash-link {
  background: var(--rhc-brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(10, 111, 127, .25) !important;
}
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon,
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.dash-trigger > .dash-link .dash-micon {
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
}
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.active > .dash-link i,
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.dash-trigger > .dash-link i { color: #fff !important; }
body[class*="theme-"] .dash-sidebar .dash-item .dash-submenu .dash-item.active > .dash-link,
body[class*="theme-"] .dash-sidebar .dash-item .dash-submenu .dash-link:hover {
  color: var(--rhc-brand) !important;
  font-weight: 700;
}
body[class*="theme-"] .dash-sidebar .dash-item .dash-submenu .dash-item::before { border-color: var(--rhc-brand) !important; }

/* ---------- الهيدر ---------- */
body[class*="theme-"] .dash-header .dash-head-link > i:not(.nocolor),
body[class*="theme-"] .dash-header .drp-language .drp-text { color: var(--rhc-brand) !important; }
body[class*="theme-"] .dash-header .drp-company .theme-avtar {
  background: var(--rhc-brand-50) !important;
  color: var(--rhc-brand-700) !important;
}

/* ---------- عنوان الصفحة ---------- */
body[class*="theme-"] .page-header-title h4,
body[class*="theme-"] .page-header-title h5 { color: var(--rhc-ink); font-weight: 700; }

/* ---------- الجداول ---------- */
body[class*="theme-"] .table thead th {
  background: #f7fafb;
  color: var(--rhc-muted);
  font-size: .72rem;
  letter-spacing: .3px;
  white-space: nowrap;
}
body[class*="theme-"] .table td { vertical-align: middle; color: var(--rhc-ink); }
body[class*="theme-"] .table tbody tr:hover > * { background: #f6fafb; }
/* الجداول العريضة بتسكرول جوه الكارت بدل ما الأعمدة الأخيرة تتقص */
body[class*="theme-"] .card-body.table-responsive,
body[class*="theme-"] .table-responsive { overflow-x: auto; }
.rhc-money { white-space: nowrap; text-align: end; }
.rhc-neg { color: var(--rhc-bad) !important; }
.rhc-zero { color: var(--rhc-muted) !important; font-weight: 500 !important; }

/* زرار الأكشن في الجداول: أيقونات متساوية ومسافة ثابتة */
body[class*="theme-"] .action-btn { margin: 0 2px; }
body[class*="theme-"] .action-btn .btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }

/* بحث وترقيم الـDataTables */
body[class*="theme-"] .dataTable-input,
body[class*="theme-"] .dataTable-selector {
  border: 1px solid var(--rhc-line);
  border-radius: var(--rhc-r-sm);
  min-height: 38px;
}
body[class*="theme-"] .dataTable-input:focus { outline: none; border-color: var(--rhc-brand); box-shadow: 0 0 0 3px var(--rhc-brand-ring); }

/* ---------- البادجات ---------- */
body[class*="theme-"] .badge { border-radius: 999px; font-weight: 600; letter-spacing: .2px; }

/* ---------- المودال ---------- */
body[class*="theme-"] .modal-content {
  border: 0;
  border-radius: var(--rhc-r-lg);
  box-shadow: var(--rhc-shadow-lg);
}
body[class*="theme-"] .modal-header { border-bottom: 1px solid var(--rhc-line); padding: 1rem 1.25rem; }
body[class*="theme-"] .modal-title { font-weight: 700; color: var(--rhc-ink); }
body[class*="theme-"] .modal-footer { border-top: 1px solid var(--rhc-line); gap: .5rem; }
body[class*="theme-"] .modal-backdrop.show { opacity: .4; }

/* ---------- لوحة التحكم ---------- */
body[class*="theme-"] .rhc-hero {
  background: linear-gradient(115deg, var(--rhc-brand-700) 0%, var(--rhc-brand) 55%, #2a95a5 100%) !important;
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(10, 111, 127, .22) !important;
}
body[class*="theme-"] .rhc-hero .btn-light {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
body[class*="theme-"] .rhc-hero .btn-light:hover { background: #fff; color: var(--rhc-brand-700); }
/* الرقم الكبير (زي إجمالي الرواتب) كان بيتكسر على سطرين */
body[class*="theme-"] .rhc-stat .card-body { container-type: inline-size; }
body[class*="theme-"] .rhc-stat h3 {
  /* الخط بيصغر على قد عرض الكارت عشان الرقم يبان كامل في سطر واحد */
  font-size: min(1.6rem, 12.5cqi);
  white-space: nowrap;
}
body[class*="theme-"] .rhc-stat .card { height: calc(100% - 24px); }

/* ---------- تنبيه بيانات الرواتب الناقصة ---------- */
.rhc-payroll-issues { border-color: #f1d29a !important; background: #fffaf0; }
.rhc-payroll-issues summary { cursor: pointer; padding: 2px 0; color: var(--rhc-ink); }
.rhc-payroll-issues summary::marker { color: var(--rhc-warn); }

/* ---------- وضوح الفوكس بالكيبورد ---------- */
body[class*="theme-"] a:focus-visible,
body[class*="theme-"] .btn:focus-visible {
  outline: 2px solid var(--rhc-brand);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ---------- الموبايل ---------- */
@media (max-width: 767.98px) {
  body[class*="theme-"] .dash-content { padding: 14px !important; }
  body[class*="theme-"] .card .card-body { padding: 1rem; }
  body[class*="theme-"] .page-header .d-flex { flex-wrap: wrap; gap: .5rem; }
}

/* ---------- الطباعة: مالهاش لزمة السايدبار والهيدر ---------- */
@media print {
  .dash-sidebar, .dash-header, .rhc-no-print { display: none !important; }
  .dash-container { margin: 0 !important; }
  body[class*="theme-"] .card { box-shadow: none !important; border-color: #ccc !important; }
}

/* ---------- قائمة المستخدم في الهيدر (آخر عنصر يمين) ---------- */
body[class*="theme-"] .dash-header .rhc-user-menu { margin-inline-start: .5rem; padding-inline-start: .75rem; border-inline-start: 1px solid var(--rhc-line); }
body[class*="theme-"] .dash-header .rhc-user-menu > .dash-head-link { font-weight: 600; color: var(--rhc-ink); }

/* ---------- صفحات الدخول ---------- */
/* الخلفية الجانبية بتاعة الثيم كانت بتعمل لوحة ملونة تانية ورا الكارت والشريط
   (الكارت فيه لوحة الهوية أصلاً)، فشكلها كان متقسوم على نصين. */
body[class*="theme-"] .auth-wrapper.auth-v3 .bg-auth-side { display: none; }
body[class*="theme-"] .auth-wrapper.auth-v3 .auth-content > .card { background: var(--rhc-surface); border: 1px solid var(--rhc-line) !important; }
body[class*="theme-"] .auth-wrapper .auth-navbar { background: var(--rhc-surface); border: 1px solid var(--rhc-line); border-radius: var(--rhc-r-lg); box-shadow: var(--rhc-shadow); }
body[class*="theme-"] .auth-wrapper .lang-dropdown { border-radius: var(--rhc-r-sm); min-width: 72px; }
/* اللوجو في بداية الشريط واللغة في آخره، في الاتجاهين.
   في العربي ms-auto (margin-left من bootstrap الـLTR) كان بيسيب قائمة اللغة في النص. */
body[class*="theme-"] .auth-navbar > .container-fluid { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
body[class*="theme-"] .auth-navbar .navbar-nav { margin-inline-start: auto !important; margin-inline-end: 0 !important; }
body[class*="theme-"] .auth-navbar .lang-dropdown { margin: 0 !important; }
body[class*="theme-"] .auth-nav-logo { height: 48px !important; }