/* U-005: quiet depth and consistent controls. Geometry stays in surface-system;
   iOS navigation stays in mobile-navigation.css. No transforms on working surfaces. */
:root {
  --fx-accent: #2563eb; --fx-rgb: 37 99 235;
  --fx-shadow: var(--wr-shadow); --fx-raised: var(--wr-shadow-raised);
  --shadow: var(--wr-shadow); --shadow-hover: var(--wr-shadow-raised);
  --radius: 16px; --radius-lg: 20px;
  --muted: #596c83;
}
body { font-family: var(--wr-font); background: var(--wr-canvas); color: var(--wr-ink); }
h1,h2,h3,h4,button,input,select,textarea { font-family: inherit; }
h1,h2,h3 { text-shadow: none; }
a { text-underline-offset: .2em; }
.sidebar { background: radial-gradient(ellipse at 0 0,#24456666,transparent 55%),#14263e; border-right: 1px solid #263d58; box-shadow: none; }
.brand { height: 74px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #ffffff35; box-shadow: 0 2px 10px #07172b12; }
.main-nav :is(a,.nav-action),.settings-link { position: relative; border-radius: 10px; transition: background var(--wr-fast),color var(--wr-fast); }
.main-nav :is(a,.nav-action).active,.settings-link.active { background: #274667 !important; color: #fff !important; border-color: #42638a; box-shadow: inset 3px 0 0 #78c6f5; }
.main-nav :is(a,.nav-action).active::before { display: none; }
.main-nav :is(a,.nav-action).active :is(b,i) { background: #426180; color: #fff; }
.main-nav :is(a,.nav-action):hover,.settings-link:hover { background-color: #243c57; }
.profile-card .avatar { background: #316bba; box-shadow: inset 0 0 0 1px #ffffff26; }
.density-toggle,#accountSecurityButton { background: #ffffff04; border-color: #7188a345; }
.app-shell > .topbar { padding-bottom: 22px; border-bottom: 1px solid var(--wr-line); box-shadow: none; }
.page-title .eyebrow { color: #52719a; letter-spacing: .1em; }
.page-title h1 { width: fit-content; max-width: 100%; color: #193452; text-shadow: none; letter-spacing: -.04em; }
.page-title h1:focus-visible { outline: 2px solid #aec7e5; outline-offset: 4px; border-radius: 4px; }
.top-actions a.button { text-decoration: none; }
.personal-work-links { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.top-actions .personal-work-links > a { width: auto; min-height: 44px; padding: 0 12px; gap: 8px; white-space: nowrap; }
.top-actions .personal-work-links span { display: inline; }
.top-actions .personal-work-links svg { width: 18px; height: 18px; flex: 0 0 18px; }
.button,.icon-button { border-radius: var(--wr-control-radius); box-shadow: 0 1px 2px #15335205; transition: background var(--wr-fast) var(--wr-ease),border-color var(--wr-fast),box-shadow var(--wr-fast); }
.button.primary,.create-job-button { background: linear-gradient(180deg,#2c70ed,#2460d5) #2460d5; border: 1px solid #2460d5; color: #fff; box-shadow: inset 0 1px 0 #ffffff24,0 2px 5px #2563eb14; }
.button.primary:hover:not(:disabled) { background: #1e56c6; box-shadow: 0 3px 10px #2563eb22; }
.button.secondary,.top-actions .icon-button { background: #fff; color: #37516e; border-color: #d4dfeb; }
.button.secondary:hover:not(:disabled),.icon-button:hover:not(:disabled) { background: #f4f8fe; border-color: #a6bddd; }
.button:active:not(:disabled),.icon-button:active:not(:disabled) { box-shadow: inset 0 1px 3px #17375a18; }
.button:disabled,.icon-button:disabled { background: #f0f3f7; border-color: #e0e6ee; color: #718096; box-shadow: none; transform: none; }
:is(input,textarea,select) { transition: border-color var(--wr-fast),box-shadow var(--wr-fast); }
:is(input,textarea,select):focus-visible { border-color: #7ca6e5; box-shadow: var(--wr-focus); }
.search-box:focus-within,.dashboard-desk-search:focus-within { border-color: #7ca6e5; box-shadow: var(--wr-focus); }
.metrics article,.dashboard-priority-grid > button { border: 1px solid var(--wr-line); border-radius: var(--wr-radius); background: #fff; box-shadow: var(--wr-shadow); transition: border-color var(--wr-fast),box-shadow var(--wr-fast); }
.metrics article::after { display: none; }
.metrics strong,.report-kpi strong,.accounting-overview strong { font-variant-numeric: tabular-nums; letter-spacing: -.035em; text-shadow: none; }
.metrics article small { display: block; margin-top: 4px; line-height: 1.45; }
.metric-icon,.dashboard-priority-icon { border-radius: 12px; box-shadow: none; }
.dashboard-desk-row { transition: background var(--wr-fast); }
.dashboard-desk-row:hover { background: #f1f6fd; }
.dashboard-desk-actions button { background: #fff; box-shadow: 0 1px 2px #17375a05; }
.dashboard-map-card { overflow: hidden; }
.dashboard-map-canvas { background: #e9eff5; }
.map-state { border: 1px solid var(--wr-line); box-shadow: var(--wr-shadow); }
.status { box-shadow: none; }
.status-tabs { background: #f8fafd; }
.status-tabs button { border-radius: 10px 10px 0 0; transition: background var(--wr-fast),color var(--wr-fast); }
.status-tabs button.active { box-shadow: inset 0 -3px 0 var(--wr-primary); }
.list-tools,.list-footer { background: #fff; }
th { background: #f7f9fc; border-top: 1px solid #e7edf5; color: #536986; letter-spacing: .045em; }
tbody tr { transition: background var(--wr-fast); }
tbody tr:hover { background: #f0f6fe; }
.customer-name-cell > span { box-shadow: none; }
.customer-mobile-card,.mobile-job-card,.part-mobile-card { background: #fff; border-radius: 14px; box-shadow: var(--wr-shadow); }
.empty-state > svg,.dashboard-chat-empty > svg { box-sizing: content-box; padding: 14px; border-radius: 16px; background: #edf3fa; color: #6480a3; box-shadow: none; }
/* Keep all calendar state colors and the steady red clock hand. */
.schedule-toolbar { background: #fff; border-radius: 16px 16px 0 0; }
.calendar-views,.segmented,.report-presets { border: 1px solid #dce5f1; background: #f0f4f9; box-shadow: none; }
.calendar-views button.active,.segmented button.active,.report-presets button.active { background: #fff; color: #2157a9; box-shadow: 0 1px 4px #193b6717,inset 0 0 0 1px #c9d9ee; }
.timeline-day-head { background: #f8fafd; }
.timeline-day-head.today { background: #eff5ff; }
.timeline-day-head.today strong,.month-day.today .month-date { background: var(--wr-primary); box-shadow: none; }
.timeline-event,.calendar-event { border-radius: 7px; box-shadow: 0 1px 4px #17375a12; }
.timeline-event:hover,.calendar-event:hover { box-shadow: 0 3px 9px #17375a22; }
.dispatch-queue { background: #f6f8fc; }
.dispatch-queue > header { background: var(--wr-navy); color: #fff; }
.dispatch-queue > header :is(h3,.eyebrow) { color: #e7f1fc; }
.dispatch-queue > header button { color: #fff; background: #ffffff0d; border: 1px solid #ffffff45; }
.queue-card { border-radius: 12px; box-shadow: 0 2px 6px #17375a08; }
.calendar-jump-popover { box-shadow: var(--wr-shadow-raised); }
.report-toolbar,.accounting-toolbar { background: #fff; border-radius: 16px; }
.report-kpi,.accounting-overview > article { background: #fff; border: 1px solid var(--wr-line); border-radius: 14px; box-shadow: var(--wr-shadow); }
.report-kpi.revenue,.report-kpi.collected,.report-kpi.outstanding { background: #fff; }
.report-card > header { background: #f7f9fc; border-radius: 16px 16px 0 0; }
.report-chart { background: #fff; }
.report-chart-column i { box-shadow: none; }
.accounting-overview > .accounting-highlight { background: #174e58 !important; color: #fff; border-color: #246875; box-shadow: none; }
.accounting-highlight :is(h3,.eyebrow) { color: #fff; }
.accounting-highlight p { color: #d1e7e9; }
.accounting-overview > section { background: #fff; border-color: var(--wr-line); border-radius: 14px; }
.accounting-note { background: #eff8f5; border-color: #cfe5dc; }
.accounting-range .segmented { display: flex; width: auto; }
.accounting-range .segmented button { white-space: nowrap; }
.settings-nav { background: #f7f9fc; }
.settings-nav button { border-radius: 10px; transition: background var(--wr-fast),border-color var(--wr-fast); }
.settings-nav button.active { color: #2459a4; background: #fff; border-color: #c7d9ed; box-shadow: inset 3px 0 0 #3e83db,0 2px 5px #17375a06; }
.settings-nav button.active svg { filter: none; }
.settings-content { background: #fff; }
.settings-section > .button { margin: 12px 0 18px; }
.settings-placeholder-grid article { background: #fafbfd; border-color: var(--wr-line); border-radius: 14px; box-shadow: none; }
.settings-placeholder-grid strong { color: #294667; }
.staff-list-card,.staff-invite-card,.integration-activity-panel { border-radius: 14px; border-color: var(--wr-line); box-shadow: var(--wr-shadow); }
.staff-access-row { border-radius: 10px; }
.staff-invite-card { align-self: start; }
.mfa-manage { padding: 22px; border: 1px solid var(--wr-line); border-radius: 14px; background: #f8fafd; }
.job-command-bar { background: #f8fafd; }
.job-command-bar button { background: #fff; border-color: #d4dfec; box-shadow: 0 1px 2px #17375a06; }
.job-section-rail { background: #f5f8fc; }
.job-section-rail button.active { background: #e8f0ff; color: #2459ac; border-color: #b9d0ef; box-shadow: inset 3px 0 0 #387ae2; }
.job-section-rail button.active svg { color: #2459ac; }
.job-primary-column { background: #fff; }
.detail-grid article { background: #f8fafd; border: 1px solid #dfe7f1; border-radius: 12px; padding: 13px; box-shadow: none; }
.job-activity-column,.job-activity-column > header { background: #f7f9fc; }
.customer-profile-summary { background: #f3f7fc; border-radius: 14px; box-shadow: none; }
.customer-profile-stats article { background: #fff; border-radius: 12px; box-shadow: none; }
.job-chat-messages .bubble { box-shadow: 0 1px 4px #17375a08; }
.job-chat-messages .bubble.inbound { background: #2563c9; box-shadow: none; }
.job-chat-messages .quote-card { border-radius: 16px; box-shadow: var(--wr-shadow); }
.job-chat-composer button { background: #2563dc; box-shadow: 0 2px 6px #2563eb18; }
/* Secondary text remains readable on pale surfaces at normal working sizes. */
#globalSearchButton kbd { color: #53677f; }
#notificationCount { background: #c93645; }
.dashboard-priority-grid :is(small,em),.metrics small,.select-wrap > span,
.job-list-summary > label,.customer-list-hint > span,
.dashboard-desk-filter,.dashboard-desk-caption > span,#dashboardDesk > footer > span,
.dashboard-finance-total > :is(span,small),#dashboardFinanceBars > div > span,
.dashboard-map-notice,#dashboardMapListLabel,.map-state > span,
[data-dashboard-job] > span > small,
.customer-cell > span,.appliance-cell small,.job-number > small,.schedule-cell > span,
.parts-table td small,.parts-workspace td small,
.timeline-day-head,.timeline-day-head small,.schedule-card-open small,#dispatchQueue > footer,
.calendar-people-picker > span,.settings-nav button small,
.integration-activity-empty > span,#integrationEventRange,[data-voice-settings-status],
.report-bar-row span,#reportBreakdown > div > span,.report-profitability-head > span,
.report-chart-column > :is(span,small),#reportAveragePayment,.profit-value { color: #52657e; }
.status-tabs button,.segmented button,.calendar-views button,.report-presets button,
.dashboard-map-tabs button { color: #50647f; }
.status-tabs button.active,.segmented button.active,.calendar-views button.active,
.report-presets button.active,.dashboard-map-tabs button.active { color: #2157a9; }
.status.quote,.status-picker.quote { color: #825000; background: #fff2db; }
.status.work,.status-picker.work { color: #075e89; background: #e3f4fc; }
.status.complete,.status-picker.complete { color: #12643c; background: #e6f6ef; }
.map-state.warning > strong { color: #8a530d; }
.staff-access-row .staff-state:not(.email-failed):not(.email-unknown):not(.email-not-sent) { color: #126c4d; }
#dashboardMapState > strong { color: #8a530d; }
#dashboardScheduleList [data-dashboard-job] > span > small { color: #52657e; }
#metricWeek > b,.report-profitability-table .profit-value { color: #126c4d; }
#partsRows td small,#partsMobileList .part-category { color: #52657e; }
#partsMobileList article > p { color: #52657e; }
#reportAveragePayment { color: #d4e4f5; }
body[data-surface="legal"] footer { color: #52657e; }
.accounting-status.paid,.ageing-status.current { color: #12643c; }
.two-week-head,.month-weekday { color: #52657e; }
.quote-editor > header,.invoice-panel,.quote-totals { background: #f5f8fc; border-radius: 12px; box-shadow: none; }
.create-drawer .create-actions { background: #fff; backdrop-filter: none; box-shadow: 0 -1px 0 var(--wr-line); }
dialog::backdrop { background: #12243b66; backdrop-filter: blur(3px); }
#smsInboxRows article { background: #fff; box-shadow: none; }
.auth-gate { background: radial-gradient(ellipse at 15% 0%,#315e8566,transparent 65%),#14263e; }
.auth-card { background: #fff; border: 1px solid #dde5ef; box-shadow: 0 24px 72px #07152930; }
body[data-surface="legal"] > header { background: #17375a; box-shadow: none; border-bottom-color: #87bde6; }
body[data-surface="legal"] article { border-color: var(--wr-line); border-radius: 16px; box-shadow: var(--wr-shadow); }
body[data-surface="legal"] .legal-nav a { border-radius: 10px; background: #fff; box-shadow: 0 1px 3px #17375a06; }
body[data-surface="legal"] .legal-nav a:hover { background: #eff5fc; border-color: #acbfd8; }
body[data-surface="legal"] .notice { background: #eff5fc; border-left-color: #3c7cd1; box-shadow: none; }
body[data-surface="verification"] { background: radial-gradient(ellipse at 50% 0%,#e0ecfb,transparent 65%),var(--wr-canvas); }
body[data-surface="verification"] > main { background: #fff; border: 1px solid var(--wr-line); border-radius: 20px; box-shadow: var(--wr-shadow-raised); }
body[data-surface="verification"] button { background: #2563db; box-shadow: 0 2px 6px #2563eb18; }
body[data-surface="verification"] .note { background: #f5f8fc; padding: 16px; border: 1px solid var(--wr-line); border-radius: 12px; }
@keyframes surface-appear { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion:no-preference) {
  .auth-card,.quick-switch-dialog[open],.sms-inbox-dialog[open] { animation: surface-appear 160ms var(--wr-ease); }
}
@media (hover:hover) {
  .metrics article:hover,.dashboard-priority-grid > button:hover { border-color: #b8cce5; box-shadow: var(--wr-shadow-raised); }
}
@media (min-width:761px) and (max-width:1150px) {
  .main-nav :is(a,.nav-action),.settings-link { justify-content: flex-start; }
  .main-nav :is(a,.nav-action) span,.settings-link span,.profile-card > div { display: block; }
  .main-nav :is(a,.nav-action) b,.main-nav :is(a,.nav-action) i { display: inline-flex; }
  .profile-card > button { display: grid; }
}
@media (max-width:900px) {
  .top-actions .personal-work-links { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width:760px) {
  .app-shell > .topbar { padding-bottom: 18px; }
  .page-title .eyebrow { display: none; }
  .mobile-menu { background: #fff; box-shadow: 0 1px 3px #17375a08; }
  .accounting-range .segmented { flex-wrap: wrap; }
  .accounting-toolbar .accounting-range .segmented { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .report-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible; }
  .report-presets button { min-width: 0; padding: 8px 6px; font-size: 12px; }
  .customer-list-tools .search-box { width: 100%; max-width: none; flex: 1; }
  .settings-nav { scrollbar-width: thin; scrollbar-color: #b4c8e2 transparent; }
  .accounting-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics.accounting-metrics article { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 15px; }
  .accounting-metrics strong { display: block; margin-top: 5px; font-size: 24px; }
  .accounting-metrics small { display: block; line-height: 1.5; }
  .detail-grid article { padding: 12px; }
  .mfa-manage { padding: 17px; }
  dialog::backdrop { backdrop-filter: none; }
}
@media (max-width:350px) { .accounting-metrics { grid-template-columns: 1fr; } }
@media print {
  body { background: #fff !important; }
  body[data-surface] :is(main,article,.quote-dialog,.quote-document,.document-page) { background: #fff !important; box-shadow: none !important; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}