/*
 * The Glacier top bar: 56px, white, hamburger + PTAG logo + divider + app
 * name on the left, actions on the right, and the 2px PTAG-green accent line
 * immediately below it.
 *
 * The accent line is not decoration -- Glacier calls it the brand signature
 * that makes a screen recognisable as a PTAG app across FM, the micro apps and
 * this one. It is part of this block rather than a free-floating rule so it
 * cannot be dropped by accident when the header changes.
 */

.ptag-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-4);
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}

.ptag-accent-line {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-header);
  height: var(--accent-line-height);
  background: var(--ptag-green);
  flex-shrink: 0;
}

/* --- left zone ----------------------------------------------------------- */

.ptag-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ptag-header__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ptag-header__brand:hover {
  text-decoration: none;
}

/* Height, never width: the mark is 250x77 and must not be stretched (Glacier
   logo rule). Glacier caps it at 32px; 22px is what actually sits right in a
   56px bar, because this mark is all cap-height -- there are no descenders to
   pay for, so a nominally smaller figure reads the same size as a 32px logo
   that has them. */
.ptag-header__logo {
  height: 22px;
  width: auto;
  display: block;
}

.ptag-header__divider {
  width: 1px;
  height: 20px;
  margin: 0 var(--space-3);
  background: var(--border-primary);
  flex-shrink: 0;
}

.ptag-header__app-name {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- right zone ---------------------------------------------------------- */

.ptag-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ptag-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ptag-header__action:hover {
  background: var(--surface-tertiary);
  color: var(--text-primary);
  text-decoration: none;
}

.ptag-header__action.is-active {
  color: var(--ptag-blue);
}

/* The hamburger only earns its place while the rail can be hidden. Above
   1280px the rail is expanded and the rail's own footer chevron collapses it,
   so a second control for the same thing would be noise. */
@media (min-width: 1280px) {
  .ptag-header__menu-btn {
    display: none;
  }
}

/* --- theme toggle ---------------------------------------------------------
   One button cycling System -> Light -> Dark. All three icons are in the
   markup and CSS shows the one matching `data-preference`, so switching theme
   costs no request and no reflow beyond the swap.

   The server renders `data-preference="system"`, which is also the default the
   Stimulus controller resolves to, so the button is never blank before the
   controller connects. */

.ptag-theme-toggle__icon {
  display: none;
}

.ptag-theme-toggle[data-preference="system"] .ptag-theme-toggle__icon--system,
.ptag-theme-toggle[data-preference="light"] .ptag-theme-toggle__icon--light,
.ptag-theme-toggle[data-preference="dark"] .ptag-theme-toggle__icon--dark {
  display: block;
}

/* --- account cluster ------------------------------------------------------
   Glacier's right zone ends in a user avatar with a dropdown. A dropdown for
   two items (account, sign out) is more chrome than it is worth here, so the
   avatar is rendered beside them with the address as its tooltip. */

.ptag-header__account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-primary);
}

.ptag-header__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--fill-accent);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

.ptag-header__email {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-tertiary);
  font-size: var(--text-caption);
}

.ptag-header__signout-form {
  display: inline-flex;
  margin: 0;
}

@media (max-width: 767px) {
  .ptag-header__email,
  .ptag-header__app-name,
  .ptag-header__divider {
    display: none;
  }

  .ptag-header__account {
    margin-left: 0;
    padding-left: var(--space-2);
  }
}