/**
 * Mitarbeitersuche -- dreizeilige Ergebnisdarstellung
 *
 * Uebernommen aus zinkpower_theme. Die Struktur (Trefferzeile, Entwurfszeile,
 * Auszugszeile) bleibt unveraendert; die fest verdrahteten Farben sind auf
 * Gin-Variablen umgestellt, damit die Darstellung auch im Dark Mode traegt.
 */

.employee-search-results {
  width: 100%;
}

/* ---------- Kopfzeile ---------- */

.employee-search-header {
  display: flex;
  gap: var(--gin-spacing-xs, 8px);
  padding: 11px 14px;
  background: var(--gin-bg-layer2);
  border-bottom: 1px solid var(--gin-border-color-table-header);
  font-size: var(--gin-font-size-xs, .75rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  color: var(--gin-color-text-light);
}

/* ---------- Ergebniszeile ---------- */

.employee-search-row {
  border-bottom: 1px solid var(--gin-border-color-table);
  padding: var(--gin-spacing-xxs, 4px) 0;
}

.employee-search-row:hover {
  background: var(--gin-bg-layer2);
}

.employee-search-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gin-spacing-xs, 8px);
  padding: 6px 14px;
  align-items: center;
  hyphens: manual;
}

/* ---------- Zeile 2: offener Entwurf ---------- */

.employee-search-line--draft {
  background: var(--gin-bg-warning-light);
  border-inline-start: 3px solid var(--gin-color-warning);
  color: var(--gin-color-text);
  font-size: var(--gin-font-size-s, .875rem);
  margin: var(--gin-spacing-xxs, 4px) 0;
  padding: 6px 14px;
}

.es-draft-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gin-color-warning);
  color: #fff;
  font-size: var(--gin-font-size-xxs, .6875rem);
  font-weight: var(--gin-font-weight-bold, 700);
  padding: 2px 8px;
  border-radius: var(--gin-border-s, 4px);
  margin-inline-end: var(--gin-spacing-xs, 8px);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Zeile 3: Trefferauszug ---------- */

.employee-search-line--excerpt {
  background: var(--gin-bg-layer2);
  border-inline-start: 3px solid var(--gin-color-primary);
  font-size: var(--gin-font-size-s, .875rem);
  color: var(--gin-color-text);
  margin: var(--gin-spacing-xxs, 4px) 0;
  padding: 6px 14px;
}

.es-excerpt-field {
  margin-inline-end: var(--gin-spacing-l, 24px);
  white-space: nowrap;
}

.es-excerpt-field strong {
  color: var(--gin-color-text-light);
}

/* ---------- Trefferhervorhebung ---------- */

mark,
.employee-search-line--excerpt mark {
  background: var(--gin-bg-warning-light);
  color: var(--gin-color-text);
  padding: 1px 3px;
  border-radius: 2px;
  font-style: normal;
}

/* ---------- Spalten ---------- */

.es-col {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-col--firstname,
.es-col--lastname {
  min-width: 120px;
  flex: 1;
}

.es-col--pnr {
  min-width: 90px;
  flex: .7;
  font-variant-numeric: tabular-nums;
}

.es-col--country {
  min-width: 60px;
  flex: .5;
}

.es-col--location,
.es-col--department,
.es-col--job {
  min-width: 100px;
  flex: 1;
}

.es-col--actions {
  min-width: 50px;
  flex: 0 0 50px;
  text-align: center;
}

.es-col--actions a {
  color: var(--gin-color-text-light);
  font-size: 1rem;
}

.es-col--actions a:hover,
.es-col--actions a:focus-visible {
  color: var(--gin-color-primary);
}