/* Rapportini tecnici — MetaGroup Sas
   Stessa palette/font del brand kit "Vettore" usato in scad.metagroup.srl
   (webapp/static/stile.css), copiata qui perché i due servizi girano su
   processi/deploy separati. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --brand: #419451;
  --brand-scuro: #357A42;
  --brand-chiaro: #60BC71;

  --allarme: #C0392B;
  --allarme-fondo: #FBEAE6;
  --buono: #357A42;
  --buono-fondo: #EAF3EA;

  --ui: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --dato: 'DM Mono', 'SF Mono', Menlo, monospace;
  --r: 8px;

  --inchiostro: #0D0E0C;
  --carta: #F6F4EF;
  --bianco: #FFFFFF;
  --ardesia: #7A7266;
  --bordo: #E5E1D8;
  --bordo-forte: #D3CDBF;
  --ombra: 0 1px 2px rgba(13,14,12,.06);
}

[data-tema="scuro"] {
  --inchiostro: #F6F4EF;
  --carta: #0D0E0C;
  --bianco: #1C1D18;
  --ardesia: #B5AFA3;
  --bordo: #2C2D26;
  --bordo-forte: #3D3E35;
  --ombra: 0 1px 3px rgba(0,0,0,.5);
  --allarme-fondo: #3A211C;
  --buono-fondo: #16301C;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  background: var(--carta);
  color: var(--inchiostro);
}

.guscio { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

.testata {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--bordo);
}
.testata img { display: block; }
.titolo-app { font-weight: 600; color: var(--ardesia); }
.spazio { flex: 1; }
.chi { font-family: var(--dato); font-size: 13px; color: var(--ardesia); }

.corpo { padding: 20px; display: flex; flex-direction: column; gap: 28px; }

.bottone {
  font-family: var(--ui); font-size: 14px; font-weight: 500;
  border-radius: var(--r); border: 1px solid var(--bordo-forte);
  padding: 8px 14px; cursor: pointer; background: var(--bianco); color: var(--inchiostro);
  text-decoration: none; display: inline-block;
}
.bottone.primario { background: var(--brand); border-color: var(--brand-scuro); color: #fff; }
.bottone.piano { background: transparent; }

.avviso { padding: 10px 14px; border-radius: var(--r); font-size: 14px; margin-bottom: 12px; }
.avviso-allarme { background: var(--allarme-fondo); color: var(--allarme); }
.avviso-buono { background: var(--buono-fondo); color: var(--buono); }

.scheda-accesso, .scheda-form, .scheda-storico {
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 20px; box-shadow: var(--ombra);
}

h1 { font-size: 18px; margin: 0 0 14px; }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--ardesia); }

form label {
  display: block; font-size: 13px; color: var(--ardesia); margin-bottom: 14px;
}
input, textarea, select {
  width: 100%; margin-top: 4px; font-family: var(--ui); font-size: 15px;
  padding: 9px 10px; border: 1px solid var(--bordo-forte); border-radius: var(--r);
  background: var(--carta); color: var(--inchiostro);
}
textarea { resize: vertical; }

.scelta-tipo { border: none; padding: 0; margin: 0 0 14px; }
.scelta-tipo legend { font-size: 13px; color: var(--ardesia); padding: 0 0 6px; }
.scelta-tipo label { display: inline-flex; align-items: center; gap: 6px; width: auto; margin-right: 20px; }
.scelta-tipo input { width: auto; margin-top: 0; }

.riga-tempo { display: flex; gap: 12px; }
.riga-tempo label { flex: 1; }

.voce-risultato {
  padding: 8px 10px; cursor: pointer; border: 1px solid var(--bordo);
  border-top: none; background: var(--bianco); font-size: 14px;
}
.voce-risultato:hover { background: var(--carta); }

.tabella-storico { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella-storico th, .tabella-storico td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--bordo);
}
.tabella-storico td:nth-child(2), .tabella-storico td:nth-child(3) { font-family: var(--dato); }

.vuoto { color: var(--ardesia); font-size: 14px; }