/* Universal Theme System for Novel Reader */

:root {
    --primary: #06b6d4;
    --secondary: #0891b2;
    --accent: #22d3ee;
}

/* Dark theme (default) */
body {
    --bg-primary: #000000 !important;
    --bg-secondary: #0a0a0a !important;
    --bg-card: rgba(6, 182, 212, 0.05) !important;
    --border-color: rgba(6, 182, 212, 0.2) !important;
    --text-primary: #ffffff !important;
    --text-secondary: rgba(255, 255, 255, 0.8) !important;
    --text-muted: rgba(6, 182, 212, 0.6) !important;
    --mesh-1: rgba(6, 182, 212, 0.15) !important;
    --mesh-2: rgba(8, 145, 178, 0.1) !important;
    --mesh-3: rgba(34, 211, 238, 0.08) !important;
    background: #000000 !important;
    color: #ffffff !important;
    transition: background 0.3s, color 0.3s;
}

/* Light theme */
body.light-theme {
    --bg-primary: #ffffff !important;
    --bg-secondary: #f8fafc !important;
    --bg-card: rgba(6, 182, 212, 0.08) !important;
    --border-color: rgba(6, 182, 212, 0.3) !important;
    --text-primary: #0a0a0a !important;
    --text-secondary: #334155 !important;
    --text-muted: #64748b !important;
    --mesh-1: rgba(6, 182, 212, 0.08) !important;
    --mesh-2: rgba(8, 145, 178, 0.05) !important;
    --mesh-3: rgba(34, 211, 238, 0.03) !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
}

/* Update mesh backgrounds for light theme */
body.light-theme .mesh-bg {
    background: 
        radial-gradient(circle at 20% 50%, var(--mesh-1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--mesh-2) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, var(--mesh-3) 0%, transparent 50%) !important;
}

body.light-theme .grid-bg {
    opacity: 0.2 !important;
}

/* Fix text colors in light theme */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme .section-title,
body.light-theme .scraper-title,
body.light-theme .stat-label,
body.light-theme .tagline {
    color: var(--text-primary) !important;
}

body.light-theme p,
body.light-theme span,
body.light-theme div,
body.light-theme label,
body.light-theme li,
body.light-theme a {
    color: var(--text-secondary) !important;
}

body.light-theme .nav a {
    color: var(--text-secondary) !important;
}

body.light-theme .nav a.active {
    color: var(--accent) !important;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea,
body.light-theme button {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.light-theme .section,
body.light-theme .scraper-card,
body.light-theme .stat-card,
body.light-theme .novel-card,
body.light-theme .search-section,
body.light-theme .results-grid {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

body.light-theme .novel-title,
body.light-theme .novel-info {
    color: var(--text-primary) !important;
}

body.light-theme .btn,
body.light-theme .action-btn {
    color: var(--primary) !important;
    border-color: var(--border-color) !important;
}

/* Don't override chapter reading page controls */
body.light-theme .settings-panel,
body.light-theme .bottom-bar,
body.light-theme .top-bar {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
}

body.light-theme .settings-panel *,
body.light-theme .bottom-bar *,
body.light-theme .top-bar * {
    color: #ffffff !important;
}

/* Login/Register page fixes */
body.light-theme .auth-container {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

body.light-theme .auth-container h2,
body.light-theme .auth-container label,
body.light-theme .auth-container p,
body.light-theme .auth-container a {
    color: var(--text-primary) !important;
}

body.light-theme .auth-container input {
    background: rgba(6, 182, 212, 0.05) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.light-theme .auth-container input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

body.light-theme .auth-container button {
    background: var(--primary) !important;
    color: #ffffff !important;
}

/* Fix login widget in light mode */
body.light-theme #loginWidget {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--border-color) !important;
}

body.light-theme #loginWidget input,
body.light-theme #loginWidget select {
    background: rgba(6, 182, 212, 0.05) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.light-theme #loginWidget select option {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

body.light-theme #loginWidget button {
    color: var(--primary) !important;
    border-color: var(--border-color) !important;
}

body.light-theme #currentUsername {
    color: var(--text-primary) !important;
}

/* Fix novel page text in light mode */
body.light-theme .novel-stats,
body.light-theme .missing-chapters,
body.light-theme .episode-item,
body.light-theme .episode-title {
    color: var(--text-primary) !important;
}

body.light-theme .search-input {
    background: rgba(6, 182, 212, 0.05) !important;
    color: var(--text-primary) !important;
}

body.light-theme .search-input::placeholder {
    color: var(--text-muted) !important;
}

/* Fix novel page dropdown and search */
body.light-theme .dropdown-header,
body.light-theme .dropdown-content,
body.light-theme .search-box {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

body.light-theme .search-box input {
    background: rgba(6, 182, 212, 0.05) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.light-theme .search-box input::placeholder {
    color: var(--text-muted) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--primary);
    cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    font-size: 20px;
    transition: all 0.3s;
}

.theme-toggle:hover {
    background: rgba(6, 182, 212, 0.15);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .theme-toggle {
        top: 70px;
        right: 10px;
        padding: 8px 12px;
        font-size: 16px;
    }
}