/* Help affordance: question-mark badge with a tooltip. Uses
   data-tooltip + ::after so we don't depend on a third-party tooltip
   lib. Tooltip shows on hover or keyboard focus. */
.admin-customer-search-scope-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #7B8190;
  background: #FFFDF9;
  cursor: help;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-customer-search-scope-help:hover,
.admin-customer-search-scope-help:focus-visible {
  outline: none;
  color: #1F5A86;
  background: #BFE0F3;
}
.admin-customer-search-scope-help::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  max-width: 300px;
  padding: 8px 10px;
  background: #373B4D;
  color: #FFFDF9;
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(55, 59, 77, 0.18);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  text-align: left;
  z-index: 50;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.admin-customer-search-scope-help::before {
  /* Tooltip caret. Same color as the bubble; positioned at the top so
     it visually anchors to the help icon. */
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 5px solid transparent;
  border-bottom-color: #373B4D;
  opacity: 0;
  pointer-events: none;
  z-index: 51;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.admin-customer-search-scope-help:hover::after,
.admin-customer-search-scope-help:focus-visible::after,
.admin-customer-search-scope-help:hover::before,
.admin-customer-search-scope-help:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.admin-customer-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.admin-customer-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.admin-customer-search-input {
  width: 100%;
  /* Bento input: warm card fill (not pure white per philosophy), warm
     soft border, larger 14px radius for soft-tactile feel. Vertical
     padding keeps the input ~40px tall so the one-row banner stays
     toolbar height. */
  padding: 9px 38px;
  border: 1px solid #E5DED3;
  border-radius: 14px;
  background: #FCFAF6;
  font-size: 0.95rem;
  color: #373B4D;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.admin-customer-search-input::placeholder { color: #7B8190; }
.admin-customer-search-input:hover { background: #FFFDF9; }
.admin-customer-search-input:focus {
  outline: none;
  background: #FFFDF9;
  border-color: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.admin-customer-search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-customer-search-clear:hover {
  background: rgba(39, 41, 54, 0.08);
  color: var(--text);
}
.admin-customer-search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  border-radius: 18px;
  /* Ambient soft shadow per philosophy — diffused, low-opacity warm
     tint rather than a hard drop shadow. */
  box-shadow: 0 18px 48px rgba(55, 59, 77, 0.10),
              0 2px 6px rgba(55, 59, 77, 0.04),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}
.admin-customer-search-result {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.admin-customer-search-result:hover,
.admin-customer-search-result:focus {
  background: rgba(243, 138, 63, 0.10);
  outline: none;
}
.admin-customer-search-result-main {
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-customer-search-result-main strong { font-weight: 600; }
.admin-customer-search-result-addr { color: var(--text); }
.admin-customer-search-result-meta {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-customer-search-hint {
  /* Overlay below the input (like the results list) so a hint never
     changes the height of the single-row banner. Sits under the
     results dropdown (z 9 vs 10) when both are visible, matching the
     old in-flow behavior where the dropdown covered it. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(55, 59, 77, 0.08);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ─── Admin location + scope picker ───────────────────────────────
   Bento-style dropdown that replaces both the native <select>
   location switcher and the old segmented "Location / All locations"
   scope toggle. Lives in the admin booking banner row.

   Layout: <details> wrapper with a soft-card <summary> button. The
   <summary>'s "Booking for" label sits above the current location
   name; on click, the menu drops below with the locations list
   (current pinned to top) on top and the cross-location search
   toggle below, separated by a faint divider. The whole thing reads
   as one premium control rather than two unrelated widgets. */
.admin-loc-picker {
  position: relative;
  min-width: 220px;
}
.admin-loc-picker[open] .admin-loc-picker-caret {
  transform: rotate(180deg);
}
.admin-loc-picker-summary {
  /* Single-line pill — value + caret. Used to be a two-line stack
     ("Booking for" eyebrow over the location name) which made this
     control noticeably taller than every other banner pill. Now
     matches the height of .admin-booking-banner-pill and
     .admin-booking-banner-back so the whole header row reads as one
     consistent control strip. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  min-height: 32px;
  background: #FFFDF9;
  border: 1px solid #E5DED3;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-width: 0;
}
.admin-loc-picker-summary::-webkit-details-marker { display: none; }
.admin-loc-picker-summary:hover {
  border-color: rgba(243, 138, 63, 0.45);
  background: #FFFBF3;
}
.admin-loc-picker-summary:focus-visible {
  outline: none;
  border-color: #F38A3F;
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.18);
}
.admin-loc-picker[open] .admin-loc-picker-summary {
  border-color: rgba(243, 138, 63, 0.55);
  background: #FFFBF3;
}
.admin-loc-picker-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: #373B4D;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  line-height: 1.2;
}
.admin-loc-picker-caret {
  color: #7B8190;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

/* ── Menu ────────────────────────────────────────────────────── */
.admin-loc-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  max-width: 340px;
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 18px 48px rgba(55, 59, 77, 0.14),
              0 2px 6px rgba(55, 59, 77, 0.06),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.admin-loc-picker-eyebrow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7B8190;
  margin: 4px 6px 6px;
}
.admin-loc-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-loc-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #373B4D;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-loc-picker-item:hover,
.admin-loc-picker-item:focus-visible {
  outline: none;
  background: rgba(243, 138, 63, 0.10);
  color: #373B4D;
}
.admin-loc-picker-item.is-current {
  background: rgba(243, 138, 63, 0.10);
  cursor: default;
}
.admin-loc-picker-item.is-current:hover {
  background: rgba(243, 138, 63, 0.14);
}
.admin-loc-picker-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #FFFDF9;
  color: #373B4D;
  font-size: 0.78rem;
  font-weight: 800;
  flex: 0 0 26px;
}
.admin-loc-picker-item.is-current .admin-loc-picker-bullet {
  background: #F38A3F;
  color: #fff;
}
.admin-loc-picker-item-name {
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-loc-picker-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(243, 138, 63, 0.18);
  color: #B86012;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.admin-loc-picker-current-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.admin-loc-picker-arrow {
  color: #7B8190;
  flex: 0 0 auto;
  opacity: 0.6;
  transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.admin-loc-picker-item:hover .admin-loc-picker-arrow {
  opacity: 1;
  color: #F38A3F;
  transform: translateX(2px);
}

.admin-loc-picker-divider {
  height: 1px;
  background: linear-gradient(to right,
              rgba(229, 222, 211, 0),
              rgba(229, 222, 211, 1) 12%,
              rgba(229, 222, 211, 1) 88%,
              rgba(229, 222, 211, 0));
  margin: 10px 6px 6px;
}

/* ── Scope toggle row (inside menu) ─────────────────────────────
   Reads like an iOS settings row: icon + title + sub-hint + switch
   on the far right. Default state OFF; tap toggles. The same JS
   `scope` variable that the old segmented control wrote to is
   updated here, so search behavior is identical. */
.admin-loc-picker-scope-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #373B4D;
  transition: background 0.12s ease;
}
.admin-loc-picker-scope-toggle:hover,
.admin-loc-picker-scope-toggle:focus-visible {
  outline: none;
  background: rgba(191, 224, 243, 0.18);
}
.admin-loc-picker-scope-toggle[data-scope-state="on"] {
  background: rgba(191, 224, 243, 0.28);
}
.admin-loc-picker-scope-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #BFE0F3;
  color: #1F5A86;
  flex: 0 0 30px;
}
.admin-loc-picker-scope-toggle[data-scope-state="on"] .admin-loc-picker-scope-icon {
  background: #1F5A86;
  color: #fff;
}
.admin-loc-picker-scope-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-loc-picker-scope-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #373B4D;
}
.admin-loc-picker-scope-hint {
  font-size: 0.72rem;
  line-height: 1.32;
  color: #7B8190;
}
.admin-loc-picker-scope-switch {
  position: relative;
  width: 32px;
  height: 18px;
  background: #E5DED3;
  border-radius: 999px;
  flex: 0 0 auto;
  transition: background 0.18s ease;
}
.admin-loc-picker-scope-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFDF9;
  box-shadow: 0 1px 3px rgba(55, 59, 77, 0.18);
  transition: transform 0.18s ease;
}
.admin-loc-picker-scope-toggle[data-scope-state="on"] .admin-loc-picker-scope-switch {
  background: #1F5A86;
}
.admin-loc-picker-scope-toggle[data-scope-state="on"] .admin-loc-picker-scope-switch-knob {
  transform: translateX(14px);
}

/* Inline flag next to the dropdown button in the banner row.
   Hidden by default; surfaces only when the search-scope toggle
   is ON. Tells the admin at a glance that searches will fan out
   across every franchise's HCP account (slower). */
.admin-loc-scope-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(191, 224, 243, 0.35);
  color: #1F5A86;
  border: 1px solid rgba(31, 90, 134, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.admin-loc-scope-flag[hidden] { display: none; }
.admin-loc-scope-flag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1F5A86;
}

@media (max-width: 600px) {
  .admin-loc-picker-menu {
    min-width: calc(100vw - 48px);
  }
}

/* ─── Cross-location address warning ─────────────────────────
   Renders inside #zone-message when the typed address geocodes to a
   sister franchise's territory in admin mode. The customer must
   either switch to that franchise (deep-link) or force-book the
   current one (which sets bypass_outside_area + records an audit
   override that lands on the HCP job note). */
.cross-loc-warn {
  padding: 18px 20px;
  background: #FCFAF6;
  border: 1px solid rgba(211, 154, 46, 0.32);
  border-left: 4px solid #D39A2E;
  border-radius: 16px;
  color: #373B4D;
  box-shadow: 0 10px 26px rgba(55, 59, 77, 0.05),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.cross-loc-warn-head {
  display: flex;
  /* flex-start so the warning icon pins to the top of the first
     line of text instead of vertically centering against the whole
     wrapped block (which made the icon look like it was floating
     above the message on narrow widths). */
  align-items: flex-start;
  gap: 9px;
  color: #6F4D14;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}
.cross-loc-warn-head svg {
  color: #D39A2E;
  flex: 0 0 16px;
  /* Optical alignment: SVG baseline doesn't match the text cap-line
     by default; nudge down a hair so it visually centers with the
     first line of bolded heading text. */
  margin-top: 2px;
}
.cross-loc-warn-body {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #7B8190;
}
.cross-loc-warn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cross-loc-warn-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cross-loc-warn-btn--primary {
  background: #F38A3F;
  color: #fff;
}
.cross-loc-warn-btn--primary:hover {
  background: #E07A2A;
}
.cross-loc-warn-btn--ghost {
  background: #FFFDF9;
  color: #373B4D;
  border-color: #E5DED3;
}
.cross-loc-warn-btn--ghost:hover {
  background: #FFFAF1;
  border-color: rgba(243, 138, 63, 0.35);
}

/* Persistent banner above the day-by-tech grid when the bypass is
   in effect. Smaller, less alarming than the initial warning — just
   a reminder that the admin force-booked. Carries a clear (×) button
   so the admin can drop the override without retyping the address. */
.cross-loc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(211, 154, 46, 0.12);
  border: 1px solid rgba(211, 154, 46, 0.32);
  border-radius: 12px;
  margin-bottom: 12px;
  color: #6F4D14;
  font-size: 0.86rem;
  font-weight: 600;
}
.cross-loc-banner svg { flex: 0 0 14px; color: #D39A2E; }
.cross-loc-banner > span { flex: 1 1 auto; }
.cross-loc-banner-clear {
  border: 0;
  background: transparent;
  color: #6F4D14;
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}
.cross-loc-banner-clear:hover { background: rgba(211, 154, 46, 0.22); }

/* ─── Capability-check banner ────────────────────────────────
   Surfaces at the top of the admin booking page when the per-location
   /capabilities probe returns either a hard fail (no HCP key set —
   red error banner) or a soft fail (some endpoints failed — amber
   warn banner). Hidden when everything's healthy. */
.admin-cap-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  /* Default warm-card fill so the banner is always legible even if a
     variant class (--error / --warn / --ok) is missing. Variants
     override this with their own tinted fills below. */
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  color: #373B4D;
  box-shadow: 0 12px 32px rgba(55, 59, 77, 0.05),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
/* Honor the HTML `hidden` attribute. Without this, `display: flex`
   above wins over the UA `[hidden] { display: none }` rule, and the
   empty banner shell renders as a floating bar above the search
   input even when JS keeps it semantically hidden. */
.admin-cap-banner[hidden] { display: none; }
.admin-cap-banner svg { flex: 0 0 18px; margin-top: 2px; }
.admin-cap-banner-body { flex: 1 1 auto; min-width: 0; }
.admin-cap-banner-body strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 3px;
  color: inherit;
}
.admin-cap-banner-detail {
  display: block;
  font-size: 0.85rem;
  opacity: 0.92;
}
.admin-cap-banner-action {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
  border: 1px solid currentColor;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-cap-banner-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.7;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.admin-cap-banner-close:hover { opacity: 1; background: rgba(55, 59, 77, 0.06); }

/* Error state — uses the philosophy's unpaid coral (#D65F4F) on the
   unpaid wash (#FCEBE7) rather than the previous harsh red. Still
   reads as serious, but stays within the warm-palette discipline. */
.admin-cap-banner--error {
  background: #FCEBE7;
  border: 1px solid rgba(214, 95, 79, 0.35);
  color: #8A2C1F;
}
.admin-cap-banner--error .admin-cap-banner-action {
  background: #D65F4F;
  color: #fff;
  border-color: #D65F4F;
}
.admin-cap-banner--error .admin-cap-banner-action:hover {
  background: #BA4938;
  border-color: #BA4938;
}
/* Warn state — warning gold (#D39A2E) on a soft warm wash so it
   stands apart from error without competing with it. */
.admin-cap-banner--warn {
  background: rgba(211, 154, 46, 0.12);
  border: 1px solid rgba(211, 154, 46, 0.36);
  color: #6F4D14;
}

/* In the 2-col admin grid this banner needs to span both columns. */
.booking-page--admin > .admin-cap-banner { grid-column: 1 / -1; }

/* ─── Smart suggestions (above the day-by-tech grid) ─────────
   Three at-a-glance cards: Best / Soonest / Previous tech. The
   "Previous tech" card only shows when a customer has been picked
   AND the day's availability includes a tech who's been to that
   customer before. "Best" picks previous-tech if within ~2 days of
   soonest, else falls back to soonest. */
.admin-cal-suggestions {
  margin-bottom: 12px;
}
.admin-cal-suggestions-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 0 8px 2px;
}
.admin-cal-suggestions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.suggestion-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  /* Bento mini-card: warm card-highlight fill (lifts off the rail's
     warm-card surface), soft-warm border, 16px squircle radius, soft
     ambient warm shadow. */
  background: #FFFDF9;
  border: 1px solid #E5DED3;
  border-left: 4px solid #E5DED3;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #373B4D;
  box-shadow: 0 6px 16px rgba(55, 59, 77, 0.04),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: background 0.12s ease, border-color 0.12s ease,
              transform 0.06s ease, box-shadow 0.12s ease;
}
.suggestion-card:hover {
  background: #FFFAF1;
  border-color: rgba(243, 138, 63, 0.35);
  box-shadow: 0 10px 22px rgba(55, 59, 77, 0.06),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.suggestion-card:focus { outline: none; box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.22); }
/* Variant accents stay inside the warm Sunwave palette per philosophy:
     --soonest  → logo navy (calm baseline for "earliest slot")
     --previous → warning gold (continuity nudge)
     --combined → orange (escalated: previous tech AND earliest free at
                   the same slot — the unambiguous best pick) */
.suggestion-card--soonest { border-left-color: #1F5A86; }
.suggestion-card--previous { border-left-color: #D39A2E; }
.suggestion-card--combined { border-left-color: #F38A3F; }
.suggestion-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #7B8190;
}
.suggestion-card--soonest .suggestion-label { color: #1F5A86; }
.suggestion-card--previous .suggestion-label { color: #C66518; }
.suggestion-card--combined .suggestion-label { color: #B86012; }
.suggestion-when {
  font-size: 1rem;
  font-weight: 800;
  color: #373B4D;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.suggestion-tech {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 1px;
}
.suggestion-reason {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 2px;
}

/* ─── Admin booking · day-by-tech calendar ───────────────────
   Replaces the public month-grid calendar in admin mode. Day view:
   rows = slot times, columns = bookable techs. The CSR can see the
   whole day's open / booked picture at a glance and pick a specific
   tech-slot combo instead of letting the auto-assigner choose. */
.admin-cal {
  /* Hero scheduler card: warm card surface with the 22px squircle
     radius the philosophy reserves for major cards. Generous padding +
     soft ambient shadow. */
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  border-radius: 22px;
  padding: 22px 24px 24px;
  box-shadow: 0 14px 36px rgba(55, 59, 77, 0.05),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
/* Stacked header layout: top row holds the centered selected-day
   pill + the Today shortcut anchored right; bottom row holds the
   full-width week strip. The empty spacer on the left mirrors the
   Today pill width so the date pill stays truly centered between
   them without resorting to absolute positioning. */
.admin-cal-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-cal-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.admin-cal-top-spacer {
  /* Same intrinsic width as the Today pill (~78px) so the centered
     pill is truly centered relative to the strip below. Falls back
     to 0 width on narrow screens via the media query at the bottom. */
  flex: 0 0 78px;
  display: inline-block;
}
/* "Open day in HCP" shortcut on the left side of the header. Same
   pill shape as the Today button on the right so the selected-day
   label between them stays centered. Navy accent + external-link
   icon distinguishes it from the orange Today pill — both are
   peer-level affordances but they do different things. */
.admin-cal-open-hcp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-right: 6px;
  border: 1px solid #E5DED3;
  background: transparent;
  color: #7B8190;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease,
              background 0.14s ease, transform 0.12s ease;
}
.admin-cal-open-hcp svg { color: currentColor; flex: 0 0 13px; }
.admin-cal-open-hcp-label {
  white-space: nowrap;
}
.admin-cal-open-hcp:hover {
  border-color: #373B4D;
  color: #373B4D;
  background: rgba(55, 59, 77, 0.05);
}
.admin-cal-open-hcp:active { transform: scale(0.97); }
.admin-cal-open-hcp:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(55, 59, 77, 0.18);
}
.admin-cal-strip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* Selected-day label — clickable pill that opens the native date
   picker. Replaces the old admin-cal-date-trigger; same shape and
   weight so the page rhythm doesn't change. */
.admin-cal-selected-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  min-height: 36px;
  background: #FFFDF9;
  border: 1px solid #E5DED3;
  border-radius: 999px;
  color: #373B4D;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: background 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, transform 0.06s ease;
  white-space: nowrap;
}
.admin-cal-selected-label:hover {
  background: #FFFAF1;
  border-color: rgba(243, 138, 63, 0.35);
}
.admin-cal-selected-label:focus {
  outline: none;
  border-color: #F38A3F;
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.22),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.admin-cal-selected-label:active { transform: scale(0.98); }
.admin-cal-selected-label svg { color: #7B8190; flex: 0 0 14px; }
.admin-cal-selected-label:hover svg { color: #F38A3F; }
.admin-cal-selected-text { font-variant-numeric: tabular-nums; }
/* Selected-label wrapper — gives the date pill a positioning context
   so the custom date-picker popover can absolutely-position directly
   beneath it. Inline-block so the wrapper hugs the pill's natural
   width. Centered in the top row via the surrounding flex container. */
.admin-cal-selected-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* ─── Custom date-picker popover ────────────────────────────────
   Drops beneath the selected-day pill. Replaces the native <input
   type="date"> picker, which the browser dropped to the LEFT of
   the trigger and couldn't be styled to fit the warm-canvas
   aesthetic. Philosophy: bento card surface, 18px squircle radius,
   ambient warm-shadow, generous internal padding, KPI hierarchy
   (month title is bold + sized up, day-of-week labels muted and
   tracked, date numbers tabular-nums for stable alignment). */
.admin-cal-datepop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 320px;
  padding: 16px 18px 14px;
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(55, 59, 77, 0.10),
              0 2px 6px rgba(55, 59, 77, 0.04),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
  font-family: inherit;
  color: #373B4D;
}
.admin-cal-datepop[hidden] { display: none; }
@media (max-width: 480px) {
  /* On narrow viewports, anchor to the LEFT edge of the wrapper
     instead of centering — otherwise a centered 320px popover
     overflows a tight phone column. */
  .admin-cal-datepop {
    left: 0;
    transform: none;
    width: min(320px, calc(100vw - 32px));
  }
}
.admin-cal-datepop-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.admin-cal-datepop-title {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.admin-cal-datepop-nav {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E5DED3;
  background: #FFFDF9;
  color: #373B4D;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, transform 0.08s ease;
}
.admin-cal-datepop-nav:hover:not(:disabled) {
  background: rgba(243, 138, 63, 0.08);
  border-color: rgba(243, 138, 63, 0.45);
  color: #B86012;
}
.admin-cal-datepop-nav:active:not(:disabled) { transform: scale(0.92); }
.admin-cal-datepop-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.admin-cal-datepop-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 4px;
}
.admin-cal-datepop-dow-cell {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #8A8475;
  padding: 6px 0;
  text-transform: uppercase;
}
.admin-cal-datepop-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.admin-cal-datepop-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #373B4D;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease,
              transform 0.06s ease;
}
.admin-cal-datepop-cell:hover {
  background: rgba(243, 138, 63, 0.10);
  color: #B86012;
}
.admin-cal-datepop-cell:active { transform: scale(0.94); }
/* Other-month cells (spill-over from prev/next month). Muted so the
   eye locks onto the current month without losing the surrounding
   context. */
.admin-cal-datepop-cell--other-month {
  color: #C9C2B0;
  font-weight: 500;
}
.admin-cal-datepop-cell--other-month:hover { color: #B86012; }
/* Out-of-window (outside the bookable horizon). Still clickable so
   the admin can scrub into a fully-booked future date if they want
   to peek; click routes through showOutOfRangeDay() which surfaces
   the "fully booked" warn band. */
.admin-cal-datepop-cell--out-of-window {
  color: #B7BBC7;
  font-weight: 500;
}
.admin-cal-datepop-cell--out-of-window:hover { color: #B86012; }
/* Today — small orange dot under the number. Matches the strip's
   today indicator so the two surfaces read as one visual system. */
.admin-cal-datepop-cell--today::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F38A3F;
}
/* Selected — solid orange pill behind the number. Highest-emphasis
   state in the picker; the orange brand color carries the "this is
   the day I'm scheduling for" meaning everywhere else in the app. */
.admin-cal-datepop-cell--selected {
  background: #F38A3F;
  color: #FFFFFF;
  font-weight: 700;
}
.admin-cal-datepop-cell--selected:hover {
  background: #E37A2F;
  color: #FFFFFF;
}
.admin-cal-datepop-cell--selected.admin-cal-datepop-cell--today::after {
  background: #FFFFFF;
}
.admin-cal-datepop-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ECE5D6;
}
.admin-cal-datepop-today {
  background: transparent;
  border: 1px solid #E5DED3;
  color: #373B4D;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, transform 0.08s ease;
}
.admin-cal-datepop-today:hover {
  background: rgba(243, 138, 63, 0.08);
  border-color: rgba(243, 138, 63, 0.45);
  color: #B86012;
}
.admin-cal-datepop-today:active { transform: scale(0.96); }
/* Strip — no container box. Floats inside the calendar card so it
   reads as a clean Sun-Sat week ledger instead of a separate widget.
   Arrows + 7 cells + arrows sit in a single flex row that spans the
   available width so each cell gets generous breathing room. */
.admin-cal-strip-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  /* Wider than the previous pass — the strip now owns its own row so
     it can stretch across the full calendar card. Capped at 640px so
     each cell stays a readable tap target without ballooning on
     ultra-wide displays. */
  max-width: 640px;
  background: transparent;
  border: 0;
  padding: 0;
}
.admin-cal-strip-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #7B8190;
  transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}
.admin-cal-strip-arrow:hover:not(:disabled) {
  background: rgba(243, 138, 63, 0.08);
  color: #F38A3F;
}
.admin-cal-strip-arrow:active:not(:disabled) { transform: scale(0.92); }
.admin-cal-strip-arrow:disabled { opacity: 0.25; cursor: default; }
.admin-cal-strip {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* Each day cell — equal flex share so the strip fills its row,
   with day-of-week initial on top, date number, and an availability
   dot beneath. Cells are tappable list items (no real <button>) so
   selected + today states layer cleanly. Wider than the previous
   pass per the design feedback. */
.admin-cal-strip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  flex: 1 1 0;
  padding: 6px 4px 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  color: #373B4D;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-cal-strip-cell:hover { background: rgba(243, 138, 63, 0.05); }
.admin-cal-strip-dow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7B8190;
  text-transform: uppercase;
  line-height: 1.1;
}
.admin-cal-strip-date {
  font-size: 1.05rem;
  font-weight: 700;
  color: #373B4D;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  position: relative;
}
/* Availability dot — historically green when the day had open
   slots; removed per design pass. Availability is now signaled by
   the date number color (dark = bookable, gray = fully booked /
   out-of-range). The element is still rendered but kept invisible
   so today's marker can still light up without shifting layout. */
.admin-cal-strip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  margin-top: 4px;
}
/* Selected day — thin orange underline beneath the date number
   instead of a full pill/box. Reads as "this is the day I'm
   scheduling for" without the heavy chrome of the prior pill,
   matching the "floats inside the box" design direction. */
.admin-cal-strip-cell.is-selected .admin-cal-strip-date::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  width: 22px;
  height: 2.5px;
  border-radius: 999px;
  background: #F38A3F;
}
.admin-cal-strip-cell.is-selected .admin-cal-strip-date,
.admin-cal-strip-cell.is-selected .admin-cal-strip-dow { color: #373B4D; }
.admin-cal-strip-cell.is-selected .admin-cal-strip-dow { color: #B86012; }
/* Today marker — small orange dot under the date number. Stays
   even when today is fully booked, so the strip always anchors
   visually around "now." */
.admin-cal-strip-cell.is-today .admin-cal-strip-dot {
  background: #F38A3F;
}
/* Fully-booked + out-of-range days — date number washes out to gray
   to signal "you can click, but there's nothing to schedule here."
   Cells stay clickable so the admin gets a clear "fully booked"
   confirmation in the warn band instead of a silent no-op. */
.admin-cal-strip-cell.is-empty .admin-cal-strip-date,
.admin-cal-strip-cell.is-out-of-range .admin-cal-strip-date {
  color: #B7BBC7;
}
.admin-cal-strip-cell.is-empty .admin-cal-strip-dow,
.admin-cal-strip-cell.is-out-of-range .admin-cal-strip-dow {
  color: #B7BBC7;
}
/* Selected wins over gray — if the admin actually clicks into a
   fully-booked day, the date should pop back to navy so it reads
   as "this is the day I'm looking at, it's just empty." */
.admin-cal-strip-cell.is-selected.is-empty .admin-cal-strip-date,
.admin-cal-strip-cell.is-selected.is-out-of-range .admin-cal-strip-date {
  color: #373B4D;
}
/* Snap-to-today pill. Three states:
   - is-current (default when admin lands on today): muted, no
     hover affordance — already there.
   - is-active (off-today, within window): orange-tinted, signals
     "click me to come back to now."
   - :disabled (today is outside the bookable window): faded out. */
.admin-cal-today {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-left: 6px;
  border: 1px solid #E5DED3;
  background: transparent;
  color: #7B8190;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease,
              background 0.14s ease, transform 0.12s ease;
}
.admin-cal-today svg { color: currentColor; flex: 0 0 13px; }
/* Label inside the Today pill. Width fluctuates as the admin moves
   off-today ("Today" → "+5 days" → "+12 days"); tabular-nums keeps
   the digits from jittering and nowrap stops the pill from wrapping
   when the delta hits two-digit territory. */
.admin-cal-today-label {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-cal-today:hover:not(:disabled) {
  border-color: #F38A3F;
  color: #B86012;
  background: rgba(243, 138, 63, 0.06);
}
.admin-cal-today:active:not(:disabled) { transform: scale(0.97); }
.admin-cal-today:disabled { opacity: 0.4; cursor: default; }
/* Active state — admin is on a different day. Pill takes on a soft
   orange wash + colored border to draw the eye. Subtle pulse on the
   clock icon hints "now is moving along without you." */
.admin-cal-today.is-active {
  border-color: rgba(243, 138, 63, 0.55);
  color: #B86012;
  background: rgba(243, 138, 63, 0.10);
}
.admin-cal-today.is-active svg { animation: todayPulse 2.4s ease-in-out infinite; }
@keyframes todayPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
/* Current state — viewing today. Pill stays present (so the admin
   knows their reference point) but reads as quiet/inactive. */
.admin-cal-today.is-current {
  color: #7B8190;
  background: transparent;
  border-color: #E5DED3;
}
/* Date trigger — the entire date label is the clickable surface
   that opens the native date picker (calendar.js wires showPicker()
   on click). Reads as a quiet pill: warm card bg + soft border + the
   day label inside. Icon hints "calendar" so admins know it's
   interactive even on a touch device where hover doesn't fire. */
.admin-cal-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  min-height: 36px;
  background: #FFFDF9;
  border: 1px solid #E5DED3;
  border-radius: 999px;
  color: #373B4D;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: background 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, transform 0.06s ease;
}
.admin-cal-date-trigger:hover {
  background: #FFFAF1;
  border-color: rgba(243, 138, 63, 0.35);
  color: #373B4D;
}
.admin-cal-date-trigger:focus {
  outline: none;
  border-color: #F38A3F;
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.22),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.admin-cal-date-trigger:active { transform: scale(0.98); }
.admin-cal-date-trigger-icon {
  color: #7B8190;
  flex: 0 0 14px;
}
.admin-cal-date-trigger:hover .admin-cal-date-trigger-icon { color: #F38A3F; }
.admin-cal-date-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: #373B4D;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
/* Native date input is offscreen — only used to launch the picker
   via showPicker() and to receive the change event. The trigger
   button above is the visible affordance. */
.admin-cal-date-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  clip: rect(0 0 0 0);
}

/* Day-grid meter — hero-scale KPI tiles per philosophy doc:
   "the most important piece of data in a card... must be massive.
   It should be the heaviest font weight available and scaled to
   dominate the card's real estate." Numbers bumped from 1.25rem to
   1.55rem and labels tightened so each stat reads as an anchor for
   the eye, matching .acc-name / .empty-slots-kpi-value scale. */
.admin-cal-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 36px;
  padding: 18px 22px;
  background: #FFFDF9;
  border: 1px solid #E5DED3;
  border-radius: 16px;
  margin-bottom: 14px;
}
.admin-cal-meter .meter-stat { display: flex; flex-direction: column; gap: 4px; }
.admin-cal-meter .meter-num {
  font-size: 1.55rem;
  font-weight: 800;
  color: #373B4D;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.admin-cal-meter .meter-label {
  font-size: 0.68rem;
  color: #7B8190;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
}

.admin-cal-warn {
  padding: 10px 14px;
  background: rgba(211, 154, 46, 0.12);
  border: 1px solid rgba(211, 154, 46, 0.32);
  color: #6F4D14;
  font-size: 0.84rem;
  border-radius: 12px;
  margin-bottom: 12px;
}

.admin-cal-grid-wrap {
  /* Horizontal scroll is no longer the failure mode — adding techs
     extends the grid downward (vertical scroll, which the page
     already handles). Keeping overflow-x: auto as a safety net for
     very narrow viewports / many time slots, but in normal use it
     never triggers. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-cal-grid {
  display: grid;
  /* Flipped axes: first column = tech label (wider, fits "Firstname
     Lastname"), remaining columns = time slots (fixed, small set).
     --num-slots is set by the JS render (typically 3-4) so the grid
     hugs the slot count and doesn't reserve empty columns. */
  grid-template-columns: 168px repeat(var(--num-slots, 1), minmax(120px, 1fr));
  gap: 4px;
  min-width: max-content;
}
.admin-cal-corner {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7B8190;
  font-weight: 800;
  padding: 8px 12px;
  align-self: end;
}
/* Tech rows — name label sits in the LEFT column of each tech's row.
   Now reads as a row leader (left-aligned, vertical name + last name)
   rather than the old column header treatment. Background still warm
   so the row label stands off the bare grid cells to its right. */
.admin-cal-tech-head {
  padding: 12px 14px;
  text-align: left;
  background: #FFFDF9;
  border-radius: 12px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}
/* Colored avatar circle — left-anchored ID for each tech. Stable
   color per id (calendar.js generates it via a hash → palette pick),
   set inline as `background` on the element. White initials sit
   against the color with a thin warm-canvas ring so the bubble
   reads as a physical object on the warm card background, not as a
   flat color block. Spans both rows of the head's grid so it stays
   centered next to the name + badges stack. Philosophy: "left-
   aligned primary identifying element (an avatar, a colorful
   circular icon)". */
.admin-cal-tech-avatar {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  /* Inner highlight + outer halo simulate the bento "ambient glow"
     on a small surface — keeps the bubble from feeling flat-printed. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 1px 0 rgba(255, 255, 255, 0.9),
              0 4px 10px rgba(55, 59, 77, 0.10);
  /* Faint warm-canvas ring keeps the color from bleeding into the
     warm tech-head background — same trick used on stacked avatars. */
  border: 2px solid #FCFAF6;
  flex: 0 0 34px;
  user-select: none;
}
.admin-cal-tech-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-cal-tech-badges {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
/* Click-to-jump variant — applied when the tech has at least one
   open slot in the visible horizon. Cursor + hover treatment hint
   "this name is a control"; click jumps the calendar to that tech's
   soonest opening and selects the cell. */
.admin-cal-tech-head--clickable {
  cursor: pointer;
  transition: background 0.14s ease, transform 0.12s ease,
              box-shadow 0.14s ease;
}
.admin-cal-tech-head--clickable:hover {
  background: #ECE5D6;
  box-shadow: 0 2px 8px rgba(60, 42, 16, 0.06);
}
.admin-cal-tech-head--clickable:active { transform: scale(0.99); }
.admin-cal-tech-head--clickable:focus-visible {
  outline: 2px solid #F38A3F;
  outline-offset: 2px;
}
/* No-availability variant — applied when the tech has zero open
   slots in the horizon. Muted so the admin sees at a glance that
   clicking won't help; tooltip on the element explains. */
.admin-cal-tech-head--no-avail {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Previous-tech column: this tech has been to the picked customer's
   house before. Warning-gold accent now (philosophy palette), mirrors
   .suggestion-card--previous so the day grid and the suggestion strip
   read as one visual system. The badge sits at the bottom of the
   tech head; cells in the column get a thin left rail of the same
   hue and a pale gold fill on open slots. */
.admin-cal-tech-head--prev {
  background: rgba(211, 154, 46, 0.14);
}
.admin-cal-tech-prev-badge {
  display: inline-block;
  margin-top: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #C66518;
  background: rgba(211, 154, 46, 0.22);
  padding: 2px 9px;
  border-radius: 999px;
}
/* Visit count tucked inside the PREVIOUS pill. Slightly less
   contrast than the "Previous" word so the eye still leads with
   the label; the count is supporting evidence. */
.admin-cal-tech-prev-count {
  margin-left: 1px;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
/* "Last visit" badge — flags the single most-recent tech to have
   been to this customer. Sits next to the Previous pill on the
   tech-head, distinct orange tint so it doesn't visually merge
   with the gold Previous family. Only one tech in the grid carries
   this badge at a time. */
.admin-cal-tech-last-badge {
  display: inline-block;
  margin-top: 5px;
  margin-left: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #B86012;
  background: rgba(243, 138, 63, 0.16);
  padding: 2px 9px;
  border-radius: 999px;
}
/* Subtle reinforcement on the last-tech ROW: a hair more vibrant
   gold than a generic previous row so the eye picks it out of the
   "previous techs" cluster without needing to read the badge. */
.admin-cal-tech-head--last {
  background: rgba(243, 138, 63, 0.10);
}
/* Previous-tech ROW highlight. Every cell in this tech's row gets a
   gold tint regardless of busy/open state so the whole row reads
   as "this is the tech who's been to this customer's house before."
   Pairs with the .admin-cal-tech-head--prev row label (gold bg +
   "Previous" badge) and the legend pill at the top of the calendar. */
.admin-cal-cell--prev {
  background: rgba(211, 154, 46, 0.07);
  border-color: rgba(211, 154, 46, 0.22);
}
.admin-cal-cell--prev.admin-cal-cell--open {
  background: rgba(211, 154, 46, 0.16);
  border-color: rgba(211, 154, 46, 0.42);
  color: #6F4D14;
}
.admin-cal-cell--prev.admin-cal-cell--open:hover {
  background: rgba(211, 154, 46, 0.26);
  border-color: rgba(211, 154, 46, 0.55);
}
.admin-cal-cell--prev.is-selected {
  /* Selected state still wins — orange override above the gold tint. */
  box-shadow: 0 2px 8px rgba(243, 138, 63, 0.32);
}