/* Dark Mode Styles for VideoHub Theme */

[data-theme="dark"] {
    /* Dark Mode Colors - Synced with style.css */
    --bg-primary: #0F0F0F;
    --bg-secondary: #1F1F1F;
    --bg-card: #282828;
    --text-primary: #FFFFFF;
    --text-secondary: #DADADA; /* High contrast for readability */
    --text-muted: #E0E0E0;     /* WCAG AA compliant on #282828 */
    --border-color: #3D3D3D;
    --accent-primary: #1557B0;
    --accent-primary-rgb: 21, 87, 176;
    --accent-hover: #0B4AA2;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.4);
}

/* Dark Mode Specific Adjustments */
[data-theme="dark"] .video-card {
    background: var(--bg-card);
}

[data-theme="dark"] .video-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}

[data-theme="dark"] .search-field {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-field:focus {
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--bg-primary);
}

[data-theme="dark"] .upload-dropzone {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .upload-dropzone:hover {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

[data-theme="dark"] .upload-form {
    background: var(--bg-secondary);
}

[data-theme="dark"] .upload-meta input,
[data-theme="dark"] .upload-meta select,
[data-theme="dark"] .upload-meta textarea {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .upload-meta input:focus,
[data-theme="dark"] .upload-meta select:focus,
[data-theme="dark"] .upload-meta textarea:focus {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .no-video-available {
    background: var(--bg-primary);
}

[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .search-suggestions {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .user-menu-list a:hover,
[data-theme="dark"] .search-suggestions a:hover {
    background: var(--bg-primary);
}

[data-theme="dark"] .view-toggle {
    background: var(--bg-primary);
}

[data-theme="dark"] .view-btn.active {
    background: var(--bg-secondary);
}

[data-theme="dark"] .theme-toggle {
    background: var(--bg-primary);
}

[data-theme="dark"] .social-links a {
    background: var(--bg-secondary);
}

[data-theme="dark"] .pagination .page-numbers {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .pagination .page-numbers:hover {
    background: var(--bg-secondary);
}

/* Dark Mode Images & Videos */
[data-theme="dark"] img {
    opacity: 0.95;
}

[data-theme="dark"] .video-thumb img {
    opacity: 1;
}

/* Dark Mode Scrollbar */
[data-theme="dark"]::-webkit-scrollbar {
    width: 12px;
}

[data-theme="dark"]::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: 6px;
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background: #404040;
}

/* Dark Mode Selection */
[data-theme="dark"]::selection {
    background: var(--accent-primary);
    color: white;
}

/* Dark Mode Code Blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--bg-primary);
    color: #E6EDF3;
    border-color: var(--border-color);
}

/* Dark Mode Tables */
[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: var(--border-color);
}

[data-theme="dark"] tr:hover {
    background: var(--bg-secondary);
}
