/*
 * HTML Book Module - Dark Theme
 * Dark mode color scheme for comfortable night reading
 */

[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-code: #282c34;

    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-inverse: #1e1e1e;

    /* Accent Colors (Brighter for dark background) */
    --accent: #4fb3f6;
    --accent-hover: #6bc3ff;
    --accent-light: rgba(79, 179, 246, 0.15);
    --accent-border: rgba(79, 179, 246, 0.4);

    /* Border & Divider Colors */
    --border-color: #404040;
    --border-light: #353535;
    --border-dark: #505050;

    /* Shadow Definitions (Lighter for dark theme) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);

    /* Status Colors (Adjusted for dark theme) */
    --success: #4caf50;
    --warning: #ffb74d;
    --error: #f44336;
    --info: #29b6f6;

    /* Syntax Highlighting (Dark theme) */
    --code-bg: #282c34;
    --code-text: #abb2bf;
    --code-keyword: #61afef;
    --code-string: #98c379;
    --code-comment: #5c6370;
    --code-tag: #e06c75;
    --code-attribute: #c678dd;

    /* Special UI Elements */
    --scrollbar-track: #2d2d2d;
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;

    /* Focus Outline */
    --focus-ring: rgba(79, 179, 246, 0.5);

    /* Overlay */
    --overlay: rgba(0, 0, 0, 0.7);
}

/* Body Background */
body[data-theme="dark"] {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Links */
[data-theme="dark"] a {
    color: var(--accent);
}

[data-theme="dark"] a:hover {
    color: var(--accent-hover);
}

/* Selection */
[data-theme="dark"] ::selection {
    background-color: var(--accent);
    color: var(--text-inverse);
}

[data-theme="dark"] ::-moz-selection {
    background-color: var(--accent);
    color: var(--text-inverse);
}

/* Scrollbar Styling (WebKit) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Form Elements */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

/* Buttons */
[data-theme="dark"] button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] button:hover {
    background-color: var(--bg-tertiary);
}

/* Code Blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background-color: var(--code-bg);
    color: var(--code-text);
}

/* Tables */
[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] tr:nth-child(even) {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] tr:hover {
    background-color: var(--bg-tertiary);
}

/* Blockquotes */
[data-theme="dark"] blockquote {
    border-left-color: var(--accent);
    background-color: var(--bg-secondary);
}

/* HR Dividers */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Badges */
[data-theme="dark"] .badge {
    background-color: var(--accent);
    color: var(--text-inverse);
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: rgba(76, 175, 80, 0.15);
    border-color: var(--success);
    color: #a5d6a7;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 183, 77, 0.15);
    border-color: var(--warning);
    color: #ffcc80;
}

[data-theme="dark"] .alert-error {
    background-color: rgba(244, 67, 54, 0.15);
    border-color: var(--error);
    color: #ef9a9a;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(41, 182, 246, 0.15);
    border-color: var(--info);
    color: #81d4fa;
}

/* Images - Reduce brightness in dark mode */
[data-theme="dark"] img {
    opacity: 0.9;
}

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

/* Improve contrast for certain elements */
[data-theme="dark"] .card,
[data-theme="dark"] .tag-card {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .toc-sidebar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .category-toggle {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .category-toggle:hover {
    background-color: var(--accent);
    color: var(--text-inverse);
}

/* Home Button */
[data-theme="dark"] .home-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .home-btn:hover {
    background-color: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

/* Hamburger Button */
[data-theme="dark"] .hamburger-line {
    background-color: var(--text-primary);
}