/* ==============================================
   SkyTrader Theme-Responsive Overrides
   Fixes white-on-white issues across the site
   ============================================== */

/* === LIGHT MODE === */
[data-bs-theme="light"] {

    /* --- Header & Navigation --- */
    /* Entire header gets a dark bg so all white text is readable */
    header {
        background-color: #1a1d21 !important;
    }

    /* Top utility bar */
    .top-bar-1,
    .topbar,
    .navbar-top {
        background-color: #111417 !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    .top-bar-1 a,
    .top-bar-1 .nav-link,
    .topbar a {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .top-bar-1 a:hover,
    .topbar a:hover {
        color: #fff !important;
    }

    /* Middle bar (logo + contact info) */
    header>div:not(.main-nav-1):not([class*="top-bar"]),
    header>.container {
        background-color: #1a1d21 !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    header .container a,
    header .container span,
    header .container p,
    header .container h1,
    header .container h2,
    header .container h3 {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Main navbar */
    .navbar,
    .main-nav-1 {
        background-color: #252a30 !important;
    }

    .navbar .nav-link {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .navbar .nav-link:hover {
        color: #fff !important;
    }

    .navbar .navbar-brand,
    .navbar .site-title {
        color: #fff !important;
    }

    /* --- Nav Dropdown Menus --- */
    .dropdown-menu {
        background-color: #252a30 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .dropdown-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item:active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }

    .dropdown-menu .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .dropdown-menu .dropdown-header {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Mega menu / multi-column dropdowns */
    .dropdown-menu .nav-link,
    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .dropdown-menu .nav-link:hover,
    .dropdown-menu a:hover {
        color: #fff !important;
    }

    /* --- Hero Filter Fix --- */
    /* Select dropdowns in hero filter: dark text on light bg */
    .form-select {
        color: #212529 !important;
        background-color: #fff !important;
    }

    .form-select option {
        color: #212529 !important;
        background-color: #fff !important;
    }

    /* Any text inputs in hero */
    .form-control {
        color: #212529 !important;
    }

    /* --- Body respects Bootstrap theme --- */
    body {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
    }
}


/* === DARK MODE === */
[data-bs-theme="dark"] {

    body {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
    }

    /* Header sections */
    header {
        background-color: #111417 !important;
    }

    .top-bar-1,
    .topbar,
    .navbar-top {
        background-color: #0d0f12 !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    .navbar,
    .main-nav-1 {
        background-color: #111417 !important;
    }

    .navbar .nav-link {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .navbar .nav-link:hover {
        color: #fff !important;
    }

    /* Nav dropdown menus */
    .dropdown-menu {
        background-color: #1a1d21 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .dropdown-menu .dropdown-item,
    .dropdown-menu .nav-link,
    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus,
    .dropdown-menu a:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
    }

    /* Cards */
    .card {
        background-color: var(--bs-card-bg, #212529) !important;
        color: var(--bs-body-color) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* Footer */
    footer,
    .footer {
        background-color: #111417 !important;
    }

    /* Select dropdowns */
    .form-select {
        color: var(--bs-body-color) !important;
        background-color: var(--bs-tertiary-bg) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .form-control {
        color: var(--bs-body-color) !important;
        background-color: var(--bs-tertiary-bg) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* Sections with light backgrounds */
    .bg-light,
    .bg-body-tertiary {
        background-color: #1a1d21 !important;
    }
}

/* === Icon colors in header (both modes) === */
[data-bs-theme="light"] header svg,
[data-bs-theme="light"] header .icon,
[data-bs-theme="light"] header i {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-bs-theme="light"] header .badge {
    color: #fff !important;
}

/* Override text-white specifically within select/form elements */
.form-select.text-white,
select.text-white {
    color: #212529 !important;
}

[data-bs-theme="dark"] .form-select.text-white,
[data-bs-theme="dark"] select.text-white {
    color: var(--bs-body-color) !important;
}

/* === Phase 3: Aesthetic Fixes === */

/* Pricing page: X marks visibility (was nearly invisible faint gray) */
.pricing .plan-features .feature-unavailable .icon,
.plan-features .feature-unavailable svg,
.plan-features .feature-unavailable i {
    color: #dc3545 !important;
    opacity: 0.7 !important;
}

/* Pricing page: checkmark icons visible */
.pricing .plan-features .feature-available .icon,
.plan-features .feature-available svg,
.plan-features .feature-available i {
    color: #198754 !important;
}

/* Comparison drawer toggle: better contrast */
.comparison-toggle .drawer .drawer-toggle {
    background-color: #1a1a2e !important;
    color: #fff !important;
}

/* Hide badges with zero count to avoid showing empty pills */
.badge:empty,
.badge.rounded-pill:has(> .visually-hidden):not(:has(~ *)) {
    display: none !important;
}

/* Featured aircraft: price color using theme accent */
.listing-card .price,
.card .price-tag,
.featured-card .price {
    color: var(--bs-primary, #0d6efd) !important;
}

/* CTA section buttons: ensure good contrast */
.pricing .plan-cta .btn,
.pricing-card .btn {
    min-width: 140px;
}

/* === Override bright green buttons site-wide with brand primary === */
.btn-success,
.btn-outline-success {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-outline-success:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

/* Google sign-in button: keep recognizable but refine */
.btn-google,
#google-login {
    background-color: #db4437 !important;
    border-color: #db4437 !important;
}

.btn-google:hover,
#google-login:hover {
    background-color: #c33d2e !important;
    border-color: #b33628 !important;
}

/* Fix for invisible aerobatic, sea plane, warbird links */
.dropdown-menu .custom-color {
    color: #212529 !important; /* Dark text on light background */
}

.dropdown-menu .custom-color:hover {
    color: #0056b3 !important; /* Darker blue on hover */
    background-color: rgba(0, 123, 255, 0.1) !important;
}

/* Dark mode fix for custom-color links */
[data-bs-theme="dark"] .dropdown-menu .custom-color {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-bs-theme="dark"] .dropdown-menu .custom-color:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* Fix for category cards on homepage */
/* Ensure category cards have visible text */
a[href*='inventory.html?category'] .card-body h6.text-dark {
    color: #212529 !important; /* Force dark text */
}

/* Add hover effect for better visibility */
a[href*='inventory.html?category']:hover {
    background: #f8f9fa !important; /* Light gray on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Ensure the card backgrounds are white */
a[href*='inventory.html?category'].card {
    background-color: #ffffff !important;
}

/* Dark mode adjustments for category cards */
[data-bs-theme="dark"] a[href*='inventory.html?category'].card {
    background-color: #2b3035 !important;
}

[data-bs-theme="dark"] a[href*='inventory.html?category'] .card-body h6.text-dark {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] a[href*='inventory.html?category']:hover {
    background-color: #3a3f45 !important;
}

/* Alternative fix using more specific selectors */
.row .col a.card[style*='background:#fff'] h6.text-dark {
    color: #212529 !important;
    text-shadow: 0 0 1px rgba(0,0,0,0.1); /* Subtle shadow for contrast */
}

/* Ensure card has proper border for definition */
.row .col a.card[style*='background:#fff'] {
    border: 1px solid rgba(0,0,0,0.125) !important;
}


/* === FIX: Category Cards Visibility === */
/* Ensure specialty category cards (Aerobatic, Sea Plane, etc.) are visible */
section.bg-body-tertiary .row.row-cols-2.row-cols-md-3.row-cols-lg-6 a.card {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

section.bg-body-tertiary .row.row-cols-2.row-cols-md-3.row-cols-lg-6 h6.text-dark {
    color: #212529 !important;
    font-weight: 700 !important;
}

/* Add contrast on hover */
section.bg-body-tertiary .row.row-cols-2.row-cols-md-3.row-cols-lg-6 a.card:hover {
    background-color: #f8f9fa !important;
    border-color: rgba(0,0,0,0.2) !important;
    transform: translateY(-2px);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] section.bg-body-tertiary .row.row-cols-2.row-cols-md-3.row-cols-lg-6 a.card {
    background-color: #2b3035 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

[data-bs-theme="dark"] section.bg-body-tertiary .row.row-cols-2.row-cols-md-3.row-cols-lg-6 h6.text-dark {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] section.bg-body-tertiary .row.row-cols-2.row-cols-md-3.row-cols-lg-6 a.card:hover {
    background-color: #3a3f45 !important;
}

/* Remove shadow-sm class effect if it's causing issues */
.row.row-cols-2.row-cols-md-3.row-cols-lg-6 a.card.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

/* Ensure the section background provides contrast */
.bg-body-tertiary {
    background-color: #f8f9fa !important; /* Light gray background */
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: #1a1d21 !important; /* Dark background for dark mode */
}

/* CRITICAL FIX: Force contrast for category cards text */
/* Target aerobatic, sea plane, warbird, etc. cards specifically */
a[href*='aerobatic'] h6.text-dark,
a[href*='sea-plane'] h6.text-dark,
a[href*='warbird'] h6.text-dark,
a[href*='experimental'] h6.text-dark,
a[href*='unfinished'] h6.text-dark,
a[href*='light-sport'] h6.text-dark {
    color: #000000 !important; /* Pure black for maximum contrast */
    font-weight: 700 !important;
}

/* Alternative: change cards to have dark bg with light text */
/*
a[href*='aerobatic'],
a[href*='sea-plane'],
a[href*='warbird'],
a[href*='experimental'],
a[href*='unfinished'],
a[href*='light-sport'] {
    background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%) !important;
}

a[href*='aerobatic'] h6,
a[href*='sea-plane'] h6,
a[href*='warbird'] h6,
a[href*='experimental'] h6,
a[href*='unfinished'] h6,
a[href*='light-sport'] h6 {
    color: #ffffff !important;
}
*/
