/* ==========================================================================
   KasieFM Admin | Login — page-specific styles
   Requires css/main.css to be loaded first.
   ========================================================================== */

body.login-page{
  overflow:hidden;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-bg{
  position:fixed; inset:0; z-index:0;
}
.login-bg .gradient{
  position:absolute; inset:0;
  background:linear-gradient(to top right, var(--color-background), transparent, var(--color-surface-container-low));
}
.login-bg .blob{
  position:absolute; width:384px; height:384px; border-radius:50%;
  filter:blur(120px);
  animation:drift 8s ease-in-out infinite;
}
.login-bg .blob-primary{ top:-160px; right:-160px; background:rgba(173,198,255,0.1); }
.login-bg .blob-tertiary{ bottom:-160px; left:-160px; background:rgba(78,222,163,0.05); animation-delay:-4s; }

@keyframes drift{
  0%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(1deg); }
  100%{ transform:translateY(0) rotate(0deg); }
}

.login-main{ position:relative; z-index:10; width:100%; max-width:440px; padding:0 24px; }

.login-card{
  background:rgba(29,32,33,0.8);
  backdrop-filter:blur(12px);
  border:1px solid rgba(140,144,159,0.1);
  border-radius:8px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
  padding:32px;
  display:flex; flex-direction:column; align-items:center;
}

.login-logo{
  display:flex; flex-direction:column; align-items:center; margin-bottom:32px;
}
.login-logo .logo-image{
  width:64px; height:64px; border-radius:8px; overflow:hidden;
  background:var(--color-primary-container);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  box-shadow:0 10px 15px -3px rgba(173,198,255,0.2);
}
.login-logo .logo-image img{ width:100%; height:100%; object-fit:cover; }
.login-logo h1{ font-family:var(--font-headline); font-size:24px; line-height:32px; font-weight:600; letter-spacing:-0.01em; }
.login-logo p{ font-size:12px; color:var(--color-outline); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }

.login-form{ width:100%; display:flex; flex-direction:column; gap:16px; }
.login-form[hidden]{ display:none; }

.field-row-label{ display:flex; justify-content:space-between; align-items:center; padding:0 4px; }
.field-row-label a{ font-size:12px; font-weight:600; color:var(--color-primary); }
.field-row-label a:hover{ color:var(--color-primary-container); }

.password-field{ position:relative; }
.password-field input{ padding-right:44px; }
.password-toggle{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-outline);
}
.password-toggle .material-symbols-outlined{
  position:static; left:auto; transform:none;
}
.password-toggle:hover{ color:var(--color-on-surface); }

.remember-row{ display:flex; align-items:center; gap:8px; padding:4px; }
.remember-row input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--color-primary); }
.remember-row label{ font-size:12px; color:var(--color-on-surface-variant); cursor:pointer; }

.login-submit{ margin-top:8px; padding:16px; font-size:18px; }
.login-submit .spinner{
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(0,46,106,0.25); border-top-color:var(--color-on-primary);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.login-submit.success{ background:var(--color-tertiary); color:var(--color-on-tertiary); }

.reset-intro{ margin-bottom:4px; }
.reset-intro p{ font-size:13px; line-height:1.5; color:var(--color-on-surface-variant); }

.back-to-login{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:4px; font-size:13px; font-weight:600; color:var(--color-primary);
}
.back-to-login .material-symbols-outlined{ font-size:18px; }
.back-to-login:hover{ color:var(--color-primary-container); }

.field-error{
  font-size:12px; color:var(--color-error, #f2534c); padding:0 4px;
}

.invalid-token-state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
.invalid-token-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(242,83,76,0.1); color:var(--color-error, #f2534c);
  margin-bottom:8px;
}
.invalid-token-icon .material-symbols-outlined{ font-size:28px; }
.invalid-token-state h2{ font-size:18px; font-weight:600; }
.invalid-token-state p{ font-size:13px; line-height:1.5; color:var(--color-on-surface-variant); margin-bottom:8px; }
.invalid-token-state .login-submit{ text-decoration:none; justify-content:center; }

.login-footer{
  margin-top:32px; padding-top:16px; width:100%;
  border-top:1px solid rgba(66,71,84,0.3);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.login-footer .copyright{ font-size:12px; color:var(--color-outline-variant); }
.login-footer .links{ display:flex; gap:16px; }
.login-footer .links a{ display:flex; align-items:center; gap:4px; color:var(--color-outline); }
.login-footer .links a:hover{ color:var(--color-on-surface); }

.status-indicator{ margin-top:16px; display:flex; justify-content:center; align-items:center; gap:12px; }
.status-indicator .pill{
  display:flex; align-items:center; gap:8px;
  background:var(--color-surface-container-low);
  padding:6px 16px; border-radius:999px;
  border:1px solid rgba(66,71,84,0.2);
}