/* Digitale Personalakte (work portal page and "Meine Personalakte" in the employee portal).
   Layer "features"; colours only via --ds-* tokens, so light, dark and system themes follow the design system. */
@layer reset, legacy, features, ds, overrides;
@layer features {
.personnel-file-page, .personnel-file-portal { display: grid; gap: 1rem; min-width: 0; }
.personnel-file-page { padding-bottom: 1.5rem; }
.personnel-file-portal { margin-top: 1rem; padding: 1rem; }

/* ----------------------------------------------------------------- header */
.pf-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; min-width: 0; }
.pf-identity { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1 1 26.25rem; }
.pf-identity > div { min-width: 0; }
.pf-eyebrow { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.pf-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin: 2px 0 0.625rem; font-size: var(--text-lg); line-height: 1.25; overflow-wrap: anywhere; }
.pf-name .badge { font-size: var(--text-xs); }
.pf-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.pf-facts div { min-width: 0; }
.pf-facts dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.pf-facts dd { margin: 2px 0 0; color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---------------------------------------------------------- register list */
.pf-layout { display: grid; grid-template-columns: minmax(13.75rem, 16.25rem) minmax(0, 1fr); gap: 1rem; align-items: start; min-width: 0; }
.pf-registers { display: grid; gap: 2px; padding: 0.375rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); position: sticky; top: 4.75rem; }
.pf-register {
  display: grid; grid-template-columns: 1.625rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; width: 100%;
  min-height: var(--target-min); padding: 0.4375rem 0.625rem 0.4375rem 0.4375rem; border: 0; border-left: 3px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.pf-register:hover { background: var(--color-surface-hover); color: var(--color-text); }
.pf-register-key {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm);
  background: var(--color-neutral-bg); color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: 600;
}
.pf-register-title { min-width: 0; overflow-wrap: break-word; hyphens: auto; line-height: 1.3; }
.pf-register-count { min-width: 1.375rem; padding: 1px 0.4375rem; border-radius: 62.4375rem; background: var(--color-surface-subtle); color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }
.pf-register-lock { width: 0.875rem; height: 0.875rem; color: var(--color-text-muted); }
/* Selected register: accent bar, tinted background and bold label (product owner: the active item must be obvious). */
.pf-register.is-active, .pf-register[aria-current="true"] {
  border-left-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600;
}
.pf-register.is-active .pf-register-key { background: var(--color-accent); color: var(--color-on-accent); }
.pf-register.is-active .pf-register-count { background: var(--color-surface); color: var(--color-accent-text); }

/* -------------------------------------------------------------- content */
.pf-main { min-width: 0; padding: 1rem; }
.pf-content { display: grid; gap: 0.75rem; min-width: 0; }
.pf-content-header h2 { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: var(--text-md); }
.pf-content-header h2 .pf-register-key { background: var(--color-accent-soft); color: var(--color-accent-text); }
.pf-content-header p { margin: 0.25rem 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.pf-retention strong { color: var(--color-text-secondary); font-weight: 500; }
.pf-locked { display: flex; gap: 0.625rem; align-items: center; margin: 0; padding: 0.875rem; border: 1px dashed var(--color-border-control); border-radius: var(--radius-lg); background: var(--color-surface-subtle); color: var(--color-text-tertiary); }
.pf-locked svg { flex: none; width: 1.125rem; height: 1.125rem; }
.pf-due { display: flex; gap: 0.625rem; padding: 0.75rem; border: 1px solid var(--color-warning-border); border-radius: var(--radius-lg); background: var(--color-warning-bg); color: var(--color-text); }
.pf-due svg { flex: none; color: var(--color-warning-text); }
.pf-due ul { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.pf-overdue { color: var(--color-danger-text); font-weight: 600; }

.pf-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pf-table { min-width: 0; }
.pf-table th { white-space: normal; }
.pf-table td { vertical-align: top; overflow-wrap: anywhere; }
.pf-table:not(.pf-log-table) td:is(:first-child, :nth-child(5)) { white-space: nowrap; }
.pf-table td small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.pf-table td:nth-child(2) { min-width: 0; }
.pf-entry-title { display: block; color: var(--color-text); font-weight: 500; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.pf-badges:empty { display: none; }
.pf-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 1px 0.4375rem; border-radius: 62.4375rem; background: var(--color-neutral-bg); color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.pf-badge svg { width: 0.75rem; height: 0.75rem; }
.pf-badge.is-sealed { background: var(--color-tag-indigo-bg); color: var(--color-tag-indigo-text); }
.pf-badge.is-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.pf-row-buttons { display: flex; flex-direction: column; align-items: stretch; gap: 0.375rem; }
.pf-row-actions .compact-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.375rem; min-height: var(--control-h); padding: 0 0.625rem; font-size: var(--text-xs); white-space: nowrap; }
.pf-empty td { color: var(--color-text-muted); text-align: center; padding: 1.25rem 0.75rem; }
.pf-muted { color: var(--color-text-muted); }
.pf-table tr.is-new > td { background: var(--color-success-bg); }

/* ----------------------------------------------------------------- forms */
.pf-form { display: grid; gap: 0.75rem; border-color: var(--color-accent-border); }
.pf-form .panel-header { margin-bottom: 0; }
.pf-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.pf-form-grid label { display: grid; gap: 0.375rem; min-width: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); }
.pf-form-grid input:not([type=file]), .pf-form-grid select { width: 100%; }
.pf-form-grid .pf-file { grid-column: 1 / -1; }
.pf-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.pf-form-error { margin: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--color-danger-border); border-radius: var(--radius); background: var(--color-danger-bg); color: var(--color-danger-text); }
.pf-form-hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.pf-access-log .panel-header p { margin: 2px 0 0; }

/* ----------------------------------------------------------- narrow screens */
@container page (max-width: 68.75rem) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .pf-registers { position: static; grid-template-columns: repeat(auto-fill, minmax(11.875rem, 1fr)); }
  .pf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container page (max-width: 53.75rem) {
  .pf-registers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
  .pf-register { grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.5rem; min-height: 2.75rem; font-size: var(--text-sm); }
  .pf-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-actions { width: 100%; }
  .pf-actions > button { flex: 1 1 auto; }
  .pf-main { padding: 0.75rem; }
  /* Entries become labelled cards (labels from the column headers, see applyTableLabels). */
  .pf-table-wrap { overflow: visible; border: 0; }
  .pf-table thead { display: none; }
  .pf-table, .pf-table tbody, .pf-table tr, .pf-table td { display: block; width: 100%; }
  .pf-table tr { margin-bottom: 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
  .pf-table td { display: grid; grid-template-columns: minmax(5.5rem, .42fr) minmax(0, 1fr); align-content: start; gap: 2px 0.625rem; height: auto; padding: 0.5625rem 0.625rem; border-bottom: 1px solid var(--color-border-subtle); }
  .pf-table td:last-child { border-bottom: 0; }
  .pf-table td::before { content: attr(data-label); grid-row: span 4; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
  .pf-table td > * { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
  .pf-table tr.pf-empty td { display: block; }
  .pf-table tr.pf-empty td::before { content: none; }
  .pf-table td:nth-child(2) { min-width: 0; }
  .pf-row-buttons { flex-flow: row wrap; }
}
@container page (max-width: 26.25rem) {
  .pf-register { padding: 0.375rem 0.5rem 0.375rem 0.3125rem; font-size: var(--text-xs); }
  /* One register per row keeps titles whole (no break inside "Vertragsänderungen"). */
  .personnel-file-portal { padding: 0.75rem; }
  .pf-registers, .personnel-file-portal .pf-registers { grid-template-columns: minmax(0, 1fr); }
  .personnel-file-portal .pf-register { min-height: var(--target-min); }
  .personnel-file-portal .pf-main { padding: 0.625rem; }
  .pf-identity { flex-basis: 100%; }
  .pf-name { font-size: var(--text-lg); }
}
}

/* Row action buttons may wrap their label, so the register table fits next to the register list
   (the base button rule in the ds layer sets nowrap). */
@layer overrides {
  .pf-row-actions .compact-button { white-space: normal; text-align: start; }
}