/**
 * Navbar menu - remove unnecessary left margin on all devices.
 * Load this after Bootstrap and project styles so overrides apply.
 */

/* === MOBILE & TABLET (collapsed menu) === */
@media (max-width: 991px) {
  /* Hide logo when hamburger menu is open; show when collapsed */
  #navbar-primary:has(.navbar-collapse.show) .navbar-brand {
    display: none !important;
  }

  /* Single padding on outer nav only; inner nav keeps same so logo/toggler don't shift */
  #primary-nav.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #primary-nav .navbar.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Pull collapse out so menu starts from the left edge (no left padding) */
  #navbarText.navbar-collapse {
    margin-left: -15px !important;   /* cancel inner container's left padding */
    margin-right: -15px !important;
    padding-left: 0 !important;       /* menu starts from left */
    padding-right: 15px !important;
    width: calc(100% + 30px) !important;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* No extra left space on nav list or list items */
  #header-navbar.navbar-nav,
  #navbarText #header-navbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: left;
    list-style: none;
  }

  #header-navbar .nav-item,
  #header-navbar > li {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  #header-navbar .nav-link,
  #header-navbar a.nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

  #header-navbar li .sep {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: none !important;   /* hide separators on mobile/tablet */
  }

  /* Hide the list items that only contain the separator (no extra gap) */
  #header-navbar > li:has(> .sep) {
    display: none !important;
  }

  /* Ensure no padding on the empty div between ul and quick-action */
  #navbarText > div:empty {
    display: none;
  }

  /* Quick action buttons - no extra left space */
  #quick-action.btn-group {
    margin-left: 0 !important;
    padding-left: 10px !important;
    width: -webkit-fill-available;
    padding-right: 10px !important;
  }

  #quick-action .btn {
    margin-left: 0 !important;
  }

}

/* === DESKTOP / NEST HUB (992px+) - hide toggle, show full menu and action buttons === */
@media (min-width: 992px) {
  /* Hide toggle button on Nest Hub, tablets in landscape, laptops, desktops */
  .navbar-toggler {
    display: none !important;
  }

  /* Show full navbar (menu + action buttons) in one row */
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  /* Menu and action buttons in same row; nav links horizontal */
  #header-navbar.navbar-nav {
    margin-left: auto;
    margin-right: 0 !important;
    padding-left: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  #header-navbar .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Keep .sep (vertical bars) visible on laptops and desktops only */
  #header-navbar li .sep {
    display: block !important;
  }

  #header-navbar > li:has(> .sep) {
    display: list-item !important;
  }

  /* Action buttons inline with menu (no extra margin) */
  #quick-action.btn-group {
    margin-left: 0.5rem !important;
    padding-left: 0 !important;
    flex-shrink: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand{
    justify-content: center;
    align-items: center;
  }
  #quick-action{
    margin-top: 0px !important;
  }
  #primary-nav .navbar{
    display: inline;
  }
}

/* === TOGGLE MENU: fast, smooth open/close animation === */
/* Let Bootstrap animate: don't override display when .collapsing is applied */
#navbarText.navbar-collapse.collapsing {
  display: block !important;
  overflow: hidden;
  transition: height 0.2s ease-out !important;
}

#navbarText.collapsing {
  transition: height 0.2s ease-out !important;
}