/* Maps NX — stili dell'app, sopra il design system GeoStru NX condiviso.
   Prefisso maps-*; i token (--gs-*) arrivano da css/ds/. */

html, body { margin: 0; padding: 0; height: 100%; background: var(--gs-bg); }
body.gs { color: var(--gs-text); font-family: Inter, system-ui, sans-serif; }

.maps-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ── Toolbar ── */
.maps-toolbar { height: 58px; gap: 8px; padding: 0 14px; flex: none; align-items: center; display: flex; }
.maps-brand-sq { width: 34px; height: 34px; border-radius: 9px; background: var(--gs-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gs-toolbar__product { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--gs-text); }
.maps-nx { border: 1px solid var(--gs-border-strong); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 600; color: var(--gs-text-secondary); letter-spacing: .05em; }

.gs .maps-pill { height: 36px; padding: 0 12px; border: 1px solid var(--gs-border-strong); background: var(--gs-bg-elev); border-radius: var(--gs-r-lg, 8px); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--gs-text); white-space: nowrap; cursor: pointer; transition: background var(--gs-dur,.14s) var(--gs-ease, ease), border-color var(--gs-dur,.14s) var(--gs-ease, ease); position: relative; }
.gs .maps-pill:hover { background: var(--gs-bg-hover); border-color: var(--gs-text-tertiary); }
.gs .maps-pill--ai { background: var(--gs-ai); border-color: var(--gs-ai); color: var(--gs-ai-fg, #fff); font-weight: 600; }
.gs .maps-pill--ai:hover { background: var(--gs-ai-hover); border-color: var(--gs-ai-hover); }
.gs .maps-pill__caret { opacity: .45; margin-left: 1px; }
.gs .maps-pill.dropdown-toggle::after { display: none; } /* si usa il caret SVG inline */
.maps-flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Ricerca località in toolbar */
.maps-search { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; min-width: 230px; border: 1px solid var(--gs-border-strong); background: var(--gs-bg-elev); border-radius: var(--gs-r-lg, 8px); }
.maps-search i { color: var(--gs-text-tertiary); font-size: 13px; }
.maps-search input { border: none; outline: none; background: transparent; font-size: 13px; color: var(--gs-text); width: 100%; font-family: inherit; }
.maps-search:focus-within { border-color: var(--gs-accent); box-shadow: var(--gs-shadow-focus); }

/* CTA Quote */
.gs .maps-cta { height: 36px; padding: 0 18px; border: none; border-radius: var(--gs-r-lg, 8px); background: var(--gs-accent, #d49018); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 1px 2px rgba(180,120,20,.35); white-space: nowrap; }
.gs .maps-cta:hover { filter: brightness(1.06); }
.gs .maps-cta:active { transform: translateY(1px); }
.gs .maps-cta:disabled { filter: grayscale(.6); opacity: .6; cursor: not-allowed; }

/* FAB NxAi condiviso (#aiFab): qui l'assistente si apre dal pulsante in toolbar,
   quindi il bottone flottante in basso a destra è un doppione — e sta sopra la
   tabella delle coordinate, coprendo proprio le ultime righe.

   Si NASCONDE, non si rimuove: `toggleAiPanel()` della RCL inizia con
   `if (!panel || !fab) return;`, quindi togliendo l'elemento dal DOM smetterebbe
   di funzionare anche il pulsante in toolbar. Deve restare, solo invisibile.
   Nessun !important: la RCL scrive `fab.style.display` inline ('none' all'apertura,
   '' alla chiusura) e quella stringa vuota ricade su questa regola. */
#aiFab { display: none; }

/* Pill avatar del menu utente condiviso */
.gs .lq-avatar-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background var(--gs-dur,.14s) ease, border-color var(--gs-dur,.14s) ease; }
.gs .lq-avatar-pill:hover { background: var(--gs-bg-hover); border-color: var(--gs-border); }
.gs .lq-avatar-pill .lq-avatar-name { font-size: 13px; font-weight: 500; color: var(--gs-text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs .lq-avatar-pill .lq-avatar-chev { font-size: 10px; color: var(--gs-text-tertiary); }

/* Menu a tendina della toolbar */
.maps-menu .dropdown-menu { background: var(--gs-bg-elev); border: 1px solid var(--gs-border); border-radius: var(--gs-r-md, 6px); box-shadow: var(--gs-shadow-popover, 0 8px 24px rgba(20,20,18,.12)); padding: 5px; margin-top: 6px; min-width: 220px; font-size: 13px; }
.maps-menu .dropdown-item { display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: var(--gs-r-sm, 4px); color: var(--gs-text); font-size: 13px; }
.maps-menu .dropdown-item:hover, .maps-menu .dropdown-item:focus { background: var(--gs-bg-hover); color: var(--gs-text); }
.maps-menu .dropdown-item.active { background: color-mix(in srgb, var(--gs-navy) 12%, transparent); color: var(--gs-navy); }
.maps-menu .dropdown-item .bi { color: var(--gs-text-tertiary); font-size: 14px; }
/* Voce non applicabile (manca la geometria che le serve): resta leggibile ma
   non risponde. Meglio di un comando che si accende e poi apre un alert. */
.maps-menu .dropdown-item.disabled { opacity: .45; pointer-events: none; cursor: default; }

/* Tab del modal di help */
.gs .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; font-size: 13px; }

/* ── Shell ── */
.maps-body { flex: 1; display: flex; min-height: 0; }

/* ── Sidebar ── */
.maps-sidebar { width: 248px; flex: none; border-right: 1px solid var(--gs-border); background: var(--gs-bg); padding: 8px 10px 18px; overflow: auto; }
.maps-tree-group { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gs-text-tertiary); padding: 14px 2px 6px; }
.maps-panel { display: flex; flex-direction: column; gap: 9px; }

.maps-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gs .maps-tools .maps-tool--danger { grid-column: 1 / -1; flex-direction: row; padding: 8px 4px; }   /* cinque strumenti: Cancella su tutta la riga */
.gs .maps-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 11px 4px; border: 1px solid var(--gs-border); border-radius: var(--gs-r-md, 6px); background: var(--gs-bg-elev); color: var(--gs-text-secondary); font-size: 11.5px; font-weight: 500; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.gs .maps-tool i { font-size: 17px; }
.gs .maps-tool:hover { background: var(--gs-bg-hover); color: var(--gs-text); }
.gs .maps-tool.is-active { background: color-mix(in srgb, var(--gs-navy) 10%, transparent); border-color: var(--gs-navy); color: var(--gs-navy); font-weight: 600; }
.gs .maps-tool--danger:hover { background: var(--gs-danger-soft, #fdecec); border-color: var(--gs-danger, #dc2626); color: var(--gs-danger, #dc2626); }

.maps-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.maps-label { font-size: 12px; font-weight: 500; color: var(--gs-text-secondary); }
.maps-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.maps-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gs-text-secondary); cursor: pointer; }
.maps-check input { width: 14px; height: 14px; accent-color: var(--gs-navy); cursor: pointer; }
.maps-hint { font-size: 11px; color: var(--gs-text-tertiary); margin: 0; line-height: 1.45; }

/* Varianti compatte assenti nel design system condiviso */
.gs .gs-input--sm, .gs .gs-select--sm { height: var(--gs-density-btn-h-sm, 28px); font-size: 12px; padding: 0 8px; }

.maps-stats { gap: 0; border: 1px solid var(--gs-border); border-radius: var(--gs-r-md, 6px); background: var(--gs-bg-elev); overflow: hidden; }
.maps-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--gs-border-subtle, var(--gs-border)); }
.maps-stat:last-child { border-bottom: none; }
.maps-stat__lbl { font-size: 11.5px; color: var(--gs-text-secondary); }
.maps-stat__val { font-size: 12.5px; font-weight: 600; color: var(--gs-text); }

/* ── Area principale ── */
.maps-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.maps-canvas { flex: 1; position: relative; min-height: 0; background: var(--gs-bg-sunken); }
#mapAdvanced { position: absolute; inset: 0; }

/* Selettore mappa base, sovrapposto */
.maps-basemap { position: absolute; top: 12px; left: 12px; z-index: 5; display: inline-flex; padding: 3px; gap: 2px; background: var(--gs-bg-elev); border: 1px solid var(--gs-border); border-radius: var(--gs-r-lg, 8px); box-shadow: 0 2px 8px rgba(20,20,18,.14); }
.maps-basemap label { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border-radius: var(--gs-r-sm, 5px); color: var(--gs-text-secondary); cursor: pointer; font-size: 14px; transition: background .14s ease, color .14s ease; margin: 0; }
.maps-basemap label:hover { background: var(--gs-bg-hover); color: var(--gs-text); }
.maps-basemap .btn-check:checked + label { background: var(--gs-navy); color: #fff; }

/* ── Dock inferiore ── */
/* `--maps-dock-h` è l'altezza scelta trascinando la maniglia. Sta in una custom
   property e non in `style.height` perché un'altezza inline vincerebbe per
   specificità anche su `.is-collapsed`, e il pulsante "comprimi" smetterebbe di
   funzionare dopo il primo ridimensionamento. Ordine importante: `.is-collapsed`
   viene DOPO `.is-tall`, che ha la stessa specificità, e deve prevalere. */
.maps-dock { flex: none; height: var(--maps-dock-h, 262px); display: flex; flex-direction: column; border-top: 1px solid var(--gs-border); background: var(--gs-bg-elev); transition: height .18s ease; }
/* La dock alta serve al 3D, che in 262 px non si legge. Se però l'utente ha già
   scelto un'altezza sua, quella vale anche qui: la variabile è la stessa. */
.maps-dock.is-tall { height: var(--maps-dock-h, 460px); }
.maps-dock.is-collapsed { height: 39px; }
.maps-dock.is-collapsed .maps-dock__body { display: none; }
.maps-dock.is-collapsed .maps-dock__toggle i { transform: rotate(180deg); }

.maps-dock__tabs { flex: none; display: flex; align-items: stretch; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--gs-border); background: var(--gs-bg); }
.gs .maps-dock__tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 12px; font-size: 12.5px; font-weight: 500; color: var(--gs-text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gs .maps-dock__tab:hover { color: var(--gs-text); }
.gs .maps-dock__tab.is-active { color: var(--gs-navy); border-bottom-color: var(--gs-navy); font-weight: 600; }
.maps-dock__spacer { flex: 1; }
.gs .maps-dock__toggle { background: none; border: none; color: var(--gs-text-tertiary); cursor: pointer; padding: 0 8px; font-size: 13px; }
.gs .maps-dock__toggle:hover { color: var(--gs-text); }
.maps-dock__toggle i { display: inline-block; transition: transform .18s ease; }

/* Maniglia di ridimensionamento: una striscia sottile sul bordo superiore della
   dock. `flex: none` + margine negativo la fanno stare A CAVALLO del bordo, così
   il bersaglio è comodo (6 px) senza rubare altezza al contenuto.             */
.maps-dock__resizer { flex: none; height: 6px; margin-bottom: -6px; z-index: 2; cursor: ns-resize; background: transparent; transition: background .14s ease; }
.maps-dock__resizer:hover, .maps-dock__resizer:focus-visible { background: color-mix(in srgb, var(--gs-navy) 35%, transparent); outline: none; }
.maps-dock.is-resizing .maps-dock__resizer { background: var(--gs-navy); }
/* Durante il trascinamento la transizione sull'altezza farebbe inseguire il
   mouse con 180 ms di ritardo: la dock arriverebbe sempre dove il puntatore
   non è più. Si spegne per la durata del gesto. */
.maps-dock.is-resizing { transition: none; }
.maps-dock.is-collapsed .maps-dock__resizer { pointer-events: none; }

.maps-dock__body { flex: 1; min-height: 0; position: relative; }
.maps-dock__pane { display: none; position: absolute; inset: 0; overflow: auto; }
.maps-dock__pane.is-active { display: block; }
.maps-dock__pane#elevationChartData.is-active { padding: 0; overflow: hidden; }

/* ── Pannello laterale destro: la tabella delle coordinate ── */
/* La larghezza scelta trascinando sta in `--maps-side-w`, per le stesse ragioni
   di `--maps-dock-h`: le classi (.is-collapsed) devono poter vincere. */
.maps-side { width: var(--maps-side-w, 460px); flex: none; display: flex; flex-direction: column; position: relative; min-width: 0; border-left: 1px solid var(--gs-border); background: var(--gs-bg-elev); transition: width .18s ease; }
.maps-side[hidden] { display: none; }
.maps-side.is-resizing { transition: none; }
.maps-side.is-collapsed { width: 38px; }
.maps-side.is-collapsed .maps-side__body, .maps-side.is-collapsed .maps-side__resizer, .maps-side.is-collapsed .maps-side__title span, .maps-side.is-collapsed .maps-dock__spacer, .maps-side.is-collapsed #mapsSideMove { display: none; }
.maps-side.is-collapsed .maps-side__head { flex-direction: column; height: auto; padding: 6px 0; gap: 8px; border-bottom: none; }
.maps-side.is-collapsed .maps-side__toggle i { transform: rotate(180deg); }

.maps-side__head { flex: none; display: flex; align-items: center; gap: 2px; height: 39px; padding: 0 6px 0 2px; border-bottom: 1px solid var(--gs-border); background: var(--gs-bg); }
.gs .maps-side__title { background: none; border: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; height: 100%; font-size: 12.5px; font-weight: 600; color: var(--gs-navy); cursor: pointer; white-space: nowrap; }
.maps-side__toggle i { display: inline-block; transition: transform .18s ease; }

/* Maniglia a cavallo del bordo sinistro, come quella della dock sul bordo superiore. */
.maps-side__resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; z-index: 2; cursor: ew-resize; background: transparent; transition: background .14s ease; }
.maps-side__resizer:hover, .maps-side__resizer:focus-visible { background: color-mix(in srgb, var(--gs-navy) 35%, transparent); outline: none; }
.maps-side.is-resizing .maps-side__resizer { background: var(--gs-navy); }

.maps-side__body { flex: 1; min-height: 0; position: relative; }
.maps-side__body .maps-dock__pane { display: block; }          /* qui il pannello e' sempre visibile */
/* In 460 px le sei colonne ci stanno solo compatte. */
.maps-side .maps-table { font-size: 12px; }
.maps-side .maps-table thead th { padding: 7px 7px; font-size: 10.5px; }
.maps-side .maps-table tbody td { padding: 0 7px; height: 30px; }
.gs .maps-side .maps-table .btn { padding: 2px 4px; }
.maps-dock__tab[hidden], .maps-dock__toggle[hidden] { display: none !important; }

/* ── Scheda "Profilo altimetrico" ── */
.maps-profile { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.maps-profile__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--gs-border); background: var(--gs-bg); }
.maps-profile__bar .maps-label { margin: 0; white-space: nowrap; }
.maps-profile__bar select { flex: 1 1 auto; min-width: 0; max-width: 420px; }
.maps-profile__bar .gs-btn { flex: none; }
.maps-profile__body { flex: 1; min-height: 0; position: relative; padding: 10px 14px; }

.maps-table { width: 100%; }
.maps-table thead th { position: sticky; top: 0; z-index: 1; background: var(--gs-bg); }
.maps-table td:nth-child(n+2):nth-child(-n+5) { font-family: var(--gs-font-mono, 'JetBrains Mono', monospace); font-variant-numeric: tabular-nums; text-align: right; }
.maps-table th:nth-child(n+2):nth-child(-n+5) { text-align: right; }
/* I bottoni di riga li genera il motore cartografico con le classi Bootstrap
   `btn btn-sm btn-outline-primary|danger`: si riveste quel markup invece di
   riscrivere updateGrid() nei due file del provider. */
.gs .maps-table .btn { background: none; border: none; padding: 2px 6px; color: var(--gs-text-tertiary); cursor: pointer; font-size: 12px; border-radius: 4px; line-height: 1; box-shadow: none; }
.gs .maps-table .btn:hover { background: var(--gs-bg-hover); color: var(--gs-text); }
.gs .maps-table .btn-outline-danger:hover { background: var(--gs-danger-soft, #fdecec); color: var(--gs-danger, #dc2626); }
.gs .maps-table .btn-outline-primary:hover { color: var(--gs-navy); }
.maps-table tbody tr { cursor: pointer; }
.maps-table tr.selected td { background: color-mix(in srgb, var(--gs-navy) 8%, transparent); }
.maps-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--gs-navy); font-weight: 600; }

.maps-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 140px; color: var(--gs-text-tertiary); font-size: 12.5px; }
.maps-empty i { font-size: 24px; opacity: .55; }
.maps-empty[hidden] { display: none; }

/* ── Overlay di caricamento ── */
.maps-loading { position: fixed; inset: 0; z-index: 1080; background: rgba(20,20,18,.35); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(1.5px); }
.maps-loading__box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 34px; background: var(--gs-bg-elev); border-radius: var(--gs-r-lg, 8px); box-shadow: 0 8px 28px rgba(20,20,18,.24); font-size: 13px; font-weight: 500; color: var(--gs-text); }
.maps-loading .spinner-border { width: 2rem; height: 2rem; color: var(--gs-navy); }

.mono { font-family: var(--gs-font-mono, 'JetBrains Mono', monospace); font-variant-numeric: tabular-nums; }

/* ── Adattamento a schermi stretti ── */
@media (max-width: 1100px) {
    .maps-search { min-width: 150px; }
}
@media (max-width: 900px) {
    .maps-sidebar { width: 200px; }
    .maps-search { display: none; }
}

/* ── Vista 3D della superficie TIN ─────────────────────────────────────────
   Il canvas deve avere un'altezza VERA in CSS: WebGL non ha una dimensione
   propria e un contenitore in flusso naturale collasserebbe a zero, che è
   indistinguibile dal pannello nascosto.                                    */
.maps-tin {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.maps-tin__bar {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--ds-border, #e3e8ee);
    font-size: .82rem;
}

.maps-tin__ctrl {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    white-space: nowrap;
}

.maps-tin__ctrl input[type="range"] { width: 120px; }

.maps-tin__ctrl output {
    min-width: 3.2em;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.maps-tin__spacer { flex: 1 1 auto; }

.maps-tin__stat { white-space: nowrap; color: var(--ds-text-muted, #6b7785); }
.maps-tin__stat b { color: var(--ds-text, #22303c); font-variant-numeric: tabular-nums; }

.maps-tin__canvas {
    flex: 1 1 auto;
    /* Nessun min-height: il pannello e' in overflow:auto dentro una dock di
       altezza fissa, quindi un minimo piu' alto della dock produrrebbe solo una
       barra di scorrimento. Il canvas si adatta, ed e' la DOCK ad alzarsi
       (.is-tall) quando questa scheda e' attiva. */
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.maps-tin__canvas canvas { display: block; }

.maps-tin__status {
    padding: .4rem .75rem;
    font-size: .82rem;
    color: var(--ds-text-muted, #6b7785);
    min-height: 1.6rem;
}

.maps-tin__status.is-error { color: var(--ds-danger, #c0392b); }

/* ── Fumetto sopra un punto della mappa ────────────────────────────────────
   Il markup (mesh-tooltip*) e' generato a runtime dal motore e usa Font
   Awesome, non Bootstrap Icons. Finora non aveva CSS del tutto: cadeva sui
   default del browser, con l'icona grande quanto il testo, le righe una sotto
   l'altra e il pulsante di chiusura come un bottone di sistema.             */

/* Google impagina l'InfoWindow con una sua cornice: la si azzera, altrimenti
   il fumetto eredita padding e raggio suoi e il nostro riquadro balla dentro. */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: var(--gs-r-lg, 12px);
    box-shadow: var(--gs-shadow-popover, 0 8px 28px rgba(16, 24, 40, .16));
    max-width: 290px !important;
}

.gm-style .gm-style-iw-d {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
}

/* La X nativa di Google: c'e' gia' e funziona davvero (chiude l'InfoWindow,
   non ne nasconde il contenitore). Si rimpicciolisce e si sposta nell'angolo. */
.gm-style .gm-style-iw-chr { height: 0; }

.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
    opacity: .5;
    border-radius: 6px;
}

.gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover { opacity: 1; background: var(--gs-bg-hover, #eef1f5); }
.gm-style .gm-style-iw-c button.gm-ui-hover-effect > span { width: 16px !important; height: 16px !important; margin: 0 !important; }

.mesh-tooltip {
    font-family: inherit;
    padding: 12px 14px 12px;
    min-width: 208px;
}

.mesh-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 26px;          /* lascia posto alla X */
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gs-border-subtle, #eceff3);
}

.mesh-tooltip-icon {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--gs-bg-sunken, #f1f4f8);
    color: var(--gs-accent, #2f6feb);
    font-size: 12px;
}

.mesh-tooltip-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
}

.mesh-tooltip-body { display: flex; flex-direction: column; gap: 5px; }

/* Etichetta e valore sulla STESSA riga, con il valore allineato a destra: e'
   la forma in cui si leggono delle misure, e permette di confrontarle a colpo
   d'occhio fra un punto e l'altro. */
.mesh-tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
}

.mesh-tooltip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gs-text-secondary, #6b7785);
    white-space: nowrap;
}

.mesh-tooltip-label i { font-size: 11px; opacity: .7; width: 12px; text-align: center; }

.mesh-tooltip-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── Edizione geoapp: badge abbonamento in toolbar ── */
.maps-abb { gap: .4rem; }
.maps-abb.is-abbonato { color: #166534; border-color: #86efac; background: #f0fdf4; }
.maps-abb.is-abbonato .bi { color: #16a34a; }