html, body {
    font-family: 'Roboto', sans-serif;
}

.rl-nav-unlicensed {
    opacity: 0.5;
}

/* Klickbare Zeile in einem Auswahl-Suchpanel (Kalendereintrag-, Mitglied-, Waffe-Dialog). */
.rl-listitem { cursor: pointer; border-bottom: 1px solid var(--mud-palette-lines-default); }
.rl-listitem:hover { background: var(--mud-palette-action-default-hover); }
.rl-listitem-aktiv { background: var(--mud-palette-primary-hover); }

/* Nutzer-Auftrag 2026-08-30: Slot-Buttons auf der Schießstand-Detailseite (Buchung) - feste
   Mindestbreite statt sich an der Uhrzeit allein auszurichten, damit die zusätzliche "X frei"-
   Zeile (siehe SchiessstandDetail.razor) nicht zu unterschiedlich breiten Buttons in derselben
   Reihe führt. leichter Hebe-Effekt beim Hover macht die Karte insgesamt lebendiger. */
.rl-slot-button {
    min-width: 68px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rl-slot-button:not(.mud-disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Nutzer-Auftrag 2026-08-30: MudTooltip ist hover-basiert - auf Touch-Geräten (kein echtes Hover,
   z.B. Smartphone im Kalender: BuchungsKachel) bleibt der Tooltip nach einem Tap oft dauerhaft
   sichtbar hängen, weil nie ein "mouseleave" folgt, das ihn wieder verschwinden lässt. @media
   (hover: none) trifft zuverlässig genau Geräte ohne Maus/Hover-fähigen Zeiger - Tooltips sind
   dort ohnehin kein sinnvolles UI-Muster, deshalb komplett ausgeblendet statt nur das
   Verschwinden zu reparieren. .mud-tooltip ist die eigentliche Sprechblase (nicht .mud-tooltip-root,
   das den Trigger/die Kachel selbst umschließt und weiterhin sichtbar/klickbar bleiben muss). */
@media (hover: none) {
    .mud-tooltip {
        display: none !important;
    }
}

/* ToDos_0719 #32 führte einen immer aktiven, dicken Fokusring ein (kein Modus-Schalter, da als
   grundlegende Bedienbarkeit gedacht). ToDos_0726, 4. Versuch: User will den dicken Ring aber
   NICHT außerhalb des Kontrast-Modus sehen - das ist eine bewusste Abkehr vom ursprünglichen
   "immer aktiv"-Ansatz. Der Ring erscheint jetzt nur noch innerhalb .rl-high-contrast; außerhalb
   davon greift wieder der normale (dezente) Fokus, den die einzelnen MudBlazor-Komponenten schon
   selbst mitbringen (z.B. Outlined-Inputs färben ihre Umrandung beim Fokus in --mud-palette-primary
   ein, siehe MudBlazor.min.css .mud-input-outlined-border). Rundung (var(--mud-default-borderradius))
   und box-shadow statt outline (Safari/WebKit rundet outline+border-radius nicht zuverlässig ab)
   aus den vorherigen Versuchen bleiben für den Kontrast-Modus-Ring erhalten. */
.rl-high-contrast :focus-visible {
    outline: none !important;
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 0 0 4px var(--mud-palette-primary) !important;
}

/* ToDos_0719 #32: High-Contrast-Modus (Toggle in der AppBar) - erhöht den Kontrast, indem
   gedämpfte Text-/Rahmenfarben auf die volle Vordergrundfarbe angehoben werden. Nutzt bewusst
   MudBlazors eigene, Light/Dark-abhängige CSS-Variablen statt fixer Farbwerte, damit es mit
   beiden Themes funktioniert. */
.rl-high-contrast {
    --mud-palette-text-secondary: var(--mud-palette-text-primary);
    --mud-palette-lines-default: var(--mud-palette-text-primary);
    --mud-palette-lines-inputs: var(--mud-palette-text-primary);
    --mud-palette-action-disabled: var(--mud-palette-text-secondary);
    --mud-palette-gray-default: var(--mud-palette-text-primary);
}

/* RangeLib-Plan-0723 M7: Kopfzeilen (Titel + Favoriten-Stern/Buttons) nutzen durchgängig
   "d-flex justify-space-between align-center" ohne Wrap - bei langen Schießstand-Namen auf
   schmalen Bildschirmen überlappen Titel/Buttons statt sauber umzubrechen (gleiches Muster wie
   in SiFaAssist.Web bereits gefixt). */
@media (max-width: 600px) {
    .d-flex.justify-space-between.align-center {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* MudBlazor setzt .mud-card-actions auf "display:flex" ohne flex-wrap (Default: nowrap) und
   Buttons schrumpfen als Flex-Items nicht unter ihre Content-Breite - in der schmalen
   Schiessstandkachel (SchiessstandKarte.razor, bis zu 3 Buttons: "Reservieren",
   "Wettkämpfe ansehen", "Preisliste") lief die Buttonreihe deshalb über den Kachelrand hinaus,
   wodurch der "Preisliste"-Link abgeschnitten wirkte. */
.mud-card-actions {
    flex-wrap: wrap;
}

/* Gleiches Muster wie .mud-card-actions oben, für Dialoge statt Karten: MudBlazor setzt
   .mud-dialog-actions ebenfalls auf "display:flex" ohne flex-wrap. Meldung 2026-08-03:
   BuchungVerwaltenDialog.razor kann je nach Buchungsstatus/Berechtigung bis zu 6 Buttons zeigen
   (Schließen, Bearbeiten, Verschieben, Bestätigen/Ablehnen/Stornieren/Reaktivieren, Rechnung) -
   auf dem Smartphone lief die Buttonreihe über den Dialogrand hinaus, Button-Texte wirkten
   abgeschnitten. Betrifft app-weit jeden Dialog mit mehreren Aktions-Buttons, siehe
   [[Verhaltensregeln]] Regel 16. */
.mud-dialog-actions {
    flex-wrap: wrap;
}

/* MudBlazors .mud-table-toolbar (Suche/Filter über MudTable) ist ein Flex-Container mit fester
   Höhe und ohne flex-wrap - auf schmalen Bildschirmen quetschten sich Suchfeld, Zeitraum-/
   Status-Filter und Export-Button in eine Zeile statt umzubrechen (z.B. BetreiberBuchungen.razor).
   flex-wrap sorgt dafür, dass Elemente, die nicht mehr nebeneinander passen (allen voran das
   Suchfeld dank Mindestbreite über min-width:auto), automatisch in die nächste Zeile rutschen -
   reagiert auf die tatsächliche Breite des Containers, nicht auf eine feste Bildschirmgrenze. */
.mud-table-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;
}

/* Allgemeines Stacking-Muster für Filter-/Button-Zeilen über Tabellen und in Seitenköpfen:
   MudSelect(s) + mehrere textbeschriftete Buttons in einer Reihe passten auf schmalen
   Bildschirmen oft noch knapp (oder gar nicht mehr) nebeneinander, wodurch Buttons über den
   Rand hinausliefen und unerreichbar wurden (realer Vorfall: "Neuer Termin" in
   BetreiberWettkaempfe.razor war dadurch unsichtbar). Zwei Varianten je nach Einsatzort:
   - .rangelib-toolbar-stack: auf den Flex-Container gesetzt, ALLE Kind-Elemente bekommen je
     eine volle Zeile ("untereinander" statt nur "bei Bedarf umbrechen").
   - .rangelib-toolbar-stack-item: direkt auf ein einzelnes Kind-Element gesetzt, wenn nur
     bestimmte Geschwister (z.B. innerhalb eines MudTable-ToolBarContent, wo Suchfeld/Spacer/
     Export-Button NICHT mitgestapelt werden sollen) betroffen sein sollen.
   MudSelect verschachtelt intern noch ein eigenes ".mud-select"-Div - ein direkt darauf
   gesetzter Marker landet nur am inneren Div, der tatsächliche Flex-Item-Nachbar im
   .mud-table-toolbar ist aber das äußere ".mud-select". Der :has()-Selektor greift deshalb
   zusätzlich eine Ebene höher (nur für den .mud-table-toolbar-Sonderfall nötig). */
@media (max-width: 600px) {
    .rangelib-toolbar-stack {
        flex-wrap: wrap;
    }
    .rangelib-toolbar-stack > * {
        flex: 1 1 100%;
    }
    .rangelib-toolbar-stack-item {
        flex: 1 1 100%;
    }
    .mud-table-toolbar > .mud-select:has(> .rangelib-toolbar-stack-item) {
        flex: 1 1 100%;
    }
}

/* Meldung 2026-08-03: die Auswahlliste beim "Farbe übernehmen"/"Öffnungszeiten übernehmen"-Menü
   (BetreiberBahnen.razor) war auf dem Smartphone abgeschnitten. Live gemessen (innerWidth 400px):
   MudBlazors Popover-Positionierung setzt "left" als festen Pixelwert relativ zur Anker-Schaltfläche
   (hier z.B. left:40px) UND die Box selbst wird oft breiter als nötig (hier 392px) - MudBlazors
   eigene "overflow-flip"-Logik wählt nur die Öffnungsrichtung, verhindert aber nicht, dass
   left + width über die Bildschirmbreite hinausragt (hier: 432px auf 400px verfügbar). Ein reines
   max-width reicht daher NICHT (die Box bleibt am ursprünglichen, zu weit rechts liegenden "left"
   hängen). Stattdessen Breite über beide Ränder definieren (left/right statt left/width) - das
   funktioniert unabhängig von der Anker-Position und deckt jeden Popover ab (MudMenu, MudSelect,
   MudAutocomplete, ...), nicht nur den hier gemeldeten Einzelfall. Live verifiziert: vorher
   left:40/right:432 (32px abgeschnitten) bei innerWidth 400, nachher left:8/right:400 (0px
   abgeschnitten). Grundsatz seit dieser Meldung, siehe [[Verhaltensregeln]]: jede Ansicht muss auch
   auf einem Smartphone ohne abgeschnittene Inhalte bedienbar sein. */
@media (max-width: 600px) {
    .mud-popover {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
    .mud-popover .mud-menu-item-text,
    .mud-popover .mud-list-item-text {
        white-space: normal;
        word-break: break-word;
    }
}

/* Meldung 2026-08-10: Ringwert-Eingabe beim Wettkampf-Ergebnis-Eintragen (Portal-QR-Seite und
   Betreiber-Dialog, WettkampfErgebnisEintragen.razor/WettkampfErgebnisDialog.razor) war auf dem
   Smartphone unhandlig - 2 Felder pro Zeile mit winzigen nativen Spinnern. Ab 600px eigene Zeile
   je Ringwert mit großen roten/grünen +/- Buttons statt Grid; Desktop-Grid bleibt unverändert. */
.rl-ringwert-mobile {
    display: none;
}
@media (max-width: 600px) {
    .rl-ringwert-desktop {
        display: none;
    }
    .rl-ringwert-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .rl-ringwert-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .rl-ringwert-row .rl-ringwert-field {
        flex: 1 1 auto;
    }
}

/* Todo 17: Slots als Zellen mit Rand (wie BungtBlazors .calendar-cell). Ursprünglich inline in
   BetreiberKalender.razor, 2026-08-08 hierher verschoben, damit BetreiberWettkaempfe.razor
   (Wettkampfplaner-Belegungsraster) dieselbe Optik ohne Duplikat wiederverwenden kann. */
.rangelib-kalender th, .rangelib-kalender td {
    border: 1px solid var(--mud-palette-lines-default);
}
/* RangeLib-Plan-0723 M18: Kopfzeile (Uhrzeiten) und erste Spalte (Bahnnamen) unabhängig
   voneinander fixierbar (wie Excel-Fensterfixierung) - beide per position:sticky relativ
   zum umschließenden scrollbaren div, mit explizitem Hintergrund gegen durchscheinenden
   Inhalt beim Scrollen. */
.rangelib-kalender thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}
.rangelib-kalender tbody tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.rangelib-kalender thead th:first-child {
    left: 0;
    z-index: 3;
}