/* Tiptap Editor Styles */

/* Enhanced Context Panel Styles */
.context-panel {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  flex-shrink: 0; /* Prevent shrinking */
  width: 320px; /* Fixed width */
  max-height: 100vh; /* Max height constraint */
  overflow-y: auto; /* Allow scrolling */
}

.context-panel::-webkit-scrollbar {
  width: 6px;
}

.context-panel::-webkit-scrollbar-track {
  background: transparent;
}

.context-panel::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

.data-card {
  transition: all 0.2s ease-in-out;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Toolbar group containers */
.toolbar-group {
  transition: border-color 0.2s, background-color 0.2s;
}

.toolbar-group:hover {
  @apply border-gray-300 bg-gray-100;
}

.toolbar-group:focus-within {
  @apply border-blue-300 bg-blue-50;
}

/* Toolbar button styles. Visual sizing (h-8 w-8, hover bg-gray-100) is
 * set on the markup via Tailwind utilities — the rules here just lock
 * the FA icon size to 14px (down from 16px) so heavy glyphs like
 * fa-image / fa-signature read at the same weight as line glyphs like
 * fa-align-*, and provide the .active state. */
.toolbar-button {
  position: relative;
}

.toolbar-button .fa,
.toolbar-button [class^="fa-"],
.toolbar-button [class*=" fa-"] {
  font-size: 14px;
  line-height: 1;
}

.toolbar-button.active {
  @apply bg-blue-50 text-blue-700;
  font-weight: 500;
}

.toolbar-button.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 2px;
  background: currentColor;
  border-radius: 0 2px 2px 0;
}

/* Custom hover tooltip for toolbar buttons. Drives off `data-tooltip`
 * so the native browser title popup (slow, ugly, unstyled) stays out of
 * the way. Centers below the button regardless of LTR/RTL since the
 * `left: 50%; translateX(-50%)` math is direction-agnostic. */
.toolbar-button[data-tooltip] {
  position: relative;
}

.toolbar-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease 200ms;
  z-index: 60;
}

.toolbar-button[data-tooltip]:hover::after {
  opacity: 1;
}

/* Autosave status styles */
.autosave-status {
  min-width: 140px;
}

.autosave-indicator {
  transition: background-color 0.3s;
}

/* Autosave state colors */
.autosave-status[data-status="saved"] .autosave-indicator {
  background-color: #22c55e; /* green-500 */
}

.autosave-status[data-status="saved"] {
  border-color: #bbf7d0; /* green-200 */
}

.autosave-status[data-status="saving"] .autosave-indicator {
  background-color: #3b82f6; /* blue-500 */
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.autosave-status[data-status="saving"] {
  border-color: #bfdbfe; /* blue-200 */
}

.autosave-status[data-status="error"] .autosave-indicator {
  background-color: #ef4444; /* red-500 */
}

.autosave-status[data-status="error"] {
  border-color: #fecaca; /* red-200 */
}

.autosave-status[data-status="ready"] .autosave-indicator {
  background-color: #d1d5db; /* gray-300 */
}

.autosave-status[data-status="pending"] .autosave-indicator {
  background-color: #eab308; /* yellow-500 */
}

.autosave-status[data-status="pending"] {
  border-color: #fef08a; /* yellow-200 */
}

/* Editor container */
.ProseMirror {
  outline: none;
  word-wrap: break-word;
  min-height: 150px;
}

/* Editor content styles for Stimulus controller */
[data-tiptap-editor-target="editor"] {
  @apply px-6 py-4;
}

[data-tiptap-editor-target="editor"]:focus {
  @apply outline-none ring-2 ring-blue ring-offset-2;
}

/* Basic typography */
.ProseMirror h1 {
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.ProseMirror h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.ProseMirror p {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* Lists */
.ProseMirror ul,
.ProseMirror ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.ProseMirror ul {
  list-style-type: disc;
}

.ProseMirror ol {
  list-style-type: decimal;
}

.ProseMirror li {
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

.ProseMirror li > h1,
.ProseMirror li > h2 {
  display: inline;
  margin: 0;
}

/* Fix for nested headings and lists */
.ProseMirror li h1,
.ProseMirror li h2 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  display: inline;
}

/* Toolbar */
.tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
  background-color: #f9fafb;
}

/* Toolbar buttons */
.tiptap-button {
  padding: 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color 0.2s;
}

.tiptap-button:hover {
  background-color: #e5e7eb;
}

.tiptap-button.active,
.tiptap-button.bg-lavender/20 {
  @apply bg-blue/20;
}

/* RTL support */
[dir="rtl"] .ProseMirror ul,
[dir="rtl"] .ProseMirror ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* RTL lists in editor */
.ProseMirror ul[dir="rtl"],
.ProseMirror ol[dir="rtl"] {
  direction: rtl;
  padding-left: 0;
  padding-right: 2.5rem;
  margin-left: 0;
  margin-right: 0;
}

.ProseMirror ul[dir="rtl"] li,
.ProseMirror ol[dir="rtl"] li {
  direction: rtl;
  text-align: right;
}

/* For Webkit browsers (Chrome, Safari) */
.ProseMirror ul[dir="rtl"] {
  list-style-type: disc;
}

.ProseMirror ol[dir="rtl"] {
  list-style-type: decimal;
}

/* RTL paragraphs and headings */
.ProseMirror p[dir="rtl"],
.ProseMirror h1[dir="rtl"],
.ProseMirror h2[dir="rtl"],
.ProseMirror h3[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Placeholder Styling with Prominent Amber/Orange Gradients */
.placeholder-highlight {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
  display: inline-block;
  margin: 0 2px;
  animation: placeholderPulse 2s ease-in-out infinite;
}

@keyframes placeholderPulse {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
  }
}

/* Template Preview Modal Styles */
.template-preview-content .placeholder-highlight {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  color: #92400e;
  text-shadow: none;
  font-weight: 500;
}

/* Template Item Hover Effects */
.template-item {
  position: relative;
  overflow: hidden;
}

.template-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s;
}

.template-item:hover::before {
  left: 100%;
}

/* Quick Insert Panel Styles */
#quick-insert-panel {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Quick Add Form Styles */
#quick-add-form {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 0;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#quick-add-form input,
#quick-add-form select,
#quick-add-form textarea {
  background-color: white;
  transition: all 0.2s ease;
}

#quick-add-form input:focus,
#quick-add-form select:focus,
#quick-add-form textarea:focus {
  background-color: #fefefe;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.template-category h4 {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  z-index: 10;
  padding: 8px 0;
  margin: 0 -16px 12px -16px;
  padding-left: 16px;
  border-bottom: 1px solid #f3f4f6;
}

/* Search Input Enhancement */
#template-search:focus {
  background-color: #fefefe;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


/* Success Feedback Animation */
.insert-success-feedback {
  animation: slideInRight 0.3s ease-out, slideOutRight 0.3s ease-in 2s forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Modal Entrance Animation */
#template-preview-modal.show {
  animation: modalFadeIn 0.2s ease-out;
}

#template-preview-modal.show > div {
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Editor Layout Fixes */
.report-editor-container {
  min-height: 100vh;
  display: flex;
  flex-direction: row; /* Ensure horizontal layout */
}

.report-editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensure editor content has enough bottom padding */
.ProseMirror {
  min-height: 400px;
  padding-bottom: 4rem; /* Increased bottom padding */
}

/* Footer overlap fix */
body.report-editor-page {
  overflow-x: hidden; /* Only hide horizontal overflow */
  position: relative;
}

.report-editor-page footer {
  display: none; /* Hide footer on report editor page */
}

/* Variable Conversion Modal Animations */
.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.animate-fadeOut {
  animation: fadeOut 0.2s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide ProseMirror's default horizontal drop cursor */
.ProseMirror .ProseMirror-dropcursor,
.ProseMirror-dropcursor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Drop Cursor Animation */
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Insertion Point Pulse (shows where content WILL be inserted) */
@keyframes insertion-point-pulse {
  0%, 100% {
    background-color: #3B82F6;
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    background-color: #60A5FA;
    transform: scaleX(1.5);
    opacity: 0.8;
  }
}

.insertion-point-indicator {
  display: inline-block;
  width: 3px;
  height: 1.3em;
  background-color: #3B82F6;
  margin-left: -1.5px;
  margin-right: -1.5px;
  animation: insertion-point-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
  vertical-align: text-bottom;
  border-radius: 1px;
}

/* Inserted Content Highlight (shows what WAS just inserted) - Notion-like */
@keyframes inserted-content-highlight {
  0% {
    background-color: rgba(251, 191, 36, 0.4); /* Much brighter amber - amber-400 at 40% */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
  }
  20% {
    background-color: rgba(251, 191, 36, 0.3);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

.just-inserted {
  animation: inserted-content-highlight 2500ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
}

/* Entry Animation for Inserted Content */
@keyframes slide-in-fade {
  0% {
    opacity: 0.3;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.inserting {
  animation: slide-in-fade 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  #quick-insert-panel {
    right: 1rem;
    left: 1rem;
    width: auto;
  }

  #template-preview-modal .max-w-2xl {
    max-width: calc(100vw - 2rem);
  }

  .context-panel {
    width: 280px; /* Slightly narrower on mobile */
  }

  /* Make header button smaller on mobile */
  .report-editor-main .bg-blue-600 {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
}
/* Note Tiptap WYSIWYG editor (note-tiptap controller).
 * Lightweight rules so the empty state is visible/editable and the
 * Placeholder extension renders its hint text. The wrapper element
 * carries data-controller="note-tiptap" so we scope by that instead
 * of bleeding into other Tiptap mounts on the page. */
[data-controller~="note-tiptap"] [data-note-tiptap-target="editorElement"] {
  display: flex;
  flex-direction: column;
}

[data-controller~="note-tiptap"] [data-note-tiptap-target="editorElement"] .ProseMirror {
  min-height: inherit;
  outline: none;
  /* Stretch the editable region to fill the wrapper so clicking
   * anywhere inside it (e.g. the empty space below a short note in
   * expanded compose mode) lands on ProseMirror and focuses the
   * caret instead of being eaten by padding. */
  flex: 1;
}

[data-controller~="note-tiptap"] [data-note-tiptap-target="editorElement"] .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #9ca3af;
  pointer-events: none;
  height: 0;
}

[data-controller~="note-tiptap"] [data-note-tiptap-target="editorElement"] .ProseMirror[dir="rtl"] p.is-editor-empty:first-child::before {
  float: right;
}

/* Report image rendering — used both in the editor and in exported HTML/PDF.
 * Alignment classes shift only the <img>; the caption stays centered under
 * the figure, regardless of image position. */
.report-image-figure {
  display: block;
  margin: 1.25rem 0;
  max-width: 100%;
}

.report-image {
  display: block;
  height: auto;
  border-radius: 0.375rem;
  /* An image may never be taller than the page it sits on.
     Images are atoms: the fitter cannot split one across a page boundary
     (`canSplit` is false), so a figure taller than the content area has
     nowhere to go and simply spills past the sheet and over the desk. A
     portrait test scan does this easily — an 800x2000 sheet renders 1605px
     tall in a 642px column, against 933px of page.

     The 6rem is the figure's own chrome, which has to fit on the page too:
     1.25rem of margin above and below (40px) plus up to two lines of
     figcaption at 0.875rem with its 0.5rem margin (~50px).

     `--report-page-content-height` is stamped by the editor (and by the PDF
     layout) from the one geometry source both sides share, so this cap moves
     if the page ever does. The fallback is the A4 value it computes today. */
  max-height: calc(var(--report-page-content-height, 933px) - 6rem);
  object-fit: contain;
}

.report-image--small  { max-width: 33%; }
.report-image--medium { max-width: 66%; }
.report-image--full   { max-width: 100%; }

/* Auto-margin positioning of the image within its figure block. `left` puts
 * the image flush left, `right` flush right, `center` centered — physical
 * positioning, not logical, so it matches the PDF's text-align rules
 * regardless of writing direction. */
.report-image-figure--left   .report-image { margin-left: 0;    margin-right: auto; }
.report-image-figure--center .report-image { margin-left: auto; margin-right: auto; }
.report-image-figure--right  .report-image { margin-left: auto; margin-right: 0; }

/* A caption above the image needs its gap below it, not above. Selected on
   the figure's own attribute rather than on element order so the editor's
   NodeView, renderHTML and Report#to_html all get the same spacing from the
   same signal. */
.report-image-figure[data-caption-position="above"] figcaption {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.report-image-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: italic;
  color: #4b5563;
  text-align: center;
}

.report-image-figure.is-uploading .report-image {
  opacity: 0.55;
  filter: blur(0.5px);
}

/* Selected image — soft Notion-style ring, no hard outline jump. */
.report-image-nodeview {
  transition: box-shadow 120ms ease;
}
.report-image-nodeview.is-selected .report-image-figure {
  border-radius: 0.5rem;
  box-shadow:
    0 0 0 1.5px rgb(59 130 246 / 0.85),
    0 0 0 4px rgb(59 130 246 / 0.12);
  transition: box-shadow 120ms ease;
}
.report-image-nodeview .report-image {
  transition: box-shadow 120ms ease, opacity 120ms ease, max-width 160ms ease;
}

/* Floating toolbar — pill, soft shadow, dense, snappy. */
.report-image-toolbar {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.04),
    0 4px 16px -4px rgb(15 23 42 / 0.18);
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 90ms ease, transform 90ms ease;
  z-index: 20;
}
.report-image-toolbar.is-visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Under the image instead: set by report_image_node.js when the place above
   would be the page's header strip (the first image on a page). */
.report-image-toolbar--below {
  top: auto;
  bottom: -2.5rem;
}

/* Segmented pair inside the image toolbar — the caption-position control.
   Same shape as the editor toolbar's RTL/LTR segment: a hairline box with the
   buttons flush inside it, so the two read as one control with two states
   rather than two unrelated buttons that happen to sit together. */
.report-image-toolbar__segment {
  display: inline-flex;
  align-items: stretch;
  margin: 0 2px;
  border: 1px solid var(--report-image-toolbar-rule, rgb(15 23 42 / 0.10));
  border-radius: 6px;
  overflow: hidden;
}

.report-image-toolbar__segment .report-image-toolbar__button {
  border-radius: 0;
}

.report-image-toolbar__segment .report-image-toolbar__button + .report-image-toolbar__button {
  border-inline-start: 1px solid var(--report-image-toolbar-rule, rgb(15 23 42 / 0.10));
}

.report-image-toolbar__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
}
.report-image-toolbar__button:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.report-image-toolbar__button:active {
  background: #e2e8f0;
}
.report-image-toolbar__button.is-active {
  background: #1e293b;
  color: #ffffff;
}
.report-image-toolbar__button.is-active:hover {
  background: #0f172a;
}
.report-image-toolbar__button--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}
.report-image-toolbar__button .fas {
  font-size: 13px;
}
.report-image-toolbar__label {
  letter-spacing: 0.01em;
}

.report-image-toolbar__separator {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgb(15 23 42 / 0.08);
  margin: 0 4px;
}

/* Caption — clean, lightweight, modern. Italics only when the user
 * explicitly applies them via the toolbar. */
.report-image-figure__caption {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.4;
}
.report-image-figure__caption:empty::before {
  content: attr(data-placeholder);
  color: #cbd5e1;
  font-weight: 400;
  pointer-events: none;
}
.report-image-figure__caption-editable {
  display: inline-block;
  min-width: 8rem;
}
.report-image-figure__caption-editable:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.25);
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 -4px;
}

@media print {
  .report-image-figure { page-break-inside: avoid; }
  .report-image        { max-height: 60vh; object-fit: contain; }
}

/* --- Pagination prototype (tiptap-pagination-plus) --- */
/* Editor body = white "paper". The gap between pages is gray (matching the
 * desk) so the white reads as discrete sheets. */
.ProseMirror.rm-with-pagination {
  margin: 24px auto;
  background: #ffffff;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  border-radius: 0;
}
/* Gap = gray slice spanning the full page width.
 * Plugin sets inline `width: calc(100% + 2px) !important`, which inline+important
 * beats any external !important — but max-width still clamps it down to 100%. */
.ProseMirror.rm-with-pagination .rm-pagination-gap {
  background: #f9fafb !important;        /* match Tailwind bg-gray-50 (desk) */
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  left: 0 !important;
  border: 0 !important;
  /* Layered box-shadows:
   *  1) horizontal gray "extensions" that paint over the editor's L/R
   *     side-shadow at the gap's y-range, visually cutting the page stack
   *     into discrete blocks.
   *  2) inset top: the page above casts a drop-shadow down into the gap.
   *  3) inset bottom: subtle rim from the page below. */
  box-shadow:
    -300px 0 0 0 #f9fafb,
     300px 0 0 0 #f9fafb,
    inset 0  10px 10px -10px rgba(0,0,0,0.18),
    inset 0 -3px  4px  -3px rgba(0,0,0,0.06) !important;
}
/* Make sure the gap and its ancestors don't clip the horizontal shadow extensions. */
.ProseMirror.rm-with-pagination,
.ProseMirror.rm-with-pagination .breaker,
.ProseMirror.rm-with-pagination .rm-page-break,
.ProseMirror.rm-with-pagination .rm-pages-wrapper {
  overflow: visible !important;
}

/* The plugin increments a CSS counter on each page-break, but doesn't wire
 * the counter value to the empty `.rm-page-number` spans. We do that here. */
.ProseMirror.rm-with-pagination .rm-page-number::before {
  content: counter(page-number);
}
.ProseMirror.rm-with-pagination .rm-page-number-plus::before {
  content: counter(page-number-plus);
}

/* Center the footer page number. Plugin renders the footer with left/right
 * child divs; some inline/plugin CSS resists `justify-content: center`. So
 * we make the footer a positioning context and absolute-center the
 * number span itself. */
.ProseMirror.rm-with-pagination .rm-page-footer {
  position: relative !important;
}
.ProseMirror.rm-with-pagination .rm-page-footer-left,
.ProseMirror.rm-with-pagination .rm-page-footer-right {
  visibility: hidden !important;
}
.ProseMirror.rm-with-pagination .rm-page-number,
.ProseMirror.rm-with-pagination .rm-page-number-plus {
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 11px !important;
  color: #9ca3af !important;             /* Tailwind gray-400 */
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
[data-controller~="tiptap-editor"]:has(.ProseMirror.rm-with-pagination) {
  background: #f9fafb;                   /* match bg-gray-50 */
}

/* Manual page break — visible "— Page break —" divider in the editor.
 * Renders as a horizontal line with a centered label so authors can see
 * exactly where the PDF will break. Serializes to <div class="forced-page-break">
 * which the PDF layout treats as `break-before: page`. */
.ProseMirror .page-break-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  user-select: none;
  cursor: default;
}
.ProseMirror .page-break-divider__line {
  flex: 1;
  height: 0;
  border-top: 1px dashed #9ca3af;
}
.ProseMirror .page-break-divider__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6b7280;
  text-transform: uppercase;
  white-space: nowrap;
}
.ProseMirror .page-break-divider.ProseMirror-selectednode {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Header strip — in-place editable PDF page-header preview above the editor.
 * Mimics the Google Docs / Word "header zone": faded text by default, with
 * a visible affordance on hover; expands into an inline editor on click. */
.header-strip {
  position: relative;
}
.header-strip [data-header-strip-target="resolvedText"],
.header-strip [data-header-strip-target="placeholder"] {
  font-family: 'Inter', 'Noto Sans Hebrew', 'Assistant', sans-serif;
}
.header-strip:hover {
  border-bottom-color: #9ca3af; /* gray-400 on hover so the zone reads as clickable */
}
.header-strip--editing {
  border-bottom-color: #93c5fd; /* blue-300 while editing */
}

/* Signature sizing + ink color — match the PDF's @page rules
 * (pdf_paged.html.erb). Signatures get a fixed small cap so the editor
 * preview matches the PDF, plus a blue-ink SVG filter so they look like
 * a ballpoint pen. The #signature-blue-ink filter is inlined in
 * _editor_content.html.erb (editor) and pdf_paged.html.erb (PDF). */
.ProseMirror .report-image-figure img[alt="Signature"],
.ProseMirror .report-image-figure img[alt="חתימה"] {
  max-width: 140px !important;
  width: auto !important;
  height: auto;
  filter: url(#signature-blue-ink);
}

/* Tables — Notion-style appearance in the editor. */
.ProseMirror .report-table {
  border-collapse: collapse;
  table-layout: fixed;
  /* Notion-style resize: total width is the SUM of column widths. The
   * resize plugin sets `colwidth` on the dragged column; the table grows
   * or shrinks accordingly. No min-width on the table or its cells —
   * any min-width crutch makes the plugin's colwidth changes invisible
   * past the floor, so dragging one column past the floor mysteriously
   * shrinks the others. Fresh tables get a sensible 120px-per-column
   * default from `insertReportTable` so they're not tiny without the
   * min-width crutch. */
  width: max-content;
  margin: 16px 0;
}


/* A table wider than the sheet has to be reachable. `.report-table` is
   `width: max-content` so the resize model works on real widths, and the desk
   is `overflow-x: hidden` — so a 10-column table ran past the sheet edge with
   no scrollbar and its last column could not be clicked into at all.
   prosemirror-tables ships `.tableWrapper { overflow-x: auto }` for exactly
   this; that stylesheet is not loaded here, so the rule lives with ours. */
.ProseMirror .tableWrapper {
  max-width: 100%;
  overflow-x: auto;
  /* The margins live HERE, not on the table.
   *
   * `overflow-x: auto` makes this wrapper a block formatting context, so a
   * margin on the table inside it no longer collapses out of it — it becomes
   * height the wrapper owns. Measured: wrapper heights [156,156] with the
   * overflow rule against [124,124] without it, and an editor gap of 36px
   * above a table where the PDF had 20px. The fitter measures the WRAPPER, so
   * every table cost the editor 32px the PDF never spends, cumulatively, and
   * the editor broke pages earlier than the paper. Any non-visible overflow
   * creates the BFC, so the rule cannot be softened — the margin has to move. */
  margin: 16px 0;
}
.ProseMirror .tableWrapper > .report-table { margin: 0; }

/* The table follows the document's direction, so a Hebrew report's first
   column is the RIGHTMOST one — the same order the PDF renders and the same
   order it is read in. This used to be forced to `ltr` to keep
   prosemirror-tables' column resizing working; that is handled properly now
   by extensions/v2/rtl_column_resize.js, which explains the whole trade-off. */
[dir="rtl"] .ProseMirror .report-table { direction: rtl; }

/* Upstream draws its own resize handle via a decoration. Under RTL we bypass
   its mouse handling entirely, so the "you can drag this" affordance has to
   come from here instead. */
.ProseMirror .report-table.is-col-resize,
.ProseMirror .report-table.is-col-resize * { cursor: col-resize; }
[dir="rtl"] .ProseMirror .report-table td,
[dir="rtl"] .ProseMirror .report-table th {
  direction: rtl;
  text-align: start;
}
.ProseMirror .report-table td,
.ProseMirror .report-table th {
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  vertical-align: top;
  position: relative;
  word-break: break-word;
}
.ProseMirror .report-table th {
  background-color: #f3f4f6;
  font-weight: 600;
  text-align: inherit;
}
.ProseMirror .report-table .selectedCell::after {
  z-index: 2;
  position: absolute;
  content: "";
  inset: 0;
  background: rgba(59, 130, 246, 0.10);
  pointer-events: none;
}
.ProseMirror .report-table .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: -2px;
  width: 4px;
  background-color: #3b82f6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.ProseMirror .report-table:hover .column-resize-handle { opacity: 1; }
.ProseMirror.resize-cursor { cursor: col-resize; }
.ProseMirror .report-table tr { break-inside: avoid; page-break-inside: avoid; }

/* Table alignment — driven by the `align` attr on the Table node,
 * mirrored to `data-table-align` on the live DOM by tagInEditorTables.
 * Matching rules in pdf_paged.html.erb keep the PDF in sync. */
.ProseMirror .report-table[data-table-align="left"]   { width: auto; margin: 16px auto 16px 0; }
.ProseMirror .report-table[data-table-align="center"] { width: auto; margin: 16px auto; }
.ProseMirror .report-table[data-table-align="right"]  { width: auto; margin: 16px 0 16px auto; }

/* ---------------------------------------------------------------------------
   The block builder's editing surface.

   `.ProseMirror` sizes h1 and h2 and stops, and the `prose prose-sm` classes
   that used to sit on this element are inert — `@tailwindcss/typography` is
   not installed (tailwind.config.js ships `plugins: []`), so they match no
   rule. With Tailwind's preflight normalizing h1..h6 to inherit, picking
   "Heading 3" or "Heading 4" in the builder changed nothing on screen: the
   node was there, it just looked exactly like body text.

   Which is the complaint this whole change exists to answer, so every level
   the style menu offers gets a size here. The scale follows the report's own
   headings rather than the raw .ProseMirror ones, because what the author is
   previewing is how the block will look in a document.
   --------------------------------------------------------------------------- */
.bb-editor-surface h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}

.bb-editor-surface h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.bb-editor-surface h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.bb-editor-surface h4 {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.875rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* The first heading in a block should not push itself away from the top of
   the editor — a block usually OPENS with its heading. */
.bb-editor-surface > :first-child {
  margin-top: 0;
}

/* Lists, for the same reason: `.ProseMirror ul` carries no marker style here
   and a bulleted list that shows no bullets is not obviously a list. */
.bb-editor-surface ul,
.bb-editor-surface ol {
  padding-inline-start: 1.5rem;
  margin-bottom: 0.75rem;
}

.bb-editor-surface ul { list-style: disc; }
.bb-editor-surface ol { list-style: decimal; }

/* StarterKit's listItem wraps its content in a paragraph, so without this
   every bullet carries a full paragraph's bottom margin. */
.bb-editor-surface li > p {
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------------
   The same toolbar, in a column half the width.

   The block builder wears `.editor-v2-toolbar` so it IS the report's bar
   rather than a lookalike — but the report gives that bar the full page and
   the authoring modal gives it one side of a two-column grid. At ~478px the
   controls overflowed and flex crushed every `.sep` to zero width, so the
   style menu and the direction control ran into each other with nothing
   between them.

   So: wrap instead of overflow, and let nothing shrink. Specificity has to
   beat `.editor-v2-toolbar .sep`, which is defined in an inline <style> later
   in the document, hence the doubled class.
   --------------------------------------------------------------------------- */
.editor-v2-toolbar.bb-toolbar {
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 6px 8px;
}

.editor-v2-toolbar.bb-toolbar .sep {
  flex: 0 0 1px;
}

.editor-v2-toolbar.bb-toolbar .tb-btn,
.editor-v2-toolbar.bb-toolbar .tb-style,
.editor-v2-toolbar.bb-toolbar .tb-dirseg {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Directional isolation for Latin runs inside RTL text.

   Applied as a decoration by extensions/v2/latin_isolate.js, so this class
   only ever appears on a span the VIEW added — never on anything stored.

   BOTH properties are load-bearing, and `isolate` alone is not enough —
   measured, after it looked sufficient and was not:

     · `unicode-bidi: isolate` stops the neutrals AROUND the island from
       binding it to the next run along. But an isolated element still
       INHERITS its direction, so inside a Hebrew paragraph the island was
       still `rtl`, the algorithm ran again within it, and `NFDA (02.2018)`
       came out reordered exactly as before.
     · `direction: ltr` is what makes the island internally left-to-right, so
       the neutrals INSIDE it — the space before `(02.2018)` — resolve the way
       a Latin phrase needs.

   Together they are the CSS spelling of Unicode's LRI … PDI, which is what
   the original measurement used to prove the fix was possible.
   --------------------------------------------------------------------------- */
.bidi-latin-isolate {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Row colours. The value is a node attribute so it saves, undoes and exports;
   these rules paint it. Keyed per value rather than rendered as an inline
   style because TableCell's `colwidth` renderer already owns `style`, and the
   last renderer to return one wins — which silently dropped the colour
   between the document and the DOM. The palette is the five chips in the
   table toolbar; add a chip, add a rule. */
.ProseMirror .report-table [data-cell-bg="#fef3c7"] { background-color: #fef3c7; }
.ProseMirror .report-table [data-cell-bg="#dbeafe"] { background-color: #dbeafe; }
.ProseMirror .report-table [data-cell-bg="#d1fae5"] { background-color: #d1fae5; }
.ProseMirror .report-table [data-cell-bg="#fee2e2"] { background-color: #fee2e2; }
.ProseMirror .report-table [data-cell-bg="#e5e7eb"] { background-color: #e5e7eb; }