/* ═══════════════════════════════════════════════════════
   dark-mode.css
   الوضع الداكن الموحّد لكل صفحات BROSMOB.
   يُضمَّن في كل صفحة بعد الـ CSS الخاص بالصفحة.
   يُفعَّل بإضافة class="dark" إلى <body> أو <html>.
   ═══════════════════════════════════════════════════════ */

html.dark,
html.dark body,
body.dark {
  /* ═══ المتغيرات الأساسية ═══ */
  --bg:         #1a1a2e;
  --card:       #16213e;
  --text:       #eaeaea;
  --text-light: #999999;
  --border:     #2a2a4a;

  /* ═══ خلفيات إضافية ═══ */
  background: #1a1a2e;
  color: #eaeaea;
}

/* ═══ Scrollbar ═══ */
body.dark ::-webkit-scrollbar {
  background: #1a1a2e;
}
body.dark ::-webkit-scrollbar-thumb {
  background: #2a2a4a;
  border-radius: 10px;
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background: #3a3a5a;
}

/* ═══ Inputs & Selects ═══ */
body.dark input,
body.dark select,
body.dark textarea {
  background: #0f1629;
  color: #eaeaea;
  border-color: #2a2a4a;
}
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #666;
}
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: var(--primary);
  background: #16213e;
}

/* ═══ Cards / Panels ═══ */
body.dark .panel,
body.dark .card,
body.dark .stat,
body.dark .modal {
  background: #16213e;
  color: #eaeaea;
  border-color: #2a2a4a;
}

/* ═══ Tables ═══ */
body.dark table {
  background: #16213e;
  color: #eaeaea;
}
body.dark th {
  background: #0f1629;
  color: #eaeaea;
  border-color: #2a2a4a;
}
body.dark td {
  border-color: #2a2a4a;
}
body.dark tr:hover td {
  background: #1f2a44;
}

/* ═══ Modals / Dropdowns ═══ */
body.dark .modal-content,
body.dark .dropdown-menu,
body.dark .select-menu {
  background: #16213e;
  color: #eaeaea;
  border-color: #2a2a4a;
}

/* ═══ Sidebar / Menu ═══ */
body.dark .sidebar,
body.dark .menu {
  background: #0f1629;
  border-color: #2a2a4a;
}
body.dark .sidebar a,
body.dark .menu a {
  color: #eaeaea;
}
body.dark .sidebar a:hover,
body.dark .menu a:hover,
body.dark .menu li.active a {
  background: #1f2a44;
}

/* ═══ Buttons ═══ */
body.dark .btn,
body.dark button:not([class*="primary"]):not([class*="danger"]):not([class*="success"]) {
  background: #16213e;
  color: #eaeaea;
  border-color: #2a2a4a;
}
body.dark .btn:hover,
body.dark button:not([class*="primary"]):not([class*="danger"]):not([class*="success"]):hover {
  background: #1f2a44;
}

/* ═══ Lists ═══ */
body.dark .list-item {
  background: #16213e;
  border-color: #2a2a4a;
}
body.dark .list-item:hover {
  background: #1f2a44;
}

/* ═══ نصوص خفيفة ═══ */
body.dark .text-light,
body.dark small,
body.dark .muted {
  color: #999999;
}

/* ═══ Transitions ناعمة ═══ */
body.dark * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ═══════════════════════════════════════════════════════
   i18n FOUC Fix — إخفاء المحتوى حتى تطبّق الترجمات
   ═══════════════════════════════════════════════════════ */
html.i18n-loading body,
body.i18n-loading {
  visibility: hidden !important;
}