/* ============================================================
   BandoPilot — auth.css (BANDI-F32)
   Stili condivisi per login / register / forgot / reset password.
   Usa i design token del brand (brand/palette.css).
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

body.auth-body{
  min-height:100vh;
  font-family:var(--bp-font-body);
  font-size:var(--bp-text-body);
  line-height:var(--bp-leading-body);
  color:var(--bp-ink-800);
  background:var(--bp-gradient-notte);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 16px 40px;
}
body.auth-body::before{
  content:"";
  position:fixed;inset:0;
  background:var(--bp-gradient-aurora);
  pointer-events:none;
}

.auth-shell{position:relative;width:100%;max-width:440px}

.auth-logo{display:flex;justify-content:center;margin-bottom:26px}
.auth-logo img{height:52px;width:auto}

.auth-card{
  background:var(--bp-white);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow-float);
  padding:34px 30px 28px;
}
.auth-card h1{
  font-family:var(--bp-font-display);
  font-weight:600;
  font-size:var(--bp-text-h4);
  letter-spacing:var(--bp-tracking-display);
  line-height:var(--bp-leading-tight);
  color:var(--bp-navy-900);
  margin-bottom:6px;
}
.auth-sub{color:var(--bp-stone-500);font-size:var(--bp-text-small);margin-bottom:22px}

/* ---- campi ---- */
.field{margin-bottom:16px}
.field label{
  display:block;font-weight:600;font-size:var(--bp-text-small);
  color:var(--bp-navy-900);margin-bottom:6px;
}
.field input[type=email],
.field input[type=password],
.field input[type=text]{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--bp-sand-300);
  border-radius:var(--bp-radius-md);
  font-family:var(--bp-font-body);
  font-size:1rem;
  color:var(--bp-ink-800);
  background:#fff;
  transition:border-color var(--bp-duration-fast) var(--bp-ease),
             box-shadow var(--bp-duration-fast) var(--bp-ease);
}
.field input:focus{outline:none;border-color:var(--bp-blue-600);box-shadow:var(--bp-focus-ring)}
.field input.invalid{border-color:var(--bp-danger)}
.field .hint{font-size:var(--bp-text-caption);color:var(--bp-stone-500);margin-top:5px;line-height:1.45}
.field-err{
  display:none;
  font-size:var(--bp-text-caption);
  color:var(--bp-danger);
  margin-top:5px;font-weight:500;
}
.field-err.on{display:block}

/* password wrapper con toggle occhio */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;cursor:pointer;
  color:var(--bp-stone-500);padding:6px;line-height:0;border-radius:6px;
}
.pw-toggle:hover{color:var(--bp-blue-600)}

/* ---- riga opzioni (remember me / forgot) ---- */
.auth-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:-4px 0 16px;flex-wrap:wrap;
}
.check{
  display:flex;align-items:flex-start;gap:8px;
  font-size:var(--bp-text-small);color:var(--bp-ink-800);cursor:pointer;
}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--bp-blue-600);flex:none;cursor:pointer}
.check a{color:var(--bp-blue-600);text-decoration:none;font-weight:500}
.check a:hover{text-decoration:underline}

a.auth-link{color:var(--bp-blue-600);text-decoration:none;font-size:var(--bp-text-small);font-weight:500}
a.auth-link:hover{text-decoration:underline}

/* ---- messaggi form ---- */
.form-msg{
  display:none;border-radius:var(--bp-radius-md);
  padding:11px 14px;font-size:var(--bp-text-small);
  margin-bottom:14px;line-height:1.45;
}
.form-msg.err{display:block;background:#F9E7E3;color:var(--bp-danger);border:1px solid #ECC4BC}
.form-msg.ok{display:block;background:var(--bp-sage-100);color:var(--bp-sage-600);border:1px solid #BBDECC}

/* ---- bottone primario ---- */
.btn-auth{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--bp-font-body);font-weight:600;font-size:1.02rem;
  color:var(--bp-navy-950);
  background:var(--bp-amber-500);
  border:none;border-radius:var(--bp-radius-md);
  padding:13px 24px;cursor:pointer;
  transition:background var(--bp-duration-fast) var(--bp-ease),
             transform var(--bp-duration-fast) var(--bp-ease);
}
.btn-auth:hover:not(:disabled){background:var(--bp-amber-600);transform:translateY(-1px)}
.btn-auth:focus-visible{outline:none;box-shadow:var(--bp-focus-ring)}
.btn-auth:disabled{opacity:.65;cursor:wait;transform:none}

.spinner{
  width:17px;height:17px;flex:none;
  border:2.5px solid rgba(8,18,38,.25);
  border-top-color:var(--bp-navy-950);
  border-radius:50%;
  animation:bp-spin .7s linear infinite;
}
@keyframes bp-spin{to{transform:rotate(360deg)}}

/* ---- divider + social placeholder ---- */
.divider{
  display:flex;align-items:center;gap:12px;
  margin:22px 0 16px;color:var(--bp-stone-500);
  font-size:var(--bp-text-caption);text-transform:uppercase;letter-spacing:.06em;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--bp-sand-300)}

.social-row{display:flex;gap:10px}
.btn-social{
  flex:1;position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--bp-font-body);font-weight:500;font-size:var(--bp-text-small);
  color:var(--bp-stone-500);
  background:var(--bp-ivory-100);
  border:1.5px solid var(--bp-sand-300);
  border-radius:var(--bp-radius-md);
  padding:11px 10px;cursor:not-allowed;opacity:.75;
}
.btn-social svg{flex:none;filter:grayscale(60%);opacity:.8}
/* tooltip "Prossimamente" */
.btn-social::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(3px);
  background:var(--bp-navy-900);color:#fff;
  font-size:var(--bp-text-caption);font-weight:500;white-space:nowrap;
  padding:5px 10px;border-radius:6px;
  opacity:0;pointer-events:none;
  transition:opacity var(--bp-duration-fast) var(--bp-ease),
             transform var(--bp-duration-fast) var(--bp-ease);
}
.btn-social::before{
  content:"";
  position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--bp-navy-900);border-bottom:none;
  opacity:0;transition:opacity var(--bp-duration-fast) var(--bp-ease);
}
.btn-social:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.btn-social:hover::before{opacity:1}

/* ---- footer card + link torna al sito ---- */
.auth-alt{
  text-align:center;font-size:var(--bp-text-small);
  color:var(--bp-stone-500);margin-top:20px;
}
.auth-alt a{color:var(--bp-blue-600);font-weight:600;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

.auth-back{text-align:center;margin-top:22px}
.auth-back a{
  color:rgba(250,247,242,.85);text-decoration:none;
  font-size:var(--bp-text-small);font-weight:500;
  display:inline-flex;align-items:center;gap:7px;
}
.auth-back a:hover{color:#fff;text-decoration:underline}

/* meter forza password (register/reset) */
.pw-meter{height:4px;border-radius:2px;background:var(--bp-ivory-100);margin-top:7px;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0;border-radius:2px;transition:width .25s var(--bp-ease),background .25s}

@media (max-width:480px){
  .auth-card{padding:26px 20px 22px}
  .social-row{flex-direction:column}
}