/* ==========================================================================
   Universal Light Theme Overrides & Theme Toggle Styling
   ========================================================================== */

:root[data-theme="light"] {
    --bg-dark: #f0f4f8;
    --bg-base: #e6effa;
    --bg-deep: #d9e2ec;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(203, 213, 225, 0.65);
    --glass-highlight: rgba(255, 255, 255, 0.95);
    --text-primary: #0f172a;
    --text-secondary: rgba(15, 23, 42, 0.75);
    --text-muted: rgba(15, 23, 42, 0.55);
    --shadow-card: 0 20px 50px rgba(148, 163, 184, 0.3);
}

:root[data-theme="light"] body {
    background:
        radial-gradient(circle at 15% 20%, rgba(168, 85, 247, 0.15), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(99, 102, 241, 0.18), transparent 35%),
        radial-gradient(circle at 50% 85%, rgba(236, 72, 153, 0.14), transparent 30%),
        linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%) !important;
    color: var(--text-primary) !important;
}

/* Glass Cards and Containers in Light Mode */
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .screen,
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .admin-card,
:root[data-theme="light"] .controls-panel {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Form inputs & interactive elements */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .theme-input {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn-glass {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] .btn-glass:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 20px rgba(148, 163, 184, 0.25);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}

.theme-toggle-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 12px 28px rgba(168, 85, 247, 0.3);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

@media (max-width: 600px) {
    .theme-toggle-btn {
        top: 0.8rem;
        right: 0.8rem;
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* Category tabs in light theme */
:root[data-theme="light"] .cat-tab {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.2);
}

:root[data-theme="light"] .cat-tab:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--accent-1) !important;
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.2);
}

:root[data-theme="light"] .cat-tab.active {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.35);
}

/* Glass panel in light mode */
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .board-surface {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Card faces in light mode */
:root[data-theme="light"] .card-front {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.98)) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
}

:root[data-theme="light"] .card-back {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.85), rgba(99, 102, 241, 0.9)) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
}

:root[data-theme="light"] .card-front .card-text {
    color: #0f172a !important;
}

/* Status banner in light mode */
:root[data-theme="light"] .status-banner {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--text-secondary) !important;
}

/* Solo controls in light mode */
:root[data-theme="light"] .solo-controls {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: var(--glass-border) !important;
}

/* Stat badges in light mode */
:root[data-theme="light"] .stat-badge {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="light"] .mastered-badge {
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #15803d !important;
}

:root[data-theme="light"] .review-badge {
    border-color: rgba(244, 63, 94, 0.5) !important;
    color: #be123c !important;
}

/* Action buttons in light mode */
:root[data-theme="light"] .action-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="light"] .action-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
}