/* Workspace components. Shared tokens keep light/dark and density consistent. */
:root { --workspace-gap: 12px; --workspace-surface: #fff; --workspace-border: #ced8e5; --workspace-muted: #526176; --workspace-focus: #195ed6; }
body.dark-mode { --workspace-surface: #1e2d3d; --workspace-border: #51667d; --workspace-muted: #c2cddd; --workspace-focus: #a9ccff; }
/* The ring must survive legacy component rules that remove outlines. */
body :focus-visible { outline: 3px solid var(--workspace-focus) !important; outline-offset: 3px; }
.workspace-actions { position: relative; }
.workspace-actions > summary, .workspace-filter-panel > summary { padding: 10px 14px; min-height: 42px; border: 1px solid var(--workspace-border); border-radius: 6px; background: var(--workspace-surface); cursor: pointer; font-weight: 600; white-space: normal; }
.workspace-actions-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(470px, 85vw); padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; background: var(--workspace-surface); border: 1px solid var(--workspace-border); border-radius: 10px; box-shadow: 0 8px 24px #13223526; z-index: 50; }
/* Quick Tools: a heading starts each group; each tool shows a one-line hint beside it (below it on phones). */
.workspace-actions > summary { position: relative; }
.workspace-actions > summary .notification-badge { top: -8px; right: -8px; }
.workspace-actions-panel, body.overview-density .workspace-actions-panel { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); align-items: center; gap: 8px 12px; width: min(480px, calc(100vw - 24px)); padding: 14px; }
.workspace-actions-panel > * { grid-column: 1 / -1; min-width: 0; }
.workspace-actions-panel > button { grid-column: 1; justify-self: stretch; text-align: left; min-height: 44px; }
.workspace-actions-panel > .quick-tool-hint { grid-column: 2; color: var(--workspace-muted); font-size: 13px; line-height: 1.35; }
.workspace-actions-panel > .quick-tools-heading { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--workspace-border); color: var(--workspace-muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.workspace-actions-panel > .quick-tools-heading:first-child, .workspace-actions-panel > .quick-tools-heading.first-visible { margin-top: 0; padding-top: 0; border-top: 0; }
/* Skip link: first Tab stop, visible only when focused. */
.skip-link { position: absolute; left: 8px; top: -80px; z-index: 3000; padding: 10px 14px; border-radius: 6px; background: var(--workspace-surface); color: var(--workspace-focus); font-weight: 800; text-decoration: none; box-shadow: 0 6px 18px #13223540; }
.skip-link:focus { top: 8px; }
body #workspaceMain:focus-visible, body #pageTitle:focus-visible { outline: none !important; }
/* Cards clip overflow, so focus rings inside them are drawn inset rather than cut off. */
body .order-card :focus-visible, body .compact-order-row :focus-visible { outline-offset: -3px; }
/* Dark mode: selected toggles use light brand blue, so their text must be dark (was white, 2:1). */
body.dark-mode .secondary.selected, body.dark-mode .view-mode-buttons .selected, body.dark-mode .card-detail-toggle button.active { color: #0b1a2b; }
/* Larger hit areas without changing row layout (WCAG 2.5.8; warehouse tablets). */
.mini-edit::after, #ordersTable [data-quick]::after { content: ""; position: absolute; inset: -8px -6px; }
dialog header button[aria-label="Close dialog"], dialog header button[aria-label="Close"] { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
/* Row links sit on tinted rows; the brand blue at 12px fell to ~4.2:1. */
body:not(.dark-mode) .mini-edit { color: #1557c0; }
body:not(.dark-mode) .assembly-day-summary { color: #4b5565; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Selection bar: Finish and Cancel stay on screen while a Quick Tools selection mode is active. */
.action-mode-bar { position: fixed; z-index: 1500; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(680px, calc(100vw - 32px)); padding: 8px 10px 8px 14px; background: var(--workspace-surface); color: var(--text, #17202a); border: 1px solid var(--workspace-border); border-radius: 10px; box-shadow: 0 8px 24px #13223540; }
.action-mode-bar .action-mode-hint, .action-mode-bar .action-mode-hint.is-visible { position: static; flex: 1 1 auto; width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; opacity: 1; visibility: visible; transform: none; transition: none; pointer-events: auto; font-size: 13px; font-weight: 700; }
.action-mode-bar button { min-height: 44px; white-space: nowrap; }
/* Disabled Finish ("Print 0 slips") must not look actionable; its border keeps >= 3:1 against the bar. */
.action-mode-bar button:disabled, .action-mode-bar button:disabled:hover { background: #e9edf2; border: 1px solid #6b7684; color: #4b5563; cursor: not-allowed; box-shadow: none; opacity: 1; }
body.dark-mode .action-mode-bar button:disabled, body.dark-mode .action-mode-bar button:disabled:hover { background: #2a3746; border-color: #8a9bb0; color: #b7c2cf; }
.action-mode-bar .action-mode-hint:focus-visible { outline-offset: 2px; }
body.dark-mode .action-mode-bar { color: #eef4fb; }
body.dark-mode .action-mode-bar .action-mode-hint { background: transparent; color: inherit; }
/* Change Status mode (Highland, 2026-10-13): "New status" picker and live count inside the selection bar. */
.action-mode-bar:has(#bulkStatusControls:not(.hidden)) { max-width: min(880px, calc(100vw - 32px)); }
#actionModeBar #bulkStatusControls { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
#actionModeBar #bulkStatusControls.hidden { display: none; }
#actionModeBar #bulkStatusControls label { font-size: 13px; font-weight: 700; white-space: nowrap; }
#actionModeBar #bulkStatusSelect { width: 180px; min-width: 0; height: 40px; min-height: 40px; margin: 0; grid-area: auto; }
#actionModeBar .bulk-status-count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#actionModeBar #bulkStatusMessage { flex-basis: 100%; padding: 0; color: var(--bad, #b42318); font-size: 12px; font-weight: 700; }
#actionModeBar #bulkStatusMessage:empty { display: none; }
.bulk-status-result { position: fixed; z-index: 1500; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: min(680px, calc(100vw - 32px)); margin: 0; padding: 10px 14px; border: 1px solid #257a52; border-radius: 10px; background: #eff9f3; color: #143d29; box-shadow: 0 8px 24px #13223540; font-size: 13px; font-weight: 700; }
.bulk-status-result:empty { display: none; }
.bulk-status-result.has-problem { border-color: #c79728; background: #fff7df; color: #503700; }
body.dark-mode .bulk-status-result { background: #234536; border-color: #4f9a74; color: #e3f5ea; }
body.dark-mode .bulk-status-result.has-problem { background: #493f2d; border-color: #c9a227; color: #f2e7c5; }
body.dark-mode #actionModeBar #bulkStatusMessage { color: #ffb3b3; }
.workspace-actions:not([open]) > .workspace-actions-panel, .workspace-filter-panel:not([open]) > .workspace-filter-options { display: none; }
.workspace-actions-panel .view-mode-buttons { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.workspace-actions-panel .overview-view-toggle, .workspace-actions-panel .card-detail-toggle { flex-wrap: wrap; max-width: 100%; }
.workspace-actions-panel button { min-height: 40px; white-space: normal; }
.workspace-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px; margin-top: 12px; background: var(--workspace-surface); border: 1px solid var(--workspace-border); border-radius: 10px; min-width: 0; }
.workspace-filters > .day-switcher { display: flex; flex: 0 1 360px; align-items: end; gap: 6px; min-width: 0; }
.workspace-filters .week-arrow-stack { display: flex; position: relative; }
.workspace-filters .date-filter-label { display: none; }
.workspace-filters .current-date-label { min-width: 0; flex: 1; white-space: normal; }
.workspace-filters > label.search { position: relative; display: block; flex: 1 1 230px; min-width: 160px; max-width: none; }
.workspace-filters button:not(:where(.search-clear, .search-suggestions *)), .workspace-filters input, .workspace-filters select, .workspace-filters summary { min-height: 42px; font-size: 14px; }
.workspace-filter-panel { position: relative; }
.workspace-filter-options { position: absolute; right: 0; top: calc(100% + 8px); width: min(620px, 85vw); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 16px; padding: 18px; z-index: 40; background: var(--workspace-surface); border: 1px solid var(--workspace-border); border-radius: 10px; box-shadow: 0 8px 24px #13223526; }
.workspace-filter-options > * { min-width: 0; width: auto; }
#filterPanel .workspace-filter-options > * { grid-area: auto; width: auto; min-width: 0; max-width: none; position: relative; float: none; }
#filterPanel .labeled-filter { display: block; padding: 0; }
#filterPanel .labeled-filter.hidden { display: none; }
#filterPanel .labeled-filter::before { position: static; display: block; inset: auto; transform: none; }
#filterPanel .labeled-filter > summary { width: 100%; }
.workspace-filter-options .labeled-filter::before { display: block; position: static; margin-bottom: 5px; color: var(--workspace-muted); font-size: 13px; }
.workspace-filter-options .status-filter-options { max-height: 280px; overflow: auto; }
.workspace-filter-options .status-filter-options label { min-height: 36px; display: flex; align-items: center; gap: 8px; }
.active-filter-summary:empty { display: none; }
.active-filter-summary { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; color: var(--workspace-muted); }
.active-filter-summary span { padding: 4px 9px; border: 1px solid var(--workspace-border); border-radius: 20px; font-size: 13px; }
.workspace-filters .filter-chip { padding: 4px 9px; border: 1px solid var(--workspace-border); border-radius: 20px; font-size: 13px; min-height: 32px; background: var(--workspace-surface); }
.form-recovery-notice { background: #eef5ff; border: 1px solid #7298cd; border-radius: 8px; padding: 12px; margin: 12px 18px; }
.form-recovery-notice p { margin: 0 0 8px; }
.form-recovery-notice button { margin-right: 8px; }
body.dark-mode .form-recovery-notice { background: #243b56; color: #edf4ff; }
.order-card .card-overflow { position: relative; }
.order-card .card-overflow summary { cursor: pointer; min-width: 36px; min-height: 36px; padding: 6px; text-align: center; }
.order-card .card-overflow[open] button { position: absolute; right: 0; top: 100%; min-width: 110px; z-index: 5; background: var(--workspace-surface); border: 1px solid var(--workspace-border); padding: 8px; }
.mobile-policy-notice { padding: 10px 14px; border-left: 3px solid #7298cd; color: var(--workspace-muted); }
@media (max-width: 743px) {
  .topbar { padding: 14px; }
  .topbar > div:first-child { min-width: 0; }
  .topbar .toolbar { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; gap: 8px; }
  .topbar .toolbar > * { width: auto; flex: 0 1 auto; margin: 0; }
  .topbar #newOrderBtn { flex: 1 1 130px; min-height: 44px; }
  .topbar #pageSubtitle { display: none; }
  .workspace-actions-panel { position: fixed; top: 150px; left: 12px; right: 12px; width: auto; max-height: 65vh; overflow: auto; }
  .workspace-actions-panel, body.overview-density .workspace-actions-panel { grid-template-columns: minmax(0, 1fr); width: auto; }
  .workspace-actions-panel > button, .workspace-actions-panel > .quick-tool-hint { grid-column: 1; }
  .workspace-actions-panel > .quick-tool-hint { margin: -4px 0 4px; }
  .action-mode-bar { left: 12px; right: 12px; bottom: 64px; transform: none; width: auto; max-width: none; flex-wrap: wrap; }
  .action-mode-bar .action-mode-hint { flex-basis: 100%; }
  .action-mode-bar button { flex: 1 1 0; }
  #actionModeBar #bulkStatusControls { flex: 1 1 100%; }
  #actionModeBar #bulkStatusSelect { flex: 1 1 0; width: auto; height: 44px; min-height: 44px; }
  .bulk-status-result { left: 12px; right: 12px; bottom: 64px; transform: none; max-width: none; }
  /* Process Orders stays in the phone top bar, so the toolbar takes its own row beneath the title. */
  .topbar:has(#newOrderBtn:not(.hidden)), body.overview-density .topbar:has(#newOrderBtn:not(.hidden)) { grid-template-columns: minmax(0, 1fr); }
  .workspace-filters { gap: 10px; padding: 10px; }
  .workspace-filters > .day-switcher { flex: 1 0 100%; }
  .workspace-filters > label.search { flex: 1 1 140px; min-width: 120px; }
  .workspace-filter-options { position: fixed; top: 190px; left: 12px; right: 12px; width: auto; max-height: 65vh; overflow: auto; grid-template-columns: minmax(0,1fr); }
  .work-week .week-day { min-height: 0; }
  .work-week .week-day-header { min-height: 44px; }
  .stats { gap: 6px; }
  #orderForm footer button { min-height: 44px; }
  .form-recovery-notice { margin: 8px; }
  #globalChatDock.collapsed { width: 112px; min-width: 0; height: 44px; min-height: 44px; max-height: 44px; flex-basis: 112px; border-radius: 20px; overflow: hidden; }
  #globalChatDock.collapsed header { min-height: 44px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
/* Selection without checkboxes (Highland 2026-10-20): in a selection mode the whole card is one
   toggle button laid over the card (focus ring = card ring); the card's own controls (notes,
   details, file, phone details toggle) stay above it and keep their behaviour. */
.order-card:has(.card-select-target) { position: relative; cursor: pointer; }
.order-card:has(.card-select-target) .card-top { position: static; }
.order-card .card-select-target { position: absolute; inset: 0; z-index: 1; width: auto; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none; color: inherit; cursor: pointer; }
.order-card .card-select-target:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.order-card .card-select-target:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.order-card .card-select-target:disabled, .order-card .card-select-target:disabled:hover { background: transparent; cursor: not-allowed; }
.order-card:has(.card-select-target) :is(button, a, summary, select, input):not(.card-select-target):not(.card-overflow *),
.order-card:has(.card-select-target) .card-overflow { position: relative; z-index: 2; }
.work-week .card-top:has(.selection-check) .card-title { flex: 1 1 0; min-width: 0; }
.order-card .card-top > .selection-check { align-self: center; margin-right: 0; }
/* Desktop filter bar layout: responsive-shell.css. */

.order-card .card-overflow > summary { list-style: none; }
.order-card .card-overflow > summary::-webkit-details-marker { display: none; }
.order-card .card-overflow:not([open]) > button { display: none; }
/* Week grid below 1100px: responsive-overview.css (one sideways-scrolling row, not 3 + 2). */

/* Keep the original card density on phones as well as desktop. */
.order-card .card-overflow summary { min-height: 24px; min-width: 24px; padding: 2px; }
/* CPU Check-In (2026-10-12): Add walk-in, Hide numbers, and a calm table whose header stays put. */
.checkin-header-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.walk-in-reason { color: var(--workspace-muted); font-size: 12px; font-weight: 600; }
body.dark-mode .walk-in-reason { color: #c9d4e2; }
.checkin-header-tools button:disabled { background: #e7ebf0; border-color: #d0d7e0; color: #5f6b7a; cursor: not-allowed; box-shadow: none; }
body.dark-mode .checkin-header-tools button:disabled { background: #2b3644; border-color: #3f4d5f; color: #aab6c5; }
/* Hide numbers: in the toolbar on desktop, under Quick Tools on phones. */
body.cpu-checkin-page.cpu-stats-hidden #overviewContent > #stats { display: none; }
#ordersTable tr.walk-in-draft-row td { background: #eef6ff; }
#ordersTable tr.walk-in-draft-row td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
#ordersTable td.walk-in-draft-actions { overflow: visible; text-align: center; }
#ordersTable td.walk-in-draft-actions .cell-btn { min-width: 26px; min-height: 26px; padding: 2px 8px; }
#ordersTable td.walk-in-draft-actions .walk-in-cancel { padding: 2px 6px; font-size: 16px; line-height: 1; }
#ordersTable td.walk-in-draft-actions .cell-btn + .cell-btn { margin-left: 4px; }
.walk-in-draft-message:not(:empty) { display: block; margin-top: 4px; color: var(--bad); font-size: 12px; font-weight: 700; white-space: normal; }
#ordersTable td.walk-in-arrival-hint { color: var(--muted); font-size: 12px; text-align: center; }
#ordersTable tr.cpu-legacy-pull-row td.pickup-slot { color: var(--muted); font-weight: 600; font-style: italic; white-space: normal; line-height: 1.2; }
body.dark-mode #ordersTable tr.walk-in-draft-row td { background: #22344a; }
@media (min-width: 744px) {
  /* The one-screen layout (fixed header, only #tableShell scrolls, sticky thead th) is shared with
     Overview and Assembly Tracker: body.fixed-header-page in app-shell.css. */
  body.cpu-checkin-page #ordersTable tbody tr { scroll-margin-top: 44px; }
  body.cpu-checkin-page #ordersTable td { border-bottom-color: #e8edf3; border-right-color: transparent; }
  /* Past, unused appointment rows recede instead of filling the page with colour. */
  body.cpu-checkin-page:not(.dark-mode) #ordersTable tr.expired-checkin-slot td { background: #f7f8fa; color: #5f6b7a; border-color: #e8edf3; }
  body.dark-mode.cpu-checkin-page #ordersTable tr.expired-checkin-slot td { background: #1d2733; color: #b8c4d3; border-color: #33445a; }
  body.dark-mode.cpu-checkin-page #ordersTable td { border-bottom-color: #33445a; }
}
/* Phone density (<= 743px): more CPU pickups and overview orders per screen.
   Two-line rows, compact page chrome; Close Out stays a 40px target, other targets stay >= 24px. */
@media (max-width: 743px) {
  /* Page chrome: title row, date/search rows and stats take far less height. */
  body .topbar { padding: 8px 10px; gap: 6px; }
  body .topbar h1, body.overview-density .topbar h1 { font-size: 19px; line-height: 1.2; }
  body .topbar .toolbar { gap: 6px; }
  body .topbar .toolbar > button, body .topbar .workspace-actions > summary { min-height: 40px; }
  body .topbar .workspace-actions > summary { padding: 8px 10px; }
  body #overviewContent > .workspace-filters { gap: 6px; padding: 6px 8px; margin-top: 6px; }
  body .workspace-filters > .day-switcher { gap: 4px; }
  body .workspace-filters button:not(:where(.search-clear, .search-suggestions *)), body .workspace-filters input, body .workspace-filters select, body .workspace-filters summary { min-height: 40px; }
  /* The "Search" caption is .sr-only (it repeats the placeholder); it stays as the accessible name. */
  body .workspace-filters > label.search input { font-size: 14px; line-height: normal; }
  body .mobile-policy-notice { margin: 6px 0 0; padding: 3px 10px; font-size: 12px; line-height: 1.35; }
  body #stats.stats { display: flex; flex-wrap: nowrap; gap: 6px; min-height: 0; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
  body #stats.stats .stat { display: flex; flex: 0 0 auto; align-items: baseline; gap: 5px; min-width: 0; min-height: 0; padding: 4px 9px; border-radius: 999px; }
  body #stats.stats .stat strong { font-size: 15px; line-height: 1.2; }
  body #stats.stats .stat span { font-size: 12px; line-height: 1.2; white-space: nowrap; }
  /* Overview: the CPU / Delivery / Freight totals start their own row below the weekly totals. */
  body #stats.stats:has(> .stats-group) { flex-wrap: wrap; overflow-x: visible; }
  body #stats.stats > .stats-group { display: flex; flex: 1 0 100%; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  body #stats.stats > .stats-partition { display: none; }

  /* CPU Check-In: one compact row per pickup; the row keeps its status-coloured left edge. */
  #ordersTable:has(.mobile-cpu-row) tbody { display: grid; gap: 4px; }
  #ordersTable tr.mobile-cpu-row { display: block; margin: 0; padding: 5px 6px 5px 9px; border-left-width: 4px; border-radius: 6px; box-shadow: none; }
  #ordersTable tr.mobile-cpu-row > td { display: block; padding: 0; }
  #ordersTable tr.mobile-cpu-row > td::before { display: none; }
  #ordersTable .mobile-cpu-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 0; border: 0; background: transparent; }
  #ordersTable .mobile-cpu-card-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
  #ordersTable .mobile-cpu-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 14px; line-height: 1.3; }
  #ordersTable .mobile-cpu-line strong { flex: 0 0 auto; }
  #ordersTable .mobile-cpu-line span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Pieces ride on line 1 (the customer name gives way), so line 2 only needs window + status. */
  #ordersTable .mobile-cpu-line .mobile-cpu-pieces { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
  #ordersTable .mobile-cpu-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.2; }
  #ordersTable .mobile-cpu-meta { overflow: hidden; }
  #ordersTable .mobile-cpu-meta small { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
  #ordersTable .mobile-cpu-meta .status { flex: 0 0 auto; min-width: 0; padding: 1px 7px; font-size: 12px; white-space: nowrap; }
  #ordersTable .mobile-cpu-quick-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
  #ordersTable .mobile-cpu-quick-actions > .mobile-cpu-details-toggle { width: 28px; min-width: 28px; padding: 0; border: 0; background: transparent; color: var(--brand); font-size: 18px; line-height: 1; }
  /* Admins also get photo and Check In; their actions take a row of their own so the status stays readable. */
  #ordersTable .mobile-cpu-card:has(.mobile-cpu-quick-actions > button:nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
  #ordersTable .mobile-cpu-quick-actions > button { min-height: 40px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
  #ordersTable .mobile-cpu-quick-actions > .mobile-camera-action { width: 40px; min-width: 40px; padding: 0; }
  #ordersTable .mobile-capture-status, #ordersTable .mobile-cpu-details { grid-column: 1 / -1; }
  #ordersTable .mobile-cpu-details { gap: 6px; margin-top: 4px; padding-top: 6px; }
  #ordersTable .mobile-cpu-details dl { gap: 4px 8px; font-size: 13px; }
  #ordersTable .mobile-cpu-detail-actions button, #ordersTable .mobile-cpu-detail-actions a { min-height: 40px; }

  /* Overview: tight day headers and two-line order cards. */
  body .work-week { gap: 6px; }
  body .work-week .week-day > header, body.overview-density .work-week .week-day > header { display: flex; align-items: center; min-height: 36px; padding: 4px 8px 4px 10px; gap: 8px; }
  body .work-week .week-day > header > .week-day-count, body.overview-density .work-week .week-day > header > .week-day-count { flex: 1 1 auto; min-width: 0; max-width: none; overflow: visible; text-align: right; text-overflow: clip; white-space: normal; }
  body .work-week .week-day > header > .week-day-chevron { flex: 0 0 auto; }
  body .work-week .week-day > header > strong, body.overview-density .work-week .week-day > header > strong { font-size: 14px; line-height: 1.2; white-space: nowrap; }
  body .work-week .week-day > header .week-day-count { font-size: 12px; }
  body .work-week .week-day > header > strong { flex: 0 0 auto; }
  body .work-week .week-cards { gap: 4px; padding: 4px; }
  body .work-week .empty-day { margin: 0; padding: 2px 6px; font-size: 13px; }
  body .work-week .order-card, body.overview-density .work-week .order-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-auto-rows: auto; height: auto; min-height: 0; max-height: none; align-items: center; gap: 0 4px; padding: 3px 4px 3px 9px; border-left-width: 4px; }
  body .work-week .order-card > * { grid-column: 1; }
  body .work-week .order-card > .mobile-order-details { grid-column: 1 / -1; }
  /* Chevron spans both lines on the right: a 32x40 target without adding a line. */
  body .work-week .order-card > .mobile-order-details-toggle { grid-column: 2; grid-row: 1 / span 2; width: 32px; min-width: 32px; min-height: 40px; padding: 0; justify-content: center; align-items: center; font-size: 18px; line-height: 1; }
  body .work-week .order-card .card-top { gap: 6px; font-size: 14px; line-height: 1.3; }
  body .work-week .order-card .card-title { flex-wrap: nowrap; gap: 6px; }
  body .work-week .order-card .card-title strong { flex: 0 0 auto; }
  body .work-week .order-card .card-title span:not(.sync-attention-badge):not(.order-icon) { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  body .work-week .order-card .card-top > .status { flex: 0 0 auto; min-width: 0; max-width: 46%; padding: 1px 7px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-order-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mobile-order-meta small { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-order-details .card-meta-row > small { display: none; }
  .mobile-order-details .card-meta-row:not(:has(.assembly-status-chip)) { display: none; }
}
/* Dispatch page (static/dispatchtrack-panel.js). Icons never carry meaning alone: every icon has text or an aria-label. */
#dispatchPanel.dispatch-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
#dispatchPanel.dispatch-page.hidden { display: none; }
.dt-page { display: grid; gap: 12px; min-width: 0; }
.dt-page .hidden { display: none !important; }
.dt-muted { color: var(--muted); }
.dt-ic { flex: 0 0 auto; width: 16px; height: 16px; vertical-align: -3px; }
/* Tones: colour plus icon plus text, so colour is never the only cue. */
.dt-tone-good { --dt-tone: var(--good); --dt-tone-bg: rgba(31, 157, 85, 0.12); }
.dt-tone-ready { --dt-tone: var(--brand-dark); --dt-tone-bg: rgba(31, 111, 235, 0.12); }
.dt-tone-wait { --dt-tone: #5b6f86; --dt-tone-bg: rgba(91, 111, 134, 0.14); }
.dt-tone-warn { --dt-tone: var(--warn); --dt-tone-bg: rgba(199, 119, 0, 0.14); }
.dt-tone-bad { --dt-tone: var(--bad); --dt-tone-bg: rgba(191, 44, 44, 0.12); }
.dt-tone-info { --dt-tone: #2b6cb0; --dt-tone-bg: rgba(43, 108, 176, 0.12); }
.dt-tone-muted { --dt-tone: var(--muted); --dt-tone-bg: rgba(102, 112, 133, 0.12); }
body.dark-mode .dt-tone-wait { --dt-tone: #aebac8; }
body.dark-mode .dt-tone-info { --dt-tone: #8ab8f8; }
body.dark-mode .dt-mode-mock, body.dark-mode .dt-mode-off { --dt-tone: #d5deea; --dt-tone-bg: rgba(213, 222, 234, 0.16); }
/* Tabs (Deliveries / Settings) */
.dt-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); width: max-content; max-width: 100%; }
.dt-tabs button { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-weight: 750; }
.dt-tabs button:hover { background: var(--row-hover, #edf3fb); }
.dt-tabs button.active { background: var(--brand-dark); color: #fff; }
body.dark-mode .dt-tabs button.active { color: #0f1d33; }
/* Status strip */
.dt-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dt-tile { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.dt-tile h3 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.dt-tile > strong { color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.15; }
.dt-tile .dt-of { color: var(--muted); font-size: 14px; font-weight: 600; }
.dt-tile small { color: var(--muted); font-size: 12px; }
.dt-tile-attention { border-color: var(--bad); }
.dt-tile-attention > strong { color: var(--bad); }
.dt-mode { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 2px 10px 2px 6px; border-radius: 999px; font-size: 14px; font-weight: 800; background: var(--dt-tone-bg, rgba(102, 112, 133, 0.12)); color: var(--dt-tone, var(--muted)); }
.dt-mode-off { --dt-tone: var(--muted); }
.dt-mode-mock { --dt-tone: #5b6f86; --dt-tone-bg: rgba(91, 111, 134, 0.14); }
.dt-mode-sandbox { --dt-tone: var(--warn); --dt-tone-bg: rgba(199, 119, 0, 0.14); }
.dt-mode-production { --dt-tone: var(--bad); --dt-tone-bg: rgba(191, 44, 44, 0.14); }
.dt-window-note { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; }
.dt-window-note strong { color: var(--ink); }
.dt-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 8px; background: var(--panel); }
.dt-banner > div { flex: 1 1 240px; }
.dt-banner-bad { border-left-color: var(--bad); }
/* Cancel approvals (James, 2026-11-05): amber like Assembly Tracker's "Needs approval". */
.dt-banner-cancel { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.dt-banner-cancel > div { flex: 1 1 320px; min-width: 0; }
.dt-cancel-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.dt-cancel-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.dt-cancel-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.dt-cancel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-cancel-chip { display: inline-flex; align-items: center; height: 18px; margin-left: 4px; padding: 0 7px; border-radius: 9px; background: #d97706; color: #1b1200; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.dt-cancel-chip-approved { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.dt-cancel-box { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--warn); border-left-width: 4px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.dt-cancel-box h4 { margin: 0 0 4px; font-size: 14px; }
.dt-cancel-box p { margin: 0 0 8px; overflow-wrap: anywhere; }
.dt-cancel-decide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.dt-cancel-decide .dt-field { flex: 1 1 240px; }
.dt-cancel-ask { margin: 8px 0; }
.dt-cancel-ask summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.dt-cancel-ask .dt-field { margin: 8px 0; }
.dt-cancel-ask textarea, .dt-cancel-decide textarea { width: 100%; resize: vertical; }
/* Toolbar */
.dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: var(--density-pad, 8px) 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
/* Week switcher: the Assembly Tracker's Today / previous / week label (opens the week picker) / next. */
.dt-week-switcher { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dt-week-switcher > button { min-height: var(--density-control-h, 34px); }
.dt-week-switcher .icon-btn { min-width: 34px; display: inline-grid; place-items: center; font-size: 16px; }
.dt-week-anchor { position: relative; display: grid; justify-items: center; min-width: 0; }
.dt-week-caption { color: var(--muted); font-size: 12px; font-weight: 750; line-height: 13px; }
.dt-week-label { min-width: 170px; min-height: 28px; font-size: var(--density-fs, 14px); white-space: nowrap; }
body.dark-mode .dt-week-label:hover, body.dark-mode .dt-week-label:focus { background: #2a3b50; outline-color: #4d6787; }
.dt-week-picker { left: 50%; transform: translateX(-50%); z-index: 40; }
.dt-week-picker .week-picker-days button[aria-disabled="true"] { cursor: default; }
.dt-week-picker button:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-show-issue { display: inline-flex; align-items: center; gap: 6px; min-height: var(--density-control-h, 34px); }
.dt-show-issue .dt-ic { color: var(--warn); }
.dt-toolbar .dt-message { flex: 1 1 260px; margin: 0; min-height: 20px; align-self: center; font-size: var(--density-fs-sm, 13px); }
.dt-toolbar .dt-message:empty { flex-basis: 0; min-height: 0; }
/* Legend popover (2026-10-24): opens from the Legend button; short rows in four groups. */
.dt-legend-anchor { position: relative; margin-left: auto; }
.dt-legend-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--density-control-h, 34px); }
.dt-legend-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; display: grid; gap: var(--density-gap, 8px); width: min(660px, calc(100vw - 32px)); max-height: min(72vh, 600px); overflow-y: auto; padding: var(--density-pad, 12px) 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); box-shadow: 0 14px 36px rgba(16, 32, 56, 0.22); opacity: 1; transition: opacity 0.15s ease; }
.dt-legend-pop[hidden] { display: none; }
.dt-legend-pop.is-open { animation: dt-legend-in 0.15s ease; }
.dt-legend-pop.is-closing { opacity: 0; }
.dt-legend-pop:focus { outline: none; }
.dt-legend-pop:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
@keyframes dt-legend-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dt-legend-pop, .dt-legend-pop.is-open, .dt-legend-pop.is-closing { animation: none; transition: none; } }
body.dark-mode .dt-legend-pop { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
.dt-legend-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 22px; }
.dt-legend-row + .dt-legend-row { padding-top: var(--density-gap, 8px); border-top: 1px solid var(--line); }
.dt-legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dt-legend-group h4 { flex: 0 0 auto; min-width: 58px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.dt-legend-group .status { font-size: 12px; }
.dt-legend-group ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.dt-legend-group li { display: inline-flex; align-items: center; gap: 4px; font-size: var(--density-fs-sm, 12px); font-weight: 650; white-space: nowrap; }
.dt-legend-group .dt-contact { width: 22px; height: 22px; cursor: default; }
/* Phone picker in Review: numbers from the notes with Primary / Secondary / Third. */
.dt-phone-pick { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.dt-phone-pick p { margin: 0 0 6px; font-size: 13px; }
.dt-phone-pick ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dt-phone-pick li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dt-phone-num { min-width: 110px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dt-phone-slots { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dt-phone-slot { min-height: 28px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.dt-phone-slot[aria-pressed="true"] { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; }
body.dark-mode .dt-phone-slot[aria-pressed="true"] { color: #0f1d33; }
.dt-phone-slot:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-status-reason { cursor: help; }
.dt-status-reason:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-message { margin: 0; }
.dt-message-good { color: var(--good); }
.dt-message-warning { color: var(--ink); }
.dt-message-bad { color: var(--bad); font-weight: 600; }
.dt-empty-note { margin: 0; }
/* Legend */
.dt-legend { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.dt-legend > summary { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
.dt-legend-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 24px; padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.dt-legend-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.dt-legend-list li { display: grid; grid-template-columns: minmax(128px, max-content) minmax(0, 1fr); align-items: start; gap: 10px; font-size: 13px; }
.dt-legend-list li > span:last-child { color: var(--muted); }
/* Day sections: the Assembly Tracker look */
.dt-days { display: grid; gap: 14px; }
.dt-day { display: grid; align-content: start; overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 7px; background: var(--panel); box-shadow: 0 2px 0 rgba(33, 76, 126, .08); }
.dt-day-has-problems { border-left-color: var(--warn); }
.dt-day-past { border-left-color: var(--muted); }
.dt-day-empty { border-left-color: var(--line); box-shadow: none; }
.dt-day > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 40px; padding: 6px 10px; background: #eaf0f7; }
body.dark-mode .dt-day > header { background: #344a62; }
.dt-day-empty > header { min-height: 32px; padding-block: 4px; background: transparent; }
.dt-day-empty > header strong { color: var(--muted); font-weight: 650; }
.dt-day-empty > header .dt-day-summary { margin-left: 4px; font-weight: 600; }
.dt-day-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; margin: -2px 0 -2px -6px; padding: 2px 10px 2px 6px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dt-day-toggle:hover, .dt-day-toggle:focus-visible { background: #dce8f5; }
body.dark-mode .dt-day-toggle:hover, body.dark-mode .dt-day-toggle:focus-visible { background: #3e5772; }
.dt-day-toggle:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-day-chevron { width: 16px; color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1; text-align: center; }
.dt-day > header strong { font-size: 14px; }
.dt-day-total { color: var(--muted); font-size: 12px; font-weight: 750; }
.dt-day-problem { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(199, 119, 0, 0.16); color: var(--warn); }
.dt-day-summary { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.dt-count { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--dt-tone-bg); color: var(--dt-tone); font-size: 12px; font-weight: 800; white-space: nowrap; }
.dt-send-day { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px 4px 10px; }
.dt-send-day[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.dt-day.is-collapsed > .dt-table-shell { display: none; }
.dt-table-shell { border: 0; border-top: 1px solid var(--line); border-radius: 0; max-height: none; overflow-x: auto; }
/* Three status columns (2026-10-30): Sync (ours), Order status (Order Manager), DispatchTrack (theirs). Widths are
   hints for table-layout: auto; the table fits 1440px screens without a scrollbar, narrower ones scroll. */
.dt-table { width: 100%; min-width: 1230px; border-collapse: collapse; table-layout: auto; }
.dt-table th.dt-col-order { width: 56px; } .dt-table th.dt-col-sync { width: 124px; } .dt-table th.dt-col-invoice { width: 80px; } .dt-table th.dt-col-address { width: 17%; min-width: 170px; } .dt-table th.dt-col-service { width: 112px; }
.dt-table th.dt-col-contents { width: 98px; } .dt-table th.dt-col-contact { width: 76px; } .dt-table th.dt-col-notes { width: 12%; min-width: 130px; } .dt-table th.dt-col-order-status { width: 104px; } .dt-table th.dt-col-remote { width: 118px; } .dt-table th.dt-col-sent { width: 92px; }
.dt-table td.dt-col-service, .dt-table td.dt-col-remote, .dt-table td.dt-col-sent { white-space: normal; }
.dt-table td.dt-col-sent time { display: inline-block; font-size: 12px; line-height: 1.25; }
.dt-table td.dt-col-order-status .status { max-width: 100%; white-space: nowrap; }
.dt-order-status { font-size: 12px; }
.dt-table th { position: sticky; top: 0; z-index: 1; padding: 6px 8px; background: var(--panel); color: var(--muted); font-size: var(--density-fs-sm, 12px); font-weight: 750; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.dt-table td { height: var(--density-row-h, 36px); padding: var(--density-cell-py, 5px) calc(var(--density-cell-px, 6px) + 2px); border-bottom: 1px solid var(--line); vertical-align: middle; font-size: calc(var(--density-fs, 14px) - 1px); }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table tbody tr { cursor: pointer; }
.dt-table tbody tr:hover td { background: var(--row-hover, #edf3fb); }
.dt-row-problem td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.dt-row-attention td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.dt-table td small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2; }
.dt-table td small.dt-service-source { display: inline-block; }
.dt-col-invoice { white-space: nowrap; }
.dt-invoice { min-height: 24px; margin: 0 0 0 -4px; padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: pointer; }
.dt-invoice:hover { text-decoration-color: currentColor; color: var(--brand-dark); }
.dt-invoice:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-col-customer { min-width: 120px; max-width: 180px; white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
.dt-table .dt-order-actions { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
/* The table scrolls inside its day on phones (the shared phone rule makes .table-shell overflow visible). */
.dt-days, .dt-day { min-width: 0; }
/* position: relative keeps screen-reader-only text (position: absolute) inside the scroller. */
.dt-day > .table-shell.dt-table-shell { position: relative; overflow-x: auto; max-width: 100%; min-width: 0; }
/* Address: coloured by our own checks, with an icon and a word (OK / Check / Fix) and a tooltip. */
.dt-table td.dt-addr-cell, .dt-table tbody tr:hover td.dt-addr-cell { background: var(--dt-tone-bg); box-shadow: inset 3px 0 0 var(--dt-tone); }
.dt-addr { display: flex; align-items: flex-start; gap: 6px; min-width: 0; border-radius: 4px; cursor: help; white-space: normal; overflow-wrap: break-word; }
.dt-addr:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.dt-addr-mark { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; color: var(--dt-tone, var(--ink)); font-size: var(--density-fs-sm, 12px); font-weight: 800; white-space: nowrap; }
.dt-addr-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--density-clamp, 2); overflow: hidden; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; color: var(--ink); }
.dt-addr-text em { color: var(--bad); font-style: normal; font-weight: 700; }
/* Show issue: the row it went to. */
.dt-table tbody tr.dt-row-flash td { background: rgba(31, 111, 235, 0.13); }
.dt-table tbody tr.dt-row-flash td:first-child { box-shadow: inset 4px 0 0 var(--brand-dark); }
.dt-table tbody tr.dt-row-flash { outline: 2px solid var(--brand-dark); outline-offset: -2px; }
body.dark-mode .dt-table tbody tr.dt-row-flash td { background: rgba(138, 184, 248, 0.16); }
.dt-status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--dt-tone-bg); color: var(--dt-tone); font-size: 12px; font-weight: 800; white-space: nowrap; }
.dt-flag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.dt-contacts { display: inline-flex; gap: 4px; }
.dt-contact { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--dt-tone-bg); color: var(--dt-tone); cursor: help; }
.dt-contact:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-issues { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 8px 2px 6px; border: 0; border-radius: 999px; background: var(--dt-tone-bg); color: var(--dt-tone); font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer; }
.dt-issues.dt-tone-good { padding-right: 6px; cursor: default; }
.dt-issues:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-remote { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--dt-tone, var(--ink)); font-size: 12px; font-weight: 700; }
.dt-remote > span { white-space: nowrap; }
.dt-state-closed { opacity: 0.85; }
.dt-service em { color: var(--bad); font-style: normal; font-weight: 700; }
.dt-service-chosen { font-weight: 800; color: var(--brand-dark); }
.dt-service-source { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--dt-tone-bg, rgba(102, 112, 133, 0.12)); color: var(--muted); font-size: 12px; font-weight: 800; vertical-align: 1px; }
.dt-service-chosen .dt-service-source { background: rgba(31, 111, 235, 0.14); color: var(--brand-dark); }
.dt-contents { white-space: nowrap; }
/* Flat pack: what DispatchTrack gets as pieces (one per started 50; 2026-10-27) */
.dt-pieces-sent { color: var(--brand-dark); font-weight: 800; }
/* Closed for DispatchTrack (In progress / Completed / Cancelled; 2026-10-30): quiet rows, no checks. */
.dt-table tbody tr.dt-row-closed td { color: var(--muted); }
.dt-table td.dt-addr-cell.dt-addr-closed, .dt-table tbody tr:hover td.dt-addr-cell.dt-addr-closed { background: transparent; box-shadow: none; }
.dt-addr-closed .dt-addr { cursor: default; }
/* Dispatch notes column (2026-10-30): the order's notes, edited in place and saved to the order. */
.dt-col-notes { max-width: 260px; }
.dt-notes-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--density-clamp, 2); overflow: hidden; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; text-align: left; white-space: pre-line; }
.dt-notes-btn { display: flex; align-items: flex-start; gap: 6px; width: 100%; min-height: 26px; margin: 0 0 0 -4px; padding: 2px 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; font-size: inherit; text-align: left; cursor: text; }
.dt-notes-btn .dt-ic { margin-top: 1px; color: var(--muted); opacity: 0; transition: opacity 0.12s ease; }
.dt-notes-btn:hover, .dt-notes-btn:focus-visible { border-color: var(--line); background: var(--panel); }
.dt-notes-btn:hover .dt-ic, .dt-notes-btn:focus-visible .dt-ic, .dt-notes-btn.dt-notes-empty .dt-ic { opacity: 1; }
.dt-notes-btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-notes-btn.dt-notes-empty .dt-notes-text { color: var(--muted); font-style: italic; }
.dt-table td.dt-col-notes-editing { white-space: normal; vertical-align: top; }
.dt-notes-editor { display: grid; gap: 6px; min-width: 220px; padding: 4px 0; }
.dt-notes-editor textarea { min-height: 64px; padding: 6px 8px; font-size: 13px; line-height: 1.35; }
.dt-notes-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dt-notes-editor-actions button { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.dt-notes-editor-actions small { font-size: 12px; }
.dt-inline-error { display: block; color: var(--bad); font-weight: 600; }
.dt-inline-error:empty { display: none; }
/* Tooltip (shared, positioned by JS; shown on hover, keyboard focus, and tap) */
.dt-tooltip { position: fixed; z-index: 1000; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 12px; line-height: 1.4; white-space: pre-line; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); pointer-events: none; }
/* Settings */
.dt-settings { display: grid; gap: 12px; }
.dt-group { margin: 0; padding: 10px 14px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; }
.dt-group > legend { padding: 0 6px; font-weight: 800; }
.dt-group-help { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.dt-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.dt-field-label { font-size: 12px; font-weight: 750; color: var(--ink); }
.dt-field small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.dt-field input, .dt-field select, .dt-field textarea { min-width: 0; }
.dt-readonly { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--dt-tone); font-weight: 700; }
.dt-checks { display: grid; gap: 8px; }
.dt-check { display: flex; gap: 10px; align-items: start; }
.dt-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.dt-check span { display: grid; gap: 2px; }
.dt-check small { color: var(--muted); font-size: 12px; }
.dt-wide { grid-column: 1 / -1; }
.dt-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dt-reference { margin-top: 8px; padding: 10px 14px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.dt-reference h3 { margin: 4px 0 2px; }
.dt-reference > p { margin: 0 0 8px; font-size: 13px; }
.dt-reference-shell { max-height: none; }
.dt-reference-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.dt-reference-shell .dt-reference-table th, .dt-reference-shell .dt-reference-table td { position: static; padding: 6px 8px; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.dt-reference-shell .dt-reference-table th[scope="row"] { white-space: nowrap; font-weight: 700; }
.dt-reference-shell .dt-reference-table thead th { color: var(--muted); font-size: 12px; font-weight: 750; }
/* Dialogs */
.dt-dialog { width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: 8px; padding: 0; background: var(--panel); color: var(--ink); }
.dt-dialog::backdrop { background: rgba(10, 20, 35, 0.45); }
.dt-confirm { width: min(560px, calc(100vw - 32px)); }
.dt-dialog-body { padding: 14px 16px; display: grid; gap: 10px; }
.dt-dialog-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.dt-dialog-head h3 { margin: 0; }
.dt-dialog-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--muted); font-size: 13px; }
/* Review (2026-10-24): header line, issues, compact summary, Details collapsed. */
.dt-dialog-head h3:focus { outline: none; }
.dt-dialog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: var(--density-fs-sm, 13px); }
.dt-meta-item { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border-radius: 4px; font-weight: 650; }
/* Review header (2026-10-30): Sync · Order status · DispatchTrack as three labelled chips. */
.dt-dialog-meta + .dt-dialog-meta { margin-top: 4px; }
.dt-meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border: 1px solid var(--line); border-radius: 999px; }
.dt-meta-chip > small { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.dt-meta-chip .dt-status, .dt-meta-chip .dt-remote { padding: 0; background: transparent; }
.dt-meta-chip .status { min-height: 20px; line-height: 16px; }
.dt-meta-item.dt-sum-bad { background: rgba(191, 44, 44, 0.1); color: var(--bad); }
.dt-meta-item.dt-sum-warn { background: rgba(199, 119, 0, 0.12); }
.dt-sum-bad { box-shadow: inset 3px 0 0 var(--bad); background: rgba(191, 44, 44, 0.08); }
.dt-sum-warn { box-shadow: inset 3px 0 0 var(--warn); background: rgba(199, 119, 0, 0.09); }
.dt-notes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Review form (2026-10-30): the order's own details as text fields, two columns (one on phones),
   labels above inputs, the server's Fix / Check for a field right under it. Saved to the order. */
.dt-order-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; margin: 0; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.dt-order-form > legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 0 6px; font-weight: 800; }
.dt-order-form > legend small { font-weight: 500; font-size: 12px; }
.dt-order-form-readonly > legend small { color: var(--ink); }
.dt-order-field .dt-field-label { display: inline-flex; align-items: center; gap: 4px; }
.dt-order-field .dt-field-label .dt-flag { margin-left: 2px; font-weight: 650; }
.dt-order-field input, .dt-order-field textarea { padding: 7px 9px; font-size: var(--density-fs, 14px); }
.dt-order-field textarea { min-height: 58px; line-height: 1.35; }
.dt-order-field input[type="number"] { max-width: 140px; }
.dt-field-readonly input, .dt-field-readonly textarea { background: var(--surface-soft, #f3f6fa); color: var(--ink); cursor: default; }
body.dark-mode .dt-field-readonly input, body.dark-mode .dt-field-readonly textarea { background: rgba(255, 255, 255, 0.05); }
.dt-field-bad input, .dt-field-bad textarea { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.dt-field-bad .dt-field-label { color: var(--bad); }
.dt-field-warn input, .dt-field-warn textarea { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.dt-field-issue { display: flex; align-items: flex-start; gap: 4px; font-size: 12px; line-height: 1.35; }
.dt-field-issue .dt-ic { flex: 0 0 auto; margin-top: 1px; }
.dt-field-issue strong { font-weight: 800; }
.dt-field-hint { color: var(--muted); font-size: 12px; }
.dt-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; }
.dt-suggest .dt-phone-slot { font-variant-numeric: tabular-nums; }
.dt-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 2px; }
.dt-form-actions button { display: inline-flex; align-items: center; gap: 6px; }
.dt-old-overrides { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.dt-old-overrides .dt-ic { flex: 0 0 auto; margin-top: 1px; }
.dt-old-overrides .link-button { padding: 0; border: 0; background: none; color: var(--brand-dark); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.dt-issue-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--density-fs-sm, 13px); font-weight: 700; }
/* What DispatchTrack receives: a small read-only summary under the form. */
.dt-preview-wrap { display: grid; gap: 4px; }
.dt-preview-wrap h4 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.dt-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; margin: 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-soft, #f3f6fa); font-size: 12px; }
body.dark-mode .dt-preview { background: rgba(255, 255, 255, 0.04); }
.dt-preview-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; min-width: 0; }
.dt-preview-row dt { color: var(--muted); font-weight: 750; }
.dt-preview-row dd { margin: 0; overflow-wrap: anywhere; line-height: 1.35; }
.dt-preview-row dd em { color: var(--bad); font-style: normal; font-weight: 700; }
.dt-preview-row dd code { font-size: 12px; }
.dt-preview-wide { grid-column: 1 / -1; }
.dt-tech { border: 1px solid var(--line); border-radius: 8px; }
.dt-tech > summary { min-height: 32px; padding: 6px 10px; cursor: pointer; font-weight: 750; }
.dt-tech { padding-bottom: 6px; }
.dt-tech > *:not(summary) { margin: 6px 10px 0; }
.dt-tech .dt-remote-line { display: inline-flex; }
.dt-remote-line { display: flex; align-items: center; gap: 6px; margin: 0; }
/* DispatchTrack statuses that need a person (Unable to ..., Canceled in DT), 2026-10-27. */
.dt-remote-flag { padding: 1px 7px 1px 5px; border-radius: 999px; background: var(--dt-tone-bg); cursor: help; }
.dt-remote-flag:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.dt-status-map th[scope="row"] { white-space: nowrap; }
.order-dispatchtrack-status { margin: 8px 0 0; font-size: 13px; }
.dt-order-remote { display: inline-flex; align-items: center; gap: 6px; color: var(--dt-tone, var(--ink)); }
.dt-order-remote.dt-remote-flag { padding: 2px 9px 2px 6px; }
.dt-order-remote small { font-weight: 400; }
.dt-order-remote-note { display: block; margin-top: 3px; color: var(--muted); }
.dt-last-error { display: flex; align-items: start; gap: 6px; margin: 0; }
.dt-ok { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--good); font-weight: 700; }
.dt-issue-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dt-issue-list li { display: flex; gap: 6px; align-items: start; }
.dt-issue-list li .dt-ic { margin-top: 2px; }
.dt-issue-error { color: var(--bad); }
.dt-issue-warning { color: var(--warn); }
.dt-model { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.dt-model dt { font-weight: 700; }
.dt-model dd { margin: 0; overflow-wrap: anywhere; }
.dt-payload { max-height: 240px; overflow: auto; font-size: 12px; background: var(--surface-soft, #f3f6fa); padding: 8px; border-radius: 6px; }
.dt-service-pick { grid-column: 1 / -1; }
.dt-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-dialog-actions button { display: inline-flex; align-items: center; gap: 6px; }
.dt-events { margin: 0; padding-left: 18px; font-size: 13px; }
.dt-mode-callout { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--dt-tone-bg, rgba(102, 112, 133, 0.12)); color: var(--dt-tone, var(--ink)); font-weight: 800; }
.dt-mode-callout.dt-mode-production { border: 2px solid var(--bad); }
.dt-confirm-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dt-confirm-list li { display: flex; gap: 8px; align-items: start; color: var(--dt-tone, var(--ink)); }
.dt-confirm-list li .dt-ic { margin-top: 2px; }
.dt-confirm-list li span { color: var(--ink); }
.dt-confirm-list ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.dt-production { background: var(--bad); border-color: var(--bad); }
@media (max-width: 743px) {
  .dt-model { grid-template-columns: 1fr; }
  .dt-order-form, .dt-preview { grid-template-columns: 1fr; }
  .dt-order-field input[type="number"] { max-width: none; }
  .dt-week-switcher { flex: 1 1 100%; }
  .dt-week-anchor { flex: 1 1 auto; }
  .dt-week-label { min-width: 0; width: 100%; }
  .dt-week-picker { position: fixed; inset: auto 8px 8px 8px; transform: none; z-index: 60; }
  .dt-show-issue { flex: 1 1 auto; justify-content: center; }
  .dt-legend-pop { position: fixed; inset: auto 8px 8px 8px; width: auto; max-height: 70dvh; overflow-y: auto; }
  .dt-legend-group h4 { flex-basis: 100%; }
  .dt-day-summary { margin-left: 0; }
  .dt-send-day { margin-left: auto; }
  .dt-legend-list li { grid-template-columns: 1fr; gap: 2px; }
  .dt-tile > strong { font-size: 20px; }
}
/* Dispatch on a phone (James, 2026-10-30): one card per delivery, details behind the chevron,
   the CPU Check-In camera on each card. Only rendered at the phone layout (isMobile). */
.dt-cards { display: grid; gap: 6px; margin: 0; padding: 6px 0 0; list-style: none; }
.dt-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: 8px; background: var(--panel); }
.dt-card.dt-row-pressing { border-left-color: var(--bad); }
.dt-card.dt-row-attention { border-left-color: var(--warn); }
.dt-card.dt-row-closed { opacity: 0.8; }
.dt-card.dt-row-flash { outline: 2px solid var(--brand-dark); outline-offset: -1px; }
.dt-card-main { display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.dt-card-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dt-card-line .dt-invoice { flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; }
.dt-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.dt-card-pressing { display: inline-flex; color: var(--bad); }
.dt-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12.5px; }
.dt-card-place { color: var(--muted); }
.dt-card-meta .dt-remote, .dt-card-meta .dt-status, .dt-card-meta .status { font-size: 12px; }
.dt-card-actions { display: flex; align-items: center; gap: 4px; }
.dt-card-camera { width: 40px; min-width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.dt-card-camera .dt-ic { width: 20px; height: 20px; }
.dt-card-toggle { width: 36px; height: 40px; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--muted); }
.dt-card-toggle .dt-ic { transition: transform 0.15s ease; }
.dt-card.is-open .dt-card-toggle .dt-ic { transform: rotate(180deg); }
.dt-card-capture { grid-column: 1 / -1; }
.dt-card-details { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.dt-card-details[hidden] { display: none; }
.dt-card-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; }
.dt-card-details dl > div { min-width: 0; }
.dt-card-details .dt-card-wide { grid-column: 1 / -1; }
.dt-card-details dt { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.dt-card-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.dt-card-details dd > .dt-col-address, .dt-card-details dd > .dt-col-notes { padding: 0; }
.dt-card-details .dt-addr { white-space: normal; }
.dt-card-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dt-cards-shell { padding: 0 2px 4px; }
@media (max-width: 743px) {
  .dt-legend-toggle { display: none; }
  .dt-show-issue span { white-space: nowrap; }
  .dt-day header { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .dt-card-toggle .dt-ic { transition: none; } }
/* Admin > Monitoring (static/monitoring-panel.js, ROADMAP P1-5). Severity is always written out;
   colour only marks the stripe and the label background. */
.mon-root { display: grid; gap: 16px; }
.mon-card h2 { margin: 0 0 4px; }
.mon-subhead { margin: 12px 0 8px; font-size: 15px; }
.mon-alert-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mon-alert { --mon-tone: var(--warn); --mon-tone-bg: rgba(199, 119, 0, 0.14); display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--mon-tone); border-radius: 8px; background: var(--panel); }
.mon-critical { --mon-tone: var(--bad); --mon-tone-bg: rgba(191, 44, 44, 0.12); }
.mon-resolved { --mon-tone: var(--good); --mon-tone-bg: rgba(31, 157, 85, 0.12); }
.mon-sev { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--mon-tone-bg); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.mon-alert-body { min-width: 0; }
.mon-alert-body strong { display: block; color: var(--ink); }
.mon-alert-body p { margin: 2px 0 4px; color: var(--ink); overflow-wrap: anywhere; }
.mon-alert-body small { color: var(--muted); }
.mon-all-clear { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); }
.mon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.mon-recent { margin-top: 12px; }
.mon-recent summary, .mon-details summary { min-height: 24px; cursor: pointer; font-weight: 700; }
.mon-recent .mon-alert-list { margin-top: 8px; }
.mon-form { display: grid; gap: 12px; }
.mon-fieldset { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 8px; }
.mon-fieldset legend { padding: 0 4px; font-weight: 750; }
.mon-roles { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mon-check { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.mon-check input { width: 18px; height: 18px; }
.mon-count { margin: 0 0 8px; font-weight: 700; }
.mon-warning { margin: 0 0 8px; color: var(--ink); padding: 8px 10px; border-left: 4px solid var(--warn); background: rgba(199, 119, 0, 0.12); border-radius: 6px; }
.mon-small-head { margin: 10px 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.mon-people { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mon-people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mon-person { display: grid; min-width: 0; }
.mon-person small { color: var(--muted); }
.mon-person-action { min-height: 32px; flex: 0 0 auto; }
.mon-add-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.mon-add-row label { display: grid; gap: 4px; flex: 1 1 220px; }
.mon-add-row button { min-height: 36px; }
.mon-threshold-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 12px; margin-top: 10px; }
.mon-threshold-grid label { display: grid; gap: 4px; align-content: start; }
.mon-message { margin: 0; min-height: 1.2em; }
body.dark-mode .mon-alert { --mon-tone-bg: rgba(224, 178, 91, 0.2); }
body.dark-mode .mon-critical { --mon-tone-bg: rgba(240, 128, 128, 0.2); }
body.dark-mode .mon-resolved { --mon-tone-bg: rgba(107, 212, 143, 0.18); }
@media (max-width: 743px) {
  .mon-alert { grid-template-columns: 1fr; }
  .mon-sev { justify-self: start; }
  .mon-actions { flex-wrap: wrap; }
  .mon-actions button { flex: 1 1 auto; }
}