/* ==========================================================================
   Site-wide light / dark theme.

   Default is light. `html[data-theme="dark"]` is set by js/theme.js before
   first paint, from localStorage if the visitor already chose, otherwise
   from the OS/browser prefers-color-scheme setting.
   ========================================================================== */

/* Briefly applied to <html> by theme.js around a theme switch so every
   element's colors crossfade together instead of snapping instantly.
   Scoped to that short window (and layered on with !important) so it
   doesn't permanently change elements that already define their own
   transition (card hover lifts, button transforms, etc). */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition: background-color 0.45s ease, color 0.45s ease,
        border-color 0.45s ease, box-shadow 0.45s ease,
        fill 0.45s ease, stroke 0.45s ease !important;
}

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

    /* Overrides for the variables results.css already defines — any
       component built with var(--gold), var(--ink), var(--paper), etc.
       (leaderboard tables, race header, status badges, gate table...)
       repaints automatically. */
    --gold: #e3bd55;
    --gold-dark: #caa237;
    --gold-text: #f0cf6b;
    --gold-soft: #2a2512;
    --gold-stripe: #272210;
    --ink: #eae6da;
    --paper: #201e18;
    --success: #7fe3a0;
    --success-bg: #153523;
    --danger: #ff8c93;
    --danger-bg: #3a1419;
    --warning: #ffcf6b;
    --warning-bg: #3a2a0c;
    --info: #7cc9f0;
    --info-bg: #10293a;
    --neutral: #b9b4a4;
    --neutral-bg: #2a2820;
    --focus-ring: #7cc9f0;
}

/* ---------- Generic page chrome (home / events / db pages) ---------- */
:root[data-theme="dark"] body {
    background-color: #15140f;
    color: #eae6da;
}

:root[data-theme="dark"] a {
    color: #f0cf6b;
}

:root[data-theme="dark"] hr {
    border-color: #3a3627;
    opacity: 0.6;
}

:root[data-theme="dark"] .text-muted {
    color: #a9a393 !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: #1f1d17;
    color: #eae6da;
    border-color: #4a4434;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: #1f1d17;
    color: #eae6da;
    border-color: var(--gold-dark, #caa237);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: #8c8674;
}

:root[data-theme="dark"] .modal-content {
    background-color: #201e18;
    color: #eae6da;
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: #3a3627;
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

:root[data-theme="dark"] .list-group-item {
    background-color: #201e18;
    color: #eae6da;
    border-color: #3a3627;
}

:root[data-theme="dark"] .list-group-item.event-item:hover {
    background-color: #2a2719 !important;
}

:root[data-theme="dark"] .table {
    color: #eae6da;
    border-color: #3a3627;
}

/* ---------- Home page ---------- */
:root[data-theme="dark"] .overlay {
    background-color: rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .content-overlay {
    background-color: rgba(12, 12, 16, 0.6);
    color: #f0efe9;
}

/* ---------- results.css fixups for a handful of hardcoded colors ---------- */
:root[data-theme="dark"] .sort-dir-btn,
:root[data-theme="dark"] .share-btn,
:root[data-theme="dark"] .showtiming {
    background: var(--paper);
    color: var(--gold-text);
}

:root[data-theme="dark"] .gate-table tbody tr:nth-child(even) {
    background-color: #272310;
}

:root[data-theme="dark"] .position--medal-1 {
    background: #4a3a0c;
    border-color: var(--gold-dark);
    color: #ffe9a8;
}

:root[data-theme="dark"] .position--medal-2 {
    background: #39393c;
    border-color: #9a9a9a;
    color: #eef0f2;
}

:root[data-theme="dark"] .position--medal-3 {
    background: #3a2a1c;
    border-color: #a9652e;
    color: #f7e2ce;
}

/* ==========================================================================
   Theme toggle control — animated sun/moon switch.
   Two placements share the same markup/behaviour:
     .theme-toggle--inline    sits in the header nav on events/db/results
     .theme-toggle--floating  a fixed pill on the home page
   ========================================================================== */
.theme-toggle {
    --track-w: 54px;
    --track-h: 28px;
    --thumb-size: 22px;
    position: relative;
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle__track {
    position: relative;
    width: var(--track-w);
    height: var(--track-h);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd56b, #7ec8e3);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    transition: background 0.4s ease, box-shadow 0.4s ease;
    display: block;
}

[data-theme="dark"] .theme-toggle__track {
    background: linear-gradient(135deg, #2b3350, #11141f);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.theme-toggle__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.theme-toggle__icon--sun {
    left: 7px;
    color: #a9680a;
    opacity: 1;
}

.theme-toggle__icon--moon {
    right: 7px;
    color: #e8ecff;
    opacity: 0.5;
}

[data-theme="dark"] .theme-toggle__icon--sun {
    opacity: 0.45;
}

[data-theme="dark"] .theme-toggle__icon--moon {
    opacity: 1;
}

.theme-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: #fff9ec;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
}

[data-theme="dark"] .theme-toggle__thumb {
    transform: translateX(calc(var(--track-w) - var(--thumb-size) - 6px));
    background: #1b2036;
}

.theme-toggle.is-animating .theme-toggle__track {
    animation: theme-toggle-glow 0.5s ease;
}

@keyframes theme-toggle-glow {
    0% {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(230, 180, 60, 0.6);
    }

    40% {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(230, 180, 60, 0);
    }

    100% {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(230, 180, 60, 0);
    }
}

.theme-toggle:hover .theme-toggle__track {
    filter: brightness(1.08);
}

.theme-toggle:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
    border-radius: 999px;
}

/* Nav placement */
.theme-toggle--inline {
    margin-left: 12px;
}

/* Floating placement (home page) */
.theme-toggle--floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    padding: 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.4s ease;
}

.theme-toggle--floating:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .theme-toggle--floating {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
    .theme-toggle--floating {
        bottom: 16px;
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__thumb,
    .theme-toggle__track,
    .theme-toggle__icon,
    .theme-toggle--floating {
        transition: none;
    }

    .theme-toggle.is-animating .theme-toggle__track {
        animation: none;
    }

    .theme-transition,
    .theme-transition *,
    .theme-transition *::before,
    .theme-transition *::after {
        transition: none !important;
    }
}