:root {
    --bs-primary: #e60012;
    --bs-primary-rgb: 230, 0, 18;
}

/* Override Bootstrap primary colors */
.btn-primary {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
}

.btn-primary:hover {
    background-color: #cc0010 !important;
    border-color: #cc0010 !important;
}

.btn-primary:focus {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 0, 18, 0.25) !important;
}

.btn-primary:active {
    background-color: #b3000e !important;
    border-color: #b3000e !important;
}

.btn-outline-primary {
    color: #e60012 !important;
    border-color: #e60012 !important;
}

.btn-outline-primary:hover {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

.text-primary {
    color: #e60012 !important;
}

.bg-primary {
    background-color: #e60012 !important;
}

.border-primary {
    border-color: #e60012 !important;
}

/* Additional primary color overrides */
.link-primary {
    color: #e60012 !important;
}

.link-primary:hover {
    color: #cc0010 !important;
}

.form-check-input:checked {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
}

.form-check-input:focus {
    border-color: #e60012 !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 0, 18, 0.25) !important;
}

.form-select:focus {
    border-color: #e60012 !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 0, 18, 0.25) !important;
}

.form-control:focus {
    border-color: #e60012 !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 0, 18, 0.25) !important;
}

.nav-link.active {
    color: #e60012 !important;
}

.pagination .page-link {
    color: #e60012 !important;
}

.pagination .page-link:hover {
    color: #cc0010 !important;
}

.pagination .page-item.active .page-link {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
}

/* Chart.js time selector overrides */
.chartjs-time-selector button {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

.chartjs-time-selector button:hover {
    background-color: #cc0010 !important;
    border-color: #cc0010 !important;
}

.chartjs-time-selector button.active {
    background-color: #b3000e !important;
    border-color: #b3000e !important;
}

/* Chart.js legend and controls */
.chartjs-legend button {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

.chartjs-legend button:hover {
    background-color: #cc0010 !important;
    border-color: #cc0010 !important;
}

/* Any remaining blue elements */
button[style*="blue"], 
button[style*="rgb(13, 110, 253)"],
button[style*="#0d6efd"] {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

/* More aggressive Chart.js overrides */
canvas + div button,
.chart-container button,
[class*="chart"] button,
div[style*="position: absolute"] button {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

/* Target any button near charts */
#salesChart + * button,
#salesChart ~ * button {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

/* Override any Bootstrap blue that might be applied */
.btn:not(.btn-outline-primary):not(.btn-link) {
    background-color: #e60012 !important;
    border-color: #e60012 !important;
    color: white !important;
}

/* Time selector buttons specific overrides */
.time-btn.btn-outline-primary {
    color: inherit !important;
    border-color: currentColor !important;
    background-color: transparent !important;
}

.time-btn.btn-outline-primary:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.time-btn.btn-outline-primary.active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.time-btn.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1) !important;
    border-color: currentColor !important;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f5f7fa;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-top: 72px; /* Added padding for fixed navbar */
}

.card, .modal-content {
    border: none !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none !important;
}

/* Main content area with transparent background */
#main-content {
    background-color: transparent;
    margin: 1rem auto;
    padding: 1.5rem;
    max-width: 1200px;
    width: 100%;
}

/* Responsive adjustments for main content */
@media (max-width: 768px) {
    #main-content {
        margin: 0.5rem auto;
        padding: 1rem;
    }
}

@media (min-width: 1400px) {
    #main-content {
        max-width: 1320px;
    }
}

/* Clickable logo styles */
.navbar-brand {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    color: #e60012 !important;
}

.navbar-brand:hover {
    opacity: 0.8;
}

.navbar-brand:active {
    opacity: 0.6;
}
.chart-container {
    position: relative;
    width: 100%;
    height: 40vh;
    max-height: 400px;
}
@media (max-width: 768px) {
    .chart-container {
        height: 35vh;
        max-height: 300px;
    }
}
.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}
@media (max-width: 768px) {
    .card-img-top {
        height: 40vw;
    }
}
.car-card {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    will-change: transform;
    contain: layout style paint;
}
.car-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

/* Lazy loading styles */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.modal-content {
    background-color: #e9ecef;
}
.clickable-filter {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}
.clickable-filter:hover {
    opacity: 0.8;
}

#theme-toggler {
    cursor: pointer;
}
body:not(.dark-mode) #theme-icon {
    color: #212529; /* Dark icon in light mode */
}
body.dark-mode #theme-icon {
    color: #f8f9fa; /* Light icon in dark mode */
}


/* Dark Mode Theme */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}
.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}
.dark-mode .bg-light {
    background-color: #1e1e1e !important;
}
.dark-mode .text-body-emphasis {
    color: #ffffff !important;
}
.dark-mode .text-body-secondary {
    color: #a0a0a0 !important;
}
.dark-mode .text-muted {
    color: #a0a0a0 !important;
}
.dark-mode .navbar {
    background-color: rgba(30, 30, 30, 0.85) !important;
}
.dark-mode .time-btn.btn-outline-primary:hover {
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}
.dark-mode .time-btn.btn-outline-primary.active {
    background-color: #dee2e6 !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

.dark-mode .border-bottom, .dark-mode .border {
    border-color: #495057 !important;
}
.dark-mode .card, .dark-mode .modal-content {
    background-color: #1e1e1e;
    color: #e0e0e0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}
.dark-mode .form-control, .dark-mode .form-select {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #3d3d3d;
}
.dark-mode .form-control::placeholder {
    color: #adb5bd;
}
.dark-mode .modal-header, .dark-mode .modal-footer {
    border-color: #2c2c2c;
}
.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(50%);
    opacity: 1 !important;
}

.dark-mode .btn-close:hover {
    filter: invert(1) grayscale(100%) brightness(30%);
}

/* Secondary buttons in dark mode */
.dark-mode .btn-secondary {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
    color: #e0e0e0 !important;
}

.dark-mode .btn-secondary:hover {
    background-color: #3d3d3d !important;
    border-color: #3d3d3d !important;
    color: #ffffff !important;
}

/* Dropdown arrow color matching text */
.form-select {
    color: #212529;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
}

.dark-mode .form-select {
    color: #dee2e6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
}

/* Custom treasure hunt tag colors */
.badge.treasure-hunt {
    background-color: #e8e8e8 !important;
    color: #000000 !important;
    border: 1px solid #d0d0d0 !important;
}

.badge.super-treasure-hunt {
    background-color: #ffd700 !important;
    color: #000000 !important;
    border: 1px solid #cc9900 !important;
}

/* Custom chase tag colors - purple scheme */
.badge.chase {
    background-color: #e0d4f7 !important;
    color: #4a148c !important;
    border: 1px solid #b39ddb !important;
}

/* Purple subtle background and emphasis classes for Chase tags */
.bg-purple-subtle {
    background-color: #e0d4f7 !important;
}

.text-purple-emphasis {
    color: #4a148c !important;
}

.border-purple-subtle {
    border-color: #b39ddb !important;
}

/* Dark mode adjustments for purple Chase tags */
.dark-mode .badge.chase {
    background-color: #6a1b9a !important;
    color: #e1bee7 !important;
    border: 1px solid #8e24aa !important;
}

.dark-mode .bg-purple-subtle {
    background-color: #6a1b9a !important;
}

.dark-mode .text-purple-emphasis {
    color: #e1bee7 !important;
}

.dark-mode .border-purple-subtle {
    border-color: #8e24aa !important;
}

/* Price color styling for better contrast */
.text-success-emphasis {
    color: #198754 !important;
}

/* Dark mode price color - lighter green for better contrast */
.dark-mode .text-success-emphasis {
    color: #75b798 !important;
}

/* Logo styling - responsive sizing */
#logo img {
    height: 48px; /* Desktop size */
    transition: filter 0.3s ease;
}

/* Mobile responsive logo sizing */
@media (max-width: 768px) {
    #logo img {
        height: 32px; /* Smaller on mobile */
    }
}

@media (max-width: 576px) {
    #logo img {
        height: 28px; /* Even smaller on very small screens */
    }
}

/* Image container styling to match card background */
.image-container {
    background-color: #ffffff;
}

.dark-mode .image-container {
    background-color: #4a5568;
}

/* eBay listing card styling - consistent border radius */
.ebay-listing-card {
    border-radius: 0.5rem !important;
}

/* eBay listing image styling - rounded corners */
.ebay-listing-image {
    border-radius: 0.375rem;
}

/* eBay listing title styling - max width for readability */
.listing-title {
    max-width: 600px;
}

/* Force vertical centering of eBay listing button */
.ebay-listing-card .card-body > div:first-of-type {
    min-height: 40px;
    display: flex !important;
    align-items: center !important;
}

/* eBay listing card interactive hover */
.ebay-listing-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}
.ebay-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}