/* Alohi experience: readable surfaces, semantic color, and deliberate motion. */
:root {
  --alohi-primary: #315ee8;
  --alohi-primary-hover: #2348c5;
  --alohi-background: #eef1f8;
  --alohi-surface: #fff;
  --alohi-surface-secondary: #e9efff;
  --alohi-text: #18233d;
  --alohi-muted: #53627b;
  --alohi-border: #d5deed;
  --alohi-success: #087c60;
  --alohi-warning: #9b5300;
  --alohi-danger: #b12d50;
  --alohi-radius-lg: 20px;
  --alohi-shadow-sm: 0 4px 20px #172c5410;
  --alohi-shadow-md: 0 20px 55px #172c5426;
  --sidebar-width: 244px;
  --tone: #315ee8;
  --tint: #eaf0ff;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
body:not(.auth-screen) { background: radial-gradient(ellipse at 100% 0,#e5e8ff 0,transparent 45%),var(--alohi-background); }
.tone-blue { --tone:#2854d4; --tint:#e7eeff; }
.tone-purple { --tone:#7042c1; --tint:#f0e8ff; }
.tone-amber { --tone:#995400; --tint:#fff0d5; }
.tone-mint { --tone:#067859; --tint:#ddf6eb; }
.tone-rose { --tone:#b22f55; --tint:#ffe8ef; }
.sidebar { color: #f4f7ff; background: linear-gradient(170deg,#1c2949,#111b32); border-right: 1px solid #273653; overflow-y: auto; padding: 24px 14px 18px; scrollbar-width: thin; scrollbar-color:#42516c transparent; }
.brand { color: #fff; font-size: 26px; gap: 12px; padding: 0 10px 28px; letter-spacing: -.05em; }
.brand-mark { color: #fff; background: linear-gradient(140deg,#79a9ff,#5260eb); border-radius: 13px; width: 38px; height: 38px; box-shadow: inset 0 1px 1px #ffffff70,0 5px 20px #07163230; }
.sidebar-nav { gap: 4px; }
.nav-section-label { margin: 18px 13px 7px; color: #93a6ca; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.nav-section-label:first-child { margin-top: 0; }
.sidebar-nav a,.sidebar-footer > a { color: #c3cde2; font-size: 13px; font-weight: 550; min-height: 44px; padding: 7px 10px; gap: 11px; border: 1px solid transparent; border-radius: 12px; }
.sidebar-nav a > i,.sidebar-footer > a > i { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 9px; color: #fff; background: #4868d9; font-size: 14px; box-shadow: inset 0 1px 1px #ffffff30; }
.sidebar-nav a[data-nav=schedule] > i,.sidebar-nav a[data-nav=my-schedule] > i { background: #d2526a; }
.sidebar-nav a[data-nav=jobs] > i,.sidebar-nav a[data-nav=field] > i { background: #229079; }
.sidebar-nav a[data-nav=quotes] > i,.sidebar-nav a[data-nav=services] > i { background: #9060d3; }
.sidebar-nav a[data-nav=employees] > i { background: #bc792a; }
.sidebar-nav a[data-nav=payouts] > i,.sidebar-nav a[data-nav=my-pay] > i { background: #278caa; }
.sidebar-nav a[data-nav=reports] > i { background: #b25393; }
.sidebar-footer > a > i { background: #576984; }
.sidebar-nav a:hover,.sidebar-footer > a:hover { color: #fff; background: #ffffff0c; }
.sidebar-nav a.active,.sidebar-footer > a.active { color: #fff; background: #ffffff15; border-color: #ffffff20; box-shadow: inset 3px 0 0 #8faeff; }
.sidebar-footer { padding-top: 20px; }
.profile-chip { border-color: #ffffff20; padding-top: 16px; }
.profile-chip > span:nth-child(2) { min-width: 0; }
.profile-chip strong { font-size: 12px; }
.profile-chip small { color: #a7b8d5; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 125px; }
.profile-chip > button { color: #b7c7e2; }
.avatar { background: #dce5ff; color: #334ca0; }
.topbar { background: #f7f9ffdc; backdrop-filter: blur(24px) saturate(150%); border-bottom: 1px solid #d7dfef; height: 76px; padding-inline: 30px; }
.global-search > input { font-size: 14px; height: 42px; background: #e8edf6; border: 1px solid #d5deed; border-radius: 12px; }
.global-search > input::placeholder { color: #65728a; }
.global-search > input:focus { background: white; }
.global-search > kbd { background: #fff; border-color: #d5deed; }
.global-search-results { box-shadow: var(--alohi-shadow-md); border-radius: 16px; }
.search-result strong { font-size: 14px; }.search-result small,.search-state { font-size: 12px; }
.icon-button { background: #fff; border: 1px solid #dce3ee; border-radius: 13px; color: #425473; }
.notification-count { background: #c63658; min-width: 20px; height: 20px; font-size: 10px; }
.notification-dot { display: none; }
.workspace { padding: 108px clamp(20px,2.7vw,44px) 40px; }
.workspace > div { min-width: 0; }
.page-heading { margin-bottom: 25px; align-items: center; }
h1 { color: #172541; font-size: clamp(28px,3vw,40px); font-weight: 750; letter-spacing: -.05em; line-height: 1.16; }
.eyebrow { color: #53658a; font-size: 11px; font-weight: 750; letter-spacing: .11em; margin-bottom: 8px; }
.page-subtitle { color: #53627b; font-size: 14px; line-height: 1.6; max-width: 700px; margin-top: 9px; }
.panel { border: 1px solid #d5deed; border-radius: 20px; box-shadow: var(--alohi-shadow-sm); }
.panel-title { font-size: 18px; letter-spacing: -.03em; font-weight: 750; }
.panel-header { margin-bottom: 14px; gap: 12px; }
.text-link { font-size: 12px; text-decoration: none; white-space: nowrap; }
.btn { border-radius: 12px; font-size: 13px; font-weight: 650; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-primary { --bs-btn-bg:#315ee8; --bs-btn-border-color:#315ee8; --bs-btn-hover-bg:#2348c5; --bs-btn-hover-border-color:#2348c5; --bs-btn-active-bg:#2348c5; --bs-btn-active-border-color:#2348c5; --bs-btn-disabled-bg:#315ee8; --bs-btn-disabled-border-color:#315ee8; background: linear-gradient(180deg,#416ff5,#2f56db); color: #fff; box-shadow: inset 0 1px 0 #ffffff35,0 4px 10px #315ee825; }
.btn-primary:hover { background: #2348c5; }
.date-control,.filter-button,.payout-secondary { color: #344869; border: 1px solid #ccd7e9; border-radius: 11px; background: #fff; font-size: 13px; }
/* Overview */
.greeting-dot { color: #5e6aee; }
.overview-date { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #fff; border: 1px solid #ccd7e9; border-radius: 13px; color: #415ca5; }
.overview-date input { border: 0; color: #30405e; background: transparent; font-size: 13px; font-weight: 600; min-width: 0; }
.overview-hero { display: grid; grid-template-columns: minmax(0,1fr) 230px; align-items: center; gap: 24px; overflow: hidden; position: relative; padding: 30px 34px; margin-bottom: 20px; border-radius: 26px; color: #fff; background: radial-gradient(ellipse at 100% 100%,#7150c7 0,transparent 65%),linear-gradient(115deg,#203d92,#394caa); box-shadow: 0 12px 30px #24398826; }
.hero-copy { position: relative; z-index: 1; }
.hero-kicker { display: inline-flex; gap: 8px; align-items: center; color: #dce8ff; font-size: 12px; font-weight: 650; }
.hero-kicker > i { color: #ffd99e; font-size: 17px; }
.hero-copy h2 { max-width: 470px; margin: 16px 0 10px; color: white; font-size: clamp(25px,2.8vw,35px); line-height: 1.15; letter-spacing: -.04em; font-weight: 700; }
.hero-copy > p { max-width: 470px; margin-bottom: 20px; color: #dce5ff; font-size: 13px; line-height: 1.7; }
.hero-action { display: inline-flex; align-items: center; gap: 25px; padding: 11px 16px; color: #263f87; background: white; border-radius: 12px; font-size: 13px; font-weight: 750; text-decoration: none; box-shadow: 0 3px 8px #10225330; }
.hero-action:hover { color: #142d7d; background: #eaf0ff; }
.coverage-widget { display: grid; justify-items: center; gap: 15px; }
.coverage-ring { padding: 9px; width: 154px; height: 154px; border-radius: 50%; background: conic-gradient(#9fdcca var(--coverage),#ffffff20 0); box-shadow: 0 0 0 9px #ffffff05; }
.coverage-ring > span { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; border-radius: 50%; background: #42459b; }
.coverage-ring strong { font-size: 34px; letter-spacing: -.045em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.coverage-ring small { color: #dce5ff; font-size: 12px; }
.coverage-caption { color: #e0e8ff; font-size: 11px; text-align: center; }
.overview-metrics { gap: 14px; margin-bottom: 25px; }
.overview-metrics .metric { display: block; background: var(--tint); border: 1px solid color-mix(in srgb,var(--tone) 18%,white); border-radius: 20px; padding: 18px; min-height: 155px; text-decoration: none; position: relative; }
.overview-metrics .metric-top { color: #34435c; font-size: 12px; align-items: center; gap: 7px; }
.overview-metrics .metric-icon { color: var(--tone); background: #ffffffb8; width: 34px; height: 34px; border-radius: 11px; }
.overview-metrics .metric > strong { font-size: 32px; font-weight: 750; color: #1b2a45; letter-spacing: -.055em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.metric-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
.metric-bottom small { color: var(--tone); font-size: 11px; font-weight: 600; }
.metric-bottom > i { color: var(--tone); }
.overview-main-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,1fr); gap: 20px; align-items: start; }
.overview-agenda,.action-inbox,.overview-activity { padding: 22px; }
.section-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; background: #e9effc; color: #4162b4; font-size: 12px; border-radius: 8px; vertical-align: middle; }
.agenda-item { display: grid; grid-template-columns: 65px minmax(0,1fr) 12px; gap: 13px; padding: 17px 0; border-top: 1px solid #e5eaf3; text-decoration: none; }
.agenda-time { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #415374; }
.agenda-time strong { font-size: 12px; white-space: nowrap; }
.agenda-line { width: 2px; flex: 1; min-height: 30px; background: #dae3f3; position: relative; }
.agenda-line::before { position: absolute; width: 8px; height: 8px; left: -3px; top: 0; border-radius: 50%; background: #6f8fe5; content: ''; }
.agenda-service { color: #4768ad; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.agenda-content h3 { color: #1d2c46; font-size: 15px; margin: 4px 0 5px; font-weight: 700; }
.agenda-content p { color: #5b6a80; font-size: 12px; margin-bottom: 8px; }
.agenda-crew { display: inline-block; font-size: 11px; color: #087557; padding: 4px 8px; border-radius: 7px; background: #e6f6ef; }
.agenda-crew.needs-assignment { color: #935000; background: #fff0d8; }
.agenda-item > i { align-self: center; color: #788aa7; font-size: 12px; }
.action-inbox { border-top: 3px solid #c78630; background: linear-gradient(180deg,#fffaf0,#fff 170px); }
.inbox-total { background: #f9e6c7; color: #8b4c00; font-weight: 750; font-size: 14px; border-radius: 10px; padding: 5px 10px; }
.inbox-intro { color: #736049; font-size: 12px; margin: -3px 0 18px; }
.action-list { display: grid; gap: 9px; }
.action-card { display: grid; grid-template-columns: 37px minmax(0,1fr) auto 8px; align-items: center; gap: 10px; padding: 13px 10px; border-radius: 14px; color: #283956; border: 1px solid color-mix(in srgb,var(--tone) 16%,white); background: var(--tint); text-decoration: none; }
.action-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #fff; color: var(--tone); font-size: 18px; }
.action-card strong { display: block; font-size: 13px; }
.action-card small { display: block; font-size: 11px; color: #53627b; margin-top: 3px; }
.action-card b { color: var(--tone); font-size: 18px; font-variant-numeric: tabular-nums; }
.action-card > i { font-size: 10px; color: var(--tone); }
.inbox-footer { display: flex; align-items: center; gap: 8px; color: #49618e; margin-top: 20px; padding-top: 17px; border-top: 1px solid #e1e7f0; font-size: 12px; font-weight: 600; text-decoration: none; }
.inbox-footer > i:last-child { margin-left: auto; }
.quick-paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-block: 22px; }
.quick-paths > a { display: flex; align-items: center; gap: 12px; padding: 18px; background: #e3e9f6; border: 1px solid #cfd9eb; border-radius: 17px; text-decoration: none; }
.app-tile { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #fff; background: var(--tone); border-radius: 12px; box-shadow: inset 0 1px 0 #ffffff40; font-size: 18px; }
.quick-paths strong { display: block; color: #253959; font-size: 13px; }
.quick-paths small { display: block; color: #546684; font-size: 11px; margin-top: 3px; }
.quick-paths > a > i { margin-left: auto; color: #57709d; }
.activity-feed > div { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid #e7ecf4; }
.feed-icon { display: grid; place-items: center; width: 32px; height: 32px; background: #eef0ff; color: #665ac7; border-radius: 10px; }
.activity-feed strong { font-size: 12px; font-weight: 550; }.activity-feed time { color: #64738a; font-size: 11px; }
.designed-empty { display: grid; justify-items: center; text-align: center; gap: 9px; padding: 32px 15px; }
.designed-empty > span { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 18px; background: #e7eeff; color: #5269bf; font-size: 25px; margin-bottom: 6px; }
.designed-empty h3,.designed-empty h2 { margin: 0; font-size: 18px; }.designed-empty p { color: #5c6c84; font-size: 13px; max-width: 300px; margin: 0 0 8px; }
/* Shared feature layouts: stronger grouping and readable text. */
.people-metrics > div,.catalog-metrics article,.report-kpis article,.payout-metrics > div,.crew-overview > div { background: #e7eeff; border: 1px solid #cbd9f5; border-radius: 17px; box-shadow: none; }
.people-metrics > div:nth-child(2),.catalog-metrics article:nth-child(2),.report-kpis article:nth-child(2) { background: #e0f3ea; border-color: #bddfce; }
.people-metrics > div:nth-child(3),.catalog-metrics article:nth-child(3),.report-kpis article:nth-child(3) { background: #fff0d8; border-color: #ecd3aa; }
.people-metrics > div:nth-child(4),.catalog-metrics article:nth-child(4),.report-kpis article:nth-child(4) { background: #eee6ff; border-color: #d8c9ed; }
.people-metrics strong,.catalog-metrics strong,.report-kpis strong { font-size: 25px; letter-spacing: -.035em; }
.people-metrics small,.catalog-metrics small,.report-kpis small { font-size: 12px; color: #435571; }
.summary-icon { border-radius: 12px; }.summary-icon.mint { color: #08765a; background: #c5ebdc; }.summary-icon.sand { color: #945400; background: #f9ddb0; }.summary-icon.rose { color: #aa3455; background: #ffdce6; }
.employee-toolbar,.job-toolbar,.directory-toolbar,.quote-list-tools,.catalog-tools,.schedule-controls,.payout-command,.report-filter { background: #f0f4fb; border-bottom-color: #d5deed; }
.segment-control,.schedule-views { padding: 4px; border-radius: 12px; background: #dfe6f3; gap: 3px; }
.segment-control button,.schedule-views button { min-height: 36px; font-size: 12px; border-radius: 9px; color: #495a79; }
.segment-control button.active,.schedule-views button.active { background: #fff; color: #284fbd; box-shadow: 0 2px 6px #253d6b20; }
.employee-list-header,.job-list-header,.report-table-head,.earnings-head { background: #e6edf8; color: #4c6082; font-size: 11px; padding-block: 14px; border-bottom: 1px solid #cdd9ed; }
.employee-row,.job-row { border-color: #e1e7f2; min-height: 90px; }
.employee-row:nth-child(2n),.job-row:nth-child(2n) { background: #f7f9fd; }
.employee-row:hover,.job-row:hover { background: #ecf2ff; }
.employee-person strong,.job-primary strong,.customer-item strong { font-size: 15px; color: #203658; }
.employee-person small,.employee-cell small,.job-primary small,.job-time small,.customer-item small { font-size: 12px; color: #596a85; }
.employee-cell strong,.job-time strong { font-size: 13px; }
.list-search input { background: #fff; height: 42px; font-size: 13px; }
.row-action { background: #e8eefa; color: #365ca9; border-radius: 10px; min-width: 32px; min-height: 36px; }
.customer-item.active,.quote-list-card.active,.catalog-card.active,.field-job-card.active { background: #e8efff; border-color: #94b0ed; box-shadow: inset 3px 0 0 #3c6ade; }
.customer-profile-head,.quote-editor-head,.catalog-editor-head,.field-detail-head { background: linear-gradient(110deg,#e8efff,#f5f3ff); border-bottom: 1px solid #d0dcf0; }
.customer-side-card,.property-facts,.field-summary,.detail-facts { background: #f0f4fc; border-color: #d5deed; border-radius: 13px; }
.job-command { background: linear-gradient(120deg,#233b6c,#3c4f88); color: #fff; border-color: #2a4375; }
.job-command small,.job-command p { color: #d4dff5; }
.unassigned-panel { border: 1px solid #e5bf86; background: #fff8ec; }
.unassigned-head h2 { color: #825000; font-size: 17px; }.unassigned-head p { color: #795f3b; font-size: 12px; }
.unassigned-head > span,.unassigned-head > strong { background: #fbe3bb; color: #925500; }
.dispatch-status { background: #e6edf9; color: #3d557e; font-size: 12px; }
.dispatch-job { border-radius: 10px; border-left: 4px solid #2e7fba; box-shadow: 0 2px 6px #1f477d16; }
.dispatch-job.needs-crew { border-left-color: #c18422; background: #fff0d5; }
.dispatch-job strong { font-size: 12px; }
.timeline-axis { background: #e9eef8; }.timeline-band.available { background-color: #e4f5ed; }
.crew-roster summary { color: #315488; font-size: 13px; padding: 8px; }
.job-status,.status-badge,.pay-status,.quote-status { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 8px; letter-spacing: .01em; }
.job-status.scheduled,.quote-status.sent,.quote-status.viewed { color: #2456b6; background: #e0ebff; }
.job-status.inprogress,.pay-status.pending,.quote-status.ready { color: #965400; background: #ffe9bd; }
.job-status.completed,.status-badge.active,.pay-status.paid,.quote-status.accepted,.quote-status.converted { color: #067254; background: #cef0df; }
.job-status.cancelled,.quote-status.declined,.quote-status.voided { color: #a3264a; background: #ffe0e9; }
.job-priority { font-size: 12px; }.job-priority.urgent { color: #af2448; font-weight: 750; }
.field-tabs,.payout-tabs,.report-tabs,.notification-center > nav { padding: 8px; gap: 5px; background: #e7edf8; border-bottom: 1px solid #d0dced; }
.field-tabs button,.payout-tabs button,.report-tabs button,.notification-center > nav button { font-size: 13px; border-radius: 9px; min-height: 40px; }
.field-tabs button.active,.payout-tabs button.active,.report-tabs button.active,.notification-center > nav button.active { background: #fff; color: #315dcc; box-shadow: 0 2px 5px #263c6117; }
.notification-item { padding: 20px; }.notification-item.unread { background: #eaf0ff; border-left: 3px solid #4773ea; }.notification-item strong { font-size: 15px; }.notification-item small { font-size: 13px; line-height: 1.6; }.notification-item time { font-size: 11px; }.notification-unread { background: #3f6ae2; }
.notification-type { color: #5d50bd; background: #e7e2ff; border-radius: 13px; }
.notification-settings label b { font-size: 14px; }.notification-settings label small { font-size: 12px; }
.notification-settings input[type=checkbox] { appearance: none; width: 44px; height: 26px; background: #c6d0df; border-radius: 20px; position: relative; cursor: pointer; flex: 0 0 44px; }
.notification-settings input[type=checkbox]::after { content:''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 3px; left: 3px; box-shadow: 0 1px 3px #0002; transition: transform 180ms; }.notification-settings input[type=checkbox]:checked { background: #169c70; }.notification-settings input[type=checkbox]:checked::after { transform: translateX(18px); }
.revenue-chart > div > span { background: linear-gradient(0deg,#4d59c9,#7e95f2); border-radius: 7px 7px 0 0; }
.report-section-head h2 { font-size: 18px; }.report-section-head p,.report-table > div { font-size: 13px; }
.retention-card { background: #e5f4eb; color: #087355; }
.employee-welcome { background: linear-gradient(110deg,#263f83,#6853ac); color: #fff; padding: 26px; border-radius: 23px; }.employee-welcome h1 { color: white; }.employee-welcome p,.employee-welcome .eyebrow { color: #d8e5ff; }
.employee-pay-card { background: #e3f4eb; border-color: #b7dfca; }.employee-quick-grid > a { background: #e7edfa; border-color: #c9d7ee; }.employee-quick-grid > a > i:first-child { background: #4268d7; color: #fff; border-radius: 13px; }
/* Form readability; labels never compete with tiny metadata. */
.dialog-grid label,.quote-customer-grid label,.quote-notes label,.quote-totals label,.catalog-form-grid label,.stripe-form-grid > label { font-size: 12px; color: #405371; }
.dialog-grid input,.dialog-grid select,.dialog-grid textarea,.quote-customer-grid input,.quote-customer-grid select,.quote-notes textarea,.catalog-form-grid input,.catalog-form-grid select,.catalog-form-grid textarea,.stripe-form-grid input,.stripe-form-grid select { font-size: 14px; min-height: 42px; border: 1px solid #c5d2e6; border-radius: 10px; color: #243655; background: #fff; }
.quote-editor-head p,.catalog-editor-head p,.quote-section-title p,.catalog-subhead small,.catalog-help,.stripe-brand p,.stripe-security,.stripe-form-grid label > small { font-size: 12px; line-height: 1.5; }
.quote-section-title h3,.catalog-form-grid h3,.stripe-brand h2 { font-size: 16px; }
.quote-line label,.quote-line input,.quote-line textarea,.quote-line-main strong,.quote-line > b,.quote-totals p { font-size: 12px; }
.quote-totals { background: #e7eefb; }.quote-totals .grand { font-size: 18px; }
.catalog-card strong { font-size: 14px; }.catalog-card small,.catalog-card em,.catalog-card b { font-size: 11px; }
.catalog-tools input,.catalog-tools select,.quote-list-tools input,.quote-list-tools select { font-size: 13px; }
.stripe-summary small { font-size: 10px; }.stripe-summary strong { font-size: 13px; }.stripe-summary > div { background: #eaf0fb; }
/* Interaction and motion: limited attention cues, continuous progress only while busy. */
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button,.btn,a[data-route],input,select,textarea { transition: background-color 180ms ease,box-shadow 180ms ease,border-color 180ms ease,transform 180ms ease; }
button:active:not(:disabled),.btn:active,a.metric:active,.action-card:active { transform: scale(.975); }
@media (hover:hover) { .overview-metrics .metric:hover,.quick-paths > a:hover,.action-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px #233b6517; }.agenda-item:hover { background: #f4f7fe; } }
:focus-visible { outline: 3px solid #3665e3 !important; outline-offset: 3px; }
input:focus,select:focus,textarea:focus { box-shadow: 0 0 0 3px #426ce51c; border-color: #5a81de; }
button:disabled { cursor: not-allowed; opacity: .65; }
dialog { border: 1px solid #cbd7eb; border-radius: 24px !important; box-shadow: 0 30px 100px #101d4b50; }
dialog header { background: #edf2fc; border-bottom: 1px solid #d6e0ef; }dialog h2 { font-size: 21px; }dialog footer { background: #f3f6fc; border-top: 1px solid #dce4f2; }
dialog[open] { animation: sheet-in 340ms cubic-bezier(.16,1,.3,1); }
dialog::backdrop { background: #121e3b70; backdrop-filter: blur(7px); }
.alohi-toast:not([hidden]) { animation: sheet-in 340ms cubic-bezier(.16,1,.3,1); background: #183b33; color: white; border: 1px solid #3f776a; border-radius: 16px; box-shadow: var(--alohi-shadow-md); font-size: 14px; padding: 16px 20px; }.alohi-toast.error { background: #942d47; border-color: #bb516d; }
.workspace > .page-enter { animation: page-in 420ms cubic-bezier(.16,1,.3,1); }
.overview-metrics .metric { animation: page-in 500ms cubic-bezier(.16,1,.3,1) both; }.overview-metrics .metric:nth-child(2) { animation-delay: 65ms; }.overview-metrics .metric:nth-child(3) { animation-delay: 130ms; }.overview-metrics .metric:nth-child(4) { animation-delay: 195ms; }
[data-attention] .metric-icon,.action-card[data-attention] .action-icon { animation: attention-ring 1.6s ease-out 2; animation-delay: .7s; }
.notification-count:not([hidden]) { animation: attention-ring 1.6s ease-out 2; }
.notification-item.unread .notification-unread { animation: attention-ring 1.6s ease-out 2; }
.schedule-loading span,.dashboard-skeleton span { background: linear-gradient(100deg,#dce5f6 25%,#f7faff 45%,#dce5f6 65%); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; border-radius: 14px; }
.dashboard-skeleton { display: grid; gap: 18px; }.dashboard-skeleton span { display: block; height: 150px; }.dashboard-skeleton span:first-child { height: 265px; }
.activity-indicator { position: fixed; z-index: 2000; top: 16px; left: calc(50% + var(--sidebar-width)/2); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid #5c6b8e; border-radius: 99px; background: #172540f2; color: #fff; box-shadow: 0 7px 25px #14234c40; font-size: 13px; pointer-events: none; }
.activity-indicator[hidden] { display: none; }.activity-spinner { width: 16px; height: 16px; border: 2px solid #ffffff30; border-top-color: #aebfff; border-radius: 50%; animation: activity-spin .7s linear infinite; }
.route-error { padding: 32px; background: #fff; border: 1px solid #d5deed; border-radius: 20px; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheet-in { from { opacity: 0; translate: 0 24px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes attention-ring { 0% { box-shadow: 0 0 0 0 #bc822b40; } 80%,100% { box-shadow: 0 0 0 9px #bc822b00; } }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
/* Sign-in and smaller screens */
.auth-screen { overflow: auto; }.auth-screen .activity-indicator { left: 50%; }
.login-story { background: radial-gradient(ellipse at 0 0,#46629d,transparent 65%),linear-gradient(145deg,#233657,#302559); }
.login-story-copy { padding-block: 3rem; }.login-story-copy h1 { font-family: inherit; font-weight: 650; letter-spacing: -.06em; }.login-story-copy .eyebrow { color: #c3d6ff; }.login-story-copy > p:last-child { color: #d3def3; }.login-proof i { color: #bdd6ff; }
.login-form-side { background: radial-gradient(ellipse at 90% 5%,#dce4ff,transparent 55%),#eef1f8; }
.login-card { padding: 32px; width: min(100%,490px); border: 1px solid #d8e0ef; background: #fff; border-radius: 28px; box-shadow: 0 24px 80px #12354514; }
.login-card h2 { font-size: 29px; }.login-field > span { font-size: 13px; }.login-field input { font-size: 15px; }.login-options,.login-help,.test-fill { font-size: 12px; }
.login-submit.loading i { animation: activity-spin .8s linear infinite; }.login-submit.loading i::before { content: ''; display: block; width: 16px; height: 16px; border: 2px solid #ffffff50; border-top-color: white; border-radius: 50%; }
@media (max-width:1200px) { .overview-main-grid { grid-template-columns: minmax(0,1fr); }.overview-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }.overview-metrics .metric { padding: 14px; }.metric-top { flex-wrap: wrap; }.overview-metrics .metric > strong { font-size: 27px; }.quick-paths { grid-template-columns: repeat(3,minmax(0,1fr)); }.quick-paths > a { padding: 13px; }.quick-paths small { display: none; } }
@media (min-width:768px) and (max-width:1000px) { .login-page { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }.login-form-side { padding: 20px; }.login-card { padding: 24px; }.overview-hero { grid-template-columns: minmax(0,1fr) 160px; padding: 24px; }.coverage-ring { width: 125px; height: 125px; } }
@media (max-width:767.98px) {
  .topbar { height: 68px; padding-inline: 10px; gap: 6px; }.topbar-actions { gap: 5px; }.topbar .icon-button { width: 38px; height: 40px; }.quick-add { width: 40px; min-height: 40px; }
  .global-search > input { font-size: 16px; padding-right: 8px; }.global-search { min-width: 0; }
  .sidebar { background: #19253f; }.sidebar-nav a { font-size: 14px; }.sidebar-nav a > i { width: 31px; height: 31px; flex-basis: 31px; }
  .workspace { margin-left: 0; padding: 91px 16px calc(110px + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 15px; }h1 { font-size: 30px; }.page-subtitle { font-size: 13px; }.eyebrow { font-size: 10px; }
  .overview-date { padding: 7px 10px; }.overview-date input { font-size: 14px; }
  .overview-hero { grid-template-columns: minmax(0,1fr); padding: 24px; border-radius: 23px; gap: 22px; }.hero-copy h2 { font-size: 30px; }.coverage-widget { grid-template-columns: 78px minmax(0,1fr); gap: 15px; justify-items: start; align-items: center; padding-top: 17px; border-top: 1px solid #ffffff25; }.coverage-ring { width: 78px; height: 78px; padding: 5px; }.coverage-ring strong { font-size: 20px; }.coverage-ring small { font-size: 9px; }.coverage-caption { text-align: left; font-size: 12px; }
  .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.overview-metrics .metric { min-height: 157px; padding: 15px; }.overview-metrics .metric-top { font-size: 11px; }.overview-metrics .metric > strong { font-size: 29px; }.overview-metrics .metric-icon { width: 29px; height: 29px; }
  .overview-main-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }.overview-agenda,.action-inbox,.overview-activity { padding: 18px; }.panel-title { font-size: 17px; }.action-inbox { grid-row: 1; }
  .quick-paths { grid-template-columns: minmax(0,1fr); gap: 9px; }.quick-paths small { display: block; }.quick-paths > a { padding: 14px; }
  .activity-feed > div { grid-template-columns: 32px minmax(0,1fr); }.activity-feed time { grid-column: 2; margin-top: -8px; }
  .mobile-nav { left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); padding: 5px; background: #ffffffed; border: 1px solid #cbd6e9; border-radius: 23px; box-shadow: 0 8px 35px #192c5630; backdrop-filter: blur(24px) saturate(160%); }
  .mobile-nav a { border-radius: 18px; min-width: 0; font-size: 10px; color: #586986; min-height: 54px; }.mobile-nav a.active { background: #e5ecff; color: #2955d3; }.mobile-nav a.active i { transform: translateY(-1px); }.mobile-nav i { font-size: 20px; }
  .activity-indicator { top: 77px; left: 50%; }.login-card { padding: 24px; margin-top: 16px; }.login-card h2 { font-size: 26px; }.login-mobile-brand { margin-bottom: 28px; }
  .workspace input,.workspace select,.workspace textarea,dialog input,dialog select,dialog textarea { font-size: 16px; }
  dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }.dialog-grid { gap: 15px; }
  .employee-toolbar,.job-toolbar { flex-wrap: wrap; }.segment-control { max-width: 100%; overflow-x: auto; }.segment-control button { white-space: nowrap; }
  .quote-customer-grid,.stripe-form-grid { grid-template-columns: minmax(0,1fr); }.catalog-form-grid .dialog-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .activity-indicator { display: none; }.overview-hero { background: white; color: black; border: 1px solid #999; }.hero-copy h2,.hero-copy p { color: black; } }
/* Detail sheets and editors use the same readable scale as the directory. */
.employee-profile-section h3,.field-section-title h3 { font-size: 15px; }
.employee-profile-section p,.employee-profile-facts,.dialog-job,.dialog-note,.dialog-feedback,.incident-description { font-size: 13px; line-height: 1.65; }
.employee-profile-facts small { font-size: 11px; }.employee-profile-facts strong { font-size: 13px; }
.quote-editor-actions .btn,.quote-list-card strong,.catalog-editor-head .btn,.report-run { font-size: 13px; }
.quote-list-card p,.quote-list-card small,.quote-list-card em,.quote-history summary,.quote-history p,.catalog-history p { font-size: 11px; }
.customer-side-card h3,.section-heading h2 { font-size: 16px; }.customer-side-card p,.customer-side-card small,.property-facts small { font-size: 12px; }
.field-job-copy strong,.field-detail-head h2 { font-size: 16px; }.field-job-copy small,.detail-facts small,.field-sync { font-size: 12px; }.field-section p,.checklist-item,.field-note { font-size: 13px; }
.earning-row,.rule-card,.batch-card { font-size: 13px; }.earning-row small,.rule-card small,.batch-card small { font-size: 11px; }
.notification-settings input[type=checkbox]:focus-visible { outline-offset: 4px; }
.quote-list-panel,.quote-editor,.catalog-browser,.catalog-editor { padding: 0; }
.quote-customer-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.quote-customer-grid > label { grid-column: span 2; min-width: 0; }
.quote-customer-grid > label:nth-child(-n+2) { grid-column: span 3; }
.quote-customer-grid input,.quote-customer-grid select { width: 100%; min-width: 0; }
.quote-editor-head { flex-wrap: wrap; }.quote-editor-head > div:first-child { min-width: 0; }.quote-editor-head h2 { overflow-wrap: anywhere; }
.quote-section-title { flex-wrap: wrap; }.quote-section-title > div:last-child { flex-wrap: wrap; }
.quote-list-card > span:first-child { overflow-wrap: anywhere; }
@media (max-width:767.98px) { .quote-customer-grid { grid-template-columns: minmax(0,1fr); }.quote-customer-grid > label,.quote-customer-grid > label:nth-child(-n+2) { grid-column: 1; }.quote-editor-actions { justify-content: flex-start; } }
button[aria-busy=true]::after { content: ''; display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; margin-left: 7px; vertical-align: middle; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: activity-spin .7s linear infinite; }
@media (max-width:767.98px) { .catalog-metrics,.report-kpis,.people-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.catalog-metrics article { padding: 13px; gap: 9px; }.catalog-metrics article > i { width: 30px; height: 30px; flex: 0 0 30px; }.catalog-metrics strong { font-size: 23px; }.catalog-metrics small { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { button[aria-busy=true]::after { animation: none; } }

.brevo-settings .stripe-brand > span { background: #d7f3e4; color: #16744b; }
.brevo-help { padding: 15px; border-radius: 14px; background: #eef8f3; color: #244e3c; font-size: 13px; }
.brevo-help p { margin: 8px 0; line-height: 1.6; }
.brevo-help a { color: #126544; font-weight: 650; }
.brevo-settings[aria-busy=true] .stripe-brand > span { animation: brevo-pulse 1s ease-in-out infinite alternate; }
@keyframes brevo-pulse { to { opacity: .45; transform: scale(.92); } }
@media(prefers-reduced-motion:reduce) { .brevo-settings[aria-busy=true] .stripe-brand > span { animation: none; } }

.job-quote-reference { display:flex; gap:12px; align-items:center; background:#edf2ff; border:1px solid #cddaf9; border-radius:12px; padding:14px; margin:16px 0; color:#3558a6; }
.job-quote-reference > i { font-size:24px; }.job-quote-reference small { display:block; font-size:11px; margin-bottom:3px; }.job-quote-reference a { color:#244bab; font-weight:700; }
.job-note-section { margin:14px 0; padding:14px; background:#f5f7fb; border-radius:12px; }.job-note-section h3 { font-size:13px; color:#344d70; margin:0 0 8px; }.job-note-section p { font-size:14px; color:#293b53; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }

.quote-slot-picker { margin:18px 0; padding:18px; border:1px solid #d5e0f3; border-radius:16px; background:#f1f5fc; }.quote-slot-picker > header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }.quote-slot-picker h3 { margin:0; font-size:17px; }.quote-slot-picker header p,.quote-slot-picker > p { font-size:12px; color:#546b8d; }.quote-slot-picker header > div { flex:1; }.quote-slot-picker select { padding:8px; border-radius:8px; border:1px solid #cbd6e7; }.quote-slot-picker [data-slot-selected] { color:#254faf; font-weight:700; }.quote-slot-picker .staffing-results { max-height:300px; }.quote-slot-picker[aria-busy=true] { opacity:.7; }