/* matrix.css — Styles für die Matrix-Ansicht (Sh × Dok × K) */

.matrix-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Stakeholder-Block ─────────────────────────────────────── */
.matrix-block {
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #8b5cf6;
  overflow: clip;  /* clip statt hidden: kein Scroll-Container → sticky funktioniert */
}

.matrix-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #faf5ff;
  border-bottom: 1px solid #e2e8f0;
}

.matrix-sh-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

/* ── Grid (horizontaler + vertikaler Scroll, sticky Header) ── */
.matrix-scroll {
  overflow-x: auto;
  overflow-y: auto;           /* explizit: war ohnehin implizit durch overflow-x */
  max-height: calc(100vh - 200px); /* Scroll-Container mit echter Höhenbegrenzung → sticky greift */
}

.matrix-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
  white-space: nowrap;
}

/* Alle Zellen: einheitliche Border rundum → echtes Grid */
.matrix-table th,
.matrix-table td {
  border: 1px solid #e2e8f0;
}

/* ── Spalten-Header (Kanäle) ───────────────────────────────── */
.matrix-table thead th {
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #475569;
  background: #f8fafc;
  text-align: center;
  min-width: 80px;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Eck-Header "Dok ╲ K" */
.matrix-th-corner {
  text-align: left !important;
  color: #94a3b8 !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-width: 160px;
  background: #f8fafc;
}

/* ── Zeilen-Label (Dokumente) ──────────────────────────────── */
.matrix-td-label {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  text-align: left;
  vertical-align: middle;
}

/* Dok-Typ-Pill (Md / Td) */
.matrix-doc-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  background: #e2e8f0;
  color: #64748b;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ── Datenzellen ───────────────────────────────────────────── */
.matrix-cell {
  padding: 7px 12px;
  text-align: center;
  vertical-align: middle;
}

/* Leere Zelle: deutlich gedimmt → Lücke sofort sichtbar */
.matrix-cell-empty {
  background: #f1f5f9;
}

/* Definierte Zelle */
.matrix-cell-defined {
  background: white;
}

/* ── Badges ────────────────────────────────────────────────── */
.matrix-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.5;
}

.matrix-badge-I  { background: #dbeafe; color: #1d4ed8; }
.matrix-badge-O  { background: #d1fae5; color: #065f46; }
.matrix-badge-IO { background: #ede9fe; color: #6d28d9; }

/* ── Unvollständige Capabilities (Liste unter dem Grid) ─────── */
.matrix-incomplete {
  padding: 10px 14px 12px;
  border-top: 1px solid #f1f5f9;
  background: #fffbeb;
}

.matrix-incomplete-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 7px;
}

.matrix-incomplete-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.matrix-incomplete-item {
  font-size: 12px;
  color: #78350f;
  display: flex;
  align-items: center;
  gap: 7px;
}

.matrix-incomplete-item em {
  color: #a16207;
  font-style: italic;
}

/* ── Toggle im #form-row (dunkler Header) ──────────────────── */
.matrix-toggle-group {
  display: flex;
  gap: 4px;
}

.matrix-toggle-btn {
  padding: 5px 13px;
  background: transparent;
  border: 1px solid #1e293b;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.12s;
  height: 34px;
}
.matrix-toggle-btn:hover  { color: #94a3b8; border-color: #334155; }
.matrix-toggle-btn.active { background: #1e293b; color: #f8fafc; border-color: #334155; }

/* ── Gesamt-Ansicht: Stakeholder-Trennzeile ────────────────── */
.matrix-sh-separator {
  padding: 8px 12px;
  background: #faf5ff;
  border-top: 2px solid #8b5cf6 !important;
}

.matrix-sh-separator .matrix-sh-name {
  margin-right: 6px;
}

/* Stakeholder-Name in der Unvollständig-Liste (Gesamt) */
.matrix-inc-sh {
  font-weight: 700;
  color: #334155;
  margin-right: 2px;
}

/* ── Leer-Zustand ──────────────────────────────────────────── */
.matrix-empty {
  font-size: 12px;
  color: #cbd5e1;
  text-align: center;
  padding: 32px 10px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 8px;
}