/* assets/css/layout.css */
/* Scope: containers + layout helpers (no colors, no components) */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4);
}
.container--narrow {
  max-width: 820px;
}
/* page shell */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

/* keep content clear of bottom nav on mobile */
.safe-bottom {
  padding-bottom: calc(var(--space-6) + 72px);
}
/* vertical rhythm */
.stack > * + * {
  margin-top: var(--space-4);
}
.stack--sm > * + * {
  margin-top: var(--space-3);
}

.stack--lg > * + * {
  margin-top: var(--space-5);
}
/* horizontal row helper */
.row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.row--nowrap {
  flex-wrap: nowrap;
}

.row--wrap {
  flex-wrap: wrap;
}
/* two-side layout (label/value, title/actions, etc.) */
.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* responsive safety for mobile */
@media (max-width: 640px) {
  .container {
    padding: var(--space-3);
    /* جلوگیری از رفتن محتوا زیر bottom nav */
    padding-bottom: calc(var(--space-6) + 50px + env(safe-area-inset-bottom));
  }

  .row {
    flex-wrap: wrap;
  }

  .spread {
    flex-wrap: wrap;
    align-items: flex-start;
  }
   .spread > * {
    width: 100%;
  }
}