/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        switch.css
 * Path:        public/css/switch.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce lo stile dell’interruttore grafico basato su checkbox per campi vero/falso.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: switch booleano.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: struttura switch
 * ========================================================== */

/* Contenitore principale per affiancare l'interruttore e il testo. */
.switch-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

/* Struttura esterna dell'interruttore, resa come ovale cliccabile. */
label.switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 22px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* Checkbox nativo nascosto ma mantenuto come sorgente dello stato booleano. */
label.switch input[type="checkbox"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
 * SEZIONE: parti visuali interne
 * ========================================================== */

/* Sfondo dell'ovale quando lo switch è spento. */
label.switch .switch-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--color-border) !important;
    transition: background-color 0.3s ease !important;
    border-radius: var(--radius-switch) !important;
}

/* Cursore interno che scorre da sinistra a destra. */
label.switch .switch-slider:before {
    position: absolute !important;
    content: "" !important;
    height: 16px !important;
    width: 16px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: var(--color-on-primary) !important;
    transition: transform 0.3s ease !important;
    border-radius: var(--radius-round) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* ==========================================================
 * SEZIONE: stato attivo
 * ========================================================== */

/* Sfondo verde standard quando il checkbox è selezionato. */
label.switch input[type="checkbox"]:checked + .switch-slider {
    background-color: var(--color-primary-mid) !important;
}

/* Posizione del cursore quando il checkbox è selezionato. */
label.switch input[type="checkbox"]:checked + .switch-slider:before {
    transform: translateX(22px) !important;
}

/* ==========================================================
 * SEZIONE: focus da tastiera
 * ========================================================== */

/* L'input nativo e' invisibile: il focus da tastiera si vede sull'ovale. */
label.switch input[type="checkbox"]:focus-visible + .switch-slider {
    outline: 2px solid var(--color-primary-mid) !important;
    outline-offset: 2px !important;
}

/* ==========================================================
 * SEZIONE: stato disabilitato
 * ========================================================== */

/* Cursore non interattivo e colore sbiadito quando lo switch è disabilitato, sia acceso che spento. */
label.switch input[type="checkbox"]:disabled + .switch-slider {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}