/* ==========================================================================
   Layout
   ========================================================================== */

/* Page frame - 24px margin with border, scrolls internally */
html {
  height: 100%;
  overflow: hidden;
}

body {
  height: calc(100vh - calc(var(--layout-page-margin) * 2));
  margin: var(--layout-page-margin);
  border: var(--border-normal) var(--np-color-inverse-surface);
  overflow: hidden;
  display: flex;
}

/* Page layout wrapper - flex row for main-nav + main */
.layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Nav Wrapper (for Router refreshes) - invisible to layout */
#app-navigation {
  display: contents;
}

/* Main content area */
.main {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--np-color-surface-container-high);
  border-block-start: var(--border-normal) var(--np-color-inverse-surface);
  border-inline-start: var(--border-normal) var(--np-color-inverse-surface);
}

/* Main page container - holds page content, replaced by Router */
.main-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--np-color-surface-container);
  transition: opacity var(--transition-fast);
}

.main-page.fade-out {
  opacity: 0;
}

/* Main content - scrollable area above filter bar */
.main-content {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
}

/* Filter bar - fixed at bottom of main area */
.main-filters {
  height: var(--size-touch);
  flex-shrink: 0;
  border-block-start: var(--border-normal) var(--np-color-inverse-surface);
}

/* Mobile Layout
   ========================================================================== */

.mobile-only {
  display: none;
}

@media (max-width: 480px) {
  .mobile-only {
    display: block;
  }

  body {
    /* Safe area handling + 8px padding (env fallbacks for browsers that don't report safe areas) */
    margin: 16px;
    margin: calc(env(safe-area-inset-top, 8px) + 8px)
      calc(env(safe-area-inset-right, 0px) + 8px)
      calc(env(safe-area-inset-bottom, 8px) + 8px)
      calc(env(safe-area-inset-left, 0px) + 8px);
    height: calc(100vh - 32px);
    height: calc(
      100dvh -
        (
          calc(env(safe-area-inset-top, 8px) + 8px) +
            calc(env(safe-area-inset-bottom, 8px) + 8px)
        )
    );
  }

  .layout {
    flex-direction: column;
  }

  .main {
    order: 1; /* Top */
    flex: 1;
    height: auto; /* Let flex handle it */
  }

  /* Main content - adjusted padding for mobile */
  .main-content {
    padding: var(--space-6) 0;
  }
}