/**
 * @package     Gystiq.Template.CassiopeiaGystiq
 * @copyright   (C) 2026 GYSTiq
 * @license     GNU General Public License version 2 or later
 *
 * Dark mode for Cassiopeia. Cassiopeia's compiled CSS ships only the light
 * variable set, so this supplies the dark one.
 *
 * The palette is copied from Atum (Joomla 6.1.3,
 * media/templates/administrator/atum/css/template.css, the first
 * [data-bs-theme="dark"] block), so the frontend and the backend match. Joomla
 * compiles Bootstrap with an EMPTY prefix: --body-bg, not --bs-body-bg.
 *
 * Selectors are html[data-bs-theme="dark"] (one extra type selector) so they
 * beat Cassiopeia's ":root, [data-bs-theme="light"]" block whatever the load
 * order. The second half fixes places where Cassiopeia's own CSS hardcodes a
 * light color instead of reading a variable.
 */

html[data-bs-theme="dark"] {
    color-scheme: dark;
    --body-color: #dee2e6;
    --body-color-rgb: 222, 226, 230;
    --body-bg: #212529;
    --body-bg-rgb: 33, 37, 41;
    --emphasis-color: #fff;
    --emphasis-color-rgb: 255, 255, 255;
    --secondary-color: #dee2e6bf;
    --secondary-color-rgb: 222, 226, 230;
    --secondary-bg: #343a40;
    --secondary-bg-rgb: 52, 58, 64;
    --tertiary-color: #dee2e680;
    --tertiary-color-rgb: 222, 226, 230;
    --tertiary-bg: #2b3035;
    --tertiary-bg-rgb: 43, 48, 53;
    --primary-text-emphasis: #7fa5d4;
    --secondary-text-emphasis: #a3a8ad;
    --success-text-emphasis: #8fb198;
    --info-text-emphasis: #7fa5d4;
    --warning-text-emphasis: #f6ce95;
    --danger-text-emphasis: #dc7e7d;
    --light-text-emphasis: #f8f9fa;
    --dark-text-emphasis: #dee2e6;
    --primary-bg-subtle: #081525;
    --secondary-bg-subtle: #141618;
    --success-bg-subtle: #0e1911;
    --info-bg-subtle: #081525;
    --warning-bg-subtle: #302310;
    --danger-bg-subtle: #270808;
    --light-bg-subtle: #343a40;
    --dark-bg-subtle: #1a1d20;
    --primary-border-subtle: #193f6e;
    --secondary-border-subtle: #3d4247;
    --success-border-subtle: #294b32;
    --info-border-subtle: #193f6e;
    --warning-border-subtle: #90682f;
    --danger-border-subtle: #761817;
    --light-border-subtle: #495057;
    --dark-border-subtle: #343a40;
    --heading-color: inherit;
    --link-color: #6fbfdb;
    --link-hover-color: #8ccce2;
    --link-color-rgb: 111, 191, 219;
    --link-hover-color-rgb: 140, 204, 226;
    --code-color: #c17196;
    --highlight-color: #dee2e6;
    --highlight-bg: #664808;
    --border-color: #495057;
    --border-color-translucent: #ffffff26;
    --form-valid-color: #8fb198;
    --form-valid-border-color: #8fb198;
    --form-invalid-color: #dc7e7d;
    --form-invalid-border-color: #dc7e7d;
    --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    /* Cassiopeia's own link variable, used by its template layer. */
    --cassiopeia-color-link: #6fbfdb;
}

/* ---- Cassiopeia hardcodes these light; point them back at the variables ---- */
html[data-bs-theme="dark"] {
    background-color: var(--body-bg);
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    color: var(--body-color);
    background-color: var(--body-bg);
    border-color: var(--border-color);
}
html[data-bs-theme="dark"] .form-select {
    --form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Cassiopeia's template layer makes .btn-secondary white with dark text. */
html[data-bs-theme="dark"] .btn-secondary {
    --btn-color: var(--body-color);
    --btn-bg: var(--tertiary-bg);
    --btn-border-color: var(--border-color);
    --btn-hover-color: var(--emphasis-color);
    --btn-hover-bg: var(--secondary-bg);
    --btn-hover-border-color: var(--border-color);
    --btn-active-color: var(--emphasis-color);
    --btn-active-bg: var(--secondary-bg);
    --btn-active-border-color: var(--border-color);
}
/* Cassiopeia compiles the current breadcrumb item as #484f56 (1.9:1 on dark). */
html[data-bs-theme="dark"] .breadcrumb {
    --breadcrumb-item-active-color: var(--secondary-color);
}
html[data-bs-theme="dark"] figcaption {
    color: var(--secondary-color);
}
html[data-bs-theme="dark"] [role="tooltip"] {
    color: var(--body-color);
    background: var(--tertiary-bg);
}
@media (width >= 992px) {
    html[data-bs-theme="dark"] .container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)) {
        background-color: var(--tertiary-bg);
    }
}
html[data-bs-theme="dark"] .container-header .mod-menu .parent > ul,
html[data-bs-theme="dark"] .metismenu.mod-menu .parent > ul {
    color: var(--body-color);
}
html[data-bs-theme="dark"] .metismenu.mod-menu .mm-collapse {
    background-color: var(--tertiary-bg);
}