/* Custom CSS overrides */

/* Keep avatar visible and properly sized - only when navbar is in desktop mode */
.navbar-custom .avatar-container {
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  -moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
}

/* Desktop navbar behavior - when navbar links are visible (not collapsed) */
@media (min-width: 992px) {
  .navbar-custom .avatar-container {
    height: 100% !important;
    width: 6rem !important; /* Keep original width constraint */
  }

  .navbar-custom .avatar-container .avatar-img {
    height: 90% !important; /* Slightly smaller than container for padding */
    width: auto !important; /* Maintain aspect ratio */
    max-width: 100% !important; /* Don't exceed container width */
    transition: height 0.5s ease-in-out, width 0.5s ease-in-out !important;
    -webkit-transition: height 0.5s ease-in-out, width 0.5s ease-in-out !important;
    -moz-transition: height 0.5s ease-in-out, width 0.5s ease-in-out !important;
  }

  .navbar-custom.top-nav-short .avatar-container {
    opacity: 1 !important;
    visibility: visible !important;
    height: 100% !important;
    width: 3.2rem !important; /* Smaller width for compact navbar */
  }
}

/* Mobile/Tablet: Just keep avatar visible with original sizing */
@media (max-width: 991px) {
  .navbar-custom.top-nav-short .avatar-container {
    opacity: 1 !important;
    visibility: visible !important;
  }
}