/* Quest Journal Theme System */

/* ===== DEFAULT THEME (Amber/Medieval) ===== */
:root {
    --theme-primary: #b45309;
    --theme-primary-light: #d97706;
    --theme-primary-dark: #92400e;
    --theme-secondary: #78350f;
    --theme-accent: #fbbf24;
    --theme-bg-start: #78350f;
    --theme-bg-mid: #451a03;
    --theme-bg-end: #1c1917;
    --theme-card-from: #78350f;
    --theme-card-to: #451a03;
    --theme-border: #b45309;
    --theme-text: #fef3c7;
    --theme-text-muted: #fcd34d;
}

/* ===== FOREST KINGDOM ===== */
body.theme-forest {
    --theme-primary: #047857;
    --theme-primary-light: #059669;
    --theme-primary-dark: #065f46;
    --theme-secondary: #064e3b;
    --theme-accent: #34d399;
    --theme-bg-start: #064e3b;
    --theme-bg-mid: #022c22;
    --theme-bg-end: #0f1510;
    --theme-card-from: #033026;
    --theme-card-to: #011812;
    --theme-border: #059669;
    --theme-text: #d1fae5;
    --theme-text-muted: #6ee7b7;
    /* Forest: Leafy pattern overlay */
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(52, 211, 153, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(5, 150, 105, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(6, 78, 59, 0.3) 0%, transparent 70%),
        linear-gradient(to bottom, #064e3b, #022c22, #0f1510) !important;
}

/* ===== DESERT OASIS ===== */
body.theme-desert {
    --theme-primary: #c2410c;
    --theme-primary-light: #ea580c;
    --theme-primary-dark: #9a3412;
    --theme-secondary: #7c2d12;
    --theme-accent: #fdba74;
    --theme-bg-start: #7c2d12;
    --theme-bg-mid: #431407;
    --theme-bg-end: #1a0f0a;
    --theme-card-from: #3d1508;
    --theme-card-to: #1f0a03;
    --theme-border: #ea580c;
    --theme-text: #ffedd5;
    --theme-text-muted: #fdba74;
    /* Desert: Sun rays and sand dunes */
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(253, 186, 116, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 100%, rgba(194, 65, 12, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(154, 52, 18, 0.2) 0%, transparent 40%),
        linear-gradient(to bottom, #7c2d12, #431407, #1a0f0a) !important;
}

/* ===== ICE CITADEL ===== */
body.theme-ice {
    --theme-primary: #0369a1;
    --theme-primary-light: #0284c7;
    --theme-primary-dark: #075985;
    --theme-secondary: #0c4a6e;
    --theme-accent: #7dd3fc;
    --theme-bg-start: #0c4a6e;
    --theme-bg-mid: #082f49;
    --theme-bg-end: #0a1929;
    --theme-card-from: #042d44;
    --theme-card-to: #041928;
    --theme-border: #0284c7;
    --theme-text: #e0f2fe;
    --theme-text-muted: #7dd3fc;
    /* Ice: Frozen crystals and aurora */
    background: 
        radial-gradient(ellipse at 10% 20%, rgba(125, 211, 252, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 80%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 10%, rgba(186, 230, 253, 0.08) 0%, transparent 30%),
        linear-gradient(to bottom, #0c4a6e, #082f49, #0a1929) !important;
}

/* ===== VOLCANIC FORGE ===== */
body.theme-volcanic {
    --theme-primary: #dc2626;
    --theme-primary-light: #ef4444;
    --theme-primary-dark: #b91c1c;
    --theme-secondary: #7f1d1d;
    --theme-accent: #fca5a5;
    --theme-bg-start: #7f1d1d;
    --theme-bg-mid: #450a0a;
    --theme-bg-end: #1a0505;
    --theme-card-from: #3d0b0b;
    --theme-card-to: #1f0505;
    --theme-border: #ef4444;
    --theme-text: #fee2e2;
    --theme-text-muted: #fca5a5;
    /* Volcanic: Lava glow and embers */
    background: 
        radial-gradient(ellipse at 30% 90%, rgba(239, 68, 68, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 85%, rgba(220, 38, 38, 0.2) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(252, 165, 165, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 50%, rgba(185, 28, 28, 0.1) 0%, transparent 35%),
        linear-gradient(to bottom, #7f1d1d, #450a0a, #1a0505) !important;
}

/* ===== MYSTIC REALM ===== */
body.theme-mystic {
    --theme-primary: #7c3aed;
    --theme-primary-light: #8b5cf6;
    --theme-primary-dark: #6d28d9;
    --theme-secondary: #5b21b6;
    --theme-accent: #c4b5fd;
    --theme-bg-start: #5b21b6;
    --theme-bg-mid: #3b0764;
    --theme-bg-end: #1a0533;
    --theme-card-from: #2d1160;
    --theme-card-to: #1a0330;
    --theme-border: #8b5cf6;
    --theme-text: #ede9fe;
    --theme-text-muted: #c4b5fd;
    /* Mystic: Magical orbs and starfield */
    background: 
        radial-gradient(ellipse at 25% 25%, rgba(139, 92, 246, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 75% 20%, rgba(196, 181, 253, 0.15) 0%, transparent 35%),
        radial-gradient(ellipse at 60% 70%, rgba(124, 58, 237, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 15% 80%, rgba(167, 139, 250, 0.12) 0%, transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.1) 0%, transparent 25%),
        linear-gradient(to bottom, #5b21b6, #3b0764, #1a0533) !important;
}

/* ===== GOLDEN EMPIRE ===== */
body.theme-golden {
    --theme-primary: #ca8a04;
    --theme-primary-light: #eab308;
    --theme-primary-dark: #a16207;
    --theme-secondary: #854d0e;
    --theme-accent: #fde047;
    --theme-bg-start: #854d0e;
    --theme-bg-mid: #422006;
    --theme-bg-end: #1a0f03;
    --theme-card-from: #402804;
    --theme-card-to: #1f0f03;
    --theme-border: #eab308;
    --theme-text: #fef9c3;
    --theme-text-muted: #fde047;
    /* Golden: Royal shimmer and treasure glow */
    background: 
        radial-gradient(ellipse at 50% 10%, rgba(253, 224, 71, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 60%, rgba(234, 179, 8, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 40%, rgba(202, 138, 4, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(161, 98, 7, 0.12) 0%, transparent 35%),
        linear-gradient(to bottom, #854d0e, #422006, #1a0f03) !important;
}

/* ===== SHADOW REALM ===== */
body.theme-shadow {
    --theme-primary: #374151;
    --theme-primary-light: #4b5563;
    --theme-primary-dark: #1f2937;
    --theme-secondary: #111827;
    --theme-accent: #9ca3af;
    --theme-bg-start: #1f2937;
    --theme-bg-mid: #111827;
    --theme-bg-end: #030712;
    --theme-card-from: #1f2937;
    --theme-card-to: #0f1623;
    --theme-border: #374151;
    --theme-text: #e5e7eb;
    --theme-text-muted: #9ca3af;
    /* Shadow: Dark mist and void wisps */
    background: 
        radial-gradient(ellipse at 40% 30%, rgba(75, 85, 99, 0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 60%, rgba(55, 65, 81, 0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgba(107, 114, 128, 0.08) 0%, transparent 35%),
        radial-gradient(ellipse at 90% 20%, rgba(75, 85, 99, 0.1) 0%, transparent 30%),
        linear-gradient(to bottom, #1f2937, #111827, #030712) !important;
}

/* ===== COMMON THEME OVERRIDES ===== */

/* Sidebar - solid themed gradient like default */
body[class*="theme-"] #main-sidebar,
body[class*="theme-"] #main-sidebar.bg-gradient-to-b,
body[class*="theme-"] [class*="bg-gradient-to-b"][class*="from-amber-900"] {
    background: linear-gradient(to bottom, var(--theme-bg-start), var(--theme-bg-mid), var(--theme-bg-end)) !important;
    border-color: var(--theme-border) !important;
}

/* Main content area - solid themed background */
body[class*="theme-"] .flex-1.overflow-y-auto,
body[class*="theme-"] .bg-stone-800 {
    background: var(--theme-bg-mid) !important;
}

/* View container headers - blend with background */
body[class*="theme-"] .view-container > header {
    background: transparent !important;
}

/* Dashboard header and title banner - blend with background */
body[class*="theme-"] #dashboard-view > header,
body[class*="theme-"] #current-title-banner {
    background: transparent !important;
}

/* All cards */
body[class*="theme-"] .quest-card,
body[class*="theme-"] [class*="bg-gradient-to-br"][class*="from-amber"],
body[class*="theme-"] [class*="bg-gradient-to-br"][class*="from-yellow"] {
    background: linear-gradient(to bottom right, var(--theme-card-from), var(--theme-card-to)) !important;
    background-image: linear-gradient(to bottom right, var(--theme-card-from), var(--theme-card-to)) !important;
    border-color: var(--theme-border) !important;
}

/* Card borders */
body[class*="theme-"] [class*="border-amber"],
body[class*="theme-"] [class*="border-yellow"] {
    border-color: var(--theme-border) !important;
}

/* Primary text */
body[class*="theme-"] .medieval-title,
body[class*="theme-"] [class*="text-amber-300"],
body[class*="theme-"] [class*="text-amber-400"],
body[class*="theme-"] [class*="text-yellow-300"],
body[class*="theme-"] [class*="text-yellow-400"] {
    color: var(--theme-accent) !important;
}

/* Secondary text */
body[class*="theme-"] [class*="text-amber-200"],
body[class*="theme-"] [class*="text-yellow-200"] {
    color: var(--theme-text) !important;
}

/* Muted text */
body[class*="theme-"] [class*="text-amber-100"],
body[class*="theme-"] [class*="text-yellow-100"] {
    color: var(--theme-text-muted) !important;
}

/* Primary buttons */
body[class*="theme-"] [class*="bg-amber-600"],
body[class*="theme-"] [class*="bg-amber-700"],
body[class*="theme-"] [class*="bg-yellow-600"],
body[class*="theme-"] [class*="bg-yellow-700"] {
    background-color: var(--theme-primary) !important;
}

body[class*="theme-"] [class*="hover:bg-amber"]:hover,
body[class*="theme-"] [class*="hover:bg-yellow"]:hover {
    background-color: var(--theme-primary-light) !important;
}

/* Gradient buttons - exclude quest-card panels */
body[class*="theme-"] [class*="from-amber"]:not(.quest-card),
body[class*="theme-"] [class*="from-yellow"]:not(.quest-card) {
    --tw-gradient-from: var(--theme-primary) !important;
}

body[class*="theme-"] [class*="to-amber"]:not(.quest-card),
body[class*="theme-"] [class*="to-yellow"]:not(.quest-card) {
    --tw-gradient-to: var(--theme-primary-dark) !important;
}

/* Nav links */
body[class*="theme-"] .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left-color: var(--theme-accent) !important;
}

body[class*="theme-"] .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Player panel */
body[class*="theme-"] #player-panel-sheet .quest-card {
    background: linear-gradient(to bottom, var(--theme-card-from), var(--theme-card-to)) !important;
    border-color: var(--theme-border) !important;
}

/* Input fields */
body[class*="theme-"] input[type="text"],
body[class*="theme-"] input[type="number"],
body[class*="theme-"] textarea,
body[class*="theme-"] select {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body[class*="theme-"] input::placeholder,
body[class*="theme-"] textarea::placeholder {
    color: var(--theme-text-muted) !important;
    opacity: 0.6;
}

/* Modals */
body[class*="theme-"] [class*="bg-gradient-to-br"][class*="from-amber-800"],
body[class*="theme-"] [class*="bg-gradient-to-br"][class*="from-yellow-800"] {
    background: linear-gradient(to bottom right, var(--theme-secondary), var(--theme-bg-end)) !important;
}

/* Bottom navigation (mobile) */
body[class*="theme-"] #bottom-nav {
    background: linear-gradient(to right, var(--theme-bg-start), var(--theme-secondary)) !important;
    border-color: var(--theme-border) !important;
}

body[class*="theme-"] #bottom-nav .nav-btn.active {
    color: var(--theme-accent) !important;
}

/* XP bar */
body[class*="theme-"] #xp-progress,
body[class*="theme-"] [class*="bg-gradient"][class*="amber"] {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-accent)) !important;
}

/* Hover effects on cards */
body[class*="theme-"] .quest-card:hover {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 20px rgba(var(--theme-accent), 0.2) !important;
}

/* Checkboxes and toggles */
body[class*="theme-"] input[type="checkbox"]:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-accent) !important;
}

/* Scrollbar theming */
body[class*="theme-"] ::-webkit-scrollbar-thumb {
    background-color: var(--theme-primary) !important;
}

body[class*="theme-"] ::-webkit-scrollbar-track {
    background-color: var(--theme-bg-end) !important;
}

/* Achievement notifications */
body[class*="theme-"] .achievement-notification {
    background: linear-gradient(to right, var(--theme-card-from), var(--theme-card-to)) !important;
    border-color: var(--theme-accent) !important;
}

/* Premium card */
body[class*="theme-"] #premium-content {
    background: linear-gradient(to bottom right, var(--theme-card-from), var(--theme-card-to)) !important;
}

/* Header area */
body[class*="theme-"] header,
body[class*="theme-"] .header-section {
    background: linear-gradient(to right, var(--theme-bg-start), var(--theme-secondary)) !important;
}

/* Section headers */
body[class*="theme-"] h2[class*="text-amber"],
body[class*="theme-"] h3[class*="text-amber"],
body[class*="theme-"] h2[class*="text-yellow"],
body[class*="theme-"] h3[class*="text-yellow"] {
    color: var(--theme-accent) !important;
}

/* Light background overrides (task items, light cards, etc.) */
body[class*="theme-"] .bg-amber-50,
body[class*="theme-"] .bg-amber-100,
body[class*="theme-"] .bg-stone-100,
body[class*="theme-"] .bg-stone-200,
body[class*="theme-"] .bg-gray-100,
body[class*="theme-"] .bg-gray-200,
body[class*="theme-"] .bg-slate-100,
body[class*="theme-"] .bg-slate-200,
body[class*="theme-"] .bg-white {
    background-color: var(--theme-card-from) !important;
}

body[class*="theme-"] .hover\:bg-amber-100:hover,
body[class*="theme-"] .hover\:bg-amber-50:hover {
    background-color: var(--theme-primary-light) !important;
}

/* Light text that should adapt to themed backgrounds */
body[class*="theme-"] .task-item .text-amber-900,
body[class*="theme-"] .task-item .text-stone-900,
body[class*="theme-"] .task-item .text-gray-900 {
    color: var(--theme-text) !important;
}

/* Light border overrides on task items */
body[class*="theme-"] .border-amber-300,
body[class*="theme-"] .border-amber-200 {
    border-color: var(--theme-border) !important;
}

/* Theme selector styling */
.theme-option {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.theme-option:hover {
    transform: scale(1.05);
}

.theme-option.selected {
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

.theme-option.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

.theme-option.locked:hover {
    transform: none;
}

/* ===== ANIMATED BACKGROUND OVERRIDES ===== */
/* These MUST be at the end to override theme backgrounds */

/* Make body background transparent when animated bg is active */
body.has-theme-bg.theme-forest,
body.has-theme-bg.theme-desert,
body.has-theme-bg.theme-ice,
body.has-theme-bg.theme-volcanic,
body.has-theme-bg.theme-mystic,
body.has-theme-bg.theme-golden,
body.has-theme-bg.theme-shadow {
    background: transparent !important;
}

/* Make main content area transparent so GIF shows through */
body.has-theme-bg.theme-forest .flex-1.overflow-y-auto,
body.has-theme-bg.theme-forest .bg-stone-800,
body.has-theme-bg.theme-desert .flex-1.overflow-y-auto,
body.has-theme-bg.theme-desert .bg-stone-800,
body.has-theme-bg.theme-ice .flex-1.overflow-y-auto,
body.has-theme-bg.theme-ice .bg-stone-800,
body.has-theme-bg.theme-volcanic .flex-1.overflow-y-auto,
body.has-theme-bg.theme-volcanic .bg-stone-800,
body.has-theme-bg.theme-mystic .flex-1.overflow-y-auto,
body.has-theme-bg.theme-mystic .bg-stone-800,
body.has-theme-bg.theme-golden .flex-1.overflow-y-auto,
body.has-theme-bg.theme-golden .bg-stone-800,
body.has-theme-bg.theme-shadow .flex-1.overflow-y-auto,
body.has-theme-bg.theme-shadow .bg-stone-800 {
    background: transparent !important;
}

/* ===== CUSTOM SCROLLBARS PER THEME ===== */

/* Default/Amber theme scrollbar */
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f59e0b, #d97706);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

/* Forest theme scrollbar */
body.theme-forest::-webkit-scrollbar-track,
body.theme-forest *::-webkit-scrollbar-track {
    background: rgba(6, 78, 59, 0.3);
}

body.theme-forest::-webkit-scrollbar-thumb,
body.theme-forest *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #10b981, #059669);
}

body.theme-forest::-webkit-scrollbar-thumb:hover,
body.theme-forest *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #34d399, #10b981);
}

/* Desert theme scrollbar */
body.theme-desert::-webkit-scrollbar-track,
body.theme-desert *::-webkit-scrollbar-track {
    background: rgba(124, 45, 18, 0.3);
}

body.theme-desert::-webkit-scrollbar-thumb,
body.theme-desert *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fb923c, #ea580c);
}

body.theme-desert::-webkit-scrollbar-thumb:hover,
body.theme-desert *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fdba74, #fb923c);
}

/* Ice theme scrollbar */
body.theme-ice::-webkit-scrollbar-track,
body.theme-ice *::-webkit-scrollbar-track {
    background: rgba(12, 74, 110, 0.3);
}

body.theme-ice::-webkit-scrollbar-thumb,
body.theme-ice *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}

body.theme-ice::-webkit-scrollbar-thumb:hover,
body.theme-ice *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
}

/* Volcanic theme scrollbar */
body.theme-volcanic::-webkit-scrollbar-track,
body.theme-volcanic *::-webkit-scrollbar-track {
    background: rgba(127, 29, 29, 0.3);
}

body.theme-volcanic::-webkit-scrollbar-thumb,
body.theme-volcanic *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

body.theme-volcanic::-webkit-scrollbar-thumb:hover,
body.theme-volcanic *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f87171, #ef4444);
}

/* Mystic theme scrollbar */
body.theme-mystic::-webkit-scrollbar-track,
body.theme-mystic *::-webkit-scrollbar-track {
    background: rgba(91, 33, 182, 0.3);
}

body.theme-mystic::-webkit-scrollbar-thumb,
body.theme-mystic *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6);
}

body.theme-mystic::-webkit-scrollbar-thumb:hover,
body.theme-mystic *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c4b5fd, #a78bfa);
}

/* Golden theme scrollbar */
body.theme-golden::-webkit-scrollbar-track,
body.theme-golden *::-webkit-scrollbar-track {
    background: rgba(133, 77, 14, 0.3);
}

body.theme-golden::-webkit-scrollbar-thumb,
body.theme-golden *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #facc15, #eab308);
}

body.theme-golden::-webkit-scrollbar-thumb:hover,
body.theme-golden *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fde047, #facc15);
}

/* Shadow theme scrollbar */
body.theme-shadow::-webkit-scrollbar-track,
body.theme-shadow *::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.4);
}

body.theme-shadow::-webkit-scrollbar-thumb,
body.theme-shadow *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6b7280, #4b5563);
}

body.theme-shadow::-webkit-scrollbar-thumb:hover,
body.theme-shadow *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9ca3af, #6b7280);
}