/* ============================================
   DARK-MODE.css - All Dark Mode Overrides
   ============================================
   Contains:
   - Dark mode cards and containers
   - Dark mode text colors
   - Dark mode inputs and forms
   - Dark mode buttons
   - Dark mode PDF elements
   - Dark mode dashboard elements
   - Dark mode status messages
   - Dark mode modal overlays
   - Dark mode admin elements
   - Dark mode mobile menu
   ============================================ */

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode cards */
.dark-mode .card,
.dark-mode .dashboard,
.dark-mode .intro-section,
.dark-mode .modal,
.dark-mode .dashboard-card,
.dark-mode .template-item,
.dark-mode .history-item,
.dark-mode .settings-section,
.dark-mode .admin-message-item,
.dark-mode .admin-user-item,
.dark-mode .analytics-stat-card,
.dark-mode .admin-stat-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark mode text */
.dark-mode .card-title,
.dark-mode .dashboard-welcome h2,
.dark-mode .dashboard-card-header h3,
.dark-mode .settings-section h4,
.dark-mode .admin-message-from,
.dark-mode .admin-user-email,
.dark-mode .template-name,
.dark-mode .history-pdfs,
.dark-mode .step-title,
.dark-mode .step-desc,
.dark-mode .intro-title {
    color: var(--text-primary);
}

/* Dark mode secondary text */
.dark-mode .dashboard-welcome p,
.dark-mode .template-fields,
.dark-mode .history-fields,
.dark-mode .history-date,
.dark-mode .admin-message-date,
.dark-mode .admin-user-name,
.dark-mode .step-detail-item {
    color: var(--text-secondary);
}

/* Dark mode inputs */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-muted);
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: #7c3aed;
}

/* Dark mode buttons */
.dark-mode .btn-outline {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.dark-mode .btn-outline:hover {
    background: var(--bg-secondary);
}

/* Dark mode PDF list */
.dark-mode .pdf-item {
    background: var(--bg-tertiary);
}

.dark-mode .pdf-item:hover,
.dark-mode .pdf-item.active {
    background: var(--accent-light);
}

.dark-mode .pdf-item-name {
    color: var(--text-primary);
}

/* Dark mode fields */
.dark-mode .field-item {
    background: var(--bg-tertiary);
}

.dark-mode .field-item.selected {
    background: var(--accent-light);
    border-color: #7c3aed;
}

/* Dark mode extracted items */
.dark-mode .extracted-item {
    background: var(--accent-light);
}

.dark-mode .field-name {
    color: #a78bfa;
}

/* Dark mode upload area */
.dark-mode .upload-area:hover {
    background: var(--accent-light);
}

/* Dark mode usage card */
.dark-mode .usage-info-card {
    background: var(--accent-light);
    border-color: var(--accent-border);
}

.dark-mode .usage-info-card span {
    color: #a78bfa;
}

/* Dark mode stat cards */
.dark-mode .stat-card {
    background: var(--accent-light);
    border-color: var(--accent-border);
}

.dark-mode .stat-value {
    color: #a78bfa;
}

.dark-mode .stat-label {
    color: #c4b5fd;
}

/* Dark mode admin stats */
.dark-mode .admin-stat-value,
.dark-mode .analytics-stat-value {
    color: #a78bfa;
}

/* Dark mode tables/lists */
.dark-mode .templates-grid,
.dark-mode .history-list,
.dark-mode .admin-users-list,
.dark-mode .admin-messages-list {
    background: transparent;
}

/* Dark mode empty states */
.dark-mode .empty-state {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-muted);
}

/* Dark mode tabs */
.dark-mode .tab-btn {
    color: var(--text-secondary);
}

.dark-mode .tab-btn:hover {
    background: var(--accent-light);
    color: #a78bfa;
}

/* Dark mode collapsible */
.dark-mode .collapsible-header {
    background: var(--bg-secondary);
}

.dark-mode .collapsible-header:hover {
    background: var(--bg-tertiary);
}

/* Dark mode analytics chart */
.dark-mode .analytics-chart,
.dark-mode .analytics-events-list {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-mode .analytics-event-item {
    background: var(--bg-tertiary);
}

/* Dark mode modal overlay */
.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* Dark mode delete modal header */
.dark-mode .delete-modal-header {
    background: var(--accent-light);
}

/* Dark mode password toggle */
.dark-mode .password-toggle {
    color: var(--text-muted);
}

.dark-mode .password-toggle:hover {
    color: var(--text-secondary);
}

/* Dark mode OCR status */
.dark-mode .ocr-status {
    background: #422006;
    border-color: #b45309;
    color: #fcd34d;
}

/* Dark mode info banner */
.dark-mode .info-banner {
    background: var(--accent-light);
    border-color: var(--accent-border);
    color: #c4b5fd;
}

/* Dark mode step cards */
.dark-mode .step-card {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Dark mode status messages */
.dark-mode .status.success {
    background: #064e3b;
    color: #6ee7b7;
}

.dark-mode .status.error {
    background: #7f1d1d;
    color: #fca5a5;
}

.dark-mode .settings-message.success {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

.dark-mode .settings-message.error {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #dc2626;
}

/* Dark mode danger zone */
.dark-mode .danger-zone {
    background: #450a0a;
    border-color: #7f1d1d;
}

.dark-mode .danger-zone h4 {
    color: #f87171;
}

/* Dark mode admin badge */
.dark-mode .admin-badge.user {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Dark mode PDF preview */
.dark-mode .pdf-preview {
    background: var(--bg-tertiary);
}

.dark-mode .pdf-placeholder {
    color: var(--text-muted);
}

/* Dark mode dropdown menus */
.dark-mode #userMenu {
    background: var(--bg-secondary);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* Dark mode select dropdown options */
.dark-mode select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ============================================
   DARK MODE MOBILE MENU
   ============================================ */

.dark-mode .mobile-menu-dropdown {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode .mobile-menu-item {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark-mode .mobile-menu-item::before {
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

.dark-mode .mobile-menu-item:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    border-color: #7c3aed;
    color: #a78bfa;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.dark-mode .mobile-menu-item > span:first-child {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
}

.dark-mode .mobile-menu-item:hover > span:first-child {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.dark-mode .mobile-menu-item.highlight {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
}

.dark-mode .mobile-menu-item.danger {
    background: linear-gradient(135deg, #450a0a 0%, #1f2937 100%);
    border-color: #991b1b;
    color: #fca5a5;
}

.dark-mode .mobile-menu-item.danger:hover {
    background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%);
    border-color: #ef4444;
}

.dark-mode .mobile-menu-item.danger > span:first-child {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
}

.dark-mode .mobile-menu-item.user-info-item {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #a78bfa;
    border-color: #7c3aed;
}

.dark-mode .mobile-menu-item.user-info-item > span:first-child {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.dark-mode .mobile-menu-divider {
    background: linear-gradient(90deg, transparent, #4b5563, transparent);
}

.dark-mode .mobile-lang-switcher {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border-color: #7c3aed;
}

.dark-mode .mobile-lang-switcher span {
    color: #a78bfa;
}

.dark-mode .mobile-lang-switcher select {
    background: #1f2937;
    border-color: #7c3aed;
    color: #a78bfa;
}