/* Styles nur fuer Modul D. Bausteine und Tokens aus design.css; IAM, Krypto und
   Abschluss stehen in tool-iam.css. */

/* ---------- Personalstamm: HR-System (Workday, SuccessFactors) ----------
   Heller Kopf in der Werkzeugfarbe, Befehlsleiste mit Suche, Statusfilter und Sortierung,
   Mitarbeiterliste mit Avatar und Statuspille, Profil rechts mit Organisationspfad,
   Beschaeftigung und Verlauf. Beschaeftigung ist ein Zustand, kein Urteil. */
.hr {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: var(--ds-bg-surface); color: var(--ds-text);
  overflow: hidden;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}
.hr-searchbox { width: 300px; max-width: 100%; }
.hr-toolbar { gap: var(--sp-1); }
.hr-main { flex: 1; min-height: 0; display: flex; position: relative; container-type: inline-size; container-name: hr; }
.hr-list { min-width: 0; }
.hr-table thead th { background: var(--ds-bg-surface); }
.hr-table th:first-child, .hr-table td:first-child { padding-left: var(--sp-5); }
.hr-table tbody td { height: 52px; }
.hr-table tbody tr { cursor: pointer; }
.hr-table tbody tr.is-selected, .hr-table tbody tr.is-selected:hover { box-shadow: inset 3px 0 0 var(--accent, var(--ds-primary)); }
.hr-table tbody tr:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.hr-table td { white-space: nowrap; }
.hr-person { display: flex; align-items: center; gap: var(--sp-3); }
.hr-person-txt { display: flex; flex-direction: column; gap: 1px; }
.hr-av.ds-avatar--sm { width: 30px; height: 30px; }
.hr-name { font-weight: var(--fw-semibold); color: var(--ds-text); }
.hr-nr { font-size: var(--fs-xs); color: var(--ds-text-3); }
.hr-state { text-transform: capitalize; }

/* Profil neben der Liste, damit Vertragsende sichtbar bleibt. Solange es offen ist,
   entfaellt Austrittsgrund; er steht im Profil. */
.hr-akte {
  display: flex; flex-direction: column; min-height: 0; flex-shrink: 0;
  width: 340px; background: var(--ds-bg-surface); border-left: 1px solid var(--ds-border-subtle);
  animation: hr-ein var(--dur-2) var(--ease-out) both;
}
@keyframes hr-ein { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.hr-main:has(.hr-akte:not([hidden])) .hr-table :is(th, td):nth-child(6) { display: none; }
/* Schmales Fenster: auch Vertrag und Organisationseinheit weichen, beides steht im Profil. */
@container hr (max-width: 1090px) {
  .hr-main:has(.hr-akte:not([hidden])) .hr-table :is(th, td):is(:nth-child(2), :nth-child(3)) { display: none; }
}
.hr-akte-head {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-4); text-align: center;
  border-bottom: 1px solid var(--ds-border-subtle);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--ds-primary)) 9%, var(--ds-bg-surface)) 0, var(--ds-bg-surface) 70%);
}
.hr-close { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.hr-av--xl { width: 64px; height: 64px; font-size: var(--fs-xl); margin-bottom: var(--sp-1); box-shadow: 0 0 0 3px var(--ds-bg-surface), 0 2px 8px rgba(19, 26, 33, 0.16); }
.hr-akte-name { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); }
.hr-akte-nr { font-size: var(--fs-s); color: var(--ds-text-3); }
.hr-akte-nr .ds-mono { color: var(--ds-text-2); }
.hr-orgpfad { justify-content: center; margin-top: var(--sp-1); }
.hr-akte-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-5) var(--sp-4); }
.hr-dl { font-size: var(--fs-s); }
.hr-tl { margin-top: var(--sp-1); }

/* ---------- Ergebnisansicht: Prüfungsakte der Kampagne ----------
   Hell und ruhig wie das Auswertungsfenster: Kopf mit Kennzahlen, Abschnitte als Karten
   auf der Fensterfläche, Befund als Marke, Begründung unter jeder Abweichung. */
.drs {
  max-width: 1160px; margin: 0 auto; box-sizing: border-box;
  padding: var(--sp-6) var(--sp-6) var(--sp-2);
  color: var(--ds-text); font-size: var(--fs-m); line-height: var(--lh-base);
}
.drs button { margin: 0; }
.drs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: var(--bd); }
.drs-head h3 { margin: var(--sp-1) 0 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.drs-kpis { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.drs-kpi { min-width: 0; }
.drs-kpi .ds-kpi-value small { margin-left: 2px; }
.drs-block { margin: var(--sp-5) 0; }
.drs-block .ds-section-title { margin-bottom: var(--sp-2); }
.drs-card { background: var(--ds-bg-surface); border: var(--bd); border-radius: var(--r-m); overflow: hidden; }
.drs-tbl tbody tr:hover { background: transparent; }
.drs-row td { border-top: var(--bd-subtle); border-bottom: 0; }
.drs-row:first-child td { border-top: 0; }
.drs-row td:first-child { box-shadow: inset 3px 0 0 var(--ds-ok); }
.drs-row.b-vertretbar td:first-child, .drs-row.b-grund td:first-child { box-shadow: inset 3px 0 0 var(--ds-warn); }
.drs-row.b-falsch td:first-child { box-shadow: inset 3px 0 0 var(--ds-bad); }
.drs-tbl .drs-why td { padding: 0 var(--sp-3) var(--sp-3) var(--sp-5); border-bottom: 0; color: var(--ds-text-2); font-size: var(--fs-s); line-height: var(--lh-base); }
.drs-why.b-vertretbar td:first-child, .drs-why.b-grund td:first-child { box-shadow: inset 3px 0 0 var(--ds-warn); }
.drs-why.b-falsch td:first-child { box-shadow: inset 3px 0 0 var(--ds-bad); }
.drs-acct { display: block; font-weight: var(--fw-semibold); color: var(--ds-text); }
.drs-sub { display: block; font-size: var(--fs-xs); color: var(--ds-text-3); margin-top: 2px; line-height: var(--lh-snug); }
.drs-dim { color: var(--ds-text-3); }
.drs-dec { font-weight: var(--fw-semibold); }
.drs-dec--ok { color: var(--ds-ok-text); }
.drs-dec--bad { color: var(--ds-bad-text); }
.drs-dec--warn { color: var(--ds-warn-text); }
.drs-tag { margin-top: var(--sp-1); }
.drs-vermerk { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--ds-text-2); font-style: italic; }
.drs-notes { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8); font-size: var(--fs-s); display: flex; flex-direction: column; gap: var(--sp-1); background: var(--ds-bg-surface); border: var(--bd); border-radius: var(--r-m); }
.drs-foot { padding: var(--sp-2) 0 var(--sp-4); }

/* ---------- IAM-Portal: mehrstufige Kampagne mit Votum des Fachbereichs (Phase 2) ----------
   Vorbild Entra ID Multi-Stage Reviews und SailPoint: Stufenleiste unter dem Kampagnenkopf,
   Entscheidung der Vorstufe als eigene Spalte, im Detail das Votum mit Kommentar. Das Votum
   ist Fallmaterial; es wird wie jede Vorstufenentscheidung neutral dargestellt. */
.iam .iam-k-titel2 { font-weight: var(--fw-regular); color: var(--ds-text-3); margin-left: var(--sp-1); }
.iam .iam-stg {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); flex-shrink: 0; list-style: none; margin: 0;
  padding: var(--sp-2) var(--sp-5); background: var(--ds-bg-subtle); border-bottom: 1px solid var(--ds-border-subtle);
}
.iam .iam-stg-i { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-s); }
.iam .iam-stg-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--ds-bg-surface); color: var(--ds-text-3); box-shadow: inset 0 0 0 1.5px var(--ds-gray-400);
}
.iam .iam-stg-mark svg { width: 13px; height: 13px; }
.iam .iam-stg-i.is-fertig .iam-stg-mark { background: var(--ds-ok); color: #fff; box-shadow: none; }
.iam .iam-stg-i.is-aktuell .iam-stg-mark { background: var(--accent, var(--ds-primary)); color: #fff; box-shadow: none; }
.iam .iam-stg-txt { display: flex; flex-direction: column; min-width: 0; }
.iam .iam-stg-name { font-weight: var(--fw-semibold); color: var(--ds-text); white-space: nowrap; }
.iam .iam-stg-sub { font-size: var(--fs-xs); color: var(--ds-text-3); }
.iam .iam-stg-i.is-folgt .iam-stg-name { color: var(--ds-text-2); font-weight: var(--fw-regular); }

.iam .iam-stat--info dt::before { background: var(--ds-info); }
.iam-tbl .c-votum { min-width: 150px; max-width: 220px; }
.iam .iam-votum-ohne { font-size: var(--fs-xs); color: var(--ds-text-3); }
.iam .iam-votum-st { font-weight: var(--fw-semibold); }
.iam .iam-votum-wer { margin-top: 2px; }
.iam .iam-votum-kom {
  display: flex; align-items: center; gap: 4px; margin-top: 2px; max-width: 210px;
  font-size: var(--fs-xs); color: var(--ds-text-2); font-style: italic;
}
.iam .iam-votum-kom svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--ds-icon); }
.iam .iam-votum-kom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iam .iam-cell-ziel svg { color: var(--ds-info-text); }

/* Detail: Votum der Stufe 1 als Karte mit Person, Entscheidung, Kommentar und Zeit */
.iam .iam-votum {
  padding: var(--sp-3); border: var(--bd); border-left: 3px solid var(--ds-gray-400); border-radius: var(--r-s);
  background: var(--ds-bg-surface); font-size: var(--fs-s);
}
.iam .iam-votum--ok { border-left-color: var(--ds-ok); }
.iam .iam-votum--bad { border-left-color: var(--ds-bad); }
.iam .iam-votum-kopf { display: flex; align-items: center; gap: var(--sp-2); }
.iam .iam-votum-person { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.iam .iam-votum-name { font-weight: var(--fw-semibold); color: var(--ds-text); }
.iam .iam-votum-fkt { font-size: var(--fs-xs); color: var(--ds-text-3); }
.iam .iam-votum-text { margin: var(--sp-2) 0 0; color: var(--ds-text); line-height: var(--lh-snug); }
.iam .iam-votum-text::before { content: '„'; }
.iam .iam-votum-text::after { content: '“'; }
.iam .iam-votum-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ds-text-3); }
.iam .iam-votum-fuss > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.iam .iam-votum-fuss svg { width: 12px; height: 12px; }
.iam .iam-votum-tag { padding: 1px 6px; border-radius: var(--r-s); background: var(--ds-bg-subtle); color: var(--ds-text-2); }

/* Technische Positionen: vier Entscheidungen im Raster 2 x 2, damit jede Beschriftung passt */
.iam .iam-act.iam-act--4 { grid-template-columns: repeat(2, 1fr); }
.iam .iam-act.iam-act--4 .iam-act-btn:nth-child(3) { border-left: 0; }
.iam .iam-act.iam-act--4 .iam-act-btn:nth-child(n+3) { border-top: var(--bd); }
.iam .iam-act-btn.is-on.deleg { background: var(--ds-info-soft); color: var(--ds-info-text); box-shadow: inset 0 -2px 0 var(--ds-info); }

@container iam (max-width: 1080px) {
  .iam .iam-stg-sub { display: none; }
  .iam-tbl .c-votum { min-width: 120px; }
  .iam .iam-votum-kom { display: none; }
}
@container iam (max-width: 680px) {
  .iam .iam-stg { padding: var(--sp-2) var(--sp-4); gap: var(--sp-1) var(--sp-3); }
  .iam .iam-stg-i.is-folgt { display: none; }
  .iam .iam-votum-wer { display: none; }
}
.drs-tbl td .ds-state + .drs-sub { max-width: 220px; }