/* ============================================================
   SmartImmigrate — strato componenti
   Da aggiungere DOPO variables.css e PRIMA di components.css.

   Metodo preso da adotta.me (assets/styles/app.css), che risolve lo
   stesso problema: un CSS che stila pagine invece di componenti.

   Tre regole che valgono più del contenuto di questo file:

   1. ALIAS, NON SOSTITUZIONI. I nomi dei token esistenti restano e
      puntano ai nuovi valori. Così la palette cambia ovunque senza
      toccare una riga delle 798 di components.css, e senza rompere
      nulla se un template usa ancora il vecchio nome.

   2. CLASSI, NON ELEMENTI. Ogni componente ha la sua classe con
      prefisso `sim-`. Mai regole su `button`, `select`, `a`: una sola
      regola larga su un elemento vince per specificità su tutto il
      resto e costringe a rincorrerla con !important. (Verificato sul
      campo: una regola `button:not(...):not(...):not(...)` ha
      continuato a vincere anche contro !important, e ho dovuto
      cancellarla invece di batterla.)

   3. "MUTED" È INCHIOSTRO PIÙ SCURO, MAI GRIGIO PALLIDO. Regola presa
      di peso da adotta.me. Un grigio chiaro su fondo chiaro non passa
      il contrasto AA: misurato su questa pagina, #8B959E su bianco dà
      3.05 e #DDE2E8 dà 3.92, entrambi sotto il minimo di 4.5.
   ============================================================ */

:root {
  /* --- Palette --- */
  --sim-ink:        #0E1418;  /* testo e azioni primarie */
  --sim-ink-2:      #3C464E;  /* testo secondario */
  --sim-muted:      #5E6872;  /* terziario: 5.68 su bianco, passa AA */
  --sim-line:       #E3E7EC;
  --sim-line-strong:#D5DAE0;
  --sim-surface:    #FFFFFF;
  --sim-soft:       #F4F5F8;  /* fondo di sezione */
  --sim-page:       #F2F3F5;  /* fondo pagina: DEVE differire da surface */

  --sim-red:        #D22B3E;  /* identità e stati d'errore. Non è il colore delle azioni */
  --sim-red-soft:   #FDECEE;
  --sim-red-ink:    #B02334;  /* rosso leggibile su fondo rosa: 5.1 su --sim-red-soft */
  --sim-ok:         #1F7A55;
  --sim-ok-soft:    #E4F3EC;
  --sim-warn:       #9A6A0F;
  --sim-warn-soft:  #FBF1DC;

  --sim-radius-sm:  9px;
  --sim-radius:     12px;
  --sim-radius-lg:  18px;
  --sim-shadow:     0 1px 2px rgba(14,20,24,.04), 0 8px 24px rgba(14,20,24,.06);
  --sim-tap:        44px;     /* bersaglio touch minimo */

  /* Public Sans: disegnato per moduli e testi normativi, quindi porta il
     registro giusto senza sembrare un marchio. Un carattere solo, con una
     scala di pesi usata sul serio — è la scala, non la famiglia, a fare la
     differenza. Nessun serif: qui non c'è testo lungo da leggere. */
  --sim-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- ALIAS: i nomi già usati da components.css puntano qui --- */
  --font-family:   var(--sim-font);
  --primary:       var(--sim-ink);
  --primary-hover: var(--sim-ink-2);
  --primary-bg:    var(--sim-soft);
  --neutral-900:   var(--sim-ink);
  --neutral-800:   #242C33;
  --neutral-700:   var(--sim-ink-2);
  --neutral-600:   var(--sim-muted);
  --neutral-500:   #7A8794;
  --neutral-400:   #B4BCC4;
  --neutral-300:   var(--sim-line);
  --neutral-200:   #EDEFF3;
  --neutral-100:   var(--sim-soft);
  --neutral-50:    #F9FAFB;
  --error:         var(--sim-red);
  --error-light:   var(--sim-red-soft);
  --success:       var(--sim-ok);
  --success-light: var(--sim-ok-soft);
  --warning:       var(--sim-warn);
  --warning-light: var(--sim-warn-soft);
  --radius-sm:     var(--sim-radius-sm);
  --radius-md:     var(--sim-radius);
  --radius-lg:     var(--sim-radius-lg);
  --shadow-md:     var(--sim-shadow);
  --shadow-lg:     var(--sim-shadow);
}

/* ---------- superfici ---------- */
.sim-card {
  background: var(--sim-surface);
  border: 1px solid var(--sim-line);
  border-radius: var(--sim-radius-lg);
  box-shadow: var(--sim-shadow);
  padding: 22px;
}
.sim-card--flush { padding: 0; overflow: hidden; }
.sim-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--sim-soft);
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sim-muted); cursor: pointer;
}

/* ---------- azioni ---------- */
.sim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--sim-tap); padding: 11px 18px;
  border: 1px solid transparent; border-radius: var(--sim-radius);
  font: inherit; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sim-btn--primary  { background: var(--sim-ink); color: #fff; }
.sim-btn--primary:hover { background: var(--sim-ink-2); }
.sim-btn--ghost    { background: var(--sim-surface); color: var(--sim-ink); border-color: var(--sim-line-strong); }
.sim-btn--ghost:hover { background: var(--sim-soft); }
.sim-btn--danger   { background: var(--sim-red-soft); color: var(--sim-red-ink); }
.sim-btn--icon     { width: var(--sim-tap); height: var(--sim-tap); padding: 0; }
.sim-btn--block    { width: 100%; }
.sim-btn:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 2px; }

/* ---------- stati ---------- */
.sim-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--sim-soft); color: var(--sim-muted);
}
.sim-chip--missing { background: var(--sim-red-soft);  color: var(--sim-red-ink); }
.sim-chip--done    { background: var(--sim-ok-soft);   color: var(--sim-ok); }
.sim-chip--pending { background: var(--sim-warn-soft); color: var(--sim-warn); }

/* ---------- riga campo ---------- */
.sim-field {
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) var(--sim-tap);
  align-items: center; gap: 18px;
  padding: 14px 20px; border-bottom: 1px solid var(--sim-line);
}
.sim-field:last-child { border-bottom: none; }
.sim-field__label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; font-weight: 500; color: var(--sim-ink-2); line-height: 1.35; }
.sim-field__value { font-size: 14px; color: var(--sim-ink); font-variant-numeric: tabular-nums; min-width: 0; }
.sim-field__value--empty { color: var(--sim-muted); }

/* ---------- barra superiore ---------- */
.sim-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--sim-surface); border-bottom: 1px solid var(--sim-line);
}
.sim-header__tile { width: 38px; height: 38px; border-radius: var(--sim-radius);
  background: var(--sim-red-soft); color: var(--sim-red); display: flex;
  align-items: center; justify-content: center; font-size: 18px; flex: none; }
.sim-header__name { font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; color: var(--sim-ink); }

/* ============================================================
   MOBILE — non è una strizzata del desktop.
   Le uniche due cose che restano nella barra sono il marchio e un
   bottone: tutto il resto (voci, lingua, account, disconnessione)
   va nel pannello. È così che "Disconnetti" smette di uscire dalla
   barra e "I miei casi" smette di andare a capo.
   ============================================================ */
@media (max-width: 760px) {
  .sim-header__links, .sim-header__user { display: none; }
  .sim-field { grid-template-columns: 1fr var(--sim-tap); gap: 5px 10px; padding: 13px 14px; }
  .sim-field__label { grid-column: 1; grid-row: 1; font-size: 13px; }
  .sim-field__value { grid-column: 1; grid-row: 2; font-size: 16px; font-weight: 600; }
  .sim-field > .sim-btn--icon { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .sim-btn { width: 100%; }
  .sim-btn--icon { width: var(--sim-tap); }
}