/* Dark Mode - Elegant Night Reading */

[data-theme="dark"] {
    /* Dark Theme Colors */
    --color-bg: #1A1A1A;
    --color-bg-secondary: #2A2A2A;
    --color-text: #E5E5E5;
    --color-text-secondary: #A0A0A0;
    --color-text-strong: #FFFFFF;
    --color-primary: #3B82F6;
    --color-border: #3A3A3A;
    --color-code-bg: #2A2A2A;
    --color-code-block-bg: #0F172A;
    --color-code-text: #E2E8F0;
}

[data-theme="dark"] .book-page {
    background: #222222;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .chapter-header {
    background: rgba(26, 26, 26, 0.95);
}

[data-theme="dark"] .progress-bar {
    background: #2A2A2A;
}

/* Sidebar Dark Mode */
[data-theme="dark"] .sidebar {
    background: #1A1A1A;
    border-right-color: #3A3A3A;
}

[data-theme="dark"] .sidebar-link:hover {
    background: #2A2A2A;
}

[data-theme="dark"] .sidebar-link.active {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .outline-sidebar {
    background: #1A1A1A;
    border-left-color: #3A3A3A;
}

[data-theme="dark"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .sidebar-toggle {
    color: #E5E5E5;
}

/* Exercise Dark Mode */
[data-theme="dark"] .exercise {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E293B 100%);
}

[data-theme="dark"] .exercise.easy {
    background: linear-gradient(135deg, #1E3A2F 0%, #1A2E1A 100%);
}

[data-theme="dark"] .exercise.medium {
    background: linear-gradient(135deg, #3A2E1F 0%, #2A2010 100%);
}

[data-theme="dark"] .exercise.hard {
    background: linear-gradient(135deg, #3A1F1F 0%, #2A1010 100%);
}

/* Callout Dark Mode */
[data-theme="dark"] .callout {
    background: #2A2A2A;
}

[data-theme="dark"] .callout.info {
    background: #1E3A5F;
}

[data-theme="dark"] .callout.warning {
    background: #3A2E1F;
}

[data-theme="dark"] .callout.success {
    background: #1E3A2F;
}

[data-theme="dark"] .callout.danger {
    background: #3A1F1F;
}

[data-theme="dark"] .reading-progress {
    background: #222222;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .nav-btn.toc-btn {
    background: #2A2A2A;
    color: var(--color-text);
}

[data-theme="dark"] .nav-btn.toc-btn:hover {
    background: #3A3A3A;
}

[data-theme="dark"] th {
    background: #2A2A2A;
}

[data-theme="dark"] tr:nth-child(even) {
    background: #252525;
}

/* Dark Mode Toggle Icon */
#theme-toggle::after {
    content: '\1F319';
}

[data-theme="dark"] #theme-toggle::after {
    content: '\2600\FE0F';
}

/* Smooth Theme Transition */
body,
.book-page,
.chapter-header,
.nav-btn,
.exercise,
.callout,
.sidebar,
.outline-sidebar {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}

/* Syntax Highlighting for Dark Mode */
[data-theme="dark"] pre {
    background: #0F172A;
}

[data-theme="dark"] code {
    background: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
}

/* Link Colors in Dark Mode */
[data-theme="dark"] a {
    color: #60A5FA;
}

[data-theme="dark"] a:hover {
    color: #93C5FD;
    border-bottom-color: #60A5FA;
}

/* Selection in Dark Mode */
[data-theme="dark"] ::selection {
    background: #3B82F6;
    color: white;
}

/* Scrollbar Styling for Dark Mode */
[data-theme="dark"]::-webkit-scrollbar {
    width: 12px;
}

[data-theme="dark"]::-webkit-scrollbar-track {
    background: #1A1A1A;
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
    background: #3A3A3A;
    border-radius: 6px;
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background: #4A4A4A;
}

/* Sidebar Scrollbar Dark Mode */
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .outline-sidebar::-webkit-scrollbar-thumb {
    background: #3A3A3A;
}

[data-theme="dark"] .sidebar {
    scrollbar-color: #3A3A3A transparent;
}

[data-theme="dark"] .outline-sidebar {
    scrollbar-color: #3A3A3A transparent;
}

/* Images in Dark Mode - Slight Opacity Reduction */
[data-theme="dark"] img {
    opacity: 0.9;
    max-width: 100% !important;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Ensure images stay within container in dark mode */
[data-theme="dark"] .book-page img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* System Dark Mode Preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #1A1A1A;
        --color-bg-secondary: #2A2A2A;
        --color-text: #E5E5E5;
        --color-text-secondary: #A0A0A0;
        --color-text-strong: #FFFFFF;
        --color-primary: #3B82F6;
        --color-border: #3A3A3A;
        --color-code-bg: #2A2A2A;
        --color-code-block-bg: #0F172A;
        --color-code-text: #E2E8F0;
    }
}