/*
 * BB45 role/profile pill fit normalizer
 * Keeps the topbar profile pill inside its square/slot for Admin and Superadmin.
 * Safe, CSS-only patch: no PHP logic changed.
 */
:root{
  --bb45-role-pill-max: 170px;
  --bb45-role-pill-min: 136px;
  --bb45-role-pill-height: 44px;
  --bb45-role-avatar: 32px;
}

/* Common topbar/profile-pill containers used by the panel/theme stack. */
.app-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user),
.app-header .navbar-nav :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user),
.navbar-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user),
.header-profile-user-wrap,
.header-profile-user,
body :is(.topbar-user,.user-pill,.profile-pill,.admin-pill).bb45-role-fit-target{
  width: min(100%, var(--bb45-role-pill-max)) !important;
  min-width: var(--bb45-role-pill-min) !important;
  max-width: var(--bb45-role-pill-max) !important;
  min-height: var(--bb45-role-pill-height) !important;
  height: var(--bb45-role-pill-height) !important;
  padding: 5px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* When the clickable dropdown itself is the pill. */
.app-header .navbar-nav .nav-link:has(.header-profile-user),
.app-header .navbar-nav .nav-link:has(.user-avatar),
.app-header .navbar-nav .nav-link:has(.avatar),
.navbar-header .nav-link:has(.header-profile-user),
.navbar-header .nav-link:has(.user-avatar),
.navbar-header .nav-link:has(.avatar){
  width: min(100%, var(--bb45-role-pill-max)) !important;
  min-width: var(--bb45-role-pill-min) !important;
  max-width: var(--bb45-role-pill-max) !important;
  min-height: var(--bb45-role-pill-height) !important;
  height: var(--bb45-role-pill-height) !important;
  padding: 5px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Avatar stays fixed so text gets the remaining width instead of pushing the pill wider. */
.app-header :is(.user-avatar,.header-profile-user,.avatar,.rounded-circle),
.navbar-header :is(.user-avatar,.header-profile-user,.avatar,.rounded-circle){
  width: var(--bb45-role-avatar) !important;
  height: var(--bb45-role-avatar) !important;
  min-width: var(--bb45-role-avatar) !important;
  max-width: var(--bb45-role-avatar) !important;
  flex: 0 0 var(--bb45-role-avatar) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  line-height: 1 !important;
}

/* Text block must be allowed to shrink and ellipsize. */
.app-header :is(.user-name,.profile-name,.admin-name,.username,.user-title,.profile-title,.role-label,.user-role,.profile-role,.admin-role),
.navbar-header :is(.user-name,.profile-name,.admin-name,.username,.user-title,.profile-title,.role-label,.user-role,.profile-role,.admin-role),
.app-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user) :is(span,strong,small,p,div),
.navbar-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user) :is(span,strong,small,p,div){
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.12 !important;
}

/* Keep vertical two-line label compact: Superadmin/Superadmin and Admin/Admin both fit. */
.app-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user) .d-flex,
.app-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user) .flex-column,
.navbar-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user) .d-flex,
.navbar-header :is(.topbar-user,.user-pill,.profile-pill,.admin-pill,.user-profile,.profile-dropdown,.user-dropdown,.header-profile,.dropdown-user,.nav-user) .flex-column{
  min-width: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 991.98px){
  :root{
    --bb45-role-pill-max: 156px;
    --bb45-role-pill-min: 124px;
    --bb45-role-pill-height: 42px;
    --bb45-role-avatar: 30px;
  }
}

@media (max-width: 575.98px){
  :root{
    --bb45-role-pill-max: 144px;
    --bb45-role-pill-min: 112px;
    --bb45-role-pill-height: 40px;
    --bb45-role-avatar: 28px;
  }
}