/*
 * Component: Layout
 *
 * App shell, content areas, and page headers.
 * Sidebar-based layout replacing the old bottom nav.
 */

/* ============================================================================
   APP BACKGROUND - Fixed layer behind app-content
   Not a child of app-content, so it's never affected by the zoom-out transform.
   html background (--card-bg-pure on desktop with sidebar) shows in the sidebar
   strip, giving Safari's window chrome the right color to sample.
   ============================================================================ */

.app-bg {
  position: fixed;
  inset: 0;
  left: var(--sidebar-width);
  background: var(--bg);
  z-index: -1;
}

.app-bg--full {
  left: 0;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .app-bg {
    left: 0;
  }
}

/* ============================================================================
   APP CONTENT - Main content area (right of sidebar)
   ============================================================================ */

.app-content {
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  transition: transform var(--transition-standard), border-radius var(--transition-standard);
  scrollbar-gutter: stable;
}

/* Full width when no sidebar (auth pages, welcome) */
.app-content--full {
  margin-left: 0;
}

/* Mobile: no left margin, confined scroll container, account for bottom nav */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .app-content {
    margin-left: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    scrollbar-width: none;
    padding-bottom: calc(var(--nav-height-mobile) + var(--safe-inset-bottom));
  }

  .app-content::-webkit-scrollbar {
    display: none;
  }

  .app-content--full {
    padding-bottom: 0;
  }
}

/* ============================================================================
   CONTENT MAIN - Page content container
   ============================================================================ */

.content-main {
  flex: 1;
  padding: var(--space-xl);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* Narrow variant - forms and focused pages */
.content-main--narrow {
  max-width: 640px;
  margin: 0 auto;
}

/* Extra narrow - auth pages */
.content-main--auth {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 52px);
}

/* Auth pages (no sidebar) - centered layout */
.app-content--full .content-main--auth {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

/* Mobile auth pages: use svh so the visible viewport is accurate (100vh includes browser chrome on iOS) */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .app-content--full .content-main--auth {
    min-height: 100svh;
    padding: var(--space-lg) var(--space-md);
  }
}

/* Mobile content padding */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .content-main {
    padding: var(--space-sm);
  }

  /* Account for the mobile topbar height */
  .content-main--safe-top {
    padding-top: calc(var(--topbar-height) + var(--space-md) + var(--safe-inset-top));
  }
}

/* ============================================================================
   PAGE HEADER - Title + subtitle inside content-main
   ============================================================================ */

.page-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* When the header is too narrow to show button labels, collapse to icon-only circles */
@container (max-width: 800px) {
  .page-header-actions .btn-text {
    display: none;
  }

  .page-header-actions .btn {
    width: 36px;
    height: 36px;
    min-block-size: unset;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    flex-shrink: 0;
  }
}

.player-header-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.player-header-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.player-header-avatar .player-photo,
.player-header-avatar .player-photo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Mobile: topbar handles title + actions, hide the orphaned subtitle */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .page-subtitle {
    display: none;
  }
}

/* ============================================================================
   PAGE HEADER ARCHETYPES — Visual Playbook
   ============================================================================ */

/* ── Scoreboard header — dark band, big numerals, status counts ── */
.page-header--scoreboard {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-md);
}

.page-header--scoreboard .page-header-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  opacity: 0.55;
  font-weight: 700;
  text-transform: uppercase;
}

.page-header--scoreboard .page-header-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
  margin: 2px 0 0;
}

.page-header--scoreboard .page-header-spacer {
  flex: 1;
}

.scoreboard-stat {
  text-align: center;
  flex-shrink: 0;
}

.scoreboard-stat-value {
  font-size: var(--text-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.scoreboard-stat-label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
}

.scoreboard-stat--ok .scoreboard-stat-value { color: var(--tint-roster); }
.scoreboard-stat--bad .scoreboard-stat-value { color: var(--tint-today); }
.scoreboard-stat--warn .scoreboard-stat-value { color: var(--tint-training); }

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .page-header--scoreboard {
    gap: var(--space-sm);
    padding-inline: var(--space-md);
  }

  .scoreboard-stat-value {
    font-size: var(--text-lg);
  }

  .page-header--scoreboard .page-header-title {
    font-size: var(--text-xl);
  }
}

/* ── Urgent header — warm gradient wash, time-bound copy ── */
.page-header--urgent {
  background: color-mix(in oklch, var(--tint-today, oklch(58% 0.18 29)), transparent 92%);
  border: 1px solid color-mix(in oklch, var(--tint-today, oklch(58% 0.18 29)), transparent 82%);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-md);
}

.page-header--urgent .page-header-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--tint-today);
  text-transform: uppercase;
}

.page-header--urgent .page-header-title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 2px 0 0;
}

.page-header--urgent .urgent-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--tint-today);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-header--urgent .urgent-icon svg {
  width: 20px;
  height: 20px;
  fill: white;
}

/* ── Quiet header — thin tint top-border + eyebrow + title ── */
.page-header--quiet {
  border-top: 3px solid var(--page-tint, var(--color-accent));
  padding: var(--space-md) 0 var(--space-sm);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.page-header--quiet .page-header-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--page-tint, var(--color-accent));
  text-transform: uppercase;
}

.page-header--quiet .page-header-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 2px 0 0;
}

.page-header--quiet .page-header-spacer { flex: 1; }

/* ── Hero header — identity-first: avatar + name + key stats + CTA ── */
.page-header--hero {
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  background: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-md);
}

.page-header-hero-identity {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.player-header-hero-identity {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

.player-header-top-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.player-header-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.page-header--hero .page-header-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-lighter);
  font-weight: 700;
  text-transform: uppercase;
}

.page-header--hero .page-header-title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 2px 0 0;
}

.page-header-hero-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stat-value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .page-header--hero {
    padding-inline: var(--space-md);
  }
}

/* ── Form-bar header — back-arrow + breadcrumb + title ── */
.page-header--form-bar {
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.page-header--form-bar .page-header-breadcrumb {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-lighter);
}

.page-header--form-bar .page-header-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

.page-header--form-bar .page-header-spacer { flex: 1; }


/* Generic spacer — pushes trailing actions to the end of flex rows */
.page-header-spacer { flex: 1; min-width: 0; }

/* ── Page tint — set --page-tint on the page wrapper ── */
.page-tint--roster    { --page-tint: var(--tint-roster); }
.page-tint--today     { --page-tint: oklch(52% 0.12 220); --tint-today: oklch(52% 0.12 220); }
.page-tint--profile   { --page-tint: var(--tint-profile); }
.page-tint--history   { --page-tint: var(--tint-history); }
.page-tint--training  { --page-tint: var(--tint-training); }
.page-tint--dashboard      { --page-tint: var(--tint-dashboard); }
.page-tint--announcements  { --page-tint: var(--tint-announcements); }

/* ── Hoist page tint to body so sidebar + bottom nav inherit it ── */
body:has(.page-tint--roster)         { --page-tint: var(--tint-roster); }
body:has(.page-tint--today)          { --page-tint: oklch(52% 0.12 220); }
body:has(.page-tint--profile)        { --page-tint: var(--tint-profile); }
body:has(.page-tint--history)        { --page-tint: var(--tint-history); }
body:has(.page-tint--training)       { --page-tint: var(--tint-training); }
body:has(.page-tint--dashboard)      { --page-tint: var(--tint-dashboard); }
body:has(.page-tint--announcements)  { --page-tint: var(--tint-announcements); }

/* ============================================================================
   MOBILE LANDSCAPE - Adjustments for phones rotated to landscape
   ============================================================================ */

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  /* Respect side safe areas (notch shifts to left/right in landscape) */
  .app-content {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Topbar is 44px in landscape (no top safe-area-inset), adjust top clearance */
  .content-main--safe-top {
    padding-top: calc(44px + var(--space-md));
  }
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text);
  margin-block-end: var(--space-sm);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
}

.page-header .page-title {
  margin-block-end: 0;
  text-align: left;
}

.page-subtitle {
  color: var(--text-light);
  font-size: var(--text-base);
  max-inline-size: 60ch;
}

.page-header:has(+ .page-subtitle) {
  margin-block-end: var(--space-xs);
}

.page-header+.page-subtitle {
  margin-block-end: var(--space-lg);
}

.page-intro {
  color: var(--text-light);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* ============================================================================
   PROSE WIDTHS
   ============================================================================ */

.prose {
  max-inline-size: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

.full-width {
  max-inline-size: none;
}