/**
 * Dark Mode Styles for E-Libraro
 * Provides a comprehensive dark theme with optimized colors for night reading
 */

/* ============================================
   CSS VARIABLES - Light Mode (Default)
   ============================================ */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --bg-tertiary: #edf2f7;
    --bg-card: #ffffff;
    --bg-hover: #f7fafc;

    /* Text Colors */
    --text-primary: #2d3748;
    --text-secondary: #718096;
    --text-tertiary: #a0aec0;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-color: #e2e8f0;
    --border-light: #f7fafc;
    --border-dark: #cbd5e0;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Brand Colors (remain same in both modes) */
    --primary: #667eea;
    --primary-dark: #5a67d8;
    --success: #48bb78;
    --warning: #ed8936;
    --danger: #f56565;
    --info: #4299e1;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #48bb78 0%, #38a169 100%);

    /* Transitions */
    --transition-speed: 0.3s;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --bg-card: #2d3748;
    --bg-hover: #374151;

    /* Text Colors */
    --text-primary: #f7fafc;
    --text-secondary: #cbd5e0;
    --text-tertiary: #a0aec0;
    --text-inverse: #1a202c;

    /* Border Colors */
    --border-color: #4a5568;
    --border-light: #2d3748;
    --border-dark: #718096;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
}

/* ============================================
   GLOBAL DARK MODE STYLES
   ============================================ */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Cards & Containers */
[data-theme="dark"] .card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .filters-card,
[data-theme="dark"] .users-card {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

/* Forms & Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .filter-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,
[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary);
}

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

/* Tables */
[data-theme="dark"] table,
[data-theme="dark"] .admin-table,
[data-theme="dark"] .user-table {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] thead,
[data-theme="dark"] .admin-table thead,
[data-theme="dark"] .user-table thead {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] .admin-table tbody tr:hover,
[data-theme="dark"] .user-table tbody tr:hover {
    background-color: var(--bg-hover);
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    border-color: var(--border-color);
}

/* Navigation */
[data-theme="dark"] nav,
[data-theme="dark"] .navbar,
[data-theme="dark"] .admin-sidebar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] .sidebar-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .sidebar-link.active {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* Modals & Popups */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popup,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Badges */
[data-theme="dark"] .badge-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

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

/* PDF Reader */
[data-theme="dark"] #pdf-viewer {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .pdf-toolbar {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Comments & Social */
[data-theme="dark"] .comment,
[data-theme="dark"] .comment-box {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Scrollbars (Webkit) */
[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

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

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

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

/* Alerts */
[data-theme="dark"] .alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

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

/* Admin Specific */
[data-theme="dark"] .admin-page-header {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
}

[data-theme="dark"] .users-header {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.dark-mode-toggle {
    position: relative;
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: var(--bg-hover);
    transform: scale(1.1);
}

.dark-mode-toggle i {
    font-size: 1.3rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.dark-mode-toggle .fa-moon {
    display: none;
}

.dark-mode-toggle .fa-sun {
    display: inline-block;
    color: #f59e0b;
}

[data-theme="dark"] .dark-mode-toggle .fa-moon {
    display: inline-block;
    color: #fbbf24;
}

[data-theme="dark"] .dark-mode-toggle .fa-sun {
    display: none;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */
* {
    transition: background-color var(--transition-speed) ease,
        color var(--transition-speed) ease,
        border-color var(--transition-speed) ease;
}

/* Disable transitions for elements that shouldn't animate */
button,
a,
input[type="submit"],
.btn {
    transition: background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   PRINT STYLES - Force Light Mode
   ============================================ */
@media print {
    [data-theme="dark"] {
        --bg-primary: #ffffff;
        --bg-secondary: #f7fafc;
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --border-color: #e2e8f0;
    }
}