/* ==========================================================================
   Form controls in dark mode.

   Every rule here is scoped to :root[data-theme="dark"], so light mode is
   untouched by construction — this file simply does not apply there.

   It exists because the pages style their fields individually, most of them
   with a hardcoded white ground, and there are far too many to chase one at
   a time. Scoping to the dark theme lets one rule set the floor for all of
   them: 0-2-1 for a bare element selector here beats the 0-1-1 a page's
   `.form input` scores, so these win without !important.

   `color-scheme` is the important part for native widgets. The date picker
   calendar, the time spinner and the select dropdown are drawn by the
   browser, not by this CSS, and they only go dark when the element they
   belong to declares a dark colour scheme.
   ========================================================================== */

@media screen {

    :root[data-theme="dark"] input,
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea {
        background-color: var(--surface-input);
        color: var(--text);
        border-color: var(--border);
        /* Paints the calendar, clock and dropdown the browser supplies. */
        color-scheme: dark;
    }

    /* Checkboxes and radios draw themselves from color-scheme; giving them a
       surface fill instead just makes a grey box with no tick. */
    :root[data-theme="dark"] input[type="checkbox"],
    :root[data-theme="dark"] input[type="radio"],
    :root[data-theme="dark"] input[type="range"],
    :root[data-theme="dark"] input[type="color"] {
        background-color: transparent;
        border-color: transparent;
        accent-color: var(--primary);
    }

    /* Native dropdown list. Windows and Linux render these from the element's
       own colours rather than the page's. */
    :root[data-theme="dark"] select option,
    :root[data-theme="dark"] select optgroup {
        background-color: var(--surface-input);
        color: var(--text);
    }

    :root[data-theme="dark"] ::placeholder {
        color: var(--muted);
        opacity: 1;
    }

    :root[data-theme="dark"] input:disabled,
    :root[data-theme="dark"] select:disabled,
    :root[data-theme="dark"] textarea:disabled {
        background-color: var(--surface-sunken);
        color: var(--muted);
    }

    :root[data-theme="dark"] input:read-only:not([type="checkbox"]):not([type="radio"]) {
        background-color: var(--surface-sunken);
    }

    /* Chrome paints autofilled fields a fixed pale yellow that ignores every
       background rule. The only lever is an inset shadow large enough to
       cover the field, plus text-fill-color for the value itself. */
    :root[data-theme="dark"] input:-webkit-autofill,
    :root[data-theme="dark"] input:-webkit-autofill:hover,
    :root[data-theme="dark"] input:-webkit-autofill:focus,
    :root[data-theme="dark"] textarea:-webkit-autofill,
    :root[data-theme="dark"] select:-webkit-autofill {
        -webkit-text-fill-color: var(--text);
        -webkit-box-shadow: 0 0 0 1000px var(--surface-input) inset;
        box-shadow: 0 0 0 1000px var(--surface-input) inset;
        caret-color: var(--text);
    }

    /* The little calendar/clock glyph inside a date or time input is a dark
       icon on a dark field until it is inverted.

       Invert ONLY. Do not set opacity here: pages stretch this indicator over
       the whole control at opacity 0 to make the entire pill open the picker,
       and because this selector outranks theirs, forcing an opacity turned
       that invisible hit area back into a black glyph sitting on the value.
       Leaving opacity alone lets the page's own value stand, and an indicator
       nobody hid still shows at its default opacity of 1. */
    :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
    :root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
    :root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    :root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
    :root[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(1.4);
    }

    :root[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
        filter: invert(1) brightness(1.4);
    }

    /* Scrollbars, for the same reason: a light trough next to dark content. */
    :root[data-theme="dark"] {
        scrollbar-color: var(--border-strong) var(--bg);
    }
}