/* ════════════════════════════════════════════════════════════════════════════
   STAMMDATEN / FACHKATALOGE (Administration) — Hub-Layout
   Namespace `fk-`. Nutzt das zentrale Design-System (Tokens, .data-table, .badge,
   .btn-*, .form-*). Links Katalogliste (gruppiert), rechts Tabelle + Detail-Modal.
   ════════════════════════════════════════════════════════════════════════════ */

#fachkataloge-content {
  container-type: inline-size;
  min-width: 0;
}

.fk-page {
  width: 100%;
  min-width: 0;
}

.fk-loading,
.fk-error {
  padding: var(--space-6);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.fk-error { color: var(--color-red-600); }

/* ── Zwei-Spalten-Layout ─────────────────────────────────────────────────── */
.fk-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  min-width: 0;
}

/* Kompakte Katalogauswahl: ersetzt die zweite Navigation, sobald Breite zählt. */
.fk-compact-picker {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-50), var(--bg-secondary) 62%);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.fk-compact-picker label {
  flex: 0 0 auto;
  color: var(--color-primary-700);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fk-compact-picker .form-select {
  flex: 1 1 280px;
  min-width: 180px;
  max-width: 520px;
  background-color: var(--bg-secondary);
}
.fk-compact-import { flex: 0 0 auto; white-space: nowrap; }

/* Im expliziten Breitenmodus bleibt nur die platzsparende Auswahl sichtbar. */
.adm2.is-wide .fk-layout { grid-template-columns: minmax(0, 1fr); }
.adm2.is-wide .fk-compact-picker { display: flex; }
.adm2.is-wide .fk-sidebar { display: none; }

/* ── Linke Katalogliste ──────────────────────────────────────────────────── */
.fk-sidebar {
  position: sticky;
  top: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.fk-readonly-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.fk-nav-group { margin-bottom: var(--space-4); }
.fk-nav-group:last-child { margin-bottom: 0; }
.fk-nav-grouptitle {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}
.fk-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 2px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-family: inherit;
  white-space: normal;            /* Umbruch erlauben (überschreibt evtl. geerbtes nowrap) */
  transition: background 0.12s ease, color 0.12s ease;
}
.fk-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.fk-nav-item.active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-primary-600);
}
.fk-nav-label { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.fk-nav-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.fk-nav-item.active .fk-nav-count { background: var(--color-white); color: var(--color-primary-700); }
.fk-nav-item.is-link { color: var(--text-muted); }
.fk-nav-item.is-link:hover { color: var(--color-primary-700); }
.fk-nav-ext { flex: 0 0 auto; font-size: 0.8rem; opacity: 0.7; }
/* „Katalog"-Chip am eingebetteten Reiter (Bauteile & Prüfpflichten) */
.fk-nav-tag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}
.fk-nav-item.active .fk-nav-tag { background: var(--color-white); color: var(--color-primary-700); }

/* ── Rechte Arbeitsfläche ────────────────────────────────────────────────── */
.fk-main {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-height: 320px;
  min-width: 0;
}
.fk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.fk-head-text { min-width: 0; }
.fk-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.fk-intro {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 64ch;
  line-height: 1.45;
}
.fk-head .btn-primary { flex: 0 0 auto; white-space: nowrap; }

.fk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.fk-search { flex: 1 1 240px; max-width: 360px; }
.fk-inactive-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.fk-inactive-toggle input { accent-color: var(--color-primary-600); }
.fk-count { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
.fk-tablewrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
.fk-table {
  width: 100%;
  min-width: 780px;
  table-layout: fixed;
}
.fk-table.has-rel { min-width: 940px; }
.fk-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.fk-table th.fk-col-code { width: 210px; }
.fk-table th.fk-col-sm { width: 96px; }
.fk-table th.fk-col-act { width: 132px; text-align: right; }
.fk-name { font-weight: 600; color: var(--text-primary); }
.fk-code {
  display: inline-block;
  max-width: 100%;
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fk-muted { color: var(--text-subtle); }
.fk-empty { text-align: center; color: var(--text-muted); padding: var(--space-8) var(--space-4); }
.fk-row-inactive { opacity: 0.6; }
.fk-actions { text-align: right; white-space: nowrap; }
.fk-actions .btn-icon { margin-left: 2px; }
.fk-actions .btn-icon[disabled] { opacity: 0.3; cursor: not-allowed; }

/* Schutz-/Verwendungs-Badges (ergänzen die Design-System-Badges) */
.fk-badge-lock { background: var(--color-amber-500); color: var(--color-white); }
.fk-badge-use { background: var(--color-slate-200); color: var(--color-slate-700); }

/* ── Detail-/Bearbeiten-Modal ────────────────────────────────────────────── */
.fk-form .form-group { margin-bottom: var(--space-3); }
.fk-modal-note {
  font-size: 0.8rem;
  color: var(--color-amber-600);
  background: #FBF3E3;
  border: 1px solid #EBD9B4;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  line-height: 1.45;
}
.fk-code-input[readonly] { background: var(--bg-disabled); color: var(--text-muted); cursor: not-allowed; }

/* Reagiert auf den realen Platz im verschachtelten Admin-Bereich, nicht nur
   auf die Fensterbreite. So wird die Tabelle auch bei offener Hauptnavigation
   rechtzeitig priorisiert. */
@container (max-width: 980px) {
  .fk-layout { grid-template-columns: minmax(0, 1fr); }
  .fk-compact-picker { display: flex; }
  .fk-sidebar { display: none; }
  .fk-tablewrap {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
  }
}

/* ── Responsiv ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .fk-layout { grid-template-columns: minmax(0, 1fr); }
  .fk-compact-picker { display: flex; }
  .fk-sidebar { display: none; }
  .fk-tablewrap { overflow-x: auto; overflow-y: visible; }
}

@media (max-width: 620px) {
  .fk-compact-picker { align-items: stretch; flex-wrap: wrap; }
  .fk-compact-picker label { flex-basis: 100%; }
  .fk-compact-picker .form-select { max-width: none; }
}

/* Stammdaten-Rebuild: GM-Gliederung in der Leistungsbereiche-Liste (Phase 2F) */
.fk-table .fk-group-row td.fk-group-cell {
  background: var(--color-primary-50, #eef4ee);
  color: var(--color-primary-700, #2f5d3a);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .5rem .75rem;
  border-top: 2px solid var(--color-primary-200, #c9ddcd);
}