/* ============================================
   AUTH – Login / Reset / Neues Passwort
   --------------------------------------------
   - Gradient-Hintergrund (body)
   - Logo oben mittig
   - Card zentriert mit Fiori-ähnlicher Optik
   - Passt sich an Light/Dark-Theme an
   ============================================ */

html,
body {
  height: 100%;
}

/* Hintergrund wie von dir vorgegeben */
body {
  background-image: linear-gradient(
    to right bottom,
    #353535,
    #3e4147,
    #404f5a,
    #3e5e68,
    #3c6e71
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

/* Der Wrapper, der im base.jinja um den content liegt */
.app-page-body {
  min-height: 100vh;
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: flex-start;  /* oben beginnen */
}

/* Gesamter Auth-Bereich: Logo + Card */
.auth-page {
  width: 100%;
  max-width: 420px;
  margin-top: 10vh;      /* etwas Abstand vom oberen Rand */
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo oben mittig */
.auth-logo {
  margin-bottom: 1.5rem;
}

.auth-logo img {
  max-width: 220px;
  height: auto;
  display: block;
}

/* Die eigentliche Card (form-signin wiederverwendet) */
.form-signin {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow:
    3.4px 3.4px 2.7px rgba(0, 0, 0, 0.031),
    8.7px 8.7px 6.9px rgba(0, 0, 0, 0.044),
    17.7px 17.7px 14.2px rgba(0, 0, 0, 0.056),
    36.5px 36.5px 29.2px rgba(0, 0, 0, 0.069),
    100px 100px 80px rgba(0, 0, 0, 0.1);
}

/* Dark-Mode: Card dunkler, Text hell */
[data-bs-theme="dark"] .form-signin {
  background-color: #1f1f1f;
  color: #f5f5f5;
}

/* Form-Elemente innen */
.form-signin .form-floating {
  margin-bottom: 0.75rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

/* Checkbox / "angemeldet bleiben" */
.form-signin .form-check {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

/* "Passwort vergessen" & ähnliche Links: im Flow, zentriert */
.auth-links {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
}

.auth-links a {
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* Überschriften im Form */
.form-signin h1 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Kleine Anpassungen für sehr kleine Screens */
@media (max-width: 576px) {
  .auth-page {
    margin-top: 7vh;
    padding: 0 1rem;
  }

  .form-signin {
    padding: 1.25rem 1.25rem;
  }
}