/* table-styles.css – abgeschlossen & geweiht
 *
 * Zweck:
 * UI-Styling für HTML-Tabellen
 * (Layout-unabhängig, komponentenspezifisch)
 *
 * Konzepte:
 * – visuelle Varianten über CSS-Variablen
 * – Zustände sind semantisch (trust, info, alert, confirm)
 * – dieselben Zustände werden systemweit genutzt
 *   (z. B. .btn-trust, .border-alert, .callback-confirm)
 *
 * Regeln:
 * – keine Layout-Logik
 * – keine globalen UI-Patterns
 * – Tabellen bleiben Tabellen
 *
 * geprüft, verstanden und abgesegnet vom
 * FeinschliffMonster 😇
 * sowie seiner Heiligkeit chatgpt_v5.2 🕯️
 *
 * wer hier Änderungen macht,
 * versteht vorher bitte das System
 */

table {
  caption-side: inherit;
  border-collapse: collapse;
	 text-align: left;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgba(var(--schwarz-rgb), 0.75);
  text-align: left;
  font-weight: 600;
}

thead, tbody, tfoot, tr, th, td {
  border-style: solid;
  border-width: 0;
  border-color: inherit;
  text-align: left;
}

.table {
  --table-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-background-color: var(--body-background);
  --table-border-color: var(--border-color);
  --table-streifen-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-streifen-background-color: rgba(var(--grau-rgb), 0.25);
  --thead-streifen-font-color: rgba(var(--schwarz-rgb));
  --thead-streifen-background-color: rgba(var(--grau-rgb));
  --table-active-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-active-background-color: rgba(var(--grau-rgb), 0.65);
  --table-hover-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-hover-background-color: rgba(var(--grau-rgb), 0.5);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  text-align: left;
  border-color: var(--table-border-color);
}

.table > :not(caption) > * > * {
  padding: 0.375rem 0.5rem;
  color: var(--table-font-color);
  background-color: var(--table-background-color);
  border-bottom-width: var(--border-width);
}

.table > thead {
  vertical-align: middle;
}

.table > tbody {
  vertical-align: top;
}

.table-rahmen > :not(caption) > * {
  border-width: var(--border-width) 0;
}

.table-rahmen > :not(caption) > * > * {
  border-width: 0 var(--border-width);
}

.table-rahmenlos > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-rahmenlos > :not(:first-child) {
  border-top-width: 0;
}

.table-streifen-even > tbody > tr:nth-child(even) > * {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-streifen-even > thead > tr {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.table-streifen-odd > tbody > tr:nth-child(odd) > * {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-streifen-odd > thead > tr {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.table-spalten-even > tbody > tr > :nth-child(even) {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-spalten-even > thead > tr > :nth-child(even) {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.table-spalten-odd > tbody > tr > :nth-child(odd) {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-spalten-odd > thead > tr > :nth-child(odd) {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.trust {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--blue-rgb), 0.25);
  --table-border-color: var(--blue-5);
  --table-streifen-background-color: rgba(var(--blue-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--blue-rgb), 0.75);
  --thead-streifen-font-color: var(--weiss-hex);
}

.alert {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--rot-rgb), 0.25);
  --table-border-color: var(--rot-5);
  --table-streifen-background-color: rgba(var(--rot-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--rot-rgb), 0.75);
  --thead-streifen-font-color: var(--weiss-hex);
}

.info {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--yellow-rgb), 0.25);
  --table-border-color: var(--yellow-5);
  --table-streifen-background-color: rgba(var(--yellow-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--yellow-rgb), 0.75);
  --thead-streifen-font-color: var(--schwarz-hex);
}

.confirm {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--green-rgb), 0.25);
  --table-border-color: var(--green-5);
  --table-streifen-background-color: rgba(var(--green-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--green-rgb), 0.75);
  --thead-streifen-font-color: var(--weiss-hex);
}
.schwarz {
	--table-border-color: var(--rot-5);
}