/* Dark mode: the structural fixes both themes need on a dark surface.
 *
 * Every rule requires :root[data-mode="dark"], so neither theme's light mode can
 * change because of this file. Colours come from the active theme's tokens
 * (default-dark.css or astra-tyrian.css); nothing here picks a hue of its own.
 *
 * Two kinds of rule, deliberately:
 *   - Defaults for things a template never coloured (unstyled buttons, links,
 *     form controls) sit inside :where(), which has zero specificity, so any
 *     colour a template did choose still wins.
 *   - Fixes for colours a template hard-coded for a white page (the app-icon
 *     tiles, the nav tab) name the selector, because they must win.
 */

:root[data-mode="dark"] { color-scheme: dark; }

:where(:root[data-mode="dark"] a:not([class])) { color: var(--accent-text); }
:where(:root[data-mode="dark"] :is(button, input, select, textarea)) { color: var(--text); }
:where(:root[data-mode="dark"] :is(input, select, textarea)) {
    background-color: var(--surface-sunken);
    border-color: var(--line);
}
:where(:root[data-mode="dark"] select option) { background: var(--surface-raised); color: var(--text); }
/* An unstyled button otherwise gets the browser's dark grey (#6B6B6B). */
:where(:root[data-mode="dark"] button) { background-color: var(--surface-raised); border-color: var(--line); }

/* Preferences builds its page from four local names that no other template
 * defines, so they can be remapped here without touching anything else. */
:root[data-mode="dark"] {
    --bg:     var(--surface-base);
    --card:   var(--surface);
    --border: var(--line);
    --muted:  var(--text-muted);
}

/* ── Home: the app-icon tiles and their hover descriptions ────────────────── */
:root[data-mode="dark"] .expert-btn:not(.quick-test) .icon,
:root[data-mode="dark"] .tools-grid .tool-card-icon {
    background: linear-gradient(160deg, var(--surface-raised) 0%, var(--surface) 100%);
    border-color: var(--line);
}
:root[data-mode="dark"] .expert-btn .desc,
:root[data-mode="dark"] .tools-grid .tool-card-desc {
    background: var(--surface-raised);
    color: var(--text);
}
:root[data-mode="dark"] .expert-btn.quick-test .name { color: var(--ok-text); }
/* Schedules' secondary button is page-local --teal type, too dark on dark. */
:root[data-mode="dark"] .btn.secondary { color: var(--info-text); }
/* My Assistants tiles: keep each tile's colour tint, on a dark base. */
:root[data-mode="dark"] .agent-tile .icon {
    background-color: var(--surface-raised);
    border-color: var(--line);
}

/* ── Main nav: the tab joins the panel below it, so it takes that surface ─── */
:root[data-mode="dark"] .mainnav { background: var(--surface); }
:root[data-mode="dark"] .mainnav::before {
    background: radial-gradient(circle at top left, transparent 20px, var(--surface) 20.5px);
}
:root[data-mode="dark"] .mainnav::after {
    background: radial-gradient(circle at top right, transparent 20px, var(--surface) 20.5px);
}
:root[data-mode="dark"] .mainnav-item { color: var(--text-muted); }
:root[data-mode="dark"] .mainnav-item:hover,
:root[data-mode="dark"] .mainnav-item.active { color: var(--text); }
:root[data-mode="dark"] .mainnav:hover .mainnav-item.active:not(:hover) { color: var(--text-muted); }
:root[data-mode="dark"] .mainnav-icon,
:root[data-mode="dark"] .mainnav:hover .mainnav-item.active:not(:hover) .mainnav-icon {
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--line);
}
:root[data-mode="dark"] .mainnav-item .notif-dot { border-color: var(--surface); }

/* ── Expert chat: the header is the expert's colour, deepened to sit on dark ─ */
:root[data-mode="dark"] .chat-header {
    background: color-mix(in srgb, var(--expert-color, var(--brand)) 55%, var(--surface-raised));
}
/* The History button's white tint reads 3.9:1 on the deepened header; less tint, more contrast. */
:root[data-mode="dark"] .chat-history-toggle { background: rgba(255, 255, 255, .1); }