/*
 * Component: Layout
 *
 * App shell, content header, content areas, and breadcrumbs.
 * 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) {
  .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) {
  .app-content {
    margin-left: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: none;
    padding-bottom: calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================================
   CONTENT HEADER - Breadcrumbs + Page actions bar
   ============================================================================ */

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg-pure);
  flex-shrink: 0;
  gap: var(--space-md);
  height: 4.75rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.content-header-left {
  flex: 1;
  min-width: 0;
}

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

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

.breadcrumbs {
  display: flex;
  align-items: center;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "/";
  color: var(--text-lighter);
  margin-right: var(--space-xs);
}

.breadcrumb-link {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--accent);
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* ============================================================================
   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);
}

/* Full width - no max-width constraint */
.content-main--full {
  max-width: none;
}

/* Auth pages (no sidebar) - centered layout */
.app-content--full .content-main {
  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 content padding */
@media (max-width: 767px) {
  .content-main {
    padding: var(--space-md);
  }

  /* Pages without a content-header need to account for the safe area themselves */
  .content-main--safe-top {
    padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
  }

  .content-header {
    padding: var(--space-sm) var(--space-md);
    padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
    height: auto;
    min-height: 3.625rem;
  }

  /* Icon-only buttons in content header on mobile */
  .content-header-right .btn .btn-text {
    display: none;
  }

  .content-header-right .btn {
    padding: var(--space-sm);
    width: 42px;
    height: 42px;
    min-block-size: unset;
    justify-content: center;
  }
}

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

.page-header {
  margin-block-end: var(--space-xl);
}

.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-subtitle {
  color: var(--text-light);
  font-size: var(--text-base);
  max-inline-size: 60ch;
}

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

/* ============================================================================
   BACK LINK
   ============================================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-lighter);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-standard);
  margin-bottom: 0;
  background-color: var(--bg);
}

.back-link:hover {
  color: var(--accent);
}

.back-link:active {
  opacity: 0.7;
  transition-duration: var(--btn-active-transition);
}

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

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

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

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

.full-width,
.image-gallery,
.data-table,
.chart-container {
  max-inline-size: none;
}