/* ==========================================================================
   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.
   ========================================================================== */

@import url('/fonts/poppins/poppins.css');

/* ---- EIEV brand tokens — matches the main EIEV platform (cms.eiev-app.ae)
   so this site shares the same gold/dark identity. ---- */
:root {
    --eiev-gold:        #c4912a;
    --eiev-gold-dark:   #996F32;
    --eiev-gold-light:  #e4b84d;
    --eiev-gold-rgb:    196, 145, 42;
    --eiev-dark:        #1D1D1B;
    --eiev-dark-2:      #17120b;
    --eiev-sand:        #F2D586;
    --eiev-cream:       #F5F0E4;
    --font-body: 'Poppins', system-ui, -apple-system, Arial, sans-serif;
}

body {
    font-family: var(--font-body);
}

/* Brand buttons — gold fill, uppercase, bronze on hover/press, matching the
   primary CTA style used across the EIEV platform. */
.btn-info,
.btn-custom-brand {
    background-color: var(--eiev-gold) !important;
    border-color: var(--eiev-gold) !important;
    color: #fff !important;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn-info:hover,
.btn-custom-brand:hover {
    background-color: var(--eiev-gold-dark) !important;
    border-color: var(--eiev-gold-dark) !important;
    transform: translateY(-1px);
}

/* Gentle float — the same idle motion the main platform uses on its hero
   card, reused here on the floating glass logo/content panels. */
@keyframes eievFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Simple fade-up entrance, staggered via --eiev-delay, for hero content. */
@keyframes eievFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eiev-fade-up {
    animation: eievFadeUp 0.7s ease both;
    animation-delay: var(--eiev-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .eiev-fade-up {
        animation: none;
    }
}

/* 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-aware logo — swap between a light-mode and dark-mode image.
   Markup: an element with .theme-logo wrapping an <img class="logo-light">
   and an <img class="logo-dark">; only the one matching the current theme
   is displayed.
   ========================================================================== */
.theme-logo .logo-dark {
    display: none;
}

:root[data-theme="dark"] .theme-logo .logo-light {
    display: none;
}

:root[data-theme="dark"] .theme-logo .logo-dark {
    display: inline-block;
}

/* ==========================================================================
   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;
    }
}