/* ============================================================================
   Template Designer
   Used by Protraxx.Web.AdminSetup/Pages/Application/TemplateDesigner.razor
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Self-hosted certificate fonts (Typography → Font Family picker).
   Family names here MUST match the stacks in FontCatalog.cs. These are SIL OFL
   fonts — drop the .woff2 files into Protraxx.Web/wwwroot/fonts/ with the exact
   names below. Until a file is present, the stack's cursive/serif fallback is
   used (e.g. Segoe Script on Windows), so the picker degrades gracefully.
   System families (Georgia/Times/Courier) need no @font-face.
   Sources (OFL, free to self-host + embed in print/PDF):
     EB Garamond  — fonts.google.com/specimen/EB+Garamond
     Dancing Script — fonts.google.com/specimen/Dancing+Script
     Great Vibes  — fonts.google.com/specimen/Great+Vibes
   ---------------------------------------------------------------------------- */
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Dancing Script';
    src: url('../fonts/DancingScript-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Great Vibes';
    src: url('../fonts/GreatVibes-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* Layout containers */
.td-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* Visible scrollbars in the designer (dark-mode default is nearly invisible).
   Targets td-canvas-wrap, td-palette, td-props — the three scrolling regions. */
.td-canvas-wrap::-webkit-scrollbar,
.td-palette::-webkit-scrollbar,
.td-props::-webkit-scrollbar { width: 12px; height: 12px; }
.td-canvas-wrap::-webkit-scrollbar-track,
.td-palette::-webkit-scrollbar-track,
.td-props::-webkit-scrollbar-track { background: rgba(127,127,127,0.08); }
.td-canvas-wrap::-webkit-scrollbar-thumb,
.td-palette::-webkit-scrollbar-thumb,
.td-props::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.45); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.td-canvas-wrap::-webkit-scrollbar-thumb:hover,
.td-palette::-webkit-scrollbar-thumb:hover,
.td-props::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.7); background-clip: padding-box; border: 2px solid transparent; }
.td-canvas-wrap, .td-palette, .td-props { scrollbar-color: rgba(127,127,127,0.45) rgba(127,127,127,0.08); scrollbar-width: thin; }
.td-palette { width: 210px; min-width: 210px; overflow-y: auto; border-right: 1px solid var(--mud-palette-lines-default); padding: 8px; background: var(--mud-palette-surface); }
.td-props { width: 260px; min-width: 260px; overflow-y: auto; border-left: 1px solid var(--mud-palette-lines-default); padding: 8px; background: var(--mud-palette-surface); }

/* Canvas + scaling wrapper */
/* CSS Grid centering instead of flex: more predictable when the child is CSS-scaled by `transform`,
   which leaves the layout box at the pre-transform size (e.g. 850px portrait) and confuses flex
   justify-content. `place-items: start center` aligns top + horizontally-centered without that math. */
.td-canvas-wrap { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: start center; padding: 12px; background: var(--mud-palette-background-grey); }
.td-canvas-scaler { /* uses CSS `zoom` (inline style) — affects layout so canvas-wrap doesn't show ghost horizontal overflow */ }
.td-canvas { position: relative; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.25); overflow: hidden; }
/* Document-flow edit mode: page grows with content, no clipping at the page fold */
.td-canvas.td-canvas-flow { overflow: visible; height: auto; }
.td-canvas.td-show-grid { background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px); }

/* Preview mode forces dark text on the white canvas regardless of MudBlazor theme */
.td-canvas.td-preview-mode,
.td-canvas.td-preview-mode * { color: #000 !important; }
.td-canvas.td-preview-mode hr { border-color: #000 !important; }

/* Block (positioned absolutely inside canvas) */
.td-block-el { position: absolute; box-sizing: border-box; cursor: move; user-select: none; }
.td-block-el:hover { outline: 1px dashed var(--mud-palette-primary-lighten); }
.td-block-el.td-selected { outline: 2px solid var(--mud-palette-primary) !important; }
.td-block-el.td-hidden { opacity: 0.4; }
.td-block-el.td-dragging { pointer-events: none; opacity: 0.85; }

/* Block card (edit-mode wrapper inside td-block-el) */
.td-block-card { border: 2px solid var(--mud-palette-lines-default); border-radius: 6px; cursor: pointer; background: var(--mud-palette-surface); transition: border-color 0.15s; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.td-block-card:hover { border-color: var(--mud-palette-primary-lighten); }
.td-block-header { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 8px; background: var(--mud-palette-background-grey); border-bottom: 1px solid var(--mud-palette-lines-default); border-radius: 4px 4px 0 0; flex-shrink: 0; }
.td-block-header-icon { display: inline-flex; align-items: center; opacity: 0.7; flex-shrink: 0; }
.td-block-header-actions { display: flex; align-items: center; gap: 1px; }
.td-block-header .td-flow-btn { width: 22px; height: 22px; border-radius: 3px; }
.td-block-header .td-flow-btn svg { width: 14px; height: 14px; }
.td-block-header-label { flex: 1; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); }
/* Signature block: indicates it inherits the template signature (default / by-topic) */
.td-block-badge { font-size: 9px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; padding: 1px 6px; border-radius: 9px; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default); cursor: help; }
.td-block-badge.td-block-badge-topic { color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.td-block-content { padding: 6px 10px; color: var(--mud-palette-text-primary); overflow: hidden; flex: 1; }

/* Preview-mode blocks are positioned via inline style from RenderPositionedPreview in CanvasView.razor.
   No padding/overflow here — true WYSIWYG with edit mode means content sits at the block's exact bounds. */

/* Palette items */
.td-palette-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; margin: 3px 0; border-radius: 4px; cursor: pointer; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); font-size: 12px; user-select: none; color: var(--mud-palette-text-primary); }
.td-palette-item:hover { background: var(--mud-palette-primary-hover); border-color: var(--mud-palette-primary-lighten); }

/* Native palette (replaces MudExpansionPanels for perf — fewer pointer handlers) */
.td-palette-title       { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); margin-bottom: 2px; }
.td-palette-hint        { font-size: 11px; color: var(--mud-palette-text-secondary); opacity: 0.6; margin-bottom: 8px; }
.td-palette-search      { display: block; width: 100%; padding: 5px 8px; margin-bottom: 6px; font-size: 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-sizing: border-box; }
.td-palette-search:focus { outline: none; border-color: var(--mud-palette-primary); }
.td-palette-empty       { font-size: 11px; font-style: italic; color: var(--mud-palette-text-secondary); padding: 8px 4px; }
.td-palette-group       { margin: 0 0 4px 0; }
.td-palette-group > summary.td-palette-group-header { font-size: 11px; font-weight: 600; padding: 4px 6px; cursor: pointer; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; list-style: none; user-select: none; border-radius: 4px; }
.td-palette-group > summary.td-palette-group-header::-webkit-details-marker { display: none; }
.td-palette-group > summary.td-palette-group-header:hover { background: rgba(127,127,127,0.06); }
.td-palette-group > summary.td-palette-group-header::before { content: "▾ "; font-size: 9px; opacity: 0.5; }
.td-palette-group:not([open]) > summary.td-palette-group-header::before { content: "▸ "; }

/* Empty state */
.td-empty-canvas { color: var(--mud-palette-text-disabled); text-align: center; font-style: italic; font-size: 13px; border: 2px dashed var(--mud-palette-lines-default); border-radius: 8px; padding: 24px; }

/* Template-level page border (Page Settings → Page border). A transparent-centre
   frame inset from the paper edge, behind content, non-interactive. Emitted as a
   child of the page container by the layout engines (preview/print) and the edit
   views. The page containers must be positioning contexts. */
.td-page-border { position: absolute; pointer-events: none; box-sizing: border-box; }
.td-doc-flow, .td-flow-page { position: relative; }

/* Toolbar — native HTML (no MudBlazor). Two-row layout: identity+actions on top,
   canvas controls below. All buttons/inputs are native elements styled to match
   MudBlazor's dense look. Eliminates the ~30 MudBlazor pointer-handler chains
   that were dominating mouse-move CPU time. */
.td-toolbar { display: flex; flex-direction: column; background: var(--mud-palette-surface); box-shadow: 0 2px 4px rgba(0,0,0,0.08); z-index: 100; flex-shrink: 0; }
.td-toolbar-row { display: flex; align-items: center; gap: 14px; padding: 10px 20px; flex-wrap: wrap; }
.td-toolbar-row-primary { border-bottom: 1px solid var(--mud-palette-lines-default); padding: 14px 20px; }
.td-bc-link { color: var(--mud-palette-primary); text-decoration: none; font-size: 14px; padding: 4px 2px; }
.td-bc-link:hover { text-decoration: underline; }
.td-bc-link-btn { background: none; border: 0; cursor: pointer; font: inherit; }
.td-bc-icon { color: var(--mud-palette-tertiary); display: inline-flex; }
.td-bc-icon svg { width: 18px; height: 18px; }
.td-spacer { flex: 1 1 auto; }
.td-divider-v { display: inline-block; width: 1px; height: 28px; background: var(--mud-palette-lines-default); margin: 0 6px; }

/* Inputs */
.td-name-input { flex: 1 1 280px; min-width: 220px; max-width: 540px; padding: 10px 14px; font-size: 15px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.td-name-input:focus { outline: none; border-color: var(--mud-palette-primary); }
.td-tb-select { padding: 8px 10px; font-size: 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); width: 90px; height: 38px; box-sizing: border-box; }
.td-tb-select:focus { outline: none; border-color: var(--mud-palette-primary); }

/* Buttons — base icon button, filled button, grouped button, text button */
.td-tb-btn,
.td-tb-btn-filled,
.td-tb-btn-grouped,
.td-tb-btn-text { font: inherit; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 4px; transition: background 0.08s, color 0.08s; }
.td-tb-btn { width: 38px; height: 38px; padding: 0; background: transparent; color: var(--mud-palette-text-secondary); }
.td-tb-btn svg { width: 22px; height: 22px; }
.td-tb-btn:hover:not(:disabled) { background: rgba(127,127,127,0.16); color: var(--mud-palette-text-primary); }
.td-tb-btn:disabled { opacity: 0.3; cursor: default; }
.td-tb-btn-active { background: rgba(33,150,243,0.18); color: var(--mud-palette-primary); }
.td-tb-btn-active:hover { background: rgba(33,150,243,0.24); }

.td-tb-btn-filled { padding: 8px 20px; height: 38px; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: 0.02em; }
.td-tb-btn-filled svg { width: 20px; height: 20px; }
.td-tb-btn-filled:disabled { opacity: 0.5; cursor: default; }
.td-tb-btn-primary { background: var(--mud-palette-primary); }
.td-tb-btn-primary:hover:not(:disabled) { filter: brightness(0.95); }
.td-tb-btn-success { background: var(--mud-palette-success); }
.td-tb-btn-success:hover:not(:disabled) { filter: brightness(0.95); }
.td-tb-btn-warning { background: var(--mud-palette-warning); }
.td-tb-btn-warning:hover:not(:disabled) { filter: brightness(0.95); }
.td-tb-btn-info { background: var(--mud-palette-info); }
.td-tb-btn-info:hover:not(:disabled) { filter: brightness(0.95); }

.td-tb-btn-group { display: inline-flex; }
.td-tb-btn-grouped { padding: 8px 18px; height: 38px; font-size: 14px; background: transparent; color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); }
.td-tb-btn-grouped svg { width: 20px; height: 20px; }
.td-tb-btn-grouped:first-child { border-radius: 4px 0 0 4px; }
.td-tb-btn-grouped:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.td-tb-btn-grouped:hover { background: rgba(127,127,127,0.08); }
.td-tb-btn-grouped.td-tb-btn-active { background: var(--mud-palette-primary); color: #fff; border-color: var(--mud-palette-primary); }

.td-tb-btn-text { background: transparent; color: var(--mud-palette-primary); font-size: 13px; padding: 6px 10px; height: 34px; }
.td-tb-btn-text svg { width: 18px; height: 18px; }
.td-tb-btn-text:hover { background: rgba(33,150,243,0.08); }

.td-tb-icon-warn { color: var(--mud-palette-warning); display: inline-flex; }
.td-tb-icon-warn svg { width: 20px; height: 20px; }
.td-zoom-pct { min-width: 48px; text-align: center; font-size: 13px; font-weight: 500; color: var(--mud-palette-text-secondary); }
.td-version-badge { font-size: 12px; padding: 3px 8px; }

/* Auto-layout dropdown via <details>/<summary> — no JS, browser-native popover */
.td-auto-menu { position: relative; display: inline-block; }
.td-auto-menu > summary { list-style: none; }
.td-auto-menu > summary::-webkit-details-marker { display: none; }
.td-auto-menu[open] > summary { background: rgba(127,127,127,0.16); color: var(--mud-palette-text-primary); }
.td-auto-menu-content { position: absolute; top: calc(100% + 4px); left: 0; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 4px 0; min-width: 220px; z-index: 1000; }
.td-auto-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; font-size: 13px; background: transparent; border: 0; cursor: pointer; color: var(--mud-palette-text-primary); }
.td-auto-menu-item svg { width: 18px; height: 18px; }
.td-auto-menu-item:hover { background: rgba(127,127,127,0.08); }

/* Preview-source chip + spinner (replaces MudChip + MudProgressCircular) */
.td-tb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 13px; border: 1px solid var(--mud-palette-info); color: var(--mud-palette-info); border-radius: 999px; background: transparent; }
.td-tb-chip svg { width: 16px; height: 16px; }
.td-tb-caption { font-size: 13px; color: var(--mud-palette-text-secondary); }
.td-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--mud-palette-lines-default); border-top-color: var(--mud-palette-primary); border-radius: 50%; animation: td-spin 0.7s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }

/* Token-picker dropdowns (native <details>/<summary> + raw buttons — no MudBlazor) */
.td-token-menu { position: relative; display: inline-block; }
.td-token-menu > summary { list-style: none; }
.td-token-menu > summary::-webkit-details-marker { display: none; }
.td-token-menu[open] > summary { background: rgba(127,127,127,0.16); color: var(--mud-palette-text-primary); }
.td-token-menu-content { position: absolute; top: calc(100% + 4px); left: 0; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 4px 0; min-width: 200px; max-height: 460px; overflow-y: auto; z-index: 1000; }
.td-token-menu-content-wide { min-width: 280px; max-height: 70vh; }
/* Open upward so a button near the bottom of the right panel doesn't drop the menu off-screen */
.td-token-menu-up .td-token-menu-content-up { top: auto; bottom: calc(100% + 4px); }
.td-token-search { display: block; width: calc(100% - 16px); margin: 4px 8px 6px; padding: 6px 10px; font-size: 13px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-sizing: border-box; }
.td-token-search:focus { outline: none; border-color: var(--mud-palette-primary); }
.td-token-empty { padding: 12px 14px; font-size: 12px; font-style: italic; color: var(--mud-palette-text-secondary); }
.td-token-show-all { display: block; width: 100%; padding: 8px 14px; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--mud-palette-primary); background: transparent; border: 0; border-top: 1px solid var(--mud-palette-lines-default); cursor: pointer; text-align: center; font: inherit; }
.td-token-show-all:hover { background: rgba(33,150,243,0.06); }
.td-token-group { padding: 6px 14px 2px; font-size: 11px; font-weight: 600; opacity: 0.65; color: var(--mud-palette-text-secondary); user-select: none; }
.td-token-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--mud-palette-lines-default); padding-top: 8px; }
.td-token-item { display: block; width: 100%; text-align: left; padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--mud-palette-text-primary); white-space: nowrap; background: transparent; border: 0; font: inherit; }
.td-token-item:hover { background: rgba(127,127,127,0.08); }
.td-token-resolved-preview { font-size: 11px; font-style: italic; opacity: 0.6; margin-left: 4px; }

/* Native text/select/file inputs in BlockFieldEditor */
.td-props-textarea { width: 100%; padding: 6px 8px; font: inherit; font-size: 13px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); resize: vertical; box-sizing: border-box; }
.td-props-textarea:focus { outline: none; border-color: var(--mud-palette-primary); }
.td-props-select { width: 100%; padding: 6px 8px; font-size: 13px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-sizing: border-box; }
.td-props-select:focus { outline: none; border-color: var(--mud-palette-primary); }
.td-field-image-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; border: 1px solid var(--mud-palette-primary); color: var(--mud-palette-primary); border-radius: 4px; cursor: pointer; background: transparent; }
.td-field-image-upload-btn:hover { background: rgba(33,150,243,0.08); }
.td-field-image-file { display: none; }
.td-field-image-remove { margin-top: 4px; }
.td-field-image-save-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 8px; font-size: 11px; color: var(--mud-palette-info); background: transparent; border: 1px solid var(--mud-palette-info); border-radius: 4px; cursor: pointer; }
.td-field-image-save-btn:hover { background: rgba(33,150,243,0.08); }
.td-field-image-save-btn:disabled { opacity: 0.5; cursor: default; }

/* Misc */
.td-version-badge { background: var(--mud-palette-info-lighten); color: var(--mud-palette-info-darken); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.td-version-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.td-version-dialog-card { max-width: 480px; width: 100%; }
.td-breadcrumbs { padding: 8px 12px; font-size: 13px; }
.td-breadcrumbs .mud-typography-body2 { font-size: 13px; }
.td-breadcrumbs-canvas { padding: 4px 8px; }
.td-bc-sep { opacity: 0.45; margin: 0 2px; user-select: none; }
.td-bc-current { font-weight: 600; color: var(--mud-palette-text-primary); }
.td-field-image { display: flex; flex-direction: column; gap: 4px; }
.td-field-image-thumb { max-height: 60px; max-width: 100%; object-fit: contain; border: 1px dashed var(--mud-palette-lines-default); padding: 4px; background: #fff; }
.td-scope-section { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 12px; margin-top: 8px; }
.td-scope-section-title { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); margin-bottom: 8px; }
.td-scope-section-title-row { display: flex; align-items: center; justify-content: space-between; }
.td-scope-summary { font-size: 12px; line-height: 1.5; }
.td-scope-summary-label { font-weight: 600; color: var(--mud-palette-text-secondary); margin-right: 4px; }
.td-sig-form { max-width: 640px; }
.td-sig-image { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 12px; }
.td-sig-thumb { max-height: 80px; max-width: 320px; display: block; margin-bottom: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: #fff; padding: 4px; }
.td-resize-handle { position: absolute; bottom: -4px; right: -4px; width: 10px; height: 10px; background: var(--mud-palette-primary); cursor: se-resize; z-index: 10; }

/* Property panel: data-driven field row */
.td-field-row { display: flex; align-items: center; gap: 8px; }
.td-field-color { width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; padding: 2px; }

/* Property panel: native-HTML controls (refactored from MudBlazor controls for WASM perf).
   Style is intentionally minimal to match MudBlazor's "dense" look without the per-component
   overhead. Reuses .td-flow-btn for individual buttons. */
.td-props-empty       { font-size: 12px; color: var(--mud-palette-text-secondary); padding: 8px 0; }
.td-props-title       { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); margin: 0 0 4px; }
.td-props-desc        { font-size: 11px; color: var(--mud-palette-text-secondary); margin: 0 0 8px; line-height: 1.4; }
.td-props-divider     { border: 0; border-top: 1px solid var(--mud-palette-lines-default); margin: 10px 0; }
.td-props-pagebtn     { display: block; width: 100%; text-align: left; font-size: 11px; font-weight: 600; color: var(--mud-palette-primary); background: rgba(33,150,243,0.08); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 5px 8px; margin-bottom: 6px; cursor: pointer; }
.td-props-pagebtn:hover { background: rgba(33,150,243,0.16); }
.td-props-section     { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 6px 0 4px; }
.td-props-section.mt-2 { margin-top: 10px; }
.td-props-row         { display: flex; gap: 6px; }
.td-props-row .td-props-field { flex: 1; }
.td-props-field       { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.td-props-field-label { font-size: 11px; color: var(--mud-palette-text-secondary); }
.td-props-num         { width: 100%; padding: 4px 6px; font-size: 13px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-sizing: border-box; }
.td-props-num:focus   { outline: none; border-color: var(--mud-palette-primary); }
.td-props-help        { font-size: 10px; color: var(--mud-palette-text-secondary); opacity: 0.75; margin-top: 1px; }
.td-props-toggle      { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mud-palette-text-primary); cursor: pointer; padding: 2px 0; user-select: none; }
.td-props-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.td-props-toggle.mt-1 { margin-top: 4px; }

/* Signature-by-topic summary (template Page Settings) */
.td-sig-topic-summary { margin-top: 6px; padding: 6px 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: rgba(127,127,127,0.04); }
.td-sig-topic-row     { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; padding: 1px 0; }
.td-sig-topic-name    { color: var(--mud-palette-text-primary); }
.td-sig-topic-codes   { color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; text-align: right; }
.td-sig-topic-default { font-size: 10px; color: var(--mud-palette-text-secondary); margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--mud-palette-lines-default); }

/* Signature block ↔ template-signature link note (selected signature block) */
.td-sig-link       { font-size: 10px; line-height: 1.35; color: var(--mud-palette-text-secondary); background: rgba(127,127,127,0.06); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 6px 8px; margin: 4px 0; }
.td-sig-link-topic { color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.td-props-btn-group   { display: inline-flex; gap: 2px; margin-top: 2px; }
.td-props-btn-group .td-flow-btn { width: auto; height: 28px; padding: 0 8px; border: 1px solid var(--mud-palette-lines-default); }
.td-props-btn-group .td-flow-btn + .td-flow-btn { border-left: 0; }
.td-props-btn-active  { background: var(--mud-palette-primary) !important; color: #fff !important; border-color: var(--mud-palette-primary) !important; }
.td-props-btn-text    { font-size: 12px; gap: 4px; }
.td-props-remove-btn  { width: 100%; padding: 6px 8px; font-size: 12px; font-weight: 500; color: var(--mud-palette-error); background: transparent; border: 1px solid var(--mud-palette-error); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.1s; }
.td-props-remove-btn:hover { background: rgba(244, 67, 54, 0.08); }

/* ============================================================================
   Document-flow layout (template_type.layout_mode='document_flow')
   Used by DocumentFlowLayoutEngine.RenderPreview — blocks stack top-down in a
   flex column inside the canvas. Designer canvas (edit mode) is unchanged;
   this only kicks in during Preview Mode.
   ============================================================================ */
.td-doc-flow { display: flex; flex-direction: column; padding: 0.5in; gap: 14px; background: #fff; color: #000; box-sizing: border-box; }
.td-doc-block { width: 100%; }

/* 12-column grid row: holds 2+ blocks side-by-side. Children get an inline
   flex: 0 0 X% to claim their proportional width. Gap between cells is small
   so form-style certs with 3-4 fields-per-row don't look airy. */
.td-doc-row { display: flex; flex-direction: row; gap: 8px; width: 100%; }

/* ============================================================================
   Flow-mode EDITOR (FlowEditView.razor) — vertical card stack.
   Active when (!PreviewMode && layout_mode='document_flow'). Reorder via the
   ↑/↓ buttons in each card header.
   ============================================================================ */
.td-flow-wrap         { padding: 24px; background: var(--mud-palette-background-grey); min-height: 100%; display: flex; justify-content: center; }
.td-flow-page         { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.25); padding: 0.35in; box-sizing: border-box; }

.td-empty-flow        { color: var(--mud-palette-text-disabled); text-align: center; font-style: italic; font-size: 13px; border: 2px dashed var(--mud-palette-lines-default); border-radius: 8px; padding: 24px; }

/* Edit-mode row container — flex row of cards sized by ColumnSpan. Mirrors what
   DocumentFlowLayoutEngine produces in preview so the editor is WYSIWYG. */
.td-flow-row          { display: flex; gap: 4px; margin: 2px 0; align-items: stretch; }
.td-flow-card         { border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.td-flow-card-span    { font-size: 9px; font-weight: 600; color: var(--mud-palette-text-secondary); background: rgba(127,127,127,0.12); padding: 1px 5px; border-radius: 3px; margin: 0 4px; opacity: 0.75; }
.td-flow-card:hover   { border-color: var(--mud-palette-primary-lighten); }
.td-flow-selected     { border-color: var(--mud-palette-primary) !important; box-shadow: 0 0 0 3px rgba(33,150,243,0.35), 0 4px 12px rgba(33,150,243,0.18) !important; }
.td-flow-selected .td-flow-card-header { background: rgba(33,150,243,0.12); border-bottom-color: var(--mud-palette-primary); }
.td-flow-selected .td-flow-card-label  { color: var(--mud-palette-primary); }

.td-flow-card-header  { display: flex; align-items: center; gap: 1px; padding: 1px 4px; background: var(--mud-palette-background-grey); border-bottom: 1px solid var(--mud-palette-lines-default); border-radius: 3px 3px 0 0; min-height: 22px; }
.td-flow-card-icon    { display: inline-flex; align-items: center; opacity: 0.55; margin: 0 3px 0 2px; }
.td-flow-card-icon svg { width: 13px; height: 13px; }
.td-flow-card-label   { flex: 1; font-size: 11px; font-weight: 500; color: var(--mud-palette-text-secondary); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.td-flow-card-content { padding: 5px 10px; color: var(--mud-palette-text-primary); }
.td-flow-card-hidden  { opacity: 0.4; }

/* Native icon button — replaces MudIconButton for perf. Same visual: 28px square,
   transparent default, hover background, disabled fade. Color overrides via
   .td-flow-btn-warn / -error for the visibility-off / remove buttons. */
.td-flow-btn          { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: var(--mud-palette-text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s; }
.td-flow-btn:hover:not(:disabled) { background: rgba(127,127,127,0.18); color: var(--mud-palette-text-primary); }
.td-flow-btn:disabled { opacity: 0.3; cursor: default; }
.td-flow-btn-warn     { color: var(--mud-palette-warning); }
.td-flow-btn-error    { color: var(--mud-palette-error); }
.td-flow-btn-error:hover:not(:disabled) { background: rgba(244, 67, 54, 0.12); color: var(--mud-palette-error); }
/* Card-header buttons: slimmer than the default .td-flow-btn (matching the trimmed header) */
.td-flow-card-header .td-flow-btn { width: 20px; height: 20px; border-radius: 3px; }
.td-flow-card-header .td-flow-btn svg { width: 14px; height: 14px; }

/* Page-break visual marker injected by TemplateDesigner.paginatePreview (JS).
   Shows "── Page N ends ──" at the position where the print engine will
   actually break. Hidden in print so it doesn't appear on the actual output. */
.td-page-break {
    margin: 16px 0;
    padding: 4px 0;
    text-align: center;
    color: #888;
    font-size: 11px;
    font-style: italic;
    border-top: 1px dashed #b8b8b8;
    border-bottom: 1px dashed #b8b8b8;
    background: rgba(0,0,0,0.025);
    user-select: none;
}

/* Per-block-type pagination policies. Set on the wrapper via data-block-key
   so we can target specific block types without polluting the renderer HTML. */
.td-doc-block[data-block-key="attestation"]     { page-break-inside: avoid; break-inside: avoid; margin-top: 12pt; }
.td-doc-block[data-block-key="signatures"]      { page-break-inside: avoid; break-inside: avoid; }
.td-doc-block[data-block-key="title_row"]       { page-break-after:  avoid; break-after:  avoid; }
.td-doc-block[data-block-key="provider_header"] { page-break-after:  avoid; break-after:  avoid; }
.td-doc-block[data-block-key="image"] img       { display: block; }

/* The attendee_table custom renderer emits a real <table> with <thead>/<tbody>.
   page-break-inside:auto lets long tables split across pages; thead repeats
   automatically per page when the table spans pages. */
.td-doc-block[data-block-key="attendee_table"] table { page-break-inside: auto; break-inside: auto; width: 100%; border-collapse: collapse; }
.td-doc-block[data-block-key="attendee_table"] thead { display: table-header-group; }
.td-doc-block[data-block-key="attendee_table"] tfoot { display: table-footer-group; }
.td-doc-block[data-block-key="attendee_table"] tr    { page-break-inside: avoid; break-inside: avoid; }

/* Print pagination — applies to both modes but document_flow benefits the most.
   Hides chrome (left nav, top bar, preview/edit toolbars) so a Ctrl+P from
   any preview captures just the document. The canvas (#td-print-area) is
   pulled to top-left with position:absolute so chrome that's hidden via
   visibility:hidden (which RETAINS layout space) can't push it off page 1. */
@media print {
    /* @page margin boxes get auto-populated on EVERY printed page —
       Chromium/Edge/Firefox honor counter(page) + counter(pages) here.
       Mirrors the legacy SSRS sign-in sheet's "Page: N" footer. */
    @page {
        size: portrait;
        margin: 0.4in 0.4in 0.5in 0.4in;
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 9pt;
            color: #555;
            font-family: inherit;
        }
    }

    html, body { margin: 0; padding: 0; background: #fff; height: auto !important; overflow: visible !important; }

    /* Hide everything visually, then re-show only the canvas tree. */
    body * { visibility: hidden; }
    #td-print-area, #td-print-area * { visibility: visible; }

    /* Yank the canvas out of normal flow so chrome positioning can't shove it down. */
    #td-print-area {
        position: absolute !important;
        left: 0; top: 0;
        width: 100%;
        height: auto !important;
        max-width: none;
        background: #fff;
        box-shadow: none;
        overflow: visible;
    }
    .td-canvas-scaler { zoom: 1 !important; transform: none !important; }

    /* In document_flow the inner container handles padding. Drop the min-height too —
       the layout engine inlines `min-height: {canvas.Height}px` which equals the full
       paper size including margins, so it overflows the printable area by ~1.25in
       (top+bottom margin) and creates a phantom blank trailing page.
       Tighten the inter-block gap for print — on screen 14px breathes nicely; in print
       29 gaps × 14px = ~400px of whitespace and a 30-block cert pushes onto page 2. */
    .td-doc-flow { padding: 0; gap: 4px; min-height: 0 !important; }
    /* Strip user-set block margins in print so a tightly-designed cert can't
       overflow because of cumulative MarginTop/MarginBottom values. */
    .td-doc-block { margin-top: 0 !important; margin-bottom: 0 !important; }

    /* Defense-in-depth: if user prints from EDIT mode instead of Preview, strip the
       block-card chrome (header bar with icon/eye/X) and selection outlines so the
       output is at least usable. The intended path is still: toggle Preview → Ctrl+P. */
    .td-block-header,
    .td-resize-handle  { display: none !important; }
    .td-block-card     { border: none !important; background: transparent !important; }
    .td-block-content  { padding: 0 !important; }
    .td-block-el       { outline: none !important; }

    /* On-screen page-break markers must NOT appear on the printed output —
       native browser pagination handles the real breaks. */
    .td-page-break     { display: none !important; }
}