/* Kleine Ergaenzungen zu Bootstrap, kein eigenes Design-System noetig. */

.navbar-brand {
    font-weight: 600;
}

/* Abstand unterhalb jeder Karte, damit Buttons am Kartenende nicht direkt an der
   naechsten Karte/dem naechsten Formular kleben, auch wenn eine View kein eigenes
   mb-* auf die Karte gesetzt hat. Bootstraps mb-*-Utilities (!important) ueberschreiben
   das bei Bedarf weiterhin, es entsteht also kein doppelter Abstand. */
.card {
    margin-bottom: 1rem;
}

/* Gleicher Zweck wie oben, aber fuer Submit-Buttons, die direkt (nicht innerhalb
   einer .card-body) im Formular stehen - z.B. ein "Speichern"-Button unterhalb
   mehrerer Karten, gefolgt von einer weiteren Karte. Buttons innerhalb einer
   .card-body sind nicht betroffen, da .card selbst schon den Abstand liefert. */
form > .btn {
    margin-bottom: 1rem;
}

table.table-actions td {
    vertical-align: middle;
}

.table-actions form {
    display: inline-block;
    margin: 0;
}

/* Die Regel "form > .btn" oben ist fuer freistehende Submit-Buttons ausserhalb von
   Tabellen gedacht. Innerhalb von Tabellenzellen wuerde der zusaetzliche untere
   Abstand Formular-Buttons gegenueber Link-Buttons (<a class="btn">) in derselben
   Zeile nach unten versetzt aussehen lassen - deshalb hier zurueckgesetzt. */
table td form > .btn {
    margin-bottom: 0;
}

/* Gleicher Grund wie bei Tabellenzellen: in einer einzeiligen Formularzeile
   (Eingabefeld(er) + Button nebeneinander, z.B. "Einzelnen Termin hinzufuegen")
   wuerde der zusaetzliche untere Abstand den Button gegenueber dem/den Feld(ern)
   nach oben aus der gemeinsamen Unterkante ("align-items-end") herausdruecken. */
form.d-flex > .btn {
    margin-bottom: 0;
}

/* Hyperlinks innerhalb von Tabellen (nicht Buttons) dezent als Navigation kennzeichnen.
   Links, die bereits ein eigenes Icon mitbringen (.link-secondary, z.B. Bereiche-Spalte),
   erhalten keinen zusaetzlichen Pfeil. */
table td a:not(.btn) {
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

table td a:not(.btn):hover {
    text-decoration: underline;
}

table td a:not(.btn):not(.link-secondary)::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.35em;
    opacity: 0.45;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

table td a:not(.btn):not(.link-secondary):hover::after {
    opacity: 0.9;
    transform: translateX(2px);
}

/* Ueberbreite auf schmalen Geraeten (Safari)

   Safari laesst den Layout-Ueberlauf der gewaehlten Option eines <select> an die
   Vorfahren durchschlagen: Eine lange Option macht damit die ganze Karte - und in der
   Folge die Seite - breiter als das Fenster, waehrend Chrome und Firefox davon nichts
   zeigen. Beide Regeln zusammen halten den Ueberlauf am Auswahlfeld selbst fest,
   statt Karten zu beschneiden. */
.card-body {
    min-width: 0;
}

.form-select {
    min-width: 0;
    overflow: hidden;
}

/* Lange deutsche Komposita in schmalen Spalten

   Ohne Trennung ragt ein Wort wie "Konfirmandenunterricht" aus seiner Tabellenspalte
   heraus oder erzwingt eine breitere Spalte. Bewusst als Automatik statt als von Hand
   gepflegte Trennzeichen im Text: Die Silbentrennung des Browsers greift auf das
   lang="de" des Dokuments zurueck und muss bei neuen Texten nicht mitgepflegt werden.
   Beschraenkt auf Tabellenzellen und Beschreibungstexte - im Fliesstext von
   Ueberschriften und Knoepfen waere eine Trennung stoerend. */
table td,
.card-text,
.form-text {
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Aktivitaets-Log: festes Spaltenraster statt einer Breite, die sich am laengsten
   Text ausrichtet. Ohne das bestimmt eine einzelne lange Beschreibung die
   Tabellenbreite und die ganze Tabelle bekommt einen horizontalen Rollbalken;
   stattdessen umbricht der Text jetzt innerhalb seiner Spalte.

   Erst ab Tablet-Breite: darunter waeren fuenf feste Spalten zu schmal, dort bleibt
   es beim Rollbalken von .table-responsive. */
@media (min-width: 768px) {
    .table-activity-log {
        table-layout: fixed;
    }

    /* Der Zeitpunkt steht in einer Zeile ("02.09.2026, 07:32 Uhr") und braucht
       deshalb genug Breite - ist die Spalte zu schmal, laeuft der Text bei festem
       Raster in die Nachbarspalte hinein. */
    .table-activity-log .col-log-time {
        width: 18%;
    }

    .table-activity-log .col-log-actor {
        width: 19%;
    }

    .table-activity-log .col-log-action {
        width: 13%;
    }

    .table-activity-log .col-log-entity {
        width: 23%;
    }

    .table-activity-log .col-log-description {
        width: 27%;
    }
}

/* Lange Namen oder Bezeichnungen ohne Leerzeichen sprengen sonst das Raster. */
.table-activity-log td {
    overflow-wrap: anywhere;
}

/* Farbiges Symbol-Feld vor Karten- und Listeneintraegen (Eltern-Bereich). Flaeche und
   Symbolfarbe kommen ueber die Bootstrap-Utilities bg-*-subtle/text-*-emphasis aus dem
   Markup, damit beide Helligkeiten und ein eigenes Theme ohne Sonderregel mitgehen. */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.15rem;
    line-height: 1;
}

/* Grosse Variante fuer leere Ansichten ("Noch keine Veranstaltungen"). */
.icon-badge-lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    font-size: 1.75rem;
}

/* ============================================================
   Dunkle Darstellung

   Bootstrap 5.3 bringt zu allen Farb-Variablen eigene Werte fuer
   data-bs-theme="dark" mit; das Standard-Design ist damit bereits
   vollstaendig. Hier bleiben nur die Stellen, an denen das Markup
   eine feste helle Farbe vorgibt, die keiner Variable folgt.

   Eine individuell gesetzte Navbar-Farbe (BrandingService) bleibt
   unberuehrt: deren Inline-CSS traegt .navbar.navbar-branded und
   steht spaeter im Dokument.
   ============================================================ */

/* Die Eltern-Navbar ist im Markup weiss gesetzt - unveraendert stuende sie als
   helle Flaeche ueber einer dunklen Seite.

   Das :where() haelt die Spezifitaet bei 0,2,0 und damit gleichauf mit der Regel
   des BrandingService (.navbar.navbar-branded). Dessen Inline-CSS steht spaeter im
   Dokument und gewinnt dadurch - eine individuell gesetzte Navbar-Farbe gilt also
   auch in der dunklen Darstellung. Mit .navbar.bg-white waere die Regel hier
   staerker und wuerde die Gemeindefarbe verschlucken. */
[data-bs-theme="dark"] .navbar:where(.bg-white) {
    background-color: var(--bs-tertiary-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

/* Passend dazu die Beschriftungen der hellen Navbar-Variante aufhellen: die Klasse
   navbar-light legt sie sonst dunkel auf dunklen Grund. */
[data-bs-theme="dark"] .navbar:where(.navbar-light) {
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: var(--bs-body-color);
    --bs-navbar-brand-hover-color: var(--bs-body-color);
    --bs-navbar-toggler-border-color: var(--bs-border-color);
}