/* ══════════════════════════════════════════════════
   Theme System — PlayServe
   Dark (default) · Light · System
   ══════════════════════════════════════════════════ */

/* ── Dark theme (default) ── */
:root {
    --court-green: #749079;
    --court-green-rgb: 116, 144, 121;
    --court-glow: #96b09b;
    --court-glow-rgb: 150, 176, 155;
    --court-deep: #5a7360;
    --court-deep-rgb: 90, 115, 96;
    --dark: #0a0f0d;
    --dark-surface: #111916;
    --dark-card: #151d19;
    --text-primary: #e8eeeb;
    --text-muted: #7a8f84;
    --text-dim: #4a5f53;

    /* Overlay / glass surfaces */
    --overlay-bg: rgba(10, 15, 13, 0.85);
    --overlay-border: rgba(var(--court-green-rgb), 0.12);
    --card-border: rgba(var(--court-green-rgb), 0.1);
    --card-shadow: 0 8px 30px rgba(var(--court-green-rgb), 0.08);
    --card-shadow-lg: 0 0 40px rgba(0, 0, 0, 0.3), 0 0 80px rgba(var(--court-green-rgb), 0.02);

    /* Hero overlay */
    --hero-overlay: linear-gradient(rgba(10, 15, 13, 0.65), rgba(10, 15, 13, 0.85));
    --facility-overlay: linear-gradient(to top, rgba(10, 15, 13, 0.85) 0%, transparent 50%);

    /* CTA banner */
    --cta-text-secondary: rgba(10, 15, 13, 0.7);

    /* Hero text */
    --hero-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

    /* Atmosphere */
    --atmosphere-opacity: 1;
    --grain-opacity: 0.025;

    /* Autofill */
    --autofill-bg: var(--dark-surface);
}

/* ── Light theme ── */
html[data-theme="light"] {
    --dark: #f4f7f5;
    --dark-surface: #eaf0ec;
    --dark-card: #ffffff;
    --text-primary: #1a2420;
    --text-muted: #5a6e64;
    --text-dim: #94a89d;
    --court-green: #5a7360;
    --court-green-rgb: 90, 115, 96;
    --court-glow: #749079;
    --court-glow-rgb: 116, 144, 121;
    --court-deep: #475e4d;
    --court-deep-rgb: 71, 94, 77;

    --overlay-bg: rgba(255, 255, 255, 0.85);
    --overlay-border: rgba(var(--court-green-rgb), 0.18);
    --card-border: rgba(var(--court-green-rgb), 0.14);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --card-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--court-green-rgb), 0.08);

    --hero-overlay: linear-gradient(rgba(244, 247, 245, 0.82), rgba(244, 247, 245, 0.92));
    --facility-overlay: linear-gradient(to top, rgba(244, 247, 245, 0.85) 0%, transparent 50%);

    --hero-text-shadow: none;

    --cta-text-secondary: rgba(255, 255, 255, 0.7);

    --atmosphere-opacity: 0.3;
    --grain-opacity: 0;

    --autofill-bg: var(--dark-surface);
}

/* ── System theme (follows OS preference) ── */
html[data-theme="system"] {
    /* Inherits dark by default (from :root), overridden below when OS is light */
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        --dark: #f4f7f5;
        --dark-surface: #eaf0ec;
        --dark-card: #ffffff;
        --text-primary: #1a2420;
        --text-muted: #5a6e64;
        --text-dim: #94a89d;
        --court-green: #5a7360;
        --court-green-rgb: 90, 115, 96;
        --court-glow: #749079;
        --court-glow-rgb: 116, 144, 121;
        --court-deep: #475e4d;
        --court-deep-rgb: 71, 94, 77;

        --overlay-bg: rgba(255, 255, 255, 0.85);
        --overlay-border: rgba(var(--court-green-rgb), 0.18);
        --card-border: rgba(var(--court-green-rgb), 0.14);
        --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        --card-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--court-green-rgb), 0.08);

        --hero-overlay: linear-gradient(rgba(244, 247, 245, 0.82), rgba(244, 247, 245, 0.92));
        --facility-overlay: linear-gradient(to top, rgba(244, 247, 245, 0.85) 0%, transparent 50%);

        --hero-text-shadow: none;

        --cta-text-secondary: rgba(255, 255, 255, 0.7);

        --atmosphere-opacity: 0.3;
        --grain-opacity: 0;

        --autofill-bg: var(--dark-surface);
    }
}

/* ── Atmosphere + grain respond to theme ── */
.atmosphere { opacity: var(--atmosphere-opacity); }
.grain { opacity: var(--grain-opacity) !important; }

/* ── Autofill override uses themed variable ── */
.dark-input:-webkit-autofill,
.dark-input:-webkit-autofill:hover,
.dark-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--autofill-bg) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
}

/* ── Theme toggle button ── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    aspect-ratio: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(var(--court-green-rgb), 0.2);
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0;
    line-height: 1;
}

.theme-toggle:hover {
    color: var(--court-glow);
    border-color: rgba(var(--court-glow-rgb), 0.5);
    background: rgba(var(--court-green-rgb), 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--court-green-rgb), 0.12);
}

/* Nav-specific smaller toggle */
.theme-toggle-nav {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

/* Hide non-active icons */
.theme-toggle .fa-sun,
.theme-toggle .fa-moon,
.theme-toggle .fa-desktop { display: none; }

/* Show icon based on current theme attribute */
html[data-theme="light"] .theme-toggle .fa-sun { display: inline; }
html[data-theme="light"] .theme-toggle .fa-moon,
html[data-theme="light"] .theme-toggle .fa-desktop { display: none; }

html[data-theme="dark"] .theme-toggle .fa-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .fa-sun,
html[data-theme="dark"] .theme-toggle .fa-desktop { display: none; }

html[data-theme="system"] .theme-toggle .fa-desktop { display: inline; }
html[data-theme="system"] .theme-toggle .fa-sun,
html[data-theme="system"] .theme-toggle .fa-moon { display: none; }

/* Default (no data-theme yet / initial load) — show system icon */
html:not([data-theme]) .theme-toggle .fa-desktop { display: inline; }

/* ── Light-mode flash message adjustments ── */
html[data-theme="light"] .dark-flash-error,
html[data-theme="light"] .client-error-box {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

html[data-theme="light"] .dark-flash-success {
    background: rgba(var(--court-green-rgb), 0.06);
    border-color: rgba(var(--court-green-rgb), 0.18);
    color: #475e4d;
}

html[data-theme="light"] .dark-flash-warning {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.18);
    color: #a16207;
}

html[data-theme="light"] .dark-flash-info {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

/* System theme + light OS */
@media (prefers-color-scheme: light) {
    html[data-theme="system"] .dark-flash-error,
    html[data-theme="system"] .client-error-box {
        background: rgba(239, 68, 68, 0.06);
        border-color: rgba(239, 68, 68, 0.18);
        color: #b91c1c;
    }

    html[data-theme="system"] .dark-flash-success {
        background: rgba(var(--court-green-rgb), 0.06);
        border-color: rgba(var(--court-green-rgb), 0.18);
        color: #475e4d;
    }

    html[data-theme="system"] .dark-flash-warning {
        background: rgba(234, 179, 8, 0.06);
        border-color: rgba(234, 179, 8, 0.18);
        color: #a16207;
    }

    html[data-theme="system"] .dark-flash-info {
        background: rgba(59, 130, 246, 0.06);
        border-color: rgba(59, 130, 246, 0.18);
        color: #1d4ed8;
    }
}

/* ── Light-mode card shadow for dark-card class ── */
html[data-theme="light"] .dark-card {
    box-shadow: var(--card-shadow-lg);
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .dark-card {
        box-shadow: var(--card-shadow-lg);
    }
}