/* * Dark mode (client task 15). The vendored Bootstrap predates data-bs-theme, * so this is a hand-written override sheet scoped under html.theme-dark — the * class an inline script sets from localStorage BEFORE first paint, so * a dark-mode visitor never sees a white flash. Loaded unconditionally; every * rule is inert without the class. * * The banner stays #201e1d in both modes (it is already dark by design), and * the brand red (#ec3013) is shared. Charts and the world map keep their own * colors — recoloring canvas/SVG output is not worth the drift. */ html.theme-dark body, html.theme-dark .main-content-wrapper { background-color: #141312; color: #d9d6d4; } html.theme-dark .main-container { background-color: #1c1a19; } /* Cards and their headers */ html.theme-dark .card { background-color: #242220; color: #d9d6d4; border-color: #38352f; } html.theme-dark .card-header { background-color: #242220; border-color: #38352f; color: #e6e3e0; } html.theme-dark .card-title, html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: #e6e3e0; } /* The second (menu) row of the header */ html.theme-dark .topnav { background-color: #201e1d; border-color: #38352f; } html.theme-dark .topnav .nav-link, html.theme-dark .topnav .nav-link i { color: #d9d6d4; } /* Hover red like light mode, in the brightened dark-readable red (see the link-hover note at the end of this sheet). */ html.theme-dark .topnav .nav-link:hover, html.theme-dark .topnav .nav-link:focus { color: #ff7a5c; } /* Text utilities that hardcode light-mode grays */ html.theme-dark .text-muted { color: #98928d !important; } html.theme-dark .text-dark { color: #d9d6d4 !important; } /* ...but a .badge that opts into .text-dark — the bg-warning "as user …" badge in the audit log, the amber coverage badge on /admin/scanmaterials — sits on a LIGHT badge fill that STAYS light in dark mode, so its text must stay dark or it reads near-white on yellow (client, 2026-08-01). More specific than the blanket rule above, so it wins the !important tie. */ html.theme-dark .badge.text-dark { color: #201e1d !important; } html.theme-dark .bg-light { background-color: #2c2a27 !important; } html.theme-dark .border, html.theme-dark .border-top, html.theme-dark .border-bottom { border-color: #38352f !important; } /* Tables (incl. DataTables) */ html.theme-dark .table { color: #d9d6d4; border-color: #38352f; --bs-table-bg: transparent; --bs-table-color: #d9d6d4; --bs-table-border-color: #38352f; --bs-table-striped-bg: #262421; --bs-table-striped-color: #d9d6d4; } html.theme-dark .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: #38352f; } html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #262421; color: #d9d6d4; } html.theme-dark .dataTables_wrapper, html.theme-dark .dataTables_info, html.theme-dark .dataTables_length, html.theme-dark .dataTables_filter { color: #d9d6d4; } /* Highlighted info rows (.table-info — e.g. the search report's "Found by AI" row): the light-blue variant paints its tint via an inset box-shadow on the cells, which survives the transparent cell backgrounds above and left near-white text sitting on a light-blue band (client catch). Repaint as a dark blue tint; !important because the variant writes per-cell channels. */ html.theme-dark .table-info, html.theme-dark .table-info > * { background-color: #1d3440 !important; box-shadow: none !important; color: #cfe4f0 !important; } /* List groups (the folder detail page's contents list): the 5.3 list-group resolves its own bg/color variables from the light :root, which showed a white list with black text inside dark cards (client catch). Transparent lets the card color through. */ html.theme-dark .list-group-item { background-color: transparent; color: #d9d6d4; border-color: #38352f; } /* Forms */ html.theme-dark .form-control, html.theme-dark .form-select, html.theme-dark textarea, html.theme-dark input[type="search"] { background-color: #2c2a27; border-color: #45413b; color: #e6e3e0; } html.theme-dark .form-control::placeholder { color: #8a847e; } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { background-color: #2c2a27; color: #e6e3e0; border-color: #ec3013; box-shadow: 0 0 0 0.25rem rgba(236, 48, 19, 0.2); } html.theme-dark .input-group-text { background-color: #2c2a27; border-color: #45413b; color: #d9d6d4; } /* Native