/* ============================================================ DARK MODE — Chandransh Foundation Portal Applied via: ============================================================ */ [data-theme="dark"] { /* Core backgrounds */ --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; /* Brand colours stay the same but lighter variants shift */ --primary: #3b82f6; --primary-hover: #2563eb; --primary-light: #1e3a5f; --success: #22c55e; --success-light: #052e16; --danger: #f87171; --danger-light: #2d0a0a; --warning: #fbbf24; --warning-light: #2d1a00; --info: #38bdf8; --info-light: #0c2340; --accent: #f59e0b; --accent-light: #2d1a00; } /* Page background */ [data-theme="dark"] body { background: #0f172a; color: #e2e8f0; } /* Sidebar */ [data-theme="dark"] .sidebar { background: #1e293b; border-right-color: #334155; } [data-theme="dark"] .sidebar-brand { border-bottom-color: #334155; } [data-theme="dark"] .brand-text { color: #f1f5f9; } [data-theme="dark"] .brand-sub { color: #94a3b8; } [data-theme="dark"] .nav-section-label { color: #475569; } [data-theme="dark"] .nav-item { color: #94a3b8; } [data-theme="dark"] .nav-item:hover { background: #0f172a; color: #3b82f6; } [data-theme="dark"] .nav-item.active { background: #1e3a5f; color: #3b82f6; } [data-theme="dark"] .nav-item.active::before { background: #3b82f6; } [data-theme="dark"] .sidebar-footer { border-top-color: #334155; } [data-theme="dark"] .user-card:hover { background: #0f172a; } [data-theme="dark"] .user-info-name { color: #f1f5f9; } [data-theme="dark"] .user-info-role { color: #64748b; } /* Topbar */ [data-theme="dark"] .topbar { background: #1e293b; border-bottom-color: #334155; } [data-theme="dark"] .topbar-title { color: #f1f5f9; } [data-theme="dark"] .topbar-toggle { color: #94a3b8; } [data-theme="dark"] .notif-btn { background: #334155; color: #94a3b8; } [data-theme="dark"] .notif-btn:hover{ background: #475569; } /* Cards */ [data-theme="dark"] .card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .card-header { border-bottom-color: #334155; } [data-theme="dark"] .card-title { color: #e2e8f0; } /* Stat cards */ [data-theme="dark"] .stat-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .stat-value { color: #f1f5f9; } [data-theme="dark"] .stat-label { color: #64748b; } /* Tables */ [data-theme="dark"] .data-table thead th { background: #0f172a; color: #64748b; border-bottom-color: #334155; } [data-theme="dark"] .data-table tbody td { border-bottom-color: #334155; color: #cbd5e1; } [data-theme="dark"] .data-table tbody tr:hover { background: #0f172a; } [data-theme="dark"] .data-table .no-photo { background: #334155; color: #94a3b8; } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); } [data-theme="dark"] .form-control::placeholder { color: #475569; } [data-theme="dark"] .form-label { color: #94a3b8; } [data-theme="dark"] .form-hint { color: #475569; } [data-theme="dark"] .form-select option { background: #1e293b; } /* File upload button */ [data-theme="dark"] .form-file-btn { background: #0f172a; border-color: #475569; color: #64748b; } [data-theme="dark"] .form-file-btn:hover { border-color: #3b82f6; color: #3b82f6; } /* Readonly inputs (pincode autofill) */ [data-theme="dark"] input[readonly] { background: #1e293b !important; color: #64748b !important; } /* Buttons */ [data-theme="dark"] .btn-outline { border-color: #334155; color: #cbd5e1; background: transparent; } [data-theme="dark"] .btn-outline:hover:not(:disabled) { background: #334155; border-color: #475569; } [data-theme="dark"] .btn-ghost { color: #94a3b8; } [data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: #334155; } /* Modals */ [data-theme="dark"] .modal { background: #1e293b; border: 1px solid #334155; } [data-theme="dark"] .modal-header { background: #1e293b; border-bottom-color: #334155; } [data-theme="dark"] .modal-title { color: #f1f5f9; } [data-theme="dark"] .modal-footer { border-top-color: #334155; } [data-theme="dark"] .modal-close { background: #334155; color: #94a3b8; } [data-theme="dark"] .modal-close:hover { background: #475569; color: #e2e8f0; } /* Badges */ [data-theme="dark"] .badge-success { background: #052e16; color: #22c55e; } [data-theme="dark"] .badge-danger { background: #2d0a0a; color: #f87171; } [data-theme="dark"] .badge-warning { background: #2d1a00; color: #fbbf24; } [data-theme="dark"] .badge-info { background: #0c2340; color: #38bdf8; } [data-theme="dark"] .badge-primary { background: #1e3a5f; color: #3b82f6; } [data-theme="dark"] .badge-neutral { background: #334155; color: #94a3b8; } /* Alerts */ [data-theme="dark"] .alert-success { background: #052e16; color: #86efac; border-color: #166534; } [data-theme="dark"] .alert-danger { background: #2d0a0a; color: #fca5a5; border-color: #991b1b; } [data-theme="dark"] .alert-warning { background: #2d1a00; color: #fcd34d; border-color: #92400e; } [data-theme="dark"] .alert-info { background: #0c2340; color: #7dd3fc; border-color: #164e63; } /* Toasts */ [data-theme="dark"] .toast { background: #1e293b; border-color: #334155; } [data-theme="dark"] .toast-title { color: #f1f5f9; } [data-theme="dark"] .toast-msg { color: #94a3b8; } /* Tabs */ [data-theme="dark"] .tab-bar { border-bottom-color: #334155; } [data-theme="dark"] .tab-btn { color: #64748b; } [data-theme="dark"] .tab-btn:hover { color: #3b82f6; } [data-theme="dark"] .tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; } /* Pagination */ [data-theme="dark"] .page-btn { background: #1e293b; border-color: #334155; color: #94a3b8; } [data-theme="dark"] .page-btn:hover { border-color: #3b82f6; color: #3b82f6; } [data-theme="dark"] .page-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; } /* Search */ [data-theme="dark"] .search-wrap input { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .search-wrap input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); } [data-theme="dark"] .search-wrap input::placeholder { color: #475569; } /* Divider */ [data-theme="dark"] .divider { background: #334155; } /* Empty state */ [data-theme="dark"] .empty-state-title { color: #94a3b8; } /* Portal footer */ [data-theme="dark"] .portal-footer { background: #1e293b; border-top-color: #334155; color: #475569; } /* Doc chips */ [data-theme="dark"] .doc-chip { background: #0f172a; border-color: #334155; color: #94a3b8; } /* Code tags */ [data-theme="dark"] code { background: #334155; color: #e2e8f0; } /* Form section title */ [data-theme="dark"] .form-section-title { color: #3b82f6; border-bottom-color: #1e3a5f; } /* Filter bar select */ [data-theme="dark"] select.form-select { color-scheme: dark; } /* Sidebar overlay */ [data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,.6); } /* Theme toggle button */ .theme-toggle-btn { background: var(--gray-100); border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; color: var(--gray-600); transition: background var(--transition), transform .2s; flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--gray-200); transform: rotate(20deg); } [data-theme="dark"] .theme-toggle-btn { background: #334155; color: #fbbf24; } [data-theme="dark"] .theme-toggle-btn:hover { background: #475569; }