/* ═══════════════════════════════════════════════════════════════════════════
   Schedule - ONE design over the synced HCP job mirror: a dispatch timeline.
   Day: technicians down the left, time running left to right, cropped to the
   working hours chosen on the toolbar slider (9a-6p default). Week: booked vs
   open 3-hour slots per day that click into the Day board. Self-contained;
   reuses the brand tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */
.sched-view {
  --st-scheduled: #3A6EA8; --st-scheduled-bg: #E9F1F9;
  --st-inprogress: #D39A2E; --st-inprogress-bg: #F9F1DF;
  --st-complete: #4BAA78; --st-complete-bg: #E9F5EE;
  --st-canceled: #D65F4F; --st-canceled-bg: #FCEBE7;
  --st-needs: #7B8190; --st-needs-bg: #FFFDF9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── toolbar (shared) ── */
.sched-toolbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 4px 10px;
  padding-bottom: 0;
}
.sched-toolbar > .sched-toolbar-nav { justify-self: start; }
.sched-toolbar > .sched-datenav { justify-self: center; }
.sched-toolbar > .sched-toolbar-actions { justify-self: end; }
/* The "Synced" note sits on its own row under the right cluster — inside the
   actions flex row it wraps to a second line and pushes Follow-ups + Day/Week
   above the toolbar's shared centerline. (:empty keeps the row collapsed.) */
.sched-toolbar > .sched-updated { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
/* prev/next read as ONE step control: a joined segmented pair (Today resets,
   the pair steps — two different verbs, two different shapes) */
.sched-datenav { display: inline-flex; align-items: center; gap: 8px; }
.sched-datenav .sched-step { border-radius: 999px; }
.sched-toolbar-nav, .sched-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.sched-toolbar-nav { flex-wrap: wrap; }
.sched-toolbar-actions { flex-wrap: nowrap; }
.sched-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--sw-ink, #373B4D);
  background: var(--sw-card-lift, #FFFDF9); border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 12px; padding: 8px 13px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(55, 59, 77, 0.04);
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sched-btn:hover { border-color: #D9D1C4; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(55, 59, 77, 0.10); }
.sched-btn--primary { color: #fff; background: var(--sw-orange, #F38A3F); border-color: var(--sw-orange-dark, #C66518); }
.sched-btn--primary:hover { background: var(--sw-orange-dark, #C66518); }
.sched-btn.is-busy { opacity: .6; pointer-events: none; }
.sched-step { padding: 7px 9px; }
.sched-range-label { font-size: 14px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); margin-left: 6px; }
.sched-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--sw-muted, #7B8190); white-space: nowrap; }
.sched-updated::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sw-green, #4BAA78); flex: none; }
.sched-updated.is-stale { color: #C66518; }
.sched-updated.is-stale::before { background: var(--sw-gold, #D39A2E); }
.sched-updated:empty { display: none; }

/* Day | Week segmented toggle: a soft inset pill with a gliding thumb */
.sched-modeswitch { position: relative; display: inline-flex; padding: 3px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); }
.sched-mode-btn { position: relative; z-index: 1; width: 72px; padding: 7px 0; border: 0; background: transparent; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 750; text-align: center; color: var(--sw-muted, #7B8190); cursor: pointer; transition: color 0.2s ease; }
.sched-mode-btn:hover:not(.is-active) { color: var(--sw-ink, #373B4D); }
.sched-mode-btn.is-active { color: var(--sw-orange-dark, #C66518); }
@supports selector(:has(*)) {
  .sched-modeswitch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 72px; height: calc(100% - 6px); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); box-shadow: 0 1px 3px rgba(55, 59, 77, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
  .sched-modeswitch:has(.sched-mode-btn:last-child.is-active)::before { transform: translateX(72px); }
}
@supports not (selector(:has(*))) {
  .sched-mode-btn.is-active { background: var(--sw-card-lift, #FFFDF9); box-shadow: 0 1px 3px rgba(55, 59, 77, 0.18); }
}

.sched-body { position: relative; min-height: 200px; }
.sched-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 200px; padding: 24px; color: var(--sw-muted, #7B8190); font-size: 14px;
}
.sched-loading { color: #94a3b8; }
.sched-error { color: var(--st-canceled, #b91c1c); }

/* ── status pills + dots + legend + avatar (shared) ── */
.sched-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sched-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sched-pill--scheduled { color: var(--st-scheduled); background: var(--st-scheduled-bg); }
.sched-pill--inprogress { color: var(--st-inprogress); background: var(--st-inprogress-bg); }
.sched-pill--complete { color: var(--st-complete); background: var(--st-complete-bg); }
.sched-pill--canceled { color: var(--st-canceled); background: var(--st-canceled-bg); }
.sched-pill--needs { color: var(--st-needs); background: var(--st-needs-bg); }
.sched-ava { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); font-size: 10px; font-weight: 800; flex-shrink: 0; }
.sched-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 4px; }
/* The legend doubles as status filters: click to hide/show a bucket. */
.sched-leg { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; font-weight: 650; color: var(--sw-muted, #7B8190); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.sched-leg:hover { background: var(--sw-card-lift, #FFFDF9); border-color: var(--sw-border, #E5DED3); transform: translateY(-1px); }
.sched-leg:active { transform: translateY(0) scale(0.97); }
.sched-leg.is-off { opacity: 0.45; text-decoration: line-through; }
.sched-leg.is-off .sched-leg-dot { background: transparent; box-shadow: inset 0 0 0 2px #C9C2B4; }
.sched-leg-dot { width: 9px; height: 9px; border-radius: 50%; transition: background 0.18s ease, box-shadow 0.18s ease; }
.sched-leg-dot--scheduled { background: var(--st-scheduled); }
.sched-leg-dot--inprogress { background: var(--st-inprogress); }
.sched-leg-dot--complete { background: var(--st-complete); }
.sched-leg-dot--canceled { background: var(--st-canceled); }
.sched-leg-dot--needs { background: var(--st-needs); }



/* ══════════════════════════════════════════════════════════════════════
   LEFT MENU POLISH  (appended, additive, fully reversible)
   ----------------------------------------------------------------------
   Makes the admin sidebar calm and satisfying to click through: roomier
   spacing, one eased transition across hover/active/focus, a left accent
   bar that grows in instead of snapping, animated dropdowns, a keyboard
   focus ring, and a softer collapse press. Scoped under
   `.admin-body .admin-nav-v3` so it wins on cascade order without
   editing any rule above. Delete this whole block to revert.
   ══════════════════════════════════════════════════════════════════════ */

/* — roomier, calmer spacing between items and groups — */
.admin-body .admin-nav-v3 .admin-nav-group { gap: 5px; }
.admin-body .admin-nav-v3 .admin-nav-section { gap: 5px; }
.admin-body .admin-nav-v3 .admin-nav-group + .admin-nav-group { padding-top: 16px; margin-top: 6px; }
.admin-body .admin-nav-v3 .admin-nav-eyebrow { padding: 6px 12px 8px; }

/* — nav items: one eased transition across every state — */
.admin-body .admin-nav-v3 .admin-nav-item {
  border-radius: 12px;
  transition: background .2s cubic-bezier(.22, 1, .36, 1),
              color .2s cubic-bezier(.22, 1, .36, 1),
              border-color .18s ease,
              box-shadow .2s ease,
              transform .14s cubic-bezier(.22, 1, .36, 1);
}
.admin-body .admin-nav-v3 .admin-nav-item.v2 { padding: 10px 12px 10px 16px; }
.admin-body .admin-nav-v3 .admin-nav-item.v2:hover { background: var(--sw-card-lift, #FFFDF9); transform: translateX(2px); }
.admin-body .admin-nav-v3 .admin-nav-item.v2:active { transform: translateX(2px) scale(.98); }
.admin-body .admin-nav-v3 .admin-nav-item.v2:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sw-card, #FCFAF6), 0 0 0 4px rgba(243, 138, 63, .55);
}

/* active fill + icon ease in; active item does not nudge on hover */
.admin-body .admin-nav-v3 .admin-nav-item.v2.is-active {
  background: var(--sw-orange-soft, #FFEEDC);
  color: var(--sw-orange-dark, #C66518);
}
.admin-body .admin-nav-v3 .admin-nav-item.v2.is-active:hover { transform: none; }
.admin-body .admin-nav-v3 .admin-nav-item .admin-nav-icon { transition: color .2s ease; }

/* the left accent bar grows + fades in instead of snapping on */
.admin-body .admin-nav-v3 .admin-nav-item.v2::before {
  content: '';
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sw-orange, #F38A3F);
  opacity: 0;
  transform: scaleY(.3);
  transform-origin: center;
  transition: opacity .2s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1);
}
.admin-body .admin-nav-v3 .admin-nav-item.v2.is-active::before { opacity: 1; transform: scaleY(1); }

/* — dropdowns: a gentle pop-in for every menu / panel — */
@keyframes adminMenuIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-body .admin-nav-loc-picker[open] .admin-nav-loc-picker-menu,
.admin-body #admin-nav-loc-add-panel:not([hidden]),
.admin-body #user-menu[open] .user-menu-panel,
.admin-body #horizon-profile[open] .horizon-profile-menu {
  animation: adminMenuIn .18s cubic-bezier(.22, 1, .36, 1) both;
}
.admin-body .admin-nav-loc-picker-item,
.admin-body .admin-nav-loc-picker-summary { transition: background .16s ease, color .16s ease; }

/* — collapse toggle: geometry + press now live in 06-horizon-shell.css
     (the pull-tab handle). This file only adds its color accents below. — */

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .admin-body .admin-nav-v3 .admin-nav-item,
  .admin-body .admin-nav-v3 .admin-nav-item.v2::before,
  .admin-body .admin-nav-loc-picker[open] .admin-nav-loc-picker-menu,
  .admin-body #admin-nav-loc-add-panel:not([hidden]) { transition: none; animation: none; }
}
/* ═══════════════════ end LEFT MENU POLISH ═══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   DOCK SLIDING PILL  (appended, additive, reversible)
   ----------------------------------------------------------------------
   The bottom dock's active highlight is now a single glassy pill that
   glides between items: it rests on the active tab, follows the pointer,
   and travels all the way to the "+" (left) and the profile (right).
   Driven by setupDockPill() in admin-dashboard.js. The dock is also a
   touch more frosted/clean per the design philosophy. Delete this block
   plus that function to revert.
   ══════════════════════════════════════════════════════════════════════ */
.admin-body .horizon-dock {
  /* Transparent glass (per request) — replaces the near-solid white pill. Fill
     alpha sits at ~0.3 so the warm canvas + content still read THROUGH the bar
     while the tabs stay legible; a moderate blur backs them up, and the active
     tab's solid-orange pill still anchors it. */
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.34), rgba(255, 253, 249, 0.26));
  border-color: rgba(229, 222, 211, 0.7);
  box-shadow: 0 22px 54px rgba(55, 59, 77, 0.16), 0 5px 16px rgba(55, 59, 77, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.horizon-dock-wing,
.horizon-dock-center { position: relative; z-index: 1; }

.horizon-dock-pill {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: 0; height: 0;
  pointer-events: none;
  border-radius: 999px;
  /* faint glass pill on hover: translucent gradient + a frosted blur and a
     hairline edge so it reads as glass while sitting back in the bar */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.50));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 2px 9px rgba(55, 59, 77, 0.10);
  backdrop-filter: blur(7px) saturate(150%);
  -webkit-backdrop-filter: blur(7px) saturate(150%);
  opacity: 0;
  will-change: transform, width, height;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1),
              height .34s cubic-bezier(.22, 1, .36, 1),
              background .22s ease, box-shadow .22s ease, opacity .2s ease;
}
/* OBSOLETE (2026 dock redesign): the glide pill no longer rests on the active
   tab — the active tab carries its OWN solid-orange pill, and this pill is now a
   pure hover-glass affordance (see setupDockPill in admin-dashboard.js). The old
   orange "rested" variant used to get measured mid-expand and land misplaced over
   the neighbouring icon (the orange-blob glitch), so the orange is removed: even
   if the class is ever re-applied, the pill stays glass and can't smear. */
.horizon-dock-pill.is-active-target { background: inherit; box-shadow: inherit; }

/* The hover pill is only an affordance. The current section itself stays orange
   so the dock always has a clear "you are here" marker on desktop. */
.admin-body .horizon-tab:hover { background: transparent; color: var(--sw-ink, #373B4D); }
.admin-body .horizon-tab.is-active,
.admin-body .horizon-tab.is-active:hover {
  background: var(--sw-orange, #F38A3F);
  color: var(--sw-ink-deep, #373B4D);
  box-shadow: 0 4px 12px rgba(243, 138, 63, 0.26);
}

@media (prefers-reduced-motion: reduce) {
  .horizon-dock-pill { transition: background .22s ease, opacity .2s ease; }
}

/* ── DOCK GLIDE: the orange "you are here" pill that SLIDES between tabs ──
   Injected by setupDockGlide() (admin-dashboard.js). While it runs, the dock
   carries .dock-has-glide: the active tab's own orange goes transparent (rule
   below) and this pill carries the orange instead, gliding from the old tab to
   the new one. It avoids the old orange-blob glitch (a single measurement
   taken mid-label-expand) by CHASING the active tab's live box every frame
   until the expand settles, so it can never land misplaced. No JS or reduced
   motion → no class → the static orange active tab above still applies. */
.horizon-dock-glide {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: 0; height: 0;
  pointer-events: none;
  border-radius: 999px;
  background: var(--sw-orange, #F38A3F);
  box-shadow: 0 4px 12px rgba(243, 138, 63, 0.26);
  opacity: 0;
  will-change: transform, width, height;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1),
              height .34s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease;
}
.horizon-dock.dock-has-glide .horizon-tab.is-active,
.horizon-dock.dock-has-glide .horizon-tab.is-active:hover,
.admin-body .horizon-dock.dock-has-glide .horizon-tab.is-active,
.admin-body .horizon-dock.dock-has-glide .horizon-tab.is-active:hover {
  background: transparent;
  box-shadow: none;
  color: var(--sw-ink-deep, #373B4D);
}
@media (prefers-reduced-motion: reduce) {
  /* Belt + suspenders with the JS guard: no sliding pill, and the active tab
     keeps its own static orange so the marker never disappears. */
  .horizon-dock-glide { display: none; }
  .horizon-dock.dock-has-glide .horizon-tab.is-active,
  .horizon-dock.dock-has-glide .horizon-tab.is-active:hover,
  .admin-body .horizon-dock.dock-has-glide .horizon-tab.is-active,
  .admin-body .horizon-dock.dock-has-glide .horizon-tab.is-active:hover {
    background: var(--sw-orange, #F38A3F);
    box-shadow: 0 4px 12px rgba(243, 138, 63, 0.26);
  }
}
/* ═══════════════════ end DOCK SLIDING PILL ═══════════════════ */




/* ── shared toolbar controls: date picker, Day-only toggles, hours slider ── */
/* The toolbar's day/range label doubles as the date picker: an invisible
   date input covers it, so clicking the date opens the native calendar. */
.sched-datelabel { font: inherit; position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--sw-card-lift, #FFFDF9); border: 1px solid var(--sw-border, #E5DED3); border-radius: 12px; box-shadow: 0 1px 2px rgba(55, 59, 77, 0.04); cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.sched-datelabel:hover { border-color: #D9D1C4; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(55, 59, 77, 0.10); }
.sched-datelabel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sw-card, #FCFAF6), 0 0 0 4px rgba(243, 138, 63, 0.6); }
.sched-datelabel .sched-range-label { margin-left: 0; }
.sched-datelabel-caret { font-size: 10px; line-height: 1; color: var(--sw-muted, #7B8190); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.sched-datelabel:hover .sched-datelabel-caret { transform: translateY(1px); }

/* — calendar popover (the period label's date picker) — */
.sched-cal { position: absolute; z-index: 1100; width: 282px; padding: 14px; background: var(--sw-card-lift, #FFFDF9); border: 1px solid var(--sw-border, #E5DED3); border-radius: 16px; box-shadow: 0 18px 40px rgba(55, 59, 77, 0.16); animation: schedCalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes schedCalIn { from { opacity: 0; transform: translateY(-5px) scale(0.98); } }
.sched-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sched-cal-title { font-size: 13.5px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); }
.sched-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); color: var(--sw-ink, #373B4D); cursor: pointer; transition: background 0.16s ease, color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-cal-nav:hover { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); transform: translateY(-1px); }
.sched-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.sched-cal-dow { text-align: center; font-size: 10px; font-weight: 850; letter-spacing: 0.05em; color: var(--sw-muted, #7B8190); padding: 4px 0; }
.sched-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sched-cal-day { font: inherit; width: 34px; height: 32px; margin: 0 auto; border: 0; border-radius: 999px; background: transparent; font-size: 12.5px; font-weight: 700; color: var(--sw-ink, #373B4D); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.14s ease, color 0.14s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-cal-day:hover { background: var(--sw-card-lift, #FFFDF9); transform: scale(1.08); }
.sched-cal-day.is-out, .sched-cal-day.is-closed { color: #C8C4BA; }
.sched-cal-day.is-today { box-shadow: inset 0 0 0 1.5px rgba(243, 138, 63, 0.55); }
.sched-cal-day.is-sel { background: var(--sw-orange, #F38A3F); color: var(--sw-card-lift, #FFFDF9); }
.sched-cal-day.is-sel:hover { background: var(--sw-orange, #F38A3F); transform: none; }
.sched-cal-foot { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--sw-border, #E5DED3); }
.sched-cal-today { font: inherit; padding: 6px 13px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); font-size: 12px; font-weight: 800; color: var(--sw-ink, #373B4D); cursor: pointer; transition: background 0.16s ease, color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-cal-today:hover { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); transform: translateY(-1px); }
.sched-ava.is-unassigned { background: rgba(15, 23, 42, 0.08); color: #64748b; }

/* Working-hours slider (Day view): crops the visible timeline to the workday.
   Two overlapped native range inputs form one dual-handle slider; the track
   line + orange fill live on the wrapper, thumbs take the pointer events. */

/* empty state with an explicit pull action + visible pull result */
.sched-empty--pull { flex-direction: column; gap: 10px; }
.sched-empty-msg { margin: 0; color: var(--sw-ink, #373B4D); font-size: 14px; }
.sched-pull-note { margin: 0; font-size: 12px; color: var(--sw-muted, #7B8190); min-height: 14px; max-width: 460px; }

/* ═══════════ SCHEDULE — dispatch timeline (Day) + availability (Week) ═══════════
   Day: technicians down the left, TIME running LEFT TO RIGHT with vertical hour
   lines; each job is a soft rounded block at its time with horizontal text. One
   Sunwave-orange line marks "now". Week: booked vs open slots per day.
   Styled to INTERFACE_DESIGN_PHILOSOPHY_NEW.md: warm card surfaces (#FCFAF6 on
   #F8F5EF), soft #E5DED3 hairlines, 12-16px radii, low ambient shadows, muted
   uppercase micro-labels, deep-navy emphasis, orange used sparingly (now line +
   today). Vertical scrolling stays on the PAGE; the boards only pan sideways. */
.cal-agt-job { --cc: var(--st-scheduled); --cb: var(--st-scheduled-bg); }
.cal-agt-job--scheduled { --cc: var(--st-scheduled); --cb: var(--st-scheduled-bg); }
.cal-agt-job--inprogress { --cc: var(--st-inprogress); --cb: var(--st-inprogress-bg); }
.cal-agt-job--complete { --cc: var(--st-complete); --cb: var(--st-complete-bg); }
.cal-agt-job--canceled { --cc: var(--st-canceled); --cb: var(--st-canceled-bg); }
.cal-agt-job--needs { --cc: var(--st-needs); --cb: var(--st-needs-bg); }

.schd-agenda .sched-body { overflow: visible; }
/* The card hosting the schedule must NOT clip: the week popover and the
   day blocks hover-lift past its edge. (.bento-card defaults to hidden; the
   old .schd-agenda-scoped selector matched nothing because the card is the
   PARENT of .schd-agenda, not an ancestor.) */
.bento-card.sched-card { overflow: visible; padding-top: 8px; }

/* ── Day-at-a-glance chips above the board ── */
.cal-ags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.cal-ags-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card, #FCFAF6); color: var(--sw-muted, #7B8190); font-size: 11.5px; font-weight: 700; }
.cal-ags-chip strong { color: var(--sw-ink-deep, #373B4D); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-ags-chip--warn { border-color: rgba(211, 154, 46, 0.45); background: #FBF3E2; color: #C66518; }
.cal-ags-chip--warn strong { color: #C66518; }

/* ── Day timeline shell: tech rows x horizontal time canvas ── */
.cal-agt { border: 1px solid var(--sw-border, #E5DED3); border-radius: 16px; background: var(--sw-card, #FCFAF6); box-shadow: 0 10px 28px rgba(55, 59, 77, 0.07); overflow: hidden; }
.cal-agt-scroll { overflow-x: auto; }            /* sideways pan only; height is natural so the page keeps vertical scroll */
.cal-agt-inner { width: max-content; min-width: 100%; }
.cal-agt-headrow { display: flex; border-bottom: 1px solid var(--sw-border, #E5DED3); background: var(--sw-card-lift, #FFFDF9); }
.cal-agt-corner { position: sticky; left: 0; z-index: 3; flex: 0 0 172px; padding: 9px 14px; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sw-muted, #7B8190); background: var(--sw-card-lift, #FFFDF9); border-right: 1px solid var(--sw-border, #E5DED3); }
.cal-agt-ruler { position: relative; flex: 0 0 auto; height: 34px; overflow: hidden; }
.cal-agt-hr { position: absolute; top: 10px; transform: translateX(6px); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--sw-muted, #7B8190); }

.cal-agt-row { display: flex; border-top: 1px solid rgba(229, 222, 211, 0.62); }
.cal-agt-tech { position: sticky; left: 0; z-index: 2; flex: 0 0 172px; display: flex; align-items: center; gap: 9px; padding: 7px 12px; background: linear-gradient(90deg, var(--sw-card-lift, #FFFDF9), var(--sw-card, #FCFAF6)); border-right: 1px solid var(--sw-border, #E5DED3); }
.cal-agt-tech .sched-ava { width: 26px; height: 26px; font-size: 10px; }
.cal-agt-tinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-agt-tname { font-size: 12.5px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agt-tmeta { font-size: 10px; font-weight: 700; color: var(--sw-muted, #7B8190); white-space: nowrap; }
.cal-agt-row.is-unassigned .cal-agt-tname { color: var(--sw-muted, #7B8190); }
.cal-agt-row.is-mine .cal-agt-tech { background: var(--sw-orange-soft, #FFEEDC); border-right-color: rgba(243, 138, 63, 0.36); }
.cal-agt-row.is-mine .cal-agt-tname { color: var(--sw-orange-dark, #C66518); }
.cal-agt-canvas { position: relative; flex: 0 0 auto; overflow: hidden; }
.cal-agt-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(229, 222, 211, 0.55); pointer-events: none; }
.cal-agt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sw-orange, #F38A3F); pointer-events: none; z-index: 1; }
.cal-agt-now--cap::after { content: ''; position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sw-orange, #F38A3F); }

/* HCP calendar events and bookings share the same vertical overlap bands. */
.cal-agt-event { appearance: none; -webkit-appearance: none; position: absolute; top: 4px; bottom: auto; border-radius: 8px; pointer-events: auto; z-index: 0;
  background: repeating-linear-gradient(135deg, rgba(123, 129, 144, 0.16) 0 8px, rgba(123, 129, 144, 0.06) 8px 16px);
  border: 1px dashed rgba(123, 129, 144, 0.45); color: var(--sw-muted, #6B7280);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  min-width: 0; padding: 2px 8px; overflow: hidden; font: inherit; text-align: left; cursor: pointer; }
.cal-agt-event:hover { border-style: solid; border-color: var(--sw-orange, #F38A3F); color: var(--sw-orange-dark, #C66518); }
.cal-agt-event:focus-visible { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 2px; }
.cal-agt-event-name, .cal-agt-event-time { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agt-event-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-agt-event-time { font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Thin (band-shared) blocks: one centered line so nothing clips mid-letter. */
.cal-agt-event.is-thin { flex-direction: row; align-items: center; gap: 6px; padding: 0 8px; }
.cal-agt-event.is-thin .cal-agt-event-name { font-size: 10px; flex: 0 1 auto; min-width: 0; }
.cal-agt-event.is-thin .cal-agt-event-time { font-size: 9px; flex: 0 0 auto; }
.cal-agt-event.is-thin.is-narrow .cal-agt-event-time { display: none; }
.cal-agt-event--block { cursor: pointer; }
.cal-agt-event--block:hover { border-style: solid; border-color: var(--sw-orange, #F38A3F); color: var(--brand-orange-dark, #C66518); }

/* ── Drag an empty lane to ADD a job ─────────────────────────────────────────── */
/* The orange selection band drawn while dragging out a new job's time span. */
.cal-agt-make {
  position: absolute; top: 4px; bottom: 4px; z-index: 3; pointer-events: none;
  background: rgba(243, 138, 63, 0.18);
  border: 1.5px dashed var(--sw-orange, #F38A3F);
  border-radius: 8px;
}
.cal-agt-make::after {
  content: attr(data-time);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 800; white-space: nowrap; color: #B5651D;
}
body.sched-making, body.sched-making * { cursor: crosshair !important; user-select: none; }

/* The "Add a job" popup (search a customer + describe the work). */
.cal-mk-scrim {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(40, 38, 34, 0.34); padding: 20px;
  animation: calMkIn 140ms ease both;
}
@keyframes calMkIn { from { opacity: 0; } to { opacity: 1; } }
.cal-mk {
  width: 100%; max-width: 420px; background: var(--sw-card, #FCFAF6);
  border: 1px solid var(--sw-border, #E5DED3); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(40, 38, 34, 0.28); overflow: hidden;
}
.cal-mk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.cal-mk-title { font-size: 16px; font-weight: 800; color: var(--sw-ink, #2D2A26); }
.cal-mk-sub { font-size: 12px; font-weight: 600; color: var(--sw-muted, #7B8190); margin-top: 2px; }
.cal-mk-x { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--sw-muted, #7B8190); padding: 4px; line-height: 1; border-radius: 8px; }
.cal-mk-x:hover { background: var(--sw-card-alt, #F2EEE6); color: var(--sw-ink, #2D2A26); }
.cal-mk-seg { display: flex; gap: 4px; margin: 6px 18px 2px; padding: 3px; background: var(--sw-card-alt, #F2EEE6); border-radius: 11px; }
.cal-mk-seg-btn { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sw-muted, #7B8190); cursor: pointer; }
.cal-mk-seg-btn.is-on { background: var(--sw-card-lift, #FFFDF9); color: var(--sw-ink, #2D2A26); box-shadow: 0 1px 3px rgba(40, 38, 34, 0.12); }
/* These panels carry their own display rule (flex), which would silently
   defeat the UA's [hidden] rule when the JS toggles them — force it. Without
   this, the Event message and the empty picked-customer box leak onto the
   Job tab, and both panels stack when you switch tabs. */
.cal-mk-event[hidden], .cal-mk-body[hidden], .cal-mk-pick[hidden] {
  display: none !important;
}
.cal-mk-event { padding: 22px 22px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cal-mk-event-ico { font-size: 28px; line-height: 1; }
.cal-mk-event-msg { font-size: 14px; font-weight: 700; color: var(--sw-ink, #2D2A26); max-width: 320px; }
.cal-mk-event-sub { font-size: 12.5px; color: var(--sw-muted, #7B8190); max-width: 320px; }
.cal-mk-body { padding: 4px 18px 8px; display: flex; flex-direction: column; }
.cal-mk-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sw-muted, #7B8190); margin: 12px 0 5px; }
.cal-mk-opt { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: 0.75; }
.cal-mk-cust, .cal-mk-desc, .cal-mk-reason, .cal-mk-addr {
  width: 100%; box-sizing: border-box; border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px;
  color: var(--sw-ink, #2D2A26); background: var(--sw-card-lift, #FFFDF9);
}
.cal-mk-cust:focus, .cal-mk-desc:focus, .cal-mk-reason:focus, .cal-mk-addr:focus { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 1px; border-color: transparent; }
.cal-mk-desc { resize: vertical; min-height: 64px; }
/* Native "Time off" form inside the Event tab: left-aligned fields, not the
   centered explainer layout the HCP message uses. */
.cal-mk-event--form { text-align: left; align-items: stretch; padding: 4px 18px 8px; }
.cal-mk-event-note { font-size: 12px; color: var(--sw-muted, #7B8190); margin-top: 6px; }

/* Repeat-this-job panel (recurring jobs, native): reuses the cal-mk card.
   The frequency <select> gets the Sunwave input treatment (never a bare
   native box) with its own chevron. */
.sched-repeat .cal-mk-body { padding: 4px 18px 10px; display: flex; flex-direction: column; }
.sched-repeat-freq {
  -webkit-appearance: none; appearance: none; width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237B8190' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.sched-repeat-freq:focus { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 1px; border-color: transparent; }
.cal-mk-when { display: flex; flex-direction: column; gap: 6px; }
.cal-mk-when-row { display: flex; align-items: center; gap: 7px; }
.cal-mk-when-tag { flex: 0 0 38px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sw-muted, #7B8190); }
.cal-mk-dt, .cal-mk-tm {
  box-sizing: border-box; border: 1px solid var(--sw-border, #E5DED3); border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 13px; color: var(--sw-ink, #2D2A26);
  background: var(--sw-card-lift, #FFFDF9);
}
.cal-mk-dt { flex: 1 1 auto; min-width: 0; }
.cal-mk-tm { flex: 0 0 auto; }
.cal-mk-dt:focus, .cal-mk-tm:focus { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 1px; border-color: transparent; }
.cal-mk-when-hint { font-size: 11.5px; color: var(--sw-muted, #7B8190); min-height: 14px; padding-left: 45px; }
.cal-mk-when-hint.is-bad { color: #C0461F; font-weight: 600; }
.cal-mk-results { margin-top: 6px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 10px; overflow: hidden; max-height: 200px; overflow-y: auto; }
.cal-mk-res { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--sw-border, #E5DED3); background: var(--sw-card-lift, #FFFDF9); padding: 8px 11px; cursor: pointer; }
.cal-mk-res:last-child { border-bottom: 0; }
.cal-mk-res:hover { background: var(--sw-card-alt, #F2EEE6); }
.cal-mk-res-name { font-size: 13px; font-weight: 700; color: var(--sw-ink, #2D2A26); }
.cal-mk-res-addr { font-size: 11.5px; color: var(--sw-muted, #7B8190); }
.cal-mk-none { padding: 10px 12px; font-size: 12.5px; color: var(--sw-muted, #7B8190); }
.cal-mk-pick { display: flex; flex-direction: column; gap: 1px; position: relative; border: 1px solid var(--sw-orange, #F38A3F); background: rgba(243, 138, 63, 0.08); border-radius: 10px; padding: 9px 11px; }
.cal-mk-pick-name { font-size: 13px; font-weight: 800; color: var(--sw-ink, #2D2A26); }
.cal-mk-pick-addr { font-size: 11.5px; color: var(--sw-muted, #7B8190); }
.cal-mk-pick-warn { color: #B5651D; }
.cal-mk-pick-x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 11px; font-weight: 700; color: var(--sw-orange, #F38A3F); cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-mk-err { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #C0392B; background: rgba(192, 57, 43, 0.08); border-radius: 8px; padding: 8px 10px; }
.cal-mk-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
.cal-mk-cancel, .cal-mk-go { border-radius: 10px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.cal-mk-cancel { background: transparent; border-color: var(--sw-border, #E5DED3); color: var(--sw-ink, #2D2A26); }
.cal-mk-cancel:hover { background: var(--sw-card-alt, #F2EEE6); }
.cal-mk-go { background: var(--sw-orange, #F38A3F); color: #fff; }
.cal-mk-go:hover:not(:disabled) { filter: brightness(1.04); }
.cal-mk-go:disabled { opacity: 0.5; cursor: default; }

/* job blocks: horizontal text, status edge + tint, gentle lift on hover */
.cal-agt-job { -webkit-appearance: none; appearance: none; position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 8px 4px 10px; border: 1px solid rgba(55, 59, 77, 0.07); border-left: 3px solid var(--cc); border-radius: 9px; background: var(--cb); font: inherit; color: var(--sw-ink, #373B4D); text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px rgba(55, 59, 77, 0.06); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.cal-agt-job:hover { box-shadow: 0 6px 16px rgba(55, 59, 77, 0.15); transform: translateY(-1px); z-index: 2; }
.cal-agt-jtop { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* Technician identity stays in the block's color wash; small text remains the
   standard high-contrast ink so every palette swatch is equally readable. */
.cal-agt-jtime { flex: none; font-size: 10px; font-weight: 800; color: var(--sw-ink, #373B4D); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-agt-jamt { flex: none; font-size: 10.5px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-agt-jname { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); line-height: 1.18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agt-jdesc { font-size: 10.5px; font-weight: 650; color: var(--sw-ink, #373B4D); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agt-job.is-tight { padding: 4px 6px 4px 9px; }
/* Half-height block: the job shares its time with a calendar event, so it
   takes the top half of its lane and the event fills the bottom half. One
   line only — the description rides the hover tooltip and the flyout. */
.cal-agt-job.is-half { padding: 1px 8px 1px 10px; gap: 0; border-radius: 7px; }
.cal-agt-job.is-half .cal-agt-jdesc { display: none; }
.cal-agt-job.is-half .cal-agt-jname { font-size: 11.5px; }
.cal-agt-job.is-half .cal-agt-jamt, .cal-agt-job.is-half .cal-agt-jtime { font-size: 9.5px; }
/* On a narrow block the description + time drop, but the dollar amount stays —
   it's the point of the badge — just a hair smaller to fit. */
.cal-agt-job.is-tight .cal-agt-jdesc, .cal-agt-job.is-tight .cal-agt-jtime { display: none; }
.cal-agt-job.is-tight .cal-agt-jamt { font-size: 10px; }
/* The job continues past the cropped working window: dashed cut edge. */
.cal-agt-job.is-cut-l { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-agt-job.is-cut-r { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-agt-job--canceled .cal-agt-jname { text-decoration: line-through; }
/* Multi-day jobs show a "Day N of M" badge in place of the start time (the
   block fills the day, so a clock time means little). Reads as a small pill so
   it's clearly a span marker; the full dated range rides the hover + flyout. */
.cal-agt-jday { padding: 1px 6px; border-radius: 999px; background: rgba(55, 59, 77, 0.1); color: var(--sw-ink-deep, #373B4D); font-size: 9.5px; font-weight: 800; letter-spacing: 0.01em; }

/* ── Week: availability matrix ──
   Technicians x days, one dot per booking window. The hover popover positions
   against .sched-body (already position:relative above). */
.cal-agm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 18px; flex-wrap: wrap; margin: 2px 2px 14px; }
.cal-agm-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cal-agm-hero-num { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -0.01em; color: var(--sw-ink-deep, #373B4D); font-variant-numeric: tabular-nums; }
.cal-agm-hero-of { font-size: 12.5px; font-weight: 700; color: var(--sw-muted, #7B8190); }
.cal-agm-hero-sub { font-size: 12px; font-weight: 650; color: var(--sw-muted, #7B8190); padding-left: 10px; border-left: 1px solid var(--sw-border, #E5DED3); }
.cal-agm-keys { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-agm-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sw-muted, #7B8190); }
.cal-agm-scroll { overflow-x: auto; padding-bottom: 4px; }   /* wide weeks pan sideways; tech names stay pinned */
.cal-agm { display: grid; gap: 4px 6px; align-items: center; }  /* columns + min-width set inline per open-day count */
.cal-agm-corner { font-size: 10px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sw-muted, #7B8190); align-self: end; padding-bottom: 8px; }
.cal-agm-corner { position: sticky; left: 0; z-index: 2; background: var(--sw-card, #FCFAF6); padding-left: 8px; align-self: stretch; display: flex; align-items: flex-end; }
.cal-agm-dayhead { font: inherit; text-align: center; padding: 8px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.cal-agm-dayhead:hover { background: var(--sw-card-lift, #FFFDF9); border-color: var(--sw-border, #E5DED3); transform: translateY(-1px); }
.cal-agm-dayhead:active { transform: translateY(0) scale(0.98); }
.cal-agm-dow { display: block; font-size: 12px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sw-muted, #7B8190); }
.cal-agm-dnum { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 999px; margin-left: 2px; font-size: 16px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); }
.cal-agm-dayhead.is-today .cal-agm-dnum { background: var(--sw-orange, #F38A3F); color: var(--sw-card-lift, #FFFDF9); }
.cal-agm-tname { position: sticky; left: 0; z-index: 2; background: var(--sw-card, #FCFAF6); padding: 0 10px 0 8px; align-self: stretch; display: flex; align-items: center; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--sw-ink, #373B4D); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agm-tname--warn { color: #C66518; }
.cal-agm-cell { font: inherit; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 9px 6px; background: transparent; border: 0; border-radius: 12px; cursor: pointer; transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.cal-agm-cell:hover { background: var(--sw-orange-soft, #FFEEDC); box-shadow: inset 0 0 0 1.5px var(--sw-orange, #F38A3F); transform: translateY(-1px); }
.cal-agm-cell:active { transform: translateY(0) scale(0.97); }
.cal-agm-cell--warn { min-height: 40px; }
.cal-agm-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.cal-agm-dot.is-open { background: var(--sw-green, #4BAA78); }
/* Time off / holds remain visible on touch screens where hover is unavailable. */
.cal-agm-dot.is-off { width: 11px; height: 11px; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(123, 129, 144, 0.42) 0 3px, rgba(123, 129, 144, 0.12) 3px 6px); border: 1px dashed var(--sw-muted, #7B8190); opacity: 1; }
.cal-agm-multi { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin: -5px 0; border-radius: 999px; background: #FBF3E2; border: 1px solid rgba(211, 154, 46, 0.45); color: #C66518; font-size: 11.5px; font-weight: 850; font-style: normal; font-variant-numeric: tabular-nums; }
.cal-agm-pop { position: absolute; z-index: 40; max-width: 270px; min-width: 190px; padding: 11px 13px; background: var(--sw-card-lift, #FFFDF9); border: 1px solid var(--sw-border, #E5DED3); border-radius: 14px; box-shadow: 0 18px 40px rgba(55, 59, 77, 0.16); cursor: pointer; }
.cal-agm-pop-job { display: grid; gap: 2px; justify-items: start; padding: 6px 0; border-top: 1px dashed var(--sw-border, #E5DED3); }
.cal-agm-pop-job:first-child { padding-top: 0; border-top: 0; }
.cal-agm-pop-time { font-size: 10px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sw-muted, #7B8190); font-variant-numeric: tabular-nums; }
.cal-agm-pop-name { font-size: 13px; font-weight: 750; color: var(--sw-ink, #373B4D); }
.cal-agm-pop-tech { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--sw-border, #E5DED3); font-size: 14px; font-weight: 850; letter-spacing: -0.01em; color: var(--sw-ink, #373B4D); }
.cal-agm-pop-more { padding-top: 6px; font-size: 11px; font-weight: 700; color: var(--sw-muted, #7B8190); }
.cal-agm-pop-hint { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--sw-border, #E5DED3); font-size: 10.5px; font-weight: 800; color: var(--sw-orange-dark, #C66518); }

/* ── Click-to-open detail modal (centered card over the agenda) ── */
/* The job detail opens as a centered modal that floats in the middle of the
   screen over a dimmed, blurred backdrop (the board stays visible behind it).
   It fades + scales in on the house curve; tall jobs scroll inside the body
   while the header stays put. */
.sched-fly-scrim { position: fixed; inset: 0; background: rgba(43, 38, 30, 0.36); backdrop-filter: blur(5px) saturate(118%); -webkit-backdrop-filter: blur(5px) saturate(118%); opacity: 0; transition: opacity 0.22s ease; z-index: 1000; }
.sched-fly-scrim.is-open { opacity: 1; }
.sched-fly { position: fixed; top: 50%; left: 50%; width: min(540px, 94vw); max-height: 88vh; background: var(--sw-card, #FCFAF6); border: 1px solid var(--sw-border, #E5DED3); border-radius: var(--sw-radius-card, 24px); z-index: 1001; box-shadow: 0 28px 70px rgba(55, 59, 77, 0.22), 0 2px 10px rgba(55, 59, 77, 0.06); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(0.965); transform-origin: center; transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.sched-fly.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sched-fly-head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--sw-border, #E5DED3); }
.sched-fly-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--sw-blue, #BFE0F3); color: var(--st-scheduled, #0C447C); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.sched-fly-avatar--event { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); }
.sched-fly-htext { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.sched-fly-cust { font-size: 19px; font-weight: 850; line-height: 1.2; color: var(--sw-ink-deep, #373B4D); overflow-wrap: anywhere; }
/* Clickable name → the customer's profile. Reads as the same bold header line,
   with a quiet underline that warms to orange on hover so it's clearly a way in. */
.sched-fly .sched-fly-cust--link { appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 850; line-height: 1.2; color: var(--sw-ink-deep, #373B4D); overflow-wrap: anywhere; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--sw-border, #E5DED3); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 140ms ease, text-decoration-color 140ms ease; }
.sched-fly .sched-fly-cust--link:hover { color: var(--sw-orange-dark, #C66518); text-decoration-color: var(--sw-orange, #F38A3F); }
.sched-fly .sched-fly-cust--link:focus-visible { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 2px; border-radius: 6px; }
.sched-fly-whenwrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sched-fly-whenico { flex: none; color: var(--sw-muted, #7B8190); }
.sched-fly-when { font-size: 13px; font-weight: 600; color: var(--sw-muted, #7B8190); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-fly-hstatus { flex: none; }
.sched-fly-event-pill { flex: none; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid var(--sw-border, #E5DED3); border-radius: var(--sw-radius-pill, 999px); background: var(--sw-card-lift, #FFFDF9); color: var(--sw-muted, #7B8190); font-size: 11px; font-weight: 800; white-space: nowrap; }
.sched-fly-close { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); font-size: 20px; line-height: 1; color: var(--sw-muted, #7B8190); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-fly-close:hover { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); transform: rotate(90deg); }
.sched-fly-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 24px; }
.sched-fly-section { padding: 4px 0; }
/* The key facts cluster into one soft inset card so they read as a group,
   separate from the detail/notes sections that follow. */
.sched-fly-section[data-fly-main] { background: var(--sw-card-lift, #FFFDF9); border: 1px solid var(--sw-border, #E5DED3); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.sched-fly-section--detail { border-top: 1px solid var(--sw-border, #E5DED3); margin-top: 16px; padding-top: 16px; }
/* Each fact stacks its label over the value; address + phone (and any open
   editor) span the full grid width. */
.sched-fly-row { display: block; min-width: 0; }
.sched-fly-row--wide, .sched-fly-row--editing { grid-column: 1 / -1; }
.sched-fly-k { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sw-muted, #7B8190); }
.sched-fly-v { font-size: 13.5px; color: var(--sw-ink, #373B4D); min-width: 0; overflow-wrap: anywhere; }
.sched-fly-v a { color: var(--st-scheduled); }
.sched-fly-stitle { display: block; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sw-muted, #7B8190); margin-bottom: 8px; }
.sched-fly-detail { min-height: 20px; }
.sched-fly-jtype { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); }
.sched-fly-desc { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--sw-ink, #373B4D); white-space: pre-wrap; }
.sched-fly-items { list-style: none; margin: 4px 0 8px; padding-left: 0; }
.sched-fly-items li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sw-ink, #373B4D); margin: 5px 0; }
.sched-fly-qty { color: var(--sw-muted, #7B8190); font-weight: 700; }
.sched-fly-price { margin-left: auto; }
.sched-fly-inv { margin: 6px 0 0; font-size: 12px; color: var(--sw-muted, #7B8190); }
.sched-fly-loading { margin: 0; font-size: 12.5px; color: #94a3b8; }
.sched-fly-muted { color: #94a3b8; }

/* ── Attached estimate (Booked for …) + attach/change controls ──────────── */
.sched-fly-est-wrap { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sched-fly-est-card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--sw-orange, #F38A3F) 32%, transparent);
  background: color-mix(in srgb, var(--sw-orange-soft, #FFEEDC) 55%, transparent);
  color: var(--sw-orange-dark, #C66518);
  transition: background 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sched-fly-est-card:hover { background: var(--sw-orange-soft, #FFEEDC); transform: translateY(-1px); }
.sched-fly-est-card svg { flex-shrink: 0; }
.sched-fly-est-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sched-fly-est-txt strong { font-size: 13px; font-weight: 800; color: var(--sw-ink, #373B4D); }
.sched-fly-est-sub { font-size: 11.5px; color: var(--sw-muted, #7B8190); font-variant-numeric: tabular-nums; }
.sched-fly-est-acts { display: flex; gap: 14px; padding-left: 2px; }
.sched-fly-est-link { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sw-orange-dark, #C66518); }
.sched-fly-est-link:hover { text-decoration: underline; }
.sched-fly-est-link--muted { color: var(--sw-muted, #7B8190); }
.sched-fly-est-add {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
  padding: 8px 14px; border-radius: 999px;
  color: var(--sw-orange-dark, #C66518);
  background: color-mix(in srgb, var(--sw-orange-soft, #FFEEDC) 35%, transparent);
  border: 1px dashed color-mix(in srgb, var(--sw-orange, #F38A3F) 45%, transparent);
  transition: background 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sched-fly-est-add:hover { background: var(--sw-orange-soft, #FFEEDC); transform: translateY(-1px); }
.sched-fly-est-panel { display: flex; flex-direction: column; gap: 6px; }
.sched-fly-est-loading, .sched-fly-est-empty { margin: 2px 0; font-size: 12px; color: var(--sw-muted, #7B8190); }
.sched-fly-est-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1px solid var(--sw-border, #E5DED3); background: var(--sw-card, #FCFAF6);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sched-fly-est-opt:hover:not(:disabled) { background: var(--sw-orange-soft, #FFEEDC); border-color: color-mix(in srgb, var(--sw-orange, #F38A3F) 40%, transparent); transform: translateY(-1px); }
.sched-fly-est-opt.is-current { cursor: default; border-color: color-mix(in srgb, var(--sw-orange, #F38A3F) 50%, transparent); }
.sched-fly-est-opt-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sched-fly-est-opt-txt strong { font-size: 13px; font-weight: 800; color: var(--sw-ink, #373B4D); }
.sched-fly-est-cur { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--sw-orange-dark, #C66518); }
@media (prefers-reduced-motion: reduce) { .sched-fly, .sched-fly-scrim { transition: none; } }

/* ── flyout inline editors + notes ────────────────────────────────────────── */
/* Every editable fact carries a small neutral pencil at the row's right edge
   (quiet inset chip, warming to the orange wash on hover). Opening one swaps
   that row's value for a compact form whose Save is the single solid-orange
   primary in the panel; pencils on other rows stay neutral, so the oranges
   never compete. */
.sched-fly-v--pen { display: flex; align-items: flex-start; gap: 8px; }
.sched-fly-vtext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sched-fly-pen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: -3px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); color: var(--sw-muted, #7B8190); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-fly-pen svg { width: 12px; height: 12px; }
.sched-fly-pen:hover:not(:disabled) { background: var(--sw-orange-soft, #FFEEDC); border-color: rgba(243, 138, 63, 0.4); color: var(--sw-orange-dark, #C66518); transform: translateY(-1px); }
.sched-fly-pen:disabled { opacity: 0.4; cursor: default; }
.sched-fly-shead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sched-fly-shead .sched-fly-stitle { margin-bottom: 0; }
.sched-fly-inline { display: flex; flex-direction: column; gap: 8px; padding: 1px 0 2px; }
.sched-fly-erow { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.sched-fly-erow--time { grid-template-columns: 1fr 1fr; }
.sched-fly-erow--addr { grid-template-columns: 1.5fr 1fr 0.9fr; }
.sched-fly-ebtns--inline { margin-top: 2px; }
.sched-fly-save--sm { padding: 6px 14px; font-size: 12.5px; }
.sched-fly-cancel--sm { padding: 6px 10px; font-size: 12.5px; }
.sched-fly-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--sw-muted, #7B8190); }
.sched-fly-elab { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sw-muted, #7B8190); min-width: 0; }
.sched-fly-input { width: 100%; padding: 8px 10px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 12px; background: var(--sw-card, #FCFAF6); font: inherit; font-size: 13px; font-weight: 650; color: var(--sw-ink, #373B4D); }
.sched-fly-input:focus-visible { outline: none; box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30)); border-color: transparent; }
.sched-fly-techs { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-fly-tech { padding: 6px 12px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sw-ink, #373B4D); cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-fly-tech:hover { transform: translateY(-1px); }
.sched-fly-tech.is-on { background: var(--sw-orange-soft, #FFEEDC); border-color: rgba(243, 138, 63, 0.45); color: var(--sw-orange-dark, #C66518); }
.sched-fly-ebtns { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.sched-fly-save { padding: 9px 18px; border: 0; border-radius: 999px; background: var(--sw-orange, #F38A3F); color: var(--sw-card-lift, #FFFDF9); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(243, 138, 63, 0.35); transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s ease, opacity 0.18s ease; }
.sched-fly-save:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(243, 138, 63, 0.42); }
.sched-fly-save:disabled { opacity: 0.6; cursor: default; }
.sched-fly-cancel { padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--sw-muted, #7B8190); cursor: pointer; transition: background 0.16s ease, color 0.16s ease; }
.sched-fly-cancel:hover { background: var(--sw-card-lift, #FFFDF9); color: var(--sw-ink, #373B4D); }
.sched-fly-emsg { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--sw-coral-wash, #FCEBE7); font-size: 12.5px; font-weight: 700; color: var(--sw-coral, #D65F4F); }
.sched-fly-section--notes { border-top: 1px solid var(--sw-border, #E5DED3); margin-top: 16px; padding-top: 16px; }
.sched-fly-note { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: var(--sw-card-lift, #FFFDF9); font-size: 13px; line-height: 1.5; color: var(--sw-ink, #373B4D); white-space: pre-wrap; overflow-wrap: anywhere; }
.sched-fly-price { font-weight: 800; color: var(--sw-ink-deep, #373B4D); font-variant-numeric: tabular-nums; }
.sched-fly-addnote { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sched-fly-notebox { width: 100%; resize: vertical; min-height: 44px; padding: 9px 12px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 12px; background: var(--sw-card, #FCFAF6); font: inherit; font-size: 13px; color: var(--sw-ink, #373B4D); }
.sched-fly-notebox:focus-visible { outline: none; box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30)); border-color: transparent; }
.sched-fly-notebtn { align-self: flex-end; padding: 7px 14px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); font: inherit; font-size: 12.5px; font-weight: 800; color: var(--sw-ink, #373B4D); cursor: pointer; transition: background 0.16s ease, color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-fly-notebtn:hover:not(:disabled) { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); transform: translateY(-1px); }
.sched-fly-notebtn:disabled { opacity: 0.6; cursor: default; }
/* Footer: the path to Housecall Pro for the actions its API does not expose
   (cancel, delete). Quiet outline link so it reads as a doorway out, not a
   primary action competing with the inline edit pencils. */
.sched-fly-foot { border-top: 1px solid var(--sw-border, #E5DED3); margin-top: 16px; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.sched-fly-hcp { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card, #FCFAF6); font-size: 12.5px; font-weight: 800; color: var(--sw-ink, #373B4D); text-decoration: none; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-fly-hcp:hover { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); border-color: var(--sw-orange, #F38A3F); transform: translateY(-1px); }
.sched-fly-hcp:focus-visible { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 1px; }
.sched-fly-foot-hint { font-size: 11.5px; color: var(--sw-muted, #7B8190); }
/* Sunwave-native jobs: complete/cancel/reopen/delete live in the footer (no
   HCP to link to). Same pill idiom as the note button; delete is the
   coral-outline danger pill. */
.sched-fly-foot--native { flex-direction: row; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sched-fly-act { -webkit-appearance: none; appearance: none; padding: 8px 14px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); font: inherit; font-size: 12.5px; font-weight: 800; color: var(--sw-ink, #373B4D); cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sched-fly-act:hover:not(:disabled) { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); border-color: var(--sw-orange, #F38A3F); transform: translateY(-1px); }
.sched-fly-act:focus-visible { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 1px; }
.sched-fly-act:disabled { opacity: 0.6; cursor: default; }
.sched-fly-act--danger { border-color: rgba(214, 95, 79, 0.45); color: var(--sw-coral, #D65F4F); }
.sched-fly-act--danger:hover:not(:disabled) { background: var(--sw-coral-wash, #FCEBE7); color: var(--sw-coral, #D65F4F); border-color: var(--sw-coral, #D65F4F); }

/* ── drag to reassign (Day board) ─────────────────────────────────────────── */
/* The ghost is a clone of the block, lifted: fixed at the viewport origin and
   driven by transform so it tracks the pointer 1:1 (no transition lag). */
.cal-agt-dragghost { position: fixed !important; z-index: 1200; margin: 0; pointer-events: none; opacity: 0.92; box-shadow: 0 14px 34px rgba(55, 59, 77, 0.30); transition: none !important; animation: none !important; }
.cal-agt-job.is-dragsrc { opacity: 0.35; }
body.sched-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.sched-dragging .cal-agt-job { cursor: grabbing; }
/* The hovered technician row reads as the one drop target: a warm wash plus
   an orange ring. The wash is repeated on the sticky tech cell (whose opaque
   background would otherwise cover it) and the ring is an ::after at z-index
   3 so the sticky layer (z 2) can't clip it at any scroll position. The
   now-line dims while a drag is live so the ring is the only
   saturated orange on the board mid-drag. */
.cal-agt-row.is-dropover { position: relative; background: var(--sw-orange-soft, #FFEEDC); border-radius: 12px; }
.cal-agt-row.is-dropover::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 2px solid rgba(243, 138, 63, 0.55); border-radius: 12px; pointer-events: none; }
.cal-agt-row.is-dropover .cal-agt-tech { background: var(--sw-orange-soft, #FFEEDC); border-right-color: rgba(243, 138, 63, 0.45); }
.cal-agt-row.is-dropover .cal-agt-tname { color: var(--sw-orange-dark, #C66518); }
body.sched-dragging .cal-agt-now { opacity: 0.35; animation: none; }

/* ── resize to retime (Day board) ─────────────────────────────────────────── */
/* Grab zones on each end of a job block: the cursor flips to the two-way
   arrow, and a small grip bar fades in on hover so the affordance is
   discoverable. The grip is neutral (no second orange). */
.cal-agt-rsz { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; touch-action: none; }
.cal-agt-rsz--l { left: 0; }
.cal-agt-rsz--r { right: 0; }
.cal-agt-rsz::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(55, 59, 77, 0.12); opacity: 0; transition: opacity 0.14s ease; }
.cal-agt-rsz--l::after { left: 3px; }
.cal-agt-rsz--r::after { right: 3px; }
.cal-agt-job:hover .cal-agt-rsz::after, .cal-agt-job:focus-visible .cal-agt-rsz::after, .cal-agt-job.is-resizing .cal-agt-rsz::after { opacity: 1; }
/* Live resize: the block tracks the pointer 1:1 (no transitions) and lifts
   above its lane-mates; the time line shows the new range as it changes. */
.cal-agt-job.is-resizing { z-index: 3; box-shadow: 0 6px 18px rgba(55, 59, 77, 0.25); transition: none; }
/* The live time range must stay readable mid-gesture even on tight blocks
   (which normally hide the time line): show the time, drop the name. */
.cal-agt-job.is-resizing .cal-agt-jtime { display: inline; }
.cal-agt-job.is-tight.is-resizing .cal-agt-jname { display: none; }
body.sched-resizing { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
body.sched-resizing .cal-agt-job { cursor: ew-resize; }
body.sched-resizing .cal-agt-now { opacity: 0.35; animation: none; }

/* The reassign toast's Undo action button. */
.sched-toast-act { flex: none; align-self: center; padding: 6px 13px; border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px; background: var(--sw-card-lift, #FFFDF9); font: inherit; font-size: 12.5px; font-weight: 800; color: var(--sw-ink, #373B4D); cursor: pointer; transition: background 0.16s ease, color 0.16s ease; }
.sched-toast-act:hover { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); }

/* ── ask-first change notice (Sunwave-native reschedule/cancel) ───────────────
   A small persistent card, bottom-center above the dock: the drafted text to
   the customer with Send / Don't-send. Appended to <body> (never inside
   .app-scroll, whose fixed stacking context would seal it under the chrome). */
.sched-notice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--chrome-bottom, 112px) + 14px);
  transform: translateX(-50%);
  z-index: 1200;
  width: min(420px, calc(100vw - 32px));
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--sw-border, #E5DED3);
  background: var(--sw-card, #FCFAF6);
  box-shadow: 0 18px 40px var(--sw-shadow, rgba(55, 59, 77, 0.18));
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: schedNoticeIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes schedNoticeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sched-notice-head { display: flex; flex-direction: column; gap: 2px; }
.sched-notice-head strong { font-size: 14px; font-weight: 800; color: var(--sw-ink, #373B4D); }
.sched-notice-who { font-size: 12px; font-weight: 650; color: var(--sw-muted, #7B8190); }
.sched-notice-text {
  -webkit-appearance: none; appearance: none;
  width: 100%; resize: vertical; min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: var(--sw-radius-input, 14px);
  background: var(--sw-card-lift, #FFFDF9);
  font: inherit; font-size: 13px; line-height: 1.45; color: var(--sw-ink, #373B4D);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sched-notice-text:focus {
  outline: none; border-color: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px var(--sw-orange, #F38A3F), 0 6px 13px rgba(243, 138, 63, 0.30));
}
.sched-notice-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sched-notice-skip,
.sched-notice-send {
  -webkit-appearance: none; appearance: none;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.sched-notice-skip {
  border: 1px solid var(--sw-border, #E5DED3);
  background: var(--sw-card-lift, #FFFDF9);
  color: var(--sw-ink, #373B4D);
}
.sched-notice-skip:hover { background: var(--sw-canvas, #F8F5EF); }
.sched-notice-send {
  border: 1px solid transparent;
  background: var(--sw-orange, #F38A3F);
  color: #fff;
}
.sched-notice-send:hover { transform: translateY(-1px); }
.sched-notice-send:disabled { opacity: 0.7; cursor: default; transform: none; }
.sched-notice-skip:focus-visible,
.sched-notice-send:focus-visible { outline: 2px solid var(--sw-orange, #F38A3F); outline-offset: 2px; }
.sched-notice-done { font-size: 13.5px; font-weight: 800; color: #2F7E54; text-align: center; padding: 6px 0; }
@media (prefers-reduced-motion: reduce) {
  .sched-notice { animation: none; }
  .sched-notice-skip, .sched-notice-send { transition: none; }
}
.sched-fly-save:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sw-card, #FCFAF6), 0 0 0 4px rgba(243, 138, 63, 0.6), 0 4px 12px rgba(243, 138, 63, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .sched-fly-pen, .sched-fly-tech, .sched-fly-save, .sched-fly-cancel, .sched-fly-notebtn, .sched-fly-hcp, .sched-toast-act, .cal-agt-rsz::after,
  .sched-cal-day, .sched-cal-nav, .sched-cal-today { transition: none; }
  .sched-cal { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SCHEDULE DESIGN POLISH  (appended, additive, reversible)
   ----------------------------------------------------------------------
   INTERFACE_DESIGN_PHILOSOPHY_NEW.md applied to the dispatch timeline +
   week availability board: warm Sunwave surfaces, soft radii, ambient
   shadows, and a layer of gentle motion. Entrances run on the house curve
   cubic-bezier(0.22, 1, 0.36, 1); delight accents use the springy
   cubic-bezier(0.34, 1.4, 0.64, 1). Everything here is disabled for
   prefers-reduced-motion and while the hours slider is dragged
   (.sched-noanim). Delete this block to revert to the static board.
   ══════════════════════════════════════════════════════════════════════ */

/* — boards breathe in: one soft rise for the whole canvas — */
@keyframes schedBoardIn { from { opacity: 0; transform: translateY(10px); } }
.cal-agt, .cal-agm-scroll, .cal-agm-top, .cal-ags { animation: schedBoardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* — staggered entrances (JS sets --i per element; the var inherits down) — */
@keyframes schedRowIn { from { opacity: 0; transform: translateY(8px); } }
.cal-agt-row { animation: schedRowIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes schedJobIn { from { opacity: 0; transform: scale(0.96) translateY(4px); } }
.cal-agt-job { animation: schedJobIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 34ms + 100ms); }
@keyframes schedChipIn { from { opacity: 0; transform: translateY(6px); } }
.cal-ags-chip { animation: schedChipIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes schedCardIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
.cal-agm-dayhead, .cal-agm-cell, .cal-agm-tname,
.cal-agm-corner { animation: schedCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }

/* — slot dots pop in after the cells land — */
@keyframes schedDotPop { from { opacity: 0; transform: scale(0.25); } }
.cal-agm-cell .cal-agm-dot, .cal-agm-cell .cal-agm-multi { animation: schedDotPop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms + 200ms + var(--d, 0) * 50ms); }

/* — micro-interactions: lift, press, lean — */
.cal-agt-job { transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.cal-agt-job:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(55, 59, 77, 0.16); }
.cal-agt-job:active { transform: translateY(0) scale(0.985); box-shadow: 0 2px 6px rgba(55, 59, 77, 0.12); }
.cal-ags-chip { transition: box-shadow 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.cal-ags-chip:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(55, 59, 77, 0.09); }
.cal-agt-tech .sched-ava { transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); }
.cal-agt-row:hover .cal-agt-tech .sched-ava { transform: scale(1.1); }

/* the week matrix hover popover settles in (hidden toggles replay it) */
@keyframes schedPopIn { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
.cal-agm-pop { animation: schedPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1); }

/* arriving from a Week cell: that technician's Day row glows once */
@keyframes schedSpot { 0% { background: rgba(243, 138, 63, 0.16); } 100% { background: transparent; } }
.cal-agt-row.is-spot { animation: schedSpot 1.9s cubic-bezier(0.22, 1, 0.36, 1) both; border-radius: 12px; }

/* — quiet states: loading pulse, smooth slider fill, springy thumbs — */
@keyframes schedLoadPulse { 50% { opacity: 0.45; } }
.sched-loading { animation: schedLoadPulse 1.7s ease-in-out infinite; }

/* — keyboard focus: the philosophy's confident orange ring — */
.sched-btn:focus-visible, .sched-mode-btn:focus-visible, .cal-agt-job:focus-visible,
.cal-agm-cell:focus-visible, .cal-agm-dayhead:focus-visible, .sched-fly-close:focus-visible, .sched-leg:focus-visible,
.sched-fly-pen:focus-visible, .sched-fly-tech:focus-visible, .sched-fly-cancel:focus-visible,
.sched-fly-notebtn:focus-visible, .sched-toast-act:focus-visible,
.sched-cal-day:focus-visible, .sched-cal-nav:focus-visible, .sched-cal-today:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sw-card, #FCFAF6), 0 0 0 4px rgba(243, 138, 63, 0.6);
}
.cal-agt-job:focus-visible { z-index: 3; }
.sched-btn:active { transform: translateY(0) scale(0.97); }

/* — flyout content settles in just after the panel lands — */
@keyframes schedFlyRowIn { from { opacity: 0; transform: translateY(7px); } }
.sched-fly.is-open .sched-fly-row, .sched-fly.is-open .sched-fly-section--detail { animation: schedFlyRowIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.sched-fly.is-open .sched-fly-row:nth-child(1) { animation-delay: 0.10s; }
.sched-fly.is-open .sched-fly-row:nth-child(2) { animation-delay: 0.14s; }
.sched-fly.is-open .sched-fly-row:nth-child(3) { animation-delay: 0.18s; }
.sched-fly.is-open .sched-fly-row:nth-child(4) { animation-delay: 0.22s; }
.sched-fly.is-open .sched-fly-row:nth-child(5) { animation-delay: 0.26s; }
.sched-fly.is-open .sched-fly-row:nth-child(6) { animation-delay: 0.30s; }
.sched-fly.is-open .sched-fly-row:nth-child(7) { animation-delay: 0.34s; }
.sched-fly.is-open .sched-fly-section--detail { animation-delay: 0.36s; }

/* — guards: background refreshes and slider drags re-render constantly; never
   replay the whole entrance then. Covers BOTH boards — the Day timeline
   (.cal-agt*) and the Week matrix (.cal-agm*) — so a quiet refresh holds the
   board still and only a genuinely new item (.sched-pop) moves. — */
.sched-noanim .cal-agt, .sched-noanim .cal-ags, .sched-noanim .cal-agt-row,
.sched-noanim .cal-agt-job, .sched-noanim .cal-ags-chip,
.sched-noanim .cal-agm-scroll, .sched-noanim .cal-agm-top, .sched-noanim .cal-agm-dayhead,
.sched-noanim .cal-agm-cell, .sched-noanim .cal-agm-tname, .sched-noanim .cal-agm-corner,
.sched-noanim .cal-agm-cell .cal-agm-dot, .sched-noanim .cal-agm-cell .cal-agm-multi { animation: none; }

/* — one new item slips in on a quiet refresh (a new appointment block, a
   freshly-opened window dot) while the held-still board stays put. !important
   so it wins over the .sched-noanim guard above; JS withholds the class under
   prefers-reduced-motion, so this never fights the reduced-motion block. — */
@keyframes schedItemPop { from { opacity: 0; transform: scale(0.55); } 62% { transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.sched-pop { animation: schedItemPop 0.44s cubic-bezier(0.34, 1.4, 0.64, 1) backwards !important; }

@media (prefers-reduced-motion: reduce) {
  .cal-agt, .cal-agm-scroll, .cal-agm-top, .cal-ags, .cal-agt-row, .cal-agt-job,
  .cal-ags-chip, .cal-agm-dayhead, .cal-agm-cell, .cal-agm-tname,
  .cal-agm-corner, .cal-agm-cell .cal-agm-dot,
  .cal-agm-cell .cal-agm-multi, .cal-agm-pop, .cal-agt-now, .cal-agt-row.is-spot,
  .sched-loading, .sched-fly.is-open .sched-fly-row,
  .sched-fly.is-open .sched-fly-section--detail { animation: none; }
  .cal-agt-job, .cal-agm-cell, .cal-agm-dayhead, .cal-ags-chip, .cal-agt-tech .sched-ava { transition: none; }
}
/* — week->day instant swap: the board alone crossfades (View Transitions
   API; progressive enhancement, and the JS skips it under reduced motion).
   Naming .sched-body gives it its own snapshot pair so the page chrome
   around the schedule stays perfectly still during the morph. — */
.sched-body { view-transition-name: sched-body; }
::view-transition-old(sched-body),
::view-transition-new(sched-body) { animation-duration: 0.22s; }

/* ═══════════════════ end SCHEDULE DESIGN POLISH ═══════════════════ */

/* ── responsive ── */
@media (max-width: 720px) {
  .sched-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .sched-toolbar > .sched-updated { width: 100%; justify-content: flex-end; }
  .cal-agt-corner, .cal-agt-tech { flex-basis: 124px; padding-left: 10px; padding-right: 10px; }
  .cal-agt-tech .sched-ava { width: 22px; height: 22px; font-size: 9px; }
  .cal-agt-tname { font-size: 11.5px; }
  .cal-agm { gap: 3px 4px; }
  .cal-agm-tname { font-size: 11px; }
  .cal-ags-chip { padding: 5px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MENU COLLAPSE TOGGLE — color accents  (appended, additive, reversible)
   ----------------------------------------------------------------------
   The toggle's shape and position (the slim pull-tab handle riding the
   rail seam) live in 06-horizon-shell.css. This block only layers on the
   menu's color language: a muted chevron at rest that warms to orange on
   hover, and a brand-tinted handle while the menu is collapsed so it reads
   as the obvious way to bring the menu back. Remove this block to revert.
   ══════════════════════════════════════════════════════════════════════ */
#rail-toggle svg { color: var(--sw-muted, #7B8190); transition: color 140ms ease; }
#rail-toggle:hover svg { color: var(--sw-orange, #F38A3F); }
/* collapsed = the tab is the only handle left, so give it a brand hint */
body.rail-collapsed #rail-toggle { border-color: rgba(243, 138, 63, 0.34); }
body.rail-collapsed #rail-toggle svg { color: var(--sw-orange, #F38A3F); }
body.rail-collapsed #rail-toggle:hover { border-color: rgba(243, 138, 63, 0.52); }
/* ═══════════════════ end MENU COLLAPSE TOGGLE ═══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PROFILE → ACCOUNT PAGE  (appended, additive, reversible)
   The dock profile avatar is now a direct link to the account page (no
   popup), and Log out lives in that page's left rail. Style the rail's
   logout <button> to match the link rows, and keep the avatar link clean.
   ══════════════════════════════════════════════════════════════════════ */
a.horizon-profile-trigger, a.user-menu-trigger { text-decoration: none; }
button.horizon-hub-rail-link { background: transparent; font: inherit; cursor: pointer; text-align: left; width: 100%; }
.horizon-hub-rail-link--danger strong,
.horizon-hub-rail-link--danger .rail-label { color: var(--sw-coral, #D65F4F); }
.horizon-hub-rail-link--danger:hover {
  border-color: rgba(214, 95, 79, 0.28);
  background: var(--sw-coral-wash, #FCEBE7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
/* ═══════════════════ end PROFILE → ACCOUNT PAGE ═══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   SITE MAP → BOTTOM OF PAGE  (appended, additive, reversible)
   ----------------------------------------------------------------------
   The site map is a rarely-used "everything" index, so it should live at
   the very bottom of the page and only surface once you scroll all the way
   down, never floating up mid-screen under a short section. Keep it in the
   normal document flow (it scrolls with the page) but sink it to the
   floor: give <main> a screenful min-height and a flex column so the
   footer's margin-top:auto drops it to the bottom, and right-align it so
   the Site map button rests in the bottom-right corner. Remove this block
   to restore the footer's original mid-flow position. */
.admin-body .admin-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--chrome-top) - var(--chrome-bottom));
}
/* Flexing the column turns every section into a flex item. Sections that
   center themselves with `margin: 0 auto` under a max-width (every
   .horizon-embed-section: booking, online booking, the KPI dashboards, and the
   schedule) would otherwise shrink-to-fit and squish into the middle, because a
   flex item's auto cross-axis margins override the default stretch. Force them
   back to full width so they fill the column and still center under their own
   max-width, exactly as they did in normal block flow. */
.admin-body .admin-content > .section-page { width: 100%; }
.admin-page-footer {
  margin-top: auto;            /* sink to the bottom; only seen once you scroll down */
  flex-direction: row-reverse; /* Site map button rests in the bottom-right corner */
}
/* ═══════════════════ end SITE MAP → BOTTOM OF PAGE ═══════════════════ */

/* ═══ Settings tab panels ═══
   The Settings rail shows one panel per menu item (setupSettingsNav toggles
   the hidden attribute on [data-set-group] blocks). Several of those blocks
   carry their own display rule (.bento-card is grid, the save card is flex),
   which would silently defeat the UA's [hidden] rule — force it. */
[data-set-group][hidden] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   KPI SHARE STRIP  (appended, additive, reversible)
   The booking tab's share strip, reused at the BOTTOM of each KPI dashboard
   (Technician Performance, Location leaders, Marketing). Same component,
   flipped margin so it rests under the board it shares. */
.kpi-share-strip { margin: 18px auto 0; }
.kpi-desk-view .kpi-share-strip { margin-bottom: 26px; }
/* ═══════════════════ end KPI SHARE STRIP ═══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   CUSTOMER SPOTLIGHT SEARCH  (toolbar field + dim/glow the board)
   Type a customer name to fade every other job and ring the matches in
   place — no reload. Wired in public/js/schedule-views.js (applySearch).
   Additive + reversible: delete this block and the toolbar markup to revert. */
.sched-search {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 7px 0 10px;
  border: 1px solid var(--sw-border, #E5DED3); border-radius: 999px;
  background: var(--sw-card-lift, #FFFDF9);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sched-search:focus-within { border-color: var(--sw-orange, #F38A3F); box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.14); }
.sched-search-ico { flex: none; color: var(--sw-muted, #7B8190); }
.sched-search-input { width: 132px; min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--sw-ink, #373B4D); outline: none; }
.sched-search-input::placeholder { color: var(--sw-muted, #7B8190); }
/* The outer .sched-search pill owns the focus glow; kill the global
   input:focus orange ring so we don't get a pill inside a pill. */
.sched-search-input:focus, .sched-search-input:focus-visible { box-shadow: none; border-color: transparent; }
.sched-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sched-search-count { font-size: 11px; font-weight: 750; color: var(--sw-orange-dark, #C66518); white-space: nowrap; }
.sched-search-count.is-zero { color: var(--sw-muted, #7B8190); }
.sched-search-clear { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--sw-muted, #7B8190); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.sched-search-clear:hover { background: rgba(55, 59, 77, 0.08); color: var(--sw-ink, #373B4D); }
.sched-search.has-q .sched-search-clear { display: inline-flex; }

/* Board state while searching: matches glow, everything else fades back. */
.sched-body .cal-agt-job { transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; }
.sched-body .sfd-job { transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; }
.sched-body.sched-is-searching .cal-agt-job.is-search-miss,
.sched-body.sched-is-searching .sfd-job.is-search-miss { opacity: 0.16; }
.sched-body.sched-is-searching .cal-agt-job.is-search-hit { z-index: 4; box-shadow: 0 0 0 2px var(--sw-orange, #F38A3F), 0 6px 16px rgba(55, 59, 77, 0.18); }
.sched-body.sched-is-searching .sfd-job.is-search-hit { z-index: 4; box-shadow: 0 0 0 2px var(--sw-orange, #F38A3F); }
@media (prefers-reduced-motion: reduce) {
  .sched-body .cal-agt-job, .sched-body .sfd-job { transition: none; }
}
/* ═══════════════════ end CUSTOMER SPOTLIGHT SEARCH ═══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   FIND-A-CUSTOMER RESULTS  (cross-history appointment search dropdown)
   The toolbar box hits /admin/api/schedule/search and lists EVERY matching
   appointment for the location, newest first; click one to jump to its day and
   open the flyout. Wired in public/js/schedule-views.js (runRemoteSearch /
   renderSearchResults / openSearchResult). Additive + reversible: delete this
   block + the [data-sched-search-results] markup to keep just the in-place glow. */
.sched-search.is-open { border-color: var(--sw-orange, #F38A3F); box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.14); }
.sched-search-results {
  position: absolute; top: calc(100% + 7px); left: 0;
  width: 340px; max-width: min(340px, 86vw); max-height: 60vh; overflow-y: auto;
  padding: 6px; z-index: 60;
  background: var(--sw-card-lift, #FFFDF9);
  border: 1px solid var(--sw-border, #E5DED3); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(40, 38, 34, 0.20);
  -webkit-overflow-scrolling: touch;
}
.sched-search-results[hidden] { display: none; }
.sched-sr-head {
  padding: 5px 10px 7px; font-size: 11px; font-weight: 750; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--sw-muted, #7B8190);
}
.sched-sr-note { padding: 14px 12px; font-size: 13px; color: var(--sw-muted, #7B8190); text-align: center; }
.sched-sr-row {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; color: var(--sw-ink, #373B4D); text-align: left; cursor: pointer;
  transition: background 0.14s ease;
}
.sched-sr-row + .sched-sr-row { margin-top: 1px; }
.sched-sr-row:hover, .sched-sr-row:focus-visible, .sched-sr-row.is-active { background: var(--sw-orange-soft, #FFEEDC); outline: none; }
.sched-sr-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--sw-card, #FCFAF6); border: 1px solid var(--sw-border, #E5DED3);
  font-size: 11px; font-weight: 800; color: var(--sw-ink, #373B4D);
}
.sched-sr-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sched-sr-name { font-size: 13.5px; font-weight: 750; color: var(--sw-ink-deep, #373B4D); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-sr-meta { font-size: 11.5px; color: var(--sw-muted, #7B8190); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-search-results .sched-pill { flex: none; }
@media (max-width: 560px) {
  .sched-search-results { width: 80vw; left: auto; right: 0; }
}
/* ═══════════════════ end FIND-A-CUSTOMER RESULTS ═══════════════════ */

/* People & Service Locations (136): site nickname + on-site person + access
   notes at the top of the job flyout's detail box. */
.sched-fly-sitenick { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--sw-ink, #373B4D); }
.sched-fly-onsite { margin: 0 0 4px; font-size: 13px; color: var(--sw-ink, #373B4D); }
.sched-fly-onsite a { color: var(--sw-orange-dark, #C66518); text-decoration: none; font-weight: 600; }
.sched-fly-onsite a:hover { text-decoration: underline; }
.sched-fly-access {
  margin: 0 0 6px; font-size: 12.5px; color: var(--sw-orange-dark, #C66518);
  background: var(--sw-orange-soft, #FFEEDC); border-radius: 10px; padding: 6px 10px;
  display: inline-block;
}