/* cx33 - Anmeldeseite, Kurzmeldungen und Rueckfragefenster. */

/* --- Anmeldung ----------------------------------------------------------- */

body.centered {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(109, 140, 255, .18), transparent 60%),
    radial-gradient(700px 400px at 95% 110%, rgba(139, 92, 246, .16), transparent 60%),
    var(--bg);
}

.login {
  width: min(420px, 100%);
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow);
  margin: 0;
}

.login .brand-mark { width: 44px; height: 44px; border-radius: 13px; margin: 0 auto 14px; }
.login h1 { margin: 0 0 6px; font-size: 20px; font-weight: 650; text-align: center; }
.login h1 span { color: var(--muted); font-weight: 400; margin-left: 2px; }
.login .login-sub { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 24px; }
.login button { width: 100%; margin-top: 6px; }

/* --- Kurzmeldungen und Rueckfragen ---------------------------------------- */

.toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 80;
}

.toast {
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-lt);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  max-width: 380px;
  cursor: pointer;
  animation: auftauchen .2s ease;
}

/* Der Verweis in einer Meldung. Er erbt die Farbe der Meldung - gruen bei
   Erfolg, rot bei einem Fehler - und traegt seine Unterstreichung selbst,
   damit man ihn vom uebrigen Text unterscheidet. */
.toast a { color: inherit; text-decoration: underline; font-weight: 600; }
.toast a:hover { text-decoration: none; }

.toast.weg { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast.ok { border-color: rgba(52, 211, 153, .5); color: var(--ok); }
.toast.err { border-color: rgba(248, 113, 113, .5); color: var(--bad); }

@keyframes auftauchen { from { transform: translateY(8px); opacity: 0; } }

.dialog-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, .6);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 90;
}

.dialog {
  width: min(440px, 100%);
  background: var(--panel);
  border: 1px solid var(--line-lt);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.dialog-text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; }
.dialog-eingabe { margin: 0 0 16px; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 10px; }

/* --- Meldungen im Seiteninhalt ------------------------------------------- */
/*
 * Hierher gezogen aus components.css: 250 Zeilen pro Datei, und die
 * Reihenfolge stimmt - meldungen.css wird nach components.css geladen, die
 * Regeln bleiben also die spaeteren.
 */
/* --- Meldungen ----------------------------------------------------------- */

.flash {
  padding: 11px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13.5px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.flash.ok { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .1); color: var(--ok); }
.flash.error { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .1); color: var(--bad); }
.flash.warn-rand { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); }

/* Meldung direkt an einem Feld. Ein <label> darf nur Phrasing-Content
   enthalten, also kein <div> - deshalb ein <span> als Block. */
span.flash { display: block; margin: 8px 0 0; }
.tag.update {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  border-color: rgba(109, 140, 255, .5);
  background: rgba(109, 140, 255, .12);
}
.tag.update svg { width: 11px; height: 11px; flex: none; }
/* Ohne Text braucht das Abzeichen keine seitliche Luft - sonst wird aus dem
   runden Zeichen eine Pille. */
.tag.update.nur-zeichen { padding: 3px; border-radius: 999px; }
.flash.update-rand { border-color: rgba(109, 140, 255, .5); background: rgba(109, 140, 255, .08); }
ul.commits .tag.update { margin-right: 6px; }
.flash pre { margin: 0; white-space: pre-wrap; color: inherit; background: none; border: 0; padding: 0; }