/* Anmeldedialog und Konto-Bereich im Menü (Phase 10). */

/* Steht seit dem Menü-Umbau in der eigenen Gruppe "Konto" - die frühere
   Trennlinie nach unten übernimmt jetzt die Gruppenüberschrift. */
.app-menu__account {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.app-menu__account-info {
  display: flex;
  flex-direction: column;
}

.app-menu__account-email {
  font-weight: 600;
  word-break: break-all;
}

.app-menu__account-role {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Verweis auf /moderation - als Link ausgezeichnet, aber wie die Knöpfe
   daneben dargestellt (Phase 12). */
.app-menu__moderation {
  display: block;
  text-align: center;
  text-decoration: none;
}

.app-menu__account-warning {
  font-size: 0.85rem;
  color: var(--color-danger);
}

/* Der öffentlich sichtbare Name samt Änderungsknopf (Phase 13g). Untereinander
   statt nebeneinander: Der Name kann 30 Zeichen lang sein, und ein Knopf, der
   daneben auf ein paar Pixel zusammenschrumpft, ist auf dem Smartphone nicht
   mehr zu treffen. */
.app-menu__account-username {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.app-menu__account-name {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  word-break: break-word;
}

/* --- Dialog --- */

/* Der Overlay-Container ist zugleich der Blätterbereich.

   Vorher stand hier align-items: center ohne overflow. Ein Dialog, der höher
   ist als das Fenster, wird dadurch OBEN UND UNTEN abgeschnitten - und weil
   der Body währenddessen auf overflow: hidden steht, liess sich nichts davon
   erreichen: kein Schliessen-Knopf, kein Inhalt, kein Weg zurück. Auf einem
   Smartphone war damit das Werbefenster eine Sackgasse.

   Die Kombination unten ist der übliche Ausweg: Der Container richtet oben
   aus und blättert, das Kind bekommt margin: auto. Ist Platz da, zentriert
   das margin den Dialog wie zuvor; ist keiner da, bleibt er vollständig
   erreichbar.

   Betrifft alle Dialoge dieser Bauart - Anmeldung, Merkliste, Ausflugspläne,
   Melden, Ausrüstung -, nicht nur den, in dem es aufgefallen ist. */
.auth-modal {
  position: fixed;
  inset: 0;
  /* Über der Detailansicht (2000, css/detail.css). Auf dem Smartphone ist
     jene ein Vollbild-Overlay, und genau aus ihr heraus werden zwei dieser
     Dialoge geöffnet: "Zu Ausflugsplan hinzufügen" und "Fehler oder Vorschlag
     melden". Mit dem früheren 1200 lagen sie dahinter - der Dialog war offen,
     aber nicht zu sehen, und die Detailansicht darüber liess sich weiter
     bedienen. Auf dem Rechner fiel das nie auf: dort ist die Detailansicht
     eine Rasterspalte mit z-index 2 (css/responsive.css).

     Der Abstand nach unten (2000) und nach oben zum Einreichen-Formular
     (2100, css/form.css) bleibt bewusst klein: die Reihenfolge der Fenster
     untereinander ändert sich dadurch nicht. */
  z-index: 2050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  /* Auf Geräten mit Home-Indikator sonst hinter der Systemleiste. */
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  /* Am Ende der Liste nicht die Seite dahinter mitziehen. */
  overscroll-behavior: contain;
}

.auth-modal[hidden] {
  display: none;
}

body.auth-modal-open {
  overflow: hidden;
}

.auth-dialog {
  width: 100%;
  max-width: 26rem;
  /* Zentriert, solange Platz ist - siehe .auth-modal. */
  margin: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.auth-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.auth-dialog__title {
  font-size: 1.3rem;
}

.auth-dialog__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-text-muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.auth-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.auth-form__label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.auth-form__input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
}

.auth-form__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Erklärung unter einem Eingabefeld (Phase 13g): Beim Benutzernamen muss
   dabeistehen, dass er öffentlich wird - das ist der einzige Unterschied zur
   E-Mail-Adresse darüber, und niemand kann ihn erraten. */
.auth-form__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.auth-form__status:empty {
  display: none;
}

.auth-form__status {
  font-size: 0.9rem;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.auth-form__status--error {
  background: #fdecea;
  color: var(--color-danger);
}

.auth-form__status--ok {
  background: #e8f5e9;
  color: var(--color-primary-dark);
}

.auth-dialog__switch {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  background: none;
  border: none;
  padding: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* --- Kontoseiten (serverseitig gerendert) --- */

.account__form {
  margin-top: var(--space-lg);
}

/* --- "Meine Einträge" (Phase 11) --- */

.auth-dialog--wide {
  max-width: 44rem;
  max-height: 85vh;
  overflow-y: auto;
}

.submission-list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.submission {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.submission__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.submission-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
}

.submission-status--pending {
  background: #fff8e1;
  color: #8d6e00;
}

.submission-status--approved {
  background: #e8f5e9;
  color: var(--color-primary-dark);
}

.submission-status--rejected {
  background: #fdecea;
  color: var(--color-danger);
}

.submission__category {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.submission__title {
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}

.submission__meta,
.submission__text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Begründung der Moderation bei einer Ablehnung. */
.submission__note {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-left: 3px solid var(--color-danger);
  background: #fdecea;
  font-size: 0.9rem;
}

.submission__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Rückmeldung im Formular (Serverfehler beim Einreichen). */
.form-status:empty {
  display: none;
}

.form-status {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.form-status--error {
  background: #fdecea;
  color: var(--color-danger);
}

/* --- Mein Konto (Phase 13h) ----------------------------------------------- */

.account-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.account-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

/* Bezeichnung über dem Wert statt daneben: Auf dem Smartphone bliebe für eine
   E-Mail-Adresse in der zweiten Spalte kaum Platz, und sie bräche mitten im
   Wort um. */
.account-facts__row {
  display: flex;
  flex-direction: column;
}

.account-facts__label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.account-facts__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  overflow-wrap: anywhere;
}

.account-facts__note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.account-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

/* Der Löschbereich hebt sich ab, bevor man ihn aufklappt. */
.account-section--danger {
  border-color: var(--color-danger);
}

.account-section__summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-xs) 0;
}

/* Abstand zum Formular erst im aufgeklappten Zustand - zugeklappt sollen die
   Abschnitte eng beieinander stehen. */
.account-section[open] .auth-form,
.account-section[open] > div {
  margin-top: var(--space-sm);
}

.account-delete__note {
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.account-delete__warning {
  font-weight: 600;
  color: var(--color-danger);
}