/* ── Edara CRM — quote.css ─────────────────────────────────────────────────
   Styles for both the in-app quote viewer (#/deals/:id/quotes/:qid) and the
   CRM shell around it (top bar, status pill, share box). The quote
   document styles below (.quote-doc …) are duplicated in
   backend/app/templates/quote.html so the standalone public page is
   self-contained without loading external CSS. Text sizes here are MD3
   type-scale tokens; quote.html, which has no tokens.css, carries the same
   steps as px — change both together.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Quote page layout ──────────────────────────────────────────────────── */
.quote-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
}

/* ── Top bar (.dd-topbar, _recordLayout.js) ─────────────────────────────
   Material 3's app bar: the title and its one or two actions, scrolling away
   with the page rather than pinned over the quote. */
.quote-page > .dd-topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}
.quote-title-version  { font-size: var(--md-sys-typescale-body-medium-size); font-weight: 500; color: var(--color-on-surface-var); }
.quote-share-icon     { color: var(--color-primary); font-size: 18px; }

/* ── Status pill ─────────────────────────────────────────────────────────── */
.quote-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.quote-status-pill.draft    { background: #e8e8e8; color: #555; }
.quote-status-pill.sent     { background: #dbeafe; color: #1d4ed8; }
.quote-status-pill.accepted { background: #dcfce7; color: #166534; }
.quote-status-pill.rejected { background: #fee2e2; color: #991b1b; }
.quote-status-pill.expired  { background: #fef3c7; color: #92400e; }

.quote-version-badge.older {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 500;
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-var);
  border: 1px solid var(--color-outline-variant);
  cursor: help;
}

/* ── Document wrapper (adds a white card shadow on-screen) ───────────────── */
.quote-doc-wrapper {
  background: var(--color-surface-container-lowest);
  flex: 1;
  padding: 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (max-width: 600px) {
  .quote-doc-wrapper { padding: 12px; }
}

/* ── Toolbar above the document: template, sections, the next status ───── */
.quote-docbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 24px; border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
}
.quote-docbar:empty { display: none; }
.quote-docbar .btn { gap: 6px; }
/* Template and Sections: one look, a pill that opens a menu. */
.quote-docbar__template, .quote-docbar__sections { max-width: 100%; }
.quote-docbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The quote's next status sits at the toolbar's end. */
.quote-docbar__end { margin-inline-start: auto; }
.quote-sections { padding: 8px 4px; }
.quote-sections__item { display: flex; min-height: 40px; padding: 0 12px; }
.quote-template-frame { display: block; width: 100%; min-height: 60vh; border: 0; background: #fff; }
.quote-doc-wrapper:has(.quote-template-frame) { padding: 0; }
@media (max-width: 600px) {
  .quote-docbar { padding: 10px 12px; }
  /* Sections and the next status share one row on a phone. */
  .quote-docbar__sections > .material-symbols-outlined:first-child { display: none; }
}
@media (pointer: coarse) {
  .quote-sections__item { min-height: 48px; }
}


/* ── A renamed line's card (M3 rich tooltip) ──────────────────────────────
   Floats over the CRM page, outside the quote, and never prints. */
.quote-name-tip {
  position: fixed; z-index: 450; max-width: 320px; padding: 12px 16px 6px;
  border-radius: 12px; background: var(--color-surface-container);
  color: var(--color-on-surface-var); box-shadow: var(--shadow-2);
  font-size: var(--md-sys-typescale-body-dense-size); line-height: 1.5;
}
.quote-name-tip p { margin: 0 0 4px; overflow-wrap: anywhere; }
.quote-name-tip__head { font-weight: 600; color: var(--color-on-surface); }
.quote-name-tip__undo { margin-inline-start: -8px; margin-top: 2px; color: var(--color-primary); }
@media print { .quote-name-tip { display: none !important; } }

/* ── Share link display ──────────────────────────────────────────────────── */
.quote-share-box {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quote-share-url {
  flex: 1;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--color-on-surface-var);
  word-break: break-all;
  font-family: monospace;
}
.quote-share-copy-btn {
  padding: 5px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-small-size);
  white-space: nowrap;
}
.quote-share-copy-btn:hover { background: var(--color-surface-container-high); }

/* ── Quote document (shared with templates/quote.html) ───────────────────── */
.quote-doc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--md-sys-typescale-body-dense-size);
  color: #1a1a1a;
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #fff;
}

.quote-expired-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
  font-weight: 600;
  text-align: center;
}

.quote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 20px;
  margin-bottom: 24px;
  gap: 24px;
}
.quote-seller        { flex: 1; min-width: 0; }
.quote-seller-logo   { max-height: 56px; max-width: 180px; object-fit: contain; margin-bottom: 8px; display: block; }
.quote-seller-name   { font-size: var(--md-sys-typescale-body-large-size); font-weight: 700; margin: 0 0 4px; }
.quote-seller-detail { color: #555; line-height: 1.5; margin: 0; white-space: pre-wrap; }

.quote-meta          { text-align: right; flex-shrink: 0; }
.quote-number        { font-size: var(--md-sys-typescale-title-large-size); font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.quote-meta-row      { color: #555; font-size: var(--md-sys-typescale-body-small-size); margin: 2px 0; }
.quote-meta-row strong { color: #1a1a1a; }

.quote-buyer {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.quote-buyer-label  { font-size: var(--md-sys-typescale-label-small-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 0 0 6px; }
.quote-buyer-name   { font-size: var(--md-sys-typescale-body-large-size); font-weight: 700; margin: 0 0 4px; }
.quote-buyer-detail { color: #555; margin: 0; line-height: 1.5; white-space: pre-wrap; }

.quote-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.quote-table th {
  background: #1a1a1a; color: #fff; padding: 9px 12px; text-align: left;
  font-size: var(--md-sys-typescale-label-small-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.quote-table th.num { text-align: right; }
.quote-table td { padding: 9px 12px; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
.quote-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-table tr:last-child td { border-bottom: none; }
.quote-table tr:nth-child(even) td { background: #fafafa; }
.quote-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.quote-item-copy { min-width: 0; }
.quote-item-image {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
  object-position: center;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  background: #fff;
}
.quote-item-name { font-weight: 600; }
.quote-item-sku  { font-size: var(--md-sys-typescale-label-small-size); color: #888; }
.quote-item-desc { font-size: var(--md-sys-typescale-body-small-size); color: #555; margin-top: 2px; }

.quote-totals       { display: flex; justify-content: flex-end; margin-bottom: 28px; }
.quote-totals-table { width: 280px; border-collapse: collapse; }
.quote-totals-table td { padding: 5px 8px; font-size: var(--md-sys-typescale-body-dense-size); }
.quote-totals-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.quote-totals-sep td { border-top: 1px solid #ddd; padding-top: 8px; }
.quote-grand-total td { font-size: var(--md-sys-typescale-body-large-size); font-weight: 700; border-top: 2px solid #1a1a1a; padding-top: 10px; }

.quote-section-label { font-size: var(--md-sys-typescale-label-small-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 0 0 6px; }
.quote-notes { color: #333; line-height: 1.6; margin-bottom: 20px; white-space: pre-wrap; }
.quote-terms {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px 16px;
  color: #555;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: 1.6;
  white-space: pre-wrap;
  margin-bottom: 20px;
}

/* ── Print overrides — hide everything except the quote document ────────── */
@media print {
  body * { visibility: hidden !important; }
  .quote-doc-wrapper,
  .quote-doc-wrapper * { visibility: visible !important; }
  /* visibility:hidden reserves layout space, leaving a blank band where the
     top bar / share box used to sit. display:none collapses them so the
     printed document starts at the top of the page. */
  .quote-page > .dd-topbar, #qaShareBox, .quote-docbar { display: none !important; }
  .quote-doc-wrapper {
    position: absolute !important;
    inset: 0;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .quote-doc { padding: 0 !important; max-width: 100% !important; }
  .quote-table tr { break-inside: avoid; }
  .quote-item-image { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  @page { margin: 20mm; }
}

/* A line's name renames in place on the CRM quote page; the pencil is for the
   screen only, never the printed or saved quote. */
.quote-doc .ie-hint { opacity: 0; }
.quote-doc .ie-field:hover .ie-hint,
.quote-doc .ie-field:focus-visible .ie-hint { opacity: 1; }
@media print { .quote-doc .ie-hint { display: none; } }