/*
 * Tippspiel - Stylesheet
 *
 * @author VerusIT e.K. <https://www.verusit.de>
 * @copyright (c) 2026 VerusIT e.K.
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 * Grundsatz: keine festen Vorder-/Hintergrundfarben, sondern durchgehend
 * halbtransparente Graustufen ueber "currentColor" bzw. rgba(). Damit bleibt
 * die Darstellung sowohl auf hellen als auch auf dunklen Styles lesbar,
 * ohne dass die Farbwerte des jeweiligen Styles bekannt sein muessen.
 */

/* --------------------------------------------------------------------
 * Navigation
 * -------------------------------------------------------------------- */

.tipp-nav {
	margin: 0 0 14px 0;
	padding: 8px 0;
	border-bottom: 1px solid rgba(128, 128, 128, .3);
}

.tipp-nav-link {
	display: inline-block;
	margin: 2px 16px 2px 0;
	font-weight: bold;
	text-decoration: none;
}

.tipp-nav-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------
 * Panels und Spaltenlayout
 * -------------------------------------------------------------------- */

.tipp-season-switch {
	display: inline-block;
	margin-left: 4px;
	font-size: .9em;
}

.tipp-season-switch select { max-width: 16em; }

.tipp-season-tag {
	font-size: .75em;
	font-weight: normal;
	opacity: .7;
	vertical-align: middle;
	padding: 2px 6px;
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 3px;
}

.tipp-panel { margin-bottom: 16px; }

/*
 * Hervorgehobener Block - fuer die Tippmatrix der anderen Teilnehmer.
 * Halbtransparenter Gruenton, damit er auf hellen wie dunklen Styles
 * traegt und die Textfarbe unberuehrt bleibt.
 */
.tipp-panel-accent {
	background-color: rgba(46, 139, 87, .10);
	border-left: 4px solid rgba(46, 139, 87, .55);
	border-radius: 3px;
}

.tipp-panel-accent > .inner { padding: 10px 12px; }

.tipp-panel-accent table.tipp-table thead th {
	background-color: rgba(46, 139, 87, .18);
	border-bottom-color: rgba(46, 139, 87, .45);
}

.tipp-panel h3 {
	margin: 0 0 10px 0;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(128, 128, 128, .25);
}

.tipp-panel h4 { margin: 8px 0 6px 0; }

.tipp-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
}

.tipp-columns > * {
	flex: 1 1 340px;
	min-width: 0;
}

/* --------------------------------------------------------------------
 * Tabellen
 *
 * Die Kopfzeilen werden bewusst NICHT von prosilvers ".table1 thead th"
 * uebernommen - dort ist die Schrift weiss und nur auf dem dunklen
 * Seitenkopf lesbar. Die hoehere Spezifitaet ("table.tipp-table") setzt
 * das unabhaengig von der Ladereihenfolge ausser Kraft.
 * -------------------------------------------------------------------- */

.tipp-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	/*
	 * Bewusst OHNE prosilvers Klasse "table1": deren Responsive-Regeln
	 * stapeln unterhalb von 700px jede einzelne Zelle untereinander und
	 * beschriften sie ueber ein data-label, das hier nicht ueberall
	 * gesetzt ist. Die Tabellen bringen ihre Gestaltung deshalb
	 * vollstaendig selbst mit.
	 */
	line-height: 1.4;
}

/* Zebrastreifen: nutzt die Klassen des Styles, wenn vorhanden, und
   faellt sonst auf eine eigene, dezente Abstufung zurueck */
.tipp-table tbody tr:nth-child(even) > td { background-color: rgba(128, 128, 128, .05); }
.tipp-table tbody tr.bg1 > td,
.tipp-table tbody tr.bg2 > td { background-color: transparent; }
.tipp-table tbody tr.bg2 > td { background-color: rgba(128, 128, 128, .05); }

table.tipp-table thead th {
	color: inherit;
	background-color: rgba(128, 128, 128, .16);
	background-image: none;
	font-size: .9em;
	font-weight: bold;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	text-shadow: none;
	white-space: nowrap;
	padding: 7px 8px;
	border-bottom: 2px solid rgba(128, 128, 128, .4);
}

table.tipp-table tbody td {
	padding: 6px 8px;
	vertical-align: middle;
	border-bottom: 1px solid rgba(128, 128, 128, .16);
}

.tipp-table tbody tr:last-child td { border-bottom: none; }

/* Ausrichtungen - mit erhoehter Spezifitaet, damit sie auch fuer
   Kopfzellen gegen die Grundregel oben greifen */
table.tipp-table th.tipp-num,
table.tipp-table td.tipp-num {
	text-align: right;
	white-space: nowrap;
}

table.tipp-table th.tipp-center,
table.tipp-table td.tipp-center { text-align: center; }

table.tipp-table th.tipp-right,
table.tipp-table td.tipp-right { text-align: right; }

/* --------------------------------------------------------------------
 * Textauszeichnungen
 * -------------------------------------------------------------------- */

.tipp-small { font-size: .85em; }
.tipp-muted { opacity: .5; }
.tipp-pos { font-size: .8em; opacity: .6; }

.tipp-hint {
	font-size: .85em;
	opacity: .8;
	margin: 4px 0 10px 0;
}

.tipp-locked { opacity: .75; }
.tipp-daywin { color: #c8901a; }

/* --------------------------------------------------------------------
 * Eingabefelder
 * -------------------------------------------------------------------- */

/*
 * Tippfelder: prosilver setzt fuer "input.inputbox" eine prozentuale Breite,
 * die ein zweistelliges Feld unnoetig breit macht. Die hoehere Spezifitaet
 * hier setzt das ausser Kraft. Die Breite ist in "ch" angegeben - das ist
 * die Breite einer Ziffer, zwei davon plus Innenabstand ergeben genau das
 * Feld, das gebraucht wird.
 */
.tipp-panel input.tipp-input,
input.tipp-input {
	width: 3.6ch;
	min-width: 3.6ch;
	max-width: 3.6ch;
	box-sizing: content-box;
	text-align: center;
	padding: 3px 4px;
	margin: 0 1px;
	font-variant-numeric: tabular-nums;
}

/* Doppelpunkt zwischen den beiden Feldern nicht umbrechen lassen */
.tipp-score-input {
	white-space: nowrap;
	display: inline-block;
}

/* Abkuerzungen in Tabellenkoepfen: erklaeren sich beim Zeigen */
.tipp-table thead abbr {
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	cursor: help;
}

/* Zonenlegende unter der Ligatabelle */
.tipp-legend {
	margin: 10px 0 0 0;
	font-size: .82em;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.tipp-legend span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.tipp-legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	font-style: normal;
}

.tipp-legend .zone-cl { background: #1f6fb2; }
.tipp-legend .zone-clq { background: #6aa6d6; }
.tipp-legend .zone-uefa { background: #2e8b57; }
.tipp-legend .zone-down { background: #b22222; }

/* --------------------------------------------------------------------
 * Schaltflaechen
 *
 * Eigenstaendig gestaltet statt ueber die Klassen des jeweiligen Styles.
 * Die Grundform arbeitet mit halbtransparentem Grau und "currentColor"
 * und passt sich damit hellen wie dunklen Styles an; nur die
 * Hauptschaltflaeche traegt einen festen Akzent, damit sie sich
 * eindeutig abhebt.
 * -------------------------------------------------------------------- */

.tipp-button,
a.tipp-button,
input.tipp-button,
button.tipp-button {
	display: inline-block;
	box-sizing: border-box;
	padding: 8px 16px;
	min-height: 36px;
	font-family: inherit;
	font-size: .95em;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	color: inherit;
	background-color: rgba(128, 128, 128, .14);
	background-image: none;
	border: 1px solid rgba(128, 128, 128, .45);
	border-radius: 4px;
	transition: background-color .15s ease, border-color .15s ease;
}

.tipp-button:hover,
a.tipp-button:hover {
	background-color: rgba(128, 128, 128, .24);
	border-color: rgba(128, 128, 128, .6);
	text-decoration: none;
}

.tipp-button:active { transform: translateY(1px); }

.tipp-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tipp-button[disabled],
.tipp-button[disabled]:hover {
	opacity: .45;
	cursor: default;
	transform: none;
}

/* Hauptschaltflaeche - dieselbe Akzentfarbe wie die Champions-League-Zone */
.tipp-button-primary,
input.tipp-button-primary,
a.tipp-button-primary {
	color: #ffffff;
	background-color: #1f6fb2;
	border-color: #1a5f99;
}

.tipp-button-primary:hover,
a.tipp-button-primary:hover {
	background-color: #1a5f99;
	border-color: #164f80;
}

/* Auswahlfeld mit Beschriftungen nebeneinander */
.tipp-choice {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.tipp-choice label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

/* Zeile mit Absende-Schaltflaechen */
.tipp-actions {
	margin: 12px 0 0 0;
	padding: 0;
	border: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* --------------------------------------------------------------------
 * Wappen
 * -------------------------------------------------------------------- */

.tipp-crest {
	height: 16px;
	width: auto;
	max-width: 20px;
	vertical-align: middle;
	object-fit: contain;
}

/* --------------------------------------------------------------------
 * Breite Tabellen horizontal scrollbar halten
 * -------------------------------------------------------------------- */

.tipp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tipp-matrix th,
.tipp-matrix td { white-space: nowrap; }

.tipp-matrix tbody td:first-child { text-align: left; }

/* --------------------------------------------------------------------
 * Eigene Zeile hervorheben
 *
 * Als Zellhintergrund statt "outline" auf dem <tr>: bei
 * border-collapse werden Rahmen und Schatten auf Zeilenebene
 * nicht zuverlaessig gezeichnet.
 * -------------------------------------------------------------------- */

.tipp-table tbody tr.tipp-self > td {
	background-color: rgba(70, 130, 180, .14);
	font-weight: bold;
}

/* --------------------------------------------------------------------
 * Tabellenzonen - farbiger Balken an der ersten Zelle
 * -------------------------------------------------------------------- */

.tipp-table tbody tr.tipp-zone-cl > td:first-child   { border-left: 4px solid #1f6fb2; }
.tipp-table tbody tr.tipp-zone-clq > td:first-child  { border-left: 4px solid #6aa6d6; }
.tipp-table tbody tr.tipp-zone-uefa > td:first-child { border-left: 4px solid #2e8b57; }
.tipp-table tbody tr.tipp-zone-down > td:first-child { border-left: 4px solid #b22222; }

/* --------------------------------------------------------------------
 * Tendenzpfeile
 * -------------------------------------------------------------------- */

.tipp-trend {
	display: inline-block;
	vertical-align: middle;
}

.tipp-trend-up,
.tipp-trend-down {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.tipp-trend-up { border-bottom: 6px solid #2e8b57; }
.tipp-trend-down { border-top: 6px solid #b22222; }

.tipp-trend-equal,
.tipp-trend-new {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgba(128, 128, 128, .55);
}

/* --------------------------------------------------------------------
 * Blaetternavigation
 * -------------------------------------------------------------------- */

.tipp-pagination {
	margin: 10px 0;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.tipp-pagination select { max-width: 100%; }

/* --------------------------------------------------------------------
 * Extraspiele und Spieltagsbloecke
 * -------------------------------------------------------------------- */

.tipp-extra-item {
	padding: 10px 0;
	border-bottom: 1px solid rgba(128, 128, 128, .2);
}

.tipp-extra-item:last-child { border-bottom: none; }

.tipp-overview-block { flex: 1 1 260px; }

/* --------------------------------------------------------------------
 * Druckausgabe
 * -------------------------------------------------------------------- */

@media print {
	.tipp-nav,
	.tipp-pagination,
	#page-header,
	#page-footer,
	.navbar,
	.copyright { display: none !important; }

	.tipp-print .tipp-table { font-size: 9pt; }

	table.tipp-table thead th {
		background-color: transparent;
		border-bottom: 1.5pt solid #000;
	}

	.tipp-table tbody td { border-bottom: .5pt solid #999; }
	.tipp-scroll { overflow: visible; }
}

/* --------------------------------------------------------------------
 * Schmale Bildschirme
 * -------------------------------------------------------------------- */

@media (max-width: 900px) {
	.tipp-columns > * { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------
 * Schmale Bildschirme
 *
 * Spieltabellen haben bis zu sieben Spalten - auf einem Telefon ist das
 * unlesbar. Unterhalb von 600px wird jede Spielzeile deshalb zu einem
 * eigenen Block umgebaut: Anstoss oben, die Paarung darunter, Tipp und
 * Ergebnis in einer Zeile mit vorangestellter Beschriftung.
 * -------------------------------------------------------------------- */

@media (max-width: 600px) {

	.tipp-columns { gap: 12px; }

	/*
	 * Sicherheitsnetz gegen Styles, die Tabellen auf schmalen
	 * Bildschirmen generell aufloesen. Nur die ausdruecklich als
	 * "tipp-stack" gekennzeichneten Tabellen sollen das tun.
	 */
	.tipp-table:not(.tipp-stack) { display: table; }
	.tipp-table:not(.tipp-stack) thead { display: table-header-group; }
	.tipp-table:not(.tipp-stack) tbody { display: table-row-group; }
	.tipp-table:not(.tipp-stack) tr { display: table-row; }
	.tipp-table:not(.tipp-stack) td { display: table-cell; }
	.tipp-table:not(.tipp-stack) th { display: table-cell; }
	.tipp-table:not(.tipp-stack) td::before { content: none; }

	table.tipp-table thead th,
	table.tipp-table tbody td {
		padding: 5px 4px;
		font-size: .9em;
	}

	.tipp-crest { height: 14px; }

	/* Nebensaechliche Spalten ausblenden - Tordifferenz und Punkte
	   bleiben, Spiele/Siege/Unentschieden/Niederlagen entfallen */
	table.tipp-table th.tipp-c-opt,
	table.tipp-table td.tipp-c-opt { display: none; }

	/* --- Spielzeilen als Block --- */

	.tipp-stack thead { display: none; }

	.tipp-stack,
	.tipp-stack tbody,
	.tipp-stack tr,
	.tipp-stack td {
		display: block;
		width: auto;
	}

	.tipp-stack tbody tr {
		padding: 8px 6px;
		border-bottom: 1px solid rgba(128, 128, 128, .25);
	}

	.tipp-stack tbody tr:last-child { border-bottom: none; }

	.tipp-stack tbody td {
		border: none;
		padding: 2px 0;
	}

	.tipp-stack td.tipp-c-kickoff {
		font-size: .8em;
		opacity: .7;
		margin-bottom: 2px;
	}

	/* Paarung in einer Zeile, Trennstrich in der Mitte */
	.tipp-stack td.tipp-c-home,
	.tipp-stack td.tipp-c-sep,
	.tipp-stack td.tipp-c-away {
		display: inline-block;
		vertical-align: middle;
		padding: 1px 0;
	}

	.tipp-stack td.tipp-c-home { width: 44%; text-align: right; }
	.tipp-stack td.tipp-c-sep { width: 8%; text-align: center; opacity: .5; }
	.tipp-stack td.tipp-c-away { width: 44%; text-align: left; }

	/* Tabellenplatz hinter dem Vereinsnamen entfaellt - zu viel Text */
	.tipp-stack .tipp-pos { display: none; }

	/* Tipp, Ergebnis und Punkte nebeneinander, jeweils beschriftet */
	.tipp-stack td.tipp-c-tip,
	.tipp-stack td.tipp-c-result,
	.tipp-stack td.tipp-c-points {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		margin-top: 4px;
		margin-right: 14px;
	}

	.tipp-stack td[data-label]::before {
		content: attr(data-label) ": ";
		font-size: .8em;
		opacity: .65;
		margin-right: 4px;
	}

	/* Groessere Tippfelder - Fingerbedienung */
	.tipp-panel input.tipp-input,
	input.tipp-input {
		width: 4ch;
		min-width: 4ch;
		max-width: 4ch;
		padding: 7px 5px;
		font-size: 1em;
	}

	/* Schaltflaechen ueber die volle Breite - sicherer zu treffen */
	.tipp-actions { display: block; }

	.tipp-actions .tipp-button:not(.tipp-button-inline) {
		display: block;
		width: 100%;
		margin: 6px 0 0 0;
		padding: 11px 16px;
		min-height: 44px;
	}

	.tipp-pagination .tipp-button { flex: 1 1 auto; }

	/* --- Navigation --- */

	.tipp-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
	.tipp-nav-link { margin: 0; }

	.tipp-season-switch {
		flex: 1 1 100%;
		margin: 4px 0 0 0;
	}

	.tipp-season-switch select { width: 100%; max-width: none; }

	.tipp-pagination select { flex: 1 1 100%; }
	.tipp-pagination .button2 { flex: 0 0 auto; }

	/* --- Breite Tabellen: erste Spalte beim Scrollen stehen lassen --- */

	.tipp-scroll { margin: 0 -6px; padding: 0 6px; }

	.tipp-matrix tbody td:first-child,
	.tipp-matrix thead th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: inherit;
		box-shadow: 1px 0 0 rgba(128, 128, 128, .25);
	}

	.tipp-matrix thead th:first-child { background-color: rgba(128, 128, 128, .16); }

	/* Auf schmalen Geraeten wirkt der Zebrastreifen sonst durch die
	   klebende Spalte hindurch */
	.tipp-matrix tbody tr.bg1 td:first-child,
	.tipp-matrix tbody tr.bg2 td:first-child { background-clip: padding-box; }

	.tipp-legend { gap: 3px 10px; font-size: .78em; }

	/* Formularfelder im Saisontipp voll ausnutzen */
	.tipp-panel .fields1 input[type="text"],
	.tipp-panel .fields1 select { max-width: 100%; }
}

@media (max-width: 380px) {
	.tipp-stack td.tipp-c-home,
	.tipp-stack td.tipp-c-away { width: 42%; font-size: .95em; }

	.tipp-stack td.tipp-c-tip,
	.tipp-stack td.tipp-c-result,
	.tipp-stack td.tipp-c-points { margin-right: 10px; }
}