/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        page-actions.css
 * Path:        public/css/page-actions.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce il blocco pulsanti/link azione prodotto dal widget PageActions,
 * usato sia autonomamente sia internamente da PageHeader per il proprio
 * blocco azioni. Componente distinto da page-header.css, non sempre
 * presente insieme al titolo di pagina.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: il blocco
 * azioni generato da PageActions.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato da PageActions;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: blocco azioni
 * ========================================================== */

/* Area pulsanti/link azione. justify-content: flex-start invece di
 * flex-end: l'allineamento a destra rispetto al titolo lo fa gia'
 * .page-header (justify-content: space-between, vedi page-header.css)
 * quando i due blocchi sono affiancati - li' .page-actions e' stretto
 * quanto il proprio contenuto, senza spazio residuo su cui
 * flex-start/flex-end farebbero la differenza. La differenza si vede
 * solo quando .page-actions ha spazio vuoto al proprio interno: il
 * caso in cui va a capo sotto il titolo su schermo stretto E i
 * pulsanti al suo interno vanno a capo anche tra loro (troppi per una
 * riga sola) - li' flex-end spostava l'ultima riga di pulsanti a
 * destra invece che a sinistra come il titolo sopra, un'incoerenza
 * visibile. */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

/* Link azione mantenuti su una sola riga. */
.page-actions a {
    white-space: nowrap;
}

/* Dimensione uniforme dei controlli interattivi nell'area azioni. */
.page-actions .btn,
.page-actions button,
.page-actions input[type="submit"],
.page-actions input[type="button"] {
    padding: calc(0.64em + 1px) 1em calc(0.72em + 1px);
    font-size: 1.05em;
    line-height: 1.2;
}

/* Icone isolate usate nei controlli dell'area azioni. */
.page-actions .icon {
    font-size: 18px;
    line-height: 1;
}