/* ═══════════════════════════════════════════════════════════════════
   Bootstrap dark-mode bridge - TEMPORARY BY DESIGN.

   Bootstrap 5.3's data-bs-theme recolours its components (cards, tables,
   forms, dropdowns, modals) on its own. It deliberately does NOT flip
   .bg-light, .bg-white, .text-dark or .table-light, because those are
   fixed theme colours rather than semantic ones. This project uses them
   about 296 times across 142 templates, so without this file a dark page
   is covered in white patches.

   Every rule below is scoped to [data-theme="dark"] and is inert in light
   mode. Each one names the sweep that would let it be deleted; this file
   should shrink over time, not grow.

   Colour is never declared here - only referenced from df-tokens.css.
   Checked by tests/test_dark_compat_css.py.
   ═══════════════════════════════════════════════════════════════════ */

/* Delete when the templates stop using .bg-white / .bg-light for a card or
   panel surface and use the portal's own classes instead. */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light { background-color: var(--df-surface) !important; color: var(--df-ink); }

/* Delete with the .table-light table heads; portal.css styles thead on its
   own and the utility is redundant there. */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] thead.table-light th { background-color: var(--df-surface) !important; color: var(--df-ink) !important; border-color: var(--df-line) !important; }

/* .text-dark means "the readable text colour", which is what --df-ink is in
   either theme. Delete once the templates say so directly. */
[data-theme="dark"] .text-dark { color: var(--df-ink) !important; }
[data-theme="dark"] .text-muted { color: var(--df-ink-3) !important; }

/* The admin card headers. Flat accent in both themes (df-tokens.css already
   made the "gradient" flat); this only supplies the dark accent and the
   text colour that stays readable on it. */
[data-theme="dark"] .bg-gradient-primary { background: var(--df-accent-deep) !important; color: var(--df-on-status) !important; }
[data-theme="dark"] .bg-gradient-primary .text-white { color: var(--df-on-status) !important; }

/* Bootstrap's own surfaces that data-bs-theme sets from its greys rather
   than from ours, so a Bootstrap card and a portal card do not end up two
   different darks on the same screen. */
[data-theme="dark"] .card { background-color: var(--df-surface); border-color: var(--df-line); }
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas { background-color: var(--df-surface); border-color: var(--df-line); color: var(--df-ink); }
[data-theme="dark"] .list-group-item { background-color: var(--df-surface); border-color: var(--df-line); color: var(--df-ink); }
[data-theme="dark"] .border { border-color: var(--df-line) !important; }