/* ============================================================ DARK-MODE.CSS Applied when has class "dark-mode" ============================================================ */ body.dark-mode { --fk-bg: #0f172a; --fk-card-bg: rgba(30, 41, 59, 0.72); --fk-border: rgba(96, 165, 250, 0.16); --fk-text: #e2e8f0; --fk-text-muted: #94a3b8; --fk-blue-light: rgba(59, 130, 246, 0.16); background: var(--fk-bg); } body.dark-mode .app-loading-screen { background: linear-gradient(135deg, #0f172a 0%, #111827 60%, #0b1120 100%); } body.dark-mode .login-page-wrapper { background: radial-gradient(circle at 15% 20%, rgba(59,130,246,0.12) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(124,58,237,0.14) 0%, transparent 45%), var(--fk-bg); } body.dark-mode .login-card { background: rgba(30,41,59,0.75); border-color: rgba(96,165,250,0.15); } body.dark-mode .form-control, body.dark-mode .form-select { background: #1e293b; color: #e2e8f0; border-color: #334155; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background: #1e293b; color: #e2e8f0; } body.dark-mode .form-floating > label { color: #94a3b8; } body.dark-mode .app-sidebar, body.dark-mode .app-topbar { background: rgba(15,23,42,0.85); border-color: rgba(96,165,250,0.14); } body.dark-mode .sidebar-brand { border-color: rgba(96,165,250,0.14); } body.dark-mode .sidebar-nav a.nav-link-item { color: #cbd5e1; } body.dark-mode .sidebar-nav a.nav-link-item:hover { background: rgba(59,130,246,0.15); color: #93c5fd; } body.dark-mode .sidebar-nav a.nav-link-item.active { color: #fff; } body.dark-mode .sidebar-footer { border-color: rgba(96,165,250,0.14); } body.dark-mode .glass-card, body.dark-mode .stat-card, body.dark-mode .section-card { background: var(--fk-card-bg); border-color: rgba(96,165,250,0.12); } body.dark-mode .topbar-search input { background: #1e293b; color: #e2e8f0; border-color: #334155; } body.dark-mode .icon-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } body.dark-mode .icon-btn:hover { background: rgba(59,130,246,0.18); } body.dark-mode .notif-dropdown, body.dark-mode .dropdown-menu { background: #1e293b; color: #e2e8f0; } body.dark-mode .notif-dropdown .notif-item:hover { background: rgba(59,130,246,0.15); } body.dark-mode .dropdown-item { color: #e2e8f0; } body.dark-mode .dropdown-item:hover { background: rgba(59,130,246,0.15); color:#fff; } body.dark-mode .table-fk thead th { background: rgba(59,130,246,0.14); color: #93c5fd; } body.dark-mode .table-fk tbody td { color: #e2e8f0; border-color: #334155; } body.dark-mode .table-fk tbody tr:hover { background: rgba(59,130,246,0.08); } body.dark-mode .dataTables_wrapper .dataTables_filter input, body.dark-mode .dataTables_wrapper .dataTables_length select { background: #1e293b; color: #e2e8f0; border-color: #334155; } body.dark-mode .dataTables_wrapper .dataTables_info, body.dark-mode .dataTables_wrapper .dataTables_paginate { color: #94a3b8 !important; } body.dark-mode table.dataTable tbody tr { background: transparent; } body.dark-mode .btn-fk-outline { background: #1e293b; border-color: #334155; color: #e2e8f0; } body.dark-mode .btn-fk-outline:hover { background: rgba(59,130,246,0.18); } body.dark-mode .dropzone { background: rgba(30,41,59,0.5); border-color: #334155; } body.dark-mode .toast-custom { background: #1e293b; color: #e2e8f0; } body.dark-mode .activity-feed-item { border-color: #334155; } body.dark-mode .activity-feed-item .act-icon { background: rgba(59,130,246,0.18); } body.dark-mode .global-spinner-overlay { background: rgba(15,23,42,0.7); } body.dark-mode code, body.dark-mode .login-demo-hint { background: rgba(59,130,246,0.16); color: #93c5fd; } body.dark-mode .badge-pending { background: rgba(245,158,11,0.15); color:#fbbf24; border-color: rgba(245,158,11,0.3); } body.dark-mode .badge-received { background: rgba(34,197,94,0.15); color:#4ade80; border-color: rgba(34,197,94,0.3); }