/* |-------------------------------------------------------------------------- | Dark Mode — HRIS + REALS |-------------------------------------------------------------------------- | | Scoped under [data-bs-theme="dark"] on the element. | Loaded from layouts/partials/head.blade.php AFTER ui-fixes.css. | | Follows SB Admin Pro's colour palette and Bootstrap 5 conventions. | All rules use the attribute selector so dark mode is purely additive | and ZERO light-mode styles are affected. | */ /* ══════════════════════════════════════════════════════════ CSS CUSTOM PROPERTIES (dark palette) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { --dm-bg: #1a1d23; --dm-bg-surface: #212529; --dm-bg-card: #272b30; --dm-bg-elevated: #2c3036; --dm-bg-input: #2c3036; --dm-border: #373b40; --dm-border-light: #3a3f45; --dm-text: #dee2e6; --dm-text-muted: #9ca3ab; --dm-text-heading: #f8f9fa; --dm-link: #6ea8fe; --dm-link-hover: #9ec5fe; --dm-primary: #0d6efd; --dm-primary-soft: rgba(13, 110, 253, 0.15); --dm-success-soft: rgba(25, 135, 84, 0.15); --dm-danger-soft: rgba(220, 53, 69, 0.15); --dm-warning-soft: rgba(255, 193, 7, 0.15); --dm-info-soft: rgba(13, 202, 240, 0.15); --dm-shadow: rgba(0, 0, 0, 0.35); color-scheme: dark; } /* ══════════════════════════════════════════════════════════ BODY & BACKGROUND ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] body, [data-bs-theme="dark"] { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* ══════════════════════════════════════════════════════════ TOP NAVIGATION ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .topnav.navbar-light, [data-bs-theme="dark"] .topnav.bg-white { background-color: var(--dm-bg-surface) !important; border-bottom: 1px solid var(--dm-border); } [data-bs-theme="dark"] .topnav .navbar-brand { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .topnav .btn-transparent-dark, [data-bs-theme="dark"] .topnav .btn-icon { color: var(--dm-text) !important; } [data-bs-theme="dark"] .topnav .btn-transparent-dark:hover { background-color: var(--dm-bg-elevated) !important; } /* ══════════════════════════════════════════════════════════ DROPDOWN MENUS ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 20px var(--dm-shadow) !important; } [data-bs-theme="dark"] .dropdown-item { color: var(--dm-text) !important; } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dropdown-header { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dropdown-user-details-name { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dropdown-user-details-email { color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ SIDENAV (SB Admin Pro original .sidenav-light → dark) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .sidenav-light { background-color: var(--dm-bg-surface) !important; color: var(--dm-text) !important; border-right-color: var(--dm-border) !important; } [data-bs-theme="dark"] .sidenav-light .sidenav-menu .nav-link { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-light .sidenav-menu .nav-link:hover { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-light .sidenav-menu .nav-link.active { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-light .sidenav-menu .sidenav-menu-heading { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-light .sidenav-footer { background-color: var(--dm-bg-elevated) !important; } /* ══════════════════════════════════════════════════════════ SIDENAV V2 (custom redesigned sidenav) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .sidenav-v2 { background: var(--dm-bg-surface) !important; border-right-color: var(--dm-border) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-profile { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-profile-name { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-section-label { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-link { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-link:hover { background: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-link.sv2-active { background: var(--dm-primary-soft) !important; color: var(--dm-link) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-link-icon { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-link.sv2-active .sv2-link-icon, [data-bs-theme="dark"] .sidenav-v2 .sv2-link:hover .sv2-link-icon { color: var(--dm-link) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-collapse-toggle { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-collapse-toggle:hover { background: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-sub-toggle { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-sub-toggle:hover { background: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-switch-link { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-switch-link:hover { background: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } /* Footer area */ [data-bs-theme="dark"] .sidenav-v2 .sv2-footer { border-top-color: var(--dm-border) !important; background: var(--dm-bg-elevated) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-footer-name { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .sidenav-v2 .sv2-footer-email { color: var(--dm-text-muted) !important; } /* HRIS accent overrides for dark */ [data-bs-theme="dark"] .sidenav-v2--hris .sv2-link:hover { background: rgba(0, 121, 107, 0.15) !important; color: #4db6ac !important; } [data-bs-theme="dark"] .sidenav-v2--hris .sv2-link.sv2-active { background: rgba(0, 121, 107, 0.12) !important; color: #4db6ac !important; } [data-bs-theme="dark"] .sidenav-v2--hris .sv2-link.sv2-active .sv2-link-icon, [data-bs-theme="dark"] .sidenav-v2--hris .sv2-link:hover .sv2-link-icon { color: #4db6ac !important; } [data-bs-theme="dark"] .sidenav-v2--hris .sv2-sub-toggle:hover { background: rgba(0, 121, 107, 0.15) !important; color: #4db6ac !important; } [data-bs-theme="dark"] .sidenav-v2--hris .sv2-role-badge { background: rgba(0, 121, 107, 0.2) !important; color: #4db6ac !important; } /* ══════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .card-header { background-color: var(--dm-bg-elevated) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .card-footer { background-color: var(--dm-bg-elevated) !important; border-top-color: var(--dm-border) !important; } [data-bs-theme="dark"] .card-title { color: var(--dm-text-heading) !important; } /* ══════════════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .table, [data-bs-theme="dark"] .datatable-table { color: var(--dm-text) !important; --bs-table-bg: var(--dm-bg-card); --bs-table-striped-bg: var(--dm-bg-elevated); --bs-table-hover-bg: var(--dm-bg-elevated); --bs-table-border-color: var(--dm-border); } [data-bs-theme="dark"] .table th, [data-bs-theme="dark"] .datatable-table th { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .table td, [data-bs-theme="dark"] .datatable-table td { border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .table tbody tr:hover, [data-bs-theme="dark"] .datatable-table tbody tr:hover { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text) !important; } /* DataTables wrapper */ [data-bs-theme="dark"] .datatable-wrapper .datatable-top, [data-bs-theme="dark"] .datatable-wrapper .datatable-bottom { border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .datatable-wrapper .datatable-info { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .datatable-wrapper .datatable-input, [data-bs-theme="dark"] .datatable-wrapper .datatable-selector { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .datatable-wrapper .datatable-pagination .datatable-pagination-list-item-link { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .datatable-wrapper .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link { background-color: var(--dm-primary) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════ FORMS ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: var(--dm-primary) !important; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important; } [data-bs-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] label { color: var(--dm-text) !important; } [data-bs-theme="dark"] .form-text { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .input-group-text { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .form-check-input { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-light) !important; } [data-bs-theme="dark"] .form-check-input:checked { background-color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; } /* ══════════════════════════════════════════════════════════ MODALS ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .modal-content { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .modal-header { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .modal-header .modal-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-bs-theme="dark"] .modal-footer { border-top-color: var(--dm-border) !important; } [data-bs-theme="dark"] .modal-body { color: var(--dm-text) !important; } /* ══════════════════════════════════════════════════════════ BUTTONS — keep Bootstrap colors, darken outlines ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .btn-light { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .btn-outline-primary { color: var(--dm-link) !important; border-color: var(--dm-link) !important; } [data-bs-theme="dark"] .btn-outline-primary:hover { background-color: var(--dm-primary) !important; color: #fff !important; } [data-bs-theme="dark"] .btn-outline-danger:hover { color: #fff !important; } [data-bs-theme="dark"] .btn-white { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ══════════════════════════════════════════════════════════ BADGES — soften in dark mode ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .bg-light { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--dm-bg-card) !important; } /* ══════════════════════════════════════════════════════════ ALERTS ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .alert-success { background-color: var(--dm-success-soft) !important; border-color: rgba(25, 135, 84, 0.3) !important; color: #75b798 !important; } [data-bs-theme="dark"] .alert-danger { background-color: var(--dm-danger-soft) !important; border-color: rgba(220, 53, 69, 0.3) !important; color: #ea868f !important; } [data-bs-theme="dark"] .alert-warning { background-color: var(--dm-warning-soft) !important; border-color: rgba(255, 193, 7, 0.3) !important; color: #ffda6a !important; } [data-bs-theme="dark"] .alert-info { background-color: var(--dm-info-soft) !important; border-color: rgba(13, 202, 240, 0.3) !important; color: #6edff6 !important; } /* ══════════════════════════════════════════════════════════ BREADCRUMB ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .breadcrumb-item.active { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .breadcrumb-item a { color: var(--dm-link) !important; } /* ══════════════════════════════════════════════════════════ PAGE HEADER ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .page-header { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .page-header .page-header-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .page-header-dark { background-color: var(--dm-bg-surface) !important; } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .footer-admin { background-color: var(--dm-bg-surface) !important; border-top: 1px solid var(--dm-border) !important; color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ LINKS & TEXT ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sv2-link) { color: var(--dm-link); } [data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sv2-link):hover { color: var(--dm-link-hover); } [data-bs-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .text-dark { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3, [data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 { color: var(--dm-text-heading) !important; } /* ══════════════════════════════════════════════════════════ LIST GROUP ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .list-group-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .list-group-item-action:hover { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } /* ══════════════════════════════════════════════════════════ PAGINATION (Bootstrap) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .page-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; color: #fff !important; } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ NOTIFICATION BELL DROPDOWN ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] #navbarDropdownAlerts + .dropdown-menu { background-color: var(--dm-bg-card) !important; } /* ══════════════════════════════════════════════════════════ CHAT PANEL ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] #chatSlidePanel { background-color: var(--dm-bg-card) !important; border-left-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ══════════════════════════════════════════════════════════ SCROLLBAR (dark) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; } [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent !important; } /* ══════════════════════════════════════════════════════════ SWEETALERT2 (dark) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .swal2-popup { background: var(--dm-bg-card) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .swal2-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .swal2-html-container { color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ MOBILE CARDS (responsive card layouts used in HRIS/REALS) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .mobile-pagination .page-info { color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ SUBTLE BACKGROUNDS (Bootstrap 5.3 polyfills) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .bg-primary-subtle { background-color: var(--dm-primary-soft) !important; } [data-bs-theme="dark"] .bg-success-subtle { background-color: var(--dm-success-soft) !important; } [data-bs-theme="dark"] .bg-danger-subtle { background-color: var(--dm-danger-soft) !important; } [data-bs-theme="dark"] .bg-warning-subtle { background-color: var(--dm-warning-soft) !important; } [data-bs-theme="dark"] .bg-info-subtle { background-color: var(--dm-info-soft) !important; } [data-bs-theme="dark"] .bg-secondary-subtle { background-color: rgba(108, 117, 125, 0.15) !important; } [data-bs-theme="dark"] .bg-dark-subtle { background-color: var(--dm-bg-elevated) !important; } [data-bs-theme="dark"] .bg-body { background-color: var(--dm-bg) !important; } [data-bs-theme="dark"] .text-body-emphasis { color: var(--dm-text-heading) !important; } /* ══════════════════════════════════════════════════════════ NAV TABS & PILLS ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .nav-pills .nav-link.active { background-color: var(--dm-primary) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════ ACCORDION ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .accordion-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .accordion-button { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .accordion-body { background-color: var(--dm-bg-card) !important; } /* ══════════════════════════════════════════════════════════ BORDER UTILITIES ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .border { border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .border-bottom { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .border-top { border-top-color: var(--dm-border) !important; } [data-bs-theme="dark"] hr { border-color: var(--dm-border) !important; opacity: 0.5; } /* ══════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════════════════════ */ .theme-toggle-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; border: none; background: transparent; cursor: pointer; transition: background 0.2s ease; position: relative; } .theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.06); } [data-bs-theme="dark"] .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); } .theme-toggle-btn .theme-icon { width: 20px; height: 20px; transition: transform 0.3s ease, opacity 0.2s ease; } /* Light mode: show moon icon */ .theme-toggle-btn .icon-dark { display: block; } .theme-toggle-btn .icon-light { display: none; } /* Dark mode: show sun icon */ [data-bs-theme="dark"] .theme-toggle-btn .icon-dark { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .icon-light { display: block; } /* Sun icon — warm yellow in dark mode */ [data-bs-theme="dark"] .theme-toggle-btn .icon-light svg, [data-bs-theme="dark"] .theme-toggle-btn .icon-light .feather { color: #fbbf24 !important; } /* ══════════════════════════════════════════════════════════ HUB / MODULE CARDS (apps-hub-v2) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .apps-hub-v2 .ahv2-hero-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-hero-subtitle { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-search { background: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-search:focus { border-color: var(--dm-primary) !important; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-search-icon { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-card:hover { border-color: var(--dm-border-light) !important; box-shadow: 0 8px 24px var(--dm-shadow) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-card-label { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-card-desc { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-empty { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .apps-hub-v2 .ahv2-empty h5 { color: var(--dm-text) !important; } /* ══════════════════════════════════════════════════════════ PAGE HEADER (light variant + bg-white) — dark override ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .page-header.page-header-light, [data-bs-theme="dark"] .page-header.bg-white, [data-bs-theme="dark"] header.bg-white { background-color: var(--dm-bg-surface) !important; color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .page-header.page-header-light .page-header-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .page-header.page-header-light .page-header-title .page-header-icon { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .page-header .text-body { color: var(--dm-text-heading) !important; } /* ══════════════════════════════════════════════════════════ FEATHER ICONS — global white in dark mode ══════════════════════════════════════════════════════════ Icons inside gradient circles (.ahv2-card-icon) keep white via their own !important rule; this targets all other feather icons that inherit dark colours from the light theme. */ [data-bs-theme="dark"] svg.feather, [data-bs-theme="dark"] .feather { color: var(--dm-text) !important; } /* Keep white icons inside gradient icon circles */ [data-bs-theme="dark"] .ahv2-card-icon svg.feather, [data-bs-theme="dark"] .ahv2-card-icon .feather { color: #fff !important; } /* Keep topnav icons at text colour */ [data-bs-theme="dark"] .topnav svg.feather, [data-bs-theme="dark"] .topnav .feather { color: var(--dm-text) !important; } /* Keep sun icon yellow (override the global white) */ [data-bs-theme="dark"] .theme-toggle-btn .icon-light svg.feather, [data-bs-theme="dark"] .theme-toggle-btn .icon-light .feather { color: #fbbf24 !important; } /* Keep button icons inheriting their button colour */ [data-bs-theme="dark"] .btn svg.feather, [data-bs-theme="dark"] .btn .feather { color: inherit !important; } /* Keep badge/alert icons inheriting parent colour */ [data-bs-theme="dark"] .alert svg.feather, [data-bs-theme="dark"] .alert .feather, [data-bs-theme="dark"] .badge svg.feather, [data-bs-theme="dark"] .badge .feather { color: inherit !important; } /* Keep dropdown item icons inheriting parent colour */ [data-bs-theme="dark"] .dropdown-item-icon svg.feather, [data-bs-theme="dark"] .dropdown-item-icon .feather { color: inherit !important; } /* ══════════════════════════════════════════════════════════ TRANSITION — smooth colour changes ══════════════════════════════════════════════════════════ */ html[data-bs-theme] body, html[data-bs-theme] .topnav, html[data-bs-theme] .sidenav-v2, html[data-bs-theme] .sidenav-light, html[data-bs-theme] .card, html[data-bs-theme] .modal-content, html[data-bs-theme] .dropdown-menu, html[data-bs-theme] .footer-admin, html[data-bs-theme] .ahv2-card, html[data-bs-theme] .page-header { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ══════════════════════════════════════════════════════════ WORKFLOW TRACKER — dark mode ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .wf-tracker::before { background: var(--dm-border) !important; } [data-bs-theme="dark"] .wf-step-label { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .wf-step-sub { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .step-pending { background: var(--dm-border-light) !important; } [data-bs-theme="dark"] .track-link-card { background: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .track-link-card:hover { border-color: var(--dm-link) !important; background: var(--dm-primary-soft) !important; } [data-bs-theme="dark"] .section-divider { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .items-table-scroll { border-color: var(--dm-border) !important; } /* Sticky thead in dark mode */ [data-bs-theme="dark"] .items-table-scroll thead.position-sticky th, [data-bs-theme="dark"] thead.bg-light th { background-color: var(--dm-bg-elevated) !important; } /* Badge text-secondary visibility in dark mode */ [data-bs-theme="dark"] .badge.text-secondary { color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ PRINT — always light ══════════════════════════════════════════════════════════ */ @media print { [data-bs-theme="dark"] body { background: #fff !important; color: #212529 !important; } [data-bs-theme="dark"] .card { background: #fff !important; border-color: #dee2e6 !important; } [data-bs-theme="dark"] .table th, [data-bs-theme="dark"] .table td { color: #212529 !important; } } /* ══════════════════════════════════════════════════════════ REALS DASHBOARD — dark mode overrides ══════════════════════════════════════════════════════════ All custom dashboard classes use hardcoded #fff / light colours. Override them here for dark mode consistency. */ /* Stat Cards */ [data-bs-theme="dark"] .dash-stat-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-stat-value { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dash-stat-label { color: var(--dm-text-muted) !important; } /* Section Titles */ [data-bs-theme="dark"] .dash-section-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dash-section-title svg { color: var(--dm-link) !important; } /* Application Cards */ [data-bs-theme="dark"] .dash-app-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-app-card:hover { border-color: var(--dm-border-light) !important; box-shadow: 0 8px 30px var(--dm-shadow) !important; } [data-bs-theme="dark"] .dash-app-name { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dash-app-desc { color: var(--dm-text-muted) !important; } /* Chart Cards */ [data-bs-theme="dark"] .dash-chart-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-chart-title { color: var(--dm-text-heading) !important; } /* Summary Cards (Overview breakdown) */ [data-bs-theme="dark"] .dash-summary-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-summary-card:hover { box-shadow: 0 4px 18px var(--dm-shadow) !important; } [data-bs-theme="dark"] .dash-summary-header { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-summary-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dash-summary-label { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .dash-summary-val { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dash-summary-row { border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-summary-row.dash-summary-total { border-top-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-summary-icon svg { color: #fff !important; } /* News / Events / Announcements */ [data-bs-theme="dark"] .dash-news-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-news-item { border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-news-item:hover { background: var(--dm-bg-elevated) !important; } [data-bs-theme="dark"] .dash-news-title { color: var(--dm-text-heading) !important; } [data-bs-theme="dark"] .dash-news-text { color: var(--dm-text-muted) !important; } [data-bs-theme="dark"] .dash-news-date { color: var(--dm-text-muted) !important; } /* Quick Links */ [data-bs-theme="dark"] .dash-quick-link { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .dash-quick-link:hover { background: var(--dm-primary) !important; color: #fff !important; border-color: var(--dm-primary) !important; } /* Dashboard App Icon circles — keep white icons */ [data-bs-theme="dark"] .dash-app-icon svg, [data-bs-theme="dark"] .dash-stat-icon svg, [data-bs-theme="dark"] .dash-news-icon svg, [data-bs-theme="dark"] .dash-summary-icon svg { color: #fff !important; } /* Hero badge (glass effect) — keep as-is, just ensure text readability */ [data-bs-theme="dark"] .dash-badge { background: rgba(255,255,255,.12) !important; } /* btn-outline-dark in dark mode should invert */ [data-bs-theme="dark"] .btn-outline-dark { color: var(--dm-text) !important; border-color: var(--dm-border-light) !important; } [data-bs-theme="dark"] .btn-outline-dark:hover { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; border-color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════════════════ HRIS DASHBOARD — Quick Action Buttons ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .quick-action-btn { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .quick-action-btn:hover { border-color: var(--dm-primary) !important; color: var(--dm-link) !important; box-shadow: 0 4px 14px var(--dm-shadow) !important; } [data-bs-theme="dark"] .quick-action-btn .qa-label { color: inherit !important; } /* ══════════════════════════════════════════════════════════ HRIS DASHBOARD — Widget Cards (.dash-widget) ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .dash-widget { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .dash-widget .card-header { background: transparent !important; border-bottom-color: var(--dm-border) !important; } [data-bs-theme="dark"] .dash-widget .card-header h6 { color: var(--dm-text-heading) !important; } /* ══════════════════════════════════════════════════════════ HRIS DASHBOARD — Welcome Hero dark mode tweak ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .dash-welcome { background: linear-gradient(135deg, #0b5ed7 0%, #084298 60%, #052c65 100%) !important; } /* ══════════════════════════════════════════════════════════ EMPLOYEE DOCUMENTS — Search Results Dropdown ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .emp-search-results { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 12px var(--dm-shadow) !important; } [data-bs-theme="dark"] .emp-search-results .emp-search-item { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-bs-theme="dark"] .emp-search-results .emp-search-item:hover { background: var(--dm-primary-soft) !important; } /* ══════════════════════════════════════════════════════════ LEAVE CREDITS — Balance Bar ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .balance-bar { background: var(--dm-bg-elevated) !important; } /* ══════════════════════════════════════════════════════════ SUMMARY / STAT CARDS — Hover shadow in dark mode ══════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .summary-card:hover { box-shadow: 0 .25rem .75rem var(--dm-shadow) !important; } [data-bs-theme="dark"] .dash-stat-card:hover { box-shadow: 0 6px 20px var(--dm-shadow) !important; } /* table-light header in dark mode */ [data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] thead.table-light th { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-heading) !important; border-color: var(--dm-border) !important; }