/*
 * EMS dark mode (3.5.5.079) — curated invert theme.
 *
 * The app's surfaces are styled inline (hardcoded hex values), so a
 * variable-driven dark theme can't reach them. Instead the whole
 * document is inverted + hue-rotated (colours keep their hue), and
 * true-colour media is re-inverted back:
 *   • photos / uploaded images / previews stay true colour
 *   • canvases (QR codes, charts) stay true so scanners keep working
 *   • brand logos marked data-invert-ok are ALLOWED to invert so they
 *     read light-on-dark
 * Print is always light — reports and labels never invert.
 */

html[data-theme="dark"] {
    /* Root background inverts to a deep neutral. */
    background: #fbfaf8;
    /* 3.5.5.080 — contrast(0.87) softens both ends of the inversion:
       pure-white surfaces land on ~#111 instead of black, and dark text
       lands on ~#e0e0e0 instead of blinding near-white. Feedback was
       "really sharp contrast in places" — this pulls the extremes in
       while keeping hues true. */
    filter: invert(1) hue-rotate(180deg) contrast(0.87);
    /* Keep native form controls / scrollbars legible in dark. */
    color-scheme: light;
}

/* Re-invert true-colour media so it displays as authored. The child
   filter must be the exact inverse of the parent chain in reverse order:
   contrast(1/0.87) → hue-rotate(180deg) → invert(1). */
html[data-theme="dark"] img:not([data-invert-ok]),
html[data-theme="dark"] video,
html[data-theme="dark"] canvas,
html[data-theme="dark"] iframe,
html[data-theme="dark"] embed,
html[data-theme="dark"] object,
html[data-theme="dark"] [data-no-invert] {
    filter: contrast(1.149) hue-rotate(180deg) invert(1);
}

/* Shadows read as glows when inverted — soften the worst offenders. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* Never print inverted — reports, labels and BOLs stay light. */
@media print {
    html[data-theme="dark"] {
        filter: none !important;
        background: #fff;
    }
    html[data-theme="dark"] img:not([data-invert-ok]),
    html[data-theme="dark"] video,
    html[data-theme="dark"] canvas,
    html[data-theme="dark"] iframe,
    html[data-theme="dark"] embed,
    html[data-theme="dark"] object,
    html[data-theme="dark"] [data-no-invert] {
        filter: none !important;
    }
}

/* Soften the brightest fixed chrome further — inverted pure-white bars
   read as glowing panels; nudge them down a touch. */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .portal-topbar {
    box-shadow: none !important;
}