/* styles/layout.css
   Layout, containers, grid, cards (phase 1)
   Extracted from style.css
*/
.page {
  display: none
}

.page.active {
  display: block
}

#content {
  min-height: calc(100vh - var(--tabbar-h) - 48px)
}

.topbar {
  position: relative;
  top: 0;
  z-index: 5;
  background: transparent
}

/* Keep topbar sticky on mobile for better UX */
@media (max-width: 980px) {
  .topbar {
    position: sticky;
  }
}

main {
  padding: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure all content is full-width on mobile */
@media (max-width: 768px) {
  main {
    padding: 12px;
    width: 100%;
    max-width: 100%;
  }

  #content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
  }

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

  /* Ensure page sections are full-width */
  .page {
    width: 100%;
    max-width: 100%;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.layout-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.requests-two-col {
  gap: 16px;
}

.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px
}

.card h3 {
  margin: 0 0 10px 0
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px
}

.muted {
  color: var(--muted)
}

/* Tasks / grids */
.tasks-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px
}

/* Card variant used for compact docs overview */
.card.docs-overview {
  padding: 12px
}

/* Responsive layout adjustments */
@media (max-width:980px) {
  .grid {
    grid-template-columns: 1fr
  }

  .layout-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tasks-grid {
    grid-template-columns: 1fr
  }

  .grid-2 {
    grid-template-columns: 1fr
  }
}

@media (max-width: 640px) {
  #page-profile {
    padding-bottom: 70px;
  }
}