/* ==========================================================================
   Shared "document preview" module — true-proportioned A4 page miniature
   with a zoom control, reused by invoice-generator, the homepage change
   order tool, and onboarding-kit. Uses only existing design tokens.

   Layout: .doc-preview (outer, replaces the plain preview container) >
   .doc-preview__viewport (scale container, width tracks its column) >
   .doc-preview__wrapper (height tracks the SCALED page so no gap) >
   .doc-page (fixed A4-proportioned canvas, transform: scale) >
   .doc-page__content (actual rendered document markup, unscaled/A4 sizes).
   ========================================================================== */

.doc-preview {
  position: relative;
}

/* ---- Onboarding kit: doc-switcher tabs render as a sibling above the page
   miniature (they're UI chrome, not document content, so they must stay out
   of the scaled .doc-page). Give them the same breathing room the old
   in-panel placement had. ---- */
#onboardingTabs:not(:empty) {
  margin-bottom: var(--space-4);
}

.doc-preview__zoom-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.doc-preview__zoom-btn:hover { background: var(--color-paper-alt); }
.doc-preview__zoom-btn:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.doc-preview__viewport {
  width: 100%;
  /* Miniature is capped so the page reads as a small preview, not a full
     panel — a visible zoom affordance is the point. */
  max-width: 420px;
  margin: 0 auto;
  padding-top: var(--space-6); /* clears the absolutely-positioned zoom button */
}

.doc-preview__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* wrapper height tracks the scaled .doc-page, this is a safety clip only */
}
.doc-preview__wrapper--empty {
  /* While the .doc-page has been moved into the lightbox, collapse the hole
     it would otherwise leave in the miniature column. */
  height: 0 !important;
}

/* ---- The A4 page itself: fixed internal layout width, scaled down via
   transform so all proportions (margins, type sizes) match the PDF. ---- */
.doc-page {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transform-origin: top left;
  cursor: zoom-in;
}
.doc-page:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.doc-page__content {
  /* Margins mirror the PDF generators (50pt margin / 595.28pt page width
     ≈ 8.4% of page width ⇒ ~67px at 794px). */
  padding: 67px;
  font-family: var(--font-body);
  font-size: 13px; /* ~10pt body text at 96dpi, matching pdf.js/invoice-pdf.js body size */
  line-height: 1.45;
  color: var(--color-ink);
}

/* Document-scale typography overrides for content rendered inside the page —
   proportional to the PDF's point sizes, not the site's UI type scale. */
.doc-page__content .co-preview__title { font-size: 1.9rem; }
.doc-page__content .co-preview__masthead { margin-bottom: var(--space-6); padding-bottom: var(--space-5); }
.doc-page__content .co-preview__meta { font-size: 0.85rem; }
.doc-page__content .co-preview__party-label { font-size: 0.7rem; }
.doc-page__content .co-preview__table { font-size: 0.85rem; }
.doc-page__content .co-preview__totals { font-size: 0.9rem; }
.doc-page__content .co-preview__totals-row--total { font-size: 1.05rem; }
.doc-page__content .co-preview__empty-state { font-size: 0.85rem; }
.doc-page__content .invoice-preview__party-details,
.doc-page__content .invoice-tax-summary { font-size: 0.75rem; }
.doc-page__content .onboarding-doc__title { font-size: 1.6rem; }
.doc-page__content .onboarding-doc__meta { font-size: 0.8rem; }
.doc-page__content .onboarding-doc__section-heading { font-size: 0.7rem; }
.doc-page__content .onboarding-checklist__item,
.doc-page__content .onboarding-doc__milestone,
.doc-page__content .onboarding-doc__list { font-size: 0.85rem; }

/* When zoomed into the lightbox, the page renders at its natural (unscaled)
   size — width is governed by .doc-lightbox__dialog instead. */
.doc-page--zoomed {
  cursor: default;
  margin: 0 auto;
}

/* ---- Zoom lightbox ---- */
.doc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.doc-lightbox[hidden] { display: none; }

.doc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 23, 0.72);
}

.doc-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 900px);
  max-height: min(100vh - 2rem, 100%);
  margin: var(--space-5) auto;
  background: var(--color-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.doc-lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.doc-lightbox__close:hover { background: var(--color-paper-alt); }
.doc-lightbox__close:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.doc-lightbox__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-7) var(--space-5) var(--space-5);
}

.doc-lightbox__page-slot {
  display: flex;
  justify-content: center;
}
/* The moved-in .doc-page renders at full natural width here, capped so it
   never exceeds the dialog — a scrollable, true-size document view. */
.doc-lightbox__page-slot .doc-page {
  width: 100%;
  max-width: 794px;
}

body.doc-lightbox-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .doc-lightbox__dialog {
    width: calc(100% - 1.5rem);
    margin: var(--space-4) auto;
  }
  .doc-lightbox__scroll {
    padding: var(--space-6) var(--space-3) var(--space-3);
  }
}