/**
 * Öffnungszeiten-Wochentabelle – Stylesheet
 *
 * Farbwerte übernommen aus dem torechtmaker.de-Design-System (Blau-Grau
 * #6085a6 als Akzent, siehe Skill "torechtmaker-design"). Bewusst als
 * eigene, mit --tm-zp- präfixte Custom Properties definiert statt die
 * globalen --tm-*-Variablen aus farben.css vorauszusetzen – dieses Modul
 * kann auch ohne torechtmaker-spezifisches Theme (z. B. bei tm-form.de)
 * eingesetzt werden, ohne dass ein anderes Farbsystem require't werden muss.
 *
 * Responsive-Strategie: reines CSS, kein JavaScript. Unterhalb von 480px
 * wird die <thead> ausgeblendet und jede Tabellenzeile per
 * display: block zu einer eigenen Karte umgeklappt. Die Spaltenüber-
 * schrift kommt dann über das data-label-Attribut per ::before zurück
 * (siehe PHP: jede <td> trägt data-label bereits serverseitig).
 */

.tm-zp-table-wrapper {
	--tm-zp-akzent: #6085a6; /* torechtmaker Blau-Grau (kräftig) */
	--tm-zp-akzent-text: #ffffff;
	--tm-zp-text: #1f1f1f;
	--tm-zp-rand: #dcdcdc;
	--tm-zp-bg-alt: #f7f7f7;

	max-width: 640px;
	font-family: "Poppins", "Quicksand", system-ui, sans-serif;
	color: var( --tm-zp-text );
}

.tm-zp-table {
	width: 100%;
	border-collapse: collapse;
}

.tm-zp-table th,
.tm-zp-table td {
	padding: 0.6em 0.9em;
	text-align: left;
	border-bottom: 1px solid var( --tm-zp-rand );
	vertical-align: top;
}

.tm-zp-table thead th {
	font-weight: 600;
	border-bottom: 2px solid var( --tm-zp-akzent );
}

/* :not(...) statt höherer Spezifität allein zu vertrauen: verhindert
   verlässlich, dass die Zebra-Regel den Hintergrund der Heute-Zeile
   überschreibt, unabhängig von der Zeilenposition (gerade/ungerade) und
   unabhängig von einer künftigen Umsortierung dieser CSS-Datei. Ohne
   :not() gewinnt nämlich die Zebra-Regel (Spezifität 0,2,2) gegen die
   Heute-Regel weiter unten (Spezifität 0,2,1), sobald "Heute" auf eine
   gerade Zeilenposition fällt - Text bleibt dann hell, Hintergrund aber
   fälschlich blass, praktisch unlesbar. */
.tm-zp-table tbody tr:nth-child(even):not(.tm-zp-table__row--today) {
	background: var( --tm-zp-bg-alt );
}

/* Heutiger Tag optisch hervorgehoben – Akzentfarbe als Flächenfarbe,
   passend zum Prinzip "eine Akzentfarbe pro Block" aus dem Design-System. */
.tm-zp-table tr.tm-zp-table__row--today {
	background: var( --tm-zp-akzent );
	color: var( --tm-zp-akzent-text );
	font-weight: 600;
}

.tm-zp-table tr.tm-zp-table__row--today td {
	border-bottom-color: var( --tm-zp-akzent );
}

/* Aktuell ohne sichtbaren Effekt (erbt einfach die Zellen-Schrift) - die
   Klasse existiert als Stil-Hook, damit der Wochentag-Name unabhängig von
   Badge und restlicher Zelle angepasst werden kann (z. B. andere
   Schriftstärke), ohne die HTML-Struktur nachträglich ändern zu müssen. */
.tm-zp-table__day-name {
	font-weight: inherit;
}

.tm-zp-table__badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.5em;
	font-size: 0.75em;
	font-weight: 600;
	background: var( --tm-zp-akzent-text );
	color: var( --tm-zp-akzent );
	/* Kein/kaum Radius, passend zum eckigen Button-Stil des Design-Systems. */
	border-radius: 2px;
}

/* Hinweistext pro Zeitfenster (z. B. "(Nachmittag geschlossen)") -
   bewusst kleiner und gedämpfter als die Uhrzeit selbst, damit die reinen
   Zeiten auf den ersten Blick lesbar bleiben und der Hinweis als
   ergänzende Information erkennbar ist, nicht gleichwertig zur Uhrzeit. */
.tm-zp-table__window-note {
	font-size: 0.85em;
	font-style: italic;
	color: #5a6672;
}

/* Wochentag-Hinweis (eigene Spalte) - etwas dezenter als der normale
   Fließtext, aber nicht so klein wie der Zeitfenster-Hinweis, da er hier
   die einzige Information in seiner Spalte ist. */
.tm-zp-table__note {
	font-size: 0.9em;
	color: #444c54;
}

.tm-zp-table__separator {
	color: #99a3ab;
	margin: 0 0.15em;
}

/* Auf der farbig hervorgehobenen "Heute"-Zeile muss der gedämpfte
   Hinweistext hell bleiben, sonst kaum lesbar auf dem Blau-Grau-
   Hintergrund - Workaround: eigene Regel statt die Grundfarbe der Notizen
   transparent/relativ zu definieren, da CSS-Farb-Vererbung hier nicht
   automatisch "hell genug" ergäbe. */
.tm-zp-table__row--today .tm-zp-table__window-note,
.tm-zp-table__row--today .tm-zp-table__note,
.tm-zp-table__row--today .tm-zp-table__separator {
	color: rgba( 255, 255, 255, 0.85 );
}

/* Unterhalb von 480px: Tabelle in Karten umklappen statt horizontal
   scrollen zu lassen – zuverlässiger auf kleinen Screens als eine
   horizontal scrollbare Tabelle, die leicht übersehen wird. */
@media ( max-width: 480px ) {
	.tm-zp-table thead {
		display: none;
	}

	.tm-zp-table,
	.tm-zp-table tbody,
	.tm-zp-table tr,
	.tm-zp-table td {
		display: block;
		width: 100%;
	}

	.tm-zp-table tr {
		margin-bottom: 0.6em;
		border: 1px solid var( --tm-zp-rand );
		border-radius: 2px;
	}

	.tm-zp-table tr.tm-zp-table__row--today {
		border-color: var( --tm-zp-akzent );
	}

	.tm-zp-table td {
		border-bottom: none;
		padding: 0.4em 0.9em;
	}

	/* Spaltenüberschrift wieder einblenden, da die <thead> weg ist. */
	.tm-zp-table td::before {
		content: attr( data-label ) ": ";
		font-weight: 600;
		display: inline;
	}

	/*
	 * Jede Spalte trägt jetzt zusätzlich eine eigene Klasse
	 * (tm-zp-table__cell--tag / --zeiten / --hinweis), damit sich Zellen
	 * gezielt pro Spalte anpassen oder ausblenden lassen, z. B. in einer
	 * Theme-Override-CSS-Datei (eigene, spätere Regel überschreibt diese
	 * hier problemlos):
	 *
	 * Hinweis-Spalte in der Mobilansicht komplett ausblenden:
	 *   .tm-zp-table__cell--hinweis { display: none; }
	 *
	 * Nur das "Hinweis:"-Label ausblenden, den Wert aber behalten:
	 *   .tm-zp-table__cell--hinweis::before { display: none; }
	 */
}