/*
 * login.css — eigene Gestaltung der Anmeldeseite.
 *
 * Baut auf den Design-Tokens aus app.css/theme.css auf und setzt bewusst
 * stärkere Akzente als die übrigen Seiten: eine Karte mit Leuchtkante,
 * Raster im Hintergrund und Monospace-Typografie im Terminal-Stil.
 */

.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.5rem;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: 2rem 1.75rem;
  border: 1px solid hsl(var(--border-secondary));
  border-radius: 1rem;
  background:
    linear-gradient(180deg, hsl(var(--bg-card) / .96), hsl(var(--bg-dialog) / .98));
  box-shadow:
    0 0 0 1px hsl(var(--brand-primary) / .08),
    0 24px 60px -20px #000,
    0 0 60px -30px hsl(var(--brand-primary) / .45);
  overflow: hidden;
}

/* Wandernde Lichtkante über der Karte. */
.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, hsl(var(--brand-primary) / .07) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: login-sweep 6s ease-in-out infinite;
}

.login-glow {
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 22rem;
  height: 12rem;
  background: radial-gradient(ellipse at center, hsl(var(--brand-primary) / .22), transparent 70%);
  pointer-events: none;
}

.login-field {
  position: relative;
  margin-bottom: 0.75rem;
}

.login-input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border-input));
  background: hsl(var(--bg-input));
  color: hsl(var(--brand-primary));
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.login-input::placeholder {
  color: hsl(var(--text-disabled));
  letter-spacing: 0.24em;
}

.login-input:focus {
  border-color: hsl(var(--brand-primary) / .7);
  box-shadow: 0 0 0 3px hsl(var(--brand-primary) / .14), 0 0 30px -12px hsl(var(--brand-primary) / .7);
}

.login-button {
  width: 100%;
  height: 3rem;
  margin-top: 1rem;
  border: 1px solid hsl(var(--brand-primary) / .55);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, hsl(var(--brand-primary) / .16), hsl(var(--brand-secondary) / .1));
  color: hsl(var(--brand-primary));
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow var(--duration-normal) var(--ease-default),
              background var(--duration-normal) var(--ease-default);
}

.login-button:hover:not(:disabled) {
  background: linear-gradient(135deg, hsl(var(--brand-primary) / .26), hsl(var(--brand-secondary) / .16));
  box-shadow: 0 0 26px -8px hsl(var(--brand-primary) / .8);
}

.login-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.login-message {
  min-height: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: hsl(var(--text-muted));
}

.login-message[data-kind="error"] { color: hsl(var(--status-error)); }
.login-message[data-kind="ok"] { color: hsl(var(--status-success)); }

.login-foot {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: hsl(var(--text-disabled));
  text-align: center;
}

@keyframes login-sweep {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card::after { animation: none; }
}