/* =========================================================================
   Professionista Map — Foglio di stile principale
   Palette ENTERPRISE (blu + oro + bianco), sobria e professionale, con TEMA
   CHIARO (predefinito) e TEMA BLACK (scuro) commutabile. I componenti Bootstrap
   5.3 seguono il tema tramite l'attributo data-bs-theme impostato dal layout.
   Header fisso, footer sticky, responsive (mobile-first), focus visibili (WCAG).
   ========================================================================= */

/* ---------------- Variabili tema CHIARO (predefinito) ---------------- */
:root{
  /* Blu (navy → royal → acceso) */
  --pm-primary:#0b2447; --pm-primary-2:#17457f; --pm-primary-3:#1d4ed8; --pm-primary-4:#2563eb;
  /* Oro (scuro → chiaro), tonalità raffinate */
  --pm-gold:#c19a3e; --pm-gold-2:#dcbb63; --pm-gold-3:#9a7b28;
  /* Testo e superfici */
  --pm-ink:#0e1c33; --pm-muted:#5b6b86;
  --pm-surface:#ffffff; --pm-surface-2:#f4f7fb;
  --pm-border:rgba(15,28,60,.10);
  --pm-legend-bg:#ffffff;
  --pm-shadow:0 10px 34px rgba(11,28,60,.14);
  /* Sfondo pagina */
  --pm-body-bg:
    radial-gradient(1200px 600px at 8% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(1000px 560px at 112% 8%, rgba(193,154,62,.09), transparent 55%),
    linear-gradient(180deg,#ffffff 0%, #eef3fb 100%);
  /* Gradienti compositi */
  --pm-gold-grad:linear-gradient(135deg, var(--pm-gold-3) 0%, var(--pm-gold) 45%, var(--pm-gold-2) 100%);
  --pm-header-grad:linear-gradient(90deg, var(--pm-primary) 0%, var(--pm-primary-2) 60%, var(--pm-primary-3) 130%);
  --pm-hero-grad:linear-gradient(120deg, var(--pm-primary) 0%, var(--pm-primary-2) 65%, var(--pm-primary-3) 125%);
  /* Metriche */
  --pm-header-h:60px; --pm-footer-h:44px; --pm-radius:14px;
}

/* ---------------- Variabili tema BLACK (scuro) ---------------- */
html[data-theme="black"]{
  --pm-primary:#0a1220; --pm-primary-2:#143a72; --pm-primary-3:#1d4ed8; --pm-primary-4:#3b82f6;
  --pm-gold:#d9b24b; --pm-gold-2:#f0d283; --pm-gold-3:#b8912e;
  --pm-ink:#e7edf7; --pm-muted:#9fb0c9;
  --pm-surface:#141a26; --pm-surface-2:#1b2432;
  --pm-border:rgba(230,199,87,.16);
  --pm-legend-bg:#141a26;
  --pm-shadow:0 12px 36px rgba(0,0,0,.55);
  --pm-body-bg:
    radial-gradient(1100px 560px at 8% -10%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(1000px 560px at 112% 8%, rgba(217,178,75,.10), transparent 55%),
    linear-gradient(180deg,#0a0e17 0%, #0d1320 100%);
  --pm-header-grad:linear-gradient(90deg,#0a1220 0%, #123163 70%, #1d4ed8 140%);
  --pm-hero-grad:linear-gradient(120deg,#0b1526 0%, #14335f 70%, #1d4ed8 135%);
}

*{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--pm-body-bg); color:var(--pm-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-top:calc(var(--pm-header-h) + 6px);
}

/* ---------- Sfondo animato (blob a gradiente: blu + oro) ---------- */
.bg-animato{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg-animato span{ position:absolute; display:block; border-radius:50%; filter:blur(60px); opacity:.28; animation:pm-float 18s ease-in-out infinite; }
.bg-animato span:nth-child(1){ width:420px; height:420px; left:-80px; top:-60px; background:radial-gradient(circle at 30% 30%, var(--pm-primary-3), transparent 70%); }
.bg-animato span:nth-child(2){ width:520px; height:520px; right:-120px; top:20%; background:radial-gradient(circle at 40% 40%, var(--pm-primary-2), transparent 70%); animation-delay:-6s; }
.bg-animato span:nth-child(3){ width:480px; height:480px; left:20%; bottom:-160px; background:radial-gradient(circle at 50% 50%, var(--pm-gold), transparent 70%); animation-delay:-12s; opacity:.20; }
@keyframes pm-float{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(40px,30px) scale(1.08); } 66%{ transform:translate(-30px,20px) scale(.96); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ---------- Header fisso a gradiente blu con filo oro ---------- */
.app-header{ height:var(--pm-header-h); }
.app-header .navbar{
  height:var(--pm-header-h); background:var(--pm-header-grad); box-shadow:var(--pm-shadow);
  border-bottom:3px solid transparent; border-image:var(--pm-gold-grad) 1;
}
.app-header .navbar, .app-header .navbar .nav-link, .app-header .navbar-brand{ color:#fff !important; }
.app-header .nav-link{ opacity:.92; border-radius:8px; padding-inline:.7rem; }
.app-header .nav-link:hover, .app-header .nav-link:focus{ opacity:1; background:rgba(255,255,255,.14); }
.app-header .nav-link.active{ background:rgba(255,255,255,.20); font-weight:600; box-shadow:inset 0 -2px 0 var(--pm-gold-2); }
.app-header .navbar-brand{ font-weight:700; letter-spacing:.2px; }
.app-header .navbar-brand .bi{ color:var(--pm-gold-2); }
.app-header .dropdown-menu{ box-shadow:var(--pm-shadow); border-radius:12px; border-top:3px solid var(--pm-gold); }
@media (max-width:991.98px){
  .app-header .navbar-collapse{ background:linear-gradient(180deg, var(--pm-primary), var(--pm-primary-2)); margin-top:.4rem; padding:.6rem .8rem; border-radius:12px; box-shadow:var(--pm-shadow); max-height:80vh; overflow:auto; border:1px solid rgba(230,199,87,.35); }
}

/* ---------- Pulsante toggle tema (sempre visibile in barra) ---------- */
.pm-theme-toggle{ color:#fff; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); border-radius:9px; width:38px; height:38px; line-height:1; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.pm-theme-toggle:hover{ background:rgba(255,255,255,.18); color:#fff; border-color:var(--pm-gold-2); }
.pm-theme-toggle .bi{ font-size:1.05rem; color:var(--pm-gold-2); }

/* Selettore «categoria attiva» in testata */
.pm-cat-btn{ color:#fff; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); border-radius:9px; height:38px; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.pm-cat-btn:hover, .pm-cat-btn:focus{ color:#fff; background:rgba(255,255,255,.18); border-color:var(--pm-gold-2); }
.pm-cat-dot{ display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.55); flex:0 0 auto; }
.pm-cat-switch .dropdown-menu{ border-top:3px solid var(--pm-gold); }
.pm-cat-switch .dropdown-item .pm-cat-dot{ border-color:rgba(0,0,0,.2); margin-right:.15rem; }

/* Completamento automatico (autocomplete) per elenchi lunghi (comuni, professionisti) */
.pm-ac{ position:relative; }
.pm-ac-menu{ position:absolute; z-index:1080; left:0; right:0; top:100%; margin-top:2px; display:none;
  max-height:280px; overflow-y:auto; background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529);
  border:1px solid var(--bs-border-color,#ced4da); border-radius:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.pm-ac-menu.open{ display:block; }
.pm-ac-item{ padding:.45rem .7rem; cursor:pointer; border-bottom:1px solid rgba(0,0,0,.05); font-size:.95rem; }
.pm-ac-item:last-child{ border-bottom:0; }
.pm-ac-item:hover, .pm-ac-item.active{ background:var(--pm-blue,#1d4ed8); color:#fff; }
.pm-ac-item mark{ background:transparent; color:inherit; font-weight:700; padding:0; }
.pm-ac-item:hover mark, .pm-ac-item.active mark{ color:#fff; }
.pm-ac-empty{ padding:.5rem .7rem; color:var(--bs-secondary-color,#6c757d); font-size:.9rem; }
[data-bs-theme="dark"] .pm-ac-menu{ background:#1a2740; color:#e9eef7; border-color:#2b3d5e; }
[data-bs-theme="dark"] .pm-ac-item{ border-bottom-color:rgba(255,255,255,.06); }

/* ---------- Footer ---------- */
.app-footer{ flex-shrink:0; min-height:var(--pm-footer-h); display:flex; align-items:center; padding-block:8px; background:linear-gradient(90deg, #0a1a38, #0b2447); color:#e8eefb; backdrop-filter:blur(6px); border-top:2px solid var(--pm-gold-3); }
.app-footer a{ color:var(--pm-gold-2); text-decoration:none; }
.app-footer a:hover{ text-decoration:underline; }

/* ---------- Contenuto ---------- */
.app-main{ flex:1 0 auto; }
.card{ border:1px solid var(--pm-border); border-radius:var(--pm-radius); box-shadow:var(--pm-shadow); }
.card-header{ border-bottom:1px solid var(--pm-border); font-weight:600; }

/* Intestazione sezione con gradiente blu e accento oro */
.page-hero{ border-radius:var(--pm-radius); color:#fff; padding:1.1rem 1.3rem; margin-bottom:1rem; background:var(--pm-hero-grad); box-shadow:var(--pm-shadow); border-bottom:4px solid transparent; border-image:var(--pm-gold-grad) 1; }
.page-hero h1{ font-size:1.5rem; margin:0; font-weight:700; }
.page-hero p{ margin:.25rem 0 0; opacity:.94; }
.page-hero .btn-light{ font-weight:600; color:var(--pm-primary); }

/* KPI cards — mix di blu e oro */
.kpi{ border-radius:var(--pm-radius); padding:1rem 1.15rem; color:#fff; box-shadow:var(--pm-shadow); position:relative; overflow:hidden; }
.kpi::after{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.10); }
.kpi .kpi-num{ font-size:2rem; font-weight:700; line-height:1; }
.kpi .kpi-label{ opacity:.92; }
.kpi.k1{ background:linear-gradient(135deg, var(--pm-primary), var(--pm-primary-3)); }
.kpi.k2{ background:linear-gradient(135deg, var(--pm-primary-2), var(--pm-primary-4)); }
.kpi.k3{ background:var(--pm-gold-grad); color:#3d2f05; }
.kpi.k3 .kpi-label{ opacity:.85; }
.kpi.k4{ background:linear-gradient(135deg, var(--pm-primary), var(--pm-gold)); }

/* Bottoni */
.btn-primary{ background:linear-gradient(90deg, var(--pm-primary), var(--pm-primary-3)); border:none; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:focus, .btn-primary:active{ background:linear-gradient(90deg, var(--pm-primary), var(--pm-primary-2)); }
.btn-outline-primary{ color:var(--pm-primary-3); border-color:var(--pm-primary-3); }
.btn-outline-primary:hover{ background:var(--pm-primary-3); border-color:var(--pm-primary-3); color:#fff; }
.btn-gradient{ background:var(--pm-gold-grad); color:#3d2f05; border:none; font-weight:600; }
.btn-gradient:hover{ filter:brightness(1.05); color:#3d2f05; }
.text-gold{ color:var(--pm-gold-3) !important; }

.badge-sat{ background:var(--pm-gold); color:#3d2f05; }
table td, table th{ vertical-align:middle; }
.table > thead{ color:var(--pm-primary-3); }

/* Mappa */
#map, .map-box{ width:100%; height:70vh; min-height:420px; border-radius:var(--pm-radius); box-shadow:var(--pm-shadow); }
.legend{ background:var(--pm-legend-bg); color:var(--pm-ink); padding:.6rem .8rem; border-radius:10px; box-shadow:var(--pm-shadow); font-size:.85rem; line-height:1.5; border-left:4px solid var(--pm-gold); display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1rem; }
.legend > span{ display:inline-flex; align-items:center; }
.legend .dot{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; }

/* Pulsanti strumenti mappa (schermo intero + salva JPG) */
.leaflet-bar.pm-map-tools a{ width:34px; height:34px; line-height:34px; text-align:center; font-size:1rem; color:var(--pm-primary-3); background:#fff; display:block; }
.leaflet-bar.pm-map-tools a:hover{ background:#eaf1fb; color:var(--pm-primary); }
.leaflet-bar.pm-map-tools a.pm-busy{ opacity:.5; pointer-events:none; }
.map-box:fullscreen, #map:fullscreen{ width:100%; height:100%; border-radius:0; }
.leaflet-container:-webkit-full-screen{ width:100%!important; height:100%!important; }

/* ---------- Accessibilità: skip-link e focus ---------- */
.skip-link{ position:absolute; left:-999px; top:0; z-index:2000; background:#fff; color:var(--pm-primary); padding:.6rem 1rem; border-radius:0 0 10px 0; font-weight:600; }
.skip-link:focus{ left:0; }
a{ color:var(--pm-primary-3); }
a:hover{ color:var(--pm-primary-4); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible,
.nav-link:focus-visible, .dropdown-item:focus-visible, input:focus-visible, select:focus-visible{ outline:3px solid var(--pm-gold) !important; outline-offset:2px !important; box-shadow:none !important; }
.form-control:focus, .form-select:focus{ border-color:var(--pm-primary-4); box-shadow:0 0 0 .2rem rgba(37,99,235,.20); }

/* Login / pagine di autenticazione */
.auth-wrap{ max-width:440px; margin:5vh auto; }
.auth-logo{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; color:#fff; font-size:1.8rem; background:linear-gradient(135deg, var(--pm-primary), var(--pm-primary-3)); box-shadow:var(--pm-shadow); border:2px solid var(--pm-gold-2); }

/* Utility */
.small-muted{ color:var(--pm-muted); font-size:.85rem; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.table-responsive{ border-radius:var(--pm-radius); }

@media (max-width:575.98px){
  .page-hero h1{ font-size:1.25rem; }
  .kpi .kpi-num{ font-size:1.6rem; }
  #map, .map-box{ height:60vh; }
}

/* ---- Scheda professionista in sola consultazione ----
   Le note sono spesso su più righe: pre-wrap ne conserva gli a capo, mentre
   l'altezza minima corrisponde alle 6 righe del campo di modifica, così la
   scheda ha la stessa resa nelle due modalità. overflow-wrap evita che un
   indirizzo o un URL molto lungo esca dal riquadro (WCAG 2.2 — 1.4.10
   «Ridimensionamento del contenuto»: nessuno scorrimento orizzontale). */
.pm-note-view{
  white-space:pre-wrap; overflow-wrap:anywhere;
  min-height:2.5rem; line-height:1.5;
  padding:.5rem .75rem; border:1px solid var(--pm-border);
  border-radius:.5rem; background:var(--pm-surface-2);
}
/* Coppie etichetta/valore: <dl> usato con la griglia (dl > div > dt + dd). */
.pm-doc-dl dt, dl.row > div > dt{ font-weight:400; }

/* ---- Pagine mappa/documentazione ---- */
.map-box-lg{ height:78vh; min-height:460px; }
.pm-doc{ max-width:76ch; line-height:1.65; }
.pm-doc h2{ margin-top:1.25rem; color:var(--pm-primary-3); }
.pm-doc ul, .pm-doc ol{ padding-left:1.2rem; }
.pm-doc li{ margin-bottom:.3rem; }
.pm-doc kbd{ background:var(--pm-primary); color:#fff; border-radius:4px; padding:.05rem .4rem; font-size:.85em; }

@media (max-width: 768px){ .map-box-lg{ height:66vh; } }