/* =========================
   Base / Theme
   ========================= */
:root{
  /* base */
  --bg:#0b1016;
  --surface:#0f1520;      /* pannello / card scure */
  --border:#1f2a37;
  --muted:#9fb1c7;

  /* accent */
  --accent:#4f8cff;       /* indigo/azure */
  --accent-600:#3d78f0;
  --accent-700:#3268d6;

  /* state */
  --ok:#17c964;
  --warn:#f59e0b;
  --err:#ef4444;

  /* glass */
  --glass:#0b1016cc;      /* bg + alpha */
  --glass-border:#22304080;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; background:var(--bg); color:#e6eef6; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif }

/* =========================
   Topbar
   ========================= */
.topbar{
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  position:sticky;top:0;z-index:1001;

  /* glassmorphism */
  background:linear-gradient(180deg, rgba(13,18,26,.75), rgba(13,18,26,.55));
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--glass-border);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:28px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.brand-title{font-weight:650;letter-spacing:.3px}

.nav{display:flex;align-items:center;gap:10px}
.sep{width:1px;height:24px;background:#2a394b;opacity:.5;margin:0 4px}

/* bottoni */
.btn{
  background:#162233;
  color:#dfe8f2;
  border:1px solid #25364b;
  padding:9px 12px;border-radius:10px;cursor:pointer;
  transition:transform .06s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.25) inset, 0 0 0 1px #2b3f58 }
.btn:active{ transform:translateY(1px) }
.btn.sm{ padding:7px 9px; font-size:12px }

.btn.primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-600));
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 16px rgba(79,140,255,.25);
}
.btn.primary:hover{
  background:linear-gradient(180deg, var(--accent-600), var(--accent-700));
  box-shadow:0 8px 20px rgba(79,140,255,.32);
}

.hidden{ display:none !important }
.userbox{ display:flex; align-items:center; gap:8px }
.userbox .user{ font-weight:600 }

/* =========================
   Page / Map / Panel
   ========================= */
.page{ position:relative; height:calc(100vh - 60px) } /* topbar = 60 */
.mapwrap{ position:relative; height:100% }
#map{ height:100%; width:100% }

/* Panel: slide-in da sinistra, overlay senza oscurare */
.panel{
  position:fixed;
  left:0; top:60px;                                /* sotto la topbar */
  height:calc(100vh - 60px);
  width:min(420px, 92vw);

  /* glass panel */
  background:linear-gradient(180deg, rgba(15,21,32,.92), rgba(15,21,32,.88));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);

  border-right:1px solid var(--glass-border);
  overflow:auto;
  transform:translateX(-100%);                     /* nascosto a sinistra */
  transition:transform .28s ease;                  /* animazione slide */
  z-index:1002;                                    /* sopra la mappa */
}
.panel.open{ transform:translateX(0) }
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--glass-border);
}
.panel-body{ padding:12px }
.icon-btn{
  background:#162233; color:#e6eef6; border:1px solid #2a394b;
  padding:6px 8px; border-radius:8px; cursor:pointer;
}
@media (max-width:900px){ .panel{ width:min(520px,100vw) } }

/* =========================
   Legend / Dots
   ========================= */
.legend{
  position:absolute; right:12px; top:12px; z-index:1000;
  background:linear-gradient(180deg, rgba(15,21,32,.85), rgba(15,21,32,.7));
  backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);
  padding:10px 12px; border-radius:12px; line-height:1.4;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px }
.popup-ip .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle }
.dot-on{ background:var(--ok) }
.dot-off{ background:var(--err) }

/* =========================
   Leaflet popup: chiari e leggibili
   ========================= */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:#fff;
  color:#222;
  border:1px solid #d6dbe3;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  border-radius:12px;
}
.leaflet-popup-content{ color:#222; font-size:15px; line-height:1.45 }
.leaflet-popup-content strong{ color:#000; font-weight:650 }

/* =========================
   Form / Modal (login)
   ========================= */
.modal{ border:none; padding:0; background:transparent }
.modal::backdrop{ background:rgba(0,0,0,.25) } /* leggero overlay */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  width:min(380px, calc(100vw - 40px));
}
.field{ display:flex; flex-direction:column; gap:6px; margin:10px 0 }
.field input{
  background:#0b0f14; color:#e6eef6;
  border:1px solid #233041; border-radius:8px; padding:10px;
}
.muted{ color:var(--muted) }
.note{ margin-top:4px; font-size:12px }
.row{ display:flex; align-items:center }
.gap{ gap:8px }

/* Login card chiara (override) */
.card.login-card{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #d6dbe3 !important;
  border-radius:14px !important;
  padding:22px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.18) !important;
  width:min(380px, calc(100vw - 40px)) !important;
}
.card.login-card h3,
.card.login-card h2{
  color:#000 !important;
  margin:0 0 16px 0 !important;
  text-align:center !important;
  font-weight:650 !important;
}
.card.login-card .field span{ color:#333 !important }
.card.login-card input{
  background:#fff !important; color:#111 !important;
  border:1px solid #cfd7e3 !important; border-radius:10px !important;
  padding:10px !important; font-size:1rem !important;
}
.card.login-card .btn{ width:100% }
.card.login-card .btn.primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-600)) !important;
  border:none !important; color:#fff !important;
}
.card.login-card .btn.primary:hover{ background:linear-gradient(180deg, var(--accent-600), var(--accent-700)) !important }
.card.login-card .btn:not(.primary){
  background:#eef3ff !important; color:#0f172a !important; border:1px solid #d6dbe3 !important;
}

/* =========================
   Leaflet controls (ritocco)
   ========================= */
.leaflet-control-layers{
  background:linear-gradient(180deg, rgba(15,21,32,.9), rgba(15,21,32,.8)) !important;
  color:#e6eef6 !important;
  border:1px solid var(--glass-border) !important;
  border-radius:12px !important;
}
.leaflet-control{ border-radius:12px !important }

/* ===== Modal Profilo Altimetrico: tema chiaro ===== */
#profileModal{
  /* override variabili per questo modal */
  --surface:#ffffff;
  --border:#d6dbe3;
  --muted:#334155;
  color:#0f172a;  /* testo di default scuro */
}
#profileModal .card{
  background:var(--surface) !important;
  color:#0f172a !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.18) !important;
}
#profileModal h3{ color:#0f172a !important; }
#profileModal .muted{ color:var(--muted) !important; }
#profileModal .btn:not(.primary){
  background:#eef3ff !important;
  color:#0f172a !important;
  border:1px solid var(--border) !important;
}

/* ===== Link popup card (centrato, responsive) ===== */
.leaflet-container .leaflet-popup-content .link-card{
  --gap: 8px;
  min-width: 260px;
  max-width: 500px;
  text-align: center;
  font-size: 14px;
}

/* righe a 3 colonne */
.leaflet-container .leaflet-popup-content .link-card .row3{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
}

.leaflet-container .leaflet-popup-content .link-card .head{ margin-bottom: 4px; }
.leaflet-container .leaflet-popup-content .link-card .name{
  font-weight: 800;
  letter-spacing: .2px;
  word-break: break-word;
}

/* linea tratteggiata ai lati dello stato */
.leaflet-container .leaflet-popup-content .link-card .mid{
  display: flex; align-items: center; gap: 8px;
}
.leaflet-container .leaflet-popup-content .link-card .mid::before,
.leaflet-container .leaflet-popup-content .link-card .mid::after{
  content: ""; flex: 1; border-top: 2px dashed #cbd5e1;
}

.leaflet-container .leaflet-popup-content .link-card .status{
  color: #fff; font-weight: 700;
  border-radius: 999px; padding: 2px 10px;
  font-size: 12px; line-height: 1.6; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.leaflet-container .leaflet-popup-content .link-card .sub{ margin-bottom: 6px; }
.leaflet-container .leaflet-popup-content .link-card .site{
  color: #374151; font-size: 12px; line-height: 1.3;
}
.leaflet-container .leaflet-popup-content .link-card .dist{
  font-weight: 700; font-size: 13px;
}

.leaflet-container .leaflet-popup-content .link-card .kpi{
  display: grid; gap: 2px; margin-top: 6px; line-height: 1.3;
}
.leaflet-container .leaflet-popup-content .link-card .kpi .last{
  color: #475569; font-size: 12px; margin-top: 2px;
}

.leaflet-container .leaflet-popup-content .link-card .actions{
  margin-top: 10px; display:flex; justify-content:center;
}

/* Mobile tweaks */
@media (max-width: 420px){
  .leaflet-container .leaflet-popup-content .link-card{ font-size: 13px; }
  .leaflet-container .leaflet-popup-content .link-card .row3 { gap: 6px; }
  .leaflet-container .leaflet-popup-content .link-card .name { font-size: 13px; }
  .leaflet-container .leaflet-popup-content .link-card .status { font-size: 11px; padding: 1px 8px; }
  .leaflet-container .leaflet-popup-content .link-card .dist { font-size: 12px; }
}

/* ===== Profile modal: intestazioni siti ===== */
#profileModal .profile-card{ background:#fff; color:#0f172a; }
#profileModal .profile-sites{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:2px 0 10px;
  font-weight:600; color:#334155;
}
#profileModal .profile-sites .site{
  max-width:44%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#profileModal .profile-sites .left{ text-align:left; }
#profileModal .profile-sites .right{ text-align:right; }
#profileModal .profile-sites .spacer{
  flex:1; min-width:24px; height:2px; border-top:2px dashed #cbd5e1; opacity:.9;
}

/* Legenda/linee più sobrie sul grafico */
#profileModal .legend-slim{ font-weight:600; }
@media (max-width:480px){
  #profileModal .profile-sites{ font-weight:600; font-size:13px; gap:6px; }
}