/* ===========================================================
   Auth pages (login & register) — clean, aligned, readable
   =========================================================== */

:root{
  --bg: #0b0e14;
  --panel: rgba(18,22,32,.92);
  --border: rgba(255,255,255,.08);
  --text: #e8ecf3;
  --muted: #b7c0d1;
  --accent: #f97316;
  --input-h: 52px;
  --radius: 16px;
}

*{ box-sizing:border-box }

html, body { height:100%; }

body.panel-root.auth-page{
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg) url('/assets/background.png') center/cover fixed no-repeat;
}

.panel-header{
  position:fixed; inset:0 0 auto 0; background:#1f1f1f; border-bottom:6px solid #232120;
  display:flex; align-items:center; gap:16px; padding:8px 16px; z-index:1000;
}
.menu a{ color:#fff; text-decoration:none; padding:8px 10px; border-radius:6px }
.menu a:hover{ background:#ff4500; color:#000 }
.logo-img{ height:28px; }

.auth-wrap{
  min-height:calc(100vh - 64px);
  padding-top:64px; /* spazio per l’header fisso */
  display:grid; place-items:center;
  position:relative;
}
.auth-wrap::before{
  content:""; position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 50% 40%, rgba(0,0,0,.30), transparent 55%),
    radial-gradient(800px 500px at 50% 50%, rgba(18,22,32,.45), rgba(18,22,32,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.35));
  pointer-events:none;
}

.auth-card{
  width:min(650px, 94%);
  background: linear-gradient(180deg, rgba(20,24,34,.92), rgba(14,18,27,.9));
  border:1px solid var(--border); border-radius:18px; box-shadow:0 25px 60px rgba(0,0,0,.55);
  padding:28px 24px 26px; text-align:left; backdrop-filter: blur(10px);
}

/* Dimensione logo delle pagine auth (login/register) */
.auth-page .brand .logo{
  width: var(--auth-logo-w, 160px);  /* cambia qui la misura di default */
  height: auto;
  display: block;
  margin: 0 auto;
}

.brand{ text-align:center; margin-bottom:6px; }
.brand .logo{ width:140px; height:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.title{ font-weight:900; letter-spacing:.2px; font-size:32px; margin:8px 0 0 }
.sub{ margin:0; color:var(--muted) }

.auth-form{
  display:grid; gap:14px; justify-items:center; margin-top:14px;
}

.field{ width:min(500px, 69%); }

.field label{
  display:block; font-weight:700; margin-bottom:6px;
}

.field input{
  width:100%; height:var(--input-h);
  border-radius:12px; border:1px solid var(--border);
  background:#252F45; color:var(--text); font-size:16px;
  padding:12px 14px; outline:none;
}
.field input:focus{
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 0 0 3px rgba(249,115,22,.20);
}

/* Password field: 2 righe (label + input), bottone allineato alla riga input */
.password-field{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto var(--input-h);
  position:relative;
}
.password-field label{ grid-row:1; }
.password-field input{
  grid-row:2; padding-right:56px; /* spazio per l’icona */
}
.password-field .reveal{
  grid-row:2;
  align-self:center; justify-self:end;
  position:relative; right:10px;
  width:36px; height:36px; border:0; border-radius:8px; cursor:pointer;
  background: transparent;
}
.password-field .reveal::before{
  content:""; display:block; width:20px; height:20px; margin:8px auto;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>') center/contain no-repeat;
  color:#cbd5e1;
}
.password-field .reveal[aria-pressed="true"]::before{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><path fill="white" d="M1 1l22 22"/></svg>') center/20px 20px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><path fill="white" d="M1 1l22 22"/></svg>') center/20px 20px no-repeat;
  color:#f59e0b;
}
.password-field .reveal:hover{ background:rgba(255,255,255,.06) }

/* reCAPTCHA */
.recaptcha-wrap{ margin: 10px 0 4px; display:flex; justify-content:center; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:12px; font-weight:800; cursor:pointer;
  border:1px solid var(--border); color:#fff; background:#111827;
}
.btn-primary{ background: linear-gradient(135deg, #f97316, #ef4444); border:0 }
.btn-ghost{ background:rgba(17,24,39,.8) }
.btn:hover{ filter:brightness(1.05) }

/* Divider */
.divider{ width:min(640px,92%); margin:10px auto; display:flex; align-items:center; gap:10px; color:#94a3b8; font-size:12px }
.divider span{ flex:1; height:1px; background:var(--border) }

/* Messages */
.form-error{ color:#fda4af; min-height:18px; margin-top:4px; font-size:14px; text-align:center }
.form-note{ color:var(--muted); font-size:14px; text-align:center }

/* Custom alert (semplice) */
#custom-alert-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; z-index:9998 }
#custom-alert-box{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#222; border:2px solid #aa0000; color:#fff; padding:18px 26px; border-radius:10px; display:none; z-index:9999; text-align:center }
#custom-alert-ok{ margin-top:10px }

/* === PASSWORD EYE – FIX POSIZIONE =================================== */
.password-field{ position:relative; }
.password-field label{ display:block; margin:0 0 6px; font-weight:700; }

/* l'input ha spazio per l'icona */
.password-field input{
  height: var(--input-h);
  padding-right: 56px;            /* spazio reale per il bottone */
}

/* bottone “occhio” centrato verticalmente sull'input */
.password-field .reveal{
  position:absolute;
  right:14px;
  bottom: calc((var(--input-h) - 36px) / 2); /* centro verticale */
  width:36px; height:36px;
  border:0; border-radius:8px;
  background:transparent; cursor:pointer;
  color:#cbd5e1;
}

/* icona via pseudo-element (niente testo) */
.password-field .reveal::before{
  content:""; display:block; width:20px; height:20px; margin:8px auto;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>') center/contain no-repeat;
}
.password-field .reveal[aria-pressed="true"]::before{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><path fill="white" d="M1 1l22 22"/></svg>') center/20px 20px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><path fill="white" d="M1 1l22 22"/></svg>') center/20px 20px no-repeat;
  color:#f59e0b;
}
.password-field .reveal:hover{ background: rgba(255,255,255,.06); }

/* ---- conferma password: feedback visivo ---- */
#confirm-field input.is-invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.2) !important;
}
#confirm-field input.is-valid{
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.18) !important;
}
#pwErr{ margin-top:6px; min-height:18px; }

/* ==== PASSWORD EYE — allineamento robusto per TUTTI i campi ==== */
/* 1) Altezza “nota” della label + gap: usiamole per calcolare il top */
:root{
  --label-h: 20px;    /* altezza riga label (forziamo) */
  --label-gap: 6px;   /* margine sotto label */
}

/* 2) Stop alla grid precedente e wrapper prevedibile */
.password-field{
  position: relative !important;
  display: block !important;                /* annulla la grid */
  grid-template-rows: unset !important;     /* neutralizza vecchie regole */
}

/* 3) Label con altezza e gap fissi (così il calcolo è stabile) */
.password-field label{
  display:block;
  line-height: var(--label-h) !important;
  margin: 0 0 var(--label-gap) !important;
}

/* 4) Input con spazio per il bottone */
.password-field input{
  height: var(--input-h) !important;
  padding-right: 56px !important;
}

/* 5) Bottone occhio centrato verticalmente sull'INPUT (non sul wrapper) */
.password-field .reveal{
  position: absolute !important;
  /* centratura: label + gap + metà differenza tra input e bottone (36px) */
  top: calc(var(--label-h) + var(--label-gap) + (var(--input-h) - 36px)/2) !important;
  right: 14px !important;
  width: 36px; height: 36px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent;
  color: #cbd5e1;
  /* azzera eventuali residui della grid */
  grid-row: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
}
.password-field .reveal:hover{ background: rgba(255,255,255,.06); }

/* icona (come già avevi) */
.password-field .reveal::before{
  content:""; display:block; width:20px; height:20px; margin:8px auto;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>') center/contain no-repeat;
}
.password-field .reveal[aria-pressed="true"]::before{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><path fill="white" d="M1 1l22 22"/></svg>') center/20px 20px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><path fill="white" d="M1 1l22 22"/></svg>') center/20px 20px no-repeat;
  color:#f59e0b;
}