/* =========================================================================
   Konto anlegen und Passwort zurücksetzen im lozi-Look.

   Warum eine eigene Datei neben 10-login.css: Die Anmeldeseite erbt von
   Indicos `layout/auth_base.html` und bekommt dadurch die Klasse `.login-page`.
   `/register/` und `/reset-password/` tun das nicht — sie erben von
   `layout/base.html`, also vom normalen Indico-Seitengerüst mit Kopfleiste,
   Sitzungsleiste und Fußzeile. Dieselbe Klasse gibt es dort nicht, und
   `.login-page` lässt sich auch nicht nachrüsten: Indico setzt darauf
   `display: table; position: absolute; height: 100%` — das Seitengerüst würde
   auseinanderfallen.

   Deshalb setzen die drei Template-Overrides unter
   `custom/templates/core/auth/` eine eigene Klasse `lozi-auth-page` auf den
   Seitencontainer, und alles hier hängt daran.

   Diese Eingrenzung ist der ganze Punkt: `layout/base.html` trägt auch die
   Verwaltung, in der die Orga arbeitet. Ohne die Klasse am Container würde
   dasselbe Stylesheet dort mitfärben.

   Das Seitengerüst drumherum (Kopfleiste, Menü, Fußzeile, Hintergrund) sieht
   auf allen öffentlichen Seiten gleich aus und steht in 30-oeffentlich.css.
   Die Farben stehen in 05-farben.css.

   Getestet gegen Indico 3.3.12. Nach einem Indico-Update kurz nachsehen, ob
   die Klassennamen noch stimmen — besonders die des React-Anmeldeformulars
   (Semantic UI), das Indico unter `/register/?token=…` einhängt.
   ========================================================================= */

/* ---- Der Kasten mit dem Formular -------------------------------------- */

/* Indico gibt der Seite feste 1000 px Breite. Für ein Formular mit zwei, drei
   Feldern ist das zu weit; die Anmeldeseite daneben ist ein schmaler Kasten. */
.fixed-width-standalone-page.lozi-auth-page {
  width: auto;
  max-width: min(760px, calc(100% - 2em));
  margin: 2.5em auto 3em;
  padding: 2em 2.25em 1.75em;
  background: var(--lozi-card);
  border: 1px solid var(--lozi-line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: var(--lozi-text);
  font-family: var(--lozi-sans);
}

.lozi-auth-page header h2,
.lozi-auth-page header h3 {
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
  letter-spacing: -0.01em;
}

.lozi-auth-page .page-content,
.lozi-auth-page p {
  color: var(--lozi-text2);
}

.lozi-auth-page a {
  color: var(--lozi-accent);
}

.lozi-auth-page a:hover {
  color: var(--lozi-accent2);
}

.lozi-auth-page .message-box,
.lozi-auth-page .login-reason-box {
  background: var(--lozi-card2);
  border: 1px solid var(--lozi-line);
  border-radius: 10px;
  color: var(--lozi-text2);
}

/* ---- Klassisches Indico-Formular (Passwort-Reset, E-Mail-Bestätigung) --- */

.lozi-auth-page .i-form {
  color: var(--lozi-text2);
  font-family: var(--lozi-sans);
  max-width: none;
}

.lozi-auth-page .form-label label {
  color: var(--lozi-text2);
}

.lozi-auth-page .required {
  color: var(--lozi-accent);
}

.lozi-auth-page .i-form .form-field input,
.lozi-auth-page .i-form .form-field textarea,
.lozi-auth-page .i-form .form-field select {
  background: var(--lozi-card2);
  border: 1px solid var(--lozi-line2);
  border-radius: 8px;
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
}

.lozi-auth-page .i-form .form-field input:focus,
.lozi-auth-page .i-form .form-field textarea:focus {
  border-color: var(--lozi-accent);
  outline: none;
}

.lozi-auth-page input::placeholder,
.lozi-auth-page textarea::placeholder {
  color: var(--lozi-muted);
}

/* Siehe 10-login.css: Chrome malt automatisch ausgefüllte Felder sonst hell. */
.lozi-auth-page input:-webkit-autofill,
.lozi-auth-page input:-webkit-autofill:hover,
.lozi-auth-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lozi-text);
  -webkit-box-shadow: 0 0 0 1000px var(--lozi-card2) inset;
  caret-color: var(--lozi-text);
}

/* Die `:not(…)`-Kette stammt aus Indicos eigener Regel — ohne sie ist unser
   Selektor der schwächere und der graue Standardknopf gewinnt. */
.lozi-auth-page .i-button:not(.label) {
  background: var(--lozi-card2);
  background-image: none;
  border: 1px solid var(--lozi-line2);
  border-radius: 8px;
  color: var(--lozi-text2);
  font-family: var(--lozi-mono);
  text-shadow: none;
}

.lozi-auth-page .i-button:not(.label):hover {
  background: var(--lozi-card);
  background-image: none;
  border-color: var(--lozi-line2);
  color: var(--lozi-text);
}

.lozi-auth-page .i-button.highlight:not(.label):not(.borderless):not(.text-color) {
  background: var(--lozi-accent);
  background-image: none;
  border-color: var(--lozi-accent);
  color: #06121f;
  font-weight: 600;
}

.lozi-auth-page
  .i-button.highlight:not(.label):not(.borderless):not(.text-color):hover {
  background: var(--lozi-accent2);
  background-image: none;
  border-color: var(--lozi-accent2);
  color: #06121f;
}

/* Das CAPTCHA rendert Indico als React-Widget in diesen leeren Kasten. */
.lozi-auth-page #captcha {
  color: var(--lozi-text2);
}

/* ---- React-Anmeldeformular unter /register/?token=… -------------------- */

/* Diesen Schritt baut Indico nicht aus dem klassischen Formular, sondern aus
   Semantic-UI-Komponenten. Deshalb noch einmal dieselben Farben, nur an
   anderen Klassen. */

.lozi-auth-page .ui.form {
  font-family: var(--lozi-sans);
  color: var(--lozi-text2);
}

.lozi-auth-page .ui.form .field > label,
.lozi-auth-page .ui.form label,
.lozi-auth-page .ui.checkbox label {
  color: var(--lozi-text2);
}

.lozi-auth-page fieldset {
  border: 1px solid var(--lozi-line);
  border-radius: 10px;
}

.lozi-auth-page legend {
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
}

.lozi-auth-page .ui.form input:not([type]),
.lozi-auth-page .ui.form input[type="text"],
.lozi-auth-page .ui.form input[type="email"],
.lozi-auth-page .ui.form input[type="password"],
.lozi-auth-page .ui.form input[type="tel"],
.lozi-auth-page .ui.form input[type="url"],
.lozi-auth-page .ui.form textarea,
.lozi-auth-page .ui.selection.dropdown {
  background: var(--lozi-card2);
  border: 1px solid var(--lozi-line2);
  border-radius: 8px;
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
}

.lozi-auth-page .ui.form input:not([type]):focus,
.lozi-auth-page .ui.form input[type="text"]:focus,
.lozi-auth-page .ui.form input[type="email"]:focus,
.lozi-auth-page .ui.form input[type="password"]:focus,
.lozi-auth-page .ui.form textarea:focus {
  background: var(--lozi-card2);
  border-color: var(--lozi-accent);
  color: var(--lozi-text);
}

.lozi-auth-page .ui.selection.dropdown .menu,
.lozi-auth-page .ui.selection.dropdown .menu > .item {
  background: var(--lozi-card2);
  border-color: var(--lozi-line);
  color: var(--lozi-text);
}

.lozi-auth-page .ui.message {
  background: var(--lozi-card2);
  border: 1px solid var(--lozi-line);
  border-radius: 10px;
  box-shadow: none;
  color: var(--lozi-text2);
}

.lozi-auth-page .ui.button {
  background: var(--lozi-card2);
  border: 1px solid var(--lozi-line2);
  border-radius: 8px;
  color: var(--lozi-text2);
  font-family: var(--lozi-mono);
  text-shadow: none;
}

.lozi-auth-page .ui.button:hover {
  background: var(--lozi-card);
  color: var(--lozi-text);
}

.lozi-auth-page .ui.primary.button,
.lozi-auth-page .ui.primary.buttons .button {
  background: var(--lozi-accent);
  border-color: var(--lozi-accent);
  color: #06121f;
  font-weight: 600;
}

.lozi-auth-page .ui.primary.button:hover,
.lozi-auth-page .ui.primary.buttons .button:hover {
  background: var(--lozi-accent2);
  border-color: var(--lozi-accent2);
  color: #06121f;
}

/* Kopfleiste, Menü und Fußzeile stehen nicht mehr hier: Sie sehen auf allen
   öffentlichen Seiten gleich aus und liegen deshalb in 30-oeffentlich.css. */