/* Genova mApp: pulsante Account e pannello Netlify Identity. */

#app > header #auth-login-button{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  color:#dbeafe !important;
  background:linear-gradient(180deg,rgba(30,58,95,.97),rgba(17,37,68,.97)) !important;
  border:1px solid rgba(147,197,253,.58) !important;
  border-radius:9999px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

#app > header #auth-login-button:hover,
#app > header #auth-login-button:focus-visible{
  color:#eff6ff !important;
  background:linear-gradient(180deg,rgba(37,79,130,.99),rgba(20,51,92,.99)) !important;
  border-color:rgba(191,219,254,.9) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 0 2px rgba(96,165,250,.16) !important;
}

#app > header #auth-login-button:focus-visible{
  outline:2px solid rgba(147,197,253,.85) !important;
  outline-offset:2px !important;
}

#app > header #auth-login-button:active{ transform:translateY(1px) scale(.97); }
#app > header #auth-login-button svg{ width:22px !important;height:22px !important;pointer-events:none; }

#app > header #auth-login-button .auth-state-dot{
  position:absolute;
  right:2px;
  bottom:2px;
  width:8px;
  height:8px;
  box-sizing:border-box;
  background:#94a3b8;
  border:1.5px solid #0b1222;
  border-radius:50%;
}

#app > header #auth-login-button.is-authenticated .auth-state-dot{
  background:#4ade80;
  box-shadow:0 0 0 2px rgba(74,222,128,.18);
}

#auth-account-modal{
  position:fixed;
  inset:0;
  z-index:14950;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(3,8,18,.68);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

#auth-account-modal[hidden]{ display:none !important; }
html.auth-account-open{ overflow:hidden !important; }

.auth-account-dialog{
  position:relative;
  width:min(420px,calc(100vw - 32px));
  max-height:calc(100dvh - 36px);
  overflow:auto;
  box-sizing:border-box;
  padding:24px;
  color:#e5edf5;
  background:
    radial-gradient(circle at 85% 0,rgba(59,130,246,.14),transparent 38%),
    linear-gradient(155deg,#17243a,#0b1222 70%);
  border:1px solid rgba(191,219,254,.33);
  border-radius:18px;
  box-shadow:0 24px 65px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  text-align:left;
}

.auth-account-dialog[dir="rtl"]{ text-align:right; }

.auth-account-close{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  color:#cbd5e1;
  background:rgba(30,41,59,.64);
  border:1px solid rgba(203,213,225,.24);
  border-radius:50%;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.auth-account-dialog[dir="rtl"] .auth-account-close{ right:auto;left:10px; }

.auth-account-mark{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 13px;
  color:#dbeafe;
  background:rgba(30,64,175,.25);
  border:1px solid rgba(147,197,253,.45);
  border-radius:50%;
}

.auth-account-mark svg{ width:28px;height:28px; }
.auth-account-dialog.is-authenticated .auth-account-mark{ color:#dcfce7;background:rgba(20,83,45,.34);border-color:rgba(134,239,172,.45); }

.auth-account-dialog h2{
  margin:0 30px 10px;
  color:#f8fafc;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:1.28rem;
  line-height:1.25;
  text-align:center;
}

.auth-account-description{
  margin:0;
  color:#d6dee8;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:.94rem;
  line-height:1.55;
  text-align:center;
}

.auth-account-profile{
  display:grid;
  gap:8px;
  margin-top:17px;
  padding:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(203,213,225,.16);
  border-radius:12px;
}

.auth-account-profile[hidden]{ display:none !important; }
.auth-account-name{ color:#f8fafc;font-weight:700;overflow-wrap:anywhere; }
.auth-account-email{ color:#bfdbfe;font-size:.86rem;overflow-wrap:anywhere; }
.auth-account-status{ display:flex;align-items:center;gap:7px;color:#bbf7d0;font-size:.8rem; }
.auth-account-status::before{ content:"";width:8px;height:8px;background:#4ade80;border-radius:50%;box-shadow:0 0 0 3px rgba(74,222,128,.12); }

.auth-account-notice{
  min-height:1.2em;
  margin:13px 0 0;
  color:#fcd34d;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:.8rem;
  line-height:1.4;
  text-align:center;
}

.auth-account-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:18px;
}

.auth-account-actions button{
  min-height:42px;
  padding:8px 12px;
  border-radius:10px;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
}

.auth-account-actions button:hover{ filter:brightness(1.07); }
.auth-account-actions button:focus-visible,.auth-account-close:focus-visible{ outline:2px solid #f8fafc;outline-offset:2px; }

#auth-account-login,#auth-account-logout{
  color:#eff6ff;
  background:linear-gradient(180deg,#2563a9,#1e477b);
  border:1px solid #93c5fd;
}

#auth-account-signup{
  color:#052e16;
  background:linear-gradient(180deg,#86efac,#4ade80);
  border:1px solid #bbf7d0;
}

#auth-account-logout{ grid-column:1 / -1;color:#fee2e2;background:linear-gradient(180deg,#8b3a43,#682630);border-color:#fca5a5; }

/* Il widget CDN è un iframe con ID (non una classe). Deve stare sopra alla
   mappa, ai marker e ai nostri pannelli; lo sfondo vero è disegnato al suo interno. */
#netlify-identity-widget{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:20000 !important;
  isolation:isolate !important;
}
#netlify-identity-widget[style*="display: block"]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#netlify-identity-widget[style*="display: none"]{pointer-events:none !important;}

#auth-account-modal:not([hidden]),
#auth-account-modal:not([hidden]) .auth-account-dialog{
  opacity:1 !important;
  visibility:visible !important;
}

@media (max-width:768px){
  #app > header #auth-login-button{
    width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;
  }
}

@media (max-width:480px){
  #auth-account-modal{ padding:12px; }
  .auth-account-dialog{ width:min(400px,calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:21px 18px;border-radius:16px; }
}

@media (max-width:360px){
  #app > header #auth-login-button{
    width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;
  }
  #app > header #auth-login-button svg{ width:20px !important;height:20px !important; }
}