/* ================================================
   APP LAYOUT — Mobile First
   ================================================ */

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* full dynamic viewport height */
  width: 100vw;
  background-color: var(--bg-page);
  font-family: var(--font-primary);
}

/* ================================================
   CONTENT AREA — Mobile
   ================================================ */

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--bg-page);
  padding-bottom: 5rem;
  overflow: auto;
  min-height: 0;
}

/* ================================================
   CONTENT LIMIT - Mobile First
   ================================================ */

.content-limit {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.content-padding {
  padding: var(--spacing-5xl);
}

/* ================================================
   DESKTOP LAYOUT (Grid)
   ================================================ */

@media (min-width: 769px) {
  .app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--spacing-5xl) 1fr;
    overflow: hidden;
    height: 100dvh;
  }

  .content-area {
    grid-column: 2;
    grid-row: 2;
    padding-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
  }

  .content-limit {
    max-width: calc(1440px - var(--sidebar-width));
    margin: 0;
  }

  .content-padding {
    padding-left: var(--spacing-5xl);
    padding-right: var(--spacing-6xl);
    padding-bottom: 0;
  }
}

/* ================================================
   Optional: Extra small screens (<480px)
   ================================================ */
@media (max-width: 967px) {
  .content-padding {
    padding: var(--spacing-xl) var(--spacing-xl);
  }
}

@media (max-width: 480px) {
  .content-padding {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}