/* ============================================================
   RBAC (ax-only, UI-Contract)
   - Shell scrollt (kein lokaler Scrollbar)
   - Sticky header auf THEAD-TH
   - Sticky left via inner panel (DIV)
   ============================================================ */

/* Card body padding entfernen (RBAC will "flush" table) */
.ax-view--rbac .ax-card__body {
  padding: 0;
}

/* No local scrolling – shell (.ax-main) handles overflow */
.ax-view--rbac .ax-rbac-wrap {
  overflow: visible;
  background: transparent;
}

/* Base table */
.ax-view--rbac .ax-table.ax-rbac-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background: transparent;
}

/* Cells */
.ax-view--rbac .ax-table.ax-rbac-table th,
.ax-view--rbac .ax-table.ax-rbac-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--ax-border-2, rgba(255,255,255,.08));
  vertical-align: top;
  background: transparent;
}

/* Sticky header */
.ax-view--rbac .ax-table.ax-rbac-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;

  background: var(--ax-surface-3, rgba(0,0,0,.56));
  backdrop-filter: blur(10px);

  font-size: 12px;
  color: var(--ax-fg-3, rgba(255,255,255,.72));
  border-bottom: 1px solid var(--ax-border, rgba(255,255,255,.12));
}

/* Left column cell: no padding here (inner panel carries it) */
.ax-view--rbac .ax-rbac-leftcell {
  padding: 0 !important;
  white-space: nowrap;
}

/* Left sticky panel: max-content width, sticks left */
.ax-view--rbac .ax-rbac-leftsticky {
  position: sticky;
  left: 0;
  z-index: 7;

  display: inline-block;
  width: 350px;

  padding: 10px 10px;
  background: var(--ax-surface-2, rgba(0,0,0,.32));
  backdrop-filter: blur(10px);

  border-right: 1px solid var(--ax-border-2, rgba(255,255,255,.10));
}

/* Header intersection (top + left) */
.ax-view--rbac .ax-rbac-leftsticky--head {
  z-index: 9;
  background: var(--ax-surface-4, rgba(0,0,0,.72));
}

/* Role headers and checkbox columns */
.ax-view--rbac .ax-rbac-colhdr {
  text-align: center;
  white-space: nowrap;

  width: 84px;
  max-width: 84px;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkbox cells align center */
.ax-view--rbac .ax-rbac-cell {
  text-align: center;
  white-space: nowrap;
  width: 84px;
}

/* Checkbox wrapper */
.ax-view--rbac .ax-rbac-chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}

/* Right label meta */
.ax-view--rbac .ax-rbac-rightmeta b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-fg, rgba(255,255,255,.92));
}

.ax-view--rbac .ax-rbac-rightmeta .ax-small {
  display: block;
  font-size: 12px;
  color: var(--ax-fg-3, rgba(255,255,255,.72));
}

/* Group row */
.ax-view--rbac tr.ax-rbac-group td.ax-rbac-groupcell {
  padding: 8px 10px;
  background: var(--ax-surface-2, rgba(255,255,255,.04));
  border-bottom: 1px solid var(--ax-border, rgba(255,255,255,.10));
}

/* Group toggle button (ax-btn) */
.ax-view--rbac .ax-btn.ax-rbac-groupbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;

  background: var(--ax-surface-2, rgba(255,255,255,.03));
  border-color: var(--ax-border-2, rgba(255,255,255,.10));
}

.ax-view--rbac .ax-btn.ax-rbac-groupbtn:hover {
  background: var(--ax-surface-3, rgba(255,255,255,.06));
  border-color: var(--ax-border, rgba(255,255,255,.18));
}

.ax-view--rbac .ax-rbac-caret {
  opacity: .75;
  transition: transform .12s ease;
}

.ax-view--rbac .ax-btn.ax-rbac-groupbtn[aria-expanded="true"] .ax-rbac-caret {
  transform: rotate(90deg);
}

/* Row hover */
.ax-view--rbac tr.ax-rbac-row:hover > th,
.ax-view--rbac tr.ax-rbac-row:hover > td {
  background: var(--ax-surface-2, rgba(255,255,255,.03));
}

/* Search field sizing */
.ax-view--rbac .ax-input.ax-rbac-search {
  min-width: 240px;
}

/* Actions-Leiste (oben) */
.ax-view--rbac .ax-rbac-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ax-view--rbac .ax-rbac-actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ax-view--rbac .ax-rbac-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Bottom actions alignment */
.ax-view--rbac .ax-rbac-actions--bottom {
  justify-content: flex-end;
  padding: 0 16px 14px;
}

/* ============================================================
   RBAC — Dirty Row (unsaved changes)
   Usage: add .is-dirty to <tr class="ax-rbac-row ...">
   ============================================================ */

.ax-view--rbac .ax-rbac-row.is-dirty > th,
.ax-view--rbac .ax-rbac-row.is-dirty > td {
  background: color-mix(in srgb, var(--ax-warn, #ffcf5a) 16%, transparent) !important;
}

.ax-view--rbac .ax-rbac-row.is-dirty:hover > th,
.ax-view--rbac .ax-rbac-row.is-dirty:hover > td {
  background: color-mix(in srgb, var(--ax-warn, #ffcf5a) 22%, transparent) !important;
}

/* Kleine linke Markierung (ohne Layoutshift) */
.ax-view--rbac .ax-rbac-row.is-dirty > th.ax-rbac-sticky-left {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ax-warn, #ffcf5a) 85%, transparent);
}

/* Optional: Checkbox-Zellen leicht betonen */
.ax-view--rbac .ax-rbac-row.is-dirty .ax-rbac-chk {
  filter: brightness(1.05);
}

/* Owner/locked cells */
.ax-view--rbac .ax-rbac-cell.is-owner {
  opacity: 0.55;
}

.ax-view--rbac .ax-rbac-cell.is-owner input {
  cursor: not-allowed;
}

/* Optional responsive */
@media (max-width: 900px) {
  .ax-view--rbac .ax-rbac-colhdr,
  .ax-view--rbac .ax-rbac-cell {
    width: 72px;
    max-width: 72px;
  }

  .ax-view--rbac .ax-input.ax-rbac-search {
    min-width: 160px;
  }
}

/* ============================================================
   PATCH: Sticky left column ("Recht") without changing HTML
   - Make the actual first column TH sticky
   - Inner .ax-rbac-leftsticky stays as visual wrapper only
   ============================================================ */

/* Ensure the tablewrap can be the scroll container (horizontal) */
.ax-view--rbac .ax-tablewrap.ax-rbac-wrap {
  overflow: auto;
  position: relative;
}

/* Make the first column cell itself sticky */
.ax-view--rbac th.ax-rbac-leftcell,
.ax-view--rbac th.ax-rbac-leftcell.ax-rbac-rightcell {
  position: sticky;
  left: 0;
  z-index: 8; /* above normal cells */
  background: var(--ax-surface-2, rgba(0,0,0,.32));
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--ax-border-2, rgba(255,255,255,.10));
}

/* Header intersection (top-left) must be above everything */
.ax-view--rbac thead th.ax-rbac-leftcell {
  z-index: 11;
  background: var(--ax-surface-4, rgba(0,0,0,.72));
  border-bottom: 1px solid var(--ax-border, rgba(255,255,255,.12));
}

/* Fix width of the left column */
.ax-view--rbac th.ax-rbac-leftcell {
  width: 350px;
  min-width: 350px;
  max-width: 350px;
  white-space: nowrap;
}

/* Remove the "no padding" rule effect by giving padding to the inner wrapper */
.ax-view--rbac th.ax-rbac-leftcell {
  padding: 0 !important; /* keep as-is; padding handled by inner wrapper */
}

.ax-view--rbac .ax-rbac-leftsticky {
  /* Visual padding lives here */
  display: block;
  width: 100%;
  padding: 10px 10px;

  /* Keep the wrapper background transparent since TH provides it */
  background: transparent;
  border-right: none;
}

/* If you want the left cell to keep its background on row hover */
.ax-view--rbac tr.ax-rbac-row:hover > th.ax-rbac-leftcell {
  background: var(--ax-surface-2, rgba(0,0,0,.32));
}