:root{
  --app-header-h: 60px;   /* desktop header */
  --nav-logo-h:   50px;   /* LOCKED logo height */

  /* navbar container (dbc.Container gutters) */
  --nav-container-max: none;
  --nav-container-pad-x: 150px;

  /* spacing between items */
  --nav-brand-gap: .35rem;
  --nav-item-pad-x: .55rem;
  --nav-group-gap: .20rem;
}

#page-content { padding-top: var(--app-header-h) !important; }
.atc-quickbar  { top: var(--app-header-h) !important; }

/* kill bootstrap vertical padding + lock everything to the same height */
.custom-navbar{
  min-height: var(--app-header-h);
  --bs-navbar-padding-y: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

/* Reduce left/right margins caused by dbc.Container(fluid=False) */
.custom-navbar > .container,
.custom-navbar > .container-fluid{
  max-width: var(--nav-container-max) !important;
  padding-left: var(--nav-container-pad-x) !important;
  padding-right: var(--nav-container-pad-x) !important;
}

/* Brand area */
.custom-navbar .navbar-brand{
  height: var(--app-header-h);
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin-right: var(--nav-brand-gap) !important;
  flex-shrink: 0;
}

/* LOCKED logo size (wins over any other .lsp-nav-logo rules) */
.custom-navbar .navbar-brand .lsp-nav-logo{
  height: var(--nav-logo-h) !important;
  max-height: var(--nav-logo-h) !important;
  min-height: var(--nav-logo-h) !important;
  width: auto !important;
  display: block;
  object-fit: contain;
}

/* tighter spacing between nav items */
.custom-navbar .navbar-nav{
  gap: var(--nav-group-gap) !important;
}

/* nav items centered, tighter horizontal padding */
.custom-navbar .navbar-nav .nav-link,
.custom-navbar .navbar-nav .dropdown-toggle,
.custom-navbar .nav-icon-btn{
  height: var(--app-header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--nav-item-pad-x) !important;
  line-height: 1;

  /* IMPORTANT: no hover background / rectangle */
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  border-radius: 0;
}

/* remove any previous ::before “pill” */
.custom-navbar .navbar-nav .nav-link::before,
.custom-navbar .navbar-nav .dropdown-toggle::before,
.custom-navbar .nav-icon-btn::before{
  content: none !important;
}

/* Chevron style (use on the <i> inside your dropdown label) */
.nav-chevron{
  font-size: .85em;
  opacity: .65;
  margin-left: .4rem;
  transform: translateY(1px);
  transition: transform .15s ease, opacity .15s ease;
}

/* Raise-on-hover: text lift ONLY (no background) */
@media (hover: hover) and (pointer: fine){
  .custom-navbar .navbar-nav .nav-link,
  .custom-navbar .navbar-nav .dropdown-toggle,
  .custom-navbar .nav-icon-btn{
    transition: transform .12s ease;
    will-change: transform;
  }

  .custom-navbar .navbar-nav .nav-link:hover,
  .custom-navbar .navbar-nav .dropdown-toggle:hover,
  .custom-navbar .nav-icon-btn:hover,
  .custom-navbar .dropdown:hover > .dropdown-toggle,
  .custom-navbar .dropdown:focus-within > .dropdown-toggle{
    transform: translateY(-1px);
  }

  .custom-navbar .navbar-nav .nav-link:active,
  .custom-navbar .navbar-nav .dropdown-toggle:active,
  .custom-navbar .nav-icon-btn:active{
    transform: translateY(0);
  }
}

/* Open navbar dropdowns on hover (desktop only) */
@media (min-width: 992px) and (hover: hover) and (pointer: fine){
  .custom-navbar .dropdown-menu{
    display: none !important;
    margin-top: 0;
  }

  .custom-navbar .dropdown:hover > .dropdown-menu,
  .custom-navbar .dropdown:focus-within > .dropdown-menu{
    display: block !important;
  }

  /* rotate the chevron while open */
  .custom-navbar .dropdown:hover .nav-chevron,
  .custom-navbar .dropdown:focus-within .nav-chevron{
    opacity: 1;
    transform: translateY(1px) rotate(180deg);
  }

  /* optional: invisible bridge to prevent hover flicker */
  .custom-navbar .dropdown{ position: relative; }
  .custom-navbar .dropdown::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;
  }
}

/* If opened by click, Bootstrap adds .show */
.custom-navbar .dropdown.show .nav-chevron{
  opacity: 1;
  transform: translateY(1px) rotate(180deg);
}

/* Underline only when hovered/focused/open (your existing underline system) */
.navlink--top:hover::after,
.navlink--top:focus-visible::after,
.custom-navbar .dropdown:hover > .navlink--top::after,
.custom-navbar .dropdown:focus-within > .navlink--top::after{
  opacity: 1;
  transform: scaleX(1);
}
/* ========= Make the collapsed navbar NOT grow taller ========= */
@media (max-width: 991.98px){ /* below lg (your Navbar expand="lg") */

  /* 1) Fix the “150px padding” problem on tablet/phone */
  :root{
    --nav-container-pad-x: 16px;
    --app-header-h: 56px;   /* optional, feels better on mobile/tablet */
    --nav-logo-h: 50px;     /* optional, avoids giant header */
  }

  /* 2) Turn the Collapse into a fixed panel under the header */
  #navbar-collapse.collapse,
  #navbar-collapse.collapsing,
  #navbar-collapse.collapse.show{
    position: fixed;
    top: var(--app-header-h);
    left: 0;
    right: 0;
    z-index: 1040;

    /* panel look */
    background: #003366;
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);

    /* scroll instead of “expanding the bar” */
    max-height: calc(100vh - var(--app-header-h));
    overflow-y: auto;
    overflow-x: hidden;

    /* match your container gutters */
    padding: 10px var(--nav-container-pad-x) 14px;
  }
    .custom-navbar .navbar-toggler{
    margin-right: 16px;   /* tweak to taste: 8px, 12px, 20px, etc. */
  }
  /* Bootstrap sets overflow:hidden while animating; keep it smooth */
  #navbar-collapse.collapsing{
    overflow: hidden !important;
  }

  /* 3) Stack your left_group and right_group (they’re inside one flex row now) */
  #navbar-collapse > .d-flex{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }

  #navbar-collapse .navbar-nav{
    width: 100%;
  }

  /* Put a divider above the right-side actions (bell/user) */
  #navbar-collapse .navbar-nav.ms-auto{
    margin-left: 0 !important;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  /* 4) Mobile-friendly tap targets (stop forcing 60px fixed height) */
  .custom-navbar .navbar-nav .nav-link,
  .custom-navbar .navbar-nav .dropdown-toggle,
  .custom-navbar .nav-icon-btn{
    height: auto !important;
    padding: .70rem .75rem !important;
    justify-content: flex-start;
  }

  /* 5) Dropdown menu: full-width + contained scroll (no layout chaos) */
  #navbar-collapse .dropdown-menu{
    position: static !important; /* keep it inside the panel */
    width: 100%;
    margin: .25rem 0 0;
    padding: .35rem;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;

    max-height: 60vh;
    overflow-y: auto;
  }

  #navbar-collapse .dropdown-item{
    border-radius: 10px;
    padding: .60rem .70rem;
    white-space: normal;
  }
}
/* Match burger to brand color (example: white lines) */
.custom-navbar {
  /* remove border if you want */
  --bs-navbar-toggler-border-color: transparent;

  /* hamburger line colour */
  --bs-navbar-toggler-icon-bg:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px){

  /* Bell + User row */
  #navbar-collapse .navbar-nav.ms-auto{
    margin-left: 0 !important;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);

    /* make them sit on one row */
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;

    position: relative; /* anchor for the dropdown panel */
  }

  /* User dropdown: float below that row, not next to the bell */
  #navbar-collapse .navbar-nav.ms-auto .dropdown-menu{
    position: absolute !important;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: .5rem;
    z-index: 1;   /* keep it above the icons */
  }
}