/*
 * Dark theme
 *
 * Re-points the semantic/palette custom properties defined in global.css.
 * Every rule in the site's CSS that already reads from a var(--...) picks
 * these up automatically.
 *
 * Shadows are the one thing that can't be handled by variable re-pointing
 * alone: a soft black box-shadow that reads as "lifted card" on a light
 * surface is either invisible or just muddy once the surface goes dark, and
 * the right fix is different per shadow (drop it entirely and let the
 * lighter surface tone carry the elevation, or make it heavier/more opaque
 * so a floating panel still separates from an equally dark backdrop). Those
 * per-selector overrides live in the second half of this file.
 */

html[data-theme="dark"] {
    /* Surfaces */
    --bgPage: #17181A;
    --bgSubtle: #212224;
    --bgSubtle2: #2A2B2E;
    --white: #282A2E;
    --whiteHover: #383A3F;
    --whiteText: #EAEAEA;

    /* Dark panels in light mode become darker here */
    --dark: #101012;
    --darkHover: #242428;

    /* Secondary (neutral badge/panel) */
    --secondary: #363840;
    --secondaryHover: #454750;
    --secondaryText: #EAEAEA;

    /* Text & borders */
    --textMuted: #A3A3A6;
    --borderColor: #4A4A4D;
    --borderStrong: #b5b1b1;

    /* Card "lift" shadows built from this token (.shadowed, thumbnail cards, plugin
     * pills) rely on --white already being visibly lighter than --bgPage for
     * separation - a black shadow here would just be a dark smudge on a dark page,
     * so drop it rather than render one that reads as muddy. */
    --shadowColor: transparent;

    /* "Filled/underlined" material-style form fields (.form-input/.form-select) -
     * light-on-dark equivalents of the light theme's dark-on-light tints/underline. */
    --formTint1: rgba(255, 255, 255, 0.03);
    --formTint2: rgba(255, 255, 255, 0.05);
    --formTint3: rgba(255, 255, 255, 0.07);
    --formUnderline: rgba(255, 255, 255, 0.25);
    --formUnderlineHover: rgba(255, 255, 255, 0.4);

    /* Primary (blue) badge */
    --primary: #234A68;
    --primaryHover: #2C5C7E;
    --primaryText: #7FC4FF;

    /* Yellow badge */
    --yellow: #5C4517;
    --yellowHover: #6C5420;
    --yellowText: #FBBF24;

    /* Red badge */
    --red: #5A2626;
    --redHover: #6E3030;
    --redText: #FF8A8A;
    --redError: #F87171;

    /* Green badge */
    --green: #275E22;
    --greenHover: #337A2C;
    --greenText: #8FF086;

    /* Visited (purple) badge */
    --visited: #472B66;
    --visitedHover: #5A3880;
    --visitedText: #D9B3FF;

    /* The header watermark pattern is designed for a light background */
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-image: none;
}

html[data-theme="dark"] .primary,
html[data-theme="dark"] .primary-btn {
    background-color: rgba(127, 196, 255, 0.12);
}

html[data-theme="dark"] .primary-btn:hover {
    background-color: rgba(127, 196, 255, 0.2) !important;
}

html[data-theme="dark"] .yellow,
html[data-theme="dark"] .yellow-btn {
    background-color: rgba(251, 191, 36, 0.12);
}

html[data-theme="dark"] .yellow-btn:hover {
    background-color: rgba(251, 191, 36, 0.2) !important;
}

html[data-theme="dark"] .red,
html[data-theme="dark"] .red-btn {
    background-color: rgba(255, 138, 138, 0.12);
}

html[data-theme="dark"] .red-btn:hover {
    background-color: rgba(255, 138, 138, 0.2) !important;
}

html[data-theme="dark"] .green,
html[data-theme="dark"] .green-btn {
    background-color: rgba(143, 240, 134, 0.12);
}

html[data-theme="dark"] .green-btn:hover {
    background-color: rgba(143, 240, 134, 0.2) !important;
}

html[data-theme="dark"] .visited,
html[data-theme="dark"] .visited-btn {
    background-color: rgba(217, 179, 255, 0.12);
}

html[data-theme="dark"] .visited-btn:hover {
    background-color: rgba(217, 179, 255, 0.2) !important;
}

html[data-theme="dark"] .plate-field,
html[data-theme="dark"] .large-thumb-plate-field,
html[data-theme="dark"] .misread-plate-field,
html[data-theme="dark"] .list-item-plate-field {
    background-color: #1C1818;
    border-color: #C9C9C9;
}

html[data-theme="dark"] .plate-display-solid {
    color: #F2F2F2;
}

html[data-theme="dark"] .plate-display-edit {
    color: #FF6B6B;
}

html[data-theme="dark"] .theme-switch-thumb {
    transform: translateX(38px);
    background-color: rgba(0, 0, 0, 0.45);
}

/*
 * air-datepicker (vendor widget) - it defines its own --adp-* custom property
 * scale scoped to .air-datepicker / .air-datepicker-overlay. Re-point those
 * here instead of editing the vendor file directly.
 */
html[data-theme="dark"] .air-datepicker {
    --adp-background-color: #202124;
    --adp-background-color-hover: #2A2B2E;
    --adp-background-color-active: #313234;
    --adp-background-color-selected-other-month: #3B2454;
    --adp-background-color-selected-other-month-focused: #4C2F6C;
    --adp-color: #EAEAEA;
    --adp-color-secondary: #A3A3A6;
    --adp-color-other-month: #52545A;
    --adp-color-other-month-hover: #75767A;
    --adp-color-disabled: #5D5D62;
    --adp-color-disabled-in-range: #75767A;
    --adp-border-color: #313234;
    --adp-border-color-inner: #313234;
    --adp-border-color-inline: #313234;
    --adp-day-name-color: #7FC4FF;
    --adp-day-name-color-hover: #A9DBFF;
    --adp-time-track-color: #313234;
    --adp-time-track-color-hover: #52545A;
}

html[data-theme="dark"] .air-datepicker--pointer::after {
    background: #202124;
}

/*
 * Shadows - dropped
 *
 * Soft "resting card" shadows where the surface-colour contrast (--white vs
 * --bgPage/--bgSubtle) already reads as elevation on its own; the shadow itself
 * would just be a dark smudge on the dark page behind it.
 */
html[data-theme="dark"] .input,
html[data-theme="dark"] .modal-input,
html[data-theme="dark"] .form-select-choice--tag.is-highlighted,
html[data-theme="dark"] .plugin-lane-select .choices__inner,
html[data-theme="dark"] .routine .routine-builder,
html[data-theme="dark"] .routine .routine-toggle-btn.active,
html[data-theme="dark"] .routine .routine-card:hover,
html[data-theme="dark"] .routine .routine-toggle::after,
html[data-theme="dark"] .routine .routine-help-item:hover,
html[data-theme="dark"] .small-tag-delete-button {
    box-shadow: none;
}

html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .modal-input:focus,
html[data-theme="dark"] .plugin-lane-select.is-focused .choices__inner,
html[data-theme="dark"] .plugin-lane-select.is-open .choices__inner {
    box-shadow: none;
}

html[data-theme="dark"] .api-key-table tbody tr {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*
 * Shadows - strengthened
 *
 * Genuinely floating panels (modals, dropdowns, popovers, tooltips) that sit over
 * a backdrop which is now just as dark as the shadow itself - a light-theme alpha
 * of 0.1-0.3 is imperceptible here, so these need a heavier, more opaque shadow to
 * still read as "lifted" off the page/backdrop behind them.
 */
html[data-theme="dark"] .nis-modal-content {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .login-container {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .color-picker-palette {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .routine .routine-dropdown-options,
html[data-theme="dark"] .plugin-lane-select .choices__list--dropdown {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .routine .tooltip-box {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .routine .routine-view-only-modal {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .routine .routine-help-modal {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
}