/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/*
 * public/personal.css — Personalakte v3 (2026-08-24): directory ·
 * profile · full-page editor (.pr3-*) + the Bewerbungen block (.ob-*,
 * moved verbatim from style.css). Token-native under .mt-scope; shares
 * the KPI/chip/action grammar with fuhrpark.css (.fp3-kpi, .fp3-tab,
 * .fp3-search, .dsp3-*). Zero decorative hex — the old page's toy
 * palette (#3b82f6/#d946ef gradients) is exactly what this replaces.
 */

.pr3 { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; padding: 16px 18px 18px; overflow-y: auto; }
.pr3-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display), sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.pr3-body { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.pr3-tab-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; display: inline-block; }
.pr3-tab-n.hidden { display: none !important; }

/* ── directory sections ── */
.pr3-sec { display: flex; flex-direction: column; gap: 10px; }
.pr3-sec-h { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.pr3-sec-h h2 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.pr3-sec-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-inset); font-family: var(--font-mono), monospace; font-size: .68rem; line-height: 20px; text-align: center; color: var(--text-secondary); }
.pr3-sec.is-deaktiviert .pr3-card { opacity: .6; filter: grayscale(.5); }
.pr3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

/* ── person card ── */
.pr3-card {
  display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; text-align: start;
  border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-primary);
  font: inherit; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s var(--mt-ease-out), box-shadow .15s;
}
.pr3-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pr3-card:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.pr3-card-top { display: flex; align-items: center; gap: 10px; }
.pr3-card-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pr3-card-id b { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr3-sub { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr3-card-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pr3-card-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.pr3-meta { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-secondary); min-width: 0; }
.pr3-meta.is-empty { color: var(--text-muted); font-style: italic; }
.pr3-meta.is-end { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* ── pills (role / status / docs) — semantic tokens, not toy colors ── */
.pr3-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.pr3-pill i:empty { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.pr3-pill.is-ok { background: var(--status-valid-soft); color: var(--status-valid); }
.pr3-pill.is-soon { background: var(--status-expiring-soft); color: var(--status-expiring); }
.pr3-pill.is-expired { background: var(--status-expired-soft); color: var(--status-expired); }
.pr3-pill.is-unknown { background: var(--surface-inset); color: var(--text-muted); }
.pr3-pill.is-role { background: var(--accent-soft); color: var(--accent); }
.pr3-pill.is-quiet { border: 1px solid var(--border-subtle); background: var(--surface-inset); color: var(--text-secondary); font-weight: 600; }

/* ── profile ── */
.pr3-phead {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-card) 58%); box-shadow: var(--shadow-sm);
}
.pr3-phead-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.pr3-phead-id h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display), sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.pr3-phead-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr3-phead-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pr3-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.pr3-pcard { border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: var(--shadow-sm); }
.pr3-pcard-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr3-pcard-h h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pr3-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.pr3-facts > div.is-wide { grid-column: 1 / -1; }
.pr3-facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pr3-facts dd { margin: 2px 0 0; font-size: .86rem; color: var(--text-primary); overflow-wrap: anywhere; }
.pr3-none { margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.pr3-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.pr3-link:hover { text-decoration: underline; }
.pr3-mono, .pr3-iban { font-family: var(--font-mono), monospace; font-size: .84rem; letter-spacing: .02em; }

/* Urlaub: quota vs genommen */
.pr3-vac { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-inset); }
.pr3-vac-nums { display: flex; align-items: baseline; gap: 8px; }
.pr3-vac-nums b { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pr3-vac-nums span { font-size: .74rem; color: var(--text-muted); }
.pr3-vac-bar { height: 8px; border-radius: 999px; background: var(--surface-card); overflow: hidden; border: 1px solid var(--border-subtle); }
.pr3-vac-bar i { display: block; height: 100%; background: var(--accent-fill-solid); border-radius: 999px; transition: width .3s var(--mt-ease-out); }

/* document rows */
.pr3-docs { display: flex; flex-direction: column; gap: 6px; }
.pr3-doc { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-inset); border-inline-start: 3px solid var(--status-valid); }
.pr3-doc.is-missing { border-inline-start-color: var(--border-default); }
.pr3-doc-name { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--text-primary); flex: 1 1 12ch; min-width: 0; }
.pr3-doc-acts { display: inline-flex; gap: 4px; margin-inline-start: auto; align-items: center; }
.pr3-doc-missing { font-size: .72rem; color: var(--text-muted); font-style: italic; }
.pr3-exp { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pr3-exp.is-ok { background: var(--status-valid-soft); color: var(--status-valid); }
.pr3-exp.is-soon { background: var(--status-expiring-soft); color: var(--status-expiring); }
.pr3-exp.is-expired { background: var(--status-expired-soft); color: var(--status-expired); }
.pr3-exp.is-unknown { background: var(--surface-inset); color: var(--text-muted); border: 1px dashed var(--border-strong); }

/* Zugang & App */
.pr3-acct { display: flex; flex-direction: column; gap: 8px; }
.pr3-acct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr3-acct-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pr3-asg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.pr3-asg .fp3-in { flex: 1 1 140px; }

/* ── EDITOR: a page of its own, not a modal ── */
.pr3-editor { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 40px; overflow-y: auto; flex: 1; min-height: 0; }
.pr3-phead.is-editor { background: linear-gradient(135deg, var(--status-info-soft, var(--accent-soft)), var(--surface-card) 58%); }
.pr3-esec { border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.pr3-esec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pr3-eform { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.pr3-eform .dsp3-field.is-wide, .pr3-eform .fp3-m-hint.is-wide { grid-column: 1 / -1; }
.pr3-eform input, .pr3-eform select, .pr3-eform textarea {
  width: 100%; min-height: 38px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--surface-inset); color: var(--text-primary); font: inherit; font-size: .84rem;
}
.pr3-eform textarea { resize: vertical; }
.pr3-eform input:focus, .pr3-eform select:focus, .pr3-eform textarea:focus { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }

.pr3-apps { display: flex; flex-direction: column; gap: 10px; }
.pr3-avfall { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .68rem; font-weight: 700; }

/* ── phone ── */
@media (max-width: 720px) {
  .pr3, .pr3-editor { padding: 10px; }
  .pr3-grid, .pr3-pgrid { grid-template-columns: 1fr; }
  .pr3-facts { grid-template-columns: 1fr; }
  .pr3-eform { grid-template-columns: 1fr; }
  .pr3-phead-acts { width: 100%; }
  .pr3-phead-acts .dsp3-act { flex: 1; justify-content: center; min-height: 44px; }
  .pr3-card { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr3-card { transition: none; }
  .pr3-vac-bar i { transition: none; }
}

/* ── Bewerbungen (moved verbatim from style.css — onboarding-admin.js paints these) ── */
/* ════════════════════════════════════════════════════════════════════
   Bewerbungen — applications from the public /onboarding form.
   Rendered inside the Personal modal's third tab.

   Every class that sets `display` carries its own `.hidden` pair:
   style.css loads AFTER admin.compiled.css, so a bare `display:flex`
   here beats Tailwind's `.hidden` and the element never hides.
   ════════════════════════════════════════════════════════════════════ */
.ob-apps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px;
}
.ob-apps.hidden { display: none !important; }

.ob-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: rgb(148, 163, 184);
}

.ob-app {
  border: 1px solid rgb(226, 232, 240);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
body.dark .ob-app {
  background: rgb(30, 41, 59);
  border-color: rgb(51, 65, 85);
}
/* A decided application stays on the list — the record of who was hired
   and who was not is the point — but it stops competing for attention. */
.ob-app.is-done { opacity: 0.62; }

.ob-app-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ob-app-head.hidden { display: none !important; }
.ob-app-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgb(225, 29, 72);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-app-avatar.hidden { display: none !important; }
.ob-app-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ob-app-id { flex: 1; min-width: 0; }
.ob-app-name {
  font-weight: 900;
  font-size: 14.5px;
  color: rgb(15, 23, 42);
}
body.dark .ob-app-name { color: rgb(241, 245, 249); }
.ob-app-meta {
  font-size: 11px;
  font-weight: 700;
  color: rgb(148, 163, 184);
  font-variant-numeric: tabular-nums;
}

.ob-st {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ob-st-open { background: rgba(245, 158, 11, 0.16); color: rgb(180, 83, 9); }
.ob-st-good { background: rgba(16, 185, 129, 0.16); color: rgb(4, 120, 87); }
.ob-st-bad  { background: rgba(148, 163, 184, 0.20); color: rgb(71, 85, 105); }

.ob-app-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ob-app-badges.hidden { display: none !important; }
.ob-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
/* Amber, not red: an unverified group membership is a thing to look at,
   not a failure. The hire is not blocked by it. */
.ob-badge-good { background: rgba(16, 185, 129, 0.15); color: rgb(4, 120, 87); }
.ob-badge-warn { background: rgba(245, 158, 11, 0.16); color: rgb(180, 83, 9); }

.ob-kvs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 18px;
  margin: 0 0 12px;
}
.ob-kvs.hidden { display: none !important; }
.ob-kv { min-width: 0; }
.ob-kv dt {
  font-size: 10px;
  font-weight: 800;
  color: rgb(148, 163, 184);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ob-kv dd {
  margin: 1px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: rgb(30, 41, 59);
  word-break: break-word;
}
body.dark .ob-kv dd { color: rgb(226, 232, 240); }

.ob-app-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgb(226, 232, 240);
}
.ob-app-actions.hidden { display: none !important; }
body.dark .ob-app-actions { border-top-color: rgb(51, 65, 85); }

.ob-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
}
.ob-mini.hidden { display: none !important; }
.ob-mini span {
  font-size: 10px;
  font-weight: 800;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ob-mini select,
.ob-mini input {
  min-height: 38px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 9px;
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 700;
  background: #fff;
  color: rgb(15, 23, 42);
}
body.dark .ob-mini select,
body.dark .ob-mini input {
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
  color: rgb(226, 232, 240);
}

.ob-act {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
}
.ob-act.hidden { display: none !important; }
.ob-act-ok { background: rgb(16, 185, 129); color: #fff; }
.ob-act-no {
  background: rgb(241, 245, 249);
  color: rgb(71, 85, 105);
  border-color: rgb(226, 232, 240);
}
body.dark .ob-act-no {
  background: rgb(51, 65, 85);
  color: rgb(226, 232, 240);
  border-color: rgb(71, 85, 105);
}

.ob-app-decided {
  padding-top: 10px;
  border-top: 1px solid rgb(226, 232, 240);
  font-size: 11px;
  font-weight: 700;
  color: rgb(148, 163, 184);
}
body.dark .ob-app-decided { border-top-color: rgb(51, 65, 85); }

/* Failure, and the reason field, both on the card they belong to. An
   alert() is modal, unstyled and does not say WHICH application failed. */
.ob-app-err {
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.10);
  color: rgb(185, 28, 28);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.ob-app-err.hidden { display: none !important; }
body.dark .ob-app-err { color: rgb(252, 165, 165); }

.ob-mini-grow { flex: 1; min-width: 160px; }
.ob-act-cancel {
  background: transparent;
  color: rgb(100, 116, 139);
  border-color: rgb(226, 232, 240);
}
body.dark .ob-act-cancel {
  color: rgb(148, 163, 184);
  border-color: rgb(71, 85, 105);
}