/* ============ ТЕМИ ОФОРМЛЕННЯ РІДЕРА ============ */

/* Світла тема (за замовчуванням) */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
    --accent-primary: #8b5cf6;
    --accent-hover: #7c3aed;
    --accent-soft: #ede9fe;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    --reading-bg: #ffffff;
    --reading-text: #1e293b;
    --reading-link: #8b5cf6;
    --reading-highlight: #fef9c3;
    --reading-selection: #c7d2fe;
    
    --progress-bg: #e2e8f0;
    --progress-fill: #7c3aed;
}

/* Темна тема */
.theme-dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-color: #334155;
    --border-hover: #475569;
    --accent-primary: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-soft: #2e1b4f;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    
    --reading-bg: #0f172a;
    --reading-text: #f1f5f9;
    --reading-link: #a78bfa;
    --reading-highlight: #3f2e1b;
    --reading-selection: #2e1b4f;
    
    --progress-bg: #1e293b;
    --progress-fill: #c084fc;
}

/* Тема "Сепія" */
.theme-sepia {
    --bg-primary: #fbf7f0;
    --bg-secondary: #f3ede3;
    --bg-tertiary: #e8dccc;
    --text-primary: #5b4636;
    --text-secondary: #7d6b5a;
    --text-tertiary: #9f8b7a;
    --border-color: #d9c8b4;
    --border-hover: #c4b2a0;
    --accent-primary: #b45f3a;
    --accent-hover: #9e4f2f;
    --accent-soft: #f0e1d2;
    --overlay-bg: rgba(91, 70, 54, 0.5);
    --shadow-sm: 0 1px 2px 0 rgba(91, 70, 54, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(91, 70, 54, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(91, 70, 54, 0.15);
    
    --reading-bg: #fbf7f0;
    --reading-text: #5b4636;
    --reading-link: #b45f3a;
    --reading-highlight: #f3e3c9;
    --reading-selection: #e8dccc;
    
    --progress-bg: #d9c8b4;
    --progress-fill: #d97706;
}

/* ============ ЗАСТОСУВАННЯ ТЕМ ============ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.2s ease;
}

/* Хедер */
.theme-light .reader-header {
    background-color: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}

.theme-dark .reader-header {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

.theme-sepia .reader-header {
    background-color: #fbf7f0 !important;
    border-bottom-color: #d9c8b4 !important;
}

/* Прогрес-бар */
.theme-light .reading-progress-container {
    background-color: #e2e8f0 !important;
}

.theme-light .reading-progress-bar {
    background-color: #7c3aed !important;
}

.theme-light .reading-progress-percent {
    color: #1e293b !important;
}

.theme-dark .reading-progress-container {
    background-color: #1e293b !important;
}

.theme-dark .reading-progress-bar {
    background-color: #c084fc !important;
}

.theme-dark .reading-progress-percent {
    color: #f1f5f9 !important;
}

.theme-sepia .reading-progress-container {
    background-color: #d9c8b4 !important;
}

.theme-sepia .reading-progress-bar {
    background-color: #d97706 !important;
}

.theme-sepia .reading-progress-percent {
    color: #5b4636 !important;
}

/* Текст книги */
.book-content {
    background-color: var(--reading-bg);
    color: var(--reading-text);
}

/* Футер */
.main-footer {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
}

.main-footer h4 {
    color: var(--text-primary);
}

.main-footer p,
.main-footer a {
    color: var(--text-secondary);
}

.main-footer a:hover {
    color: var(--accent-primary);
}

.footer-bottom {
    color: var(--text-tertiary);
    border-top-color: var(--border-color);
}

/* Посилання */
a, .link {
    color: var(--reading-link);
    transition: color 0.2s;
}

a:hover, .link:hover {
    color: var(--accent-hover);
}

/* Виділення тексту */
.book-content.pro-user ::selection {
    background-color: var(--reading-selection);
    color: var(--text-primary);
}

/* Підсвітка слів */
.word:hover {
    background-color: var(--accent-soft);
}

.word.playing {
    background-color: var(--accent-soft);
    color: var(--accent-primary);
}

/* ============ ПАНЕЛІ ТА КАРТКИ ============ */

.settings-panel,
.reader-sidebar,
.modal-content,
#word-context-menu {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

#word-context-menu .menu-item {
    color: var(--text-primary);
}

#word-context-menu .menu-item:hover {
    background-color: var(--bg-secondary);
    border-left-color: var(--accent-primary);
}

#word-context-menu .menu-item .material-symbols-outlined {
    color: var(--text-secondary);
}

#word-context-menu .menu-item:hover .material-symbols-outlined {
    color: var(--accent-primary);
}

#word-context-menu .menu-divider {
    background-color: var(--border-color);
}

.icon-btn {
    color: var(--text-secondary);
}

.icon-btn:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-primary);
}

.mode-btn, .theme-btn {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.mode-btn:hover, .theme-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.mode-btn.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.lang-select {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.lang-select:focus {
    border-color: var(--accent-primary);
    outline: none;
}

.page-number {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.page-number:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.page-number.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.page-nav {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.page-nav:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.page-nav:disabled {
    opacity: 0.3;
}

.page-dots {
    color: var(--text-tertiary);
}

.translation-overlay,
.ad-overlay {
    background-color: var(--overlay-bg);
}

.translation-overlay h3,
.ad-message {
    color: var(--text-primary);
}

.spinner {
    border-color: var(--border-color);
    border-top-color: var(--accent-primary);
}

.progress-bar {
    background-color: var(--bg-tertiary);
}

.progress-fill {
    background-color: var(--accent-primary);
}

.wait-message {
    color: var(--text-secondary);
}

.ad-content {
    background-color: var(--bg-primary);
}

.ad-timer {
    color: var(--accent-primary);
}

.notification {
    background-color: var(--bg-primary);
    border-left-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.notification.success {
    border-left-color: #10b981;
}

.notification.error {
    border-left-color: #ef4444;
}

.notification.warning {
    border-left-color: #f59e0b;
}

.notification-message {
    color: var(--text-primary);
}

.notification-close {
    color: var(--text-secondary);
}

.notification-close:hover {
    color: var(--accent-primary);
}

.sidebar-overlay {
    background-color: var(--overlay-bg);
}

.sidebar-header,
.settings-header {
    border-bottom-color: var(--border-color);
}

.sidebar-header h3,
.settings-header h3 {
    color: var(--text-primary);
}

.modal-content {
    background-color: var(--bg-primary);
}

.tts-button {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.tts-button:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.tts-button.playing {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.transcription-tooltip {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.transcription-tooltip::before {
    border-bottom-color: var(--text-primary);
}

.mode-option {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.mode-option:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.mode-option.active {
    border-color: var(--accent-primary);
    background-color: var(--accent-soft);
}

.mode-icon {
    background-color: var(--bg-secondary);
}

.mode-icon .material-symbols-outlined {
    color: var(--accent-primary);
}

.mode-name {
    color: var(--text-primary);
}

.mode-description {
    color: var(--text-secondary);
}

.mode-suitable {
    color: var(--text-tertiary);
}

.mode-example {
    background-color: var(--bg-secondary);
    color: var(--accent-primary);
}

.search-highlight {
    background-color: var(--reading-highlight);
}

.search-highlight.current {
    background-color: var(--accent-soft);
    border-color: var(--accent-primary);
}

.bookmarks-panel {
    background-color: var(--bg-primary);
    border-left-color: var(--border-color);
}

.bookmarks-header {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-color);
}

.bookmarks-header h3 {
    color: var(--text-primary);
}

.bookmarks-actions {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

.bookmarks-actions .btn-secondary {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.bookmarks-actions .btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background-color: var(--accent-soft);
}

.bookmark-item {
    border-bottom-color: var(--border-color);
}

.bookmark-item:hover {
    background-color: var(--bg-secondary);
}

.bookmark-original {
    color: var(--text-primary);
}

.bookmark-translation {
    color: var(--text-secondary);
}

.bookmark-meta {
    color: var(--text-tertiary);
}

.vocabulary-panel {
    background-color: var(--bg-primary);
    border-left-color: var(--border-color);
}

.vocabulary-header {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%);
}

.vocabulary-header h3 {
    color: white;
}

.vocabulary-actions {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

.vocabulary-actions .btn-secondary {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.vocabulary-item {
    border-bottom-color: var(--border-color);
}

.vocabulary-item:hover {
    background-color: var(--bg-secondary);
}

.vocabulary-word {
    color: var(--text-primary);
}

.vocabulary-translation {
    color: var(--text-secondary);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--text-tertiary) var(--bg-secondary);
}

@media (max-width: 768px) {
    .settings-panel,
    .reader-sidebar,
    .modal-content,
    #word-context-menu {
        box-shadow: none;
    }
    
    .book-content {
        text-shadow: none;
    }
}

@media (prefers-color-scheme: dark) {
    .theme-auto {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-tertiary: #94a3b8;
        --border-color: #334155;
        --border-hover: #475569;
        --accent-primary: #a78bfa;
        --accent-hover: #c4b5fd;
        --accent-soft: #2e1b4f;
        --overlay-bg: rgba(0, 0, 0, 0.7);
        
        --reading-bg: #0f172a;
        --reading-text: #f1f5f9;
        --reading-link: #a78bfa;
        --reading-highlight: #3f2e1b;
        --reading-selection: #2e1b4f;
        
        --progress-bg: #1e293b;
        --progress-fill: #c084fc;
    }
}

@media print {
    .theme-light,
    .theme-dark,
    .theme-sepia,
    .theme-auto {
        --bg-primary: white;
        --bg-secondary: white;
        --text-primary: black;
        --text-secondary: #333;
        --border-color: #ccc;
        --accent-primary: black;
    }
    
    .reader-header,
    .navigation,
    .settings-panel,
    .reader-sidebar,
    .sidebar-overlay,
    #word-context-menu,
    .translation-overlay,
    .ad-overlay,
    .mini-banner,
    .scroll-top-btn,
    .reading-progress-container {
        display: none !important;
    }
    
    .reader-container {
        margin-top: 0;
        padding: 0;
    }
    
    .book-content {
        user-select: text !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
    }
}