/* Night mode - the hand-written half.

   night_mode_vars.css (generated) gives every light background, dark text
   and light border colour in the templates its dark value; this file covers
   what that can't: native form controls, default link colours, and pages
   that manage their own theme (the Tactical Board). Everything is screen
   only, so printouts stay light. The toggle lives in base.html's header. */

@media screen {
    html[data-theme="dark"] { color-scheme: dark; }

    /* Form fields - one consistent recessed look on every page. A field
       that's designed for a dark page already (the homepage's newsletter
       boxes, white on navy) opts out with the class pp-own-field. */
    html[data-theme="dark"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not(.pp-own-field) {
        background-color: #0f2236;
        color: #e8eef5;
        border-color: rgba(255, 255, 255, 0.16);
    }
    html[data-theme="dark"] :is(input, textarea):not(.pp-own-field)::placeholder { color: #7f91a5; opacity: 1; }
    html[data-theme="dark"] select option { background-color: #0f2236; color: #e8eef5; }

    /* Plain links with no colour of their own (browser blue is unreadable
       on navy). :where() keeps this weaker than any real link style. */
    :where(html[data-theme="dark"]) a:where(:not([class])) { color: #8ec5ff; }
    :where(html[data-theme="dark"]) hr { border-color: rgba(255, 255, 255, 0.12); }

    /* Admin pages: their navy buttons and selected tab sit on navy cards at
       night - lift the buttons, and mark the selected tab in orange */
    html[data-theme="dark"] :is(.admin-btn-navy, .filter-btn.active) { background: #22374f; }
    html[data-theme="dark"] .admin-tab.active { box-shadow: inset 0 -3px 0 #ff6b00; }
}