/* Navbar Layout - Force single row always */
.navbar {
  min-height: 3.25rem !important;
  max-height: 3.25rem !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

.navbar > .container-fluid {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar-menu {
  display: flex !important;
  flex-grow: 1 !important;
  align-items: center !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: static !important;
  background-color: transparent !important;
}

/* Override Bulma's mobile-first responsive behavior */
@media screen and (max-width: 1023px) {
  .navbar-menu {
    display: flex !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
    background-color: transparent !important;
  }
}

.navbar-start {
  flex: 1;
  justify-content: flex-start;
  display: flex;
  align-items: center;
}

.navbar-end {
  justify-content: flex-end !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  overflow: hidden !important;
  max-width: calc(100vw - 200px) !important;
}

/* Force burger menu to be hidden - we want horizontal layout always */
.navbar-burger {
  display: none !important;
}

/* Mobile responsive - keep items horizontal but smaller */
@media screen and (max-width: 768px) {
  .navbar-item {
    padding: 0.25rem 0.5rem;
  }
  
  .navbar-item .button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    height: auto;
  }
  
  /* Hide button text on very small screens, keep icons */
  @media screen and (max-width: 480px) {
    .navbar-end .navbar-item .button span:not(.icon) {
      display: none;
    }
    
    .navbar-brand .has-text-weight-bold {
      font-size: 1rem !important;
    }
  }
}

/* Avatar in navbar */
.navbar-item img.is-rounded {
  max-height: 24px;
}

/* Extra compact navbar items */
.navbar-item {
  padding: 0.25rem 0.4rem;
  white-space: nowrap;
  font-size: 0.875rem;
}

.navbar-item .tags.has-addons.is-small {
  margin-bottom: 0;
}

.navbar-item .tag.is-small {
  font-size: 0.625rem;
  padding: 0.125rem 0.25rem;
  height: auto;
}

.navbar-item.has-dropdown .navbar-link {
  padding-right: 1.5rem;
  padding-left: 0.5rem;
}

/* Smaller icon size in navbar */
.navbar-item .icon.is-small {
  font-size: 0.8rem;
}

/* Extra compact buttons in navbar */
.navbar-item .button.is-small {
  font-size: 0.75rem;
  height: 1.8rem;
  padding: 0.25rem 0.5rem;
}

/* Make navbar text shorter */
.navbar-item .icon-text {
  gap: 0.25rem;
}

.navbar-item .icon-text span:not(.icon) {
  font-size: 0.875rem;
}

/* Ensure buttons in navbar-end don't wrap */
.navbar-end .buttons {
  margin-bottom: 0;
  align-items: center;
}

.navbar-end .buttons .button {
  margin-bottom: 0;
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
}

.navbar-end .buttons .button .icon {
  margin-right: 0.5rem !important;
}

.navbar-end .buttons .button span:not(.icon) {
  line-height: 1 !important;
}

/* Make user dropdown more compact */
.navbar-item.has-dropdown .navbar-link .icon-text span {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navbar color rules moved to sidebar.css to avoid duplication */

/* === Brand area aligned with the sidebar column ===
   The brand sits at the very top-left, on top of the sidebar's vertical column.
   We make the brand block exactly as wide as the sidebar (260px expanded,
   60px collapsed) so its hover background reads as one continuous "column"
   with the sidebar below — instead of a small text-sized pill floating in the
   navbar. Negative margin cancels the container-fluid `px-3` padding so the
   block sits flush against the viewport edge. */
body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand {
  width: 16.25rem;          /* 260px - matches .dashboard-sidebar width */
  height: 3.25rem;          /* fills full navbar height (.navbar min/max-height) */
  align-self: stretch;      /* override the navbar's align-items: center */
  margin-left: -0.75rem;    /* cancels container-fluid .px-3 padding-left */
  flex-shrink: 0;
  transition: width 0.3s ease;
}

body:has(.dashboard-sidebar.collapsed:not(.hover-expanded)) .navbar.is-dark .navbar-brand {
  width: 3.75rem;           /* 60px - matches .dashboard-sidebar.collapsed width */
}

body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand > .navbar-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  transition: background-color 0.15s ease;
}

/* Override the generic .navbar-item:hover (sidebar.css line 681) so the brand
   block uses a stronger fill that matches the sidebar toggle's hover color. */
body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand > .navbar-item:hover,
body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand > .navbar-item:focus {
  background-color: #34495e !important;
}

/* Hide the "Evallor" text when the sidebar is collapsed (and not hover-expanded),
   mirroring the sidebar's own label-hiding behavior. The chart icon stays. */
body:has(.dashboard-sidebar.collapsed:not(.hover-expanded)) .navbar.is-dark .navbar-brand .icon-text > span:not(.icon) {
  display: none;
}