/*
 * Light/Dark mode for Chylux (the/core theme)
 * ---------------------------------------------------------------
 * IMPORTANT: this does NOT redefine the base palette variables
 * (--white, --dark, --light, etc. from aiz-core.css). Those are used
 * throughout the theme for literal colors too (e.g. white text on a
 * blue button), so overriding them site-wide would break those.
 * Instead this adds a new "semantic" layer -- surface/text roles --
 * and re-points the specific utility classes and components that
 * actually represent page/card surfaces to those roles.
 */

:root {
    --dm-surface-page: var(--white);
    --dm-surface-card: var(--white);
    --dm-surface-alt: var(--light);
    --dm-text-primary: var(--dark);
    --dm-text-secondary: var(--gray);
    --dm-border: #dee2e6;
}

[data-theme="dark"] {
    --dm-surface-page: #111723;   /* reuses brand's --dark as the page background */
    --dm-surface-card: #1a2130;
    --dm-surface-alt: #212a3d;
    --dm-text-primary: #f2f3f8;   /* reuses brand's --light as primary text */
    --dm-text-secondary: #9aa3b8;
    --dm-border: #2c3548;
}

/* ---- Page-level ---- */
[data-theme="dark"] body {
    background-color: var(--dm-surface-page) !important;
    color: var(--dm-text-primary) !important;
}

/* ---- Surfaces: the Bootstrap utility classes the templates actually use ---- */
[data-theme="dark"] .bg-white {
    background-color: var(--dm-surface-card) !important;
}

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

/* ---- Text ---- */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body {
    color: var(--dm-text-primary) !important;
}

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

/* ---- Components ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .toast,
[data-theme="dark"] .toast-header,
[data-theme="dark"] .popover,
[data-theme="dark"] .popover-header {
    background-color: var(--dm-surface-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--dm-text-primary) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dm-surface-alt) !important;
}

/* ---- Forms ---- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .custom-file-label,
[data-theme="dark"] .input-group-text {
    background-color: var(--dm-surface-alt) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--dm-text-secondary) !important;
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--dm-surface-alt) !important;
    color: var(--dm-text-primary) !important;
}

/* ---- Borders / rules ---- */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--dm-border) !important;
}
[data-theme="dark"] hr {
    border-color: var(--dm-border);
}

/* ---- Tables ---- */
[data-theme="dark"] .table {
    color: var(--dm-text-primary);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table thead th {
    border-color: var(--dm-border);
}

/* ---- Breadcrumb ---- */
[data-theme="dark"] .breadcrumb {
    background-color: var(--dm-surface-alt);
}

/* ---- Theme toggle button ---- */
.theme-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1030;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    transition: background-color 0.15s ease-in-out;
}
.theme-toggle-btn:hover {
    background-color: var(--hov-blue);
}
.theme-toggle-icon-dark {
    display: inline-block;
}
.theme-toggle-icon-light {
    display: none;
}
[data-theme="dark"] .theme-toggle-icon-dark {
    display: none;
}
[data-theme="dark"] .theme-toggle-icon-light {
    display: inline-block;
}

@media (max-width: 575.98px) {
    .theme-toggle-btn {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}