/* /themes/custom/tg/css/components/header.css */

.header-user-container {
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
}

@media (min-width: 768px) {
  .header-user-container {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .header-user-container {
    display: none !important;
  }
}

.header-user-name {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 150px !important;
}

.mobile-user-anchor {
  position: relative;
  z-index: 9999;
  flex-shrink: 0 !important;
}

#mobileUserTrigger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.mobile-avatar,
#mobileUserTrigger img {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
}

.mobile-avatar-large,
#mobileUserDropdown img.mobile-avatar-large {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
}

.mobile-avatar-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(to right, #E8BF5A, #f59e0b) !important;
  color: white !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
}

.mobile-avatar-fallback-small {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
}

.mobile-avatar-fallback-large {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
}

#mobileUserTrigger picture,
#mobileUserTrigger img,
#mobileUserDropdown picture,
#mobileUserDropdown img {
  float: none !important;
}

@keyframes pulse-gentle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animate-pulse {
  animation: pulse-gentle 2s infinite;
}