/* L'area di amministrazione: per PC, schermo largo, tastiera e mouse.
   Le modalità Canto e Suono sono per il telefono, questa no. */

.admin {
    --admin-fondo: #f7f7f8;
    --admin-riga: #ffffff;
    --admin-riga-alterna: #fafafb;
    --admin-bordo: #dcdce1;
    --admin-testo: #1d1d20;
    --admin-tenue: #6b6b74;
    --admin-scelta: #e8f1fd;
    --admin-barra: #1f2430;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--admin-fondo);
    color: var(--admin-testo);
    font-size: 14px;
}

/* ---- la barra in alto ---- */

.admin-barra {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 16px;
    height: 48px;
    background: var(--admin-barra);
    color: #f2f2f4;
    flex: 0 0 auto;
}

.admin-marchio { font-weight: 600; letter-spacing: 0.2px; }

.admin-voci { display: flex; gap: 4px; }

.admin-voci a {
    color: #c9c9d2;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
}

.admin-voci a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.admin-voci a.active { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; }

.admin-uscita { margin-left: auto; color: #c9c9d2; text-decoration: none; }
.admin-uscita:hover { color: #fff; }

.admin-esci {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #e8e8ee;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
}

.admin-esci:hover { background: rgba(255, 255, 255, 0.12); }

.admin-corpo {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---- la porta ---- */

.admin-porta {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #f0f1f4;
}

.admin-porta-riquadro {
    background: #fff;
    border: 1px solid #dcdce1;
    border-radius: 10px;
    padding: 32px 36px;
    width: 320px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.admin-porta h1 { font-size: 20px; margin: 0 0 4px; }
.admin-porta p { color: #6b6b74; margin: 0 0 16px; }
.admin-porta input { width: 100%; margin-bottom: 12px; letter-spacing: 4px; text-align: center; }
.admin-porta button { width: 100%; }

/* La via d'uscita dalla porta: senza, chi non ha il PIN resta chiuso fuori e dentro. */
.porta-uscita {
    display: block;
    margin-top: 16px;
    text-align: center;
    color: #6b6b74;
    text-decoration: none;
    font-size: 14px;
    padding: 8px;
    min-height: 24px;
}

.porta-uscita:hover { color: var(--accento, #0b5ed7); }
.admin-errore { color: #b02a37; margin-top: 12px; }

/* ---- testa della pagina e filtri ---- */

.admin-testa { display: flex; align-items: baseline; gap: 12px; }
.admin-testa h1 { font-size: 20px; margin: 0 0 12px; }
.admin-conteggio { color: var(--admin-tenue); }

.admin-filtri {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    margin-bottom: 10px;
}

.admin-filtri label { display: flex; align-items: center; gap: 6px; color: var(--admin-tenue); margin: 0; }

.filtro-cerca, .filtro-scelta {
    border: 1px solid var(--admin-bordo);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 14px;
    background: #fff;
}

.filtro-cerca { min-width: 260px; }

/* La spiegazione accanto alla ricerca prende quel che resta della riga. */
.filtri-spiega { flex: 1 1 320px; }

/* ---- operazioni in blocco ---- */

.admin-blocco {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: #edf4ff;
    border: 1px solid #c4d9f7;
    border-radius: 8px;
}

.blocco-quanti { font-weight: 600; margin-right: 4px; }
.blocco-separatore { width: 1px; height: 20px; background: #c4d9f7; margin: 0 4px; }
.blocco-esito { color: #1a6c3a; margin-left: 4px; }

.btn-blocco {
    border: 1px solid var(--admin-bordo);
    background: #fff;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--admin-testo);
    font-size: 14px;
}

.btn-blocco:hover { background: #f2f5fa; }
.btn-blocco.pubblica { border-color: #1a6c3a; color: #1a6c3a; }
.btn-blocco.ritira { border-color: #98690c; color: #98690c; }
.btn-blocco:disabled { opacity: 0.5; cursor: default; }

/* ---- la tabella ---- */

.admin-tabella {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
}

.tabella-canti { width: 100%; border-collapse: collapse; }

.tabella-canti thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f2f2f5;
    border-bottom: 1px solid var(--admin-bordo);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.tabella-canti th.ordinabile { cursor: pointer; user-select: none; }
.tabella-canti th.ordinabile:hover { background: #e8e8ee; }

.tabella-canti tbody tr { height: 34px; border-bottom: 1px solid #f0f0f3; }
.tabella-canti tbody tr:nth-child(even) { background: var(--admin-riga-alterna); }
.tabella-canti tbody tr:hover { background: #f3f6fb; }
.tabella-canti tbody tr.scelta { background: var(--admin-scelta); }

.tabella-canti td {
    padding: 4px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.tabella-canti .colonna-scelta { width: 32px; }
.tabella-canti .numero { text-align: right; width: 56px; color: var(--admin-tenue); }
.tabella-canti .titolo { font-weight: 500; max-width: 320px; }
.tabella-canti .codice { font-family: Consolas, monospace; color: var(--admin-tenue); }
.tabella-canti .incipit { color: var(--admin-tenue); max-width: 300px; }
.tabella-canti .tag { color: var(--admin-tenue); max-width: 160px; }
.tabella-canti .conteggio { text-align: center; width: 48px; }
.tabella-canti .quando { color: var(--admin-tenue); }

/* ---- stati ed esiti: si distinguono a colpo d'occhio ---- */

.stato, .esito {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.stato-bozza { background: #ececed; color: #4a4a52; }
.stato-pubblicato { background: #dff3e6; color: #1a6c3a; }
.stato-ritirato { background: #fdf0d9; color: #98690c; }

.esito-pulito { background: #dff3e6; color: #1a6c3a; }
.esito-con-avvisi { background: #fdf0d9; color: #98690c; }
.esito-scritto-a-mano { background: #ececed; color: #4a4a52; }
.esito-senza-accordi { background: #f1ecfb; color: #5b3ea8; margin-left: 4px; }

/* ---- l'editor: due strati che devono restare allineati al carattere ----
   Ogni proprietà che influenza il disegno del testo compare due volte, identica,
   su .editor-sfondo e .editor-testo. Cambiarne una sola sfasa i colori. */

.editor {
    display: flex;
    flex: 1 1 auto;
    min-height: 320px;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.editor-numeri {
    overflow: hidden;
    padding: 8px 6px 8px 10px;
    text-align: right;
    background: #f5f5f7;
    border-right: 1px solid var(--admin-bordo);
    color: #9a9aa4;
    flex: 0 0 auto;
    min-width: 44px;
}

.editor-numeri .numero,
.editor-sfondo,
.editor-testo {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 20px;
}

.editor-numeri .numero.errore { color: #b02a37; font-weight: 700; }

.editor-strati { position: relative; flex: 1 1 auto; min-width: 0; }

.editor-sfondo,
.editor-testo {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    white-space: pre;
    overflow: auto;
    tab-size: 4;
    word-spacing: normal;
    letter-spacing: normal;
}

.editor-sfondo { z-index: 0; pointer-events: none; color: #1d1d20; }

.editor-testo {
    z-index: 1;
    background: transparent;
    color: transparent;
    caret-color: #1d1d20;
    resize: none;
    outline: none;
}

.editor-riga { min-height: 20px; }

.fr-accordo { color: #0b5ed7; font-weight: 600; }
/* Come nella vista del canto: sottolineato ondulato, come un errore di ortografia. */
.fr-non-riconosciuto { text-decoration: underline wavy; text-decoration-color: #d08a00; }
.fr-direttiva { color: #6f42c1; }
.fr-commento { color: #6c757d; font-style: italic; }

/* ---- la barra dell'editor ---- */

.editor-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    margin-bottom: 8px;
}

.editor-barra .separatore { width: 1px; height: 20px; background: var(--admin-bordo); margin: 0 4px; }

/* ---- la scheda del canto ---- */

.scheda-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.scheda-identita { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.scheda-identita h1 { font-size: 20px; margin: 0; }
.scheda-identita .codice { font-family: Consolas, monospace; color: var(--admin-tenue); }
.scheda-versione { color: var(--admin-tenue); }
.scheda-modificato { color: #98690c; font-weight: 600; }
.scheda-azioni { display: flex; gap: 6px; flex-wrap: wrap; }

.scheda-errori {
    margin: 0 0 10px;
    padding: 8px 12px 8px 32px;
    background: #fdecee;
    border: 1px solid #f2c2c8;
    border-radius: 8px;
    color: #8f2530;
}

.scheda-errori li { cursor: pointer; }
.scheda-errori li:hover { text-decoration: underline; }

.scheda-avviso { color: #98690c; margin: 4px 0 0; }

.scheda-linguette { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--admin-bordo); }

.scheda-linguette button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--admin-tenue);
    font-size: 14px;
}

.scheda-linguette button:hover { color: var(--admin-testo); }
.scheda-linguette button.attiva { color: var(--admin-testo); font-weight: 600; border-bottom-color: #0b5ed7; }

.scheda-corpo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

.scheda-due-colonne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.scheda-anteprima, .scheda-originale {
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    padding: 12px 16px;
    overflow: auto;
}

.anteprima-comandi { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.anteprima-comandi label { display: flex; align-items: center; gap: 6px; margin: 0; }
.anteprima-nota { color: var(--admin-tenue); }

.scheda-originale h2 { font-size: 15px; margin: 0 0 8px; }
.scheda-originale .avvisi { background: #fdf0d9; border-radius: 6px; padding: 8px 8px 8px 28px; color: #7a5309; }
.scheda-originale .originale { white-space: pre-wrap; font-family: Consolas, monospace; font-size: 13px; }

/* ---- metadati e tag ---- */

.scheda-modulo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px 20px;
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    padding: 16px;
    align-content: start;
}

.scheda-modulo label { display: flex; flex-direction: column; gap: 4px; color: var(--admin-tenue); }
.scheda-modulo label.lungo { grid-column: 1 / -1; }
.cambio-codice { display: flex; align-items: flex-end; gap: .5rem; }
.cambio-codice label { flex: 1 1 auto; }
.scheda-modulo input, .scheda-modulo textarea {
    border: 1px solid var(--admin-bordo);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 14px;
    color: var(--admin-testo);
}

.scheda-tag {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    padding: 16px;
    align-content: start;
}

.tag-gruppo h2 { font-size: 15px; margin: 0 0 8px; }
.tag-gruppo label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }

/* ---- spartiti e versioni ---- */

.scheda-spartiti, .scheda-versioni {
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    padding: 12px 16px;
    overflow: auto;
}

.scheda-spartiti input { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: 4px 6px; }
.scheda-spartiti input.stretto { width: 90px; }
.spartiti-caricamento { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.spartiti-caricamento label { display: flex; align-items: center; gap: 8px; margin: 0; }

.versioni-diff h2 { font-size: 15px; margin: 16px 0 8px; }

.diff {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 18px;
    background: #fafafb;
    border: 1px solid var(--admin-bordo);
    border-radius: 6px;
    padding: 8px;
    margin: 0;
    max-height: 40vh;
    overflow: auto;
}

.diff-aggiunta { background: #e3f6e9; color: #135c31; display: block; }
.diff-tolta { background: #fdeaec; color: #8f2530; display: block; }
.diff-uguale { color: #4a4a52; display: block; }
.scheda-coda { color: var(--admin-tenue); margin-right: 8px; align-self: center; }

/* ---- cataloghi ---- */

.cataloghi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.catalogo {
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    padding: 14px 16px;
}

.catalogo h2 { font-size: 15px; margin: 0 0 10px; }

/* Razor mangia lo spazio fra il titolo e il conteggio: lo rimette il margine. */
.catalogo h2 .voce-quanti { margin-left: 8px; color: var(--admin-tenue); font-weight: 400; }

.catalogo-voci { list-style: none; margin: 0 0 12px; padding: 0; }

.catalogo-voci li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f3;
}

.catalogo-voci .voce-nome { flex: 1 1 auto; }
.catalogo-voci .voce-quanti { color: var(--admin-tenue); white-space: nowrap; }
.catalogo-voci input.voce-nome, .catalogo-nuova input {
    border: 1px solid var(--admin-bordo);
    border-radius: 6px;
    padding: 4px 6px;
}

.catalogo-voci select, .catalogo-nuova select {
    border: 1px solid var(--admin-bordo);
    border-radius: 6px;
    padding: 4px 6px;
    max-width: 160px;
}

.catalogo-nuova { display: flex; gap: 6px; flex-wrap: wrap; }
.catalogo-messaggio { color: #98690c; margin: 8px 0 0; }

/* ---- strumenti ---- */

.strumenti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

.strumento {
    background: #fff;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    padding: 14px 16px;
}

.strumento h2 { font-size: 15px; margin: 0 0 8px; }
.strumento code { background: #f2f2f5; padding: 1px 4px; border-radius: 4px; }

.statistiche { list-style: none; margin: 0; padding: 0; }
.statistiche li { padding: 3px 0; border-bottom: 1px solid #f4f4f6; }
.statistiche .numero { display: inline-block; min-width: 48px; font-weight: 600; text-align: right; margin-right: 8px; }

.import-esito { margin-top: 10px; }
.import-esito .avvisi { background: #fdf0d9; border-radius: 6px; padding: 8px 8px 8px 28px; color: #7a5309; }

.pin-modulo { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-modulo input { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: 5px 8px; width: 130px; }

/* ---- la preparazione della messa (RF-P) ---- */

.avviso-offline {
    margin: 0;
    padding: .6rem 1.4rem;
    background: #fdf0d9;
    color: #98690c;
    border-bottom: 1px solid #f0dcb4;
}

.mese-corrente { font-weight: 600; text-transform: capitalize; min-width: 10em; text-align: center; }
.btn-blocco.principale { border-color: #0b5ed7; color: #0b5ed7; font-weight: 600; }

.riquadro-nuova {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .8rem;
    padding: .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    background: #fff;
}

.riquadro-nuova label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--admin-tenue); }
.riquadro-nuova input, .riquadro-nuova select { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: .4rem .5rem; min-height: 36px; }
.riquadro-nuova label.note { flex: 1 1 14rem; }

/* Una casella da spuntare con la sua scritta a fianco. Senza questo prende gli stili dei
   campi — colonna e min-height 36px — e diventa un quadratone staccato dalla sua etichetta. */
.riquadro-nuova label.opzione {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
}

.riquadro-nuova label.opzione input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--accento, #0b5ed7);
}

.tabella-celebrazioni { width: 100%; border-collapse: collapse; background: #fff; }
.tabella-celebrazioni th { text-align: left; font-size: .8rem; color: var(--admin-tenue); padding: .5rem .6rem; border-bottom: 1px solid var(--admin-bordo); }
.tabella-celebrazioni td { padding: .5rem .6rem; border-bottom: 1px solid #f0f0f3; }
.tabella-celebrazioni tbody tr { cursor: pointer; }
.tabella-celebrazioni tbody tr:hover { background: #f7f9ff; }
.tabella-celebrazioni td:first-child { text-transform: capitalize; }

.stato-confermata { background: #e6f4ea; color: #1e7b34; }

.scaletta { display: flex; flex-direction: column; gap: .8rem; }

.momento {
    border: 1px solid var(--admin-bordo);
    border-radius: 8px;
    background: #fff;
    padding: .8rem 1rem;
}

.momento.saltato { background: #fafafb; }
.momento h2 { font-size: 1rem; margin: 0 0 .5rem; }
.momento .voci { list-style: none; margin: 0 0 .6rem; padding: 0; }

.momento .voci li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid #f0f0f3;
    min-height: 40px;
}

.momento .voce-testo { flex: 1 1 auto; }
.momento .numero { color: #0b5ed7; font-weight: 700; margin-right: .4rem; }
.momento .testo-libero { font-style: italic; }
.momento .tonalita-voce, .momento .note-voce { color: var(--admin-tenue); font-size: .85rem; margin-left: .5rem; }

.aggiunta { border-top: 1px dashed var(--admin-bordo); padding-top: .6rem; }
.scelta-canto .campo-cerca { width: 100%; box-sizing: border-box; border: 1px solid var(--admin-bordo); border-radius: 6px; padding: .45rem .6rem; min-height: 38px; }
.scelta-canto .elenco-canti { list-style: none; margin: .5rem 0; padding: 0; max-height: 16rem; overflow-y: auto; }

.riga-scelta {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    padding: .4rem .2rem;
    min-height: 38px;
    cursor: pointer;
}

.riga-scelta:hover { background: #f7f9ff; }
.scelta-canto .ultima-volta { color: var(--admin-tenue); font-size: .8rem; white-space: nowrap; }
.riga-scelta .ultima-volta { margin-left: auto; color: var(--admin-tenue); font-size: .8rem; white-space: nowrap; }
.testo-libero-nuovo { display: flex; gap: .5rem; margin: .5rem 0; }
.testo-libero-nuovo input { flex: 1 1 auto; border: 1px solid var(--admin-bordo); border-radius: 6px; padding: .4rem .6rem; min-height: 38px; }
.tonalita-scelta { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: .25rem .4rem; min-height: 32px; background: #fff; }
/* Razor mangia lo spazio fra il nome del momento e la nota: lo rimette il margine. */
.momento h2 .nota { margin-left: .4rem; font-weight: 400; }

/* ---- la griglia liturgia → temi (RF-U6) ---- */

.tabella-liturgia th.tema {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 8em;
    white-space: nowrap;
    font-weight: 500;
    padding: 6px 2px;
}

.tabella-liturgia td.peso { padding: 2px; text-align: center; }
.tabella-liturgia td.peso select { border: 1px solid var(--admin-bordo); border-radius: 4px; padding: 1px 2px; background: #fff; }
.tabella-liturgia tr.salvata td:first-child::after { content: " ✓"; color: #1a6c3a; }

/* ---- i canti proposti (RF-P4) ---- */

.proposti { border-bottom: 1px dashed var(--admin-bordo); padding-bottom: .6rem; margin-bottom: .6rem; }
.proposti h3 { font-size: .85rem; color: var(--admin-tenue); margin: 0 0 .3rem; font-weight: 600; }
.proposti ul { list-style: none; margin: 0; padding: 0; }
.proposti .perche { margin-left: auto; color: var(--admin-tenue); font-size: .8rem; text-align: right; }

/* ---- la barra su uno schermo stretto ---- */

/* Cinque elementi in fila, gap 24 e altezza fissa: su un telefono non ci stanno, e quello che
   avanza esce dallo schermo — «Torna all'app» tagliato a metà e il nome della sezione spezzato
   su due righe dentro 48 pixel di altezza. Qui la barra va a capo: sopra i comandi, sotto le
   voci. Il nome per esteso sparisce, perché in quale sezione si è lo dice la voce accesa. */
@media (max-width: 700px) {
    .admin-barra {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 8px 12px;
    }

    .admin-marchio { display: none; }

    .admin-voci {
        order: 3;
        flex: 1 1 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-voci a { white-space: nowrap; }

    .admin-uscita { margin-left: auto; }
}

/* ---- il riporto degli accordi ---- */

.riquadro-riporto {
    border: 1px solid var(--admin-bordo);
    border-left: 4px solid var(--accento, #0b5ed7);
    border-radius: 8px;
    background: #f7f9ff;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}

.riquadro-riporto h2 { font-size: 15px; margin: 0 0 .5rem; }
.riquadro-riporto ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.riquadro-riporto .riporto-fatto li { color: #1e7b34; }
.riquadro-riporto .riporto-lasciato li { color: #8a5300; }

/* L'anteprima della conversione degli stacchi: un canto per riga, il commento in codice. */
.elenco-stacchi { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .9rem; }
.elenco-stacchi code { font-size: .85rem; }

/* Le scritture che non sono accordi: avviso giallo, non errore rosso — il salvataggio passa. */
.scheda-avvisi-notazione {
    margin: 0 0 10px;
    padding: 8px 12px 8px 32px;
    background: #fff6e0;
    border: 1px solid #f0d58a;
    border-radius: 8px;
    color: #7a5608;
}
.scheda-avvisi-notazione li { cursor: pointer; }
.scheda-avvisi-notazione li:hover { text-decoration: underline; }

/* La pagina Notazione: un canto per voce, sotto le anomalie e le correzioni automatiche. */
.elenco-notazione { list-style: none; padding: 0; margin: 12px 0; }
.elenco-notazione > li { padding: 8px 0; border-bottom: 1px solid var(--admin-bordo, #e3e3e8); }
.elenco-notazione .stato-canto { color: var(--admin-tenue); font-size: .8rem; margin-left: 6px; }
.elenco-notazione .anomalie { margin: 4px 0 0; padding-left: 20px; color: #7a5608; font-size: .9rem; }
.elenco-notazione .correzioni { margin: 4px 0 0; padding-left: 20px; color: var(--admin-tenue); font-size: .85rem; }

/* ---- feste proprie ---- */

.tabella-feste td { vertical-align: middle; }
.tabella-feste input, .tabella-feste select { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: 3px 6px; }
.tabella-feste input.stretto { width: 60px; }
.tabella-feste input.largo { width: 100%; min-width: 260px; }
.tabella-feste td.azioni { white-space: nowrap; }
.tabella-feste tr.spenta td { color: var(--admin-tenue); }
.tabella-feste tr.spenta input.largo { text-decoration: line-through; }
.tabella-feste tr.riga-nuova td { background: #f7f9fc; }
.tabella-feste tr.salvata td:nth-child(3)::after { content: " ✓"; color: #1a6c3a; }

.calendario-scelta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.calendario-scelta select, .calendario-scelta input { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: 4px 6px; }
.calendario-scelta input { width: 90px; }

/* ---- calendario generale ---- */

.tabella-calendario td.quando { white-space: nowrap; color: var(--admin-tenue); }
.tabella-calendario td.regola { white-space: nowrap; }
.tabella-calendario .campi-regola { display: flex; gap: 4px; align-items: center; }
.tabella-calendario input.largo { min-width: 220px; }
.tabella-calendario tr.salvata td:nth-child(3)::after { content: " ✓"; color: #1a6c3a; }
.tabella-calendario .segno-modificata { color: var(--admin-tenue); margin-left: 4px; }
.admin-filtri input.filtro-anno { width: 80px; }
.admin-filtri input.filtro-anno, .admin-filtri input.filtro-testo { border: 1px solid var(--admin-bordo); border-radius: 6px; padding: 4px 6px; }

/* ---- aggiornamento dal calendario romano ---- */

.aggiornamento-romano { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.riquadro-aggiornamento { background: #fff; border: 1px solid var(--admin-bordo); border-radius: 8px; padding: 12px 16px; margin: 0 0 12px; max-height: 50vh; overflow: auto; }
.riquadro-aggiornamento h2 { font-size: 16px; margin: 0 0 8px; }
.riquadro-aggiornamento h3 { font-size: 14px; margin: 12px 0 4px; }
.riquadro-aggiornamento ul.scelte { list-style: none; margin: 0; padding: 0; }
.riquadro-aggiornamento ul.scelte > li { padding: 3px 0; border-bottom: 1px solid #eef0f4; }
.riquadro-aggiornamento ul.scelte label { display: flex; gap: 6px; align-items: baseline; margin: 0; }
.riquadro-aggiornamento ul.differenze { margin: 2px 0 0 26px; padding: 0; color: var(--admin-tenue); font-size: 13px; }
.riquadro-aggiornamento li.bloccata { opacity: 0.6; }
.riquadro-aggiornamento .btn-link { background: none; border: 0; color: #2b5cab; cursor: pointer; font-size: 12px; padding: 0 4px; }

/* ---- controllo e anteprima del calendario ---- */

.controllo-calendario { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 10px; }
.controllo-calendario .controllo-ok { color: #1a6c3a; align-self: center; }
.controllo-calendario.con-avvisi { background: #fdf0d9; border-radius: 8px; padding: 8px 10px; }
.avvisi-calendario { margin: 0; padding-left: 18px; color: #7a5309; flex: 1 1 400px; }
.anteprima-anno { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.anteprima-mese { background: #fff; border: 1px solid var(--admin-bordo); border-radius: 8px; padding: 8px 12px; }
.anteprima-mese h2 { font-size: 15px; margin: 0 0 6px; text-transform: capitalize; }
.anteprima-giorno { margin: 0; padding: 4px 0; border-bottom: 1px solid #eef0f4; font-size: 13px; }
.anteprima-giorno.domenica .data { font-weight: 700; }