/* ============================================================
   Shortlist
   ============================================================
   La vista viveva ancora in coda a style.css, con i suoi esadecimali scritti
   a mano (#f1c40f e #f39c12 per la stella, che nel resto del sito e' --brand),
   raggi da 8px fuori scala e mezzo blocco di regole senza piu' un chiamante.

   La riga parla la lingua di Lista e Rosa: stessa faccina tonda .lst-face,
   stesso badge di ruolo, stessi numeri tabulari. Prezzo e note non stanno
   piu' aperti su ogni riga - erano un modulo di inserimento ripetuto cinque
   volte per livello - ma si aprono su quella su cui stai lavorando.
   ============================================================ */

/* .active e' obbligatorio: .tab-content si nasconde con display:none, e un
   `display` su un selettore di id lo batterebbe: la Shortlist si vedrebbe
   sopra ogni altra vista. */
#tab-shortlist.active {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0 auto;
    max-width: 860px;
}

/* ---- Fascia ------------------------------------------------------------ */
.sl-band { border-radius: var(--r-md); }

.sl-band .fw-band-inner {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
}

.sl-band-id {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
    min-width: 0;
}

.sl-band-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Sulla fascia scura il segmentato deve staccare senza accendersi. */
.sl-band .fw-seg {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

.sl-band .fw-seg-item { color: rgba(255, 255, 255, .82); }
.sl-band .fw-seg-item:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.sl-band .fw-seg-item[aria-pressed="true"] {
    background: var(--bg-surface);
    color: var(--ink-1);
}

/* I ruoli tengono il loro colore anche qui, come in Lista. */
.sl-band .fw-seg-item.fw-seg-p[aria-pressed="true"] { background: var(--role-p); color: #fff; }
.sl-band .fw-seg-item.fw-seg-d[aria-pressed="true"] { background: var(--role-d); color: #fff; }
.sl-band .fw-seg-item.fw-seg-c[aria-pressed="true"] { background: var(--role-c); color: #fff; }
.sl-band .fw-seg-item.fw-seg-a[aria-pressed="true"] { background: var(--role-a); color: #fff; }

/* Svuota tutto e' l'azione che non si annulla: sta in fondo alla fascia e non
   ha il rosso pieno, che nel sito e' riservato a cose gia' accadute. Compare
   solo quando c'e' davvero qualcosa da svuotare. */
.sl-svuota {
    background: transparent;
    border-color: rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .9);
}

.sl-svuota:hover {
    background: var(--negative);
    border-color: var(--negative);
    color: #fff;
}

/* ---- Livelli ----------------------------------------------------------- */
.sl-livello-head {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
}

/* Il nome del livello si puo' riscrivere, ma finche' non lo tocchi deve
   leggersi come un titolo, non come un campo da compilare: prima cinque
   caselle vuote erano tutta la pagina. */
/* input[type="text"] in style.css e' 0,1,1: la classe da sola perdeva, e il
   titolo restava una casella bianca larga tutta la riga. */
input.sl-nome-livello {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    color: var(--ink-1);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    /* Largo quanto il nome, non quanto la riga: a tutta larghezza tornava a
       leggersi come un campo da compilare, che e' il difetto di partenza. */
    max-width: 100%;
    min-width: 0;
    padding: 2px var(--sp-2);
    text-overflow: ellipsis;
    width: 14ch;
}

input.sl-nome-livello:hover { background: var(--bg-raised); }

input.sl-nome-livello:focus {
    background: var(--bg-surface);
    border-color: var(--navy);
    box-shadow: 0 0 0 3px var(--navy-tint);
    outline: none;
}

.sl-conteggio { flex-shrink: 0; }

.sl-righe {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2);
}

.sl-vuoto {
    color: var(--ink-3);
    margin: 0;
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
}

/* ---- La riga ----------------------------------------------------------- */
.sl-riga {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    column-gap: var(--sp-2);
    display: grid;
    grid-template-areas: "drag faccia testo azioni";
    grid-template-columns: 18px auto minmax(0, 1fr) auto;
    padding: var(--sp-2);
    transition: background-color var(--t-fast) var(--ease);
}

.sl-riga:hover { background: var(--bg-raised); }

.sl-riga.sl-riga-aperta {
    background: var(--bg-sunken);
    border-color: var(--line-strong);
}

/* Preso da un'altra squadra: resta leggibile, non semi-trasparente. Prima
   era opacity .5 e il nome scendeva sotto la soglia di contrasto. */
.sl-riga-presa .sl-nome,
.sl-riga-presa .sl-squadra { color: var(--ink-3); }

.sl-drag {
    color: var(--ink-3);
    cursor: grab;
    grid-area: drag;
    line-height: 1;
}

.sl-riga > .lst-face { grid-area: faccia; }

.sl-testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-area: testo;
    min-width: 0;
}

.sl-nome {
    background: none;
    border: 0;
    color: var(--ink-1);
    cursor: pointer;
    font-size: var(--fs-base);
    font-weight: 600;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-nome:hover { color: var(--navy); text-decoration: underline; }

.sl-meta {
    align-items: center;
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: var(--sp-1) var(--sp-2);
}

.sl-squadra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-quota { color: var(--ink-1); font-weight: 700; }
.sl-ha-note { color: var(--ink-3); }
.sl-preso { align-self: flex-start; }

.sl-azioni {
    display: flex;
    gap: 2px;
    grid-area: azioni;
}

.sl-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    color: var(--ink-3);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    width: 32px;
}

.sl-btn:hover { background: var(--bg-surface); border-color: var(--line-strong); color: var(--ink-1); }
.sl-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.sl-btn-x:hover { background: var(--negative-tint); border-color: var(--negative); color: var(--negative-ink); }
.sl-btn-apri[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Dove si tocca col dito il minimo resta 44px. */
@media (pointer: coarse) {
    .sl-btn { height: 44px; width: 44px; }
}

/* ---- Il dettaglio, aperto a richiesta ---------------------------------- */
.sl-dettaglio {
    border-top: 1px dashed var(--line-strong);
    display: grid;
    gap: var(--sp-3);
    grid-column: 1 / -1;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
}

.sl-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl-campo textarea { resize: vertical; }
.sl-livello-select { align-self: flex-start; }

/* ---- Riga persa -------------------------------------------------------- */
.sl-riga-persa {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
    padding: var(--sp-2);
}

/* ---- Trascinamento ----------------------------------------------------- */
.sl-riga.dragging { opacity: .4; }
.sl-riga.drag-above { box-shadow: inset 0 3px 0 var(--navy); }
.sl-riga.drag-below { box-shadow: inset 0 -3px 0 var(--navy); }

/* ---- Schermo stretto --------------------------------------------------- */
@media (max-width: 767px) {
    .sl-band .fw-band-inner { align-items: stretch; }
    .sl-band-tools { justify-content: space-between; }
    .sl-band .fw-seg { flex: 1 1 auto; }
    .sl-band .fw-seg-item { flex: 1 1 0; padding: 4px 8px; }

    /* Le azioni scendono sotto: quattro tasti da 44px e il nome non ci stanno
       sulla stessa riga di un telefono. */
    .sl-riga {
        grid-template-areas:
            "drag faccia testo"
            "azioni azioni azioni";
        grid-template-columns: 18px auto minmax(0, 1fr);
        row-gap: var(--sp-1);
    }

    .sl-azioni { justify-content: flex-end; }
    .sl-dettaglio { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Modale "aggiungi alla shortlist" ---------------------------------
   Aveva i colori del vecchio tema scuro scritti dentro (#2a2a2a con testo
   bianco): su un modale chiaro disegnava una select nera. Ora sono i
   controlli normali del sito, che i token vestono da soli. */
.shortlist-add-form .form-group + .form-group { margin-top: var(--sp-3); }

.shortlist-add-azioni {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    margin-top: var(--sp-4);
}