/* ============================================================
   LOGIN · Elba Appartamenti Greco CMS
   Sfondo animato (Ken Burns) + card vetro fluttuante. Mobile-first.
   ============================================================ */
:root{
  --sea-900:#08222F; --sea-800:#0E3A53; --sea-700:#14506E; --sea-600:#1B6E8C;
  --sea-500:#2A9DBE; --sea-400:#5BC0D9; --sand-500:#E0A43B; --sand-400:#F2C14E;
  --ink:#0F2230; --muted:#6A8392; --line:#E3ECF1; --card:#ffffff;
  --r-lg:22px; --r-md:14px;
  --shadow-xl:0 30px 80px -20px rgba(6,28,40,.55);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
.login-body{
  margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);
  color:var(--ink);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- sfondo animato ---------- */
.login-bg{
  position:fixed;inset:-4%;z-index:0;
  background:url('../App_Images/login-bg.jpg') center/cover no-repeat;
  animation:kenburns 28s ease-in-out infinite alternate;
  will-change:transform;
}
.login-overlay{
  position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(43,157,190,.40), transparent 55%),
    linear-gradient(160deg, rgba(8,34,47,.78) 0%, rgba(14,58,83,.62) 45%, rgba(8,34,47,.86) 100%);
}
.login-overlay::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent 60%),
            radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.35), transparent 60%),
            radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,.3), transparent 60%);
  opacity:.5;animation:floaty 12s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1.05) translate(0,0)}
  100%{transform:scale(1.18) translate(-2%,-2%)}
}
@keyframes floaty{0%{transform:translateY(0)}100%{transform:translateY(-12px)}}

/* ---------- stage + card ---------- */
.login-stage{position:relative;z-index:2;width:100%;max-width:430px;padding:24px;
  display:flex;flex-direction:column;align-items:center;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.login-card{
  width:100%;background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--r-lg);
  padding:34px 30px 28px;box-shadow:var(--shadow-xl);
  animation:bob 7s ease-in-out infinite alternate;
}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-9px)}}

.login-card__brand{text-align:center;margin-bottom:18px}
.login-logo{height:54px;width:auto;filter:drop-shadow(0 6px 18px rgba(8,34,47,.25))}
.login-claim{margin:12px 0 0;font-size:.78rem;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.login-title{font-size:1.32rem;font-weight:700;text-align:center;margin:6px 0 20px;color:var(--sea-800)}

/* ---------- form ---------- */
.login-card .form-floating>.form-control{
  border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff;
  height:62px;padding:1.72rem .95rem .5rem;font-size:1rem}
.login-card .form-floating>label{padding:1.16rem .95rem;color:var(--muted);font-weight:500}
.login-card .form-floating>label i{color:var(--sea-500)}
/* via il "pill" bianco di Bootstrap: la label resta dentro il campo */
.login-card .form-floating>label::after{display:none !important;background:transparent !important}
.login-card .form-floating>.form-control:focus~label,
.login-card .form-floating>.form-control:not(:placeholder-shown)~label{
  transform:scale(.8) translateY(-.86rem) translateX(.04rem);
  color:var(--sea-700);font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.95}
.login-card .form-floating>.form-control:focus~label i,
.login-card .form-floating>.form-control:not(:placeholder-shown)~label i{color:var(--sea-600)}
.login-card .form-control:focus{border-color:var(--sea-500);
  box-shadow:0 0 0 4px rgba(42,157,190,.16)}
.login-card .form-control{color:var(--ink)}
.login-card .form-control::placeholder{color:transparent}
/* neutralizza la tinta lilla dell'autofill Chrome: campo bianco premium */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.login-card input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out 0s}

.login-pass{position:relative}
.login-pass__toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--muted);width:42px;height:42px;border-radius:10px;
  cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.login-pass__toggle:hover{color:var(--sea-600);background:rgba(42,157,190,.10)}

.login-row .form-check-label{font-size:.9rem;color:var(--muted)}
.login-card .form-check-input:checked{background-color:var(--sea-600);border-color:var(--sea-600)}

.btn-login{
  height:54px;border:0;border-radius:var(--r-md);font-weight:700;font-size:1.02rem;color:#fff;
  background:linear-gradient(135deg,var(--sea-600),var(--sea-800));
  box-shadow:0 14px 30px -10px rgba(14,58,83,.7);transition:transform .15s,box-shadow .2s,filter .2s}
.btn-login:hover{filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:0 20px 38px -10px rgba(14,58,83,.8);color:#fff}
.btn-login:active{transform:translateY(0)}

.login-alert{display:flex;gap:.6rem;align-items:flex-start;background:#FEF2F2;color:#B42318;
  border:1px solid #FECACA;border-radius:var(--r-md);padding:.7rem .85rem;margin-bottom:16px;font-size:.9rem}
.login-foot{margin:18px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}
.login-foot .bi{color:var(--sea-500)}

.login-copy{margin-top:18px;color:rgba(255,255,255,.85);font-size:.78rem;text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.login-copy a{color:var(--sand-400);text-decoration:none}

@media (max-width:480px){
  .login-card{padding:28px 20px 22px;border-radius:18px}
  .login-logo{height:46px}
}
@media (prefers-reduced-motion:reduce){
  .login-bg,.login-card,.login-overlay::after{animation:none}
}