/**
 * Manage Roles page – Paces apps-users-roles alignment helpers.
 * Most styling comes from vendors/app.min.css; keep only small overrides here.
 */

/* Reuse table/search styles from permissions page (shared by roles table) */
#rolesPage .app-search {
  position: relative;
}

#rolesPage .app-search .form-control {
  padding-inline-start: 40px;
}

#rolesPage .app-search .app-search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  left: 0;
  inset-inline-start: 0;
}

#rolesPage .thead-sm > * > * {
  padding: 0.5rem 0.5rem !important;
}

#rolesPage .table-custom th {
  white-space: nowrap;
}

#rolesPage .badge-label {
  border-radius: 0;
  padding: calc(var(--bs-badge-padding-y, 0.35em) * 1.5) calc(var(--bs-badge-padding-x, 0.65em) * 2);
}

#rolesPage .fs-xxs {
  font-size: 0.7rem;
}

#rolesPage .btn-default.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  color: #374151;
}

#rolesPage .btn-default.btn-icon:hover {
  color: #111827;
}

#rolesPage .card-header.border-light {
  border-color: rgba(var(--bs-light-rgb), 1) !important;
}

/* Prominent purple Add User button (match Paces image) */
.roles-add-user-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  color: #fff;
  font-weight: 600;
}
.roles-add-user-btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  border: none;
}