body {
  padding-bottom: 20px;
  background-color: #f8f9fa!important;
}

.navbar {
  margin-bottom: 20px;
}

table.datatable[data-table-nav="true"] tbody {
	cursor:pointer;
}

/* Auf schmalen Bildschirmen (Smartphone) ist der Tabelleninhalt vieler Übersichtslisten
   (Mitglieder, Lager, Verleih, Füllungen, Kompressorprotokoll usw.) breiter als der Viewport.
   DataTables selbst begrenzt die Tabellenbreite nicht (kein "scrollX"), wodurch ohne diese Regel
   die ganze Seite horizontal scrollt statt nur der Tabellenbereich. .dataTables_wrapper ist der
   von DataTables automatisch um jede .datatable/.infotable erzeugte Container - ein fixer Rahmen
   mit eigenem Scrollbalken hält den Rest der Seite (Kopfzeile, Buttons, Suchfeld) unverändert an
   Ort und Stelle. */
.dataTables_wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.barcode {
	border:none;
	width:15em;
	background-color:#f8f9fa;
	color:#d0d0d0;
	margin-left:2em;
}

.barcode:focus {
	background-color:#d0ffd0;
}

.barcodehint {
	display:none;
	margin-left:2em;
}

.hidden{
  display:none;
}

.password-toggle-wrapper {
	position: relative;
}

.password-toggle-wrapper .password-toggle-input {
	padding-right: 2.25rem;
}

.password-toggle-icon {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6c757d;
	user-select: none;
	-webkit-user-select: none;
}

.password-toggle-icon:hover {
	color: #343a40;
}

/* Sprachauswahl ("de"/"en") und Kontext-Hilfe-Link ("?"-Icon) sollen exakt dieselbe quadratische
   Grundfläche einnehmen, damit sie nebeneinander als optisch zusammengehöriges Paar wirken - das
   Hilfe-Icon (bi-question-square) ist 20x20px groß, die Sprachauswahl bekommt daher dieselbe
   Boxgröße plus eine passende quadratische Umrandung (leicht abgerundete Ecken, analog zur
   abgerundeten Kontur des Icons selbst). */
/* Die umgebende <li> wird selbst zum Flex-Container mit vertikaler Zentrierung - verhindert,
   dass der normale Inline-Textfluss (der je nach Inhalt - Text "de" vs. reines SVG - einen
   unterschiedlich hohen unsichtbaren "Strut" reserviert) die beiden Boxen unterschiedlich weit
   nach unten/oben verschiebt. Dadurch bestimmt ausschließlich die 20x20px-Box selbst die Höhe,
   exakt vertikal mittig zu den übrigen, auf volle Navbar-Höhe gestreckten Menüpunkten. */
/* Bootstrap stapelt .navbar-nav standardmäßig erst ab dem lg-Breakpoint (992px) horizontal
   (.navbar-expand-lg .navbar-nav{flex-direction:row} steckt in einer min-width-Media-Query) -
   für die Haupt-Menüpunkte im Burgermenü ist das gewünscht, für die Sprachauswahl/den Hilfelink
   (immer sichtbar außerhalb des Burgermenüs, siehe #navbarPersistent weiter oben) aber nicht: sie
   sollen auf jeder Bildschirmbreite als kompaktes Paar nebeneinander stehen statt versetzt
   untereinander. Die ID-Selektor-Spezifität (#navbarPersistent) überschreibt Bootstraps
  `.navbar-expand-lg .navbar-nav`-Regel zuverlässig, unabhängig von der Bildschirmbreite. */
#navbarPersistent .navbar-nav {
	flex-direction: row;
}

.nav-icon-li {
	display: flex;
	align-items: center;
}

.nav-icon-li + .nav-icon-li {
	margin-left: 2px;
}

.nav-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0 !important;
}

.nav-lang-box {
	border: 1.5px solid currentColor;
	border-radius: 3px;
	font-size: 0.7rem;
	line-height: 1;
	text-transform: lowercase;
}

/* Der von Bootstrap automatisch ergänzte Pfeil (::after) würde die enge quadratische Box
   sprengen - hier bewusst ausgeblendet, das Dropdown bleibt über Klick auf die Box selbst
   erreichbar. */
.nav-lang-box.dropdown-toggle::after {
	display: none;
}

/* Verhindert, dass das Dropdown der immer sichtbaren Sprachauswahl (zwischen Marke und
   Burgermenü, außerhalb von .navbar-collapse, siehe #navbarPersistent) die Höhe der Navbar
   verändert - das Dropdown-Menü muss dafür zuverlässig aus dem normalen Layoutfluss genommen
   bleiben, unabhängig von umgebenden Flexbox-Containern und unabhängig von der Bildschirmbreite.
   Bewusst NICHT auf die gesamte Navbar bezogen: Bootstrap setzt Dropdowns innerhalb von
   .navbar-collapse bei schmalen Auflösungen absichtlich auf position:static (siehe
   .navbar-nav .dropdown-menu in bootstrap.css) - das ist genau das gewünschte
   Akkordeon-Verhalten fürs Burgermenü und darf hier nicht überschrieben werden. */
.navbar {
	position: relative;
}

#navbarPersistent .dropdown-menu {
	position: absolute !important;
}

/* Ab dem lg-Breakpoint (aufgeklapptes Hauptmenü, kein Burgermenü mehr) standen die Hauptmenüpunkte
   ("Mitglieder" usw., ul.mr-auto) bisher ganz links im Burgermenü-Bereich, unmittelbar nach dem
   Hilfelink - bei einem Benutzer mit nur wenigen sichtbaren Menüpunkten (z.B. nur
   "Veranstaltungen") wirkte das optisch unausgewogen, da rechts davon viel Leerraum bis zum
   persönlichen Menü (ul.ml-auto) klaffte. #navigation wird daher zu einem zweispaltigen Grid statt
   eines einzelnen Flex-Rows: Spalte 1 (flexibel) nimmt den gesamten Bereich zwischen Hilfelink und
   persönlichem Menü ein, Spalte 2 (so breit wie nötig) bleibt für das persönliche Menü am rechten
   Rand reserviert - die Hauptmenüpunkte werden dadurch innerhalb ihrer eigenen, vollen Spaltenbreite
   zentriert statt linksbündig zu kleben. `!important` nötig, da Bootstrap `.navbar-expand-lg
   .navbar-collapse{display:flex}` sowie die `.mr-auto`/`.ml-auto`-Hilfsklassen selbst bereits mit
   `!important` arbeiten. */
@media (min-width: 992px) {
	#navigation {
		display: grid !important;
		grid-template-columns: 1fr auto;
	}

	#navigation > ul.navbar-nav.mr-auto {
		grid-column: 1;
		justify-content: center;
		margin-right: 0 !important;
	}

	#navigation > ul.navbar-nav.ml-auto {
		grid-column: 2;
		margin-left: 0 !important;
	}
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	right: 100%;
	left: auto;
	margin-top: -1px;
}

@media (max-width: 991.98px) {
	/* Etwas hellerer Grauton als die Navbar selbst (#d0d0d0), damit sich das aufgeklappte
	   Burgermenü sichtbar davon abhebt. */
	.navbar-collapse.show,
	.navbar-collapse.collapsing {
		background-color: #e6e6e6;
		padding: 0.5rem 1rem;
	}

	/* Feinschliff fürs Akkordeon-Verhalten der Untermenüs im Burgermenü (die eigentliche
	   position:static kommt bereits von Bootstrap selbst, siehe Kommentar oben - hier nur noch
	   volle Breite/Einrückung statt der schmalen Dropdown-Optik, plus Absicherung falls eine
	   spätere Änderung an #navbarPersistent-Regeln zu breit gefasst wird). */
	.dropdown-submenu > .dropdown-menu {
		position: static !important;
		float: none;
		width: 100%;
		margin: 0;
		padding-left: 1rem;
		border: none;
		box-shadow: none;
	}
}

/* Aus Markdown gerenderte Beschreibungstexte (siehe App\Attendance::getDescriptionHtmlAttribute()
   und partials/_markdown_toolbar.blade.php) - kompaktere Überschriften/Abstände als der
   Browser-Standard, damit sie proportional in eine Karte passen statt sie zu sprengen. */
.description-markdown :first-child {
	margin-top: 0;
}

.description-markdown :last-child {
	margin-bottom: 0;
}

.description-markdown h1,
.description-markdown h2,
.description-markdown h3,
.description-markdown h4,
.description-markdown h5,
.description-markdown h6 {
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}

.description-markdown ul,
.description-markdown ol {
	margin-bottom: 0.5rem;
	padding-left: 1.25rem;
}

.description-markdown p {
	margin-bottom: 0.5rem;
}

/* Datum/Uhrzeit/Kostenbeitrag einer Veranstaltung (attendances/member_index.blade.php) als
   kleine, mit Icon versehene Chips statt einer schlichten grauen Textzeile - der Kostenbeitrag
   bekommt bewusst eine eigene, grüne Einfärbung (Geld = Grün, intuitiv erkennbar), damit er sich
   auf einen Blick von den rein informativen Datum-/Uhrzeit-Angaben abhebt. */
.event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.event-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f7;
	border: 1px solid #e0e6e9;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.85rem;
	color: #495057;
}

.event-chip svg {
	flex: none;
	color: #6c757d;
}

.event-chip-cost {
	background: #eaf7ee;
	border-color: #cfead9;
	color: #1e7e42;
	font-weight: 600;
}

.event-chip-cost svg {
	color: #28a745;
}