/* ════════════════════════════════════════════════════════════════════════════
   Document contract — ONE source of truth for the A4 document look.

   Loaded by all three consumers, so the on-screen pages match the PDF:
     1. the editor            → <link href="/styles/document.css"> (index.html)
     2. the live preview      → <link href="/styles/document.css"> (iframe srcDoc)
     3. the Puppeteer PDF     → read by backend/src/services/generationService.js

   The page geometry is expressed in mm, so the screen rendering and the PDF
   (printed by Puppeteer with format A4 and the same mm margins) agree
   independently of the browser's pixel density.

   Everything is scoped under .rich-editor-content — the class used by the
   editor content, the preview content wrapper, and the Puppeteer body.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Scoped reset (the iframe and the PDF have no other stylesheet) ───────── */
.doc-sheet,
.doc-sheet *,
.rich-editor-content,
.rich-editor-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Screen: the A4 sheet + user page breaks ─────────────────────────────── */
@media screen {
  .doc-sheet {
    width: 210mm;       /* A4 */
    min-height: 297mm;  /* an empty document still shows a full page */
    padding: 20mm 25mm; /* realistic page margins — same as PDF margins */
    background: #ffffff;
    border-radius: 2px;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.10),
      0 4px 12px rgba(15, 23, 42, 0.08),
      0 12px 40px rgba(15, 23, 42, 0.10);
  }

  /* User page break — rendered as a real page edge + gray gap on screen.
     Matches the automatic page-gap widgets of the editor. */
  .rich-editor-content .page-break {
    position: relative;
    width: 210mm;
    /* JS expands this value to include the unused part of the current page.
       The fallback is the two margins plus the gray inter-page gap. */
    /* Important only in screen media: projected template print rules commonly
       contain `.page-break { height:0 }` and must not collapse the editor gap. */
    height: var(--manual-page-break-height, 52.7mm) !important;
    margin: 0 -25mm;
    overflow: hidden;
  }

  .rich-editor-content .page-break::before {
    content: '⏎  Saut de page';
    position: absolute;
    /* Keep the separator immediately before the next page's top margin even
       when the break contains a large blank remainder from the current page. */
    top: auto;
    bottom: 20mm;
    left: 0;
    right: 0;
    height: 12.7mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    box-shadow:
      0 6px 10px -6px rgba(15, 23, 42, 0.20),
      0 -6px 10px -6px rgba(15, 23, 42, 0.12);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6366f1;
    opacity: 0.75;
    text-align: center;
  }
}

/* ── Base typography ─────────────────────────────────────────────────────── */
.rich-editor-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.rich-editor-content h1 { font-size: 1.8em; font-weight: 700; margin: 0.6em 0 0.3em; }
.rich-editor-content h2 { font-size: 1.4em; font-weight: 600; margin: 0.6em 0 0.3em; }
.rich-editor-content h3 { font-size: 1.15em; font-weight: 600; margin: 0.6em 0 0.3em; }
.rich-editor-content p  { margin: 0.4em 0; color: #475569; }
.rich-editor-content strong { color: #0f172a; }
.rich-editor-content em  { font-style: italic; color: #475569; }

/* ── Lists ───────────────────────────────────────────────────────────────── */
.rich-editor-content ul,
.rich-editor-content ol { padding-left: 1.5em; margin: 0.4em 0; color: #475569; }
.rich-editor-content li { margin: 0.2em 0; }

/* ── Blockquote ──────────────────────────────────────────────────────────── */
.rich-editor-content blockquote {
  border-left: 3px solid #6366f1;
  padding-left: 14px;
  margin: 0.6em 0;
  color: #94a3b8;
  font-style: italic;
}

/* ── Code ────────────────────────────────────────────────────────────────── */
.rich-editor-content code {
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.88em;
}
.rich-editor-content pre {
  background: #f1f5f9;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 8px;
  padding: 14px;
  overflow-x: auto;
  margin: 0.6em 0;
}
.rich-editor-content pre code { background: none; padding: 0; }

/* ── Links / rules / underline ───────────────────────────────────────────── */
.rich-editor-content a { color: #6366f1; text-decoration: underline; }
.rich-editor-content hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.16); margin: 1.2em 0; }
.rich-editor-content u { text-decoration: underline; }

/* ── Text alignment ──────────────────────────────────────────────────────── */
.rich-editor-content [style*="text-align: center"]  { text-align: center !important; }
.rich-editor-content [style*="text-align: right"]   { text-align: right !important; }
.rich-editor-content [style*="text-align: justify"] { text-align: justify !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.rich-editor-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 13.5px;
}
.rich-editor-content th,
.rich-editor-content td {
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  min-width: 80px;
}
.rich-editor-content th {
  background: rgba(99, 102, 241, 0.07);
  font-weight: 600;
  color: #0f172a;
}
.rich-editor-content td { color: #475569; }

/* ── Images (Layout & Text Wrapping contract) ────────────────────────────── */
.rich-editor-content img {
  max-width: 100%;
  border-radius: 6px;
  box-sizing: border-box;
}

.rich-editor-content img:not([height]):not([style*="height"]) {
  height: auto;
}

.rich-editor-content span[data-inline-image] {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

/* 1. Aligné sur le texte (Inline with text) */
.rich-editor-content span[data-inline-image][data-image-layout="inline"] {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

/* 2. Habillage: Encadré à gauche (Wrap Left) */
.rich-editor-content span[data-inline-image][data-image-layout="wrap-left"] {
  display: block;
  float: left;
  margin: 4px 16px 8px 0;
  clear: left;
}

/* 3. Habillage: Encadré à droite (Wrap Right) */
.rich-editor-content span[data-inline-image][data-image-layout="wrap-right"] {
  display: block;
  float: right;
  margin: 4px 0 8px 16px;
  clear: right;
}

/* 4. Haut et bas: Centré (Break Center) */
.rich-editor-content span[data-inline-image][data-image-layout="break-center"] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
  clear: both;
  width: 100%;
}
.rich-editor-content span[data-inline-image][data-image-layout="break-center"] img {
  margin: 0 auto;
}

/* 5. Haut et bas: Gauche (Break Left) */
.rich-editor-content span[data-inline-image][data-image-layout="break-left"] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 12px 0;
  clear: both;
  width: 100%;
}

/* 6. Haut et bas: Droite (Break Right) */
.rich-editor-content span[data-inline-image][data-image-layout="break-right"] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 12px 0;
  clear: both;
  width: 100%;
}

/* Legacy fallback support */
.rich-editor-content span[data-inline-image][data-image-align="left"] { display: block; float: left; margin: 4px 16px 8px 0; }
.rich-editor-content span[data-inline-image][data-image-align="right"] { display: block; float: right; margin: 4px 0 8px 16px; }
.rich-editor-content span[data-inline-image][data-image-align="center"] { display: flex; justify-content: center; margin: 12px 0; width: 100%; }

.rich-editor-content span[data-inline-text-align] { display: inline-block; }
.rich-editor-content span[data-inline-text-align="left"]   { text-align: left; }
.rich-editor-content span[data-inline-text-align="center"] { text-align: center; }
.rich-editor-content span[data-inline-text-align="right"]  { text-align: right; }
.rich-editor-content span[data-inline-text-align="justify"] { text-align: justify; }

/* ── Document Page Header & Footer ───────────────────────────────────────── */
.rich-editor-content .document-header,
.doc-sheet .document-header {
  display: block;
  width: 100%;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
  margin-bottom: 16px;
  font-size: 11.5px;
  color: #64748b;
}

.document-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.document-header-side {
  flex: 1 1 0;
  min-width: 0;
}

.document-header-left {
  text-align: left;
}

.document-header-right {
  text-align: right;
}

.document-tab {
  display: inline-block;
  width: 32px;
  min-width: 32px;
}

.rich-editor-content .document-footer,
.doc-sheet .document-footer {
  display: block;
  width: 100%;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
  margin-top: 24px;
  font-size: 11px;
  color: #94a3b8;
}

@media screen {
  .preview-doc-page > .document-header {
    margin-bottom: 16px;
  }

  .preview-doc-page > .document-footer {
    margin-top: auto;
  }
}

/* ── Print / PDF (Puppeteer) — the sole authority for real pagination ────── */
@media print {
  body { margin: 0; }

  .rich-editor-content .document-header {
    display: block;
    width: 100%;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 6px;
    margin-bottom: 16px;
    font-size: 11px;
    color: #475569;
  }

  .rich-editor-content .document-footer {
    display: block;
    width: 100%;
    border-top: 1px solid #cbd5e1;
    padding-top: 6px;
    margin-top: 24px;
    font-size: 10.5px;
    color: #64748b;
  }

  /* User page breaks become real A4 page breaks in the PDF. */
  .rich-editor-content .page-break {
    break-after: page;
    page-break-after: always;
    height: 0;
    border: none;
    margin: 0;
    overflow: visible;
  }
  .rich-editor-content .page-break::before { content: none; }

  /* Table-safe page breaking: repeat header rows, keep rows intact, and
     never orphan a heading from the paragraph that follows it. */
  .rich-editor-content thead { display: table-header-group; }
  .rich-editor-content tr    { break-inside: avoid; }
  .rich-editor-content h1,
  .rich-editor-content h2,
  .rich-editor-content h3    { break-after: avoid; }
}