/* ==========================================================================
   Modul Verwaltung

   Baut auf app.css (Gestaltungswerte) und turnierbetrieb.css auf. Aus
   turnierbetrieb.css werden die Bausteine mitbenutzt, die kein Fachwissen
   tragen und in jedem Modul gleich aussehen: .reiterleiste, .tb-zweispalt,
   .tb-liste, .tb-karte, .tb-werte, .tb-gruppe, .tb-feldpaar, .tb-kasten,
   .tb-tabelle, .tb-ausklapp. Sie dort noch einmal zu schreiben hieße, zwei
   Fassungen zu pflegen, die auseinanderlaufen.

   Hier steht nur, was dieses Modul zusätzlich braucht — vor allem die
   Rechteübersicht. Kein fester Farbwert, nur Variablen; damit stimmen beide
   Farbschemata von selbst.

   Aufbau nach ARCHITEKTUR.md, Abschnitt 1: Grundlayout ab 360 px, breitere
   Geräte bekommen über min-width mehr.
   ========================================================================== */


/* --- 1  Marken und kleine Hinweise ---------------------------------------- */

.marke.gesperrt { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.marke.gold     { background: var(--warn-soft);   color: var(--warn);   border-color: transparent; }

/* „aus Rolle“ ist eine Herkunftsangabe, kein Zustand — deshalb ruhiger
   gehalten als die Zustandsmarken daneben. */
.marke.rolle {
  background: var(--surface-3);
  color: var(--ink-3);
  border-color: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
}

.hinweiswort { color: var(--warn); font-weight: 650; }

.hinweisfeld.erfolg {
  border-left-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.tb-karte.gesperrt { opacity: 0.65; }

.modulsymbol.klein {
  width: 32px; height: 32px;
  font-size: 1rem;
  border-radius: var(--r1);
}


/* --- 2  Zugangslink ------------------------------------------------------
   Ohne Mailserver wird der Einladungslink hier angezeigt und von Hand
   weitergegeben. Er ist lang und muss vollständig lesbar sein — deshalb
   umbrechen statt abschneiden.
   ------------------------------------------------------------------------- */

.linkkasten {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--gold);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.langer-link {
  padding: var(--s3);
  border-radius: var(--r1);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: all;
}


/* --- 3  Schalterlisten (Module, Sportarten) ------------------------------- */

.schalterliste {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.schalterzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.schalterzeile .tb-kasten {
  flex: 1;
  min-width: 0;
  align-items: center;
}

.schalterzeile.an .tb-kasten {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.schalterzeile .tb-kasten span { display: grid; gap: 2px; min-width: 0; }
.schalterzeile .tb-kasten small { color: var(--ink-3); font-size: 0.8rem; }
.schalterzeile.an .tb-kasten small { color: var(--brand-ink); }


/* --- 4  Rechteübersicht ---------------------------------------------------

   Die anspruchsvollste Ansicht des Moduls: 13 Module mal bis zu 8
   Fähigkeiten. Je Modul ein aufklappbarer Block; darin je Fähigkeit eine
   Zeile mit drei Zuständen.

   Am Handy steht die Auswahl unter der Beschriftung (Karte), ab 768 px
   daneben (Zeile). Beides ist dieselbe Auszeichnung — nur das Raster wechselt.
   ------------------------------------------------------------------------- */

.zeichenerklaerung {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.78rem;
}

.zeichenerklaerung > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.modulblock {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--sh1);
  overflow: hidden;
}

.modulblock + .modulblock { margin-top: var(--s3); }
.modulblock.aus { opacity: 0.75; }

.modulblock > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  list-style: none;
}

.modulblock > summary::-webkit-details-marker { display: none; }

/* Eigenes Dreieck, damit es links steht und sich mit dem Block dreht. */
.modulblock > summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--ink-3);
  font-size: 0.9rem;
  transition: transform 0.14s ease;
}

.modulblock[open] > summary::after { transform: rotate(90deg); }
.modulblock > summary:hover { background: var(--surface-2); }

.modulblock-text { display: grid; gap: 2px; min-width: 0; }
.modulblock-text strong { font-size: 0.95rem; }
.modulblock-text small { color: var(--ink-3); font-size: 0.78rem; }

.modulblock-inhalt {
  display: grid;
  gap: var(--s3);
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}

.rechtezeilen {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Am Handy zwei Reihen: oben Name und Ergebnis, darunter die Auswahl über
   die volle Breite. Die Plätze sind ausdrücklich vergeben und nicht dem
   Fluss überlassen — sonst rutscht das Ergebniszeichen unter die Auswahl in
   eine eigene Zeile und sieht dort wie ein Bedienelement aus. */
.rechtezeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.rechtezeile-text { grid-column: 1; grid-row: 1; }
.rechtezeile .ergebnis { grid-column: 2; grid-row: 1; }

/* Die Modulzeile steht über den einzelnen Rechten und wirkt auf alle —
   das soll man sehen, ohne die Beschriftung zu lesen. */
.rechtezeile.modulkopf {
  background: var(--surface-2);
  border-color: var(--line-2);
}

.rechtezeile-text { display: grid; gap: 2px; min-width: 0; }

.rechtename {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: 0.92rem;
  font-weight: 650;
}

.rechtezeile-text small {
  color: var(--ink-3);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Die Auswahl belegt am Handy die volle Breite unter der Beschriftung. */
.rechtezeile-wahl {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: var(--r2);
  background: var(--surface-2);
}

/* Echte Radioknöpfe, nur unsichtbar: Tastatur, Vorleseprogramm und
   Gruppenverhalten kommen dadurch vom Browser und nicht aus JavaScript. */
.segment {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 0 var(--s2);
  border-radius: var(--r1);
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.segment input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segment:hover { color: var(--ink); }

.segment.gewaehlt { background: var(--surface); box-shadow: var(--sh1); }
.segment.erben.gewaehlt    { color: var(--ink); }
.segment.frei.gewaehlt     { background: var(--brand-soft);  color: var(--brand-ink); }
.segment.gesperrt.gewaehlt { background: var(--danger-soft); color: var(--danger); }

/* Sichtbarer Fokusrahmen, obwohl das Eingabefeld unsichtbar ist —
   sonst wäre die Tastaturbedienung blind (ARCHITEKTUR.md, Abschnitt 1). */
.segment:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.segment:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.segment:has(input:disabled) input { cursor: not-allowed; }

/* Eine Sperre, die bei dieser Rolle nicht wirkt (UEBERGABE.md, Abschnitt 59).
   Sie wird nicht weggeräumt, sondern durchgestrichen: Der Eintrag steht noch
   da und greift wieder, sobald der Benutzer eine andere Rolle bekommt. Rot
   wäre hier falsch — es behauptete eine Wirkung, die es gerade nicht gibt. */
.segment.ruht.gewaehlt { background: var(--surface); color: var(--ink-3); }
.segment.ruht.gewaehlt span { text-decoration: line-through; }

.ergebnis {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 800;
}

.ergebnis.ja   { background: var(--brand-soft);  color: var(--brand-ink); }
.ergebnis.nein { background: var(--surface-3);   color: var(--ink-3); }


/* --- 5  Breitere Geräte ---------------------------------------------------
   Ab 768 px steht die Auswahl neben der Beschriftung statt darunter. Damit
   passen deutlich mehr Rechte auf einen Blick — genau das, was am
   Verwaltungsrechner gebraucht wird (ARCHITEKTUR.md, Abschnitt 1).
   ------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .rechtezeile {
    grid-template-columns: minmax(0, 1fr) 300px 26px;
    gap: var(--s4);
  }

  /* Alles in eine Reihe: Name, Auswahl, Ergebnis. */
  .rechtezeile-wahl {
    grid-column: 2;
    grid-row: 1;
    width: 300px;
  }

  .rechtezeile .ergebnis { grid-column: 3; grid-row: 1; }
}

@media (min-width: 1000px) {
  /* Höhere Dichte: mehr Zeilen auf einen Blick. */
  .rechtezeile { padding: var(--s2) var(--s3); }
  .segment { min-height: 32px; }
  .modulblock-inhalt { gap: var(--s2); }
}

/* Fingerbedient heißt volle Trefferflächen — unabhängig von der Breite.
   Ein Tablet im Querformat ist breit *und* fingerbedient
   (UEBERGABE.md, Abschnitt 5). */
@media (pointer: coarse) {
  .segment { min-height: var(--touch); }
  .schalterzeile .tb-kasten { min-height: var(--touch); }
}


/* --- Vereinslogo (UEBERGABE.md, Abschnitt 10.1) ---------------------------
   Auf kariertem Grund, damit ein PNG mit durchsichtigem Hintergrund auch als
   solches zu erkennen ist — genau die Dateien, die im Overlay am besten
   aussehen, wären auf weißem Grund unsichtbar.
   -------------------------------------------------------------------------- */

/* In der Organisationsliste klein: Dort geht es nur um die Frage „ist ein
   Logo hinterlegt, und welches?“. Das leere Feld steht auch ohne Logo da,
   damit die Zeilen der Liste gleich hoch bleiben. */
.org-erscheinung { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.org-logo.klein { width: 44px; height: 44px; padding: 3px; border-radius: var(--r1); }
.org-logo.leer { display: inline-block; background-image: none; }
.org-farbe {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--farbe);
}

.org-logo {
  width: 96px;
  height: 96px;
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  object-fit: contain;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, rgba(128, 128, 128, 0.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128, 128, 128, 0.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.16) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}


/* --- Lizenz als Anzeige — UEBERGABE.md, Abschnitt 41.3 c -------------------
   Beim Kunden stehen Module und Sportarten nur noch da; geschaltet werden sie
   vom Betreiber. Der Haken ersetzt das Kästchen an derselben Stelle, damit die
   Zeile ihre Gestalt behält — es ist dieselbe Liste, nur ohne Griff.
   -------------------------------------------------------------------------- */

.lizenzhaken {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 700;
}

.lizenzhaken.an {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* Ohne Kästchen ist die Zeile kein Bedienelement mehr — der Zeiger soll das
   auch nicht behaupten. */
.schalterzeile > .tb-kasten:not(label) { cursor: default; }


/* --- Der Lizenzdialog -----------------------------------------------------
   Dreizehn Module und zwei Sportarten sind länger als jeder Bildschirm. Nicht
   der **Dialog** rollt deshalb, sondern die Liste darin: Sonst wandert der
   Knopf „Fertig“ aus dem Bild, und man sucht ihn am Ende einer Aufzählung,
   die man gar nicht lesen wollte.
   -------------------------------------------------------------------------- */

#lizenzhuelle .schalterliste {
  max-height: 42vh;
  overflow-y: auto;
  /* Damit die letzte Zeile nicht am Rand klebt und aussieht, als wäre die
     Liste zu Ende. */
  padding-right: var(--s2);
}

/* --------------------------------------------------------------------------
   Reiter „Ansage-Bausteine“ — der Vorrat (UEBERGABE.md, Abschnitt 17.15)

   Drei Blöcke von oben nach unten, und die Reihenfolge ist die Reihenfolge
   der Fragen: Wie viel liegt da? Wo kam es her? Und was davon darf weg?
   -------------------------------------------------------------------------- */

.vr-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s3);
}

.vr-zahl {
  display: grid;
  gap: 2px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface-2);
}

/* Der Bereich, der gerade in der Liste unten steht. Ohne die Hervorhebung
   sähen zwei Kästen gleich aus, obwohl nur einer die Liste erklärt. */
.vr-zahl.aktiv { border-color: var(--brand); background: var(--brand-soft); }

.vr-zahl b { font-size: 1.6rem; line-height: 1.1; }
.vr-marke {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 700;
}
.vr-verwaist { color: var(--danger); font-weight: 650; }

/* Die Tabelle kann bei zwanzig Turnieren breiter werden als ein Telefon.
   Sie bekommt ihre eigene Bildlaufleiste — die Seite selbst darf nicht
   seitlich wandern. */
.vr-huelle { overflow-x: auto; }

.vr-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.vr-tabelle th,
.vr-tabelle td { padding: var(--s2) var(--s3); text-align: left; white-space: nowrap; }
.vr-tabelle th { color: var(--ink-3); font-weight: 650; border-bottom: 1px solid var(--line); }
.vr-tabelle tbody tr { border-bottom: 1px solid var(--line); }
.vr-tabelle .rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* Zwei übereinandergelegte Balken statt zweier Spalten: „braucht“ blass im
   Hintergrund, „davon neu“ kräftig davor. Man sieht dadurch das Verhältnis
   auf einen Blick — und das Verhältnis ist die eigentliche Auskunft. */
.vr-balken {
  position: relative;
  min-width: 8rem;
  width: 40%;
  height: 1.4rem;
}
.vr-balken span {
  position: absolute;
  left: 0;
  top: 0.35rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--surface-3);
}
.vr-balken .vr-neu { background: var(--brand); }

.vr-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: end;
}

.vr-liste {
  display: grid;
  gap: var(--s2);
  max-height: 30rem;
  overflow-y: auto;
  padding-right: var(--s2);
}

.vr-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  gap: var(--s2) var(--s3);
  align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface);
}

/* Verwaist ist kein Fehler, sondern eine Einladung zum Aufräumen — deshalb
   ein Streifen an der Kante und keine rote Zeile. */
.vr-zeile.verwaist { border-left: 3px solid var(--danger); }

.vr-haken { display: flex; align-items: center; }
.vr-haken input { width: 1.2rem; height: 1.2rem; }

.vr-text { display: grid; min-width: 0; }
.vr-text small { color: var(--ink-3); font-size: 0.8rem; }

@media (max-width: 640px) {
  .vr-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vr-balken { display: none; }
}