/* =============================================================================
   theme.css — Falcron shared light/dark theme
   =============================================================================

   THIS FILE MUST BE LOADED LAST (after bootstrap, styles.css, styles-custom.css).

   ---------------------------------------------------------------------------
   HOW TO USE THIS WHEN YOU BUILD A NEW FEATURE
   ---------------------------------------------------------------------------
   Never write a raw colour like #fff / #f8f9fa / #212529 / #dee2e6 again.
   Use a token instead and the feature works in BOTH themes with no extra work:

     background: var(--fal-surface)            ... card / panel
     background: var(--fal-surface-raised)     ... modal, dropdown, table head
     background: var(--fal-surface-sunken)     ... page well, striped row
     background: var(--fal-surface-hover)      ... hover / active row
     background: var(--fal-surface-inset)      ... input / text field
     border: 1px solid var(--fal-border)       ... normal divider
     border: 1px solid var(--fal-border-strong)
     color: var(--fal-text)                    ... body text
     color: var(--fal-text-muted)              ... secondary text
     color: var(--fal-text-subtle)             ... hints, placeholders

   (No nested comment markers in this block on purpose: a stray comment
   terminator here silently kills the token definitions further down.)

   For coloured meaning (status pills, highlight rows) use Bootstrap's own
   auto-adapting trio — they already flip per theme:

     background: var(--bs-success-bg-subtle);
     border-color: var(--bs-success-border-subtle);
     color: var(--bs-success-text-emphasis);

   Shadows: var(--fal-shadow-sm) / --fal-shadow / --fal-shadow-lg
   (plain Bootstrap .shadow* utilities are re-pointed at these automatically).

   The one rule: if you need a colour that only exists in one theme, scope it
   with [data-bs-theme="dark"] — never with @media (prefers-color-scheme),
   because the user can override the OS setting from the topnav menu.
   ============================================================================= */


/* =============================================================================
   1. TOKENS — LIGHT (default)
   Values mirror what the app already looked like, so light mode is unchanged.
   ============================================================================= */
:root,
[data-bs-theme="light"] {
    --fal-surface: #ffffff;
    --fal-surface-raised: #ffffff;
    --fal-surface-sunken: #eceffa;
    --fal-surface-hover: #f1f3f9;
    --fal-surface-active: #e6eaf5;
    --fal-surface-inset: #f8f9fa;

    --fal-border: #cbd0dd;
    --fal-border-subtle: #e3e6ef;
    --fal-border-strong: #aeb5c7;

    --fal-text: #212529;
    --fal-text-muted: #525b75;
    --fal-text-subtle: #8a93a8;
    --fal-text-inverse: #ffffff;

    --fal-shadow-sm: 0 .125rem .25rem rgba(31, 41, 55, .09);
    --fal-shadow: 0 .35rem .9rem rgba(31, 41, 55, .11);
    --fal-shadow-lg: 0 1rem 2.5rem rgba(31, 41, 55, .16);

    /* Chrome (topnav + sidebar) is already dark in light mode — keep it. */
    --fal-chrome-bg: #222e3c;
    --fal-chrome-border: rgba(255, 255, 255, .08);

    --fal-overlay: rgba(0, 0, 0, .5);
    /* Translucent "loading" veil drawn over content while an iframe/panel loads.
       Hardcoding rgba(255,255,255,.8) here is a bright flash in dark mode. */
    --fal-scrim: rgba(255, 255, 255, .8);
    --fal-scrollbar-thumb: #b9c0d0;
    --fal-scrollbar-track: transparent;

    /* Emphasis wash used for "selected"/"today" style highlights. */
    --fal-accent-wash: rgba(13, 110, 253, .08);
    --fal-accent-wash-strong: rgba(13, 110, 253, .16);

    /* Neutral "lift this slightly above whatever surface it sits on" overlay,
       for hover rows, subtle wells and icon discs. It has to INVERT per theme:
       a rgba(0,0,0,.04) wash is completely invisible on a dark surface. Keep it
       translucent rather than a solid token so it composites over any surface. */
    --fal-wash: rgba(0, 0, 0, .04);
    --fal-wash-strong: rgba(0, 0, 0, .08);
}


/* =============================================================================
   2. TOKENS — DARK
   A slightly blue-tinted neutral scale that harmonises with the #222e3c chrome.
   Surfaces get lighter as they rise, which is what makes depth readable in dark.
   ============================================================================= */
[data-bs-theme="dark"] {
    --fal-surface: #1c222d;
    --fal-surface-raised: #232b38;
    --fal-surface-sunken: #141922;
    --fal-surface-hover: #2a3341;
    --fal-surface-active: #313c4c;
    --fal-surface-inset: #191f28;

    --fal-border: #333e4e;
    --fal-border-subtle: #28313d;
    --fal-border-strong: #475366;

    --fal-text: #e2e8f0;
    --fal-text-muted: #a3aec2;
    --fal-text-subtle: #7d8798;
    --fal-text-inverse: #131820;

    --fal-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .45);
    --fal-shadow: 0 .35rem .9rem rgba(0, 0, 0, .5);
    --fal-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, .6);

    --fal-chrome-bg: #1a2330;
    --fal-chrome-border: rgba(255, 255, 255, .07);

    --fal-overlay: rgba(0, 0, 0, .68);
    --fal-scrim: rgba(20, 25, 34, .82);
    --fal-scrollbar-thumb: #3d4859;
    --fal-scrollbar-track: transparent;

    --fal-accent-wash: rgba(110, 168, 254, .12);
    --fal-accent-wash-strong: rgba(110, 168, 254, .22);

    --fal-wash: rgba(255, 255, 255, .06);
    --fal-wash-strong: rgba(255, 255, 255, .11);
}


/* =============================================================================
   3. BOOTSTRAP VARIABLE BRIDGE
   Re-point Bootstrap's own variables at the tokens. This is what makes stock
   Bootstrap components (cards, modals, dropdowns, tables, forms, list-groups)
   correct in dark mode without touching a single view.

   styles.css declares --bs-body-bg / --bs-border-color on a bare :root, which
   would leak into dark mode, so both themes are restated explicitly here.
   ============================================================================= */
:root,
[data-bs-theme="light"] {
    --bs-body-bg: var(--fal-surface-sunken);
    --bs-body-color: var(--fal-text);
    --bs-border-color: var(--fal-border);
    --bs-border-color-translucent: rgba(203, 208, 221, .54);
    --bs-secondary-color: var(--fal-text-muted);
    --bs-tertiary-color: var(--fal-text-subtle);
    --bs-emphasis-color: #000;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg: var(--fal-surface-sunken);
    --bs-body-bg-rgb: 20, 25, 34;
    --bs-body-color: var(--fal-text);
    --bs-body-color-rgb: 226, 232, 240;

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: var(--fal-text-muted);
    --bs-secondary-color-rgb: 163, 174, 194;
    --bs-secondary-bg: var(--fal-surface-raised);
    --bs-secondary-bg-rgb: 35, 43, 56;

    --bs-tertiary-color: var(--fal-text-subtle);
    --bs-tertiary-color-rgb: 125, 135, 152;
    --bs-tertiary-bg: var(--fal-surface-hover);
    --bs-tertiary-bg-rgb: 42, 51, 65;

    --bs-border-color: var(--fal-border);
    --bs-border-color-translucent: rgba(255, 255, 255, .13);

    --bs-heading-color: inherit;
    --bs-link-color: #7db3ff;
    --bs-link-color-rgb: 125, 179, 255;
    --bs-link-hover-color: #a4caff;
    --bs-link-hover-color-rgb: 164, 202, 255;
    --bs-code-color: #e98fbe;
    --bs-highlight-bg: #4a3d12;
    --bs-highlight-color: var(--fal-text);

    /* styles.css overrides the brand accents on :root; the bright mint/cyan
       read well on dark, but success needs a touch more depth for white text. */
    --bs-success: #35d47f;
    --bs-success-rgb: 53, 212, 127;

    /* Subtle trio — Bootstrap's stock dark values are near-black and vanish
       against our surfaces, so they are lifted to sit just above --fal-surface. */
    --bs-primary-bg-subtle: #14263f;
    --bs-primary-border-subtle: #1f4a80;
    --bs-primary-text-emphasis: #8fbaff;

    --bs-secondary-bg-subtle: #21262f;
    --bs-secondary-border-subtle: #3a4250;
    --bs-secondary-text-emphasis: #b0b9c7;

    --bs-success-bg-subtle: #10301f;
    --bs-success-border-subtle: #1c5c3a;
    --bs-success-text-emphasis: #6fdda2;

    --bs-info-bg-subtle: #0d2c33;
    --bs-info-border-subtle: #17545f;
    --bs-info-text-emphasis: #7ee0ed;

    --bs-warning-bg-subtle: #38290a;
    --bs-warning-border-subtle: #6b4f11;
    --bs-warning-text-emphasis: #f5cf72;

    --bs-danger-bg-subtle: #3b1519;
    --bs-danger-border-subtle: #7a2630;
    --bs-danger-text-emphasis: #ff9ba3;

    --bs-light-bg-subtle: var(--fal-surface-raised);
    --bs-light-border-subtle: var(--fal-border);
    --bs-light-text-emphasis: var(--fal-text);

    --bs-dark-bg-subtle: var(--fal-surface-inset);
    --bs-dark-border-subtle: var(--fal-border-subtle);
    --bs-dark-text-emphasis: var(--fal-text-muted);

    --bs-form-valid-color: #6fdda2;
    --bs-form-valid-border-color: #35d47f;
    --bs-form-invalid-color: #ff9ba3;
    --bs-form-invalid-border-color: #e8636f;
}

/* styles-custom.css pins `[data-bs-theme=dark] body` to pure black with
   !important. Pure black collapses the surface hierarchy (cards stop reading as
   raised) and is harsh on large screens, so the token wins instead. */
[data-bs-theme="dark"] body {
    background-color: var(--fal-surface-sunken) !important;
    color: var(--fal-text);
}

/* Keep native widgets (scrollbars, date pickers, spinners) in step.
   styles-custom.css pins `input { color-scheme: light !important }`, which
   forces white date/number pickers — undo it per theme. */
[data-bs-theme="light"] input,
[data-bs-theme="light"] select,
[data-bs-theme="light"] textarea {
    color-scheme: light !important;
}

[data-bs-theme="dark"] input,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
    color-scheme: dark !important;
}


/* =============================================================================
   4. UTILITY-CLASS REMAP
   ~360 views say bg-white / bg-light / text-dark / border-light because they
   were written light-only. Rather than editing every view, the utilities are
   redefined in dark to mean "the themed equivalent". Bootstrap declares these
   with !important, so the overrides must too.
   ============================================================================= */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--fal-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--fal-surface-raised) !important;
}

[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--fal-surface-sunken) !important;
}

[data-bs-theme="dark"] .bg-body-secondary {
    background-color: var(--fal-surface-raised) !important;
}

[data-bs-theme="dark"] .bg-dark {
    background-color: var(--fal-surface-inset) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .text-light,
[data-bs-theme="dark"] .text-white {
    color: var(--fal-text) !important;
}

/* Undtagelse til remappen ovenfor. Info-ikonet ved fx "Afvist" er en fa-stack: et
   fyldt kvadrat med et "i" ovenpaa, og "i"-et er markeret .text-white i markup'en
   fem steder (salery/Index, salery/DrivingRecord_Content, tre Absence-views).
   Kvadratet arvede tekstfarven - moerkt i light, LYST i dark - og med et hvidt "i"
   ovenpaa blev det en hvid klods uden synligt ikon.

   Reglen SKAL ligge her og ikke i styles.css: den vejer det samme som remappen
   ovenfor (0,2,0), og theme.css indlaeses sidst, saa en kopi i styles.css taber
   paa raekkefoelge - praecis det der skete foerste gang. Uden [data-bs-theme]-
   praefiks gaelder den begge temaer, saa lagene bytter plads med temaet og light
   mode ser ud som foer. */
.log-info-icon .fa-stack-2x {
    color: var(--fal-text);
}

.log-info-icon .fa-stack-1x {
    color: var(--fal-surface) !important;
}


/* Deadline-markeringer paa projekt- og opgavekort (.due-date-*). Begge farver er
   valgt til hvid baggrund - kommentaren ved den gule siger det ligefrem - og de
   staar hardkodet i to views (Project/OpenProject, Task/ListTasksOverview). Paa en
   moerk kortflade (#1c222d) falder den roede til 3,52:1, altsaa under WCAGs 4,5:1.
   Temaets egne *-text-emphasis loefter den til 7,96:1 og den gule fra 6,52 til
   10,68:1. Reglen bor her og ikke i de to views: samme klasse, ET sted, og light
   mode roeres ikke. */
[data-bs-theme="dark"] .due-date-overdue {
    color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .due-date-today {
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
    color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .text-body {
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start {
    border-color: var(--fal-border) !important;
}

[data-bs-theme="dark"] .border-light {
    border-color: var(--fal-border) !important;
}

[data-bs-theme="dark"] .border-dark,
[data-bs-theme="dark"] .border-white {
    border-color: var(--fal-border-strong) !important;
}

[data-bs-theme="dark"] .shadow-sm {
    box-shadow: var(--fal-shadow-sm) !important;
}

[data-bs-theme="dark"] .shadow {
    box-shadow: var(--fal-shadow) !important;
}

[data-bs-theme="dark"] .shadow-lg {
    box-shadow: var(--fal-shadow-lg) !important;
}

/* text-white / text-light must stay white on top of a solid coloured or
   chrome surface — the remap above would grey them out. */
[data-bs-theme="dark"] .bg-primary .text-white,
[data-bs-theme="dark"] .bg-secondary .text-white,
[data-bs-theme="dark"] .bg-success .text-white,
[data-bs-theme="dark"] .bg-danger .text-white,
[data-bs-theme="dark"] .bg-info .text-white,
[data-bs-theme="dark"] .bg-warning .text-white,
[data-bs-theme="dark"] .btn .text-white,
[data-bs-theme="dark"] .badge .text-white,
[data-bs-theme="dark"] .sb-topnav .text-white,
[data-bs-theme="dark"] .sb-topnav .text-light,
[data-bs-theme="dark"] .sb-sidenav .text-light,
[data-bs-theme="dark"] .sb-sidenav .text-white,
[data-bs-theme="dark"] .alert-primary .text-white,
[data-bs-theme="dark"] .card-header.bg-primary .text-white {
    color: #ffffff !important;
}

/* Same story in reverse: .text-dark must STAY dark when it sits on a surface
   that is still genuinely light in dark mode. That means the bright accents
   (warning/info stay yellow/cyan) and .text-bg-light (Bootstrap keeps --bs-light
   light in dark mode) — but NOT .bg-light, which the remap above turns into a
   dark raised surface, so dark text on it would be unreadable. */
[data-bs-theme="dark"] .bg-warning .text-dark,
[data-bs-theme="dark"] .bg-info .text-dark,
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .bg-info.text-dark,
[data-bs-theme="dark"] .text-bg-warning,
[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .text-bg-light,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-info {
    color: #131820 !important;
}

/* .bg-light is a dark surface here, so anything asking for dark text on it
   needs the themed text colour instead. */
[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-white.text-dark,
[data-bs-theme="dark"] .bg-white .text-dark {
    color: var(--fal-text) !important;
}

/* styles.css overrides --bs-success with a bright mint (#4BEB8F) and --bs-info
   with a bright cyan, but the solid-fill utilities still pair them with white
   text — 1.9:1, unreadable, and wrong in light mode too (a pre-existing bug,
   not a dark-mode one). Bright fills take dark text, exactly like .bg-warning
   already does. Applied in both themes so the two stay consistent and a new
   feature only has to be designed once. */
.bg-success,
.badge.bg-success,
.text-bg-success,
.bg-info,
.badge.bg-info,
.text-bg-info {
    color: #131820 !important;
}

.bg-success a:not(.btn),
.text-bg-success a:not(.btn),
.bg-info a:not(.btn),
.text-bg-info a:not(.btn) {
    color: #131820;
}

/* Et badge med lys fyld beholder sin egen moerke skrift, ogsaa naar det ligger
   INDE i en flade som dark mode har vendt om.

   Kollisionen: `.bg-white .text-dark` ovenfor (0,3,0) og `.badge.bg-info` (0,3,0)
   vejer praecis lige meget, saa den senest deklarerede vandt — og det er
   flade-reglen. Resultatet var hvid skrift paa et lyst cyan badge, fx
   Projekt-mærket i Uge-tidsregistrering, hvor fanens indhold er .bg-white.

   Loesningen er ikke at flytte reglerne rundt (raekkefoelgen er meningsfuld som
   den er), men at goere badge-undtagelsen tungere: klassen der BAERER fyldet skal
   veje mere end den flade den tilfaeldigvis ligger paa. */
[data-bs-theme="dark"] .badge.bg-info.text-dark,
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-success.text-dark {
    color: #131820 !important;
}

/* `.bg` is the app's own panel class (816 uses). styles-custom.css already
   themes it; this just retargets dark at the surface token so panels sit
   correctly above the page background. */
[data-bs-theme="dark"] .bg {
    --bs-bg-opacity: 1;
    background-color: var(--fal-surface) !important;
}


/* =============================================================================
   4b. ROW / CELL TINTS  —  "this row is special"
   =============================================================================

   Highlighting a table row by hand is the one thing that CANNOT be ported to
   dark mode by remapping a utility class, because the light-mode idiom is
   "a nearly-white background with a hint of hue" (#fffbea, #fff8e1, #d4edda...).
   Reused verbatim on a dark table that becomes a glaring bright band.

   The dark equivalent of a pale tint is a DARK tint: the same hue, but darker
   than the surface it sits on rather than lighter. These tokens hold both, so
   one declaration covers both themes:

       tr.my-flagged-row { background-color: var(--fal-tint-warning); }
       tr.my-flagged-row:hover { background-color: var(--fal-tint-warning-hover); }

   or just use the ready-made classes on the <tr>:

       <tr class="fal-row-warning">   ... also -info -success -danger -neutral -purple

   Light values match what the app already used, so light mode is unchanged.
   All tints keep var(--fal-text) above 10:1, so text needs no special casing.
   ============================================================================= */
:root,
[data-bs-theme="light"] {
    --fal-tint-warning: #fffbea;
    --fal-tint-warning-hover: #fff3cd;
    --fal-tint-info: #eef6ff;
    --fal-tint-info-hover: #dfeafc;
    --fal-tint-success: #eefaf3;
    --fal-tint-success-hover: #d9f0e4;
    --fal-tint-danger: #fff5f5;
    --fal-tint-danger-hover: #fde8e8;
    --fal-tint-neutral: #f6f7fb;
    --fal-tint-neutral-hover: #edeff5;
    --fal-tint-purple: #f0edf9;
    --fal-tint-purple-hover: #e5e0f3;

    /* Matching text colour for each tint. A tint and a hardcoded dark text
       colour is the single most common dark-mode bug in this codebase: the
       background flips dark but the text stays dark. Always pair them. */
    --fal-tint-warning-text: var(--bs-warning-text-emphasis);
    --fal-tint-info-text: var(--bs-info-text-emphasis);
    --fal-tint-success-text: var(--bs-success-text-emphasis);
    --fal-tint-danger-text: var(--bs-danger-text-emphasis);
    --fal-tint-neutral-text: var(--fal-text);
    --fal-tint-purple-text: #4c3a91;
}

[data-bs-theme="dark"] {
    --fal-tint-warning: #332a12;
    --fal-tint-warning-hover: #3f3418;
    --fal-tint-info: #16283c;
    --fal-tint-info-hover: #1c334b;
    --fal-tint-success: #132d20;
    --fal-tint-success-hover: #193a2a;
    --fal-tint-danger: #33191b;
    --fal-tint-danger-hover: #412023;
    --fal-tint-neutral: #242b37;
    --fal-tint-neutral-hover: #2c3441;
    --fal-tint-purple: #252039;
    --fal-tint-purple-hover: #2e2847;

    --fal-tint-purple-text: #b9a9f0;
    /* the other -text tokens inherit the auto-adapting Bootstrap emphasis values */
}

/* Ready-made row classes. Declared for tr AND its cells: this project's
   styles.css paints table cells with `box-shadow: inset 0 0 0 9999px
   var(--bs-table-accent-bg)`, so a striped or hovered cell would otherwise
   overpaint a background set only on the tr. Setting --bs-table-accent-bg
   instead makes the tint compose correctly with striping and hover. */
.fal-row-warning > *,
.fal-row-info > *,
.fal-row-success > *,
.fal-row-danger > *,
.fal-row-neutral > *,
.fal-row-purple > * {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state: transparent;
}

.fal-row-warning { background-color: var(--fal-tint-warning); }
.fal-row-info { background-color: var(--fal-tint-info); }
.fal-row-success { background-color: var(--fal-tint-success); }
.fal-row-danger { background-color: var(--fal-tint-danger); }
.fal-row-neutral { background-color: var(--fal-tint-neutral); }
.fal-row-purple { background-color: var(--fal-tint-purple); }

.table-hover > tbody > tr.fal-row-warning:hover { background-color: var(--fal-tint-warning-hover); }
.table-hover > tbody > tr.fal-row-info:hover { background-color: var(--fal-tint-info-hover); }
.table-hover > tbody > tr.fal-row-success:hover { background-color: var(--fal-tint-success-hover); }
.table-hover > tbody > tr.fal-row-danger:hover { background-color: var(--fal-tint-danger-hover); }
.table-hover > tbody > tr.fal-row-neutral:hover { background-color: var(--fal-tint-neutral-hover); }
.table-hover > tbody > tr.fal-row-purple:hover { background-color: var(--fal-tint-purple-hover); }

/* Tinted rows must keep the themed text colour even when the row markup
   carries a light-mode .text-dark or the cell inherits a table variant. */
[data-bs-theme="dark"] .fal-row-warning,
[data-bs-theme="dark"] .fal-row-info,
[data-bs-theme="dark"] .fal-row-success,
[data-bs-theme="dark"] .fal-row-danger,
[data-bs-theme="dark"] .fal-row-neutral,
[data-bs-theme="dark"] .fal-row-purple,
[data-bs-theme="dark"] .fal-row-warning > *,
[data-bs-theme="dark"] .fal-row-info > *,
[data-bs-theme="dark"] .fal-row-success > *,
[data-bs-theme="dark"] .fal-row-danger > *,
[data-bs-theme="dark"] .fal-row-neutral > *,
[data-bs-theme="dark"] .fal-row-purple > * {
    color: var(--fal-text);
}


/* =============================================================================
   5. CORE COMPONENTS
   styles.css is a compiled light-only Bootstrap variant: it bakes #fff / #212529
   into form controls and #000 into every table variant. Those are corrected here.
   ============================================================================= */

/* ---- Forms ---------------------------------------------------------------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .datatable-input,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .datatable-selector {
    color: var(--fal-text);
    background-color: var(--fal-surface-inset);
    border-color: var(--fal-border);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .datatable-input:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .datatable-selector:focus {
    color: var(--fal-text);
    background-color: var(--fal-surface-inset);
    border-color: #4d8bf0;
    box-shadow: 0 0 0 .25rem rgba(77, 139, 240, .3);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .datatable-input::placeholder {
    color: var(--fal-text-subtle);
    opacity: 1;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .datatable-input:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .datatable-selector:disabled {
    background-color: #232a34;
    color: var(--fal-text-muted);
    border-color: var(--fal-border-subtle);
}

/* The chevron in .form-select is an inlined dark-stroked SVG — swap for a light one. */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .datatable-selector {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3aec2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-select:-moz-focusring,
[data-bs-theme="dark"] .datatable-selector:-moz-focusring {
    text-shadow: 0 0 0 var(--fal-text);
}

[data-bs-theme="dark"] .form-control::file-selector-button {
    color: var(--fal-text);
    background-color: var(--fal-surface-hover);
    border-inline-end-color: var(--fal-border);
}

[data-bs-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--fal-surface-active);
}

[data-bs-theme="dark"] .input-group-text {
    color: var(--fal-text-muted);
    background-color: var(--fal-surface-hover);
    border-color: var(--fal-border);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--fal-surface-inset);
    border-color: var(--fal-border-strong);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] legend {
    color: var(--fal-text);
}

[data-bs-theme="dark"] .form-text {
    color: var(--fal-text-muted);
}

/* Autofill: Chrome paints an opaque near-white box. Repaint via inset shadow. */
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea:-webkit-autofill,
[data-bs-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--fal-text);
    -webkit-box-shadow: 0 0 0 100px var(--fal-surface-inset) inset;
    caret-color: var(--fal-text);
}

/* ---- Tables ------------------------------------------------------------- */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .datatable-table {
    --bs-table-color: var(--fal-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--fal-border);
    --bs-table-striped-color: var(--fal-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-active-color: var(--fal-text);
    --bs-table-active-bg: rgba(255, 255, 255, .075);
    --bs-table-hover-color: var(--fal-text);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
    --bs-table-accent-bg: transparent;
}

/* Contextual row/table variants: styles.css hardcodes #000 text on pale
   backgrounds. Rebuild each from the auto-adapting subtle trio. */
[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-dark {
    --bs-table-color: var(--fal-text);
    --bs-table-striped-color: var(--fal-text);
    --bs-table-active-color: var(--fal-text);
    --bs-table-hover-color: var(--fal-text);
}

[data-bs-theme="dark"] .table-primary {
    --bs-table-bg: var(--bs-primary-bg-subtle);
    --bs-table-border-color: var(--bs-primary-border-subtle);
    --bs-table-striped-bg: #172c48;
    --bs-table-active-bg: #1b3454;
    --bs-table-hover-bg: #1b3454;
}

[data-bs-theme="dark"] .table-secondary {
    --bs-table-bg: var(--bs-secondary-bg-subtle);
    --bs-table-border-color: var(--bs-secondary-border-subtle);
    --bs-table-striped-bg: #262c36;
    --bs-table-active-bg: #2b323d;
    --bs-table-hover-bg: #2b323d;
}

[data-bs-theme="dark"] .table-success {
    --bs-table-bg: var(--bs-success-bg-subtle);
    --bs-table-border-color: var(--bs-success-border-subtle);
    --bs-table-striped-bg: #143725;
    --bs-table-active-bg: #173e2a;
    --bs-table-hover-bg: #173e2a;
}

[data-bs-theme="dark"] .table-info {
    --bs-table-bg: var(--bs-info-bg-subtle);
    --bs-table-border-color: var(--bs-info-border-subtle);
    --bs-table-striped-bg: #11333a;
    --bs-table-active-bg: #143a42;
    --bs-table-hover-bg: #143a42;
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: var(--bs-warning-bg-subtle);
    --bs-table-border-color: var(--bs-warning-border-subtle);
    --bs-table-striped-bg: #40300d;
    --bs-table-active-bg: #493610;
    --bs-table-hover-bg: #493610;
}

[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: var(--bs-danger-bg-subtle);
    --bs-table-border-color: var(--bs-danger-border-subtle);
    --bs-table-striped-bg: #431a1f;
    --bs-table-active-bg: #4b1e23;
    --bs-table-hover-bg: #4b1e23;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--fal-surface-raised);
    --bs-table-border-color: var(--fal-border);
    --bs-table-striped-bg: #283040;
    --bs-table-active-bg: #2d3646;
    --bs-table-hover-bg: #2d3646;
}

[data-bs-theme="dark"] .table-dark {
    --bs-table-bg: var(--fal-surface-inset);
    --bs-table-border-color: var(--fal-border-subtle);
    --bs-table-striped-bg: #1e242e;
    --bs-table-active-bg: #232a34;
    --bs-table-hover-bg: #232a34;
}

/* Sticky/plain table heads frequently rely on an implicit white backdrop. */
[data-bs-theme="dark"] .table > thead {
    color: var(--fal-text);
}

[data-bs-theme="dark"] .table-group-divider {
    border-top-color: var(--fal-border-strong);
}

/* ---- Cards, modals, dropdowns, offcanvas, popovers ---------------------- */
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--fal-surface);
    --bs-card-border-color: var(--fal-border);
    --bs-card-color: var(--fal-text);
    --bs-card-cap-bg: rgba(255, 255, 255, .035);
    --bs-card-cap-color: var(--fal-text);
}

/* Declared on .modal-dialog / .modal-content as well as .modal: some views
   render a dialog outside a .modal wrapper (inline "panel" dialogs, print
   views), and the vars would otherwise never reach .modal-content. */
[data-bs-theme="dark"] .modal,
[data-bs-theme="dark"] .modal-dialog,
[data-bs-theme="dark"] .modal-content {
    --bs-modal-bg: var(--fal-surface-raised);
    --bs-modal-color: var(--fal-text);
    --bs-modal-border-color: var(--fal-border);
    --bs-modal-header-border-color: var(--fal-border);
    --bs-modal-footer-border-color: var(--fal-border);
}

[data-bs-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: .7;
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--fal-surface-raised);
    --bs-dropdown-color: var(--fal-text);
    --bs-dropdown-border-color: var(--fal-border);
    --bs-dropdown-link-color: var(--fal-text);
    --bs-dropdown-link-hover-color: var(--fal-text);
    --bs-dropdown-link-hover-bg: var(--fal-surface-hover);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-header-color: var(--fal-text-muted);
    --bs-dropdown-divider-bg: var(--fal-border);
    box-shadow: var(--fal-shadow-lg);
}

[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas-lg,
[data-bs-theme="dark"] .offcanvas-md,
[data-bs-theme="dark"] .offcanvas-xl {
    --bs-offcanvas-bg: var(--fal-surface-raised);
    --bs-offcanvas-color: var(--fal-text);
    --bs-offcanvas-border-color: var(--fal-border);
}

[data-bs-theme="dark"] .popover {
    --bs-popover-bg: var(--fal-surface-raised);
    --bs-popover-border-color: var(--fal-border);
    --bs-popover-header-bg: var(--fal-surface-hover);
    --bs-popover-header-color: var(--fal-text);
    --bs-popover-body-color: var(--fal-text);
}

/* styles-custom.css pins the tooltip to #1e1e1e with !important; in dark that
   is nearly invisible against the page, so lift it and add a hairline. */
[data-bs-theme="dark"] .tooltip {
    --bs-tooltip-bg: #38424f !important;
    --bs-tooltip-color: #f2f5f9 !important;
    --bs-tooltip-opacity: 1;
}

/* Bootstrap bygger pilen af BORDERS paa en 0x0-boks: kun den ene side der peger
   mod elementet farves, og de oevrige er gennemsigtige - det er dem der danner
   trekantens skraa kanter. Farves alle fire, forsvinder trekanten og man faar en
   klods. Det var praecis fejlen her.

   Kun border-top-color skal saettes, og kun fordi styles-custom.css pinner den
   til #1e1e1e med !important; de tre andre sider har Bootstrap allerede pegende
   paa var(--bs-tooltip-bg), som er ombyttet ovenfor, saa de foelger selv med. */
[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: var(--bs-tooltip-bg) !important;
}

/* ---- List groups, accordions, tabs, pagination -------------------------- */
[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: var(--fal-surface);
    --bs-list-group-color: var(--fal-text);
    --bs-list-group-border-color: var(--fal-border);
    --bs-list-group-action-color: var(--fal-text);
    --bs-list-group-action-hover-color: var(--fal-text);
    --bs-list-group-action-hover-bg: var(--fal-surface-hover);
    --bs-list-group-action-active-bg: var(--fal-surface-active);
    --bs-list-group-action-active-color: var(--fal-text);
    --bs-list-group-disabled-color: var(--fal-text-subtle);
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-bg: var(--fal-surface);
    --bs-accordion-color: var(--fal-text);
    --bs-accordion-border-color: var(--fal-border);
    --bs-accordion-btn-color: var(--fal-text);
    --bs-accordion-btn-bg: var(--fal-surface);
    --bs-accordion-active-color: #9dc4ff;
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a3aec2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239dc4ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .pagination {
    --bs-pagination-bg: var(--fal-surface);
    --bs-pagination-color: var(--fal-text);
    --bs-pagination-border-color: var(--fal-border);
    --bs-pagination-hover-bg: var(--fal-surface-hover);
    --bs-pagination-hover-color: var(--fal-text);
    --bs-pagination-hover-border-color: var(--fal-border-strong);
    --bs-pagination-focus-bg: var(--fal-surface-hover);
    --bs-pagination-focus-color: var(--fal-text);
    --bs-pagination-disabled-bg: var(--fal-surface-inset);
    --bs-pagination-disabled-color: var(--fal-text-subtle);
    --bs-pagination-disabled-border-color: var(--fal-border-subtle);
}

/* styles-custom.css already themes .nav-tabs for dark, but pins the panel to
   near-black; align it with the surface scale so tab body and panel match. */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    background-color: var(--fal-surface-inset);
    border-color: var(--fal-border-subtle);
    color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    background-color: var(--fal-surface-hover);
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .tab-active {
    background-color: var(--fal-surface) !important;
    color: var(--fal-text) !important;
    border-color: var(--fal-border) var(--fal-border) transparent;
    border-bottom: 2px solid var(--bs-primary);
}

[data-bs-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
    --bs-nav-link-color: var(--fal-text-muted);
    --bs-nav-link-hover-color: var(--fal-text);
}

/* ---- Buttons ------------------------------------------------------------ */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--fal-surface-hover);
    --bs-btn-border-color: var(--fal-border-strong);
    --bs-btn-color: var(--fal-text);
    --bs-btn-hover-bg: var(--fal-surface-active);
    --bs-btn-hover-border-color: var(--fal-border-strong);
    --bs-btn-hover-color: var(--fal-text);
    --bs-btn-active-bg: var(--fal-surface-active);
    --bs-btn-active-color: var(--fal-text);
    --bs-btn-disabled-bg: var(--fal-surface-inset);
    --bs-btn-disabled-color: var(--fal-text-subtle);
    --bs-btn-disabled-border-color: var(--fal-border-subtle);
}

[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: var(--fal-surface-inset);
    --bs-btn-border-color: var(--fal-border);
    --bs-btn-color: var(--fal-text);
    --bs-btn-hover-bg: #222932;
    --bs-btn-hover-border-color: var(--fal-border-strong);
    --bs-btn-hover-color: var(--fal-text);
}

/* Outline-primary manglede i raekken herunder, saa den beholdt Bootstraps #0d6efd
   til baade tekst og kant. Den blaa er valgt til hvid baggrund og bliver for moerk
   paa en moerk flade — se fx Dage/Uger-skiftet paa dashboardet, hvor den inaktive
   knap naesten forsvinder.

   Kun HVILETILSTANDEN aendres. .btn-outline-* er udelukkende et saet CSS-variabler,
   hvor --bs-btn-color er den idle tekst; hover og active har hver deres variabler og
   roeres ikke. De fylder stadig #0d6efd med hvid tekst, hvilket er praecis det
   .btn-primary (den aktive knap) ser ud som — saa hover forbliver et forvarsel om
   aktiv tilstand.

   --bs-primary-text-emphasis er temaets egen opblanding af primary til laesbar tekst
   paa moerk baggrund; brug den frem for at indfoere endnu en blaa. */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-primary-text-emphasis);
}

/* Resten af familien, samme begrundelse og samme greb: kun hviletilstanden, og
   temaets egne *-text-emphasis frem for nye farver. De bruges 108 (danger), 38
   (success), 8 (info) og 7 (warning) steder i views. */

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--bs-success-text-emphasis);
    --bs-btn-border-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-success-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: var(--bs-info-text-emphasis);
    --bs-btn-border-color: var(--bs-info-text-emphasis);
    --bs-btn-disabled-color: var(--bs-info-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-info-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: var(--bs-warning-text-emphasis);
    --bs-btn-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--fal-text-muted);
    --bs-btn-border-color: var(--fal-border-strong);
    --bs-btn-hover-bg: var(--fal-surface-hover);
    --bs-btn-hover-border-color: var(--fal-border-strong);
    --bs-btn-hover-color: var(--fal-text);
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--fal-text);
    --bs-btn-border-color: var(--fal-border-strong);
    --bs-btn-hover-bg: var(--fal-surface-hover);
    --bs-btn-hover-color: var(--fal-text);
    --bs-btn-hover-border-color: var(--fal-border-strong);
}

[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: var(--fal-text);
    --bs-btn-border-color: var(--fal-border-strong);
    --bs-btn-hover-bg: var(--fal-surface-hover);
    --bs-btn-hover-color: var(--fal-text);
    --bs-btn-hover-border-color: var(--fal-border-strong);
}

[data-bs-theme="dark"] .btn-close {
    filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
}

[data-bs-theme="dark"] .btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
}

/* ---- Misc primitives ---------------------------------------------------- */
[data-bs-theme="dark"] .progress,
[data-bs-theme="dark"] .progress-stacked {
    --bs-progress-bg: var(--fal-surface-hover);
    --bs-progress-bar-color: #fff;
}

[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--fal-border);
    opacity: 1;
}

[data-bs-theme="dark"] .badge.bg-light {
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--fal-text-subtle);
    --bs-breadcrumb-item-active-color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .spinner-border,
[data-bs-theme="dark"] .spinner-grow {
    color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .placeholder {
    background-color: var(--fal-text-subtle);
}

[data-bs-theme="dark"] code:not([class*="language-"]) {
    background-color: rgba(255, 255, 255, .06);
    padding: .1em .35em;
    border-radius: .25rem;
}

[data-bs-theme="dark"] pre {
    color: var(--fal-text);
}

[data-bs-theme="dark"] mark,
[data-bs-theme="dark"] .mark {
    background-color: #4a3d12;
    color: var(--fal-text);
}

[data-bs-theme="dark"] .blockquote-footer {
    color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .figure-caption {
    color: var(--fal-text-muted);
}

/* The sidebar-collapsed scrim in styles.css is a flat #000 @ 50% — fine, but
   make it follow the token so it can be tuned in one place. */
[data-bs-theme="dark"] .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    background: var(--fal-overlay);
    opacity: 1;
}


/* =============================================================================
   6. APP CHROME (topnav + sidebar)
   Both are already dark in light mode (#222e3c). In dark mode they drop a shade
   so the content area reads as the lit surface, and the hairline is softened.
   ============================================================================= */
[data-bs-theme="dark"] .navbar-dark,
[data-bs-theme="dark"] .sb-topnav.navbar-dark {
    background-color: var(--fal-chrome-bg) !important;
}

[data-bs-theme="dark"] .sb-topnav {
    border-bottom-color: var(--fal-chrome-border) !important;
}

[data-bs-theme="dark"] .sb-sidenav-dark {
    background-color: var(--fal-chrome-bg);
}

[data-bs-theme="dark"] .sb-sidenav-dark .sb-sidenav-footer {
    background-color: var(--fal-surface-inset);
}

/* Sidebar dividers are markup-level `border-light`, which the utility remap
   would turn into a mid-grey line on dark chrome — keep them translucent. */
[data-bs-theme="dark"] .sb-sidenav .nav-link.border-bottom,
[data-bs-theme="dark"] .sb-sidenav .nav-link.border-light {
    border-color: rgba(255, 255, 255, .07) !important;
}

[data-bs-theme="dark"] .sb-sidenav-dark .sb-sidenav-menu .nav-link {
    color: rgba(255, 255, 255, .62);
}

[data-bs-theme="dark"] .sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .05);
}

[data-bs-theme="dark"] .sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, .07);
}

/* Sidebar/topnav icons are `text-light` in markup; the utility remap greys
   them, so restore them relative to the chrome. */
[data-bs-theme="dark"] .sb-sidenav .nav-link .fa-fw,
[data-bs-theme="dark"] .sb-sidenav .nav-link i,
[data-bs-theme="dark"] .sb-topnav .nav-link i {
    color: rgba(255, 255, 255, .72) !important;
}

[data-bs-theme="dark"] .sb-sidenav .nav-link:hover i,
[data-bs-theme="dark"] .sb-sidenav .nav-link.active i {
    color: #fff !important;
}

[data-bs-theme="dark"] .sb-topnav .navbar-brand,
[data-bs-theme="dark"] .sb-topnav .nav-link,
[data-bs-theme="dark"] .sb-topnav .btn-link {
    color: rgba(255, 255, 255, .85);
}

[data-bs-theme="dark"] .sb-topnav .nav-link:hover,
[data-bs-theme="dark"] .sb-topnav .btn-link:hover {
    color: #fff;
}

/* The decorative blurred photo behind the nav is a light image — dim it. */
[data-bs-theme="dark"] .sb-nav-bg {
    filter: blur(2px) brightness(.45) saturate(.8);
    -webkit-filter: blur(2px) brightness(.45) saturate(.8);
}


/* =============================================================================
   7. SCROLLBARS
   ============================================================================= */
[data-bs-theme="dark"] * {
    scrollbar-color: var(--fal-scrollbar-thumb) var(--fal-scrollbar-track);
}

[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--fal-scrollbar-track);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--fal-scrollbar-thumb);
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4d5a6e;
    background-clip: padding-box;
    border: 3px solid transparent;
}


/* =============================================================================
   7b. THEME SWITCHER
   The light/dark/system control in the topnav dropdown and on the user profile
   page. falcron-theme.js adds .active to the option matching the stored
   preference; Bootstrap's own .active on an outline button is a bit weak inside
   a dropdown, so it is strengthened here.
   ============================================================================= */
.fal-theme-switch .btn {
    --bs-btn-color: var(--fal-text-muted);
    --bs-btn-border-color: var(--fal-border);
    --bs-btn-hover-bg: var(--fal-surface-hover);
    --bs-btn-hover-color: var(--fal-text);
    --bs-btn-hover-border-color: var(--fal-border-strong);
}

.fal-theme-switch .btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: none;
}

.fal-theme-switch .btn.active:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}


/* =============================================================================
   8. IMAGES & EMBEDS
   Logos and diagrams shipped as light-only assets need help on a dark page.
   Opt in per element with .fal-invert-on-dark (or .fal-dim-on-dark).
   ============================================================================= */
[data-bs-theme="dark"] .fal-invert-on-dark {
    filter: invert(1) hue-rotate(180deg);
}

[data-bs-theme="dark"] .fal-dim-on-dark {
    filter: brightness(.85) contrast(1.05);
}

/* An iframe loads a separate document that never sees theme.css, so anything we
   do not control in there (a PDF preview, an embedded report) keeps its own white
   page — force a light colour-scheme so its scrollbars and form controls match it.
   The rich-text editor is the exception: hugerte-init.js DOES theme that document,
   so it must keep the page's scheme, otherwise it gets light scrollbars on a dark
   editor body. Same for anything explicitly opted out. */
[data-bs-theme="dark"] iframe:not(.tox-edit-area__iframe):not(.fal-themed-frame) {
    color-scheme: light;
}