/* =====================================================================
   EveryThing — Design System condiviso (tema chiaro, brand teal)
   Un solo file per palette, tipografia e componenti di tutte le pagine.
   Per cambiare il colore brand: modifica le variabili --et-brand* qui.
   ===================================================================== */
:root {
  /* Brand teal */
  --et-brand:        #0F6E56;   /* teal scuro — accenti forti, testo su soft */
  --et-brand-mid:    #1D9E75;   /* teal medio — stato attivo / online */
  --et-brand-soft:   #E1F5EE;   /* teal chiarissimo — sfondi tint, icone */
  --et-brand-press:  #0B5744;   /* teal pressione */

  /* Superfici / testo (light) */
  --et-bg:        #F4F6F5;      /* sfondo pagina */
  --et-surface:   #FFFFFF;      /* schede / barre */
  --et-surface-2: #F3F5F4;      /* metric card / righe soft */
  --et-text:      #1E2622;      /* testo principale */
  --et-text-2:    #5E6A64;      /* testo secondario */
  --et-text-muted:#95A29B;      /* hint / metadati */
  --et-border:    #E6EAE8;      /* hairline */
  --et-border-2:  #D6DCD9;      /* bordo marcato */

  /* Stati */
  --et-online:  #1D9E75;
  --et-offline: #B4B2A9;
  --et-danger:  #C0392B;
  --et-danger-soft:#FCECEA;
  --et-warning: #BA7517;

  --et-radius:    12px;
  --et-radius-lg: 18px;
  --et-radius-pill: 999px;
  --et-shadow: 0 1px 2px rgba(20,40,33,0.04), 0 4px 16px rgba(20,40,33,0.05);
  --et-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Base */
.et-app { font-family: var(--et-font); color: var(--et-text); background: var(--et-bg);
  -webkit-font-smoothing: antialiased; margin: 0; }
.et-app *, .et-app *::before, .et-app *::after { box-sizing: border-box; }

/* Bottoni */
.et-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--et-font); font-size:15px; font-weight:500; line-height:1;
  padding:13px 18px; border-radius:var(--et-radius); border:none; cursor:pointer;
  transition: background .15s, transform .05s; }
.et-btn:active { transform: scale(.98); }
.et-btn-primary { background:var(--et-brand); color:#fff; width:100%; }
.et-btn-primary:active { background:var(--et-brand-press); }
.et-btn-ghost { background:var(--et-surface-2); color:var(--et-text); }
.et-btn-danger { background:var(--et-danger); color:#fff; }

/* Campi */
.et-input { width:100%; font-family:var(--et-font); font-size:16px; color:var(--et-text);
  background:var(--et-surface); border:1px solid var(--et-border-2); border-radius:var(--et-radius);
  padding:13px 14px; outline:none; transition: border-color .15s, box-shadow .15s; }
.et-input:focus { border-color:var(--et-brand-mid); box-shadow:0 0 0 3px var(--et-brand-soft); }
.et-label { display:block; font-size:12px; font-weight:500; color:var(--et-text-2);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px; }

/* Schede / righe */
.et-card { background:var(--et-surface); border:1px solid var(--et-border);
  border-radius:var(--et-radius-lg); box-shadow:var(--et-shadow); }

/* Pallino stato */
.et-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.et-dot.online  { background:var(--et-online); }
.et-dot.offline { background:var(--et-offline); }

/* Pill / badge */
.et-pill { font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--et-radius-pill);
  background:var(--et-brand-soft); color:var(--et-brand); }

/* Icona in quadrato soft */
.et-ic { width:40px; height:40px; border-radius:11px; background:var(--et-brand-soft);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:var(--et-brand); font-size:21px; }