/* V2 UI PageHeader Styling - Applied via PageHeaderV2 class */

.PageHeaderV2 {
  position: relative;
  z-index: 5;  /* Ensure header is above navigation overlay (z-index: 3) and menu (z-index: 4) */
  box-sizing: border-box;
  padding: 0 30px 0 26px;
  height: var(--slds-g-sizing-11); /* 64px */
  border-bottom-width: 0;
  border-bottom-style: none;  /* Reset legacy .PageHeader border-bottom-style: solid */
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: visible;  /* Allow sync indicator to overflow below */
  background: var(--slds-g-color-surface-container-1);
  box-shadow: 0 0.125em 0.1875em var(--slds-g-color-border-1);
  /* No justify-content: left/right get equal flex space so title is truly centered */

  @media @phone {
    height: @phone-page-header-height;
    padding: var(--slds-g-spacing-3) var(--slds-g-spacing-3) var(--slds-g-spacing-3) var(--slds-g-spacing-2);
  }

  /* Left and right columns get equal width so center is geometrically centered */
  .PageHeaderLeftControls {
    flex: 1 1 0%;
    min-width: 0;
    justify-content: flex-start;

    @media @phone {
      flex: 0 0 auto;
    }
  }

  /* Center container for title and sync indicator – fixed in the middle */
  .PageHeaderCenter {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 0;
    max-width: 50%;

    @media @phone {
      /* Phone: title left-aligns, center column grows to fill space */
      flex: 1 1 auto;
      align-items: flex-start;
      max-width: none;
      min-width: 0;
      margin-left: var(--slds-g-spacing-2);
      margin-right: var(--slds-g-spacing-2);
    }
  }

  .PageHeaderRightControls {
    flex: 1 1 0%;
    min-width: 0;
    justify-content: flex-end;

    @media @phone {
      /* Shrink to content so the left-aligned title absorbs the slack */
      flex: 0 0 auto;
    }

    // Right-aligned standard Dropdown uses the shared Lumina dropdown styling.
    .Dropdown {
      .LuminaDropdownPill();
    }
  }

  /* Title: single line with ellipsis */
  .PageHeaderTitleArea {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--slds-g-font-family);
    font-weight: var(--slds-g-font-weight-6);
    font-size: var(--slds-g-font-scale-4);  /* 24px */
    color: var(--slds-g-color-on-surface-3);
    
    @media @phone {
      font-size: var(--slds-g-font-scale-3);
      line-height: 28px;
      text-align: left;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  /* Left controls */
  .PageHeaderLeftControls {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    
    @media @phone {
      gap: 0;
    }
    
    /* Navigation menu button (CockpitNavButton) icon styling */
    .CockpitNavButton.ImageButton--lumina {
      .SvgIconMask {
        background-color: var(--slds-g-color-accent-1);
      }

      @media @phone {
        .ImageButton__icon {
          width: var(--slds-g-sizing-7);   /* 24px */
          height: var(--slds-g-sizing-7);
        }
      }
    }

    /* Company logo in header */
    .PageHeaderLogo {
      height: 40px;
      width: auto;
      object-fit: contain;

      @media @phone {
        /* Logo scales within the header's logo slot, preserving its intrinsic aspect ratio. */
        width: auto;
        max-height: var(--slds-g-sizing-9);
        margin-left: var(--slds-g-spacing-2);  /* 8px */
      }
    }
    
    /* Back button - specific padding to achieve 40px height with 20px icon */
    /* Targets .BackButton class instead of :first-child to future-proof against button order changes */
    .BackButton {
      padding: 0.625em 0.5em 0.625em 0;  /* 10px 8px 10px 0px - creates 40px height */
      
      @media @phone {
        padding: 0;  /* Remove padding on phone */

        &.ImageButton--lumina:not(.ImageButton--icon-only) {
          min-width: var(--slds-g-sizing-9);  /* 32px minimum, grows for text */
        }

        .ImageButton__icon {
          width: var(--slds-g-sizing-7);   /* 24px */
          height: var(--slds-g-sizing-7);
        }
      }
      
      /* Back button label styling (ImageButton) */
      .ImageButton__label {
        font-weight: var(--slds-g-font-weight-4);
      }
      
      /* Inner container with gap between icon and text (legacy) */
      > div {
        display: flex;
        align-items: center;
        gap: 0.25em;  /* 4px at 16px base = 0.25em */
        
        /* Back button text styling as per Figma (legacy) */
        > span {
          line-height: 19px;  /* 19px as per Figma */
        }
      }
      
      /* Back icon mask styling - scoped to BackButton to avoid conflicts (legacy) */
      .BackIconMask {
        display: inline-block;
        vertical-align: middle;
        height: var(--slds-g-sizing-6);  /* 20px as per Figma */
        width: var(--slds-g-sizing-6);   /* 20px as per Figma */
        
        @media @phone {
          height: var(--slds-g-sizing-7);  /* 24px for phone */
          width: var(--slds-g-sizing-7);   /* 24px for phone */
        }
      }
    }
  }

  /* Lumina: all ImageButtons use font-scale-2 and font-weight-6 */
  .ImageButton--lumina {
    font-size: var(--slds-g-font-scale-2);
    font-weight: var(--slds-g-font-weight-6);
  }

  /* Right controls */
  .PageHeaderRightControls {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--slds-g-spacing-2);  /* 8px */
    margin: 0;

    .PageHeaderMenuItem {
      font-size: var(--slds-g-font-scale-1); /* 14px */
    }

    /* Agentforce button icon styling */
    .AgentforceButton.ImageButton--lumina {
      .SvgIconMask {
        background-color: var(--slds-g-color-accent-1);
        width: 38px; /* Custom size - no exact SLDS token match */
        height: 38px;
      }
    }

    /* Options button icon styling */
    .PageHeaderOptionsButton.ImageButton--lumina {
      .ImageButton__icon {
        width: 18px;
        height: 18px;
      }
    }

    @media @phone {
      gap: var(--slds-g-spacing-3);

      button {
        margin-left: 0;
      }

      .ImageButton--lumina.ImageButton--icon-only {
        flex-shrink: 0;
      }

      .AgentforceButton.ImageButton--lumina {
        .SvgIconMask {
          width: var(--slds-g-sizing-9);
          height: var(--slds-g-sizing-9);
        }
      }
    }
  }

  /* Sync indicator - shown when replication is in progress */
  .PageHeaderSyncIndicator {
    height: 0.4rem;
    
    img {
      height: 0.4rem;
      width: auto;
    }
    
    &.Inactive {
      visibility: hidden;
    }

    @media @phone {
      /* Title is left-aligned, so center on the header (nav) instead of the title flow. */
      position: absolute;
      left: 50%;
      bottom: var(--slds-g-spacing-1);  /* 4px above the header's bottom edge */
      transform: translateX(-50%);

      /* Block removes the inline baseline descender that drops the art below the box. */
      img {
        display: block;
      }
    }
  }

  /* Sync button spinning animation during replication */
  .SyncButton--replicating {
    .ImageButton__icon {
      animation: spin 2s linear infinite;
    }
  }

  /* Flyout-specific PageHeader styling */
  &--flyout {
    height: unset;
    padding: var(--slds-g-spacing-4) var(--slds-g-spacing-5);
    align-self: stretch;

    border-radius: var(--slds-g-radius-border-4) var(--slds-g-radius-border-4) 0 0;
    border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    box-shadow: none;

    @media @phone {
      padding: var(--slds-g-spacing-4) var(--slds-g-spacing-3);
      justify-content: space-between;

      .PageHeaderCenter {
        flex: 0 0 auto;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
      }

      .PageHeaderLeftControls,
      .PageHeaderRightControls {
        flex: 1 1 0%;
      }

      .PageHeaderTitleArea {
        font-size: var(--slds-g-font-scale-3);
        font-weight: var(--slds-g-font-weight-6);
        line-height: var(--slds-g-font-line-height-2);
        color: var(--slds-g-color-on-surface-2);
      }

      .ImageButton--lumina {
        line-height: var(--slds-g-font-line-height-3);
        height: var(--slds-g-sizing-9);
        padding: 0;
        font-size: var(--slds-g-font-scale-2);
        font-weight: var(--slds-g-font-weight-6);
      }

      .PageHeaderLeftControls .ImageButton--lumina {
        font-weight: var(--slds-g-font-weight-4);
      }
    }
  }

  &--withGuidedFlow {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 124px;  /* 64 (main row) + 44 (steps) + 16 (bottom spacing) */
    padding-bottom: 0;
  }

  &--withGuidedFlow&--withFilterTabs {
    height: 164px;  /* 64 (main row) + 44 (steps) + 16 (gap) + 40 (filter tabs) */
    padding-bottom: 0;
  }

  &--withFilterTabs {
    padding-bottom: 0;
  }

  // Phone-only: PageHeader's <Dropdown> child renders in its own row below the
  // main header bar.
  &--withPhoneDropdown {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    padding-bottom: var(--slds-g-spacing-3);
  }

  .PageHeaderDropdownRow {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-top: var(--slds-g-spacing-2);

    .Dropdown {
      .LuminaDropdownPill();
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
    }

    .Dropdown.Dropdown--lumina:not(.Dropdown--phoneLabel) .IconContainer--phone {
      flex: 1 1 auto;
      width: 100%;
      justify-content: space-between;
      max-width: none;
    }
  }

  .PageHeaderRow {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 var(--slds-g-sizing-11); /* 64px */
    min-height: var(--slds-g-sizing-11); /* 64px */
    padding: 0;
  }

  .PageHeaderGuidedFlow {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 44px;
    position: relative;
    overflow: hidden;
  }

  .PageHeaderFilterTabs {
    flex: 0 0 40px;
    align-self: flex-start; /* width = fit-content: no trailing space, no pseudo-element needed */
    max-width: 100%;        /* still scroll when tabs overflow the nav width */
    display: flex;
    align-items: stretch;
    margin-top: var(--slds-g-spacing-4); /* 16px gap between GuidedFlow and tab bar */

    @media @phone {
      margin-top: var(--slds-g-spacing-1); /* 4px on phone */
    }

    /* ImageSelector must fill the tab row so XScrollable can handle overflow when tabs don't fit */
    .ImageSelector {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .ImageButton--tab-selected {
      border-bottom: none;
      box-shadow: inset 0 -3px 0 0 var(--slds-g-color-border-accent-2);
    }
    .ImageButton--tab-unselected {
      border-bottom: none;
      box-shadow: inset 0 -2px 0 0 var(--slds-g-color-border-1);
    }

    /* Force tab buttons to fill the full 40px row — height doesn't propagate through XScrollable */
    .ImageSelectorItem--lumina {
      height: 40px;
    }
  }
}

/* GuidedFlow: horizontal step bar (Lumina) – compact, left-aligned, horizontally scrollable */
.GuidedFlow--lumina {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  height: 44px;

  /* Scroll indicators — circular chevron buttons flanking the scroll container */
  .GuidedFlow__scrollIndicator {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--slds-g-spacing-7); /* 40px total (38px + 1px border each side) */
    height: var(--slds-g-spacing-7);
    &:first-child {
      margin-right: var(--slds-g-spacing-2); /* 8px gap between left indicator and steps */
    }

    &:last-child {
      margin-left: var(--slds-g-spacing-2); /* 8px gap between right indicator and steps */
    }
    border-radius: var(--slds-g-radius-border-circle);
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
    background: var(--slds-g-color-surface-container-1);
    cursor: pointer;
  }

  /* Once overflow exists both indicator slots stay in layout — no layout shift when
     toggling left/right. Inactive direction is invisible but still occupies its width. */
  &.GuidedFlow--hasOverflow {
    .GuidedFlow__scrollIndicator {
      display: flex;
      visibility: hidden;
      pointer-events: none;
    }
    .GuidedFlow__scrollIndicator--visible {
      visibility: visible;
      pointer-events: auto;
    }
  }

  .GuidedFlow__scrollIndicatorIcon {
    width: var(--slds-g-sizing-6); /* 20px */
    height: var(--slds-g-sizing-6);
    background-color: var(--slds-g-color-on-surface-1);
  }

  /* Inner scroll container — holds the steps, handles horizontal scrolling */
  .GuidedFlow__scrollContainer {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--slds-g-spacing-5); /* 24px */
    align-items: center;
    height: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar across browsers while keeping scroll functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .GuidedFlow__step {
    flex: 0 0 200px;
    width: 200px;
    height: 44px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--slds-g-spacing-2); /* 8px */
    padding: 0 var(--slds-g-spacing-4); /* 0 16px */
    border-radius: var(--slds-g-radius-border-2); /* 8px */
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
    background: var(--slds-g-color-surface-container-1);
    color: var(--slds-g-color-on-surface-3);
    font-family: var(--slds-g-font-family);
    font-size: var(--slds-g-font-scale-2); /* 16px */
    font-weight: var(--slds-g-font-weight-4); /* 400 — regular; active step overrides to weight-5 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .GuidedFlow__stepIcon {
    flex-shrink: 0;
    width: var(--slds-g-sizing-6); /* 20px */
    height: var(--slds-g-sizing-6);
    object-fit: contain;
  }

  /* SvgIconMask needs background-color for the mask to be visible; use same color as step text */
  .GuidedFlow__step .SvgIconMask.GuidedFlow__stepIcon {
    background-color: var(--slds-g-color-on-surface-3);
  }

  .GuidedFlow__step--active .SvgIconMask.GuidedFlow__stepIcon {
    background-color: var(--slds-g-color-accent-2);
  }

  .GuidedFlow__stepLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .GuidedFlow__step--active {
    background: var(--slds-g-color-brand-base-95);
    border-color: var(--slds-g-color-border-accent-1);
    color: var(--slds-g-color-accent-2);
    font-weight: var(--slds-g-font-weight-6); /* 600 */
  }

}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}