/* ============================================
   HI2 Custom Dark / Purple Premium Theme
   ============================================ */

:root {
  --hi2-bg: #0f0f17;
  --hi2-surface: #181828;
  --hi2-surface-2: #1f1f2f;
  --hi2-primary: #7a5eff;
  --hi2-primary-light: #a896ff;
  --hi2-text: #f2f2f5;
  --hi2-text-muted: #b3b3cc;
  --hi2-border: #2b2b3d;
}

/* ====== الأساسيات العامة ====== */
body,
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper {
  background-color: var(--hi2-bg) !important;
  color: var(--hi2-text) !important;
}

/* ====== الهيدر ====== */
nav.layout-navbar,
.navbar.bg-navbar-theme,
header.layout-navbar,
.custom-header-section {
  background-color: var(--hi2-surface) !important;
  color: var(--hi2-text) !important;
  border-bottom: 1px solid var(--hi2-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

/* ====== السايدبار ====== */
aside.layout-menu {
  background-color: var(--hi2-surface-2) !important;
  color: var(--hi2-text-muted) !important;
  transition: background-color 0.3s ease-in-out;
}

aside.layout-menu .menu-link {
  color: var(--hi2-text) !important;
  font-weight: 500 !important;
}

aside.layout-menu .menu-item.active > .menu-link {
  background-color: rgba(122, 94, 255, 0.18) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(122, 94, 255, 0.25);
}

aside.layout-menu .menu-item.active > .menu-link i {
  color: #a896ff !important;
}

aside.layout-menu .menu-link:hover {
  background-color: rgba(122, 94, 255, 0.15) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ====== الكروت ====== */
.card {
  background-color: var(--hi2-surface) !important;
  border: 1px solid var(--hi2-border) !important;
  color: var(--hi2-text) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
  transition: background-color 0.3s ease-in-out;
}

.card .card-title {
  color: var(--hi2-primary-light) !important;
  font-weight: 600 !important;
}

/* ====== الجداول ====== */
.table {
  background-color: var(--hi2-surface-2) !important;
  color: var(--hi2-text) !important;
  border-color: var(--hi2-border) !important;
  border-radius: 8px !important;
}

.table thead th {
  color: var(--hi2-primary-light) !important;
  border-bottom: 1px solid var(--hi2-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #141425 !important;
}

/* ====== الأزرار ====== */
.btn,
button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: none !important;
}

.btn-primary {
  background-color: var(--hi2-primary) !important;
  border-color: var(--hi2-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn:focus {
  background-color: var(--hi2-primary-light) !important;
  border-color: var(--hi2-primary-light) !important;
  box-shadow: 0 0 0 0.2rem rgba(122, 94, 255, 0.25) !important;
}

.btn-outline-primary {
  border-color: var(--hi2-primary) !important;
  color: var(--hi2-primary-light) !important;
}

.btn-outline-primary:hover {
  background-color: var(--hi2-primary) !important;
  color: #fff !important;
}

/* ====== النصوص والعناوين ====== */
h1, h2, h3, h4, h5, h6 {
  color: var(--hi2-primary-light) !important;
}

a, .text-primary {
  color: var(--hi2-primary-light) !important;
  text-decoration: none !important;
}

a:hover {
  color: #fff !important;
}

/* ====== الفوتر ====== */
.footer.bg-footer-theme {
  background-color: var(--hi2-surface) !important;
  color: var(--hi2-text-muted) !important;
}

/* ====== الإدخالات والخانات ====== */
input.form-control,
select.form-select,
textarea.form-control {
  background-color: #1f1f2f !important;
  color: #f2f2f5 !important;
  border: 1px solid #2b2b3d !important;
  border-radius: 8px !important;
  height: 44px !important;
  padding: 10px 14px !important;
  transition: all 0.25s ease;
}

input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
  background-color: #1f1f2f !important;
  border-color: #7a5eff !important;
  box-shadow: 0 0 0 0.15rem rgba(122, 94, 255, 0.35) !important;
}

/* ====== القوائم المنسدلة ====== */
.bootstrap-select .dropdown-menu {
  background-color: #1f1f2f !important;
  border: 1px solid #2b2b3d !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.bootstrap-select .dropdown-menu li a {
  color: #a896ff !important;
  padding: 10px 14px !important;
  transition: 0.25s ease;
}

.bootstrap-select .dropdown-menu li a:hover {
  background-color: rgba(122, 94, 255, 0.15) !important;
  color: #fff !important;
}

.bootstrap-select .btn-light,
.bootstrap-select > button {
  background-color: #1f1f2f !important;
  color: #f2f2f5 !important;
  border: 1px solid #2b2b3d !important;
  border-radius: 8px !important;
  height: 44px !important;
}

/* ====== عناصر التحقق ====== */
.form-check-input {
  background-color: #1f1f2f !important;
  border: 1px solid #2b2b3d !important;
}

.form-check-input:checked {
  background-color: #7a5eff !important;
  border-color: #7a5eff !important;
}

/* ============================================
   HI2 Light Mode Fixes (متكامل)
   ============================================ */
body.light-mode {
  --hi2-bg: #f8f8fc;
  --hi2-surface: #ffffff;
  --hi2-surface-2: #f1f1f8;
  --hi2-primary: #7a5eff;
  --hi2-primary-light: #6b47ff;
  --hi2-text: #181828;
  --hi2-text-muted: #555;
  --hi2-border: #ddd;
}

/* الخلفية العامة */
body.light-mode,
body.light-mode .layout-wrapper,
body.light-mode .layout-container,
body.light-mode .layout-page,
body.light-mode .content-wrapper {
  background-color: var(--hi2-bg) !important;
  color: var(--hi2-text) !important;
}

/* السايدبار */
body.light-mode aside.layout-menu {
  background-color: var(--hi2-surface-2) !important;
  color: var(--hi2-text) !important;
}

body.light-mode aside.layout-menu .menu-link {
  color: #333 !important;
}

body.light-mode aside.layout-menu .menu-link:hover {
  background-color: rgba(122, 94, 255, 0.1) !important;
  color: var(--hi2-primary) !important;
}

body.light-mode aside.layout-menu .menu-item.active > .menu-link {
  background-color: rgba(122, 94, 255, 0.15) !important;
  color: var(--hi2-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(122, 94, 255, 0.2);
}

/* الكروت */
body.light-mode .card {
  background-color: var(--hi2-surface) !important;
  color: var(--hi2-text) !important;
  border-color: var(--hi2-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* الإدخالات */
body.light-mode input.form-control,
body.light-mode select.form-select,
body.light-mode textarea.form-control {
  background-color: #fff !important;
  color: #222 !important;
  border: 1px solid #ccc !important;
}

body.light-mode input.form-control:focus,
body.light-mode select.form-select:focus,
body.light-mode textarea.form-control:focus {
  border-color: #7a5eff !important;
  box-shadow: 0 0 0 0.15rem rgba(122, 94, 255, 0.25) !important;
}

/* dropdown */
body.light-mode .bootstrap-select .dropdown-menu {
  background-color: #fff !important;
  border-color: #ccc !important;
}

body.light-mode .bootstrap-select .btn-light {
  background-color: #fff !important;
  color: #222 !important;
  border-color: #ccc !important;
}

/* الأزرار */
body.light-mode .btn-primary {
  background-color: var(--hi2-primary) !important;
  border-color: var(--hi2-primary) !important;
}

body.light-mode .btn-primary:hover {
  background-color: var(--hi2-primary-light) !important;
}

/* زر التبديل */
body.light-mode .theme-toggle-btn {
  background-color: #f1f1f8 !important;
  color: #7a5eff !important;
  border: 1px solid #ddd !important;
}
/* ========= عناصر إضافية تتأثر بالوضع ========= */

/* صندوق تفاصيل الحساب */
.dark-mode .dropdown-menu.custom-header-dropdown {
  background-color: #181828 !important;
  color: #f2f2f5 !important;
  border: 1px solid #2b2b3d !important;
}
.light-mode .dropdown-menu.custom-header-dropdown {
  background-color: #fff !important;
  color: #181828 !important;
  border: 1px solid #ddd !important;
}

/* خانات الإدخال العامة */
.dark-mode input.form-control,
.dark-mode select.form-select,
.dark-mode textarea.form-control {
  background-color: #1f1f2f !important;
  color: #f2f2f5 !important;
  border: 1px solid #2b2b3d !important;
}
.light-mode input.form-control,
.light-mode select.form-select,
.light-mode textarea.form-control {
  background-color: #fff !important;
  color: #181828 !important;
  border: 1px solid #ccc !important;
}
/* ===============================
   إصلاح الرؤوس والخانات الثابتة
   =============================== */

/* رؤوس الكروت والجداول */
.dark-mode .card-header,
.dark-mode .table thead th,
.dark-mode .page-title,
.dark-mode .section-title {
  background-color: #181828 !important;
  color: #a896ff !important;
  border-bottom: 1px solid #2b2b3d !important;
}

.light-mode .card-header,
.light-mode .table thead th,
.light-mode .page-title,
.light-mode .section-title {
  background-color: #f9f9fc !important;
  color: #6b47ff !important;
  border-bottom: 1px solid #ddd !important;
}

/* عناوين الأقسام أو الـ titles */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #a896ff !important;
}

.light-mode h1,
.light-mode h2,
.light-mode h3,
.light-mode h4,
.light-mode h5,
.light-mode h6 {
  color: #6b47ff !important;
}

/* خلفية الـ table head بالكامل */
.dark-mode table thead {
  background-color: #1f1f2f !important;
}

.light-mode table thead {
  background-color: #f1f1f8 !important;
}

/* النص داخل الـ table */
.dark-mode table td,
.dark-mode table th {
  color: #f2f2f5 !important;
}
.light-mode table td,
.light-mode table th {
  color: #181828 !important;
}

/* تصحيح شريط العدادات أو الإحصائيات */
.dark-mode .stat-card,
.dark-mode .summary-box {
  background-color: #181828 !important;
  color: #f2f2f5 !important;
}
.light-mode .stat-card,
.light-mode .summary-box {
  background-color: #fff !important;
  color: #181828 !important;
}