/* --- Global Variables --- */
:root {
    --wi-green: #2d3e29;
    --wi-gold: #e6b800;
    --blaze-orange: #ff4500;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.forest-bg { background-color: var(--wi-green); }

/* --- Tooltip Styles --- */

/* Tooltip Container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}
/* User Customization: Position below and offset right */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10;
    
    top: 125%; 
    right: 20%;

    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* --- Scrollbar and Slider Styles --- */

/* Hide scrollbar for horizontal forecast */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Slider Styling */
input[type=range] {
    -webkit-appearance: none; 
    background: transparent; 
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ea580c;
    cursor: pointer;
    margin-top: -6px; 
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 2px;
}
/* Dark Mode Slider Track */
.dark input[type=range]::-webkit-slider-runnable-track {
    background: #4b5563;
}