/* Shared Office skin. Existing grids, queue colors, visibility, transaction
   states and resizable table geometry stay owned by their components. */
html:has(body.afix-compact) {
  --ink: var(--afix-text); --muted: var(--afix-muted);
  --line: var(--afix-border); --paper: var(--afix-canvas);
  --white: var(--afix-surface); --blue: var(--afix-accent);
  --surface: var(--afix-surface);
  --blue-soft: var(--afix-accent-soft); --radius: var(--afix-radius);
  --shadow: var(--afix-shadow-raised);
  --dispatch-border: var(--afix-border);
  --dispatch-ink: var(--afix-text);
  --shared-control: var(--afix-field);
  --shared-control-hover: var(--afix-accent-soft);
}
html body.afix-compact,
html[data-office-theme] body.afix-compact {
  background: var(--afix-canvas); color: var(--afix-text);
  font: var(--afix-font-body)/var(--afix-line-height) var(--afix-font);
}
html body.afix-compact :is(.manager-workspace, .dispatch-workspace,
  .inspector-scroll, .manager-queue-scroll, .manager-queue-table,
  .manager-center-scroll, .manager-appliance-scroll, .appliance-list),
html[data-office-theme] body.afix-compact :is(.manager-workspace, .dispatch-workspace,
  .inspector-scroll, .manager-center-scroll, .manager-appliance-scroll,
  .manager-queue-scroll, .manager-queue-table, .appliance-list) {
  background: var(--afix-canvas);
}

/* Opaque cards with visible boundaries, including in dark mode. */
html body.afix-compact :is(.panel, .metric-card, .module-card, .tech-job-card,
  .dispatch-panel, .inspector-block, .manager-customer-card,
  .manager-financial-card, .manager-notes-pane, .security-card,
  .shared-login-card, .dispatch-communications, .admin-hero, .admin-metric,
  .admin-card, .admin-tabs, .staff-sections, .settings-panel, .performance-panel,
  .warehouse-queue, .warehouse-detail, .warehouse-support, .parts-order-queue,
  .parts-overview, .receive-workspace, .camera-card, .storage-panel,
  .storage-import-panel, .pending-shelf-panel, .triage-card) {
  border: 1px solid var(--afix-border); border-radius: var(--afix-radius);
  background: var(--afix-surface); color: var(--afix-text);
  box-shadow: var(--afix-shadow);
}
html body.afix-compact :is(.panel-heading, .dispatch-pane-title,
  .inspector-header, .calendar-caption, .map-toolbar, .inspector-section-title):not(:where(.manager-screen .office-appliance-card *)) {
  background: var(--afix-surface-muted); color: var(--afix-text);
  border-color: var(--afix-border); box-shadow: none;
}
html body.afix-compact :is(.panel-heading h2, .inspector-section-title h3) {
  font-weight: 650; letter-spacing: 0;
}
html body.afix-compact :is(.topbar, .workflow-header, .dispatch-toolbar) {
  background: var(--afix-surface); border-color: var(--afix-border);
  box-shadow: 0 1px 0 var(--afix-border);
}
html body.afix-compact .page-wrap { padding: 18px; }
html body.afix-compact .page-heading { gap: 16px; margin-bottom: 16px; }
html body.afix-compact .page-heading h1 { font-size: 26px; font-weight: 650; }
html body.afix-compact .page-heading p { font-size: 14px; }
html body.afix-compact :is(.content-grid, .module-grid, .metric-grid) { gap: 12px; }
html body.afix-compact .panel-heading { padding: 10px 14px; gap: 12px; }
html body.afix-compact :is(.metric-card, .module-card) { padding: 14px; }
html body.afix-compact .filter-bar { gap: 8px; padding: 12px; margin-bottom: 12px; }
html body.afix-compact .form-panel { padding: 0 16px 16px; }
html body.afix-compact .form-section { gap: 20px; padding: 16px 0; }
html body.afix-compact .form-grid { gap: 10px; }
html body.afix-compact .form-actions { gap: 8px; padding-top: 14px; flex-wrap: wrap; }

/* This baseline deliberately excludes checkbox/radio/range/file controls,
   spreadsheet inputs and save buttons, whose dimensions/states are local. */
html body.afix-compact :is(.page-wrap, .dispatch-dialog, .security-card,
  .shared-login-card) :is(input:not([type]), input[type="text"],
  input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="search"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input[type="url"],
  select, textarea):not([aria-invalid="true"]):not(.error):not(.invalid) {
  min-height: var(--afix-control-height); border: 1px solid var(--afix-input-border);
  border-radius: var(--afix-control-radius); background: var(--afix-field);
  color: var(--afix-text);
  font-family: var(--afix-font); box-shadow: none;
}
html body.afix-compact :is(.form-grid, .stacked-form, .filter-bar) > label >
  :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea) { padding: 6px 9px; }
html body.afix-compact :is(.page-wrap, .dispatch-dialog, .security-card,
  .shared-login-card) :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--afix-accent); outline-offset: 2px;
}
html body.afix-compact :is(input, textarea):not(:where(.manager-screen .office-appliance-card *))::placeholder {
  color: var(--afix-muted); opacity: 1;
}
html body.afix-compact :is(.page-wrap, .dispatch-dialog, .security-card,
  .shared-login-card) :is(input, select, textarea):disabled {
  opacity: .65; cursor: not-allowed;
}
html body.afix-compact :is(.button, .dispatch-dialog footer button):not([data-save-state]) {
  min-height: var(--afix-control-height); padding: 5px 9px;
  border-radius: var(--afix-control-radius); font-size: 12px; font-weight: 500;
  line-height: 1.45; box-shadow: none;
}
html body.afix-compact .button:is(.secondary, .ghost) {
  background: var(--afix-field); color: var(--afix-text);
  border: 1px solid var(--afix-input-border);
}
html body.afix-compact .button.danger-text {
  color: var(--afix-danger); border-color: var(--afix-danger);
}
html body.afix-compact .button.primary:not(:disabled):not([aria-disabled="true"]):not([data-save-state]) {
  background: var(--afix-primary); color: var(--afix-on-primary);
}
/* Filled actions have a paired foreground token in every scheme. */
html body.afix-compact :is(.next-actions, .next-dialog) button.next-primary,
html body.afix-compact :is(.customer-delivery-office, .customer-office-dialog,
  .direct-delivery-dialog, .direct-delivery-profile) button[type="submit"],
html body.afix-compact .technician-document-upload button,
html body.afix-compact .payroll-lifecycle-flow span.active {
  background: var(--afix-primary); color: var(--afix-on-primary);
}
html body.afix-compact .service-area-map-background-control button[aria-pressed="true"],
html body.afix-compact .service-area-map-wrap .service-area-map-expand.active {
  background: var(--afix-primary); color: var(--afix-on-primary);
}
html body.afix-compact .button:not(:disabled):not([aria-disabled="true"]):focus-visible,
html body.afix-compact summary:focus-visible:not(:where(.manager-screen .office-appliance-card *)) {
  outline: 2px solid var(--afix-accent); outline-offset: 2px;
}
html body.afix-compact .button:is(.secondary, .ghost):hover:not(:disabled) {
  background: var(--afix-surface-muted);
}
html body.afix-compact .global-search {
  border: 1px solid var(--afix-input-border); border-radius: var(--afix-control-radius);
  background: var(--afix-field); box-shadow: none;
}
html body.afix-compact .global-search input { background: transparent; border: 0; }

/* Standard report/list tables only; queue and Parts column sizing is untouched. */
html body.afix-compact .data-table { font-size: 13px; }
html body.afix-compact .data-table th {
  padding: 8px 10px; font-size: 11px; font-weight: 650;
  background: var(--afix-surface-muted); color: var(--afix-muted);
  border-color: var(--afix-border);
}
html body.afix-compact .data-table td { padding: 8px 10px; border-color: var(--afix-border); }
html body.afix-compact .data-table tbody tr:hover { background: var(--afix-surface-muted); }
html body.afix-compact :is(.tab-bar, .form-section, .region-list div) { border-color: var(--afix-border); }

/* Native dialogs retain their top-layer, focus and close behavior. */
html body.afix-compact dialog:not(.office-navigation) {
  color: var(--afix-text); background: var(--afix-surface);
  border: 1px solid var(--afix-border); border-radius: var(--afix-radius);
  box-shadow: var(--afix-shadow-raised);
}
html body.afix-compact dialog::backdrop { background: #101c2c66; }
html body.afix-compact .office-navigation {
  --drawer-ink: var(--afix-text); --drawer-muted: var(--afix-muted);
  --drawer-surface: var(--afix-surface); --drawer-line: var(--afix-border);
  --drawer-hover: var(--afix-accent-soft); --drawer-blue: var(--afix-accent);
  box-shadow: var(--afix-shadow-raised);
}
html body.afix-compact .office-navigation .office-navigation-header { padding: 18px 16px 12px; }
html body.afix-compact .office-navigation .office-navigation-link {
  min-height: 38px; padding: 7px 10px; font-size: 14px; gap: 10px;
}

/* SuperUser and administration keep their destination/permission boundaries. */
html body.afix-compact.superuser-screen {
  --su-background: var(--afix-canvas); --su-surface: var(--afix-surface);
  --su-text: var(--afix-text); --su-muted: var(--afix-muted);
  --su-line: var(--afix-border); --su-hover: var(--afix-surface-muted);
  --su-focus: var(--afix-accent);
}
html body.afix-compact .superuser-heading { margin-bottom: 16px; }
html body.afix-compact .superuser-heading h1 { font-size: 26px; }
html body.afix-compact .superuser-groups { gap: 12px; }
html body.afix-compact .superuser-rows { border-radius: var(--afix-radius); }
html body.afix-compact .superuser-row { min-height: 60px; padding: 10px 12px; }
html body.afix-compact .superuser-location { margin-bottom: 14px; }
html body.afix-compact .superuser-return { min-height: var(--afix-control-height); }
html body.afix-compact .settings-workspace {
  --settings-surface: var(--afix-surface); --settings-text: var(--afix-text);
  --settings-muted: var(--afix-muted); --settings-border: var(--afix-border);
  --settings-blue: var(--afix-accent); --settings-tint: var(--afix-surface-muted);
}
html body.afix-compact .settings-card { padding: 14px; border-radius: var(--afix-radius); }
html body.afix-compact .settings-card h3 { font-size: 15px; }
html body.afix-compact .settings-heading { margin-bottom: 16px; }
html body.afix-compact .settings-row { padding: 12px 14px; }
html body.afix-compact .settings-fields > div { padding: 10px 14px; }
html body.afix-compact .technician-settings-panel { background: var(--afix-surface); }
html body.afix-compact .technician-settings-heading { padding: 14px 20px; }
html body.afix-compact .technician-settings-content { gap: 12px; }
html body.afix-compact .technician-settings-grid { gap: 12px 16px; }
html body.afix-compact .warehouse-support { padding: 12px; margin-block: 12px; }
html body.afix-compact :is(.warehouse-queue, .warehouse-detail) {
  padding: 12px; background: var(--afix-surface); border-color: var(--afix-border);
}

html body.afix-compact :is(.security-card, .shared-login-card) { padding: 22px; }
html body.afix-compact .security-card :is(h1, h2) { letter-spacing: -.02em; }
html body.afix-compact .security-card p { line-height: 1.5; }
/* Staff payment shell only; Stripe-owned fields/frames are deliberately not styled. */
html body.afix-compact .moto-card {
  background: var(--afix-surface); color: var(--afix-text);
  border-color: var(--afix-border); border-radius: var(--afix-radius);
  box-shadow: var(--afix-shadow);
}

@media (max-width: 700px) {
  html body.afix-compact .page-wrap { padding: 12px; }
  html body.afix-compact .page-heading { flex-wrap: wrap; }
  html body.afix-compact .filter-bar { flex-wrap: wrap; }
  html body.afix-compact .filter-bar label { min-width: min(180px, 100%); }
  html body.afix-compact .form-section { gap: 12px; }
}
@media (pointer: coarse) {
  html body.afix-compact .office-navigation .office-navigation-link { min-height: 44px; }
  html body.afix-compact :is(.page-wrap, .dispatch-dialog, .security-card,
    .shared-login-card) :is(input, select, textarea) { font-size: 16px; }
}
@media (forced-colors: active) {
  html body.afix-compact :is(.panel, .dispatch-panel, .inspector-block,
    .security-card, .shared-login-card, dialog) { border-color: CanvasText; }
}

/* General Work Order notes, not appliance Notes/Diagnosis. Workspaces render
   this composer outside .page-wrap, so it needs the same explicit field skin. */
html body.afix-compact :is(.quick-note[data-note-form], .office-notes-panel .note-composer) textarea[name="body"] {
  box-sizing: border-box; width: 100%; min-width: 0;
  min-height: 44px; height: 44px; padding: 6px 9px;
  border-radius: var(--afix-control-radius); font: 500 13px/1.45 var(--afix-font);
  resize: vertical;
}
html body.afix-compact :is(.quick-note[data-note-form], .office-notes-panel .note-composer) textarea[name="body"]:not([aria-invalid="true"]):not(.error):not(.invalid) {
  border: 1px solid var(--afix-input-border);
  background: var(--afix-field); color: var(--afix-text); box-shadow: none;
}
html body.afix-compact :is(.quick-note[data-note-form], .office-notes-panel .note-composer) textarea[name="body"]:focus-visible {
  outline: 2px solid var(--afix-accent); outline-offset: 2px;
}
html body.afix-compact :is(.quick-note[data-note-form], .office-notes-panel .note-composer) textarea[name="body"]:disabled {
  opacity: .65; cursor: not-allowed;
}
@media (pointer: coarse) {
  html body.afix-compact :is(.quick-note[data-note-form], .office-notes-panel .note-composer) textarea[name="body"] {font-size: 16px;}
}

/* September29: readable Office text, including components with local palettes.
   Foregrounds only: do not restyle surfaces, geometry, font metrics, semantic
   colors or disabled states. Field never receives the afix-compact skin. */
html body.afix-compact .dp-workspace {
  --dp-text: var(--afix-text); --dp-muted: var(--afix-muted);
  --dp-bg: var(--afix-surface); --dp-soft: var(--afix-field);
  --dp-line: var(--afix-border); --dp-blue: var(--afix-accent);
  --dp-selected: var(--afix-message-outgoing);
}
html body.afix-compact .dispatch-communications {
  --dc-ink: var(--afix-text); --dc-muted: var(--afix-muted);
}
html body.afix-compact .dc-milestone { color: var(--afix-quiet); }
html body.afix-compact .phone-media {
  --pm-text: var(--afix-text); --pm-muted: var(--afix-muted);
  --pm-bg: var(--afix-surface); --pm-soft: var(--afix-field);
  --pm-line: var(--afix-border); --pm-accent: var(--afix-accent);
}
html body.afix-compact.manager-screen :is(.manager-client-card, .manager-recall-card) {
  --client-text: var(--afix-text); --client-label: var(--afix-muted);
  --client-heading: var(--afix-muted); --client-primary: var(--afix-muted);
  --client-muted: var(--afix-muted);
  --client-card-bg: var(--afix-surface); --client-title-bg: var(--afix-surface);
  --client-line: var(--afix-rule); --client-link: var(--afix-accent);
  --client-control-bg: var(--afix-field); --client-control-border: var(--afix-input-border);
  --client-status-bg: var(--afix-field); --client-focus-bg: var(--afix-field);
  --client-focus: var(--afix-accent);
}
/* The owner included all Office text in this amendment. Keep the protected
   Parts Card/Table layout and color-coded availability/approval unchanged. */
html body.afix-compact .office-appliance-card,
html body.afix-compact.manager-screen .office-appliance-card {
  /* Preserve the accepted island's inherited metrics when the Office body
     adopts the14px reference. Parts controls still own their explicit sizes. */
  font-size: 15px; line-height: normal;
  --ink: var(--afix-text); --muted: var(--afix-muted);
  --oc-text: var(--afix-text); --oc-muted: var(--afix-muted);
  --apv2-text: var(--afix-text); --apv2-muted: var(--afix-muted);
  --dispatch-ink: var(--afix-text);
  /* Neutral shells only. Part Card/Table dimensions and state fills are owned
     by office_parts_theme.css; do not change their tracks or font metrics. */
  --apv2-card: var(--afix-surface); --apv2-heading: var(--afix-surface);
  --oc-card: var(--afix-surface); --oc-head: var(--afix-surface);
}
html body.afix-compact .authorization-workbench {
  --auth-ink: var(--afix-text); --auth-muted: var(--afix-muted);
  --auth-panel: var(--afix-surface); --auth-soft: var(--afix-field);
  --auth-border: var(--afix-border); --auth-accent: var(--afix-accent);
}
html body.afix-compact .parts-manager {
  --pm-navy: var(--afix-text); --pm-muted: var(--afix-muted);
  --pm-line: var(--afix-border); --pm-surface: var(--afix-surface);
  --pm-blue: var(--afix-accent); --pm-blue-dark: var(--afix-primary);
}
html body.afix-compact .payroll-workspace {
  --payroll-ink: var(--afix-text); --payroll-muted: var(--afix-muted);
  --payroll-surface: var(--afix-surface); --payroll-soft: var(--afix-field);
  --payroll-line: var(--afix-border); --payroll-accent: var(--afix-accent);
}
/* Explicit Office selection wins over OS preference; Field's legacy report
   remains outside this body-qualified rule. */
html body.afix-compact .performance-workspace:not([data-office-performance]) {
  --text-color: var(--afix-text); --muted-color: var(--afix-muted);
  --panel-bg: var(--afix-surface); --border-color: var(--afix-border);
}
html body.afix-compact .portal-triage {
  --triage-ink: var(--afix-text); --triage-muted: var(--afix-muted);
  --triage-surface: var(--afix-surface); --triage-tint: var(--afix-field);
  --triage-line: var(--afix-border); --triage-link: var(--afix-accent);
}
html body.afix-compact :is(.office-documents, .office-documents-dialog) {
  --office-doc-text: var(--afix-text); --office-doc-muted: var(--afix-muted);
  --office-doc-bg: var(--afix-surface); --office-doc-card: var(--afix-field);
  --office-doc-title: var(--afix-surface); --office-doc-line: var(--afix-border);
  --office-doc-blue: var(--afix-accent);
}
html body.afix-compact :is(.office-recall-summary, .office-recall-dialog) {
  --recall-text: var(--afix-text); --recall-muted: var(--afix-muted);
  --recall-bg: var(--afix-surface); --recall-soft: var(--afix-field);
  --recall-line: var(--afix-border); --recall-blue: var(--afix-accent);
}
html body.afix-compact .office-invoice-dialog {
  --invoice-text: var(--afix-text); --invoice-muted: var(--afix-muted);
  --invoice-bg: var(--afix-surface); --invoice-soft: var(--afix-field);
  --invoice-line: var(--afix-border);
}
html body.afix-compact .office-payment-dialog {
  --pay-text: var(--afix-text); --pay-muted: var(--afix-muted);
  --pay-bg: var(--afix-surface); --pay-soft: var(--afix-field);
  --pay-line: var(--afix-border);
}
html body.afix-compact .remote-estimate-dialog {
  --remote-text: var(--afix-text); --remote-muted: var(--afix-muted);
  --remote-bg: var(--afix-surface); --remote-soft: var(--afix-field);
  --remote-line: var(--afix-border);
}
html body.afix-compact .office-insurance-dialog {
  --ig-ink: var(--afix-text); --ig-muted: var(--afix-muted);
  --ig-surface: var(--afix-surface); --ig-line: var(--afix-border);
  --ig-link: var(--afix-accent);
}
html body.afix-compact .scheduling-preview {
  --preview-ink: var(--afix-text); --preview-muted: var(--afix-muted);
  --preview-surface: var(--afix-surface); --preview-border: var(--afix-border);
}
html body.afix-compact .manager-reassign-dialog {
  --reassign-muted: var(--afix-muted); --reassign-surface: var(--afix-surface);
  --reassign-line: var(--afix-border); --reassign-accent: var(--afix-accent);
}
html body.afix-compact .manager-reassign-dialog .manager-reassign-confirm {
  background: var(--afix-primary); color: var(--afix-on-primary);
  border-color: var(--afix-primary);
}
/* Body-appended/lazy dialogs are outside .page-wrap. Their named palette
   ownership must also beat the legacy global dark input rule, including focus.
   No dimensions, invalid/danger cues, disabled state or form authority change. */
html body.afix-compact :is(.office-documents-dialog, .office-recall-dialog,
  .office-invoice-dialog, .office-payment-dialog, .remote-estimate-dialog,
  .manager-reassign-dialog, .scheduling-preview, .authorization-workbench)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
    select, textarea):not([aria-invalid="true"]):not(.error):not(.invalid):not(:where(.office-appliance-card *)) {
  background: var(--afix-field); color: var(--afix-text);
  border-color: var(--afix-input-border);
}
html body.afix-compact :is(.office-documents-dialog, .office-recall-dialog,
  .office-invoice-dialog, .office-payment-dialog, .remote-estimate-dialog) button.primary,
html body.afix-compact .office-payment-types button[aria-pressed="true"],
html body.afix-compact .authorization-workbench button.auth-primary,
html body.afix-compact :is(.auth-segments, .auth-outcomes) input:checked + span {
  background: var(--afix-primary); color: var(--afix-on-primary);
  border-color: var(--afix-primary);
}
html body.afix-compact :is(.office-invoice-dialog, .office-payment-dialog,
  .remote-estimate-dialog) a {
  color: var(--afix-accent);
}
html body.afix-compact .wo-history-dialog {
  --history-muted: var(--afix-muted); --history-surface: var(--afix-surface);
  --history-line: var(--afix-border); --history-accent: var(--afix-accent);
}
html body.afix-compact dialog.action-confirmation {
  --reauth-ink: var(--afix-text); --reauth-muted: var(--afix-muted);
  --reauth-surface: var(--afix-surface); --reauth-line: var(--afix-border);
  --reauth-link: var(--afix-accent);
}
html body.afix-compact.account-security {
  --security-muted: var(--afix-muted); --security-border: var(--afix-border);
  --security-link: var(--afix-accent);
}
html body.afix-compact:is(.shared-login, .afix-login) {
  --login-text: var(--afix-text); --login-secondary: var(--afix-muted);
  --login-page: var(--afix-canvas); --login-surface: var(--afix-surface);
  --login-card: var(--afix-surface); --login-field: var(--afix-field);
  --login-input: var(--afix-field); --login-stroke: var(--afix-border);
  --login-line: var(--afix-input-border); --login-blue: var(--afix-accent);
  --login-accent: var(--afix-primary); --login-button: var(--afix-primary);
  --login-button-hover: var(--afix-primary);
  --login-soft: var(--afix-surface-muted);
}
html body.afix-compact :is(.shared-login-primary, .login-submit, .security-primary),
html body.afix-compact.account-security .security-card button[data-passkey-action],
html body.afix-compact.account-security .security-card button[type="submit"]:not(.security-secondary):not(.security-danger) {
  background: var(--afix-primary); color: var(--afix-on-primary);
  border-color: var(--afix-primary);
}
html body.afix-compact :is(.shared-login-primary, .login-submit, .security-primary):hover:not(:disabled),
html body.afix-compact.account-security .security-card button[data-passkey-action]:hover:not(:disabled),
html body.afix-compact.account-security .security-card button[type="submit"]:not(.security-secondary):not(.security-danger):hover:not(:disabled) {
  background: var(--afix-primary); color: var(--afix-on-primary);
  box-shadow: inset 0 0 0 1px var(--afix-on-primary);
}
html body.afix-compact {
  --moto-text: var(--afix-text); --moto-muted: var(--afix-muted);
  --moto-bg: var(--afix-canvas); --moto-surface: var(--afix-surface);
  --moto-soft: var(--afix-field); --moto-line: var(--afix-border);
  --moto-blue: var(--afix-accent); --moto-blue-hover: var(--afix-primary);
  --moto-blue-soft: var(--afix-accent-soft);
}
html body.afix-compact .moto-charge {
  background: var(--afix-primary); color: var(--afix-on-primary);
  border-color: var(--afix-primary);
}
html body.afix-compact .moto-spinner {
  border-color: color-mix(in srgb, var(--afix-on-primary) 42%, transparent);
  border-top-color: var(--afix-on-primary);
}
html body.afix-compact .warehouse-returns-workspace {
  --return-field: var(--afix-field);
}
/* These components have their own semantic palettes. Only their neutral
   surfaces/controls and descriptive type join the Office contract. */
html body.afix-compact .performance-workspace:not([data-office-performance]) a {
  color: var(--afix-accent);
}
html body.afix-compact .performance-workspace:not([data-office-performance]) button {
  background: var(--afix-field); color: var(--afix-accent);
  border-color: var(--afix-input-border);
}
html body.afix-compact :is(.account-menu-popover, .account-menu > summary) {
  background: var(--afix-surface); color: var(--afix-text);
  border-color: var(--afix-border);
}
html body.afix-compact .dp-workspace {
  font: var(--afix-font-body)/var(--afix-line-height) var(--afix-font);
}
html body.afix-compact .dp-event {
  padding: 0; border: 0; border-radius: 0; background: transparent;
  width: 100%; max-width: 100%; color: var(--afix-text);
}
html body.afix-compact .dp-event[data-direction="out"]:not([data-kind="call"]) {
  width: calc(100% - 32px); background: transparent;
}
html body.afix-compact .dp-message-body {
  padding: 10px 12px; border-radius: var(--afix-radius);
  background: var(--afix-message-incoming); font-size: var(--afix-font-body);
}
html body.afix-compact .dp-event[data-direction="out"] .dp-message-body {
  background: var(--afix-message-outgoing);
}
html body.afix-compact :is(.dp-workspace small, .dp-event time, .dp-event-meta,
  .dp-event summary, .dp-list-preview, .dp-list-reason, .dp-health,
  .dp-header p, .dp-milestone, .dp-context h4) {
  font-size: var(--afix-font-meta);
}
html body.afix-compact .dp-milestone { color: var(--afix-quiet); }
html body.afix-compact .dp-timeline { gap: 20px; overflow-anchor: none; }
html body.afix-compact .dp-day {
  display: flex; align-items: center; gap: 12px; text-align: center;
  color: var(--afix-muted); font-size: 12px; font-weight: 600;
}
html body.afix-compact .dp-day::before,
html body.afix-compact .dp-day::after { content: ""; flex: 1; min-width: 12px; height: 1px; background: var(--afix-rule); }
html body.afix-compact .dp-milestone-label { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; }
html body.afix-compact .dp-event header {
  font-size: var(--afix-font-label); align-items: center; justify-content: flex-start;
}
html body.afix-compact .dp-event header strong { font-weight: 600; }
html body.afix-compact .dp-event header time { margin-left: auto; white-space: nowrap; }
html body.afix-compact .dp-event-result { color: var(--afix-muted); }
html body.afix-compact .dp-event-result::before { content: "·"; margin-right: 8px; }
html body.afix-compact .dp-status-attention { color: var(--afix-danger); }
html body.afix-compact .dp-event details { margin-top: 6px; }
html body.afix-compact .dp-event summary { color: var(--afix-accent); }
html body.afix-compact .dp-event dd { white-space: pre-wrap; overflow-wrap: anywhere; }
html body.afix-compact .office-activity-icon:not(:where(.dispatch-communications *)) { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
html body.afix-compact .office-activity-icon:not(:where(.dispatch-communications *)) svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body.afix-compact .office-activity-icon:not(:where(.dispatch-communications *)) .dc-direction { width: 13px; height: 13px; }
html body.afix-compact .dp-event header .office-activity-icon { color: var(--afix-accent); }
html body.afix-compact .dp-workspace :is(input, select, textarea),
html body.afix-compact .performance-screen .performance-field :is(input, select) {
  background: var(--afix-field); color: var(--afix-text);
  border-color: var(--afix-input-border);
}
/* Named legacy control groups: neutral palette only. Their submit authority,
   danger/disabled/save states and local grid dimensions remain unchanged. */
html body.afix-compact :is(.office-action-form, .billing-action-dock,
  .manager-financial-form, .manager-recall-card, .parts-order-search)
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not([aria-invalid="true"]),
html body.afix-compact :is(.billing-action-dock [data-billing-action],
  .billing-action-dock [data-billing-review], .billing-action-dock [data-billing-reason-cancel],
  .office-action-buttons button:not(.danger)) {
  background: var(--afix-field); color: var(--afix-text);
  border-color: var(--afix-input-border);
}
html body.afix-compact :is(.office-billing-guidance, .office-billing-note,
  .billing-action-dock .billing-action-hint, .office-action-form > label > span,
  .parts-manager-tabs a, .parts-order-queue nav > button small) {
  color: var(--afix-muted);
}
html body.afix-compact :is(.staff-profile-grid dt, .admin-card-header p,
  .admin-hero p, .admin-table small) { font-size: var(--afix-font-meta); }
html body.afix-compact .staff-profile-grid dd { font-size: var(--afix-font-body); }
html body.afix-compact .admin-card-header { border-color: var(--afix-rule); }
html body.afix-compact .admin-table { font-size: 13px; }
html body.afix-compact :is(.admin-table th, .admin-filter label>span, .admin-form label>span) {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
html body.afix-compact .admin-table td.row-actions { display: table-cell; text-align: right; }
html body.afix-compact .admin-table td.row-actions > * { display: inline-flex; margin: 2px; }
html body.afix-compact .admin-filter:has(>label):not(:has(>label~label)) {
  grid-template-columns: minmax(0,1fr) auto;
}
html body.afix-compact .admin-filter:has(>label):not(:has(>label~label)) .button { grid-column: auto; }
html body.afix-compact :is(.admin-tabs a.active, .parts-manager-tabs a.active) {
  background: var(--afix-accent-soft); color: var(--afix-accent); box-shadow: none;
}
html body.afix-compact .parts-order-queue nav > button.active {
  background: var(--afix-accent-soft); box-shadow: inset 3px 0 var(--afix-accent);
}
html body.afix-compact .parts-order-queue nav > button strong { color: var(--afix-accent); }
html body.afix-compact .office-action-card { background-color: var(--afix-surface) !important; }
html body.afix-compact :is(input, textarea)::placeholder {
  color: var(--afix-muted); opacity: 1;
}
html body.afix-compact .performance-workspace:not([data-office-performance]) :is(input,textarea)::placeholder {
  color: var(--muted-color);
}
html body.afix-compact.manager-screen :is(.manager-filter-popover, .manager-queue-column-head) > input::placeholder {
  color: var(--afix-muted); opacity: 1;
}
html body.afix-compact.dispatch-screen:not(.manager-screen) :is(.dispatch-filter-popover, .queue-search-wrap) input::placeholder,
html body.afix-compact .dispatch-dialog:not(.create-work-order-dialog) :is(input,textarea)::placeholder,
html body.afix-compact :is(.barcode-input-row, .storage-search, .warehouse-station) input::placeholder {
  color: var(--afix-muted); opacity: 1;
}

/* Legacy neutral labels that predate the shared palette. State-colored copy,
   white-on-color badges and the calendar's transparent date input stay local. */
html body.afix-compact :is(.eyebrow, kbd, .metric-card small,
  .identity-contacts div span, .info-grid div span, .assignment > span,
  .filter-bar label > span, .form-grid label > span, .stacked-form label > span,
  .stacked-form p label, .scanner-bar label > span, .account-menu-popover small,
  .open-day, .stock-summary, .stock-unit small, .stock-pull-info small, .stock-empty) {
  color: var(--afix-muted);
}
html body.afix-compact .workflow-header :is(.account-menu-section-title,
  .account-menu-section :is(a,button) > small, .workflow-header-office label > span) {
  color: var(--afix-muted);
}
html body.afix-compact .workflow-header-office select { color: var(--afix-text); }
html body.afix-compact.dispatch-screen:not(.manager-screen) :is(
  .calendar-corner, .calendar-time, .calendar-date:not(.day-off) > span,
  .dispatch-pane-title > span, .calendar-caption > span,
  .map-toolbar > div:first-child > span, .inspector-section-title > span,
  .inspector-disclosure > span, .inspector-disclosure > i,
  .section-title-actions small, .action-subtitle span, .appliance-save-status,
  .work-order-search-summary, .work-order-search-result-heading i,
  .work-order-search-results > button > small, .work-order-search-results > button > em) {
  color: var(--afix-muted);
}
html body.afix-compact.dispatch-screen:not(.manager-screen) .calendar-date:not(.day-off) {
  color: var(--afix-text);
}
html body.afix-compact.manager-screen :is(.manager-office-form label > span,
  .manager-filter-actions small, .manager-filter-no-options,
  .manager-filter-date-preset, .manager-filter-date-range label,
  .manager-financial-title-actions small, .manager-financial-form > label > span,
  .manager-money-input i, .manager-dealer-total, .manager-parts-summary > span,
  .manager-parts-summary small, .manager-payment-head span, .manager-payment-list > p,
  .documents-block .document-card span, .manager-photo-viewer [data-photo-position],
  .manager-photo-viewer > footer span, .manager-empty-state, .manager-parts-empty,
  .manager-notes-pane .dispatch-notes > p, .compact-documents > p,
  .manager-tax-summary .manager-ledger-label > small,
  .manager-ledger-money > i:not(:where(.manager-ledger-total *))) {
  color: var(--afix-muted);
}
html body.afix-compact.manager-screen .dispatch-notes article .note-meta {
  color: var(--afix-muted) !important;
}
html body.afix-compact.manager-screen :is(.manager-filter-popover > input,
  .manager-filter-option, .manager-filter-date-preset select, .manager-filter-date-range input,
  .manager-office-form select, .manager-money-input input, .manager-financial-form output) {
  color: var(--afix-text);
}
html body.afix-compact.manager-screen .manager-job { color: var(--afix-text) !important; }
html body.afix-compact.manager-screen .office-parts-table
  .marcone-reference:not(button:not(:disabled)):not([data-state="in-stock"]),
html body.afix-compact.manager-screen .office-parts-table .marcone-reference-replacement,
html body.afix-compact.manager-screen .office-parts-table
  .marcone-reference:not([data-lookup-checked="true"]) .marcone-mark {
  color: var(--afix-muted);
}

/* Neutral panels share the reference's PANEL, not its CANVAS or FIELD.
   September30 supersedes the old Parts-colored-panel amendment. Explicit
   selectors retain local layout ownership; protected Parts is not reskinned.
   Queues, table cells, alerts, status chips, SMS bubbles and media stages keep
   their semantic fills. Important is limited to these named neutral surfaces
   because legacy Manager/Dispatch themes also mark panel fills important. */
html body.afix-compact :is(
  .panel, .metric-card, .module-card, .tech-job-card,
  .dispatch-panel, .inspector-block, .panel-heading, .dispatch-pane-title,
  .inspector-header, .calendar-caption, .map-toolbar, .inspector-section-title,
  .manager-customer-card, .manager-client-card, .manager-client-title,
  .customer-info-title, .customer-information-surface, .customer-bottom-actions,
  .manager-financial-card, .manager-recall-card:not(.needs-review), .manager-save-bar,
  .manager-payment-head, .manager-payment-list,
  .manager-notes-pane, .office-notes-panel, .notes-block, .manager-notes-body,
  .dispatch-notes, .quick-note, .note-composer,
  .documents-block, .document-grid,
  .manager-photo-viewer, .manager-photo-viewer > header, .manager-photo-viewer > footer,
  .route-summary, .route-summary-title, .route-summary-body,
  .create-work-order-scroll, .create-work-order-section, .create-work-order-section > h3,
  .dispatch-communications, .dc-header, .dc-scope-status, .dc-composer,
  .dc-permission-body, .dc-panel,
  .dp-dialog, .dp-header, .dp-list-pane, .dp-chat, .dp-thread-heading,
  .dp-context, .dp-composer, .dp-sms-permission,
  .admin-hero, .admin-metric, .admin-card, .admin-card-header, .admin-card-body,
  .admin-tabs, .staff-sections, .compact-dialog, .payroll-inline-action > form, .payroll-row-menu > form,
  .settings-card:not(:hover), .settings-panel, .settings-fields,
  .superuser-rows, .technician-settings-panel, .technician-panel, .technician-profile-empty,
  .warehouse-queue, .warehouse-detail, .warehouse-support,
  .warehouse-scan-card, .warehouse-camera, .warehouse-print-panel,
  .warehouse-return-panel, .return-handoff-panel,
  .parts-manager-tabs, .parts-order-queue, .parts-order-queue > header, .parts-overview,
  .parts-overview > summary:not(:hover), .parts-overview-appliance > header,
  .receive-workspace, .camera-card, .storage-panel, .pending-shelf-panel,
  .storage-import-panel, .storage-office-filters, .stock-dialog, .stock-pull-row,
  .triage-card, .performance-card,
  .office-documents, .office-documents-title,
  .authorization-card, .auth-queue, .auth-page-heading, .auth-queue-heading,
  .auth-case-heading, .auth-appliance, .auth-appliance > summary, .auth-appliance h4,
  .auth-action-dock, .auth-customer-scroll > .authorization-card > h3,
  .auth-customer-scroll > .auth-disclosure > summary,
  .office-payment-dialog, .office-invoice-dialog, .office-documents-dialog,
  .office-recall-dialog, .remote-estimate-dialog, .office-insurance-dialog,
  .manager-reassign-dialog, .auth-changes-dialog, .authorization-canvas-dialog,
  .storage-manual-dialog, .supplier-order-dialog, .customer-office-dialog, .wo-history-dialog,
  .security-card, .shared-login-card, .moto-card, dialog
):not(:where(.office-appliance-card, .office-appliance-card *,
  button, input, select, textarea, .button, [role="button"])) {
  background-color: var(--afix-panel-background) !important;
}
/* Notes have their own opaque row fill in the legacy Dispatch theme. */
html body.afix-compact .dispatch-notes > article:not(:where(.office-appliance-card *)) {
  background-color: var(--afix-panel-background) !important;
}
/* Component-specific completion of the Office controls contract. Native
   pickers, spreadsheet cells and semantic state colors keep their own rules. */
html body.afix-compact :is(.stock-toolbar, .direct-delivery-filters,
  .storage-filters, .storage-search, .incoming-filters, .admin-filter)
  :is(input:not([type=checkbox]):not([type=radio]), select, button) {
  min-height: var(--afix-control-height); font: 500 13px/1.4 var(--afix-font);
}
html body.afix-compact .storage-unit-office { display: block; margin-top: 3px; color: var(--afix-muted); }
html body.afix-compact .office-delivery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
html body.afix-compact .office-delivery-tabs > * {
  display: inline-flex; align-items: center; min-height: var(--afix-control-height);
  padding: 5px 12px; border: 1px solid var(--afix-border); border-radius: 6px;
  color: var(--afix-text); background: var(--afix-surface); text-decoration: none;
  font-size: 13px;
}
html body.afix-compact .office-delivery-tabs > [aria-current=page] {
  background: var(--afix-accent-soft); color: var(--afix-accent); font-weight: 600;
}
html body.afix-compact .calendar-date-picker { position: relative; display: inline-flex; width: 32px; height: var(--afix-control-height); flex: 0 0 32px; }
html body.afix-compact .calendar-date-picker svg { width: 18px; height: 18px; position: absolute; inset: 0; margin: auto; fill: none; stroke: var(--afix-text); stroke-width: 1.7; pointer-events: none; }
html body.afix-compact .calendar-date-picker input {
  box-sizing: border-box; width: 100%; height: 100%; min-width: 0;
  color: transparent; -webkit-text-fill-color: transparent; background: transparent;
  border: 1px solid var(--afix-input-border); border-radius: 6px; cursor: pointer;
}
html body.afix-compact .calendar-date-picker input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; }
html body.afix-compact .calendar-date-picker input:focus-visible { outline: 2px solid var(--afix-accent); outline-offset: 2px; }
@media(pointer:coarse) { html body.afix-compact .calendar-date-picker { width: 44px; flex-basis: 44px; } }