/* --- PDF card header: doc title + id + progress + download + autosave -- */
/* The header replaced the old "Document preview" label, so it now
 * carries four pieces in a single flex row. Wraps gracefully on
 * narrower viewports (progress drops to its own line). */
.ds-doc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Doc context strip — lives at the very top of /documents/<id>,
 * directly underneath the global header v2. Styled to read as a
 * continuation of the header chrome: pull-up margin closes the
 * gap to the bottom of the global header, full-bleed background
 * matches the page-content wash, and a hairline divider replaces
 * the bottom edge of the header above. The result is one
 * continuous chrome strip instead of "header / card / content"
 * stacked surfaces. */
.ds-doc-context-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: -18px -28px 18px;
  padding: 12px 28px 14px;
  background: linear-gradient(180deg, #f6f1e4 0%, var(--ds-parchment) 100%);
  border-bottom: 1px solid var(--ds-parchment-shadow);
}
@media (max-width: 768px) {
  .ds-doc-context-strip {
    margin: -14px -14px 14px;
    padding: 10px 14px 12px;
  }
}
.ds-doc-id-block {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  max-width: 40%;
}
.ds-doc-title-row {
  display: flex;
  align-items: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ds-mahogany-deep);
}
.ds-doc-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-doc-id {
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-doc-progress {
  flex: 1 1 200px;
  min-width: 140px;
}
.ds-doc-download {
  flex: 0 0 auto;
  margin-left: auto;
}
.ds-doc-autosave {
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .ds-doc-id-block { max-width: 100%; }
  .ds-doc-progress { flex-basis: 100%; order: 3; }
  .ds-doc-download { order: 2; }
  .ds-doc-autosave { order: 4; flex-basis: 100%; text-align: right; }
}

/* --- PDF row: vertical page nav flush against the document --------- */
/* The page nav lives in a column to the left of the PDF card so users
 * can jump pages without scanning a horizontal tab bar that wraps. The
 * nav itself sticks to the top of its column, so on long documents the
 * tabs remain reachable as the form scrolls past below. */
.ds-pdf-row {
  display: flex;
  align-items: flex-start;
  gap: 0;  /* Tabs flush against the PDF card's left edge. */
  /* Full-bleed: escape ALL ancestor padding (.ds-page-content gutter,
   * dbc.Container padding, max-width cap) so the page-nav-wrap sits
   * literally at the left edge of the viewport and the PDF card
   * stretches to the right edge. The 100vw + half-50% trick is the
   * standard CSS escape from a centered container. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* The page-tab rail floats over whatever is on the screen — it
 * doesn't occupy any flex space in .ds-pdf-row. With position:fixed,
 * the PDF card (.ds-pdf-row > .card) gets the full row width and the
 * rail overlays the leftmost ~220px of the viewport by default.
 * Background is transparent so the PDF underneath shows through;
 * only the active tab has a parchment fill to call it out. The
 * mask fade gives the "wheel" peripheral items a soft drop-off. */
.ds-page-nav-wrap {
  position: fixed;
  top: 150px;
  left: 0;
  width: 220px;
  height: 420px;
  max-height: 420px;
  z-index: 1035;
  overflow: hidden;
  margin: 0;
  transition: left 0.30s ease, right 0.30s ease;
  /* Same glassmorphic recipe as .ds-ai-panel / .ds-form-panel:
   *  - translucent white background
   *  - heavy backdrop blur + saturation so what's behind reads as
   *    frosted rather than literally visible
   *  - hairline white border that catches edge light
   *  - layered drop shadow + inset highlight for depth.
   * The mask gradient on top of all that softens the wheel's top
   * and bottom edges so distant tabs fade out of the glass. */
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: none;
  border-radius: 14px;
  box-shadow:
    0 12px 36px rgba(15, 23, 42, 0.18),
    0 1px 2px rgba(255, 255, 255, 0.5) inset;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 9%,
    #000 32%,
    #000 68%,
    rgba(0, 0, 0, 0.25) 91%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 9%,
    #000 32%,
    #000 68%,
    rgba(0, 0, 0, 0.25) 91%,
    transparent 100%);
}
body.ds-form-split .ds-page-nav-wrap {
  /* Straddle the 50vw boundary so the rail floats between the form
   * panel (left half) and the PDF (right half). 220px wide centred
   * on 50vw → 110px on each side. */
  left: calc(50vw - 110px);
  right: auto;
}
body.ds-form-full .ds-page-nav-wrap {
  /* Form covers the full viewport — rail rides the right edge. */
  right: 0;
  left: auto;
}
@media (max-width: 768px) {
  .ds-pdf-row {
    margin-left: -14px;
    margin-right: -14px;
  }
}
/* Render the dbc.Tabs nav vertically with each tab pinned to the
 * right edge of its column (toward the PDF), not stretched full-
 * width. Each .nav-item is its own one-row flex container that
 * pushes its .nav-link to the right; the link itself sizes to its
 * label so short labels (Page 3, Page 4, …) don't visually
 * stretch across the column. */
.ds-page-nav .nav-tabs {
  flex-direction: column;
  border-bottom: none;
  border-right: none;             /* No vertical seam between nav and card. */
  gap: 2px;
  padding: 0;
  margin: 0;
}
.ds-page-nav .nav-tabs .nav-item {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.ds-page-nav .nav-tabs .nav-link {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  border: 1px solid transparent;
  /* The tab's right side sits flush against the card (rounded corner
   * only on the LEFT, away from the document). */
  border-radius: 6px 0 0 6px;
  margin-right: -1px;
  text-align: right;
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  color: var(--ds-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;          /* Truncates from the LEFT instead of the right. */
  unicode-bidi: plaintext; /* But Latin text still reads left→right. */
}
.ds-page-nav .nav-tabs .nav-link:hover {
  color: var(--ds-ink);
  background: rgba(255, 255, 255, 0.6);
}
.ds-page-nav .nav-tabs .nav-link.active {
  color: var(--ds-mahogany-deep);
  background: var(--ds-parchment, #f8f5ee);
  border-color: var(--ds-parchment-shadow);
  border-right: none;             /* Bleeds into the card body seamlessly. */
  font-weight: 600;
}
.ds-page-nav .tab-content { display: none; }
/* Fuse nav + PDF card visually: PDF card rounds only the right corners,
 * the nav rounds only the left, no border between them. */
.ds-pdf-row > .card {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}


/* --- v3 split-screen layout (webform left, PDF right) ----------------
 *
 * Replaces the v2 slide-up form overlay. Both surfaces are always
 * visible — the webform is the primary action (filling fields) and
 * the PDF is the reference view that tracks the active Part. Tabs
 * across the top of the webform read as file-cabinet folders.
 */

.ds-split-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  /* Match the v2 iframe sizing so the form column has the same
   * tall-feeling viewport. minHeight is the floor for short
   * monitors. */
  height: calc(100vh - 200px);
  min-height: 640px;
}
.ds-form-col {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.ds-pdf-col {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.ds-pdf-col > iframe {
  flex: 1 1 auto;
  width: 100%;
  border: none;
}

/* File-cabinet Part tabs across the top of the webform column. The
 * tabs button-strip is the row of folder fronts; the active one
 * lifts slightly and visually "connects" to the form body below. */
.ds-part-tabs .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  padding: 8px 12px 0 12px;
  gap: 4px;
  scrollbar-width: thin;
}
.ds-part-tabs .nav-tabs::-webkit-scrollbar { height: 6px; }
.ds-part-tabs .nav-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.ds-part-tab .nav-link {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ds-ink-soft, #3f3528);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 6px 14px;
  margin-bottom: -1px;          /* fuse with the form body's top border */
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.ds-part-tab .nav-link:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ds-mahogany-deep, #4a2b1a);
}
.ds-part-tab-active .nav-link {
  background: #ffffff !important;
  color: var(--ds-mahogany-deep, #4a2b1a) !important;
  border-color: rgba(0, 0, 0, 0.14);
  font-weight: 600;
}

/* Form body fills the rest of the column and scrolls on its own.
 * The Next-part row pins to the bottom edge. */
.ds-form-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px;
}
.ds-form-next-row {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.85);
  padding: 10px 18px;
  text-align: right;
}
.ds-form-next-btn { min-width: 140px; }

/* Phone / narrow viewport: stack the two columns vertically. PDF
 * goes underneath the webform; both still scroll independently
 * inside their column. */
@media (max-width: 900px) {
  .ds-split-row {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .ds-form-col,
  .ds-pdf-col {
    flex: 0 0 auto;
    min-height: 480px;
  }
  .ds-pdf-col > iframe { min-height: 480px; }
}