/*
 * Color theme toggle and dark-mode polish.
 *
 * The theme preference is stored in localStorage under the same key
 * ("theme") as the Django admin UI, so both share the same choice on the
 * same origin. `data-theme` mirrors the Django admin attribute
 * (auto/light/dark) and drives which icon is shown; Bootstrap's
 * `data-bs-theme` receives the effective light/dark value.
 */

/* --- Theme toggle button (Django admin style) --- */
.theme-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    margin-inline-start: 0.5rem;
    line-height: 1;
}

.theme-toggle svg {
    vertical-align: middle;
    height: 1.4rem;
    width: 1.4rem;
    display: none;
    fill: rgba(255, 255, 255, 0.85);
    color: #343a40; /* dark circle behind the icon */
    transition: opacity 0.15s ease-in-out;
}

.theme-toggle:hover svg {
    opacity: 0.7;
}

.theme-toggle .visually-hidden {
    display: none;
}

html[data-theme="auto"] .theme-toggle .theme-label-when-auto,
html[data-theme="light"] .theme-toggle .theme-label-when-light,
html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
    display: block;
}

html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto,
html[data-theme="light"] .theme-toggle svg.theme-icon-when-light,
html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
    display: block;
}

/* Hide the SVG sprite that defines the theme icons */
svg.base-svgs {
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
}

/* --- Dark-mode polish for hardcoded light utilities --- */
html[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-secondary-bg) !important;
}

html[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-active-bg: var(--bs-secondary-bg);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}