/* Navbar Responsive Layout Fixes */

/* Ensure no navbar content wraps at any breakpoint */
.navbar {
  --navbar-height: 4rem; /* Default fallback height */
  min-height: var(--navbar-height);
  transition: height 0.3s ease;
}

/* Desktop: Force single line layout, prevent wrapping */
@media (min-width: 1024px) {
  .navbar {
    height: 4rem; /* Fixed height for desktop */
  }
}

/* Mobile: Allow dynamic height but with clean sections */
@media (max-width: 1023px) {
  .navbar {
    min-height: 5rem; /* Minimum height for mobile multi-row layout */
  }
}

/* Layout push compensation for sticky navbar */
.layout-main {
  margin-top: 0; /* No margin needed for sticky positioning */
  transition: margin-top 0.3s ease;
}

/* Sidebar positioning with dynamic navbar height */
.layout-sidebar {
  /* Base positioning handled by Tailwind classes in component */
  top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  /* Force scrollability */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Prevent any navbar child elements from wrapping */
.navbar .flex {
  flex-wrap: nowrap;
}

/* Ensure dropdowns don't affect navbar height */
.navbar details[open] summary {
  position: relative;
  z-index: 51;
}

.navbar .dropdown-content {
  position: absolute;
  top: 100%;
  z-index: 52;
}

/* Fix dropdown scrolling and prevent multiple columns */
.navbar .dropdown-content.menu {
  display: block !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.navbar .dropdown-content.menu li {
  display: block !important;
  width: 100% !important;
}

/* Responsive breakpoint management - avoid intermediate states */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Force mobile layout for this range to avoid wrapping */
  .navbar .hidden.lg\\:flex {
    display: none !important;
  }
  
  .navbar .flex.lg\\:hidden {
    display: flex !important;
  }
}

/* Search component responsiveness within navbar */
.navbar .search-inline {
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

/* Mobile search full width */
@media (max-width: 1023px) {
  .navbar .search-inline {
    width: 100%;
  }
}

/* Desktop search controlled width */
@media (min-width: 1024px) {
  .navbar .search-inline {
    max-width: 24rem; /* max-w-md equivalent */
    min-width: 16rem; /* Minimum usable width */
  }
}