/* 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: #ffffff00 !important;
}

/* Fix indigo-100 background to transparent */
.bg-indigo-100 {
    background-color: rgb(224 231 255 / 0%) !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;
}

/* ===== API PAGE SPECIFIC FIXES ===== */

/* API Page Hero Section - Light Mode */
html:not(.dark) .min-h-screen.bg-gray-50 .bg-gradient-to-br.from-indigo-50 {
    background: linear-gradient(to bottom right, #eef2ff, #faf5ff, #fdf2f8) !important;
}

/* API Page Cards - Dark Mode should have darker cards */
html.dark .min-h-screen.bg-gray-50 .api-card,
html.dark .api-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* API Page - Dark Mode text colors */
html.dark .min-h-screen.bg-gray-50 .text-gray-900,
html.dark .min-h-screen .text-gray-900.dark\:text-white {
    color: #ffffff !important;
}

html.dark .min-h-screen.bg-gray-50 .text-gray-600.dark\:text-gray-300,
html.dark .min-h-screen .text-gray-600.dark\:text-gray-300 {
    color: #cbd5e1 !important;
}

html.dark .min-h-screen.bg-gray-50 .text-gray-500.dark\:text-gray-300,
html.dark .min-h-screen .text-gray-500.dark\:text-gray-300 {
    color: #cbd5e1 !important;
}

/* API Page FAQ Section - Dark Mode */
html.dark .bg-gray-50.dark\:bg-dark-700 {
    background-color: #1e293b !important;
}

html.dark .hover\:bg-gray-100.dark\:hover\:bg-dark-600:hover {
    background-color: #334155 !important;
}

/* API Page - Feature section backgrounds */
html.dark .bg-white.dark\:bg-dark-800.border-y {
    background-color: #1e293b !important;
}

/* API Page Statistics Cards - Light Mode */
html:not(.dark) .api-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* API Page - Light Mode text colors for cards */
html:not(.dark) .api-card .text-gray-900,
html:not(.dark) .api-card .dark\:text-white {
    color: #111827 !important;
}

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

/* API Page Code Section - Always dark background */
.bg-gray-900.dark\:bg-dark-950 {
    background-color: #111827 !important;
}

.bg-gray-800 {
    background-color: #1f2937 !important;
}

/* API Page - Gradient icons should always show properly */
.bg-gradient-to-br {
    background-image: var(--tw-gradient-stops) !important;
}

/* API Page Endpoints Section - Dark Mode */
html.dark .divide-gray-100.dark\:divide-dark-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

html.dark .hover\:bg-gray-50.dark\:hover\:bg-dark-750:hover {
    background-color: #1e293b !important;
}

/* API Page - Method badges always visible */
.method-badge.method-get {
    background-color: #10b981 !important;
    color: white !important;
}

.method-badge.method-post {
    background-color: #3b82f6 !important;
    color: white !important;
}

.method-badge.method-put {
    background-color: #f59e0b !important;
    color: white !important;
}

.method-badge.method-delete {
    background-color: #ef4444 !important;
    color: white !important;
}

/* API Page - Crypto section gradient */
html.dark .bg-gradient-to-b.from-gray-100.dark\:from-dark-850 {
    background: linear-gradient(to bottom, #0f172a, #1e293b) !important;
}

html:not(.dark) .bg-gradient-to-b.from-gray-100 {
    background: linear-gradient(to bottom, #f3f4f6, #ffffff) !important;
}

/* API Page - Use cases colorful cards - ensure they show in both modes */
.bg-gradient-to-br.from-blue-500.to-cyan-500,
.bg-gradient-to-br.from-purple-500.to-pink-500,
.bg-gradient-to-br.from-emerald-500.to-green-500,
.bg-gradient-to-br.from-amber-500.to-orange-500 {
    color: white !important;
}

/* API Page - Final CTA gradient */
.bg-gradient-to-r.from-indigo-600.via-purple-600.to-pink-600 {
    background: linear-gradient(to right, #4f46e5, #9333ea, #db2777) !important;
    color: white !important;
}

/* API Page Pricing Section - Premium card gradient */
.bg-gradient-to-br.from-indigo-600.via-purple-600.to-pink-600 {
    background: linear-gradient(to bottom right, #4f46e5, #9333ea, #db2777) !important;
    color: white !important;
}

/* API Page - Hero title gradient text */
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* API Page - Step connector lines */
html.dark .bg-gradient-to-r.from-indigo-500.to-purple-500,
html.dark .bg-gradient-to-r.from-purple-500.to-pink-500 {
    opacity: 0.8;
}

/* API Page - Benefits cards borders in dark mode */
html.dark .border-orange-200.dark\:border-orange-800\/50 {
    border-color: rgba(154, 52, 18, 0.5) !important;
}

html.dark .border-emerald-200.dark\:border-emerald-800\/50 {
    border-color: rgba(6, 95, 70, 0.5) !important;
}

html.dark .border-indigo-200.dark\:border-indigo-800\/50 {
    border-color: rgba(55, 48, 163, 0.5) !important;
}

html.dark .border-pink-200.dark\:border-pink-800\/50 {
    border-color: rgba(157, 23, 77, 0.5) !important;
}