body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode main,
body.dark-mode .section,
body.dark-mode .features-section,
body.dark-mode .gallery-section {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode .header,
body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .details-card,
body.dark-mode .dark-mode-toggle,
body.dark-mode .filter-btn,
body.dark-mode .welcome-box,
body.dark-mode .admin-card {
    background: #111827;
    color: #e5e7eb;
    border-color: #334155;
}

body.dark-mode .hero {
    /* نغير فقط "صورة الخلفية" لإضافة طبقة التعتيم الليلي */
    /* المسار سيبقى مكرراً هنا لأن CSS لا تدعم دمج الصور بدون متغيرات، لكننا تخلصنا من تكرار بقية الخصائص */
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.75)), 
                      url('../uploads/regions/kaba.png') !important;
}
body.dark-mode .page-hero,
body.dark-mode .details-hero {background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e5e7eb;
}

body.dark-mode .hero-text h1,
body.dark-mode .page-hero h1,
body.dark-mode .details-card h2,
body.dark-mode .card-title,
body.dark-mode .section-header h2,
body.dark-mode .feature-card h3,
body.dark-mode .welcome-box h2 {
    color: #93c5fd;
}

body.dark-mode .hero-text p,
body.dark-mode .card-text,
body.dark-mode .card-meta,
body.dark-mode .details-card p,
body.dark-mode .feature-card p,
body.dark-mode .welcome-box p,
body.dark-mode .regions-page-note,
body.dark-mode .footer-about p,
body.dark-mode .footer-bottom,
body.dark-mode .footer-links a {
    color: #cbd5e1;
}

body.dark-mode .nav-link {
    color: #e5e7eb;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    background: #1e3a8a;
    color: #ffffff;
}

body.dark-mode .logo,
body.dark-mode .logo-text,
body.dark-mode .logo-text span,
body.dark-mode .footer .logo-text,
body.dark-mode .footer .logo-text span,
body.dark-mode .footer-heading {
    color: #ffffff;
}

body.dark-mode .feature-icon,
body.dark-mode .login-brand-icon,
body.dark-mode .logo-icon {
    background: #1e3a8a;
    color: #ffffff;
}

body.dark-mode .image-placeholder {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #93c5fd;
}

body.dark-mode .badge-primary {
    background: #1e3a8a;
    color: #ffffff;
}

body.dark-mode .badge-accent {
    background: #3f2f10;
    color: #fcd34d;
}

body.dark-mode .filter-btn {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .filter-btn.active,
body.dark-mode .filter-btn:hover {
    background: #1e3a8a;
    color: #ffffff;
}

body.dark-mode .search-bar input,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #0f172a;
    color: #e5e7eb;
    border: 1px solid #334155;
}

body.dark-mode .search-bar input::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #94a3b8;
}

body.dark-mode .footer {
    background: #020617;
    color: #e5e7eb;
}

body.dark-mode .footer-links a:hover {
    color: #93c5fd;
}