/* --- pagina Mappe: una o piu' immagini (mondo/citta'/quartiere) con pin
   cliccabili sopra, ognuno collegato a una scheda di Personaggi/Luoghi/
   Associazioni/Oggetti/Altro - canvas su Leaflet. Il dettaglio di un pin
   e' il pannello laterale <aside id="detail-panel"> (stesso di Timeline/
   Relazioni, base condivisa in theme.css) - un popup nativo di Leaflet
   resta usato solo per il modulo "+ Nuovo pin" (il punto appena
   cliccato, non ancora un marker vero) - vedi mappe.js. */

/* testata + contenuto in colonna, alta quanto la finestra - #map-root
   riempie da solo lo spazio che avanza (flex:1, vedi sotto) qualunque
   sia l'altezza vera della testata in quel momento (nav+barra di
   accesso possono andare a capo, la barra strumenti di mappe.js puo'
   crescere di una riga aggiungendo pulsanti) - PRIMA era un calc(100vh
   - 170px) a numero fisso: quel numero andava ritarato ogni volta che
   la testata/la barra strumenti cambiavano altezza, altrimenti il
   canvas risultava piu' piccolo/piu' grande del dovuto e lo zoom
   minimo calcolato di conseguenza (getBoundsZoom in renderMap, vedi
   mappe.js) cambiava con lui - bug reale, segnalato dal vivo ("prima
   faceva piu' zoom out") dopo aver aggiunto un pulsante in piu' alla
   barra strumenti. Stesso schema gia' usato per .sessioni-shell/
   .drawio-shell. */
.mappe-shell { display: flex; flex-direction: column; height: 100vh; }
#map-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 1rem 3rem 0;
}
#map-root > .loading, #map-root > .error {
  padding: 1rem 0;
  color: var(--text-dim);
  font-family: var(--font-ui);
}

.map-toolbar { flex: 0 0 auto; margin-bottom: 0.8rem; }
.map-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.map-toolbar-spacer { flex: 1 1 auto; }
.map-select-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.map-select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}
.map-none-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* "Sposta i pin" - bloccati di default, stessa scelta/stesso motivo del
   checkbox equivalente in Relazioni (capitava di spostarne uno per
   sbaglio solo cliccandoci sopra) */
.map-lock-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
}

/* compare solo quando c'e' almeno uno spostamento non ancora salvato
   (vedi pendingPositions/updateSaveBtnVisibility in mappe.js) - colore
   "pieno" apposta, per distinguerlo dai pulsanti "azione facoltativa"
   qui accanto (stessa idea di .rel-save-positions-btn in relazioni.css) */
.map-save-positions-btn {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.map-save-positions-btn:hover:not(:disabled) { filter: brightness(1.08); }
.map-save-positions-btn:disabled { opacity: 0.6; cursor: default; }

.map-add-pin-btn, .map-delete-btn, .map-pin-types-btn {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.map-add-pin-btn:hover { border-color: var(--accent); color: var(--accent); }
.map-add-pin-btn--active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.map-pin-types-btn:hover { border-color: var(--accent); color: var(--accent); }
.map-delete-btn:hover { border-color: var(--cat-morte); color: var(--cat-morte); }

.map-new-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.8rem;
}
.map-new-form.hidden { display: none; }
.map-new-form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.map-new-form-label input[type="text"] {
  display: block;
  margin-top: 0.3rem;
  width: 220px;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  box-sizing: border-box;
}
.map-new-form-label input[type="file"] {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.map-new-form-buttons { display: flex; align-items: center; gap: 0.6rem; }

/* pulsanti di conferma/annulla condivisi da tutti i moduli inline di
   questa pagina (+ Nuova mappa, +Nuovo pin, modifica di un pin) */
.map-save-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.map-save-btn:hover:not(:disabled) { background: var(--accent); }
.map-save-btn:disabled { opacity: 0.5; cursor: default; }
.map-cancel-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.map-cancel-btn:hover:not(:disabled) { border-color: var(--cat-morte); color: var(--cat-morte); }
.map-cancel-btn:disabled { opacity: 0.5; cursor: default; }

.map-add-pin-hint {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--accent);
  margin: 0.5rem 0 0;
}
.map-add-pin-hint.hidden { display: none; }

/* --- canvas: Leaflet (CRS.Simple - coordinate pixel dell'immagine, non
   geografiche) invece di SVG+d3.zoom scritto a mano, vedi mappe.js per il
   perche' - L.map() e' costruito DIRETTAMENTE su #map-canvas (diventa lui
   stesso ".leaflet-container", non un suo contenitore), quindi lo stile
   di base resta lo stesso di sempre. ----------------------------------- */
#map-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  outline: none;
}
/* modalita' "+ Aggiungi pin" attiva - il prossimo click sulla mappa
   piazza il pin li', il cursore lo anticipa - !important perche' Leaflet
   applica gia' un cursore proprio (grab/grabbing) con le sue classi */
#map-canvas.map-adding-pin, #map-canvas.map-adding-pin * { cursor: crosshair !important; }
#map-canvas > .loading, #map-canvas > .error {
  padding: 1rem;
  color: var(--text-dim);
  font-family: var(--font-ui);
}

/* segnaposto (L.divIcon, vedi buildPinIcon in mappe.js) - un glifo SVG
   vero invece di un'emoji, stesso spirito dell'occhio disegnato a mano
   in relazioni.js/registry-page.js */
.map-pin-icon { cursor: pointer; }
.map-pin-icon svg { display: block; overflow: visible; }
.map-pin-glyph {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 1.5px;
}
.map-pin-icon:hover .map-pin-glyph { filter: brightness(1.15); }
/* colore del pin scelto dal profilo (vedi PIN_COLORS/buildColorSelect in
   mappe.js) - "Predefinito" (nessuna di queste classi) resta il colore
   d'accento del tema, come prima. Riuso le stesse variabili --cat-* gia'
   definite (e gia' testate in chiaro/scuro) per le pillole di Affiliazioni/
   Relazioni, con nomi di colore semplici invece delle categorie narrative
   a cui servono li' (es. --cat-arco e' "rosa" qui, non "Arco di storia") -
   non ha senso inventare nuovi colori quando questi coprono gia' bene lo
   spettro e sono gia' pronti per entrambi i temi. */
.map-pin-glyph--rosso { fill: var(--cat-morte); }
.map-pin-glyph--verde { fill: var(--cat-luogo); }
.map-pin-glyph--blu { fill: var(--cat-evento); }
.map-pin-glyph--giallo { fill: var(--cat-associazione); }
.map-pin-glyph--viola { fill: var(--cat-ricordo); }
.map-pin-glyph--arancione { fill: var(--cat-oggetti); }
.map-pin-glyph--rosa { fill: var(--cat-arco); }
.map-pin-glyph--grigio { fill: var(--cat-nota); }
/* colore libero di una tipologia (vedi PIN_TYPES_FILE/buildPinIcon in
   mappe.js) - "--pin-color" arriva come stile in linea sul singolo pin,
   diverso da pin a pin, quindi qui serve una var() invece di un valore
   fisso come le classi sopra */
.map-pin-glyph--custom { fill: var(--pin-color, var(--accent)); }
/* riferimento non trovato (scheda rinominata/eliminata senza che questo
   pin sia stato aggiornato/ripulito, vedi resolveTarget in mappe.js) -
   resta cliccabile (si puo' sempre correggere/eliminare dal pannello),
   solo segnalato in modo diverso - DOPO le classi colore qui sopra nel
   foglio di stile apposta: un pin rotto resta sempre segnalato in rosso,
   qualunque colore fosse stato scelto */
.map-pin-glyph--broken { fill: var(--cat-morte); opacity: 0.65; }

/* etichetta sotto il pin - un tooltip permanente di Leaflet, spogliato
   del suo aspetto "fumetto" di default (sfondo bianco, bordo, freccina)
   per restare solo testo leggibile sopra la mappa, come il <text> SVG di
   prima (-webkit-text-stroke al posto di paint-order:stroke, che esiste
   solo per SVG) */
.map-pin-label.leaflet-tooltip {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  -webkit-text-stroke: 3px var(--bg);
  paint-order: stroke fill;
  pointer-events: none;
  white-space: nowrap;
}
.map-pin-label.leaflet-tooltip::before { display: none; }

/* --- popup "+ Nuovo pin" sul punto appena cliccato (il dettaglio di un
   pin GIA' esistente e' invece il pannello laterale, vedi piu' sotto) -
   popup nativo di Leaflet, spogliato del suo aspetto di default (sfondo
   bianco) per restare coerente col resto del sito ---------------------- */
.map-pin-popup .leaflet-popup-content-wrapper {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.map-pin-popup .leaflet-popup-content {
  margin: 0.9rem 1rem;
  font-family: var(--font-ui);
}
.map-pin-popup .leaflet-popup-tip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: none;
}
.map-pin-popup .leaflet-popup-close-button {
  color: var(--text-dim);
}
.map-pin-popup .leaflet-popup-close-button:hover { color: var(--text); }
.map-popup-content h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--accent);
}
.map-popup-open-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}
.map-popup-warning {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0 0 0.6rem;
}

.map-pin-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
/* tendina "a cosa collega" (buildTargetPicker in mappe.js) + il suo
   input "Nome del nuovo luogo" (compare solo scegliendo "+ Nuovo
   luogo…", vedi .hidden sotto) - un div a parte invece che diretti
   dentro .map-pin-edit-form, cosi' i due controlli restano vicini anche
   quando compare/sparisce l'input */
.map-target-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.map-target-select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
.map-target-new-input.hidden { display: none; }
.map-pin-edit-form input[type="text"] {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  box-sizing: border-box;
}

/* --- pannello di dettaglio laterale di un pin (vedi
   buildLocationDetailPanel in mappe.js) - stessa base condivisa di
   Timeline/Relazioni (.detail-panel in theme.css), qui sopra un canvas
   Leaflet: serve un z-index esplicito piu' alto delle sue tessere/
   marker/tooltip/popup interni (Leaflet arriva gia' fino a 700 di suo, i
   suoi controlli +/- stanno gia' a 1000) - "top" invece NON e' qui: e'
   calcolato dal vivo dall'altezza REALE dell'intestazione a due righe di
   questa pagina (vedi syncDetailPanelTop in mappe.js) - la stessa 68px
   di Timeline/Relazioni (intestazione di una riga sola) qui sarebbe
   troppo poco e il pannello finirebbe sotto alla barra strumenti, bug
   gia' visto e risolto una volta scegliendo di calcolarla invece di
   indovinare un numero fisso. --------------------------------------- */
.detail-panel {
  width: 340px;
  max-width: 90vw;
  z-index: 1100;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
.detail-panel h2 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.detail-open-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
}
/* panoramica ("art" del luogo) o, in mancanza, l'immagine "attuale" -
   stesso trattamento (rettangolo con angoli arrotondati) gia' scelto per
   il pannello di Relazioni (.detail-portrait in relazioni.css), qui in
   proprio perche' questa pagina non ne condivide il foglio di stile */
.map-detail-portrait {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
/* la mappa del luogo (location.mapImage), sotto alla panoramica/ritratto
   - rettangolare con proporzioni fisse, a differenza di quella qui sopra
   (stesso schema di .detail-map-image in graph.css) */
.map-detail-map-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 0.75rem;
}
.profile-background {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 0.75rem;
  white-space: pre-line;
}
.map-detail-empty {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.map-detail-characters-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0.9rem 0 0.4rem;
}
.map-detail-characters-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.map-detail-character-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
}
.map-detail-character-row:hover { color: var(--accent); }
.map-detail-character-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
}
.map-detail-character-portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-weight: 700;
}
/* separa il modulo di modifica (solo per chi ha fatto accesso) dalle
   info di sola lettura qui sopra */
.map-detail-edit {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* --- gestore tipologie di luogo -> colore (vedi openPinTypesManager in
   mappe.js) - riusa la finestra .relationship-types-dialog/-head/-close/
   -list/-row/-remove/-status gia' generiche in registry.css (stessi
   gestori di tipo di Personaggi/Luoghi), qui solo il modulo "+ Aggiungi"
   in piu' e le due caselle colore/nome dentro ad ogni riga. */
.map-pin-type-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
}
.map-pin-type-name-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.map-pin-type-name-select,
.map-pin-type-name-input {
  flex: 1 1 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.map-pin-type-name-input.hidden { display: none; }
.map-pin-type-color-input {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.map-pin-type-add-form button {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--bg);
  font-weight: 600;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.map-pin-type-add-form button:hover { filter: brightness(1.08); }
.map-pin-type-row { align-items: center; gap: 0.6rem; }
.map-pin-type-row .map-pin-type-name-input { margin: 0; }

/* --- legenda colore->tipologia (controllo Leaflet in alto a destra,
   vedi updateLegend in mappe.js) - stesso linguaggio visivo del pannello
   di dettaglio/della testata (pannello a tinta unita, ombra), mai sopra
   ai controlli nativi di Leaflet (li' non serve toccare lo z-index: un
   .leaflet-control normale gia' si accoda correttamente agli altri) */
.map-legend {
  background: rgba(var(--bg-elevated-rgb), 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 200px;
}
.map-legend-row { display: flex; align-items: center; gap: 0.45rem; }
.map-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
  #map-root { margin: 1rem 1.2rem 0; }
  .detail-panel { width: 100%; }
}