/* Dark Mode Theme - Inverse Color Scheme */

/* Body */
body {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Header */
header {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Navigation links */
nav a {
    color: #d1d5db !important;
}
nav a:hover {
    color: #ffffff !important;
}

/* Buttons - inverted */
.bg-black.text-white:not(.hover\:bg-gray-800) {
    background-color: #ffffff !important;
    color: #000000 !important;
}
.bg-black.text-white:not(.hover\:bg-gray-800):hover {
    background-color: #e5e7eb !important;
}
.hover\:bg-gray-800:hover.bg-black {
    background-color: #ffffff !important;
}

/* White backgrounds */
.bg-white {
    background-color: #1f2937 !important;
}

/* Gray backgrounds */
.bg-gray-50 {
    background-color: #1f2937 !important;
}
.bg-gray-100 {
    background-color: #374151 !important;
}
.bg-gray-900, .from-gray-90\.to-black {
    background-color: #111827 !important;
}
.to-black {
    background-color: #000000 !important;
}

/* Gray-800 backgrounds */
.bg-gray-800 {
    background-color: #ffffff !important;
}

/* Text colors inverted */
.text-gray-900, .text-gray-800 {
    color: #ffffff !important;
}
.text-gray-700, .text-gray-600 {
    color: #d1d5db !important;
}
.text-gray-500 {
    color: #9ca3af !important;
}

/* Hover states */
.text-gray-700:hover\:text-gray-900:hover {
    color: #ffffff !important;
}

/* Borders */
.border-gray-100, .border-gray-200 {
    border-color: #374151 !important;
}
.border-gray-300 {
    border-color: #4b5563 !important;
}

/* Form inputs - force dark background */
input, textarea, select {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

input::placeholder, textarea::placeholder {
    color: #9ca3af !important;
}

.input, textarea, select option {
    background-color: #1f2937 !important;
    color: #ffffff !important;
}

/* Green button */
.bg-green-500 {
    background-color: #059669 !important;
}
.bg-green-500:hover\:bg-green-600:hover {
    background-color: #047857 !important;
}

/* Mobile nav */
#mobileNav {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Shadow colors */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Gradients */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, #111827 36%, #000000 100%) !important;
}

/* Stars and icons (yellow stays yellow) */
.text-yellow-400, svg.text-yellow-400, .flex.text-yellow-400 svg, .flex.text-yellow-400 .text-yellow-400 {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* All star icons in reviews */
.flex.text-yellow-400 svg path {
    fill: #fbbf24 !important;
}

/* Specific rating star styling */
svg[fill="currentColor"] {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* Ensure star elements are always yellow in dark mode */
.bg-white.rounded-2xl .flex.text-yellow-400 svg,
.bg-gray-50.rounded-2xl .flex.text-yellow-400 svg,
.bg-white .flex.text-yellow-400 svg {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* Accent color */
.text-accent-500, .accent {
    color: #fbbf24 !important;
}

/* Star icons - ensure yellow in all contexts */
.star-rating, .rating-stars svg {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* Light blue message bar - dark mode fix */
.bg-blue-50 {
    background-color: #1e3a8a !important;
}

.bg-blue-50 p.text-blue-900, .bg-blue-50 .text-blue-900 {
    color: #93c5fd !important;
}

.bg-blue-50.border-blue-100 {
    border-color: #1e40af !important;
}

/* All blue backgrounds */
.bg-blue-100, .bg-green-100, .bg-purple-100, .bg-yellow-100, .bg-orange-100,
.bg-red-100, .bg-indigo-100, .bg-teal-100 {
    background-color: #1e293b !important;
}

/* Blue text on light backgrounds */
.text-blue-900 {
    color: #93c5fd !important;
}

/* Border colors */
.border-blue-100, .border-green-100, .border-purple-100, .border-yellow-100 {
    border-color: #1e40af !important;
}

/* Modal overlay */
.fixed.inset-0.z-50, .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Modal content */
.bg-white.max-w-2xl.shadow-xl.rounded-2xl {
    background-color: #1f2937 !important;
}

/* Footer */
footer.bg-gray-50 {
    background-color: #111827 !important;
}

/* Ensure modal overlays everything */
.fixed.inset-0.z-\\[9999\\], .z-\\[10000\\], .z-\\[10001\\] {
    z-index: 2147483647 !important;
}

/* Vehicle description and content containers */
.bg-white\/95.backdrop-blur-xl, .bg-white\/80.backdrop-blur-sm {
    background-color: #1f2937 !important;
}

/* Ensure all text within background containers is readable */
.bg-white p, .bg-gray-50 p, [class*="bg-white"] p,
.bg-white div, .bg-gray-50 div, [class*="bg-white"] div {
    color: inherit !important;
}

/* Force override for text colors in dark mode */
.text-gray-600, p.text-gray-600, div.text-gray-600, span.text-gray-600 {
    color: #d1d5db !important;
}

/* Card backgrounds */
.bg-white\/95 {
    background-color: #1f2937 !important;
}

/* Gradient overlays on images - keep gradient effects */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, #111827 0%, rgba(17, 24, 39, 0.5) 50%, transparent 100%) !important;
}

/* Backdrop blur elements */
.backdrop-blur-xl, .backdrop-blur-sm {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Content wrappers with mixed backgrounds */
.bg-white\/95 {
    background: rgba(31, 41, 55, 0.95) !important;
}

/* Fix for inline text content */
.text-gray-600 {
    color: #d1d5db !important;
}

/* Ensure descriptions are visible */
p.text-gray-600[style*="color"], p[style*="color"].text-gray-600 {
    color: #d1d5db !important;
}

/* Override any inline styles for text color */
p, div, span, h1, h2, h3, h4, h5, h6 {
    color: inherit !important;
}

/* Finance modal - ensure it's on top */
#financeModal {
    position: fixed !important;
    z-index: 2147483647 !important;
}

#financeModal > div {
    position: relative !important;
    z-index: 2147483648 !important;
}

/* Override any stacking context issues */
div.relative.z-10, div[class*="z-"][class*="relative"] {
    z-index: auto !important;
}

/* Ensure modals appear above all content */
.modal-overlay, .fixed.inset-0[class*="Modal"] {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Specific fix for finance modal visibility */
#financeModal {
    z-index: 999999 !important;
    position: fixed !important;
    transform: none !important;
}

#financeModal iframe {
    position: relative !important;
    z-index: 1000000 !important;
}

/* Any modal overlay */
[class*="Modal"], .modal-overlay {
    position: fixed !important;
    z-index: 2147483646 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Modal content */
[class*="Modal"] > div, .modal-overlay > div {
    position: relative !important;
    z-index: 2147483647 !important;
}

/* Force disable stacking context creation */
.backdrop-blur-xl, .backdrop-blur-sm {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    -webkit-filter: blur(0px) !important;
    filter: blur(0px) !important;
}

/* Ensure modals are directly on body */
body > #financeModal {
    position: fixed !important;
    z-index: 2147483647 !important;
}

/* Override any stacking context from transforms */
div.transform, div[class*="backdrop"] {
    transform: none !important;
}