/* ==========================================================================
   Berechtigungen: Rechte-Matrix (Rechte in Zeilen, Rollen in Spalten)
   Baut auf app.css auf. Die erste Spalte bleibt beim seitlichen Scrollen stehen.
   ========================================================================== */

.matrix-huelle { max-height: 75vh; overflow: auto; }
.matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; }

.matrix th, .matrix td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); vertical-align: bottom; border-bottom: 1px solid var(--border-strong); }

/* erste Spalte fixieren */
.matrix .matrix-recht { position: sticky; left: 0; z-index: 2; min-width: 300px; max-width: 420px; background: var(--surface); font-weight: 400; border-right: 1px solid var(--border); }
.matrix thead .matrix-recht { z-index: 4; background: var(--surface-2); font-weight: 600; }

.matrix-rolle { min-width: 130px; text-align: center !important; font-weight: 600; }
.matrix-rollenname { display: block; color: var(--text); text-decoration: none; }
.matrix-rollenname:hover { color: var(--accent-text); text-decoration: underline; }
.matrix-zusatz { display: block; margin: 2px 0 6px; font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }

/* Bereichs-Überschriften */
.matrix-bereich th { position: sticky; left: 0; background: var(--surface-2); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); z-index: 1; }

/* Recht: Bezeichnung, Schlüssel, Erklärung */
.matrix-bezeichnung { display: inline; font-weight: 600; margin-right: 6px; }
.matrix-schluessel { display: block; margin-top: 2px; color: var(--text-muted); }
.matrix-beschreibung { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.4; }
.matrix-ungenutzt .matrix-bezeichnung { color: var(--text-muted); }

/* Zellen */
.matrix-zelle { text-align: center !important; vertical-align: middle !important; }
.matrix-zelle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.matrix-zelle input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }
.matrix tbody tr:hover td, .matrix tbody tr:hover .matrix-recht { background: var(--surface-2); }
.matrix-bereich:hover th { background: var(--surface-2); }

.matrix-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 720px) {
    .matrix .matrix-recht { min-width: 220px; }
    .matrix-beschreibung { display: none; }
}