/**
 * Documents module styles
 *
 * 1. The A4 page - one geometry is shared by the CKEditor canvas, the preview
 *    modal and the printed sheet: 210mm x 297mm with 20mm inner margins, Arial
 *    11pt at 1.5 line height. Because every surface uses the same box, what the
 *    author sees is what "Print / Save as PDF" produces.
 * 2. CKEditor host - the rich-text authoring surface, plus the fullscreen card.
 * 3. Department logo - the {{department_logo}} image.
 * 4. Print - @page A4, the sheet only, no app chrome.
 */

/* -- 1. The A4 page --------------------------------------- */

/* Doubling the class keeps this geometry ahead of CKEditor's own `.ck-content`
   content styles, which are injected into <head> after this file.

   The editor is styled through `.doc-editor-card`, not the mount div: the
   prebuilt ClassicEditor replaces its source element with its own wrapper, so
   the editor ends up either inside the mount div or beside it — the card
   contains it either way. */
.doc-sheet.doc-sheet,
.doc-editor-card .ck.ck-editor__main > .ck-editor__editable {
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    padding: 20mm;
    background: #fff;
    color: #111;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
}

.doc-sheet {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.doc-sheet:focus {
    outline: none;
}

.doc-sheet h1 {
    font-size: 16pt;
    text-align: center;
    margin: 0 0 4pt;
    text-transform: uppercase;
    letter-spacing: .5pt;
}

.doc-sheet h2 {
    font-size: 13pt;
    margin: 18pt 0 6pt;
}

.doc-sheet h3,
.doc-sheet h4 {
    font-size: 12pt;
    margin: 14pt 0 4pt;
}

.doc-sheet p {
    margin: 0 0 10pt;
}

.doc-sheet ol,
.doc-sheet ul {
    margin: 0 0 10pt;
    padding-left: 1.4em;
}

.doc-sheet a {
    color: #111;
    text-decoration: underline;
}

/* Tables. Mirror CKEditor's own content styles so the sheet, the student's copy
   and the printed page look exactly like the editor — including when the editor
   stylesheet is not loaded (a student never opens the editor). Everything the
   author sets through Table/Cell properties is written as an inline style, so it
   still wins here: borders, background, padding, dimensions, alignment, caption
   and the column widths set by the resize handles. */
.doc-sheet .table {
    display: table;
    margin: .9em auto;
}

.doc-sheet table {
    border: 1px double #b3b3b3;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
}

.doc-sheet th,
.doc-sheet td {
    border: 1px solid #bfbfbf;
    min-width: 2em;
    padding: .4em;
}

.doc-sheet th {
    background: rgba(0, 0, 0, .05);
    font-weight: 700;
}

.doc-sheet .table > figcaption {
    caption-side: top;
    display: table-caption;
    font-size: .75em;
    padding: .6em;
    text-align: center;
    word-break: break-word;
}

/* A table whose columns were resized carries explicit widths; fixing the layout
   makes those widths exact in the sheet and in print, as they look while
   dragging. `.ck-content` is on the editor canvas and on the sheet, so both
   agree. */
.ck-content .table table:has(colgroup) {
    table-layout: fixed;
}

/* Table presets — the classes the Table style dropdown puts on the table. They
   only describe the table-level look: anything the author sets per cell through
   Cell properties is an inline style, which beats these rules, so a preset never
   clobbers an explicit cell setting. `.ck-content` is on the editor canvas and on
   the sheet, so the author sees the preset while typing and it prints unchanged;
   backgrounds print because the printed sheet sets print-color-adjust: exact. */
.ck-content .table.tbl-plain > table,
.ck-content .table.tbl-plain th,
.ck-content .table.tbl-plain td {
    border: 0;
}

.ck-content .table.tbl-bordered > table,
.ck-content .table.tbl-bordered th,
.ck-content .table.tbl-bordered td {
    border: 1px solid #333;
}

/* Minimal: top and bottom rules only. */
.ck-content .table.tbl-minimal > table,
.ck-content .table.tbl-minimal th,
.ck-content .table.tbl-minimal td {
    border: 0;
}

.ck-content .table.tbl-minimal > table > thead > tr:last-child > *,
.ck-content .table.tbl-minimal:not(:has(thead)) > table > tbody > tr:first-child > *,
.ck-content .table.tbl-minimal > table > tbody > tr:last-child > * {
    border-bottom: 1px solid #333;
}

/* Header row filled — the header row if there is one, else the first row. */
.ck-content .table.tbl-head > table > thead > tr > *,
.ck-content .table.tbl-head:not(:has(thead)) > table > tbody > tr:first-child > * {
    background: #e8e8e8;
    font-weight: 700;
}

/* Zebra striped. */
.ck-content .table.tbl-zebra > table > tbody > tr:nth-child(even) > td {
    background: #f5f5f5;
}

.doc-sheet blockquote {
    margin: 0 0 10pt;
    padding-left: 2em;
    border-left: 3px solid #999;
    font-style: italic;
}

.doc-sheet hr {
    border: 0;
    border-top: 1px solid #333;
    margin: 16pt 0;
}

.doc-sheet code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 10pt;
    background: #f4f4f5;
    padding: 0 3px;
    border-radius: 2px;
}

.doc-sheet pre {
    background: #f4f4f5;
    padding: 8pt 10pt;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 10pt;
}

.doc-sheet pre code {
    background: none;
    padding: 0;
}

/* Images and embedded media */
.doc-sheet img {
    max-width: 100%;
    height: auto;
}

.doc-sheet figure {
    margin: 0 0 10pt;
}

.doc-sheet figure figcaption {
    font-size: 9pt;
    color: #555;
    text-align: center;
    padding-top: 4pt;
}

.doc-sheet .media,
.doc-sheet oembed {
    display: block;
    width: 100%;
}

.doc-sheet .media {
    margin: 0 0 10pt;
}

.doc-sheet .media oembed {
    aspect-ratio: 16 / 9;
    background: #eef1f5;
    border: 1px solid #d8dde3;
}

/* Page break: a dashed rule on screen, a real page break in the PDF. */
.doc-sheet .page-break {
    break-after: page;
    page-break-after: always;
    border-top: 1px dashed #b9c0c8;
    height: 0;
    margin: 12pt 0;
}

/* -- 2. CKEditor host ------------------------------------- */

/* The mount point. CKEditor replaces it, so it stays empty and contributes
   nothing to the layout. */
.doc-editor-card > .doc-editor-host:empty {
    display: none;
}

.doc-editor-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

/* The editor's own scroll surface: a grey backdrop the A4 sheet sits on. */
.doc-editor-card .ck.ck-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 70vh;
    overflow: auto;
    background: #eef1f5;
    border-radius: 8px;
    padding: 16px 8px;
}

.doc-editor-card .ck.ck-toolbar {
    border-radius: 8px 8px 0 0;
}

.doc-editor-card .ck.ck-editor__main > .ck-editor__editable {
    border: 1px solid #d8dde3;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

/* -- 2b. Fullscreen editor card ---------------------------- */

/* While the editor card fills the viewport the page behind it must not scroll. */
body.doc-editor-scroll-lock {
    overflow: hidden;
}

.modal-overlay.doc-editor-fullscreen {
    padding: 0;
}

.modal-overlay.doc-editor-fullscreen .modal {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: none;
    max-height: none;
    /* dvh tracks the visible area while mobile browser chrome shows/hides. */
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.modal-overlay.doc-editor-fullscreen .modal-header,
.modal-overlay.doc-editor-fullscreen .modal-footer {
    flex: 0 0 auto;
}

.modal-overlay.doc-editor-fullscreen .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The editor card fills the remaining height, and the editor becomes the one
   scroll container so its toolbar can stay pinned at the top. */
.modal-overlay.doc-editor-fullscreen .doc-editor-card {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
}

.modal-overlay.doc-editor-fullscreen .doc-editor-card .ck.ck-editor {
    max-height: none;
}

.modal-overlay.doc-editor-fullscreen .doc-editor-card .ck.ck-editor__top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #eef1f5;
}

/* -- 3. Department logo ----------------------------------- */

.doc-sheet img.doc-dept-logo {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* The default logo (no size in the token) is capped; one that carries its own
   size in the token is drawn at exactly that size, so it must not be capped. */
.doc-sheet img.doc-dept-logo:not(.doc-dept-logo-sized) {
    max-height: 80px;
}

/* -- 3b. Line height -------------------------------------- */

/* Applied as classes by the editor's line-height dropdown. `.ck-content` is on
   the editor canvas, the coordinator preview, the student's filled document and
   the printed sheet, so one set of rules covers all of them. A block with no
   class keeps the document default (1.5, set on the A4 page above). */
.ck-content .lh-100 {
    line-height: 1;
}

.ck-content .lh-115 {
    line-height: 1.15;
}

.ck-content .lh-150 {
    line-height: 1.5;
}

.ck-content .lh-200 {
    line-height: 2;
}

/* -- 6. CKEditor popups above our own layers ---------------- */

/* CKEditor renders its balloons (the in-table toolbar and the Table/Cell
   properties dialogs), its tooltips and its body-level dropdown panels in a
   `.ck-body-wrapper` div appended to <body>, and gives each panel
   `z-index: var(--ck-z-panel)` = 1000. Our own layers sit higher — the modal
   overlay is 1500, toasts 2000, SweetAlert2 2100, the camera overlay 4000 — so
   an open Table properties dialog was painted *behind* the editor card and could
   not be clicked. Lift CKEditor's panels above every app layer instead.

   Note the wrapper is `.ck-body-wrapper` with no `ck` class of its own, and
   CKEditor's own `.ck.ck-balloon-panel` rule is three classes deep, so these
   selectors have to be at least as specific — hence `.ck-body-wrapper
   .ck.ck-balloon-panel` rather than a plain descendant selector.

   The wrapper is deliberately left position:static: the panels are absolutely
   positioned and use the page as their containing block, so giving the wrapper a
   position would shift them. `--ck-z-dialog` (CKEditor's own dialog overlay) is
   already 9999, above all of our layers, so it needs nothing. */
.ck-body-wrapper .ck.ck-balloon-panel,
.ck-body-wrapper .ck.ck-dropdown__panel,
.ck-body-wrapper .ck.ck-tooltip,
.ck.ck-toolbar .ck.ck-dropdown__panel {
    z-index: 5000;
}

/* The Font Size menu carries 17 entries; uncapped its panel is ~1000px tall, so
   the smaller sizes ran off the bottom of the screen. Cap it so the whole list
   fits above the fold on a normal window and scrolls when it cannot. */
.ck.ck-font-size-dropdown .ck-dropdown__panel {
    max-height: 40vh;
    overflow-y: auto;
}

/* -- 4. Print --------------------------------------------- */

/* Off-screen sheet used only while printing (see App.printDocument). */
#doc-print-root {
    display: none;
}

.doc-preview-body {
    background: #eef1f5;
    padding: 16px;
    max-height: 68vh;
    overflow: auto;
    border-radius: 8px;
}

/* Narrow screens: the sheet keeps its A4 proportions but shrinks to fit, so
   nothing forces the page to scroll sideways. Print output stays exact A4. */
@media (max-width: 900px) {
    .doc-sheet.doc-sheet,
    .doc-editor-card .ck.ck-editor__main > .ck-editor__editable {
        width: 100%;
        max-width: 210mm;
        padding: 12mm;
        min-height: auto;
    }
}

@media print {
    /* A4, with the 20mm margin coming from the sheet itself so screen and paper
       line up exactly. */
    @page {
        size: A4;
        margin: 0;
    }

    html,
    body {
        background: #fff;
    }

    /* Only the composed document prints: no navbar, sidebar, modal chrome,
       toolbar or toast container. */
    body.doc-print-mode > *:not(#doc-print-root) {
        display: none !important;
    }

    body.doc-print-mode #doc-print-root {
        display: block !important;
    }

    body.doc-print-mode .doc-sheet.doc-sheet {
        box-shadow: none;
        width: 210mm;
        max-width: none;
        /* min-height is dropped so a short document cannot spill a blank page. */
        min-height: auto;
        margin: 0;
        padding: 20mm;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.doc-print-mode .doc-sheet .page-break {
        border-top: 0;
        margin: 0;
    }

    /* A table keeps its borders, padding, alignment and column widths on paper.
       height:100% only makes sense on screen, so drop it here (CKEditor's own
       print stylesheet does the same). */
    body.doc-print-mode .doc-sheet table {
        height: auto;
        max-width: 100%;
    }
}