/* ===========================================================================
   Modul Abrechnung — UEBERGABE.md, Abschnitt 23

   Der Reiter liegt im Turnierbetrieb und **erbt dessen Dichte**: Tabellen,
   Karten auf schmalen Geräten, Zeilenaktionen und Ausklapper stehen bereits in
   turnierbetrieb.css und werden hier nicht wiederholt. Was hier steht, sind
   die paar Ergänzungen, die es dort noch nicht gibt — alle mit dem Vorsatz
   `.ab-`.

   Zwei Dinge sind der Abrechnung eigen und rechtfertigen eigenes CSS:

     **Beträge werden verglichen, nicht gelesen.** Wer eine Spalte mit
     Geldbeträgen vor sich hat, überschlägt sie. Das geht nur, wenn die Ziffern
     gleich breit sind und rechts auf derselben Stelle enden — sonst muss man
     jede Zahl einzeln lesen.

     **Gruppen statt einer langen Liste.** Die Frage am Turniertisch lautet
     „Was schuldet mir dieser Verein?“ und nicht „Was steht in Zeile 47?“.

   Alle Farben kommen aus den Variablen in app.css; hier steht kein einziger
   Farbwert. Damit funktioniert der Reiter in hell und dunkel, ohne dass es
   zwei Fassungen gäbe.
   =========================================================================== */


/* --- Ansichtswahl und Filter ----------------------------------------------
   Eine Leiste aus Knöpfen und keine zweite Reiterleiste: Die Reiterleiste des
   Turnierbetriebs steht schon darüber, und zwei gleich aussehende Leisten
   übereinander sind eine Zumutung. Auf schmalen Geräten scrollt sie waagerecht
   — die Seite selbst tut das nie (ARCHITEKTUR.md, Abschnitt 1).
   -------------------------------------------------------------------------- */

.ab-ansichten,
.ab-filter {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.ab-filter { margin: var(--s2) 0; }

@media (max-width: 560px) {
  .ab-ansichten {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Damit der letzte Knopf nicht am Rand klebt und aussieht, als wäre die
       Liste zu Ende. */
    padding-right: var(--s4);
  }
  .ab-ansichten::-webkit-scrollbar { display: none; }
  .ab-ansichten .knopf { flex: none; }
}


/* --- Das Zahlenband -------------------------------------------------------- */

.ab-zahlen .tb-zahlenraster { margin-bottom: var(--s3); }

.ab-kreis {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}


/* --- Zellen ---------------------------------------------------------------
   Ein Hüllknoten je Zelle, wie im Eingangskorb der Online-Meldungen: Er hält
   zusammen, was zusammengehört — der Wert und seine Unterzeilen stehen eng
   beieinander statt im Zeilenabstand der Karte.
   -------------------------------------------------------------------------- */

.ab-zelle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* In der Ausgabespalte stehen zwei Knöpfe nebeneinander und nicht
   untereinander — sie sind Geschwister, keine Aufzählung. */
.ab-zelle:has(> .knopf) {
  flex-direction: row;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Was seine Herkunft verloren hat oder fehlt: die gelöschte Meldung, die
   fehlende Anschrift. Auffällig genug, um vor dem Sammeldruck aufzufallen —
   und nicht so laut, dass eine Liste voll davon unlesbar würde. */
.ab-verwaist {
  color: var(--warn);
  font-weight: 600;
}


/* --- Beträge ---------------------------------------------------------------
   `tabellenziffern` (app.css) stellt die Tabellenziffern ein; hier kommt die
   rechtsbündige Ausrichtung dazu. Zusammen ergibt das eine Spalte, die sich
   überschlagen lässt.

   Auf schmalen Geräten wird aus der Zeile eine Karte, und dort steht der
   Betrag wieder links neben seiner Beschriftung: In einer Karte gibt es keine
   Spalte, an der sich etwas ausrichten ließe.
   -------------------------------------------------------------------------- */

.tb-tabelle td.tabellenziffern {
  text-align: right;
  /* Nicht umbrechen: „20,00 €“ auf zwei Zeilen liest sich wie zwei Zahlen,
     und in einer Spalte voller Beträge fällt genau das auf. Lieber wird die
     Spalte breiter — die Tabelle scrollt notfalls in ihrem Kasten, die Seite
     nie (ARCHITEKTUR.md, Abschnitt 1). */
  white-space: nowrap;
}

@media (max-width: 720px) {
  .tb-tabelle td.tabellenziffern { text-align: left; }
}


/* --- Gruppen je Empfänger -------------------------------------------------- */

.ab-gruppe + .ab-gruppe { margin-top: var(--s5); }

.ab-gruppenkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--line);
}

.ab-gruppenkopf strong { font-size: 1.05rem; }


/* --- Die Zuordnung im Vereinsabgleich --------------------------------------
   Die Auswahlliste steht in einer Zeilenaktionsspalte und darf dort nicht die
   halbe Tabelle einnehmen. Eine Mindestbreite braucht sie trotzdem: Ein
   Vereinsname mit Güteangabe in einem 80 Pixel breiten Feld ist unlesbar.
   -------------------------------------------------------------------------- */

.ab-zuordnung {
  min-width: 200px;
  max-width: 320px;
}

@media (max-width: 720px) {
  .ab-zuordnung { max-width: 100%; width: 100%; }
}


/* --- Die Wahl des Schatzmeisters -------------------------------------------
   Zwei Möglichkeiten, die verschieden viel Arbeit und verschieden viel
   Vertrauen bedeuten — eine davon bucht Geld von fremden Konten ab. Deshalb
   steht die Erklärung **unter** der Beschriftung und nicht in einem
   Erklärkästchen, das man aufklappen muss: Wer hier wählt, soll beim Wählen
   lesen, wofür.
   -------------------------------------------------------------------------- */

.ab-wahl {
  align-items: flex-start;
  gap: var(--s3);
}

.ab-wahl input[type="radio"] {
  /* Der Knopf sitzt auf der Höhe der ersten Zeile und nicht in der Mitte des
     ganzen Absatzes — sonst schwebt er neben dem Fließtext. */
  margin-top: 3px;
  flex: none;
}

.ab-wahl > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ab-wahl .zusatztext { line-height: 1.45; }

.ab-trenner {
  width: 100%;
  margin: var(--s4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}


/* --- Die Vorschau vor der Datei --------------------------------------------
   Sie ist eingerückt und abgesetzt, weil sie zu dem Knopf gehört, der sie
   erzeugt hat — und nicht zur Karte darüber.
   -------------------------------------------------------------------------- */

.ab-vorschau {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 2px solid var(--line);
}

.ab-vorschau h4 {
  margin: var(--s2) 0 0;
  font-size: 1rem;
}