/* * Dark-mode overrides for legacy Blade pages (Sneat/Bootstrap + DataTables). * * Sneat's own dark theme (core-dark.css / theme-default-dark.css) already exists and covers * general Bootstrap chrome (cards, buttons, forms) once enabled — see header-script.js, now wired * to the same `operate-theme` localStorage key the React nav island uses (previously it read a * separate, never-set `theme` key, so the dark stylesheets were built but never actually turned on * — that's why the sidebar could go dark while every legacy page's content stayed hard-coded * light). This file only covers what Sneat's dark theme does NOT reach: DataTables, which ships * its own CSS from a CDN (jquery.dataTables.css) plus per-page inline `!important` color overrides * (see e.g. resources/views/content/common/forms/index.blade.php) that predate any dark-mode * concept and need matching specificity to beat. * * Loaded last in (after @yield('page-style') in layouts/sections/styles.blade.php) so it * wins the cascade against every page's own DataTables CSS regardless of load order. * * Colors match resources/css/tokens.css's dark palette so legacy content reads as the same theme * as the React nav island, not a second, differently-toned dark mode. */ html.dark-style .dataTables_filter input, html.dark-style .dataTables_length select { background-color: #171b33 !important; /* --color-surface (dark) */ color: #eef1fb !important; /* --color-ink (dark) */ border-color: #2a2f52 !important; /* --color-border (dark) */ } html.dark-style .dataTables_filter label, html.dark-style .dataTables_length label, html.dark-style .dataTables_wrapper .dataTables_info { color: #9aa1c7 !important; /* --color-muted (dark) */ } html.dark-style table.dataTable tbody, html.dark-style table.dataTable td, html.dark-style table.dataTable tfoot, html.dark-style table.dataTable th, html.dark-style table.dataTable thead, html.dark-style table.dataTable tr, html.dark-style table.dataTable.no-footer { border-color: #2a2f52 !important; } html.dark-style table.dataTable, html.dark-style table.dataTable tbody tr { background-color: #171b33; color: #eef1fb; } html.dark-style table.dataTable tbody tr:hover { background-color: #1c2140; } html.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button { background-color: #1c2140 !important; border-color: #2a2f52 !important; color: #9aa1c7 !important; } html.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { background: #1c2140 !important; border-color: #2a2f52 !important; color: #5a6088 !important; } html.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, html.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) { background: #4353ff !important; /* --color-brand */ border-color: #4353ff !important; color: #ffffff !important; } html.dark-style .tooltip > .tooltip-inner { background-color: #171b33 !important; color: #eef1fb !important; border-color: #2a2f52 !important; }