/**
 * Pulsanti del gestionale: un solo aspetto, quello di «Nuovo articolo».
 * ---------------------------------------------------------------------------
 * Riempimento teal pieno (l'accento aziendale), testo bianco, angoli arrotondati
 * di Bootstrap, più scuro al passaggio del mouse. Vale per ogni pulsante d'azione,
 * sia che nel markup sia «btn-primary» sia una variante a contorno
 * («btn-outline-secondary», «btn-outline-primary»...): il markup non cambia, cambia
 * solo come Bootstrap le disegna, riscrivendo le sue variabili --bs-btn-*.
 *
 * Non toccati, di proposito:
 *  - btn-link (sono link di testo: «Annulla», «Togli»...) e btn-close;
 *  - btn-light e btn-outline-light, che stanno su sfondi scuri (barra in alto
 *    dell'area dipendenti, anteprima proposta, galleria foto): un teal pieno lì
 *    sparirebbe.
 *
 * Le azioni che distruggono qualcosa (Elimina, Annulla il documento, Rifiuta,
 * Revoca: btn-danger e btn-outline-danger) restano rosse, ma piene e della stessa
 * forma degli altri: il colore dice «attenzione», non «pulsante diverso».
 *
 * Lo stato «selezionato» di un filtro o di un interruttore non si legge più dalla
 * differenza pieno/contorno (ora sono tutti pieni): il pulsante selezionato porta la
 * classe Bootstrap `active` (o aria-pressed="true", o è un .btn-check:checked) e qui
 * diventa più scuro, con un anello bianco all'interno e il testo in grassetto.
 *
 * Caricato dopo app.css / employee.css dai layout del gestionale, dell'area dipendenti
 * e dell'accesso; NON dalle pagine pubbliche del cliente (proposta, prenotazione,
 * candidature...), che hanno un aspetto proprio.
 */

:root {
  /* L'accento aziendale (layouts/app.php lo ridefinisce dal tema), o quello dell'area
     dipendenti, o il teal di sempre. */
  --pulsante-fondo: var(--accent, var(--emp-accent, #2f5d62));
  /* Le tinte di passaggio e di selezione: esadecimali per il teal di sempre, che valgono
     ovunque. Dove il browser conosce color-mix() (qui sotto) si ricavano dal fondo, così
     seguono anche un accento scelto dall'azienda. Senza il ripiego, un browser che non lo
     conosce (Safari/iOS prima del 16.2, Chrome prima del 111) renderebbe la variabile non
     valida al momento dell'uso: fondo trasparente, e testo bianco su pagina bianca al tocco
     e nello stato selezionato. */
  --pulsante-fondo-hover: #264a4e;
  --pulsante-fondo-attivo: #203f43;
  --pulsante-anello: rgba(47, 93, 98, 0.5);
  /* Testo sul fondo: bianco, salvo un accento chiaro (layouts/app.php lo ricalcola). */
  --pulsante-testo: #fff;
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --pulsante-fondo-hover: color-mix(in srgb, var(--pulsante-fondo) 80%, #000);
    --pulsante-fondo-attivo: color-mix(in srgb, var(--pulsante-fondo) 66%, #000);
    --pulsante-anello: color-mix(in srgb, var(--pulsante-fondo) 50%, transparent);
  }
}

/* --- Riempimento pieno ---------------------------------------------------------- */

.btn:is(
  .btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-dark,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
  .btn-outline-warning, .btn-outline-dark
) {
  --bs-btn-color: var(--pulsante-testo, #fff);
  --bs-btn-bg: var(--pulsante-fondo);
  --bs-btn-border-color: var(--pulsante-fondo);
  --bs-btn-hover-color: var(--pulsante-testo, #fff);
  --bs-btn-hover-bg: var(--pulsante-fondo-hover);
  --bs-btn-hover-border-color: var(--pulsante-fondo-hover);
  --bs-btn-active-color: var(--pulsante-testo, #fff);
  --bs-btn-active-bg: var(--pulsante-fondo-attivo);
  --bs-btn-active-border-color: var(--pulsante-fondo-attivo);
  --bs-btn-disabled-color: var(--pulsante-testo, #fff);
  --bs-btn-disabled-bg: var(--pulsante-fondo);
  --bs-btn-disabled-border-color: var(--pulsante-fondo);
  --bs-btn-focus-shadow-rgb: 47, 93, 98;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--pulsante-anello);
}

/* --- Azioni che distruggono: rosso, ma pieno e della stessa forma ---------------- */

.btn:is(.btn-danger, .btn-outline-danger) {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a52834;
  --bs-btn-active-border-color: #9b2530;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}

/* --- Selezionato: più scuro, anello bianco dentro, grassetto ---------------------
   Vale per `active`, per aria-pressed="true" e per un radio/casella .btn-check spuntato.
   Bootstrap scurisce già il fondo per .active e .btn-check:checked (--bs-btn-active-bg,
   definito sopra); per aria-pressed="true" da solo non lo fa, quindi qui il fondo scuro si
   scrive esplicitamente, anche per il passaggio del mouse. Ci si aggiunge quello che
   resta leggibile anche in scala di grigi: anello e grassetto. */

.btn:is(
  .btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-dark,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
  .btn-outline-warning, .btn-outline-dark
):is(.active, [aria-pressed="true"]),
.btn-check:checked + .btn:is(
  .btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-dark,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
  .btn-outline-warning, .btn-outline-dark
) {
  --bs-btn-bg: var(--pulsante-fondo-attivo);
  --bs-btn-border-color: var(--pulsante-fondo-attivo);
  --bs-btn-hover-bg: var(--pulsante-fondo-attivo);
  --bs-btn-hover-border-color: var(--pulsante-fondo-attivo);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* Con la tastiera il selezionato tiene anche l'anello di focus. */
.btn:is(.active, [aria-pressed="true"]):focus-visible,
.btn-check:checked:focus-visible + .btn {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), var(--bs-btn-focus-box-shadow);
}

/* I compagni non selezionati di un interruttore esplicito si smorzano un poco; al
   passaggio del mouse tornano pieni. Solo dove lo stato è dichiarato (aria-pressed o
   un .btn-check), mai su un pulsante qualsiasi. */
.btn[aria-pressed="false"]:not(:disabled):not(:hover),
.btn-check:not(:checked):not(:disabled) + .btn:not(.bollino-pausa):not(:hover) {
  opacity: 0.85;
}

/* --- Gruppi di pulsanti: una linea tra un segmento e l'altro ----------------------
   Bootstrap unisce i pulsanti di un gruppo (margine -1px, niente angoli tra loro). Con
   fondo e bordo identici i non selezionati diventerebbero un'unica barra e tre pulsanti-icona
   (i livelli di un permesso) una macchia sola: una linea chiara li separa di nuovo. */
.btn-group > .btn:is(
  .btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-dark,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
  .btn-outline-warning, .btn-outline-dark, .btn-danger, .btn-outline-danger
):not(:first-child),
.btn-group > .btn-check + .btn {
  border-left-color: rgba(255, 255, 255, 0.45);
}

/* --- Eccezione: il bollino «€» della pausa nelle giornate del servizio -------------
   Spento è un cerchietto grigio barrato (app.css), non un pulsante pieno. Il colore del
   testo e del bordo li scrive già app.css; qui resta solo il fondo, che con il teal
   pieno di sopra altrimenti riempirebbe il bollino spento. */
.griglia-giornate .btn-check:not(:checked) + .bollino-pausa {
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: #f1f3f5;
  --bs-btn-hover-color: #b3bcc3;
  --bs-btn-hover-border-color: #dfe3e6;
  background-color: #fff;
}