/* Quill document editor surface + page-break styling.
   Global (not scoped) because Quill injects its DOM via JavaScript. */

.doc-editor-wrapper {
    position: relative;   /* positioning context for the auto page-guide overlay */
    max-width: 8.5in;
    margin: 0 auto;
    /* The breathing room above the toolbar lives HERE and NOT as top padding on the
       scroll container (.docs-content-wrapper). A scrollport's padding box IS the
       sticky view rectangle, so top padding there leaves a strip the full width of
       the sheet in which scrolled content stays visible ABOVE the sticky toolbar.
       As the wrapper's own padding the strip scrolls away with the content, so the
       toolbar ends up flush against the top of the scroll area. */
    padding-top: 2rem;
}

/* Toolbar */
.doc-editor-wrapper .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.98), rgba(21, 25, 35, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px 8px 0 0;
}

.doc-editor-wrapper .ql-toolbar.ql-snow .ql-stroke {
    stroke: #e6e6e6;
}

.doc-editor-wrapper .ql-toolbar.ql-snow .ql-fill {
    fill: #e6e6e6;
}

.doc-editor-wrapper .ql-toolbar.ql-snow .ql-picker {
    color: #e6e6e6;
}

/* Editing sheet */
.doc-editor-wrapper .ql-container.ql-snow {
    background: #ffffff;
    color: #111111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: Arial, 'Segoe UI', sans-serif;
    font-size: 12pt;
}

.doc-editor-wrapper .ql-editor {
    min-height: 11in;
    padding: 1in;
    line-height: 1.6;
    color: #111111;
}

/* Uploaded images: block-level so their height is measured and paginated like any other
   block, and never wider than the page. */
.doc-editor-wrapper .ql-editor img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 8px;
    /* Rotation always turns about the image's centre - the layout compensation in
       documentEditor.js assumes exactly this. */
    transform-origin: center center;
}

/* Image alignment travels with the image (data-align is saved in the document). */
.doc-editor-wrapper .ql-editor img[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

.doc-editor-wrapper .ql-editor img[data-align="right"] {
    margin-left: auto;
    margin-right: 0;
}

/* Image tools: selection frame, resize handles and the small action toolbar. */
.doc-image-overlay {
    position: absolute;
    display: none;
    z-index: 6;
    pointer-events: none;
}

.doc-image-overlay__frame {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(155, 89, 182, 0.9);
}

.doc-image-overlay__handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid #9b59b6;
    border-radius: 50%;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.doc-image-overlay__handle--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.doc-image-overlay__handle--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.doc-image-overlay__handle--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.doc-image-overlay__handle--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.doc-image-overlay__handle--w { left: -7px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.doc-image-overlay__handle--e { right: -7px; top: 50%; margin-top: -6px; cursor: ew-resize; }

.doc-image-overlay__toolbar {
    position: absolute;
    top: -40px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(26, 31, 46, 0.97);
    border: 1px solid rgba(155, 89, 182, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    white-space: nowrap;
}

.doc-image-overlay__toolbar button {
    background: transparent;
    border: none;
    color: #d7bde2;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
}

.doc-image-overlay__toolbar button:hover {
    background: rgba(155, 89, 182, 0.35);
    color: #ffffff;
}

.doc-image-overlay__toolbar .sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
}

.doc-image-overlay__toolbar .doc-image-overlay__turn {
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px 6px;
}

/* Where the image will land while it is being dragged. */
.ql-editor .doc-image-drop-target {
    outline: 2px dashed rgba(155, 89, 182, 0.85);
    outline-offset: 3px;
}

/* Pagination measures block heights (border-box) and counts its own page-gap margins
   separately, so blocks must not carry vertical margins or the page model drifts
   from the real layout (and print would then break elsewhere). */
.doc-editor-wrapper .ql-editor blockquote {
    margin: 0;
    padding-left: 16px;
    border-left: 4px solid #ccc;
}

/* Custom "page break" toolbar button */
.ql-snow .ql-toolbar button.ql-pagebreak::before {
    content: '\21C4'; /* ⇄ */
    font-size: 16px;
    line-height: 24px;
}

/* ---------------------------------------------------------------------------
   Automatic page guides (drawn by documentEditor.js).
   The editor is one continuous surface; these layers mark the page edges and
   supply the spacing that pushes a block onto the next page instead of letting
   it be split by a page edge.
   --------------------------------------------------------------------------- */
.doc-page-guides {
    position: absolute;
    z-index: 4;              /* below the sticky toolbar (z-index 5) */
    pointer-events: none;    /* never intercept editing */
}

/* A clean page break: a visible page-edge band. Nothing crosses it, so it reads as
   the gap between two sheets. */
.doc-page-guide {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: rgba(26, 31, 46, 0.92);
    border-top: 2px dashed rgba(155, 89, 182, 0.85);
    border-bottom: 1px solid rgba(155, 89, 182, 0.35);
}

/* The faint trace across a page edge that body text flows across - the clearly
   visible part is the page band drawn in the left and right margins. */
.doc-page-guide--soft {
    height: 0;
    background: none;
    border-top: 1px dashed rgba(155, 89, 182, 0.3);
    border-bottom: 0;
    box-shadow: none;
}

.doc-page-guide-label {
    position: absolute;
    transform: translateY(-50%);
    padding: 2px 9px;
    border-radius: 10px;
    background: rgba(26, 31, 46, 0.96);
    border: 1px solid rgba(155, 89, 182, 0.7);
    color: #d7bde2;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.doc-page-guide-label--soft {
    border-style: dotted;
}

@media print {
    .doc-page-guides {
        display: none !important;
    }

    /* No screen gap above the sheet in print. */
    .doc-editor-wrapper {
        padding-top: 0;
    }
}

/* Match the scroll container's responsive side padding (DocumentEditor.razor.css) so the
   toolbar keeps the same top offset on narrow screens. */
@media (max-width: 1024px) {
    .doc-editor-wrapper {
        padding-top: 1rem;
    }
}

@media (max-width: 768px) {
    .doc-editor-wrapper {
        padding-top: 0.5rem;
    }
}