/* ==================================================================
   Indians Hockeydata - Stylesheet
   Wird nach dem hockeydata-Template geladen und ueberschreibt dessen
   Basiswerte. Aufbau:
     1. Farben
     2. Tabellen der hockeydata-Widgets
     3. Buttonspalte im Spielplan
     4. Spieltagsansichten
     5. Hinweis ohne Daten
   ================================================================== */

/* --- 1. Farben --------------------------------------------------- */
:root {
	--ihd-accent: #1b2747;
	--ihd-accent-text: #ffffff;
	--ihd-text: #1b2747;
	--ihd-ticket: #e3001b;
	--ihd-stream: #0c112a;
	--ihd-border: #e3e6ee;
	--ihd-zebra: #f5f7fb;
}

/* --- 2. Tabellen ------------------------------------------------- */
.ihd-widget {
	margin: 0 0 1.5em;
	width: 100%;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

.ihd-widget .-hd-util-intellitable {
	width: 100%;
	font-size: 0.95em;
}

.ihd-widget .-hd-util-intellitable table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.ihd-widget .-hd-util-intellitable-data th {
	background-color: var(--ihd-accent);
	color: var(--ihd-accent-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	padding: 10px;
	border: none;
	line-height: 1.3;
}

.ihd-widget .-hd-util-intellitable-data td {
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 6px 10px;
	border-bottom: 2px solid #ffffff;
	vertical-align: middle;
}

.ihd-widget .-hd-util-intellitable-data tr:last-child td {
	border-bottom: 0;
}

/* Themes setzen Tabellentext haeufig auf Weiss, daher hohe Spezifitaet.
   Die Buttons sind ausgenommen, sie bringen ihre eigene Farbe mit. */
.ihd-widget table td,
.ihd-widget table td span,
.ihd-widget table td div,
.ihd-widget table td a:not(.ihd-ticket-button):not(.ihd-stream-button),
.ihd-widget .-hd-util-intellitable-data td,
.ihd-widget .-hd-util-intellitable-data td span,
.ihd-widget .-hd-util-intellitable-data td a:not(.ihd-ticket-button):not(.ihd-stream-button) {
	color: var(--ihd-text) !important;
}

.ihd-widget table th,
.ihd-widget table th a,
.ihd-widget table th span,
.ihd-widget .-hd-util-intellitable-data th,
.ihd-widget .-hd-util-intellitable-data th a {
	color: var(--ihd-accent-text) !important;
}

.ihd-widget .-hd-util-intellitable-data tr:nth-child(odd) td {
	background-color: var(--ihd-zebra);
}

.ihd-widget .-hd-util-intellitable-data tr:nth-child(even) td {
	background-color: #eef1f7;
}

/* Steht die Tabelle neben einer Spieltagsansicht, setzt das Skript die
   Klasse ihd-equal und beide bekommen dieselbe Hoehe. Die Tabellen-
   zeilen verteilen sich dann ueber die volle Hoehe. */
.ihd-widget.ihd-equal {
	display: flex;
	flex-direction: column;
}

.ihd-widget.ihd-equal .-hd-util-intellitable,
.ihd-widget.ihd-equal > div {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.ihd-widget.ihd-equal table {
	height: 100%;
}

.ihd-widget .-hd-util-intellitable-data tr:hover td {
	background-color: rgba(27, 39, 71, 0.08);
}

.ihd-widget .-hd-util-intellitable-data td img,
.ihd-widget td img {
	max-height: 30px;
	width: auto;
	max-width: 40px;
	vertical-align: middle;
	display: inline-block;
}

.ihd-widget.-hd-rd-mobile td img {
	max-height: 22px;
	max-width: 28px;
}

/* --- 3. Buttonspalte im Spielplan -------------------------------- */
/* Beide Buttons haben identische Masse. Die Werte stehen fest im
   Stylesheet, damit keine gespeicherte Einstellung sie verstellt. */
.ihd-widget td.ihd-stream-col,
.ihd-widget th.ihd-stream-col {
	text-align: right;
	white-space: nowrap;
	width: 1%;
	padding: 5px 10px;
}

.ihd-widget td.ihd-stream-col a.ihd-stream-button,
.ihd-widget td.ihd-stream-col a.ihd-ticket-button,
a.ihd-stream-button,
a.ihd-ticket-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 32px;
	padding: 0 8px;
	border: 0;
	border-radius: 4px;
	text-decoration: none !important;
	box-shadow: none;
	transition: opacity 0.15s ease;
}

.ihd-widget td.ihd-stream-col a.ihd-stream-button:hover,
.ihd-widget td.ihd-stream-col a.ihd-ticket-button:hover,
.ihd-widget td.ihd-stream-col a.ihd-stream-button:focus,
.ihd-widget td.ihd-stream-col a.ihd-ticket-button:focus,
a.ihd-stream-button:hover,
a.ihd-ticket-button:hover {
	opacity: 0.85;
	text-decoration: none !important;
}

/* SPRADE.TV: Flaeche in der Farbe des Logohintergrunds. */
.ihd-widget td.ihd-stream-col a.ihd-stream-button,
a.ihd-stream-button {
	background-color: var(--ihd-stream) !important;
	line-height: 0;
}

.ihd-widget td.ihd-stream-col a.ihd-stream-button img,
a.ihd-stream-button img {
	height: 15px !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	display: block;
	border: 0;
	margin: 0;
}

/* Tickets: rote Flaeche, weisse Schrift. */
.ihd-widget td.ihd-stream-col a.ihd-ticket-button,
a.ihd-ticket-button {
	background-color: var(--ihd-ticket);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.ihd-widget table td a.ihd-ticket-button,
.ihd-widget .-hd-util-intellitable-data td a.ihd-ticket-button,
.ihd-widget td.ihd-stream-col a.ihd-ticket-button,
.ihd-widget td.ihd-stream-col a.ihd-ticket-button:hover,
.ihd-widget td.ihd-stream-col a.ihd-ticket-button:focus,
a.ihd-ticket-button,
a.ihd-ticket-button:hover,
a.ihd-ticket-button:focus {
	color: #ffffff !important;
}

.ihd-widget.-hd-rd-mobile td.ihd-stream-col a.ihd-stream-button,
.ihd-widget.-hd-rd-mobile td.ihd-stream-col a.ihd-ticket-button {
	width: 106px;
	height: 26px;
	padding: 0 6px;
}

.ihd-widget.-hd-rd-mobile td.ihd-stream-col a.ihd-stream-button img {
	height: 12px !important;
}

.ihd-widget.-hd-rd-mobile td.ihd-stream-col a.ihd-ticket-button {
	font-size: 11px;
}

/* Einzelner Button ausserhalb der Tabelle: [indians_livestream] */
.ihd-livestream {
	margin: 0 0 12px;
}

.ihd-livestream-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	background-color: var(--ihd-stream) !important;
	border-radius: 4px;
	line-height: 0;
	text-decoration: none !important;
	transition: opacity 0.15s ease;
}

.ihd-livestream-button img {
	height: 22px;
	width: auto;
	max-width: none;
	display: block;
	border: 0;
}

.ihd-livestream-button:hover,
.ihd-livestream-button:focus {
	opacity: 0.85;
}

/* --- 4. Spieltagsansichten --------------------------------------- */
/* Je Kachel oben die Mannschaften auf dem Vereinston, darunter eine
   weisse Trennlinie, unten Datum, Uhrzeit und Halle auf Rot. Die
   Widgets bringen keine Ueberschrift mit, die setzt die Seite selbst.

   Jede Kachel wird immer in voller, natuerlicher Groesse gezeichnet -
   bewusst kompakt (kleine Schrift, kleines Logo) statt bulliger Boxen -
   und NIE per Skript in der Hoehe veraendert (kein overflow:hidden,
   keine gesetzte Hoehe). Steht
   in derselben WP-Bakery-Zeile eine Tabelle, wird stattdessen die
   TABELLE auf die Hoehe der Spieltagsansicht gebracht (matchday.js),
   nie umgekehrt.

   Logo-Anordnung: bei beiden Mannschaften sitzt das Logo an der
   AUSSENKANTE der Kachel, der Name daneben Richtung Mitte/Ergebnis -
   bei der Heimmannschaft also links [Logo][Name], beim Gast rechts
   [Name][Logo]. Die Reihenfolge im Markup wird von matchday.js
   passend zur Seite gesetzt (seite()-Funktion), justify-content haelt
   das Paar unabhaengig von der Namenslaenge konsequent an der
   jeweiligen Aussenkante - bei kurzen wie bei langen Namen gleich.

   Schrift Montserrat; die Datei laedt das Theme, das Plugin bindet
   keine externe Schriftquelle ein. */
.ihd-matchday {
	margin: 0 0 1.5em;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

.ihd-matchday-source {
	display: none !important;
}

.ihd-matchday-out {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: 7px;
}

.ihd-md-game {
	/* Natuerliche Groesse - waechst und schrumpft nicht mit dem Platz. */
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/* Bewusst KEIN eigener Hintergrund hier: Blau und Rot kommen
	   ausschliesslich von .ihd-md-teams bzw. .ihd-md-meta. Ein Bereich
	   ohne eigene Farbe (z. B. .ihd-md-action) zeigt dadurch echt den
	   Seitenhintergrund, statt versehentlich in Blau zu erscheinen. */
	color: #fff !important;
	text-decoration: none !important;
}

a.ihd-md-game:hover,
a.ihd-md-game:focus {
	opacity: 0.92;
	color: #fff !important;
}

.ihd-md-teams {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 7px;
	padding: 8px 10px;
	background: var(--ihd-accent);
	border-bottom: 2px solid #ffffff;
	min-width: 0;
}

.ihd-md-team {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff !important;
	/* Namen brechen nur an Leerzeichen, nie im Wort. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.ihd-md-team span {
	color: #fff !important;
	min-width: 0;
}

/* Heim: Logo aussen links, Name Richtung Mitte. */
.ihd-md-home {
	justify-content: flex-start;
	text-align: left;
}

/* Gast: Name Richtung Mitte, Logo aussen rechts. */
.ihd-md-away {
	justify-content: flex-end;
	text-align: right;
}

.ihd-md-team img {
	height: 32px;
	width: auto;
	max-width: 42px;
	flex: 0 0 auto;
}

.ihd-md-score {
	flex: 0 0 auto;
	padding: 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	color: #fff !important;
}

.ihd-md-meta {
	background: var(--ihd-ticket) !important;
	padding: 6px 10px;
	text-align: center;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ticket- bzw. SPRADE.TV-Button unterhalb einer Kachel. Nutzt dieselben
   Buttonklassen (und damit dieselbe feste Groesse/Optik) wie die
   Buttonspalte im tabellarischen Spielplan. */
.ihd-md-action {
	display: flex;
	justify-content: center;
	padding: 8px 0 0;
}

.ihd-matchday-team .ihd-md-action {
	padding: 10px 0 0;
}

/* Echte, schmale Telefonbreiten: massvoll verkleinern. Betrifft nicht
   das Zusammenspiel mit einer Nachbarspalte - das regelt ausschliesslich
   der Abstand, nie die Kachelgroesse. */
/* Eigene Mannschaft (z. B. [indians_naechste_spiele]): steht meist
   breiter, ohne Konkurrenz durch eine Tabelle daneben. Groessere
   Schrift und groesseres Logo statt der kompakten Ligaansicht. */
.ihd-matchday-team .ihd-md-teams {
	padding: 14px 20px;
	gap: 14px;
}

.ihd-matchday-team .ihd-md-team {
	font-size: 20px;
	gap: 12px;
}

.ihd-matchday-team .ihd-md-team img {
	height: 48px;
	max-width: 64px;
}

.ihd-matchday-team .ihd-md-score {
	font-size: 17px;
	padding: 0 14px;
}

.ihd-matchday-team .ihd-md-meta {
	padding: 10px 16px;
	font-size: 14px;
}

@media (max-width: 480px) {
	.ihd-matchday-team .ihd-md-teams { padding: 9px 12px; gap: 8px; }
	.ihd-matchday-team .ihd-md-team { font-size: 15px; gap: 7px; }
	.ihd-matchday-team .ihd-md-team img { height: 32px; max-width: 42px; }
	.ihd-matchday-team .ihd-md-score { font-size: 13px; padding: 0 6px; }
	.ihd-matchday-team .ihd-md-meta { font-size: 12px; padding: 7px 10px; }

	.ihd-md-teams { padding: 6px 8px; gap: 5px; }
	.ihd-md-team { font-size: 11.5px; gap: 5px; }
	.ihd-md-team img { height: 26px; max-width: 34px; }
	.ihd-md-score { font-size: 10.5px; padding: 0 4px; }
	.ihd-md-meta { font-size: 10px; padding: 5px 8px; }
}

/* --- 5. Hinweis ohne Daten --------------------------------------- */
.ihd-widget p.ihd-empty,
.ihd-matchday p.ihd-empty {
	margin: 0;
	padding: 14px 16px;
	background: var(--ihd-zebra);
	border-left: 4px solid var(--ihd-accent);
	color: var(--ihd-text);
	font-size: 0.95em;
}

.ihd-matchday .ihd-empty {
	flex: 1 1 auto;
	font-family: inherit;
}

.ihd-widget .ihd-hinweis,
p.ihd-hinweis {
	padding: 10px 12px;
	border-left: 4px solid var(--ihd-accent);
	background: var(--ihd-zebra);
}