/* Anmeldeseite — mittig und dunkel.
 *
 * Alles hier haengt an `body[data-path="login"]`. Frappe setzt dieses
 * Attribut je Website-Seite, und es ist der einzige Aufhaenger, der die
 * Anmeldung trifft, ohne die oeffentlichen Formulare mitzunehmen: Der
 * Onboarding-Bogen und der Landing-Page-Fragebogen laufen im selben
 * Website-Kontext und wuerden von ungebundenen Regeln sonst mit
 * eingefaerbt.
 *
 * Eingebunden ueber `web_include_css` in hooks.py. Das Desk hat sein
 * eigenes Stylesheet (app_include_css -> brand.css) und bleibt unberuehrt.
 */

/* ---------- Grund und Ausrichtung ---------- */

/* Frappe stellt die Anmeldekarte oben links in einen Container und laesst
   darunter zwei Bildschirmhoehen Weiss stehen. Damit sie wirklich in der
   Mitte sitzt, muss die ganze Kette bis zum Karteninhalt auf volle Hoehe -
   ein `margin: auto` auf der Karte allein reicht nicht, weil ihr Elternteil
   nur so hoch ist wie sein Inhalt. */
body[data-path="login"] {
  background: #120132;
  color: #e8e2f2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

body[data-path="login"] .container,
body[data-path="login"] .page_content,
body[data-path="login"] #page-login {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Die Karte ---------- */

body[data-path="login"] .page-card {
  width: 100%;
  max-width: 25rem;
  margin: 0;
  padding: 2.4rem 2rem 2rem;
  background: #1c0a38;
  border: 1px solid #33205a;
  border-radius: 14px;
  /* Der Schatten traegt hier die Trennung, nicht der Rand: Auf dunklem
     Grund ist ein heller Rand ein Strich, ein Schatten ist Raum. */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  text-align: center;
}

body[data-path="login"] .page-card-head,
body[data-path="login"] .page-card-actions {
  text-align: center;
}

/* ---------- Marke ---------- */

/* Das Positivlogo ist dunkelviolett und verschwaende auf diesem Grund fast
   vollstaendig. Die negative Fassung liegt bereits in der App; getauscht
   wird ueber `content`, damit die Vorlage unangetastet bleibt. */
body[data-path="login"] .app-logo {
  content: url("/assets/dh/images/logo-neg.png");
  height: 2.4rem;
  width: auto;
  margin: 0 auto 1.2rem;
  display: block;
}

body[data-path="login"] h4 {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

body[data-path="login"] .text-muted,
body[data-path="login"] .page-card-head p,
body[data-path="login"] small {
  color: #a597ba !important;
}

/* ---------- Eingabefelder ---------- */

body[data-path="login"] .form-control,
body[data-path="login"] input[type="text"],
body[data-path="login"] input[type="email"],
body[data-path="login"] input[type="password"] {
  background: #26124a;
  border: 1px solid #3d2868;
  color: #f4f1f9;
  border-radius: 8px;
  /* 16px, weil iOS alles darunter beim Antippen heranzoomt - dieselbe
     Schwelle wie bei den Formularen. */
  font-size: 16px;
  min-height: 44px;
}

body[data-path="login"] .form-control::placeholder {
  color: #7d6b96;
}

body[data-path="login"] .form-control:focus {
  background: #2b1552;
  border-color: #b10075;
  box-shadow: 0 0 0 3px rgba(177, 0, 117, 0.28);
  color: #ffffff;
}

body[data-path="login"] .form-label,
body[data-path="login"] label {
  color: #c4b8d8;
  text-align: left;
  display: block;
}

/* Frappes Feld-Symbole sitzen im Eingabefeld und tragen die alte,
   fuer helle Flaechen gedachte Farbe. */
body[data-path="login"] .form-group svg,
body[data-path="login"] .input-group-text {
  color: #8a78a6;
  fill: #8a78a6;
  background: transparent;
  border-color: #3d2868;
}

/* ---------- Knoepfe ---------- */

body[data-path="login"] .btn-primary {
  background: #b10075;
  border-color: #b10075;
  color: #ffffff;
  font-weight: 600;
  min-height: 44px;
  border-radius: 8px;
}

body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-primary:focus {
  background: #cc0088;
  border-color: #cc0088;
  color: #ffffff;
}

/* Achtung bei Aenderungen an diesem Block: "Weiter" traegt `btn-default` und
   wuerde hier mitgefaerbt. Die Regel, die ihn zur Hauptaktion macht, steht
   weiter unten unter "Hauptaktion" - gleiche Spezifitaet, also entscheidet
   die Reihenfolge. Wer diesen Block nach unten schiebt, macht den Knopf
   wieder unsichtbar. */

body[data-path="login"] .btn-default,
body[data-path="login"] .btn-login-option {
  background: #2b1552;
  border: 1px solid #3d2868;
  color: #e8e2f2;
  min-height: 44px;
  border-radius: 8px;
}

body[data-path="login"] .btn-default:hover,
body[data-path="login"] .btn-login-option:hover {
  background: #372066;
  color: #ffffff;
}

body[data-path="login"] a {
  color: #ff5c8f;
}

body[data-path="login"] a:hover {
  color: #ff85ab;
}

/* ---------- Meldungen ---------- */

body[data-path="login"] .login-success-banner,
body[data-path="login"] .alert-success {
  background: rgba(95, 211, 155, 0.12);
  border: 1px solid rgba(95, 211, 155, 0.35);
  color: #8fe3ba;
}

body[data-path="login"] .login-error-banner,
body[data-path="login"] .alert-danger {
  background: rgba(255, 92, 143, 0.12);
  border: 1px solid rgba(255, 92, 143, 0.38);
  color: #ff9ab8;
}

/* ---------- Tastaturbedienung ---------- */

/* Auf dunklem Grund verschwindet Frappes heller Fokusschein. Wer mit der
   Tastatur anmeldet, braucht aber genau hier eine Ortsangabe. */
body[data-path="login"] :focus-visible {
  outline: 3px solid #ff5c8f;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 480px) {
  body[data-path="login"] { padding: 1rem 0.75rem; }
  body[data-path="login"] .page-card {
    padding: 1.8rem 1.25rem 1.5rem;
    border-radius: 12px;
  }
}

/* ---------- Hauptaktion ---------- */

/* Muss nach der `.btn-default`-Regel stehen: gleiche Spezifitaet, also
   entscheidet die Reihenfolge. */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary.btn-login {
  background: #e33964;
  border-color: #e33964;
  color: #ffffff;
  font-weight: 600;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-login:focus,
body[data-path="login"] .btn-primary.btn-login:hover {
  background: #f0567c;
  border-color: #f0567c;
  color: #ffffff;
}

/* Sichtbarer Fokusring fuer die Tastaturbedienung - der Standardring von
   Bootstrap geht auf dem dunklen Grund unter. */
body[data-path="login"] .btn-login:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}