/* Dark mode for the student / teacher dashboards and the login pages ("filter" mode).
   The whole page is colour-inverted (white → dark, dark text → light text) and rotated back to the brand hue;
   photos, videos and avatars are inverted again so they keep their real colours. */
html.kz-filter-mode[data-theme="dark-filter"] {
    filter: invert(0.92) hue-rotate(180deg);
    background: #fff;
    color-scheme: light;
}
html.kz-filter-mode[data-theme="dark-filter"] img,
html.kz-filter-mode[data-theme="dark-filter"] video,
html.kz-filter-mode[data-theme="dark-filter"] iframe,
html.kz-filter-mode[data-theme="dark-filter"] picture,
html.kz-filter-mode[data-theme="dark-filter"] [style*="background-image"],
html.kz-filter-mode[data-theme="dark-filter"] .kz-no-invert {
    filter: invert(1) hue-rotate(180deg);
}
/* Logos on a coloured badge look better un-inverted too */
html.kz-filter-mode[data-theme="dark-filter"] svg image { filter: invert(1) hue-rotate(180deg); }