/*
 * 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 --- */
.theme-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    margin-inline-start: 0.5rem;

    /* Align perfectly with navbar items */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.theme-toggle:hover,
.theme-toggle:focus {
    color: var(--bs-navbar-hover-color, var(--bs-body-color));
}

.theme-toggle svg {
    display: none;
    height: 1.25rem;
    width: 1.25rem;
    fill: currentColor;
    transition: opacity 0.15s ease-in-out;
}

/* Driven by html[data-theme] set in head script */
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: inline-block !important;
}


/* --- Dark-mode overrides for legacy 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);
}


/* --- Brand logo: white variant in dark mode, black variant in light mode ---
   Both <img>s are rendered; the swap is pure CSS driven by html[data-bs-theme],
   which the head script sets before the first paint (auto mode included).
   Light mode is the default look. IMPORTANT: the logo <img>s must not carry a
   Bootstrap .d-* utility class, because those use `!important` and would
   override these rules. */
.logo-light {
    display: inline-block;
}

.logo-dark {
    display: none;
}

html[data-bs-theme="dark"] .logo-light {
    display: none;
}

html[data-bs-theme="dark"] .logo-dark {
    display: inline-block;
}