/* ========================================
   GAEB Station v4 — Theme System
   Dark/Light Toggle via data-theme attribute
   ======================================== */

/* — Light theme: Override hardcoded Tailwind arbitrary hex values — */
/* All React components use hardcoded hex colors like bg-[#2A2D32].
   These selectors override those for light mode. */

/* Body & main backgrounds */
[data-theme="light"] .bg-\[\#2A2D32\],
[data-theme="light"] .bg-\[\#2E2E2E\],
[data-theme="light"] .bg-\[\#2c2c2c\] {
    background-color: #F5F5F7 !important;
}

[data-theme="light"] .bg-\[\#353535\] {
    background-color: #FFFFFF !important;
}

[data-theme="light"] .bg-\[\#383838\],
[data-theme="light"] .bg-\[\#3A3A3A\] {
    background-color: #F0F0F2 !important;
}

[data-theme="light"] .bg-\[\#454545\],
[data-theme="light"] .bg-\[\#404040\] {
    background-color: #E5E7EB !important;
}

[data-theme="light"] .bg-\[\#1a1a1a\],
[data-theme="light"] .bg-\[\#1A1A1A\] {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* Text colors */
[data-theme="light"] .text-white {
    color: #1A1A2E !important;
}

[data-theme="light"] .text-\[\#E0E0E0\],
[data-theme="light"] .text-\[\#e0e0e0\] {
    color: #1A1A2E !important;
}

[data-theme="light"] .text-\[\#BFC5A5\],
[data-theme="light"] .text-\[\#bfc5a5\] {
    color: #6B7280 !important;
}

[data-theme="light"] .text-\[\#5F6F7A\],
[data-theme="light"] .text-\[\#5f6f7a\] {
    color: #9CA3AF !important;
}

[data-theme="light"] .text-\[\#C6E44B\],
[data-theme="light"] .text-\[\#c6e44b\],
[data-theme="light"] .text-\[\#e2f36e\] {
    color: #2E7D32 !important;
}

/* Navbar */
[data-theme="light"] .text-slate-300 {
    color: #374151 !important;
}

[data-theme="light"] .text-slate-200 {
    color: #1F2937 !important;
}

[data-theme="light"] .text-slate-400 {
    color: #6B7280 !important;
}

/* Card borders */
[data-theme="light"] .border-\[\#5F6F7A\]\/20,
[data-theme="light"] .border-\[\#5f6f7a\]\/20 {
    border-color: #E5E7EB !important;
}

[data-theme="light"] .border-slate-700,
[data-theme="light"] .border-slate-600 {
    border-color: #D1D5DB !important;
}

/* Primary bg button — keep readable */
[data-theme="light"] .bg-\[\#C6E44B\],
[data-theme="light"] .bg-\[\#c6e44b\],
[data-theme="light"] .bg-\[\#e2f36e\] {
    background-color: #2E7D32 !important;
    color: #FFFFFF !important;
}

/* Navbar background */
[data-theme="light"] .bg-slate-900 {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* Dark btn backgrounds in light mode */
[data-theme="light"] .bg-slate-700,
[data-theme="light"] .bg-slate-800 {
    background-color: #F3F4F6 !important;
    color: #1F2937 !important;
}

/* Navbar links */
[data-theme="light"] .text-gray-300 {
    color: #4B5563 !important;
}

[data-theme="light"] .bg-slate-600 {
    background-color: #E5E7EB !important;
}

/* Hover states */
[data-theme="light"] .hover\:bg-\[\#454545\]:hover,
[data-theme="light"] .hover\:bg-\[\#404040\]:hover {
    background-color: #D1D5DB !important;
}

[data-theme="light"] .hover\:bg-slate-700:hover {
    background-color: #E5E7EB !important;
}

/* Shadow adjustments */
[data-theme="light"] .shadow-2xl {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .shadow-xl {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Smooth theme transition */
*,
*::before,
*::after {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}