/**
 * System-wide content width / side margins
 *
 * Keep header + page content aligned with a consistent side gutter.
 * Guide (from design screenshot): ~26px left/right from the viewport edge
 * so the content column lines up with the logo and profile controls.
 */

:root {
  --hpi-page-gutter: 24px;
}

@media (min-width: 992px) {
  :root {
    --hpi-page-gutter: 26px;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    width: 100%;
    max-width: calc(100% - (var(--hpi-page-gutter) * 2));
    padding-left: 0;
    padding-right: 0;
  }

  /* Keep header / content / footer containers on the same grid */
  .hpi-header > .container,
  .hpi-content .container,
  .hpi-footer .container {
    max-width: calc(100% - (var(--hpi-page-gutter) * 5));
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1400px) {
  :root {
    --hpi-page-gutter: 28px;
  }
}

@media (min-width: 1920px) {
  :root {
    --hpi-page-gutter: 32px;
  }
}

/**
 * Desktop header: logo left, nav truly centered, profile right.
 * Avoid flex + negative-margin hacks; Safari mis-measures those on first paint.
 */
.hpi-header-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
}

.hpi-header-menu-header .hpi-header-logo {
  height: 28px;
  max-width: 140px;
}

@media (min-width: 992px) {
  .hpi-header > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
  }

  .hpi-header-left {
    margin-right: 0 !important;
    justify-self: start;
    min-width: 0;
  }

  .hpi-header-menu {
    justify-self: center;
    width: auto;
    max-width: 100%;
  }

  .hpi-header-right {
    justify-self: end;
    min-width: 0;
  }
}

/**
 * Navbar consistency
 * - Simple + mega dropdowns share the same under-item positioning (SS3/SS4)
 * - Mega panel width follows gatekeeper column count (content-driven)
 * - Chevron caret sits closer to the nav label
 */
@media (min-width: 992px) {
  .hpi-header-menu .nav-item {
    position: relative;
  }

  /* Chevron next to label */
  .hpi-header-menu .nav-item > .nav-link.with-sub::after {
    margin-left: 2px !important;
    margin-top: 1px !important;
  }

  /* Dropdown pointer: tip sits ~5px below the navbar bottom edge */
  .hpi-header-menu .nav-item::before {
    top: calc(100% + 28px);
    left: 50%;
    margin-left: -7.5px;
  }

  /* Shared dropdown panel chrome — sits just under the caret */
  .hpi-header-menu .hpi-menu-sub:not(.hpi-menu-sub-mega) {
    position: absolute;
    top: calc(100% + 35px);
    left: 0;
    right: auto;
    z-index: 1050;
    box-shadow: 0 12px 28px rgba(28, 39, 60, 0.18);
  }

  /* Mega menus: same anchor as simple menus, content-sized width */
  .hpi-menu-sub.hpi-menu-sub-mega {
    position: absolute !important;
    top: calc(100% + 35px) !important;
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100vw - (var(--hpi-page-gutter) * 2)) !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    z-index: 1050;
    transform: translateX(-50%);
  }

  /* Right-side menus (e.g. Finance) open leftward so they stay on-screen */
  .hpi-menu-sub.hpi-menu-sub-mega[data-mega-align="end"] {
    left: auto !important;
    right: 0 !important;
    transform: none;
  }

  .hpi-menu-sub-mega > .container {
    display: flex !important;
    width: max-content !important;
    max-width: calc(100vw - (var(--hpi-page-gutter) * 2)) !important;
    margin: 0 !important;
    transform: none;
    box-shadow: 0 12px 28px rgba(28, 39, 60, 0.18);
  }

  /* Size columns to their longest label so links never wrap (e.g. Create from Product Request) */
  .hpi-menu-sub-mega .container > div {
    flex: 0 0 auto !important;
    width: max-content;
    white-space: nowrap;
  }

  .hpi-menu-sub-mega .nav {
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: max-content;
  }

  .hpi-menu-sub-mega .nav-link {
    white-space: nowrap !important;
  }
}