/* ===== DARK THEME — CSS Variables ===== * Usage: data-theme="dark" on triggers dark mode. * All layout-level colors (sidebar, navbar, cards, tables, inputs) use variables. * Module-level blade files will progressively adopt --bg-page, --bg-card, --text-primary, etc. */ html[data-theme="dark"] { /* ── Page & Background ── */ --bg-page: #1a1d23; --bg-body: #1a1d23; /* ── Card & Surface ── */ --bg-card: #22272e; --bg-card-hover: #2a3139; --bg-surface: #22272e; --bg-surface-hover: #2a3139; --bg-elevated: #2a3139; --border-color: #363c44; --border-color-light: #2e343b; /* ── Text ── */ --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; --text-link: #58a6ff; /* ── Sidebar ── */ --bg-sidebar: #1c2128; --bg-sidebar-hover: #2a3139; --bg-sidebar-active: #2d333b; --text-sidebar: #c0cad5; --text-sidebar-active: #e6edf3; --sidebar-border: #363c44; --sidebar-header: #7a8899; /* ── Navbar ── */ --bg-navbar: #1c2128; --bg-navbar-hover: #2a3139; --text-navbar: #8b949e; --navbar-border: #363c44; /* ── Table ── */ --bg-table-header: #1c2128; --bg-table-row: #22272e; --bg-table-row-hover: #2a3139; --table-border: #363c44; --text-table: #e6edf3; --text-table-header: #8b949e; /* ── Input ── */ --bg-input: #1c2128; --bg-input-focus: #22272e; --border-input: #363c44; --border-input-focus: #d68f2b; --text-input: #e6edf3; --text-input-placeholder: #6e7681; /* ── Badge ── */ --bg-badge-red: #f85149; --text-badge-red: #ffffff; --bg-badge-orange: #d29922; --text-badge-orange: #ffffff; /* ── Stat Card ── */ --bg-stat-card: #22272e; --stat-icon-bg: #1a3a4a; --stat-label: #8b949e; --stat-value: #e6edf3; --stat-sublabel: #6e7681; /* ── Shadow ── */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.4); --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); /* ── Misc ── */ --bg-footer: #1c2128; --bg-filter-card: #22272e; --bg-page-header-icon: #1a3a4a; --page-header-icon-color: #d68f2b; --bg-dropdown: #22272e; --bg-dropdown-hover: #2a3139; --bg-divider: #363c44; --bg-modal: #22272e; --bg-flatpickr: #22272e; --bg-flatpickr-weekday: #007a8a; --bg-flatpickr-header: #007a8a; --text-flatpickr: #8b949e; --text-flatpickr-active: #ffffff; --border-flatpickr-today: #d68f2b; --bg-select2: #1c2128; --text-select2: #e6edf3; --bg-notif-hover: #2a3139; --bg-notif-title: #e6edf3; --bg-notif-desc: #8b949e; --bg-notif-time: #6e7681; } /* ── Apply dark theme variables ── */ html[data-theme="dark"] body { background-color: var(--bg-page) !important; } /* ── Sidebar Structure (sidenav-main, brand-sidebar, etc.) ── */ html[data-theme="dark"] .sidenav-main { background-color: var(--bg-sidebar) !important; border-right-color: var(--sidebar-border) !important; } html[data-theme="dark"] .brand-sidebar { background-color: var(--bg-sidebar) !important; border-bottom-color: var(--sidebar-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .brand-sidebar .logo-text { color: var(--text-sidebar-active) !important; } html[data-theme="dark"] .brand-sidebar .navbar-toggler i { color: var(--text-sidebar) !important; } html[data-theme="dark"] .brand-sidebar img { filter: brightness(0.9) !important; } html[data-theme="dark"] .navigation-background { background-color: var(--bg-sidebar) !important; } html[data-theme="dark"] .btn-sidenav-toggle { background-color: var(--bg-sidebar) !important; color: var(--text-sidebar) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .btn-sidenav-toggle:hover { background-color: var(--bg-sidebar-hover) !important; } html[data-theme="dark"] .sidenav-collapsible .collapsible-header { color: var(--text-sidebar) !important; } html[data-theme="dark"] .sidenav-collapsible .collapsible-header i { color: var(--text-sidebar) !important; } html[data-theme="dark"] .sidenav .collapsible-body { background-color: var(--bg-sidebar) !important; } /* ── Gradient bar (content-wrapper-before) ── */ html[data-theme="dark"] .content-wrapper-before { background: var(--bg-page) !important; } /* ── Content overlay (mobile sidenav backdrop) ── */ html[data-theme="dark"] .content-overlay { background-color: rgba(0, 0, 0, 0.5) !important; } /* ── Page topbar (header) ── */ html[data-theme="dark"] .page-topbar { background-color: var(--bg-navbar) !important; border-bottom-color: var(--navbar-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } /* ── Page footer ── */ html[data-theme="dark"] .page-footer, html[data-theme="dark"] .footer-copyright { background-color: var(--bg-footer) !important; border-top-color: var(--border-color) !important; } html[data-theme="dark"] .footer-copyright { color: var(--text-secondary) !important; } html[data-theme="dark"] .footer-copyright a { color: var(--page-header-icon-color, #d68f2b) !important; } /* ── Right sidebar (if used) ── */ html[data-theme="dark"] .sidenav-right { background-color: var(--bg-sidebar) !important; } html[data-theme="dark"] .card, html[data-theme="dark"] .card-panel { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-card) !important; } html[data-theme="dark"] .card .card-content { color: var(--text-primary) !important; } html[data-theme="dark"] .card-title { color: var(--text-primary) !important; } /* ── Stat cards ── */ html[data-theme="dark"] .stat-card { background: var(--bg-stat-card) !important; border-color: var(--border-color) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .stat-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .stat-card .stat-label { color: var(--stat-label) !important; } html[data-theme="dark"] .stat-card .stat-value { color: var(--stat-value) !important; } html[data-theme="dark"] .stat-card .stat-sublabel { color: var(--stat-sublabel) !important; } html[data-theme="dark"] .stat-card .stat-icon { background-color: var(--stat-icon-bg) !important; } /* ── Page header icon ── */ html[data-theme="dark"] .page-header-icon { background-color: var(--page-header-icon-bg, #1a3a4a) !important; color: var(--page-header-icon-color, #d68f2b) !important; } /* ── Table ── */ html[data-theme="dark"] table.dataTable thead th { background: var(--bg-table-header) !important; color: var(--text-table-header) !important; border-bottom-color: var(--table-border) !important; } html[data-theme="dark"] table.dataTable tbody td { color: var(--text-table) !important; border-bottom-color: var(--table-border) !important; } html[data-theme="dark"] table.dataTable tbody tr { background-color: var(--bg-table-row) !important; } html[data-theme="dark"] table.dataTable tbody tr:hover { background-color: var(--bg-table-row-hover) !important; } html[data-theme="dark"] table.dataTable.no-footer { border-bottom-color: var(--table-border) !important; } /* ── DataTables wrapper ── */ html[data-theme="dark"] .dataTables_wrapper .dataTables_length, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_processing, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--text-secondary) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #d68f2b !important; border-color: #d68f2b !important; } /* ── Input fields ── */ html[data-theme="dark"] .filter-card input[type=text]:not(.browser-default), html[data-theme="dark"] .filter-card select.browser-default { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-input) !important; } html[data-theme="dark"] .filter-card input[type=text]:not(.browser-default):focus, html[data-theme="dark"] .filter-card select.browser-default:focus { border-color: var(--border-input-focus) !important; } html[data-theme="dark"] .filter-card label { color: var(--text-secondary) !important; } html[data-theme="dark"] .filter-card { background: var(--bg-filter-card) !important; } /* ── Select2 ── */ html[data-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--bg-select2) !important; border-color: var(--border-input) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-select2) !important; } html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--border-input-focus) !important; } html[data-theme="dark"] .select2-dropdown { background: var(--bg-dropdown) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .select2-container--default .select2-search--field { background: var(--bg-input) !important; color: var(--text-input) !important; border-color: var(--border-input) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--text-primary) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #d68f2b !important; } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--bg-elevated) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--bg-select2) !important; border-color: var(--border-input) !important; color: var(--text-input) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #007a8a !important; border-color: #0097a7 !important; color: #ffffff !important; } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #ffffff !important; } html[data-theme="dark"] .select2-container .select2-search--inline .select2-search__field { color: var(--text-input) !important; } /* ── Dropdowns ── */ html[data-theme="dark"] .dropdown-content { background: var(--bg-dropdown) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-dropdown) !important; } html[data-theme="dark"] .dropdown-content li > a, html[data-theme="dark"] .dropdown-content li > span { color: var(--text-primary) !important; } html[data-theme="dark"] .dropdown-content li > a:hover, html[data-theme="dark"] .dropdown-content li > span:hover { background: var(--bg-dropdown-hover) !important; } html[data-theme="dark"] .dropdown-content li .divider { background-color: var(--bg-divider) !important; } /* ── Profile dropdown ── */ html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:hover, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:focus, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:active { color: var(--text-primary) !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:hover { background: var(--bg-dropdown-hover) !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger:hover { color: #f85149 !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger > i.material-icons { color: #f85149 !important; } /* ── Notifications dropdown ── */ html[data-theme="dark"] #notifications-dropdown li > a { border-bottom-color: var(--bg-divider) !important; } html[data-theme="dark"] #notifications-dropdown .notif-title { color: var(--bg-notif-title) !important; } html[data-theme="dark"] #notifications-dropdown .notif-desc { color: var(--bg-notif-desc) !important; } html[data-theme="dark"] #notifications-dropdown .notif-time { color: var(--bg-notif-time) !important; } html[data-theme="dark"] #notifications-dropdown li > h6 { border-bottom-color: var(--bg-divider) !important; background: var(--bg-surface) !important; color: var(--text-primary) !important; } html[data-theme="dark"] #notifications-dropdown li > a.view-all-btn { background: var(--bg-surface) !important; color: var(--text-link) !important; } html[data-theme="dark"] #notifications-dropdown .notif-icon { box-shadow: var(--shadow-sm) !important; } /* ── Navbar ── */ html[data-theme="dark"] .navbar nav { background-color: var(--bg-navbar) !important; } html[data-theme="dark"] .navbar nav .header-search-input { background: var(--bg-input) !important; color: var(--text-input) !important; } html[data-theme="dark"] .navbar nav i.material-icons, html[data-theme="dark"] .navbar nav .black-text, html[data-theme="dark"] .navbar nav .grey-text { color: var(--text-navbar) !important; } /* ── Sidebar ── */ html[data-theme="dark"] .sidenav { background-color: var(--bg-sidebar) !important; border-right-color: var(--sidebar-border) !important; } html[data-theme="dark"] .sidenav li > a { color: var(--text-sidebar) !important; } html[data-theme="dark"] .sidenav li > a:hover { background-color: var(--bg-sidebar-hover) !important; } html[data-theme="dark"] .sidenav .active>a { background-color: var(--bg-sidebar-active) !important; color: var(--text-sidebar-active) !important; } html[data-theme="dark"] .sidenav .navigation-header { color: var(--sidebar-header) !important; } html[data-theme="dark"] .sidenav li>a .material-icons { color: var(--text-sidebar) !important; } html[data-theme="dark"] .sidenav li>a.active .material-icons { color: var(--text-sidebar-active) !important; } /* ── Sidebar badge ── */ html[data-theme="dark"] .sidenav li>a span.badge.pill { background-color: var(--bg-badge-red) !important; color: var(--text-badge-red) !important; } /* ── Modal ── */ html[data-theme="dark"] .modal { background: var(--bg-modal) !important; box-shadow: var(--shadow-dropdown) !important; } html[data-theme="dark"] .modal .collection-item { background: var(--bg-modal) !important; } /* ── Switch account/role modal ── */ html[data-theme="dark"] #modal-switch-account, html[data-theme="dark"] #modal-switch-role { background-color: var(--bg-modal) !important; } html[data-theme="dark"] .switch-user-item { background: var(--bg-surface) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .switch-role-card { border-color: var(--border-color) !important; background: var(--bg-surface) !important; } html[data-theme="dark"] .switch-user-item:hover { background: var(--bg-surface-hover) !important; border-color: var(--text-link) !important; } html[data-theme="dark"] .switch-role-card:hover { background: var(--bg-surface-hover) !important; border-color: var(--bg-dropdown-hover) !important; } html[data-theme="dark"] .modal .modal-footer { background: var(--bg-modal) !important; } html[data-theme="dark"] #switch-account-search { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-input) !important; } html[data-theme="dark"] #switch-account-search:focus { border-color: var(--border-input-focus) !important; background: var(--bg-input-focus) !important; } /* ── Flatpickr ── */ html[data-theme="dark"] .flatpickr-calendar { background: var(--bg-flatpickr) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-dropdown) !important; } html[data-theme="dark"] .flatpickr-months { background: var(--bg-flatpickr-header) !important; } html[data-theme="dark"] .flatpickr-weekdays { background: var(--bg-flatpickr-weekday) !important; } html[data-theme="dark"] span.flatpickr-weekday { color: var(--text-flatpickr) !important; } html[data-theme="dark"] .flatpickr-day.selected, html[data-theme="dark"] .flatpickr-day.startRange, html[data-theme="dark"] .flatpickr-day.endRange { background: #d68f2b !important; border-color: #d68f2b !important; color: #ffffff !important; } html[data-theme="dark"] .flatpickr-day.today { border-color: #d68f2b !important; } html[data-theme="dark"] .flatpickr-day:hover, html[data-theme="dark"] .flatpickr-day.selected:hover { background: var(--bg-surface-hover) !important; } html[data-theme="dark"] .flatpickr-day.today:hover { background: #1a3a4a !important; color: #d68f2b !important; } html[data-theme="dark"] .flatpickr-day.inRange { background: var(--bg-elevated) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--text-flatpickr-active) !important; } html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text-flatpickr-active) !important; } html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option { color: var(--text-primary) !important; background: var(--bg-flatpickr) !important; } html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month { fill: var(--text-flatpickr-active) !important; color: var(--text-flatpickr-active) !important; } html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover { background: rgba(255, 255, 255, 0.1) !important; } /* ── Custom CSS overrides for dark mode ── */ /* Helper text */ html[data-theme="dark"] .input-field .helper-text { color: rgba(255, 255, 255, 0.4) !important; } html[data-theme="dark"] .error-msg { color: #f85149 !important; } /* DataTables — custom.css */ html[data-theme="dark"] table.dataTable thead th { color: #d68f2b !important; } html[data-theme="dark"] table.dataTable.no-footer { border-bottom-color: var(--border-color) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { border-bottom-color: var(--text-muted) !important; color: var(--text-input) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus { border-bottom-color: #d68f2b !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { border-color: var(--border-input) !important; color: var(--text-input) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus { border-color: #d68f2b !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-color: #d68f2b !important; background: #d68f2b !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #1a3a4a !important; border-color: #d68f2b !important; color: #d68f2b !important; } /* Select2 — custom.css */ html[data-theme="dark"] .select2-container--default .select2-selection--single { border-bottom-color: var(--text-muted) !important; } html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple, html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single { border-bottom-color: #d68f2b !important; } html[data-theme="dark"] .has-error .select2-selection { border-bottom-color: #f85149 !important; } html[data-theme="dark"] .user-role { color: var(--text-secondary) !important; } /* Rules approval */ html[data-theme="dark"] .level-card { background: var(--bg-surface) !important; border-color: var(--border-color) !important; } /* Level arrow */ html[data-theme="dark"] .level-arrow { color: var(--text-muted) !important; } /* Badge colors */ html[data-theme="dark"] .bg-badge-red { background-color: var(--bg-badge-red) !important; color: var(--text-badge-red) !important; } html[data-theme="dark"] .bg-badge-orange { background-color: var(--bg-badge-orange) !important; color: var(--text-badge-orange) !important; } /* Notification items */ html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:hover, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:focus, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:active { color: var(--text-primary) !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a:hover { background: linear-gradient(90deg, #2a3139 0%, #22272e 100%) !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li:first-child:hover { background: transparent !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a > i.material-icons { color: var(--text-secondary) !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li.divider { background-color: var(--bg-divider) !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger, html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger:hover { color: #f85149 !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger > i.material-icons { color: #f85149 !important; } html[data-theme="dark"] .navbar ul#profile-dropdown.dropdown-content li > a.pd-danger:hover { background: linear-gradient(90deg, #3d1f1f 0%, #22272e 100%) !important; } /* Switch role card hover */ html[data-theme="dark"] .switch-role-card:hover { border-color: #7986cb !important; background: #2a2d3e !important; } html[data-theme="dark"] .switch-role-card:hover i:last-child { color: #5c6bc0 !important; } /* Switch user item hover */ html[data-theme="dark"] .switch-user-item:hover { border-color: #90caf9 !important; background: #1a2a3a !important; } html[data-theme="dark"] .switch-user-item:hover i:last-child { color: #0288d1 !important; } /* Modal overrides */ html[data-theme="dark"] #modal-switch-account, html[data-theme="dark"] #modal-switch-role { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] #switch-account-search:focus { border-color: #0288d1 !important; background: var(--bg-input-focus) !important; } /* ── Smooth transition for theme toggle ── */ html.theme-transition *, html.theme-transition body, html.theme-transition .card, html.theme-transition .card-panel, html.theme-transition .sidenav, html.theme-transition .navbar nav, html.theme-transition .dropdown-content, html.theme-transition .modal, html.theme-transition table.dataTable thead th, html.theme-transition table.dataTable tbody td, html.theme-transition table.dataTable tbody tr, html.theme-transition input, html.theme-transition select, html.theme-transition .select2-container, html.theme-transition .flatpickr-calendar { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* ══════════════════════════════════════════ NAVBAR ICON ALIGNMENT (Light + Dark Mode) Override materialize.css: nav i { display:block; height:56px; line-height:56px } ══════════════════════════════════════════ */ /* TEST: nav#app-nav i overrides materialize's nav i specificity (1,1,0) vs (0,1,0) */ nav#app-nav i.material-icons, nav#app-nav .material-icons { display: inline-block !important; font-size: 24px !important; width: auto !important; height: auto !important; line-height: 1 !important; vertical-align: middle !important; margin: 0 !important; float: none !important; } .navbar .nav-wrapper .navbar-list.right > li > a i.material-icons { font-size: 24px !important; line-height: 1 !important; color: inherit !important; margin: 0 !important; width: auto !important; height: auto !important; float: none !important; position: relative !important; top: auto !important; vertical-align: middle !important; } .navbar .nav-wrapper .dark-mode-item .dark-mode-icon { font-size: 24px !important; } /* Notification badge */ .navbar .nav-wrapper .notification-badge { position: absolute !important; top: 8px !important; right: 2px !important; min-width: 17px !important; height: 17px !important; font-size: 0.6rem !important; font-weight: 700 !important; line-height: 17px !important; text-align: center !important; border-radius: 8px !important; padding: 0 3px !important; background: #f44336 !important; color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } /* Beat theme's .notification-button i { top: 12px; font-size: 29px } */ .navbar .nav-wrapper .notification-button i { position: relative !important; top: auto !important; font-size: 24px !important; line-height: 1 !important; } /* Beat theme's .search-button i { ... } and .toggle-fullscreen i */ .navbar .nav-wrapper .search-button i, .navbar .nav-wrapper .toggle-fullscreen i { position: relative !important; top: auto !important; font-size: 24px !important; line-height: 1 !important; } /* Beat theme's .profile-button styles */ .navbar .nav-wrapper .profile-button { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; padding: 0 10px !important; border-radius: 8px !important; transition: background-color 0.2s ease !important; } .navbar .nav-wrapper .profile-button:hover { background-color: rgba(84,110,122,0.08) !important; } /* Avatar — override theme's .avatar-status img { width:100%; height:auto } */ .navbar .nav-wrapper .avatar-status { display: flex !important; align-items: center !important; justify-content: center !important; } .navbar .nav-wrapper .navbar-list.right .avatar-status img { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; object-fit: cover !important; border-radius: 50% !important; border: 2px solid #eef0f2 !important; display: block !important; flex-shrink: 0 !important; background: transparent !important; } /* Dark mode — navbar icon colors */ html[data-theme="dark"] .navbar .nav-wrapper .navbar-list.right > li > a { color: var(--text-navbar, rgba(255,255,255,0.7)) !important; } html[data-theme="dark"] .navbar .nav-wrapper .navbar-list.right > li > a:hover { background-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .navbar .nav-wrapper .navbar-list.right > li > a i.material-icons { color: var(--text-navbar, rgba(255,255,255,0.7)) !important; } html[data-theme="dark"] .navbar .nav-wrapper .dark-mode-item .dark-mode-icon { font-size: 24px !important; } html[data-theme="dark"] .navbar .nav-wrapper .navbar-list.right .avatar-status img { border-color: rgba(255,255,255,0.12) !important; } html[data-theme="dark"] .navbar .header-search-wrapper i.material-icons { color: var(--text-navbar, rgba(255,255,255,0.5)) !important; } /* ══════════════════════════════════════════ NAVBAR ICON OVERRIDE (CRITICAL) materialize.css: nav i { display:block; height:56px; line-height:56px; font-size:24px } nav#app-nav i.material-icons = (1,1,0) specificity — BEATS materialize's (0,1,0) ══════════════════════════════════════════ */ /* ALL navbar icons — one rule to rule them all (warna diatur oleh skin clean light bar di panels/navbar.blade.php) */ nav#app-nav i.material-icons { display: inline-block !important; font-size: 24px !important; width: auto !important; height: auto !important; line-height: 1 !important; vertical-align: middle !important; margin: 0 !important; float: none !important; } /* notification badge positioning */ nav#app-nav .notification-badge { position: absolute !important; top: 4px !important; right: 0px !important; min-width: 17px !important; height: 17px !important; font-size: 0.6rem !important; font-weight: 700 !important; line-height: 17px !important; text-align: center !important; border-radius: 8px !important; padding: 0 3px !important; background: #f44336 !important; color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } /* profile avatar — beat theme's .avatar-status img { width:100%; height:auto } */ nav#app-nav .avatar-status { display: flex !important; align-items: center !important; justify-content: center !important; } nav#app-nav .avatar-status img { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; object-fit: cover !important; border-radius: 50% !important; border: 2px solid #eef0f2 !important; display: block !important; flex-shrink: 0 !important; background: transparent !important; } /* dark mode — all navbar icon colors */ html[data-theme="dark"] nav#app-nav i.material-icons { color: var(--text-navbar, #8b949e) !important; } html[data-theme="dark"] nav#app-nav .avatar-status img { border-color: var(--border-color, #363c44) !important; } html[data-theme="dark"] nav#app-nav .header-search-wrapper i.material-icons { color: var(--text-navbar, #8b949e) !important; } html[data-theme="dark"] .btn-filter-sleek, html[data-theme="dark"] .btn-ghost { background: #1e1e2e !important; border-color: #3d3d4d !important; color: #e0e0e0 !important; box-shadow: none !important; } html[data-theme="dark"] .btn-filter-sleek i, html[data-theme="dark"] .btn-ghost i { color: #90a4ae; } html[data-theme="dark"] .btn-filter-sleek:hover, html[data-theme="dark"] .btn-ghost:hover { background: #2d2d3d !important; } html[data-theme="dark"] .btn-filter-sleek.active-filter { background: var(--menu-accent, #d68f2b) !important; color: #fff !important; border-color: var(--menu-accent, #d68f2b) !important; } html[data-theme="dark"] .btn-filter-sleek.active-filter i { color: #fff; } html[data-theme="dark"] .btn-action.edit, html[data-theme="dark"] .action-btn.edit { background-color: rgba(245,124,0,0.14); color: #ffb74d; } html[data-theme="dark"] .btn-action.edit:hover, html[data-theme="dark"] .action-btn.edit:hover { background-color: #f57c00; color: #fff; } html[data-theme="dark"] .btn-action.delete, html[data-theme="dark"] .action-btn.delete { background-color: rgba(198,40,40,0.16); color: #ef9a9a; } html[data-theme="dark"] .btn-action.delete:hover, html[data-theme="dark"] .action-btn.delete:hover { background-color: #c62828; color: #fff; } html[data-theme="dark"] .btn-action.view, html[data-theme="dark"] .action-btn.view { background-color: rgba(21,101,192,0.18); color: #90caf9; } html[data-theme="dark"] .btn-action.view:hover, html[data-theme="dark"] .action-btn.view:hover { background-color: #1565c0; color: #fff; } html[data-theme="dark"] .btn-action.success, html[data-theme="dark"] .action-btn.success { background-color: rgba(46,125,50,0.20); color: #81c784; } html[data-theme="dark"] .btn-action.success:hover, html[data-theme="dark"] .action-btn.success:hover { background-color: #2e7d32; color: #fff; } html[data-theme="dark"] .btn-action.neutral, html[data-theme="dark"] .action-btn.neutral { background-color: rgba(96,125,139,0.20); color: #b0bec5; } html[data-theme="dark"] .btn-action[disabled], html[data-theme="dark"] .action-btn[disabled] { background-color: rgba(255,255,255,0.06); color: #555; } html[data-theme="dark"] .badge-status.status-draft { background: rgba(120,144,156,0.18); color: #b0bec5; } html[data-theme="dark"] .badge-status.status-submitted { background: rgba(230,81,0,0.20); color: #ffb74d; } html[data-theme="dark"] .badge-status.status-approved { background: rgba(46,125,50,0.22); color: #81c784; } html[data-theme="dark"] .badge-status.status-rejected { background: rgba(198,40,40,0.22); color: #ef9a9a; }