/* Light Mode & Dark Mode Fix - Ensures proper background colors */

/* ===== LIGHT MODE - EVERYTHING WHITE ===== */
html:not(.dark) body,
html:not(.dark) main,
html:not(.dark) .py-12,
html:not(.dark) .container-modern {
    background-color: #ffffff !important;
}

/* All white background elements */
html:not(.dark) .bg-white {
    background-color: #ffffff !important;
}

/* User pages can have light gray */
html:not(.dark) .min-h-screen.bg-gray-50 {
    background-color: #f9fafb !important;
}

html:not(.dark) main:has(.min-h-screen) {
    background-color: #f9fafb !important;
}

/* Cards should be white in light mode - only in user pages */
body:not(.dark) .min-h-screen.bg-gray-50 .bg-white.dark\:bg-dark-800 {
    background-color: #ffffff !important;
}

/* Text colors for light mode - only in user pages */
body:not(.dark) .min-h-screen.bg-gray-50 .text-gray-900.dark\:text-white {
    color: #111827 !important;
}

body:not(.dark) .min-h-screen.bg-gray-50 .text-gray-700.dark\:text-gray-300 {
    color: #374151 !important;
}

body:not(.dark) .min-h-screen.bg-gray-50 .text-gray-600.dark\:text-gray-400 {
    color: #4b5563 !important;
}

body:not(.dark) .min-h-screen.bg-gray-50 .text-gray-500.dark\:text-gray-400 {
    color: #6b7280 !important;
}

/* Border colors for light mode - only in user pages */
body:not(.dark) .min-h-screen.bg-gray-50 .border-gray-200.dark\:border-dark-700 {
    border-color: #e5e7eb !important;
}

body:not(.dark) .min-h-screen.bg-gray-50 .border-gray-300.dark\:border-dark-700 {
    border-color: #d1d5db !important;
}

/* Input backgrounds in light mode - only in user pages */
body:not(.dark) .min-h-screen.bg-gray-50 input.dark\:bg-dark-900,
body:not(.dark) .min-h-screen.bg-gray-50 textarea.dark\:bg-dark-900,
body:not(.dark) .min-h-screen.bg-gray-50 select.dark\:bg-dark-900 {
    background-color: #ffffff !important;
    color: #111827 !important;
}

body:not(.dark) .min-h-screen.bg-gray-50 input:disabled {
    background-color: #f3f4f6 !important;
}

/* ===== DARK MODE - EVERYTHING DARK ===== */
html.dark body,
html.dark main,
html.dark .py-12,
html.dark .container-modern {
    background-color: #0f172a !important; /* dark-900 */
}

/* All dark background elements */
html.dark .bg-white,
html.dark .dark\:bg-dark-800,
html.dark .dark\:bg-dark-900 {
    background-color: #0f172a !important; /* dark-800 */
}

/* User pages dark background */
html.dark .min-h-screen {
    background-color: #0f172a !important;
}

html.dark main:has(.min-h-screen) {
    background-color: #0f172a !important;
}

/* Cards in dark mode */
html.dark .bg-white.dark\:bg-dark-800 {
    background-color: #0f172a !important;
}

/* ===== TEXT COLORS ===== */

/* Dark Mode Text */
html.dark .text-gray-900,
html.dark .dark\:text-white {
    color: #ffffff !important;
}

html.dark .text-gray-700,
html.dark .dark\:text-gray-300 {
    color: #ffffff !important;
}

html.dark .text-gray-600,
html.dark .dark\:text-gray-400 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500 {
    color: #94a3b8 !important;
}

/* Light Mode Text */
html:not(.dark) .text-gray-900,
html:not(.dark) .dark\:text-white {
    color: #111827 !important;
}

html:not(.dark) .text-gray-700,
html:not(.dark) .dark\:text-gray-300 {
    color: #374151 !important;
}

html:not(.dark) .text-gray-600,
html:not(.dark) .dark\:text-gray-400 {
    color: #4b5563 !important;
}

html:not(.dark) .text-gray-500 {
    color: #6b7280 !important;
}

/* ===== BORDER COLORS ===== */

/* Dark Mode Borders */
html.dark .border-gray-200,
html.dark .dark\:border-dark-700 {
    border-color: #334155 !important;
}

html.dark .border-gray-300 {
    border-color: #334155 !important;
}

html.dark .dark\:border-dark-800 {
    border-color: #0f172a !important;
}

/* Light Mode Borders */
html:not(.dark) .border-gray-200,
html:not(.dark) .dark\:border-dark-700 {
    border-color: #e5e7eb !important;
}

html:not(.dark) .border-gray-300 {
    border-color: #d1d5db !important;
}

/* Input backgrounds in dark mode - only in user pages */
body.dark .min-h-screen.dark\:bg-dark-800 input.dark\:bg-dark-900,
body.dark .min-h-screen.dark\:bg-dark-800 textarea.dark\:bg-dark-900,
body.dark .min-h-screen.dark\:bg-dark-800 select.dark\:bg-dark-900 {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

body.dark .min-h-screen.dark\:bg-dark-800 input.dark\:bg-dark-900:disabled {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

/* Crypto color accents work in both modes */
.text-crypto-600 {
    color: #16a34a !important;
}

body.dark .dark\:text-crypto-400 {
    color: #4ade80 !important;
}

.bg-crypto-600 {
    background-color: #16a34a !important;
}

body.dark .dark\:bg-crypto-900\/20 {
    background-color: rgba(20, 83, 45, 0.2) !important;
}

/* ===== GRADIENT FIXES ===== */

/* Light Mode - crypto-50 gradient should be white */
html:not(.dark) .from-crypto-50 {
    --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
}

/* Dark Mode - dark-800 gradients should use #0f172a */
html.dark .dark\:from-dark-800 {
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position) !important;
}

html.dark .dark\:to-dark-800 {
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position) !important;
}