/*
 * I colori dell'app preventivi: sfondo grigio chiaro (richiesta del
 * 09/10/2026), il blu Pizzolato dei documenti come colore d'accento.
 * Si appoggia a style.css, che viene dal portale, e ne cambia solo i toni.
 */
:root {
  --bg: #e6e8ec; --panel: #ffffff; --panel-2: #f2f3f5; --line: #d7dbe1;
  --accent: #1f4f82; --accent-2: #33669c; --scuro: #0d2e4b;
  --barra: #f7f8fa; --barra-linea: #d7dbe1; --barra-passaggio: #e9ecf1;
}
body { background: var(--bg); }
nav { box-shadow: 1px 0 0 #00000006; }
nav a.on { background: var(--scuro); }
nav .brand.marchio-testo { margin: 4px 0 22px 8px; color: var(--scuro); }
button.primary { background: var(--scuro); border-color: var(--scuro); }
button.primary:hover { background: var(--accent); border-color: var(--accent); }
.card { box-shadow: 0 1px 2px #0f172a0d; }
#profilo { text-align: left; width: 100%; padding: 6px 8px; }
#profilo .ruolo { display: block; font-size: 11px; color: var(--muted); }
nav .utente { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* le tabelle dello storico: numeri allineati, righe che si aprono */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.apribile { cursor: pointer; }
tr.apribile:hover td { background: var(--panel-2); }
.barra-filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.barra-filtri .field { margin: 0; min-width: 140px; }
.schede { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.schede button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 14px; color: var(--muted); }
.schede button.on { border-bottom-color: var(--scuro); color: var(--scuro); font-weight: 600; }
.margine-neg { color: var(--err); font-weight: 600; }
.margine-magro { color: #a05a00; font-weight: 600; }
.margine-ok { color: #1b6b48; font-weight: 600; }
.pagina-extra { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel-2); }
.pagina-extra > label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg); font-weight: 600; }

@media (max-width: 760px) {
  .barra-filtri .field { min-width: 0; flex: 1 1 45%; }
}

/* il marchio: l'icona della web app accanto al nome */
.marchio-con-icona { display: flex; align-items: center; gap: 10px; margin: 4px 0 22px 6px; }
.marchio-con-icona img { width: 38px; height: 38px; flex: 0 0 38px; }
.marchio-con-icona .marchio-testo { font-size: 20px; color: var(--scuro); }
.icona-login { display: block; width: 72px; height: 72px; margin: 0 auto 10px; }

/* il server non risponde: si copre la pagina, invece di lasciarla finta */
#server-spento { position: fixed; inset: 0; background: #0d2e4bd9; display: grid; place-items: center; z-index: 9999; }
#server-spento > div { background: #fff; border-radius: 12px; padding: 22px 26px; max-width: 380px; text-align: center; }
#server-spento p { color: var(--muted); margin: 8px 0 0; }

/* i grafici: colonne blu, rosse sotto lo zero; griglia e assi in sottofondo */
svg.grafico { width: 100%; height: auto; display: block; }
svg.grafico .griglia { stroke: var(--line); stroke-width: 1; }
svg.grafico .zero { stroke: #8a94a6; stroke-width: 1; }
svg.grafico .asse { fill: var(--muted); font-size: 10px; }
svg.grafico .pos { fill: #33669c; }
svg.grafico .neg { fill: #c0392b; }
svg.grafico .presa { fill: transparent; }
svg.grafico .colonna.su .pos { fill: #0d2e4b; }
svg.grafico .colonna.su .neg { fill: #8e2318; }
#tip-grafico { position: fixed; display: none; z-index: 9000; background: #0d2e4b; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.margine-negativo { color: var(--err) !important; font-weight: 700; }

/* i prospect: in blu, nell'elenco e nella scheda */
tr.prospect td, tr.prospect td b { color: #1f5fbf; }
.tag.prospect { background: #e8f0fc; border-color: #a9c3ee; color: #1f5fbf; font-weight: 600; }

/* prezzo e quantita' modificabili al volo nella scheda della voce */
.al-volo { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 4px; }
.al-volo label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--muted, #667); font-size: 11px; }
.al-volo input { width: 92px; padding: 4px 6px; text-align: right; font-size: 13px; }
.al-volo input[data-campo="quantita"] { width: 64px; }