/**
 * Dark Mode Theme
 * Provides dark theme variables and smooth theme transitions
 */

/* Dark theme variables */
[data-theme="dark"] {
    /* Backgrounds - GitHub-inspired dark palette */
    --color-bg-primary: #0d1117;
    --color-bg-secondary: #161b22;
    --color-bg-elevated: #1c2128;
    --color-bg-overlay: #21262d;
    
    /* Borders */
    --color-border: #30363d;
    --color-border-subtle: #21262d;
    
    /* Text */
    --color-text-primary: #e6edf3;
    --color-text-secondary: #8d96a0;
    --color-text-tertiary: #6e7681;
    
    /* Surface colors for dark mode */
    --color-surface: #161b22;
    
    /* Grays for dark mode */
    --color-gray-50: #1c2128;
    --color-gray-100: #21262d;
    --color-gray-200: #30363d;
    --color-gray-300: #484f58;
    --color-gray-400: #6e7681;
    --color-gray-500: #8d96a0;
    --color-gray-600: #b1bac4;
    --color-gray-700: #cdd9e5;
    --color-gray-800: #e6edf3;
    --color-gray-900: #f0f6fc;
    
    /* Glassmorphism */
    --glass-bg: rgba(22, 27, 34, 0.7);
    --glass-border: rgba(48, 54, 61, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Neon accents for playful vibe */
    --accent-cyan: #00d4ff;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-green: #10b981;
    
    /* Primary colors adjusted for dark */
    --color-primary-50: #1c2d47;
    --color-primary-100: #1e3a5f;
    --color-primary-500: #60a5fa;
    --color-primary-600: #3b82f6;
    
    /* Success/Warning/Danger for dark */
    --color-success: #3fb950;
    --color-success-bg: #1b4620;
    --color-danger: #f85149;
    --color-danger-bg: #4c1e1b;
    --color-warning: #d29922;
    --color-warning-bg: #4a3518;
    --color-info: #58a6ff;
    --color-info-bg: #1e3a5f;
}

/* Light theme (default) - enhance existing */
[data-theme="light"] {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: #ffffff;
    
    --color-border: #e5e7eb;
    --color-border-subtle: #f3f4f6;
    
    --color-text-primary: #1f2937;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    
    --color-surface: #ffffff;
    
    /* Glassmorphism for light mode */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(229, 231, 235, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    /* Neon accents work in light too */
    --accent-cyan: #0ea5e9;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-green: #10b981;
}

/* Smooth theme transitions for ALL elements */
*,
*::before,
*::after {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load */
html.loading * {
    transition: none !important;
}

/* Body backgrounds */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* Override page background */
.page {
    background-color: var(--color-bg-secondary);
    background-image: none;
}

/* Page Header Dark Mode */
.page-header {
    background-color: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}

.page-title {
    color: var(--color-text-primary);
}

.page-header .text-gray-500 {
    color: var(--color-text-secondary);
}

.page-header-content {
    background: transparent;
}

/* Card backgrounds */
.card {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--color-border);
}

.card-title {
    color: var(--color-text-primary);
}

.card-body {
    background-color: transparent;
}

/* Form inputs */
.form-input,
.form-textarea,
.form-select {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-primary-500);
    background-color: var(--color-bg-elevated);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Table styling for dark mode */
.modern-table {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.modern-table thead {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

.modern-table thead th {
    box-shadow: 0 1px 0 var(--color-border);
}

.modern-table th {
    color: var(--color-text-primary);
}

.modern-table tbody tr {
    border-color: var(--color-border-subtle);
}

.modern-table tbody tr:hover {
    background-color: var(--color-bg-overlay);
}

/* Dialogs */
.dialog {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
}

.dialog-header,
.dialog-footer {
    border-color: var(--color-border);
    background-color: var(--color-bg-elevated);
}

.dialog-body {
    background-color: var(--color-bg-primary);
}

.dialog-title {
    color: var(--color-text-primary);
}

/* Buttons - adjust for dark mode */
[data-theme="dark"] .btn-secondary {
    background-color: var(--color-bg-overlay);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-gray-400);
}

/* Theme toggle button */
.theme-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
    background: var(--color-bg-overlay);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sun/Moon icon animation */
.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-theme="light"] .moon-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

[data-theme="light"] .sun-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="dark"] .sun-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Search box dark mode */
.search-box {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border);
}

/* Pagination */
.pagination {
    border-color: var(--color-border);
}

.pagination-info {
    color: var(--color-text-secondary);
}

/* Quantix header - dark mode gradient */
[data-theme="dark"] .quantix-header {
    background: linear-gradient(to right, #1e3a8a, #1e40af, #3b82f6);
}

/* Accessibility - prefers dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Apply dark theme if no preference set */
    }
}

/* ── Attachments Dark Mode ────────────────────────────────────────────────── */

[data-theme="dark"] .attachment-badge,
[data-theme="dark"] .attachment-badge-btn {
    background: var(--color-primary-50);
    color: var(--color-primary-500);
}

[data-theme="dark"] .attachment-badge:hover,
[data-theme="dark"] .attachment-badge-btn:hover {
    background: var(--color-primary-100);
    color: var(--color-primary-400);
}

[data-theme="dark"] .attachments-dropdown {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .dialog-tabs {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

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

[data-theme="dark"] .dialog-tab:hover {
    color: var(--color-text-primary);
}

[data-theme="dark"] .dialog-tab.active {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

[data-theme="dark"] .attachments-header h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .attachment-count {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .upload-zone {
    border-color: var(--color-border);
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .upload-zone.drag-over {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
}

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

[data-theme="dark"] .upload-prompt .icon-lg {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .upload-hint {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .btn-link {
    color: var(--color-primary-400);
}

[data-theme="dark"] .btn-link:hover {
    color: var(--color-primary-500);
}

[data-theme="dark"] .progress-bar {
    background: var(--color-bg-overlay);
}

[data-theme="dark"] .progress-fill {
    background: var(--color-primary-500);
}

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

[data-theme="dark"] .attachments-empty {
    color: var(--color-text-tertiary);
}

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

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

[data-theme="dark"] .attachment-item:hover {
    background: var(--color-bg-overlay);
}

[data-theme="dark"] .attachment-icon {
    background: var(--color-bg-overlay);
}

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

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

[data-theme="dark"] .attachment-meta {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .attachment-actions .btn-icon {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .attachment-actions .btn-icon:hover {
    color: var(--color-primary-400);
}

[data-theme="dark"] .attachment-actions .btn-delete:hover {
    color: var(--color-danger);
}

[data-theme="dark"] .tab-panel {
    background: var(--color-bg-elevated);
}

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

/* ── Slide Panel Dark Mode ────────────────────────────────────────────────── */

[data-theme="dark"] .app-layout-panel {
    background: var(--color-bg-elevated);
    border-left-color: var(--color-border);
}

[data-theme="dark"] .slide-panel-header {
    background: var(--color-bg-elevated);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .slide-panel-body {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .slide-panel-footer {
    background: var(--color-bg-elevated);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .slide-panel-tabs {
    background: var(--color-bg-elevated);
    border-bottom-color: var(--color-border);
}

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

[data-theme="dark"] .slide-panel-tab:hover {
    color: var(--color-text-primary);
}

[data-theme="dark"] .slide-panel-tab.active {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

[data-theme="dark"] .slide-panel-nav button {
    background: var(--color-bg-overlay);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .slide-panel-nav button:hover:not(:disabled) {
    background: var(--color-bg-secondary);
}

/* ── Filter Panel Dark Mode ────────────────────────────────────────────────── */

[data-theme="dark"] .filter-panel {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .filter-panel-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .filter-panel-header h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .filter-panel-body {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .filter-panel-footer {
    border-top-color: var(--color-border);
    background: var(--color-bg-elevated);
}

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

[data-theme="dark"] .filter-hint {
    color: var(--color-text-tertiary);
}

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

/* ── Chip Select Dark Mode ────────────────────────────────────────────────── */

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

[data-theme="dark"] .chip-select-search:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .chip-select-selected:empty::before {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .chip-select-options {
    background: var(--color-bg-primary);
    border-color: var(--color-border);
}

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

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

[data-theme="dark"] .chip-option.selected {
    background: var(--color-primary-50);
    color: var(--color-text-primary);
}

[data-theme="dark"] .chip-option-check {
    border-color: var(--color-gray-400);
}

[data-theme="dark"] .chip-option.selected .chip-option-check {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

[data-theme="dark"] .chip-select-section {
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .chip-select-empty {
    color: var(--color-text-tertiary);
}

/* ── Active Filter Chips Dark Mode ────────────────────────────────────────── */

[data-theme="dark"] .active-filter-chip {
    background: var(--color-primary-50);
    border-color: var(--color-primary-100);
    color: var(--color-primary-400);
}

[data-theme="dark"] .active-filter-chip:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary-500);
}

[data-theme="dark"] .active-filter-chip-remove {
    color: var(--color-primary-300);
}

[data-theme="dark"] .active-filter-chip-remove:hover {
    color: var(--color-primary-400);
    background: rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .active-filters-clear-all {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .active-filters-clear-all:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}

/* ── Zen Mode Toggle Dark Mode ────────────────────────────────────────────── */

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

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

[data-theme="dark"] .zen-toggle svg {
    stroke: var(--color-text-secondary);
}

[data-theme="dark"] .zen-toggle.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

[data-theme="dark"] .zen-toggle.active svg {
    stroke: white;
}

[data-theme="dark"] .zen-toggle::before {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}