/* Anmeldung von git.henry.re im gemeinsamen henry.re-Design (infra/anmeldung, Vorbild fh.henry.re).
   Die !important sind nötig, weil GitLab mit Hilfsklassen und eigenem Thema arbeitet. */
html.html-devise-layout,
body.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  color-scheme: dark;
  background: #0d0d0d !important;
  background-image: none !important;
  color: #d6d6d6 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
html.html-devise-layout::before, html.html-devise-layout::after,
body.login-page::before, body.login-page::after { display: none !important; }
body.login-page .footer-container,
body.login-page img.js-portrait-logo-detection,
body.login-page .gl-form-password-input-toggle,
body.login-page small.form-text { display: none !important; }
body.login-page .container { max-width: none !important; margin: 0 !important; padding: 0 !important; align-self: flex-start !important; }
body.login-page main.content { margin: 0 !important; padding: 0 !important; }
body.login-page main.content > .gl-my-5 {
  max-width: 22rem;
  margin: 0 auto !important;
  padding: clamp(3rem, 16vh, 8rem) 1.25rem 3rem !important;
}
body.login-page .col-sm-12,
body.login-page .bar { width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: left !important; background: transparent !important; box-shadow: none !important; }
/* Wortmarke kommt aus dem Titel unter Admin > Darstellung */
body.login-page h1 {
  margin: 0 0 2rem !important;
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  color: #00bfff !important;
}
body.login-page h1::after {
  content: "Anmelden";
  display: block;
  margin-top: 2rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  color: #d6d6d6;
}
body.login-page .form-group { margin: 0 !important; }
body.login-page .form-group + .form-group { margin-top: 1rem !important; }
body.login-page .col-form-label {
  display: block !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #d6d6d6 !important;
}
body.login-page input.gl-form-input,
body.login-page input.form-control {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 3rem;
  padding: 0.75rem 0.875rem !important;
  font: inherit !important;
  font-size: 1rem !important;
  color: #d6d6d6 !important;
  background: #151515 !important;
  border: 1px solid #666666 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body.login-page input.gl-form-input:focus,
body.login-page input.form-control:focus { box-shadow: none !important; }
body.login-page input:focus-visible,
body.login-page button:focus-visible,
body.login-page a:focus-visible {
  outline: 2px solid #00bfff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
body.login-page .gl-form-checkbox { margin: 1rem 0 0 !important; }
body.login-page .custom-control-label { font-size: 0.875rem !important; font-weight: 400 !important; color: #9a9a9a !important; }
body.login-page .gl-mb-3 { margin-bottom: 0 !important; }
body.login-page button.btn-confirm {
  display: block;
  width: 100% !important;
  min-height: 3rem;
  margin: 1rem 0 0 !important;
  padding: 0.75rem 0.875rem !important;
  font: inherit !important;
  font-weight: 600 !important;
  color: #0d0d0d !important;
  background: #00bfff !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body.login-page button.btn-confirm:hover { background: #4dd2ff !important; }
body.login-page button.btn-confirm .gl-button-text { font-weight: 600 !important; font-size: 1rem !important; color: #0d0d0d !important; }
body.login-page [data-testid="passkey-form"] { margin: 0 !important; }
body.login-page [data-testid="passkey-login-button"] {
  display: block;
  width: 100% !important;
  min-height: 3rem;
  margin: 1rem 0 0 !important;
  padding: 0.75rem 0.875rem !important;
  font: inherit !important;
  font-weight: 600 !important;
  color: #d6d6d6 !important;
  background: transparent !important;
  border: 1px solid #666666 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body.login-page [data-testid="passkey-login-button"]:hover { background: #151515 !important; }
body.login-page [data-testid="passkey-login-button"] svg { display: none !important; }
body.login-page [data-testid="passkey-login-button"] .gl-button-text { font-weight: 600 !important; font-size: 1rem !important; color: #d6d6d6 !important; }
/* Fehlermeldungen stehen zwischen Überschrift und erstem Feld */
body.login-page .flash-container {
  position: fixed !important;
  top: calc(clamp(3rem, 16vh, 8rem) + 5.5rem) !important;
  left: max(1.25rem, calc(50% - 9.75rem)) !important;
  width: min(19.5rem, calc(100% - 2.5rem)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10;
}
body.login-page .flash-container .gl-alert,
body.login-page .flash-container .gl-alert-content,
body.login-page .flash-container .gl-alert-body {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #ff7070 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.login-page .flash-container .gl-alert-icon-container,
body.login-page .flash-container .gl-alert-dismiss,
body.login-page .flash-container button { display: none !important; }
body.login-page .flash-container .gl-alert-body::before { content: "Fehler: "; font-weight: 600; }