/* Dark mode overrides for the v2 portal. Activated by [data-theme="dark"] on , set by js/theme-toggle.js and the early-init snippet in v2/components/head.php. Uses !important in a number of places because the app relies heavily on Bulma utility classes (has-background-white, has-text-grey-dark, etc.) and inline styles that would otherwise win the cascade. */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body, html[data-theme="dark"] .has-background-light { /* .has-background-light is used both on (most pages) and on inner wrapper divs (e.g. v2/index.php's .container-content.offset.has-background-light) - match the class generally, not just on body, or pages using the latter pattern keep a light panel in dark mode. */ background-color: #14171c !important; color: #e4e6eb; } /* Cards / panels */ html[data-theme="dark"] .box { background-color: #1f232b; color: #e4e6eb; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* Headings and common text-color utilities */ html[data-theme="dark"] .title, html[data-theme="dark"] .subtitle, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #f0f1f3 !important; } html[data-theme="dark"] .has-text-black, html[data-theme="dark"] .has-text-grey-dark, html[data-theme="dark"] .has-text-dark { color: #d4d6db !important; } html[data-theme="dark"] .has-text-grey { color: #9aa0aa !important; } html[data-theme="dark"] a:not(.button) { color: #78b3ff; } /* Top navbar (layout/navbar.php) and any other Bulma "white surface" chrome */ html[data-theme="dark"] .has-background-white { background-color: #1a1d23 !important; border-color: #30343c !important; } /* Sidebar (layout/sidebar.php) */ html[data-theme="dark"] #sidebar-main, html[data-theme="dark"] .sidebar { background-color: #15181e !important; border-color: #2a2d34 !important; } html[data-theme="dark"] .sidebar__item__link, html[data-theme="dark"] .sidebar__item__link.has-text-grey-dark { color: #cfd2d8 !important; } html[data-theme="dark"] .sidebar__item__link:hover { background-color: #262a32 !important; color: #ffffff !important; } html[data-theme="dark"] .sidebar__footer { background-color: #15181e !important; border-color: #2a2d34 !important; } html[data-theme="dark"] .sidebar-mobile-topbar { background-color: #1a1d23 !important; border-color: #30343c !important; } /* Forms */ html[data-theme="dark"] .input, html[data-theme="dark"] .textarea, html[data-theme="dark"] .select select { background-color: #262a32; border-color: #3a3f47; color: #e4e6eb; } html[data-theme="dark"] .input.is-static { background-color: transparent; color: #c7cad0; } html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] .textarea::placeholder { color: #7d838d; } html[data-theme="dark"] .label { color: #c7cad0 !important; } /* Tables */ html[data-theme="dark"] table.table { background-color: transparent; color: #e4e6eb; } html[data-theme="dark"] table.table thead th { color: #c7cad0; border-color: #333842; } html[data-theme="dark"] table.table td, html[data-theme="dark"] table.table tr { border-color: #2a2d34; } html[data-theme="dark"] .hover-grey:hover { background-color: #262a32 !important; } /* Breadcrumb */ html[data-theme="dark"] .breadcrumb a { color: #9ec5fe; } html[data-theme="dark"] .breadcrumb li.is-active a { color: #e4e6eb; } /* Tags and light-variant notifications/buttons */ html[data-theme="dark"] .tag.is-light { background-color: #2a2e36; color: #dfe1e6; } html[data-theme="dark"] .notification.is-light { background-color: #262a32; color: #e4e6eb; } /* Bulma's has-background-{colour}-light utility classes - used both on notifications/boxes AND as row-shading on tables (e.g. requests-list.php's Completed/overdue row highlighting). The stock pastel tints are unreadable on a dark page, so give each one a dark-appropriate equivalent that keeps the same colour meaning (success/warning/danger/info) but works on a dark background. */ html[data-theme="dark"] .has-background-success-light, html[data-theme="dark"] .notification.is-success.is-light { background-color: #16321f !important; color: #b9e6c4 !important; } html[data-theme="dark"] .has-background-warning-light, html[data-theme="dark"] .notification.is-warning.is-light { background-color: #3a2f10 !important; color: #f0d98a !important; } html[data-theme="dark"] .has-background-danger-light, html[data-theme="dark"] .notification.is-danger.is-light { background-color: #3a1a1a !important; color: #f5b8b8 !important; } html[data-theme="dark"] .has-background-info-light, html[data-theme="dark"] .notification.is-info.is-light { background-color: #122a3a !important; color: #a9d6f5 !important; } html[data-theme="dark"] .has-background-link-light { background-color: #16283a !important; color: #a9c8f5 !important; } /* Cancelled-row shading (requests-list.php) - light grey reads as washed-out on a dark page. */ html[data-theme="dark"] .row-cancelled { background-color: #2c2f36 !important; color: #c7cad0 !important; } html[data-theme="dark"] .button.is-light { background-color: #2a2e36; color: #e4e6eb; border-color: #3a3f47; } /* Modals */ html[data-theme="dark"] .modal-card-head, html[data-theme="dark"] .modal-card-body, html[data-theme="dark"] .modal-card-foot { background-color: #1f232b; color: #e4e6eb; border-color: #333842; } /* Theme toggle button in the top bar */ .theme-toggle-btn { cursor: pointer; border: none; background: transparent; font-size: 1.1rem; color: inherit; padding: 0 0.5rem; } html[data-theme="dark"] .theme-toggle-btn { color: #e4e6eb; }