/* Shared screen surfaces: distinct sections on the Bindr grey workspace.
   Keep table geometry, drawing coordinates and contractor print layouts local. */
@media screen {
  :root {
    --bindr-section-gap:22px;
    --bindr-inner-gap:12px;
    --bindr-section-accent:#445267;
  }

  /* Layout wrappers expose the page between their cards. */
  .view :is(.crm-two-col,.business-setup-grid,.quote-template-layout,.template-layout,.material-library-layout,.qr-record-grid,.cvr-report-panels,.split-grid,.saved-grid) {
    gap:var(--bindr-section-gap);background:transparent;box-shadow:none;min-width:0;
  }
  .view :is(.qr-main,.qr-aside,.qr-support,.allowances-panel) {min-width:0;background:transparent;box-shadow:none}

  /* Major sections share their edge, surface and heading treatment. */
  .view :is(.panel,.crm-panel,.crm-table-wrap,.workflow-panel,.cvr-report-panel,.cvr-costing-box,.cvr-comparison-box,.qr-info-card,.qr-quote-card,.saved-card,.job-folder,.project-file-explorer,.ku-scroll) {
    min-width:0;background:var(--bindr-card);border-color:var(--bindr-border);border-radius:var(--bindr-radius);box-shadow:none;
  }
  .view :is(.panel,.crm-panel,.workflow-panel,.cvr-report-panel,.cvr-costing-box,.cvr-comparison-box,.qr-info-card,.template-panel) {
    border-top:3px solid var(--bindr-section-accent);
  }
  .view :is(.crm-panel-heading,.workflow-heading,.cvr-section-heading,.cvr-costing-heading,.cvr-report-panel-heading,.panel-title-row) {
    gap:var(--bindr-inner-gap);color:var(--bindr-text);
  }
  .view :is(.crm-panel-heading,.panel>.section-heading,.workspace-section>.workspace-section-heading) {
    padding:10px 12px;background:var(--bindr-subtle)!important;border-bottom:1px solid var(--bindr-border);
  }
  .view :is(.crm-panel-heading,.cvr-costing-heading,.cvr-report-panel-heading,.panel-title-row,.workspace-section-heading) :is(h2,h3) {
    margin:0;font-size:1rem;font-weight:650;line-height:1.4;
  }
  .view :is(.crm-panel,.workflow-panel,.qr-info-card,.qr-quote-card,.cvr-report-panel,.cvr-costing-box,.cvr-comparison-box) {margin-bottom:var(--bindr-section-gap)}
  .view :is(.crm-two-col,.business-setup-grid,.quote-template-layout,.cvr-report-panels) > :is(.panel,.crm-panel,.cvr-report-panel) {margin:0}
  .view .crm-panel>.crm-table-wrap {margin:0;border:0;border-radius:0;box-shadow:none}
  .view .crm-panel>.crm-table-wrap:last-child {border-radius:0 0 var(--bindr-radius) var(--bindr-radius)}
  .view>.workspace-section + .workspace-section,.view .additional-editor {margin-top:var(--bindr-section-gap)}
  .view .split-grid {margin-top:var(--bindr-section-gap);margin-bottom:var(--bindr-section-gap)}
  .view :is(.crm-filters,.cvr-report-filters,.estimate-link,.bindr-company-summary) {
    background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius);padding:10px 12px;margin-block:12px var(--bindr-section-gap);box-shadow:none;
  }

  /* Dashboard figures are individual cards, rather than a joined white strip. */
  .view :is(.metric-grid,.crm-kpis,.cvr-report-metrics,.ku-workspace .ku-summary) {
    gap:var(--bindr-inner-gap);padding:0;background:transparent;border:0;box-shadow:none;margin-block:12px var(--bindr-section-gap);
  }
  .view :is(.metric-grid,.crm-kpis,.cvr-report-metrics)>article,.view .ku-summary>div {
    min-width:0;margin:0;padding:10px 12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-top:3px solid var(--bindr-section-accent);border-radius:var(--bindr-radius);box-shadow:none;
  }
  .view :is(.metric-grid,.crm-kpis,.cvr-report-metrics)>article:last-child {border:1px solid var(--bindr-border);border-top:3px solid var(--bindr-section-accent)}
  .view :is(.metric-grid,.crm-kpis,.cvr-report-metrics) :is(span,small) {color:var(--bindr-muted)}
  .view .pipeline-stage-filter {gap:var(--bindr-inner-gap);background:transparent;box-shadow:none;margin-bottom:var(--bindr-section-gap)}
  .view .pipeline-stage-choice {border-radius:var(--bindr-radius)}
  .view>.crm-empty {padding:16px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius)}
  .view .pipeline-board {gap:var(--bindr-section-gap)}
  .view .pipeline-column {background:var(--bindr-subtle);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius);box-shadow:none}
  .view .pipeline-card {background:var(--bindr-card);border-color:var(--bindr-border);border-radius:var(--bindr-radius);margin-top:var(--bindr-inner-gap);padding:12px}
  .view .pipeline-column>header {border-color:var(--bindr-border)}
  .view .chase-summary {gap:var(--bindr-inner-gap);margin-block:12px var(--bindr-section-gap)}
  .view .chase-filter,.view .chase-value {border-radius:var(--bindr-radius)}

  /* Library and setup sections keep a single box around each useful group. */
  .view .material-library-layout :is(.material-library-main,.material-library-waiting) {
    min-width:0;padding:0;background:var(--bindr-card);border:1px solid var(--bindr-border);border-top:3px solid var(--bindr-section-accent);border-radius:var(--bindr-radius);overflow:hidden;
  }
  .view .material-library-layout :is(.material-library-main,.material-library-waiting)>.section-heading {
    margin:0;padding:10px 12px;background:var(--bindr-subtle);border-bottom:1px solid var(--bindr-border);
  }
  .view .material-library-layout :is(.material-library-main,.material-library-waiting)>.panel {margin:0;border:0;border-radius:0}
  .view :is(.business-setup-grid,.quote-template-layout) .template-panel {padding:12px}
  .view .template-panel>:is(h3:first-child,.panel-title-row:first-child),.view .qr-info-card>:is(h2:first-child,.qr-section-heading:first-child) {
    margin:-12px -12px 12px;padding:10px 12px;background:var(--bindr-subtle);border-bottom:1px solid var(--bindr-border);font-size:1rem;line-height:1.4;border-radius:var(--bindr-radius) var(--bindr-radius) 0 0;
  }
  .view .template-panel .panel-title-row h3 {margin:0}
  .view .template-panel>h3:not(:first-child) {margin:16px 0 10px;padding-top:12px;border-top:1px solid var(--bindr-border);font-size:1rem}
  .view .quote-template-layout {margin-bottom:var(--bindr-section-gap)}
  .view #quoteJobEditor {padding:12px}
  .view #quoteJobEditor>summary {margin:-12px -12px 12px;padding:10px 12px;background:var(--bindr-subtle);border-bottom:1px solid var(--bindr-border);font-weight:650}

  /* Job files: white records and forms sit on the same grey section backdrop. */
  .view .vjf-header {margin-bottom:var(--bindr-section-gap);box-shadow:none}
  .view .virtual-job-file .fx-main {background:var(--bindr-bg)}
  .view .virtual-job-file :is(.fx-folder-heading,.fx-path,.fx-toolbar) {background:var(--bindr-subtle)}
  .view .virtual-job-file :is(.fx-table-wrap,.fx-table,.fx-status) {background:var(--bindr-card)}
  .view .vjf-content {padding:12px;background:var(--bindr-bg)}
  .view .vjf-content>.crm-panel {margin-top:0;margin-bottom:var(--bindr-section-gap)}
  .view .vjf-content>.crm-panel:last-child {margin-bottom:0}
  .view .job-folder-content {padding:12px;gap:var(--bindr-section-gap);background:var(--bindr-bg)}
  .view .job-folder-content>.crm-panel {margin:0}
  .view .qr-support>.job-folder {margin-block:var(--bindr-section-gap)}
  .view :is(.record-details,.record-notes) {background:var(--bindr-card);padding:12px;border:1px solid var(--bindr-border);border-radius:var(--bindr-radius);margin-block:0 var(--bindr-section-gap)}
  .view .record-details>div {background:transparent}
  .view [data-job-handover] {background:var(--bindr-card);padding:12px;border:1px solid var(--bindr-border);border-radius:var(--bindr-radius)}
  .view .job-pricing-totals {gap:var(--bindr-inner-gap);padding:0;margin-block:0 var(--bindr-section-gap);border:0;background:transparent}
  .view .job-pricing-totals>div {flex:1 1 140px;padding:10px 12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius)}
  .view #cvrContent .cvr-costing-overview {padding:0;border:0;margin-bottom:var(--bindr-section-gap)}
  .view :is(.cvr-costing-box,.cvr-comparison-box,.cvr-report-panel) {padding:12px}
  .view .cvr-report-panel>:is(h3:first-child,.cvr-report-panel-heading:first-child),.view .cvr-costing-box>.cvr-costing-heading,.view .cvr-comparison-box>.cvr-costing-heading {
    margin:-12px -12px 12px;padding:10px 12px;background:var(--bindr-subtle);border-bottom:1px solid var(--bindr-border);border-radius:var(--bindr-radius) var(--bindr-radius) 0 0;
  }
  .view .cvr-report-panel>.crm-table-wrap {border:0;border-radius:0}
  .view .ku-workspace {background:transparent}
  .view :is(.ku-toolbar,.ku-project-details,.ku-detail-controls) {padding:10px 12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius);margin-bottom:var(--bindr-inner-gap)}
  .view .ku-scroll {border:1px solid var(--bindr-border)}

  /* Follow-up contact/history and the update form remain distinct sections. */
  #chaseDialog {background:var(--bindr-bg)}
  #chaseDialog .chase-dialog-grid {gap:var(--bindr-section-gap)}
  #chaseDialog .chase-dialog-grid>:is(aside,form) {min-width:0;margin:0;padding:12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-top:3px solid var(--bindr-section-accent);border-radius:var(--bindr-radius)}
  #chaseDialog .chase-dialog-grid>:is(aside,form)>h3:first-child {margin:-12px -12px 0;padding:10px 12px;background:var(--bindr-subtle);border-bottom:1px solid var(--bindr-border);font-size:1rem}

  /* Daily cost sheets use the same separate categories as Build estimate. */
  #cvrDialog {background:var(--bindr-bg)}
  #cvrForm>.cvr-meta,#cvrForm>.cvr-totals,#cvrForm>label,#cvrForm>footer {
    padding:12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius);margin-block:0 var(--bindr-section-gap);
  }
  #cvrForm>header {padding:10px 12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius)}
  #cvrLines {display:grid;gap:var(--bindr-section-gap);margin-bottom:var(--bindr-section-gap)}
  #cvrForm .cvr-section {--cvr-section-accent:var(--bindr-section-accent);margin:0 0 var(--bindr-section-gap);padding:12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-top:3px solid var(--cvr-section-accent);border-radius:var(--bindr-radius)}
  #cvrLines>.cvr-section {margin:0}
  #cvrForm .cvr-section[data-cvr-section="Labour"] {--cvr-section-accent:#1d55aa}
  #cvrForm .cvr-section[data-cvr-section="Materials"] {--cvr-section-accent:#986918}
  #cvrForm .cvr-section[data-cvr-section="Plant"] {--cvr-section-accent:#316a22}
  #cvrForm .cvr-section[data-cvr-section="Subcontract"] {--cvr-section-accent:#72558a}
  #cvrForm .cvr-section>.cvr-section-heading {margin:-12px -12px 12px;padding:10px 12px;background:var(--bindr-subtle);border-bottom:1px solid var(--bindr-border);border-radius:var(--bindr-radius) var(--bindr-radius) 0 0}
  #cvrForm .cvr-section-heading h3 {margin:0;font-size:1rem;line-height:1.4}
  #cvrForm>footer {margin-bottom:0}

  /* Take-off changes stay in the overlay; the full-size drawing remains stable. */
  #takeoffView #workspaceAreas {background:var(--bindr-bg)}
  #takeoffView .tw-area-group {margin-bottom:12px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius)}
  #takeoffView .tw-area-group:has(>.tw-area-card[aria-expanded=true]) {background:var(--bindr-card);border-color:var(--area-colour,var(--bindr-border))}
  #takeoffView .tw-area-card {border-radius:var(--bindr-radius);background:var(--bindr-card)}
  #takeoffView .tw-area-card:is([aria-current=true],[aria-expanded=true]) {background:var(--bindr-accent-soft);box-shadow:inset 2px 0 var(--area-colour,var(--bindr-accent))}
  #takeoffView .tw-area-content {padding:8px;background:var(--bindr-bg);border-top:1px solid var(--bindr-border);border-radius:0 0 var(--bindr-radius) var(--bindr-radius)}
  #takeoffView #workspaceDetails {gap:12px;background:transparent}
  #takeoffView #workspaceDetails>.tw-detail-section {margin:0;padding:8px;background:var(--bindr-card);border:1px solid var(--bindr-border);border-radius:var(--bindr-radius)}
  #takeoffView #workspaceDetails .tw-detail-heading {padding:0 0 6px;margin-bottom:6px;border-bottom:1px solid var(--bindr-border)}

  @media(max-width:750px) {
    :root {--bindr-section-gap:16px;--bindr-inner-gap:10px}
    .view :is(.crm-two-col,.business-setup-grid,.quote-template-layout,.cvr-report-panels,.template-layout) {grid-template-columns:minmax(0,1fr)}
    .view :is(.metric-grid,.crm-kpis,.cvr-report-metrics,.ku-summary) {grid-template-columns:repeat(2,minmax(0,1fr))}
    .view .template-panel .panel-title-row {align-items:start;flex-wrap:wrap}
  }
}