/* RBAC shared styles (2026-10-05): the role tree picker, used by Roles &
   Permissions ("Reports To") and Users & Employees ("Role"). Global but
   namespaced (rp-) because the picker is a child component of both pages.
   Logical properties only, so RTL mirrors. */
.rp-picker .rp-tree, .rp-picker .rp-children { list-style: none; margin: 0; padding: 0; }
.rp-picker .rp-children { margin-inline-start: 14px; padding-inline-start: 14px; border-inline-start: 2px solid var(--border, #d1d5db); }
.rp-picker .rp-node { margin: 4px 0; }
.rp-picker .rp-tag { font-size: .7rem; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.rp-picker .rp-tag-off { background: rgba(220, 38, 38, .1); color: #B91C1C; }
.rp-picker .rp-icon-btn { border: none; background: transparent; color: var(--text-2, #4b5563); padding: 4px 6px; border-radius: 6px; cursor: pointer; }

.rp-picker-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1040; }
.rp-picker { position: fixed; z-index: 1050; top: 10vh; inset-inline: 0; margin-inline: auto; width: min(520px, calc(100vw - 24px)); max-height: 76vh; display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .25); }
.rp-picker-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border, #e5e7eb); }
.rp-picker-body { padding: 10px 14px 14px; overflow-y: auto; }
.rp-pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; color: inherit; padding: 4px 8px; border-radius: 8px; cursor: pointer; text-align: start; }
.rp-pick:hover:not(:disabled) { border-color: #5B5FEF; }
.rp-pick:disabled { opacity: .5; cursor: not-allowed; }
.rp-pick-current { background: rgba(91, 95, 239, .12); }