/* ============================================================================
   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;
}