/* ═══════════════════════════════════════════════════════════
   THEME.CSS — CSS Variables + Dark Mode
   Load FIRST before all other stylesheets.

   Dark mode philosophy:
     - Page / section BACKGROUNDS go dark navy
     - Cards and panels STAY WHITE (they float on the dark bg)
     - Section headers already use the dark navy gradient — unchanged
═══════════════════════════════════════════════════════════ */

/* ── Color tokens ── */
:root {
    --bg-page:        #f4f4f4;
    --bg-surface:     #ffffff;
    --bg-surface-alt: #f8f9fb;
    --text-primary:   #0d1526;
    --text-secondary: #374151;
    --text-muted:     #6b7280;
    --border-color:   #e5e7eb;
    --border-input:   #d1d5db;

    /* Brand — same in both modes */
    --navy:           #0d1526;
    --navy-mid:       #1e2f52;
    --primary:        #1d4ed8;
    --primary-hover:  #1e40af;
    --danger:         #da1515;
    --danger-hover:   #ad0f0f;
    --success:        #16a34a;
    --amber:          #f5a623;
    --antique-gold:   #c9a227;
}

[data-theme="dark"] {
    --bg-page:        #0d1526;
    --bg-surface:     #1e2f52;
    --bg-surface-alt: #1e2f52;
    --bg-gradient:    linear-gradient(135deg, #0d1526 0%, #1e2f52 100%);
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
═══════════════════════════════════════════════════════════ */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: #ffffff;
    transition: background 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — PAGE BACKGROUNDS
   Section wrappers go dark; cards inside stay white.
═══════════════════════════════════════════════════════════ */

[data-theme="dark"] body,
[data-theme="dark"] html {
    background: var(--bg-gradient) !important;
}

/* Above 1920px the body is boxed (sitewide.css); the margins beside it are the
   html background, which takes the flat page colour rather than a second copy
   of the gradient (two gradients would seam at the column edge). */
[data-theme="dark"] html {
    background: var(--bg-page) !important;
}

[data-theme="dark"] {
    --site-edge-line: #2a3b60;
}

/* Main content wrapper */
[data-theme="dark"] .PageContainer {
    background: var(--bg-gradient) !important;
}

/* Dashboard admin wrapper */
[data-theme="dark"] .admin-wrapper {
    background: var(--bg-gradient) !important;
}

/* Listing detail page body */
[data-theme="dark"] body.listing-details-page {
    background: var(--bg-gradient) !important;
}

[data-theme="dark"] .nav-back-btn {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .7);
}
[data-theme="dark"] .nav-back-btn:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

[data-theme="dark"] .btn-edit {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
}
[data-theme="dark"] .btn-edit:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

[data-theme="dark"] .btn-support {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
}
[data-theme="dark"] .btn-support:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Community page body */
[data-theme="dark"] body.CommunityLight {
    background: var(--bg-gradient) !important;
}

/* Community detail pages (newsletter, event) */
[data-theme="dark"] body.community-detail-page {
    background: var(--bg-gradient) !important;
}

/* Listings browse / favorites / dealership inventory pages */
[data-theme="dark"] body.listings-page {
    background: var(--bg-gradient) !important;
}

/* Listings page inner PageContainer (overrides the slate-100 default) */
[data-theme="dark"] .listings-page .PageContainer {
    background: var(--bg-gradient) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — HOMEPAGE & CREATE-LISTINGS SECTION WRAPPERS
═══════════════════════════════════════════════════════════ */

/* Listings card grid container */
[data-theme="dark"] .ListingContentContainer6 {
    background: var(--bg-gradient);
}

/* Why List With Us */
[data-theme="dark"] .whyListWithUs {
    background: var(--bg-gradient) !important;
}

/* Pricing section */
[data-theme="dark"] .pricing {
    background: var(--bg-gradient) !important;
}

/* How It Works */
[data-theme="dark"] .howItWorks {
    background: var(--bg-gradient) !important;
}

/* Account Setup */
[data-theme="dark"] .accountSetup {
    background: var(--bg-gradient) !important;
}

/* UserInstructions / PaymentCalculator wrappers */
[data-theme="dark"] .UserInstructions,
[data-theme="dark"] .PaymentCalculator,
[data-theme="dark"] .PaymentCalculator1 {
    background: var(--bg-gradient) !important;
}

/* Community highlights section on homepage */
[data-theme="dark"] .community-highlights {
    background: var(--bg-gradient) !important;
}

/* Listing-type toggle buttons */
[data-theme="dark"] .toggle-button {
    background-color: #1e2f52;
    color: #e2e8f0;
}

[data-theme="dark"] .toggle-button:hover {
    background-color: #1d4ed8;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — CARDS STAY WHITE
   Explicitly keep card surfaces light so they read as
   elevated panels against the dark page background.
═══════════════════════════════════════════════════════════ */

[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
    background: #ffffff;
}

[data-theme="dark"] .whyList-feature {
    background-color: #ffffff !important;
    border-color: #C5A76C !important; /* antique gold outline */
}

[data-theme="dark"] .whyList-feature:hover {
    background: #0d1526 !important;
    border-color: #C5A76C !important;
}

[data-theme="dark"] .pricing-card {
    background: #ffffff !important;
    border-color: #C5A76C !important; /* antique gold outline */
}

[data-theme="dark"] .pricing-card:hover {
    background: #0d1526 !important;
    border-color: #C5A76C !important;
}

[data-theme="dark"] .howItWorks-card {
    background: #ffffff !important;
}

[data-theme="dark"] .accountSetup-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Dashboard — sections and metric cards stay white/light */
[data-theme="dark"] .dash-section {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .metric-card {
    background: #f8f9fb;
}

[data-theme="dark"] .metric-card.accent {
    background: #eff6ff;
    border-left-color: var(--primary);
}

[data-theme="dark"] .kpi-card {
    background: #ffffff;
}

/* Listing detail page cards stay white */
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .section-card {
    background: #ffffff !important;
}

/* Filter sidebar stays white */
[data-theme="dark"] .filter-sidebar {
    background: #ffffff !important;
}

[data-theme="dark"] .filter-sidebar-header {
    border-bottom-color: #e8eaee;
}

[data-theme="dark"] details.filter-group {
    border-bottom-color: #e8eaee;
}

/* Filter inputs — keep white bg, dark text */
[data-theme="dark"] .filter-group-body input[type="text"],
[data-theme="dark"] .filter-group-body input[type="number"],
[data-theme="dark"] .filter-group-body select:not([multiple]) {
    background: #ffffff !important;
    color: #0d1526 !important;
    border-color: #d0d4dc !important;
}

/* Auth pages — keep form panel light, brand panel is always dark */
[data-theme="dark"] .auth-form-panel {
    background: #f8f9fa !important;
}

/* Legacy containers (password reset page) */
[data-theme="dark"] .resetContainer {
    background: #f8f9fa !important;
}

/* Community panels stay light */
[data-theme="dark"] .CommunityPanel {
    background: #f8f9fa !important;
}

[data-theme="dark"] .comm-panel,
[data-theme="dark"] .CommunityShell {
    background: #ffffff !important;
}

[data-theme="dark"] .cd-page {
    background: #f4f5f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — NAVBAR DROPDOWNS
═══════════════════════════════════════════════════════════ */

/* The My Dealership / Admin / Browse menus are deliberately NOT listed here.
   They now carry the navbar's navy in navbar.css and hold it in both themes,
   the same way the navbar itself does — a menu that changed colour with the
   theme while the bar it hangs from did not looked like two separate pieces. */

[data-theme="dark"] .notif-dropdown-inner {
    background: #0d1526;
    border-color: #1e2f52;
}

[data-theme="dark"] .notif-dropdown-header {
    border-bottom-color: #1e2f52;
    color: #f1f5f9;
}

[data-theme="dark"] .notif-item {
    background: #0d1526;
    border-bottom-color: #1e2f52;
    color: #f1f5f9;
}

[data-theme="dark"] .notif-item:hover {
    background: #1e2f52;
}

[data-theme="dark"] .notif-unread {
    background: #0f1f3d;
    border-left-color: #3b82f6;
}

[data-theme="dark"] .notif-unread:hover {
    background: #1e2f52;
}

[data-theme="dark"] .notif-item-body  { color: #94a3b8; }
[data-theme="dark"] .notif-item-title { color: #f1f5f9; }

[data-theme="dark"] .notif-view-all {
    border-top-color: #1e2f52;
    color: var(--primary);
    background: #080d17;
}

[data-theme="dark"] .notif-view-all:hover { background: #1e2f52; }

[data-theme="dark"] .notif-empty { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FOOTER
═══════════════════════════════════════════════════════════ */

/* Footer is always dark — no dark-mode override needed */
[data-theme="dark"] .site-footer { background: #080d17; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE — LISTINGS BROWSE PAGE
═══════════════════════════════════════════════════════════ */

/* Page bg already handled via .PageContainer */

/* Active filter chips on dark background */
[data-theme="dark"] .active-filters-bar {
    background: var(--bg-gradient);
}

[data-theme="dark"] .filter-chip {
    background: #1e2f52;
    border-color: rgba(255,255,255,0.15);
    color: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — ALERTS
═══════════════════════════════════════════════════════════ */

[data-theme="dark"] .alert-success {
    background-color: #052e16;
    color: #86efac;
    border-color: #166534;
}

[data-theme="dark"] .alert-danger {
    background-color: #450a0a;
    color: #fca5a5;
    border-color: #991b1b;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — SECTION TITLE TEXT ON DARK WRAPPERS
   Section headers use the dark gradient, so their text is
   already white. Only override text that sits outside cards
   directly on the dark page background.
═══════════════════════════════════════════════════════════ */

/* .section-eyebrow and .SectionTitle sit on dark bg in dark mode */
[data-theme="dark"] .section-eyebrow {
    color: #f87171;
}

[data-theme="dark"] .SectionTitle {
    color: var(--primary);
}

/* The offers lede sits directly on the dark page background — the light-mode
   grey (#4b5563) all but vanishes there, so it goes white. */
[data-theme="dark"] .home-offers-lede {
    color: #ffffff;
}

/* The listings page's empty-results message sits on the dark gradient too. */
[data-theme="dark"] .no-results-title {
    color: #ffffff;
}

[data-theme="dark"] .no-results-hint {
    color: rgba(255, 255, 255, 0.75);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — HEROES PROGRAM
   The homepage .aal-heroes section is a photo banner, identical
   in both modes — no overrides needed. Heroes-page cards stay
   white with the antique gold outline like pricing cards.
   (.heroes-eyebrow stays flag red in both modes on purpose.)
═══════════════════════════════════════════════════════════ */

/* Heroes page background goes dark like other page wrappers */
[data-theme="dark"] .heroes-page {
    background: var(--bg-gradient) !important;
}

/* Text sitting directly on the dark page background */
[data-theme="dark"] .heroes-form-intro p { color: #94a3b8; }

/* Category cards — white with gold outline; hover/selected go dark navy */
[data-theme="dark"] .heroes-category-card {
    background-color: #ffffff !important;
    border-color: #C5A76C !important;
}

[data-theme="dark"] .heroes-category-card:hover,
[data-theme="dark"] .heroes-category-card:has(input:checked) {
    background: #0d1526 !important;
    border-color: #C5A76C !important;
}

/* Question panel, attestation, and status card stay white with gold outline */
[data-theme="dark"] .heroes-questions,
[data-theme="dark"] .heroes-attestation,
[data-theme="dark"] .heroes-status-card {
    background-color: #ffffff !important;
    border-color: #C5A76C !important;
}

[data-theme="dark"] .heroes-questions legend {
    border-color: #C5A76C;
}

/* ── Demo accounts (utils/reviewAccounts.js, utils/salesDemo.js) ──────────────
   The ribbon every page shows a demo account, and the DEMO badge on demo cars
   and dealerships. Fixed colors: amber on near-black reads the same in light
   and dark mode (contrast 14:1 and 8:1). */
.demo-ribbon {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(560px, calc(100% - 24px));
    padding: 8px 12px;
    border-radius: 8px;
    background: #111827;
    color: #fde68a;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.35;
}
.demo-ribbon__tag {
    flex: none;
    padding: 3px 7px;
    border-radius: 4px;
    background: #f59e0b;
    color: #111827;
    font-weight: 800;
    letter-spacing: 0.08em;
}
@media (max-width: 600px) {
    .demo-ribbon { font-size: 11px; left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
}
.demo-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f59e0b;
    color: #111827;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    vertical-align: middle;
}
.badge.badge-demo {
    background: #f59e0b;
    color: #111827;
}