/**
 * Dark Theme for Picons Browser
 * Applied when user selects dark mode or system preference is dark
 */

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --border-color: #404040;
    --shadow: rgba(0, 0, 0, 0.5);
    --gradient-start: #4a5568;
    --gradient-end: #2d3748;
    --success-bg: #1e4620;
    --success-border: #2d5a2f;
    --success-text: #7dce82;
    --error-bg: #4a1515;
    --error-border: #6b1f1f;
    --error-text: #f56565;
    --warning-bg: #4a3a15;
    --warning-border: #6b531f;
    --warning-text: #f6ad55;
}

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

/* Login Page - Dark Theme */
[data-theme="dark"] .login-panel {
    background: var(--bg-secondary);
    box-shadow: 0 4px 20px var(--shadow);
}

[data-theme="dark"] .login-panel .panel-heading {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

[data-theme="dark"] .login-panel .form-control {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .login-panel .form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

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

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

[data-theme="dark"] .delay-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

/* Header - Dark Theme */
[data-theme="dark"] .app-header {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
}

[data-theme="dark"] .app-title {
    color: var(--text-primary);
}

[data-theme="dark"] .app-stats {
    color: var(--text-secondary);
}

/* Navigation - Dark Theme */
[data-theme="dark"] .app-nav {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

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

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

[data-theme="dark"] .nav-link.active {
    color: #667eea;
    background-color: var(--bg-primary);
}

/* Search - Dark Theme */
[data-theme="dark"] .search-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus {
    background-color: var(--bg-tertiary);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

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

[data-theme="dark"] .search-counter {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Table - Dark Theme */
[data-theme="dark"] .table-container {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
}

[data-theme="dark"] .results thead {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

[data-theme="dark"] .results tbody tr {
    border-bottom: 1px solid var(--border-color);
}

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

[data-theme="dark"] .results tbody td,
[data-theme="dark"] .results tbody th {
    color: var(--text-primary);
}

[data-theme="dark"] .results tbody th {
    color: var(--text-secondary);
}

[data-theme="dark"] .no-result {
    background-color: var(--warning-bg);
}

[data-theme="dark"] .no-result td {
    color: var(--warning-text);
}

/* Icons - Dark Theme */
[data-theme="dark"] .icon-thumbnail {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* Enhanced hover effect for dark theme */
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] .icon-thumbnail:hover {
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

[data-theme="dark"] .icon-name {
    color: var(--text-primary);
}

[data-theme="dark"] .icon-link {
    color: #7c9ff5;
}

/* Loading Indicator - Dark Theme */
[data-theme="dark"] .loading-indicator {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .loading-indicator p {
    color: var(--text-secondary);
}

[data-theme="dark"] .spinner {
    border-color: var(--bg-primary);
    border-top-color: #667eea;
}

/* Settings Page - Dark Theme */
[data-theme="dark"] .settings-container {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
}

[data-theme="dark"] .settings-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .settings-section h3 {
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

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

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

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-primary);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

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

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

[data-theme="dark"] .alert-danger {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

/* Upload Page - Dark Theme */
[data-theme="dark"] .upload-container {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
}

[data-theme="dark"] .dropzone {
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
}

[data-theme="dark"] .dropzone:hover {
    border-color: #667eea;
    background: var(--bg-secondary);
}

[data-theme="dark"] .dropzone.dz-drag-hover {
    border-color: #667eea;
    background: var(--bg-secondary);
}

[data-theme="dark"] .dropzone .dz-message {
    color: var(--text-secondary);
}

[data-theme="dark"] .dz-preview .dz-details {
    background: var(--bg-primary);
}

[data-theme="dark"] .dz-preview .dz-filename,
[data-theme="dark"] .dz-preview .dz-size {
    color: var(--text-primary);
}

[data-theme="dark"] .dz-success-mark,
[data-theme="dark"] .dz-error-mark {
    color: var(--text-primary);
}

/* Theme Switcher - Dark Theme */
[data-theme="dark"] .theme-switcher {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .theme-option {
    color: var(--text-secondary);
}

[data-theme="dark"] .theme-option:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .theme-option.active {
    background: var(--bg-secondary);
    color: #667eea;
}

/* Language Switcher - Dark Theme */
[data-theme="dark"] .lang-switcher {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .lang-option {
    color: var(--text-secondary);
}

[data-theme="dark"] .lang-option:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .lang-option.active {
    background: var(--bg-secondary);
    color: #667eea;
}

/* Mobile Responsive - Dark Theme */
@media (max-width: 768px) {
    [data-theme="dark"] .results tbody th {
        background: var(--bg-tertiary);
        border-bottom: 1px solid var(--border-color);
    }
}