/* Stage 6 S5: the public instant estimate and its quote-page card. Everything is
   scoped under .crm-est- so it never leaks into the marketing site or the staff
   portal. Tokens come from tokens.css (loaded as /css/tokens.css and
   /portal-assets/css/tokens.css — the same file). */

.crm-est-wrap { display: grid; gap: var(--sp-5, 24px); }

.crm-est-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--sp-5, 24px); align-items: start; }
@media (max-width: 820px) { .crm-est-grid { grid-template-columns: 1fr; } }

.crm-est-form {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 16px;
  padding: var(--sp-5, 24px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.crm-est-form-title { margin: 0 0 var(--sp-4, 16px); font-size: 1.05rem; }
.crm-est-form .field { margin-bottom: var(--sp-4, 16px); }
.crm-est-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-2, #475467); }
.crm-est-form select,
.crm-est-form input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: var(--surface, #fff);
}
.crm-est-submit { width: 100%; margin-top: 4px; }
.crm-est-note { margin: var(--sp-3, 12px) 0 0; font-size: 0.8rem; color: var(--ink-2, #475467); }

.crm-est-result { min-height: 220px; }
.crm-est-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 16px;
  padding: var(--sp-5, 24px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.crm-est-lane { margin: 0 0 4px; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-2, #475467); }
.crm-est-price { margin: 0; font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: -0.01em; color: var(--ink, #101828); }
.crm-est-local { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--ink, #101828); }
.crm-est-local-amount { color: var(--brand, #123b5d); }
.crm-est-per { margin: 2px 0 var(--sp-4, 16px); font-size: 0.8rem; color: var(--ink-2, #475467); }

.crm-est-facts { display: flex; flex-wrap: wrap; gap: var(--sp-4, 16px); margin: 0 0 var(--sp-4, 16px); }
.crm-est-facts > div { min-width: 90px; }
.crm-est-facts dt { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2, #475467); }
.crm-est-facts dd { margin: 2px 0 0; font-weight: 700; }

.crm-est-included { border-top: 1px solid var(--border, #e4e7ec); padding-top: var(--sp-4, 16px); }
.crm-est-included h3 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2, #475467); }
.crm-est-included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crm-est-included li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.crm-est-line-amount { font-variant-numeric: tabular-nums; color: var(--ink-2, #475467); }
.crm-est-excluded { margin: var(--sp-4, 16px) 0 0; font-size: 0.82rem; color: var(--ink-2, #475467); }
.crm-est-terms { margin: 6px 0 0; font-size: 0.85rem; color: var(--ink-2, #475467); }
.crm-est-promise { margin: var(--sp-4, 16px) 0; font-weight: 600; }

.crm-est-empty {
  background: var(--surface, #fff);
  border: 1px dashed var(--border, #e4e7ec);
  border-radius: 16px;
  padding: var(--sp-6, 32px);
  text-align: center;
}
.crm-est-empty h2 { margin: 0 0 8px; }
.crm-est-empty p { margin: 0 0 12px; color: var(--ink-2, #475467); }
.crm-est-empty-icon { color: var(--brand, #123b5d); margin-bottom: 12px; }

/* ---- the compact card inside step 2 of the /quote/ wizard ---- */

.crm-est-cardbox {
  margin: 0 0 var(--sp-4, 16px);
  padding: 16px 18px;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 59, 93, 0.04), rgba(18, 59, 93, 0));
}
.crm-est-cardbox h3 { margin: 0 0 4px; font-size: 0.98rem; }
.crm-est-cardbox p { margin: 0 0 12px; font-size: 0.85rem; color: var(--ink-2, #475467); }
.crm-est-cardfields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
@media (max-width: 520px) { .crm-est-cardfields { grid-template-columns: 1fr; } }
.crm-est-cardfields label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 4px; color: var(--ink-2, #475467); }
.crm-est-cardfields select,
.crm-est-cardfields input[type="number"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #e4e7ec); border-radius: 9px; font: inherit; }
.crm-est-cardresult { margin: 12px 0 0; font-size: 0.92rem; }
.crm-est-cardresult strong { font-size: 1.05rem; }

/* ---- staff WhatsApp templates (S5) and the staff estimates list ---- */

.crm-wa-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); align-items: center; margin-bottom: var(--sp-4, 16px); }
.crm-wa-toolbar form { display: inline; }
.crm-wa-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); align-items: center; margin-top: var(--sp-3, 12px); }
.crm-wa-links { margin: var(--sp-3, 12px) 0 0; font-size: var(--fs-14, 0.875rem); color: var(--ink-2, #475467); }
.crm-wa-panel label { display: block; margin: var(--sp-3, 12px) 0 6px; font-weight: 600; font-size: var(--fs-14, 0.875rem); }
.crm-wa-panel select, .crm-wa-panel textarea { width: 100%; }

.crm-wa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 var(--sp-3, 12px); }
.crm-wa-chip {
  border: 1px solid var(--line-2, #e4e7ec);
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fs-12, 0.75rem);
  cursor: pointer;
}
.crm-wa-chip:hover { border-color: var(--accent, #45b5e6); }

.crm-wa-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-5, 24px); align-items: start; }
@media (max-width: 900px) { .crm-wa-grid { grid-template-columns: 1fr; } }
.crm-wa-preview {
  border: 1px solid var(--line-2, #e4e7ec);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-2, #f8fafc);
  white-space: pre-wrap;
  font-size: var(--fs-14, 0.875rem);
  min-height: 72px;
}
.crm-wa-preview-label { font-size: var(--fs-12, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2, #475467); margin: var(--sp-3, 12px) 0 4px; }
.crm-wa-status--draft { color: #8a5a00; }
.crm-wa-status--approved { color: #0a7a3d; }
.crm-wa-status--retired { color: var(--ink-2, #475467); }

/* ---- staff estimates funnel (S5) ---- */

.crm-est-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crm-est-funnel li { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; align-items: center; gap: 12px; }
.crm-est-funnel-stage { font-size: var(--fs-14, 0.875rem); color: var(--ink-2, #475467); }
.crm-est-funnel-bar { width: 100%; height: 14px; border: none; border-radius: 999px; overflow: hidden; accent-color: var(--brand, #123b5d); }
.crm-est-funnel-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.crm-est-funnel-note { margin: var(--sp-3, 12px) 0 0; font-size: var(--fs-12, 0.75rem); color: var(--ink-2, #475467); }
@media (max-width: 520px) { .crm-est-funnel li { grid-template-columns: 1fr auto; } .crm-est-funnel-stage { grid-column: 1 / -1; } }