/* Distanziometro — base condivisa (PC e smartphone).
   Linguaggio visivo: tavola tecnica da rilievo. Carta da disegno fredda,
   inchiostro blu-ardesia, blu catasto per confini e azioni; verde/ambra/rosso
   riservati all'esito. Carattere: Overpass (discendente della segnaletica
   stradale Highway Gothic), con cifre tabellari per le misure. */

@font-face {
  font-family: 'Overpass';
  src: url('fonts/overpass.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass';
  src: url('fonts/overpass-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #eef2f1;
  --sheet: #fbfcfc;
  --sheet-2: #f4f7f7;
  --ink: #1c2733;
  --graphite: #56646f;
  --rule: #c9d2d6;
  --rule-strong: #93a2ab;
  --catasto: #1f4e8c;
  --catasto-soft: #dfe8f3;
  --ok: #2f7d3a;
  --ok-soft: #e1efe2;
  --grey: #a35f00;
  --grey-soft: #f6ead6;
  --no: #b3261e;
  --no-soft: #f6dedc;
  --nv: #56646f;
  --nv-soft: #e3e8ea;
  --focus: #1f4e8c;
  --radius: 3px;
  --shadow: 0 1px 0 rgba(28, 39, 51, 0.06);
  --font: 'Overpass', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121920;
    --sheet: #18222b;
    --sheet-2: #1d2832;
    --ink: #e2e8ed;
    --graphite: #9aa8b3;
    --rule: #2d3a45;
    --rule-strong: #4a5a66;
    --catasto: #8ab4ef;
    --catasto-soft: #1f3550;
    --ok: #6cc47a;
    --ok-soft: #1c3322;
    --grey: #f0a940;
    --grey-soft: #3a2c14;
    --no: #f08279;
    --no-soft: #3d1e1c;
    --nv: #9aa8b3;
    --nv-soft: #26323c;
    --focus: #8ab4ef;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
}
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 750; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 0.8em; max-width: 72ch; }
a { color: var(--catasto); text-underline-offset: 2px; }
small, .muted { color: var(--graphite); }
.muted { font-size: 13px; }
code, .code { font-family: var(--font); font-feature-settings: 'tnum' 1; background: var(--sheet-2); padding: 1px 5px; border-radius: 2px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 18px 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- controlli --- */
button, .btn {
  font: inherit;
  font-weight: 650;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  min-height: 36px;
}
button:hover, .btn:hover { border-color: var(--ink); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--catasto); border-color: var(--catasto); color: #fff; }
@media (prefers-color-scheme: dark) { button.primary, .btn.primary { color: #0f1a26; } }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--no); border-color: var(--no); background: transparent; }
button.ghost { background: transparent; border-color: transparent; color: var(--catasto); padding-left: 6px; padding-right: 6px; }
button.ghost:hover { border-color: var(--rule); }
button.small { min-height: 28px; padding: 4px 10px; font-size: 13px; }

input, select, textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  width: 100%;
  min-height: 38px;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.4; }
input[type='checkbox'], input[type='radio'] { width: auto; min-height: 0; accent-color: var(--catasto); }
label { display: block; font-size: 13px; font-weight: 650; color: var(--graphite); margin: 0 0 4px; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.row > .fit { flex: 0 0 auto; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--ink); font-size: 14px; margin: 0; }

/* --- fogli (pannelli) --- */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.sheet + .sheet { margin-top: 14px; }
.sheet > h2:first-child, .sheet > h3:first-child { margin-top: 0; }
.stack > * + * { margin-top: 12px; }

/* --- etichette di stato --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  padding: 4px 8px 3px; border-radius: 2px;
  border: 1px solid currentColor; white-space: nowrap;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--ok); background: var(--ok-soft); }
.badge.grey { color: var(--grey); background: var(--grey-soft); }
.badge.no { color: var(--no); background: var(--no-soft); }
.badge.nv { color: var(--nv); background: var(--nv-soft); }
.badge.info { color: var(--catasto); background: var(--catasto-soft); }

/* --- cartiglio: riquadro dati come nelle tavole tecniche --- */
.cartiglio {
  border: 1.5px solid var(--ink);
  background: var(--sheet);
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 1fr 1fr;
}
.cartiglio > div { padding: 8px 12px; border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); min-width: 0; }
.cartiglio > .r { border-right: 0; }
.cartiglio > .full { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.cartiglio .k { display: block; font-size: 12px; color: var(--graphite); font-weight: 600; }
.cartiglio .v { display: block; font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.cartiglio .esito {
  grid-row: span 2;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; border-bottom: 1px solid var(--rule-strong);
}
.cartiglio .esito .v { font-size: 30px; font-weight: 850; letter-spacing: -0.015em; line-height: 1.05; }
.cartiglio .esito .k { color: rgba(255, 255, 255, 0.85); }
.cartiglio .esito.IDONEO { background: var(--ok); }
.cartiglio .esito.GRIGIO { background: var(--grey); }
.cartiglio .esito.VIETATO { background: var(--no); }
.cartiglio .esito.NON_VERIFICABILE { background: var(--nv); }
@media (prefers-color-scheme: dark) {
  .cartiglio .esito { color: #10171d; }
  .cartiglio .esito .k { color: rgba(16, 23, 29, 0.75); }
}
.cartiglio .wide { grid-column: span 2; }
@media (max-width: 560px) {
  .cartiglio { grid-template-columns: 1fr 1fr; }
  .cartiglio .esito { grid-row: auto; grid-column: 1 / -1; }
  .cartiglio > div { border-right: 1px solid var(--rule-strong); }
  .cartiglio > div:nth-child(odd):not(.esito) { border-right: 1px solid var(--rule-strong); }
}

/* --- nastro metrico: distanza misurata contro distanza richiesta --- */
.nastro { margin: 10px 0 14px; }
.nastro .titolo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.nastro .nome { font-weight: 700; }
.nastro .cat { color: var(--graphite); font-size: 13px; }
.nastro .misura { font-weight: 750; white-space: nowrap; }
.nastro .misura.vietato { color: var(--no); }
.nastro .misura.grigio { color: var(--grey); }
.nastro svg { display: block; width: 100%; height: 46px; overflow: visible; }
.nastro .spiega { font-size: 13px; color: var(--graphite); margin-top: 2px; }

/* --- liste --- */
.list { list-style: none; padding: 0; margin: 0; }
.list > li { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.list > li:last-child { border-bottom: 0; }
ul.plain { margin: 0; padding-left: 18px; }
ul.plain li { margin: 3px 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; font-size: 12.5px; color: var(--graphite); font-weight: 650; padding: 6px 8px; border-bottom: 1.5px solid var(--rule-strong); }
table.grid td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid tr.click { cursor: pointer; }
table.grid tr.click:hover td { background: var(--sheet-2); }
.num { text-align: right; white-space: nowrap; }

.callout { border-left: 3px solid var(--catasto); background: var(--catasto-soft); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin: 10px 0; }
.callout.warn { border-color: var(--grey); background: var(--grey-soft); }
.callout.error { border-color: var(--no); background: var(--no-soft); }
.callout.ok { border-color: var(--ok); background: var(--ok-soft); }
.callout > :last-child { margin-bottom: 0; }

.codebox {
  font-family: var(--font); font-size: 13px; word-break: break-all; line-height: 1.45;
  background: var(--sheet-2); border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 10px 12px; max-height: 160px; overflow: auto; user-select: all;
}
.bigcode { font-size: 26px; font-weight: 800; letter-spacing: 0.04em; }

/* --- avvisi a comparsa e finestre --- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5000; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius); font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.toast.error { background: var(--no); color: #fff; }
.toast.ok { background: var(--ok); color: #fff; }
.modal-back { position: fixed; inset: 0; background: rgba(18, 25, 32, 0.45); z-index: 4000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow: auto; }
.modal { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--radius); width: min(560px, 100%); padding: 20px 22px; }
.modal.wide { width: min(980px, 100%); }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.modal h2 { margin-bottom: 12px; }

.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule-strong); border-top-color: var(--catasto); animation: spin 0.8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* --- mappa --- */
.leaflet-container { font-family: var(--font); background: var(--sheet-2); }
.dz-pin { width: 22px; height: 22px; margin-left: -11px; margin-top: -22px; }
.dz-ring-label { background: var(--sheet); border: 1px solid var(--ink); color: var(--ink); font-size: 11.5px; font-weight: 750; padding: 1px 5px; white-space: nowrap; transform: translate(-50%, -50%); display: inline-block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.25); }

.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }