/* Shared CRM design: semantic colours, local typography and predictable controls.
   Layout/data contracts remain in styles.css; this file owns their appearance. */
@font-face {
  font-family: "Inter";
  src: url("./vendor/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #243247;
  --muted: #56657a;
  --line: #dce2e9;
  --line-strong: #7c8998;
  --soft: #f5f7fa;
  --panel: #ffffff;
  --teal: #14645c;
  --teal-dark: #0d4943;
  --teal-soft: #e8f3ef;
  --blue: #2459a6;
  --blue-dark: #194782;
  --blue-soft: #edf3fc;
  --green: #21633e;
  --service: #21633e;
  --service-dark: #174b2f;
  --service-soft: #edf6ef;
  --red: #b32630;
  --danger: #b32630;
  --danger-soft: #fff0f1;
  --orange: #a34c08;
  --yellow: #e5b449;
  --warning: #854600;
  --warning-soft: #fff6e6;
  --insulation: #146679;
  --insulation-dark: #104957;
  --insulation-soft: #edf6f8;
  --shadow: 0 6px 24px rgb(36 50 71 / 8%);
  --control-radius: 7px;
  --surface-radius: 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv05" 1, "calt" 1;
  font-optical-sizing: auto;
}
body { font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
strong, b { font-weight: 600; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p, small, label, button, a { overflow-wrap: break-word; }
input, select, textarea { color: var(--ink); background: #fff; border-color: var(--line-strong); border-radius: var(--control-radius); font-size: 14px; font-weight: 450; }
body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-color: var(--line-strong); }
body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: var(--blue); }
body :is(input, select, textarea)[aria-invalid="true"], body :is(input, select, textarea):user-invalid { border-color: var(--danger); }
.manual-field-invalid { color: var(--danger); }
.manual-field-error { color: var(--danger); font-weight: 600; overflow-wrap: anywhere; }
.editable-job-lines { display: grid; gap: 8px; min-width: 0; }
.editable-job-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.editable-job-line > span { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.editable-job-line.is-replacing { border-color: var(--teal); background: var(--teal-soft); }
.editable-job-line-actions { display: flex; gap: 6px; }
.editable-job-line-actions button { white-space: nowrap; }
.job-line-replacement { margin: 0; }
.job-lines-text-editor { margin-top: 8px; }
.job-lines-text-editor summary { cursor: pointer; color: var(--muted); }
.lead-status-discount-mode-field { grid-column: 1 / -1; }
@media (max-width: 600px) { .editable-job-line { grid-template-columns: minmax(0, 1fr); } .editable-job-line-actions { justify-content: flex-end; } }
input::placeholder, textarea::placeholder { color: #627085; opacity: 1; }
label, .modal label:not(.choice-stack label) { color: var(--ink); font-size: 13px; line-height: 1.45; font-weight: 600; }
button, .action-row a, .job-actions a, .lead-contact-actions a, .billing-draft-actions a, .inline-more-actions > summary {
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
button { min-height: 42px; background: var(--blue); }
button:not(:disabled):hover { filter: brightness(.97); }
button.secondary, .section-head button, .planning-head button, .job-actions button, .job-actions a, .lead-contact-actions a, .action-row a, .action-row button, .billing-draft-actions a {
  background: #fff; color: var(--ink); border-color: var(--line);
}
button.danger, .action-row button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
button.danger-outline, .action-row button.danger-outline { background: #fff; color: var(--danger); border-color: #bf7076; }
button.danger-outline:hover, .action-row button.danger-outline:hover { background: var(--danger-soft); color: var(--danger); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(36 89 166 / 12%); }
button, input, select, textarea, a, summary { scroll-margin-block: 90px; }
button:disabled, button[data-busy="true"] { cursor: default; }

/* A quiet navigation rail and recognisable selected location. */
.sidebar { background: #fff; border-color: var(--line); gap: 22px; }
.sidebar .logo, .login-card img { background: #fff; border-radius: 8px; }
.sidebar .logo { margin: 2px 0 8px; }
.sidebar nav button { border: 1px solid transparent; padding-inline: 14px; color: var(--muted); font-size: 15px; font-weight: 550; }
.sidebar nav button.active { background: var(--blue-soft); color: var(--blue-dark); border-color: transparent; box-shadow: inset 3px 0 var(--blue); font-weight: 600; }
.sidebar nav button:hover { background: var(--soft); color: var(--ink); }
.sidebar nav button.active:hover { background: var(--blue-soft); }
.user-card { border-color: var(--line); background: var(--soft); border-radius: var(--surface-radius); }
.user-card button { background: #fff; border: 1px solid var(--line-strong); color: var(--muted); }
.topbar h1 { font-size: 28px; margin-bottom: 5px; }
.topbar p { margin-top: 0; color: var(--muted); font-size: 14px; }
.top-search input { background: #fff; border-color: var(--line-strong); }
.more-menu, .new-action-menu, .global-search-results { border-color: var(--line); border-radius: var(--surface-radius); box-shadow: var(--shadow); }
.panel, .detail-section, .customer-more-sections, .login-card { border-color: var(--line); border-radius: var(--surface-radius); box-shadow: 0 1px 3px rgb(36 50 71 / 3%); }
.section-head h2, .view-head h2 { font-size: 20px; font-weight: 600; }
.section-head p, .view-subtitle, .context-hint { color: var(--muted); font-size: 14px; font-weight: 400; }
.empty-state { color: var(--muted); background: #f8fafc; border-color: var(--line); font-size: 14px; line-height: 1.6; }
.sync-status { color: var(--muted); font-weight: 450; }
.sync-status.ok { background: var(--service-soft); color: var(--service-dark); border-color: #bdd6c4; }
.sync-status.error { background: var(--danger-soft); color: var(--danger); border-color: #dfacb0; }
.data-mode.online { background: var(--service-soft); color: var(--service-dark); border-color: #bdd6c4; }
.status { border: 1px solid transparent; font-size: 12px; line-height: 1.4; font-weight: 600 !important; }
.status.red { background: var(--danger-soft); color: var(--danger); border-color: #dfacb0; }
.status.yellow { background: var(--warning-soft); color: var(--warning); border-color: #ddc198; }
.status.green { background: var(--service-soft); color: var(--service-dark); border-color: #bdd6c4; }
.status.missing, .status.inactive { background: var(--soft); color: var(--muted); border-color: var(--line); }
.soft-pill { background: var(--blue-soft); color: var(--blue-dark); border-color: #bed0ec; font-weight: 600 !important; }

/* Navigation tiles are tasks; only urgent/error states need a strong colour. */
.start-worklist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.start-worklist button { grid-template-columns: minmax(0, 1fr); min-height: 88px; gap: 7px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--surface-radius); background: #fff; }
.start-worklist button span { color: var(--ink); font-size: 14px; font-weight: 500; overflow-wrap: normal; word-break: normal; }
.start-worklist button strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.start-worklist button.new, .start-worklist button.followup, .start-worklist button.today, .start-worklist button.assistant, .start-worklist button.reminder, .start-worklist button.billing, .start-worklist button.service, .start-worklist button.quality { background: #fff; border-color: var(--line); border-left-color: var(--blue); }
.start-worklist button.service { border-left-color: var(--service); }
.start-worklist button.new span, .start-worklist button.new strong, .start-worklist button.followup span, .start-worklist button.followup strong, .start-worklist button.today span, .start-worklist button.today strong, .start-worklist button.assistant span, .start-worklist button.assistant strong, .start-worklist button.reminder span, .start-worklist button.reminder strong, .start-worklist button.billing span, .start-worklist button.billing strong, .start-worklist button.service span, .start-worklist button.service strong, .start-worklist button.quality span, .start-worklist button.quality strong { color: var(--ink); }
.start-worklist button.completion, .start-worklist button.move { background: var(--warning-soft); border-color: #ddc198; border-left-color: var(--warning); }
.start-worklist button.completion span, .start-worklist button.completion strong, .start-worklist button.move span, .start-worklist button.move strong { color: var(--warning); }

/* Lists have the same selected state and spacing as the customer workspace. */
.customer-list button, .lead-list button, .order-list-row > button { border-color: var(--line); background: #fff; color: var(--ink); border-radius: 10px; }
.customer-list button.active, .lead-list button.active, .order-list button.active, .order-list-row.active > button { border-color: #bed0ec; background: var(--blue-soft); box-shadow: inset 3px 0 var(--blue); }
.customer-list small, .lead-list small, .lead-list span, .order-list small, .order-list span { color: var(--muted); line-height: 1.45; }
.order-list-row > button .order-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; min-width: 0; max-width: 100%; color: inherit; font-size: inherit; }
.customer-title h2 { font-size: 24px; font-weight: 600; }
.customer-title p { font-size: 14px; line-height: 1.5; }
.customer-key-facts { border-radius: 10px; }
.customer-key-facts span { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.customer-key-facts strong { font-size: 14px; font-weight: 600; }
.customer-key-facts > div.confirmed { background: var(--service-soft); }
.customer-key-facts > div.needs-review { background: var(--warning-soft); }
.customer-section-nav { gap: 4px; background: #fff; }
#customerDetail .customer-section-nav { background: var(--soft); }
.customer-section-nav button { min-height: 44px; font-size: 14px; font-weight: 550; padding-inline: 12px; }
.customer-section-nav button.active, #customerDetail .customer-section-nav button.active { background: var(--blue-soft); color: var(--blue-dark); border-bottom-color: var(--blue); font-weight: 600; border-radius: 7px 7px 0 0; }
.customer-action-bar > a, .customer-action-bar > button, .customer-action-bar > .inline-more-actions > summary { font-size: 14px; font-weight: 600; }
#customerDetail .customer-action-bar > a, #customerDetail .customer-action-bar > button, #customerDetail .customer-action-bar > details > summary { color: var(--ink); font-weight: 600; border-radius: var(--control-radius); }
#customerDetail .customer-action-bar > .customer-offer-primary, #customerDetail .customer-action-bar > .book-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.customer-action-bar .customer-edit-primary { background: #fff; color: var(--ink); border-color: var(--line); }
.customer-action-bar .map-primary-action, .map-primary-action { background: var(--blue-soft) !important; color: var(--blue) !important; border-color: #8ca9ca !important; }

/* Compact customer commands leave room for the selected tab's actual work. */
#customerDetail .customer-action-bar { align-items: stretch; gap: 6px; }
#customerDetail .customer-action-bar > .inline-more-actions:not([open]) { grid-column: auto; }
#customerDetail .customer-action-bar > .inline-more-actions[open] { grid-column: 1 / -1; }
#customerDetail .customer-action-bar > a,
#customerDetail .customer-action-bar > button,
#customerDetail .customer-action-bar > details > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-height: 44px;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}
.customer-workspace-toggle { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); font-size: 13px; }
.customer-workspace-toggle[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-dark); border-color: var(--blue); }
@media (max-width: 600px) {
  #customerDetail .customer-action-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.crm-detail-table th { background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 600; text-transform: none; }
.crm-detail-table td { font-size: 14px; color: var(--ink); }
.crm-detail-table tbody tr:hover td { background: #f5f8fc; }
.customer-work-summary strong, .customer-more-sections > summary { color: var(--ink); font-weight: 600; }

/* Calendar colour identifies the job type in a narrow rail, not a full neon card. */
.job-card { background: #fff; border-color: var(--line); border-left-color: var(--service); border-radius: 10px; box-shadow: 0 1px 3px rgb(23 50 47 / 5%); }
.job-card.installasjon { background: #fff; border-color: var(--line); border-left-color: var(--blue); }
.job-card.befaring { background: #fff; border-color: var(--line); border-left-color: var(--warning); }
.job-card.reparasjon { background: #fff; border-color: var(--line); border-left-color: #62558c; }
.job-card.blaseisolering { background: #fff; border-color: var(--line); border-left-color: var(--insulation); }
.job-card.done { background: var(--service-soft); border-color: #bdd6c4; border-left-color: var(--service); }
.job-card.settled { background: var(--soft); border-color: var(--line); border-left-color: var(--line-strong); opacity: 1; }
.job-card.needs-move, .job-card.overlap { background: var(--danger-soft); border-color: #dfacb0; border-left-color: var(--danger); }
.job-card strong { color: var(--ink); font-weight: 650; }
.job-card span, .job-card small, .job-card p { color: var(--muted); font-weight: 450; line-height: 1.45; }
.job-card .job-work-note, .job-card .job-work-address, .job-card .job-product { font-size: 13px; }
.job-card .job-actions a, .job-card .job-actions button, .job-card .inline-more-actions summary { font-size: 13px; border-color: var(--line); font-weight: 600; }
.job-card .job-actions .order-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.plan-tabs button { font-size: 14px; font-weight: 550; min-height: 44px; }
.plan-tabs button.active { color: var(--blue-dark); background: var(--blue-soft); border-color: #bed0ec; font-weight: 600; }
.planning-mode-toggle { background: var(--soft); }
.planning-mode-toggle button { color: var(--muted); font-weight: 550; }
.planning-mode-toggle button.active { color: var(--blue-dark); }
.planning-month-grid .month-day.selected { background: var(--blue-soft); border-color: var(--blue); outline-color: #bed0ec; }
.planning-backlog-job, .flexible-job { background: #fff; border-color: var(--line); border-radius: 10px; }

/* Readable dialogs and forms, with persistent existing headers/actions. */
.modal { border-color: var(--line); border-radius: 12px; box-shadow: 0 22px 70px rgb(36 50 71 / 20%); }
.modal::backdrop { background: rgb(25 38 56 / 42%); }
.modal-head h2 { font-size: 21px; font-weight: 600; }
.modal-head button { min-width: 42px; min-height: 42px; color: var(--muted); background: var(--soft); border: 1px solid var(--line); }
.modal-head, .modal form > .modal-actions { border-color: var(--line); }
.crm-attachment-list article, .attachment-upload-item { border-color: var(--line); border-radius: 10px; background: #fff; }
.crm-attachment-list strong { font-size: 14px; font-weight: 600; }
.crm-attachment-list small { font-size: 12px; }
.attachment-upload-item.saved { background: var(--service-soft); }
.invoice-basis-review { border-color: var(--line); border-radius: var(--surface-radius); }
.invoice-basis-facts dt { color: var(--muted); font-size: 13px; }
.invoice-basis-facts dd { color: var(--ink); font-size: 14px; }
.offer-line-item strong, .offer-line-item > b { color: var(--ink); font-size: 14px; font-weight: 600; }
[data-offer-lines-total] { color: var(--ink); font-variant-numeric: tabular-nums; }
.offer-product-card { border-color: var(--line); border-radius: 10px; }
.installation-preparation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.preparation-photo-group { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--surface-radius); background: #fff; }
.preparation-photo-group h4 { margin: 0 0 8px; font-size: 15px; }
.preparation-photo-group img { max-width: 100%; }
.preparation-power-fields { display: grid; gap: 10px; padding: 14px; margin-block: 12px; border: 1px solid var(--line); border-radius: var(--surface-radius); background: var(--soft); }
.preparation-power-fields label { display: grid; gap: 6px; min-width: 0; }
.preparation-power-fields input, .preparation-power-fields select, .preparation-power-fields textarea { width: 100%; }
.preparation-instruction { padding: 12px; margin-block: 12px; border-left: 3px solid var(--teal); border-radius: 8px; background: var(--teal-soft); color: var(--teal-dark); overflow-wrap: anywhere; }
.preparation-instruction button, .preparation-photo-group button { min-height: 44px; }
.preparation-plan-history > summary, .quick-job-equipment > summary { padding-block: 12px; font-weight: 600; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.preparation-plan-history { margin-block: 12px; border-top: 1px solid var(--line); }
.quick-job-equipment { padding-inline: 14px; border: 1px solid var(--line); border-radius: var(--surface-radius); }
.quick-job-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 14px; }
.quick-job-sections button { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.quick-job-sections button[aria-pressed="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }

/* One reported quantity per material; keep the agreed job and raw price text optional. */
#completionDialog .completion-summary > em { font-style: normal; font-weight: 650; }
#completionDialog .completion-work-context > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--teal); font-weight: 650; }
#completionDialog .completion-work-context p { overflow-wrap: anywhere; }
#completionDialog .completion-actual-grid { grid-template-columns: minmax(0, 1fr); }
#completionDialog .completion-actual-grid > label {
  grid-template-columns: minmax(0, 1fr) 84px;
  grid-template-areas: "name caption" "estimate quantity" "amount actions";
  column-gap: 10px;
  align-items: start;
}
#completionDialog .completion-material-name { grid-area: name; font-weight: 650; }
#completionDialog .completion-actual-grid > label > small { grid-area: estimate; }
#completionDialog .completion-actual-caption { grid-area: caption; font-size: 12px; color: var(--muted); }
#completionDialog .completion-actual-grid input { grid-area: quantity; text-align: right; }
#completionDialog .completion-material-price { width: fit-content; }
#completionDialog .completion-material-price-total { grid-area: amount; align-self: center; color: var(--muted); font-size: 12px; font-weight: 500; }
#completionDialog .completion-material-actions { grid-area: actions; display: flex; gap: 4px; justify-content: end; }
#completionDialog .completion-material-actions button { min-height: 44px; padding: 5px 8px; font-size: 12px; }
#completionDialog .completion-price-review { min-width: 0; border: 0; padding: 0; }
#completionDialog .completion-price-review > summary { display: none; }
#completionDialog .completion-price-review > summary > span { color: var(--muted); font-size: 13px; }
#completionDialog .completion-reviewed-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 10px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
#completionDialog .completion-reviewed-line small { display: block; color: var(--muted); margin-top: 4px; }
#completionDialog .completion-reviewed-line > span { font-weight: 650; }
#completionDialog .completion-reviewed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#completionDialog .completion-reviewed-actions button { min-height: 40px; padding: 6px 12px; }
#completionDialog .completion-reviewed-line.is-replacing { border-left: 3px solid var(--teal); padding-left: 10px; }
#completionDialog .completion-items { display: grid; gap: 8px; min-width: 0; }
#completionDialog .completion-summary { grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; padding: 8px 10px; }
#completionDialog .completion-summary > strong { grid-column: 1; grid-row: 1; }
#completionDialog .completion-summary > em { grid-column: 2; grid-row: 1; align-self: center; font-size: 12px; }
#completionDialog .completion-summary > span, #completionDialog .completion-summary > details { grid-column: 1 / -1; }
#completionDialog .completion-actual-controls { gap: 6px; }
#completionDialog .completion-actual-grid { gap: 4px; }
#completionDialog .completion-actual-grid > label { margin: 0; padding: 6px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--border); }
#completionDialog .completion-actual-caption { display: none; }
#completionDialog .completion-actual-grid > label { grid-template-areas: "name quantity" "estimate quantity" "amount actions"; }
#completionDialog #completionActualMoreDetails > summary { display: none; }
#completionDialog .completion-material-picker { padding: 4px 0; background: none; }
#completionDialog .completion-unified-items #completionPriceDetails > summary { display: none; }
#completionDialog #completionPriceDetails[open] { padding: 10px; margin: 0; background: var(--blue-soft); border-color: #bed0ec; }
#completionDialog #completionPriceDetails { grid-column: 1 / -1; min-width: 0; }
#completionDialog #completionPriceDetails:not([open]) > #completionPriceEditorTitle { display: none; }
#completionDialog #completionPriceEditorTitle { display: block; margin-bottom: 8px; font-size: 14px; overflow-wrap: anywhere; }
#completionDialog #completionPriceEditorDock:has(> details:not([open])) { display: none; }
#completionDialog .completion-field-report:not(.completion-unified-items) #completionPriceEditorDock { display: block; }
#completionDialog .completion-core-fields textarea { min-height: 64px; }
#completionDialog #completionDoneDateLabel { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 10px; }
@media (min-width: 641px) {
  #completionDialog #completionDoneDateLabel { grid-template-columns: minmax(0,1fr); row-gap: 4px; }
}
#completionDialog #completionPhotoRoleButtons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#completionDialog #completionPhotoRoleButtons.completion-photo-checklist { grid-template-columns: minmax(0,1fr); }
#completionDialog #completionPhotoRoleButtons button { min-width: 0; min-height: 44px; padding: 8px; font-size: 12px; line-height: 1.35; white-space: normal; }
#completionDialog .completion-field-report { gap: 8px; padding: 12px; }
@media (min-width: 601px) {
  #completionDialog .completion-actual-grid > label { grid-template-columns: minmax(0,1fr) 90px 110px auto; grid-template-areas: "name quantity amount actions" "estimate quantity amount actions"; column-gap: 10px; }
  #completionDialog .completion-reviewed-line { grid-template-columns: minmax(0,1fr) 110px auto; align-items: center; gap: 10px; }
}
@media (max-width: 600px) {
  #completionDialog .completion-actual-grid > label { grid-template-columns: minmax(0,1fr) 100px; }
  #completionDialog .completion-price-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #completionDialog .completion-price-controls > label:nth-child(-n+2) { grid-column: 1 / -1; }
}
#completionCancelPriceEdit[hidden] { display: none !important; }
#completionDialog .completion-price-problem { color: #9a4c08; }
#completionDialog .completion-raw-price-details { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
#completionDialog .completion-raw-price-details > summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; cursor: pointer; }
@media (max-width: 600px) {
  #completionDialog .technician-completion-form { gap: 8px; }
  #completionDialog .technician-completion-form .completion-summary { padding: 10px; }
}
[data-quick-job-panel][hidden] { display: none !important; }
.quick-job-picture-summary { width: 100%; text-align: left; white-space: normal; }
.crm-assistant-button { background: #fff; color: var(--blue-dark); border-color: #bed0ec; }
.crm-assistant-kicker { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.crm-assistant-queue-button span { background: var(--warning-soft); color: var(--warning); font-size: 12px; font-weight: 650; }
.crm-assistant-mode-tabs button { font-weight: 600; }

/* The selected location uses blue consistently; business states keep their own colour. */
.more-menu button, .new-action-menu button, .inline-more-actions > div button { color: var(--ink); font-weight: 500; }
.more-menu button:hover, .new-action-menu button:hover { background: var(--blue-soft); }
.inbox-tabs button, .job-tabs button, .insulation-tabs button { border-radius: var(--control-radius); font-weight: 550; }
.inbox-tabs button.active, .job-tabs button.active, .insulation-tabs button.active { background: var(--blue-soft); color: var(--blue-dark); border-color: #bed0ec; }
.lead-metrics button, .order-metrics button, .metric-grid button { border-radius: var(--control-radius); font-weight: 500; }
.lead-metrics button.active, .order-metrics button.active, .inbox-filter-cards button[data-lead-inbox-tab].active, .order-metrics button[data-order-filter-shortcut].active { border-width: 1px; background: var(--blue-soft); color: var(--blue-dark); border-color: #bed0ec; box-shadow: inset 0 -2px var(--blue); }
.lead-metrics strong, .order-metrics strong, .metric-grid strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.lead-metrics.inbox-filter-cards span, .dashboard-focus-grid small { font-weight: 500; }
.list-view-switch button, .workspace-density-button { font-weight: 550; color: var(--muted); }
.list-view-switch button.active { color: var(--blue-dark); }
.dashboard-queue-details > summary, .dashboard-extra-actions > summary, .recent-panel > summary, .settled-order-details > summary { font-weight: 600; color: var(--ink); }
.dashboard-queue-details > summary span { font-weight: 400; }
.job-flow-head span { font-weight: 500; text-transform: none; }
.job-flow-head strong { font-weight: 600; }
.job-flow-head em { font-weight: 500; }
.upcoming-job { border-left-color: var(--blue); }
.upcoming-job:hover, .upcoming-job:focus-visible { background: var(--blue-soft); border-color: #bed0ec; }
.action-row .order-primary, .quick-actions .order-primary, .mini-action-row .order-primary, .lead-next-actions .order-primary { background: var(--blue) !important; color: #fff !important; border-color: var(--blue); font-weight: 600 !important; }
.mobile-bottom-nav button { font-weight: 550; }
.mobile-bottom-nav button.active { background: var(--blue-soft); color: var(--blue-dark); box-shadow: inset 0 2px var(--blue); }

@media (max-width: 1100px) {
  .topbar h1 { font-size: 25px; }
  .sidebar nav button { font-size: 14px; padding-inline: 9px; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .topbar h1 { font-size: 23px; }
  .section-head h2, .view-head h2, .modal-head h2 { font-size: 19px; }
  .customer-title h2 { font-size: 23px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  button, .action-row a, .job-actions a, .lead-contact-actions a, .billing-draft-actions a, .inline-more-actions > summary { min-height: 44px; }
  #customerDetail .customer-action-bar > button, #customerDetail .customer-action-bar > a, #customerDetail .customer-action-bar > details > summary { font-size: 13px; }
  .job-card .job-actions a, .job-card .job-actions button, .job-card .inline-more-actions summary { min-height: 44px; font-size: 13px; }
  .customer-section-nav button { font-size: 13px; padding-inline: 10px; }
  #customerDetail .customer-section-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #customerDetail .customer-section-nav button { white-space: nowrap; overflow-wrap: normal; }
  .mobile-bottom-nav button { font-size: 12px; padding-inline: 2px; white-space: nowrap; overflow-wrap: normal; }
  .planning-mode-toggle button { min-height: 44px; }
  .modal { border-radius: 12px; }
  .panel { border-radius: 10px; }
  .start-worklist { grid-template-columns: minmax(0, 1fr); }
  .start-worklist button { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; gap: 8px; }
  .installation-preparation-grid { grid-template-columns: minmax(0,1fr); }
  .crm-assistant-head-actions button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: Highlight; }
  .customer-section-nav button.active, .sidebar nav button.active { border-color: Highlight; }
}

/* Long note previews retain their own action row on narrow screens. */
.view .expandable-text > summary { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.view .expandable-text > summary em { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; overflow-wrap: normal; font-weight: 600; }

/* Inbox chronology and optional action priority stay visible in every tab. */
.lead-followup-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: end; margin-block: 12px; }
.lead-followup-controls label { min-width: 0; font-size: 13px; font-weight: 600; }
.lead-followup-controls select { width: 100%; min-height: 44px; margin-top: 4px; }
.lead-followup-controls .lead-attention-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.lead-followup-controls .lead-attention-toggle input { width: 18px; height: 18px; margin: 0; }
.lead-followup-controls .lead-attention-toggle.hidden { display: none; }
.lead-followup-controls p { grid-column: 1 / -1; margin: 0; font-weight: 400; }
.lead-list .lead-priority-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 9px 10px; border-left: 3px solid var(--teal); background: #f0f6f5; font-size: 14px; line-height: 1.4; }
.lead-list .lead-priority-heading.priority-overdue { border-color: #b91c1c; background: #fff1f0; color: #922b24; }
.lead-list .lead-priority-heading.priority-scheduled, .lead-list .lead-priority-heading.priority-waiting { border-color: #94a3b8; background: #f5f7f9; color: #475569; }
.lead-list .lead-priority-heading span { font-size: 12px; font-weight: 600; }
.lead-case-product { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.lead-case-identity, .lead-case-date { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; color: #586879; }
.lead-list .lead-card-next { font-weight: 500; font-size: 13px; }
.lead-list .lead-card-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; color: #586879; }
.customer-order-list .lead-card-focus { display: inline-block; font-size: 12px; line-height: 1.5; color: var(--teal); }
/* Each active sale keeps its alternatives, next step and case identity together. */
#customerOffersSection .customer-sales-case-card { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; border-left: 3px solid var(--blue); }
#customerOffersSection .customer-sales-case-card > div { min-width: 0; }
#customerOffersSection .customer-case-actions { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; }
#customerOffersSection .customer-case-actions > button { min-height: 44px; white-space: normal; }
#customerOffersSection .customer-case-quoted-offers { margin-top: 10px; }
#customerOffersSection .customer-case-quoted-offers > small { font-size: 12px; font-weight: 600; color: var(--muted); }
#customerOffersSection .customer-case-quoted-offers ul { display: grid; gap: 7px; margin: 5px 0 0; padding: 0; list-style: none; }
#customerOffersSection .customer-case-quoted-offers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 10px; background: var(--blue-soft); border-radius: 7px; overflow-wrap: anywhere; }
#customerOffersSection .customer-case-quoted-offers li strong { font-size: 13px; font-weight: 600; }
#customerOffersSection .customer-case-quoted-offers li span { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
#customerOffersSection .customer-case-quoted-offers li time { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
#customerOffersSection .customer-case-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 9px; color: var(--muted); font-size: 13px; }
#customerOffersSection .customer-pending-offers article { border-left-color: #bd7a17; }
#customerOffersSection .customer-pending-offers article.error { border-left-color: #b91c1c; background: #fff7f6; }
#customerOffersSection .customer-pending-offers article.approved { border-left-color: var(--blue); }
#customerOffersSection .customer-pending-offers time { display: block; font-size: 12px; color: var(--muted); }
#customerOffersSection .customer-offer-state { font-weight: 600; }
#customerOffersSection .customer-pending-offers button { min-height: 44px; }
@media (max-width: 760px) {
  #customerOffersSection .customer-sales-case-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #customerOffersSection .customer-case-actions > button { flex: 1 1 160px; }
  #customerOffersSection .customer-case-quoted-offers li { grid-template-columns: minmax(0, 1fr); }
  #customerOffersSection .customer-case-quoted-offers li time { grid-column: 1; }
}
@media (max-width: 760px) {
  .lead-followup-controls { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #leadsView .lead-list-panel > .lead-followup-controls { order: 2; width: 100%; min-width: 0; }
  .lead-list .lead-priority-heading { font-size: 13px; }
}
/* Road choices belong to the booking form, outside the scrollable agenda. */
.booking-road-preview { margin: 12px 0; padding: 12px; border: 1px solid var(--border, #d7e3e1); border-radius: 10px; background: #f3f8f7; min-width: 0; }
.booking-road-preview > button { width: 100%; white-space: normal; }
.booking-road-slots { display: grid; gap: 8px; }
.booking-road-slot { display: grid; gap: 4px; padding: 10px; text-align: left; color: #163f3a; background: white; border: 1px solid #b8d4cf; border-radius: 8px; min-width: 0; width: 100%; }
.booking-road-slot span, .booking-road-slot strong { white-space: normal; overflow-wrap: anywhere; }
.booking-road-slot span { font-size: .85rem; line-height: 1.4; }
.booking-road-slot:first-child { border-color: #0b7669; }
.booking-road-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.booking-road-head > strong { font-size: 1rem; }
.booking-road-head > button { max-width: 100%; white-space: normal; }
.booking-road-help > summary { padding-block: 10px; cursor: pointer; font-size: .85rem; }
.booking-road-preview > .form-hint { margin: 8px 0; }
.nearby-road-status {
  margin: 0 16px 12px;
  padding: 12px;
  border: 1px solid var(--border, #d4dce5);
  border-radius: 10px;
  background: var(--surface-subtle, #f5f8fa);
  display: grid;
  gap: 7px;
  overflow-wrap: anywhere;
}
.nearby-road-status p { margin: 0; }
.nearby-road-status small { color: var(--text-muted, #566579); }
.nearby-road-status button { justify-self: start; max-width: 100%; white-space: normal; }
.nearby-road-help > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-weight: 600; }
.nearby-road-help p { color: var(--text-muted, #566579); margin-top: 6px; }
@media (max-width: 760px) {
  .nearby-road-status { padding: 8px; gap: 4px; }
}
.nearby-road-facts {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 9px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.nearby-road-facts.checked { background: #eef7f3; border: 1px solid #c8e1d5; }
.nearby-road-facts.unchecked { background: #f5f7fa; border: 1px solid #e0e5eb; }
.nearby-road-facts strong { color: #164b3d; font-size: .95rem; }
.nearby-road-facts small { color: #566579; }
.nearby-return-warning { color: #854b0b; font-weight: 600; }

/* One readable final review for the exact saved customer offer. */
.offer-review-dialog { width: min(760px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 0; }
.offer-review-dialog form { display: flex; flex-direction: column; padding: 0; max-height: calc(100dvh - 24px); overflow: hidden; }
.offer-review-dialog .modal-head { position: static; flex: 0 0 auto; margin: 0; padding: 14px 18px; }
.offer-review-content { min-height: 0; overflow-y: auto; padding: 0 18px 14px; overscroll-behavior: contain; }
.offer-review-facts { display: grid; gap: 12px; margin: 14px 0; }
.offer-review-facts > div { display: grid; gap: 3px; min-width: 0; }
.offer-review-facts dt { font-size: 13px; color: var(--muted); font-weight: 600; }
.offer-review-facts dd { margin: 0; overflow-wrap: anywhere; }
.offer-review-body { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; line-height: 1.6; }
.offer-review-dialog [data-offer-review-subject] { width: 100%; min-width: 0; margin: 5px 0 12px; font-weight: 400; }
.offer-review-dialog textarea.offer-review-body { width: 100%; min-width: 0; min-height: 210px; max-height: 48dvh; margin: 5px 0 0; font: inherit; font-weight: 400; resize: vertical; }
.offer-review-current-text { margin-top: 12px; border: 1px solid #dec17b; border-radius: 8px; padding: 12px; background: #fffbef; }
.offer-review-current-text p { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; }
.offer-review-dialog form > .modal-actions { position: static; flex: 0 0 auto; margin: 0; padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.offer-review-dialog .modal-actions button { white-space: normal; max-width: 100%; }
@media (max-width: 600px) {
  .offer-review-dialog .modal-head, .offer-review-dialog form > .modal-actions { padding: 12px; }
  .offer-review-content { padding: 0 12px 12px; }
  .offer-review-body { padding: 12px; font-size: 15px; }
  .offer-review-dialog .modal-actions [data-offer-review-send] { flex: 1 1 100%; }
}
/* Replies belong to the open case, beside the customer's latest email. */
.customer-reply-source { display:grid; gap:6px; min-width:0; margin-top:10px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; }
.lead-next-action .customer-reply-source strong { margin:0; font-size:13px; }
.customer-reply-source small { color:#64748b; font-size:12px; }
.customer-reply-source-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; font-size:13px; line-height:1.5; }
.customer-reply-source summary { color:#0f766e; font-size:13px; cursor:pointer; }
.customer-reply-source pre { max-height:220px; overflow:auto; margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:13px; line-height:1.5; }
.customer-reply-composer { margin-top:16px; padding:16px; border:1px solid #b4d9d4; border-radius:12px; background:#fff; color:#1f2937; min-width:0; max-width:100%; }
.lead-next-action .customer-reply-composer strong { color:#1f2937; font-size:16px; }
.customer-reply-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:10px; }
.lead-next-action .customer-reply-heading span { color:#64748b; text-transform:none; font-weight:400; font-size:12px; }
.customer-reply-composer label { display:grid; gap:5px; margin:10px 0; min-width:0; font-size:13px; font-weight:600; }
.customer-reply-composer input,.customer-reply-composer textarea { width:100%; min-width:0; max-width:100%; box-sizing:border-box; font:inherit; font-weight:400; color:#1f2937; border:1px solid #cbd5e1; border-radius:8px; background:#fff; padding:10px; }
.customer-reply-composer textarea { min-height:180px; max-height:360px; resize:vertical; line-height:1.55; overflow-wrap:anywhere; }
.lead-next-action .customer-reply-composer p { display:block; margin:8px 0; overflow-wrap:anywhere; }
.customer-reply-recipient { color:#475569; font-size:13px; }
.customer-reply-actions { display:flex; flex-wrap:wrap; gap:8px; }
.customer-reply-actions button,.customer-reply-date-options button { min-height:44px; white-space:normal; }
.customer-reply-status { color:#475569; font-size:13px; min-height:20px; }
.customer-reply-date-options { margin:8px 0; font-size:13px; }
.customer-reply-date-options summary { cursor:pointer; color:#0f766e; }
.customer-reply-date-options>div { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.customer-reply-date-options small,.customer-reply-stored small { display:block; color:#64748b; font-size:12px; }
.customer-reply-stored { margin:10px 0; padding:10px; background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px; }
.customer-reply-stored pre { max-height:160px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:13px; }
@media(max-width:480px) { .customer-reply-composer { padding:12px; } .customer-reply-actions button { flex:1 1 140px; } }