/* --------------------------------------------------------------------------
   CARATTERE
   Outfit, licenza SIL Open Font (il testo completo e' in font/OFL-Outfit.txt).

   Perche' un carattere portato e non quelli di sistema: con Segoe UI
   l'applicazione somigliava a qualunque gestionale. Outfit e' geometrico e
   ha le pance delle lettere e delle cifre perfettamente circolari — e la
   rotondita' e' il riferimento al marchio. Non serve disegnare palloncini
   se le cifre gia' lo sono.

   Sottoinsieme al solo latino esteso piu' i segni che l'applicazione usa
   davvero: 34 KB invece di 108. Variabile, cosi' un solo file copre tutti
   i pesi da 100 a 900. `swap`: il testo si legge subito col carattere di
   sistema e cambia quando il file arriva, invece di lasciare la pagina
   bianca su una rete lenta.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  src: url("/static/font/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   bzone — foglio di stile
   Palette estratta dal logo (app/static/logo.svg):
     #9358D1  viola   — colore primario
     #C573D1  magenta — accento, gradiente del logo
     #1A1A1A  nero    — testo del marchio
   ========================================================================== */

:root {
  /* La tavolozza viene dal marchio, approfondita perche' regga campi
     grandi: il viola originale (#9358d1) su una superficie di 500 px
     sbiadisce e il testo bianco sopra fatica. */
  --viola: #7c3fbf;
  --viola-scuro: #5e2d93;
  --viola-chiaro: #f1eafa;
  --magenta: #c86fd4;
  --gradiente: linear-gradient(135deg, #7c3fbf 0%, #c86fd4 100%);

  /* L'inchiostro NON e' nero: e' prugna. Un grigio neutro accanto a un
     marchio viola sembra sempre spento — e nessuno sa dire perche'. */
  --nero: #2e1a47;
  --grigio-testo: #5a4e68;
  --grigio-tenue: #7a6e8a;
  --bordo: #e8e1f0;
  --sfondo: #fbf8fd;
  --bianco: #ffffff;

  --ok: #2e7d5b;
  --attesa: #b8860b;
  --errore: #c0392b;

  --raggio: 10px;
  --ombra: 0 1px 3px rgba(26, 26, 26, 0.08), 0 4px 16px rgba(147, 88, 209, 0.06);

  --testo: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --numeri: "SF Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--testo);
  font-size: 15px;
  line-height: 1.55;
  color: var(--grigio-testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--nero); font-weight: 600; line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--viola); }
a:hover { color: var(--viola-scuro); }

/* --------------------------------------------------------------------------
   INTESTAZIONE
   -------------------------------------------------------------------------- */
.bz-testata {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: var(--bianco);
  border-bottom: 1px solid var(--bordo);
}

/* 60px di logo VERO.
   Prima l'SVG aveva `viewBox="0 0 375 375"` — una tela quadrata col disegno
   in mezzo e vuoto intorno: il contenuto occupava il 28% dell'altezza.
   Alzare questo numero allargava il riquadro, non il marchio: a 68px il
   logo se ne prendeva 19. Ritagliato il viewBox, il numero qui e' quello
   che si vede davvero. */
.bz-testata__logo { height: 60px; width: auto; display: block; }

/* Il logo e' anche il modo per tornare all'inizio: e' la convenzione che
   tutti conoscono senza doverla imparare. Deve pero' SEMBRARE cliccabile,
   altrimenti resta una convenzione che nessuno prova. */
.bz-testata__casa {
  display: inline-flex; align-items: center;
  border-radius: 10px; padding: 2px 6px; margin-left: -6px;
  transition: background .15s ease, transform .15s ease;
}
.bz-testata__casa:hover { background: rgba(0,0,0,.05); transform: translateY(-1px); }
.bz-testata__casa:focus-visible { outline: 2px solid var(--bz-accento); outline-offset: 2px; }
[data-skin="studio"] .bz-testata__casa:hover { background: rgba(255,255,255,.08); }

.bz-testata__nome {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--nero);
  letter-spacing: -0.01em;
}

.bz-testata__nome em {
  font-style: normal;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bz-testata nav { margin-left: auto; display: flex; gap: 4px; }

.bz-testata nav a {
  padding: 7px 14px;
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--grigio-testo);
  font-size: .92rem;
}
.bz-testata nav a:hover { background: var(--viola-chiaro); color: var(--viola-scuro); }
.bz-testata nav a[aria-current="page"] { background: var(--viola); color: #fff; }

/* --------------------------------------------------------------------------
   CONTENITORI
   -------------------------------------------------------------------------- */
.bz-pagina { max-width: 1160px; margin: 0 auto; padding: 26px 24px 60px; }

.bz-scheda {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 22px;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   TABELLE
   -------------------------------------------------------------------------- */
.bz-tabella { width: 100%; border-collapse: collapse; font-size: .93rem; }

.bz-tabella th {
  text-align: left;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grigio-tenue);
  padding: 9px 10px;
  border-bottom: 2px solid var(--bordo);
}

.bz-tabella td { padding: 10px; border-bottom: 1px solid var(--bordo); }
.bz-tabella tbody tr:hover { background: var(--viola-chiaro); }

.bz-num {
  text-align: right;
  font-family: var(--numeri);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   STATI DEL PREVENTIVO
   -------------------------------------------------------------------------- */
.bz-stato {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bz-stato--bozza      { background: #eeedf2; color: #5a5a66; }
.bz-stato--inviato    { background: var(--viola-chiaro); color: var(--viola-scuro); }
.bz-stato--accettato  { background: #e3f3ec; color: var(--ok); }
.bz-stato--rifiutato  { background: #fbe9e7; color: var(--errore); }
.bz-stato--scaduto    { background: #fdf3e0; color: var(--attesa); }
.bz-stato--sostituito,
.bz-stato--annullato  { background: #f2f2f4; color: var(--grigio-tenue); }

/* --------------------------------------------------------------------------
   PULSANTI
   -------------------------------------------------------------------------- */
.bz-bottone {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: var(--viola);
  color: #fff;
}
.bz-bottone:hover { background: var(--viola-scuro); color: #fff; }
.bz-bottone--tenue {
  background: var(--bianco);
  color: var(--grigio-testo);
  border-color: var(--bordo);
}
.bz-bottone--tenue:hover { background: var(--viola-chiaro); color: var(--viola-scuro); }

/* --------------------------------------------------------------------------
   AVVISI
   -------------------------------------------------------------------------- */
.bz-avviso {
  padding: 13px 16px;
  border-radius: var(--raggio);
  border-left: 3px solid var(--viola);
  background: var(--viola-chiaro);
  font-size: .92rem;
  margin-bottom: 16px;
}
.bz-avviso--attenzione { border-left-color: var(--attesa); background: #fdf6e8; }
.bz-avviso--errore { border-left-color: var(--errore); background: #fdeceb; }

/* --------------------------------------------------------------------------
   MOBILE — Simona e Andrea lavorano dal telefono in allestimento
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bz-pagina { padding: 16px 12px 48px; }
  .bz-scheda { padding: 16px; }
  .bz-testata { padding: 12px 14px; flex-wrap: wrap; }
  .bz-testata__logo { height: 44px; }
  .bz-testata nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .bz-bottone { padding: 12px 18px; }        /* bersaglio adatto al pollice */
  .bz-tabella { font-size: .88rem; }
  .bz-tabella th, .bz-tabella td { padding: 8px 6px; }
  .bz-nascondi-mobile { display: none; }
}