/* =====================================================
   ROLES & PERMISSIONS TAB — roles-dialog.css
   Follows BizMetry design system tokens.
   Same structural patterns as users-list-tab.css
   ===================================================== */

/* ── Design Tokens ─────────────────────────────────── */
.rt-content {
  --rt-gradient:       linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --rt-color:          #667eea;
  --rt-color-perm:     #f093fb;
  --rt-shadow-sm:      0 2px 6px rgba(102, 126, 234, 0.2);
  --rt-shadow-md:      0 3px 12px rgba(102, 126, 234, 0.4);
  --rt-border:         2px solid #e0e0e0;
  --rt-h-ctrl:         40px;
  --rt-ease:           all 0.2s ease;
  --rt-radius:         8px;

  /*
   * NOTE on layout strategy: sticky positioning against the parent
   * dialog's `.tab-content-container` worked for the TOP bar but not
   * reliably for the BOTTOM one (sticky "bottom" is notoriously less
   * consistent than "top" across browsers inside complex Angular
   * Material tab layouts). To avoid depending on that ancestor at all,
   * this element gets its OWN explicit height computed directly from
   * viewport units (not a percentage of any ancestor, so it can't be
   * broken by Angular Material's internal height propagation quirks).
   * It then creates its own internal flex layout: fixed top bar,
   * scrollable middle, fixed bottom bar — fully self-contained.
   *
   * The calc() below subtracts the dialog's own known chrome: toolbar
   * (80px) + footer (64px) + tabs nav bar (~64px) + this tab's own
   * 24px top/bottom padding (48px) from the dialog's 88vh max-height.
   * If the dialog's chrome dimensions change, adjust the constant.
   */
  display: flex;
  flex-direction: column;
  height: calc(88vh - 256px);
  min-height: 320px;
  background: #fafafa;
  overflow: hidden;
}



/* =====================================================
   FIXED ACTIONS BAR
   ===================================================== */

:where(.crd-dialog, .rt-content) .rt-fixed-actions {
  background: white;
  padding: 10px 20px;
  border-bottom: var(--rt-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-fixed-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
:where(.crd-dialog, .rt-content) .rt-fixed-middle { display: flex; align-items: center; flex: 1; min-width: 200px; }
:where(.crd-dialog, .rt-content) .rt-fixed-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

:where(.crd-dialog, .rt-content) .rt-separator {
  width: 1px;
  height: 36px;
  background: #e0e0e0;
  flex-shrink: 0;
}

/* ─── Summary badges ────────────────────────────────── */









/* ─── Search bar ────────────────────────────────────── */



:where(.crd-dialog, .rt-content) .rt-search-wrap--focused {
  border-color: var(--rt-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}



:where(.crd-dialog, .rt-content) .rt-search-wrap--focused .rt-search-icon { color: var(--rt-color) !important; }



:where(.crd-dialog, .rt-content) .rt-search-input::placeholder { color: #bdbdbd; }





:where(.crd-dialog, .rt-content) .rt-search-clear:hover md-icon { color: var(--rt-color) !important; }

/* ─── Action buttons ────────────────────────────────── */





:where(.crd-dialog, .rt-content) .rt-btn-secondary {
  background: var(--rt-gradient) !important;
  color: white !important;
  box-shadow: var(--rt-shadow-sm) !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-secondary:hover {
  box-shadow: var(--rt-shadow-md) !important;
  transform: translateY(-1px) !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-outline {
  background: white !important;
  color: var(--rt-color) !important;
  border: 2px solid #e0e0e0 !important;
  box-shadow: none !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-outline:hover {
  border-color: var(--rt-color) !important;
  background: rgba(102, 126, 234, 0.04) !important;
}



/* ─── Sort control ──────────────────────────────────── */

:where(.crd-dialog, .rt-content) .rt-sort-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--rt-h-ctrl);
  background: white;
  border: var(--rt-border);
  border-radius: var(--rt-radius);
  padding: 0 10px;
  flex-shrink: 0;
  transition: var(--rt-ease);
}

:where(.crd-dialog, .rt-content) .rt-sort-wrap:focus-within {
  border-color: var(--rt-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:where(.crd-dialog, .rt-content) .rt-sort-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: #9e9e9e !important;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-sort-select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #424242;
  font-family: inherit;
  cursor: pointer;
  padding-right: 2px;
}

/* =====================================================
   SCROLLABLE CONTENT
   ===================================================== */



:where(.crd-dialog, .rt-content) .rt-scrollable::-webkit-scrollbar { width: 8px; }
:where(.crd-dialog, .rt-content) .rt-scrollable::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 4px; }
:where(.crd-dialog, .rt-content) .rt-scrollable::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 4px; }
:where(.crd-dialog, .rt-content) .rt-scrollable::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }

/* =====================================================
   STATE WRAPPERS (loading / empty)
   ===================================================== */







:where(.crd-dialog, .rt-content) .rt-empty-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }










/* =====================================================
   TREE WRAPPER & CARD
   ===================================================== */

:where(.crd-dialog, .rt-content) .rt-tree-wrapper { width: 100%; }





/* =====================================================
   ROLE NODE
   ===================================================== */

:where(.crd-dialog, .rt-content) .rt-role-node { width: 100%; }

:where(.crd-dialog, .rt-content) .rt-role-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  background: white;
  transition: background 0.15s ease, border-left 0.15s ease;
  user-select: none;
}

:where(.crd-dialog, .rt-content) .rt-role-header:hover { background: #fafbff; }

:where(.crd-dialog, .rt-content) .rt-role-header--match {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%) !important;
  border-left: 3px solid var(--rt-color) !important;
}


/* Expand icon */
:where(.crd-dialog, .rt-content) .rt-expand-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-expand-btn md-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--rt-color) !important;
  transition: transform 0.2s ease;
}

:where(.crd-dialog, .rt-content) .rt-expand-placeholder {
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex-shrink: 0;
}


/* Role icon circle */
:where(.crd-dialog, .rt-content) .rt-role-icon-wrap {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-role-icon-wrap md-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  color: var(--rt-color) !important;
}


/* Role info */
:where(.crd-dialog, .rt-content) .rt-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

:where(.crd-dialog, .rt-content) .rt-role-name-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

:where(.crd-dialog, .rt-content) .rt-role-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

:where(.crd-dialog, .rt-content) .rt-role-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.3;
}

:where(.crd-dialog, .rt-content) .rt-role-desc-line {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}



/* ── Inline name/description editing (root-level roles only) ────────── */

:where(.crd-dialog, .rt-content) .rt-inline-edit-btn {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  border-radius: 50% !important;
}

:where(.crd-dialog, .rt-content) .rt-inline-edit-btn md-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  line-height: 13px !important;
  color: #bdbdbd !important;
  margin: 0 !important;
}

:where(.crd-dialog, .rt-content) .rt-inline-edit-btn:hover { background: rgba(102, 126, 234, 0.12) !important; }
:where(.crd-dialog, .rt-content) .rt-inline-edit-btn:hover md-icon { color: var(--rt-color) !important; }

:where(.crd-dialog, .rt-content) .rt-inline-edit-btn--sm {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin-top: 1px !important;
}

:where(.crd-dialog, .rt-content) .rt-inline-edit-btn--sm md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  line-height: 12px !important;
}


/* Kept close to .rt-role-name/.rt-role-desc's own font-size/color so
   swapping the span for an input doesn't jolt the row's height/layout. */
:where(.crd-dialog, .rt-content) .rt-inline-edit-input {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  font-family: inherit;
  border: none;
  border-bottom: 1.5px solid var(--rt-color);
  outline: none;
  background: transparent;
  padding: 0 0 1px;
  min-width: 140px;
  max-width: 320px;
}

:where(.crd-dialog, .rt-content) .rt-inline-edit-textarea {
  font-size: 12px;
  color: #555;
  font-family: inherit;
  line-height: 1.4;
  border: 1.5px solid var(--rt-color);
  border-radius: 6px;
  outline: none;
  background: white;
  padding: 4px 8px;
  resize: vertical;
  min-width: 200px;
  max-width: 460px;
  flex: 1;
}

:where(.crd-dialog, .rt-content) .rt-add-desc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #9e9e9e;
  cursor: pointer;
}

:where(.crd-dialog, .rt-content) .rt-add-desc-btn:hover { color: var(--rt-color); }

:where(.crd-dialog, .rt-content) .rt-add-desc-btn md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  line-height: 12px !important;
  color: inherit !important;
}


/* Go-to-root-entry arrow shown inline next to a nested role's name — the
   explanation lives in its md-tooltip (hover), not a separate row. */
:where(.crd-dialog, .rt-content) .rt-role-nav-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  border-radius: 50% !important;
}

:where(.crd-dialog, .rt-content) .rt-role-nav-btn md-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  line-height: 13px !important;
  color: #9e9e9e !important;
  margin: 0 !important;
}

:where(.crd-dialog, .rt-content) .rt-role-nav-btn:hover { background: rgba(102, 126, 234, 0.12) !important; }
:where(.crd-dialog, .rt-content) .rt-role-nav-btn:hover md-icon { color: var(--rt-color) !important; }


/* Role badges */
:where(.crd-dialog, .rt-content) .rt-role-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

:where(.crd-dialog, .rt-content) .rt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

:where(.crd-dialog, .rt-content) .rt-badge md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: inherit !important;
}

:where(.crd-dialog, .rt-content) .rt-badge--roles { background: rgba(102, 126, 234, 0.1); color: var(--rt-color); }
:where(.crd-dialog, .rt-content) .rt-badge--perms { background: rgba(240, 147, 251, 0.12); color: #c026d3; }
:where(.crd-dialog, .rt-content) .rt-badge--inuse { background: rgba(217, 119, 6, 0.12); color: #b45309; cursor: default; }
:where(.crd-dialog, .rt-content) .rt-badge--locked { background: rgba(100, 116, 139, 0.14); color: #475569; cursor: default; }


/* Expanded children area */
:where(.crd-dialog, .rt-content) .rt-role-children {
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}



/* =====================================================
   PERMISSION NODE
   ===================================================== */

:where(.crd-dialog, .rt-content) .rt-perms-list { background: #fafafa; }

:where(.crd-dialog, .rt-content) .rt-perm-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: default;
  background: white;
  transition: background 0.15s ease, border-left 0.15s ease;
}

:where(.crd-dialog, .rt-content) .rt-perm-node:last-child { border-bottom: none; }
:where(.crd-dialog, .rt-content) .rt-perm-node:hover { background: #fdf4ff; }

:where(.crd-dialog, .rt-content) .rt-perm-node--match {
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.08) 0%, rgba(245, 87, 108, 0.05) 100%) !important;
  border-left: 3px solid var(--rt-color-perm) !important;
}


/* Permission icon circle */
:where(.crd-dialog, .rt-content) .rt-perm-icon-wrap {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: rgba(240, 147, 251, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-perm-icon-wrap md-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  color: #c026d3 !important;
}


/* Permission info */
:where(.crd-dialog, .rt-content) .rt-perm-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

:where(.crd-dialog, .rt-content) .rt-perm-name {
  font-size: 13px;
  font-weight: 600;
  color: #2d2d2d;
  line-height: 1.3;
}

:where(.crd-dialog, .rt-content) .rt-perm-desc {
  font-size: 11px;
  color: #999;
  line-height: 1.3;
}


/* Permission ID chip */
:where(.crd-dialog, .rt-content) .rt-perm-id { flex-shrink: 0; margin-left: 8px; }

:where(.crd-dialog, .rt-content) .rt-perm-id code {
  font-size: 10px;
  color: #9e9e9e;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  white-space: nowrap;
}



/* =====================================================
   SEARCH HIGHLIGHT
   ===================================================== */

.search-highlight {
  background: #fef08a;
  color: #1a1a2e;
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 700;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes rtIconPulse {
  0%, 100% { transform: scale(1);     opacity: 0.8; }
  50%       { transform: scale(1.05); opacity: 1;   }
}




/* =====================================================
   CRUD ADDITIONS — Roles & Permissions Editor
   ===================================================== */

/* ── Dirty-state summary badge ──────────────────────── */

:where(.crd-dialog, .rt-content) .rt-summary-dirty {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}



/* ── Icon buttons (delete role / delete permission) ──── */

:where(.crd-dialog, .rt-content) .rt-icon-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  flex-shrink: 0;
  border-radius: 50% !important;
  transition: var(--rt-ease) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* display:flex + line-height (not just width/height) is what actually
   centers the glyph — without it the icon sits a couple px off-center,
   invisible normally but glaring once rt-icon-btn--confirming's pulsing
   ring below gives the eye a perfect circle to compare it against. */
:where(.crd-dialog, .rt-content) .rt-icon-btn md-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  margin: 0 !important;
}

:where(.crd-dialog, .rt-content) .rt-icon-btn--sm {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

:where(.crd-dialog, .rt-content) .rt-icon-btn--sm md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
}

:where(.crd-dialog, .rt-content) .rt-icon-btn--danger md-icon { color: #ef4444 !important; }
:where(.crd-dialog, .rt-content) .rt-icon-btn--danger:hover { background: rgba(239, 68, 68, 0.1) !important; }

:where(.crd-dialog, .rt-content) .rt-icon-btn--warning md-icon { color: #d97706 !important; }
:where(.crd-dialog, .rt-content) .rt-icon-btn--warning:hover { background: rgba(217, 119, 6, 0.1) !important; }

:where(.crd-dialog, .rt-content) .rt-icon-btn--confirming {
  background: #fee2e2 !important;
  animation: rtDangerPulse 1s ease-in-out infinite;
}

:where(.crd-dialog, .rt-content) .rt-icon-btn--confirming md-icon { color: #dc2626 !important; }


/* Genuine hard lock — role assigned to the account's Super User, backend
   refuses the delete outright. Slate grey, deliberately NOT the red/amber
   used elsewhere here, so it doesn't read as "same as a normal delete
   button" or "same as the soft in-use warning" — this one truly can't be
   clicked through. Rule order matters: comes after --confirming so it
   wins if ng-class ever applied both (shouldn't happen in practice, since
   deleteRole() no-ops before arming the confirm state for a locked role). */
:where(.crd-dialog, .rt-content) .rt-icon-btn--superuser-locked {
  cursor: not-allowed !important;
}

:where(.crd-dialog, .rt-content) .rt-icon-btn--superuser-locked md-icon { color: #6b7280 !important; }
:where(.crd-dialog, .rt-content) .rt-icon-btn--superuser-locked:hover { background: rgba(107, 114, 128, 0.1) !important; }

@keyframes rtDangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}



/* ── Deleted role state ─────────────────────────────── */

:where(.crd-dialog, .rt-content) .rt-role-node--deleted .rt-role-header {
  background: #fef2f2 !important;
  opacity: 0.75;
}

:where(.crd-dialog, .rt-content) .rt-role-node--deleted .rt-role-name,
:where(.crd-dialog, .rt-content) .rt-role-node--deleted .rt-role-desc {
  text-decoration: line-through;
  color: #b91c1c;
}



/* ── Unlinked (nested "Delete" — edge only, role survives) state ───── */

:where(.crd-dialog, .rt-content) .rt-role-node--unlinked .rt-role-header {
  background: #fffbeb !important;
  opacity: 0.75;
}

:where(.crd-dialog, .rt-content) .rt-role-node--unlinked .rt-role-name,
:where(.crd-dialog, .rt-content) .rt-role-node--unlinked .rt-role-desc {
  text-decoration: line-through;
  color: #b45309;
}

:where(.crd-dialog, .rt-content) .rt-unlinked-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  margin-right: 8px;
  white-space: nowrap;
}

:where(.crd-dialog, .rt-content) .rt-unlinked-chip md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: inherit !important;
}

:where(.crd-dialog, .rt-content) .rt-deleted-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  margin-right: 8px;
  white-space: nowrap;
}

:where(.crd-dialog, .rt-content) .rt-deleted-chip md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: inherit !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-undo {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 16px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  background: white !important;
  color: #b91c1c !important;
  border: 1.5px solid #fca5a5 !important;
  box-shadow: none !important;
  margin: 0 8px 0 0 !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-undo:hover { background: #fef2f2 !important; }

:where(.crd-dialog, .rt-content) .rt-btn-undo md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 4px 0 0 !important;
  color: inherit !important;
}


/* Brief highlight flash when "go to parent" scrolls a role into view */
.rt-role-header--jump-flash {
  animation: rtJumpFlash 1.2s ease;
}

@keyframes rtJumpFlash {
  0%   { background: rgba(102, 126, 234, 0.22); }
  100% { background: transparent; }
}



/* ── Nested-role tooltip (hand-rolled, see rtBodyPortal) ─────────────── */

:where(.crd-dialog, .rt-content) .rt-role-tooltip {
  position: fixed;
  z-index: 4000;
  max-width: 260px;
  transform: translateY(-100%);
  background: rgba(51, 51, 51, 0.96);
  color: white;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}



/* ── Add Permission row/button ──────────────────────── */

:where(.crd-dialog, .rt-content) .rt-add-perm-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 20px 12px;
  background: #fafafa;
}

:where(.crd-dialog, .rt-content) .rt-btn-add-perm {
  background: white !important;
  color: var(--rt-color) !important;
  border: 1.5px dashed #c7d2fe !important;
  box-shadow: none !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12px !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-add-perm:hover {
  background: rgba(102, 126, 234, 0.06) !important;
  border-color: var(--rt-color) !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-add-childrole {
  background: white !important;
  color: #7c3aed !important;
  border: 1.5px dashed #ddd6fe !important;
  box-shadow: none !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12px !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-add-childrole:hover {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: #7c3aed !important;
}



/* ── Add Permission / Add Child Role dropdowns ──────────────────────
   Plain ng-if dropdown instead of md-menu/$mdOpenMenu: $mdMenu positions
   its popup relative to document.body / the nearest md-dialog, and that
   calculation breaks when the trigger sits inside doubly-nested dialogs
   (User Management dialog -> Roles tab) — the click registered but the
   popup rendered with no visible size.

   This was first positioned with plain CSS (`position: absolute`) relative
   to its own trigger, but that gets clipped/invisible whenever the trigger
   sits near the bottom of the scrollable `.rt-scrollable` tree, since the
   popup's box is still laid out inside that ancestor's overflow. It's now
   `position: fixed` with coordinates computed in JS (roles-tab-controller.js
   `toggleDropdown`/`getDropdownStyle`) from the trigger's actual
   getBoundingClientRect() — viewport-relative, so ancestor scroll/overflow
   can't clip it — flipping to open upward when there isn't room below. */

:where(.crd-dialog, .rt-content) .rt-dropdown-wrap {
  position: relative;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-menu {
  position: fixed;
  z-index: 3000;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-search-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: #bdbdbd !important;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12px;
  color: #424242;
  background: transparent;
  font-family: inherit;
  min-width: 0;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-search-input::placeholder { color: #bdbdbd; }

:where(.crd-dialog, .rt-content) .rt-dropdown-list {
  overflow-y: auto;
  flex: 1;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-list::-webkit-scrollbar { width: 7px; }
:where(.crd-dialog, .rt-content) .rt-dropdown-list::-webkit-scrollbar-track { background: #f5f5f5; }
:where(.crd-dialog, .rt-content) .rt-dropdown-list::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 4px; }


/* Selecting an item no longer closes the dropdown (multi-select), so this
   footer gives an explicit way to close it plus a running count of what
   was added this session. */
:where(.crd-dialog, .rt-content) .rt-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-footer-hint {
  font-size: 11px;
  color: #9e9e9e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-done-btn {
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  color: var(--rt-color) !important;
  background: rgba(102, 126, 234, 0.08) !important;
  border-radius: 14px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-done-btn:hover { background: rgba(102, 126, 234, 0.16) !important; }

:where(.crd-dialog, .rt-content) .rt-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-item:last-child { border-bottom: none; }
:where(.crd-dialog, .rt-content) .rt-dropdown-item:hover { background: #f5f6fb; }

:where(.crd-dialog, .rt-content) .rt-dropdown-item--empty {
  cursor: default;
  color: #9e9e9e;
  font-size: 12px;
}

:where(.crd-dialog, .rt-content) .rt-dropdown-item--empty:hover { background: none; }

:where(.crd-dialog, .rt-content) .rt-menu-item-name { font-size: 13px; font-weight: 600; color: #2d2d2d; }
:where(.crd-dialog, .rt-content) .rt-menu-item-id { font-size: 10px; color: #9e9e9e; font-family: 'Monaco', 'Courier New', monospace; }



/* ── Permission row spacing (leave room for delete btn) ── */

:where(.crd-dialog, .rt-content) .rt-perm-node { padding-right: 12px; }



/* ── Pending (new, unsaved) roles section ───────────── */

:where(.crd-dialog, .rt-content) .rt-pending-section { margin-bottom: 20px; }

:where(.crd-dialog, .rt-content) .rt-pending-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

:where(.crd-dialog, .rt-content) .rt-pending-header md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
}

:where(.crd-dialog, .rt-content) .rt-pending-card {
  border: 2px dashed #fbbf24;
  margin-bottom: 12px;
}

:where(.crd-dialog, .rt-content) .rt-role-header--pending { cursor: default; }

:where(.crd-dialog, .rt-content) .rt-role-icon-wrap--pending {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
}

:where(.crd-dialog, .rt-content) .rt-role-icon-wrap--pending md-icon { color: #b45309 !important; }

:where(.crd-dialog, .rt-content) .rt-new-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #fbbf24;
  color: #78350f;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}



/* =====================================================
   FIXED BOTTOM ACTIONS BAR
   ===================================================== */

:where(.crd-dialog, .rt-content) .rt-fixed-bottom {
  background: white;
  padding: 12px 20px;
  border-top: var(--rt-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

:where(.crd-dialog, .rt-content) .rt-btn-add-role {
  background: white !important;
  color: var(--rt-color) !important;
  border: 2px solid #e0e0e0 !important;
  box-shadow: none !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-add-role:hover {
  border-color: var(--rt-color) !important;
  background: rgba(102, 126, 234, 0.04) !important;
}

:where(.crd-dialog, .rt-content) .rt-save-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #b45309;
  font-weight: 600;
}

:where(.crd-dialog, .rt-content) .rt-save-hint md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-save {
  background: var(--rt-gradient) !important;
  color: white !important;
  box-shadow: var(--rt-shadow-sm) !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-save:hover:not([disabled]) {
  box-shadow: var(--rt-shadow-md) !important;
  transform: translateY(-1px) !important;
}

:where(.crd-dialog, .rt-content) .rt-btn-save[disabled] {
  background: #e0e0e0 !important;
  color: #9e9e9e !important;
  box-shadow: none !important;
}