/* Dark mode images */
body.scheme_dark .vehicle-icon.car {
    background-image: url('images_dark/car_dark.png') !important;
}

body.scheme_dark .vehicle-icon.boat {
    background-image: url('images_dark/boat_dark.png') !important;
}

body.scheme_dark .vehicle-icon.tractor {
    background-image: url('images_dark/tractor_dark.png') !important;
}

body.scheme_dark .vehicle-icon.truck {
    background-image: url('images_dark/truck_dark.png') !important;
}

body.scheme_dark .vehicle-icon.motorcycle {
    background-image: url('images_dark/motorcycle_dark.png') !important;
}

body.scheme_dark .toggle-icon {
    background-image: url('images_dark/color_switcher_dark.png') !important;
}

#darkModeToggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: absolute;
    left: 425px;
    top: 16px;
}

/* Set specific dimensions for the image */
.toggle-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Dark Mode Styles */
body.scheme_dark {
    color: #f0f0f0 !important;
}

body.scheme_dark-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
}

body.scheme_dark .container {
    background-color: #202935 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

body.scheme_dark h2 {
    color: #ffffff !important;
}

body.scheme_dark .vehicle-tabs .vehicle-tab {
    background-color: #12151e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.scheme_dark .vehicle-tabs .vehicle-tab.active,
body.scheme_dark .vehicle-tabs .vehicle-tab:hover {
    background-color: #444 !important;
    color: #202935 !important;
}

body.scheme_dark .vehicle-tabs .vehicle-tab.active {
    background-color: #202935 !important;
}

body.scheme_dark select {
    background-color: #161C24 !important;
    color: #f0f0f0 !important;
    border: 1px solid #555 !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><path fill="%23fff" d="M0 0l5 5 5-5H0z"/></svg>') !important;

}

body.scheme_dark select:focus {
    border-color: #3498db !important;
    background-color: #2E3B4D !important;
}

body.scheme_dark .tile.original {
    background-color: #2E3B4D !important;
}

/* Adjust for Safari, if needed */
body.scheme_dark select::-ms-expand {
    display: none; /* Hides default arrow in IE */
}

body.scheme_dark .tile.increase {
    background-color: #2E3B4D !important;
    color: #3498db !important;
}

body.scheme_dark .tile-header,
body.scheme_dark .tile-number {
    color: #ffffff !important;
}

body.scheme_dark .divider {
    border-color: #444 !important;
}


body.scheme_dark #selectedVehicleInfo,
body.scheme_dark #requiredModifications {
    background-color: #2E3B4D !important;
    color: #f0f0f0 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.scheme_dark #hpCanvas,
body.scheme_dark #torqueCanvas {
    background-color: #202935 !important;
}

body.scheme_dark .tooltip {
    background-color: #444 !important;
    color: #f0f0f0 !important;
    border: 1px solid #555 !important;
}

body.scheme_dark .loading-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

body.scheme_dark .spinner {
    border-color: #555 !important;
    border-top-color: #ccc !important;
}

body.scheme_dark .loading-text {
    color: #e0e0e0 !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    body.scheme_dark .container {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    body.scheme_dark h2 {
        color: #ffffff !important;
    }

    body.scheme_dark .vehicle-tabs .vehicle-tab {
        background-color: #12151e !important;
        color: #e0e0e0 !important;
    }

    body.scheme_dark .vehicle-tabs .vehicle-tab.active {
        background-color: #202935 !important;
        color: #ffffff !important;
    }

    body.scheme_dark #selectedVehicleInfo {
        background-color: #202935 !important;
        color: #ffffff !important;
    }
}