/* ==========================================================================
   estimator.css — Unified Estimate Configurator (Beta), PR-4 Build step.

   Desktop-first 3-panel workstation (context · work surface · live price),
   navy top rail with a 6-step progress bar (gold active), inline layer table,
   accessory spec-cards, colour disclaimer. Brand tokens from style.css:
   --cc-navy #1A365D, --cc-gold #D4A012. Below ~1200px we show a
   "best on desktop" banner but stay usable (single-column stack).
   Class prefix: .est-  (never collides with v2-/v3-/studio styles).
   ========================================================================== */

#screen-estimator { padding: 0; }
#screen-estimator .est-root { --est-navy: var(--cc-navy, #1A365D); --est-gold: var(--cc-gold, #D4A012); }

/* -- Desktop hint banner (shown < 1200px) -------------------------------- */
.est-desktop-banner {
  display: none;
  background: #FEF9E7; color: #7A5B00;
  border-bottom: 1px solid var(--est-gold, #D4A012);
  padding: 8px 16px; font-size: 13px; font-weight: 500; text-align: center;
}
@media (max-width: 1199px) { .est-desktop-banner { display: block; } }

/* -- Top rail: estimate id + 6-step progress ----------------------------- */
.est-toprail {
  display: flex; align-items: center; gap: 20px;
  background: var(--est-navy, #1A365D); color: #fff;
  padding: 10px 20px; position: sticky; top: 0; z-index: 20;
}
.est-toprail__brand { font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.est-toprail__id {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: #C9D6E5; background: rgba(255,255,255,.08);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.est-steps { display: flex; align-items: center; gap: 4px; flex: 1; overflow: hidden; }
.est-step {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 500;
  color: #9FB3C8; white-space: nowrap;
}
.est-step__num {
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.12); color: #C9D6E5;
}
.est-step--active { color: #1A365D; background: var(--est-gold, #D4A012); }
.est-step--active .est-step__num { background: rgba(0,0,0,.18); color: #1A365D; }
.est-step--done { color: #DCE6F0; }
.est-step--disabled { opacity: .5; cursor: not-allowed; }
.est-step__sep { color: #4A6484; }
.est-saved {
  margin-left: auto; font-size: 12px; color: #9FB3C8; display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.est-saved--saving { color: var(--est-gold, #D4A012); }
.est-saved__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* -- 3-panel grid -------------------------------------------------------- */
.est-workstation {
  display: grid;
  grid-template-columns: minmax(220px, 22%) 1fr minmax(300px, 28%);
  gap: 0; align-items: start;
  min-height: calc(100vh - 120px);
}
@media (max-width: 1199px) {
  .est-workstation { grid-template-columns: 1fr; }
  .est-price-panel { position: static !important; }
}

.est-panel { padding: 16px; }
.est-panel--left  { border-right: 1px solid var(--md-sys-color-outline-variant, #E0E4EA); background: #FAFBFC; }
.est-panel--center { min-width: 0; }
.est-price-panel {
  border-left: 1px solid var(--md-sys-color-outline-variant, #E0E4EA);
  background: #FAFBFC; position: sticky; top: 60px; align-self: start;
  max-height: calc(100vh - 70px); overflow-y: auto;
}

/* -- LEFT: context rail -------------------------------------------------- */
.est-client-card {
  background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #E0E4EA);
  border-radius: 12px; padding: 14px; margin-bottom: 16px;
}
.est-client-card__name { font-weight: 700; font-size: 15px; color: var(--est-navy, #1A365D); }
.est-client-card__meta { font-size: 12.5px; color: #64748B; margin-top: 3px; }
.est-badge-zoho {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px;
  background: #E8F5E9; color: #2E7D32;
}
.est-badge-zoho--none { background: #ECEFF1; color: #607D8B; }
.est-client-card__rep { font-size: 12px; color: #475569; margin-top: 6px; }
.est-client-card__rep b { color: var(--est-navy, #1A365D); }

.est-rail-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: #94A3B8; margin: 14px 0 6px;
}
.est-item-list { display: flex; flex-direction: column; gap: 4px; }
.est-item-list__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid transparent; background: #fff;
}
.est-item-list__item:hover { border-color: var(--est-gold, #D4A012); }
.est-item-list__item--active { border-color: var(--est-navy, #1A365D); background: #EEF3F8; font-weight: 600; }
.est-item-list__badge { font-size: 11px; color: #94A3B8; }
.est-tabs { display: flex; gap: 6px; margin-top: 6px; }
.est-tab {
  padding: 4px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--md-sys-color-outline-variant, #E0E4EA); background: #fff; cursor: pointer;
}
.est-tab--active { background: var(--est-navy, #1A365D); color: #fff; border-color: var(--est-navy, #1A365D); }
.est-tab--disabled { opacity: .5; cursor: default; }

/* -- CENTER: court cards + layer table ----------------------------------- */
.est-court-card {
  background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #E0E4EA);
  border-radius: 12px; padding: 0; margin-bottom: 18px; overflow: hidden;
}
.est-court-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: #F4F7FA; border-bottom: 1px solid #E0E4EA;
}
.est-court-head__sport { min-width: 150px; }
.est-court-head__area-chip {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--est-navy, #1A365D);
  background: #E8EEF4; padding: 4px 10px; border-radius: 8px;
}
.est-field-inline { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #475569; }
.est-field-inline label { font-weight: 600; }
.est-input, .est-select {
  font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--md-sys-color-outline-variant, #CBD5E1); border-radius: 7px;
  background: #fff; color: #0F172A; min-width: 0;
}
.est-input:focus, .est-select:focus {
  outline: none; border-color: var(--est-gold, #D4A012);
  box-shadow: 0 0 0 2px rgba(212,160,18,.18);
}
.est-input--num { width: 70px; text-align: right; }
.est-input--dim { width: 56px; text-align: right; }
.est-input--rate { width: 76px; text-align: right; }

/* Layer table */
.est-layer-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.est-layer-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #94A3B8; padding: 8px 10px; border-bottom: 1px solid #E0E4EA;
  white-space: nowrap;
}
.est-layer-table td { padding: 6px 10px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.est-layer-table tr:hover td { background: #FBFCFD; }
.est-layer-role { color: #64748B; font-weight: 600; text-transform: capitalize; }
.est-layer-role input { width: 92px; }
.est-cell-amount { text-align: right; font-weight: 600; color: var(--est-navy, #1A365D); white-space: nowrap; }
.est-area-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.est-edit-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--est-gold, #D4A012);
  display: inline-block; flex-shrink: 0;
}
.est-edit-dot[hidden] { display: none; }
.est-row-menu-btn {
  border: none; background: transparent; cursor: pointer; color: #94A3B8;
  padding: 2px 6px; border-radius: 6px; font-size: 16px; line-height: 1;
}
.est-row-menu-btn:hover { background: #F1F5F9; color: #EF4444; }

.est-tier-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; background: #EEF2F7; color: #475569; white-space: nowrap;
}
.est-tier-chip--base { background: #FFF4E5; color: #B7791F; }
.est-tier-chip--below { background: #FDECEA; color: #C0392B; }
.est-tier-chip--l1, .est-tier-chip--l2, .est-tier-chip--l3, .est-tier-chip--l4 {
  background: #E8F0FA; color: #1A365D;
}

.est-add-row { display: flex; gap: 8px; padding: 8px 10px; }
.est-btn-add {
  border: 1px dashed var(--est-gold, #D4A012); color: #9A6E00; background: #FFFDF6;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.est-btn-add:hover { background: #FEF9E7; }

/* Court sub-rows: kerbs, colours, scope, transport */
.est-subrow { padding: 10px 14px; border-top: 1px solid #F1F5F9; font-size: 13px; }
.est-subrow__label { font-weight: 600; color: #475569; margin-right: 8px; }
.est-scope-radios { display: inline-flex; gap: 14px; }
.est-scope-radios label { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.est-helper { font-size: 11.5px; color: #94A3B8; margin-top: 4px; }

/* Colour swatches + disclaimer */
.est-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.est-swatch {
  width: 26px; height: 26px; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.est-swatch--active { border-color: var(--est-navy, #1A365D); }
.est-colour-disclaimer {
  background: #FFF8E1; border: 1px solid var(--est-gold, #D4A012); border-radius: 8px;
  padding: 10px 12px; font-size: 11.5px; color: #7A5B00; margin-top: 8px; line-height: 1.5;
}
.est-colour-disclaimer b { display: block; margin-bottom: 3px; color: #6B4E00; }

.est-transport-expander summary {
  cursor: pointer; font-weight: 600; color: #475569; list-style: none; user-select: none;
}
.est-transport-expander summary::-webkit-details-marker { display: none; }
.est-transport-expander summary::before { content: '▸ '; color: var(--est-gold, #D4A012); }
.est-transport-expander[open] summary::before { content: '▾ '; }
.est-transport-grid { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.est-scope-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: #E8F0FA; color: #1A365D;
}

/* -- Fabrication & Accessories spec-cards -------------------------------- */
.est-accessories { margin-top: 8px; }
.est-acc-card {
  background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #E0E4EA);
  border-radius: 10px; margin-bottom: 10px; overflow: hidden;
}
.est-acc-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
}
.est-acc-thumb {
  width: 40px; height: 40px; border-radius: 8px; background: #EEF2F7; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 18px;
  background-size: cover; background-position: center;
}
.est-acc-name { font-weight: 600; color: #0F172A; }
.est-acc-cat {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 8px; background: #EEF2F7; color: #64748B;
}
.est-acc-price { margin-left: auto; font-weight: 700; color: var(--est-navy, #1A365D); white-space: nowrap; }
.est-acc-price--pending { color: #B7791F; font-weight: 600; font-size: 12px; }
.est-acc-chevron { color: #94A3B8; transition: transform .15s; }
.est-acc-card--open .est-acc-chevron { transform: rotate(90deg); }
.est-acc-body { padding: 0 12px 12px; border-top: 1px solid #F1F5F9; display: none; }
.est-acc-card--open .est-acc-body { display: block; }
.est-acc-specs { width: 100%; min-height: 70px; margin-top: 10px; resize: vertical; }
.est-acc-specs-note { font-size: 11px; color: #94A3B8; margin-top: 4px; }
.est-acc-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.est-acc-imgrow { margin-top: 10px; font-size: 12px; color: #64748B; }

/* -- RIGHT: live price + payment ----------------------------------------- */
.est-price-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #94A3B8; }
.est-grand {
  font-size: 26px; font-weight: 800; color: var(--est-navy, #1A365D); margin: 4px 0 2px;
}
.est-grand__label { font-size: 12px; color: #64748B; }
.est-price-lines { margin: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.est-price-line { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; gap: 8px; }
.est-price-line__name { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-price-line__amt { font-weight: 600; color: #0F172A; white-space: nowrap; }
.est-price-line--pending .est-price-line__amt { color: #B7791F; }
.est-price-divider { border: none; border-top: 1px solid #E0E4EA; margin: 8px 0; }
.est-gst-group { display: flex; justify-content: space-between; font-size: 12px; color: #64748B; padding: 2px 0; }
.est-subtotal-row, .est-grand-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.est-grand-row { font-weight: 800; color: var(--est-navy, #1A365D); font-size: 15px; }
.est-alarm {
  background: #FDECEA; border: 1px solid #E9A99F; border-radius: 8px; padding: 8px 10px;
  font-size: 12px; font-weight: 600; color: #C0392B; margin: 10px 0; display: flex; gap: 6px; align-items: center;
}
.est-payment-preview { margin-top: 14px; }
.est-payment-preview__row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: #475569; }
.est-payment-preview__pct { color: #94A3B8; }

/* -- AI bar (docked, dismissible) ---------------------------------------- */
.est-ai-dock {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid #E0E4EA;
  padding: 8px 12px; display: flex; align-items: center; gap: 8px;
}
.est-ai-dock[hidden] { display: none; }
.est-ai-dock__close { border: none; background: transparent; cursor: pointer; color: #94A3B8; font-size: 18px; }
.est-ai-dock .v2-ai-bar { flex: 1; }

/* -- Beta pill in the drawer/label -------------------------------------- */
.est-beta { font-size: 9.5px; font-weight: 700; color: #B7791F; background: #FEF9E7;
  padding: 1px 5px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }

/* -- Packages: "Make it a package" button, package card, convert modal --- */
.est-btn-package {
  border: 1px solid var(--est-navy, #1A365D); color: var(--est-navy, #1A365D);
  background: #EEF3F8; margin-left: 8px;
}
.est-btn-package:hover { background: #E1EAF4; }

/* Collapsed package card on the build surface */
.est-package-card { border-left: 4px solid var(--est-gold, #D4A012); }
.est-package-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.est-package-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #1A365D;
  background: var(--est-gold, #D4A012); border-radius: 6px; padding: 2px 8px;
}
.est-package-name { font-weight: 700; color: var(--est-navy, #1A365D); font-size: 15px; }
.est-package-lump { margin-left: auto; font-weight: 800; color: var(--est-navy, #1A365D); font-size: 16px; white-space: nowrap; }
.est-package-specs-accordion { margin: 10px 0; }
.est-package-specs-accordion > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: #475569; list-style: none;
}
.est-package-specs-accordion > summary::before { content: '▸ '; color: var(--est-gold, #D4A012); }
.est-package-specs-accordion[open] > summary::before { content: '▾ '; }

/* Modal overlay + card (shared by the convert modal and the card specs) */
.est-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.est-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  box-shadow: 0 20px 60px rgba(15,23,42,.35); overflow: hidden;
}
.est-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--est-navy, #1A365D); color: #fff; padding: 14px 18px;
}
.est-modal__title { font-weight: 700; font-size: 16px; }
.est-modal__close { border: none; background: transparent; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.est-modal > .est-pk-total, .est-modal > .est-pk-field,
.est-modal > .est-pk-section-title, .est-modal > .est-pk-specs,
.est-modal > .est-pk-transport, .est-modal > .est-pk-extras { margin: 0 18px; }
.est-pk-total { text-align: center; padding: 16px 0 8px; }
.est-pk-total__amt { font-size: 30px; font-weight: 800; color: var(--est-navy, #1A365D); }
.est-pk-total__label { font-size: 11.5px; color: #64748B; margin-top: 2px; }
.est-pk-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.est-pk-field__label { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.est-pk-section-title {
  font-size: 11px; font-weight: 800; color: #94A3B8; text-transform: uppercase;
  letter-spacing: .05em; margin: 16px 18px 6px;
}
.est-pk-specs { max-height: 220px; overflow-y: auto; border: 1px solid #E8ECF1; border-radius: 10px; padding: 6px 10px; }
.est-pk-spec-block { padding: 6px 0; border-bottom: 1px dashed #EEF0F3; }
.est-pk-spec-block:last-child { border-bottom: none; }
.est-pk-spec-title { font-weight: 700; font-size: 12.5px; color: var(--est-navy, #1A365D); }
.est-pk-spec-lines { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: #475569; }
.est-pk-spec-lines li { padding: 1px 0; }
.est-pk-seg { display: inline-flex; border: 1px solid #CBD5E1; border-radius: 9px; overflow: hidden; }
.est-pk-seg__btn {
  border: none; background: #fff; color: #475569; font-size: 12.5px; font-weight: 600;
  padding: 7px 18px; cursor: pointer;
}
.est-pk-seg__btn--on { background: var(--est-navy, #1A365D); color: #fff; }
.est-pk-seg--disabled .est-pk-seg__btn { color: #B4BCC7; cursor: not-allowed; background: #F4F6F8; }
.est-pk-excluded-transport, .est-pk-extras { margin-top: 8px; font-size: 12px; }
.est-pk-excluded-transport__row, .est-pk-extras__row {
  display: flex; justify-content: space-between; padding: 3px 0; color: #475569;
}
.est-pk-extras__note { margin-top: 4px; }
.est-modal__actions {
  display: flex; justify-content: flex-end; gap: 10px; padding: 16px 18px; margin-top: 14px;
  border-top: 1px solid #EEF0F3;
}
.est-btn {
  border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
}
.est-btn--ghost { background: #fff; border-color: #CBD5E1; color: #475569; }
.est-btn--ghost:hover { background: #F1F5F9; }
.est-btn--primary { background: var(--est-navy, #1A365D); color: #fff; }
.est-btn--primary:hover { background: #142a4a; }

/* -- Court scoping (PR-6.5) --------------------------------------------- */
/* scope badge on an accessory card header (site / exclusive / shared) */
.est-scope-badge--site { background: #EEF2F7; color: #64748B; }
.est-scope-badge--exclusive { background: #E8F0FA; color: #1A365D; }
.est-scope-badge--shared { background: #FDF3D8; color: #7A5B00; }

/* scope selector inside an accessory card body */
.est-scope-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.est-scope-selector__label { font-size: 11.5px; font-weight: 700; color: #475569; }
.est-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.est-scope-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid #CBD5E1; background: #fff; color: #475569;
}
.est-scope-chip:hover { border-color: var(--est-gold, #D4A012); }
.est-scope-chip--on { background: var(--est-navy, #1A365D); border-color: var(--est-navy, #1A365D); color: #fff; }
.est-scope-hint {
  flex-basis: 100%; font-size: 11px; color: #7A5B00; background: #FFF8E1;
  border: 1px solid var(--est-gold, #D4A012); border-radius: 8px; padding: 7px 10px; line-height: 1.5;
}

/* accessory section titles (Court-specific / Shared / Whole project) */
.est-acc-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #94A3B8; margin: 12px 0 6px;
}

/* court card inline accessory chips ("+ add item to this court") */
.est-court-acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 2px; }
.est-court-acc-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
}
.est-court-acc-chip--own { background: #E8F0FA; color: #1A365D; }
.est-court-acc-chip--shared { background: #FDF3D8; color: #7A5B00; }
.est-court-acc-chip:hover { border-color: var(--est-gold, #D4A012); }
.est-btn-add--tiny { font-size: 11.5px; padding: 3px 8px; }

/* right panel — by_court block view */
.est-price-block { margin-bottom: 10px; }
.est-price-block__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid #EEF0F3; padding-bottom: 3px; margin-bottom: 4px;
}
.est-price-block__title { font-size: 11.5px; font-weight: 700; color: var(--est-navy, #1A365D); }
.est-price-block__sub { font-size: 12px; font-weight: 700; color: #0F172A; }

/* package modal — folded / flag / separate item groups */
.est-pk-folded { margin-bottom: 8px; }
.est-pk-folded__note { color: #1A365D; font-weight: 600; margin-bottom: 4px; }
.est-pk-flags { margin: 8px 0; }
.est-pk-flags__row {
  font-size: 12px; color: #92400E; background: #FEF3C7; border: 1px solid #FCD34D;
  border-radius: 8px; padding: 6px 10px; margin-bottom: 4px;
}