/* CORA dark mode.

   How it works: the app's colours live in ~900 hard-coded rules in site.css, ~400 inline styles and a <style> block
   in most views, so there is no single place to re-colour. Instead, when <html data-theme="dark"> is set, the whole page
   is inverted (white <-> black) and its hues rotated back (hue-rotate 180deg), so the brand orange, the status greens
   and reds, and the pastel avatars keep their colours while light surfaces go dark and dark text goes light.
   Things that must look like themselves are inverted a second time, which cancels it out:
     - photos and uploaded images (anything not a UI icon from /images/), video, embedded viewers (OnlyOffice, PDFs);
     - "paper": the rendered pages of a document or template, with the fields placed on them.
   Add class "cora-keep-colors" to anything else that should look as it does in light mode.

   The switch is in the profile menu (Dark mode); the choice is kept in localStorage ("coraTheme") and applied
   before first paint by Views/Shared/_ThemeHead.cshtml. */

html[data-theme="dark"] {
    /* Inverts to the page's base dark. */
    background-color: #fff;
    /* contrast(.86) lifts pure black to a soft near-black and keeps white text from glaring. */
    filter: invert(1) hue-rotate(180deg) contrast(.86);
}

/* ── Looks like itself: invert a second time ───────────────────────────────────────────── */

/* Content media. UI icons live in /images/ and stay inverted with the page (dark icons become light). */
html[data-theme="dark"] :is(video, iframe, embed, object, img:not([src*="/images/"]), .cora-keep-colors) {
    filter: invert(1) hue-rotate(180deg);
}

/* Paper: a document's rendered pages (PDF / image / blank-canvas template) and the thumbnail frames
   that preview them, together with everything drawn on them (fields, signatures, highlights). */
html[data-theme="dark"] :is(.pdf-page-wrapper, .blank-page, .blank-page-wrapper, .parent-preview-div, .pdf-page-image, .office-viewer-container) {
    filter: invert(1) hue-rotate(180deg);
}

/* Emoji. They are drawn as coloured pictures, so inverting the page would turn them into negatives.
   The chat wraps the ones in message text and reaction chips in .cora-keep-colors; the reactors list has its
   own emoji span. The emoji picker is re-inverted as a whole (its emoji live in a shadow root, out of reach)
   and given a dark look of its own with the variables below, so it still matches the dark page. */
html[data-theme="dark"] :is(.uc-sheet-emoji, emoji-picker) {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] emoji-picker {
    --background: #262626;
    --border-color: #444444;
    --input-border-color: #5A5A5A;
    --input-font-color: #F2F2F2;
    --input-placeholder-color: #9A9A9A;
    --category-font-color: #D0D0D0;
    --button-hover-background: #3A3A3A;
    --button-active-background: #4A4A4A;
}

/* Inside a re-inverted area its own media must not be turned back again. Later than the rules above, same weight. */
html[data-theme="dark"] :is(.cora-keep-colors, .pdf-page-wrapper, .blank-page, .blank-page-wrapper, .parent-preview-div, .pdf-page-image, .office-viewer-container) :is(img, video, canvas, iframe, embed, object, svg) {
    filter: none;
}

/* The picture of a signature or a drawn mark sits on paper or on a light pad, never on the dark page. */
html[data-theme="dark"] :is(.signature-pad, .signature-canvas, canvas.sigCanvas) {
    filter: invert(1) hue-rotate(180deg);
}

/* Never invert what is printed or exported from the page. */
@media print {
    html[data-theme="dark"] {
        filter: none;
        background-color: #fff;
    }

    html[data-theme="dark"] :is(video, iframe, embed, object, img, .cora-keep-colors, .pdf-page-wrapper, .blank-page, .blank-page-wrapper, .parent-preview-div, .pdf-page-image, .office-viewer-container, .signature-pad, .signature-canvas) {
        filter: none;
    }
}

/* The profile-menu switch row. */
.theme-toggle-row .form-check-input {
    cursor: pointer;
}