/*------------------------------------------------------------------
[Path to file: dark-mode.css]
[Description: Modern Dark Theme override for eSchool/Admin Templates]
-------------------------------------------------------------------*/

/* 1. تعريف متغيرات الألوان الداكنة (Modern Dark Palette) */
body.dark {
    /* ألوان الخلفيات */
    --dark-bg-base: #121212; /* الخلفية الأساسية للموقع */
    --dark-bg-surface: #1e1e1e; /* خلفية العناصر الطافية: البطاقات، القوائم */
    --dark-bg-elevated: #2d2d2d; /* خلفية العناصر الأكثر ارتفاعاً: المدخلات، الحقول */
    
    /* ألوان النصوص */
    --dark-text-primary: rgba(255, 255, 255, 0.92);
    --dark-text-secondary: rgba(255, 255, 255, 0.65);
    --dark-text-muted: rgba(255, 255, 255, 0.5);
    
    /* الحدود والظلال */
    --dark-border-color: rgba(255, 255, 255, 0.08);
    --dark-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* 2. التعديلات العامة على الهيكل (style.min.css & Generic Structure) */
body.dark {
    background-color: var(--dark-bg-base) !important;
    color: var(--dark-text-primary) !important;
}

body.dark .wrapper,
body.dark .content-wrapper,
body.dark .main-footer {
    background-color: var(--dark-bg-base) !important;
    color: var(--dark-text-primary);
    border-color: var(--dark-border-color) !important;
}

/* النصوص الثانوية والبهاتة */
body.dark .text-muted,
body.dark .small-box .icon>i,
body.dark .breadcrumb-item.active {
    color: var(--dark-text-secondary) !important;
}

body.dark a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #8ab4f8; /* لون أزرق فاتح مريح للعين في الوضع الداكن للروابط */
}

/* 3. القوائم (Navbar & Sidebar) */

/* القائمة العلوية */
body.dark .main-header.navbar {
    background-color: var(--dark-bg-surface) !important;
    border-color: var(--dark-border-color) !important;
}

body.dark .main-header.navbar .nav-link {
    color: var(--dark-text-primary) !important;
}

/* القائمة الجانبية (بافتراض أنها داكنة أصلاً، نؤكد على الألوان) */
body.dark .main-sidebar {
    background-color: #1a1a1a !important; /* أسود أغمق قليلاً */
}

body.dark .sidebar a {
    color: var(--dark-text-secondary) !important;
}

body.dark .sidebar .nav-link.active,
body.dark .sidebar .nav-treeview>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* 4. البطاقات والعناصر الحاوية (Cards & Boxes) */
body.dark .card,
body.dark .info-box,
body.dark .small-box,
body.dark .modal-content {
    background-color: var(--dark-bg-surface) !important;
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-color);
    box-shadow: var(--dark-shadow) !important;
}

body.dark .card-header,
body.dark .modal-header,
body.dark .modal-footer {
    border-bottom: 1px solid var(--dark-border-color);
    border-top: 1px solid var(--dark-border-color);
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark .card-title,
body.dark .modal-title {
    color: var(--dark-text-primary);
}

/* 5. الجداول (Tables) */
body.dark .table {
    color: var(--dark-text-primary) !important;
    background-color: transparent !important;
}

body.dark .table th,
body.dark .table td {
    border-color: var(--dark-border-color) !important;
}

body.dark .table thead th {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-width: 2px;
}

/* الجداول المخططة (Striped) */
body.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* تأثير التحويم على الجداول */
body.dark .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #fff;
}

/* 6. النماذج وحقول الإدخال (Forms & Inputs) */
body.dark .form-control,
body.dark .custom-select,
body.dark .input-group-text,
body.dark select,
body.dark textarea,
body.dark input[type="text"],
body.dark input[type="password"],
body.dark input[type="email"],
body.dark input[type="number"] {
    background-color: var(--dark-bg-elevated) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-color) !important;
}

body.dark .form-control:focus,
body.dark .custom-select:focus {
    background-color: var(--dark-bg-elevated);
    border-color: #8ab4f8; /* لون التحديد عند التركيز */
    box-shadow: 0 0 0 0.2rem rgba(138, 180, 248, 0.25);
}

body.dark .form-control::placeholder {
    color: var(--dark-text-muted) !important;
}

/* القوائم المنسدلة (Dropdowns) */
body.dark .dropdown-menu {
    background-color: var(--dark-bg-surface) !important;
    border-color: var(--dark-border-color) !important;
    box-shadow: var(--dark-shadow);
}

body.dark .dropdown-item {
    color: var(--dark-text-primary) !important;
}

body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark .dropdown-divider {
    border-top: 1px solid var(--dark-border-color);
}

/* 7. الأزرار والعناصر التفاعلية */

/* الأزرار الافتراضية (البيضاء سابقاً) */
body.dark .btn-default,
body.dark .btn-light {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-color);
}

body.dark .btn-default:hover,
body.dark .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* تعديل طفيف على أزرار الترقيم (Pagination) */
body.dark .page-link {
    background-color: var(--dark-bg-elevated);
    border-color: var(--dark-border-color);
    color: var(--dark-text-secondary);
}

body.dark .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--dark-border-color);
    color: var(--dark-text-muted);
}

/* 8. تعديلات خاصة بملف login.css */
body.dark.login-page,
body.dark .login-box {
    background-color: var(--dark-bg-base) !important;
}

body.dark .login-logo a {
    color: #fff !important;
}

body.dark .login-box .card {
    border: 1px solid var(--dark-border-color);
}

body.dark .login-card-body,
body.dark .register-card-body {
    background-color: var(--dark-bg-surface) !important;
    color: var(--dark-text-primary);
}

/* 9. تعديلات خاصة بملف staff-attendance.css وعناصر الـ UI الأخرى */

/* التعامل مع الـ Badges أو الليبلات */
body.dark .badge-light {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

/* أي عناصر بيضاء تم تحديدها بـ !important في الملفات الأصلية */
body.dark .bg-white,
body.dark [class*="bg-white"] {
    background-color: var(--dark-bg-surface) !important;
    color: var(--dark-text-primary) !important;
}

/* تصحيح ألوان الأيقونات الملونة التي قد لا تناسب الخلفية الداكنة */
body.dark .small-box .icon>i {
    opacity: 0.3; /* جعلها شفافة قليلاً لتندمج مع الخلفية */
}

/* 10. التوافق التلقائي مع RTL/LTR */
/* بما أن الملف RTL الأصلي (rtl.min.css) يتعامل مع الاتجاهات (float, margin, padding) 
   فإن هذا الملف يتعامل فقط مع الألوان، وبالتالي سيعمل مع كلا الاتجاهين تلقائياً 
   طالما تم وضعه كلاس 'dark' على الـ body. */