/* ============================================
   Dark Mode Stylesheet
   الوضع الليلي
   مؤسسة محمود الحفناوى للتنمية الخيرية
   ============================================ */

/* ============================================
   1. Dark Mode Variables
   ============================================ */

[data-theme="dark"] {
    /* إعادة تعريف الألوان للوضع الداكن */
    --white: #1e293b;
    --black: #f1f5f9;
    
    --gray-50: #0f172a;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.7);
    
    --primary-50: #0a2631;
    --primary-100: #10394a;
    
    --success-light: #052e16;
    --warning-light: #451a03;
    --danger-light: #450a0a;
    --info-light: #0c1929;
}

/* ============================================
   2. Base Elements
   ============================================ */

[data-theme="dark"] body {
    background-color: var(--gray-50);
    color: var(--gray-800);
}

[data-theme="dark"] a {
    color: var(--primary-light);
}

[data-theme="dark"] a:hover {
    color: #4a9fc0;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--gray-900);
}

/* ============================================
   3. Cards & Containers
   ============================================ */

[data-theme="dark"] .card {
    background-color: var(--white);
    border-color: var(--gray-200);
}

[data-theme="dark"] .card-header {
    background-color: var(--white);
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .card-footer {
    background-color: var(--gray-100);
    border-top-color: var(--gray-200);
}

[data-theme="dark"] .stat-card {
    background-color: var(--white);
    border-color: var(--gray-200);
}

/* ============================================
   4. Forms
   ============================================ */

[data-theme="dark"] .form-control {
    background-color: var(--white);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(34, 137, 176, 0.2);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--gray-500);
}

[data-theme="dark"] .form-select {
    background-color: var(--white);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

[data-theme="dark"] .form-label {
    color: var(--gray-700);
}

[data-theme="dark"] .form-check-label {
    color: var(--gray-700);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-600);
}

/* ============================================
   5. Tables
   ============================================ */

[data-theme="dark"] .table {
    color: var(--gray-800);
}

[data-theme="dark"] .table th {
    background-color: var(--gray-100);
    color: var(--gray-600);
    border-bottom-color: var(--gray-300);
}

[data-theme="dark"] .table td {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--gray-100);
}

[data-theme="dark"] .table-striped tbody tr:nth-child(odd) {
    background-color: var(--gray-100);
}

/* ============================================
   6. Dashboard
   ============================================ */

[data-theme="dark"] .dashboard-header {
    background-color: var(--white);
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .sidebar-toggle {
    color: var(--gray-500);
}

[data-theme="dark"] .sidebar-toggle:hover {
    background-color: var(--gray-100);
    color: var(--primary-light);
}

[data-theme="dark"] .header-icon {
    color: var(--gray-500);
}

[data-theme="dark"] .header-icon:hover {
    background-color: var(--gray-100);
    color: var(--primary-light);
}

[data-theme="dark"] .header-search .search-input {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

[data-theme="dark"] .header-search .search-icon {
    color: var(--gray-400);
}

/* ============================================
   7. Navigation & Sidebar
   ============================================ */

[data-theme="dark"] .breadcrumb-item a {
    color: var(--gray-500);
}

[data-theme="dark"] .pagination .page-link {
    background-color: var(--white);
    border-color: var(--gray-300);
    color: var(--gray-600);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--gray-100);
    color: var(--primary-light);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ============================================
   8. Modals & Dropdowns
   ============================================ */

[data-theme="dark"] .modal-content {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--gray-200);
}

[data-theme="dark"] .modal-close {
    color: var(--gray-400);
}

[data-theme="dark"] .modal-close:hover {
    background-color: var(--gray-100);
    color: var(--danger);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--white);
    border-color: var(--gray-200);
}

[data-theme="dark"] .dropdown-item {
    color: var(--gray-700);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--gray-100);
    color: var(--primary-light);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--gray-200);
}

/* ============================================
   9. Alerts & Badges
   ============================================ */

[data-theme="dark"] .alert-success {
    background-color: #052e16;
    border-color: #166534;
    color: #86efac;
}

[data-theme="dark"] .alert-danger {
    background-color: #450a0a;
    border-color: #991b1b;
    color: #fca5a5;
}

[data-theme="dark"] .alert-warning {
    background-color: #451a03;
    border-color: #92400e;
    color: #fcd34d;
}

[data-theme="dark"] .alert-info {
    background-color: #0c1929;
    border-color: #1e40af;
    color: #93c5fd;
}

[data-theme="dark"] .badge-primary {
    background-color: var(--primary-100);
    color: #93c5fd;
}

[data-theme="dark"] .badge-gray {
    background-color: var(--gray-200);
    color: var(--gray-600);
}

/* ============================================
   10. Tabs & Accordions
   ============================================ */

[data-theme="dark"] .tabs {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .tab {
    color: var(--gray-500);
}

[data-theme="dark"] .tab:hover {
    color: var(--gray-700);
}

[data-theme="dark"] .tab.active {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
}

[data-theme="dark"] .tab-pill {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-600);
}

[data-theme="dark"] .tab-pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="dark"] .accordion {
    border-color: var(--gray-200);
}

[data-theme="dark"] .accordion-item {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .accordion-header:hover {
    background-color: var(--gray-100);
}

/* ============================================
   11. Charts
   ============================================ */

[data-theme="dark"] .chart-container {
    background-color: var(--white);
    border-color: var(--gray-200);
}

/* ============================================
   12. Loading & Empty States
   ============================================ */

[data-theme="dark"] .loading-overlay {
    background: rgba(15, 23, 42, 0.7);
}

[data-theme="dark"] .loading-skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
}

[data-theme="dark"] .empty-state {
    color: var(--gray-500);
}

[data-theme="dark"] .empty-state-title {
    color: var(--gray-600);
}

/* ============================================
   13. Scrollbar
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--gray-100);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-300);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ============================================
   14. Auth Pages
   ============================================ */

[data-theme="dark"] .auth-card {
    background-color: var(--white);
}

[data-theme="dark"] .auth-title {
    color: var(--gray-900);
}

[data-theme="dark"] .auth-subtitle {
    color: var(--gray-500);
}

[data-theme="dark"] .auth-form .form-control {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

[data-theme="dark"] .auth-form .form-control:focus {
    background-color: var(--white);
}

[data-theme="dark"] .auth-footer {
    color: var(--gray-500);
}

/* ============================================
   15. Misc
   ============================================ */

[data-theme="dark"] .divider {
    border-top-color: var(--gray-200);
}

[data-theme="dark"] .border {
    border-color: var(--gray-200) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--white) !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: var(--gray-50) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: var(--gray-100) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--gray-500) !important;
}

[data-theme="dark"] .file-upload-area {
    border-color: var(--gray-300);
}

[data-theme="dark"] .file-upload-area:hover {
    border-color: var(--primary-light);
    background-color: var(--primary-50);
}

[data-theme="dark"] .timeline::before {
    background: var(--gray-300);
}

[data-theme="dark"] .timeline-item .timeline-content {
    background: var(--white);
    border-color: var(--gray-200);
}

[data-theme="dark"] .progress {
    background: var(--gray-200);
}

/* ============================================
   16. Transitions
   ============================================ */

[data-theme="dark"],
[data-theme="dark"] * {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease;
}
/* ============================================
   17. Sidebar Dark Mode Overrides
   ============================================ */

/* السايدبار يحتفظ بألوانه الغامقة في كلا الوضعين */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #060a14 0%, #0a0f1c 50%, #060a14 100%);
    border-left-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .sidebar-search input {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .user-card {
    background: rgba(255, 255, 255, 0.02);
}

/* ============================================
   18. Dashboard Footer Dark Mode
   ============================================ */

[data-theme="dark"] .dashboard-footer {
    background: var(--white);
    border-top-color: var(--gray-200);
}

/* ============================================
   19. Quick Actions Dark Mode
   ============================================ */

[data-theme="dark"] .quick-action-card {
    background: var(--white);
    border-color: var(--gray-200);
}

[data-theme="dark"] .quick-action-card:hover {
    border-color: var(--primary-light);
}

/* ============================================
   20. Chart Containers Dark Mode
   ============================================ */

[data-theme="dark"] .chart-container {
    background: var(--white);
    border-color: var(--gray-200);
}

/* ============================================
   21. Page Header Dark Mode
   ============================================ */

[data-theme="dark"] .page-header .page-title {
    color: var(--gray-900);
}

[data-theme="dark"] .page-header .page-subtitle {
    color: var(--gray-500);
}

/* ============================================
   22. Notification Items Dark Mode
   ============================================ */

[data-theme="dark"] .notification-item {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .notification-item:hover {
    background: var(--gray-100);
}

/* ============================================
   23. Activity Items Dark Mode
   ============================================ */

[data-theme="dark"] .activity-item {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .activity-text {
    color: var(--gray-700);
}

[data-theme="dark"] .activity-time {
    color: var(--gray-400);
}