/* Dynamic Theming & Dark Mode Mapping */
:root {
    /* Neutral Base (Light) */
    --color-white: #ffffff;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* Semantic Primary Brand Colors (Default Blue) */
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #1e3a8a;
}

[data-theme="emerald"] {
    --color-brand-50: #ecfdf5; --color-brand-100: #d1fae5; --color-brand-200: #a7f3d0; --color-brand-300: #6ee7b7; --color-brand-400: #34d399; --color-brand-500: #10b981; --color-brand-600: #059669; --color-brand-700: #047857; --color-brand-800: #065f46; --color-brand-900: #064e3b;
}

[data-theme="rose"] {
    --color-brand-50: #fff1f2; --color-brand-100: #ffe4e6; --color-brand-200: #fecdd3; --color-brand-300: #fda4af; --color-brand-400: #fb7185; --color-brand-500: #f43f5e; --color-brand-600: #e11d48; --color-brand-700: #be123c; --color-brand-800: #9f1239; --color-brand-900: #881337;
}

[data-theme="violet"] {
    --color-brand-50: #f5f3ff; --color-brand-100: #ede9fe; --color-brand-200: #ddd6fe; --color-brand-300: #c4b5fd; --color-brand-400: #a78bfa; --color-brand-500: #8b5cf6; --color-brand-600: #7c3aed; --color-brand-700: #6d28d9; --color-brand-800: #5b21b6; --color-brand-900: #4c1d95;
}

/* Pure Dark Mode Override 
   (We specifically avoid overriding the core "white" tailwind variable so text-white buttons remain fully visible!) 
*/
[data-mode="dark"] body, 
[data-mode="dark"] .bg-slate-50 { background-color: #0f172a !important; }

[data-mode="dark"] .bg-white { background-color: #1e293b !important; }
[data-mode="dark"] .bg-slate-100 { background-color: #334155 !important; }
[data-mode="dark"] .hover\:bg-slate-200:hover { background-color: #475569 !important; }
[data-mode="dark"] .bg-slate-800 { background-color: #e2e8f0 !important; }
[data-mode="dark"] .hover\:bg-slate-900:hover { background-color: #f1f5f9 !important; }

[data-mode="dark"] .border-slate-100 { border-color: #334155 !important; }
[data-mode="dark"] .border-slate-200 { border-color: #475569 !important; }
[data-mode="dark"] .border-slate-300 { border-color: #64748b !important; }

[data-mode="dark"] .text-slate-900 { color: #f8fafc !important; }
[data-mode="dark"] .text-slate-800 { color: #f1f5f9 !important; }
[data-mode="dark"] .text-slate-700 { color: #e2e8f0 !important; }
[data-mode="dark"] .text-slate-600 { color: #cbd5e1 !important; }
[data-mode="dark"] .text-slate-500 { color: #94a3b8 !important; }
[data-mode="dark"] .text-slate-400 { color: #64748b !important; }

/* Make standard badges transparent-ish in dark mode */
[data-mode="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.2) !important; }
[data-mode="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; border-color: rgba(59, 130, 246, 0.3) !important; }
[data-mode="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.2) !important;}
[data-mode="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.2) !important;}
[data-mode="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; border-color: rgba(168, 85, 247, 0.3) !important;}
[data-mode="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1) !important; border-color: rgba(249, 115, 22, 0.2) !important;}
[data-mode="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2) !important; border-color: rgba(249, 115, 22, 0.3) !important;}
[data-mode="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.2) !important;}
[data-mode="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; border-color: rgba(239, 68, 68, 0.3) !important;}
[data-mode="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.2) !important;}
[data-mode="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; border-color: rgba(34, 197, 94, 0.3) !important;}
[data-mode="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; border-color: rgba(234, 179, 8, 0.3) !important;}

/* Modal Overlay fix for Dark Mode */
[data-mode="dark"] #modal-wizard { background-color: rgba(15, 23, 42, 0.8) !important; }

/* Fix gradients from completely breaking in dark mode */
[data-mode="dark"] .from-blue-50 { --tw-gradient-from: rgba(59, 130, 246, 0.1) !important; --tw-gradient-to: rgba(59, 130, 246, 0) !important; }
[data-mode="dark"] .to-white { --tw-gradient-to: #1e293b !important; }

/* Smooth fade transitions for switching views */
.view-section {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.view-section.active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* Toast animation classes */
.toast-show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}