/* risultati-elettive.css */
/* Stili per votazioni elettive (CdA e Sindaci) */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ============================================
   CONTAINER PRINCIPALE VOTAZIONE
   ============================================ */
.votazioni-elettive-container,
.votazioni-elettive-container * {
    font-family: 'Roboto', sans-serif !important;
    box-sizing: border-box;
}

.votazioni-elettive-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    container-type: inline-size;
}

/* ============================================
   TITOLO E INFO UTENTE
   ============================================ */
.votazioni-elettive-container .votazioni-titolo {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--votazioni-colore);
}

.votazioni-elettive-container .nome_votazione_label {
    font-size: calc(4cqw);
    color: var(--votazioni-colore-testo);
    background-color: var(--votazioni-colore);
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: 0;
    padding: calc(2cqw) calc(2cqw);
    border-radius: 4px;
}

.votazioni-elettive-container .votazione-nome {
    font-size: calc(2.8cqw);
    font-weight: bold;
    color: var(--votazioni-colore-testo);
    background-color: var(--votazioni-colore);
    padding: calc(1.4cqw) calc(1.5cqw);
    border-radius: 4px;
    margin-bottom: 0;
}

.votazioni-elettive-container .votazioni-user-info {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
    text-align: center;
}

.votazioni-elettive-container .user_name_label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.votazioni-elettive-container .user_name_value {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin: 5px 0 15px 0;
}

.votazioni-elettive-container .quota-info {
    font-size: 18px;
    color: var(--votazioni-colore);
}

.votazioni-elettive-container .quota-info strong {
    color: #333;
}

#quota-totale {
    font-weight: bold;
    font-size: 24px;
}

/* ============================================
   ISTRUZIONI
   ============================================ */
.votazioni-elettive-container .votazioni-istruzioni {
    background: #fff8e1;
    border-left: 4px solid var(--votazioni-colore);
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 0 6px 6px 0;
}

.votazioni-elettive-container .votazioni-istruzioni p {
    margin: 5px 0;
    font-size: 14px;
    color: #555;
}

/* ============================================
   LISTA CANDIDATI - DISTRIBUZIONE LIBERA
   ============================================ */
.votazioni-candidati-lista {
    margin-bottom: 25px;
}

.candidato-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.candidato-row:hover {
    border-color: var(--votazioni-colore);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--votazioni-colore) 15%, transparent);
}

.candidato-row .candidato-nome {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    flex: 1;
}

.candidato-row .voti-input {
    width: 120px;
    padding: 12px 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.2s;
}

.candidato-row .voti-input:focus {
    outline: none;
    border-color: var(--votazioni-colore);
}

/* ============================================
   LISTA CANDIDATI - PREFERENZA UNICA
   ============================================ */
.candidato-row.preferenza-unica {
    cursor: pointer;
    justify-content: flex-start;
}

.candidato-row.preferenza-unica:has(input:checked) {
    border-color: var(--votazioni-colore);
    background: #fff8f0;
}

.candidato-radio-label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.candidato-radio {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    accent-color: var(--votazioni-colore);
    cursor: pointer;
}

/* ============================================
   CONTATORE VOTI
   ============================================ */
.votazioni-totale {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 25px;
}

#voti-assegnati {
    font-weight: bold;
    font-size: 24px;
    color: var(--votazioni-colore);
}

#voti-rimanenti-container {
    color: #666;
    font-size: 14px;
}

#voti-rimanenti {
    font-weight: bold;
}

/* ============================================
   BOTTONE CONFERMA
   ============================================ */
.votazioni-actions {
    text-align: center;
    margin-bottom: 20px;
}

#btn-conferma-voto {
    background: var(--votazioni-colore);
    color: var(--votazioni-colore-testo);
    border: none;
    padding: 18px 50px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#btn-conferma-voto:hover {
    background: var(--votazioni-colore-hover);
}

#btn-conferma-voto:active {
    transform: scale(0.98);
}

#btn-conferma-voto:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ============================================
   MESSAGGI
   ============================================ */
.votazioni-messaggio {
    padding: 15px 20px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

.votazioni-messaggio.successo {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.votazioni-messaggio.errore {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* ============================================
   MESSAGGI CORTESIA E ERRORE
   ============================================ */
.votazioni-cortesia {
    max-width: 600px;
    margin: 50px auto;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid var(--votazioni-colore);
}

.votazioni-cortesia h3 {
    color: #333;
    margin-bottom: 20px;
}

.votazioni-cortesia p {
    color: #666;
    font-size: 16px;
    margin: 10px 0;
}

.votazioni-error {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background: #ffebee;
    border-radius: 8px;
    text-align: center;
    color: #c62828;
    font-size: 18px;
    border: 1px solid #ef9a9a;
}

/* ============================================
   RISULTATI ELETTIVE
   ============================================ */
.risultati-elettive-container {
    width: 100%;
    margin: 0 auto;
}

.risultati-elettiva-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    overflow: hidden;
}

.risultati-elettiva-box .risultati-header {
    background: var(--votazioni-colore);
    color: var(--votazioni-colore-testo);
    padding: 20px 30px;
    text-align: center;
}

.risultati-elettiva-box .risultati-header h2 {
    margin: 0;
    font-size: calc(26px * var(--vr-scale, 1));
    font-weight: bold;
    color: var(--votazioni-colore-testo);
}

.risultati-elettiva-box .risultati-header h3 {
    margin: 5px 0 0;
    font-size: calc(20px * var(--vr-scale, 1));
    font-weight: normal;
    color: var(--votazioni-colore-testo);
}

/* ============================================
   STATISTICHE
   ============================================ */
.risultati-statistiche {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 25px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.stat-item {
    text-align: center;
    padding: 10px 25px;
}

.stat-label {
    display: block;
    font-size: calc(12px * var(--vr-scale, 1));
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.stat-value {
    display: block;
    font-size: calc(28px * var(--vr-scale, 1));
    font-weight: bold;
    color: var(--votazioni-colore);
}

/* ============================================
   TABELLA RISULTATI
   ============================================ */
.risultati-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(18px * var(--vr-scale, 1));
}

.risultati-tabella th,
.risultati-tabella td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.risultati-tabella th {
    background: #333;
    color: #fff;
    font-weight: bold;
    font-size: calc(16px * var(--vr-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risultati-tabella tbody tr:hover {
    background: #f5f5f5;
}

.risultati-tabella tbody tr.vincitore {
    background: #fff8e1;
}

.risultati-tabella tbody tr.vincitore:hover {
    background: #ffecb3;
}

.col-posizione {
    width: 60px;
    text-align: center !important;
    font-weight: bold;
    color: #999;
}

.col-candidato {
    font-weight: 500;
}

.col-voti {
    text-align: right !important;
    font-weight: bold;
    color: var(--votazioni-colore);
    font-size: calc(20px * var(--vr-scale, 1));
}

.col-percentuale {
    text-align: right !important;
    color: #666;
}

.col-esito {
    text-align: center !important;
    width: 120px;
}

.badge-eletto {
    display: inline-block;
    background: #4CAF50;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: calc(12px * var(--vr-scale, 1));
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   GRAFICO A BARRE
   ============================================ */
.risultati-grafico {
    padding: 25px 30px;
}

.grafico-barra-container {
    margin-bottom: 15px;
}

.grafico-label {
    font-size: calc(14px * var(--vr-scale, 1));
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.grafico-barra-wrapper {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    height: 30px;
}

.grafico-barra {
    height: 100%;
    border-radius: 4px 0 0 4px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.grafico-valore {
    padding: 0 10px;
    font-size: calc(14px * var(--vr-scale, 1));
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

/* ============================================
   FOOTER RISULTATI
   ============================================ */
.risultati-footer {
    padding: 15px 30px;
    background: #f5f5f5;
    text-align: right;
    color: #999;
    font-size: 12px;
}

.risultati-vuoti {
    padding: 50px;
    text-align: center;
    color: #999;
    font-size: calc(16px * var(--vr-scale, 1));
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .votazioni-elettive-container {
        padding: 20px;
        margin: 10px;
    }
    
    .votazioni-elettive-container .votazione-nome {
        font-size: calc(2.2cqw);
    }
    
    .candidato-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .candidato-row .voti-input {
        width: 100%;
    }
    
    #btn-conferma-voto {
        width: 100%;
        padding: 15px;
    }
    
    .risultati-statistiche {
        flex-direction: column;
        gap: 10px;
    }
    
    .stat-item {
        padding: 10px;
    }
    
    .risultati-tabella {
        font-size: 14px;
    }
    
    .risultati-tabella th,
    .risultati-tabella td {
        padding: 12px 10px;
    }
    
    .col-voti {
        font-size: 16px;
    }
}
/* ==========================================
   PREFERENZE MULTIPLE (v2.3)
   ========================================== */

.candidato-row.preferenze-multiple {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.candidato-row.preferenze-multiple:hover {
    background-color: #f9f9f9;
}

.candidato-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.candidato-checkbox,
.candidato-checkbox-astensione {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    cursor: pointer;
    accent-color: var(--votazioni-colore);
}

.candidato-checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.candidato-checkbox:disabled + .candidato-nome {
    opacity: 0.4;
}

.astensione-row {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #ddd;
}

.votazioni-totale #selezioni-count {
    font-weight: bold;
    font-size: 1.2em;
}

.candidato-checkbox:checked + .candidato-nome {
    font-weight: bold;
    color: var(--votazioni-colore);
}

/* ==========================================
   SCALA DI GRADIMENTO (v2.3)
   ========================================== */

.votazioni-scala-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Roboto', Arial, sans-serif;
}

.scala-gradimento-opzioni {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.scala-opzione {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.scala-opzione:hover {
    border-color: var(--votazioni-colore);
    background-color: #fff9f5;
}

.scala-opzione.selezionato {
    border-color: var(--votazioni-colore);
    background-color: #fff3e0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--votazioni-colore) 20%, transparent);
}

.scala-radio {
    display: none;
}

.scala-label {
    flex: 1;
    cursor: pointer;
    font-size: 1.1em;
}

.scala-stelle {
    font-size: 1.5em;
    letter-spacing: 2px;
}

.scala-numero {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--votazioni-colore);
    color: white;
    border-radius: 50%;
    font-weight: bold;
}

.scala-testo {
    font-size: 1.1em;
}

/* Scala orizzontale per stelle (opzionale) */
.scala-gradimento-opzioni[data-tipo="stelle"] {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.scala-gradimento-opzioni[data-tipo="stelle"] .scala-opzione {
    flex-direction: column;
    width: auto;
    padding: 10px 15px;
}

/* ==========================================
   RISULTATI SCALA
   ========================================== */

.risultati-scala-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Roboto', Arial, sans-serif;
}

.risultati-media-box {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, var(--votazioni-colore), var(--votazioni-colore-hover));
    color: white;
    border-radius: 12px;
    margin-bottom: 30px;
}

.media-label {
    font-size: 1em;
    opacity: 0.9;
    margin-bottom: 10px;
}

.media-valore {
    font-size: 2.5em;
    font-weight: bold;
}

.media-stelle {
    display: block;
    font-size: 1.2em;
    margin-bottom: 5px;
}

.media-numero {
    display: block;
}

.media-votanti {
    margin-top: 15px;
    font-size: 0.9em;
    opacity: 0.8;
}

.risultati-distribuzione {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.risultati-distribuzione h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

.distribuzione-riga {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.distribuzione-label {
    width: 150px;
    flex-shrink: 0;
    font-size: 0.95em;
}

.distribuzione-barra-container {
    flex: 1;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 15px;
}

.distribuzione-barra {
    height: 100%;
    background: linear-gradient(90deg, var(--votazioni-colore), var(--votazioni-colore-hover));
    border-radius: 12px;
    transition: width 0.5s ease;
}

.distribuzione-valore {
    width: 100px;
    text-align: right;
    font-size: 0.9em;
    color: #666;
}

.risultati-footer {
    margin-top: 20px;
    text-align: center;
    color: #999;
}

/* Responsive */
@media (max-width: 600px) {
    .distribuzione-label {
        width: 80px;
        font-size: 0.85em;
    }

    .distribuzione-valore {
        width: 70px;
        font-size: 0.8em;
    }

    .scala-gradimento-opzioni[data-tipo="stelle"] {
        flex-direction: column;
    }
}

/* ============================================
   MODULO WRITE-IN v4.1 (voti a soggetti non in lista)
   ============================================ */
.votazioni-elettive-container .votazioni-writein-divisore {
    margin: 20px 0 10px 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-left: 4px solid var(--votazioni-colore);
    font-weight: 700;
    font-size: 0.95em;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.votazioni-elettive-container .candidato-row.writein-row {
    background: #fafafa;
    border-radius: 6px;
    padding: 8px;
}

.votazioni-elettive-container .candidato-row.writein-row .writein-nome {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    text-transform: uppercase;
}

.votazioni-elettive-container .candidato-row.writein-row .writein-nome:focus {
    border-color: var(--votazioni-colore);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.votazioni-elettive-container .candidato-row.writein-row .writein-quota {
    width: 100px;
    margin-left: 10px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    text-align: right;
}

/* Stato disabilitato (al raggiungimento di max_candidati_votabili):
   stile coerente tra campo nome e campo quota. */
.votazioni-elettive-container .candidato-row.writein-row .writein-nome:disabled,
.votazioni-elettive-container .candidato-row.writein-row .writein-quota:disabled {
    background-color: #ebebe4;
    color: #888;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Pulsante secondario (legacy, conservato per altri usi). */
.votazioni-elettive-container .votazioni-btn-secondary {
    background-color: transparent;
    color: var(--votazioni-colore, #ED7B2D);
    border: 2px solid var(--votazioni-colore, #ED7B2D);
    margin-left: 10px;
}
.votazioni-elettive-container .votazioni-btn-secondary:hover {
    background-color: var(--votazioni-colore, #ED7B2D);
    color: var(--votazioni-colore-testo, #ffffff);
}

/* Blocco astensione unificato (v4.1+): separato dal blocco CONFERMA VOTO
   con margine ampio + bordo tratteggiato superiore per scoraggiare click
   accidentali. Tutte e 3 le modalita' elettive lo usano. */
.votazioni-elettive-container .votazioni-actions-astensione {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
    text-align: center;
}

.votazioni-elettive-container .vot-astensione-hint {
    font-size: 0.9em;
    color: #666;
    margin: 0 0 12px 0;
    font-style: italic;
}

.votazioni-elettive-container .votazioni-btn-astensione {
    display: inline-block;
    padding: 8px 24px;
    background-color: transparent;
    color: #888;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
}

.votazioni-elettive-container .votazioni-btn-astensione:hover,
.votazioni-elettive-container .votazioni-btn-astensione:focus {
    background-color: #f0f0f0;
    color: #444;
    border-color: #888;
    outline: none;
}

.votazioni-elettive-container .votazioni-btn-astensione:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Marker "WI" (write-in) accanto al nome candidato write-in (v4.1).
   Badge testuale 'WI' invece di carattere Unicode ✍ (U+270D non era
   supportato dal font del tema Divi sul frontend, rendering come "-").
   Stile coerente con admin per uniformita' visiva. */
.vot-writein-marker {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.75em;
    line-height: 1.3;
    color: #fff;
    background-color: var(--votazioni-colore, #ED7B2D);
    border-radius: 4px;
    vertical-align: middle;
    cursor: help;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* In modalità preferenza_unica e preferenze_multiple il testo va dentro il
   label (accanto a radio/checkbox), non come riga separata. */
.votazioni-elettive-container .candidato-row.writein-row.preferenza-unica .writein-nome,
.votazioni-elettive-container .candidato-row.writein-row.preferenze-multiple .writein-nome {
    margin-left: 8px;
}

@media (max-width: 600px) {
    .votazioni-elettive-container .candidato-row.writein-row {
        flex-wrap: wrap;
    }
    .votazioni-elettive-container .candidato-row.writein-row .writein-quota {
        width: 90px;
    }
}
```

---

**RIEPILOGO SHORTCODE:**

**Votazione:**
```
[scala_gradimento nome_votazione="Soddisfazione Servizio" tipo_scala="stelle" livelli="5"]
[scala_gradimento nome_votazione="Proposta A" tipo_scala="likert" livelli="5" usa_quota="true"]
[scala_gradimento nome_votazione="Feedback" tipo_scala="testo" livelli="3"]
[scala_gradimento nome_votazione="Custom" tipo_scala="custom" etichette="Male|Così così|Bene|Ottimo"]
```

**Risultati:**
```
[risultati_scala nome_votazione="Soddisfazione Servizio" tipo_scala="stelle" livelli="5"]