/* ============================================================
   الوضع الليلي — ملف مستقل يُحمَّل بعد بقية ملفات CSS ليغلب
   على القواعد المتأخرة. لا يؤثر على الوضع النهاري إطلاقًا.
   ============================================================ */

/* ============================================================
   الوضع الليلي للصفحة الرئيسية — مشروط بـ data-theme="dark"
   فلا يتأثر الوضع النهاري إطلاقًا.
   ============================================================ */
html[data-theme="dark"] {
  --white: #151f33;
  --bg-light: #0d1524;
  --border: #243349;
  --text: #dbe4f2;
  --text-light: #9aabc4;
  --text2: #9aabc4;
  --text3: #b6c4d8;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: #0d1524;
  color: var(--text);
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header .nav {
  background-color: #0d1524 !important;
}
html[data-theme="dark"] section,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
  background-color: #0d1524 !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .single-course,
html[data-theme="dark"] .edu-card,
html[data-theme="dark"] .service-item,
html[data-theme="dark"] .testimonial-item,
html[data-theme="dark"] .team-item,
html[data-theme="dark"] .modal-content {
  background-color: #151f33 !important;
  border-color: #243349 !important;
  color: var(--text);
}
html[data-theme="dark"] .about-modern-right .about-intro,
html[data-theme="dark"] .testimonial-head .lead,
html[data-theme="dark"] .services-intro-head .lead,
html[data-theme="dark"] .contact-grid .lead,
html[data-theme="dark"] .footer-grid h3,
html[data-theme="dark"] .footer-grid p,
html[data-theme="dark"] .contact-cta p,
html[data-theme="dark"] .value-content h3,
html[data-theme="dark"] .topbar span,
html[data-theme="dark"] .topbar-social a {
  /* background-color: #151f33 !important; */
  /* border-color: #243349 !important; */
  /* color: var(--text); */
  color: white;
}
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dnav,
html[data-theme="dark"] header {
  background-color: #111a2b !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
/* html[data-theme="dark"] h3, */
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #eaf1fb;
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] td,
html[data-theme="dark"] label {
  color: var(--text);
}
html[data-theme="dark"] p,
html[data-theme="dark"] .services-head .lead {
  color: var(--text);
  /* color: black; */
}
html[data-theme="dark"] .contact-info h3,
html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .testimonial-text,
html[data-theme="dark"] .client-info h4,
html[data-theme="dark"] .project-phone-info > span,
html[data-theme="dark"] .project-phone-info a,
html[data-theme="dark"] .client-info span {
  /* color: var(--text); */
  color: black;
}

html[data-theme="dark"] .unigim-cta-text h2 span,
html[data-theme="dark"] .project-cta-label > span,
html[data-theme="dark"] .project-cta-content h2 span,
html[data-theme="dark"] .unigim-cta-label {
  /* color: var(--text); */
  color: #12a594;
}
html[data-theme="dark"] a {
  color: #7cc4e8;
  /* color: black; */
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
  color: var(--text) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
  background: #0f1828;
  border-color: #243349;
  color: var(--text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #6f819b;
}
html[data-theme="dark"] .table {
  color: var(--text);
}
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
  background-color: #0a1120 !important;
}

/* زر تبديل الثيم في الهيدر */
.theme-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  margin-inline-start: 8px;
  transition: var(--transition);
}
.theme-btn:hover {
  background: var(--bg-light);
}

/* روابط القائمة والبطاقات تستخدم --dark (#1a1a2e) كلون نص،
   فتبقى غير مقروءة على خلفية داكنة. نعالجها هنا فقط. */
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .navbar-nav .nav-link,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dnav a {
  /* color: #dbe4f2 !important; */
  color: black !important;
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .dropdown-item:hover {
  color: #7cc4e8 !important;
}
html[data-theme="dark"] .dropdown-menu {
  background: #151f33;
  border-color: #243349;
}
html[data-theme="dark"] .single-course *,
html[data-theme="dark"] .edu-card *,
html[data-theme="dark"] .service-item *,
html[data-theme="dark"] .card * {
  color: inherit;
}
html[data-theme="dark"] .single-course .c-title a,
html[data-theme="dark"] .edu-card .edu-title a {
  color: #eaf1fb;
}
html[data-theme="dark"] .c-desc,
html[data-theme="dark"] .edu-desc,
html[data-theme="dark"] .edu-teacher {
  color: #9aabc4;
}

/* قواعد القائمة عندك بتحديد عالٍ (.navbar .navbar-nav .nav-item.nav-link)،
   فنطابق تحديدها داخل الوضع الليلي فقط. */
html[data-theme="dark"] .navbar .navbar-nav .nav-item.nav-link,
html[data-theme="dark"] .navbar .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-nav .nav-link {
  color: #dbe4f2 !important;
  /* color: black !important; */
}
html[data-theme="dark"] .navbar .navbar-nav .nav-item.nav-link:hover,
html[data-theme="dark"] .navbar .navbar-nav .nav-link.active {
  color: #7cc4e8 !important;
}

/* بطاقات المزايا وما شابهها تستخدم ألوان نص ثابتة داكنة */
html[data-theme="dark"] .single-feature,
html[data-theme="dark"] .single-feature *,
html[data-theme="dark"] .desc-wrap,
html[data-theme="dark"] .desc-wrap *,
html[data-theme="dark"] .feature-item,
html[data-theme="dark"] .feature-item * {
  color: #dbe4f2;
}
html[data-theme="dark"] .single-feature h1,
html[data-theme="dark"] .single-feature h2,
html[data-theme="dark"] .single-feature h3,
html[data-theme="dark"] .single-feature h4,
html[data-theme="dark"] .single-feature h5 {
  color: #eaf1fb;
}
html[data-theme="dark"] .single-feature {
  background: #151f33;
  border-color: #243349;
}

/* قواعد بتحديد أعلى داخل الوضع الليلي فقط */
html[data-theme="dark"] .single-feature .desc-wrap p,
html[data-theme="dark"] .single-feature .desc-wrap h4,
html[data-theme="dark"] .single-feature .desc-wrap * {
  color: #dbe4f2;
}
html[data-theme="dark"] .single-feature .desc-wrap h4,
html[data-theme="dark"] .single-feature h4 {
  color: #eaf1fb;
}

/* ============================================================
   زر تبديل الوضع داخل قائمة الهيدر الفعلية لموقع Unigim
   (الهيدر غامق دائمًا #1e2a3d، فالتصميم موحّد لا يعتمد على الثيم)
   ============================================================ */
.site-header .menu .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* background: rgba(255, 255, 255, 0.06); */
  background: #12a594;
  /* background: #0a1120; */
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  margin: 0;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    transform 0.2s ease;
  flex-shrink: 0;
}
.site-header .menu .theme-btn:hover {
  border-color: #12a594;
  /* color: #12a594; */
  color: #30edd7;
  /* color: black; */
  /* background: rgba(18, 165, 148, 0.1); */
  /* background: #fff; */
  background: #0a1120;
  transform: translateY(-1px);
}
.site-header .menu .theme-btn:active {
  transform: translateY(0);
}

@media (max-width: 900px) {
  .site-header .menu .theme-btn {
    margin: 10px auto 0;
    margin-top: -39px;
  }
}