/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCORE — Fachkatalogverwaltung (Namespace .fk2-)
 * ───────────────────────────────────────────────────────────────────────────────
 * NUR Tokens, keine rohen Farb-, Größen- oder Abstandswerte. Kopf, Kennzahlen,
 * Reiter, Tabelle, Filter und Dialoge kommen aus der gemeinsamen Bausteinschicht
 * (VIComponents · VITable · VIFilters · VIDialog); diese Datei ordnet sie nur an.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.fk2 { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.fk2-head { display: flex; flex-direction: column; gap: var(--space-3); }
.fk2-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.fk2-head-tx { min-width: 0; }
/* Der Seitentitel kommt aus der Administration — hier waere er der zweite Kopf. */
.fk2-sub { margin: var(--space-1) 0 0; font-size: var(--text-md); color: var(--gray-500); max-width: 78ch; }
.fk2-arrow { color: var(--color-forest); font-weight: 600; padding: 0 var(--space-1); }
.fk2-head-act { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Katalogstand: eine Zustandsaussage, kein Alarm — deshalb Fläche statt Rot. */
.fk2-stand {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--gray-50); color: var(--gray-900);
  font-size: var(--text-xs); line-height: 1.3;
}
.fk2-stand em { font-style: normal; color: var(--gray-500); }
.fk2-stand.is-ok { border-color: var(--green-200, var(--gray-300)); }
.fk2-stand.is-warn { border-color: var(--color-warning, var(--gray-300)); }

/* ── Filterzeile & Inhalt ─────────────────────────────────────────────────── */
.fk2-filter:empty { display: none; }
.fk2-body { min-width: 0; }

/* ── Dialoge ──────────────────────────────────────────────────────────────── */
.fk2-dlg { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fk2-dlgbody { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fk2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.fk2-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
@media (max-width: 767px) { .fk2-grid2, .fk2-grid3 { grid-template-columns: minmax(0, 1fr); } }

.fk2-edit { display: flex; flex-direction: column; gap: var(--space-1); }
.fk2-hint { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--gray-500); }
.fk2-note { margin: 0; font-size: var(--text-xs); color: var(--gray-500); line-height: 1.5; }
.fk2-note code { font-size: var(--text-xxs); background: var(--gray-100); padding: 0 4px; border-radius: var(--radius-sm); }
.fk2-none { color: var(--gray-500); }
.fk2-manual { color: var(--gray-500); font-style: italic; }
.fk2-check { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-md); color: var(--gray-900); }

.fk2-h4 { margin: var(--space-2) 0 0; font-size: var(--text-md); font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: var(--space-1); }
.fk2-h4-muted { color: var(--gray-500); }
.fk2-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-500);
  font-size: var(--text-xxs); font-weight: 600;
}

/* ── Pflichtentabelle im Dialog ────────────────────────────────────────────
   Sie steht INNERHALB eines Dialogs und ist damit kein Fall für VITable: es gibt
   nichts zu sortieren, zu filtern oder zu exportieren — eine Handvoll Zeilen zu
   EINEM Datensatz. Breiter Inhalt scrollt in seinem eigenen Bereich. */
.fk2-oblwrap { overflow-x: auto; }
.fk2-obltbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fk2-obltbl th {
  text-align: left; font-weight: 600; color: var(--gray-500);
  padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--gray-300); white-space: nowrap;
}
.fk2-obltbl td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--gray-200); vertical-align: top; color: var(--gray-900); }
.fk2-obltbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fk2-obl-art { white-space: nowrap; color: var(--gray-500); }
.fk2-obl-name code { display: block; margin-top: 2px; font-size: var(--text-xxs); color: var(--gray-500); }
.fk2-obl-hint { max-width: 28ch; color: var(--gray-500); }
.fk2-obl-act { text-align: right; white-space: nowrap; }
.fk2-obl.is-old td { color: var(--gray-500); }

/* ── Listen im Dialog ─────────────────────────────────────────────────────── */
.fk2-alias, .fk2-lbbt, .fk2-bsp, .fk2-offen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fk2-alias li, .fk2-lbbt li, .fk2-bsp li, .fk2-offen li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1);
  padding: var(--space-1) 0; border-bottom: 1px solid var(--gray-200);
  font-size: var(--text-sm); color: var(--gray-900);
}
.fk2-alias li:last-child, .fk2-lbbt li:last-child, .fk2-bsp li:last-child, .fk2-offen li:last-child { border-bottom: 0; }
.fk2-alias span, .fk2-lbbt span, .fk2-bsp span, .fk2-offen span { color: var(--gray-500); font-size: var(--text-xs); }
.fk2-alias em, .fk2-bsp em { font-style: normal; color: var(--gray-500); font-size: var(--text-xxs); }
.fk2-aliaskind {
  display: inline-flex; align-items: center; padding: 0 6px; height: 18px;
  border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-500); font-size: var(--text-xxs);
}
.fk2-lbbt code, .fk2-offen code { font-size: var(--text-xs); color: var(--gray-500); }
.fk2-bsp li { flex-direction: column; gap: 0; }

.fk2-oblhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* ── Zuständigkeiten ──────────────────────────────────────────────────────── */
.fk2-zu { display: flex; flex-direction: column; gap: var(--space-3); }
.fk2-stufen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.fk2-stufen li { display: flex; align-items: flex-start; gap: var(--space-2); }
.fk2-stufen strong { display: block; font-size: var(--text-md); color: var(--gray-900); }
.fk2-stufen span { display: block; font-size: var(--text-sm); color: var(--gray-500); }
.fk2-stufe {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-forest); color: var(--color-surface);
  font-size: var(--text-xxs); font-weight: 600;
}

/* ── Importbericht ────────────────────────────────────────────────────────── */
.fk2-bericht { display: flex; flex-direction: column; gap: var(--space-2); }
.fk2-berichtkopf { margin: 0; font-size: var(--text-xs); color: var(--gray-500); }