/* ============================================================================
   CMS - unico foglio di stile del modulo.
   Caricato dopo app.css (vedi Server/App.razor).

   Tutte le classi hanno il prefisso cms-, come il nome del file: e' il modo per
   non sovrascrivere per sbaglio regole di altri fogli e per riconoscere a colpo
   d'occhio da dove viene una regola.

   Qui sta solo cio' che serve al CMS. Le classi utili anche fuori, come le
   sezioni informative condivise con la pagina Information e i token di
   spaziatura --sp-*, vivono in app.css.

   Breakpoint condivisi: lg 1500px, md 1000px (tablet), sm 641px (mobile).
   Non introdurne altri.
   ============================================================================ */

/* ============================================================================
   Righe di controlli
   ============================================================================ */

/* Riga di controlli o di bottoni: va sempre a capo invece di tagliare le azioni. */
.cms-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* Bottone solo-icona che rivela la label su hover o focus da tastiera.
   Uso: classe cms-iconbtn sul bottone (o link), label in un
   <span class="cms-iconbtn__label"> accanto all'icona. Il bottone deve avere
   comunque Title o aria-label: la label collassata resta nell'albero di
   accessibilita', ma il tooltip nativo deve funzionare anche senza hover.
   cms-iconbtn--open forza l'espansione (es. stato "salvataggio in corso"). */
/* L'icona segue il colore del testo del bottone: FluentIcon di default riempie
   l'svg col blu accent (inline sull'svg, da qui l'!important), invisibile sui
   bottoni Appearance.Accent. */
.cms-iconbtn svg,
.cms-iconbtn svg path {
    fill: currentColor !important;
}

.cms-iconbtn .cms-iconbtn__label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .18s ease, opacity .18s ease, margin-left .18s ease;
}

.cms-iconbtn:hover .cms-iconbtn__label,
.cms-iconbtn:focus-visible .cms-iconbtn__label,
.cms-iconbtn:focus-within .cms-iconbtn__label,
.cms-iconbtn--open .cms-iconbtn__label {
    max-width: 12em;
    opacity: 1;
    margin-left: var(--sp-1);
}

/* ============================================================================
   Griglie
   ============================================================================ */

/* Due colonne che collassano a colonna singola sotto il breakpoint medio.
   Sostituisce i grid-template-columns:1fr 1fr inline, che non hanno media query.

   Gli item di una CSS grid hanno min-width:auto: senza min-width:0 sui figli un
   contenuto non spezzabile (parola lunga, tabella, testo non tradotto) sfonda la
   propria colonna. */
.cms-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

.cms-grid-2 > * {
    min-width: 0;
}

@media (max-width: 1000px) {
    .cms-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Card dei layout statici

   Riempiono la regione (.cms-region e' un flex column senza stile proprio). La
   card info scorre in verticale se il contenuto supera l'altezza della regione;
   la card pdf contiene l'embed a piena altezza.
   ============================================================================ */

.cms-info-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cms-pdf-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cms-pdf-embed {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: block;
    border-radius: 4px;
}

/* ----- Sezioni dei layout voci, palette, riepilogo, selettore (solo base) -----
   Una card per regione con titolo, conteggio facoltativo e nota; il contenuto cambia per layout. */
.cms-sezione {
    background: #ffffff;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

.cms-sezione__titolo {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.cms-nota {
    margin: 0;
    font-size: .85rem;
    color: #6a7280;
}

.cms-vuoto {
    font-size: .9rem;
    color: #8a929c;
    padding: var(--sp-2) 0;
}

.cms-chip {
    display: inline-block;
    background: #eef0f3;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: .8rem;
    /* URL e codici lunghi vanno a capo invece di allargare la pagina */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Testo formattato (HTML ripulito) in sola lettura: sta in un riquadro di altezza massima che scorre in verticale,
   invece di allungare la riga o la scheda. In griglia la riga resta compatta anche con testi lunghi. */
.cms-testo-ricco {
    display: block;
    max-height: 8em;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

/* Valore senza tag (testo salvato prima che il campo diventasse HTML): gli a capo del testo restano a capo */
.cms-testo-ricco--semplice {
    white-space: pre-line;
}

.cms-testo-ricco img {
    max-width: 100%;
    height: auto;
}

/* Blocchi di codice e tabelle larghi scorrono dentro il riquadro, non nella pagina */
.cms-testo-ricco pre,
.cms-testo-ricco table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cms-testo-ricco p {
    margin: 0 0 .4em;
}

.cms-chip--codice {
    font-family: Consolas, "Courier New", monospace;
    border-radius: 4px;
}

.cms-chip--evidenza {
    background: #fff4de;
    color: #6b4700;
}

/* Etichette con un significato fisso (toneColumns): verde a posto, giallo da guardare, rosso fermo o in
   errore, grigio non applicabile. Il colore accompagna sempre una parola, mai da solo. */
.cms-chip--ok {
    background: #e3f4e8;
    color: #1e6b34;
}

.cms-chip--attenzione {
    background: #fff4de;
    color: #6b4700;
}

.cms-chip--errore {
    background: #fde7e7;
    color: #9b1c1c;
}

.cms-chip--neutro {
    background: #eef0f3;
    color: #4a5260;
}

/* voci: righe brevi con testo, dettagli, chip e azioni */
.cms-voci__aggiunta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.cms-voci__aggiunta > * {
    flex: 1 1 180px;
    min-width: 0;
}

.cms-voci__aggiunta > .cms-voci__azione {
    flex: 0 0 auto;
}

.cms-voci__elenco {
    display: flex;
    flex-direction: column;
}

.cms-voci__riga {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-1);
    border-bottom: 1px solid #eef0f3;
    min-width: 0;
}

.cms-voci__riga:last-child {
    border-bottom: none;
}

/* pulsanti delle azioni di riga, a destra del testo */
.cms-voci__azioni {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-left: auto;
}

.cms-voci__prefisso {
    min-width: 24px;
    color: #6a7280;
    font-size: .85rem;
}

.cms-voci__testo {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cms-voci__dettaglio {
    color: #6a7280;
}

.cms-voci__colore,
.cms-palette__colore {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.cms-voci__colore {
    width: 32px;
    height: 32px;
}

/* palette: schede con selettore di colore, testo e anteprima */
.cms-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3);
}

.cms-palette__scheda {
    border: 1px solid #dde1e6;
    border-radius: 8px;
    padding: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.cms-palette__colore {
    width: 40px;
    height: 40px;
}

.cms-palette__testo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cms-palette__esempio {
    border: 3px solid transparent;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: .85rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cms-palette__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.cms-palette__legenda .cms-palette__esempio {
    padding: 6px 14px;
    background: #ffffff;
}

/* riepilogo: elenco etichetta e valore */
.cms-riepilogo {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: var(--sp-2) var(--sp-4);
}

.cms-riepilogo dt {
    color: #6a7280;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cms-riepilogo dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* La regione decide la disposizione, non la finestra: in una colonna stretta l'etichetta va sopra. */
.cms-riepilogo-contenitore {
    container-type: inline-size;
}

@container (max-width: 480px) {
    .cms-riepilogo {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .cms-riepilogo dd {
        margin-bottom: var(--sp-2);
    }
}

/* Valori lunghi senza spazi (impronte, nomi tecnici): carattere fisso, a capo ovunque. */
.cms-riepilogo__codice {
    font-family: Consolas, "Courier New", monospace;
    font-size: .85rem;
    word-break: break-all;
}

/* compact: voci in riga sotto gli avvisi */
.cms-riepilogo-compatto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    margin-top: var(--sp-2);
    font-size: .9rem;
}

.cms-riepilogo-compatto__etichetta {
    color: #6a7280;
    margin-right: var(--sp-1);
}

/* compact con un valore HTML: la voce occupa tutta la riga, con l'etichetta sopra, perche' il riquadro resti leggibile */
.cms-riepilogo-compatto__voce--html {
    flex: 1 1 100%;
    min-width: 0;
}

.cms-riepilogo-compatto__voce--html .cms-riepilogo-compatto__etichetta {
    display: block;
}

.cms-riepilogo__richiesta {
    display: flex;
    justify-content: center;
    padding: var(--sp-3) 0;
}

/* selettore: scelta in testata con dettagli e campi modificabili */
.cms-selettore__scelta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

.cms-selettore__dettagli {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
}

.cms-selettore__campi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.cms-selettore__campo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 320px;
    max-width: 520px;
    font-size: .85rem;
    color: #6a7280;
}

@media (max-width: 640px) {
    .cms-riepilogo {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .cms-riepilogo dd {
        margin-bottom: var(--sp-2);
    }

    .cms-voci__riga {
        flex-wrap: wrap;
    }
}

/* filtri: barra di campi che va a capo */
.cms-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
}

.cms-filtri__campo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 200px;
    max-width: 320px;
    min-width: 0;
    font-size: .85rem;
    color: #6a7280;
}

.cms-filtri__campo--spunta {
    flex: 0 0 auto;
    padding-bottom: 6px;
}

.cms-filtri__data {
    box-sizing: border-box;
    height: var(--ds-input-height);
    border: 1px solid var(--ds-input-border-color);
    border-radius: var(--ds-input-radius);
    padding: 0 var(--ds-input-padding-inline);
    font: inherit;
    font-size: var(--ds-input-font-size);
    color: #1f2328;
}

.cms-filtri__azioni {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
}

@media (max-width: 640px) {
    .cms-filtri__campo {
        max-width: none;
        flex-basis: 100%;
    }

    .cms-filtri__azioni {
        margin-left: 0;
    }
}

/* kpi: riquadri numerici e barre orizzontali, cliccabili quando pubblicano un valore */
.cms-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--sp-3);
}

.cms-kpi__riquadro,
.cms-barre__riga {
    font: inherit;
    color: inherit;
    text-align: left;
    background: #ffffff;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    cursor: pointer;
}

.cms-kpi__riquadro {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    min-height: 92px;
}

.cms-kpi__riquadro:disabled,
.cms-barre__riga:disabled {
    cursor: default;
}

.cms-kpi__riquadro:not(:disabled):hover,
.cms-barre__riga:not(:disabled):hover {
    border-color: var(--primary);
}

.cms-kpi__etichetta {
    font-size: .85rem;
    color: #4a5260;
}

.cms-kpi__valore {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cms-kpi--allarme {
    background: #fdecec;
    border-color: #e8a0a0;
}

.cms-kpi--scelta {
    border: 2px solid var(--primary);
    background: #eaf1fb;
}

/* Riquadri con un tono (toneColumn): sfondo tenue del colore dello stato, numero dello stesso colore.
   Scelto, tiene lo sfondo del tono e prende il bordo della scelta. */
.cms-kpi--ok {
    background: #eef8f1;
}

.cms-kpi--attenzione {
    background: #fff8e8;
}

.cms-kpi--errore {
    background: #fdecec;
}

.cms-kpi--ok:not(.cms-kpi--scelta) {
    border-color: #a8d5b5;
}

.cms-kpi--attenzione:not(.cms-kpi--scelta) {
    border-color: #ecc979;
}

.cms-kpi--errore:not(.cms-kpi--scelta) {
    border-color: #e8a0a0;
}

.cms-kpi--ok .cms-kpi__valore {
    color: #1e6b34;
}

.cms-kpi--attenzione .cms-kpi__valore {
    color: #8a5a00;
}

.cms-kpi--errore .cms-kpi__valore {
    color: #a32d2d;
}

.cms-barre {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.cms-barre__riga {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px var(--sp-2);
    border-color: transparent;
}

.cms-barre__binario {
    height: 14px;
    background: #eef0f3;
    border-radius: 7px;
    overflow: hidden;
}

.cms-barre__barra {
    display: block;
    height: 100%;
    border-radius: 7px;
}

.cms-barre__valore {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
    text-align: right;
}

@media (max-width: 640px) {
    .cms-barre__riga {
        grid-template-columns: 1fr auto;
    }

    .cms-barre__binario {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* voci: riga che apre una pagina */
.cms-voci__riga--link {
    cursor: pointer;
}

.cms-voci__riga--link:hover {
    background: #f4f7fb;
}

/* selettore: collegamenti dell'elemento scelto */
.cms-selettore__collegamenti {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.cms-selettore__collegamento {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.cms-selettore__collegamento:hover {
    background: #eaf1fb;
}

/* allegati: riga di caricamento */
.cms-allegati__carica {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

.cms-allegati__pulsante {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

/* accordion: voci a fisarmonica */
.cms-accordion__ricerca {
    width: 100%;
    max-width: 420px;
}

.cms-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.cms-accordion__gruppo {
    margin: var(--sp-3) 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: #5f6b7a;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cms-accordion__voce {
    border: 1px solid #dde1e6;
    border-radius: 8px;
    background: #ffffff;
}

.cms-accordion__voce--aperta {
    border-color: var(--primary);
}

.cms-accordion__testa {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.cms-accordion__titolo {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.cms-accordion__dettaglio {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .8rem;
    color: #5f6b7a;
}

.cms-accordion__corpo {
    padding: 0 14px 12px;
    overflow-wrap: anywhere;
}

.cms-accordion__corpo img {
    max-width: 100%;
    height: auto;
}

/* Blocchi di codice e tabelle larghi scorrono dentro la voce, non nella pagina */
.cms-accordion__corpo pre {
    max-width: 100%;
    overflow-x: auto;
}

.cms-accordion__corpo table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cms-accordion__allegati {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid #eef0f3;
}

@media (max-width: 640px) {
    .cms-accordion__testa {
        flex-wrap: wrap;
    }

    .cms-accordion__dettaglio {
        order: 3;
        width: 100%;
    }
}

/* cronologia: schede con bordo colorato */
.cms-cronologia__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.cms-cronologia {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.cms-cronologia__voce {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid #dde1e6;
    border-radius: 0 6px 6px 0;
    background: #fafafa;
    min-width: 0;
}

/* conversazione: schede piu' strette, le proprie a destra col bordo sul lato destro */
.cms-cronologia__voce--chat {
    max-width: 85%;
    align-self: flex-start;
}

.cms-cronologia__voce--destra {
    align-self: flex-end;
    border-left: 0;
    border-right: 3px solid #dde1e6;
    border-radius: 6px 0 0 6px;
    background: #eef4fc;
}

.cms-cronologia__intestazione {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Titoli e etichette lunghi senza spazi vanno a capo invece di allargare la scheda */
.cms-cronologia__intestazione > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cms-cronologia__data {
    margin-left: auto;
    color: #5f6b7a;
}

.cms-cronologia__corpo {
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.cms-cronologia__corpo img {
    max-width: 100%;
    height: auto;
}

/* Blocchi di codice e tabelle larghi scorrono dentro la scheda, non nella pagina */
.cms-cronologia__corpo pre {
    max-width: 100%;
    overflow-x: auto;
}

.cms-cronologia__corpo table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cms-cronologia__dettaglio {
    color: #5f6b7a;
    overflow-wrap: anywhere;
}

.cms-cronologia__nota summary {
    cursor: pointer;
    color: var(--primary);
    font-size: .85rem;
}

.cms-cronologia__nota p {
    margin: 4px 0 0 var(--sp-3);
    font-size: .85rem;
    color: #5f6b7a;
    overflow-wrap: anywhere;
}

/* Nota in HTML: il riquadro che scorre prende il rientro e il colore del testo semplice */
.cms-cronologia__nota .cms-testo-ricco {
    margin: 4px 0 0 var(--sp-3);
    font-size: .85rem;
    color: #5f6b7a;
}

.cms-cronologia__azioni {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .cms-cronologia__data {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================================
   Schede (layout schede): barra di schede che sceglie quale gruppo di regioni
   mostrare. Sotto i 1000px diventa una tendina.
   ============================================================================ */

.cms-schede {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid #dee2e6;
    overflow-x: auto;
}

.cms-schede__scheda {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #495057;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.cms-schede__scheda:hover {
    color: #212529;
    background: #f5f6f8;
}

.cms-schede__scheda:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: -2px;
}

.cms-schede__scheda--attiva {
    color: var(--accent-fill-rest, #0f6cbd);
    border-bottom-color: var(--accent-fill-rest, #0f6cbd);
    font-weight: 600;
}

.cms-schede__numero {
    font-weight: 600;
}

.cms-schede__tendina {
    display: none;
    width: 100%;
    padding: var(--sp-2);
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

@media (max-width: 1000px) {
    .cms-schede {
        display: none;
    }

    .cms-schede__tendina {
        display: block;
    }
}

/* Avvisi in cima alla modale CRUD (modalNoteSp dell'anagrafica) */
.cms-modal-avvisi {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}

/* ============================================================================
   Regioni sul telefono e sul tablet (fino a 1000px)

   La griglia CMS scorre e le righe seguono il contenuto (CmsGrid.razor.css). Le regioni che
   riempiono lo spazio (pdf, elenchi, associazioni, tabelle mostrate come griglia) non hanno piu'
   una parte della finestra da dividere: prendono almeno buona parte dello schermo. Le tabelle in
   vista lista (.ct-lista) crescono con le righe e restano escluse. Qui e non nel foglio di
   CmsGrid perche' :has() deve vedere una classe di CustomTable.
   ============================================================================ */
@media (max-width: 1000px) {
    .cms-grid:not(.cms-grid--preview) > .cms-region:not(.cms-region--auto):not(:has(.ct-lista)) {
        min-height: max(var(--cms-region-min-h, 200px), 60vh);
    }
}

/* Pagina CMS arrivata dal prerender: si vede ma non risponde ancora, finche' parte il client. Il
   cursore lo segnala, e i controlli non ricevono clic ne' testo: un'azione su questa copia andrebbe
   persa quando il client ridisegna la griglia, che arriva senza questa classe. */
.cms-grid--prerender {
    cursor: progress;
}

.cms-grid--prerender * {
    pointer-events: none;
}

/* Matita "Modifica pagina" delle pagine CMS (CmsPageHost). Su desktop sopra il pulsante di segnalazione dei bug
   (.set-segnala-bug in app.css, 36 px a 24 px dall'angolo), centrata sulla stessa verticale; il "?" della Guida
   (.set-guida-aiuto) e il pulsante della pagina (.set-pulsante-flottante) stanno alla sinistra del bug e non la toccano.
   Sotto i 1000 px bug, "?" e pulsante della pagina stanno in basso a sinistra e la matita scende nell'angolo destro.
   Posizioni dei quattro pulsanti riassunte in app.css */
.cms-pagina-modifica {
    position: fixed;
    right: 18px;
    bottom: 72px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    text-decoration: none;
    font-size: 1.2rem;
    transition: opacity .15s;
}

.cms-pagina-modifica:hover {
    opacity: .8;
}

@media (max-width: 1000px) {
    .cms-pagina-modifica {
        right: 24px;
        bottom: 24px;
    }
}