/* Podere: pino scuro, bergamotto come nelle barre del fascicolo aziendale, carta fredda. */
:root {
  --carta: #f1f4f2;
  --foglio: #ffffff;
  --inchiostro: #16261f;
  --tenue: #55665e;
  --filo: #c6d0ca;
  --pino: #1d3a30;
  --pino-2: #2a5043;
  --bergamotto: #f0e36a;
  --ricavi: #2f6f57;
  --costi: #b5502f;
  --ok: #1f6b45;
  --attenzione: #8a5a00;
  --errore: #a32a2a;
  --display: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --testo: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 15px/1.5 var(--testo); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 28px; }
a { color: var(--pino-2); }
:focus-visible { outline: 2px solid #1565c0; outline-offset: 2px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Struttura */
.guscio { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.lato { background: var(--pino); color: #e7efea; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marchio { font: 600 23px var(--display); padding: 2px 10px 12px; color: var(--bergamotto); text-decoration: none; display: block; }
.lato h2 { font: 500 13px var(--testo); color: #a9c0b5; padding: 12px 10px 3px; }
.lato a.voce { display: block; color: #e7efea; text-decoration: none; padding: 6px 10px; border-radius: 3px; }
.lato a.voce:hover { background: var(--pino-2); }
.lato a.voce[aria-current="page"] { background: var(--bergamotto); color: var(--inchiostro); font-weight: 600; }
.lato .piede { margin-top: auto; padding: 12px 10px 0; font-size: 13px; color: #a9c0b5; overflow-wrap: anywhere; }
.lato .piede button { color: #e7efea; }
main { padding: 26px 32px 60px; max-width: 1180px; width: 100%; }
.testa { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.testa p { margin: 3px 0 0; color: var(--tenue); max-width: 70ch; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Sezioni con la barra del fascicolo */
.sezione { background: var(--foglio); border: 1px solid var(--inchiostro); margin-bottom: 22px; }
.sezione > h2 { background: var(--bergamotto); border-bottom: 1px solid var(--inchiostro); font-size: 15px; padding: 5px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.corpo { padding: 14px; }
.corpo > p:first-child { margin-top: 0; }
.nota { color: var(--tenue); font-size: 13.5px; max-width: 80ch; }
.nota:last-child { margin-bottom: 0; }

/* Indicatori */
.indicatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--filo); border-left: 1px solid var(--filo); background: var(--foglio); margin-bottom: 22px; }
.indicatori > div { border-right: 1px solid var(--filo); border-bottom: 1px solid var(--filo); padding: 10px 12px; }
.indicatori b { display: block; font: 600 22px var(--display); font-variant-numeric: tabular-nums; }
.indicatori span { color: var(--tenue); font-size: 13px; }
.sezione .indicatori { margin: 0; border-top: 0; border-left: 0; }

/* Strisce delle colture */
.strisce { display: flex; height: 132px; gap: 2px; background: var(--foglio); border: 1px solid var(--inchiostro); padding: 2px; margin-bottom: 22px; }
.striscia { min-width: 74px; position: relative; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 10px; overflow: hidden; background-color: var(--c); background-image: repeating-linear-gradient(var(--a), rgba(255,255,255,.13) 0 2px, transparent 2px 11px); }
.striscia b { font: 600 17px var(--display); line-height: 1.15; overflow-wrap: anywhere; }
.striscia span { font-size: 13px; }

/* Tabelle */
.scorri { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--tenue); border-bottom: 1px solid var(--inchiostro); padding: 7px 10px; white-space: nowrap; }
th.num { text-align: right; }
td { border-bottom: 1px solid var(--filo); padding: 7px 10px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.totale td { font-weight: 700; background: #f5f7e4; }
td.azioni-riga { white-space: nowrap; text-align: right; width: 1%; }

/* Controlli */
button, .bottone { font: 600 14px var(--testo); border: 1px solid var(--inchiostro); background: var(--foglio); color: var(--inchiostro); padding: 6px 12px; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .bottone:hover { background: #e6ebe7; }
button.primario { background: var(--pino); color: #fff; border-color: var(--pino); }
button.primario:hover { background: var(--pino-2); }
button.pericolo { color: var(--errore); border-color: var(--errore); }
button.collegamento { border: 0; background: none; padding: 2px 6px; font-weight: 500; text-decoration: underline; }
button.collegamento:hover { background: none; }
label.campo { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; font-weight: 600; min-width: 0; }
label.campo small { font-weight: 400; color: var(--tenue); }
label.campo small.avviso { color: var(--errore); }
input, select { font: 15px var(--testo); padding: 6px 8px; border: 1px solid #8b9a92; border-radius: 3px; background: #fff; color: var(--inchiostro); width: 100%; min-width: 0; }
.griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.griglia .largo { grid-column: 1 / -1; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font: 600 15px var(--display); background: var(--bergamotto); border: 1px solid var(--inchiostro); width: 100%; padding: 3px 10px; margin-bottom: 10px; }
.spunte { display: grid; gap: 4px; max-height: 190px; overflow-y: auto; border: 1px solid var(--filo); padding: 8px; }
.spunte label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.spunte input { width: auto; }
select.anno { width: auto; }

dialog { border: 1px solid var(--inchiostro); padding: 0; width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); color: var(--inchiostro); }
dialog::backdrop { background: rgba(22, 38, 31, .55); }
dialog h2 { background: var(--bergamotto); border-bottom: 1px solid var(--inchiostro); font-size: 17px; padding: 8px 14px; }
dialog form, dialog .dentro { padding: 14px; }
.fondo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.errore { color: var(--errore); background: #fbecec; border-left: 3px solid var(--errore); padding: 7px 10px; margin: 0 0 12px; }

/* Stati: sempre con parola, mai solo colore */
.stato { font-weight: 600; white-space: nowrap; }
.stato.ok { color: var(--ok); }
.stato.attenzione { color: var(--attenzione); }
.stato.ko { color: var(--errore); }

/* Grafici */
.legenda { display: flex; gap: 18px; font-size: 13.5px; margin-bottom: 6px; color: var(--tenue); }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
svg.grafico { display: block; width: 100%; min-width: 620px; height: auto; }
svg.grafico text { font: 12px var(--testo); fill: var(--tenue); }
svg.grafico .asse { stroke: var(--filo); stroke-width: 1; }
svg.grafico .zero { stroke: var(--inchiostro); stroke-width: 1; }
svg.grafico [data-tip] { cursor: default; }
#tip { position: fixed; z-index: 10; background: var(--inchiostro); color: #fff; padding: 5px 9px; font-size: 13px; pointer-events: none; border-radius: 3px; max-width: 260px; white-space: pre-line; }
.barra-orizz { background: #e6ebe7; height: 10px; min-width: 90px; }
.barra-orizz i { display: block; height: 100%; background: var(--pino-2); border-radius: 0 3px 3px 0; }
.crono td.pieno { background: var(--pino-2); }
.crono td.vuoto, .crono td.pieno { min-width: 42px; border-left: 2px solid var(--foglio); }

/* Accesso */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background-color: var(--pino); background-image: repeating-linear-gradient(112deg, rgba(240,227,106,.07) 0 2px, transparent 2px 22px); }
.accesso form { background: var(--foglio); border: 1px solid var(--inchiostro); width: min(380px, 100%); }
.accesso h1 { background: var(--bergamotto); border-bottom: 1px solid var(--inchiostro); padding: 12px 16px; font-size: 30px; }
.accesso .dentro { padding: 16px; display: grid; gap: 12px; }
.accesso p { margin: 0; color: var(--tenue); }

.vuoto-stato { padding: 26px 14px; text-align: center; color: var(--tenue); }
.vuoto-stato button { margin-top: 8px; }

@media (max-width: 860px) {
  .guscio { display: block; }
  .lato { position: static; height: auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; align-items: center; padding: 8px; gap: 2px; }
  .lato h2, .lato .piede span { display: none; }
  .marchio { padding: 0 8px; font-size: 19px; }
  .lato a.voce { white-space: nowrap; }
  .lato .piede { margin: 0; padding: 0; }
  main { padding: 16px; }
  h1 { font-size: 23px; }
  .griglia { grid-template-columns: minmax(0, 1fr); }
  .strisce { height: auto; flex-direction: column; }
  .striscia { flex: none !important; min-height: 70px; }
}
@media print {
  body { background: #fff; font-size: 12px; }
  .lato, .azioni, .azioni-riga, #tip { display: none !important; }
  .guscio { display: block; }
  main { padding: 0; max-width: none; }
  .sezione { break-inside: avoid; }
  .sezione > h2, legend, tr.totale td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}