/*
    ArozOS Office - Docs (word processor) stylesheet
    Chrome (menubar/toolbar/statusbar/dialogs) is styled by ../common/office.css
    via the --of-* variables; this file styles the paper workspace, the editor
    content, the find panel and printing.

    Dark mode choice: the paper ALWAYS stays white with dark text (like a real
    docs app) while the chrome around it follows the theme. This is deliberate
    and consistent - editor content colors are therefore fixed, not themed.
*/

/* ============ Workspace / paper ============ */
#workspace {
    padding: 26px 12px 64px;
}
#pageWrap {
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
#page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* #page is the frame the flow is laid out in; the paper is drawn by one
       .doc-sheet per page behind it, so the gap between two sheets is real
       empty space rather than a band painted over one long sheet */
    background: transparent;
    color: #1f2328;
}
#editor {
    position: relative;
    z-index: 1;
}
#pageSheets {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;
    z-index: 0;
    pointer-events: none;
}
.doc-sheet {
    position: absolute;
    left: 0;
    right: 0;
    /* paper stays white in dark mode - deliberate, see header comment */
    background: #ffffff;
    /* an outline, not a border: the sheet is exactly the page's size */
    outline: 1px solid #e2e5e9;
    border-radius: 2px;
}
body.dark .doc-sheet {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 22px rgba(0, 0, 0, 0.6);
}

/* ============ Header / footer areas ============
   One editable copy per simulated page, parked in that sheet's top / bottom
   margin band - docs.js (layoutHeaderFooters) creates, positions and keeps
   them in sync; which pages get one is the hfMode setting. They are taken
   out of the flow on purpose: the header must not eat page-one content the
   way an in-flow header did, or the preview and the exported PDF disagree
   about where the first page ends. */
.doc-hf {
    position: absolute;
    box-sizing: border-box;
    min-height: 1.3em;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    color: #6b7078;
    padding: 0;
    cursor: text;
    z-index: 6;
}
/* the edit affordance is an outline: a border would move the content off
   the header/footer distance the document states */
.doc-hf:hover, .doc-hf:focus {
    outline: 1px dashed #c9cdd3;
    outline-offset: 1px;
}
/* only the first visible copy nags: one placeholder per document, not one
   per page */
.doc-hf.doc-hf-lead:empty::before {
    content: attr(data-placeholder);
    color: #c2c6cc;
    pointer-events: none;
}
.doc-hf[hidden] { display: none; }
/* rich header/footer content (an imported header, a picture) is document
   text: it takes the body's typography, not the placeholder grey */
.doc-hf > p, .doc-hf > h1, .doc-hf > h2, .doc-hf > h3, .doc-hf > h4,
.doc-hf > h5, .doc-hf > h6, .doc-hf > table, .doc-hf > ul, .doc-hf > ol {
    margin: 0;
    font-family: Arial, "Noto Sans", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
    font-size: 11pt;
    color: #000000;
}
.doc-hf img { max-width: none; }
.doc-hf img.doc-anchor { display: block; }
.doc-hf .doc-field { font-variant-numeric: tabular-nums; }

/* the page number of "Page setup > Print page numbers" (no PAGE field) */
.doc-pagenum {
    position: absolute;
    text-align: center;
    font-family: Arial, "Noto Sans", sans-serif;
    font-size: 10pt;
    color: #444444;
    pointer-events: none;
    z-index: 6;
}

/* ============ Editor content ============ */
/* Typography follows the word processors a .docx comes from: spacing
   before/after is margin (neighbouring spacing collapses to the larger of
   the two, as it does in Google Docs), and every block's line height is set in px by docs_layout.js from the
   font's own metrics. Inline elements get line-height 0 so a run in
   another font cannot make its line taller than that rule says - the
   layout engine gives a bigger run its own height. */
#editor {
    flex: 1 1 auto;
    outline: none;
    font-family: Arial, "Noto Sans", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
    font-size: 11pt;
    line-height: 1.32;
    color: #000000;
    tab-size: 36pt;
    word-wrap: break-word;
    overflow-wrap: break-word;
    caret-color: #1a73e8;
}
#editor span, #editor a, #editor b, #editor strong, #editor i, #editor em,
#editor u, #editor s, #editor strike, #editor font, #editor code,
#editor sup, #editor sub, #editor mark, #editor small,
.doc-hf span, .doc-hf a, .doc-hf b, .doc-hf i, .doc-hf u, .doc-hf sup, .doc-hf sub,
.doc-fn span, .doc-fn a, .doc-fn b, .doc-fn i, .doc-fn u, .doc-fn sup, .doc-fn sub {
    line-height: 0;
}
#editor sup, #editor sub, .doc-hf sup, .doc-hf sub, .doc-fn sup, .doc-fn sub {
    font-size: 60%;
    vertical-align: 0.667em;
}
#editor sub, .doc-hf sub, .doc-fn sub { vertical-align: -0.233em; }
#editor p, #editor div { margin: 0; }
#editor h1, #editor h2, #editor h3, #editor h4, #editor h5, #editor h6 {
    margin: 14pt 0 6pt;
    /* the page's typeface, not the UI kit's heading font (the export
       writes headings in the body font) */
    font-family: inherit;
    font-weight: 600;
    color: #1f2328;
}
#editor h1 { font-size: 20pt; }
#editor h2 { font-size: 16pt; }
#editor h3 { font-size: 13pt; }
#editor h4 { font-size: 11pt; font-style: italic; }
#editor h5 { font-size: 11pt; }
#editor h6 { font-size: 11pt; font-style: italic; }
#editor .doc-title {
    font-size: 26pt;
    font-weight: 400;
    margin: 0 0 12pt;
}
#editor .doc-subtitle {
    font-size: 15pt;
    color: #666666;
    margin: 0 0 16pt;
}
#editor a { color: #1a58c2; text-decoration: underline; cursor: text; }
#editor a:hover { color: #0f3f96; }
#editor hr {
    border: none;
    border-top: 1px solid #c9cdd3;
    margin: 14pt 0;
}
#editor blockquote {
    border-left: 3px solid #c3c7cc;
    margin: 8pt 0;
    padding: 2pt 0 2pt 12px;
    color: #5f6368;
}
#editor pre {
    background: #f1f3f4;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10pt;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 8pt 0;
}
/* Lists: the marker text is computed by docs_layout.js (li[data-marker])
   and hangs --doc-hang to the left of the item's text, which starts at the
   list's padding - Word's "indent" and "hanging" */
#editor ul, #editor ol, .doc-hf ul, .doc-hf ol, .doc-fn ul, .doc-fn ol {
    margin: 0;
    padding-left: 36pt;
    list-style: none;
}
#editor li, .doc-hf li, .doc-fn li { position: relative; margin: 0; }
#editor li::before, .doc-hf li::before, .doc-fn li::before {
    content: attr(data-marker);
    position: absolute;
    left: calc(-1 * var(--doc-hang, 18pt));
    white-space: pre;
    text-indent: 0;
    font-style: normal;
    text-decoration: none;
}

/* Tabs: a real tab character, sized to its tab stop by docs_layout.js */
span.doc-tab { white-space: pre; }
span.doc-tab[data-leader="dot"] {
    background-image: radial-gradient(circle, currentColor 0.55px, transparent 0.8px);
    background-size: 4px 3px;
    background-repeat: repeat-x;
    background-position: 0 calc(100% - 0.28em);
}
span.doc-tab[data-leader="hyphen"], span.doc-tab[data-leader="underscore"] {
    border-bottom: 1px solid currentColor;
}

/* Footnote references in the text */
#editor sup.doc-fnref { cursor: default; user-select: none; }

/* Layout-only spacers the paginator inserts (never saved) */
#editor .doc-autobreak {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
#editor tr.doc-autobreak { display: table-row; }
#editor td.doc-autobreak-cell {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 0;
}
/* The two halves of a block split across a page (docs_layout.js): the
   spacing, rule and first-line indent belong to the paragraph's start and
   end, not to the page cut, and the continuation of a list item has no
   marker of its own. */
#editor .doc-split-head {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-style: none !important;
}
#editor .doc-split-tail {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top-style: none !important;
    text-indent: 0 !important;
}
#editor li.doc-split-tail::before { content: none !important; }

/* Images */
#editor img {
    max-width: 100%;
    height: auto;
    cursor: default;
}
/* a picture anchored above/below the text (a full-bleed cover, a banner):
   its own box on its own line, allowed past the text column */
#editor img.doc-anchor {
    display: block;
    max-width: none;
}
#editor img.of-selimg {
    outline: 2px solid var(--of-accent);
    outline-offset: 1px;
}
.of-img-handle {
    position: fixed;
    width: 13px;
    height: 13px;
    background: var(--of-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: nwse-resize;
    z-index: 1200;
    touch-action: none;
}

/* Tables */
#editor table.of-table {
    border-collapse: collapse;
    width: 100%;
    margin: 8pt 0;
    /* columns keep their widths (equal until resized) whatever is typed
       into them - the way Word and the export lay a table out */
    table-layout: fixed;
}
#editor table.of-table td, #editor table.of-table th {
    border: 1px solid #b9bec7;
    padding: 4px 8px;
    min-width: 2em;
    vertical-align: top;
    overflow-wrap: break-word;
}
#editor table.of-table th { background: #f1f3f4; font-weight: 600; }
/* an imported table states its own borders, padding and width inline */
#editor table.of-table[data-docx] { margin-top: 0; margin-bottom: 0; }
#editor table.of-table[data-docx] td, #editor table.of-table[data-docx] th { min-width: 0; }

/* Footnotes: drawn at the bottom of the page that references them */
.doc-fn-area {
    position: absolute;
    z-index: 6;
    font-family: Arial, "Noto Sans", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
    font-size: 10pt;
    color: #000000;
}
.doc-fn-sep {
    height: 10.8pt;
    position: relative;
}
.doc-fn-sep::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5.02pt;
    width: 144pt;
    border-top: 0.75pt solid #000000;
}
.doc-fn { outline: none; }
.doc-fn p { margin: 0; }
.doc-fn sup.doc-fnnum { user-select: none; }
.doc-fn-measure {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Multi-column layout: title/author blocks marked via
   Format > Page layout > Span all columns stretch across every column */
#editor .col-span-all { column-span: all; }
/* A run of text between full-width blocks in a multi-column document: the
   paginator wraps it (layout only, never saved) and gives the part that
   runs past a page bottom the height that is left, filled column by
   column; everything else balances. */
#editor .doc-colsec {
    column-count: var(--doc-cols, 2);
    column-gap: var(--doc-colgap, 8mm);
    column-fill: balance;
}
#editor .doc-colsec.doc-colsec-fill { column-fill: auto; }

/* ============ Page breaks (explicit + automatic pagination) ============
   An explicit break is a real block in the flow, stretched by the
   paginator to eat the rest of its sheet; so is every automatic spacer.
   Nothing is painted over the gap between two sheets - there is simply no
   sheet there (#pageSheets). */
.doc-pagebreak {
    position: relative;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    break-after: page;
    page-break-after: always;
}
@media print {
    /* the sheet cut is a screen affordance; the printer paginates for real */
    .doc-pagebreak { height: 0 !important; }
    #pageSheets { display: none; }
    /* automatic spacers are layout-only - the printer re-paginates */
    .doc-autobreak { display: none !important; }
}

/* ============ Table grid creator (Insert > Table) ============ */
.doc-tgrid-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--of-fg);
    margin-bottom: 8px;
}
.doc-tgrid {
    display: grid;
    grid-template-columns: repeat(10, 20px);
    gap: 3px;
    justify-content: center;
    touch-action: none;
}
.doc-tgrid-cell {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--of-border);
    border-radius: 3px;
    background: var(--of-chrome-bg2);
    cursor: pointer;
}
.doc-tgrid-cell.hot {
    background: var(--of-accent-soft);
    border-color: var(--of-accent);
}

/* Layout boxes: visualize which regions span all columns (orange) and
   which flow inside the columns (blue) - View > Layout boxes */
#page { position: relative; }
body.doc-show-boxes #editor > *:not(.doc-colsec):not(.doc-autobreak),
body.doc-show-boxes #editor > .doc-colsec > * {
    outline: 1px dashed rgba(66, 133, 244, 0.55);
    outline-offset: 1px;
}
body.doc-show-boxes #editor > .col-span-all {
    outline: 2px solid rgba(224, 123, 31, 0.75);
    outline-offset: 1px;
    position: relative;
}
body.doc-show-boxes #editor > .col-span-all::after {
    content: "full width";
    position: absolute;
    top: -9px;
    right: 0;
    font-size: 9px;
    line-height: 14px;
    padding: 0 6px;
    color: #fff;
    background: rgba(224, 123, 31, 0.85);
    border-radius: 7px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
}

/* Checklists - checkbox drawn with ::before, never an emoji glyph */
#editor ul.of-checklist {
    list-style: none;
    padding-left: 28px;
}
#editor ul.of-checklist > li {
    position: relative;
    margin: 3pt 0;
}
#editor ul.of-checklist > li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0.22em;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 1.5px solid #8a8f98;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    line-height: 11px;
    text-align: center;
}
#editor ul.of-checklist > li:hover::before { border-color: var(--of-accent); }
#editor ul.of-checklist > li.checked::before {
    content: "\2713";
    background: var(--of-accent);
    border-color: var(--of-accent);
    color: #fff;
}
#editor ul.of-checklist > li.checked {
    text-decoration: line-through;
    color: #9aa0a6;
}

/* Find highlights */
#editor span.of-find-hit { background: #ffe66b; color: #202124; border-radius: 2px; }
#editor span.of-find-hit.of-find-cur { background: #ffab40; }

/* ============ Find panel ============ */
.of-find-panel {
    position: fixed;
    top: 92px;
    right: 26px;
    z-index: 1000;
    background: var(--of-chrome-bg);
    border: 1px solid var(--of-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px var(--of-shadow);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: calc(100vw - 40px);
}
.of-find-panel .fp-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.of-find-panel .of-tinput { width: 200px; flex: 1 1 auto; }
.of-find-panel .of-btn { padding: 5px 10px; white-space: nowrap; }
.fp-count {
    font-size: 12px;
    color: var(--of-fg-soft);
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}

/* ============ Toolbar tweaks ============ */
#toolbar .of-tselect { max-width: 132px; }
#toolbar select.tb-style { width: 96px; }
#toolbar select.tb-font { width: 118px; }
#toolbar select.tb-size { width: 58px; }
.tb-color-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
}
.tb-color-wrap:hover { background: var(--of-hover); }
.tb-color-wrap i.icon { margin: 0 !important; font-size: 12px !important; line-height: 1 !important; }
.tb-color-wrap input[type="color"] {
    width: 20px;
    height: 7px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* ============ Special characters dialog ============ */
.sc-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--of-border);
    padding-bottom: 8px;
}
.sc-tab {
    border: 1px solid var(--of-border);
    background: var(--of-chrome-bg2);
    color: var(--of-fg);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.sc-tab:hover { background: var(--of-hover); }
.sc-tab.active {
    background: var(--of-accent);
    border-color: var(--of-accent);
    color: #fff;
}
.sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.sc-char {
    border: 1px solid transparent;
    background: transparent;
    color: var(--of-fg);
    border-radius: 6px;
    font-size: 19px;
    height: 38px;
    cursor: pointer;
    line-height: 1;
}
.sc-char:hover {
    background: var(--of-hover);
    border-color: var(--of-border);
}

/* ============ Page setup dialog ============ */
.ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
.ps-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--of-fg);
}
.ps-check input { width: auto; }

/* ============ Link / image / table dialogs ============ */
.dlg-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

/* ============ Print ============ */
@media print {
    #workspace { padding: 0; overflow: visible; }
    #pageWrap { width: auto; margin: 0; }
    #page {
        box-shadow: none !important;
        border-radius: 0;
        zoom: 1 !important;   /* cancel the on-screen zoom set inline by the framework */
        display: block;
    }
    .of-find-panel, .of-img-handle { display: none !important; }
    .doc-hf { border: none !important; color: #444; }
    .doc-hf:empty { display: none; }
    .doc-hf:empty::before { content: none; }
    #editor img.of-selimg { outline: none; }
    #editor span.of-find-hit { background: transparent; }
    #editor a { color: #1a58c2; }
}

/* ============ Review: comments ============ */
#editor span.doc-cmt {
    background: rgba(255, 213, 79, 0.35);
    border-bottom: 2px solid #f0b429;
    cursor: pointer;
}
#editor span.doc-cmt.flash {
    background: rgba(255, 179, 0, 0.6);
    transition: background 0.3s;
}
body.dark #editor span.doc-cmt { background: rgba(255, 213, 79, 0.22); }

#docCmtPanel {
    position: fixed;
    top: 92px;
    right: 12px;
    bottom: 40px;
    width: 270px;
    z-index: 850;
    display: flex;
    flex-direction: column;
    background: var(--of-chrome-bg);
    border: 1px solid var(--of-border);
    border-radius: 8px;
    box-shadow: 0 6px 22px var(--of-shadow);
    overflow: hidden;
}
.doc-cmt-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--of-fg);
    border-bottom: 1px solid var(--of-border);
}
.doc-cmt-head i.icon { margin: 0; color: var(--of-fg-soft); }
.doc-cmt-count { color: var(--of-fg-soft); font-weight: 400; }
.doc-cmt-close { margin-left: auto; }
.doc-cmt-list { flex: 1; overflow-y: auto; padding: 8px; }
.doc-cmt-empty { font-size: 12.5px; color: var(--of-fg-soft); padding: 8px 4px; }
.doc-cmt-card {
    border: 1px solid var(--of-border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--of-chrome-bg2);
}
.doc-cmt-card:hover { border-color: var(--of-fg-soft); }
.doc-cmt-card.active { border-color: var(--of-accent); box-shadow: 0 0 0 1px var(--of-accent); }
.doc-cmt-quote {
    font-size: 11.5px;
    color: var(--of-fg-soft);
    border-left: 3px solid #f0b429;
    padding-left: 6px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-cmt-body { font-size: 13px; color: var(--of-fg); white-space: pre-wrap; }
.doc-cmt-when { font-size: 10.5px; color: var(--of-fg-soft); margin-top: 5px; }
.doc-cmt-actions { display: flex; gap: 2px; margin-top: 4px; }

/* ============ Review: track changes ============ */
#editor ins.doc-ins {
    color: #188038;
    text-decoration: underline;
    background: rgba(24, 128, 56, 0.08);
}
#editor del.doc-del {
    color: #c5221f;
    text-decoration: line-through;
    background: rgba(197, 34, 31, 0.08);
}
body.dark #editor ins.doc-ins { color: #6dd58c; background: rgba(109, 213, 140, 0.1); }
body.dark #editor del.doc-del { color: #f28b82; background: rgba(242, 139, 130, 0.1); }

@media print {
    #docCmtPanel { display: none !important; }
}

/* ============ PDF export state ============
   While docs_pdf.js draws the pages, review marks show as resolved: the
   suggestions accepted and the comment highlights off - what every other
   export writes too. (Hiding deletions changes the flow, so the export
   repaginates after setting this.) */
body.doc-exporting #editor span.doc-cmt { background: none; border-bottom: 0; }
body.doc-exporting #editor ins.doc-ins { color: inherit; text-decoration: inherit; background: none; }
body.doc-exporting #editor del.doc-del { display: none; }
body.doc-exporting .doc-hf-lead:empty::before { content: none; }