/**
    Barra di salvataggio sticky in fondo al form di Backpack.

    I moduli degli atti si compilano per ore e sono lunghi: senza questo, salvare significa scorrere
    fino in fondo alla pagina, e l'indicatore del salvataggio automatico — che vive accanto ai
    bottoni insieme all'avviso di un salvataggio non riuscito (vedi
    admin.shared.salvataggio-automatico-indicatore) — non lo vedrebbe nessuno mentre si scrive.

    Vale per **ogni** form di Backpack e non solo per i quattro dell'autosave: la scomodità non era
    dell'autosave, era del form. Sui moduli più corti della finestra `sticky` non ha alcun effetto,
    quindi lì la barra resta esattamente dov'era.

    Backpack non offre nulla per questo: `.saveActions` si rende sempre in flusso, e nel pacchetto
    l'unico elemento agganciato è l'header della datatable (`useFixedHeader`). Si cambia quindi la
    posizione del div che Backpack rende come ultimo elemento del form, **senza spostarlo dal DOM**:
    il suo stesso script lo risale con `closest('form')` per collegare i bottoni al modulo, e un
    contenitore nostro romperebbe quel legame. Stando fuori dalla `card` dei campi, la barra ne
    prende la larghezza piena e si legge come una fascia sotto la scheda.

    L'aggancio è `bp-section`, l'attributo semantico che Backpack mette sul contenitore
    dell'operazione, e **non** `#crudForm`: quell'id è solo il ripiego di `{{ $id ?? 'crudForm' }}`,
    e su una pagina di modifica `$id` è l'id dell'entità, quindi il form si chiama `1421`. Passando
    per la sezione si prendono le due operazioni che hanno un form e si lasciano fuori i modal, che
    hanno bottoni propri e non devono agganciarsi a niente.

    z-index 1010: sopra il contenuto del form, sotto l'header sticky del tema (1020), i modal e la
    striscia della modalità sicura (1080), che restano gli avvisi più importanti.
*/

/**
    Perché `sticky` possa funzionare: il tema crea un contenitore di scorrimento sul `body`

        body { scrollbar-gutter: stable; overflow-y: scroll; }   (theme-tabler .../css/style.css)

    per tenere la barra di scorrimento sempre visibile ed evitare lo sfarfallio sulle pagine AJAX.
    Un antenato con `overflow` diverso da `visible` diventa lo scrollport di riferimento di ogni
    `sticky` che sta sotto, e quello del `body` non scorre mai — la sua altezza è quella del
    contenuto, è il documento che scorre — quindi niente si aggancia più. È anche il motivo per cui
    la striscia della modalità sicura funziona: quella è `fixed`, non `sticky`.

    Si riporta quindi il body a `visible` e si ottiene lo stesso effetto anti-sfarfallio con
    `scrollbar-gutter` sull'elemento radice, che per il documento è dove va dichiarato. Nessun
    `!important`: le `styles` di configurazione sono caricate dopo il CSS del tema.

    Non tocca nient'altro: `options.useStickyHeader` è `false` nella configurazione del tema, quindi
    questa barra è l'unico elemento agganciato dell'applicazione.
*/
:root {
    scrollbar-gutter: stable;
}

body {
    overflow-y: visible;
}

[bp-section="crud-operation-update"] .saveActions,
[bp-section="crud-operation-create"] .saveActions {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    margin-top: 1rem;
    /* Senza questo il margine di `.my-3` terrebbe la barra staccata dal bordo della finestra mentre
       è agganciata, lasciando intravedere il contenuto che le scorre sotto. */
    margin-bottom: 0;
    padding: .75rem 1rem;
    background-color: var(--tblr-bg-surface, #fff);
    border-top: 1px solid var(--tblr-border-color, rgba(4, 32, 69, .14));
    border-radius: var(--tblr-border-radius, 4px);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .06);
}

/* L'avviso del salvataggio automatico, quando c'è, sta dentro la barra sopra la riga dei bottoni.
   Con molti errori di validazione elencati mangerebbe mezza finestra: qui si ferma e scorre. */
[bp-section="crud-operation-update"] .saveActions .alert {
    max-height: 40vh;
    overflow-y: auto;
}

/* In stampa la barra torna nel flusso: agganciata comparirebbe a metà della prima pagina. */
@media print {
    [bp-section="crud-operation-update"] .saveActions,
    [bp-section="crud-operation-create"] .saveActions {
        position: static;
        box-shadow: none;
    }
}