/*
 * Pulsanti stile AGID / Designers Italia — EntrateOnline
 * Creato 2026-07-16.
 *
 * PERCHÉ NON SI CARICA bootstrap-italia.min.css INTERO:
 * il progetto carica Bootstrap 3.3.7 in templates/base.html.twig (tutte le pagine,
 * scrivania inclusa). Bootstrap Italia è un tema Bootstrap 5 e ridefinisce le
 * STESSE classi (.btn, .container, .row, .col-*, .form-control) con semantica
 * diversa: caricarli insieme romperebbe le pagine esistenti.
 *
 * Qui i pulsanti AGID vivono su classi PREFISSATE `.btn-it`, che non esistono né
 * in BS3 né in BS5: nessuna collisione. I valori sono estratti dal CSS ufficiale
 * bootstrap-italia 2.18.2 (assets/vendor/bootstrap-italia/dist/css/
 * bootstrap-italia.min.css) per garantire l'aspetto autentico.
 *
 * Valori ufficiali di riferimento:
 *   primary  #0066CC  hsl(210,100%,40%)   --bs-primary
 *   danger   hsl(350,60%,50%)             --bs-danger
 *   success  hsl(160,100%,25%)            --bs-success
 *   font-weight 600 · border-radius 4px · padding .375rem/.75rem · font-size 1rem
 */

:root {
    --it-primary:        #0066CC;
    --it-primary-dark:   #004080;   /* hover  — rgb(0, 81.6, 163.2) */
    --it-primary-darker: #00478F;   /* active — rgb(0, 71.4, 142.8) */
    --it-primary-rgb:    0, 102, 204;
    --it-danger:         #CC334D;   /* hsl(350,60%,50%) */
    --it-danger-dark:    #A32940;
    --it-success:        #00805A;   /* hsl(160,100%,25%) */
    --it-success-dark:   #006647;
    --it-gray-700:       #5A6772;
    --it-gray-900:       #17324D;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.btn-it {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .375rem .75rem;
    font-family: 'Titillium Web', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-it:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--it-primary-rgb), .5);
}

.btn-it:disabled,
.btn-it.disabled {
    opacity: .65;
    pointer-events: none;
}

/* Nessuna animazione per chi la disattiva (accessibilità AGID). */
@media (prefers-reduced-motion: reduce) {
    .btn-it { transition: none; }
}

/* ── Varianti piene ────────────────────────────────────────────────────── */
.btn-it-primary {
    color: #fff;
    background-color: var(--it-primary);
    border-color: var(--it-primary);
}
.btn-it-primary:hover {
    color: #fff;
    background-color: var(--it-primary-dark);
    border-color: var(--it-primary-dark);
}
.btn-it-primary:active {
    background-color: var(--it-primary-darker);
    border-color: var(--it-primary-darker);
}

.btn-it-danger {
    color: #fff;
    background-color: var(--it-danger);
    border-color: var(--it-danger);
}
.btn-it-danger:hover {
    color: #fff;
    background-color: var(--it-danger-dark);
    border-color: var(--it-danger-dark);
}

.btn-it-success {
    color: #fff;
    background-color: var(--it-success);
    border-color: var(--it-success);
}
.btn-it-success:hover {
    color: #fff;
    background-color: var(--it-success-dark);
    border-color: var(--it-success-dark);
}

/* ── Varianti outline ──────────────────────────────────────────────────── */
/* ── ALIAS `.btn-it-outline` ─────────────────────────────────────────────
   ⚠️ ESISTE PERCHE' 68 TEMPLATE LA SCRIVONO GIA'. `claude.md` documenta
   `btn-it btn-it-outline btn-it-sm` come lo standard per «tutto il resto»
   (Ritorna, Duplica, Elimina, Esporta) e la usano /protocollo, /dem/canoni e
   la barra dei filtri: 154 occorrenze. La classe pero' NON era mai stata
   definita — c'erano solo le varianti col suffisso — quindi quei pulsanti
   ereditavano il solo `.btn-it` di base, che ha `border: 2px solid transparent`
   e `background: transparent`: TESTO NUDO senza riquadro.
   E' il difetto che l'ufficio segnalava come «pulsanti non conformi», e che
   veniva sempre attribuito al foglio non caricato dal layout.
   L'outline di riferimento e' quello PRIMARIO: in AGID il secondario e' una
   gerarchia in piu' che qui non serve. #GIGI 2026-08-20 */
.btn-it-outline,
.btn-it-outline-primary {
    color: var(--it-primary);
    border-color: var(--it-primary);
    background: transparent;
}
.btn-it-outline:hover,
.btn-it-outline-primary:hover {
    color: var(--it-primary-dark);
    border-color: var(--it-primary-dark);
    background: transparent;
}

.btn-it-outline-secondary {
    color: var(--it-gray-700);
    border-color: var(--it-gray-700);
    background: transparent;
}
.btn-it-outline-secondary:hover {
    color: var(--it-gray-900);
    border-color: var(--it-gray-900);
    background: transparent;
}

.btn-it-outline-danger {
    color: var(--it-danger);
    border-color: var(--it-danger);
    background: transparent;
}
.btn-it-outline-danger:hover {
    color: #fff;
    background-color: var(--it-danger);
}

/* ── Link (azione terziaria) ───────────────────────────────────────────── */
.btn-it-link {
    color: var(--it-primary);
    border-color: transparent;
    text-decoration: underline;
    padding-left: .25rem;
    padding-right: .25rem;
}
.btn-it-link:hover { color: var(--it-primary-dark); }

/* ── Dimensioni ────────────────────────────────────────────────────────── */

/* ⚠️ `.btn-it-sm` E' LA TAGLIA Xs DELL'APPLICATIVO: 26px, LA STESSA DEI CAMPI.
   #GIGI 2026-08-20
   E' la misura di `eo_filtri` (barra di ricerca), di `form_grid_css` (caselle
   delle form) e della barra strumenti delle tabelle: un pulsante accanto a una
   casella deve essere alto uguale, o la riga va a scalini.

   PERCHE' STA QUI E NON NELLE PAGINE — la misura era ripetuta in TRE punti
   diversi (`.eo-fb-az .btn-it`, `.ot-az .ot-cerca .btn-it`, `.detail-bar
   .btn-it`) e ciascuno copriva solo i propri pulsanti. Nella barra della
   tabella convivevano percio' DUE altezze: «Azzera» e «Cerca», che arrivano da
   `eo_filtri` ed erano coperti, alti 26px; «Filtri», «Colonne», «CSV»,
   «Excel», nati li' e non coperti, alti ~31px — stesse identiche classi.
   Definita qui, la misura vale per tutti i pulsanti piccoli dell'applicativo e
   non c'e' piu' un secondo posto da ricordarsi di aggiornare.

   ⚠️ `height` E `line-height:1` INSIEME: con il solo padding l'altezza la
   decide il testo, e un pulsante con l'icona risulta piu' alto di uno senza. */
.btn-it-sm {
    height: 26px;
    padding: 0 12px;
    font-size: 12.5px;
    line-height: 1;
    border-width: 1px;
}
.btn-it-lg {
    padding: .625rem 1.25rem;
    font-size: 1.125rem;
}

/* Larghezza piena (mobile / form) */
.btn-it-block { display: flex; width: 100%; }

/* ── Icone ─────────────────────────────────────────────────────────────── */
.btn-it .fa { font-size: .95em; }

/* Pulsante di sola icona: mantiene un target cliccabile adeguato. */
.btn-it-icon {
    padding: .375rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

/* ── Gruppo di pulsanti / barra azioni ─────────────────────────────────── */
.btn-it-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}