/* =============================================================================
   NEO-BRUTALISMO SU BOOTSTRAP — lo strato che porta il linguaggio nell'admin.

   Il sito pubblico legge i token (`foolab-tokens.css`) e da lì prende bordi,
   ombre e raggi. Il gestionale no: è Bootstrap 5.3, e i suoi componenti hanno
   bordi da 1px grigi, raggi morbidi e ombre sfumate cablati dentro. Senza
   questo foglio, «neo-brutalismo su tutto» si sarebbe fermato alla vetrina.

   LE TRE REGOLE, uguali a quelle dei token — non è un secondo sistema, è lo
   stesso sistema tradotto per un altro vocabolario di classi:

     1. IL BORDO delimita CONTENITORI e cose PREMIBILI. Card, pannelli,
        pulsanti, campi, modali. Mai un'etichetta e mai un dato: quelli sono
        testo, e il testo si distingue con dimensione e colore.
     2. L'OMBRA PIATTA (nessuna sfocatura) va solo su ciò che si PREME o
        GALLEGGIA. Un oggetto fermo che porta l'ombra promette una profondità
        che non usa.
     3. UN SOLO PIENO SATURO per schermata: l'azione primaria.

   PERCHÉ NON TOCCO `foo.css`: è un artefatto di build (Laravel Mix, sorgente
   in `resources/css/`). Modificarlo a mano verrebbe sovrascritto al primo
   `npm run production` senza che nessuno se ne accorga. Questo foglio è a sé
   e si carica dopo, come già fanno gli asset foolab.

   QUESTA È LA SORGENTE. La copia in `public/css/` la genera Laravel Mix. Per
   un po' il file è esistito SOLO in `public/css/`, che è gitignored e non è
   un'uscita di build: non poteva arrivare in produzione né col `git pull` del
   deploy né con `npm run production`, e online rispondeva 404. L'admin girava
   senza la sua pelle e non se ne accorgeva nessuno, perché in locale il file
   c'era.

   RIPRISTINO: basta non caricarlo. Non modifica nulla in modo permanente.
   ========================================================================== */

/* I token possono non essere caricati su tutte le pagine admin: i fallback
   qui sotto fanno sì che il foglio regga da solo. */
:root {
    --nb-line: var(--fl-line, #141d2c);
    --nb-radius: var(--fl-radius-sm, 4px);
    --nb-shadow: 4px 4px 0 var(--nb-line);
    --nb-shadow-sm: 2px 2px 0 var(--nb-line);
}

/* ---- Pressabili --------------------------------------------------------- */
.btn {
    border: 2px solid var(--nb-line);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
    font-weight: 700;
    transition: transform .06s ease, box-shadow .06s ease;
}
/* Premendo, l'oggetto scivola dentro la propria ombra. È l'unico feedback che
   serve, e non costa niente. */
.btn:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--nb-line);
}
.btn:focus-visible {
    outline: 2px solid var(--nb-line);
    outline-offset: 2px;
    box-shadow: var(--nb-shadow-sm);
}
.btn-sm { box-shadow: var(--nb-shadow-sm); }
.btn-lg { box-shadow: var(--nb-shadow); }

/* Il pulsante «link» non è un oggetto: è testo che si può cliccare. Niente
   perimetro, niente ombra — altrimenti ogni riga di una tabella con tre azioni
   diventa tre rettangoli neri. */
.btn-link,
.btn-link:active {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* ---- Contenitori -------------------------------------------------------- */
.card,
.modal-content,
.dropdown-menu,
.list-group,
.accordion-item {
    border: 2px solid var(--nb-line);
    border-radius: var(--nb-radius);
}
/* La card galleggia: l'ombra ci sta. Il gruppo di lista no — è una lista
   dentro un contenitore, e l'ombra la staccherebbe da ciò che la contiene. */
.card,
.modal-content,
.dropdown-menu {
    box-shadow: var(--nb-shadow);
}
.list-group,
.accordion-item {
    box-shadow: none;
}
.card-header,
.card-footer {
    border-color: var(--nb-line);
    border-width: 2px;
}

/* ---- Campi -------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text {
    border: 2px solid var(--nb-line);
    border-radius: var(--nb-radius);
}
/* Il campo a fuoco NON prende l'ombra piatta: quella dice «premimi», e un
   campo non si preme. Prende un anello, che dice «stai scrivendo qui». */
.form-control:focus,
.form-select:focus {
    border-color: var(--nb-line);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, .28);
}
.form-check-input {
    border: 2px solid var(--nb-line);
}

/* ---- Etichette e dati: testo, non oggetti ------------------------------- */
/* Nessun bordo e nessuna ombra. È la regola che nel sito pubblico mancava, ed
   è il motivo per cui la pagina sembrava un mosaico di riquadri: quaranta
   oggetti piccoli, tutti col perimetro nero. */
.badge {
    border: 0;
    border-radius: var(--nb-radius);
    box-shadow: none;
    font-weight: 700;
}

/* ---- Avvisi ------------------------------------------------------------- */
.alert {
    border: 2px solid var(--nb-line);
    border-radius: var(--nb-radius);
    box-shadow: none;
}

/* ---- Tabelle ------------------------------------------------------------ */
/* La tabella è un contenitore: perimetro sì. Le righe dentro no — con un bordo
   pieno per riga il contenuto sparisce sotto la griglia. */
.table > :not(caption) > * > * {
    border-bottom-color: rgba(20, 29, 44, .12);
}
.table > thead {
    border-bottom: 2px solid var(--nb-line);
}

/* ---- Navigazione -------------------------------------------------------- */
/* Le voci di menu sono link. Quella attiva si dice col peso e col fondo, non
   con un perimetro: riempirla di bordo la fa sembrare l'azione da compiere. */
.nav-pills .nav-link {
    border-radius: var(--nb-radius);
    font-weight: 700;
}
.nav-pills .nav-link.active {
    border: 2px solid var(--nb-line);
    box-shadow: var(--nb-shadow-sm);
}

/* ---- Paginazione -------------------------------------------------------- */
.pagination .page-link {
    border: 2px solid var(--nb-line);
    border-radius: var(--nb-radius);
    margin-left: 4px;
    font-weight: 700;
}
.pagination .page-item.active .page-link {
    box-shadow: var(--nb-shadow-sm);
}

/* ---- Cose che NON devono prendere il trattamento ------------------------ */
/* Toggle del menu, chiusure dei modali, controlli di servizio: sono comandi
   minuti, e un perimetro nero attorno a una «x» la rende più importante del
   contenuto che chiude. */
.btn-close,
.navbar-toggler,
.accordion-button {
    border: 0;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    box-shadow: none;
}