/**
 * Dark Mode Stylesheet - nooh-school.online
 * Provides dark theme support with CSS custom properties
 * Version: 1.0
 *
 * Features:
 * - Complete dark color palette
 * - Respects system preferences
 * - Smooth transitions between themes
 * - RTL compatible
 */

/* ==========================================================================
   1. DARK MODE CSS VARIABLES
   ========================================================================== */

/**
 * Dark mode color palette
 * Applied via .dark-mode class on html/body element
 */

[data-theme="dark"],
.dark-mode,
html.dark-mode {
    /* Primary colors - adjusted for dark mode */
    --primary-gold: #e5c158;
    --primary-gold-hover: #f0d168;
    --primary-dark: #f5f7fa;
    --primary-teal: #3d9a97;
    --primary-navy: #4a7a9e;
    --accent-teal: #4db8b5;

    /* Text colors */
    --text-dark: #f5f7fa;
    --text-light: #a0aec0;
    --text-muted: #718096;
    /* Aliases for contact.php inline styles */
    --text-color: #f5f7fa;
    --text-secondary: #a0aec0;

    /* Background colors */
    --bg-light: #1a202c;
    --bg-white: #0d1117;
    --bg-card: #161b22;
    --bg-card-hover: #1f2937;
    --bg-input: #21262d;
    /* Aliases for contact.php inline styles */
    --bg-color: #1a202c;
    --card-bg: #161b22;
    --input-bg: #21262d;

    /* Border colors */
    --border-color: #30363d;
    --border-focus: #e5c158;

    /* Shadow adjustments for dark mode */
    --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.5);

    /* Status colors - adjusted for dark backgrounds */
    --success-bg: #064e3b;
    --success-text: #6ee7b7;
    --success-border: #10b981;

    --error-bg: #7f1d1d;
    --error-text: #fca5a5;
    --error-border: #ef4444;

    --warning-bg: #78350f;
    --warning-text: #fcd34d;
    --warning-border: #f59e0b;

    --info-bg: #1e3a5f;
    --info-text: #93c5fd;
    --info-border: #3b82f6;

    /* Gradient adjustments */
    --gradient-hero: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    --gradient-cta: linear-gradient(135deg, #1a4d4a, #2d7a78);
    --gradient-footer: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

/* ==========================================================================
   2. BASE ELEMENT DARK MODE STYLES
   ========================================================================== */

[data-theme="dark"] body,
.dark-mode body {
    background-color: var(--bg-white);
    color: var(--text-dark);
}

/* Links */
[data-theme="dark"] a,
.dark-mode a {
    color: var(--primary-gold);
}

[data-theme="dark"] a:hover,
.dark-mode a:hover {
    color: var(--primary-gold-hover);
}

/* ==========================================================================
   3. HEADER DARK MODE
   ========================================================================== */

[data-theme="dark"] .main-header,
.dark-mode .main-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .nav-links a,
.dark-mode .nav-links a {
    color: var(--text-dark);
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
.dark-mode .nav-links a:hover,
.dark-mode .nav-links a.active {
    color: var(--primary-gold);
}

[data-theme="dark"] .mobile-menu-toggle,
.dark-mode .mobile-menu-toggle {
    color: var(--primary-gold);
}

/* Mobile navigation dropdown */
[data-theme="dark"] .nav-links,
.dark-mode .nav-links {
    background-color: var(--bg-card);
}

@media (max-width: 768px) {
    [data-theme="dark"] .nav-links.active,
    .dark-mode .nav-links.active {
        background-color: var(--bg-card);
        box-shadow: var(--shadow-lg);
    }

    [data-theme="dark"] .nav-links a,
    .dark-mode .nav-links a {
        border-bottom-color: var(--border-color);
    }
}

/* ==========================================================================
   4. HERO SECTION DARK MODE
   ========================================================================== */

[data-theme="dark"] .hero-section,
.dark-mode .hero-section {
    background: var(--gradient-hero);
}

[data-theme="dark"] .hero-text h1,
[data-theme="dark"] .hero-text p,
.dark-mode .hero-text h1,
.dark-mode .hero-text p {
    color: var(--text-dark);
}

/* ==========================================================================
   5. SECTIONS DARK MODE
   ========================================================================== */

/* Programs Section */
[data-theme="dark"] .programs-section,
.dark-mode .programs-section {
    background-color: var(--bg-white);
}

[data-theme="dark"] .programs-section h2,
.dark-mode .programs-section h2 {
    color: var(--text-dark);
}

[data-theme="dark"] .section-subtitle,
.dark-mode .section-subtitle {
    color: var(--text-light);
}

/* Why Us Section */
[data-theme="dark"] .why-us-section,
.dark-mode .why-us-section {
    background-color: var(--bg-light);
}

[data-theme="dark"] .why-us-section h2,
.dark-mode .why-us-section h2 {
    color: var(--text-dark);
}

/* CTA Section */
[data-theme="dark"] .cta-section,
.dark-mode .cta-section {
    background: var(--gradient-cta);
}

/* Testimonials Section */
[data-theme="dark"] .testimonials-section,
.dark-mode .testimonials-section {
    background-color: var(--bg-white);
}

[data-theme="dark"] .testimonials-section h2,
.dark-mode .testimonials-section h2 {
    color: var(--text-dark);
}

/* Page Header */
[data-theme="dark"] .page-header,
.dark-mode .page-header {
    background: var(--gradient-hero);
}

/* Contact Section */
[data-theme="dark"] .contact-section,
.dark-mode .contact-section {
    background-color: var(--bg-white);
}

[data-theme="dark"] .contact-intro,
.dark-mode .contact-intro {
    background: var(--gradient-hero);
}

/* Contact Page Specific Elements */
[data-theme="dark"] .contact-header h1,
.dark-mode .contact-header h1 {
    color: var(--text-dark);
}

[data-theme="dark"] .contact-header p,
.dark-mode .contact-header p {
    color: var(--text-light);
}

[data-theme="dark"] .contact-info,
[data-theme="dark"] .contact-form-wrapper,
.dark-mode .contact-info,
.dark-mode .contact-form-wrapper {
    background-color: var(--bg-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .contact-info h2,
[data-theme="dark"] .contact-form-wrapper h2,
.dark-mode .contact-info h2,
.dark-mode .contact-form-wrapper h2 {
    color: var(--text-dark);
}

[data-theme="dark"] .info-content h3,
.dark-mode .info-content h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .info-content p,
[data-theme="dark"] .info-content a,
.dark-mode .info-content p,
.dark-mode .info-content a {
    color: var(--text-light);
}

[data-theme="dark"] .contact-form-wrapper .form-group label,
.dark-mode .contact-form-wrapper .form-group label {
    color: var(--text-dark);
}

[data-theme="dark"] .contact-form-wrapper .form-group input,
[data-theme="dark"] .contact-form-wrapper .form-group textarea,
.dark-mode .contact-form-wrapper .form-group input,
.dark-mode .contact-form-wrapper .form-group textarea {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .contact-form-wrapper .form-group input::placeholder,
[data-theme="dark"] .contact-form-wrapper .form-group textarea::placeholder,
.dark-mode .contact-form-wrapper .form-group input::placeholder,
.dark-mode .contact-form-wrapper .form-group textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .contact-form-wrapper .alert.success,
.dark-mode .contact-form-wrapper .alert.success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

[data-theme="dark"] .contact-form-wrapper .alert.error,
.dark-mode .contact-form-wrapper .alert.error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border-color: var(--error-border);
}

/* Library Section */
[data-theme="dark"] .library-section,
.dark-mode .library-section {
    background-color: var(--bg-white);
}

/* Video Section */
[data-theme="dark"] .video-section,
.dark-mode .video-section {
    background-color: var(--bg-white);
}

/* ==========================================================================
   6. CARDS DARK MODE
   ========================================================================== */

/* Program Cards */
[data-theme="dark"] .program-card,
.dark-mode .program-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .program-card:hover,
.dark-mode .program-card:hover {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .program-content h3,
.dark-mode .program-content h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .program-content p,
.dark-mode .program-content p {
    color: var(--text-light);
}

[data-theme="dark"] .program-features li,
.dark-mode .program-features li {
    color: var(--text-light);
}

/* Feature Items */
[data-theme="dark"] .feature-item,
.dark-mode .feature-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .feature-item:hover,
.dark-mode .feature-item:hover {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .feature-item h3,
.dark-mode .feature-item h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .feature-item p,
.dark-mode .feature-item p {
    color: var(--text-light);
}

/* Testimonial Cards */
[data-theme="dark"] .testimonial-card,
.dark-mode .testimonial-card {
    background-color: var(--bg-card);
    border-color: var(--primary-gold);
}

[data-theme="dark"] .testimonial-content p,
.dark-mode .testimonial-content p {
    color: var(--text-light);
}

[data-theme="dark"] .testimonial-author,
.dark-mode .testimonial-author {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .author-name,
.dark-mode .author-name {
    color: var(--text-dark);
}

[data-theme="dark"] .author-course,
.dark-mode .author-course {
    color: var(--text-muted);
}

/* Book Cards */
[data-theme="dark"] .book-card,
.dark-mode .book-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .book-card:hover,
.dark-mode .book-card:hover {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .book_cover:hover {
    /* Scale the hovered book by 1.2 */
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.3);
    /* Apply shadow effect */
    cursor: pointer;
}

[data-theme="dark"] .book-details h3,
.dark-mode .book-details h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .book-author,
.dark-mode .book-author {
    color: var(--primary-gold);
}

/* Contact Cards */
[data-theme="dark"] .contact-method,
.dark-mode .contact-method {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .contact-method:hover,
.dark-mode .contact-method:hover {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .contact-method h3,
.dark-mode .contact-method h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .contact-method p,
.dark-mode .contact-method p {
    color: var(--text-light);
}

/* Info Box */
[data-theme="dark"] .contact-info-box,
[data-theme="dark"] .contact-form-box,
.dark-mode .contact-info-box,
.dark-mode .contact-form-box {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .info-item,
.dark-mode .info-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .info-item h4,
.dark-mode .info-item h4 {
    color: var(--text-dark);
}

[data-theme="dark"] .info-item p,
.dark-mode .info-item p {
    color: var(--text-light);
}

/* ==========================================================================
   7. FORMS DARK MODE
   ========================================================================== */

[data-theme="dark"] .form-group label,
.dark-mode .form-group label {
    color: var(--text-dark);
}

[data-theme="dark"] .form-control,
.dark-mode .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .form-control::placeholder,
.dark-mode .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-control:focus,
.dark-mode .form-control:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(229, 193, 88, 0.2);
}

/* Select dropdown */
[data-theme="dark"] select.form-control,
.dark-mode select.form-control {
    background-color: var(--bg-input);
    color: var(--text-dark);
}

/* Search box */
[data-theme="dark"] .search-box input,
.dark-mode .search-box input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .search-box input:focus,
.dark-mode .search-box input:focus {
    border-color: var(--primary-gold);
}

[data-theme="dark"] .search-box i,
.dark-mode .search-box i {
    color: var(--text-muted);
}

/* Filter box */
[data-theme="dark"] .filter-box select,
.dark-mode .filter-box select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

/* Library controls */
[data-theme="dark"] .library-controls,
.dark-mode .library-controls {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* ==========================================================================
   8. BUTTONS DARK MODE
   ========================================================================== */

[data-theme="dark"] .btn-primary,
.dark-mode .btn-primary {
    background-color: var(--primary-gold);
    color: var(--bg-white);
}

[data-theme="dark"] .btn-primary:hover,
.dark-mode .btn-primary:hover {
    background-color: var(--primary-gold-hover);
}

[data-theme="dark"] .btn-secondary,
.dark-mode .btn-secondary {
    background-color: var(--primary-navy);
    color: var(--text-dark);
}

[data-theme="dark"] .btn-secondary:hover,
.dark-mode .btn-secondary:hover {
    background-color: var(--primary-teal);
}

[data-theme="dark"] .btn-outline,
.dark-mode .btn-outline {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

[data-theme="dark"] .btn-outline:hover,
.dark-mode .btn-outline:hover {
    background-color: var(--primary-gold);
    color: var(--bg-white);
}

/* ==========================================================================
   9. FOOTER DARK MODE
   ========================================================================== */

[data-theme="dark"] .main-footer,
.dark-mode .main-footer {
    background: var(--gradient-footer);
}

[data-theme="dark"] .footer-col h3,
.dark-mode .footer-col h3 {
    color: var(--primary-gold);
}

[data-theme="dark"] .footer-col p,
[data-theme="dark"] .footer-col ul li,
.dark-mode .footer-col p,
.dark-mode .footer-col ul li {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .footer-bottom,
.dark-mode .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   10. LOGIN PAGE DARK MODE
   ========================================================================== */

[data-theme="dark"] .login-page,
.dark-mode .login-page {
    background-color: var(--bg-light);
}

[data-theme="dark"] .login-container,
.dark-mode .login-container {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .login-header h1,
.dark-mode .login-header h1 {
    color: var(--text-dark);
}

[data-theme="dark"] .login-header p,
.dark-mode .login-header p {
    color: var(--text-light);
}

[data-theme="dark"] .login-footer,
.dark-mode .login-footer {
    color: var(--text-light);
}

[data-theme="dark"] .note-box,
.dark-mode .note-box {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: var(--primary-gold);
    color: var(--warning-text);
}

/* ==========================================================================
   11. VIDEO PLAYER DARK MODE
   ========================================================================== */

[data-theme="dark"] .video-player-container,
.dark-mode .video-player-container {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .video-info,
.dark-mode .video-info {
    background-color: var(--bg-card);
}

[data-theme="dark"] .video-info h2,
.dark-mode .video-info h2 {
    color: var(--text-dark);
}

[data-theme="dark"] .video-meta,
.dark-mode .video-meta {
    color: var(--text-muted);
}

[data-theme="dark"] .video-description,
.dark-mode .video-description {
    color: var(--text-light);
}

/* ==========================================================================
   12. ALERTS AND MESSAGES DARK MODE
   ========================================================================== */

[data-theme="dark"] .success-message,
.dark-mode .success-message {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

[data-theme="dark"] .error-message,
.dark-mode .error-message {
    color: var(--error-text);
}

[data-theme="dark"] .input-error,
.dark-mode .input-error {
    border-color: var(--error-border) !important;
}

/* ==========================================================================
   13. SOCIAL LINKS DARK MODE
   ========================================================================== */

[data-theme="dark"] .social-links a,
.dark-mode .social-links a {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .social-links a:hover,
.dark-mode .social-links a:hover {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
    color: var(--bg-white);
}

/* ==========================================================================
   14. BREADCRUMB DARK MODE
   ========================================================================== */

[data-theme="dark"] .breadcrumb,
.dark-mode .breadcrumb {
    color: var(--text-light);
}

[data-theme="dark"] .breadcrumb a,
.dark-mode .breadcrumb a {
    color: var(--primary-gold);
}

/* ==========================================================================
   15. DARK MODE TOGGLE BUTTON
   ========================================================================== */

.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-dark, #0a1f2e);
}

.dark-mode-toggle:hover {
    border-color: var(--primary-gold, #d4af37);
    background-color: rgba(212, 175, 55, 0.1);
}

.dark-mode-toggle:focus-visible {
    outline: 3px solid var(--primary-gold, #d4af37);
    outline-offset: 2px;
}

.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Light mode - show moon icon */
.dark-mode-toggle .icon-sun {
    display: none;
}

.dark-mode-toggle .icon-moon {
    display: block;
}

/* Dark mode - show sun icon */
[data-theme="dark"] .dark-mode-toggle .icon-sun,
.dark-mode .dark-mode-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .dark-mode-toggle .icon-moon,
.dark-mode .dark-mode-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle,
.dark-mode .dark-mode-toggle {
    color: var(--primary-gold);
    border-color: var(--border-color);
}

/* ==========================================================================
   16. SYSTEM PREFERENCE SUPPORT
   ========================================================================== */

/**
 * Automatically apply dark mode based on system preference
 * Only applies when no explicit theme is set
 */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light-mode) {
        /* Apply dark mode variables */
        --primary-gold: #e5c158;
        --primary-gold-hover: #f0d168;
        --primary-dark: #f5f7fa;
        --text-dark: #f5f7fa;
        --text-light: #a0aec0;
        --text-muted: #718096;
        /* Aliases for contact.php inline styles */
        --text-color: #f5f7fa;
        --text-secondary: #a0aec0;
        --bg-light: #1a202c;
        --bg-white: #0d1117;
        --bg-card: #161b22;
        /* Aliases for contact.php inline styles */
        --bg-color: #1a202c;
        --card-bg: #161b22;
        --input-bg: #21262d;
        --border-color: #30363d;
        --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.5);
    }
}

/* ==========================================================================
   17. TRANSITION EFFECTS
   ========================================================================== */

/**
 * Smooth transition when switching themes
 * Applied to key elements for a polished experience
 */

body,
.main-header,
.main-footer,
.program-card,
.feature-item,
.testimonial-card,
.book-card,
.contact-method,
.contact-info-box,
.contact-form-box,
.contact-info,
.contact-form-wrapper,
.contact-section,
.contact-header,
.info-content,
.form-control,
.form-group input,
.form-group textarea,
.btn {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Disable transitions during page load to prevent flash */
.no-transitions,
.no-transitions * {
    transition: none !important;
}

/* ==========================================================================
   18. LIBRARY PAGE DARK MODE
   ========================================================================== */

/* Search bar */
[data-theme="dark"] .search_bar,
.dark-mode .search_bar {
    background-color: var(--bg-card);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

[data-theme="dark"] .search_input,
.dark-mode .search_input {
    color: var(--text-dark);
    background: transparent;
}

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

[data-theme="dark"] .search_btn,
.dark-mode .search_btn {
    background-color: var(--primary-gold);
    color: var(--bg-white);
    border-color: var(--bg-card);
}

/* Filter sidebar */
[data-theme="dark"] .filter_side_bar,
.dark-mode .filter_side_bar {
    border-color: var(--border-color);
    background-color: var(--bg-card);
}

[data-theme="dark"] .filter_side_bar .modal-content,
.dark-mode .filter_side_bar .modal-content {
    background-color: var(--bg-card);
}

[data-theme="dark"] .filter_side_bar .form-control,
.dark-mode .filter_side_bar .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .filter_side_bar .form-select,
.dark-mode .filter_side_bar .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

/* Books container */
[data-theme="dark"] .library_container,
.dark-mode .library_container {
    background-color: var(--bg-white);
}

/* Book cards */
[data-theme="dark"] .book_description,
.dark-mode .book_description {
    color: var(--text-dark);
}

[data-theme="dark"] .book_title,
.dark-mode .book_title {
    color: var(--text-dark);
}

[data-theme="dark"] .book_author,
.dark-mode .book_author {
    color: var(--text-light);
}

[data-theme="dark"] .book_cover,
.dark-mode .book_cover {
    border-color: var(--border-color);
}

/* Filter container */
[data-theme="dark"] .filter_container,
.dark-mode .filter_container {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

/* PDF Modal */
[data-theme="dark"] #pdf-modal .modal-content,
.dark-mode #pdf-modal .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] #pdf-canvas,
.dark-mode #pdf-canvas {
    background-color: var(--bg-light);
}

[data-theme="dark"] #page-num,
.dark-mode #page-num {
    background-color: var(--bg-input);
    color: var(--text-dark);
    border-color: var(--primary-gold);
}

[data-theme="dark"] #page-count,
.dark-mode #page-count {
    background-color: var(--primary-gold);
    color: var(--bg-white);
}

[data-theme="dark"] #next-page i,
[data-theme="dark"] #prev-page i,
.dark-mode #next-page i,
.dark-mode #prev-page i {
    color: var(--primary-gold);
}

[data-theme="dark"] .fullscreen-btn,
.dark-mode .fullscreen-btn {
    background-color: var(--bg-card);
    color: var(--primary-gold);
    border-color: var(--border-color);
}

[data-theme="dark"] .fullscreen-btn:hover,
.dark-mode .fullscreen-btn:hover {
    background-color: var(--primary-gold);
    color: var(--bg-white);
}

/* Book description overlay */
[data-theme="dark"] #book-description,
.dark-mode #book-description {
    color: var(--text-dark);
}

[data-theme="dark"] #white-faith,
.dark-mode #white-faith {
    background: linear-gradient(0deg, rgba(22, 27, 34, 0.87) 0%, rgba(22, 27, 34, 0.67) 32%, rgba(22, 27, 34, 0) 100%);
}

/* Loader */
[data-theme="dark"] .loader_book,
.dark-mode .loader_book {
    background-color: var(--bg-light);
}

[data-theme="dark"] .loader_book:before,
.dark-mode .loader_book:before {
    background-color: var(--bg-card);
}

[data-theme="dark"] .loader_book:after,
.dark-mode .loader_book:after {
    background-color: var(--bg-input);
}

/* Filter modal */
[data-theme="dark"] #filterModal .modal-content,
.dark-mode #filterModal .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] #filterModal .modal-footer,
.dark-mode #filterModal .modal-footer {
    border-color: var(--border-color);
}

/* Form check inputs in library */
[data-theme="dark"] .form-check-input,
.dark-mode .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked,
.dark-mode .form-check-input:checked {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
}

[data-theme="dark"] .form-check-label,
.dark-mode .form-check-label {
    color: var(--text-dark);
}

/* Categories list */
[data-theme="dark"] .categories_list,
.dark-mode .categories_list {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

/* Body content area */
[data-theme="dark"] .body_content,
.dark-mode .body_content {
    background-color: var(--bg-white);
}

/* Hero section in library */
[data-theme="dark"] .hero,
.dark-mode .hero {
    background-color: var(--bg-white);
}

/* Input group text */
[data-theme="dark"] .input-group-text,
.dark-mode .input-group-text {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

/* Outline when hover elements */
[data-theme="dark"] .outline_when_hover,
.dark-mode .outline_when_hover {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .outline_when_hover:hover,
[data-theme="dark"] .outline_when_hover:focus,
.dark-mode .outline_when_hover:hover,
.dark-mode .outline_when_hover:focus {
    border-color: var(--primary-gold);
}