.HeaderLine {
  display: flex;
  padding: 12px 8px 12px 16px;
  @media @phone {
     padding: 4px 4px 4px 12px;
  }
  display: flex;
  flex-wrap: wrap;
  flex: none;
}
.HeaderLine {
  .SearchField {
    border-radius: 32px;
    flex: 1;
    min-width: 180px;
    height: 32px;
    margin-bottom: 4px;
    margin-top: 4px;
    @media @phone {
      min-width: 136px;
    }
  }
  .Dropdown {
    margin-bottom: 4px;
    margin-top: 4px;

  }
  .SearchFieldInput {
    border: transparent;
  }
  > .ImageButton {
    border-radius: 32px;
    border-style: solid;
    border-width: 2px;
    max-width: 100%;
    //Theming - background: @colorPorcelain;
    //Theming - color: @colorComet;
    width: auto;
    min-height: 32px; //min. border radius height
    margin-bottom: 4px;
    margin-top: 4px;
    @media @tablet {
      padding: 0;
    }
    img {
      width: 16px;
      height: 16px;
    }
  }
  > div,
  button {
    margin-right: 8px;
    margin-top: 0px;
    @media @phone {
      // margin-top: 8px;
      margin-right: 8px;
    }
  }
  .AdvancedSearchButton {
    margin-top: 0;
  }
  .SearchIcon {
    line-height: 1.8em;
  }
  .SearchFieldInput {
    height: 1.8em;
  }
  .input.CancelButtonSearch {
    height: 0.5em;
  }
}

// Lumina HeaderLine
.HeaderLine.HeaderLine--lumina {
  display: flex;
  // Auto height with a 40px floor: on tablet the bar reflows onto multiple rows via intrinsic
  // flex wrapping when the label + actions don't fit one line (was a fixed height + nowrap).
  min-height: var(--slds-g-spacing-7);
  padding: 0;
  align-items: center;
  align-self: stretch;
  flex-wrap: wrap;
  // Vertical spacing between wrapped rows (horizontal gaps stay on the action groups).
  row-gap: var(--slds-g-spacing-2);
  // Horizontal spacing for the top-level label↔actions seam. Longhand (not the `gap`
  // shorthand) so the existing row-gap is preserved. Only the label + actions are direct
  // children here, so this is inert for the no-label layout (single child) and the phone
  // rule below re-sets both axes via its own `gap` shorthand.
  column-gap: var(--slds-g-spacing-4);
  background: var(--slds-g-color-transparent);


  // No-label layout: stretch actions to full width (gap now inherited from the base
  // .HeaderLineActions rule — 16px tablet / 12px phone — so the override is dropped).
  &:not(:has(.HeaderLineLabel)) {
    .HeaderLineActions {
      flex: 1;
    }
  }

  .HeaderLineLabel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    // When the label + action area can't share a row the actions wrap below; the label then
    // takes the full first row. Let it shrink (min-width:0) but not force a wrap on its own.
    flex: 0 1 auto;
    min-width: 0;
    color: var(--slds-g-color-neutral-base-20);
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;
    font-family: var(--slds-g-font-family-base);
    font-size: var(--slds-g-font-scale-3);
    font-style: normal;
    font-weight: var(--slds-g-font-weight-6);
    line-height: var(--slds-g-font-line-height-2);
  }

  .HeaderLineActions {
    display: flex;
    align-items: center;
    gap: var(--slds-g-spacing-4);
    min-width: 0;
    // Grow to claim the row so __right's margin-left:auto keeps pushing right; when the label
    // + actions can't share a row the whole action area wraps onto the next row (parent wraps).
    flex: 1 1 auto;
    // Let left + right groups wrap relative to each other before either group wraps internally.
    flex-wrap: wrap;
    row-gap: var(--slds-g-spacing-2);
    // Left-align (default justify-content: flex-start): the main/left group packs its controls
    // and any wrapped rows from the LEFT, so they read left-to-right. Right-aligned controls live
    // in &__right, which still hugs the end via margin-left:auto + its own flex-end.

    // Right-aligned group (push to end; menu button + right-aligned children).
    // Line policy: shares the row if it fits (margin-left:auto), else moves intact to the next
    // row, else wraps its own controls internally — its rows stay right-aligned and the
    // generated options button remains last in DOM order.
    &__right {
      display: flex;
      align-items: center;
      gap: var(--slds-g-spacing-4);
      margin-left: auto;
      flex-wrap: wrap;
      row-gap: var(--slds-g-spacing-2);
      justify-content: flex-end;
    }
  }

  > div,
  button {
    margin-right: 0;
  }

  .SearchField {
    margin: 0;
  }

  .SearchFieldInput {
    height: auto;
  }

  .SearchFieldLumina {
    padding: 0;
    height: var(--slds-g-spacing-7);

    .SearchFieldInputWrapper {
      flex: 1;
      width: 100%;
      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);

      .SearchIcon.SvgIconMask {
        width: 18px;
        height: 18px;
        background-color: var(--slds-g-color-neutral-base-50) !important;
      }

      .CancelButtonSearch .SvgIconMask {
        width: 18px;
        height: 18px;
      }

      button.CancelButtonSearch {
        width: 18px;
        height: 18px;
        padding: 0;
        border: none;
        background: none;
      }
    }

    .AdvancedSearchButton.Invisible {
      display: none !important;
    }
  }

  .Dropdown {
    .LuminaDropdownPill();
  }

  // Daily (self-navigating agenda) toolbar only: the All-Visits filter pill hugs its content
  // (fit-content) instead of the shared 200px min-width. Scoped via :has() to a HeaderLine containing
  // the self-navigating (daily) CalendarNavigation so the weekly toolbar's pill keeps the shared sizing.
  &:has(.CalendarNavigation--agenda) {
    .Dropdown {
      min-width: auto;
      width: fit-content;
    }
  }

  // Direct HeaderLine action buttons: left-group children and right-group children
  // (.HeaderLineActions__right > .ImageButton, incl. the generated MenuItems trigger).
  // Child combinators keep this off ImageButtons nested inside a ButtonGroup.
  .HeaderLineActions > .ImageButton,
  .HeaderLineActions > .HeaderLineActions__right > .ImageButton {
    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);
    display: flex;
    height: var(--slds-g-spacing-7);
    padding: 0 var(--slds-g-spacing-4);
    justify-content: center;
    align-items: center;
    gap: var(--slds-g-spacing-2);
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;

    .ImageButton__icon,
    .SvgIconMask {
      width: @imagebutton-phone-icon-size;
      height: @imagebutton-phone-icon-size;
      aspect-ratio: 1/1;
      background-color: var(--slds-g-color-accent-2);
    }

    .ImageButton__label {
      color: var(--slds-g-color-accent-2);
      text-align: center;
      font-feature-settings: 'liga' off, 'clig' off;
      font-family: var(--slds-g-font-family-base);
      font-size: var(--slds-g-font-scale-1);
      font-style: normal;
      font-weight: var(--slds-g-font-weight-6);
      line-height: var(--slds-g-font-line-height-3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.Disabled {
      border-color: var(--slds-g-color-border-disabled-1);
      background: var(--slds-g-color-disabled-container-1);

      .ImageButton__icon,
      .SvgIconMask {
        background-color: var(--slds-g-color-disabled-1);
      }

      .ImageButton__label {
        color: var(--slds-g-color-on-disabled-1);
      }
    }
  }

  // Phone: allow controls to wrap to multiple rows when they don't fit
  @media @phone {
    height: auto;
    min-height: var(--slds-g-spacing-7);
    flex-wrap: wrap;
    gap: var(--slds-g-spacing-3);
    padding: var(--slds-g-spacing-3) var(--slds-g-spacing-3) var(--slds-g-spacing-0) var(--slds-g-spacing-3);

    .HeaderLineActions {
      flex-wrap: wrap;
      align-content: flex-start;
      gap: var(--slds-g-spacing-3);

      // Net-new phone override: match the base __right 16px down to 12px on phone
      // (base rule has no phone breakpoint, so it would otherwise stay 16px here).
      &__right {
        gap: var(--slds-g-spacing-3);
      }
    }

    // Header action buttons for phone - 32px visual, decorative (non-interactive) border color.
    // Covers both left-group and right-group direct ImageButtons (mirrors the base rule above).
    .HeaderLineActions > .ImageButton,
    .HeaderLineActions > .HeaderLineActions__right > .ImageButton {
      height: var(--slds-g-sizing-9); // 32px
      border-color: var(--slds-g-color-border-1); // phone uses border-1 (was border-2)
      // Let the 40px tap overlay (ImageButton ::after) bleed past the 32px box instead of
      // being clipped. Label truncation still works via .ImageButton__label's own overflow.
      overflow: visible;
    }
  }

  // Portrait mode: icon-only for dropdowns in HeaderLine
  // ImageButton portrait hiding is now handled by ImageButton--hidePortraitLabel in imagebuttonV2.less
  @media @tablet {
    .fw-portrait & {
      .Dropdown:not(.Dropdown--portraitLabel) .DropdownText {
        display: none;
      }
      .Dropdown:not(.Dropdown--portraitLabel) {
        flex: 0 0 auto;
        width: auto;
        min-width: unset !important;
        padding: 0 var(--slds-g-spacing-3);

        .Container {
          width: auto;
        }
      }
    }
  }
}