/*
 * Dark mode overrides for Bootstrap public site.
 * Every rule in this file is scoped under [data-bs-theme="dark"].
 * Bootstrap 5.3's built-in dark theme handles most components automatically.
 * This file only overrides brand-specific colors and inline-styled elements.
 *
 * Light-mode and universal brand styles live in brand-overrides.css.
 */

/* Navbar — hunter/forest green */
[data-bs-theme="dark"] .navbar.navbar-light {
    background: var(--brand-dark-primary);
}

[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .navbar .links {
    color: var(--brand-dark-on-primary);
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .links:hover {
    color: color-mix(in srgb, var(--brand-dark-on-primary), var(--brand-dark-primary) 15%);
}

[data-bs-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200, 216, 192, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Card headers — override Bootstrap primary bg for dark context */
[data-bs-theme="dark"] .card-header.bg-primary {
    background-color: var(--brand-dark-primary) !important;
    border-color: color-mix(in srgb, var(--brand-dark-primary), white 20%);
}

/* Links with hardcoded colors */
[data-bs-theme="dark"] .links {
    color: var(--brand-dark-highlight);
}

[data-bs-theme="dark"] .lastlotlink {
    color: #ff6b6b !important;
}

/* Cookie consent banner (spatie/laravel-cookie-consent) */
[data-bs-theme="dark"] .cookie-consent .bg-yellow-100 {
    background-color: #2b2f35 !important;
}

[data-bs-theme="dark"] .cookie-consent .text-black {
    color: #e6edf3 !important;
}

[data-bs-theme="dark"] .cookie-consent .bg-yellow-400 {
    background-color: var(--brand-dark-accent);
    color: white;
}

[data-bs-theme="dark"] .cookie-consent .bg-yellow-400:hover {
    background-color: color-mix(in srgb, var(--brand-dark-accent), white 20%);
}

/* btn-outline-dark is invisible on dark backgrounds — invert to light */
[data-bs-theme="dark"] .btn-outline-dark {
    color: #c9d1d9 !important;
    border-color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
    color: #212529 !important;
    background-color: #c9d1d9 !important;
}

/* Tailwind Breeze primary button — invisible on dark backgrounds without a border */
[data-bs-theme="dark"] .bg-gray-800 {
    border: 1px solid #4b5563 !important;
}

/* Tailwind utility classes used on Bootstrap-layout auth pages (not auto-switched) */
[data-bs-theme="dark"] .text-gray-600 {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .text-gray-900 {
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .text-indigo-600 {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .text-green-600 {
    color: #6ee7b7 !important;
}

[data-bs-theme="dark"] .hover\:text-gray-900:hover {
    color: #e5e7eb !important;
}

/* Theme switcher dropdown — dark variant */
[data-bs-theme="dark"] .theme-switcher-menu {
    background: #2b2f35;
    border: 1px solid #3a3f47;
}

[data-bs-theme="dark"] .theme-switcher-menu .dropdown-item {
    color: #c8ccd3;
}

[data-bs-theme="dark"] .theme-switcher-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .theme-switcher-menu .dropdown-item.active {
    background: rgba(42, 82, 28, 0.3);
    color: #8aba78;
    border-left: 3px solid #5a8a48;
    font-weight: 600;
}

/* =====================================================
   Homepage — hero, testimonials, CTA section, main website card
   ===================================================== */

/* Hero section — vertical gradient blending from navbar green downward */
[data-bs-theme="dark"] .hero-section {
    background: linear-gradient(to bottom, var(--brand-dark-primary), color-mix(in srgb, var(--brand-dark-primary), white 25%));
    margin-bottom: 0 !important;
}

/* CTA section gradient — dark-aware */
[data-bs-theme="dark"] .cta-section {
    background: linear-gradient(135deg, #1a1d21 0%, #161b22 100%) !important;
}

/* Testimonials section background */
[data-bs-theme="dark"] .testimonials-section {
    background: #1a1d21 !important;
}

/* Testimonial card */
[data-bs-theme="dark"] .testimonial-card {
    background: #2b2f35 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Testimonial text */
[data-bs-theme="dark"] .testimonial-text {
    color: #c9d1d9 !important;
}

/* Testimonial author name — override both inline style and class */
[data-bs-theme="dark"] .testimonial-author h5 {
    color: var(--brand-dark-highlight);
}

/* Carousel controls — lighter green for visibility on dark */
[data-bs-theme="dark"] .carousel-control-prev-icon,
[data-bs-theme="dark"] .carousel-control-next-icon {
    background-color: var(--brand-dark-accent);
}

[data-bs-theme="dark"] .carousel-indicators button {
    background-color: var(--brand-dark-accent);
}


/* CTA outline buttons — dark-aware */
[data-bs-theme="dark"] .cta-secondary {
    background: transparent !important;
    color: var(--brand-dark-highlight);
    border-color: var(--brand-dark-highlight);
}

[data-bs-theme="dark"] .cta-secondary:hover {
    background: var(--brand-dark-highlight);
    color: var(--brand-dark-primary);
}

/* Main website info card */
[data-bs-theme="dark"] .alert-info {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-dark-primary), black 10%), var(--brand-dark-primary));
    border-color: var(--brand-dark-accent);
    color: var(--brand-dark-on-primary);
}

[data-bs-theme="dark"] .alert-info h4,
[data-bs-theme="dark"] .alert-info p {
    color: var(--brand-dark-on-primary);
}

/* =====================================================
   Highlights page — amenities, recreation, contact
   ===================================================== */

[data-bs-theme="dark"] .amenities-section {
    background: linear-gradient(135deg, #1a1d21 0%, color-mix(in srgb, var(--brand-dark-primary), black 10%) 100%);
}

[data-bs-theme="dark"] .amenities-title,
[data-bs-theme="dark"] .category-title,
[data-bs-theme="dark"] .recreation-title {
    color: var(--brand-dark-on-primary);
}

[data-bs-theme="dark"] .amenity-icon {
    color: color-mix(in srgb, var(--brand-dark-primary), white 40%);
}

[data-bs-theme="dark"] .recreation-item {
    background: color-mix(in srgb, var(--brand-dark-primary), white 10%);
}

[data-bs-theme="dark"] .recreation-item:hover {
    border-color: color-mix(in srgb, var(--brand-dark-primary), white 40%);
}

[data-bs-theme="dark"] .contact-section {
    background: linear-gradient(to bottom, var(--brand-dark-primary), color-mix(in srgb, var(--brand-dark-primary), white 25%));
}

[data-bs-theme="dark"] .cta-button:hover {
    color: var(--brand-dark-primary);
}

[data-bs-theme="dark"] .video-heading {
    color: var(--brand-dark-on-primary);
}

/* =====================================================
   Listings page — card headers with brand green
   ===================================================== */

/* Listing card headers — brand green background */
[data-bs-theme="dark"] .card .card-header {
    background-color: var(--brand-dark-primary);
    border-color: color-mix(in srgb, var(--brand-dark-primary), white 20%);
    color: var(--brand-dark-on-primary);
}

[data-bs-theme="dark"] .card .card-header .card-title {
    color: color-mix(in srgb, var(--brand-dark-on-primary), white 15%);
}

/* =====================================================
   Dark mode — button and interactive element overrides
   ===================================================== */

/* .btn-primary — dark green for dark backgrounds */
[data-bs-theme="dark"] .btn-primary {
    background-color: var(--brand-dark-accent);
    border-color: var(--brand-dark-accent);
    color: white;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background-color: color-mix(in srgb, var(--brand-dark-accent), black 15%);
    border-color: color-mix(in srgb, var(--brand-dark-accent), black 15%);
}

/* CTA primary + success — dark green */
[data-bs-theme="dark"] .cta-primary,
[data-bs-theme="dark"] .cta-success {
    background: var(--brand-dark-accent);
}

[data-bs-theme="dark"] .cta-primary:hover,
[data-bs-theme="dark"] .cta-success:hover {
    background: color-mix(in srgb, var(--brand-dark-accent), black 15%);
    box-shadow: 0 10px 25px rgba(58, 106, 42, 0.4) !important;
}

/* Thumbnail selection border — dark green */
[data-bs-theme="dark"] .thumbnail.selected,
[data-bs-theme="dark"] .thumbnail:focus {
    border-color: var(--brand-dark-accent);
}

/* Card detail — focus/loading accents */
[data-bs-theme="dark"] .main-image-wrapper:focus {
    outline-color: var(--brand-dark-accent);
}

[data-bs-theme="dark"] .lazy-load::after {
    border-top-color: var(--brand-dark-accent);
}

/* Radio buttons and checkboxes — dark green checked state */
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--brand-dark-accent);
    border-color: var(--brand-dark-accent);
}

[data-bs-theme="dark"] .btn-favorite {
    background-color: rgba(255, 255, 255, 0.12);
    color: #e6edf3;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =====================================================
   Admin layout — shared dark mode fixes
   Corrects hardcoded hex values used across admin pages
   that Bootstrap's automatic dark mode cannot override.
   ===================================================== */

/* Page wrapper — let Bootstrap's dark body background show through */
[data-bs-theme="dark"] .page-wrapper {
    background-color: var(--bs-body-bg);
}

/* Quick action tiles — dark card surface with visible border */
[data-bs-theme="dark"] .shortcut-tile {
    background: #2b2f35 !important;
    border-color: #3a3f47 !important;
    color: #c9d1d9 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .shortcut-tile__label {
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .shortcut-tile__desc {
    color: #9ca3af !important;
}

/* Sales dashboard — table containers, year selector, chart cards */
[data-bs-theme="dark"] .table-container {
    background: #2b2f35 !important;
    border-color: #3a3f47 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .year-selector {
    background: #2b2f35 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* .bg-light — Bootstrap doesn't auto-switch this utility in dark mode */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Section labels — muted text and visible divider line */
[data-bs-theme="dark"] .section-label {
    color: #9ca3af;
    border-bottom-color: #374151;
}

/* Timeline row dividers */
[data-bs-theme="dark"] .timeline-item {
    border-bottom-color: #374151;
}

/* =====================================================
   Admin — Site Activity page
   ===================================================== */

/* Window tabs — visible borders and readable text */
[data-bs-theme="dark"] .window-tab {
    border-color: #4b5563;
    color: #9ca3af;
}

[data-bs-theme="dark"] .window-tab--active,
[data-bs-theme="dark"] .window-tab--active:hover {
    color: white;
}

[data-bs-theme="dark"] .window-tab:hover:not(.window-tab--active) {
    border-color: #4A90A4;
    color: #4A90A4;
}

/* Table header — blend with Bootstrap's dark card surface instead
   of forcing the light variant that Bootstrap keeps light in dark mode */
[data-bs-theme="dark"] thead.table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

/* Dark-theme logo swap */
[data-bs-theme="dark"] .site-logo--light { display: none; }
[data-bs-theme="dark"] .site-logo--dark { display: inline; }
html:not([data-bs-theme="dark"]) .site-logo--dark { display: none; }

/* =====================================================
   Admin — Lot list icon buttons
   Overrides hardcoded light palette on .lot-icon-btn
   variants for dark mode readability.
   ===================================================== */

/* Listing action buttons — teal tint */
[data-bs-theme="dark"] .lot-icon-btn--listing {
    color: #7ab8ca;
    border-color: rgba(74, 144, 164, 0.35);
    background-color: rgba(74, 144, 164, 0.12);
}

/* Hover stays the same (solid teal — already good contrast) */

/* Facebook action buttons — blue tint */
[data-bs-theme="dark"] .lot-icon-btn--fb {
    color: #5b9df5;
    border-color: rgba(24, 119, 242, 0.35);
    background-color: rgba(24, 119, 242, 0.12);
}

/* Hover stays the same (solid Facebook blue — already good contrast) */

/* Badge dot — use card surface instead of hardcoded white */
[data-bs-theme="dark"] .lot-icon-badge {
    background: var(--bs-card-bg);
}

/* Action group labels — match muted text used elsewhere in dark mode */
[data-bs-theme="dark"] .lot-action-group-label {
    color: #9ca3af;
}

/* Force-replace warning text — amber-300 is readable on dark surfaces */
[data-bs-theme="dark"] .lot-force-replace-warning {
    color: #fbbf24;
}

/* Admin lot images — interaction borders */
[data-bs-theme="dark"] .photo-item:hover,
[data-bs-theme="dark"] .photo-item:focus-within {
    border-color: var(--brand-dark-accent);
}

[data-bs-theme="dark"] .sortable-chosen {
    border-color: var(--brand-dark-accent);
}

[data-bs-theme="dark"] .photo-item .form-control:focus {
    border-color: var(--brand-dark-accent);
}

/* Admin lot list — video badge */
[data-bs-theme="dark"] .badge-video {
    background-color: var(--brand-dark-primary) !important;
}

/* Non-membership badge — pin white text on orangered for dark mode */
[data-bs-theme="dark"] .badge-trailer-only {
    background-color: orangered !important;
    color: #fff !important;
}