/* ============================================================
   DOCUMENT EDITOR
   Layout and components for the full-screen document editor.
   ============================================================ */

/* ── Shell ────────────────────────────────────────────────── */

.bz-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-bg-page);
  overflow: hidden;
}

/* ── Toolbar ──────────────────────────────────────────────── */

/* Single wrapping flex row: left actions, title, right actions — in order.
   No forced centering; content wraps naturally when the viewport narrows
   rather than clipping items off the right edge. */
.bz-editor__toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

.bz-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.bz-editor__title {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 4rem;    /* always show at least a few characters before truncating */
  max-width: 24rem;   /* cap width so long titles don't push action buttons off-screen */
  padding: 0 var(--space-2);
}

.bz-toolbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto; /* pushes the right group to the far right of the flex row */
}

/* Active state for toggle buttons (e.g. Layout Editor on) */
.bz-toolbar-btn--active {
  background-color: var(--color-accent-subtle) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Hamburger — desktop: hidden; mobile: shown */
.bz-toolbar__hamburger {
  display: none;
}

/* ── Mobile dropdown menu ─────────────────────────────────── */

/* Anchored to the toolbar (position: relative on parent) */
.bz-toolbar__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}

.bz-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.bz-menu__item:hover {
  background-color: var(--color-bg-interactive);
}

.bz-menu__divider {
  height: 1px;
  background-color: var(--color-border-subtle);
  margin: var(--space-1) 0;
}

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .bz-editor__toolbar {
    flex-wrap: nowrap; /* mobile: single row — title + hamburger only */
    padding: var(--space-1) var(--space-3);
  }

  .bz-toolbar__left  { display: none; }
  .bz-toolbar__right { display: none; }

  /* Title fills remaining space beside the hamburger */
  .bz-editor__title {
    flex: 1;
    max-width: none;
    padding: 0;
  }

  .bz-toolbar__hamburger { display: flex; }

  /* Doc view base font — covers single value fields, headings, fixed elements.
     List table text and doc-view padding are handled in the mobile block
     placed after the base rules (below). */
  .bz-doc-view {
    font-size: 0.6875rem;   /* 11px */
  }

  .bz-field__label {
    min-width: 4.5rem;
  }
}

/* ── Workspace — two panels ───────────────────────────────── */

.bz-editor__workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Document view — left/top panel */
.bz-doc-view {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4);
  border-right: 1px solid var(--color-border-default);
}

/* Button panel — right/bottom panel */
.bz-btn-panel {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* scroll lives inside grid-zone, not here */
  background-color: var(--color-bg-surface);
  padding: var(--space-3);
}

/* display:flex above would override the HTML hidden attribute — restore it */
.bz-btn-panel[hidden] {
  display: none;
}

/* ── Document sections ────────────────────────────────────── */

.bz-section {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.bz-section:last-child {
  border-bottom: none;
}

/* Fixed elements */
.bz-fixed-element {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ── Single value fields ──────────────────────────────────── */

.bz-field {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.bz-field__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  min-width: 8rem;
}

.bz-field__value {
  color: var(--color-text-primary);
  cursor: pointer;
  border-bottom: 1px dashed var(--color-border-strong);
  padding-bottom: 1px;
}

.bz-field__value:hover {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

.bz-field__input {
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-2);
  outline: none;
  width: 100%;
  max-width: 20rem;
}

/* ── List field ───────────────────────────────────────────── */

.bz-list__header {
  margin-bottom: var(--space-3);
}

.bz-list__label {
  font-size: var(--bz-list-font-size, var(--text-md));
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.bz-list__table {
  width: auto;
  border-collapse: collapse;
  font-size: var(--bz-list-font-size, var(--text-sm));
}

.bz-list__table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-default);
  font-weight: var(--font-medium);
}

/* Property column headings align right to match their values */
.bz-list__table th.bz-list__cell--prop {
  text-align: right;
}

.bz-list__cell--prop {
  text-align: right;
}

.bz-list__row td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  cursor: pointer;
}

.bz-list__row:hover td {
  background-color: var(--color-bg-interactive);
}

.bz-list__row--active td {
  background-color: var(--color-accent-subtle);
}

.bz-list__totals-row td {
  padding: var(--space-2) var(--space-3);
  font-weight: var(--font-semibold);
  font-size: inherit;   /* inherits from .bz-list__table, which uses --bz-list-font-size */
  color: var(--color-text-primary);
  border-top: 2px solid var(--color-border-default);
}

/* ── Mobile list overrides ────────────────────────────────── */
/* Placed here, after all base list rules, so source order wins the cascade
   without needing to fight specificity. */

@media (max-width: 640px) {

  /* Override the base .bz-doc-view padding (base rule is above this block) */
  .bz-doc-view {
    padding: var(--space-2);
  }

  /* Tighten section spacing */
  .bz-section {
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
  }

  .bz-list__header {
    margin-bottom: 2px;
  }

  /* Label and table both scale by --list-mobile-scale relative to the
     font size set on the list field (--bz-list-font-size, set in JS). */
  .bz-list__label {
    font-size: calc(var(--bz-list-font-size, var(--text-md)) * var(--list-mobile-scale));
  }

  /* Full width; auto layout lets each column shrink to its content width */
  .bz-list__table {
    font-size: calc(var(--bz-list-font-size, var(--text-sm)) * var(--list-mobile-scale));
    width: 100%;
    line-height: 1.2;   /* prevent default line-height inflating wrapped rows */
  }

  /* Minimal cell padding */
  .bz-list__table th,
  .bz-list__row td,
  .bz-list__totals-row td {
    padding: 1px 3px;
  }

  /* Row ID and property columns hug their content; Items column gets the rest */
  .bz-list__cell--id,
  .bz-list__cell--prop {
    white-space: nowrap;
  }
}

/* ── Row ID cell ──────────────────────────────────────────── */

.bz-row-id-cell {
  white-space: nowrap;
}

.bz-row-id__value {
  cursor: pointer;
  border-bottom: 1px dashed var(--color-border-strong);
  padding-bottom: 1px;
}

.bz-row-id__value:hover {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

/* Empty placeholder — shown when row_id is blank */
.bz-row-id__value--empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.bz-row-id__input {
  width: 5rem;
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  padding: 1px var(--space-2);
  outline: none;
}

.bz-row-id__warning {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-warning);
  margin-top: 2px;
}

.bz-row-id__warning:not([hidden]) {
  display: block;
}

/* ── Button panel ─────────────────────────────────────────── */

/* Shared row style for modes and actions */
.bz-btn-panel__modes,
.bz-btn-panel__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* Actions row sits below modes row */
.bz-btn-panel__actions {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
}

/* Control buttons — compact, outlined */
.bz-control-btn {
  flex: 1;
  padding: var(--space-1) var(--space-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.bz-control-btn:hover:not(:disabled) {
  background-color: var(--color-bg-interactive);
  color: var(--color-text-primary);
}

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

/* Active state — toggles when enabled */
.bz-control-btn--active {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Colour modifiers for action buttons */
.bz-control-btn--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.bz-control-btn--warning {
  border-color: var(--color-warning, #f59e0b);
  color: var(--color-warning, #f59e0b);
}

.bz-control-btn--danger {
  border-color: var(--color-error, #ef4444);
  color: var(--color-error, #ef4444);
}

.bz-control-btn--success {
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

/* Idle prompt — shown before any list is activated */
.bz-btn-panel__idle {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-style: italic;
  padding: var(--space-2) 0;
}

/* Grid zone — scrollable area below the control strip */
.bz-btn-panel__grid-zone {
  flex: 1;
  overflow-y: auto;
  padding-top: var(--space-2);
}

.bz-btn-panel__header {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.bz-btn-panel__title {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.bz-btn-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Document buttons ─────────────────────────────────────── */

.bz-doc-btn {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-default);
  min-width: 3.5rem;
  text-align: center;
}

.bz-doc-btn:hover {
  filter: brightness(1.15);
}

.bz-doc-btn:active {
  filter: brightness(0.9);
  transform: scale(0.97);
}

.bz-doc-btn--submenu::after {
  content: ' ›';
  opacity: 0.7;
}

/* ABC — manual entry button, always last in the grid, dashed border to distinguish */
.bz-doc-btn--manual {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border-default);
}

.bz-doc-btn--manual:hover {
  filter: none;
  background-color: var(--color-bg-interactive);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* Remove-mode item buttons — neutral style (no custom fill_colour) */
.bz-doc-btn--remove {
  background-color: var(--color-bg-interactive);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

/* Locked buttons — shown for free users beyond the button limit.
   Retains the button's custom colours so the user can see what they're missing,
   but dims it and suppresses interaction. The lock icon is appended via ::after. */
.bz-doc-btn--locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.bz-doc-btn--locked::after {
  content: ' \01F512'; /* 🔒 */
  font-size: 0.75em;
}

/* Upgrade note shown below the grid when locked buttons are present */
.bz-btn-panel__lock-note {
  padding-top: var(--space-2);
  text-align: center;
}

/* ── Manual entry form ────────────────────────────────────── */

.bz-manual-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.bz-manual-entry__label {
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.bz-manual-entry__qty {
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  outline: none;
  width: 5rem;
}

/* Property rows in manual entry (e.g. Price, Weight) */
.bz-manual-entry__prop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bz-manual-entry__prop-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.bz-manual-entry__prop-value {
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  outline: none;
  width: 5rem;
  text-align: right;
}

/* ── Mobile — stack panels vertically ────────────────────── */

@media (max-width: 768px) {
  .bz-editor__workspace {
    flex-direction: column;
  }

  .bz-doc-view {
    border-right: none;
    border-bottom: 1px solid var(--color-border-default);
    flex: 1 1 50%;
  }

  .bz-btn-panel {
    flex: 0 0 auto;
    max-height: 60vh;
  }

  .bz-btn-panel .bz-btn-panel__grid-zone {
    max-height: none; /* let the panel's max-height clip it */
  }
}


/* ============================================================
   BUTTON GROUP EDITOR
   Layout and components for the button group editor page.
   ============================================================ */

/* ── Toolbar ─────────────────────────────────────────────── */

/* Two-row toolbar replacing the document editor's single-row toolbar.
   Row 1: back link + title + top-level actions (New, Load, Import).
   Row 2: group selector + group-level actions (Save, Export, Remove). */
.bz-bg-toolbar {
  flex-shrink: 0;
  position: relative; /* dropdown anchor */
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
}

.bz-bg-toolbar__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

/* Subtle separator between the two rows */
.bz-bg-toolbar__row--1 {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Title grows to fill available space between back link and top actions */
.bz-bg-toolbar__title {
  flex: 1;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-1);
}

/* Top actions (New, Load, Import) — hidden on mobile, in hamburger instead */
.bz-bg-toolbar__top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Group actions (selector + Save, Export, Remove) — fills row 2 */
.bz-bg-toolbar__group-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.bz-bg-group-select {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  max-width: 14rem;
}

/* Hamburger — desktop: hidden; mobile: shown at end of row 2 */
.bz-bg-toolbar__hamburger {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
}

/* Back link duplicate in row 2 — only shown on mobile */
.bz-bg-back--mobile {
  display: none;
  flex-shrink: 0;
}

/* Mobile dropdown — anchored to bottom of the toolbar */
.bz-bg-toolbar__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: var(--space-1) 0;
}

/* Danger variant for destructive menu items */
.bz-menu__item--danger {
  color: var(--color-error);
}

.bz-menu__item--danger:hover {
  background-color: var(--color-bg-interactive);
}

/* Disabled menu items */
.bz-menu__item:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 640px) {
  .bz-bg-toolbar__row {
    padding: var(--space-2) var(--space-3);
  }

  /* Row 1 collapses entirely on mobile — back link, title, and top actions all move to
     the single row 2 layout (back link via the duplicate .bz-bg-back--mobile element) */
  .bz-bg-toolbar__row--1 {
    display: none;
  }

  /* Show the back link duplicate that lives in row 2 */
  .bz-bg-back--mobile {
    display: flex;
  }

  /* Hide individual action buttons — all actions available via hamburger */
  .bz-bg-action-btn {
    display: none;
  }

  .bz-bg-toolbar__hamburger {
    display: flex;
  }
}

/* ── Workspace ─────────────────────────────────────────────── */

.bz-bg-workspace {
  display: flex;
  flex: 1 1 0;
  min-height: 0; /* allows flex shrink to work; required for overflow-y: auto on children */
  overflow: hidden;
}

/* Grid panel — left side, scrollable list of buttons */
.bz-bg-workspace__grid {
  flex: 0 0 50%;
  overflow-y: auto;
  padding: var(--space-4);
  border-right: 1px solid var(--color-border-default);
}

/* Form panel — right side, button edit form */
.bz-bg-workspace__form {
  flex: 1 1 0;
  overflow-y: auto;
  padding: var(--space-4);
}

/* ── Group header (above grid) ────────────────────────────── */

.bz-bg-group-header {
  margin-bottom: var(--space-4);
}

.bz-bg-group-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.bz-bg-group-meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ── Button grid ──────────────────────────────────────────── */

.bz-bg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Each button in the editor grid */
.bz-bg-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-size: var(--text-sm);
  cursor: pointer;
  min-width: 5rem;
  text-align: center;
  transition: filter var(--duration-fast) var(--ease-default),
              outline var(--duration-fast) var(--ease-default);
}

.bz-bg-btn:hover {
  filter: brightness(1.12);
}

/* Currently selected button — accent ring */
.bz-bg-btn--selected {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Sub-menu buttons — dashed border to distinguish navigation from items */
.bz-bg-btn--submenu {
  border-style: dashed;
  border-color: currentColor;
  opacity: 0.85;
}

.bz-bg-btn--submenu::after {
  content: ' ›';
  opacity: 0.7;
}

/* New button — always shown last, neutral/dashed */
.bz-bg-btn--new {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 2px dashed var(--color-border-default);
  min-width: 5rem;
}

.bz-bg-btn--new:hover {
  filter: none;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-interactive);
}

/* ── Button edit form ─────────────────────────────────────── */

.bz-bg-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 28rem;
}

/* Empty state — shown when no button is selected */
.bz-bg-form__empty {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-6) 0;
}

/* Form header: title + delete button */
.bz-bg-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bz-bg-form__heading {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

/* Individual field wrapper */
.bz-bg-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bz-bg-form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.bz-bg-form__input,
.bz-bg-form__select,
.bz-bg-form__textarea {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  width: 100%;
}

.bz-bg-form__input:focus,
.bz-bg-form__select:focus,
.bz-bg-form__textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

.bz-bg-form__textarea {
  resize: vertical;
  min-height: 4rem;
}

/* Colour row — fill, font, and live preview side by side */
.bz-bg-form__colour-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.bz-bg-form__colour-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bz-bg-form__colour-input {
  width: 3rem;
  height: 2.2rem;
  padding: 2px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-interactive);
  cursor: pointer;
}

/* Live button preview in the form */
.bz-bg-form__preview {
  flex: 1;
  pointer-events: none;
  min-height: 2.2rem;
}

/* Properties section */
.bz-bg-props {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bz-bg-props__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bz-bg-props__type {
  flex: 1;
}

.bz-bg-props__value {
  width: 6rem;
  padding: var(--space-2) var(--space-2);
  background: var(--color-bg-interactive);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  text-align: right;
}

/* Form action buttons */
.bz-bg-form__actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

/* Mobile back button — hidden on desktop */
.bz-bg-form__back {
  display: none;
}

/* Narrow number/text input — e.g. order field */
.bz-bg-input--narrow {
  width: 5rem;
}

/* Add Property button spacing */
.bz-bg-props__add {
  margin-top: var(--space-1);
}

/* Library picker modal list */
.bz-bg-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Library picker cancel button */
.bz-bg-picker-cancel {
  margin-top: var(--space-3);
}

/* ── Mobile — toolbar wraps onto two rows on bg editor ────── */

@media (max-width: 768px) {
  /* Allow toolbar to wrap so controls drop to a second row */
  .bz-editor__toolbar--bg-editor {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Back link must remain visible on mobile — no hamburger on this page */
  .bz-editor__toolbar--bg-editor .bz-toolbar__left {
    display: flex;
  }

  .bz-editor__toolbar--bg-editor .bz-bg-toolbar-controls {
    flex: 1 0 100%;          /* take full width — forces second row */
    align-items: flex-start;
  }

  .bz-editor__toolbar--bg-editor .bz-bg-toolbar-row {
    gap: var(--space-1);
  }

  .bz-editor__toolbar--bg-editor .bz-bg-toolbar-controls select {
    max-width: 100%;
    flex: 1 1 auto;
  }
}

/* ── Mobile — master-detail toggle ────────────────────────── */

@media (max-width: 768px) {
  .bz-bg-workspace {
    position: relative;
    overflow: visible;
  }

  .bz-bg-workspace__grid {
    flex: 1 1 0;
    width: 100%;
    border-right: none;
    overflow-y: auto;
  }

  /* Form panel slides over the grid on mobile */
  .bz-bg-workspace__form {
    display: none;
    position: absolute;
    inset: 0;
    background: var(--color-bg-page);
    z-index: 10;
    overflow-y: auto;
  }

  /* --form-active on the workspace shows form, hides grid */
  .bz-bg-workspace--form-active .bz-bg-workspace__grid {
    display: none;
  }

  .bz-bg-workspace--form-active .bz-bg-workspace__form {
    display: block;
  }

  .bz-bg-form__back {
    display: inline-flex;
    margin-bottom: var(--space-2);
  }

  /* Collapse toolbar controls to save space on mobile */
  .bz-bg-toolbar-controls select {
    max-width: 8rem;
  }
}

/* ── A4 view container ───────────────────────────────────────────────────────
   Scrollable wrapper. The canvas itself is always 794px wide regardless of
   viewport — the container scrolls horizontally on small screens.            */

.bz-a4-view {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--space-6);
  background-color: var(--color-bg-page);
  border-right: 1px solid var(--color-border-default);
}

.bz-a4-view[hidden] {
  display: none;
}

/* ── A4 canvas ───────────────────────────────────────────────────────────────
   Fixed paper size: 210mm × 297mm at 3.78px/mm ≈ 794 × 1123px.
   Background is always white — this represents a physical sheet of paper.   */

.bz-a4-canvas {
  position:   relative;
  width:      794px;      /* 210mm × 3.78 */
  min-height: 1123px;     /* 297mm × 3.78 */
  background-color: #ffffff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  margin: 0 auto;
}

/* ── A4 scale-to-fit on mobile ───────────────────────────────────────────────
   The canvas is always 794px wide. On small screens it is scaled down using
   transform so it fits without horizontal scrolling.

   transform-origin: top left anchors the scale to the canvas top-left corner.
   margin: 0 removes auto-centering (scale handles positioning from the left).
   The negative margin-bottom collapses the empty layout space left behind by
   the transform, so the container height reflects the visible scaled canvas.

   Breakpoint scales are chosen so that scale × 794px ≤ breakpoint width:
     ≤ 480px  — scale 0.44 → 350px canvas  (fits all phones down to 320px)
     481–640px — scale 0.60 → 476px canvas  (fits larger phones / small tablets) */

@media (max-width: 480px) {
  .bz-a4-view {
    overflow: hidden;
    padding:  0;
  }
  .bz-a4-canvas {
    margin:           0;
    transform-origin: top left;
    transform:        scale(0.44);
    margin-bottom:    calc((0.44 - 1) * 1123px);
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .bz-a4-view {
    overflow: hidden;
    padding:  0;
  }
  .bz-a4-canvas {
    margin:           0;
    transform-origin: top left;
    transform:        scale(0.60);
    margin-bottom:    calc((0.60 - 1) * 1123px);
  }
}

/* ── Position pick overlay ───────────────────────────────────────────────────
   Full-canvas transparent overlay shown when the user is placing a new or
   repositioning an existing element. Crosshair cursor signals pick mode.    */

.bz-a4-pick-overlay {
  position:        absolute;
  inset:           0;
  cursor:          crosshair;
  background:      rgba(0, 0, 0, 0.12);
  z-index:         20;
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding-top:     var(--space-4);
}

.bz-a4-pick-overlay__hint {
  background:    rgba(0, 0, 0, 0.65);
  color:         #fff;
  font-size:     var(--text-sm);
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  pointer-events: none;
  user-select:    none;
}

/* Pick position button in the layout editor coord section */
.bz-le-pick-btn {
  width: 100%;
  justify-content: center;
}

/* ── Dot grid ────────────────────────────────────────────────────────────────
   10mm spacing grid shown in edit mode. Dots are absolutely positioned over
   the canvas and pointer-events:none so they don't interfere with clicks.   */

.bz-a4-dot-grid {
  position:       absolute;
  inset:          0;
  pointer-events: none;
}

.bz-a4-dot {
  position:         absolute;
  width:            2px;
  height:           2px;
  border-radius:    50%;
  background-color: var(--color-border-subtle);
  transform:        translate(-50%, -50%);
}

/* ── Positioned elements ─────────────────────────────────────────────────────
   All element types share this base class for absolute positioning.
   Coordinate and size values are applied inline by a4_renderer.js.          */

.bz-a4-el {
  position:   absolute;
  overflow:   hidden;
  box-sizing: border-box;
}

/* Hover outline in edit mode */
.bz-a4-el--selectable {
  cursor: pointer;
}

.bz-a4-el--selectable:hover {
  outline:        1px dashed var(--color-border-strong);
  outline-offset: 2px;
}

/* Selected element highlight */
.bz-a4-el--selected {
  outline:        2px dashed var(--color-accent) !important;
  outline-offset: 2px;
}

/* Fixed element — static text, always dark on white paper */
.bz-a4-el--fixed {
  color:      #000000;
  white-space: pre-wrap;
  word-break:  break-word;
  line-height: 1.4;
}

/* ── A4 single value fields ──────────────────────────────────────────────────*/

.bz-a4-field__label {
  display:       block;
  color:         #666666;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.2;
}

.bz-a4-field__value {
  display:       block;
  color:         #000000;
  border-bottom: 1px solid #cccccc;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  min-height:    1.1em;
  line-height:   1.4;
}

.bz-a4-field__value--editable {
  cursor: pointer;
}

.bz-a4-field__value--editable:hover {
  border-bottom-color: #333333;
}

/* Inline edit input — transparent background, inherits canvas font */
.bz-a4-field__input {
  width:       100%;
  border:      none;
  border-bottom: 2px solid #333333;
  outline:     none;
  font-size:   inherit;
  background:  transparent;
  color:       #000000;
  padding:     0;
  box-sizing:  border-box;
}

/* ── A4 list fields ──────────────────────────────────────────────────────────*/

.bz-a4-list__label {
  display:     block;
  color:       #000000;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}

.bz-a4-list__table {
  width:           100%;
  border-collapse: collapse;
  color:           #000000;
  font-size:       inherit;   /* inherits from .bz-a4-el--list, which has font_size set inline */
}

.bz-a4-list__table th {
  text-align:    left;
  border-bottom: 1px solid #333333;
  padding:       2px 4px;
  font-weight:   600;
}

/* Property column headings align right to match their values */
.bz-a4-list__table th.bz-list__cell--prop {
  text-align: right;
}

.bz-a4-list__table td {
  padding:       2px 4px;
  border-bottom: 1px solid #eeeeee;
}


.bz-a4-list__table tfoot td {
  font-weight:   600;
  border-top:    2px solid #333333;
  border-bottom: none;
}

.bz-a4-list__empty {
  color:      #999999;
  font-style: italic;
  font-size:  0.85em;
}

/* Row styles scoped to the A4 canvas — overrides the theme-variable colours
   from .bz-list__row td so text stays readable on the white A4 background. */
.bz-a4-list__table .bz-list__row td {
  color:         #000000;
  border-bottom: 1px solid #eeeeee;
}

.bz-a4-list__table .bz-list__row:hover td {
  background-color: #f5f5f5;
}

.bz-a4-list__table .bz-list__row--active td {
  background-color: #dce8ff;
}

/* ── Layout editor panel ─────────────────────────────────────────────────────
   Same width and position as the button panel — replaces it when active.    */

.bz-layout-panel {
  flex:             0 0 280px;
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);
  overflow-y:       auto;
  background-color: var(--color-bg-surface);
  padding:          var(--space-3);
}

.bz-layout-panel[hidden] {
  display: none;
}

/* ── List view layout edit mode — selectable elements ────────────────────────*/

/* Applied to fixed element <p> tags, field rows, and list headers when
   layout edit mode is active. Mirrors the A4 canvas selectable behaviour. */
.bz-le-selectable {
  cursor:        pointer;
  border-radius: var(--radius-sm);
}

.bz-le-selectable:hover {
  outline: 2px dashed var(--color-accent);
}

/* Add buttons row at the top of the layout panel */
.bz-le-add-bar {
  display:       flex;
  gap:           var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink:   0;
  flex-wrap:     wrap;
}

/* Empty state prompt */
.bz-le-empty {
  font-size:  var(--text-sm);
  color:      var(--color-text-tertiary);
  font-style: italic;
  padding:    var(--space-2) 0;
}

/* ── Layout editor form ──────────────────────────────────────────────────────*/

.bz-le-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

/* Header: element type label + delete button */
.bz-le-form__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-bottom:  var(--space-2);
  border-bottom:   1px solid var(--color-border-subtle);
}

.bz-le-form__heading {
  font-size:   var(--text-sm);
  font-weight: var(--font-semibold);
  color:       var(--color-text-primary);
}

/* Individual field row */
.bz-le-form__field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.bz-le-form__field--checkbox {
  flex-direction: row;
  align-items:    center;
  gap:            var(--space-2);
}

/* Compact uppercase label — same style as bg_form.js */
.bz-le-form__label {
  font-size:      var(--text-xs);
  font-weight:    var(--font-medium);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bz-le-form__checkbox-label {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--color-text-primary);
  cursor:      pointer;
}

.bz-le-form__input,
.bz-le-form__select,
.bz-le-form__textarea {
  padding:          var(--space-1) var(--space-2);
  background:       var(--color-bg-interactive);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-sm);
  color:            var(--color-text-primary);
  font-size:        var(--text-sm);
  width:            100%;
  box-sizing:       border-box;
}

.bz-le-form__input:focus,
.bz-le-form__select:focus,
.bz-le-form__textarea:focus {
  outline:      none;
  border-color: var(--color-border-focus);
}

.bz-le-form__textarea {
  resize:     vertical;
  min-height: 3.5rem;
}

/* Coordinate inputs — 2-column grid */
.bz-le-form__coords {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-2);
}

.bz-le-form__hint {
  font-size:  var(--text-xs);
  color:      var(--color-text-secondary);
  font-style: italic;
}

/* Property names list */
.bz-le-props {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.bz-le-props__row {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.bz-le-props__row .bz-le-form__input {
  flex: 1;
}

/* ── Active toolbar button (e.g. Edit Layout when on) ───────────────────────*/

.bz-toolbar-btn--active {
  background-color: var(--color-accent-subtle);
  border-color:     var(--color-accent);
  color:            var(--color-accent);
}

/* ── Mobile — A4 view and layout panel stack vertically ─────────────────────*/

@media (max-width: 768px) {
  .bz-a4-view {
    border-right:  none;
    border-bottom: 1px solid var(--color-border-default);
    padding:       var(--space-3);
    flex:          1 1 auto;
    min-height:    0;
  }

  .bz-layout-panel {
    flex:       0 0 auto;
    max-height: 45vh;
    border-top: 1px solid var(--color-border-default);
  }
}

/* ── Print / PDF download ────────────────────────────────────────────────────
   Triggered by window.print() from the Download PDF toolbar button.
   Hides all editor chrome; prints only the currently visible document view.
   Hidden views are already display:none via the [hidden] attribute and will
   not print — no extra rules needed for them.                               */

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  /* Remove the fixed-height viewport shell so content flows freely */
  .bz-editor {
    height: auto;
    overflow: visible;
  }

  /* Hide all editor chrome and page furniture */
  .bz-editor__toolbar,
  .bz-btn-panel,
  .bz-layout-panel,
  .page-footer,
  .bz-no-print {
    display: none !important;
  }

  /* Remove workspace scroll constraints */
  .bz-editor__workspace {
    overflow: visible;
    height:   auto;
    flex:     none;
  }

  /* Remove A4 view scroll container — canvas prints directly */
  .bz-a4-view {
    overflow:         visible;
    padding:          0;
    background-color: transparent;
    border:           none;
    flex:             none;
  }

  /* Clean up A4 canvas: remove decoration, fill the print page width */
  .bz-a4-canvas {
    box-shadow: none;
    width:      100%;
    min-height: auto;
    margin:     0;
  }

  /* Remove list view scroll constraints */
  .bz-doc-view {
    overflow: visible;
    height:   auto;
    flex:     none;
  }

  /* Force dark text and visible borders — theme tokens are screen-only colours.
     Without this, dark-theme near-white text disappears on the white print page. */
  .bz-list__label,
  .bz-list__row td,
  .bz-list__totals-row td {
    color: #111 !important;
  }

  .bz-list__table th {
    color: #444 !important;
    border-bottom-color: #999 !important;
  }

  .bz-list__row td {
    border-bottom-color: #ddd !important;
  }

  .bz-list__totals-row td {
    border-top-color: #999 !important;
  }
}