/* ===============================================
   Permission Matrix — mw-pm-* prefix
   =============================================== */

.mw-pm-container {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-table-lines);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: var(--mw-full-height);
}

.mw-pm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    background: var(--mud-palette-background);
}

.mw-pm-toolbar-title {
    font-size: 16px;
    font-weight: 600;
}

/* ── Scrollable matrix grid ──
   The WHOLE matrix is one grid: .mw-pm-scroll owns the only column track list, and the
   header, categories, category bodies, and permission rows all adopt it via subgrid.
   Header cells and switch cells therefore resolve in the same tracks and cannot drift
   apart, no matter how long a role name is. (Separate per-row grids sharing a template
   do NOT guarantee this: under max-content sizing each container resolves its 1fr
   tracks against its own content.) minmax(max-content, 1fr) keeps a column at least as
   wide as its widest content when the grid overflows horizontally, and stretches the
   columns to fill the viewport when it doesn't. --mw-pm-role-count is set inline on
   .mw-pm-scroll by RolesPage. */

.mw-pm-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: 340px repeat(var(--mw-pm-role-count, 1), minmax(max-content, 1fr));
    align-content: start;
}

.mw-pm-header,
.mw-pm-category,
.mw-pm-category-header,
.mw-pm-category-body,
.mw-pm-row {
    grid-column: 1 / -1;
}

.mw-pm-header,
.mw-pm-category,
.mw-pm-row {
    display: grid;
    grid-template-columns: subgrid;
}

/* ── Sticky role header row ── */

.mw-pm-header {
    background: var(--mud-palette-background);
    border-bottom: 2px solid var(--mud-palette-table-lines);
    position: sticky;
    top: 0;
    z-index: 2;
}

.mw-pm-label-col {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-disabled);
    border-right: 1px solid var(--mud-palette-table-lines);
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--mud-palette-background);
}

.mw-pm-role-col {
    min-width: 140px;
    padding: 10px 12px;
    text-align: center;
    border-right: 1px solid var(--mud-palette-table-lines);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mw-pm-role-col:last-child {
    border-right: none;
}

.mw-pm-role-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

.mw-pm-role-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mw-pm-role-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mw-pm-role-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: 100px;
}

.mw-pm-badge-essential {
    background: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
}

.mw-pm-badge-shared {
    background: rgba(var(--mud-palette-info-rgb), 0.15);
    color: var(--mud-palette-info);
}

/* ── Category accordion ── */

.mw-pm-category {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.mw-pm-category:last-child {
    border-bottom: none;
}

.mw-pm-category-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.mw-pm-category-header-content {
    position: sticky;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.mw-pm-category-header:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.mw-pm-category-expand {
    font-size: 20px;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s;
}

.mw-pm-category.mw-pm-open .mw-pm-category-expand {
    transform: rotate(90deg);
}

.mw-pm-category-name {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--mud-palette-text-secondary);
}

.mw-pm-category-count {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    margin-left: auto;
    position: sticky;
    right: 16px;
}

.mw-pm-category-body {
    display: none;
}

.mw-pm-category.mw-pm-open .mw-pm-category-body {
    display: grid;
    grid-template-columns: subgrid;
}

/* ── Permission row ── */

/* NOTE: Cells keep the default stretch alignment so each cell — and its border-right
   column separator — spans the full row height; content is centered inside the cell. */
.mw-pm-row {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    transition: background 0.1s;
}

.mw-pm-row:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.mw-pm-row:last-child {
    border-bottom: none;
}

.mw-pm-perm-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 16px 10px 40px;
    border-right: 1px solid var(--mud-palette-table-lines);
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.mw-pm-row:hover .mw-pm-perm-cell {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.mw-pm-perm-name {
    font-size: 13px;
    font-weight: 500;
}

.mw-pm-perm-desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.mw-pm-toggle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-right: 1px solid var(--mud-palette-table-lines);
}

.mw-pm-toggle-cell:last-child {
    border-right: none;
}

/* ── Admin locked indicator ── */

.mw-pm-admin-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    font-size: 12px;
    color: var(--mud-palette-primary);
}