/* Main Layout Grid of the Report Designer */
.report-designer-container {
  position: relative; /* establishes containing block for .designer-chat-panel */
  display: flex;
  flex-direction: column;
  height: 80vh;
  min-height: 600px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

/* Control Top bar */
.designer-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  z-index: 10;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.designer-badge {
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.template-name-input {
  max-width: 250px;
  font-weight: 600;
  border-color: #cbd5e1;
}

.margin-input-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0 0.75rem;
  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
}

.margin-input {
  width: 5rem;
  border-color: #cbd5e1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Undo/Redo buttons - same Bootstrap btn-outline-secondary as their neighbours, just icon-only
   and square instead of text-labelled. Color is pinned explicitly rather than left to inherit
   from .btn-outline-secondary - depending on what Bootstrap build/reset the host page loads,
   that class's resolved text color isn't guaranteed, and the icon's currentColor fill silently
   went white-on-white here. */
.btn-icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  padding: 0;
  color: #334155;
}

.btn-icon-only:hover:not(:disabled) {
  color: #4338ca;
}

.btn-icon-only:disabled {
  color: #94a3b8;
}

.btn-icon-only svg {
  width: 16px;
  height: 16px;
  display: block;
  /* REAL root cause of the invisible-icon bug (verified live via DevTools, not guessed): this
     svg is a flex item of a `display:flex` button with no HTML width/height attributes and no
     intrinsic size - Chromium's flex layout collapses it to a 0px-wide box (default
     flex-shrink:1 lets it shrink past its own specified width/height with a computed automatic
     minimum size of 0 for a sizeless replaced element), even when width/height are forced with
     `!important`. flex-shrink:0 opts it out of shrinking entirely and fixes it outright - the
     standard fix for "SVG icon disappears inside a flexbox button". Every other bare-svg-in-a-
     flex-button icon below has the same fix for the same reason. */
  flex-shrink: 0;
}

.divider-vertical {
  width: 1px;
  height: 24px;
  background-color: #e2e8f0;
  margin: 0 4px;
}

/* Layout structure: Left Toolbox | Center Canvas | Right Properties */
.designer-main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 1. Toolbox Sidebar */
.designer-toolbox {
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: width 0.2s ease;
}

.toolbox-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 12px;
  font-weight: 700;
}

.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.toolbox-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
}

.toolbox-item:hover {
  background-color: #e0e7ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

.toolbox-icon {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.data-fields-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.data-field-token {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.data-field-token:hover {
  background-color: #e2e8f0;
}

.token-key {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.token-value {
  font-size: 0.7rem;
  color: #6366f1;
  word-break: break-all;
}

/* 2. Workspace Working Canvas Area */
.designer-canvas-area {
  flex: 1;
  background-color: #f1f5f9;
  padding: 24px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.empty-canvas-state {
  text-align: center;
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px;
  border: 2px dashed #cbd5e1;
  margin-top: 40px;
}

.designer-canvas-wrapper {
  position: relative;
  box-sizing: border-box;
  /* tabindex="0" so arrow-key nudging (DesignerCanvas.HandleKeyDown) has somewhere to receive
     keydown events - the default focus ring around the whole canvas is unnecessary noise since
     the actual selection is already highlighted on the element(s) themselves. */
  outline: none;
}

/* Top row: a corner box (click to select page properties) + the horizontal ruler, so both
   rulers line up like a typical design-tool ruler L-shape. */
.ruler-row {
  display: flex;
}

.ruler-corner {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  margin-bottom: 4px;
  cursor: pointer;
}

.ruler-corner:hover {
  background-color: #e0e7ff;
}

.page-ruler-horizontal {
  position: relative;
  height: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #cbd5e1;
  margin-bottom: 4px;
  font-size: 0.65rem;
  color: #94a3b8;
}

.ruler-tick {
  position: absolute;
  bottom: 0;
  padding-left: 2px;
  border-left: 1px solid #cbd5e1;
  height: 10px;
}

/* Bottom row: vertical ruler + the page sheet, side by side. */
.canvas-body-row {
  display: flex;
}

.page-ruler-vertical {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  background-color: #ffffff;
  border-right: 1px solid #cbd5e1;
  margin-right: 4px;
  font-size: 0.65rem;
  color: #94a3b8;
}

.ruler-tick-v {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #cbd5e1;
  padding-left: 2px;
  text-align: left;
  line-height: 1;
}

.designer-page-sheet {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  user-select: none;
}

/* Highlights the page sheet itself when Page Properties is the active selection. */
.designer-page-sheet.page-selected {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* Band Layout Styles */
.canvas-band-container {
  position: relative;
  border-bottom: 1px dashed #cbd5e1;
}

/* Section labels above each band group (Header, Flow/Body, Last Page Only, Anchored to
   Bottom, Footer), matching how ReportPdfRenderer actually stacks them - see BandOrdering.
   Only rendered when that group has at least one band, so an empty template shows nothing. */
.band-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background-color: #f1f5f9;
  padding: 3px 8px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  cursor: default;
}

.band-drag-handle {
  cursor: grab;
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 2px;
}

.band-drag-handle:active {
  cursor: grabbing;
}

/* Highlights the band currently under a dragged band, showing where it will land on drop. */
.canvas-band-container.band-drop-target {
  outline: 2px dashed #6366f1;
  outline-offset: -2px;
}

.canvas-band-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

.canvas-band-header:hover {
  background-color: #f1f5f9;
}

.active-band-header {
  background-color: #ede9fe !important;
  border-bottom-color: #a5b4fc !important;
}

.band-name {
  color: #4f46e5;
}

.band-size {
  color: #94a3b8;
  font-size: 0.7rem;
}

/* Layout property badges shown in the band header */
.band-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border-radius: 3px;
  padding: 0 4px;
  height: 16px;
  font-weight: 700;
  cursor: default;
  flex-shrink: 0;
}

.band-badge-visibility {
  background-color: #fef3c7;
  color: #92400e;
}

.band-badge-span {
  background-color: #dbeafe;
  color: #1e40af;
}

.band-badge-anchor {
  background-color: #f0fdf4;
  color: #166534;
}

/* Push band actions to the right */
.band-actions {
  margin-left: auto;
}

/* Layout behaviour indicators shown on a selected element */
.element-layout-indicators {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  padding: 1px 3px;
  background: rgba(99,102,241,0.15);
  border-radius: 0 0 4px 0;
  font-size: 0.6rem;
  line-height: 1;
  pointer-events: none;
}

/* Conditional visibility indicator (ReportElement.ConditionField/ConditionOperator) - the canvas
   has no real data to evaluate the condition against, so a conditional element always renders
   here (see DesignerCanvas.IsConditional's doc comment); the outline + badge are the only cue
   that it might be blank on a real document. amber, distinct from the blue selection outline. */
.canvas-element.conditional-element {
  outline: 1px dashed #f59e0b;
  outline-offset: 1px;
}

.conditional-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 0 1px #fff;
}

/* Table cell variant (DataToken/AlternateDataToken) - sits inline after the token text inside a
   <td>, rather than absolutely-positioned on an element's corner, since a table cell has no
   stable corner to pin to. */
.conditional-badge-inline {
  position: static;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  box-shadow: none;
}

.canvas-band-workspace {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 10px 10px;
  transition: border-color 0.2s ease;
}

.canvas-band-workspace.active-band {
  background-color: #fdfdfd;
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.band-height-resizer {
  height: 4px;
  background-color: transparent;
  cursor: ns-resize;
  transition: background-color 0.2s ease;
}

.band-height-resizer:hover {
  background-color: #818cf8;
}

/* Canvas Element Layouts */
.canvas-element {
  position: absolute;
  cursor: move;
  user-select: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* pre-wrap preserves explicit 
 line breaks (so multi-line/paragraph text elements show
     the same line breaks here as in the rendered PDF - see ReportPdfRenderer.DrawElement,
     which already draws each 
-separated line on its own Tm) while still wrapping long
     lines within the element's width. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

.canvas-element.selected-element {
  outline: 2px solid #6366f1;
  z-index: 100;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

/* 8-point resize handles (corners + edge midpoints) - small SQUARE indigo dots, deliberately a
   different shape and position from .move-handle (a round teal dot at the top-left corner) so
   the two are never confused at a glance - see DesignerCanvas.StartResize/StartMoveDrag. */
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #6366f1;
  border: 1px solid #ffffff;
  z-index: 110;
}

.resize-handle-nw { left: -4px;  top: -4px;    cursor: nwse-resize; }
.resize-handle-n  { left: 50%;   top: -4px;    margin-left: -4px; cursor: ns-resize; }
.resize-handle-ne { right: -4px; top: -4px;    cursor: nesw-resize; }
.resize-handle-w  { left: -4px;  top: 50%;     margin-top: -4px;  cursor: ew-resize; }
.resize-handle-e  { right: -4px; top: 50%;     margin-top: -4px;  cursor: ew-resize; }
.resize-handle-sw { left: -4px;  bottom: -4px; cursor: nesw-resize; }
.resize-handle-s  { left: 50%;   bottom: -4px; margin-left: -4px; cursor: ns-resize; }
.resize-handle-se { right: -4px; bottom: -4px; cursor: nwse-resize; }

/* Move handle - the ONLY way to drag an element (clicking its body just selects it, to stop
   accidental one-pixel nudges from an ordinary click). A round teal dot at the top-left corner,
   deliberately unlike the square indigo resize dots so the two can't be mistaken for each other. */
.move-handle {
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: #0d9488;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  z-index: 120; /* above the resize handles so a corner never steals its click */
}

.move-handle svg {
  width: 18px;
  height: 18px;
  color: #ffffff;
  flex-shrink: 0; /* see .btn-icon-only svg - same flex-collapses-to-0 fix */
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  background-color: #f1f5f9;
  color: #94a3b8;
  overflow: hidden;
  text-align: center;
}

.placeholder-alt-text {
  font-size: 11px;
  padding: 0 4px;
  line-height: 1.2;
}

.element-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Table element preview - see DesignerCanvas.RenderTablePreview. Real per-cell border/font/
   alignment styling comes from inline styles built off TableConfig; this just keeps the
   preview <table> from fighting Bootstrap's global table rules or overflowing its box. */
.table-preview {
  pointer-events: none;
  border-spacing: 0;
}

.table-preview td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Individually clickable cells (DesignerCanvas.SelectTableCell) - re-enabling pointer-events here
   is required since .table-preview turns it off for the whole table (and everything inherits
   that), so without this override no click would ever reach a <td>. */
.table-preview-cell {
  pointer-events: auto;
  cursor: pointer;
}

.table-preview-cell-selected {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.table-cell-back-btn {
  padding: 0 0 8px;
  font-size: 0.78rem;
  text-decoration: none;
}

/* Canvas column: a small fixed toolbar (page-size indicator, show-rulers) above the
   scrollable canvas area. Replaces the old bare .designer-canvas-area as the flex-1 child
   of .designer-main-layout. */
.designer-canvas-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* let the canvas shrink instead of forcing the row wider than the container */
}

.canvas-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

/* Multi-select alignment/distribute tools - see AlignmentToolbar.razor. Sits in the same row as
   the page-size indicator and rulers toggle, right after the divider. */
.alignment-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alignment-toolbar-label {
  font-size: 0.78rem;
  color: #64748b;
  min-width: 72px;
}

.alignment-toolbar-group {
  display: flex;
  gap: 2px;
}

.align-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #334155;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.align-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
  flex-shrink: 0; /* see .btn-icon-only svg - same flex-collapses-to-0 fix */
}

.align-btn:hover:not(:disabled) {
  background-color: #eef2ff;
  border-color: #818cf8;
}

.align-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Rubber-band drag select over a band's empty space - see DesignerCanvas.StartMarquee. */
.marquee-select-box {
  position: absolute;
  border: 1px dashed #6366f1;
  background-color: rgba(99, 102, 241, 0.08);
  pointer-events: none;
  z-index: 90;
}

.page-size-indicator {
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.page-size-indicator:hover {
  background-color: #e0e7ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

.show-rulers-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}

/* Zoom controls - sits in the canvas toolbar next to the rulers toggle. The percentage button
   doubles as a reset-to-100% shortcut, matching the convention most design tools use. */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #334155;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.zoom-btn:hover:not(:disabled) {
  background-color: #eef2ff;
  border-color: #818cf8;
}

.zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.zoom-level-btn {
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 52px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.zoom-level-btn:hover {
  background-color: #e0e7ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

/* Visual-only scale transform for the whole canvas (rulers + page sheet) - see
   DesignerCanvas.razor's markup comment and HandleMouseMove for why mouse deltas are divided by
   Zoom rather than the model coordinates being scaled themselves. */
.designer-zoom-scale {
  transform-origin: top left;
}

/* Collapsible left/right sidebars - each sidebar sits in a "wrap" flex row alongside a slim
   always-visible toggle strip, so the toggle stays reachable (flush against the canvas edge)
   even when its sidebar is fully collapsed to 0 width. */
.designer-toolbox-wrap,
.designer-right-panel-wrap {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

.sidebar-toggle {
  flex: 0 0 18px;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-toggle:hover {
  background-color: #eef2ff;
  color: #4338ca;
}

.designer-toolbox-wrap .sidebar-toggle {
  border-right: 1px solid #e2e8f0;
}

.designer-right-panel-wrap .sidebar-toggle {
  border-left: 1px solid #e2e8f0;
}

/* Drag handle to resize the right (Properties) panel - sits between the canvas column and
   .designer-right-panel-wrap. A hair wider than it looks (4px) with the visible bar centered,
   so it's easy to grab without needing pixel-perfect aim. */
.panel-resize-handle {
  flex: 0 0 4px;
  width: 4px;
  cursor: col-resize;
  background-color: transparent;
  position: relative;
  z-index: 5;
}

.panel-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 2px;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.panel-resize-handle:hover::after {
  background-color: #818cf8;
}

.sidebar-toggle svg {
  width: 12px;
  height: 12px;
  display: block;
  transition: transform 0.2s ease;
  flex-shrink: 0; /* see .btn-icon-only svg - same flex-collapses-to-0 fix */
}

.designer-toolbox.collapsed,
.designer-right-panel.collapsed {
  width: 0;
  flex-basis: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

/* 3. Right Sidebar: Page Properties / Objects / Properties accordion */
.designer-right-panel {
  width: 300px;
  flex: 0 0 300px;
  background-color: #ffffff;
  border-left: 1px solid #e2e8f0;
  overflow-y: auto;
  transition: width 0.2s ease, flex-basis 0.2s ease;
}

.designer-property-panel {
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #fecaca;
  background-color: #fef2f2;
  border-radius: 4px;
  color: #dc2626;
  cursor: pointer;
}

.panel-delete-btn:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
}

.panel-delete-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0; /* see .btn-icon-only svg - same flex-collapses-to-0 fix */
}

.element-type-badge {
  background-color: #f1f5f9;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Band badge in the property panel header — slightly different colour to distinguish */
.element-type-badge.band-badge {
  background-color: #ede9fe;
  color: #4f46e5;
}

.panel-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Was height:100% back when this panel was a flex child filling the whole sidebar height.
     Nested in an accordion item's auto-height content area, 100% resolves to 0 - use a fixed
     minimum instead so the empty state is still visible. */
  min-height: 160px;
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* Compact hint shown at the top of the property panel when a band (but no element) is selected */
.panel-band-hint {
  height: auto !important;
  padding: 8px 12px !important;
  background-color: #f0fdf4;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.78rem !important;
  color: #166534 !important;
}

.panel-scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.panel-section {
  margin-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}

.panel-section h6 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Table element's column list - see PropertyPanel.RenderTableColumnsSection. */
.table-column-row {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 8px 0;
  margin-bottom: 8px;
}

/* One row of header/body alignment icon buttons per column - see RenderAlignButtons. */
.table-align-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.table-align-row-label {
  font-size: 0.7rem;
  color: #64748b;
  min-width: 40px;
  flex-shrink: 0;
}

.table-align-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.table-align-divider {
  width: 1px;
  height: 16px;
  background-color: #e2e8f0;
  margin: 0 3px;
}

/* Smaller variant of .align-btn (defined for the canvas alignment toolbar) for the denser
   per-column alignment rows, plus an "active" state the toolbar's buttons don't need since
   those are one-shot actions rather than a persistent left/center/right/top/middle/bottom choice. */
.align-btn-xs {
  width: 20px;
  height: 20px;
}

.align-btn-xs svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0; /* see .btn-icon-only svg - same flex-collapses-to-0 fix */
}

.align-btn-xs.active {
  background-color: #6366f1;
  border-color: #6366f1;
  color: #ffffff;
}

.property-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
}

.property-input {
  font-size: 0.85rem !important;
  border-color: #cbd5e1;
}

.property-input-color {
  padding: 0 2px !important;
  height: 31px !important;
}

.property-help {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 4px;
}

/* Per-edge (Top/Right/Bottom/Left) or per-corner (TL/TR/BR/BL) box-model inputs - 4 small
   labelled fields sharing one row, used for Padding/Margin/Corner-radius-overrides. */
.box-edge-inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.box-edge-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.box-edge-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.box-edge-input .property-input {
  width: 100%;
  padding: 2px 4px;
  text-align: center;
  font-size: 0.78rem;
}

/* Visual box-model editor for Padding/Margin (combined, nested rings - margin is the outer
   ring, padding the inner ring, matching how the two actually relate spatially) and a separate
   one for Border Radius (a single ring whose 4 corners hold the per-corner overrides and whose
   center holds the uniform radius). Replaces the old 4-cramped-inputs-in-one-row layout, whose
   corner-radius placeholder text ("default"/"défaut") didn't fit in ~48px and rendered as
   unreadable clipped characters - reported live. Each input gets its own grid cell with real
   room instead of fighting three siblings for a quarter of a narrow sidebar's width.
   3x3 CSS grid per ring: edges hold inputs, the center cell holds either the next nested ring
   (box-model) or the uniform value (radius). */
.box-model-editor {
  margin-bottom: 4px;
}

.box-model-ring {
  display: grid;
  grid-template-columns: minmax(56px, auto) 1fr minmax(56px, auto);
  grid-template-rows: minmax(38px, auto) 1fr minmax(38px, auto);
  gap: 6px;
  align-items: center;
  justify-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}

.box-model-ring--padding {
  border-style: solid;
  border-color: #e2e8f0;
  background: #ffffff;
  padding: 10px;
}

.box-model-ring-title {
  position: absolute;
  top: -8px;
  left: 8px;
  background: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  padding: 0 4px;
}

.box-model-ring {
  position: relative;
}

.box-model-edge-top    { grid-column: 2; grid-row: 1; }
.box-model-edge-right  { grid-column: 3; grid-row: 2; }
.box-model-edge-bottom { grid-column: 2; grid-row: 3; }
.box-model-edge-left   { grid-column: 1; grid-row: 2; }
.box-model-center      { grid-column: 2; grid-row: 2; width: 100%; }

.box-model-input {
  width: 52px !important;
  height: 34px !important;
  padding: 2px 4px !important;
  text-align: center;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1e293b;
  -moz-appearance: textfield;
}

/* Hide the native up/down spinner - it eats horizontal space the digit itself needs at this
   size, and these fields are edited by typing a number, not by clicking tiny arrows. */
.box-model-input::-webkit-outer-spin-button,
.box-model-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.box-model-content-box {
  width: 100%;
  min-height: 32px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 3px;
}

/* Border-radius editor: same 3x3 grid, but the 4 override inputs sit at the actual CORNERS
   (TL/TR/BR/BL) instead of the edges, and the center holds the single uniform value that
   applies to all four unless a corner below overrides it. */
.radius-box {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr minmax(64px, auto);
  grid-template-rows: minmax(38px, auto) 1fr minmax(38px, auto);
  gap: 6px;
  align-items: center;
  justify-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}

.radius-corner-tl { grid-column: 1; grid-row: 1; }
.radius-corner-tr { grid-column: 3; grid-row: 1; }
.radius-corner-bl { grid-column: 1; grid-row: 3; }
.radius-corner-br { grid-column: 3; grid-row: 3; }
.radius-center     { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; }

.radius-preview-box {
  width: 100%;
  min-height: 32px;
  background: #eef2ff;
  border: 1px solid #6366f1;
}

.box-model-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.box-model-field-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

/* The text-content editor: taller by default and vertically resizable so writing an actual
   paragraph (contract terms, notes) isn't cramped into a 2-line box. */
.content-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ── AI Chat Panel ────────────────────────────────────────────────────────────
   The panel slides in from the right, overlaying the property panel.
   It is absolutely positioned relative to the designer container so it does
   not push the canvas layout when it opens.
   ─────────────────────────────────────────────────────────────────────────── */
.designer-chat-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.designer-chat-panel.chat-visible {
  transform: translateX(0);
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.chat-panel-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-ai-icon {
  color: #6366f1;
  font-size: 1rem;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-chat-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}

.btn-chat-close:hover { color: #334155; background: #f1f5f9; }

/* Message scroll area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-empty-hint {
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 8px;
}

.chat-empty-hint p { margin-bottom: 4px; }
.chat-empty-hint ul { padding-left: 16px; margin: 0; }
.chat-empty-hint li { margin-bottom: 2px; font-style: italic; }

.chat-message { display: flex; }
.chat-user    { justify-content: flex-end; }
.chat-assistant { justify-content: flex-start; }

.chat-bubble {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  word-break: break-word;
}

.chat-user .chat-bubble {
  background: #6366f1;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.chat-assistant .chat-bubble {
  background: #f1f5f9;
  color: #1e293b;
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.chat-thinking {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}

.thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: thinking-bounce 1.2s infinite ease-in-out;
}

.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* Input area */
.chat-input-area {
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.chat-error {
  font-size: 0.75rem;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.chat-input-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.chat-textarea {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  resize: none;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color 0.15s;
}

.chat-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.btn-chat-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #6366f1;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.15s;
}

.btn-chat-send:hover:not(:disabled) { background: #4f46e5; }
.btn-chat-send:disabled { background: #c7d2fe; cursor: default; }

.btn-chat-attach {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.15s;
}

.btn-chat-attach:hover { background: #e2e8f0; }
.btn-chat-attach.disabled { pointer-events: none; opacity: 0.5; }

.chat-attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: #3730a3;
}

.chat-attachment-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-remove {
  background: none;
  border: none;
  color: #6366f1;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
  flex-shrink: 0;
}

.chat-attachment-remove:hover { color: #4338ca; }

.chat-hint-footer {
  font-size: 0.68rem;
  color: #94a3b8;
  text-align: right;
  margin-top: 4px;
}

.btn-band-action {
  background: none;
  border: none;
  font-size: 0.7rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* ── Page Properties panel (accordion tab 1) ─────────────────────────────── */
.page-properties-panel {
  padding: 12px 4px 4px;
}

/* ── Objects outline / tree (accordion tab 2) ────────────────────────────── */
/* SfAccordion measures its content wrapper's height with JS at expand-time and pins it via an
   inline style, but that measurement doesn't get redone as the template grows (more bands/
   elements added after the panel first opened) - the wrapper's own overflow:hidden then silently
   clips everything past whatever height it happened to measure that one time, with no scrollbar
   ever appearing (the *content* here has an overflow-y:auto that's real, but the ancestor clips
   before that inner scroll region is ever reached). Overriding the accordion's own content
   wrapper to size/scroll itself instead of trusting Syncfusion's cached measurement fixes this
   for every tab, not just Objects. */
.designer-right-panel .e-acrdn-panel .e-acrdn-content {
  height: auto !important;
  max-height: 60vh;
  overflow-y: auto !important;
  overflow-x: hidden;
}

.designer-outline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
}

.outline-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  color: #334155;
  min-width: 0; /* allow .outline-label to actually truncate inside a flex row */
}

.outline-node:hover {
  background-color: #f1f5f9;
}

.outline-node-active {
  background-color: #ede9fe;
  color: #4338ca;
  font-weight: 600;
}

.outline-node-page {
  font-weight: 700;
}

.outline-node-band {
  font-weight: 600;
}

.outline-node-element {
  margin-left: 18px;
  color: #64748b;
}

.outline-node-element.outline-node-active {
  color: #4338ca;
}

.outline-icon {
  flex: 0 0 auto;
  font-size: 0.85rem;
}

.outline-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-count {
  flex: 0 0 auto;
  font-size: 0.65rem;
  color: #94a3b8;
  background-color: #f1f5f9;
  border-radius: 8px;
  padding: 0 6px;
}

/* ── Preview PDF options dialog ───────────────────────────────────────────── */
.preview-dialog-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.preview-dialog {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 360px;
  max-width: calc(100vw - 32px);
}

.preview-dialog-title {
  margin-bottom: 14px;
  font-weight: 700;
  color: #1e293b;
}

.preview-page-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-left: 24px;
}

.preview-page-count-input {
  width: 4rem;
  text-align: center;
}

.preview-page-count-label {
  font-size: 0.78rem;
  color: #64748b;
}

/* ── Field reference dialog ───────────────────────────────────────────────── */
.field-reference-dialog {
  width: 480px;
  max-width: calc(100vw - 32px);
}

.field-reference-body {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.field-reference-section {
  margin-bottom: 16px;
}

.field-reference-section h6 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.field-reference-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}

.field-reference-label {
  flex: 1 1 40%;
  font-size: 0.8rem;
  color: #334155;
}

.field-reference-token {
  flex: 1 1 40%;
  font-size: 0.75rem;
  color: #6366f1;
  background-color: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: nowrap;
}

.field-reference-copy {
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 2px 8px;
  min-width: 4.5rem;
}