/**
 * TB-omat Rangliste – Frontend.
 *
 * Übernommen aus Snippet 489 (Tabellen, Sticky-Sidebar, Theme-Overrides),
 * dem Inline-CSS der Seite zeiten-teilnehmer (resultTablePerson) und den
 * Inline-Styles der Snippets 184, 348 und 462. Klassen wie bisher, damit das
 * Child-Theme weiter greift.
 */

/* --- Theme-Overrides und Sticky-Sidebar (Snippet 489) ------------------- */

@media (min-width: 44.375em) and (max-width: 56.875em) {
	.home .entry-content {
		margin-right: 7.6923%;
	}
	.sidebar {
		padding-right: 7.6923%;
	}
}

@media (min-width: 44.375em) {
	.sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 100px;
	}
}

/* --- Rangliste und König ---------------------------------------------- */

.resultTable,
.resultKoenigTable,
.sidebar [name="filter"] table {
	line-height: 1.325em;
	padding: 0;
	white-space: nowrap;
	overflow-x: auto;
}

.resultTable,
.sidebar [name="filter"] table {
	table-layout: auto;
}

@media (min-width: 1280px) {
	.resultTable {
		font-size: 0.8rem;
	}
	.resultKoenigTable {
		font-size: 0.9rem;
	}
}

@media (max-width: 1280px) {
	.resultTable-wrapper {
		overflow-x: auto;
	}
}

@media (min-width: 640px) and (max-width: 1279px) {
	.resultTable,
	.resultKoenigTable {
		font-size: 0.8rem;
	}
}

@media (min-width: 360px) and (max-width: 639px) {
	.resultTable,
	.resultKoenigTable {
		font-size: 0.75rem;
	}
}

@media (max-width: 550px) {
	.resultTable,
	.resultKoenigTable {
		table-layout: auto;
	}
}

@media (max-width: 359px) {
	.resultTable,
	.resultKoenigTable {
		font-size: 0.6rem;
	}
}

.resultTable th,
.resultTable td,
.resultKoenigTable td {
	padding: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resultTable th,
.resultKoenigTable th {
	background-color: #f7f7f7;
	cursor: default;
}

.resultTable .clickable-row:hover,
.resultKoenigTable .clickable-row:hover {
	background-color: #e2e2e2;
	cursor: pointer;
}

.resultTable .platz,
.resultTable .dauer,
.resultTable .geschwindigkeit,
.resultTable .rueckstand,
.resultTable .datum,
.resultTable .alterbeimessung,
.resultTable .anzahlversuche,
.resultKoenigTable .gesamtzeit,
.resultKoenigTable .rad,
.resultKoenigTable .laufen {
	text-align: right;
}

/* Name als Link: aussehen wie bisher (die ganze Zeile ist klickbar). */
.resultTable td a,
.resultKoenigTable td a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.resultTable td a:hover,
.resultTable td a:focus,
.resultKoenigTable td a:hover,
.resultKoenigTable td a:focus {
	text-decoration: underline;
}

/* AK-Zwischenzeile: <th scope="rowgroup">, aussehen wie die bisherige Zelle. */
.resultTable tr.tbo-gruppe th {
	background-color: transparent;
	font-weight: inherit;
	text-align: left;
}

/* Zahlen untereinander (Schritt 8.2). */
.tbo-tabelle td.platz,
.tbo-tabelle td.jahr,
.tbo-tabelle td.dauer,
.tbo-tabelle td.geschwindigkeit,
.tbo-tabelle td.rueckstand,
.tbo-tabelle td.datum,
.tbo-tabelle td.startzeit,
.tbo-tabelle td.alterbeimessung,
.tbo-tabelle td.anzahlversuche,
.tbo-tabelle td.gesamtzeit,
.tbo-tabelle td.rad,
.tbo-tabelle td.laufen {
	font-variant-numeric: tabular-nums;
}

/* Nur für Screenreader (z.B. <caption>, der Titel steht sichtbar darüber). */
.tbo-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Frauen rot, wenn Geschlecht = alle (Snippet 184). */
.resultTable tr.tbo-frau td {
	color: #c01008;
}

.resultPagination {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Spezifischer als input[type="text"] des Themes (dort width: 100%). */
.resultPagination input[type="text"] {
	width: 50px;
}

#searchInput {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23777' stroke-width='2'/%3E%3Cpath d='M10.3 10.3 15 15' stroke='%23777' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: 12px center;
	background-repeat: no-repeat;
	padding: 12px 20px 12px 40px;
}

/* --- König und Stand (Snippets 348, 462) ------------------------------ */

.tbo-koenig-krone {
	font-weight: bold;
}

.tbo-stand-hinweis {
	font-weight: bold;
	color: #f00;
}

.tbo-stand-zeit {
	font-weight: bold;
	margin-top: 2em;
	display: inline-block;
}

/* --- Personenansicht (Seite zeiten-teilnehmer) ------------------------ */

table.resultTablePerson {
	font-size: 80%;
	line-height: 1.325em;
	padding: 0;
	table-layout: auto;
	width: auto;
	white-space: nowrap;
}

table.resultTablePerson th,
table.resultTablePerson td {
	padding: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Auf sehr schmalen Bildschirmen im eigenen Rahmen scrollen. */
.resultTablePerson-wrapper {
	overflow-x: auto;
}

table.resultTablePerson thead {
	background-color: #f7f7f7;
}

table.resultTablePerson tbody tr:hover {
	background-color: #e2e2e2;
}

table.resultTablePerson td.jahr,
table.resultTablePerson td.datum,
table.resultTablePerson td.startzeit,
table.resultTablePerson td.dauer,
table.resultTablePerson td.geschwindigkeit,
table.resultTablePerson td.alterbeimessung {
	text-align: right;
}

/* Bestzeit markiert (Schritt 8.4). */
table.resultTablePerson tr.tbo-bestzeit {
	background-color: #dcebf7;
}

table.resultTablePerson td.bestzeit {
	font-weight: bold;
}

/* --- Filter ----------------------------------------------------------- */

.tbo-filter select {
	border-radius: 3px;
	padding: 4px;
	width: 100%;
}

/* Auf schmalen Bildschirmen vor der Rangliste (frontend.js). */
.tbo-filter-verschoben {
	margin-bottom: 2em;
	padding-top: 0;
}

/* Während interaktiv.js nachlädt (Schritt 8.3). */
.tbo-rangliste-inhalt,
.tbo-koenig,
.tbo-teilnehmer {
	transition: opacity 0.15s;
}

.tbo-laedt .tbo-rangliste-inhalt,
.tbo-laedt .tbo-koenig,
.tbo-laedt .tbo-teilnehmer {
	opacity: 0.6;
}

/* Mit JS sendet der Filter beim Ändern sofort (interaktiv.js). */
.tbo-js .tbo-filter-anzeigen {
	display: none;
}