/**
 * Mitarbeiterakte
 *
 * Die Detailansicht eines Mitarbeiters -- als Vollseite und im Modal, das
 * die Uebersichtsliste ueber das Augensymbol oeffnet.
 *
 * Vorher lagen 19 Felder hinter fuenf Reitern, davor sieben Verwaltungsfelder.
 * Jetzt: Karten untereinander, jede mit zweispaltigem Feldraster, die
 * Verwaltungsdaten in der schmalen Spalte rechts.
 */

/* ---------- Karten ---------- */

/*
 * Claro bringt fuer Fieldsets eigene Abstaende mit -- am Element selbst, an
 * der Legende, an deren Beschriftung und seitlich am Inhalt. Sie werden hier
 * durchgehend zurueckgesetzt, sonst waere der Kartenkopf doppelt so hoch wie
 * noetig. Der Elementselektor hebt die Spezifitaet ueber Claros Klassen.
 */
fieldset.zp-card,
fieldset.zp-card:not(.fieldgroup),
.node--type-employee fieldset.zp-card {
  margin: 0 0 var(--gin-spacing-m, 16px);
  padding: 0;
  padding-block-start: 0;
  padding-inline: 0;
  border: 1px solid var(--gin-border-color-layer2);
  border-radius: var(--gin-border-l, 8px);
  background: var(--gin-bg-layer);
  overflow: hidden;
}

/*
 * Die Legende des Fieldsets wird zum Kartenkopf.
 *
 * Ein <legend> sitzt von Haus aus im Rahmen des Fieldsets und laesst darueber
 * einen Streifen frei -- der Kartenkopf reichte dadurch nicht bis an die
 * Oberkante. float loest die Legende aus diesem Sonderverhalten, damit sie
 * sich wie ein normaler Block ueber die volle Breite legt.
 */
fieldset.zp-card > legend,
.node--type-employee fieldset.zp-card > legend {
  float: left;
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--gin-border-color-layer2);
  background: var(--gin-bg-layer2);
}

/* Der Float muss aufgeloest werden, sonst faellt der Inhalt daneben. */
fieldset.zp-card > legend + * {
  clear: both;
}

fieldset.zp-card > legend .fieldset__label,
fieldset.zp-card > legend > * {
  display: block;
  margin: 0;
  padding: 10px 18px;
  font-size: var(--gin-font-size-xs, .75rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gin-color-text-light);
  line-height: 1.4;
}

fieldset.zp-card .fieldset__wrapper,
fieldset.zp-card > .fieldset-wrapper {
  margin: 0;
  padding: 16px 18px;
}

/* ---------- Feldraster in der Karte ---------- */

/*
 * Ein Wert wie "Regional" braucht keine volle Zeilenbreite. Zweispaltig
 * halbiert die Seitenlaenge, ohne dass etwas gedraengt wirkt.
 */
fieldset.zp-card .fieldset__wrapper,
fieldset.zp-card > .fieldset-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px 26px;
}

@media (min-width: 34em) {
  /*
   * minmax(0, 1fr) statt 1fr: Eingabefelder bringen eine Mindestbreite mit,
   * die 1fr respektiert -- das Raster rechnet sich sonst breiter als sein
   * Container und die rechte Spalte ragt aus der Karte heraus.
   */
  fieldset.zp-card .fieldset__wrapper,
  fieldset.zp-card > .fieldset-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.zp-card .field {
  min-inline-size: 0;
  margin: 0;
}

/* Felder, deren Werte lang werden koennen, bekommen die volle Zeile. */
.zp-card .field--name-field-company-e-mail {
  grid-column: 1 / -1;
}

.zp-card .field__label {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: var(--gin-font-weight-semibold, 600);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gin-color-text-light);
  line-height: 1.4;
}

.zp-card .field__item,
.zp-card .field__items {
  font-size: 14.5px;
  color: var(--gin-color-text);
  word-break: break-word;
  hyphens: manual;
}

.zp-card .field__item a {
  color: var(--gin-color-primary);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}

.zp-card .field__item a:hover,
.zp-card .field__item a:focus-visible {
  border-block-end-color: currentColor;
}

/* Kennungen lesen sich als Kennung besser mit gleichen Ziffernbreiten. */
.zp-card .field--name-field-personnel-number .field__item,
.zp-card .field--name-title .field__item {
  font-family: var(--gin-font-mono, ui-monospace, "SFMono-Regular", monospace);
  font-size: 13.5px;
}

/* ---------- Zugaenge als Chipreihe ---------- */

/*
 * Vier Schalter als vier Zeilen mit "Ja" und "Off" zu lesen ist muehsam.
 * Nebeneinander erfasst man sie in einem Blick.
 */
fieldset.zp-card--access .fieldset__wrapper,
fieldset.zp-card--access > .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gin-spacing-xs, 8px);
}

.zp-card--access .field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--gin-border-color-layer2);
  border-radius: var(--gin-border-m, 6px);
  background: var(--gin-bg-layer2);
}

.zp-card--access .field__label {
  margin: 0;
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--gin-color-text);
}

.zp-card--access .field__item {
  font-size: 13px;
  font-weight: var(--gin-font-weight-semibold, 600);
  color: var(--gin-color-text-light);
}

/* ---------- Kopfbereich: Status und Aktion ---------- */

/*
 * Der erste Abschnitt traegt links den Moderationsstatus, rechts die
 * Bearbeiten-Schaltflaeche. Der Status braucht dort keine Beschriftung --
 * das Badge sagt bereits, was es ist.
 *
 * Angebunden am Knoten-Wrapper, nicht an der Body-Klasse: im Modal traegt
 * der Body die Klasse der Listenseite, der Wrapper aber weiterhin
 * node--type-employee.
 */
.node--type-employee .layout--twocol-section:first-of-type {
  align-items: center;
  margin-block-end: var(--gin-spacing-m, 16px);
}

.node--type-employee .layout--twocol-section:first-of-type .field--name-moderation-state .field__label {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  inline-size: 1px;
  block-size: 1px;
}

.node--type-employee .layout--twocol-section:first-of-type .layout__region--second {
  display: flex;
  justify-content: flex-end;
}

/*
 * Moderationsstatus und Staffbase-Abgleich sind zwei getrennte Bloecke und
 * stuenden sonst untereinander. Als Reihe stehen sie da, wo man sie sucht.
 */
.node--type-employee .layout--twocol-section:first-of-type .layout__region--first {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gin-spacing-xs, 8px);
}

.node--type-employee .layout--twocol-section:first-of-type .layout__region--first > * {
  margin: 0;
}

/* Die Meldung zu einem fehlgeschlagenen Abgleich bekommt eine eigene Zeile. */
.node--type-employee .layout--twocol-section:first-of-type .staffbase-sync-badge-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gin-spacing-xs, 8px);
}

.node--type-employee .layout--twocol-section:first-of-type .staffbase-sync-badge__message {
  flex: 1 0 100%;
}

/* ---------- Verwaltungsspalte ---------- */

/*
 * Revisionsdaten interessieren selten. Sie stehen rechts, kleiner gesetzt
 * und optisch zurueckgenommen.
 */
.node--type-employee .layout--twocol-section:last-of-type .layout__region--second {
  padding: 0;
  border: 1px solid var(--gin-border-color-layer2);
  border-radius: var(--gin-border-l, 8px);
  background: var(--gin-bg-layer);
  align-self: start;
  overflow: hidden;
  font-size: 13px;
}

/*
 * Die Ueberschrift der Spalte kommt aus zinkpower_gin_preprocess_layout()
 * und laeuft ueber t() -- die Revisionsfelder sind einzelne
 * Layout-Builder-Bloecke ohne gemeinsames Markup, an das eine echte
 * Kartenueberschrift koennte.
 */
.node--type-employee .layout--twocol-section:last-of-type .layout__region--second .zp-column-heading {
  padding: 10px 18px;
  border-block-end: 1px solid var(--gin-border-color-layer2);
  background: var(--gin-bg-layer2);
  font-size: var(--gin-font-size-xs, .75rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gin-color-text-light);
  line-height: 1.4;
}

.node--type-employee .layout--twocol-section:last-of-type .layout__region--second .field {
  margin: 0;
  padding: 9px 18px;
  border-block-end: 1px solid var(--gin-border-color-table);
}

.node--type-employee .layout--twocol-section:last-of-type .layout__region--second .field:last-child {
  border-block-end: 0;
}

.node--type-employee .layout--twocol-section:last-of-type .layout__region--second .field__label {
  font-size: 11px;
  font-weight: var(--gin-font-weight-semibold, 600);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gin-color-text-light);
  margin-block-end: 1px;
}

.node--type-employee .layout--twocol-section:last-of-type .layout__region--second .field__item {
  font-size: 13px;
  color: var(--gin-color-text);
  word-break: break-word;
}

/* ---------- Im Modal ---------- */

/*
 * Der Dialogtitel traegt den Personennamen bereits -- die Aktionszeile
 * rueckt darunter zusammen, und die Akte beginnt ohne Vorlauf.
 */
.ui-dialog .zp-card {
  box-shadow: none;
}

.ui-dialog .layout--twocol-section {
  gap: var(--gin-spacing-m, 16px);
}

/* ---------- Bearbeitungsformular ---------- */

/*
 * Dieselben Karten wie in der Akte, damit ein Feld beim Bearbeiten dort
 * steht, wo man es beim Ansehen gefunden hat. Formularelemente brauchen
 * mehr Luft als reine Textwerte, deshalb ein groesserer Zeilenabstand.
 */
.node-form fieldset.zp-card .fieldset__wrapper {
  gap: 2px 26px;
}

/*
 * Claro setzt grosszuegige Abstaende um Beschriftung, Feld und Beschreibung.
 * In einer Maske mit 21 Feldern summiert sich das auf mehrere Bildschirme.
 */
.node-form .zp-card .form-item label,
.node-form .zp-card .js-form-item label {
  margin-block-end: 4px;
}

.node-form .zp-card .form-item__description,
.node-form .zp-card .description {
  margin-block: 4px 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.node-form .zp-card .form-element,
.node-form .zp-card .form-text,
.node-form .zp-card .form-select {
  margin-block: 0;
}

.node-form .zp-card .form-item,
.node-form .zp-card .js-form-item {
  min-inline-size: 0;
  margin-block: 6px;
}

/* Beschreibungen unter den Feldern sind hier fachlich wichtig. */
.node-form .zp-card .form-item__description,
.node-form .zp-card .description {
  hyphens: manual;
}

/*
 * Gin rahmt das Formular bereits ein. Die Karten darin bekaemen sonst einen
 * zweiten Rahmen um den ohnehin schon gerahmten Bereich.
 */
/*
 * Frueher stand hier eine Regel, die .gin-layer-wrapper den Hintergrund
 * nahm, um die doppelte Rahmung um die Karten loszuwerden. Dieser Wrapper
 * traegt aber die Flaeche des gesamten Formularbereichs -- ohne ihn scheint
 * der graue Seitenhintergrund durch und die ganze Maske wirkt ausgeblichen.
 * Gins aeussere Flaeche bleibt deshalb stehen; die Karten setzen sich mit
 * ihrem eigenen Rahmen ausreichend davon ab.
 */

/* ---------- Gefahrenbereich ---------- */

/*
 * Ein geaenderter Kundenstandort kann der bearbeitenden Person den Zugriff
 * auf den Datensatz entziehen. Der Bereich ist eingeklappt und traegt die
 * Warnfarbe -- sichtbar genug, um nicht versehentlich geoeffnet zu werden.
 */
details.zp-card--danger {
  border-color: color-mix(in srgb, var(--gin-color-danger) 45%, transparent);
  background: var(--gin-bg-layer);
}

details.zp-card--danger > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 10px 18px;
  border-block-end: 1px solid color-mix(in srgb, var(--gin-color-danger) 30%, transparent);
  background: var(--gin-bg-danger-light);
  color: var(--gin-color-danger);
  font-size: var(--gin-font-size-xs, .75rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

details.zp-card--danger > summary::-webkit-details-marker,
details.zp-card--danger > summary::marker {
  display: none;
  content: "";
}

/* Claro setzt zusaetzlich ein eigenes Aufklappzeichen vor den Text. */
details.zp-card--danger > summary::before {
  content: none;
  display: none;
}

/* Eigener Aufklapp-Hinweis, damit der Kopf nicht ohne Zeichen dasteht. */
details.zp-card--danger > summary::after {
  content: "\25be";
  margin-inline-start: auto;
  font-size: 11px;
}

details.zp-card--danger[open] > summary::after {
  content: "\25b4";
}

details.zp-card--danger[open] > summary {
  margin-block-end: 0;
}

/* Claros leerer Zusammenfassungs-Span erzeugt sonst eine Luecke im Kopf. */
details.zp-card--danger > summary .claro-details__summary-summary:empty {
  display: none;
}

details.zp-card--danger .details-wrapper,
details.zp-card--danger .claro-details__wrapper {
  padding: 16px 18px;
}

details.zp-card--danger .details-description,
details.zp-card--danger .claro-details__description {
  margin-block-end: 12px;
  color: var(--gin-color-text);
  font-size: 13.5px;
}

/* ---------- Protokollnachricht ---------- */

/*
 * Das Feld steht in der rechten Seitenleiste. Es ist ein Pflichtfeld, also
 * bekommt es dort etwas mehr Hoehe -- eine einzeilige Box laedt nicht dazu
 * ein, den Grund einer Aenderung zu notieren.
 */
.node-form #edit-revision-log-wrapper textarea {
  min-block-size: 5rem;
}

/* ---------- Loeschen ---------- */

/*
 * Sichtbar in der Aktionsleiste, aber klar als folgenschwer erkennbar und
 * mit Abstand zu den Speichern-Schaltflaechen.
 */
.gin-sticky-form-actions .zp-action-delete {
  margin-inline-start: var(--gin-spacing-m, 16px);
}

/* ---------- Seitenleiste ---------- */

/*
 * Gin verdunkelt beim Aufklappen der rechten Seitenleiste den restlichen
 * Inhalt mit einer fast deckenden Flaeche. In diesem Werkzeug liest man
 * die Angaben dort im Zusammenhang mit dem Formular daneben -- der
 * Schleier stoert dabei mehr, als er hilft. Die Flaeche bleibt als
 * Klickziel zum Schliessen erhalten, nur ohne Verdunkelung.
 *
 * Gins eigene Deckkraft bleibt stehen -- sie wirkt auf eine durchsichtige
 * Flaeche und ist damit ohne Belang.
 */
.meta-sidebar__overlay {
  background: transparent;
}

/*
 * Auf breiten Fenstern ist die Leiste dauerhaft offen (siehe
 * js/sidebar-always-open.js) -- ein Umschalter, der nichts umschaltet,
 * verwirrt nur. Unterhalb von Gins Breakpoint bleibt er bedienbar.
 */
@media (min-width: 64em) {
  .meta-sidebar__trigger {
    display: none;
  }
}