/*
 * Corrections to the Metronic bundle. Loaded after style.bundle.css.
 *
 * Kept in its own file rather than edited into the vendor bundle so a theme
 * upgrade cannot silently drop these, and so it is obvious what is ours.
 */

/* ---------------------------------------------------------------------------
 * .btn-light in dark mode
 *
 * Every other button variant this app uses resolves through CSS variables and
 * follows the theme: .btn.btn-light-primary is var(--bs-primary-light),
 * .btn.btn-active-light is var(--bs-light). .btn-light alone hardcodes
 * --bs-btn-bg:#F9F9F9 with --bs-btn-color:#000000, and the bundle ships dark
 * overrides for .btn-dark and .btn-secondary but not for it — so in dark mode
 * every secondary button stayed a near-white slab with black text while the
 * page around it went dark.
 *
 * Written as variables, not flat colours, so it keeps following the palette
 * if the theme's greys are ever retuned. .btn.btn-light matches Metronic's own
 * specificity for these overrides.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] .btn.btn-light {
    --bs-btn-color: var(--bs-gray-800);
    --bs-btn-bg: var(--bs-gray-100);
    --bs-btn-border-color: var(--bs-gray-100);

    --bs-btn-hover-color: var(--bs-gray-900);
    --bs-btn-hover-bg: var(--bs-gray-200);
    --bs-btn-hover-border-color: var(--bs-gray-200);

    --bs-btn-active-color: var(--bs-gray-900);
    --bs-btn-active-bg: var(--bs-gray-300);
    --bs-btn-active-border-color: var(--bs-gray-300);

    --bs-btn-disabled-color: var(--bs-gray-500);
    --bs-btn-disabled-bg: var(--bs-gray-100);
    --bs-btn-disabled-border-color: var(--bs-gray-100);
}

/* The icon inside one has to move with it, or a dark glyph is left on the
   dark fill and the button reads as empty. */
[data-bs-theme="dark"] .btn.btn-light i,
[data-bs-theme="dark"] .btn.btn-light .svg-icon {
    color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active) i,
[data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active) .svg-icon {
    color: var(--bs-gray-900);
}

/* ---------------------------------------------------------------------------
 * .preview-plate-fixed — a plate that must NOT follow the theme
 *
 * Same principle as the campaign email preview, which is an <iframe> precisely
 * so a customer's own document keeps its own background: a plate that exists to
 * show uploaded artwork is previewing how that artwork looks where it is
 * actually used — a marketing email, a social post, a printed sheet — and all
 * of those are light documents. Letting the plate go dark makes the preview
 * lie, and a dark-ink logo on transparency disappears into it entirely.
 *
 * A literal is correct here and a var() would be the bug: #F9F9F9 is the value
 * --bs-light already resolves to in light mode, so the element is pinned to
 * what it looks like there. Nothing else on these screens is pinned.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] .preview-plate-fixed {
    background-color: #F9F9F9 !important;
}

/* ---------------------------------------------------------------------------
 * .badge-light carrying .text-muted in dark mode
 *
 * Measured, not guessed. --bs-text-muted is #565674 in dark and #99A1B7 in
 * light; --bs-light is #2B2B40 and #F9F9F9. The pair is a deliberately quiet
 * chip ("Not set" in the provider table), and quiet is fine — but the dark
 * palette takes it to 1.96:1 where light sits at 2.45:1, which is past quiet
 * and into unreadable.
 *
 * --bs-gray-600 (#6D6D80) restores 2.73:1, the nearest value ABOVE light mode's
 * own ratio. Deliberately not gray-700 (4.49:1): the goal is parity with light,
 * not a louder chip in dark than the design ever asked for. The wider question
 * — that --bs-text-muted misses AA in BOTH modes, on table headers and card
 * captions alike — is the vendor palette's, is not a dark-mode regression, and
 * is not silently fixed here.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] .badge.badge-light.text-muted {
    color: var(--bs-gray-600) !important;
}

/* ---------------------------------------------------------------------------
 * A selected <option> inside <select multiple> — the group/tag pickers
 *
 * .form-select reskins a single-select's own closed box (the chevron, the
 * padding, the border), but a `multiple` select renders as a native,
 * always-open listbox instead, and a SELECTED option inside it is painted by
 * the browser's own platform highlight colour (macOS/Windows system blue),
 * not by anything Bootstrap or Metronic themes — no CSS variable reaches it
 * at all. In light mode that system blue happens to look plausible; in dark
 * mode it does not adapt with the rest of the page and sits there as a raw,
 * un-themed block.
 *
 * background as a two-stop gradient of the SAME colour, not a plain
 * background-color: Chrome ignores a flat background-color on a selected
 * <option> and keeps its own highlight regardless — the gradient trick is
 * the actual working cross-browser fix, not decoration.
 *
 * Scoped to dark only, like every other rule in this file: the raw platform
 * highlight is at least a plausible blue in light mode, so there is nothing
 * confirmed broken there to justify touching it.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] select.form-select[multiple] option:checked {
    background: linear-gradient(var(--bs-primary-light), var(--bs-primary-light));
    color: var(--bs-primary);
}