/* Engage shared editor — the frame, toolbar, and ProseMirror base for <EngageEditor>.
   One stylesheet for every surface (Clauses today; Templates/Letters later) so the editor looks and
   behaves the same everywhere. Surface-specific typography is layered via the ContentClass passed to
   the component (e.g. .clause-content-editable), so this file deliberately avoids the content box
   model — the surface owns that. */

.engage-editor {
    border: 1px solid var(--text-faint);
    border-radius: 10px;
    overflow: hidden;
    background: var(--border-primary); /* gray canvas behind the page */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative; /* anchor for the dev HTML-source overlay */
}

/* Dev-only HTML source viewer (overlays the editor; gated to Development in EngageEditor.razor). */
.engage-html-source {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--color-surface, #ffffff);
}

.engage-html-source-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-primary, #e5e7eb);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
}

.engage-html-source-actions {
    display: flex;
    gap: 6px;
}

.engage-html-source-text {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 12px 14px;
    font-family: var(--font-mono, 'JetBrains Mono', 'Cascadia Code', monospace);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary, #111827);
    background: var(--color-surface, #ffffff);
    resize: none;
    outline: none;
    /* getContent returns minified HTML (often one long line), so wrap to the panel width instead of
       scrolling sideways. break-word wraps even a long unbroken attribute/data-URI. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-y: auto;
    tab-size: 2;
}

/* Gray canvas that scrolls and centers the document page — the "desk" the page sits on. */
.engage-editor-canvas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Reserve the scrollbar gutter on BOTH sides so the vertical scrollbar doesn't push the
       centered page left — otherwise the page and the (outside-the-canvas) toolbar misalign. */
    scrollbar-gutter: stable both-edges;
    padding: 12px 24px 24px;
    background: var(--border-primary);
}

/* ---- Toolbar ---- */
/* A page-width card centered above the document, matching the page it acts on. Stays fixed at the
   top of the frame (outside the scrolling canvas) so it doesn't scroll away with the page. */
.engage-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    /* Match the page below it: same width + side insets (canvas has 24px side padding). */
    width: calc(100% - 48px);
    max-width: 1200px;
    margin: 20px auto 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.engage-editor-toolbar-group {
    display: flex;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid var(--text-faint);
}

.engage-editor-toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
}

.engage-editor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
}

.engage-editor-btn i {
    font-size: 14px;
}

.engage-editor-btn:hover {
    background: var(--border-primary);
    color: var(--text-primary);
}

.engage-editor-btn:active,
.engage-editor-btn.active {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

/* Font family / size dropdowns */
.engage-font-group {
    gap: 4px;
    align-items: center;
}

.engage-font-select {
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 13px;
    padding: 0 6px;
    cursor: pointer;
}

.engage-font-select:hover {
    border-color: var(--color-primary);
}

.engage-font-family {
    width: 150px;
}

.engage-font-size {
    width: 60px;
}

/* ---- Content = the document "page" ---- */
/* Word/letter width (8.5in), centered on the canvas, white with a page shadow + print-like margins.
   The surface's ContentClass layers only typography (font/size/colour) on top. */
.engage-editor-content {
    /* Match the Letter / Template document paper (max-width 1200px), centered, filling the canvas
       height so it reads as a full page rather than a squat box. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    min-height: calc(100vh - 250px);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 10px 28px rgba(15, 23, 42, 0.10);
    border-radius: 2px;
    padding: 60px 80px; /* matches the Letter document-paper margins */
}

/* ProseMirror base */
.engage-editor-content.ProseMirror {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.engage-editor-content.ProseMirror:focus {
    outline: none;
}

.engage-editor-content.ProseMirror li {
    position: relative;
}

/* #327 Footer region — mirrors the letterhead header row but sits at the end of the document. Three
   left/center/right cells that hold dropped token chips; resolves to a real Word footer on export. */
.engage-editor-content .layout-footer-row {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 10px;
    border-top: 1px solid var(--border-primary, #e5e7eb);
    font-size: 11px;
    color: var(--text-tertiary, #6b7280);
}

.engage-editor-content .layout-footer-row .footer-cell {
    flex: 1;
    min-width: 0;
    min-height: 20px;
    padding: 4px 6px;
    border: 1px dashed transparent;
    border-radius: 4px;
    /* Flex alignment (not just text-align) so the token chip itself sits flush left/center/right. */
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.engage-editor-content .layout-footer-row .footer-left { justify-content: flex-start; text-align: left; }
.engage-editor-content .layout-footer-row .footer-center { justify-content: center; text-align: center; }
.engage-editor-content .layout-footer-row .footer-right { justify-content: flex-end; text-align: right; }

/* Empty cell shows a faint drop target with its position glyph as a hint. */
.engage-editor-content .layout-footer-row .footer-cell:empty::before {
    content: attr(data-glyph) " footer";
    color: var(--text-faint, #cbd5e1);
    font-style: italic;
}

.engage-editor-content .layout-footer-row .footer-cell.drag-over {
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary-bg, #eff6ff);
}

/* A selected atom node — e.g. a token chip clicked in the editor. */
.engage-editor-content .ProseMirror-selectednode {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
    border-radius: 4px;
}

/* ===================================================================== */
/* #305: Engage clause-reference container styles — SHARED across the
   clause / template / letter surfaces. Copied here (from template-editor.css)
   because engage-editor.css loads globally, so the letter review page (which
   does not load template-editor.css) styles clause containers identically.
   The old TinyMCE letter editor styled these via its in-iframe content_style. */
/* ===================================================================== */
.clause-reference {
    position: relative;
    margin: 16px 0;
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    background: #fafbfc;
    transition: border-color 0.15s, box-shadow 0.15s;
    /* Ensure clicks work inside this non-editable region */
    pointer-events: auto;
}

.clause-reference:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.clause-reference.clause-outdated {
    border-color: var(--color-warning);
    background: #fffbeb;
}

.clause-reference.clause-deleted {
    border-color: #ef4444;
    background: var(--color-danger-bg-subtle);
}

.clause-reference-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--border-primary));
    border-bottom: 1px solid var(--border-primary);
    border-radius: 6px 6px 0 0;
    font-family: var(--font-sans);
    user-select: none;
    /* Ensure header is clickable */
    pointer-events: auto;
}

.clause-reference:hover .clause-reference-header {
    background: linear-gradient(135deg, var(--color-primary-bg), #bfdbfe);
    border-bottom-color: #93c5fd;
}

.clause-reference.clause-outdated .clause-reference-header {
    background: linear-gradient(135deg, var(--color-warning-bg), #fde68a);
    border-bottom-color: #fcd34d;
}

.clause-reference.clause-deleted .clause-reference-header {
    background: linear-gradient(135deg, var(--color-danger-bg), var(--color-danger-border));
    border-bottom-color: #fca5a5;
}

.clause-reference-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clause-reference-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: white;
    border-radius: 4px;
    font-size: 11px;
}

.clause-reference.clause-outdated .clause-reference-icon {
    background: var(--color-warning);
}

.clause-reference.clause-deleted .clause-reference-icon {
    background: #ef4444;
}

.clause-reference-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.clause-reference-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    /* Push the status pill + the actions cluster to the right edge, leaving the § icon and clause
       name left-aligned next to each other (header is flex with no justify-content). */
    margin-left: auto;
}

.clause-reference-status.linked {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.clause-reference-status.outdated {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.clause-reference-status.deleted {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

/* Amber "Conditional" badge for clauses governed by a clause selection rule.
   Sits between the status pill and the action buttons. */
.conditional-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    white-space: nowrap;
    cursor: default;
}

.conditional-badge .bi {
    font-size: 9px;
}

.clause-reference-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Ensure actions container is clickable */
    pointer-events: auto;
    position: relative;
    z-index: 10;
    /* Never let the actions cluster shrink — a long clause name in the header
       was pushing flex-shrink onto the buttons, clipping the icons inside. */
    flex-shrink: 0;
}

.clause-reference-btn {
    width: 24px;
    height: 24px;
    /* Lock width so flexbox can't compress the buttons when the header is tight. */
    flex: 0 0 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--text-faint);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    /* Ensure buttons are clickable inside contenteditable */
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    overflow: visible;
}

.clause-reference-btn > svg,
.clause-reference-btn > i {
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 1;
    display: block;
    flex-shrink: 0;
}

.clause-reference-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--text-placeholder);
}

.clause-reference-btn.refresh:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    border-color: #3b82f6;
}

.clause-reference-btn.unlink:hover {
    background: var(--color-warning-bg);
    color: var(--color-warning-hover);
    border-color: var(--color-warning);
}

.clause-reference-btn.remove:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: #ef4444;
}

/* #305 letters: Accept clause (green check), sits left of the remove button in the clause chrome.
   The shared engine renders this button on every clause node, but Accept is a letter-only concept —
   hide it everywhere except the letter-preset editor root (templates keep clauses linked). */
.clause-reference-btn.accept {
    display: none;
}

.engage-preset-letter .clause-reference-btn.accept {
    display: flex;
}

.clause-reference-btn.accept:hover {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: #22c55e;
}

.clause-reference-content {
    padding: 16px;
    /* Inherit font styles from the document to maintain consistency */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Preserve formatting from the clause content */
.clause-reference-content * {
    /* Allow all child elements to keep their own styles */
}

.clause-reference-content p {
    margin: 0 0 12px 0;
    display: block;
}

.clause-reference-content p:last-child {
    margin-bottom: 0;
}

.clause-reference-content div {
    margin: 0 0 12px 0;
}

.clause-reference-content div:last-child {
    margin-bottom: 0;
}

/* Preserve common formatting elements */
.clause-reference-content strong,
.clause-reference-content b {
    font-weight: bold !important;
}

.clause-reference-content em,
.clause-reference-content i:not(.bi) {
    font-style: italic !important;
}

.clause-reference-content u {
    text-decoration: underline !important;
}

.clause-reference-content ul,
.clause-reference-content ol {
    margin: 0 0 12px 0;
    padding-left: 24px;
    display: block;
}

.clause-reference-content li {
    margin-bottom: 4px;
    display: list-item;
}

/* Preserve text alignment */
.clause-reference-content .text-center,
.clause-reference-content [style*="text-align: center"] {
    text-align: center;
}

.clause-reference-content .text-right,
.clause-reference-content [style*="text-align: right"] {
    text-align: right;
}

.clause-reference-content .text-justify,
.clause-reference-content [style*="text-align: justify"] {
    text-align: justify;
}

/* Preserve headings */
.clause-reference-content h1,
.clause-reference-content h2,
.clause-reference-content h3,
.clause-reference-content h4,
.clause-reference-content h5,
.clause-reference-content h6 {
    display: block;
    margin: 0 0 12px 0;
    font-weight: bold;
}

/* Preserve line breaks */
.clause-reference-content br {
    display: block;
}

/* Make the content area editable but show it's from a clause */
.clause-reference-content:focus {
    outline: none;
    background: white;
}

/* Tooltip for clause reference buttons */
.clause-reference-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1f2937;
    color: white;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 4px;
}

/* #305: an ACCEPTED clause reads as normal body text — no container chrome (border/box/padding) —
   while staying tracked in the document (data-clause-id is kept, so the clause sidebar still lists it
   and getClauseReferences still counts it). Matches the legacy _markClauseAccepted behavior. */
.clause-reference.accepted {
    border: none;
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.clause-reference.accepted:hover {
    border: none;
    background: transparent;
    box-shadow: none;
}

.clause-reference.accepted > .clause-reference-content {
    padding: 0;
}

/* #305: read-only Engage editor (locked / preview). The in-document mutation controls are already
   inert (handleClickOn is gated on _editable). Here we also: drop the text cursor, block text
   selection, hide the clause action buttons, and disable pointer events on the interactive atoms so
   their hover affordances (the red × on tokens / layout placeholders / signatures) never appear. */
.engage-readonly {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

/* Comment-only (review) mode: locked for editing like read-only, but the reviewer must be able to
   highlight a passage to attach a comment — re-enable text selection + the text cursor. The clause/
   token/layout atoms below keep their pointer-events:none locks. */
.engage-readonly.engage-comment-only {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.engage-readonly .clause-reference-actions,
.engage-readonly .clause-reference-btn {
    display: none;
}

.engage-readonly .token-placeholder,
.engage-readonly .layout-placeholder,
.engage-readonly .signature-placeholder,
.engage-readonly .layout-header-row .header-cell,
.engage-readonly .clause-reference {
    pointer-events: none;
}

/* Belt-and-suspenders: neutralize the clause container's hover animation in read-only. */
.engage-readonly .clause-reference:hover {
    border-color: var(--border-primary);
    box-shadow: none;
}

/* ===================================================================== */
/* #305: office letterhead layout (layout-header-row) — SHARED. Copied from template-editor.css into
   the globally-loaded engage-editor.css so the LETTER page (which doesn't load template-editor.css)
   lays the letterhead out correctly: logo + office info side-by-side, all cells TOP-aligned. */
/* ===================================================================== */
.layout-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-primary);
    min-height: 40px;
}

.layout-header-row .header-cell {
    flex: 1;
    min-height: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layout-header-row .header-cell.header-left { align-items: flex-start; }
.layout-header-row .header-cell.header-center { align-items: center; }
.layout-header-row .header-cell.header-right { align-items: flex-end; }

/* Baked office cells: keep the logo image top-aligned so it lines up with the office text block
   (older letters baked the logo as vertical-align:middle — override it here). */
.layout-header-row .header-cell img { vertical-align: top; }

/* ============================================================================
   #326: office-cycle letterhead node view (letter editor). Hover arrows / ←→
   rotate through the org's active offices; a rolodex flip plays on each cycle;
   an amber "previewing — not yet applied" state + apply bar until the user
   Applies. Preview accent is AMBER (design used purple — banned per CLAUDE.md).
   ============================================================================ */
.layout-header-cycle {
    position: relative;
    padding: 18px 44px 22px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 10px;
    outline: none;
    transition: border-color .18s, background .18s;
}
/* Previewing an un-applied office: light-blue tint. */
.layout-header-cycle.lhc-dirty {
    border-color: var(--color-info);
    background: var(--color-info-bg);
}

/* Read-only / comment-only: the letterhead is inert. The JS gate already blocks hover/cycle/apply,
   but hard-hide the arrows + apply bar and kill the interactive box so it never looks cyclable. */
.layout-header-cycle.lhc-locked .lhc-arrow,
.layout-header-cycle.lhc-locked .lhc-apply-bar {
    display: none !important;
}
.layout-header-cycle.lhc-locked {
    border-color: transparent !important;
    background: transparent !important;
    cursor: default;
}

/* 3D stage for the rolodex flip. */
.lhc-stage { position: relative; perspective: 1100px; }
.lhc-panel {
    position: relative;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
/* Outgoing panel overlays the incoming one for the duration, then is removed by JS. */
.lhc-panel.lhc-outgoing {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Prev/next arrows — revealed on hover OR while previewing. */
.lhc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: #fff;
    color: var(--color-text-secondary, #6b7280);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s, border-color .15s, color .15s;
    z-index: 3;
}
.lhc-arrow.lhc-prev { left: 6px; }
.lhc-arrow.lhc-next { right: 6px; }
.layout-header-cycle.lhc-hover .lhc-arrow,
.layout-header-cycle.lhc-dirty .lhc-arrow { opacity: 1; pointer-events: auto; }
.lhc-arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Apply / cancel — two icon buttons (green check applies, X cancels), only while previewing. */
.lhc-apply-bar { display: none; }
.layout-header-cycle.lhc-dirty .lhc-apply-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 0;
    animation: lhc-bar-in .18s cubic-bezier(.4, 0, .2, 1);
}
.lhc-apply-bar button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.lhc-apply-bar .lhc-apply { background: var(--color-success, #059669); border-color: var(--color-success, #059669); color: #fff; }
.lhc-apply-bar .lhc-apply:hover { filter: brightness(1.08); }
.lhc-apply-bar .lhc-cancel { background: #fff; border-color: var(--color-border, #e5e7eb); color: var(--color-text-secondary, #6b7280); }
.lhc-apply-bar .lhc-cancel:hover { border-color: var(--color-danger, #ef4444); color: var(--color-danger, #ef4444); }
@keyframes lhc-bar-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Rolodex flip — direction-aware (next = mirror of prev). 0.46s per the design handoff. */
@keyframes rlx-in-next  { 0% { transform: translateX(46%)  rotateY(80deg)  scale(.9); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(0) rotateY(0) scale(1); opacity: 1; } }
@keyframes rlx-out-next { 0% { transform: translateX(0)    rotateY(0)      scale(1); opacity: 1; }                 100% { transform: translateX(-46%) rotateY(-80deg) scale(.9); opacity: 0; } }
@keyframes rlx-in-prev  { 0% { transform: translateX(-46%) rotateY(-80deg) scale(.9); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(0) rotateY(0) scale(1); opacity: 1; } }
@keyframes rlx-out-prev { 0% { transform: translateX(0)    rotateY(0)      scale(1); opacity: 1; }                 100% { transform: translateX(46%)  rotateY(80deg)  scale(.9); opacity: 0; } }
.lhc-panel.rlx-in-next  { animation: rlx-in-next  .46s cubic-bezier(.34, .06, .2, 1); }
.lhc-panel.rlx-in-prev  { animation: rlx-in-prev  .46s cubic-bezier(.34, .06, .2, 1); }
.lhc-panel.rlx-out-next { animation: rlx-out-next .46s cubic-bezier(.34, .06, .2, 1) forwards; }
.lhc-panel.rlx-out-prev { animation: rlx-out-prev .46s cubic-bezier(.34, .06, .2, 1) forwards; }