/**
 * Datentabelle
 *
 * Ein Raster fuer alle Listen des USM Tools: Aktive Mitarbeiter, Archiv,
 * Suche, Standorte, Reports.
 *
 * Vorher hatte jede dieser Ansichten ihr eigenes Raster -- unterschiedliche
 * Kopfzeilen, Zeilenhoehen und Breiten; die Standortliste nutzte ein Drittel
 * der Seitenbreite.
 */

/* ---------- Silbentrennung ---------- */

/*
 * Die wichtigste Regel hier. Das vorherige Theme (Olivero) setzte
 * "hyphens: auto"; in den schmalen Spalten der Mitarbeiterliste wurde
 * daraus "Lu-gin-ger" und "Ver-oef-fent-licht". Zeilen wurden dadurch
 * drei- bis vierzeilig, auf einen Bildschirm passten zehn statt dreissig
 * Datensaetze.
 */
.views-table,
.views-table th,
.views-table td,
table[class*="views-table"] td {
  hyphens: manual;
}

/* ---------- Grundraster ---------- */

.views-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.views-table th,
.views-table td {
  padding: 11px 14px;
  vertical-align: top;
}

.views-table thead th {
  font-size: var(--gin-font-size-xs, .75rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  color: var(--gin-color-text-light);
  white-space: nowrap;
}

/* ---------- Spalten, die nie umbrechen duerfen ---------- */

.views-field-field-personnel-number,
.views-field-changed,
.views-field-created,
.views-field-moderation-state,
.views-field-moderation-state-1,
.views-field-nothing,
.views-field-view-node,
.views-field-operations {
  white-space: nowrap;
}

/* Personalnummern lesen sich als Kennung besser mit gleichen Ziffernbreiten. */
.views-field-field-personnel-number {
  font-variant-numeric: tabular-nums;
}

/* ---------- Seitliches Scrollen ---------- */

/*
 * Zwoelf Spalten passen auf keinen normalen Bildschirm. Statt die Inhalte
 * abzuschneiden, scrollt der Tabellencontainer seitlich -- die Seite selbst
 * bleibt dabei unverschoben.
 */
.views-element-container,
.view-content {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- Aktionsspalte ---------- */

.views-field-view-node,
.views-field-nothing {
  text-align: end;
}

.views-field-view-node a,
.views-field-nothing a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--gin-border-s, 4px);
  color: var(--gin-color-text-light);
  text-decoration: none;
}

.views-field-view-node a:hover,
.views-field-view-node a:focus-visible,
.views-field-nothing a:hover,
.views-field-nothing a:focus-visible {
  background: var(--gin-bg-layer3);
  color: var(--gin-color-primary);
}

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

/*
 * Im vorherigen Theme ueberlagerten sich die exponierten Filter der
 * Mitarbeiterliste sichtbar. Hier stehen sie in einer Zeile ueber der
 * Tabelle und brechen erst bei Platzmangel um.
 */
.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gin-spacing-m, 16px);
  margin-block-end: var(--gin-spacing-m, 16px);
}

.views-exposed-form .form-item {
  margin-block: 0;
}

.views-exposed-form .form-actions {
  margin-block: 0;
  display: flex;
  gap: var(--gin-spacing-xs, 8px);
}