/* ========================================================== DARK MODE STYLES Activated by adding `data-theme="dark"` on element ========================================================== */ /* ---------- CSS Custom Properties (Dark Palette) ---------- */ [data-theme="dark"] { --dm-bg-primary: #1a1a2e; --dm-bg-secondary: #16213e; --dm-bg-surface: #1f2940; --dm-bg-elevated: #263450; --dm-text-primary: #e0e0e0; --dm-text-secondary: #a0aec0; --dm-text-muted: #718096; --dm-border: #2d3748; --dm-border-light: #374151; --dm-shadow: rgba(0, 0, 0, 0.4); --dm-link: #63b3ed; --dm-accent: #38bdf8; --dm-tosca: #20a4b2; --tosca: #20a4b2; } /* ---------- Base Elements ---------- */ [data-theme="dark"] body { background: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] a, [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: var(--dm-text-primary); } [data-theme="dark"] label { color: var(--dm-text-secondary) !important; } [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(--dm-text-primary) !important; } [data-theme="dark"] hr { border-color: var(--dm-border); } /* ---------- Navbar ---------- */ [data-theme="dark"] .navbar { background: var(--dm-bg-secondary) !important; box-shadow: 0 1px 4px var(--dm-shadow) !important; border-bottom: 1px solid var(--dm-border); } [data-theme="dark"] .navbar-btn { background-color: var(--dm-bg-surface) !important; } [data-theme="dark"] #sidebarCollapse span { background: var(--dm-text-secondary); } [data-theme="dark"] .acc-btn.btn-light { background-color: var(--dm-bg-surface) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } /* ---------- Sidebar ---------- */ [data-theme="dark"] #sidebar { background: var(--dm-bg-secondary) !important; color: var(--dm-text-primary) !important; border-right: 1px solid var(--dm-border); } [data-theme="dark"] #sidebar .sidebar-header { background: var(--dm-bg-secondary) !important; color: var(--dm-tosca) !important; } [data-theme="dark"] #sidebar ul li a { color: var(--dm-text-secondary) !important; border-bottom: 1px solid var(--dm-border) !important; } [data-theme="dark"] #sidebar ul li a:hover { color: var(--dm-accent) !important; background: var(--dm-bg-surface) !important; } [data-theme="dark"] #sidebar ul li.active > a { color: var(--dm-tosca) !important; background: var(--dm-bg-surface) !important; border-right: 5px solid var(--dm-tosca) !important; } [data-theme="dark"] a[aria-expanded="true"] { color: var(--dm-text-primary) !important; background: var(--dm-bg-surface) !important; } [data-theme="dark"] ul ul a { background: var(--dm-bg-secondary) !important; } /* ---------- Content Area ---------- */ [data-theme="dark"] #content { background: var(--dm-bg-primary); } [data-theme="dark"] .col-container { background-color: var(--dm-bg-surface) !important; box-shadow: 0 0 15px var(--dm-shadow) !important; color: var(--dm-text-primary); } [data-theme="dark"] .box-summary { background-color: var(--dm-bg-surface) !important; box-shadow: 5px 5px 15px var(--dm-shadow) !important; color: var(--dm-text-primary); } [data-theme="dark"] .date-range-box { background: var(--dm-bg-surface) !important; box-shadow: 5px 5px 15px var(--dm-shadow) !important; } /* ---------- Cards & Panels ---------- */ [data-theme="dark"] .card { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary); } [data-theme="dark"] .card-header { background-color: var(--dm-bg-elevated) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text-primary); } [data-theme="dark"] .card-body { color: var(--dm-text-primary); } [data-theme="dark"] .card-footer { background-color: var(--dm-bg-elevated) !important; border-top-color: var(--dm-border) !important; } /* ---------- Tables ---------- */ [data-theme="dark"] .table { color: var(--dm-text-primary) !important; --bs-table-bg: transparent; --bs-table-color: var(--dm-text-primary); } [data-theme="dark"] .table > thead > tr > th { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-secondary) !important; border-bottom: 2px solid var(--dm-border) !important; } [data-theme="dark"] .table > tbody > tr > td { border-bottom: 1px solid var(--dm-border) !important; color: var(--dm-text-primary); } [data-theme="dark"] table.dataTable tbody tr { border-color: var(--dm-border) !important; box-shadow: 0 0 10px 3px var(--dm-shadow) !important; background-color: var(--dm-bg-surface) !important; } [data-theme="dark"] table.dataTable tbody td { color: var(--dm-text-primary); } [data-theme="dark"] table.dataTable tbody td:first-child { border-color: var(--dm-border) !important; } [data-theme="dark"] table.dataTable tbody td:last-child { border-color: var(--dm-border) !important; } [data-theme="dark"] .table-light > tbody > tr { background-color: var(--dm-bg-surface) !important; } [data-theme="dark"] .table-light > tbody > tr > td { border-bottom: 1px solid var(--dm-border) !important; } [data-theme="dark"] .table-light > thead > tr > th { color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .row-selected { background-color: rgba(32, 164, 178, 0.15) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .dataTables_info { color: var(--dm-text-muted) !important; } [data-theme="dark"] .dataTables_filter input { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .dataTables_length select { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } /* ---------- Pagination ---------- */ [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background-color: transparent !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .pagination > li.active > a, [data-theme="dark"] .pagination > li.active > span { color: var(--dm-accent) !important; font-weight: bold; } [data-theme="dark"] .page-link { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .page-item.active .page-link { background-color: var(--dm-tosca) !important; border-color: var(--dm-tosca) !important; color: #fff !important; } /* ---------- Forms ---------- */ [data-theme="dark"] .form-control { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted) !important; } [data-theme="dark"] .form-control:focus { border-color: var(--dm-tosca) !important; box-shadow: 0 0 0 0.2rem rgba(32, 164, 178, 0.25) !important; } [data-theme="dark"] .form-select { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .input-group-text { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .form-check-input { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .form-check-input:checked { background-color: var(--dm-tosca) !important; border-color: var(--dm-tosca) !important; } [data-theme="dark"] textarea { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } /* ---------- Buttons ---------- */ [data-theme="dark"] .btn-primary { background-color: var(--dm-tosca) !important; border-color: var(--dm-tosca) !important; } [data-theme="dark"] .btn-outline-primary { border-color: var(--dm-tosca) !important; color: var(--dm-tosca) !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--dm-tosca) !important; color: #fff !important; } [data-theme="dark"] .btn-outline-secondary { border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .btn-light { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .btn-white { background: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .btn-navy { background-color: var(--dm-tosca) !important; color: white !important; } [data-theme="dark"] .btn-success { background-color: #22c55e !important; border-color: #22c55e !important; } [data-theme="dark"] .btn-danger { background-color: #ef4444 !important; border-color: #ef4444 !important; } [data-theme="dark"] .btn-warning { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #1a1a2e !important; } /* ---------- Modals ---------- */ [data-theme="dark"] .modal-content { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary); } [data-theme="dark"] .modal-header { background-color: var(--dm-bg-elevated) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .modal-footer { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7) !important; } [data-theme="dark"] .close { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .close:hover { color: var(--dm-text-primary) !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------- Dropdowns ---------- */ [data-theme="dark"] .dropdown-menu { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 12px var(--dm-shadow); } [data-theme="dark"] .dropdown-item { color: var(--dm-text-primary) !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .dropdown-divider { border-top-color: var(--dm-border) !important; } /* ---------- Bootstrap-select ---------- */ [data-theme="dark"] .bootstrap-select .dropdown-toggle { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bootstrap-select .dropdown-menu { background-color: var(--dm-bg-surface) !important; } [data-theme="dark"] .bootstrap-select .dropdown-menu .inner li a { color: var(--dm-text-primary) !important; } [data-theme="dark"] .bootstrap-select .dropdown-menu .inner li a:hover, [data-theme="dark"] .bootstrap-select .dropdown-menu .inner li.selected a { background-color: var(--dm-bg-elevated) !important; } /* ---------- Alerts ---------- */ [data-theme="dark"] .alert-info { background-color: rgba(56, 189, 248, 0.15) !important; border-color: rgba(56, 189, 248, 0.3) !important; color: #7dd3fc !important; } [data-theme="dark"] .alert-success { background-color: rgba(34, 197, 94, 0.15) !important; border-color: rgba(34, 197, 94, 0.3) !important; color: #86efac !important; } [data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #fcd34d !important; } [data-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #fca5a5 !important; } /* ---------- Badges ---------- */ [data-theme="dark"] .badge.bg-light { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .badge.bg-secondary { background-color: var(--dm-bg-elevated) !important; } /* ---------- Toasts ---------- */ [data-theme="dark"] .toast { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .toast-header { background-color: var(--dm-bg-surface) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } /* ---------- Box & Containers ---------- */ [data-theme="dark"] .box-white { background-color: var(--dm-bg-surface) !important; color: var(--dm-text-primary) !important; box-shadow: 0 0 15px var(--dm-shadow) !important; } [data-theme="dark"] .container-center { color: var(--dm-text-primary); } /* ---------- Login / Register ---------- */ [data-theme="dark"] .login-container { background-color: var(--dm-bg-primary); } /* ---------- Notification ---------- */ [data-theme="dark"] #notification { background: var(--dm-bg-surface) !important; box-shadow: 5px 5px 30px var(--dm-shadow) !important; color: var(--dm-text-primary); } /* ---------- Selected Items Info ---------- */ [data-theme="dark"] .selected-items-info { background: var(--dm-bg-elevated) !important; box-shadow: 5px 5px 30px var(--dm-shadow) !important; } /* ---------- MSC Confirm Dialog ---------- */ [data-theme="dark"] .msc-confirm { background-color: var(--dm-bg-surface) !important; color: var(--dm-text-primary) !important; } /* ---------- Datepicker ---------- */ [data-theme="dark"] .datepicker { background-color: var(--dm-bg-surface) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .datepicker table tr td, [data-theme="dark"] .datepicker table tr th { color: var(--dm-text-primary) !important; } [data-theme="dark"] .datepicker table tr td.active, [data-theme="dark"] .datepicker table tr td.active:hover { background-color: var(--dm-tosca) !important; color: white !important; } [data-theme="dark"] .datepicker table tr td:hover { background-color: var(--dm-bg-elevated) !important; } /* ---------- Scrollbar ---------- */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dm-bg-elevated) !important; } [data-theme="dark"] #content ::-webkit-scrollbar-thumb { background: var(--dm-border) !important; } /* ---------- Utility Text Colors ---------- */ [data-theme="dark"] .text-dark { color: var(--dm-text-primary) !important; } [data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } [data-theme="dark"] .text-navy { color: var(--dm-tosca) !important; } [data-theme="dark"] .text-blue { color: var(--dm-tosca) !important; } [data-theme="dark"] .text-gray { color: var(--dm-text-muted) !important; } [data-theme="dark"] .link_detail { color: var(--dm-tosca) !important; } /* ---------- Backgrounds ---------- */ [data-theme="dark"] .bg-white { background-color: var(--dm-bg-surface) !important; } [data-theme="dark"] .bg-light { background-color: var(--dm-bg-elevated) !important; } /* ---------- Borders ---------- */ [data-theme="dark"] .border { border-color: var(--dm-border) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .border-top { border-top-color: var(--dm-border) !important; } /* ---------- List Groups ---------- */ [data-theme="dark"] .list-group-item { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .list-group-item.active { background-color: var(--dm-tosca) !important; border-color: var(--dm-tosca) !important; } /* ---------- Dark Mode Toggle Button ---------- */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #dee2e6; background: #f8f9fa; cursor: pointer; transition: all 0.3s ease; font-size: 1.1rem; margin-right: 8px; padding: 0; } .dark-mode-toggle:hover { background: #e9ecef; transform: scale(1.05); } [data-theme="dark"] .dark-mode-toggle { background: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: #fbbf24 !important; } [data-theme="dark"] .dark-mode-toggle:hover { background: var(--dm-bg-surface) !important; } /* ---------- Smooth Transition ---------- */ html { transition: background-color 0.3s ease, color 0.3s ease; } html[data-theme="dark"] body, html[data-theme="dark"] .navbar, html[data-theme="dark"] #sidebar, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .card, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .dropdown-menu { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ---------- Logo invert for dark mode ---------- */ [data-theme="dark"] .logo-dashboard { filter: brightness(0) invert(1); }