/* ==========================================================================
   Header Component - Unified Header Styles
   모든 페이지 헤더에 사용되는 통합 컴포넌트

   Variants:
   - .header--tab: 메인 탭 페이지 (Home, Together, Thoughts)
   - .header--page: 서브 페이지 (기본)
   - .header--form: 폼 페이지 (생성/수정)

   Modifiers:
   - .header--sticky: 스크롤 시 고정
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Header (New Structure)
   - padding: 16px top/bottom (좌우는 페이지 컨테이너가 처리)
   - inner wrapper: 40px height
   - background: transparent (커버 이미지 중첩 가능)
   --------------------------------------------------------------------------- */
.header {
  padding: var(--spacing-2) 0 var(--spacing-section) 0;  /* 8px top, 16px bottom */
  margin: 0;
  background: transparent;
}

.header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-primary);
  padding-top: env(safe-area-inset-top);
  margin-top: calc(-1 * env(safe-area-inset-top));
  margin-left: calc(-1 * var(--spacing-section));
  margin-right: calc(-1 * var(--spacing-section));
  padding-left: var(--spacing-section);
  padding-right: var(--spacing-section);
}


/* Inner wrapper - actual header content area */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--btn-icon-size);  /* 40px */
  position: relative;
}

/* ---------------------------------------------------------------------------
   Header Sections (Left / Center / Right)
   --------------------------------------------------------------------------- */
.header__left {
  flex-shrink: 0;
  min-width: var(--btn-icon-size);  /* 40px - 좌우 균형 */
}

.header__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-title-subtitle);
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}

.header__center * {
  pointer-events: auto;
}

.header__right {
  flex-shrink: 0;
  min-width: var(--btn-icon-size);  /* 40px - 좌우 균형 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Title & Subtitle
   --------------------------------------------------------------------------- */
.header__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.header__title--lg {
  font-size: var(--font-size-xl);
}

.header__title--xl {
  font-size: var(--font-size-xl);
}

.header__title--2xl {
  font-size: var(--font-size-6xl);
}

.header__subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-tight);
}

.header__subtitle--xs {
  font-size: var(--font-size-xs);
  line-height: 1;
  display: block;
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Tab Header Variant
   --------------------------------------------------------------------------- */
.header--tab .header__left {
  min-width: auto;
}

/* Tab Header Avatar Button */
.header__avatar-btn {
  position: relative;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
}

/* Tab Header Center Dropdown (absolute positioned within inner) */
.header--tab .header__inner {
  position: relative;
}

.header--tab .header__center--dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: none;
}

.header__dropdown-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.header__dropdown-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.header__dropdown-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-text-primary);
}

/* Tab Header Left Title (for Together, Thoughts) */
.header--tab .header__title--left {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

/* ---------------------------------------------------------------------------
   Tab Header Icon Buttons
   --------------------------------------------------------------------------- */
.header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-primary);
  text-decoration: none;
}

.header__icon-btn svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.header__icon-btn--disabled {
  opacity: var(--opacity-hint);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Action Buttons (Text Buttons in Right Section)
   --------------------------------------------------------------------------- */
.header__action {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background: none;
  border: none;
  padding: var(--spacing-list-sm) 0;
  cursor: pointer;
  letter-spacing: var(--letter-spacing-tight);
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}

.header__action:active {
  opacity: var(--opacity-pressed);
}

.header__action--warning {
  color: var(--color-text-primary);
}

.header__action--warning:active {
  opacity: var(--opacity-pressed);
}

.header__action--danger {
  color: var(--color-danger);
}

.header__action--danger:active {
  opacity: var(--opacity-pressed);
}

/* ---------------------------------------------------------------------------
   Spacer (for balancing layout when one side is empty)
   --------------------------------------------------------------------------- */
.header__spacer {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Dropdown Wrapper (for more menu)
   --------------------------------------------------------------------------- */
.header__dropdown-wrapper {
  position: relative;
}

/* ---------------------------------------------------------------------------
   Notification Dot (for avatar)
   --------------------------------------------------------------------------- */
.header .notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  background: var(--color-fill-dark);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-primary);
}

/* ---------------------------------------------------------------------------
   Native Nav Bar — CSS-based hiding when Hotwire Native bridge is active.
   The bridge library sets data-bridge-components on <html> listing all
   registered native components. This fires before JS, so no flash.
   --------------------------------------------------------------------------- */

/* Web: pill button in header left area (e.g., "Projects" on Start tab) */
.header__web-pill-btn {
  display: none;
}

/* Web: prompt slideshow in header left area */
.header__web-prompts {
  display: none;
}

/* All web: hide tab title ONLY when pill/prompts exist in left area (matches native) */
.web-layout .header--tab .header__left:has(.header__web-pill-btn, .header__web-prompts) .header__title--left {
  display: none;
}

.web-layout .header__web-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;  /* icon-text gap (iOS imagePadding: 6pt) */
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-glass-border);
  background: var(--color-bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);  /* 15px = iOS 15pt */
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.web-layout .header__web-pill-btn:hover {
  opacity: 0.8;
}

/* Desktop web only: prompt slideshow (replaces pill on Think tab) */
@media (min-width: 768px) {
  .web-layout .header__web-prompts {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    overflow: hidden;
    position: relative;
  }

  /* Hide mobile-only pill when desktop prompts are shown */
  .web-layout .header__web-pill-btn--mobile-only {
    display: none;
  }
}

/* Web: larger page title */
.web-layout .header--page .header__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

/* Mobile web: header top spacing + bigger glass buttons
   Note: iPhone Safari with viewport-fit=cover returns env(safe-area-inset-top) > 0,
   and .header--sticky has margin-top: -env(safe-area-inset-top). So padding-top
   must include safe area to keep header content visible. */
@media (max-width: 767px) {
  .web-layout .header {
    padding-top: calc(env(safe-area-inset-top) + var(--spacing-4));
  }

  .web-layout .header__inner {
    height: 44px;  /* bigger buttons to match native */
  }

  .web-layout .header__left,
  .web-layout .header__right {
    min-width: 44px;
  }

  /* Single header button (back, close, avatar) — 44px circle with glass */
  .web-layout .header-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--color-glass-border);
    box-shadow: var(--shadow-soft);
  }

  .web-layout .header-btn svg {
    width: var(--icon-size-lg);  /* 24px */
    height: var(--icon-size-lg);
  }

  /* Dual icon pill group — matches native iOS (used across tabs + detail pages) */
  .web-layout .header-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    gap: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--color-glass-border);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .web-layout .header-btn-group > button,
  .web-layout .header-btn-group > a,
  .web-layout .header-btn-group .header__icon-btn {
    width: 48px;  /* 96px total width (2 cells) */
    height: 44px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .web-layout .header-btn-group svg {
    width: 22px;  /* iOS standard nav bar icon size */
    height: 22px;
  }

  /* Avatar button: 44x44 to match other header buttons */
  .web-layout .header__avatar-btn .avatar--md {
    width: 44px;
    height: 44px;
  }

}

/* Text action buttons (Delete, Save, Next) — match pill button style.
   Applies to both mobile web (<768px) and desktop web (≥768px) so full-page
   forms like project create get the same glass pill treatment as the
   desktop-2col detail panel. */
.web-layout .header__action {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-glass-border);
  background: var(--color-bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.web-layout .header__action--danger,
.web-layout .header__action--warning {
  color: var(--color-danger);
}

/* Hide web headers for all variants (native UINavigationBar replaces them) */
[data-bridge-components~="nav-bar"] .header--tab,
[data-bridge-components~="nav-bar"] .header--page,
[data-bridge-components~="nav-bar"] .header--form {
  display: none !important;
}

/* iOS native: gap between native nav bar and content */
[data-bridge-components~="nav-bar"] main {
  padding-top: var(--spacing-list-sm); /* 8px */
}

/* Cover image & full-viewport pages: no extra top gap (content is flush with nav bar) */
[data-bridge-components~="nav-bar"] main:has(.thread-detail),
[data-bridge-components~="nav-bar"] main:has(.post-detail),
[data-bridge-components~="nav-bar"] main:has(.project-cover) {
  padding-top: 0;
}

/* JS fallback: bridge controller adds this class on Turbo Native via user agent check */
.header--native-hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Web Layout — Tab Header Overrides
   .web-layout에서만 적용: 아이콘 버튼 → 텍스트 생성 버튼 + 검색 필드
   --------------------------------------------------------------------------- */

/* Hidden by default (iOS won't see these) */
.header__web-create-btn,
.header__web-search-bar {
  display: none;
}

/* Web layout: show web elements, hide icon button group (desktop only) */
@media (min-width: 768px) {
  .web-layout .header--tab .header-btn-group {
    display: none;
  }

  .web-layout .header__web-create-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: var(--btn-height-md);
    padding: 0 var(--spacing-4);
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-fill-dark);
    color: var(--color-text-inverse);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
  }

  .web-layout .header__web-create-btn:hover {
    opacity: 0.8;
  }

  .web-layout .header__web-create-btn svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .web-layout .header__web-search-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border-soft);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    text-decoration: none;
    transition: border-color var(--transition-fast);
  }

  .web-layout .header__web-search-bar:hover {
    border-color: var(--color-text-secondary);
  }

  .web-layout .header__web-search-bar svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex-shrink: 0;
  }
}

/* ---------------------------------------------------------------------------
   Page Transition Overlay
   --------------------------------------------------------------------------- */
.page-transition-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-primary);
  z-index: var(--z-toast);
}