/* layout.css — shared responsive rules for every page (admin + sign page).
 * Linked AFTER each page's inline <style> so these win at equal specificity.
 *
 * Root cause of the mobile overflow (2026-11): the header row (logo + three
 * white-space:nowrap nav buttons + 2rem side padding) was ~450px wide. On a
 * 375px iPhone that widened the document, Safari zoomed out to fit it, and
 * the 100%-wide cards then looked narrower than the screen with an empty
 * strip on the right. Long unbreakable text and the nowrap "add signer"
 * button pushed individual cards out the same way. Fixed here by letting
 * things wrap/shrink — not by clipping with overflow-x: hidden.
 *
 * Every var() here has a fallback: pages define their own tokens and
 * login.html has no --space-* — an undefined var() makes the whole
 * declaration invalid, which once turned the login card's padding into 0.
 * Keep generic class names (.card, button) scoped to where they're meant.
 */

/* ── Header ───────────────────────────────────────────── */
.header {
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
}

.header-logo { flex-shrink: 0; }

.header-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

/* ── Shrinkable flex/grid children ────────────────────── */
.main > *,
.doc-header > *,
.doc-card-top > *,
.signer-form > *,
.form-group,
.form-input {
  min-width: 0;
}

/* Long titles, file names and e-mail addresses wrap instead of widening. */
.doc-title,
.doc-filename,
.doc-meta-item,
.signer-email,
.success-body,
.page-error {
  overflow-wrap: anywhere;
}

.badge {
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .header {
    padding: 12px var(--space-md, 1rem);
  }

  /* Nav drops onto its own full-width row; buttons share it evenly and
     their labels may wrap. */
  .header-nav {
    flex: 1 1 100%;
    gap: 6px;
  }

  .header-nav .btn-nav {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 7px 8px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .header-nav .btn-nav svg { flex-shrink: 0; }

  .main {
    padding-left: var(--space-md, 1rem);
    padding-right: var(--space-md, 1rem);
  }

  /* Only the app's content cards (manage.html, index.html). The login
     card is not inside .main and keeps its own padding. */
  .main > .card {
    padding: var(--space-lg, 1.5rem) var(--space-md, 1rem);
  }

  /* Buttons go full width and their text may wrap. */
  .btn-primary,
  .btn-upload {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .section-header > * { min-width: 0; }

  /* manage.html — document header: badge + actions in one wrapping row,
     left-aligned under the title instead of floating right. */
  .doc-header-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  /* manage.html — signer rows: status/actions move under the name. */
  .signer-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .signer-status {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--space-sm, 0.5rem);
    text-align: left;
    padding-left: calc(36px + var(--space-md, 1rem));
  }

  .signer-status .signer-timestamp { margin-top: 0; }
  .signer-status .btn-resend,
  .signer-status .btn-delete { margin: 0; }

  /* dashboard.html — badges sit left under the title on narrow screens. */
  .doc-card-badges {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}