/* ============================================================
   Monitora Gallipoli — stili delle nuove funzionalità
   (mappa, fotocamera, notifiche, priorità, duplicati, foto esito)
   Estende style.css; usa le stesse custom properties.
   ============================================================ */

/* ---------- Mappa condivisa ---------- */
.mg-mappa {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  background: #bfe0ef;
}
.mg-zona-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  fill: #17324D;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3px;
  pointer-events: none;
}
.mg-interattiva { cursor: crosshair; touch-action: none; }
.mg-pin { pointer-events: none; }
.mg-pin.mg-pin--attivo path { filter: drop-shadow(0 2px 3px rgba(23, 50, 77, 0.4)); }
.mg-pin--cliccabile { pointer-events: auto; cursor: pointer; }
@keyframes mg-drop {
  0% { transform: translateY(-14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Contenitore mappa nel picker cittadino */
.mappa-picker {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mappa-picker .mg-mappa { border-radius: 0; }
.mappa-picker-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-primary-bg);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text);
}
.mappa-picker-barra .pin-icona { color: var(--color-primary); display: inline-flex; }
.mappa-hint {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---------- Fotocamera in chat ---------- */
.camera-box {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0b1622;
  border: 1px solid var(--color-border);
}
.camera-box video,
.camera-box canvas {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  background: #0b1622;
}
.camera-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px;
  background: #12202f;
}
.camera-scatta {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--color-danger);
  cursor: pointer;
}
.camera-scatta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.camera-annulla {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font: 600 0.875rem var(--font-sans);
  cursor: pointer;
}
.foto-scattata {
  width: 120px; height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.foto-reale-grande {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  display: block;
}

/* ---------- Notifiche stile telefono (push simulata) ---------- */
.push-notifica {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: push-in 0.35s ease;
}
@keyframes push-in {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.push-notifica.uscita { animation: push-out 0.3s ease forwards; }
@keyframes push-out {
  to { transform: translateY(-120%); opacity: 0; }
}
.push-icona {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.push-icona .icon { width: 20px; height: 20px; }
.push-testo { flex: 1; min-width: 0; }
.push-testo .push-titolo {
  font-size: 0.8125rem; font-weight: 700; color: var(--color-text);
  display: flex; justify-content: space-between; gap: 8px;
}
.push-testo .push-titolo .push-ora { font-weight: 400; color: var(--color-text-secondary); }
.push-testo .push-corpo { font-size: 0.8125rem; color: var(--color-text); margin: 2px 0 0; }
.push-canali {
  margin-top: 6px; font-size: 0.6875rem; color: var(--color-text-secondary);
  display: flex; gap: 10px;
}
.push-canali span { display: inline-flex; align-items: center; gap: 3px; }
.push-canali .icon { width: 13px; height: 13px; }

/* ---------- Preferenze di notifica ---------- */
.pref-notifiche {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: #fff;
  margin-top: 8px;
}
.pref-notifiche h3 { font-size: 0.9375rem; margin: 0 0 8px; }
.pref-riga {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.pref-riga + .pref-riga { border-top: 1px solid var(--color-bg-light); }
.pref-riga label { flex: 1; font-size: 0.875rem; color: var(--color-text); }
.pref-riga .pref-sub { display: block; font-size: 0.75rem; color: var(--color-text-secondary); }
/* Switch */
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .cursore {
  position: absolute; inset: 0; border-radius: 999px;
  background: #c3ccd6; transition: background .15s;
}
.switch .cursore::before {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .cursore { background: var(--color-success); }
.switch input:checked + .cursore::before { transform: translateX(18px); }
.switch input:focus-visible + .cursore { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Indicatore notifica nella timeline */
.tl-notifica {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; color: var(--color-text-secondary); margin-top: 2px;
}
.tl-notifica .icon { width: 12px; height: 12px; }

/* ---------- Badge di priorità ---------- */
.priorita {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.priorita::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.priorita--alta   { color: #B02A2A; background: #FBE9E9; border-color: #F0C4C4; }
.priorita--media  { color: #8A5A00; background: #FFF3D6; border-color: #ECD9A6; }
.priorita--bassa  { color: #5C6F82; background: #EEF1F4; border-color: #D9DEE4; }
.priorita--mini { font-size: 0.6875rem; padding: 1px 7px; }

/* Ordinamento colonna urgenza */
.th-ordina {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit;
}
.th-ordina .freccia { font-size: 0.7rem; opacity: .6; }
.th-ordina[aria-sort] .freccia { opacity: 1; color: var(--color-primary); }

/* Legenda priorità sotto i filtri */
.legenda-priorita {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 4px;
}

/* ---------- Cabina di regia: vista mappa ---------- */
.vista-toggle {
  display: inline-flex; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden; background: #fff;
}
.vista-toggle button {
  border: 0; background: #fff; padding: 8px 16px;
  font: 600 0.875rem var(--font-sans); color: var(--color-text-secondary);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.vista-toggle button + button { border-left: 1px solid var(--color-border); }
.vista-toggle button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.vista-toggle .icon { width: 18px; height: 18px; }

.mappa-regia-contenitore {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #bfe0ef;
  box-shadow: var(--shadow-sm);
}
.mappa-regia-contenitore .mg-mappa { max-height: 62vh; }
.mappa-legenda {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 10px 14px; background: #fff; border-top: 1px solid var(--color-border);
  font-size: 0.8125rem; color: var(--color-text);
}
.mappa-legenda .voce { display: inline-flex; align-items: center; gap: 6px; }
.mappa-legenda .punto { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); }
.mg-pin--cliccabile:hover path,
.mg-pin--cliccabile:focus path { filter: drop-shadow(0 3px 5px rgba(23, 50, 77, 0.5)); }
.mg-cluster-ring { fill: none; stroke: #CC334D; stroke-width: 3; stroke-dasharray: 6 5; opacity: .9; }

/* ---------- Pannello segnalazioni simili (duplicati) ---------- */
.pannello-simili { border-left: 4px solid var(--color-warning); }
.pannello-simili h2 .conteggio {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px;
  background: var(--color-warning); color: #fff; border-radius: 999px;
  font-size: 0.8125rem;
}
.lista-simili { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.simile-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px 10px; background: #fff; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--color-text);
}
.simile-item:hover { background: var(--color-primary-bg); border-color: var(--color-primary); }
.simile-item .mono { font-size: 0.8125rem; }
.simile-item .distanza { margin-left: auto; font-size: 0.75rem; color: var(--color-text-secondary); white-space: nowrap; }
.simile-mappa { margin-top: 10px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }

/* ---------- Foto di risoluzione (Comune) ---------- */
.esito-foto-blocco { margin-top: 8px; }
.esito-confronto {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px;
}
.esito-confronto figure { margin: 0; }
.esito-confronto figcaption {
  font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px;
}
.esito-foto {
  width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: #fff;
}
.esito-foto--esito { position: relative; }
.esito-foto--esito .bollino {
  position: absolute; top: 6px; right: 6px; background: var(--color-success); color: #fff;
  border-radius: 999px; padding: 2px 8px; font-size: 0.6875rem; font-weight: 700;
}
.bolla .esito-foto-msg { width: 200px; height: 120px; margin-top: 6px; border-radius: var(--radius-sm); object-fit: cover; display: block; }

/* Allega foto nella modale di risoluzione */
.allega-esito {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px;
}
.allega-esito .anteprima {
  width: 72px; height: 54px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff;
}

@media (max-width: 991px) {
  .esito-confronto { grid-template-columns: 1fr; }
}