/* ============================================
   Dark/Light Theme Styles
   ============================================ */

/* Light Theme (Default) */
:root[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
}

/* Dark Theme */
:root[data-theme="dark"] {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --border-color: #374151;

    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
}

:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) .bg-gray-50 {
    background: var(--bg-secondary) !important;
    color: var(--text-primary);
}

:root:not([data-theme="light"]) .bg-white {
    background: var(--bg-primary) !important;
    backdrop-filter: var(--backdrop-filter, none) !important;
    -webkit-backdrop-filter: var(--backdrop-filter, none) !important;
    border: 1px solid var(--border-color);
}

:root:not([data-theme="light"]) .bg-gray-100,
:root:not([data-theme="light"]) .bg-gray-200 {
    background-color: var(--gray-200) !important;
}

:root:not([data-theme="light"]) .hover\:bg-blue-50:hover,
:root:not([data-theme="light"]) .hover\:bg-orange-50:hover,
:root:not([data-theme="light"]) .hover\:bg-green-50:hover,
:root:not([data-theme="light"]) .hover\:bg-purple-50:hover,
:root:not([data-theme="light"]) .hover\:bg-indigo-50:hover,
:root:not([data-theme="light"]) .hover\:bg-gray-50:hover,
:root:not([data-theme="light"]) .hover\:bg-gray-100:hover {
    background-color: var(--border-color) !important;
}

:root:not([data-theme="light"]) .text-gray-900,
:root:not([data-theme="light"]) .text-gray-800 {
    color: var(--text-primary) !important;
}

:root:not([data-theme="light"]) .text-gray-700,
:root:not([data-theme="light"]) .text-gray-600 {
    color: var(--text-secondary) !important;
}

:root:not([data-theme="light"]) .border-gray-200,
:root:not([data-theme="light"]) .border-gray-300 {
    border-color: var(--border-color) !important;
}

:root:not([data-theme="light"]) .card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

/* Base Form Elements Auto-Theming */
:root:not([data-theme="light"]) input[type="text"],
:root:not([data-theme="light"]) input[type="email"],
:root:not([data-theme="light"]) input[type="number"],
:root:not([data-theme="light"]) input[type="password"],
:root:not([data-theme="light"]) input[type="url"],
:root:not([data-theme="light"]) input[type="tel"],
:root:not([data-theme="light"]) input[type="date"],
:root:not([data-theme="light"]) input[type="time"],
:root:not([data-theme="light"]) input[type="datetime-local"],
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) .form-input,
:root:not([data-theme="light"]) .form-select,
:root:not([data-theme="light"]) .form-textarea {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Standard Alerts & Badges fixing for Dark Themes */
:root:not([data-theme="light"]) .bg-yellow-50,
:root:not([data-theme="light"]) .bg-red-50,
:root:not([data-theme="light"]) .bg-green-50,
:root:not([data-theme="light"]) .bg-blue-50,
:root:not([data-theme="light"]) .bg-indigo-50,
:root:not([data-theme="light"]) .bg-purple-50 {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

:root:not([data-theme="light"]) .text-yellow-800, :root:not([data-theme="light"]) .text-yellow-700 { color: #fde047 !important; }
:root:not([data-theme="light"]) .text-red-800, :root:not([data-theme="light"]) .text-red-700 { color: #fca5a5 !important; }
:root:not([data-theme="light"]) .text-green-800, :root:not([data-theme="light"]) .text-green-700 { color: #86efac !important; }
:root:not([data-theme="light"]) .text-blue-800, :root:not([data-theme="light"]) .text-blue-700 { color: #93c5fd !important; }
:root:not([data-theme="light"]) .text-indigo-800, :root:not([data-theme="light"]) .text-indigo-700 { color: #a5b4fc !important; }
:root:not([data-theme="light"]) .text-purple-800, :root:not([data-theme="light"]) .text-purple-700 { color: #d8b4fe !important; }

:root:not([data-theme="light"]) .modal {
    background: var(--bg-primary);
}

:root:not([data-theme="light"]) .toast {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Fix Tailwind Light Gradients (bg-gradient-to-* from-*-50 to-*-50) for Dark Themes */
:root:not([data-theme="light"]) [class*="from-gray-50"],
:root:not([data-theme="light"]) [class*="from-blue-50"],
:root:not([data-theme="light"]) [class*="from-green-50"],
:root:not([data-theme="light"]) [class*="from-purple-50"],
:root:not([data-theme="light"]) [class*="from-red-50"],
:root:not([data-theme="light"]) [class*="from-yellow-50"] {
    --tw-gradient-from: var(--bg-secondary) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

:root:not([data-theme="light"]) [class*="to-gray-50"],
:root:not([data-theme="light"]) [class*="to-emerald-50"],
:root:not([data-theme="light"]) [class*="to-blue-50"],
:root:not([data-theme="light"]) [class*="to-purple-50"],
:root:not([data-theme="light"]) [class*="to-red-50"],
:root:not([data-theme="light"]) [class*="to-yellow-50"] {
    --tw-gradient-to: var(--bg-primary) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: all var(--transition-base);
    z-index: 999;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Preserve transitions for interactive elements */
.btn,
.card,
.form-input,
.form-select,
.form-textarea {
    transition: all var(--transition-base);
}

/* ============================================
   Gradient & Glassmorphism Themes
   ============================================ */

/* Ocean Gradient Theme */
:root[data-theme="ocean"] {
    --bg-secondary: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    --bg-primary: rgba(15, 32, 39, 0.65);
    --text-primary: #ffffff;
    --text-secondary: #93c5fd;
    --border-color: rgba(255, 255, 255, 0.15);
    --gray-200: rgba(255, 255, 255, 0.08);
    --backdrop-filter: blur(16px);
}

/* Sunset Gradient Theme */
:root[data-theme="sunset"] {
    --bg-secondary: linear-gradient(135deg, #2e0824 0%, #5b1f48 50%, #873646 100%);
    --bg-primary: rgba(46, 8, 36, 0.65);
    --text-primary: #ffffff;
    --text-secondary: #fca5a5;
    --border-color: rgba(255, 255, 255, 0.15);
    --gray-200: rgba(255, 255, 255, 0.08);
    --backdrop-filter: blur(16px);
}

/* Midnight Gradient Theme */
:root[data-theme="midnight"] {
    --bg-secondary: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    --bg-primary: rgba(15, 23, 42, 0.65);
    --text-primary: #ffffff;
    --text-secondary: #c7d2fe;
    --border-color: rgba(255, 255, 255, 0.15);
    --gray-200: rgba(255, 255, 255, 0.08);
    --backdrop-filter: blur(16px);
}

/* Aurora Gradient Theme */
:root[data-theme="aurora"] {
    --bg-secondary: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
    --bg-primary: rgba(2, 44, 34, 0.65);
    --text-primary: #ffffff;
    --text-secondary: #6ee7b7;
    --border-color: rgba(255, 255, 255, 0.15);
    --gray-200: rgba(255, 255, 255, 0.08);
    --backdrop-filter: blur(16px);
}