/* Dark mode overrides for elements that are specific to SONNAR and not covered by the template's themes/dark-layout.css. The theme is toggled by adding the `dark-layout` class to (see panels/navbar.blade.php). Palette: the same navy scale the template's dark-layout.css uses (so custom elements blend with cards, sidebar and tables) plus a jade green accent, which replaces the template's blue (#3366CC) and the light-mode brand green (#05642f, unreadable on navy). */ body.dark-layout { --dm-body: #262c49; /* page background */ --dm-surface: #10163a; /* cards, navbar, sidebar, modals, dropdowns */ --dm-surface-alt: #1a2049; /* table heads, input addons, hover rows, tiles */ --dm-table: #212744; /* template's table background */ --dm-input: #262c49; --dm-border: #414561; --dm-text: #c2c6dc; --dm-muted: #8b91b3; /* Accent: a jade green, slightly off the brand #05642f, which is too dark on navy and too neon when lightened. Text/links use the light tint, filled surfaces the deeper one. */ --dm-primary: #4fd1a5; --dm-primary-hover: #86e3c3; --dm-primary-solid: #12875f; --dm-primary-solid-hover: #17a273; --dm-primary-soft: rgba(79, 209, 165, 0.14); } body { color-scheme: light; } body.dark-layout { color-scheme: dark; color: var(--dm-text); } /* Highcharts 13 resolves its colors with CSS light-dark() and injects `.highcharts-container { color-scheme: light dark }`, which follows the OS preference. Pin it to the app theme instead (body prefix beats its specificity). */ body .highcharts-container { color-scheme: light; } body.dark-layout .highcharts-container { color-scheme: dark; } /* Theme toggle: colors.css gives .btn-flat-secondary a solid gray box on :focus, so the button stayed highlighted after clicking it (in both themes). */ nav.navbar.fixed-top #theme-toggle:focus, nav.navbar.fixed-top #theme-toggle:active { background-color: transparent; color: inherit !important; box-shadow: none; } nav.navbar.fixed-top #theme-toggle:hover { background-color: rgba(184, 194, 204, 0.15); } body.dark-layout nav.navbar.fixed-top #theme-toggle:hover { background-color: rgba(255, 255, 255, 0.08); } /* Typography, links and brand accents */ body.dark-layout h1, body.dark-layout h2, body.dark-layout h3, body.dark-layout h4, body.dark-layout h5, body.dark-layout h6, body.dark-layout .card-title, body.dark-layout label, body.dark-layout legend { color: var(--dm-text); } /* :not(.btn) so anchors styled as buttons (btn-danger, btn-success...) keep their own text color; this selector would otherwise out-specify them */ body.dark-layout a:not(.btn) { color: var(--dm-primary); } body.dark-layout a:not(.btn):hover, body.dark-layout a:not(.btn):focus { color: var(--dm-primary-hover); } body.dark-layout .btn, body.dark-layout .page-link, body.dark-layout .dropdown-item, body.dark-layout .nav-link, body.dark-layout .navigation a { text-decoration: none; } body.dark-layout .text-primary, body.dark-layout legend.text-primary, body.dark-layout .btn-flat-primary { color: var(--dm-primary) !important; } body.dark-layout .btn-flat-primary:hover { background-color: var(--dm-primary-soft); } body.dark-layout .text-dark { color: var(--dm-text) !important; } body.dark-layout .text-muted, body.dark-layout .text-secondary, body.dark-layout .form-text, body.dark-layout small.text-muted { color: var(--dm-muted) !important; } body.dark-layout .bg-white, body.dark-layout .bg-light { background-color: var(--dm-surface) !important; color: var(--dm-text); } body.dark-layout .border, body.dark-layout .border-top, body.dark-layout .border-bottom, body.dark-layout .border-left, body.dark-layout .border-right { border-color: var(--dm-border) !important; } body.dark-layout hr { border-color: var(--dm-border); } body.dark-layout pre, body.dark-layout code { background-color: #0b1030; color: var(--dm-text); } body.dark-layout .footer, body.dark-layout footer { color: var(--dm-muted); } /* Custom top navbar (nav.navbar.fixed-top) */ body.dark-layout nav.navbar.fixed-top.navbar-light { background-color: var(--dm-surface); box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35); } body.dark-layout nav.navbar.fixed-top .btn:not(.btn-primary) { color: var(--dm-text); } body.dark-layout .dropdown-menu { background-color: var(--dm-surface); border: 1px solid var(--dm-border); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4); } body.dark-layout .dropdown-item, body.dark-layout .dropdown-item-text { color: var(--dm-text); } /* colors.css styles items per toggle color (.btn-flat-secondary ~ .dropdown-menu .dropdown-item...) with a higher specificity, hence the longer selectors */ body.dark-layout .dropdown .dropdown-menu .dropdown-item:hover, body.dark-layout .dropdown .dropdown-menu .dropdown-item:focus { background-color: var(--dm-surface-alt); color: var(--dm-primary); } body.dark-layout .dropdown .dropdown-menu .dropdown-item.active, body.dark-layout .dropdown .dropdown-menu .dropdown-item:active { background-color: var(--dm-primary-solid); color: #fff; } body.dark-layout .dropdown-divider { border-color: var(--dm-border); } /* Buttons (colors.css forces btn-primary with !important, so these do too) */ body.dark-layout .btn-primary { background-color: var(--dm-primary-solid) !important; border-color: var(--dm-primary-solid) !important; color: #fff; } body.dark-layout .btn-primary:hover, body.dark-layout .btn-primary:not(:disabled):not(.disabled):active, body.dark-layout .btn-primary:not(:disabled):not(.disabled).active, body.dark-layout .show > .btn-primary.dropdown-toggle { background-color: var(--dm-primary-solid-hover) !important; border-color: var(--dm-primary-solid-hover) !important; color: #fff; } body.dark-layout .btn-primary:focus, body.dark-layout .btn-primary.focus { box-shadow: 0 0 0 0.2rem var(--dm-primary-soft); } body.dark-layout .btn-primary.disabled, body.dark-layout .btn-primary:disabled { background-color: #2c3253 !important; border-color: #3b4266 !important; color: #7d83a3; } body.dark-layout .btn-outline-primary { color: var(--dm-primary); border-color: var(--dm-primary); background-color: transparent; } body.dark-layout .btn-outline-primary:hover, body.dark-layout .btn-outline-primary:not(:disabled):not(.disabled):active, body.dark-layout .btn-outline-primary:not(:disabled):not(.disabled).active, body.dark-layout .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: var(--dm-primary-solid); border-color: var(--dm-primary-solid); } body.dark-layout .btn-outline-primary:focus, body.dark-layout .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem var(--dm-primary-soft); } body.dark-layout .btn-outline-primary.disabled, body.dark-layout .btn-outline-primary:disabled { color: var(--dm-muted); border-color: var(--dm-border); background-color: transparent; } /* btn-secondary stays light gray in dark mode (colors.css forces it with !important, so these overrides need !important too) */ body.dark-layout .btn-secondary { background-color: #3b4266 !important; border-color: #4f567a !important; color: #fff; } body.dark-layout .btn-secondary:hover, body.dark-layout .btn-secondary:not(:disabled):not(.disabled):active, body.dark-layout .btn-secondary:not(:disabled):not(.disabled).active, body.dark-layout .show > .btn-secondary.dropdown-toggle { background-color: #4f567a !important; border-color: #626a91 !important; color: #fff; box-shadow: none; } body.dark-layout .btn-secondary:focus, body.dark-layout .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(79, 86, 122, 0.5); } body.dark-layout .btn-secondary.disabled, body.dark-layout .btn-secondary:disabled { background-color: #2c3253 !important; border-color: #3b4266 !important; color: #7d83a3; } body.dark-layout .btn-outline-secondary { color: var(--dm-text); border-color: var(--dm-border); } body.dark-layout .btn-outline-secondary:hover { background-color: var(--dm-surface-alt); color: #fff; } body.dark-layout .btn-light, body.dark-layout .btn-outline-light { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } /* Tables */ body.dark-layout .table, body.dark-layout .table th, body.dark-layout .table td { color: var(--dm-text); border-color: var(--dm-border); } body.dark-layout .table thead th, body.dark-layout .table-light, body.dark-layout .table-light > th, body.dark-layout .table-light > td, body.dark-layout .thead-light th { background-color: var(--dm-surface-alt); color: var(--dm-text); border-color: var(--dm-border); } body.dark-layout .table tfoot th, body.dark-layout .table tfoot td { background-color: var(--dm-surface-alt); } body.dark-layout .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } body.dark-layout .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--dm-text); } body.dark-layout .table-bordered, body.dark-layout .table-bordered th, body.dark-layout .table-bordered td { border-color: var(--dm-border); } /* Forms */ body.dark-layout .form-control, body.dark-layout .custom-select, body.dark-layout select, body.dark-layout textarea, body.dark-layout select.form-control, body.dark-layout .modal .form-control, body.dark-layout .modal .custom-select { background-color: var(--dm-input); border: 1px solid var(--dm-border); color: var(--dm-text); } body.dark-layout .form-control:focus, body.dark-layout .custom-select:focus, body.dark-layout select:focus, body.dark-layout textarea:focus { background-color: var(--dm-input); border-color: var(--dm-primary); box-shadow: 0 0 0 0.2rem var(--dm-primary-soft); color: var(--dm-text); } body.dark-layout .form-control::placeholder, body.dark-layout textarea::placeholder { color: var(--dm-muted); opacity: 1; } body.dark-layout .form-control:disabled, body.dark-layout .form-control[readonly], body.dark-layout .custom-select:disabled { background-color: #1c2245; color: var(--dm-muted); } body.dark-layout .input-group-text { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } body.dark-layout .custom-control-label::before { background-color: var(--dm-input); border-color: var(--dm-border); } body.dark-layout .custom-control-input:checked ~ .custom-control-label::before, body.dark-layout .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--dm-primary-solid); border-color: var(--dm-primary-solid); } body.dark-layout input[type="checkbox"], body.dark-layout input[type="radio"] { accent-color: var(--dm-primary); } body.dark-layout .form-check-label, body.dark-layout .custom-control-label { color: var(--dm-text); } body.dark-layout .is-invalid, body.dark-layout .form-control.is-invalid { border-color: #ea5455; } body.dark-layout .invalid-feedback { color: #ff7b7c; } body.dark-layout .select2-container--default .select2-selection--single, body.dark-layout .select2-container--default .select2-selection--multiple { background-color: var(--dm-input); border-color: var(--dm-border); } body.dark-layout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text); } body.dark-layout .select2-container .select2-dropdown { border-color: var(--dm-border); } body.dark-layout .select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected=true], body.dark-layout .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--dm-primary-solid); color: #fff; } /* Navigation: tabs, pills, breadcrumbs, pagination (template uses blue here) */ body.dark-layout .nav-tabs { border-bottom-color: var(--dm-border); } body.dark-layout .nav-tabs .nav-link, body.dark-layout .nav .nav-item .nav-link { color: var(--dm-text); } body.dark-layout .nav-tabs .nav-link:hover, body.dark-layout .nav .nav-item .nav-link:hover { color: var(--dm-primary-hover); border-color: transparent; } body.dark-layout .nav-tabs .nav-link.active, body.dark-layout .nav .nav-item .nav-link.active { background-color: transparent; border-color: transparent transparent var(--dm-primary); color: var(--dm-primary); } body.dark-layout .nav-tabs .nav-link.active:after { background: var(--dm-primary) !important; } body.dark-layout .nav-pills .nav-item .nav-link.active { background-color: var(--dm-primary-solid); color: #fff; } body.dark-layout .breadcrumb .breadcrumb-item.active, body.dark-layout .breadcrumb .breadcrumb-item:not(.active) a:hover { color: var(--dm-primary); } body.dark-layout .page-link { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } body.dark-layout .page-link:hover { background-color: var(--dm-surface-alt); color: var(--dm-primary); } body.dark-layout .page-item.active .page-link, body.dark-layout .pagination:not([class*=pagination-]) .page-item.active .page-link, body.dark-layout .pagination:not([class*=pagination-]) .page-item.active .page-link:hover { background-color: var(--dm-primary-solid); border-color: var(--dm-primary-solid); color: #fff; } body.dark-layout .page-item.disabled .page-link { background-color: var(--dm-surface); color: var(--dm-muted); } /* Modals, lists, alerts, misc */ body.dark-layout .modal-content { background-color: var(--dm-surface); border: 1px solid var(--dm-border); color: var(--dm-text); } body.dark-layout .modal-header, body.dark-layout .modal-footer { border-color: var(--dm-border); } body.dark-layout .modal-header .close { color: var(--dm-text); text-shadow: none; opacity: 0.8; } body.dark-layout .list-group-item { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } body.dark-layout .list-group-item.active { background-color: var(--dm-primary-solid); border-color: var(--dm-primary-solid); color: #fff; } body.dark-layout .alert-light, body.dark-layout .alert-secondary { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } body.dark-layout .card { box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25); } body.dark-layout .card-header { border-bottom-color: var(--dm-border); } body.dark-layout .badge-light { background-color: var(--dm-surface-alt); color: var(--dm-text); } body.dark-layout .tooltip-inner { background-color: #0b1030; color: var(--dm-text); } body.dark-layout .popover { background-color: var(--dm-surface); border-color: var(--dm-border); } body.dark-layout .popover-body { color: var(--dm-text); } /* Views that hard-code light colors inline (attribute selectors are the only way to override an inline style without touching every blade) */ body.dark-layout [style*="background-color: #ffffff"], body.dark-layout [style*="background-color: #fff;"], body.dark-layout [style*="background-color:#fff"] { background-color: var(--dm-surface) !important; } body.dark-layout [style*="background-color: #dfdfdf"] { background-color: var(--dm-surface-alt) !important; } body.dark-layout [style*="#d1d3e2"], body.dark-layout [style*="#e3e6f0"], body.dark-layout [style*="border: 1px solid #ddd"], body.dark-layout [style*="border: 1px solid #eee"], body.dark-layout [style*="border-bottom: 1px solid #eee"], body.dark-layout [style*="border: 1px solid #000000"], body.dark-layout [style*="border: 1px solid #020202"] { border-color: var(--dm-border) !important; } body.dark-layout [style*="color: #333"], body.dark-layout [style*="color: #666"] { color: var(--dm-text) !important; } /* Third-party widgets loaded from CDN */ body.dark-layout .swal2-popup { background-color: var(--dm-surface); color: var(--dm-text); } body.dark-layout .swal2-title, body.dark-layout .swal2-html-container, body.dark-layout .swal2-content { color: var(--dm-text); } body.dark-layout .highcharts-background { fill: var(--dm-surface); } body.dark-layout .highcharts-title, body.dark-layout .highcharts-subtitle, body.dark-layout .highcharts-axis-labels text, body.dark-layout .highcharts-axis-title, body.dark-layout .highcharts-legend-item text, body.dark-layout .highcharts-data-label text { fill: var(--dm-text) !important; color: var(--dm-text) !important; } body.dark-layout .highcharts-grid-line { stroke: var(--dm-border); } body.dark-layout .highcharts-axis-line, body.dark-layout .highcharts-tick { stroke: var(--dm-border); } body.dark-layout .highcharts-tooltip-box { fill: var(--dm-surface-alt); stroke: var(--dm-border); } body.dark-layout .highcharts-tooltip text { fill: var(--dm-text); } /* Data labels ship with a white text outline (halo) that hides light text on dark charts */ body.dark-layout .highcharts-data-label text .highcharts-text-outline, body.dark-layout .highcharts-label text .highcharts-text-outline { stroke: var(--dm-surface) !important; } body.dark-layout .highcharts-contextbutton .highcharts-button-box { fill: var(--dm-surface-alt); } body.dark-layout .ui-widget-content, body.dark-layout .ui-widget-header { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } body.dark-layout .ui-state-default, body.dark-layout .ui-widget-content .ui-state-default { background: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } /* Sidebar: remove the white glow the template puts on the active item in the dark menu */ body.dark-layout .main-menu.menu-dark .navigation > li.active > a { box-shadow: none; background: linear-gradient(118deg, var(--dm-primary-solid), var(--dm-primary-solid-hover)); } body.dark-layout .main-menu.menu-dark .navigation > li ul .active { box-shadow: none; background: linear-gradient(118deg, var(--dm-primary-solid), #148c66); } body.dark-layout .main-menu.menu-dark .navigation > li ul .active > a { color: #fff; } /* Scrollbars follow the surface instead of the OS default gray */ body.dark-layout ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-layout ::-webkit-scrollbar-track { background: var(--dm-body); } body.dark-layout ::-webkit-scrollbar-thumb { background: var(--dm-border); border-radius: 5px; } body.dark-layout ::-webkit-scrollbar-thumb:hover { background: #555b80; }