// Lumina Navigation Menu styles

// Portal root: positioned within #Page, covers area below the PageHeader.
// pointer-events: none lets clicks pass through when nav is closed.
#navmenu-portal-root {
  position: absolute;
  top: var(--slds-g-sizing-11);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;

  // Shares @phone-page-header-height with pageheaderV2.less (single source of truth).
  @media @phone {
    top: @phone-page-header-height;
  }
}

// Navigation Menu Container
.NavigationMenuContainer--lumina {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  width: 270px;
  height: 100%;
  padding: var(--slds-g-spacing-4) 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: var(--slds-g-spacing-2);
  background: var(--slds-g-color-surface-container-1);
  animation-name: slide-in;
  animation-duration: 0.3s;
  -webkit-animation-name: slide-in;
  -webkit-animation-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  pointer-events: auto;
}

// Navigation Menu Overlay
.NavigationMenuOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background-color: var(--slds-g-color-foundation-black-transparent-60);
  pointer-events: auto;
}

// Scrollable items frame - contains both main and footer items
.NavigationMenuItemsFrame {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  overflow-y: auto;
}

// Spacer to push footer items to bottom when content is short
.NavigationMenuSpacer {
  flex: 1 0 0;
  min-height: 0.5rem;
}

// Footer section within the scrollable area
.NavigationMenuFooter {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}

// Navigation Menu Item
.NavigationMenuItem--lumina {
  display: flex;
  padding: var(--slds-g-spacing-3) var(--slds-g-spacing-5) var(--slds-g-spacing-3) var(--slds-g-spacing-6);
  align-items: center;
  gap: var(--slds-g-spacing-4);
  align-self: stretch;
  border-radius: var(--slds-g-radius-border-2);
  background: var(--slds-g-color-surface-1);
  color: var(--slds-g-color-info-base-10);
  transition: background-color 0.15s ease;


  // Destructive item styling (e.g., Logout)
  &.Destructive {
    color: var(--slds-g-color-error-1);

    .NavigationMenuItem__icon {
      background-color: var(--slds-g-color-error-1);
    }
  }
}

// Navigation Menu Item icon (uses SvgIconMask which colors via background-color)
.NavigationMenuItem__icon {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  aspect-ratio: 1/1;
  flex-shrink: 0;
  background-color: var(--slds-g-color-accent-1);
}

// Navigation Menu Item label
.NavigationMenuItem__label {
  font-family: var(--slds-g-font-family);
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--slds-g-font-scale-2);
  font-style: normal;
  font-weight: var(--slds-g-font-weight-4);
  line-height: var(--slds-g-font-line-height-4);
  color: var(--slds-g-color-on-surface-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// Navigation Menu Sections wrapper
.NavigationMenuSections {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
}

// Navigation Menu Section (collapsible data-driven section)
.NavigationMenuSection {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: var(--slds-g-spacing-2) 0;
  gap: var(--slds-g-spacing-2);

  & + & {
    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  }
}

.NavigationMenuSection__header {
  display: flex;
  padding: var(--slds-g-spacing-3) var(--slds-g-spacing-5) var(--slds-g-spacing-3) var(--slds-g-spacing-5);
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
}

.NavigationMenuSection__title {
  font-family: var(--slds-g-font-family);
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--slds-g-font-scale-2);
  font-style: normal;
  font-weight: var(--slds-g-font-weight-4);
  line-height: var(--slds-g-font-line-height-4);
  color: var(--slds-g-color-on-surface-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  // Phone: placeholder-grey header title (Figma #747474 -> nearest SLDS placeholder token)
  @media @phone {
    color: var(--slds-g-color-on-surface-1);
  }
}

.NavigationMenuSection__chevron {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  flex-shrink: 0;
  background-color: var(--slds-g-color-accent-1);

  // Phone: smaller 12px chevron, near-black fill (darkest semantic SLDS token)
  @media @phone {
    width: var(--slds-g-sizing-4);
    height: var(--slds-g-sizing-4);
    background-color: var(--slds-g-color-on-surface-2);
  }
}

.NavigationMenuSection__items {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.NavigationMenuSectionItem {
  display: flex;
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-5) var(--slds-g-spacing-2) var(--slds-g-spacing-6);
  align-items: center;
  gap: var(--slds-g-spacing-4);
  align-self: stretch;
  border-radius: var(--slds-g-radius-border-2);
  color: var(--slds-g-color-on-surface-2);
}

.NavigationMenuSectionItem__image {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  flex-shrink: 0;
  border-radius: var(--slds-g-radius-border-1);
  overflow: hidden;
}

.NavigationMenuSectionItem__label {
  font-family: var(--slds-g-font-family);
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--slds-g-font-scale-2);
  font-style: normal;
  font-weight: var(--slds-g-font-weight-4);
  line-height: var(--slds-g-font-line-height-4);
  color: var(--slds-g-color-on-surface-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}