/* FreeriderX light theme
   Loaded last so legacy dark utilities resolve to one coherent light palette. */

html[data-theme="light"] {
    color-scheme: light;
    --bg-base: #f7f8fa;
    --bg-surface: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --color-background: #f7f8fa;
    --color-surface: #ffffff;
    --color-surface-rgb: 255 255 255;
    --color-elevated: #f1f4f7;
    --color-elevated-rgb: 241 244 247;
    --bg-overlay: rgba(15, 23, 42, 0.055);
    --border-color: rgba(15, 23, 42, 0.12);
    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-default: rgba(15, 23, 42, 0.14);
    --text-primary: #111827;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-inverse: #ffffff;
}

html[data-theme="light"] body,
html[data-theme="light"] #main-app,
html[data-theme="light"] #main {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] body > .max-w-md,
html[data-theme="light"] .bg-darker,
html[data-theme="light"] [class*="bg-darker"] {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
}

html[data-theme="light"] #app-top-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 var(--border-subtle), 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #app-top-header :is(.text-white, #top-username) {
    color: var(--text-primary) !important;
}

html[data-theme="light"] #notif-unread-badge {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

html[data-theme="light"] #sidebar,
html[data-theme="light"] #bottom-nav,
html[data-theme="light"] #notifications-screen,
html[data-theme="light"] #notifications-screen > div:first-child {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] #bottom-nav {
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] :is(#screen-market, #screen-rank, #screen-missions, #screen-giveaway, #screen-events, #screen-competition) > .sticky {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] :is(.bg-black, .bg-zinc-950, .bg-zinc-900, .bg-slate-950),
html[data-theme="light"] [class*="bg-black/"],
html[data-theme="light"] [class*="bg-zinc-950/"],
html[data-theme="light"] [class*="bg-zinc-900/"],
html[data-theme="light"] [class*="bg-slate-950/"] {
    background-color: var(--color-surface) !important;
}

html[data-theme="light"] :is(.bg-zinc-800, .bg-zinc-700, .bg-zinc-600),
html[data-theme="light"] [class*="bg-zinc-800/"],
html[data-theme="light"] [class*="bg-zinc-700/"],
html[data-theme="light"] [class*="bg-slate-900/"] {
    background-color: var(--color-elevated) !important;
}

html[data-theme="light"] :is(.glass-panel, .card, .card-standard, .modal-panel-standard) {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border-default) !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.09);
}

html[data-theme="light"] :is(input, textarea, select) {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    color: var(--text-primary) !important;
    caret-color: var(--color-primary);
}

html[data-theme="light"] :is(input, textarea)::placeholder {
    color: #64748b !important;
    opacity: 1;
}

html[data-theme="light"] select option {
    background: #ffffff;
    color: #111827;
}

html[data-theme="light"] #screen-market select {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

html[data-theme="light"] #login-context-message {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e3a8a !important;
}

/* The auth brand sits on the dark video layer, outside the light form card. */
html[data-theme="light"] #login-screen .auth-brand-title {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72);
}

html[data-theme="light"] #login-screen :is(#login-tab-btn, #login-btn) {
    color: #ffffff !important;
}

html[data-theme="light"] :is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100) {
    color: var(--text-primary) !important;
}

/* White utility text must stay white on strong action colors. The generic rule
   above is only for legacy dark neutral surfaces converted to light surfaces. */
html[data-theme="light"] :is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100):is(
    .bg-primary, .btn-primary, .ai-btn,
    [class*="bg-blue-"], [class*="bg-sky-"], [class*="bg-cyan-"],
    [class*="bg-teal-"], [class*="bg-emerald-"], [class*="bg-green-"],
    [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-pink-"],
    [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"],
    [class*="bg-fuchsia-"], [class*="bg-orange-"], [class*="bg-gradient-"]
),
html[data-theme="light"] :is(
    .bg-primary, .btn-primary, .ai-btn,
    [class*="bg-blue-"], [class*="bg-sky-"], [class*="bg-cyan-"],
    [class*="bg-teal-"], [class*="bg-emerald-"], [class*="bg-green-"],
    [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-pink-"],
    [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"],
    [class*="bg-fuchsia-"], [class*="bg-orange-"], [class*="bg-gradient-"]
) :is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100) {
    color: #ffffff !important;
}

html[data-theme="light"] :is(.text-zinc-200, .text-zinc-300, .text-zinc-400, .text-zinc-500,
                               .text-gray-200, .text-gray-300, .text-gray-400, .text-gray-500,
                               .text-neutral-200, .text-neutral-300, .text-neutral-400, .text-neutral-500,
                               .text-slate-300, .text-slate-400, .text-slate-500) {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] :is(.text-zinc-600, .text-gray-600, .text-neutral-600, .text-slate-600) {
    color: var(--text-tertiary) !important;
}

/* Bright accent utilities were designed for the dark theme. Use their darker
   equivalents on light surfaces so labels, rewards and status chips stay legible. */
html[data-theme="light"] body :is(.text-blue-300, .text-blue-400, .text-blue-500,
                                    .text-sky-300, .text-sky-400, .text-sky-500,
                                    .text-cyan-300, .text-cyan-400, .text-indigo-300,
                                    .text-indigo-400, .text-violet-300, .text-violet-400,
                                    .text-purple-200, .text-purple-300, .text-purple-400,
                                    .text-fuchsia-300, .text-fuchsia-400) {
    color: #1d4ed8 !important;
}

html[data-theme="light"] body :is(.text-green-300, .text-green-400, .text-green-500,
                                    .text-emerald-300, .text-emerald-400, .text-emerald-500,
                                    .text-teal-300, .text-teal-400) {
    color: #047857 !important;
}

html[data-theme="light"] body :is(.text-red-300, .text-red-400, .text-rose-300,
                                    .text-rose-400, .text-pink-300, .text-pink-400) {
    color: #be123c !important;
}

html[data-theme="light"] body :is(.text-orange-300, .text-orange-400, .text-orange-500,
                                    .text-amber-200\/80, .text-amber-300, .text-amber-400,
                                    .text-amber-500, .text-yellow-300, .text-yellow-400,
                                    .text-yellow-500) {
    color: #92400e !important;
}

html[data-theme="light"] [class*="border-zinc-"],
html[data-theme="light"] [class*="border-gray-"],
html[data-theme="light"] [class*="border-neutral-"],
html[data-theme="light"] [class*="border-slate-"] {
    border-color: var(--border-default) !important;
}

html[data-theme="light"] :is(.divide-zinc-700, .divide-zinc-800, .divide-zinc-900) > * + * {
    border-color: var(--border-subtle) !important;
}

html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] #sidebar-overlay,
html[data-theme="light"] :is(#badges-modal, #admin-panel, #user-activity-modal, #pd-mic-modal, #pd-photo-modal) {
    background: rgba(15, 23, 42, 0.46) !important;
}

html[data-theme="light"] .pill-toggle-btn {
    background: #ffffff !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .pill-toggle-btn.active {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
}

html[data-theme="light"] body :is(#sidebar-theme-light, #settings-theme-light, #settings-lang-tr,
                                    #settings-lang-en, #settings-lang-de, #settings-lang-nl,
                                    #settings-lang-fr, #settings-lang-es).pill-toggle-btn.active {
    background: #dbeafe !important;
    border-color: #2563eb !important;
    color: #1e3a8a !important;
}

html[data-theme="light"] #sidebar .bg-emerald-700\/80 {
    background: #065f46 !important;
}

html[data-theme="light"] .hover\:bg-zinc-800\/70:hover,
html[data-theme="light"] .hover\:bg-zinc-800\/60:hover,
html[data-theme="light"] .hover\:bg-zinc-700:hover,
html[data-theme="light"] .hover\:bg-white\/5:hover {
    background: rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="light"] .hover\:text-white:hover {
    color: var(--text-primary) !important;
}

html[data-theme="light"] :focus-visible {
    outline-color: #2563eb !important;
}

/* AI Hub is a regular product surface, not a media viewer. Some of its later
   inline styles otherwise win the cascade and leave a dark panel with dark text. */
html[data-theme="light"] body #ai-hub-overlay {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] body #ai-hub-overlay > div:first-child {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom-color: var(--border-subtle) !important;
    box-shadow: 0 1px 0 var(--border-subtle), 0 6px 18px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] body #ai-hub-overlay #ai-main-menu,
html[data-theme="light"] body #ai-hub-overlay .ai-screen,
html[data-theme="light"] body #ai-hub-overlay .ai-content {
    background: var(--bg-base) !important;
}

html[data-theme="light"] body #ai-hub-overlay #ai-hub-title {
    color: var(--text-primary) !important;
}

html[data-theme="light"] body #ai-hub-overlay .ai-tool-card {
    background: #ffffff !important;
    border-color: var(--border-default) !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] body #ai-hub-overlay .ai-tool-card:hover {
    background: #f8fafc !important;
    border-color: rgba(59, 130, 246, 0.32) !important;
}

html[data-theme="light"] body #ai-hub-overlay button[aria-label="Kapat"] {
    background: var(--color-elevated) !important;
    color: #334155 !important;
    border: 1px solid var(--border-default) !important;
}

html[data-theme="light"] body #ai-hub-overlay [id$="-cost-badge"] {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

/* Feature-specific light surfaces that still use intentional dark gradients. */
html[data-theme="light"] #giveaway-intro-card {
    background: linear-gradient(145deg, #fff7ed 0%, #ffffff 72%) !important;
    border-color: #fed7aa !important;
    box-shadow: 0 8px 22px rgba(124, 45, 18, 0.08) !important;
}

html[data-theme="light"] #competition-add-bike-btn {
    background: linear-gradient(135deg, #c2410c, #be123c) !important;
    color: #ffffff !important;
}

html[data-theme="light"] #screen-competition .comp-cat-btn[aria-pressed="true"] {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #screen-market #market-add-listing-btn,
html[data-theme="light"] #screen-market button.bg-emerald-600 {
    background: #047857 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #screen-rank :is(.text-blue-300, .text-blue-400) {
    color: #1e40af !important;
}

/* Frix support follows the selected appearance just like the regular chat. */
html[data-theme="light"] body #ai-support-panel {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] body #ai-support-panel > div:first-child,
html[data-theme="light"] body #ai-support-panel > div:last-child {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border-subtle) !important;
}

html[data-theme="light"] #ai-support-agent-name {
    color: var(--text-primary) !important;
}

html[data-theme="light"] #ai-support-agent-title,
html[data-theme="light"] #ai-support-panel [style*="color:rgba(255,255,255,0.55)" i] {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] #ai-support-panel .ai-msg-bot {
    background: #eff6ff !important;
    border-left-color: #2563eb !important;
    color: #1e3a8a !important;
}

html[data-theme="light"] #ai-support-panel .ai-msg-user,
html[data-theme="light"] #ai-support-send-btn {
    background: #0369a1 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #ai-support-input {
    background: #ffffff !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Store keeps its gold identity while following the selected light appearance. */
html[data-theme="light"] #store-modal .store-sheet-inner {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.16) !important;
    color: var(--text-primary);
}

html[data-theme="light"] #store-modal .store-header-section {
    background: linear-gradient(145deg, #fff8e6 0%, #ffffff 58%, #f5f3ff 100%) !important;
    border-bottom-color: rgba(180, 83, 9, 0.14) !important;
}

html[data-theme="light"] #store-modal .store-balance-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(180, 83, 9, 0.2) !important;
    box-shadow: 0 5px 20px rgba(146, 64, 14, 0.08), inset 0 1px 0 #ffffff !important;
}

html[data-theme="light"] #store-modal [role="tablist"] {
    background: #ffffff !important;
    border-color: var(--border-subtle) !important;
}

html[data-theme="light"] #store-modal .store-tab-pill-active {
    background: #eff6ff !important;
    border: 1px solid #93c5fd !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 -2px 0 #3b82f6 !important;
}

html[data-theme="light"] #store-modal .store-tab-pill-inactive {
    background: #ffffff !important;
    border-color: transparent !important;
    color: var(--text-secondary) !important;
}

html[data-theme="light"] #store-modal .store-tab-pill-inactive:hover {
    background: var(--color-elevated) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] #store-modal :is(.store-pkg-card, .store-item-row) {
    background: #ffffff !important;
    border-color: var(--border-default) !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] #store-modal .store-pkg-card.best-deal {
    background: linear-gradient(145deg, #fff7d6 0%, #fff1e8 100%) !important;
    border-color: rgba(217, 119, 6, 0.38) !important;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.12) !important;
}

html[data-theme="light"] #store-modal .store-pkg-card:hover,
html[data-theme="light"] #store-modal .store-pkg-card:active {
    border-color: rgba(217, 119, 6, 0.42) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] #store-modal .store-pkg-card::before {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.07), transparent 60%) !important;
}

html[data-theme="light"] #store-modal .store-section-title {
    color: #475569 !important;
}

html[data-theme="light"] #store-modal .store-section-title::after {
    background: var(--border-subtle) !important;
}

html[data-theme="light"] #store-modal .store-filter-btn {
    background: #ffffff !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="light"] #store-modal .store-filter-btn[aria-pressed="true"] {
    background: #fff7d6 !important;
    border-color: rgba(217, 119, 6, 0.38) !important;
    color: #92400e !important;
}

html[data-theme="light"] #store-modal .store-guest-banner {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e3a8a !important;
}

html[data-theme="light"] #store-modal .store-guest-banner .text-blue-100 {
    color: #1e3a8a !important;
}

html[data-theme="light"] #store-modal .store-guest-banner .text-blue-200\/70 {
    color: #475569 !important;
}

html[data-theme="light"] #store-modal .store-booster-card {
    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%) !important;
    border-color: #c4b5fd !important;
    box-shadow: 0 8px 24px rgba(109, 40, 217, 0.09) !important;
}

html[data-theme="light"] #store-modal :is(.text-white, .text-zinc-100, .text-zinc-200, .text-zinc-300) {
    color: var(--text-primary) !important;
}

html[data-theme="light"] #store-modal :is(.text-zinc-400, .text-zinc-500, .store-item-copy p) {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] #store-modal :is(.text-yellow-300\/80, .text-yellow-400\/70) {
    color: #92400e !important;
}

html[data-theme="light"] #store-modal .store-action-btn {
    color: #ffffff !important;
}

html[data-theme="light"] #store-modal .store-action-btn.text-black {
    color: #713f12 !important;
}

html[data-theme="light"] #store-modal .store-pkg-card .store-action-btn {
    background: #fff7d6 !important;
    border-color: #facc15 !important;
    color: #92400e !important;
}

html[data-theme="light"] #store-modal #store-close-btn {
    background: #f1f4f7 !important;
    border-color: var(--border-default) !important;
    color: #334155 !important;
}

html[data-theme="light"] #store-modal #store-close-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #store-modal :is(.nc-frost, .nc-blaze, .nc-aurora, .nc-lightning, .nc-legendary) {
    animation: none !important;
    text-shadow: none !important;
}

html[data-theme="light"] #store-modal .nc-frost { color: #0369a1 !important; }
html[data-theme="light"] #store-modal .nc-blaze { color: #c2410c !important; }
html[data-theme="light"] #store-modal .nc-aurora { color: #047857 !important; }
html[data-theme="light"] #store-modal .nc-lightning { color: #6d28d9 !important; }
html[data-theme="light"] #store-modal .nc-legendary { color: #9f1239 !important; }

/* Media viewers and the premium presentation intentionally retain a dark cinema surface. */
html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) {
    color-scheme: dark;
    --bg-base: #000000;
    --bg-surface: #0a0a0c;
    --bg-glass: rgba(15, 23, 42, 0.72);
    --color-background: #000000;
    --color-surface: #0d0d0d;
    --color-elevated: #161616;
    --border-color: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.14);
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --text-inverse: #000000;
    background-color: #000000 !important;
    color: #ffffff !important;
}

html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) :is(input, textarea, select) {
    background-color: #18181b !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) :is(input, textarea)::placeholder {
    color: #a1a1aa !important;
}

html[data-theme="light"] .theme-media-dark :is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100),
html[data-theme="light"] .force-dark-surface :is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100) {
    color: #ffffff !important;
}

html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) :is(
    .text-blue-300, .text-blue-400, .text-blue-500, .text-sky-300, .text-sky-400, .text-sky-500,
    .text-cyan-300, .text-cyan-400, .text-indigo-300, .text-indigo-400,
    .text-violet-300, .text-violet-400, .text-purple-200, .text-purple-300,
    .text-purple-400, .text-fuchsia-300, .text-fuchsia-400) {
    color: #93c5fd !important;
}

html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) :is(
    .text-green-300, .text-green-400, .text-green-500, .text-emerald-300, .text-emerald-400, .text-emerald-500,
    .text-teal-300, .text-teal-400) {
    color: #6ee7b7 !important;
}


html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) :is(
    .text-red-300, .text-red-400, .text-rose-300, .text-rose-400,
    .text-pink-300, .text-pink-400) {
    color: #fda4af !important;
}

html[data-theme="light"] :is(.force-dark-surface, .theme-media-dark) :is(
    .text-orange-300, .text-orange-400, .text-orange-500, .text-amber-200\/80, .text-amber-300,
    .text-amber-400, .text-amber-500, .text-yellow-300, .text-yellow-400, .text-yellow-500) {
    color: #fcd34d !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="light"] *,
    html[data-theme="light"] *::before,
    html[data-theme="light"] *::after {
        scroll-behavior: auto !important;
    }
}