/*
 * Theme-dependent images (logos).
 *
 * Every themed image is rendered twice, once per theme:
 *
 *   <img src="logo.svg"      class="... theme-img--light">
 *   <img src="logo_dark.svg" class="... theme-img--dark">
 *
 * and exactly one of them is hidden. The rule is the same one Bulma uses for
 * the colours, so logos and colours can never disagree:
 *
 *   1. <html data-theme="dark|light">  -> explicit in-app preference wins.
 *      Set by ThemeService inside the Angular shell, and by the pre-paint
 *      script (localStorage 'app.theme') in base/min_base/admin layouts.
 *   2. no data-theme attribute         -> preference is 'system', fall back
 *      to prefers-color-scheme.
 *
 * Pure CSS on purpose: it applies before first paint, needs no JS in the
 * Django-only layouts, and also covers htmx-swapped fragments and Angular
 * component templates (this is a global stylesheet, so view encapsulation
 * does not affect it).
 *
 * Only `display: none` is ever set, never a visible display value, so the
 * visible image keeps whatever display Bulma / uz-custom-styles gives it.
 */

/* Light is effective: explicit light, or system + OS light. Hide dark. */
:root[data-theme="light"] .theme-img--dark {
  display: none !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-img--dark {
    display: none !important;
  }
}

/* Dark is effective: explicit dark, or system + OS dark. Hide light. */
:root[data-theme="dark"] .theme-img--light {
  display: none !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-img--light {
    display: none !important;
  }
}