/* ─────────────────────────────────────────────────────────────────────────────
   screen-pdf.css — PDF Export Screen Styles
   Width is already clamped by .screen { width:100%; overflow-x:hidden }
   in components.css — no need to repeat it here.
───────────────────────────────────────────────────────────────────────────── */

#screen-pdf { background: var(--scaffold); }

/* ── Scrollable body ──────────────────────────────────────────────────────────── */
#screen-pdf .pdf-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;   /* 16px sides — safe on any phone */
  box-sizing: border-box;
}

/* ── Layout grid ──────────────────────────────────────────────────────────────── */
/*
 * Mobile-first: single column.
 * Desktop (≥780px): two columns.
 * minmax(0, …) is REQUIRED — without it a grid cell refuses to shrink
 * below its content width and causes horizontal overflow.
 */
.pdf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* single column on mobile */
  gap: 0;                                   /* section-box has its own margin-bottom */
}

@media (min-width: 780px) {
  #screen-pdf .pdf-body { padding: 24px; }
  .pdf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 20px;
    align-items: start;
  }
}

/* ── Section box ──────────────────────────────────────────────────────────────── */
.section-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  /* min-width:0 lets a grid/flex child shrink below its content size */
  min-width: 0;
  box-sizing: border-box;
}

.section-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}
.section-box-title .icon { font-size: 15px; color: var(--brand); }

/* ── Template dropdown row ────────────────────────────────────────────────────── */
.template-dropdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.template-dropdown-row .input { flex: 1; min-width: 0; }

.template-swatch-preview {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background .2s;
}

/* ── Template preview scroll ──────────────────────────────────────────────────── */
/*
 * The scroll container must be width-constrained by its parent (section-box),
 * NOT by its own content. overflow-x:auto makes it scroll internally.
 * We set width:100% so it fills the box, and min-width:0 so it can shrink.
 */
.preview-scroll {
  display: flex;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.preview-scroll::-webkit-scrollbar       { height: 4px; }
.preview-scroll::-webkit-scrollbar-track { background: transparent; }
.preview-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Preview card (mini PDF thumbnail) ───────────────────────────────────────── */
.preview-card {
  width: 110px;
  flex-shrink: 0;          /* cards don't squish — container scrolls instead */
  border-radius: 12px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color .18s, box-shadow .18s;
}
.preview-card:hover    { border-color: rgba(45,106,79,.3); }
.preview-card.selected { border-width: 2.5px; }

.preview-header      { height: 30px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; }
.preview-header-line { height: 5px; border-radius: 3px; }
.preview-accent-bar  { height: 2px; }
.preview-body        { padding: 6px; }
.preview-line        { height: 3px; border-radius: 2px; margin-bottom: 3px; }
.preview-block       { height: 8px; border-radius: 2px; margin-bottom: 3px; }
.preview-footer-bar  { height: 11px; border-radius: 3px; }
.preview-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 4px 5px;
}
.preview-check {
  position: absolute;
  top: 5px; right: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: #fff;
}

/* ── Generate card ────────────────────────────────────────────────────────────── */
.gen-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  min-width: 0;
  box-sizing: border-box;
}
.gen-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gen-pdf-icon {
  width: 36px; height: 36px;
  background: var(--brand-surf);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

/* ── Grid column wrapper ──────────────────────────────────────────────────────── */
/*
 * Both direct children of .pdf-grid need min-width:0 explicitly.
 * Grid's minmax(0,…) sets the *track* max, but the item itself also
 * needs to opt in to shrinking below its content size.
 */
.pdf-col {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}