/*
 * document.css — the ONE stylesheet for the BODY of a generated document.
 *
 * Applied wherever a document body is rendered so they all agree:
 *   · the template editor canvas (WebApp, class="doc-body" on the editable content)
 *   · the editor's live preview pages and the generate wizard's preview sheet (WebApp)
 *   · the printed PDF — inlined by DocumentFillService.WrapForPrint through
 *     EduConnect.Shared.Styles.DocumentStyles (embedded resource)
 *
 * Keep this file free of editor-only decoration (placeholder chips, table handles, page
 * guides): those live in the WebApp's scoped CSS. Sizes are in pt because the PDF is paper.
 * Mirrored to the WebApp's wwwroot/css by the csproj (like tokens.css).
 */

.doc-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.55;
    color: #1a1a1a;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.doc-body * { box-sizing: border-box; }

.doc-body p { margin: 0 0 10px; }

.doc-body h1, .doc-body h2, .doc-body h3 {
    font-weight: 700;
    line-height: 1.25;
    margin: 18px 0 8px;
}
.doc-body h1 { font-size: 20pt; }
.doc-body h2 { font-size: 16pt; }
.doc-body h3 { font-size: 13pt; }
.doc-body h1:first-child, .doc-body h2:first-child, .doc-body h3:first-child { margin-top: 0; }

.doc-body ul, .doc-body ol { margin: 0 0 10px 22px; padding: 0; }
.doc-body li { margin: 0 0 4px; }
.doc-body li > p { margin: 0; }

.doc-body blockquote {
    margin: 0 0 10px 16px;
    padding-left: 10px;
    border-left: 3px solid #cbd5e1;
    color: #444;
}

.doc-body a { color: inherit; text-decoration: underline; }

.doc-body hr {
    border: 0;
    border-top: 1px solid #cbd5e1;
    margin: 14px 0;
}

.doc-body img { max-width: 100%; height: auto; }

/* Tables — the classic bordered grid. Authors can switch a table to "no borders"
   (signature blocks, two-column layouts). */
.doc-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}
.doc-body td, .doc-body th {
    border: 1px solid #999;
    padding: 6px 8px;
    font-size: 11pt;
    vertical-align: top;
}
.doc-body th {
    background: #f2f2f2;
    text-align: left;
    font-weight: 700;
}
.doc-body td > p:last-child, .doc-body th > p:last-child { margin-bottom: 0; }
.doc-body table.doc-table--noborder td, .doc-body table.doc-table--noborder th { border: none; }
.doc-body table.doc-table--noborder th { background: transparent; }

/* A filled placeholder is plain text in the document. */
.doc-body .doc-ph { }

/* Checkbox fields: a drawn box + a text tick, so the glyph never depends on the font having ☑. */
.doc-body .doc-check {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1.5px solid #222;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: 2px;
    font-size: 9px;
    line-height: 10px;
    text-align: center;
    font-weight: 700;
}
.doc-body .doc-check--on { background: #222; color: #fff; }

/* Page break marker. In print it only forces the break; on screen it takes no room. The
   !important beats the inline dashed-line styling legacy templates carry on the marker. */
.doc-body .doc-page-break,
.doc-body div[style*="page-break-after"],
.doc-body div[style*="break-after: page"] {
    display: block;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    page-break-after: always;
    break-after: page;
}