/* =============================================================================
   examon_dark_fixes.css — HAND-WRITTEN dark-mode corrections.
   -----------------------------------------------------------------------------
   WHY THIS IS NOT IN THE GENERATOR

     generate_dark_sweep.php can flip any colour it can SEE. It cannot know
     what a colour was DOING. This file is the residue: controls whose light
     design relies on a pale fill and NO border to read as a control against
     white. Invert the fill and you get a dark square on a dark card —
     arithmetically correct, visually invisible. No lightness transform fixes
     that; the element needs an edge it never had.

     Rule of thumb: anything derivable from the source colour belongs in the
     generator. Anything that needs a human to say "this control needs a
     border it was never given" belongs here.

   LOAD ORDER (application/views/includes/header.php)
     examon_ui.css → examon_module.css → [analytics.css] →
     examon_dark_sweep.css → THIS FILE (last)

     Last on purpose: the sweep emits :root[data-theme="dark"] rules for the
     same components at the same specificity, so corrections here win only on
     load order. Do not reorder.
   ============================================================================= */

:root[data-theme="dark"] {
    /* One knob for every "this control needs a visible edge" rule below. */
    --dk-edge:       rgba(255,255,255,.30);
    --dk-edge-hover: rgba(255,255,255,.55);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §1  BORDERLESS CONTROL SURFACES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Exam Groups → class-section and term pickers. .sec-lbl::before is a 20px
   square whose ONLY visual definition in light mode is background:#f1f5f9 —
   no border at all, so once the fill goes dark the checkbox disappears. */
:root[data-theme="dark"] .sec-lbl::before {
    box-shadow: inset 0 0 0 1.5px var(--dk-edge);
}
:root[data-theme="dark"] .sec-lbl:hover::before {
    box-shadow: inset 0 0 0 1.5px var(--dk-edge-hover);
}
/* Checked already carries a solid accent fill and a tick, so it reads on its
   own — drop the edge rather than ringing a filled box. */
:root[data-theme="dark"] .sec-item input:checked + .sec-lbl::before {
    box-shadow: none;
}
/* A section owned by another exam group is deliberately inert; keep it dimmer
   than a live unchecked box so "locked" still looks different. */
:root[data-theme="dark"] .sec-item.sec-taken .sec-lbl::before {
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14);
}

/* The other two checkbox/radio proxies. These DO declare a border, but on
   var(--border) — a hairline meant for dividers, not for the outline of a
   hit target. */
:root[data-theme="dark"] .chk-box,
:root[data-theme="dark"] .vbox,
:root[data-theme="dark"] .vbox-radio {
    border-color: var(--dk-edge);
}
:root[data-theme="dark"] .chk-lbl:hover .chk-box,
:root[data-theme="dark"] .vlist-item label:hover .vbox,
:root[data-theme="dark"] .vlist-item label:hover .vbox-radio {
    border-color: var(--dk-edge-hover);
}

/* Native controls, for any view rendering a bare <input type=checkbox>.
   color-scheme:dark (examon_ui.css §1b) already darkens these; accent-color
   makes the checked state the app's blue rather than the OS default. */
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] {
    accent-color: var(--mod-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2  ROW HOVER
   Hover on a dark surface has to be a LIFT. Several listings hover to a tint
   that is darker than the row's resting state, which reads as no feedback.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] table.xtable tbody tr:hover td,
:root[data-theme="dark"] .sec-lbl:hover,
:root[data-theme="dark"] .sec-item.sec-taken .sec-lbl:hover {
    background: rgba(255,255,255,.06);
}