/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        buttons.css
 * Path:        public/css/buttons.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce lo stile globale di pulsanti, input submit/button e link con
 * classe .btn, usati in liste, dettagli e form indistintamente.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: pulsanti e
 * controlli cliccabili, trasversali a qualunque tipo di pagina.
 * 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 dalle view;
 * - 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: pulsanti
 * ========================================================== */

/* Stile globale per pulsanti, input submit e classi .btn. */
.btn,
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    padding: 0.7em 1.1em 0.8em;
    /* I controlli di modulo nativi (button, input) non ereditano il font
     * del body nei browser: senza questa dichiarazione esplicita usano
     * il font di sistema (es. "MS Shell Dlg 2" su Windows/Chromium)
     * invece di "Segoe UI", disallineandosi dai pulsanti resi con <a>. */
    font-family: inherit;
    font-size: 1.15em;
    border: none;
    border-radius: var(--radius-small);
    color: var(--color-on-primary);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* Gradiente standard del framework */
    background: var(--color-primary-light);
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary-mid));
}

/* L'attributo hidden ha la stessa specificita' di .btn/button: senza questa
 * regola esplicita l'ultima dichiarata nel cascade vince a prescindere dal
 * valore reale dell'attributo, nascondendo i pulsanti mai davvero. */
.btn[hidden],
button[hidden],
input[hidden] {
    display: none;
}

/* Stato hover dei pulsanti standard. */
.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    background: linear-gradient(to bottom, var(--color-btn-hover-light), var(--color-btn-hover-dark));
}

/* Stato focus accessibile dei pulsanti standard. */
.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible {
    border-color: var(--color-success-border);
    box-shadow: 0 0 0 3px rgba(31, 95, 39, 0.28), 0 2px 5px rgba(0,0,0,0.2);
    outline: none;
}

/* Variante per azioni distruttive o irreversibili. */
.btn-danger,
button.btn-danger,
input[type="button"].btn-danger,
input[type="submit"].btn-danger {
    background: var(--color-danger);
    background: linear-gradient(to bottom, var(--color-danger-light), var(--color-danger-dark));
}

/* Stato hover della variante distruttiva. */
.btn-danger:hover,
button.btn-danger:hover,
input[type="button"].btn-danger:hover,
input[type="submit"].btn-danger:hover {
    background: linear-gradient(to bottom, var(--color-danger-hover), var(--color-danger-hover-dark));
}

/* Stato active dei pulsanti standard. */
button:active, .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Stato disabilitato dei pulsanti standard. */
button:disabled,
.btn.disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

/* Variante di pulsante usata come opzione nel dropdown suggerimenti. */
button.field-option {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 0;
    background: var(--color-on-primary);
    box-shadow: none;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    outline: none;
    text-align: left;
    text-transform: none;
}

/* Stato interattivo della variante pulsante opzione. */
button.field-option:hover,
button.field-option:focus,
button.field-option:focus-visible,
button.field-option.is-active {
    background: var(--color-on-dark);
    border: 0;
    color: var(--color-on-primary);
    outline: none;
    transform: none;
    box-shadow: none;
}

/* Componente: bottoni con icona Material Icons accanto al testo,
 * trasversale a liste, dettagli e form. */
.iconic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.iconic .icon {
    font-size: 18px;
    color: var(--color-on-primary) !important;
}

/* Compensa il padding interno percepito dei Material Icons, per
 * riallineare otticamente l'icona quando e' il primo o l'ultimo
 * elemento del pulsante .iconic (al posto di uno style inline, che
 * violerebbe la Content-Security-Policy style-src 'self' degli host). */
.iconic .icon.icon-lead {
    margin-left: -4px;
}

.iconic .icon.icon-trail {
    margin-right: -4px;
}

/* La variante responsive dei pulsanti dentro .form-buttons vive in
 * form.css, insieme al resto delle regole responsive di quel
 * contenitore (stessa soglia 640px): tenerle nello stesso punto evita
 * che le due meta' della stessa regola si disallineino silenziosamente
 * se la soglia cambia in futuro. */