/* ==========================================================================
   Ligaleiter-Bereich – Ergänzungen zu assets/style.css
   --------------------------------------------------------------------------
   Bewusst ein eigenes Stylesheet und nicht ein weiterer Abschnitt in
   style.css: Der Bereich hat eigene Bauteile (Foto-Auswahl, Vorschau,
   Anleitungs-Skizze), die sonst nirgends vorkommen. Geladen wird es nur von
   den Seiten in /ligaleiter.

   Grundlage bleibt style.css – hier stehen ausschließlich Ergänzungen, keine
   Neudefinitionen. Die Farben kommen aus den dortigen Variablen.
   ========================================================================== */

/* ---------- Anmeldung: "Passwort vergessen?" als Klappbereich ---------- */
.ll-reset { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.ll-reset > summary {
    cursor: pointer;
    color: var(--blue);
    font-size: .92rem;
    list-style: none;
}
.ll-reset > summary::-webkit-details-marker { display: none; }
.ll-reset > summary::after { content: ' \25BE'; font-size: .8em; }
.ll-reset[open] > summary::after { content: ' \25B4'; }

/* ---------- Einleitungstext des Sportwarts ---------- */
/* Bewusst ohne Hintergrund: Der Text ist eine Ansprache, kein Hinweiskasten –
   ein farbiger Block macht ihn zur Warnmeldung, die man überliest. */
.ll-intro { margin-top: 4px; }
.ll-intro p { margin: 0 0 10px; }
.ll-intro p:last-child { margin-bottom: 0; }

/* ---------- Anleitung: Skizze der beiden Anordnungen ----------
   Zeigt dasselbe wie die Vorlage "Foto der Spielzettel.pdf": sechs Zettel,
   einmal quer (3x2), einmal hoch (2x3), und das Kreuz markiert, wo die
   Handykamera stehen soll. Gebaut aus Rahmen statt als Bild – so bleibt es
   auch auf kleinen Displays scharf und passt sich der Breite an. */
.ll-varianten {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 18px 0 22px;
}
.ll-variante { margin: 0; text-align: center; }
.ll-variante figcaption {
    font-size: .85rem;
    color: var(--muted);
    margin-top: 8px;
    text-align: center;
}
/* inline-grid statt grid: Als Block würde der Rahmen auf die Breite der
   Bildunterschrift aufgezogen ("Variante 2 · Hochformat (2 × 3)" ist breiter
   als zwei Kacheln). Rechts bliebe weißer Platz im Rahmen stehen – und das
   Kreuz, das bei 50 % sitzt, käme über der rechten Kachel statt in der Mitte
   zwischen beiden zu liegen. */
.ll-blatt {
    position: relative;
    display: inline-grid;
    gap: 7px;
    padding: 9px;
    border: 3px solid var(--blue);
    border-radius: 6px;
    background: #fff;
}
.ll-blatt span {
    border: 1.5px solid #8ea3d6;
    border-radius: 3px;
    background: #f7f9ff;
}
/* Gleiche Kachelgröße in beiden Varianten – es sind ja dieselben sechs Zettel,
   nur anders gelegt. Die Maße sind so gewählt, dass der Rahmen die Bildunter-
   schrift bestätigt: 3x2 ergibt ein liegendes, 2x3 ein stehendes Format. */
.ll-blatt--quer { grid-template-columns: repeat(3, 60px); grid-auto-rows: 42px; }
.ll-blatt--hoch { grid-template-columns: repeat(2, 60px); grid-auto-rows: 42px; }
.ll-kreuz {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--red);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

.ll-tipps { padding-left: 20px; margin: 0; }
.ll-tipps li { margin-bottom: 8px; }
.ll-tipps li:last-child { margin-bottom: 0; }

/* ---------- Foto-Auswahl ----------
   Die beiden Knöpfe sind <label> mit einem versteckten File-Input darin: Am
   Handy öffnet der erste sofort die Kamera, der zweite die Galerie. Ein
   sichtbares Dateifeld daneben wäre nur Verwirrung. */
.ll-foto-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.ll-fotobtn { position: relative; overflow: hidden; cursor: pointer; }
.ll-fotobtn input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}
/* Höchstzahl erreicht: Der Knopf muss auch aussehen wie abgeschaltet, sonst
   tippt man weiter darauf und wundert sich, dass nichts geschieht. */
.ll-fotobtn.is-voll { opacity: .45; cursor: not-allowed; }
.ll-fotobtn.is-voll input[type=file] { cursor: not-allowed; }

/* Hinweis unter der Vorschau – erscheint erst, wenn schon ein Foto da ist. */
.ll-nachlegen {
    margin: -6px 0 18px;
    font-size: .9rem;
    color: var(--muted);
}
.ll-nachlegen strong { color: var(--blue-dark); }

/* ---------- Vorschau der gewählten Fotos ---------- */
.ll-vorschau {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
}
.ll-thumb {
    position: relative;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 4 / 3;
}
.ll-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nummer je Foto – dieselbe Reihenfolge steht später in den Dateinamen des
   Mailanhangs, so lässt sich beim Nachfragen darauf zeigen. */
.ll-thumb__nr {
    position: absolute;
    left: 4px;
    bottom: 4px;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 11px;
    background: rgba(20, 30, 50, .72);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}
.ll-thumb__weg {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 30, 50, .72);
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}
.ll-thumb__weg:hover { background: var(--red); }

/* ---------- Statuszeile neben dem Absenden-Knopf ---------- */
.ll-status { font-size: .9rem; color: var(--muted); }
.ll-status--warn   { color: var(--warn); font-weight: 600; }
.ll-status--fehler { color: var(--err);  font-weight: 600; }

/* ==========================================================================
   Ligaleiter-Verwaltung (admin.php)
   ========================================================================== */

/* Die Übersicht hat neun Spalten – auf schmalen Displays wandert sie in eine
   eigene Bildlaufleiste, statt die ganze Seite breit zu ziehen. */
.ll-tabelle { overflow-x: auto; }
.ll-tabelle .table { min-width: 900px; }

/* Bearbeitungsformular: zwei feste Zeilen statt der allgemeinen grid-*-Klassen,
   weil die Felder sehr unterschiedlich viel Platz brauchen – PLZ ist immer
   fünfstellig, die E-Mail selten kurz. */
.ll-edit-person  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ll-edit-adresse { display: grid; grid-template-columns: 1.7fr .6fr 1.2fr 1fr 1.7fr; gap: 14px; }
.ll-edit-rest    { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.ll-edit-rest .check { padding-top: 30px; }   /* auf Höhe des Auswahlfelds daneben */

/* Saisonwechsel – die einzige Stelle im Bereich, die etwas unwiederbringlich
   löscht. Sie soll sich auch so anfühlen. */
.ll-gefahr { border: 1px solid var(--err); }
.ll-gefahr h2 { color: var(--err); }

/* Spalten, die nie umbrechen dürfen: das Liga-Kürzel ("H-WL1" als "H-" / "WL1"
   zu lesen ist unnötig anstrengend) und die zweizeilige Anmeldezeit. */
.ll-nowrap { white-space: nowrap; }
.ll-mitte  { text-align: center; }

/* Haken und Kreuz im Versand-Protokoll. Bewusst kein Emoji: Die bunten
   Varianten sehen je nach Betriebssystem völlig anders aus und wirken in einer
   Tabelle wie Fremdkörper. Diese beiden Zeichen kommen aus der normalen
   Schrift und nehmen die Farbe an, die wir ihnen geben. */
.ll-zeichen { font-size: 1.25rem; line-height: 1; cursor: help; }
.ll-zeichen--ok     { color: var(--ok); }
.ll-zeichen--fehler { color: var(--err); }
/* Dritter Fall in der Spalte "Spielrecht" der Sammellisten: Karte vorhanden,
   aber der Spieler steht inzwischen bei einem anderen Club. Weder grün noch
   rot – es ist kein fehlendes Spielrecht, aber auch keine Freigabe für DIESE
   Mannschaft. Das Ausrufezeichen ist schmaler als Haken und Kreuz, deshalb
   fett und mit etwas Laufweite, damit es in der Spalte gleich stark wirkt. */
.ll-zeichen--warnung { color: var(--warn); font-weight: 700; padding: 0 .25em; }

.ll-ok      { color: var(--ok);  font-weight: 600; }
.ll-warnung { color: var(--red); font-weight: 600; }
.ll-inaktiv { opacity: .55; }

/* User-Agent-Zeichenketten sind lang und uninteressant – hier reicht der Anfang. */
.ll-agent {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ll-kommentar { max-width: 280px; font-size: .88rem; }

/* Das Initialpasswort wird abgetippt oder vorgelesen – groß und in einer
   Schrift, in der 0/O und 1/l unterscheidbar bleiben. */
.ll-pwd {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: var(--info-bg);
    border: 1px dashed var(--blue);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    user-select: all;
    word-break: break-all;
}

/* ---------- Handy ---------- */
/* Schmale Fenster: Die fünfspaltige Anschriftenzeile bricht auf zwei Spalten,
   sonst werden die Felder unbenutzbar schmal. */
@media (max-width: 1000px) {
    .ll-edit-person  { grid-template-columns: 1fr 1fr; }
    .ll-edit-adresse { grid-template-columns: 1fr 1fr; }
    .ll-edit-rest    { grid-template-columns: 1fr; }
    .ll-edit-rest .check { padding-top: 0; }
}

@media (max-width: 600px) {
    .ll-edit-person, .ll-edit-adresse { grid-template-columns: 1fr; }
    .ll-varianten { gap: 18px; justify-content: center; }
    .ll-blatt--quer { grid-template-columns: repeat(3, 52px); grid-auto-rows: 36px; }
    .ll-blatt--hoch { grid-template-columns: repeat(2, 52px); grid-auto-rows: 36px; }
    .ll-foto-knoepfe { flex-direction: column; }
    .ll-fotobtn { text-align: center; }
    .ll-vorschau { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ==========================================================================
   Spieltagserfassung (spieltage, spieltag-kader, spieltag)
   --------------------------------------------------------------------------
   Erfasst wird am Laptop, oft im Halbdunkel einer Bowlinghalle und unter
   Zeitdruck. Deshalb: grosse Zahlenfelder, kraeftige Trennlinien zwischen den
   Mannschaftsbloecken und ein Stand, der sich auf einen Blick lesen laesst.
   ========================================================================== */

/* Stand eines Starttags in der Uebersicht */
.stand {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 11px;
    white-space: nowrap;
}
.stand--offen  { background: var(--line); color: var(--muted); }
.stand--arbeit { background: var(--warn-bg); color: var(--warn); }
.stand--fertig { background: var(--ok-bg); color: var(--ok); }

.spt-tat { text-align: right; white-space: nowrap; }
.spt-inline { display: inline; margin: 0; }
.spt-fuss { margin-top: 18px; font-size: .88rem; }

/* Kaderseite: ein Block je Mannschaft, deutlich getrennt */
.spt-team {
    margin: 26px 0;
    padding-top: 16px;
    border-top: 2px solid var(--line);
}
.spt-team:first-of-type { border-top: none; padding-top: 0; }
.spt-team h3 { margin: 0 0 8px; font-size: 1.05rem; }

.spt-edv { font-variant-numeric: tabular-nums; color: var(--muted); }

.spt-nachtrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 8px;
}
.spt-nachtrag label { font-size: .88rem; color: var(--muted); }
.spt-nachtrag input[type=number] { width: 8em; padding: 7px 9px; }

/* Erfassungsmaske: ein Reiter je Mannschaft */
.spt-runden { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; }
.spt-runde {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    background: #fff;
}
.spt-runde:hover { border-color: var(--blue); color: var(--blue); }
.spt-runde.is-aktiv { background: var(--blue); border-color: var(--blue); color: #fff; }
/* Der Stand im aktiven Reiter braucht eigene Farben, sonst verschwindet er
   auf dem blauen Grund. */
.spt-runde.is-aktiv .stand { background: rgba(255, 255, 255, .22); color: #fff; }
.spt-runde--ziel { margin-left: auto; border-style: dashed; }

/* Der Zettel einer Mannschaft: Zeilen = Spiele, Spalten = Spieler.
   Genau die Anordnung des Papierzettels, den der Ligaleiter danebenliegen
   hat – deshalb steht auch die Spalte „Gegner Pins“ vor den Spielern. */
.spt-zettel-rollen { overflow-x: auto; margin: 0 0 18px; }
.spt-zettel { min-width: 720px; }
.spt-zettel th, .spt-zettel td { padding: 5px 7px; vertical-align: middle; }
.spt-zettel thead th { vertical-align: bottom; font-size: .8rem; line-height: 1.25; }
.spt-sp { width: 2.6em; color: var(--muted); }
.spt-gegnername { min-width: 11em; }
.spt-gegnerpins { color: var(--muted); }
.spt-spielername { display: block; }
.spt-zettel thead .spt-edv { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }

/* Zahlenfelder: gross genug fuer schnelles Tippen am Laptop, aber schmal
   genug, dass sechs Spieler nebeneinander passen. */
.spt-feld { width: 5.2em; }
.spt-feld input[type=number] {
    width: 100%;
    padding: 7px 8px;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* Das Auswechselspiel steht bei keinem Spieler – die eigene Farbe sagt das,
   bevor jemand fragt. */
.spt-auswechselfeld { background: var(--warn-bg); }
.spt-auswechselfeld input[type=number] { border-color: var(--warn); }

.spt-summe { font-weight: 600; }
.spt-punkte { font-weight: 600; }
.spt-ok  { color: var(--ok); font-weight: 600; }
.spt-nok { color: var(--err); font-weight: 600; }

.spt-rechtsbuendig { text-align: right; color: var(--muted); }
.spt-summenzeile td { border-top: 2px solid var(--ink); font-weight: 600; }
.spt-schnittzeile td { color: var(--muted); font-size: .88rem; }

/* Tagesuebersicht: Einzelergebnisse, nach Mannschaft gruppiert */
.spt-einzel-gruppe td { font-weight: 600; padding-top: 14px; }
.spt-einzel-spieler { padding-left: 22px; }
.spt-einzel .spt-edv { font-size: .78rem; color: var(--muted); margin-left: 6px; }
.spt-einzel-ausw td { background: var(--warn-bg); color: var(--warn); }
.spt-einzel-summe td { background: var(--bg); font-weight: 600; }
.spt-rechnung { display: block; font-weight: 400; font-size: .78rem; }

/* Tagesuebersicht */
.spt-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spt-fehl { width: 5em; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.stand--warn { background: var(--err-bg); color: var(--err); }
.spt-vorkommnisse {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

/* ==========================================================================
   Rundschreiben – wird im Center vom Bildschirm abfotografiert.
   Deshalb kraeftige Kontraste und grosszuegige Zahlen, nicht Papieroptik.
   ========================================================================== */
.spt-rs-kopf { text-align: center; margin-bottom: 22px; }
.spt-rs-kopf h2 { margin: 0 0 4px; }
.spt-rs-liga { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--blue); }
.spt-rs-tag { margin: 2px 0 0; font-weight: 600; }
.spt-rs-leiter { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }

.spt-rs-tab th { font-size: .74rem; }
.spt-rs-tab tbody tr:nth-child(odd) { background: #fafbfe; }

.spt-hoechst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 10px 0 6px;
}
.spt-hoechst__karte {
    text-align: center;
    padding: 14px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--info-bg);
}
.spt-hoechst__was { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.spt-hoechst__zahl {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}
.spt-hoechst__wer { font-size: .88rem; font-weight: 600; }
.spt-hoechst__wer span { font-weight: 400; color: var(--muted); }

.spt-rs-vorkommnisse {
    padding: 10px 14px;
    background: var(--warn-bg);
    border-radius: 8px;
}
.spt-rs-fuss {
    margin-top: 20px;
    font-size: .85rem;
    color: var(--muted);
    text-align: center;
}

@media print {
    .site-top, .site-footer, .spt-nodruck { display: none !important; }
    .card { box-shadow: none; border: none; padding: 0; }
    .spt-hoechst__karte { background: none; }
}

/* ==========================================================================
   Zustandsleiste der Offline-Erfassung (assets/spieltag-offline.js)
   --------------------------------------------------------------------------
   Unten fest stehend statt oben: Der Ligaleiter tippt in der Tabellenmitte,
   und eine Leiste am oberen Rand schoebe ihm bei jeder Meldung die Felder
   weg. Unten liegt sie im Blick, ohne etwas zu verruecken.
   ========================================================================== */
.spt-netz {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 200;
    max-width: min(680px, calc(100vw - 32px));
    padding: 11px 18px;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 6px 24px rgba(20, 40, 90, .18);
}
.spt-netz[hidden] { display: none; }
.spt-netz--offline { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.spt-netz--senden  { background: var(--info-bg); color: var(--blue); border: 1px solid var(--blue); }
.spt-netz--gut     { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok); }

/* Wiederhergestellte Felder sichtbar machen – der Ligaleiter soll sehen,
   was von seinem Geraet kam und noch nicht gespeichert ist. */
.spt-wiederhergestellt {
    background: var(--warn-bg);
    border-color: var(--warn) !important;
}

/* Werkzeug fuer den Probelauf – erscheint NUR auf der lokalen
   Entwicklungskopie (ist_lokale_entwicklung()). Auffaellig gestreift wie die
   Testbetrieb-Leiste des Portals: Was es live nicht gibt, soll lokal auch
   nicht wie ein normaler Bedienknopf aussehen. */
.spt-probe {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 16px; padding: 10px 14px;
    background: var(--warn-bg); border: 1px dashed var(--warn);
    border-radius: 10px;
}
.spt-probe__marke {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #fff; background: var(--warn);
    padding: 3px 8px; border-radius: 4px;
}
.spt-probe__hinweis { font-size: .84rem; color: var(--warn); }

/* Ein Punktestand, bei dem erst eine Mannschaft eingetragen ist, ist keine
   Aussage – er gehoert gedaempft. Sonst liest man "2 : 0", wo in Wahrheit nur
   die linke Seite erfasst ist. Sobald beide Seiten Pins haben, steht er
   normal da. */

/* ---------- Kachelraster der Uebersicht ----------
   Die erste Reihe traegt zwei Kacheln (Hilfe und Profil) und kommt mit dem
   Standardraster aus assets/style.css aus; die Arbeitsziele darunter stehen zu
   dritt. Feste drei Spalten und nicht auto-fit: Bei acht Kacheln wuerde
   auto-fit auf einem breiten Schirm vier oder fuenf nebeneinander setzen, und
   die verlangte Aufteilung waere dahin.

   Umbruch in zwei Stufen, damit eine Kachel nie schmaler wird als ihre
   Beschriftung: unter 900 px zwei Spalten, unter 560 px eine - dieselbe
   Grenze, an der style.css das Standardraster umbricht.

   Doppelte Klasse im Selektor (.actions.actions--drei) mit Absicht: Sonst
   haette die Regel dieselbe Spezifitaet wie .actions in style.css und wuerde
   nur gewinnen, weil diese Datei spaeter geladen wird. Wer die Reihenfolge
   der Stylesheets einmal umstellt, stuende sonst vor drei Spalten, die
   ploetzlich zwei sind. */
.actions.actions--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .actions.actions--drei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .actions.actions--drei { grid-template-columns: 1fr; } }

/* Zwei Kachelbloecke untereinander brauchen Luft dazwischen - sonst sehen sie
   aus wie ein Raster, dem eine Zeile verrutscht ist. */
.actions + .actions { margin-top: 18px; }

/* Eine gesperrte Kachel muss ihren GRUND zeigen koennen. In style.css liegt
   auf ihr pointer-events: none - damit greift kein :hover, und der Tooltip
   (.action__tip) bliebe unsichtbar: eine graue Kachel ohne Erklaerung, also
   genau die Frage, die als Anruf zurueckkommt.

   Hier also Zeiger-Ereignisse zurueck, aber ohne die Anfass-Optik: kein
   Anheben, kein blauer Rand, dafuer der Nicht-erlaubt-Zeiger. Geoeffnet wird
   trotzdem nichts - render_kachel() gibt gesperrten Kacheln kein href.

   Der Selektor ist absichtlich eine Stufe staerker (.actions davor) als der in
   style.css: sonst entschiede die Ladereihenfolge der Stylesheets. */
.actions .action[aria-disabled=true] { pointer-events: auto; cursor: not-allowed; }
.actions .action[aria-disabled=true]:hover {
    border-color: var(--line); box-shadow: none; transform: none;
}