/* ==========================================================================
   Panel Header Component
   Standardized header for all sliding panels (Thing, User, Add Rec, etc.)
   ========================================================================== */

.panel-header {
  position: relative;
  min-height: var(--height-panel-header);
  display: flex;
  align-items: center;
  justify-content: center;
  border-block-end: 1px solid var(--np-color-inverse-surface);
  background-color: inherit; /* Matches panel background */
  flex-shrink: 0;
}

.panel-header--no-border {
  border-block-end: none;
}

/*
 * Content Container
 * Wraps title or custom HTML, handles vertical stacking
 */
.panel-header__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 44px; /* Clears icon touch targets */
}

/*
 * Title
 * Centered text styling (used when content is plain string)
 */
.panel-header__title {
  font-family: var(--text-panel-header-family);
  font-size: var(--text-panel-header-size);
  font-weight: var(--text-panel-header-weight);
  line-height: var(--text-panel-header-line-height);
  color: var(--np-color-on-surface);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Avatar in header
 * Used when header has custom content with avatar above title
 */
.panel-header__avatar {
  margin-block-end: var(--space-1);
}

/*
 * Icon in header
 * Used when header has custom content with icon above title
 */
.panel-header__icon {
  margin-block-start: var(--space-4);
  display: flex;
}

.panel-header__icon .material-symbols-outlined {
  font-size: 40px;
}

/*
 * Action Button Container
 * Holds a single icon button
 * Min-width 44px for touch target
 */
.panel-header__action {
  min-width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--np-color-on-surface);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none; /* For <a> tags */
}

.panel-header__action:hover {
  color: var(--np-color-on-surface-variant);
}

.panel-header__action[hidden] {
  display: none;
}

.panel-header__action .material-symbols-outlined {
  font-size: var(--size-icon-md);
}

/*
 * Action Buttons Group
 * Absolutely positioned at edges, fixed height to stay at top when header grows
 */
.panel-header__group {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  height: var(--height-panel-header); /* Fixed height, stays at top */
}

.panel-header__group--start {
  inset-inline-start: 0;
}

.panel-header__group--end {
  inset-inline-end: 0;
}

/*
 * Responsive Visibility Utility Classes
 * Used by panel-header.php to show/hide actions per viewport
 */

/* Visible on desktop only */
.panel-header__action--desktop-only {
  display: flex;
}

/* Visible on mobile only */
.panel-header__action--mobile-only {
  display: none;
}

@media (max-width: 480px) {
  .panel-header__content {
    padding-inline: 36px;
  }

  .panel-header__action {
    min-width: 36px;
  }

  .panel-header__action--desktop-only {
    display: none;
  }

  .panel-header__action--mobile-only {
    display: flex;
  }
}