/* dashboard-4-2.css — topbar staff/premium badges (Phase 4-2c)
   Additive; loaded after the other dashboard stylesheets. */

#user-menu-btn .td-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  line-height: 1.4;
  margin-left: 2px;
  flex-shrink: 0;
}
#user-menu-btn .td-badge svg { flex-shrink: 0; }

#user-menu-btn .td-badge-staff {
  background: rgba(139,92,246,.16);
  color: #A78BFA;
  border: 1px solid rgba(139,92,246,.3);
}
#user-menu-btn .td-badge-premium {
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(139,92,246,.18));
  color: #FBBF24;
  border: 1px solid rgba(245,158,11,.32);
}

/* keep the name from pushing badges off on narrow widths */
#user-menu-btn .user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  #user-menu-btn .td-badge { display: none; }   /* avatar + caret only on small screens */
}