/* Range Slider Styles */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

/* Track for Chrome/Safari/Edge */
input[type=range]::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 6px;
}

/* Thumb for Chrome/Safari/Edge */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 3px solid white;
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #1d4ed8;
    transform: scale(1.1);
}

/* Track for Firefox */
input[type=range]::-moz-range-track {
    height: 12px;
    border-radius: 6px;
}

/* Thumb for Firefox */
input[type=range]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Specific colors for work time slider */
#workTimeInput {
    background: #e2e8f0;
}

#workTimeInput::-webkit-slider-thumb {
    background: #2563eb;
}

#workTimeInput::-moz-range-thumb {
    background: #2563eb;
}

/* Specific colors for PAS slider */
#pasInput {
    background: #fde68a;
}

#pasInput::-webkit-slider-thumb {
    background: #d97706;
}

#pasInput::-moz-range-thumb {
    background: #d97706;
}

/* Pie Chart Container */
.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    border: 2px solid #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.pie-chart-container {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}