/*
  SEPASIGN - variabili di colore del back office (palette C "Verde petrolio",
  confermata dalla direzione il 09/10/2026).

  Uso: importare in styles.css del progetto Angular, prima degli stili di pagina.
  Le pagine usano solo le variabili --ss-*, mai i valori esadecimali.
  Contrasti verificati (WCAG 2.1): tutte le coppie testo/sfondo indicate sotto sono almeno AA (4,5:1).
*/

:root {
  /* Marchio */
  --ss-primario: #0f6d6a;          /* pulsanti, collegamenti, nome "Sign" nel logo - bianco sopra: 6,2:1 */
  --ss-primario-hover: #0d5f5c;
  --ss-primario-attivo: #0b5350;
  --ss-scuro: #083d3b;             /* menu laterale, intestazioni forti - bianco sopra: 12,1:1 */
  --ss-tinta: #e2f1ef;             /* intestazioni di tabella, filtri attivi - primario sopra: 5,3:1 */
  --ss-accento: #d99a2b;           /* solo dettagli: voce di menu attiva, pennino. Testo sopra SEMPRE scuro (6,3:1), mai bianco (2,4:1) */
  --ss-su-primario: #ffffff;
  --ss-su-accento: #12292a;

  /* Superfici e testo */
  --ss-sfondo: #f4f8f8;            /* fondo delle pagine */
  --ss-superficie: #ffffff;        /* schede, tabelle, campi */
  --ss-testo: #12292a;
  --ss-testo-secondario: #55706e;  /* 5,0:1 sullo sfondo, 5,3:1 sul bianco */
  --ss-bordo: #d3e2e0;
  --ss-focus: rgba(15, 109, 106, 0.35);

  /* Stati della richiesta di firma: fissi, non seguono la palette (verde = firmato, rosso = rifiutato) */
  --ss-stato-creata-sfondo: #eef0f3;    --ss-stato-creata-testo: #4a5361;
  --ss-stato-attesa-sfondo: #fff2cf;    --ss-stato-attesa-testo: #7d5200;
  --ss-stato-firmata-sfondo: #e1f3e5;   --ss-stato-firmata-testo: #1d652d;
  --ss-stato-ritirata-sfondo: #e5edf8;  --ss-stato-ritirata-testo: #23508c;
  --ss-stato-rifiutata-sfondo: #fde6e6; --ss-stato-rifiutata-testo: #9e2626;
  --ss-stato-scaduta-sfondo: #fbeadb;   --ss-stato-scaduta-testo: #8a4512;
  --ss-stato-annullata-sfondo: #eceef1; --ss-stato-annullata-testo: #636b78;

  /* Ponte verso Bootstrap 5 (se il progetto lo usa) */
  --bs-primary: var(--ss-primario);
  --bs-primary-rgb: 15, 109, 106;
  --bs-link-color: var(--ss-primario);
  --bs-link-color-rgb: 15, 109, 106;
  --bs-link-hover-color: var(--ss-primario-hover);
  --bs-link-hover-color-rgb: 13, 95, 92;
  --bs-body-bg: var(--ss-sfondo);
  --bs-body-color: var(--ss-testo);
  --bs-secondary-color: var(--ss-testo-secondario);
  --bs-border-color: var(--ss-bordo);
  --bs-focus-ring-color: var(--ss-focus);
}

/* Bootstrap 5 ricalcola i colori dei pulsanti da variabili proprie: vanno impostate qui */
.btn-primary {
  --bs-btn-bg: var(--ss-primario);
  --bs-btn-border-color: var(--ss-primario);
  --bs-btn-hover-bg: var(--ss-primario-hover);
  --bs-btn-hover-border-color: var(--ss-primario-hover);
  --bs-btn-active-bg: var(--ss-primario-attivo);
  --bs-btn-active-border-color: var(--ss-primario-attivo);
  --bs-btn-disabled-bg: var(--ss-primario);
  --bs-btn-disabled-border-color: var(--ss-primario);
  --bs-btn-focus-shadow-rgb: 15, 109, 106;
}
.btn-outline-primary {
  --bs-btn-color: var(--ss-primario);
  --bs-btn-border-color: var(--ss-primario);
  --bs-btn-hover-bg: var(--ss-primario);
  --bs-btn-hover-border-color: var(--ss-primario);
  --bs-btn-active-bg: var(--ss-primario-attivo);
  --bs-btn-active-border-color: var(--ss-primario-attivo);
  --bs-btn-focus-shadow-rgb: 15, 109, 106;
}

/* Etichette di stato: <span class="ss-stato ss-stato-firmata">Firmata</span> */
.ss-stato { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.ss-stato-creata    { background: var(--ss-stato-creata-sfondo);    color: var(--ss-stato-creata-testo); }
.ss-stato-attesa    { background: var(--ss-stato-attesa-sfondo);    color: var(--ss-stato-attesa-testo); }
.ss-stato-firmata   { background: var(--ss-stato-firmata-sfondo);   color: var(--ss-stato-firmata-testo); }
.ss-stato-ritirata  { background: var(--ss-stato-ritirata-sfondo);  color: var(--ss-stato-ritirata-testo); }
.ss-stato-rifiutata { background: var(--ss-stato-rifiutata-sfondo); color: var(--ss-stato-rifiutata-testo); }
.ss-stato-scaduta   { background: var(--ss-stato-scaduta-sfondo);   color: var(--ss-stato-scaduta-testo); }
.ss-stato-annullata { background: var(--ss-stato-annullata-sfondo); color: var(--ss-stato-annullata-testo); }