/* ═══════════════════════════════════════════════════════
   ESTIMATES — Estimate Builder, Tiers, Pages
   ═══════════════════════════════════════════════════════ */

/* ─── Estimate List ───────────────────────────────────── */
.estimate-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
}

.estimate-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s4);
  cursor: pointer;
  transition: border-color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.estimate-card:hover {
  border-color: var(--accent);
}

.estimate-card-left {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.estimate-card-status {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.estimate-card-status.draft { color: var(--text-label); }
.estimate-card-status.sent { color: var(--accent); }
.estimate-card-status.accepted { color: var(--green); }
.estimate-card-status.declined { color: var(--red); }

.estimate-card-number {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.estimate-card-date {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.estimate-card-total {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.estimate-card-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.estimate-card-duplicate {
  /* Stop card-click from propagating visual hover — keep the button
     subtle so the primary action (open) still reads as the card itself. */
  opacity: 0.7;
  transition: opacity var(--t-fast);
}

.estimate-card-duplicate:hover { opacity: 1; }

/* ─── Estimate Builder ────────────────────────────────── */
.est-builder {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Natural content height on desktop so the outer center column's scroll
     stops at the actual end of the totals (no ghost blank space below) */
  height: auto;
  min-height: 0;
}
@media (min-width: 641px) {
  .est-builder {
    /* On desktop, constrain to viewport so the internal Pages list +
       content area have room to scroll independently, but without
       overshooting past the totals. */
    min-height: calc(100vh - 120px);
  }
}

.est-builder-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── Pages Sidebar (V1-style) ───────────────────────── */
.est-pages-sidebar {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  overflow-y: auto;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
}

.est-pages-sidebar-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--s2);
}

.est-pages-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s3);
}

.est-sidebar-page-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
  border: 2px solid transparent;
}

.est-sidebar-page-item:hover {
  background: var(--bg-hover);
}

.est-sidebar-page-item.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.est-sidebar-page-item.active .est-sidebar-page-name {
  color: var(--accent);
  font-weight: 600;
}

.est-sidebar-page-item.dragging {
  opacity: 0.4;
}

.est-sidebar-page-item.drag-over {
  border-top-color: var(--accent);
}

.est-sidebar-page-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.est-sidebar-page-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.est-page-delete-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-label);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 14px;
  opacity: 0;
  transition: all var(--t-fast);
}

.est-sidebar-page-item:hover .est-page-delete-btn {
  opacity: 1;
}

.est-page-delete-btn:hover {
  color: var(--red);
  background: var(--red-bg);
}

.est-add-custom-btn {
  margin-bottom: var(--s3);
}

/* ─── Page Content Area ──────────────────────────────── */
.est-page-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--s4) var(--s5);
  min-width: 0;
}

.est-page-section {
  max-width: 900px;
}

.est-page-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s4);
}

/* ─── Estimate Meta Row (Valid Until + Status) ─────────── */
.est-meta-row {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.est-meta-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.est-meta-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ─── Print Options Row ──────────────────────────────── */
.est-print-options {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--bg-sunken);
  border-radius: var(--r-md);
  margin-bottom: var(--s4);
  font-size: var(--text-xs);
}

.est-print-options-label {
  color: var(--text-label);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

.est-print-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.est-print-check input {
  accent-color: var(--accent);
}

/* ─── Inspection photo picker modal ──────────────────── */
.est-photo-picker-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.est-photo-picker-count {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--text-label);
  font-weight: 600;
}
.est-photo-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--s3);
  max-height: 60vh;
  overflow-y: auto;
  padding: 2px;
}
.est-photo-picker-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 4px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.est-photo-picker-item:hover { background: var(--bg-card); }
.est-photo-picker-item:has(input:checked) {
  border-color: var(--accent);
  background: rgba(6, 139, 195, 0.05);
}
.est-photo-picker-item.already-added {
  opacity: 0.5;
  cursor: not-allowed;
}
.est-photo-picker-item input[type="checkbox"] {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  z-index: 2;
  cursor: pointer;
}
.est-photo-picker-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.est-photo-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.est-photo-picker-missing {
  font-size: var(--text-xs);
  color: var(--text-label);
}
.est-photo-picker-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 4px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.est-photo-picker-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Inspection Inline (V1-style) ───────────────────── */
.est-inspection-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.est-inspection-inline-slot {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.est-inspection-inline-photo {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sunken);
  overflow: hidden;
}

.est-inspection-inline-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.est-inspection-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  color: var(--text-label);
  padding: var(--s4);
  text-align: center;
}

.est-inspection-inline-note {
  padding: var(--s2);
}

.est-inspection-inline-section {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--bg-input);
  border-radius: var(--r-md);
}

.est-inspection-inline-section input {
  flex: 1;
  font-weight: 600;
}

.est-inspection-delete-btn {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.9);
  color: var(--text-label);
}

.est-inspection-delete-btn:hover {
  color: var(--red);
  background: var(--red-bg);
}

/* ─── Signing Actions ────────────────────────────────── */
.est-signing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.est-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  gap: var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.est-builder-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.est-builder-number {
  font-size: var(--text-sm);
  color: var(--text-label);
}

.est-builder-actions {
  display: flex;
  gap: var(--s2);
}

/* ─── Tier System ─────────────────────────────────────── */
.est-tiers {
  margin-bottom: var(--s6);
}

.est-tiers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.est-tiers-tabs {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
}

.est-tier-tab {
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.est-tier-tab.active {
  border-color: var(--navy-base);
  background: var(--navy-base);
  color: var(--text-inverse);
}

.est-tier-tab-input {
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--navy-base);
  background: var(--navy-base);
  color: var(--text-inverse);
  white-space: nowrap;
  width: 140px;
  text-align: center;
  outline: none;
}
.est-tier-tab-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(6, 139, 195, 0.25);
}

.est-tier-tab.disabled {
  opacity: 0.4;
  text-decoration: line-through;
}

.est-tier-tab-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.est-tier-preselect {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--teal, #068bc3);
  margin-right: 2px;
}

.est-upgrade-preselect {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--teal, #068bc3);
  margin-right: 8px;
  align-self: flex-start;
  margin-top: 10px;
}

.est-tier-delete {
  /* Inline (not absolute) so the click target never overlaps the next
     tier's wrapper. Previously the X at right:-6px was under the
     neighboring tab and unclickable after the pre-select checkbox made
     the wrappers sit closer together. */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--t-fast);
  padding: 0;
  margin-left: 4px;
  flex: 0 0 auto;
}

.est-tier-tab-wrap:hover .est-tier-delete {
  opacity: 1;
}

/* ─── Line Items ──────────────────────────────────────── */
.est-items {
  margin-bottom: var(--s4);
  /* Container query anchor — lets the items inside switch to a
     stacked card layout when the *panel* is narrow (e.g. the right
     side panel is open and steals horizontal space), regardless of
     viewport width. Without this the description column collapsed
     to a single character per line. */
  container-type: inline-size;
}

.est-item {
  display: grid;
  /* Columns: drag | desc | qty | unit | price | amount | remove
     Right-side columns are tight so Description keeps as much room as
     possible and all 5 data columns stay visible even when the right
     side panel is open. Only flips to stacked cards at true phone
     widths via the container query at the bottom. */
  grid-template-columns: 22px minmax(140px, 3fr) 56px 72px 76px 82px 28px;
  gap: var(--s1);
  align-items: start;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast), opacity var(--t-fast);
  border-radius: var(--radius-sm);
}

/* Tighter input padding so the narrow columns still feel comfortable. */
.est-item input[name="qty"],
.est-item input[name="price"],
.est-item select[name="unit"],
.est-upgrade-item input[data-field="qty"],
.est-upgrade-item input[data-field="price"],
.est-upgrade-item select[data-field="unit"] {
  padding-left: 6px;
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* Unit dropdowns need room for both the value (e.g. "EA") and the
   native dropdown arrow. The select's right-padding has to accommodate
   the arrow chevron — otherwise short values get truncated to "E."
   on Chrome/Safari. */
.est-item select[name="unit"],
.est-upgrade-item select[data-field="unit"] {
  padding-right: 18px;
}

/* Read-only computed amount cell (qty × price). Live-updates on input. */
.est-item-amount {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding-top: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Only collapse to stacked cards at true phone widths. With the right
   side panel open on a laptop the container is ~600-800px — at those
   widths the columns are tight but readable, and the user wanted to
   keep the Amount column visible. Stacked layout is reserved for
   genuinely narrow screens (phones) where the table won't fit at all. */
@container (max-width: 460px) {
  .est-item-header { display: none; }
  .est-item {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    position: relative;
    padding: var(--s3);
    padding-right: calc(var(--s3) + 28px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--s2);
  }
  .est-item input,
  .est-item select,
  .est-item textarea { width: 100%; }
  .est-item-desc { order: 1; min-width: 0; }
  .est-item .est-item-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s2);
    order: 2;
  }
  /* Amount column is hidden when stacked — the bottom totals box still
     shows the per-line math, and hiding it here saves a whole row per
     line item so the editor stays compact when the side panel is open. */
  .est-item-amount { display: none; }
  .est-item-remove { position: absolute; top: var(--s2); right: var(--s2); }
  .est-item-drag { display: none; }

  /* Section headers stay horizontal even in stacked mode — they only
     have a title input, no qty/price, so flex-column would just waste
     vertical space. Keep the drag handle inline with the title. */
  .est-section-item {
    display: grid;
    grid-template-columns: 24px 1fr 32px;
    flex-direction: unset;
    padding: var(--s2) var(--s3);
    padding-right: var(--s3);
    background: var(--bg-subtle, #f8fafc);
    margin-bottom: var(--s1);
  }
  .est-section-item .est-item-drag { display: flex; }
  .est-section-item .est-item-remove {
    position: static;
    top: auto; right: auto;
  }
}

/* On desktop, flatten the fields-row wrapper so children flow into the parent grid */
.est-item-fields-row {
  display: contents;
}

.est-item.dragging {
  opacity: 0.4;
  background: var(--accent-bg);
}

.est-item.drag-over {
  border-top: 2px solid var(--accent);
}

.est-item-drag {
  width: 24px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-label);
  opacity: 0.5;
  transition: opacity var(--t-fast);
}

.est-item-drag:active {
  cursor: grabbing;
}

.est-item:hover .est-item-drag {
  opacity: 1;
}

.est-item-header {
  display: grid;
  grid-template-columns: 22px minmax(140px, 3fr) 56px 72px 76px 82px 28px;
  gap: var(--s1);
  padding: var(--s2) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: 2px solid var(--border);
}

.est-item-header .col-num {
  text-align: right;
}

.est-item input,
.est-item select {
  font-size: var(--text-sm);
}

.est-item-desc {
  min-width: 0;
}

.est-desc-textarea {
  resize: vertical;
  min-height: 32px;
  max-height: 200px;
  line-height: 1.4;
  overflow-y: auto;
  field-sizing: content;
}

/* Rich-text description (HTML imported from package) — editable in place */
.est-desc-rich {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  min-height: 32px;
  line-height: 1.4;
  font-size: var(--text-sm);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.est-desc-rich[contenteditable="true"]:hover {
  border-color: var(--accent);
}
.est-desc-rich[contenteditable="true"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(6, 139, 195, 0.15);
}
.est-desc-rich p { margin: 0 0 4px; }
.est-desc-rich p:last-child { margin-bottom: 0; }
.est-desc-rich ul,
.est-desc-rich ol { margin: 4px 0 4px 20px; padding: 0; }

.est-item-remove {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-label);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  transition: color var(--t-fast);
}

.est-item-remove:hover {
  color: var(--red);
  background: var(--red-bg);
}

/* ─── Section Items ──────────────────────────────── */
/* Compact horizontal layout — bold title sits beside the drag handle
   on a single tight row, so it takes up one line of vertical space
   regardless of whether the side panel is open. */
.est-section-item {
  grid-template-columns: 24px 1fr 32px;
  border-bottom: 2px solid var(--border);
  background: var(--bg-subtle, #f8fafc);
  padding: var(--s1) 0;
  align-items: center;
}

.est-section-desc {
  grid-column: 2;
}

.est-section-input {
  font-weight: 700;
  font-size: var(--text-sm);
  border: none;
  background: transparent;
  width: 100%;
  padding: 4px 0;
  line-height: 1.3;
}

.est-section-input:focus {
  outline: none;
  border-bottom: 2px solid var(--accent);
}

.est-item-total {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-align: right;
  padding-top: var(--s2);
}

.est-add-item {
  padding: var(--s2) 0;
}

/* ─── Cover Page Editor ───────────────────────────────── */
.est-cover-preview {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.est-cover-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.est-cover-info {
  padding: var(--s3);
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.est-cover-info-row {
  display: flex;
  gap: var(--s2);
  font-size: var(--text-sm);
}
.est-cover-hero-area {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
}
.est-cover-hero-img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  display: block;
}
.est-cover-divider {
  height: 1px;
  background: var(--border);
  margin: var(--s1) 0;
}
.est-cover-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

/* ─── Tier Note ───────────────────────────────────────── */
.est-tier-note {
  margin: var(--s3) 0;
  padding: 0 var(--s2);
}
.est-tier-note-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--s1);
  display: block;
}
.est-tier-note-input {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  font-size: var(--text-sm);
}

/* ─── Upgrades ────────────────────────────────────────── */
.est-upgrades {
  margin: var(--s4) 0;
  padding: var(--s4);
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
}

.est-upgrades-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.est-upgrades-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}

.est-upgrades-print-opts {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.est-upgrade-item {
  display: grid;
  /* checkbox | desc | qty | unit | price | amount | remove */
  grid-template-columns: 22px minmax(140px, 3fr) 56px 72px 76px 82px 28px;
  gap: var(--s1);
  align-items: start;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}

/* On desktop, flatten the fields-row wrapper for upgrades too */
.est-upgrade-item .est-item-fields-row {
  display: contents;
}

/* ─── Totals ──────────────────────────────────────────── */
.est-totals {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s4);
  margin: var(--s4) 0;
}

/* Discount input row inside totals */
.est-discount-row {
  display: flex;
  gap: var(--s3);
  align-items: end;
  padding: 0 0 var(--s3);
  margin-bottom: var(--s2);
  border-bottom: 1px dashed var(--border);
}

.est-discount-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.est-discount-amount-field {
  flex: 0 0 130px;
}

.est-discount-label-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.est-total-row {
  display: flex;
  justify-content: space-between;
  padding: var(--s1) 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.est-total-row.grand {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  border-top: 2px solid var(--border);
  padding-top: var(--s2);
  margin-top: var(--s2);
}

.est-total-row.deposit {
  color: var(--accent);
  font-weight: 600;
}

/* ─── Pages Management ────────────────────────────────── */
.est-pages {
  margin: var(--s4) 0;
}

.est-pages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.est-page-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--s2);
  cursor: default;
  transition: border-color var(--t-fast), opacity var(--t-fast);
}

.est-page-item:hover {
  border-color: var(--accent);
}

.est-page-item.dragging {
  opacity: 0.4;
}

.est-page-item.drag-over {
  border-top: 2px solid var(--accent);
}

.est-page-drag-handle {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-label);
  opacity: 0.5;
  flex-shrink: 0;
}

.est-page-drag-handle:active {
  cursor: grabbing;
}

.est-page-item:hover .est-page-drag-handle {
  opacity: 1;
}

.est-page-item-left {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1;
}

.est-page-item-right {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

.est-page-name {
  font-weight: 500;
  color: var(--text-primary);
}

.est-page-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}

.est-page-toggle.on {
  background: var(--green);
}

.est-page-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-inverse);
  transition: transform var(--t-fast);
}

.est-page-toggle.on::after {
  transform: translateX(18px);
}

/* ─── Inspection Page (Photo Layouts) ─────────────────── */
.est-inspection {
  padding: var(--s4);
}

.est-inspection-layout-picker {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.est-inspection-layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s3);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-width: 80px;
  transition: border-color var(--t-fast);
}

.est-inspection-layout-option.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.est-inspection-layout-icon {
  width: 48px;
  height: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.est-inspection-layout-icon .box {
  background: var(--accent);
  opacity: 0.5;
  border-radius: 1px;
  flex: 1;
}

.est-inspection-layout-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
}

.est-inspection-photos {
  display: grid;
  gap: var(--s3);
}

.est-inspection-photos.layout-2 {
  grid-template-columns: 1fr 1fr;
}

.est-inspection-photos.layout-2w {
  grid-template-columns: 1fr;
}

.est-inspection-photos.layout-4 {
  grid-template-columns: 1fr 1fr;
}

.est-inspection-photos.layout-1 {
  grid-template-columns: 1fr;
}

.est-inspection-photo {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.est-inspection-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.est-inspection-photo-note {
  padding: var(--s2) var(--s3);
}

.est-inspection-photo-note textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  resize: none;
  font-family: inherit;
}

.est-inspection-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-label);
  font-size: var(--text-sm);
  transition: border-color var(--t-fast);
}

.est-inspection-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Merge Field Pills ───────────────────────────────── */
.merge-field {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--accent);
  opacity: 0.8;
  user-select: none;
  transition: opacity var(--t-fast);
}

.merge-field:hover {
  opacity: 1;
}

.merge-field-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: var(--s2) 0;
}

/* ─── Estimate Summary (before signing) ───────────────── */
.est-summary {
  padding: var(--s4);
}

.est-summary-amount {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
}

.est-summary-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s4);
  margin: var(--s4) 0;
}

.est-summary-label {
  font-size: var(--text-sm);
  color: var(--text-label);
  text-transform: uppercase;
  font-weight: 600;
}

.est-summary-value {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.est-summary-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.est-summary-actions .btn {
  width: 100%;
  justify-content: center;
  gap: var(--s2);
}

.est-summary-actions-secondary {
  margin-top: var(--s2);
  display: flex;
  justify-content: center;
}

.est-signed-banner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-lg);
  background: var(--green-bg, #dcfce7);
  color: var(--green, #16a34a);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--s3);
}

.est-signed-tier {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.signing-tier-list,
.signing-upgrade-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.signing-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  cursor: pointer;
  font-size: var(--text-sm);
}

.signing-checkbox-row:hover {
  background: var(--bg-hover);
}

.signing-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Mobile adjustments ──────────────────────────────── */
@media (max-width: 640px) {
  .est-builder {
    padding: 0;
  }

  /* Header: stack title and actions */
  .est-builder-header {
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s3);
  }

  .est-builder-header-left {
    flex: 1 1 100%;
    gap: var(--s2);
  }

  .est-builder-title {
    font-size: var(--text-lg);
  }

  .est-builder-actions {
    flex: 1 1 100%;
    display: flex;
    gap: var(--s2);
  }

  .est-builder-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Page content: full width, no extra padding */
  .est-page-content {
    padding: var(--s3);
  }

  .est-page-section {
    max-width: 100%;
  }

  /* Items: card-based mobile layout */
  .est-item-header {
    display: none;
  }

  .est-item {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    position: relative;
    padding: var(--s3);
    padding-right: calc(var(--s3) + 28px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--s2);
  }

  .est-item input,
  .est-item select,
  .est-item textarea {
    width: 100%;
  }

  .est-item-desc {
    order: 1;
  }

  .est-item .est-item-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s2);
    order: 2;
  }

  .est-item input[name="qty"],
  .est-item select[name="unit"],
  .est-item input[name="price"] {
    font-size: var(--text-sm);
  }

  .est-item-remove {
    position: absolute;
    top: var(--s2);
    right: var(--s2);
  }

  .est-item-drag {
    display: none;
  }

  /* Upgrades: card layout */
  .est-upgrade-item {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    position: relative;
    padding: var(--s3);
    padding-right: calc(var(--s3) + 28px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--s2);
  }

  .est-upgrade-item .est-item-fields-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--s2);
  }

  .est-upgrade-item .est-item-remove {
    position: absolute;
    top: var(--s2);
    right: var(--s2);
  }

  /* Tiers: horizontal scroll */
  .est-tiers-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s1);
    scrollbar-width: none;
  }

  .est-tiers-tabs::-webkit-scrollbar { display: none; }

  /* Print options: wrap */
  .est-print-options {
    flex-wrap: wrap;
    gap: var(--s2);
  }

  /* Inspection layout picker scroll */
  .est-inspection-layout-picker {
    overflow-x: auto;
    padding-bottom: var(--s2);
  }

  /* Totals: full width */
  .est-totals {
    max-width: 100%;
  }
}

/* ─── Estimate Builder Enhancements (Phase 3) ────────── */

.est-builder-header-left {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.est-mode-select {
  width: auto;
  min-width: 120px;
}

.est-section-group {
  margin: var(--s4) 0;
}

.est-section-header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.est-section-icon {
  color: var(--text-label);
  display: flex;
  align-items: center;
}

.est-section-icon svg {
  width: 16px;
  height: 16px;
}

/* ─── Internal Note Widget ───────────────────────────── */
.est-internal-note-widget {
  margin-top: auto;
  padding: var(--s3);
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
}

.est-internal-note-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.est-internal-note-body .quick-text-wrapper {
  align-self: flex-end;
}

.badge-muted {
  font-size: var(--text-xs);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  color: var(--text-label);
  font-weight: 500;
}

/* ─── Page Item — Enhanced with View button ──────────── */
.est-page-item-right {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.btn-xs {
  padding: var(--s1) var(--s2);
  font-size: var(--text-xs);
  min-height: 24px;
}

/* ─── Page Preview Modal ─────────────────────────────── */
.est-page-preview {
  padding: var(--s3) 0;
  min-height: 200px;
}

.preview-cover {
  text-align: center;
  padding: var(--s6) 0;
}

.preview-cover h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--s4) 0 var(--s2);
}

.preview-cover p {
  color: var(--text-secondary);
  margin: var(--s1) 0;
}

.preview-hero {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.preview-hero-placeholder {
  width: 100%;
  height: 160px;
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-size: var(--text-sm);
}

.preview-text {
  padding: var(--s3);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.preview-table th {
  background: var(--navy-darkest);
  color: var(--text-inverse);
  padding: var(--s2) var(--s3);
  text-align: left;
  font-weight: 600;
}

.preview-table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}

.preview-table tr:nth-child(even) {
  background: var(--bg-input);
}


/* ─── Inspection Editor (in modal) ───────────────────── */
.est-inspection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

.est-inspection-editor-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--s2);
}

.est-inspection-editor-item.section {
  background: var(--bg-input);
  align-items: center;
}

.est-inspection-editor-item.section input {
  flex: 1;
  font-weight: 600;
}

.est-inspection-thumb {
  width: 64px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-sunken);
}

.est-inspection-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.est-inspection-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
}

.est-inspection-editor-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.est-inspection-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  padding: var(--s3) 0 var(--s1);
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--s2);
}

.est-inspection-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-size: var(--text-sm);
}

/* ─── Desktop: wider item grid ────────────────────────── */
@media (min-width: 1025px) {
  .est-builder {
    max-width: none;
  }
}

/* ─── Mobile: stack pages as horizontal pills + gear button ── */
@media (max-width: 640px) {
  .est-builder-body {
    flex-direction: column;
    overflow: visible;
  }

  /* Hide the desktop sidebar entirely on mobile */
  .est-pages-sidebar {
    display: none;
  }

  /* Show the mobile page pills bar */
  .est-mobile-pages-bar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .est-mobile-pages-bar::-webkit-scrollbar { display: none; }

  .est-mobile-page-pill {
    flex-shrink: 0;
    padding: var(--s1) var(--s3);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
  }

  .est-mobile-page-pill.active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
  }

  .est-mobile-page-pill.disabled {
    opacity: 0.4;
    text-decoration: line-through;
  }

  .est-mobile-pages-gear {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .est-mobile-pages-gear:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .est-inspection-inline-grid {
    grid-template-columns: 1fr;
  }

  .rte-editable {
    min-height: 200px !important;
  }
}

/* Desktop/Tablet: hide mobile-only elements */
@media (min-width: 641px) {
  .est-mobile-pages-bar {
    display: none;
  }
}

/* ─── Page Manager Bottom Sheet ──────────────────────────── */
.est-page-manager-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.est-page-manager-sheet.open {
  pointer-events: auto;
  opacity: 1;
}

.est-page-manager-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-md);
}

.est-page-manager-content {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 250ms ease;
}

.est-page-manager-sheet.open .est-page-manager-content {
  transform: translateY(0);
}

.est-page-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}

.est-page-manager-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.est-page-manager-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Page items in the bottom sheet */
.est-pm-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: var(--s2);
  background: var(--bg-page);
  cursor: grab;
  transition: background var(--t-fast);
}

.est-pm-item:active {
  background: var(--bg-hover);
}

.est-pm-item.dragging {
  opacity: 0.4;
}

.est-pm-item.drag-over {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.est-pm-drag {
  color: var(--text-label);
  flex-shrink: 0;
  cursor: grab;
}

.est-pm-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.est-pm-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.est-pm-delete {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  cursor: pointer;
}

.est-pm-delete:hover {
  color: var(--red);
  background: var(--red-bg);
}

.est-pm-add-btn {
  width: 100%;
  margin-top: var(--s2);
}

/* Internal note in bottom sheet */
.est-pm-note {
  margin-top: var(--s4);
  border-top: 1px solid var(--border);
  padding-top: var(--s3);
}

.est-pm-note-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--s2);
}

/* ─── Custom PDF Preview ──────────────────────────────── */
.est-pdf-preview {
  margin-top: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 70vh;
  min-height: 500px;
  background: var(--bg-input);
}
.est-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ─── Photo Size Selector ─────────────────────────────── */
.est-photo-size-selector {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.est-photo-size-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.est-photo-size-btn {
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.est-photo-size-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.est-photo-size-btn.active {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}

/* ─── Custom Photo Page Grid ──────────────────────────── */
.est-custom-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s3);
  margin: var(--s3) 0;
}

.est-custom-photo-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.est-custom-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.est-custom-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0,0,0,0.6);
  color: white;
  cursor: pointer;
  border-radius: 50%;
  font-size: 14px;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.est-custom-photo-thumb:hover .est-custom-photo-remove {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   RICH TEXT EDITOR — Used in estimates intro/terms/warranty
   ═══════════════════════════════════════════════════════ */

.rte-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.rte-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--s2);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.rte-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.rte-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.rte-btn svg {
  width: 16px;
  height: 16px;
}

.rte-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.rte-editable {
  padding: var(--s3) var(--s4);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-primary);
  outline: none;
  overflow-y: auto;
  min-height: 400px;
}

/* Full-height RTE for intro, terms, warranty, custom text pages */
.est-page-content .rte-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.est-page-content .rte-editable {
  flex: 1;
  min-height: calc(100vh - 350px);
}

.rte-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-label);
  pointer-events: none;
}

.rte-editable { line-height: 1.3; }
.rte-editable p { margin-bottom: var(--s2); line-height: 1.3; }
.rte-editable ul, .rte-editable ol { padding-left: 24px; margin: var(--s2) 0; line-height: 1.3; }
.rte-editable li { margin: var(--s1) 0; line-height: 1.3; }
.rte-editable a { color: var(--accent); text-decoration: underline; }

/* Merge field pills */
.merge-field {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  vertical-align: baseline;
  user-select: none;
}

/* Token dropdown */
.rte-token-dropdown {
  position: relative;
}

.rte-token-trigger {
  font-size: var(--text-xs);
  white-space: nowrap;
}

.rte-token-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown, 100);
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s1) 0;
  margin-top: var(--s1);
  max-height: 240px;
  overflow-y: auto;
}

.rte-token-menu.open {
  display: block;
}

.rte-token-option {
  display: block;
  width: 100%;
  padding: var(--s2) var(--s3);
  border: none;
  background: transparent;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.rte-token-option:hover {
  background: var(--bg-input);
}

/* ─── Inspection Layout Picker ─────────────────────── */
.est-inspection-layout-options {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s2);
}

.est-inspection-layout-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--bg-card);
  transition: all var(--t-fast);
  min-width: 80px;
}

.est-inspection-layout-opt:hover {
  border-color: var(--accent);
}

.est-inspection-layout-opt.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.est-inspection-layout-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.est-inspection-layout-opt.active .est-inspection-layout-label {
  color: var(--accent);
  font-weight: 600;
}

.layout-thumb {
  width: 64px;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--bg-input);
  border-radius: 4px;
}

.layout-thumb.layout-2w {
  grid-template-columns: 1fr;
}

.layout-thumb.layout-4p {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.layout-thumb.layout-1f {
  grid-template-columns: 1fr;
}

.lt-cell,
.lt-cell-wide,
.lt-cell-sm,
.lt-cell-full {
  background: var(--accent);
  opacity: 0.3;
  border-radius: 2px;
}

.est-inspection-layout-opt.active .lt-cell,
.est-inspection-layout-opt.active .lt-cell-wide,
.est-inspection-layout-opt.active .lt-cell-sm,
.est-inspection-layout-opt.active .lt-cell-full {
  opacity: 0.6;
}