/* Screen-only office colours: customer/section bars and selected tabs. */
@media screen {
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] dialog .job-section-bar,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid .job-section-bar,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid .quick-customer-bar,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid .quick-delivery-bar,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid .quick-cost-summary-bar,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid #guidedCustomerField,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid #guidedCustomerField .customer-flow-selected {
    background:var(--dmm-office-header-bg)!important;
    color:var(--dmm-office-header-fg)!important;
  }
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog :is(.job-console-head,.console-dark-section-head,.console-product-subtotal,.console-job-total),
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog .console-notes-field > label {
    background:var(--dmm-office-header-bg)!important;
    color:var(--dmm-office-header-fg)!important;
  }
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog .job-console-customer :is(strong,span),
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog :is(.console-created-by,.console-marketing-consent,.console-job-phone) > span,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog .console-dark-section-head > label,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog .console-dark-section-head > label > span,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog :is(.console-product-subtotal,.console-job-total) :is(span,strong) {
    color:var(--dmm-office-header-fg)!important;
  }
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid #guidedCustomerField > .guided-label-row,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid #guidedCustomerField .customer-flow-copy > strong,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid #guidedCustomerField .customer-flow-copy > small,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] dialog .job-section-bar > :is(strong,span,small),
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobFormGrid .quick-cost-summary-bar > span {
    color:var(--dmm-office-header-fg)!important;
  }
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobDialog #jobQuickNav [data-job-view].active,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #settingsSection .settings-tab.active,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] .quote-tab.active,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #quoteDialog #quoteQuickNav [data-quote-view].active,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerDialog #customerSectionNav [data-customer-view].active,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #jobInfoDialog .job-info-tabs button.active,
  body.dmm-office-display:not(.driver-mode)[data-office-colours="custom"] #customerPickerDialog .quick-stage-btn.is-current {
    background:var(--dmm-office-header-bg)!important;
    border-color:var(--dmm-office-header-bg)!important;
    color:var(--dmm-office-header-fg)!important;
    -webkit-text-fill-color:var(--dmm-office-header-fg)!important;
  }
}
.office-colours-settings {grid-column:1/-1;min-width:0;margin:12px 0 4px;padding:18px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;}
.office-colours-settings legend {padding:0 7px;font-weight:700;font-size:1rem;}
.office-colours-settings > p {margin:0 0 14px;color:#475569;line-height:1.5;}
.office-colour-fields {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.office-colour-fields label {display:block;margin-bottom:7px;}
.office-colour-inputs {display:flex;gap:9px;align-items:center;}
.office-colour-inputs input[type="color"] {width:52px;min-width:52px;height:44px;padding:4px;background:#fff;border:1px solid #94a3b8;border-radius:7px;cursor:pointer;}
.office-colour-inputs input[type="text"] {width:100%;min-width:0;height:44px;font-family:monospace!important;}
#officeColourHexHelp {display:block;margin:10px 0;color:#64748b;}
.office-colour-presets,.office-colour-actions {display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.office-colour-presets button,.office-colour-actions button {min-height:36px;padding:7px 12px;}
.office-colour-preview {overflow:hidden;border:1px solid #cbd5e1;border-radius:9px;background:#fff;}
.office-colour-preview-tabs {display:flex;gap:7px;padding:11px;}
.office-colour-preview-tabs span {padding:7px 11px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#475569;}
.office-colour-preview-tabs .selected,.office-colour-preview-bar {background:var(--office-preview-bg,#151925);color:var(--office-preview-fg,#fff);font-weight:700;}
.office-colour-preview-tabs .selected {border-color:var(--office-preview-bg,#151925);}
.office-colour-preview-bar {padding:12px 15px;}
.office-colour-preview-copy {padding:13px 15px;color:#475569;}
.office-colours-settings .office-colour-contrast {margin:10px 0;color:#166534;font-size:.85rem;}
.office-colours-settings .office-colour-contrast.low-contrast {color:#92400e;}
#officeColourStatus {margin:0;font-size:.85rem;}
@media(max-width:650px){.office-colour-fields{grid-template-columns:1fr}.office-colours-settings{padding:13px}.office-colour-preview-tabs{flex-wrap:wrap}.office-colour-preview-tabs span{padding:6px 8px}}