/*
 * Lumen Layout - Absendebereitschaft der Formulare
 *
 * Die Aktionszeile der Formulare klebt am unteren Bildschirmrand (form.css,
 * "Sticky Formaktionen"). Damit ist Speichern auch dann erreichbar, wenn der
 * Nutzer die untere Haelfte des Formulars nie gesehen hat. Diese Komponente
 * zeigt dort, was noch fehlt:
 *
 *   .formstatus         - Sprechblase HINTER dem Absende-Button ("3 Punkte
 *                         offen"), Zeiger deutet auf den Button. Erscheint NUR,
 *                         wenn etwas offen ist.
 *   .formstatus-liste   - Aufklappliste am Kasten (was genau fehlt, anklickbar)
 *   .formstatus-dialog  - derselbe Inhalt als jQuery-UI-Dialog, wenn der Nutzer
 *                         trotzdem abgesendet hat
 *   .formstatus-offen   - am Absende-Button: gedaempfte Optik, solange etwas
 *                         offen ist (bewusst dieselbe Optik wie gesperrte
 *                         Buttons, siehe unten)
 *
 * Ob das Formular absendebereit ist, zeigt der BUTTON (gedaempft/normal); WAS
 * fehlt, zeigt der Kasten. Deshalb darf der Kasten im Gutzustand verschwinden -
 * die Bereitschaft bleibt trotzdem dauerhaft sichtbar. Aufgebaut wird alles per
 * JS (components/formstatus.js), damit die geteilten Templates und das
 * klassische Layout unveraendert bleiben.
 */

/* ---------- Absende-Button und Kasten als eine Einheit ----------
   Beide stecken in diesem Container, damit der Zeilenumbruch der Aktionszeile
   nicht zwischen sie fallen kann (Flexbox hat kein "keep together"). Der
   Abstand innen entspricht dem gap der Leiste (9px, components/page.css). */
.formstatus-paar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Notausgang: Reicht der Platz selbst fuer das Paar nicht, rutscht der
     Kasten unter seinen Button - immer noch direkt daneben, nie hinter
     einem fremden Button. */
  flex-wrap: wrap;
}

/* ---------- Sprechblase in der Aktionszeile ---------- */
.formstatus {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Mindestbreite haelt "1 Punkt offen" und "12 Punkte offen" gleich breit,
     damit der Abbrechen-Button beim Zaehlerwechsel nicht wandert. */
  min-width: 10.5rem;
  max-width: 22rem;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--amber-bg);
  color: var(--amber-d);
  font: inherit;
  font-size: 0.78125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  /*
   * Ein- und Ausblenden ohne JS-Animation: Deckkraft plus zusammenlaufende
   * Breite. Die Breite laeuft ueber min-width/max-width (beide, sonst gewinnt
   * min-width) - `width: auto` ist nicht animierbar. visibility wird erst am
   * Ende umgeschaltet, damit der Text bis dahin sichtbar bleibt, danach aber
   * aus dem Vorlese-Baum verschwindet.
   */
  transition:
    opacity 0.16s ease,
    min-width 0.18s ease,
    max-width 0.18s ease,
    padding 0.18s ease,
    border-width 0.18s ease,
    margin-inline-start 0.18s ease,
    margin-inline-end 0.18s ease,
    visibility 0s linear 0s;
}

.formstatus:hover {
  filter: brightness(0.97);
}

.formstatus .formstatus-zahl {
  /* Tabellenziffern: 1 und 9 sind gleich breit */
  font-variant-numeric: tabular-nums;
}

.formstatus .formstatus-pfeil {
  margin-left: auto;
  padding-left: 4px;
  font-size: 0.8125rem;
  line-height: 1;
}

/* Zeiger auf den Nachbar-Button. Die Lage steht fest (der Kasten sitzt direkt
   hinter bzw. vor dem Button), deshalb genuegen zwei Dreiecke aus Rahmen -
   ohne Messung im JS. */
.formstatus::before,
.formstatus::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
}

/* Standard: Kasten steht HINTER dem Button, Zeiger deutet nach links */
.formstatus::before {
  right: 100%;
  border-right-color: var(--amber);
}

.formstatus::after {
  right: 100%;
  margin-right: -1px;
  border-right-color: var(--amber-bg);
}

/* Rueckfall bei Leisten mit drei oder mehr Aktionen: Kasten steht VOR dem
   Button, Zeiger deutet nach rechts */
.formstatus.formstatus-zeigt-rechts::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: var(--amber);
}

.formstatus.formstatus-zeigt-rechts::after {
  right: auto;
  left: 100%;
  margin-right: 0;
  margin-left: -1px;
  border-right-color: transparent;
  border-left-color: var(--amber-bg);
}

/* ---------- Verborgener Zustand (nichts offen) ----------
   Der Kasten bleibt im DOM und laeuft auf Breite 0 zusammen. Das negative
   Margin schluckt eine der beiden Flex-Luecken der Aktionszeile (gap: 9px in
   components/page.css), damit zwischen den Buttons genau ein Abstand bleibt. */
.formstatus.formstatus-verborgen {
  opacity: 0;
  visibility: hidden;
  min-width: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin-inline-start: -9px;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    min-width 0.18s ease,
    max-width 0.18s ease,
    padding 0.18s ease,
    border-width 0.18s ease,
    margin-inline-start 0.18s ease,
    margin-inline-end 0.18s ease,
    visibility 0s linear 0.18s;
}

/* Steht der Kasten vor dem Button, muss die Luecke auf der anderen Seite weg */
.formstatus.formstatus-zeigt-rechts.formstatus-verborgen {
  margin-inline-start: 0;
  margin-inline-end: -9px;
}

@media (prefers-reduced-motion: reduce) {
  .formstatus {
    transition: none;
  }

  .formstatus.formstatus-verborgen {
    transition: none;
  }
}

/* ---------- Absende-Button, solange etwas offen ist ----------
 * Bewusst dieselbe Darstellung wie gesperrte Buttons (button.css), damit es im
 * Produkt nur eine gedaempfte Buttondarstellung gibt. Ueber die Custom
 * Properties der Variante behaelt der Button dabei seinen Farbton: Ein
 * Speichern-Button bleibt als Primaeraktion erkennbar, auch solange er noch
 * nicht bereit ist.
 *
 * NICHT uebernommen werden `cursor: not-allowed` und das Attribut `disabled`:
 * Der Button bleibt anklickbar (er zeigt dann die Pruefliste), bleibt im
 * Tabulator-Lauf und behaelt seinen Namen.
 *
 * Die :hover/:focus-Fassungen sind noetig, weil die Variantenregeln aus
 * button.css (z. B. `.btn-success:hover { color: #fff }`) sonst weisse Schrift
 * auf die helle Sperrflaeche setzen wuerden.
 */
/*
 * Schriftfarbe NICHT --gesperrt-text: die Sperrfarben sind auf 4,3:1 ausgelegt,
 * was fuer wirklich gesperrte Bedienelemente genuegt (WCAG 1.4.3 nimmt inaktive
 * Elemente aus). Dieser Button ist aber aktiv - anklickbar, im Tabulator-Lauf,
 * mit Hover-Reaktion -, also greift die Ausnahme nicht und er braucht die volle
 * 4,5:1. --formstatus-offen-text (je Variante in button.css) haelt mindestens
 * 4,6:1 und bleibt dabei so gedaempft, dass der "noch nicht bereit"-Eindruck
 * erhalten bleibt. Der Fallback deckt Varianten ohne eigenen Wert ab (neutrale
 * Sperrflaeche --gesperrt-flaeche #dfe2e4 aus tokens.css: 4,72:1).
 */
.btn.formstatus-offen,
.btn.formstatus-offen:hover,
.btn.formstatus-offen:focus {
  background: var(--gesperrt-flaeche);
  border-color: var(--gesperrt-rand);
  color: var(--formstatus-offen-text, #5a6368);
  filter: none;
  cursor: pointer;
}

/* Anfassbar bleiben: leichte Abdunklung beim Ueberfahren - anders als bei
   wirklich gesperrten Buttons, die sich nicht ruehren. */
.btn.formstatus-offen:hover {
  filter: brightness(0.96);
}

/* ---------- Aufklappliste am Kasten ---------- */
.formstatus-liste {
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  z-index: 6;
  min-width: 17rem;
  max-width: min(24rem, 90vw);
  max-height: 15rem;
  overflow-y: auto;
  padding: 8px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 6px 24px rgba(16, 40, 44, 0.16);
  white-space: normal;
  cursor: default;
}

.formstatus-liste[hidden] {
  display: none;
}

.formstatus-liste-kopf {
  padding: 2px 14px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Fussnote, wenn ein Zweit-Button reduzierte Anforderungen hat
   (Zwischenspeichern: Pflichtfelder duerfen leer bleiben) */
.formstatus-liste-fuss {
  margin-top: 4px;
  padding: 6px 14px 2px;
  border-top: 1px solid var(--line-2);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.formstatus-eintrag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.formstatus-eintrag:hover {
  background: var(--teal-soft);
}

.formstatus-art {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--amber-bg);
  color: var(--amber-d);
  font-size: 0.6875rem;
  font-weight: 600;
}

.formstatus-art.formstatus-art-format {
  background: var(--red-bg);
  color: var(--red-d);
}

.formstatus-art.formstatus-art-bedingung {
  background: var(--blue-bg);
  color: var(--blue-d);
}

/* ---------- Dialog nach dem Absendeversuch ----------
   Inhalt eines jQuery-UI-Dialogs (Rahmen/Titel/Overlay kommen von dort, damit
   Fokusfang, Esc und Optik zu den uebrigen Dialogen passen). */
.formstatus-dialog {
  min-width: 17rem;
}

.formstatus-dialog-text {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.formstatus-dialog .formstatus-eintrag {
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.formstatus-dialog .formstatus-eintrag:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}