/* Staff surface contract. This is the single owner of panel/window chrome.
   Scoped !important declarations deliberately outrank the legacy module skins.
   Domain controls, calendar cells, printed documents and Customer Portal are
   outside this contract. See docs/UI_DESIGN_SYSTEM.md before changing it. */
:root {
  --ui-header: #17375a;
  --ui-header-text: #ffffff;
  --ui-header-muted: #c6daf0;
  --ui-border: var(--wr-line, #dce4ee);
  --ui-radius: 16px;
  --ui-space: 20px;
  --ui-header-height: 80px;
  --ui-window-gap: 24px;
  --ui-shadow: var(--wr-shadow, 0 3px 12px #1636560c);
}

/* An opaque surface and the same edge treatment throughout the staff app. */
body :is(.workspace,.settings-workspace,.drawer,dialog,[aria-modal="true"]) {
  --ui-inset: 0px;
  --ui-after-header: 0px;
  box-sizing: border-box;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow) !important;
}
body :is(.workspace,.settings-workspace) { min-width: 0; }
body :is(.drawer,dialog,[aria-modal="true"]) { box-shadow: 0 20px 64px #10284038 !important; }

/* Jobs list cards use the same navy header as the full Job window. */
body .mobile-job-card { border-radius: var(--ui-radius); padding: 14px; }
body .mobile-job-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; min-width: 0; min-height: var(--ui-header-height);
  margin: -14px -14px 0; padding: 12px 14px;
  background: var(--ui-header); color: var(--ui-header-text);
  border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
body .mobile-job-head .mobile-job-open {
  flex: 1 1 100px; min-width: 0; min-height: 44px; padding: 6px 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--ui-header-text);
  font: inherit; font-size: 15px; font-weight: 750; line-height: 1.3;
  text-align: left; overflow-wrap: anywhere; box-shadow: none;
}
body .mobile-job-head .status-picker {
  flex: 0 1 auto; max-width: 100%; min-height: 44px; margin-left: auto;
  white-space: normal; text-align: center; box-shadow: none;
}
body .mobile-job-head button:focus-visible { outline: 3px solid #a9d8ff; outline-offset: 3px; }

/* One action treatment for Job Desk and Jobs. Status text remains a pill;
   editable crew and communication actions are solid, keyboard-focusable buttons. */
body :is(.dashboard-desk-actions button,.mobile-job-meta .tech-picker,.jobs-table .tech-picker) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 12px; border: 1px solid #1d4ed8;
  border-radius: var(--wr-control-radius, 10px);
  background: var(--wr-primary, #2563eb); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.35;
  text-align: center; white-space: normal; overflow-wrap: anywhere;
  box-shadow: 0 2px 4px #1d4ed81a; cursor: pointer;
  transition: background-color var(--wr-fast, 140ms), border-color var(--wr-fast, 140ms);
}
body :is(.dashboard-desk-actions button,.mobile-job-meta .tech-picker,.jobs-table .tech-picker):hover:not(:disabled) {
  background: #1d4ed8; border-color: #1e40af; color: #fff;
}
body :is(.dashboard-desk-actions button,.mobile-job-meta .tech-picker,.jobs-table .tech-picker):focus-visible {
  outline: 3px solid #17375a; outline-offset: 3px;
}
body :is(.dashboard-desk-actions button,.mobile-job-meta .tech-picker,.jobs-table .tech-picker):disabled {
  opacity: 1; background: #eef2f7; border-color: #d1dae7; color: #596c83;
  box-shadow: none; cursor: not-allowed;
}
body :is(.dashboard-desk-actions,.mobile-job-meta) svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Actions size to their own content, never to the remaining list/card height.
   Reset native button appearance too: these are fully styled touch controls. */
body .dashboard-desk-actions {
  gap: 8px; align-items: start; align-content: start; grid-auto-rows: max-content;
}
body .dashboard-desk-actions > button {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  height: auto; min-height: 44px; align-self: start;
}
body .mobile-job-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; gap: 10px; padding-top: 12px;
  border-top: 1px solid var(--ui-border);
}
body .mobile-job-meta .tech-picker { width: 100%; max-width: none; min-width: 0; }
body .mobile-job-meta .job-schedule-summary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; min-height: 44px; padding: 8px 10px;
  border: 1px solid #b9cef5; border-radius: 22px;
  background: #edf3ff; color: #214e80;
  font-size: 13px; font-weight: 650; line-height: 1.4; text-align: center;
  overflow-wrap: anywhere;
}
body .mobile-job-meta .job-schedule-summary span { display: block; min-width: 0; }

/* Customers directory cards share the Jobs chrome; desktop remains a table. */
body .customer-mobile-card { border-radius: var(--ui-radius); padding: 14px; min-width: 0; }
body .customer-mobile-head {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px; min-width: 0; min-height: var(--ui-header-height);
  margin: -14px -14px 0; padding: 12px 14px;
  background: var(--ui-header); color: var(--ui-header-text);
  border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
body .customer-mobile-head > span { min-width: 0; }
body .customer-mobile-head .avatar {
  width: 42px; height: 42px; background: #e3effb; color: var(--ui-header); box-shadow: none;
}
body .customer-mobile-head strong {
  color: var(--ui-header-text); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere;
}
body .customer-mobile-head small {
  margin-top: 4px; color: var(--ui-header-muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere;
}
body .customer-mobile-head > b {
  padding: 5px 8px; border-radius: 999px; background: #ffffff14;
  color: var(--ui-header-text); font-size: 12px; line-height: 1.4; white-space: nowrap;
}
body .customer-mobile-card > :is(p, small) { overflow-wrap: anywhere; }
body .customer-mobile-card > div:last-child { flex-wrap: wrap; }

/* Mobile Job Desk intake cards match the Jobs header; desktop keeps its rows. */
@media (max-width: 900px) {
  body .dashboard-desk-row { display: block; }
  body .dashboard-desk-job { display: block; width: 100%; }
  body .dashboard-desk-actions { margin-top: 16px; }
  body .dashboard-desk-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .dashboard-desk-actions:has(> button:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .dashboard-desk-actions button { min-width: 0; }
  body .dashboard-desk-row:has(.status.new_request) {
    flex-direction: column; align-items: stretch; gap: 12px;
    margin: 12px; padding: 14px; border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius); background: #fff;
  }
  body .dashboard-desk-row.needs-schedule:has(.status.new_request) { border-left: 3px solid #e7a948; }
  body .dashboard-desk-row:has(.status.new_request) .dashboard-desk-job > span:first-child {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px; min-width: 0; min-height: var(--ui-header-height);
    margin: -14px -14px 12px; padding: 12px 14px;
    background: var(--ui-header); color: var(--ui-header-text);
    border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0;
    box-shadow: inset 0 1px 0 #ffffff0d;
  }
  body .dashboard-desk-row:has(.status.new_request) .dashboard-desk-job > span:first-child > b {
    display: flex; align-items: center; flex: 1 1 100px; min-width: 0; min-height: 44px;
    padding: 6px 0; color: var(--ui-header-text); font-size: 15px; font-weight: 750;
    line-height: 1.3; overflow-wrap: anywhere;
  }
  body .dashboard-desk-row:has(.status.new_request) .dashboard-desk-job .status {
    flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center;
    max-width: 100%; min-height: 44px; margin-left: auto; padding: 6px 10px;
    font-size: 12px; white-space: normal; text-align: center; box-shadow: none;
  }
  body .dashboard-desk-row:has(.status.new_request) .dashboard-desk-job:focus-visible {
    outline: 3px solid #5296e5; outline-offset: 4px; border-radius: 6px;
  }
}
@media (max-width: 380px) {
  body .dashboard-desk-actions button { padding-inline: 6px; gap: 4px; }
}

/* The heading paints all the way to its parent's inner border. Some legacy
   cards/forms pad the parent; one inset variable removes that white strip. */
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--ui-header-height) !important;
  height: auto !important;
  flex-shrink: 0;
  align-self: stretch;
  padding: 16px var(--ui-space) !important;
  margin: calc(-1 * var(--ui-inset)) calc(-1 * var(--ui-inset)) var(--ui-after-header) !important;
  gap: 12px;
  background: var(--ui-header) !important;
  color: var(--ui-header-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-header) !important;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
  box-shadow: inset 0 1px 0 #ffffff0d !important;
  text-shadow: none !important;
}
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) :is(h2,h3) {
  min-width: 0;
  margin: 3px 0 0 !important;
  color: var(--ui-header-text) !important;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-shadow: none !important;
}
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) .eyebrow {
  display: block;
  color: var(--ui-header-muted) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .08em;
}
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) p {
  margin: 6px 0 0;
  color: var(--ui-header-muted) !important;
  font-size: 13px;
  line-height: 1.5;
}
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) > div { min-width: 0; }
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) button:not(.job-title-status) {
  min-height: 44px;
  height: auto;
  border: 1px solid #6d87a5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #214e80 !important;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: none !important;
  transform: none !important;
}
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) button:disabled {
  background: #dce4ee !important;
  color: #53647a !important;
  opacity: 1;
}
body :is(.workspace > header,.drawer-head,dialog > header,[aria-modal="true"] > header,dialog > form > header) :is(button,a):focus-visible {
  outline: 3px solid #a9d8ff !important;
  outline-offset: 3px;
}
/* window-controls.css owns explicit .window-close buttons across web surfaces.
   Do not reset their auto inline margin: it anchors the close control at right. */
#catalogPartCard[open] { display: flex; flex-direction: column; overflow: hidden; }
/* Keep product actions outside the scroll area at every viewport width. */
#catalogPartCard > .catalog-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#catalogPartCard > footer { flex: 0 0 auto; }
#catalogPartCard > header { display: grid; grid-template-columns: minmax(0,1fr) auto 44px; align-items: start; }
#catalogPartCard > header > div { width: auto; }
#catalogPartCard > header > .catalog-header-actions { display: flex; align-items: center; gap: 8px; }
#catalogPartCard #catalogCardClose { grid-column: 3; grid-row: 1; }
@media (max-width: 900px) {
  #catalogPartCard > header { grid-template-columns: minmax(0,1fr) 44px; }
  #catalogPartCard #catalogCardClose { grid-column: 2; }
  #catalogPartCard > header > .catalog-header-actions { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
}

/* Padded legacy surfaces opt into the same full-bleed heading geometry. */
body :is(.dashboard-card,.report-card,.report-profitability) {
  --ui-inset: var(--ui-space);
  --ui-after-header: var(--ui-space);
  padding: var(--ui-space) !important;
  overflow: hidden;
}
body :is(.job-schedule-picker,.desk-schedule,.schedule-cancel-dialog,.mfa-dialog,.sms-inbox-dialog,.stripe-refund-dialog,#calendarTechniciansDialog) {
  --ui-inset: var(--ui-space);
  padding: var(--ui-space) !important;
}
body :is(.job-schedule-picker,.desk-schedule,.schedule-cancel-dialog,.sms-inbox-dialog,.stripe-refund-dialog) { --ui-after-header: 16px; }
body :is(.job-schedule-picker,.schedule-cancel-dialog) header { top: calc(-1 * var(--ui-inset)); }
.mfa-proof > header,.mfa-account-dialog > header { display: flex; align-items: center; justify-content: space-between; }
.mfa-account-dialog > header form,.sms-inbox-dialog > header form { margin: 0; }
.mfa-account-dialog > header { margin-bottom: 20px !important; }

/* Documented size tiers, independent of async contents and selected section.
   Main drawers keep the existing viewport/focus/scroll manager. Other dialogs
   grow down from a stable top edge instead of recentering after every response. */
body :is(dialog,[aria-modal="true"]):not(.drawer):not(.global-search-panel):not(.notification-panel) {
  --ui-window-width: 720px;
  width: min(var(--ui-window-width), calc(var(--overlay-width,100vw) - 2 * var(--ui-window-gap))) !important;
  max-width: calc(var(--overlay-width,100vw) - 2 * var(--ui-window-gap)) !important;
  max-height: calc(var(--overlay-height,100dvh) - 2 * var(--ui-window-gap)) !important;
}
body :is(.quick-picker:not(.part-editor),.job-schedule-picker,.desk-schedule,.schedule-confirm,.schedule-cancel-dialog,.mfa-dialog,.quick-switch-dialog,#calendarTechniciansDialog,#scheduleCrewDialog,#scheduleFieldDatePicker) { --ui-window-width: 480px !important; }
body .mfa-account-dialog { --ui-window-width: 720px !important; }
body :is(.catalog-part-card,.customer-calls-dialog) { --ui-window-width: 1180px !important; }
html body dialog[open] {
  top: calc(var(--overlay-top,0px) + var(--ui-window-gap)) !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
}
body :is(.quick-picker-backdrop,.email-composer-backdrop,.sms-composer-backdrop,.payment-composer-backdrop,.expense-composer-backdrop,.schedule-confirm-backdrop,.integration-detail-backdrop,.job-schedule-backdrop) {
  box-sizing: border-box;
  align-items: flex-start;
  padding: var(--ui-window-gap);
}
#jobDrawer { grid-template-rows: auto auto minmax(0,1fr); }
#customerDrawer { grid-template-rows: auto minmax(0,1fr); }
.create-drawer { width: min(720px,100vw); }
#createJobForm { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0 !important; overflow: hidden; }
#createJobForm > .drawer-head { position: static; flex: 0 0 auto; }
#createJobForm > .create-form-body {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  padding: var(--ui-space); overflow-y: auto;
  overscroll-behavior: contain; scroll-padding-block: var(--ui-space);
}
#createJobForm > .create-actions {
  position: static; flex: 0 0 auto; width: 100%; margin: 0;
  padding: 16px var(--ui-space); background: #fff;
  border-top: 1px solid var(--ui-border); box-shadow: none; backdrop-filter: none;
}
.surface-form-description { margin: 0; padding: 0; color: #52657b; font-size: 13px; line-height: 1.5; }
/* The scroll body owns the inset once. Header/footer remain full-width;
   sections must not lose desktop padding or double it on mobile. */
#createJobForm .form-section { padding: 16px; margin: 0 0 20px; border: 1px solid #b4c8df; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px #17375a0a; }
#createJobForm .form-section:last-of-type { margin-bottom: 0; }
#createJobForm .request-controls { margin: 0 0 20px; padding: 16px; align-items: flex-end; border: 1px solid #b4c8df; border-radius: 12px; background: #fff; }
#createJobForm .request-controls > label { flex: 1 1 160px; min-width: 0; }
#createJobForm .request-controls .button { max-width: 100%; white-space: normal; }
#createJobForm #requestStatusMessage:empty { display: none; }
#createJobForm .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#createJobForm .form-grid > label { min-width: 0; grid-template-rows: auto auto; align-content: start; }
#createJobForm .form-field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 20px; }
#createJobForm .form-field-label > :is(b,em) { margin: 0; }
#createJobForm .form-grid :is(input,select) { min-width: 0; }
#createJobForm .section-title > span { flex-shrink: 0; }
/* Intake uses the same navy/white hierarchy as the live call workspace.
   These rules do not position the shared mobile navigation or overlays. */
#createJobForm > .drawer-head h2 { font-size: 24px !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
#createJobForm > .drawer-head .eyebrow { font-size: 12px !important; letter-spacing: .1em !important; }
#createJobForm > .create-form-body { background: #edf3fb; }
#createJobForm .surface-form-description { margin-bottom: 16px; font-size: 14px; color: #405773; }
#createJobForm .section-title {
  align-items: center; gap: 12px; margin: -16px -16px 18px; padding: 15px 16px;
  border-radius: 11px 11px 0 0; background: var(--ui-header); color: #fff;
}
#createJobForm .section-title > span { width: 32px; height: 32px; border: 1px solid #7594b9; border-radius: 9px; background: #294f78; color: #fff; font-size: 15px; }
#createJobForm .section-title h3 { margin: 0; color: #fff; font-size: 18px; line-height: 1.4; font-weight: 750; }
#createJobForm .section-title p { margin: 4px 0 0; color: #d3e3f7; font-size: 13px; line-height: 1.5; }
#createJobForm .form-field-label { color: #17375a; font-size: 14px; font-weight: 700; line-height: 1.5; }
#createJobForm .form-field-label > :is(b,em) { padding: 1px 6px; border-radius: 5px; background: #e9f0f9; color: #435c79; font-size: 11px; font-weight: 600; font-style: normal; }
#createJobForm .form-field-label > b { background: #dfeaff; color: #204789; }
#createJobForm :is(.form-grid input,.form-grid select,#requestCloseReason,#accessFields textarea) {
  min-height: 46px; height: auto; padding: 11px 12px; border: 1px solid #8da7c6;
  border-radius: 9px; background: #fff; color: #163451; font-size: 16px; line-height: 1.4;
  box-shadow: inset 0 1px 2px #17375a06;
}
#createJobForm :is(input,textarea)::placeholder { color: #62768e; opacity: 1; }
#createJobForm :is(input,select,textarea):focus-visible { outline: 3px solid #accbff; outline-offset: 2px; border-color: #1d4ed8; }
#createJobForm .segmented { padding: 4px; margin-bottom: 18px; gap: 6px; border: 1px solid #a9bdd7; border-radius: 10px; background: #eaf1fb; }
#createJobForm .segmented button { min-height: 44px; color: #244969; font-size: 14px; font-weight: 700; }
#createJobForm .segmented button.active { background: #1d4ed8; color: #fff; border-radius: 7px; box-shadow: 0 2px 5px #1d4ed829; }
#createJobForm .check-row { padding: 14px 12px; margin: 16px 0 0; border: 1px solid #b5c9e1; border-radius: 9px; background: #f0f5fd; align-items: flex-start; color: #17375a; }
#createJobForm .check-row input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: #1d4ed8; }
#createJobForm .check-row b { font-size: 14px; line-height: 1.5; }
#createJobForm .check-row small { color: #435c79; font-size: 12px; line-height: 1.5; }
#createJobForm :is(.billing-address-fields,#accessFields) { margin-top: 16px; padding: 14px; border: 1px solid #b5c9e1; border-radius: 9px; background: #f5f8fe; }
#createJobForm #accessFields label { display: grid; gap: 8px; color: #17375a; font-size: 14px; font-weight: 700; }
#createJobForm #accessFields small { display: block; margin-top: 8px; color: #435c79; font-size: 12px; line-height: 1.5; }
#createJobForm .appliance-card { padding: 14px; border: 1px solid #b4c8df; border-radius: 10px; background: #f3f7fd; }
#createJobForm .appliance-number { min-height: 36px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #bed0e5; color: #17375a; font-size: 15px; font-weight: 750; }
#createJobForm .remove-appliance { width: 44px; height: 44px; background: #fff; border: 1px solid #91aac7; border-radius: 8px; color: #234b78; }
#createJobForm :is(.button,.add-appliance,.text-button) { min-height: 44px; font-size: 14px; font-weight: 700; line-height: 1.4; }
#createJobForm .text-button { display: inline-flex; align-items: center; margin-top: 12px; padding: 9px 12px; border: 1px solid #9ab4d5; border-radius: 8px; background: #edf4ff; color: #204c8f; }
#createJobForm :is(.button.secondary,.add-appliance) { background: #fff; color: #204776; border: 1px solid #8da7c6; border-radius: 9px; }
#createJobForm .add-appliance { margin-top: 14px; border-style: dashed; }
#createJobForm .button.primary { background: #1d4ed8; border: 1px solid #1745c1; color: #fff; box-shadow: 0 3px 7px #1d4ed825; }
#createJobForm .button.primary:hover:not(:disabled) { background: #173fad; }
#createJobForm :is(button,input,select,textarea):disabled { background: #e5ecf4; color: #536981; border-color: #b3c4d8; opacity: 1; }
#createJobForm .create-actions { gap: 10px; border-top: 1px solid #aabfd9; box-shadow: 0 -4px 14px #17375a0a; }
#createJobForm .create-actions .button { min-height: 48px; }
#createJobForm .request-controls > header { flex: 1 0 100%; margin: 0; }
#createJobForm .request-controls h3 { margin: 0; color: #17375a; font-size: 17px; }
#createJobForm .request-controls header p { margin: 5px 0 0; color: #435c79; font-size: 13px; line-height: 1.5; }
#createJobForm #requestCallActions { flex: 1 0 100%; }
#createJobForm .request-close-tools { width: 100%; margin: 0; padding: 0; border-top: 1px solid #c3d2e5; }
#createJobForm .request-close-tools summary { min-height: 44px; padding: 12px 0 2px; color: #385778; font-size: 13px; font-weight: 650; cursor: pointer; }
#createJobForm .request-close-tools > div { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
#createJobForm .request-close-tools label { display: grid; gap: 8px; flex: 1 1 180px; min-width: 0; }
#createJobForm .request-discount-card { margin: 0 0 20px; padding: 0; border: 1px solid #91add0; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px #17375a0a; }
#createJobForm .request-discount-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #b0c9e9; border-radius: 11px 11px 0 0; background: #dceaff; color: #173e71; }
#createJobForm .request-discount-card h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 750; }
#createJobForm .request-discount-card header p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: #33567d; }
#createJobForm .request-discount-card header > span { padding: 4px 8px; border: 1px solid #9ebbdc; border-radius: 6px; background: #f7faff; font-size: 12px; font-weight: 650; }
#createJobForm #requestDiscountHelp { margin: 0; padding: 16px; color: #435c79; font-size: 14px; line-height: 1.55; }
#createJobForm #requestDiscount { margin: 0; padding: 8px; }
#createJobForm #requestDiscount .discount-field-label { display: none; }
#createJobForm #requestDiscount .discount-field-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: #fff; color: #17375a; }
#createJobForm #requestDiscount button.discount-field-value:hover { background: #f0f6ff; border-color: #adc7e9; }
#createJobForm #requestDiscount button:focus-visible { outline: 3px solid #accbff; outline-offset: 1px; }
#createJobForm .request-discount-value { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 5px 12px; font-size: 15px; font-weight: 700; min-width: 0; }
#createJobForm .request-discount-value b { color: #194bb2; font-size: 26px; line-height: 1.2; white-space: nowrap; }
#createJobForm .request-discount-value small { grid-column: 1 / -1; color: #435c79; font-size: 12px; font-weight: 400; line-height: 1.5; }
#createJobForm .request-discount-action { flex-shrink: 0; padding: 10px 12px; border-radius: 8px; background: #1d4ed8; color: #fff; font-size: 13px; font-weight: 700; }
@media (max-width: 480px) {
  #createJobForm .form-grid > label:has(> input:is([name="phone"],[name="email"])) { grid-column: 1 / -1; }
  #createJobForm .request-discount-value { grid-template-columns: minmax(0,1fr); }
  #createJobForm #requestDiscount .discount-field-value { align-items: center; }
  #createJobForm .request-discount-action { padding: 10px; white-space: nowrap; font-size: 12px; }
}
@media (max-width: 380px) {
  #createJobForm .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* One dashboard grid rhythm. Summary cards no longer span a double-height
   empty row, and loading/filtering cannot resize the desktop work-list frame. */
.dashboard-workspace { gap: 20px; }
.dashboard-command-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.dashboard-today { grid-row: auto; }
.dashboard-card { display: flex; flex-direction: column; min-height: 360px; }
.dashboard-command-grid > .workspace { display: flex; flex-direction: column; min-width: 0; }
.dashboard-command-grid :is(.dashboard-desk,.dashboard-chat-card) > header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.dashboard-command-grid > .workspace > header > div { flex: 1; }
.dashboard-command-grid > .workspace > header > :last-child { flex-shrink: 0; }
.dashboard-command-grid .surface-description { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 92px; margin: 0; padding: 12px var(--ui-space); font-size: 13px; line-height: 1.5; color: #52657b; border-bottom: 1px solid var(--ui-border); }
.surface-description > span:first-child { flex: 1 1 160px; }
.surface-description > button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border: 1px solid #b9cbe0; border-radius: 10px; background: #fff; color: #214e80; font: inherit; font-size: 13px; font-weight: 650; }
.surface-description > button b { padding: 3px 5px; background: #e7f0fc; border-radius: 5px; }
.dashboard-chat-count { border: 1px solid #6d87a5; border-radius: 10px; background: #fff; color: #214e80; padding: 8px 10px; }
.dashboard-desk > header button b { background: #e7f0fc; color: #214e80; box-shadow: none; }
.dashboard-desk-search { min-width: 0; }
.dashboard-desk-tools { flex-wrap: wrap; }
.dashboard-desk-filter { margin-left: auto; }
/* Cards share the remaining workspace with the sidebar and other panels.
   Use their own width, not a device breakpoint, to keep names readable. */
.dashboard-desk { container: case-desk / inline-size; }
.dashboard-desk-row { flex-wrap: wrap; }
/* Above the compact breakpoint, wrap actions before shrinking a customer name.
   Font metrics differ across browsers; the readable width is a layout constraint. */
.dashboard-desk-job { flex: 1 1 200px; min-width: min(200px,100%); }
.dashboard-desk-job > span { flex-wrap: wrap; }
body .dashboard-desk-actions { max-width: 100%; flex-shrink: 1; }
@container case-desk (max-width: 640px) {
  /* Normal block flow keeps each Case and its actions in one measured row.
     Avoid a wrapping column flexbox around an auto-sized button grid. */
  body .dashboard-desk-row { display: block; }
  body .dashboard-desk-job { display: block; width: 100%; }
  body .dashboard-desk-actions { margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .dashboard-desk-actions button { min-width: 0; white-space: normal; }
}
@container case-desk (min-width: 460px) and (max-width: 640px) {
  body .dashboard-desk-actions { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body .dashboard-desk-actions:has(> button:nth-child(3):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.dashboard-map-notice { width: max-content; max-width: min(300px,calc(100% - 28px)); grid-template-columns: 21px minmax(0,1fr); }
.dashboard-map-notice [data-map-notice-detail] { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.dashboard-map-card { margin-top: 0; }
.surface-map-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--ui-space); border-bottom: 1px solid var(--ui-border); }
.surface-map-tools > p { margin: 0; color: #52657b; font-size: 13px; line-height: 1.5; }
.dashboard-map-tabs { background: #edf3fb; border: 1px solid var(--ui-border); }
.dashboard-map-tabs button { min-height: 44px; }
.dashboard-map-tabs button.active { background: #fff; color: #214e80; box-shadow: inset 0 -3px #1d5ed5 !important; }
.dashboard-card > header { align-items: center; }
.dashboard-card > header button { flex-shrink: 0; }
.dashboard-card h2 { font-size: 18px; }
.dashboard-card .dashboard-empty { min-height: 200px; padding: 20px 0; text-align: center; }
.surface-card-actions { display: flex; justify-content: flex-end; margin: auto calc(-1 * var(--ui-space)) calc(-1 * var(--ui-space)); padding: 12px var(--ui-space); border-top: 1px solid var(--ui-border); }
.surface-card-actions button { min-height: 44px; padding: 8px 12px; border: 1px solid #b9cbe0; border-radius: 10px; background: #fff; color: #214e80; font: inherit; font-size: 13px; font-weight: 650; }
.dashboard-card > :not(header):not(footer) { margin-bottom: 20px; }
#dashboardScheduleList { flex: 1; min-height: 0; max-height: 320px; overflow-y: auto; }
#dashboardScheduleList > button { grid-template-columns: 60px minmax(0,1fr) 12px; gap: 5px 12px; }
#dashboardScheduleList > button time { grid-column: 1; grid-row: 1 / 3; }
#dashboardScheduleList > button span { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
#dashboardScheduleList > button em { display: block; grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
#dashboardScheduleList > button > b { grid-column: 3; grid-row: 1 / 3; }
.report-profitability-table { overflow: auto; }
@media (min-width: 901px) {
  .dashboard-command-grid > .workspace { height: 560px; }
  .dashboard-desk-list,.dashboard-command-grid .dashboard-chat-list { min-height: 0; max-height: none; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .dashboard-command-grid > .workspace > :is(header,footer,.surface-description,.dashboard-desk-tools,.dashboard-desk-caption) { flex-shrink: 0; }
  .dashboard-chat-empty { flex: 1; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .dashboard-command-grid,.dashboard-grid { grid-template-columns: minmax(0,1fr); }
  .dashboard-command-grid > .workspace { height: 480px; }
}
@media (max-width: 900px) {
  :root { --ui-space: 16px; --ui-window-gap: 8px; --ui-header-height: 80px; }
  .dashboard-command-grid,.dashboard-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .dashboard-command-grid > .workspace { height: auto; }
  .dashboard-card { min-height: 0; }
  .dashboard-command-grid .surface-description { min-height: 0; }
  .surface-map-tools { flex-direction: column; align-items: stretch; }
  .dashboard-map-notice { width: auto; max-width: none; }
  .dashboard-command-grid :is(.dashboard-desk,.dashboard-chat-card) > header { flex-wrap: wrap; }
  .dashboard-command-grid > .workspace > header > div { flex-basis: 160px; }
  html body :is(#jobDrawer,#customerDrawer) { border-radius: 0 !important; }
  html body :is(#jobDrawer,#customerDrawer) .drawer-head { border-radius: 0 !important; }
  #createJobForm > .create-actions { padding-bottom: calc(16px + env(safe-area-inset-bottom,0px)); }
  body #scheduleFieldDatePicker header { gap: 4px; padding-inline: 10px !important; }
  body #scheduleFieldDatePicker header h2 { font-size: 16px !important; }
}

/* Visit completion stays visible even when the timeline card clips its details.
   Muting text instead of the whole card keeps the small badge legible. */
#calendarSurface .schedule-visit[data-status="completed"] { opacity: 1; color: #526c7d; }
#calendarSurface .schedule-visit .schedule-complete-badge {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  width: max-content; margin: 0 0 2px; padding: 0 4px;
  border: 1px solid #146340; border-radius: 4px;
  background: #18794e; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 14px;
  white-space: nowrap; vertical-align: middle;
}
#calendarSurface .timeline-visit-heading .schedule-complete-badge { margin: 0; }
#calendarSurface .timeline-event[data-status="completed"] { container-type: inline-size; }
#calendarSurface .timeline-event[data-status="completed"] .timeline-visit-heading { gap: 2px 4px; flex-wrap: wrap; }
@container (max-width: 125px) {
  #calendarSurface .timeline-event[data-status="completed"] .technician-avatars { display: none; }
}
#calendarSurface .calendar-event .schedule-complete-badge { display: flex; }

/* Motion must not translate cards, controls or the page under an open window. */
body :is(.workspace,.dashboard-workspace,.schedule-workspace,.customers-workspace,.parts-workspace,.reports-workspace,.accounting-workspace,.settings-section,.dashboard-priority-grid > button,.metrics article) {
  animation: none !important;
  translate: none !important;
  transform: none !important;
}
body :is(.metrics article,.dashboard-priority-grid > button,.top-actions .icon-button):hover { transform: none !important; }

/* Billing geometry belongs to the Job content width, not the browser width.
   Sharing stays in normal flow so nested scrolling cannot clip its actions. */
#jobDrawer .job-primary-column:has(> #quoteEditor:not([hidden])) { background: #e8eff7; }
#quoteEditor { container: billing / inline-size; min-width: 0; color: #213c58; }
#quoteEditor > header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px; margin-bottom: 18px; border-radius: 14px; background: #17375a; color: #fff; }
#quoteEditor > header h3 { color: #fff; font-size: 23px; }
#quoteEditor > header .eyebrow { color: #c9ddf4; }
#quoteEditor .quote-tax { min-width: 0; flex-wrap: wrap; }
#quoteEditor .quote-tax label { min-width: 0; color: #dbe8f8; }
#quoteEditor .quote-tax input { min-height: 44px; font-size: 14px; background: #fff; color: #213c58; border-color: #fff; }
#quoteEditor .document-description-field { padding: 16px; margin: 0 0 18px; border: 1px solid #bccddd; border-radius: 14px; background: #fff; color: #213c58; }
#quoteEditor .document-description-field > span { font-weight: 650; }
#quoteEditor .document-description-field :is(em,small) { color: #52677d; }
#quoteEditor :is(.quote-line,.document-description-field,.parts-approval) :is(input:not([type="checkbox"]),select,textarea) { background: #f6f9fd; color: #203b58; border: 1px solid #7c91aa; border-radius: 8px; box-shadow: inset 0 1px 2px #17375a05; }
#quoteEditor :is(input,textarea)::placeholder { color: #5a6f84; opacity: 1; }
#quoteEditor :is(input,select,textarea):focus-visible { outline: 3px solid #2872d8; outline-offset: 2px; background: #fff; }
#quoteEditor .quote-line input[readonly], #quoteEditor.readonly :is(input,select,textarea) { background: #e8eef5; color: #435970; border-color: #afbecf; box-shadow: none; }
#quoteEditor .quote-line {
  position: relative; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px 12px; padding: 16px; margin: 0 0 14px; border-radius: 14px;
  background: #fff; border: 1px solid #b6c8dc; border-top: 3px solid #547da9; box-shadow: 0 2px 4px #17375a08;
}
#quoteEditor .quote-line > :is(.line-kind,.line-item) { grid-column: 1 / -1; min-width: 0; }
#quoteEditor .quote-line .line-kind { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-right: 52px; align-items: start; gap: 6px 10px; }
#quoteEditor .quote-line .line-kind > .quote-line-label { grid-column: 1 / -1; }
#quoteEditor .quote-line .line-item { gap: 6px; }
#quoteEditor .quote-line .quote-line-label { min-height: 18px; font-size: 11px; line-height: 18px; color: #405a77; font-weight: 700; white-space: normal; }
#quoteEditor .quote-line :is(input,select) { min-width: 0; min-height: 44px; height: auto; font-size: 14px; padding: 10px; }
#quoteEditor .quote-line .quote-line-total output { min-height: 44px; padding: 10px 8px; border: 1px solid #c5d8ed; border-radius: 8px; background: #eaf2fc; color: #163c69; justify-content: flex-end; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
#quoteEditor .quote-line .quote-line-remove { position: absolute; right: 12px; top: 12px; padding: 0; }
#quoteEditor .remove-quote-line { width: 44px; height: 44px; font-size: 22px; }
#quoteEditor .quote-add-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 4px 0 20px; }
#quoteEditor .quote-add-actions button { min-width: 0; min-height: 44px; height: auto; padding: 10px 8px; font-size: 13px; line-height: 1.35; background: #eef5ff; border: 1px solid #b8cee9; color: #205db5; }
#quoteEditor.readonly .quote-add-actions { display: none; }
#quoteEditor > .billing-summary { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: stretch; padding-top: 20px; border-color: #b7c9dc; }
#quoteEditor .billing-summary > .form-message { margin: 0; padding: 12px 14px; border: 1px solid #c8d8e9; border-radius: 10px; background: #f2f6fc; line-height: 1.5; overflow-wrap: anywhere; }
#quoteEditor .billing-summary > .form-message:empty { display: none; }
#quoteEditor .billing-summary-overview { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; padding: 16px; border: 1px solid #bccddd; border-radius: 14px; background: #fff; align-items: start; }
#quoteDiscountSummary { min-width: 0; }
#quoteDiscountSummary:empty { display: none; }
#quoteDiscountSummary .document-discount { margin: 0; padding: 12px 14px; gap: 8px 12px; line-height: 1.5; font-size: 13px; }
#quoteDiscountSummary .document-discount strong { margin-left: auto; font-variant-numeric: tabular-nums; }
#quoteEditor .quote-totals { min-width: 0; gap: 10px; padding: 16px; border-radius: 10px; background: #17375a; }
#quoteEditor .quote-totals :is(span,strong) { gap: 16px; color: #dbe8f8; font-size: 14px; line-height: 1.5; }
#quoteEditor .quote-totals b { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#quoteEditor .quote-totals strong { padding-top: 12px; margin-top: 2px; border-color: #6f8aa8; font-size: 21px; color: #fff; }
#quoteEditor .quote-document-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#quoteEditor .quote-document-actions:has(#saveQuote[hidden]),
#quoteEditor.readonly .quote-document-actions { grid-template-columns: minmax(0,1fr); }
#quoteEditor .billing-summary .button { width: 100%; min-width: 0; min-height: 46px; height: auto; padding: 12px 14px; white-space: normal; line-height: 1.4; text-align: center; }
#quoteEditor .quote-actions-menu { min-width: 0; width: 100%; grid-column: auto; border: 1px solid #c9d9e9; border-radius: 12px; background: #fff; }
#quoteEditor .quote-actions-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; border: 0; background: transparent; box-shadow: none; color: #24496e; text-align: left; }
#quoteEditor .quote-actions-menu > summary span { font-size: 14px; transform: none; transition: none; }
#quoteEditor .quote-actions-menu > summary svg { width: 18px; height: 18px; flex: 0 0 18px; transform: rotate(90deg); }
#quoteEditor .quote-actions-menu[open] > summary svg { transform: rotate(-90deg); }
#quoteEditor .quote-actions-menu > .quote-share-options { position: static; inset: auto; z-index: auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; width: 100%; padding: 12px; border: 0; border-top: 1px solid #dfE8f1; border-radius: 0 0 12px 12px; background: #f7faff; box-shadow: none; animation: none; }
#quoteEditor .quote-share-options button { min-width: 0; min-height: 76px; grid-template-columns: 24px minmax(0,1fr); gap: 4px 10px; padding: 12px; border: 1px solid #cbdced; border-radius: 10px; background: #fff; color: #214e7c; line-height: 1.45; }
#quoteEditor .quote-share-options button:hover { border-color: #78a5de; background: #edf4ff; }
#quoteEditor .quote-share-options :is(b,small) { min-width: 0; overflow-wrap: anywhere; }
#quoteEditor .quote-share-options b { font-size: 13px; }
#quoteEditor .quote-share-options small { color: #52677d; font-size: 12px; margin: 0; }
#quoteEditor .invoice-panel { margin-top: 24px; padding: 0; border: 0; background: transparent; }
#quoteEditor .invoice-empty { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding: 20px; border: 1px solid #b6c8dc; border-left: 4px solid #17375a; border-radius: 14px; background: #fff; }
#quoteEditor .invoice-empty > div { min-width: 0; }
#quoteEditor .invoice-empty h3 { margin: 6px 0; font-size: 21px; }
#quoteEditor .invoice-empty p { color: #52677d; font-size: 13px; line-height: 1.6; }
#quoteEditor .invoice-empty .button { min-height: 46px; height: auto; width: 100%; padding: 12px 16px; white-space: normal; }
#quoteEditor #invoiceSummary { padding: 18px; border: 1px solid #b6c8dc; border-radius: 14px; background: #fff; }
#quoteEditor #invoiceSummary > header { margin: -18px -18px 0; padding: 16px 18px; gap: 12px; border-radius: 13px 13px 0 0; background: #17375a; color: #fff; }
#quoteEditor #invoiceSummary > header h3 { color: #fff; }
#quoteEditor #invoiceSummary > header .eyebrow { color: #c9ddf4; }
#quoteEditor .invoice-financials { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
#quoteEditor .invoice-financials > :is(span,button) { min-width: 0; padding: 14px; line-height: 1.5; font-size: 12px; color: #405a77; background: #f0f4f9; border-color: #bbcddd; }
#quoteEditor .invoice-financials strong { font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#quoteEditor .invoice-financials .paid-summary { color: #166445; background: #e8f6ee; border-color: #7db599; }
#quoteEditor .invoice-financials .paid-summary :is(strong,small) { color: #166445; }
#quoteEditor .invoice-financials .balance { color: #dbe8f8; background: #17375a; border-color: #17375a; }
#quoteEditor .invoice-financials .balance strong { color: #fff; }
#quoteEditor .invoice-summary-overdue .invoice-due-date { background: #fff0ed; border-color: #c9756d; }
#quoteEditor .invoice-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 10px; }
#quoteEditor .invoice-actions .button { width: 100%; min-height: 46px; height: auto; white-space: normal; }
#quoteEditor .stripe-payment-panel { min-width: 0; padding: 16px; border: 1px solid #bbcddd; border-radius: 12px; background: #f0f4f9; }
#quoteEditor .stripe-payment-panel > div { min-width: 0; }
#quoteEditor .stripe-payment-panel :is(p,small,.eyebrow) { overflow-wrap: anywhere; color: #405a77; }
#quoteEditor .stripe-payment-actions { display: grid; grid-template-columns: minmax(0,1fr); }
#quoteEditor .stripe-payment-actions > :is(button,a) { min-width: 0; width: 100%; min-height: 46px; height: auto; padding: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
#quoteEditor :is(button,summary):focus-visible { outline: 3px solid #85b2ed; outline-offset: 2px; }
@container billing (min-width: 520px) {
  #quoteEditor .billing-summary-overview { grid-template-columns: minmax(0,1fr) minmax(220px,.9fr); }
  #quoteEditor .billing-summary-overview:has(#quoteDiscountSummary:empty) .quote-totals { grid-column: 2; }
  #quoteEditor .quote-actions-menu > .quote-share-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #quoteEditor .invoice-empty { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  #quoteEditor .invoice-empty .button { width: auto; }
  #quoteEditor .invoice-financials { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container billing (min-width: 760px) {
  #quoteEditor .quote-line { grid-template-columns: minmax(0,1.4fr) minmax(0,2fr) 60px 96px 92px 44px; gap: 12px; }
  #quoteEditor .quote-line > :is(.line-kind,.line-item) { grid-column: auto; }
  #quoteEditor .quote-line .line-kind { grid-template-columns: minmax(0,1fr); padding: 0; }
  #quoteEditor .quote-line .quote-line-remove { position: static; padding-top: 24px; }
}
@container billing (max-width: 360px) {
  #quoteEditor .quote-line { padding: 12px; gap: 12px 8px; }
  #quoteEditor .quote-line .line-kind { grid-template-columns: minmax(0,1fr); }
  #quoteEditor .quote-line :is(input,select) { font-size: 16px; padding-inline: 8px; }
  #quoteEditor .quote-line .quote-line-total output { font-size: 14px; }
  #quoteEditor .billing-summary-overview { padding: 14px; }
  #quoteEditor .invoice-empty, #quoteEditor #invoiceSummary { padding: 16px; }
  #quoteEditor #invoiceSummary > header { margin: -16px -16px 0; padding: 16px; }
  #quoteEditor .invoice-financials { grid-template-columns: minmax(0,1fr); }
  #quoteEditor .quote-add-actions { grid-template-columns: minmax(0,1fr); }
}
@container billing (max-width: 440px) {
  #quoteEditor > header { grid-template-columns: minmax(0,1fr); }
}

/* Parts approval: an office decision before Save Document, never a signature. */
#quoteEditor .parts-approval { margin-block: 16px; padding: 16px; border: 1px solid #c8d9e8; border-radius: 14px; background: #f4f8fc; min-width: 0; }
#quoteEditor .parts-approval-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
#quoteEditor .parts-approval-choice input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #2364ce; }
#quoteEditor .parts-approval p { margin: 8px 0; line-height: 1.5; color: #405d74; }
#quoteEditor .parts-approval details { margin-top: 12px; border-top: 1px solid #c8d9e8; padding-top: 8px; }
#quoteEditor .parts-approval summary { padding-block: 12px; min-height: 44px; color: #194c92; cursor: pointer; font-weight: 600; }
#quoteEditor .parts-approval textarea { display: block; width: 100%; margin: 8px 0 12px; min-height: 72px; font-size: 16px; }
#quoteEditor #partsApprovalStatus:empty { display: none; }
#quoteEditor .parts-approval :focus-visible { outline: 3px solid #2477e8; outline-offset: 3px; }

/* The board's unscheduled assignment is one real save, with visible visit time. */
#quickPicker .quick-assignment-visit { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #ccd9e7; min-width: 0; }
#quickPicker .quick-assignment-visit h3 { margin: 0 0 8px; font-size: 17px; color: #173957; }
#quickPicker .quick-assignment-visit p { margin: 8px 0; color: #405773; line-height: 1.5; font-size: 14px; }
#quickPicker .quick-assignment-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
#quickPicker .quick-assignment-options label { display: grid; gap: 7px; min-width: 0; color: #405773; font-size: 14px; font-weight: 600; }
#quickPicker .quick-assignment-options select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #99b1cd; border-radius: 9px; padding: 8px; background: #fff; color: #173957; font-size: 16px; }
#quickPicker .quick-assignment-visit small { display: block; color: #405773; line-height: 1.5; }
#quickPicker .quick-assignment-message { color: #a11e35; line-height: 1.5; margin: 12px 0 0; }
#quickPicker .quick-assignment-message:empty { display: none; }
#quickPicker .quick-tech-list small { color: #405773; }

/* Live calling: the shared navy chrome, with distinct working surfaces inside. */
body .customer-calls-dialog.has-live-call {
  --call-ink: #142f4b;
  --call-muted: #405773;
  --call-line: #bacadd;
  --call-blue: #1d4ed8;
  --call-canvas: #e7eef7;
  color: var(--call-ink);
}
.customer-calls-dialog.has-live-call .calls-scroll-region { background: var(--call-canvas); }
.customer-calls-dialog.has-live-call .calls-intro {
  grid-template-columns: minmax(0,1fr) auto; column-gap: 24px; row-gap: 6px;
  padding: 16px 20px; background: #f4f7fd; border-bottom: 1px solid var(--call-line);
}
.customer-calls-dialog.has-live-call .calls-intro [data-call-route] { font-size: 13px; font-weight: 650; line-height: 1.55; }
.customer-calls-dialog.has-live-call .calls-intro [data-call-instructions] { grid-column: 1; font-size: 12px; }
.customer-calls-dialog.has-live-call .calls-intro [data-call-start] { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.customer-calls-dialog.has-live-call .calls-message { min-height: 0; padding: 0 20px; }
.customer-calls-dialog.has-live-call .calls-message:not(:empty) { padding-block: 12px; color: #7b2d16; background: #fff1e8; }
.customer-calls-dialog.has-live-call .calls-workspace {
  grid-template-columns: minmax(0,1fr) 290px; gap: 18px; padding: 20px; align-items: start;
}
.customer-calls-dialog.has-live-call .calls-layout { grid-template-columns: 130px minmax(0,1fr); gap: 14px; min-height: 0; }
.customer-calls-dialog.has-live-call .calls-layout:has(>nav[hidden]) { grid-template-columns: minmax(0,1fr); }
.customer-calls-dialog.has-live-call .calls-layout>nav { padding: 0; border: 0; gap: 10px; }
.customer-calls-dialog.has-live-call .calls-layout>nav>button {
  border-color: var(--call-line); border-radius: 10px; padding: 12px; min-height: 44px;
  background: #f7faff; color: var(--call-ink); font-size: 12px; overflow-wrap: anywhere;
}
.customer-calls-dialog.has-live-call .calls-layout>nav>button.selected {
  border-color: var(--call-blue); background: #e0ebff; box-shadow: inset 3px 0 var(--call-blue);
}
.customer-calls-dialog.has-live-call .calls-layout>section { padding: 0 5px 2px 0; container: call-form / inline-size; }
.customer-calls-dialog.has-live-call .call-quote-editor {
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent;
}
.customer-calls-dialog.has-live-call .call-quote-editor>h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.025em; color: var(--call-ink); }
.customer-calls-dialog.has-live-call .call-quote-editor>h3 small { color: var(--call-muted); font-size: 13px; line-height: 1.6; margin-top: 6px; }
.customer-calls-dialog.has-live-call .call-quote-editor>[data-review-status] {
  margin: 12px 0; padding: 10px 12px; border: 1px solid #b3c6dd; border-radius: 9px;
  background: #f8fbff; color: #324f70; font-size: 12px; line-height: 1.5;
}
.customer-calls-dialog.has-live-call .call-workspace-check {
  border-color: #8eaddb; border-left: 4px solid var(--call-blue); background: #edf4ff; padding: 14px; margin: 14px 0;
}
.customer-calls-dialog.has-live-call .call-workspace-check h4 { color: #193b70; font-size: 14px; font-weight: 750; }
.customer-calls-dialog.has-live-call .call-workspace-check p { color: #304e74; }
.customer-calls-dialog.has-live-call .call-review-readiness { gap: 7px; margin: 14px 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
.customer-calls-dialog.has-live-call .call-review-readiness>span { border-color: #c19442; background: #fff4dc; color: #714800; font-weight: 650; font-size: 12px; }
.customer-calls-dialog.has-live-call .call-review-readiness>span.is-ready { border-color: #87baa9; background: #e1f4eb; color: #14573f; }
.customer-calls-dialog.has-live-call .call-review-readiness small { font-weight: 500; margin: 2px 0 0 15px; font-size: 11px; display: block; }
.customer-calls-dialog.has-live-call .call-quote-editor fieldset>details,
.customer-calls-dialog.has-live-call .call-service-price {
  padding: 16px; margin: 16px 0; background: #fff; border: 1px solid #b6c8df; border-radius: 12px;
  box-shadow: 0 3px 9px #17375a0b;
}
.customer-calls-dialog.has-live-call .call-quote-editor fieldset>details>summary,
.customer-calls-dialog.has-live-call .call-service-price>h4 {
  margin: -16px -16px 16px; padding: 12px 16px; border-radius: 11px 11px 0 0;
  background: var(--ui-header); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; min-height: 44px; box-sizing: border-box;
}
.customer-calls-dialog.has-live-call .call-quote-editor fieldset>details:not([open]) { padding-bottom: 0; }
.customer-calls-dialog.has-live-call .call-quote-editor fieldset>details:not([open])>summary { margin-bottom: 0; border-radius: 11px; }
.customer-calls-dialog.has-live-call .call-review-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
.customer-calls-dialog.has-live-call .call-quote-editor label { color: #2b4563; font-size: 13px; font-weight: 650; gap: 7px; }
.customer-calls-dialog.has-live-call .call-quote-editor :is(input,select,textarea) {
  border: 1px solid #8098b6; border-radius: 8px; background: #fff; color: #142f4b;
  min-height: 46px; font-size: 16px; line-height: 1.4; box-shadow: inset 0 1px 2px #16365608;
  transition: border-color 140ms,box-shadow 140ms;
}
.customer-calls-dialog.has-live-call .call-quote-editor :is(input,select,textarea):hover:not(:disabled) { border-color: #315b90; }
.customer-calls-dialog.has-live-call :is(input,select,textarea,button,summary):focus-visible,
.call-send-preview :is(button,summary):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.customer-calls-dialog.has-live-call .call-quote-editor :is(input,select,textarea):focus-visible { border-color: #1d4ed8; box-shadow: 0 0 0 4px #2563eb16; outline-width: 2px; }
.customer-calls-dialog.has-live-call .call-service-price input[data-review-field="line.0.price"] {
  font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.035em;
  padding: 10px 14px; min-height: 60px; border-color: #537bad; background: #f5f9ff;
}
.customer-calls-dialog.has-live-call .call-service-price>details { border-color: #b4c9e2; background: #f1f6ff; padding: 12px; margin: 14px 0; }
.customer-calls-dialog.has-live-call .call-service-price>details>summary { color: #204c87; min-height: 32px; line-height: 32px; }
.customer-calls-dialog.has-live-call .call-review-total,
body .call-send-preview .call-review-total { padding: 16px; border: 1px solid #17375a; border-radius: 10px; background: #17375a; color: #fff; font-variant-numeric: tabular-nums; }
.customer-calls-dialog.has-live-call .call-total-amount,
.customer-calls-dialog.has-live-call .call-total-discount { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.customer-calls-dialog.has-live-call .call-total-amount strong { font-size: 27px; font-weight: 750; letter-spacing: -.025em; }
.customer-calls-dialog.has-live-call .call-total-discount { padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid #6984a1; color: #dbeaff; font-size: 13px; }
.customer-calls-dialog.has-live-call .call-review-check { padding: 12px; border: 1px solid #b1c5df; border-radius: 10px; background: #f7faff; line-height: 1.55; }
.customer-calls-dialog.has-live-call .call-review-check input { width: 20px; height: 20px; min-height: 20px; accent-color: var(--call-blue); box-shadow: none; }
.customer-calls-dialog.has-live-call .call-review-subheading { margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid var(--call-line); color: var(--call-ink); font-size: 14px; }
.customer-calls-dialog.has-live-call .call-review-access { margin-top: 18px; padding: 14px; border: 1px solid var(--call-line); border-radius: 10px; background: #f4f8fe; }
.customer-calls-dialog.has-live-call .call-review-access .call-review-subheading { margin: 0 0 12px; padding: 0; border: 0; }
.customer-calls-dialog.has-live-call .call-review-access .call-review-check { margin-top: 0; background: #fff; }
.customer-calls-dialog.has-live-call .call-review-access>label:last-child { margin-bottom: 0; }
.customer-calls-dialog.has-live-call .call-access-hint { margin: -4px 0 14px; color: var(--call-muted); font-size: 12px; line-height: 1.5; }
.customer-calls-dialog.has-live-call [data-review-field="access_code"] { font-family: ui-monospace,Consolas,monospace; letter-spacing: .05em; }
.customer-calls-dialog.has-live-call .call-review-appliance { border-color: var(--call-line); background: #f4f8fe; padding: 14px; }
.customer-calls-dialog.has-live-call .call-review-appliance-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--call-line); }
.customer-calls-dialog.has-live-call .call-review-appliance-heading h4 { margin: 0; color: var(--call-ink); font-size: 15px; }
.customer-calls-dialog.has-live-call .call-review-appliance-heading .button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 26px; line-height: 1; }
.customer-calls-dialog.has-live-call .call-review-appliance>.call-review-grid { margin-bottom: 14px; }
.customer-calls-dialog.has-live-call .call-review-appliance>label { margin-bottom: 0; }
.customer-calls-dialog.has-live-call [data-review-add-appliance] { margin-bottom: 14px; }
.customer-calls-dialog.has-live-call .calls-muted { color: var(--call-muted); }
.customer-calls-dialog.has-live-call [data-review-recipient] { font-size: 12px; line-height: 1.6; margin: 12px 2px; }
.customer-calls-dialog.has-live-call .button,
.call-send-preview .button { min-height: 44px; padding: 10px 14px; font-size: 13px; line-height: 1.4; font-weight: 700; border-radius: 9px; }
.customer-calls-dialog.has-live-call .button.secondary,
.call-send-preview .button.secondary { border: 1px solid #849dbd; background: #fff; color: #204776; }
.customer-calls-dialog.has-live-call .button.primary,
.customer-calls-dialog.has-live-call [data-ai-use],
.call-send-preview .button.primary { border: 1px solid #1946c0; background: #1d4ed8; color: #fff; box-shadow: 0 3px 7px #1d4ed825; }
.customer-calls-dialog.has-live-call .button:hover:not(:disabled),
.call-send-preview .button:hover:not(:disabled) { border-color: #193f91; box-shadow: 0 2px 7px #17375a24; }
.customer-calls-dialog.has-live-call :is(.button.primary,[data-ai-use]):hover:not(:disabled),
.call-send-preview .button.primary:hover:not(:disabled) { background: #173fad; }
.customer-calls-dialog.has-live-call .button:disabled,
.call-send-preview .button:disabled { background: #e1e8f1; border-color: #b2c1d5; color: #50627b; opacity: 1; box-shadow: none; cursor: not-allowed; }
.customer-calls-dialog.has-live-call .call-review-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 10px; }
.customer-calls-dialog.has-live-call .call-ai-suggestion { border-color: #be8b2d; border-left-width: 4px; background: #fff5df; border-radius: 10px; }
.customer-calls-dialog.has-live-call .call-ai-suggestion :is(strong,dt) { color: #6a440c; }
.customer-calls-dialog.has-live-call .call-ai-suggestion dd { color: #3e321d; font-weight: 600; }
.customer-calls-dialog.has-live-call .call-ai-suggestion details { border-color: #d9b770; background: #fffaf0; }
.customer-calls-dialog.has-live-call .call-ai-suggestion.is-resolved { background: #e6f5ed; border-color: #5b9c7d; }
.customer-calls-dialog.has-live-call .call-ai-suggestion.is-resolved :is(strong,dt,dd) { color: #19573e; }
.customer-calls-dialog.has-live-call .call-ai-suggestion .call-ai-comparison { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.customer-calls-dialog.has-live-call .call-ai-value { min-width: 0; border: 1px solid #9fb3cb; border-radius: 9px; background: #fff; }
.customer-calls-dialog.has-live-call .call-ai-comparison dt { padding: 9px 12px; border-bottom: 1px solid #c3d1e1; border-radius: 8px 8px 0 0; background: #edf2f8; color: #334f6e; font-size: 12px; line-height: 1.5; font-weight: 700; }
.customer-calls-dialog.has-live-call .call-ai-comparison dd { padding: 12px; margin: 0; color: #142f4b; font-size: 16px; line-height: 1.5; font-weight: 650; overflow-wrap: anywhere; }
.customer-calls-dialog.has-live-call .call-ai-value.is-suggestion { border-color: #7299cf; background: #f6f9ff; }
.customer-calls-dialog.has-live-call .call-ai-value.is-suggestion dt { border-color: #a9c3e6; background: #dfeaff; color: #1b4483; }
.customer-calls-dialog.has-live-call [data-ai-field-note] .call-ai-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.customer-calls-dialog.has-live-call .call-script-card {
  padding: 16px; border: 1px solid #b6c8df; border-radius: 12px; background: #fff;
  box-shadow: 0 3px 9px #17375a0b; scrollbar-gutter: auto;
}
.customer-calls-dialog.has-live-call .call-script-card>header {
  margin: -16px -16px 16px; padding: 16px; background: var(--ui-header); color: #fff;
  display: grid; gap: 12px; border-radius: 11px 11px 0 0;
}
.customer-calls-dialog.has-live-call .call-script-card .eyebrow { color: #c6daf0; font-size: 10px; }
.customer-calls-dialog.has-live-call .call-script-card h3 { color: #fff; font-size: 18px; margin-top: 5px; }
.customer-calls-dialog.has-live-call .call-script-card [data-script-count] { color: #fff; background: #2b5078; border: 1px solid #7592b4; font-size: 11px; border-radius: 6px; justify-self: start; padding: 5px 8px; white-space: normal; }
.customer-calls-dialog.has-live-call .call-script-card li { border-color: #b9cce2; background: #f6f9fe; }
.customer-calls-dialog.has-live-call .call-script-card label { padding: 12px 10px; min-height: 44px; box-sizing: border-box; gap: 8px; }
.customer-calls-dialog.has-live-call .call-script-card input { accent-color: #1d4ed8; }
.customer-calls-dialog.has-live-call .script-step-number { color: #456385; }
.customer-calls-dialog.has-live-call .script-step-copy strong { color: #183e68; }
.customer-calls-dialog.has-live-call .script-step-copy>span { white-space: normal; color: #405773; font-size: 12px; }
.customer-calls-dialog.has-live-call .call-script-card .is-done { border-color: #79aa91; background: #e3f3ea; }
.customer-calls-dialog.has-live-call .call-script-card .is-done :is(strong,.script-step-copy>span) { color: #21533d; }
.customer-calls-dialog.has-live-call .call-script-card footer { color: #405773; font-size: 12px; }
.customer-calls-dialog.has-live-call .call-script-card progress { height: 6px; accent-color: #1d4ed8; }
.customer-calls-dialog.has-live-call .call-script-card progress::-webkit-progress-value { background: #1d4ed8; }
@container call-form (min-width: 570px) {
  .customer-calls-dialog.has-live-call .call-review-readiness { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@container call-form (max-width: 340px) {
  .customer-calls-dialog.has-live-call .call-review-grid { grid-template-columns: minmax(0,1fr); }
  .customer-calls-dialog.has-live-call .call-review-actions { grid-template-columns: minmax(0,1fr); }
  .customer-calls-dialog.has-live-call [data-ai-field-note] .call-ai-actions { grid-template-columns: minmax(0,1fr); }
}
@container call-form (max-width: 420px) {
  .customer-calls-dialog.has-live-call .call-ai-suggestion .call-ai-comparison { grid-template-columns: minmax(0,1fr); }
}
@media(max-width: 900px) {
  .customer-calls-dialog.has-live-call .calls-workspace { display: flex; flex-direction: column; padding: 12px; }
  .customer-calls-dialog.has-live-call .calls-layout { order: 0; width: 100%; }
  .customer-calls-dialog.has-live-call .call-script-card { order: 1; width: 100%; }
  .customer-calls-dialog.has-live-call .calls-layout>section { padding: 0; }
}
@media(max-width: 650px) {
  .customer-calls-dialog.has-live-call .calls-intro { padding: 14px; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .customer-calls-dialog.has-live-call .calls-intro [data-call-start] { grid-column: 1; grid-row: auto; width: 100%; }
  .customer-calls-dialog.has-live-call .calls-layout { grid-template-columns: minmax(0,1fr); }
  .customer-calls-dialog.has-live-call .calls-layout>nav { display: flex; flex-direction: row; max-height: 130px; overflow: auto; }
  .customer-calls-dialog.has-live-call .calls-layout>nav[hidden] { display: none; }
  .customer-calls-dialog.has-live-call .calls-layout>nav>button { flex: 0 0 150px; }
}
@media(prefers-reduced-motion: reduce) {
  .customer-calls-dialog.has-live-call :is(input,select,textarea,.button,li,progress),.call-send-preview .button { transition: none; }
}
@media (max-width: 360px) {
  #quickPicker .quick-assignment-visit .schedule-datetime-controls { grid-template-columns: minmax(0,1fr); }
  #quickPicker .quick-assignment-options { grid-template-columns: minmax(0,1fr); }
}

/* Two supplier offers stay aligned and bounded inside Billing and catalog cards. */
.catalog-previous-number{display:block;margin-top:4px;font-size:12px;font-weight:500;line-height:1.4;color:#dceafd}.part-stock{white-space:normal}
.supplier-comparison{margin:16px 0;border:1px solid #bfd0e3;border-radius:16px;background:#f0f5fb;overflow:hidden;white-space:normal;color:#183b5b;text-align:left;min-width:0}
.supplier-comparison-heading{padding:14px 16px;background:#183b5b;color:#fff;display:flex;gap:6px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.supplier-comparison-heading strong{font-size:18px}.supplier-comparison-heading span{font-size:12px;color:#dceafd}
.supplier-offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
.supplier-offer{background:#fff;border:1px solid #bdd0e5;border-radius:12px;overflow:hidden;min-width:0;box-shadow:0 3px 10px #183b5b0a}
.supplier-offer>header{padding:12px 14px;background:#e4effc;border-bottom:1px solid #bfd0e3;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.supplier-offer h4{margin:0;font-size:17px;font-weight:800;color:#133658}.supplier-offer>header span{font-size:12px;overflow-wrap:anywhere}
.supplier-number-identity{margin:14px 14px 0;padding:12px;border:1px solid #b6cfe9;border-left:3px solid #2475c5;border-radius:9px;background:#f0f6fd;color:#183b5b;font-size:13px;overflow-wrap:anywhere}
.supplier-number-identity>strong{display:block;font-size:14px}.supplier-number-identity dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.supplier-number-identity dt{font-size:11px;color:#435b73}.supplier-number-identity dd{margin:3px 0 0;font-size:14px;font-weight:800}.supplier-number-identity p{margin:0;font-size:12px;line-height:1.5;color:#435b73}
.supplier-offer-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.supplier-offer-prices>div{display:flex;align-items:flex-start;flex-direction:column;gap:5px;min-width:0}
.supplier-offer-prices>div>span:first-child{font-size:12px;font-weight:750;color:#435b73}.supplier-offer-prices strong{font-size:23px;color:#145aae;font-weight:800}
.supplier-offer-prices small{font-size:11px;color:#435b73}.supplier-price-unknown{font-size:15px;color:#526779}
.supplier-offer-prices .purchase-price-mask{max-width:100%;min-width:0;width:112px;height:48px}
.supplier-offer-stock{margin:0 14px;padding:10px 12px;background:#edf2f7;border-radius:9px;display:grid;gap:3px;font-size:13px;overflow-wrap:anywhere}
.supplier-offer-stock[data-stock=in_stock]{background:#e5f4ec;color:#165c3b}.supplier-offer-stock[data-stock=out_of_stock]{background:#fff2df;color:#805012}
.supplier-offer-state{margin:10px 14px;font-size:12px;font-weight:650;color:#435b73}.supplier-offer>footer{border-top:1px solid #e0e8f1;padding:10px 14px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#435b73}
.supplier-offer>footer a{color:#145aae;min-height:36px;display:flex;align-items:center;font-size:12px;font-weight:650}
.supplier-comparison-note{padding:0 14px 12px!important;margin:0!important;font-size:12px!important;color:#435b73!important;line-height:1.5}
.part-lookup-status:has(.supplier-comparison){width:100%;flex-basis:100%}
@media(max-width:600px){.supplier-offer-grid{grid-template-columns:1fr}.supplier-comparison-heading{align-items:flex-start;flex-direction:column}.supplier-offer>footer a{min-height:44px}}

/* One product, one gallery; the supplier comparison finishes the card. */
#catalogPartCard .catalog-card-body.catalog-with-suppliers{grid-auto-rows:max-content;grid-template-areas:"gallery summary" "offers offers"}
.catalog-with-suppliers>.supplier-comparison{grid-area:offers;margin:0}
.catalog-with-suppliers .supplier-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.supplier-comparison .catalog-price-check{margin:0;padding:12px 14px;border-bottom:1px solid #c7d6e5;background:#fff;align-items:center}
.supplier-comparison .catalog-price-check p{font-size:12px;color:#435b73;margin:0}
.supplier-comparison .catalog-price-check button{min-height:44px}
.catalog-with-suppliers .catalog-summary>h3{font-size:24px}
.catalog-with-suppliers .catalog-retail{padding:14px 16px}
.catalog-with-suppliers .catalog-retail strong{font-size:28px}
@media(max-width:900px){
  #catalogPartCard .catalog-card-body.catalog-with-suppliers{grid-auto-rows:max-content;grid-template-areas:"summary" "gallery" "offers"}
  .catalog-with-suppliers .supplier-offer-grid{grid-template-columns:1fr}
}

.supplier-delivery{margin:12px 14px;padding:12px;border:1px solid #ccdcee;border-radius:9px;background:#f1f6fc;font-size:13px;color:#233f5b;line-height:1.55;overflow-wrap:anywhere}
.supplier-delivery>strong{display:block;color:#183b5b;font-size:13px}
.supplier-delivery p{margin:6px 0;font-size:13px;line-height:1.55;color:#233f5b}
.supplier-delivery small{display:block;font-size:11px;line-height:1.5;color:#435b73}
.supplier-delivery details{margin-top:8px;border-top:1px solid #ccdcee;padding-top:4px}
.supplier-delivery summary{cursor:pointer;min-height:44px;align-content:center;font-weight:650;color:#145aae}
.supplier-delivery summary:focus-visible{outline:3px solid #367fe3;outline-offset:2px;border-radius:4px}
.catalog-model-references a{display:block;padding:10px 0;min-height:44px;border-top:1px solid #d9e5ef;overflow-wrap:anywhere;font-size:13px;color:#175a9c}

/* Compact technician labels keep Case rows aligned on desktop and mobile. */
body :is(.jobs-table .tech-picker,.mobile-job-meta .tech-picker){white-space:nowrap;overflow-wrap:normal;min-width:0}
body .jobs-table .tech-picker{width:120px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
body .mobile-job-meta .tech-picker>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Completion is an operational measure, separate from invoice and cash dates. */
body .report-completion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;padding:24px;border:1px solid #9cc3eb;border-left:5px solid #2469cb;border-radius:18px;background:linear-gradient(120deg,#e7f2ff,#f7fbff);color:#163b5b}
body .report-completion h3{margin:5px 0 8px;font-size:23px;color:#153c64}
body .report-completion p{margin:0;max-width:650px;font-size:14px;line-height:1.55;color:#365774}
body .report-completion-amount{display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:right}
body .report-completion-amount strong{font-size:32px;line-height:1.2;color:#145aae;font-variant-numeric:tabular-nums}
body .report-completion-amount span{font-size:14px;font-weight:650}
body .report-completion>small{grid-column:1/-1;padding-top:12px;border-top:1px solid #bed5eb;font-size:12px;line-height:1.5;color:#365774}
@media(max-width:600px){body .report-completion{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}body .report-completion-amount{text-align:left}body .report-completion h3{font-size:21px}}

/* Honest asynchronous Case state; compact notice preserves known rows on refresh. */
.cases-load-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin:12px 0;border:1px solid #bed2e7;border-radius:12px;background:#eaf3fc;color:#183c60;font-weight:650}
.cases-load-notice[hidden]{display:none}
.cases-load-notice .button{min-height:44px;flex-shrink:0}
/* Leave space for the full touch target in the Parts table's trailing column.
   Its legacy narrow cell otherwise clips the right edge of the open button. */
#partsWorkspace .parts-table :is(th,td):last-child { min-width: 68px; width: 68px; }
#partsWorkspace .parts-table .row-open { width: 44px; min-width: 44px; height: 44px; padding: 0; }