/*
  MFP Design System — Page Header
  Production CSS for page header component.
  Import tokens.css before this file.
*/

/* ======================================================================
   PAGE HEADER — Figma node 760:611
   ====================================================================== */
.page-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 107px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-light-grey);
  padding: 12px 24px;
}

.page-header__back {
  flex-shrink: 0;
}

.page-header__back--legacy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: var(--color-dark-blue);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-white);
}

.page-header__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-header__breadcrumb {
  font: var(--type-body-medium);
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.page-header__breadcrumb a,
.page-header__breadcrumb span:not(.page-header__breadcrumb-sep) {
  white-space: nowrap;
}

.page-header__breadcrumb a {
  color: var(--color-action);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.page-header__breadcrumb-sep {
  margin: 0 6px;
  color: var(--color-darkest-grey);
}

.page-header__name h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header__actions {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  flex-shrink: 0;
}

/* ======================================================================
   BELOW DESKTOP — @media (max-width: 1023px)
   Below lg breakpoint (1024px): individual action buttons collapse into a
   single "Menu" ghost button with a two-level flyout.
   ====================================================================== */

/* Desktop actions wrapper — hidden at tablet */
.page-header__actions-desktop {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

/* Tablet menu trigger — hidden at desktop, shown at tablet */
.page-header__menu-trigger {
  position: relative;
  display: none;
}

/* Level 1 dropdown */
.page-header__l1-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  display: none;
  min-width: 160px;
}

.page-header__l1-menu.is-open {
  display: block;
}

/* Level 1 items that carry a Level 2 flyout */
.page-header__l1-item {
  position: relative;
}

/* Level 2 flyout — appears to the left of Level 1 */
.page-header__l2-menu {
  position: absolute;
  right: calc(100% + 4px);
  top: 0;
  z-index: 201;
  display: none;
  min-width: 200px;
}

.page-header__l2-menu.is-open {
  display: block;
}

@media (max-width: 1023px) {
  .page-header__actions-desktop { display: none; }
  .page-header__menu-trigger    { display: block; }
  .page-header {
    height: 75px;
    padding: 16px;
  }
}

.page-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--color-dark-blue);
  color: var(--color-white);
  font: var(--type-nav-primary);
  letter-spacing: 0.25px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}