/*
 * Backoffice sistema (A-SISTEMA): contenuti, associazione, sponsor, comunicazione, impostazioni
 * Stili specifici dell'area. Usare i token --clr-* di app.css; prima di creare una classe
 * verificare che non esista già in app.css.
 */

/* Tutte le regole valgono solo nelle pagine di quest'area: il wrapper :where() non aggiunge specificità. */
:where(body.modulo-sistema) {
    /* --------------------------------------------------------------- Utilità */
    .text-none { text-transform: none; letter-spacing: 0; font-weight: 400; }
    .bg-sabbia { background: var(--clr-surface-alt); }
    .text-warning-scuro { color: var(--clr-warning) !important; }
    .nota-sistema { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; color: var(--clr-text-muted); }
    .nota-sistema .material-symbols-outlined { margin-top: 0.1rem; }
    .form-text .material-symbols-outlined, .small > .material-symbols-outlined:first-child { vertical-align: -0.2em; }
    .riga-allerta > * { background-color: rgba(176, 58, 46, 0.045) !important; }
    .mt-n1 { margin-top: -0.25rem; }

    /* Avviso «dati riservati» */
    .avviso-riservato {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        flex-wrap: wrap;
        background: var(--clr-surface-dark);
        color: rgba(255, 255, 255, 0.88);
        border-radius: 0.5rem;
        padding: 0.85rem 1.1rem;
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .avviso-riservato > div { flex: 1 1 22rem; }
    .avviso-riservato strong { color: #FFFFFF; }
    .avviso-riservato > .material-symbols-outlined { color: var(--clr-ocra); font-size: 1.4rem; }

    /* --------------------------------------------------------------- Miniature e tag */
    .miniatura {
        width: 64px;
        height: 36px;
        object-fit: cover;
        border-radius: 0.25rem;
        display: block;
        background: var(--clr-surface-alt);
    }
    .miniatura--grande { width: 160px; height: 90px; flex-shrink: 0; }
    .miniatura--vuota {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--clr-text-disabled);
        border: 1px dashed var(--clr-border);
    }

    .tag-lista { display: flex; flex-wrap: wrap; gap: 0.25rem; }
    .tag {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.72rem;
        padding: 0.05rem 0.4rem;
        border-radius: 0.25rem;
        background: var(--clr-surface-alt);
        color: var(--clr-text-muted);
        font-family: var(--font-mono);
    }
    .tag--rimovibile button { border: 0; background: none; padding: 0 0.1rem; line-height: 1; color: inherit; font-size: 0.9rem; }
    .tag--rimovibile button:hover { color: var(--clr-danger); }

    .campo-tag {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        align-items: center;
        border: 1px solid var(--clr-border);
        border-radius: 0.375rem;
        padding: 0.4rem 0.5rem;
        background: #FFFFFF;
    }
    .campo-tag:focus-within { border-color: var(--clr-ocra); box-shadow: var(--focus-ring); }
    .campo-tag input { border: 0; outline: 0; flex: 1 1 8rem; font-size: 0.875rem; min-width: 6rem; }

    /* --------------------------------------------------------------- Editor articolo */
    .titolo-input { font-family: var(--font-titoli); font-weight: 600; font-size: 1.4rem; }
    .contatore { font-size: 0.75rem; font-family: var(--font-mono); color: var(--clr-text-muted); white-space: nowrap; }
    .contatore.oltre { color: var(--clr-danger); font-weight: 600; }
    .contatore.vicino { color: var(--clr-warning); }

    .editor { border: 1px solid var(--clr-border); border-radius: 0.375rem; background: #FFFFFF; }
    .editor:focus-within { border-color: var(--clr-ocra); box-shadow: var(--focus-ring); }
    .editor__barra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem;
        padding: 0.35rem 0.5rem;
        background: var(--clr-surface-alt);
        border-bottom: 1px solid var(--clr-divider);
        border-radius: 0.375rem 0.375rem 0 0;
        position: sticky;
        top: var(--admin-header-h);
        z-index: 3;
    }
    .editor__btn {
        min-width: 2rem;
        height: 2rem;
        border: 0;
        background: none;
        border-radius: 0.25rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--clr-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .editor__btn:hover { background: #FFFFFF; }
    .editor__btn .material-symbols-outlined { font-size: 1.15rem; }
    .editor__sep { width: 1px; height: 1.25rem; background: var(--clr-border); margin: 0 0.25rem; }
    .editor__info { font-size: 0.75rem; color: var(--clr-text-muted); }
    .editor__area { min-height: 22rem; max-height: 40rem; overflow-y: auto; padding: 1rem 1.25rem; outline: 0; max-width: none; }
    .editor__area img { max-width: 100%; height: auto; border-radius: 0.375rem; }
    .editor__area figure { margin: 1rem 0; }
    .editor__area figcaption { font-size: 0.8rem; color: var(--clr-text-muted); }
    .editor__area blockquote { border-left: 4px solid var(--clr-ocra); padding-left: 1rem; font-style: italic; }

    /* Ritaglio copertina */
    .nav-pills--sm .nav-link { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
    .ritaglio {
        position: relative;
        border-radius: 0.375rem;
        overflow: hidden;
        background: #1B1F24;
        user-select: none;
        touch-action: none;
    }
    .ritaglio__img { display: block; width: 100%; height: auto; opacity: 0.55; }
    .ritaglio__cornice {
        position: absolute;
        left: 0;
        top: 10%;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 100%;
        border: 2px solid var(--clr-ocra);
        box-shadow: 0 0 0 9999px rgba(12, 42, 66, 0.35);
        background-repeat: no-repeat;
        cursor: move;
        border-radius: 0.125rem;
    }
    .ritaglio__cornice::before, .ritaglio__cornice::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(to right, transparent 33.1%, rgba(255, 255, 255, 0.5) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, 0.5) 66.7%, transparent 66.9%),
            linear-gradient(to bottom, transparent 33.1%, rgba(255, 255, 255, 0.5) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, 0.5) 66.7%, transparent 66.9%);
    }
    .ritaglio__cornice::after { display: none; }
    .ritaglio__cornice:focus-visible { box-shadow: 0 0 0 9999px rgba(12, 42, 66, 0.35), var(--focus-ring); }
    .ritaglio__maniglia {
        position: absolute;
        right: -6px;
        bottom: -6px;
        width: 12px;
        height: 12px;
        background: var(--clr-ocra);
        border-radius: 2px;
    }
    .varianti { display: flex; flex-direction: column; gap: 0.5rem; }
    .variante { margin: 0; }
    .variante__img {
        width: 100%;
        background-color: var(--clr-surface-alt);
        background-repeat: no-repeat;
        border-radius: 0.375rem;
        border: 1px solid var(--clr-divider);
    }
    .variante figcaption { font-size: 0.72rem; color: var(--clr-text-muted); margin-top: 0.2rem; }

    /* Controlli e anteprime SEO */
    .lista-controlli { list-style: none; padding: 0; margin: 0; font-size: 0.82rem; }
    .lista-controlli li { display: flex; gap: 0.4rem; align-items: flex-start; padding: 0.2rem 0; }
    .lista-controlli .material-symbols-outlined { font-size: 1.1rem; }
    .lista-controlli .ok .material-symbols-outlined { color: var(--clr-success); }
    .lista-controlli .ko .material-symbols-outlined { color: var(--clr-warning); }

    .anteprima-google {
        background: #FFFFFF;
        border: 1px solid var(--clr-divider);
        border-radius: 0.5rem;
        padding: 0.85rem 1rem;
        font-family: Arial, sans-serif;
    }
    .anteprima-google__sito { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: #202124; line-height: 1.2; }
    .anteprima-google__favicon { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--clr-blu) url('/risorse/img/favicon.svg') center / 70% no-repeat; flex-shrink: 0; }
    .anteprima-google__url { color: #4D5156; font-size: 0.75rem; }
    .anteprima-google__titolo { color: #1A0DAB; font-size: 1.15rem; margin: 0.35rem 0 0.15rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
    .anteprima-google__testo { color: #4D5156; font-size: 0.82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .anteprima-social { border: 1px solid var(--clr-border); border-radius: 0.5rem; overflow: hidden; background: #F0F2F5; }
    .anteprima-social__img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--clr-blu); }
    .anteprima-social__corpo { padding: 0.6rem 0.8rem; font-family: Arial, sans-serif; }
    .anteprima-social__dominio { font-size: 0.7rem; color: #65676B; letter-spacing: 0.02em; }
    .anteprima-social__titolo { font-weight: 700; font-size: 0.95rem; color: #050505; line-height: 1.25; margin: 0.1rem 0; }
    .anteprima-social__testo { font-size: 0.8rem; color: #65676B; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

    .anteprima-privata { background: var(--clr-surface-alt); border-radius: 0.375rem; padding: 0.65rem 0.75rem; }

    @media (min-width: 1200px) {
        .colonna-laterale { position: sticky; top: calc(var(--admin-header-h) + 1rem); }
    }

    /* Timeline (storico, versioni, ripristini) */
    .timeline { list-style: none; padding: 0; margin: 0; position: relative; }
    .timeline::before { content: ''; position: absolute; left: 0.95rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--clr-divider); }
    .timeline__voce { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.45rem 0; position: relative; font-size: 0.875rem; }
    .timeline__icona {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: #FFFFFF;
        border: 2px solid var(--clr-divider);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--clr-text-muted);
        position: relative;
    }
    .timeline__icona .material-symbols-outlined { font-size: 1rem; }
    .timeline__voce--attiva .timeline__icona { border-color: var(--clr-success); color: var(--clr-success); }

    /* --------------------------------------------------------------- Itinerario */
    @media (min-width: 992px) {
        .lingue-affiancate > .tab-pane { display: block; opacity: 1; }
        .lingue-affiancate > .tab-pane + .tab-pane { border-left: 1px solid var(--clr-divider); }
    }
    .dropzone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-align: center;
        border: 2px dashed var(--clr-border-strong);
        border-radius: 0.5rem;
        background: var(--clr-bg);
        padding: 2rem 1rem;
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }
    .dropzone > .material-symbols-outlined { font-size: 2.25rem; color: var(--clr-text-muted); }
    .dropzone:hover, .dropzone.sopra { border-color: var(--clr-ocra); background: rgba(216, 154, 63, 0.06); }
    .dropzone:focus-within { box-shadow: var(--focus-ring); }
    .dropzone--compatta { padding: 1rem; }
    .dropzone--compatta > .material-symbols-outlined { font-size: 1.75rem; }

    .file-corrente {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        border: 1px solid var(--clr-divider);
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    .file-corrente > .material-symbols-outlined { color: var(--clr-area); font-size: 1.5rem; }

    .dati-estratti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0; }
    .dati-estratti > div { background: var(--clr-surface-alt); border: 1px solid var(--clr-divider); border-radius: 0.375rem; padding: 0.5rem 0.65rem; }
    .dati-estratti dt { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); }
    .dati-estratti dd { margin: 0; font-family: var(--font-titoli); font-weight: 700; font-size: 1.5rem; color: var(--clr-blu); font-variant-numeric: tabular-nums; line-height: 1.1; }
    .dati-estratti dd .unita { font-size: 0.8rem; }
    @media (max-width: 575.98px) { .dati-estratti { grid-template-columns: repeat(2, 1fr); } }
    .riga-poi + .riga-poi { border-top: 1px dashed var(--clr-divider); padding-top: 0.35rem; }

    /* --------------------------------------------------------------- Gallerie e media */
    .galleria-copertina { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
    .contatori-foto { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.8rem; color: var(--clr-text-muted); }
    .contatori-foto li { display: inline-flex; align-items: center; gap: 0.2rem; }
    .contatori-foto .ok { color: var(--clr-success); }
    .contatori-foto .attesa { color: var(--clr-warning); }
    .contatori-foto .ko { color: var(--clr-danger); font-weight: 600; }

    .contatori-grandi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0; text-align: center; }
    .contatori-grandi dt { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); order: 2; }
    .contatori-grandi > div { display: flex; flex-direction: column-reverse; gap: 0.15rem; }
    .contatori-grandi dd { margin: 0; font-family: var(--font-titoli); font-size: 2.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
    .contatori-grandi .ok { color: var(--clr-success); }
    .contatori-grandi .attesa { color: var(--clr-warning); }
    .contatori-grandi .ko { color: var(--clr-danger); }

    .caricamenti { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
    .caricamenti:empty { display: none; }
    .caricamento { border: 1px solid var(--clr-divider); border-radius: 0.375rem; overflow: hidden; background: #FFFFFF; font-size: 0.75rem; }
    .caricamento img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--clr-surface-alt); }
    .caricamento__corpo { padding: 0.4rem 0.5rem; }
    .caricamento__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .caricamento .progress { height: 0.35rem; margin-top: 0.3rem; }
    .caricamento .progress-bar { background: var(--clr-ocra); transition: width 0.2s ease; }
    .caricamento.completato .progress-bar { background: var(--clr-success); }

    .lista-foto { display: flex; flex-direction: column; }
    .foto-riga {
        display: grid;
        grid-template-columns: 1.5rem 128px 1fr auto;
        gap: 0.85rem;
        align-items: center;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--clr-divider);
    }
    .foto-riga:last-child { border-bottom: 0; }
    .foto-riga__ordine { color: var(--clr-text-disabled); font-size: 0.8rem; text-align: center; cursor: grab; }
    .foto-riga__img { width: 128px; height: 96px; object-fit: cover; border-radius: 0.375rem; background: var(--clr-surface-alt); }
    .foto-riga--bloccata { background: rgba(176, 58, 46, 0.05); box-shadow: inset 3px 0 0 var(--clr-danger); }
    .foto-riga--bloccata .foto-riga__img { filter: grayscale(1) blur(2px); }
    @media (max-width: 767.98px) {
        .foto-riga { grid-template-columns: 96px 1fr; }
        .foto-riga__ordine { display: none; }
        .foto-riga__img { width: 96px; height: 72px; }
        .foto-riga__stato { grid-column: 1 / -1; }
    }

    .griglia-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
    .media-tessera {
        position: relative;
        display: block;
        padding: 0;
        border: 1px solid var(--clr-border);
        border-radius: 0.375rem;
        overflow: hidden;
        background: #FFFFFF;
        text-align: left;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .media-tessera:hover { box-shadow: var(--shadow-hover, 0 2px 6px rgba(27, 31, 36, 0.07), 0 8px 20px rgba(27, 31, 36, 0.05)); transform: translateY(-2px); }
    .media-tessera img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--clr-surface-alt); }
    .media-tessera--bloccata img { filter: grayscale(1) blur(3px); }
    .media-tessera__stati { position: absolute; top: 0.4rem; left: 0.4rem; display: flex; gap: 0.25rem; }
    .media-tessera__nome { display: block; padding: 0.4rem 0.55rem; font-size: 0.75rem; color: var(--clr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .media-dettaglio__img { width: 100%; height: auto; border-radius: 0.5rem; background: var(--clr-surface-alt); }

    /* --------------------------------------------------------------- Soci, sponsor */
    .icona-archivio { display: inline-flex; color: var(--clr-blu); cursor: help; }
    .logo-sponsor {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.375rem;
        background: var(--clr-surface-alt);
        border: 1px solid var(--clr-divider);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-titoli);
        font-weight: 700;
        color: var(--clr-blu);
        flex-shrink: 0;
    }
    .promemoria { display: flex; flex-direction: column; gap: 0.15rem; }
    .promemoria__voce { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; white-space: nowrap; }
    .promemoria__voce .material-symbols-outlined { font-size: 1rem; }
    .promemoria__voce--inviato { color: var(--clr-success); }
    .promemoria__voce--programmato { color: var(--clr-text-muted); }
    .promemoria__voce--scaduto { color: var(--clr-text-disabled); text-decoration: line-through; }

    .anteprima-email { border: 1px solid var(--clr-border); border-radius: 0.5rem; overflow: hidden; background: #FFFFFF; }
    .anteprima-email__testata {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.2rem 0.75rem;
        margin: 0;
        padding: 0.65rem 0.9rem;
        background: var(--clr-surface-alt);
        border-bottom: 1px solid var(--clr-divider);
        font-size: 0.8rem;
    }
    .anteprima-email__testata dt { color: var(--clr-text-muted); font-weight: 500; }
    .anteprima-email__testata dd { margin: 0; }
    .anteprima-email__corpo { padding: 1rem 1.1rem; font-size: 0.9rem; }
    .anteprima-email__marchio { background: var(--clr-blu); margin: -1rem -1.1rem 1rem; padding: 0.6rem 1.1rem; border-bottom: 3px solid var(--clr-ocra); }
    .anteprima-email__testo { white-space: pre-line; margin-bottom: 1rem; }

    .dato-piccolo { background: var(--clr-surface-alt); border-radius: 0.375rem; padding: 0.5rem 0.75rem; }
    .dato-piccolo span { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); }
    .dato-piccolo strong { font-size: 1.1rem; }

    /* --------------------------------------------------------------- Comunicazione */
    .servizio-invio {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        background: var(--clr-success-bg);
        border-left: 4px solid var(--clr-success);
        border-radius: 0.375rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    .servizio-invio > .material-symbols-outlined { color: var(--clr-success); font-size: 1.5rem; }
    .servizio-invio__controlli { list-style: none; padding: 0; margin: 0 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .servizio-invio__controlli .badge-stato--successo { background: #FFFFFF; }

    .segmenti-scelta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .segmenti-scelta .btn-check:checked + .btn { background: var(--clr-blu); color: #FFFFFF; border-color: var(--clr-blu); }

    .lista-messaggi { list-style: none; padding: 0; margin: 0; }
    .lista-messaggi li + li { border-top: 1px solid var(--clr-divider); }
    .lista-messaggi__voce { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 1rem; color: var(--clr-text); text-decoration: none; border-left: 3px solid transparent; }
    .lista-messaggi__voce:hover { background: var(--clr-bg); color: var(--clr-text); }
    .lista-messaggi__voce.attivo { background: var(--clr-surface-alt); border-left-color: var(--clr-blu); }
    .lista-messaggi__nome { font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.4rem; }
    .lista-messaggi__oggetto { font-size: 0.85rem; }
    .lista-messaggi__anteprima { font-size: 0.78rem; color: var(--clr-text-muted); }
    .lista-messaggi__voce.non-letto .lista-messaggi__nome, .lista-messaggi__voce.non-letto .lista-messaggi__oggetto { font-weight: 600; }
    .pallino { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--clr-ocra); display: inline-block; }
    .messaggio-testo { font-size: 0.95rem; line-height: 1.6; max-width: 68ch; }

    /* --------------------------------------------------------------- Grafici SVG */
    .grafico { margin: 0; }
    .grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
    .grafico text { font-family: var(--font-testo); font-size: 11px; fill: var(--clr-text-muted); font-variant-numeric: tabular-nums; }
    .grafico__griglia line { stroke: var(--clr-divider); stroke-width: 1; }
    .grafico__griglia line:first-of-type { stroke: var(--clr-border-strong); }
    .grafico__linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
    .grafico__linea--1 { stroke: var(--clr-blu); }
    .grafico__linea--2 { stroke: var(--clr-ocra-scuro); }
    .grafico__area { fill: rgba(18, 58, 90, 0.08); }
    .grafico__punto { stroke: #FFFFFF; stroke-width: 2; }
    .grafico__punto--1 { fill: var(--clr-blu); }
    .grafico__punto--2 { fill: var(--clr-ocra-scuro); }
    .grafico__barra { fill: #8FA6BA; transition: fill 0.1s ease; }
    .grafico__barra--evidenza, .grafico__barra--1 { fill: var(--clr-blu); }
    .grafico__barra--2 { fill: var(--clr-ocra); }
    .grafico__valore { font-size: 10px; fill: var(--clr-text) !important; font-weight: 500; }
    .grafico__guida { stroke: var(--clr-border-strong); stroke-dasharray: 3 3; }
    .grafico__bersagli rect { fill: transparent; cursor: crosshair; }
    .grafico__legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.78rem; color: var(--clr-text-muted); margin-top: 0.35rem; }
    .grafico__chiave { display: inline-flex; align-items: center; gap: 0.35rem; }
    .grafico__chiave::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: currentColor; }
    .grafico__chiave--1::before { background: var(--clr-blu); }
    .grafico__chiave--2::before { background: var(--clr-ocra); }
    .grafico__chiave--3::before { background: #8FA6BA; }
    .grafico-tooltip {
        position: fixed;
        z-index: 1080;
        pointer-events: none;
        background: var(--clr-surface-dark);
        color: #FFFFFF;
        font-size: 0.75rem;
        padding: 0.3rem 0.55rem;
        border-radius: 0.25rem;
        box-shadow: 0 8px 24px rgba(27, 31, 36, 0.14);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .legenda-evidenza { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--clr-blu); vertical-align: -0.05em; }

    /* Barre di quota orizzontali */
    .quota { margin-bottom: 0.55rem; }
    .quota__testa { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.2rem; }
    .quota__testa:empty, .quota__testa > span:first-child:empty { display: none; }
    .quota__barra { height: 0.45rem; background: var(--clr-surface-alt); border-radius: 999px; overflow: hidden; }
    .quota__barra > span { display: block; height: 100%; background: var(--clr-blu); border-radius: 999px; }
    td .quota { margin: 0; }

    .barra-composta { display: flex; gap: 2px; height: 0.9rem; border-radius: 999px; overflow: hidden; }
    .barra-composta__parte--1 { background: var(--clr-blu); }
    .barra-composta__parte--2 { background: var(--clr-ocra); }
    .barra-composta__parte--3 { background: #8FA6BA; }
    .legenda-composta { list-style: none; padding: 0; margin: 0.6rem 0; font-size: 0.82rem; }
    .legenda-composta li { display: flex; justify-content: space-between; padding: 0.15rem 0; }

    /* --------------------------------------------------------------- Permessi e registro */
    .matrice-permessi .form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; }
    .matrice-permessi tbody th { white-space: nowrap; }
    .quadro-permessi td, .quadro-permessi th { text-align: center; }
    .quadro-permessi tbody th { text-align: left; }
    .cella-permesso { display: inline-flex; width: 1.6rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: 0.25rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; }
    .cella-permesso--p { background: var(--clr-success-bg); color: var(--clr-success); }
    .cella-permesso--s { background: var(--clr-info-bg); color: var(--clr-info); }
    .cella-permesso--l { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
    .cella-permesso--no { color: var(--clr-text-disabled); }

    .riga-diff > td { background: var(--clr-bg) !important; padding: 0.5rem 0.75rem 0.75rem 2rem !important; }
    .diff { border: 1px solid var(--clr-divider); max-width: 48rem; }
    .diff del { background: var(--clr-danger-bg); color: var(--clr-danger); text-decoration: line-through; padding: 0 0.2rem; border-radius: 0.2rem; font-family: var(--font-mono); font-size: 0.8rem; }
    .diff ins { background: var(--clr-success-bg); color: var(--clr-success); text-decoration: none; padding: 0 0.2rem; border-radius: 0.2rem; font-family: var(--font-mono); font-size: 0.8rem; }

    /* --------------------------------------------------------------- Impostazioni e backup */
    .lista-definizioni { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-size: 0.875rem; }
    .lista-definizioni dt { color: var(--clr-text-muted); font-weight: 500; }
    .lista-definizioni dd { margin: 0; }
    .anteprima-cookie { background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.5rem; padding: 0.75rem; box-shadow: 0 8px 24px rgba(27, 31, 36, 0.14); max-width: 22rem; }

    .calendario-mini { border: 1px solid var(--clr-divider); border-radius: 0.5rem; padding: 0.6rem; background: #FFFFFF; }
    .calendario-mini__titolo { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); margin: 0 0 0.4rem; text-align: center; }
    .calendario-mini__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
    .calendario-mini__intestazione { font-size: 0.65rem; color: var(--clr-text-disabled); font-weight: 600; }
    .calendario-mini__giorno { font-size: 0.75rem; font-family: var(--font-mono); padding: 0.2rem 0; border-radius: 0.2rem; display: inline-block; min-width: 1.6rem; }
    .calendario-mini__giorno.bloccato { background: var(--clr-warning-bg); color: var(--clr-warning); font-weight: 600; }
    .calendario-mini__giorno.gara { background: var(--clr-danger); color: #FFFFFF; }
    .legenda-calendario { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--clr-text-muted); }

    .striscia-uptime { display: grid; grid-template-columns: repeat(90, 1fr); gap: 1px; height: 2rem; }
    .striscia-uptime__giorno { background: var(--clr-success); border-radius: 1px; opacity: 0.85; }
    .striscia-uptime__giorno.parziale { background: var(--clr-warning); opacity: 1; }
    .striscia-uptime__giorno:hover { opacity: 1; outline: 1px solid var(--clr-text); }

    /* Errori di validazione lato client nei campi affiancati (.akra-campo): visibili solo dopo il tentativo di invio */
    .errore-client { display: none; color: var(--clr-danger); font-size: 0.78rem; }
    .was-validated .akra-campo > :invalid ~ .akra-campo__errori .errore-client { display: block; }
}