/* ---- Placeholder (empty document) -------------------------------- */
.docx-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #9ca3af;
  pointer-events: none;
  height: 0;
}
.docx-editor-content .ProseMirror.is-empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  float: left;
  height: 0;
  pointer-events: none;
}

/* ---- Page break (creates a new page boundary) --------------------- */
/* The page break simulates a real Word/Google-Docs page boundary:
   - The element's height is computed dynamically (via DocxEditor's
     `_layoutPagination()`) so that whatever comes AFTER it always starts
     flush at the top margin of the next simulated page — no matter how
     little content is on the page before it.
   - `--pb-gap-top` / `--pb-gap-bottom` mark where, within that height, the
     actual "space between two sheets of paper" band sits (its size is the
     page-gap, `--de-page-gap`). Everything above/below the band is plain
     page background — the tail-end margin of the page above, and the
     top margin of the page below — so there is never a stray blank box.
   - Negative left/right margins let the band span the full page width,
     breaking out of the page's left/right content padding. */
.docx-editor-content .docx-page-break,
.docx-editor-content .ProseMirror .docx-page-break {
  --pb-gap-top: 16px;      /* sensible default before JS measures layout */
  --pb-gap-bottom: 40px;
  position: relative;
  height: var(--pb-total, 56px);
  margin: 0 calc(-1 * var(--de-page-margin-x));
  background: linear-gradient(
    to bottom,
    var(--de-page-bg) 0,
    var(--de-page-bg) var(--pb-gap-top),
    #e2e8f0 var(--pb-gap-top),
    #e2e8f0 var(--pb-gap-bottom),
    var(--de-page-bg) var(--pb-gap-bottom),
    var(--de-page-bg) 100%
  );
  border: none;
  user-select: none;
  cursor: pointer;
}
/* Shadow directly above the gap band — bottom edge of the page above */
.docx-editor-content .docx-page-break::before,
.docx-editor-content .ProseMirror .docx-page-break::before {
  content: "";
  position: absolute;
  top: calc(var(--pb-gap-top) - 8px);
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 1;
}
/* Shadow directly below the gap band — top edge of the page below */
.docx-editor-content .docx-page-break::after,
.docx-editor-content .ProseMirror .docx-page-break::after {
  content: "";
  position: absolute;
  top: var(--pb-gap-bottom);
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Selected (via explicit click, or ProseMirror's own atom-node selection
   on arrow-key navigation). IMPORTANT: this element's total height is
   dynamic and can span most of a page (it includes the filler space that
   pushes content to the next page boundary) — an outline/box-shadow on
   the element itself would draw a huge box around all of that empty
   filler, not just the visible gap. So instead we recolor exactly the gap
   band (via the same --pb-gap-top/--pb-gap-bottom bounds used for the
   background gradient and the click-to-delete hit area) and tint its
   shadows, leaving the filler area untouched. */
.docx-editor-content .ProseMirror .docx-page-break.ProseMirror-selectednode {
  background: linear-gradient(
    to bottom,
    var(--de-page-bg) 0,
    var(--de-page-bg) var(--pb-gap-top),
    #bfdbfe var(--pb-gap-top),
    #bfdbfe var(--pb-gap-bottom),
    var(--de-page-bg) var(--pb-gap-bottom),
    var(--de-page-bg) 100%
  );
}
.docx-editor-content .ProseMirror .docx-page-break.ProseMirror-selectednode::before {
  background: linear-gradient(to bottom, transparent, rgba(37, 99, 235, 0.45));
}
.docx-editor-content .ProseMirror .docx-page-break.ProseMirror-selectednode::after {
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.45), transparent);
}

/* ---- Pageless mode (default) -------------------------------------- */
/* One continuous flowing surface, like Google Docs' "Pageless" format:
   - The page/content still start at one default page-sized min-height
     (set inline by `DocxEditor._resetPagination()`, via --de-page-height),
     so a short/empty document still looks like a normal sheet of paper —
     but they grow past that naturally as content is added, instead of
     being locked into whole-page increments.
   - The "Add new page" button is hidden (there's no discrete "page" to add).
   - Page breaks are visually disabled: instead of simulating a page gap
     with shadows, they collapse into a thin, non-interactive section
     divider so the document still shows where a break was placed without
     pretending there's a real page boundary there. */
.docx-editor-host[data-view-mode="pageless"] .docx-editor-add-page {
  display: none;
}
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .docx-page-break,
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .ProseMirror .docx-page-break {
  height: auto;
  margin: 1.5em 0;
  padding: 0;
  background: none;
  border: none;
  border-top: 1px dashed #cbd5e1;
  cursor: default;
}
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .docx-page-break::before,
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .docx-page-break::after,
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .ProseMirror .docx-page-break::before,
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .ProseMirror .docx-page-break::after {
  content: none;
}
.docx-editor-host[data-view-mode="pageless"] .docx-editor-content .ProseMirror .docx-page-break.ProseMirror-selectednode {
  background: none;
  border-top-color: #2563eb;
}

/* ---- Image blocks (alignment) ------------------------------------ */
.docx-editor-content .docx-image-block,
.docx-editor-content .ProseMirror .docx-image-block {
  margin: 0.6em 0;
}
.docx-editor-content .docx-image-block-left,
.docx-editor-content .ProseMirror .docx-image-block-left {
  text-align: left;
}
.docx-editor-content .docx-image-block-center,
.docx-editor-content .ProseMirror .docx-image-block-center {
  text-align: center;
}
.docx-editor-content .docx-image-block-right,
.docx-editor-content .ProseMirror .docx-image-block-right {
  text-align: right;
}
.docx-editor-content .docx-image,
.docx-editor-content .ProseMirror .docx-image {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  display: inline-block;
}

/* Floating images (text wrapping) */
.docx-editor-content .docx-image-float,
.docx-editor-content .ProseMirror .docx-image-float {
  max-width: 50%;
  height: auto;
  border-radius: 2px;
  margin-bottom: 8px;
}
.docx-editor-content .docx-image-float-left,
.docx-editor-content .ProseMirror .docx-image-float-left {
  float: left;
  margin-right: 16px;
  margin-top: 4px;
}
.docx-editor-content .docx-image-float-right,
.docx-editor-content .ProseMirror .docx-image-float-right {
  float: right;
  margin-left: 16px;
  margin-top: 4px;
}
/* Clear floats after the paragraph that contains a float */
.docx-editor-content .ProseMirror p::after,
.docx-editor-content .ProseMirror h1::after,
.docx-editor-content .ProseMirror h2::after,
.docx-editor-content .ProseMirror h3::after {
  content: "";
  display: table;
  clear: both;
}

/* Hyperlinks: cursor + hover affordance for the right-click/hover-preview
   features (see EditorContextMenu.tsx). Word/Google-Docs style. */
.docx-editor-content .ProseMirror a.docx-editor-link,
.docx-editor-content .ProseMirror a[href] {
  color: #1155cc;
  text-decoration: underline;
  cursor: pointer;
}
.docx-editor-content .ProseMirror a.docx-editor-link:hover,
.docx-editor-content .ProseMirror a[href]:hover {
  text-decoration: underline;
  opacity: 0.85;
}