/* report.css — Report Censimento (pagina pubblica, autonomo, no dipendenze) */

:root {
  --rp-green-primary: #4CAF50;
  --rp-green-dark: #2E7D32;
  --rp-green-light: #E8F5E9;

  --rp-amber: #d97706;
  --rp-amber-light: #fffbe3;
  --rp-red: #dc2626;
  --rp-red-light: #fef2f2;
  --rp-blue: #0284c7;
  --rp-blue-light: #f0f9ff;

  --rp-bg-white: #FFFFFF;
  --rp-bg-alt: #F7F8F6;
  --rp-bg-dark: #2C2C2C;

  --rp-text-primary: #1A1A1A;
  --rp-text-secondary: #4A5568;
  --rp-text-muted: #718096;

  --rp-border: #E5E7EB;
  --rp-radius: 12px;
  --rp-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.rp-main { background: var(--rp-bg-white); }

/* ===== HERO ===== */
.rp-hero { padding: 3.5rem 2rem 2rem; }
.rp-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }

.rp-pill {
  display: inline-flex;
  padding: 0.375rem 1rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--rp-green-light);
  color: var(--rp-green-dark);
}

.rp-title {
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 1.25rem;
  color: var(--rp-text-primary);
}

.rp-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--rp-text-secondary);
  margin-top: 1rem;
}

/* ===== UPLOAD ===== */
.rp-upload-section { padding: 0 2rem 3rem; }
.rp-upload-inner { max-width: 640px; margin: 0 auto; }

.rp-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  border: 1.5px dashed var(--rp-border);
  border-radius: var(--rp-radius);
  background: var(--rp-bg-alt);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  text-align: center;
}

.rp-drop:hover, .rp-drop.rp-drop--over {
  border-color: var(--rp-green-primary);
  background: var(--rp-green-light);
}

.rp-drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.rp-drop-icon {
  width: 34px; height: 34px;
  color: var(--rp-text-muted);
  flex-shrink: 0;
}

.rp-drop-label { font-weight: 600; color: var(--rp-text-primary); }
.rp-drop-hint { font-size: 13px; color: var(--rp-text-muted); }

.rp-status {
  margin-top: 0.75rem;
  font-size: 14px;
  text-align: center;
  min-height: 1.2em;
}
.rp-status--error { color: var(--rp-red); }
.rp-status--ok { color: var(--rp-green-dark); }

/* ===== BUTTONS (stile coerente con btn-outline del resto del sito) ===== */
.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--rp-text-primary);
  background: transparent;
  color: var(--rp-text-primary);
  transition: all 0.2s ease;
  text-decoration: none;
  font-family: inherit;
}
.rp-btn:hover { background: var(--rp-text-primary); color: #fff; }

.rp-btn-primary { background: var(--rp-text-primary); color: #fff; }
.rp-btn-primary:hover { background: #000; }

.rp-btn-ghost { border-color: var(--rp-border); color: var(--rp-text-secondary); padding: 0.5rem 1rem; }
.rp-btn-ghost:hover { background: var(--rp-bg-alt); color: var(--rp-text-primary); }

.rp-btn-dark { background: var(--rp-text-primary); color: #fff; width: 100%; justify-content: center; }
.rp-btn-dark:hover { background: #000; }

/* ===== TOPBAR (sito, file, filtri, export + tab) — un'unica riga compatta ===== */
.rp-topbar {
  position: relative; z-index: 1; /* stesso motivo di .rp-map-wrap: isola il popover filtri (fixed su mobile) */
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.6rem 1.25rem; padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--rp-border);
}
.rp-topbar-left { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.rp-topbar-identity { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.rp-topbar-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.rp-topbar-right { flex-shrink: 0; }

.rp-toolbar-site { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--rp-green-dark); font-size: 14px; }
.rp-toolbar-sep { color: var(--rp-border); }
.rp-toolbar-file { font-size: 13px; color: var(--rp-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rp-toolbar-file .rp-muted { font-style: normal; margin-left: 0.3rem; }
.rp-toolbar-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--rp-text-secondary);
  padding: 0.3rem 0.2rem; border-radius: 6px; white-space: nowrap;
}
.rp-toolbar-link .rp-btn-label { text-decoration: underline; text-underline-offset: 2px; }
.rp-toolbar-link:hover { color: var(--rp-green-dark); }

.rp-icon-sm { width: 14px; height: 14px; }

/* Filtri / Genera PDF — sempre solo icona (con tooltip via title), quadrati e compatti */
.rp-btn-compact {
  position: relative;
  width: 34px; height: 34px; padding: 0; justify-content: center;
}
.rp-btn-compact .rp-btn-label { display: none; }

.rp-filter-dropdown { position: relative; }
.rp-filter-count {
  position: absolute; top: -4px; right: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: var(--rp-green-dark); color: #fff; font-size: 10px; font-weight: 800;
  border: 2px solid #fff;
}
.rp-filter-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  background: #fff; border-radius: var(--rp-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  border: 1px solid var(--rp-border); padding: 1rem; width: 280px;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.rp-filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.rp-filter-group label { font-size: 12px; color: var(--rp-text-muted); font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 0.35rem; }
.rp-filter-group input, .rp-filter-group select {
  background: var(--rp-bg-alt);
  border: 1px solid var(--rp-border);
  color: var(--rp-text-primary);
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

/* ===== DASHBOARD ===== */
.rp-dashboard { padding: 0 1.5rem 4rem; }
.rp-dashboard-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

/* La tab Mappa fa eccezione: deve toccare la topbar senza il gap standard
   (nel resto delle tab il gap dà respiro al contenuto, qui invece vogliamo
   la mappa "a filo", come una vera pagina mappa a se stante). */
#rpTabMappa { margin-top: -1.5rem; }

.rp-tab-panel { display: flex; flex-direction: column; gap: 2.25rem; min-width: 0; }
.rp-data-section { display: flex; flex-direction: column; gap: 1rem; }
.rp-section-label {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--rp-text-muted); margin: 0; padding-left: 0.15rem;
}

.rp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.rp-kpi-card {
  background: var(--rp-bg-white);
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex; align-items: center; gap: 1.1rem;
  box-shadow: var(--rp-shadow);
}
.rp-kpi-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rp-green-light); color: var(--rp-green-dark); flex-shrink: 0;
}
.rp-kpi-icon i { width: 24px; height: 24px; }
.rp-kpi-card.rp-kpi-danger .rp-kpi-icon { background: var(--rp-red-light); color: var(--rp-red); }
.rp-kpi-card.rp-kpi-blue .rp-kpi-icon { background: var(--rp-blue-light); color: var(--rp-blue); }
.rp-kpi-card.rp-kpi-amber .rp-kpi-icon { background: var(--rp-amber-light); color: var(--rp-amber); }
.rp-kpi-card h4 { font-size: 12px; color: var(--rp-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.rp-kpi-value { font-size: 1.55rem; font-weight: 800; margin-top: 0.3rem; color: var(--rp-text-primary); line-height: 1.1; }
.rp-icon-xs { width: 11px; height: 11px; flex-shrink: 0; }
.rp-kpi-subtag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
  margin-top: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: none; font-family: inherit; cursor: default;
}
.rp-kpi-subtag--ok { background: var(--rp-green-light); color: var(--rp-green-dark); }
.rp-kpi-subtag--warn { background: var(--rp-amber-light); color: var(--rp-amber); }
.rp-kpi-subtag--clickable { cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease; }
.rp-kpi-subtag--clickable:hover { filter: brightness(0.95); }
.rp-kpi-subtag--clickable:active { transform: scale(0.97); }
.rp-kpi-subtag--clickable .rp-icon-xs:last-child { opacity: 0.6; }

/* ===== TAB (Dati / Mappa / Elenco) — dentro la topbar, a destra ===== */
.rp-tabs { display: inline-flex; gap: 4px; background: var(--rp-bg-alt); border-radius: 999px; padding: 4px; }
.rp-tab-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--rp-text-secondary);
  padding: 0.55rem 1.1rem; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease;
}
.rp-tab-btn i { width: 16px; height: 16px; }
.rp-tab-btn:hover { color: var(--rp-text-primary); }
.rp-tab-btn--active { background: #fff; color: var(--rp-green-dark); box-shadow: var(--rp-shadow); }
.rp-tab-panel[hidden] { display: none; }
.rp-tab-btn[hidden] { display: none; }
.rp-data-section[hidden], .rp-chart-card[hidden] { display: none; }

@media (max-width: 900px) {
  .rp-topbar-left { width: 100%; }
  .rp-topbar-right { width: 100%; }
  .rp-tabs { width: 100%; }
  .rp-tab-btn { flex: 1; justify-content: center; }
}

/* ===== MAPPA (tab dedicata, a piena larghezza fino ai bordi dello schermo) =====
   Altezza di default: calcolata via JS (updateMapWrapHeight in report.js) in modo
   che il fondo della mappa combaci col fondo della viewport, senza vedere il
   footer sotto. Il valore qui e' solo un fallback prima che il JS giri. */
/* "100vw" include lo spessore della scrollbar verticale della pagina, quindi
   risulta un filo piu' largo della finestra reale: senza overflow-x:hidden
   compare uno scroll orizzontale fantasma di pochi pixel che, su molti
   browser, fa comparire anche uno scroll verticale in coda (la scrollbar
   orizzontale occupa spazio in basso). Scoped qui: non tocca il resto del sito. */
html, body { overflow-x: hidden; }

.rp-map-wrap {
  position: relative;
  /* Fondamentale: senza uno z-index esplicito qui, "position:relative" NON crea
     un contesto di stacking isolato — i pannelli/controlli interni di Leaflet
     (che usano z-index nativi fino a ~1000) finiscono a competere direttamente
     con TUTTA la pagina, menu del sito incluso. Con questo, tutto cio' che sta
     dentro la mappa (Leaflet e i nostri controlli) resta contenuto qui: verso
     l'esterno la mappa espone un solo valore (1), verso l'interno possiamo
     usare tranquillamente z-index alti senza che trapelino sul resto del sito. */
  z-index: 1;
  width: 100vw; 
  left: 50%; 
  right: 50%; 
  margin-left: -50vw; 
  margin-right: -50vw;
  /* Lasciamo che sia JavaScript a gestire l'altezza dinamica esatta, 
     usando min-height e max-height come barriere di sicurezza */
  min-height: 400px;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  border-top: 1px solid var(--rp-border); 
  border-bottom: 1px solid var(--rp-border);
}

/* Modalita' "espandi": vero schermo intero, sopra a tutto (header/toolbar/tab
   compresi), non piu' un semplice ingrandimento della sezione. Attivata/disattivata
   da report.js insieme alla classe body.rp-fs-map (vedi sotto). */
.rp-map-wrap.rp-map-fullscreen {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  left: 0; right: 0; margin: 0; z-index: 4000;
  border: none;
  /* Il max-height di sicurezza della modalita' normale (calc(100vh - 100px))
     resta attivo anche qui se non lo si annulla esplicitamente, e "taglia"
     la mappa 100px prima del bordo vero dello schermo — da qui la striscia
     bianca in fondo quando si va a schermo intero. */
  max-height: none; min-height: 0;
}

/* In modalita' schermo intero nascondiamo tutto cio' che non e' la mappa.
   ATTENZIONE: "body > header" / "body > footer" sono un'ipotesi ragionevole
   basata sulla struttura di report.html (i partial header.html/footer.html
   vengono inclusi come primo/ultimo elemento del body). Se il markup reale
   del sito usa altri tag/classi, va corretto qui. */
body.rp-fs-map > header,
body.rp-fs-map > footer,
body.rp-fs-map .rp-topbar,
body.rp-fs-map .rp-bottom-nav,
body.rp-fs-map .rp-fab {
  display: none !important;
}
body.rp-fs-map { overflow: hidden; } /* niente scroll di pagina dietro la mappa a schermo intero */

/* report.css */
body.rp-tab-mappa > footer,
body.rp-tab-mappa {
  overflow: hidden;
}

#rpMap { width: 100%; height: 100%; }

/* Angoli dedicati, uno per elemento, per non farli mai sovrapporre:
   ricerca in alto a sinistra, satellite/stradale (controllo Leaflet) in alto
   a destra, zoom +/- (controllo Leaflet) in basso a sinistra, espandi in basso
   a destra. */
/* ---- Ricerca sulla mappa: trigger + overlay fullscreen ---- */
.rp-map-search-trigger {
  position: absolute; top: 14px; left: 14px; z-index: 1000;
  width: 40px; height: 40px; border: none; border-radius: 10px; cursor: pointer;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; color: var(--rp-text-primary);
}
.rp-map-search-trigger:hover { background: var(--rp-bg-alt); }

.rp-map-search-overlay {
  position: absolute; inset: 0; z-index: 1100; pointer-events: none;
}
.rp-map-search-overlay--open { pointer-events: all; }

.rp-map-search-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.2s ease;
}
.rp-map-search-overlay--open .rp-map-search-backdrop { opacity: 1; }

.rp-map-search-box {
  position: absolute; top: 14px; left: 14px; right: 14px; max-width: 420px; z-index: 1;
  transform: translateY(-8px); opacity: 0;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.rp-map-search-overlay--open .rp-map-search-box { transform: translateY(0); opacity: 1; }

.rp-map-search-input-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  padding: 0.55rem 1rem;
}
.rp-map-search-input-wrap .rp-icon-sm { color: var(--rp-text-muted); flex-shrink: 0; }
.rp-map-search-input-wrap input {
  border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 13.5px; width: 100%; color: var(--rp-text-primary);
}
.rp-map-search-clear {
  width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--rp-bg-alt); color: var(--rp-text-muted); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rp-map-search-clear i { width: 12px; height: 12px; }
.rp-map-search-clear:hover { background: var(--rp-border); }

.rp-map-search-results {
  margin-top: 0.5rem;
  background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  max-height: 280px; overflow-y: auto; padding: 0.4rem;
}
.rp-map-search-result {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer;
}
.rp-map-search-result:hover { background: var(--rp-bg-alt); }
.rp-map-search-result strong { font-size: 13px; color: var(--rp-text-primary); }
.rp-map-search-result span { font-size: 11.5px; color: var(--rp-text-muted); }
.rp-map-search-empty { padding: 0.6rem; font-size: 12.5px; color: var(--rp-text-muted); text-align: center; }

.rp-map-expand-btn {
  position: absolute; bottom: 14px; right: 14px; top: auto; z-index: 1000;
  width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; color: var(--rp-text-primary);
}
.rp-map-expand-btn:hover { background: var(--rp-bg-alt); }

/* ---- Pannello mappa consolidato (solo mobile): vedi media query sotto per
   come sostituisce ricerca + toggle satellite/stradale sparsi ---- */
.rp-map-panel-trigger {
  display: none;
  position: absolute; top: 14px; left: 14px; z-index: 1000;
  width: 40px; height: 40px; border: none; border-radius: 10px; cursor: pointer;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  align-items: center; justify-content: center; color: var(--rp-text-primary);
}
.rp-map-panel-trigger i { width: 18px; height: 18px; }

.rp-map-panel-basemap-row { padding: 0.9rem 0.2rem 0.2rem; }
.rp-map-panel-basemap-label { display: block; font-size: 12px; font-weight: 700; color: var(--rp-text-muted); text-transform: uppercase; margin-bottom: 0.5rem; }
.rp-map-panel-basemap-toggle { display: flex; gap: 0.5rem; }
.rp-map-panel-basemap-btn {
  flex: 1; padding: 0.65rem; border-radius: 10px; border: 1px solid var(--rp-border);
  background: #fff; color: var(--rp-text-secondary); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.rp-map-panel-basemap-btn--active { background: var(--rp-text-primary); border-color: var(--rp-text-primary); color: #fff; }

/* ---- Toast: nome sito/file completo al tap, quando troncati in topbar ---- */
.rp-toolbar-textbtn { border: none; background: none; font-family: inherit; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.rp-toast {
  position: fixed; left: 50%; top: 66px; z-index: 700;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%) translateY(-6px);
  background: var(--rp-text-primary); color: #fff;
  padding: 0.6rem 0.9rem; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none; word-break: break-word;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.rp-toast--open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== DRAWER DETTAGLIO ALBERO (overlay fisso, indipendente dalle tab) ===== */
.rp-drawer-wrap {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 94vw;
  height: 100dvh; /* invece di top:0+bottom:0: 100dvh resta corretta anche con
                     barre mobile dinamiche e non dipende dal bottom dell'antenato */
  z-index: 5000; /* sopra alla mappa a schermo intero (4000) e a qualunque header/footer */
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s ease;
  padding: 1rem;
}
.rp-drawer-wrap.rp-drawer-open { transform: translateX(0); visibility: visible; }
.rp-drawer-close {
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center;
}
.rp-drawer-close:hover { background: rgba(0,0,0,0.75); }
.rp-drawer-close i { width: 17px; height: 17px; }

.rp-detail-panel {
  background: var(--rp-bg-white);
  border-radius: 16px;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  overflow-y: auto; height: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.rp-muted { font-size: 13px; color: var(--rp-text-muted); font-style: italic; }

/* ---- Hero foto con overlay nome/specie/badge ---- */
.rp-detail-hero {
  position: relative; width: 100%; height: 260px; flex-shrink: 0;
  border-radius: 14px; overflow: hidden; background: var(--rp-bg-alt);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.rp-detail-hero-img { position: absolute; inset: 0; cursor: pointer; }
.rp-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-photo-empty { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; color: var(--rp-text-muted); }
.rp-photo-empty i { width: 32px; height: 32px; }
.rp-detail-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
  padding: 2.2rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.rp-detail-hero-overlay h3 { font-size: 1.15rem; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.rp-detail-hero-specie { font-size: 12.5px; color: rgba(255,255,255,0.85); font-style: italic; }
.rp-detail-hero-overlay .rp-badge-vta { pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

/* ---- Navigazione ---- */
.rp-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.rp-nav-pillgroup {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--rp-bg-alt); border-radius: 999px; padding: 3px;
}
.rp-nav-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  width: 30px; height: 30px; justify-content: center;
  border: none; background: transparent;
  border-radius: 999px; cursor: pointer; color: var(--rp-text-primary);
  transition: background 0.15s ease;
}
.rp-nav-btn:hover { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.rp-nav-counter { font-size: 12px; color: var(--rp-text-muted); font-weight: 700; min-width: 60px; text-align: center; }
.rp-nav-btn--focus {
  width: auto; padding: 0 0.9rem; height: 34px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--rp-border); border-radius: 999px; background: #fff; color: var(--rp-text-secondary);
}
.rp-nav-btn--focus:hover { background: var(--rp-green-light); border-color: var(--rp-green-dark); color: var(--rp-green-dark); }

.rp-map-toggle { display: flex; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.rp-map-toggle-btn {
  border: none; background: #fff; color: var(--rp-text-secondary);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.5rem 0.8rem; cursor: pointer;
}
.rp-map-toggle-btn--active { background: var(--rp-text-primary); color: #fff; }

/* ---- Popup mini-card sul marker (click su albero -> "Apri scheda") ---- */
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0 !important; width: 240px !important; }
.leaflet-popup-tip { box-shadow: 0 3px 10px rgba(0,0,0,0.15); }

.rp-popup { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.rp-popup-identity { display: flex; align-items: center; gap: 0.65rem; }
.rp-popup-tagbox {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px;
  background: var(--rp-green-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; font-family: monospace;
}
.rp-popup-identity-text { flex: 1; min-width: 0; }
.rp-popup-title {
  font-size: 0.88rem; font-weight: 700; color: var(--rp-text-primary);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-popup-specie { font-size: 0.72rem; color: var(--rp-text-muted); margin-top: 0.1rem; font-style: italic; }
.rp-popup-badge { flex-shrink: 0; padding: 0.15rem 0.45rem; font-size: 10px; }

.rp-popup-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; padding: 0.55rem 0.75rem; border: none; border-radius: 9px;
  background: var(--rp-green-dark); color: #fff; font-family: inherit;
  font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease;
}
.rp-popup-btn i { width: 14px; height: 14px; }
.rp-popup-btn:hover { background: var(--rp-green-primary); }

.rp-badge-vta { padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: 700; font-size: 12px; text-transform: uppercase; }
.rp-badge-d { background: var(--rp-red-light); color: var(--rp-red); border: 1px solid var(--rp-red); }
.rp-badge-cd { background: var(--rp-amber-light); color: var(--rp-amber); border: 1px solid var(--rp-amber); }
.rp-badge-safe { background: var(--rp-green-light); color: var(--rp-green-dark); border: 1px solid var(--rp-green-dark); }

/* ---- Chip informative compatte ---- */
.rp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; min-width: 0; }
.rp-info-chip {
  background: var(--rp-bg-alt); border-radius: 10px; padding: 0.55rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.rp-info-chip--wide { grid-column: 1 / -1; }
.rp-info-chip-lbl { font-size: 10.5px; color: var(--rp-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.rp-info-chip span:last-child { font-size: 13.5px; font-weight: 700; color: var(--rp-text-primary); }

/* ---- Card valore ornamentale / ecosistemico ---- */
.rp-eco-box {
  background: #fff; border: 1px solid var(--rp-border); border-left: 4px solid var(--rp-green-primary);
  border-radius: 12px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.4rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rp-eco-box--eco { border-left-color: var(--rp-amber); }
.rp-eco-box-head { display: flex; align-items: center; gap: 0.7rem; }
.rp-eco-box-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rp-green-light); color: var(--rp-green-dark);
}
.rp-eco-box--eco .rp-eco-box-icon { background: var(--rp-amber-light); color: var(--rp-amber); }
.rp-eco-box-icon i { width: 17px; height: 17px; }
.rp-eco-box-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rp-eco-box-title h4 { font-size: 13.5px; font-weight: 800; color: var(--rp-text-primary); }
.rp-eco-val-big { font-size: 1.25rem; font-weight: 800; color: var(--rp-green-dark); white-space: nowrap; }
.rp-eco-box--eco .rp-eco-val-big { color: var(--rp-amber); }

.rp-tag-ufficiale, .rp-tag-stima {
  display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.55rem;
}
.rp-tag-ufficiale { background: var(--rp-green-light); color: var(--rp-green-dark); }
.rp-tag-stima { background: var(--rp-amber-light); color: var(--rp-amber); }

.rp-calc-details { font-size: 13px; }
.rp-calc-details summary { cursor: pointer; font-weight: 700; color: var(--rp-text-secondary); padding: 0.3rem 0; }
.rp-calc-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rp-bg-alt); }
.rp-calc-row span:first-child { color: var(--rp-text-muted); }
.rp-calc-row span:last-child { font-weight: 700; text-align: right; }
.rp-calc-warning { color: var(--rp-amber); font-size: 12.5px; }
.rp-calc-notes { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 11.5px; color: var(--rp-text-muted); line-height: 1.5; }
.rp-calc-notes li { margin-bottom: 0.3rem; }

/* ===== MODALE PDF ===== */
.rp-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.rp-modal {
  background: #fff; border-radius: var(--rp-radius); max-width: 540px; width: 100%;
  padding: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-height: 85vh; overflow-y: auto;
}
.rp-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.rp-modal-head h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; color: var(--rp-text-primary); }
.rp-modal-close { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--rp-text-muted); }
.rp-modal p { font-size: 14px; color: var(--rp-text-secondary); line-height: 1.6; margin: 0.5rem 0; }
.rp-modal-list { margin: 0.3rem 0 0.7rem; padding-left: 1.2rem; font-size: 13.5px; color: var(--rp-text-primary); }
.rp-modal-list li { margin-bottom: 0.3rem; }
.rp-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.rp-modal-error { font-size: 13px; color: var(--rp-red); background: var(--rp-red-light); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0; }
.rp-info-formula {
  font-family: "Courier New", monospace; font-size: 15px; font-weight: 700; text-align: center;
  background: var(--rp-bg-alt); border-radius: 8px; padding: 0.7rem; margin: 0.7rem 0; color: var(--rp-text-primary);
}
.rp-info-deflist { margin: 0.5rem 0; padding-left: 1.1rem; font-size: 13px; color: var(--rp-text-secondary); line-height: 1.7; }
.rp-info-deflist li { margin-bottom: 0.15rem; }
.rp-info-deflist strong { color: var(--rp-text-primary); }

.rp-info-list { display: flex; flex-direction: column; gap: 0.1rem; }
.rp-info-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rp-bg-alt); padding: 0.5rem 0; font-size: 13.5px; }
.rp-info-row span:first-child { color: var(--rp-text-muted); font-weight: 500; }
.rp-info-row span:last-child { font-weight: 700; text-align: right; color: var(--rp-text-primary); }

.rp-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; min-width: 0; }
@media (max-width: 768px) { .rp-analytics-grid { grid-template-columns: 1fr; } }
/* Come per la tabella: un elemento di grid non si restringe mai sotto la
   larghezza "naturale" del suo contenuto (qui il canvas di Chart.js) a meno
   di min-width:0 — altrimenti il grafico sfora il bordo destro dello schermo
   su mobile invece di adattarsi. */
.rp-chart-card { background: var(--rp-bg-white); border: 1px solid var(--rp-border); border-radius: 14px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--rp-shadow); min-width: 0; }
.rp-chart-card h3 { font-size: 13px; color: var(--rp-text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; }
.rp-chart-wrap { height: 250px; min-width: 0; position: relative; }
.rp-chart-wrap canvas { max-width: 100%; }

.rp-table-card { background: var(--rp-bg-white); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 1.1rem; box-shadow: var(--rp-shadow); min-width: 0; }
.rp-table-card h3 { font-size: 13px; color: var(--rp-text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }

/* ---- Header della card Elenco rilievi: titolo + ricerca rapida + filtri ----
   La ricerca qui e i filtri riusano esattamente lo stesso stato globale del
   popover Filtri (rpSearchTag ecc.) — non e' una ricerca separata, e' solo
   un accesso piu' comodo alla stessa funzione, visibile anche su desktop. */
.rp-table-card-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.6rem; margin-bottom: 0.9rem;
}
.rp-table-card-head h3 { margin-bottom: 0; }
.rp-table-card-tools { display: flex; align-items: center; gap: 0.5rem; }
.rp-table-search {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--rp-bg-alt); border: 1px solid var(--rp-border); border-radius: 999px;
  padding: 0.45rem 0.9rem; min-width: 200px;
}
.rp-table-search .rp-icon-sm { color: var(--rp-text-muted); flex-shrink: 0; }
.rp-table-search input {
  border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 13.5px; width: 100%; color: var(--rp-text-primary);
}
.rp-table-card-tools .rp-filter-dropdown,
.rp-table-card-tools #rpTableFilterBtn { position: relative; }
.rp-table-wrap { overflow-x: auto; max-height: 380px; }
.rp-table-card table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.rp-table-card th { background: var(--rp-green-light); color: var(--rp-green-dark); padding: 0.7rem; font-weight: 700; position: sticky; top: 0; border-bottom: 2px solid var(--rp-border); }
.rp-table-card td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--rp-border); color: var(--rp-text-primary); }
.rp-tcell-label { display: none; } /* mostrata solo nella vista a scheda su mobile, vedi media query sotto */
.rp-table-card tr:hover { background: var(--rp-bg-alt); cursor: pointer; }

/* ===== BOTTOM NAV + FAB — sostituiscono tab/azioni in alto SOLO su mobile.
   Nascosti di default (desktop/tablet): li mostriamo dentro il breakpoint
   640px qui sotto, insieme allo spegnimento della topbar equivalente. ===== */

/* Stesso motivo di .rp-map-wrap: senza un proprio z-index questo contenitore
   NON isola un contesto di stacking, e i suoi figli "fixed" (bottom nav, FAB,
   sheet, toast) finirebbero a competere direttamente con tutta la pagina —
   compreso il menu del sito. Con questo, verso l'esterno espone un solo
   valore (1); dentro possiamo usare gli z-index che servono in sicurezza. */
.rp-mobile-chrome { position: relative; z-index: 1; }

.rp-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: #fff; border-top: 1px solid var(--rp-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  gap: 0.4rem;
}
.rp-bottom-nav-btn {
  flex: 1; flex-direction: column; gap: 0.2rem;
  padding: 0.5rem 0.4rem; border-radius: 12px;
}
.rp-bottom-nav-btn i { width: 20px; height: 20px; }
.rp-bottom-nav-btn.rp-tab-btn--active { background: var(--rp-green-light); box-shadow: none; }

.rp-fab {
  display: none;
  position: fixed; right: 16px; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 500;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--rp-green-dark); color: #fff;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.rp-fab i { width: 22px; height: 22px; }

.rp-fab-sheet-overlay {
  position: fixed; inset: 0; z-index: 600; display: none;
}
.rp-fab-sheet-overlay--open { display: block; }
.rp-fab-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.rp-fab-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 0.6rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
  max-height: 80vh; overflow-y: auto;
}
.rp-fab-sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--rp-border); margin: 0.3rem auto 0.7rem; }
.rp-fab-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.6rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--rp-bg-alt);
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--rp-text-muted);
}
.rp-fab-sheet-close {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--rp-bg-alt);
  display: flex; align-items: center; justify-content: center; color: var(--rp-text-secondary); cursor: pointer;
}
.rp-fab-sheet-item {
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  padding: 0.8rem 0.2rem; border: none; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--rp-bg-alt); font-family: inherit;
}
.rp-fab-sheet-item:last-child { border-bottom: none; }
.rp-fab-sheet-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--rp-bg-alt); color: var(--rp-text-primary);
  display: flex; align-items: center; justify-content: center;
}
.rp-fab-sheet-icon i { width: 18px; height: 18px; }
.rp-fab-sheet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.rp-fab-sheet-text strong { font-size: 14.5px; color: var(--rp-text-primary); }
.rp-fab-sheet-text span { font-size: 12.5px; color: var(--rp-text-muted); }
.rp-fab-sheet-chevron { width: 16px; height: 16px; color: var(--rp-text-muted); flex-shrink: 0; }

@media (max-width: 640px) {
  .rp-title { font-size: 2rem; }
  .rp-hero { padding: 2.25rem 1.25rem 1.5rem; }
  .rp-upload-section, .rp-dashboard { padding-left: 1rem; padding-right: 1rem; }

  /* Meno "aria" verticale sopra la mappa: topbar ridotta alla sola identita'
     (sito + file), niente piu' bottone "Cambia file" li' — e' nel FAB. */
  .rp-topbar { padding: 0.55rem 0.15rem; gap: 0.5rem 0.6rem; }
  .rp-toolbar-file { max-width: 150px; }
  .rp-toolbar-file .rp-muted { display: none; }
  .rp-dashboard-inner { gap: 0.7rem; }
  #rpTabMappa { margin-top: -0.7rem; }

  /* Un nome sito molto lungo nel CSV non deve spingere la topbar fuori
     misura: qui va in ellissi come gia' avviene per il nome file. */
  .rp-toolbar-site { max-width: 150px; overflow: hidden; }
  .rp-toolbar-site span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Tab, Cambia file, Filtri e Genera PDF si spostano nella bottom nav e nel
     FAB (vedi sotto): sulla topbar restano solo sito e nome file. */
  /* Nascondiamo i bottoni singoli, non .rp-topbar-actions per intero: dentro
     quel contenitore vive anche #rpFilterPopover, che deve restare
     renderizzabile per poter comparire come bottom-sheet (vedi sotto) —
     un antenato display:none lo avrebbe bloccato a prescindere dal suo
     stesso position:fixed. */
  #rpChangeBtn, #rpFilterToggleBtn, #rpPdfExportBtn, .rp-topbar-right { display: none; }

  .rp-bottom-nav, .rp-fab { display: flex; }

  /* Spazio in fondo per non finire coperti dalla bottom nav fissa (56px circa
     + eventuale safe-area) quando si scrolla in fondo a Dati o Elenco rilievi.
     La tab Mappa non serve: la sua altezza e' gia' calcolata da JS tenendo
     conto della bottom nav (vedi updateMapWrapHeight). */
  #rpTabDati, #rpTabElenco { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Il popover Filtri e' ancorato al bottoncino icona: su schermi stretti,
     con la sua larghezza fissa di 280px, sfora facilmente fuori dal bordo
     sinistro dello schermo (e con overflow-x:hidden sulla pagina, quella
     parte sparisce tagliata, invece di restare scrollabile — di fatto
     inutilizzabile). Sotto i 640px diventa un bottom-sheet, stesso pattern
     gia' usato per il drawer di dettaglio: sempre visibile, sempre a fuoco. */
  .rp-filter-popover {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 600;
    width: 100%; max-height: 75vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; border: none;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
    padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }

  /* KPI e modali: meno padding, piu' contenuto utile a schermo su telefono. */
  .rp-kpi-card { padding: 1.1rem; gap: 0.85rem; }
  .rp-kpi-icon { width: 44px; height: 44px; }
  .rp-modal-overlay { padding: 0; align-items: flex-end; }
  .rp-modal { max-width: 100%; border-radius: 18px 18px 0 0; padding: 1.25rem; max-height: 88vh; }

  .rp-table-card-head { flex-direction: column; align-items: stretch; }
  .rp-table-card-tools { width: 100%; }
  .rp-table-search { flex: 1; min-width: 0; }

  /* ---- Elenco rilievi: tabella -> vere schede ----
     Su telefono lo scroll orizzontale di una tabella dati e' scomodo, e la
     prima versione "etichetta a sinistra, valore a destra" era leggibile ma
     bruttina (tutto ammassato a destra, un form invece di una scheda). Qui
     usiamo una griglia con aree nominate per ricomporre liberamente i dati
     — stesso ordine di celle nel DOM (serve per la tabella desktop, che non
     cambia), riordino solo visivo qui sotto. */
  .rp-table-wrap { max-height: none; overflow-x: visible; }
  .rp-table-card table, .rp-table-card tbody { display: block; width: 100%; }
  .rp-table-card thead { display: none; }

  .rp-table-card tr {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "title  title  badge"
      "specie specie specie"
      "area   area   area"
      "co2    valore pdf";
    align-items: center;
    column-gap: 0.6rem; row-gap: 0.5rem;
    border: 1px solid var(--rp-border); border-radius: 14px;
    padding: 1rem 1.1rem; margin-bottom: 0.75rem; box-shadow: var(--rp-shadow);
  }
  .rp-table-card tr:last-child { margin-bottom: 0; }
  .rp-table-card tr:hover { background: none; }
  .rp-table-card td { display: block; padding: 0; border: none; color: var(--rp-text-primary); }

  .rp-tcell-title { grid-area: title; font-size: 15.5px; font-weight: 800; align-self: center; }
  .rp-tcell-badge { grid-area: badge; justify-self: end; }
  .rp-tcell-specie { grid-area: specie; font-size: 13px; color: var(--rp-text-secondary); line-height: 1.4; padding-top: 0.1rem; border-top: 1px solid var(--rp-bg-alt); }
  .rp-tcell-area {
    grid-area: area; display: flex; align-items: center; gap: 0.3rem;
    font-size: 13px; color: var(--rp-text-secondary);
  }
  .rp-tcell-area i { color: var(--rp-text-muted); flex-shrink: 0; }

  .rp-tcell-co2, .rp-tcell-valore {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding-top: 0.6rem; border-top: 1px solid var(--rp-bg-alt); font-size: 13.5px;
  }
  .rp-tcell-valore { grid-area: valore; }
  .rp-tcell-co2 { grid-area: co2; }
  .rp-tcell-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rp-text-muted); }

  .rp-tcell-pdf {
    grid-area: pdf; align-self: end; justify-self: end;
    padding-top: 0.6rem; border-top: 1px solid var(--rp-bg-alt);
  }
  .rp-tcell-pdf a { display: flex; }
}

/* ===== MOBILE — drawer come bottom-sheet, controlli mappa ridimensionati =====
   Sotto i 768px il drawer di dettaglio non scorre piu' da destra (rischia di
   coprire tutto lo schermo su telefono) ma sale dal basso come una scheda,
   lasciando intravedere la mappa sopra: e' il pattern che funziona meglio su
   mobile per contenuti lunghi e scrollabili come la scheda albero. */
@media (max-width: 767px) {
  .rp-drawer-wrap {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%; height: 88vh;
    transform: translateY(100%);
    padding: 0;
  }
  .rp-drawer-wrap.rp-drawer-open { transform: translateY(0); }
  .rp-detail-panel { height: 100%; border-radius: 20px 20px 0 0; }
  .rp-drawer-close { top: 0.75rem; right: 0.75rem; }

  .rp-map-expand-btn { width: 38px; height: 38px; }

  /* Consolidiamo ricerca + cambio mappa in un solo pannello (icona "layers"):
     spariscono i due controlli sparsi originali... */
  .rp-map-search-trigger { display: none; }
  .rp-map-toggle { display: none; }
  /* ...e al loro posto, 4 angoli puliti senza sovrapposizioni:
     pannello mappa (alto sx) — zoom (alto dx, spazio liberato dal
     toggle satellite/stradale) — espandi (basso sx) — FAB globale (basso dx). */
  .rp-map-panel-trigger { display: flex; }
  .rp-map-wrap .leaflet-control-zoom { display: none; } /* pinch-to-zoom e' gia' naturale su touch */
  .rp-map-expand-btn { top: auto; bottom: 14px; left: 14px; right: auto; }

  .rp-map-search-box { left: 10px; right: 10px; max-width: none; }
}
/* ============================================================
   TAB AREE VERDI (tabella compatta) + drawer dettaglio + grafici
   ============================================================ */
.rp-area-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--rp-green-light); color: var(--rp-green-dark);
  display: flex; align-items: center; justify-content: center;
}
.rp-area-icon i { width: 22px; height: 22px; }
.rp-area-icon--lg { width: 52px; height: 52px; }
.rp-area-addr { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 12.5px; color: var(--rp-text-muted); margin-top: 0.25rem; }
.rp-area-addr i { margin-top: 2px; }
.rp-area-tipo {
  display: inline-block; margin-top: 0.5rem; font-size: 11px; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--rp-bg-alt); color: var(--rp-text-secondary); border: 1px solid var(--rp-border);
}
.rp-area-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.rp-area-stat { background: var(--rp-bg-alt); border-radius: 10px; padding: 0.65rem 0.8rem; min-width: 0; }
.rp-area-stat strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--rp-text-primary); line-height: 1.15; }
.rp-area-stat span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--rp-text-muted); }
.rp-area-stat--warn strong { color: var(--rp-amber); }
.rp-area-details { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; font-size: 13px; }
.rp-area-details > div { display: flex; justify-content: space-between; gap: 1rem; }
.rp-area-details dt { color: var(--rp-text-muted); flex-shrink: 0; }
.rp-area-details dd { margin: 0; text-align: right; color: var(--rp-text-primary); font-weight: 600; overflow-wrap: anywhere; }
.rp-area-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rp-area-flag {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 12px; font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--rp-bg-alt); color: var(--rp-text-muted);
}
.rp-area-flag--on { background: var(--rp-green-light); color: var(--rp-green-dark); }
.rp-area-flag i { width: 12px; height: 12px; }
.rp-area-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.rp-area-actions .rp-btn { padding: 0.55rem 1rem; font-size: 12px; flex: 1; justify-content: center; white-space: nowrap; }
.rp-popup-area-stats { font-size: 0.78rem; color: var(--rp-text-secondary); }

/* drawer area */
.rp-area-hero { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.25rem 2.6rem 0.25rem 0.25rem; }
.rp-area-hero h3 { font-size: 1.15rem; font-weight: 800; color: var(--rp-text-primary); line-height: 1.25; overflow-wrap: anywhere; }
.rp-area-block-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rp-text-muted); margin-bottom: 0.5rem; }
.rp-area-vta-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--rp-bg-alt); }
.rp-area-vta-bar span { height: 100%; }
.rp-area-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.6rem; font-size: 12px; color: var(--rp-text-secondary); }
.rp-area-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.rp-area-legend-item i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }