/* ==========================================================================
   SISTEMA GENERALE DI PULSANTI (AETYCA)
   Design System Consolidato, Additivo e Retrocompatibile
   ========================================================================== */

/* --- 1. CLASSI DI COLORE (Funzionano su qualsiasi .btn) --- */
/* Definiscono il colore, le variabili per i modificatori e lo stato solid di base */

[class^="btn-main-"], [class*=" btn-main-"] {
    background-color: var(--btn-color) !important;
    border-color: var(--btn-color) !important;
    color: #fff !important;
}

[class^="btn-light-"], [class*=" btn-light-"] {
    background-color: var(--btn-color) !important;
    border-color: var(--btn-color) !important;
    color: var(--main-grey-900) !important; /* Testo scuro per varianti light */
}

/* Mapping variabili dai colori */
.btn-main-blue    { --btn-color: var(--main-blue-color);   --btn-rgb: var(--main-blue-rgb); }
.btn-light-blue   { --btn-color: var(--light-blue-color);  --btn-rgb: var(--main-blue-rgb); }
.btn-main-orange  { --btn-color: var(--main-orange-color); --btn-rgb: var(--main-orange-rgb); }
.btn-light-orange { --btn-color: var(--light-orange-color);--btn-rgb: var(--main-orange-rgb); }
.btn-main-green   { --btn-color: var(--main-green-color);  --btn-rgb: var(--main-green-rgb); }
.btn-light-green  { --btn-color: var(--light-green-color); --btn-rgb: var(--main-green-rgb); }
.btn-main-red     { --btn-color: var(--main-red-color);    --btn-rgb: var(--main-red-rgb); }
.btn-light-red    { --btn-color: var(--light-red-color);   --btn-rgb: var(--main-red-rgb); }
.btn-main-yellow  { --btn-color: var(--main-yellow-color); --btn-rgb: var(--main-yellow-rgb); }
.btn-light-yellow { --btn-color: var(--light-yellow-color);--btn-rgb: var(--main-yellow-rgb); }
.btn-main-cyan    { --btn-color: var(--main-cyan-color);   --btn-rgb: var(--main-cyan-rgb); }
.btn-light-cyan   { --btn-color: var(--light-cyan-color);  --btn-rgb: var(--main-cyan-rgb); }
.btn-main-grey    { --btn-color: var(--main-grey-color);   --btn-rgb: var(--main-grey-rgb); }
.btn-light-grey   { --btn-color: var(--light-grey-color);  --btn-rgb: var(--main-grey-rgb); }

/* --- 2. CLASSI DI FORMA --- */

.btn-pill {
    border-radius: 50px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-weight: 700 !important;
}

.btn-standard {
    border-radius: var(--r-sm, 4px) !important;
    font-weight: 600 !important;
}

.btn-action {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
}

/* --- 3. MODIFICATORI DI STILE (Override dello stato solid) --- */

/* Outline: Rende il fondo trasparente e colora testo/bordo */
.btn-outline {
    background-color: transparent !important;
    color: var(--btn-color) !important;
    border-color: var(--btn-color) !important;
}

/* Soft: Fondo tenue al 15% */
.btn-soft {
    background-color: rgba(var(--btn-rgb), 0.15) !important;
    color: var(--btn-color) !important;
    border-color: transparent !important;
}

/* Combinazione: Outline + Soft */
.btn-outline.btn-soft {
    border-color: var(--btn-color) !important;
}

/* --- 4. STATI --- */

.btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--btn-rgb, 0,0,0), 0.2);
}

/* Quando si passa sopra un outline o un soft, si riempiono */
.btn-outline:hover, .btn-soft:hover {
    background-color: var(--btn-color) !important;
    border-color: var(--btn-color) !important;
}

/* Gestione colore testo in hover: bianco per i main, scuro per i light */
[class*="btn-main-"]:hover { color: #fff !important; }
[class*="btn-light-"]:hover { color: var(--main-grey-900) !important; }

.btn-action:hover {
    transform: scale(1.1);
}