/* === Layout mappa + sidebar === */
#map {
  position: relative;     /* per posizionare l'overlay */
  height: 70vh;
  width: 100%;
}

.webmap-container {
  min-height: 60vh;
  width: 100%;
}

/* === Overlay di caricamento sulla mappa === */
.map-loading {
  position: absolute;
  inset: 0;
  display: none;              /* diventa flex quando attivo */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .5rem;

  background: rgba(0,0,0,.25);
  z-index: 100000;            /* sopra a ol-viewport e controlli */
  pointer-events: none;       /* non blocca interazioni */
}

.map-loading .spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.9);
  animation: mapspin 0.8s linear infinite;
}

.map-loading .map-loading-text {
  font-size: .85rem;
  color: var(--text-color, #eaeaea);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

@keyframes mapspin {
  to { transform: rotate(360deg); }
}

/* === Sidebar === */
.webmap-sidebar {
  height: 70vh;
  max-height: 70vh;
  display: flex;
  flex-direction: column;

  background-color: var(--page-bg, #0f0f0f);
  color: var(--text-color, #eaeaea);

  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.webmap-sidebar__head {
  flex: 0 0 40%;
  padding: 0.75rem 1rem;
  overflow: auto;
}

.webmap-sidebar__controls {
  flex: 1 1 60%;
  padding: 0.5rem 1rem 0.75rem;
  overflow: auto;
}

.webmap-sidebar h5 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0 0 .25rem 0;
}
.webmap-sidebar h6 {
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 0 0 .25rem 0;
}

.small-muted {
  font-size: 0.8rem;
  opacity: 0.8;
  margin: 0;
}

.layer-item + .layer-item { border-top: 1px solid var(--border-color, #2a2a2a); }

.layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.layer-title { margin: 0; font-weight: 600; font-size: 0.9rem; }
.layer-meta   { font-size: 0.75rem; opacity: 0.75; }

.layer-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .5rem;
}

.webmap-sidebar .form-label { font-size: 0.75rem; margin-bottom: .25rem; }
.webmap-sidebar .form-control {
  font-size: 0.85rem;
  padding: .25rem .4rem;
  height: 2rem;
  line-height: 1.2;
  background-color: var(--card-bg, #141414);
  color: var(--text-color, #eaeaea);
  border: 1px solid var(--border-color, #2a2a2a);
}

.layer-item input[type="checkbox"].form-check-input { transform: scale(0.95); margin-right: .4rem; }

.ol-scale-line, .ol-zoom { user-select: none; }

/* Layout complessivo mappa+sidebar */
.webmap-layout {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
  margin-bottom: 0.0rem;
}

/* Popup overlay */
.webmap-popup {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 10000;
  pointer-events: auto;
}
.webmap-popup .card {
  background-color: var(--card-bg, #141414);
  color: var(--text-color, #eaeaea);
}
.webmap-popup .btn-close {
  filter: invert(1);
}
.webmap-popup .webmap-popup-content {
  max-width: 320px;
}