/* ==========================================================================
   SIMULATORE - CUSTOM UI ELEMENTS
   Stili dedicati per la plancia (Dark/Tech Theme)
   ========================================================================== */

/* Contenitore dello slider per far spazio al tooltip sopra */
.sim-control-group {
    position: relative;
    padding-top: 24px;
    margin-bottom: 20px;
}

/* Resetta lo stile standard del browser */
.sim-slider {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

.sim-slider:focus {
    outline: none;
}

/* Il "binario" dello slider */
.sim-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #27272a; /* zinc-800 */
    border-radius: 2px;
    border: 1px solid #3f3f46; /* zinc-700 */
}

/* Il "pallino" da trascinare */
.sim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #60a5fa; /* blue-400 */
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
    transition: background 0.2s, box-shadow 0.2s;
}

.sim-slider::-webkit-slider-thumb:hover {
    background: #93c5fd; /* blue-300 */
    box-shadow: 0 0 15px rgba(147, 197, 253, 0.6);
}

/* Il Tooltip con il numero del valore */
.sim-tooltip {
    position: absolute;
    top: -22px; /* Era 0, ora lo alziamo sopra il cursore */
    background-color: rgba(30, 58, 138, 0.8); /* Leggermente più opaco per leggibilità */
    color: #60a5fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
    transform: translateX(-50%);
    border: 1px solid rgba(96, 165, 250, 0.3);
    pointer-events: none;
    white-space: nowrap; /* Evita che il testo vada a capo */
}