/* ========================================================================== 
   QuoteMaker product surfaces
   A quiet, warm-neutral bridge between the marketing site and the working UI.
   White is reserved for editable controls and the document itself.
   ========================================================================== */

:root {
  --qm-product-canvas: #f5f6f7;
  --qm-product-canvas-deep: #e5e7eb;
  --qm-product-panel: #f8f8f9;
  --qm-product-panel-strong: #ffffff;
  --qm-product-line: #dfe1e5;
  --qm-product-line-soft: #e7e9ed;
  --qm-product-ink: #202124;
  --qm-product-muted: #5f6368;
  --qm-product-purple-soft: #eef4ff;
  --qm-product-shadow: 0 14px 36px -32px rgba(49, 42, 31, .52);
}

/* Generator: warm the working shell without tinting the quotation page. */
body.page-generator {
  --ct-bg-app: var(--qm-product-canvas);
  --ct-card-bg: var(--qm-product-panel-strong);
  --ct-card-border: var(--qm-product-line);
  --ct-input-border: #d9d4cb;
  --qm-shell: var(--qm-product-canvas);
  --qm-line: var(--qm-product-line);
  --qm-muted: var(--qm-product-muted);
  --qm-ink: var(--qm-product-ink);
  background: var(--qm-product-canvas) !important;
}

body.page-generator .refrens-app-container,
body.page-generator .main-content {
  background: var(--qm-product-canvas) !important;
}

body.page-generator .generator-toolbar {
  background: rgba(250, 248, 243, .94) !important;
  border-bottom-color: var(--qm-product-line) !important;
}

body.page-generator .qm-editor-progress,
body.page-generator .generator-workspace.form-only-mode .editor-card,
body.page-generator .editor-card,
body.page-generator .step-nav-footer {
  background: var(--qm-product-panel-strong) !important;
  border-color: var(--qm-product-line) !important;
  box-shadow: var(--qm-product-shadow) !important;
}

body.page-generator .generator-workspace.form-only-mode .editor-card .card-header-bar,
body.page-generator .generator-workspace.form-only-mode #card-template-styling .card-header-bar,
body.page-generator .card-header-bar,
body.page-generator .qm-final-preview-card-header,
body.page-generator .qm-final-preview-actions {
  background: var(--qm-product-panel) !important;
  border-color: var(--qm-product-line-soft) !important;
}

body.page-generator .contact-box,
body.page-generator .template-starter-wrap,
body.page-generator .design-pill-group,
body.page-generator .color-swatch-group {
  background-color: #f6f3ed !important;
  border-color: var(--qm-product-line-soft) !important;
}

body.page-generator .generator-editor-panel :is(.doc-input, .doc-select, textarea),
body.page-generator .template-starter-select {
  background: #fff !important;
  border-color: #d9d4cb !important;
}

body.page-generator .generator-workspace.form-only-mode .preview-wrapper,
body.page-generator .preview-wrapper {
  background: var(--qm-product-canvas-deep) !important;
  scrollbar-color: #8b5cf6 var(--qm-product-canvas-deep) !important;
}

body.page-generator .preview-wrapper::-webkit-scrollbar-track {
  background: var(--qm-product-canvas-deep) !important;
}

body.page-generator .preview-wrapper::-webkit-scrollbar-thumb {
  border-color: var(--qm-product-canvas-deep) !important;
}

/* The rendered client document must remain paper white. */
body.page-generator :is(#quotation-preview-container, .preview-canvas-inner, .preview-stage) > :is(.document-canvas, .quotation-document, .proposal-document),
body.page-generator #quotation-preview-container .a4-page {
  background: #fff !important;
}

/* Workspace and account: separate navigation, canvas and content surfaces. */
:is(body.page-workspace, body.page-account),
:is(body.page-workspace, body.page-account) .main-content-workspace,
:is(body.page-workspace, body.page-account) .ws-app-frame {
  background: var(--qm-product-canvas) !important;
  color: var(--qm-product-ink);
}

:is(body.page-workspace, body.page-account) .ws-sidebar {
  background: #f0f1f3 !important;
  border-right-color: var(--qm-product-line) !important;
}

:is(body.page-workspace, body.page-account) .ws-sidebar-search {
  background: #e8eaed !important;
  border-color: transparent !important;
}

:is(body.page-workspace, body.page-account) .ws-nav-item:hover {
  background: #e8eaed !important;
}

:is(body.page-workspace, body.page-account) .ws-nav-item.active {
  background: #ffffff !important;
  color: var(--qm-product-ink) !important;
}

:is(body.page-workspace, body.page-account) .ws-sidebar-bottom {
  border-top-color: var(--qm-product-line-soft) !important;
}

:is(body.page-workspace, body.page-account) .ws-main-canvas {
  background: var(--qm-product-canvas) !important;
}

/* Primary information containers: warm white, light border, minimal shadow. */
:is(body.page-workspace, body.page-account) :is(
  .ws-files-card,
  .ws-usage-card,
  .ws-settings-card,
  .ws-profile-card,
  .ws-card,
  .ws-bento-light,
  .ws-project-card,
  .ws-help-card,
  .saas-tab-content,
  .ws-settings-subpane
) {
  background: var(--qm-product-panel-strong) !important;
  border-color: var(--qm-product-line) !important;
  box-shadow: var(--qm-product-shadow);
}

:is(body.page-workspace, body.page-account) :is(
  .ws-settings-tabs-bar,
  .ws-toolbar,
  .ws-table thead th,
  .ws-card-header,
  .ws-section-head,
  .ws-pcard-metrics-grid
) {
  background: var(--qm-product-panel) !important;
  border-color: var(--qm-product-line-soft) !important;
}

:is(body.page-workspace, body.page-account) :is(input, select, textarea):not([type='checkbox']):not([type='radio']):not([type='range']) {
  background-color: #fff !important;
  border-color: #d9d4cb !important;
}

:is(body.page-workspace, body.page-account) :is(input, select, textarea):focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .1) !important;
}

:is(body.page-workspace, body.page-account) .ws-table tbody tr:hover td {
  background: #f8f8f9 !important;
}

:is(body.page-workspace, body.page-account) :is(.ws-pill, .ws-topbar-chip-btn, .ws-action-btn-subtle) {
  border-color: var(--qm-product-line) !important;
}

:is(body.page-workspace, body.page-account) .ws-pill.active {
  background: var(--qm-product-purple-soft) !important;
  color: #6d28d9 !important;
}

/* Preserve the intentionally dark and branded KPI cards. */
:is(body.page-workspace, body.page-account) :is(.ws-bento-dark, .ws-bento-brand) {
  box-shadow: 0 16px 34px -28px rgba(25, 20, 18, .72);
}

@media (max-width: 900px) {
  :is(body.page-workspace, body.page-account) .ws-main-canvas {
    background: var(--qm-product-canvas) !important;
  }

  body.page-generator .generator-workspace,
  body.page-generator .ws-proposal-canvas {
    background: var(--qm-product-canvas) !important;
  }
}

[data-theme='dark'] {
  --qm-product-canvas: #121016;
  --qm-product-canvas-deep: #0c0a0f;
  --qm-product-panel: #19161d;
  --qm-product-panel-strong: #1d1922;
  --qm-product-line: #37303e;
  --qm-product-line-soft: #2c2632;
  --qm-product-ink: #f5f2ed;
  --qm-product-muted: #aaa3b1;
  --qm-product-purple-soft: #2b203d;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) .ws-sidebar,
[data-theme='dark'] body.page-generator .generator-toolbar {
  background: #17131b !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) .ws-sidebar-search,
[data-theme='dark'] :is(body.page-workspace, body.page-account) .ws-nav-item:hover,
[data-theme='dark'] :is(body.page-workspace, body.page-account) .ws-nav-item.active {
  background: #241e29 !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(input, select, textarea):not([type='checkbox']):not([type='radio']):not([type='range']),
[data-theme='dark'] body.page-generator .generator-editor-panel :is(.doc-input, .doc-select, textarea) {
  background: #211b27 !important;
  color: #f8fafc !important;
  border-color: #3a3143 !important;
}

/* Dark-mode legibility -----------------------------------------------------
   Older workspace views contain literal light-theme colors, including inline
   styles. These scoped rules normalize them without touching the white PDF. */
[data-theme='dark'] :is(body.page-workspace, body.page-account) {
  color: #f5f2ed !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(
  .ws-topbar-title,
  .ws-company-name,
  .ws-card-title,
  .ws-files-title,
  .ws-section-title,
  .ws-subhead-title,
  .ws-empty-title,
  .ws-modal-title,
  .ws-doc-name,
  .ws-bento-light,
  .ws-bento-light .ws-bento-value,
  .ws-table td,
  .ws-table th,
  label,
  legend
) {
  color: #f5f2ed !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(
  .ws-company-sub,
  .ws-card-desc,
  .ws-files-subtitle,
  .ws-subhead-desc,
  .ws-empty-desc,
  .ws-modal-sub,
  .ws-field-hint,
  .ws-bento-sub,
  .ws-table-caption
) {
  color: #aaa3b1 !important;
}

/* Override legacy inline light-theme text colors in product pages. */
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #0F172A"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color:#0F172A"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #101828"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #0D0D0C"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #334155"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #344054"] {
  color: #f5f2ed !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #64748B"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color:#64748B"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #667085"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #475569"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #475467"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="color: #52606D"] {
  color: #aaa3b1 !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(
  .ws-modal-card,
  .ws-modal-header,
  .ws-modal-body,
  .ws-modal-footer,
  .ws-bento-dropdown,
  .ws-row-more-menu
) {
  background: var(--qm-product-panel-strong) !important;
  border-color: var(--qm-product-line) !important;
  color: #f5f2ed !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="background: #FAFBFC"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="background: #F8FAFC"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="background: #F1F5F9"],
[data-theme='dark'] :is(body.page-workspace, body.page-account) [style*="background: #FFFFFF"] {
  background: var(--qm-product-panel) !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(
  .ws-btn-outline,
  .ws-action-btn-subtle,
  .ws-topbar-chip-btn,
  .ws-modal-close,
  .ws-row-more > summary
) {
  background: #241e29 !important;
  border-color: #413747 !important;
  color: #ddd7e3 !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(
  .ws-btn-outline,
  .ws-action-btn-subtle,
  .ws-topbar-chip-btn,
  .ws-modal-close,
  .ws-row-more > summary
):hover {
  background: #302737 !important;
  color: #fff !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) .ws-table tbody tr:hover td {
  background: #241e29 !important;
}

[data-theme='dark'] :is(body.page-workspace, body.page-account) :is(
  input,
  select,
  textarea
)::placeholder {
  color: #81798a !important;
  opacity: 1;
}

/* Generator chrome only; quotation/proposal document colors stay unchanged. */
[data-theme='dark'] body.page-generator :is(
  .generator-welcome h1,
  .card-header-bar h3,
  .contact-tag,
  .qm-editor-progress-copy strong,
  .proposal-step-summary strong,
  .housi-plan-summary-price
) {
  color: #f5f2ed !important;
}

[data-theme='dark'] body.page-generator :is(
  .generator-welcome p,
  .field-label,
  .qm-reuse-note,
  .proposal-step-summary small,
  .housi-tab-link
) {
  color: #aaa3b1 !important;
}

[data-theme='dark'] body.page-generator :is(
  .qm-editor-progress,
  .generator-workspace.form-only-mode .editor-card,
  .editor-card,
  .step-nav-footer,
  .card-header-bar,
  .qm-final-preview-card-header,
  .qm-final-preview-actions
) {
  background: var(--qm-product-panel-strong) !important;
  border-color: var(--qm-product-line) !important;
}