/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS — grep `═══ N\.` to jump to a section.
   ───────────────────────────────────────────────────────────────
     1. Admin (intro)
     2. Admin shell (rail + main)
     3. Top tab bar (Global / Locations)
     4. Locations dropdown
     5. Admin nav (sidebar)
     6. Section heading
     7. Time zone select
     8. Key-value list
     9. Save bar (sticky)
     10. Skip-link (a11y)
     11. Toast host (admin)
     12. Stat tile
     13. Stat grid / tiles
     14. Badges
     15. Tech service assignments
     16. Admin mobile responsive sweep
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   admin.css — Admin dashboard, settings, locations, schedule, etc.
   Loaded by admin-dashboard.ejs and admin-diagnose.ejs after style.css.
   Depends on style.css for: variables, .btn, .field, .toast, body chrome.
   ═══════════════════════════════════════════════════════════════ */

.kv.compact li { padding: 4px 0; font-size: 0.8rem; border: 0; }
.kv.compact { margin: 8px 0 0; }
/* ═══ 1. Admin (intro) ═══ */
/* Admin */
.admin-body { background: var(--bg); }
.admin-page { padding: 36px 24px 120px; }

/* ═══ 2. Admin shell (rail + main) ═══ */
/* ───── Admin shell — left rail + main content ───── */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
  align-items: start;
  min-height: calc(100vh - 80px);
}

/* ═══ 3. Top tab bar (Global / Locations) ═══ */
/* ───── Top tab bar (Global vs. Locations) ─────
   Centered segmented control with a soft "pill" active state. The two
   tabs sit side-by-side inside .admin-tabs-group; the group is centered
   inside the page-width container. The Locations tab carries the current
   location name as a quiet sub-label inside the same control, so the
   whole switcher reads as one chip rather than three stacked elements. */
.admin-tabs {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(39, 41, 54, 0.02);
}
.admin-tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.admin-tabs-group {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  background: var(--card-tint, #F4F5F7);
  border-radius: 12px;
  border: 1px solid var(--border-soft);
}
.admin-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  list-style: none;
  user-select: none;
  font-family: inherit;
  letter-spacing: 0.005em;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.is-active,
.admin-tab-summary.is-active {
  color: var(--navy);
  background: #FFFFFF;
  /* Subtle elevation reads as "selected" without the heavy underline */
  box-shadow: 0 1px 2px rgba(39, 41, 54, 0.06), 0 0 0 1px rgba(39, 41, 54, 0.04);
}
.admin-tab--locations {
  /* The wrapping <details> shouldn't paint its own background — the
     visual state lives on the inner summary. */
  padding: 0;
  background: transparent;
  border-radius: 8px;
}
.admin-tab--locations:hover { background: transparent; }
.admin-tab-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.admin-tab-summary::-webkit-details-marker { display: none; }
.admin-tab-summary:hover { color: var(--text); }
.admin-tab-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.75;
}
.admin-tab-icon svg { width: 100%; height: 100%; }
.admin-tab-label { letter-spacing: 0.01em; }
/* The current-location chip lives inside the Locations tab as a quiet
   sub-label — same vertical alignment as the icon + label, but visually
   demoted with a smaller size, lighter weight, and a hairline separator
   instead of a heavy vertical divider. */
.admin-tab-loc-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(39, 41, 54, 0.12);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}
.admin-tab-summary.is-active .admin-tab-loc-current {
  color: var(--navy);
}
.admin-tab-loc-name {
  font-weight: 600;
  color: inherit;
  letter-spacing: -0.005em;
}
.admin-tab-chevron {
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
  margin-left: 1px;
}
.admin-tab-summary:hover .admin-tab-chevron { opacity: 0.9; }
.admin-tab--locations[open] .admin-tab-chevron { transform: rotate(180deg); opacity: 0.9; }

/* Locations dropdown panel */
/* ═══ 4. Locations dropdown ═══ */
.admin-tab-locations-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(39, 41, 54, 0.18);
  padding: 8px;
  z-index: 200;
  animation: hubPanelIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-tab-locations-eyebrow {
  margin: 4px 8px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-tab-locations-panel .loc-popover-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.15s ease;
}
.admin-tab-locations-panel .loc-popover-item:hover {
  background: var(--orange-soft);
  text-decoration: none;
  transform: translateX(2px);
}
.admin-tab-locations-panel .loc-popover-item.is-current {
  background: rgba(245, 133, 54, 0.06);
  color: var(--navy);
  font-weight: 600;
}
.admin-tab-locations-panel .loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-tint);
  border-radius: 50%;
  font-weight: 700;
  color: var(--text);
}
.admin-tab-locations-panel .loc-popover-item.is-current .loc-icon {
  background: var(--orange);
  color: #fff;
}
.admin-tab-locations-panel .loc-popover-current {
  color: var(--orange);
  display: inline-flex;
}
.admin-tab-locations-panel .loc-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card-tint);
  padding: 2px 6px;
  border-radius: 999px;
}
.admin-tab-locations-panel .loc-popover-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}
.admin-tab-locations-panel .loc-add-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--orange-dark);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.admin-tab-locations-panel .loc-add-trigger:hover { background: var(--orange-soft); }

/* "Copy schedule from..." source picker that appears after clicking
   "+ Add location". Each row is a button with the same shape as the
   regular location-switch rows, so the visual language stays
   consistent. The admin picks one and we POST behind the scenes. */
.admin-tab-locations-panel .loc-add-source-list {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.admin-tab-locations-panel .loc-add-source-eyebrow {
  margin: 4px 8px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-tab-locations-panel .loc-add-source-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease;
}
.admin-tab-locations-panel .loc-add-source-item:hover {
  background: var(--orange-soft);
  transform: translateX(2px);
}
.admin-tab-locations-panel .loc-add-source-item .loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-tint);
  border-radius: 50%;
  font-weight: 700;
  color: var(--text);
}
.admin-tab-locations-panel .loc-add-source-item:hover .loc-icon {
  background: #fff;
}

/* Sidebar tab filtering — sections marked data-tab="..." only show
   when their tab is active. Driven by body.tab-{global|locations}. */
body.tab-global .admin-nav-section[data-tab="locations"],
body.tab-locations .admin-nav-section[data-tab="global"] {
  display: none;
}

@media (max-width: 768px) {
  .admin-tabs-inner { padding: 8px 12px; }
  .admin-tabs-group { padding: 3px; }
  .admin-tab,
  .admin-tab-summary { padding: 7px 10px; font-size: 0.84rem; gap: 6px; }
  .admin-tab-loc-current { padding-left: 8px; margin-left: 2px; font-size: 0.78rem; }
  .admin-tab-loc-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-tab-locations-panel { left: -4px; min-width: 240px; }
}
@media (max-width: 460px) {
  /* Below ~460px the icons start eating into the labels — drop the icons
     and the current-location chip's separator to keep the tabs tappable. */
  .admin-tab-icon { display: none; }
  .admin-tab-loc-current { border-left: 0; padding-left: 6px; margin-left: 0; }
}
/* ═══ 5. Admin nav (sidebar) ═══ */
.admin-nav {
  position: sticky;
  top: 0;
  padding: 22px 16px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--border-soft);
}

/* Location switcher (top of nav) */
.loc-switcher {
  background: var(--card-tint);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loc-current {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-current .badge { font-size: 0.6rem; }
.loc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.loc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.loc-item:hover { background: rgba(255,255,255,0.7); color: var(--text); text-decoration: none; }
.loc-item.is-current { background: #fff; color: var(--text); font-weight: 600; }
.loc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
  opacity: 0.4;
}
.loc-item.is-current .loc-dot { opacity: 1; }
.loc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.loc-add {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.loc-add input {
  flex: 1;
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}
.loc-add input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(245,133,54,0.15); }
.loc-add .btn-sm { padding: 6px 10px; font-size: 0.82rem; }

/* Map preview */
.map-preview {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-tint);
}
.map-preview img { display: block; width: 100%; height: auto; }

/* Globals save bar — slightly different visual to make distinction obvious */
.globals-save-bar { background: rgba(255, 251, 240, 0.95); }
.globals-save-bar .btn-primary { background: var(--navy); }
.globals-save-bar .btn-primary:hover { background: var(--navy-dark); }
.admin-nav-section { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 12px 6px;
}
/* Location-scoped block — soft tint so the admin can tell at a glance
   which scope they're touching (global vs. this specific location). */
.admin-nav-section--location {
  background: rgba(245, 133, 54, 0.045);
  border: 1px solid rgba(245, 133, 54, 0.12);
  border-radius: 12px;
  padding: 6px 4px 8px;
  margin-top: 4px;
}
.admin-nav-section--location .admin-nav-eyebrow {
  color: var(--orange-dark);
  padding-top: 4px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-nav-item:hover {
  background: var(--card-tint);
  text-decoration: none;
}
.admin-nav-item.is-active {
  background: var(--card);
  border-color: var(--border-soft);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(39, 41, 54,0.04);
}
.admin-nav-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.admin-nav-item.is-active .admin-nav-icon { color: var(--orange); }
.admin-nav-icon svg { width: 100%; height: 100%; }
.admin-nav-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(224,122,42,0.5);
  animation: navDotPulse 2.4s ease-in-out infinite;
}
@keyframes navDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,122,42,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(224,122,42,0); }
}

/* Main column */
.admin-content {
  padding: 32px 36px 120px;
  min-width: 0;
}

/* Section pages — only one visible at a time */
.section-page { display: none; animation: sectionIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.section-page.is-visible { display: block; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ═══ 6. Section heading ═══ */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.section-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.018em;
}
.section-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Two-column form rows — Stripe/Linear style */
.form-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(39, 41, 54,0.03);
}
.form-card .subhead {
  padding: 18px 24px 0;
  margin: 0 0 4px;
}
.form-card > .form-card-intro,
.form-card > p.muted {
  padding: 0 24px;
  margin: 0 0 12px;
}
.form-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 32px;
  padding: 18px 24px;
  border-top: 1px solid var(--border-soft);
  align-items: start;
}
.form-row:first-child { border-top: 0; }
.form-row-label { display: flex; flex-direction: column; gap: 2px; }
.form-row-label strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-row-label p.muted { margin: 0; line-height: 1.45; }
.form-row-control { display: flex; flex-direction: column; gap: 4px; }
.form-row-control input[type="text"],
.form-row-control input[type="number"],
.form-row-control input[type="password"],
.form-row-control textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  transition: border-color 0.18s, box-shadow 0.18s;
  width: 100%;
}
.form-row-control input:focus,
.form-row-control textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224, 122, 42, 0.16);
}
.form-row-narrow input { max-width: 140px; }
.form-row-control-end { align-items: flex-end; flex-direction: row; justify-content: flex-end; }

/* Help tip — small (?) bubble next to label */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--card-tint);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: help;
  border: 1px solid var(--border);
}
.help-tip:hover { background: var(--orange-soft); color: var(--orange-dark); border-color: rgba(224,122,42,0.3); }

/* iOS-style switch (replaces toggle-row) */
.ios-switch { position: relative; cursor: pointer; display: inline-block; }
.ios-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ios-switch-track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #D1D1D6;
  position: relative;
  transition: background 0.22s ease;
}
.ios-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
  transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ios-switch input:checked ~ .ios-switch-track { background: var(--orange); }
.ios-switch input:checked ~ .ios-switch-track .ios-switch-thumb { transform: translateX(18px); }

/* Health checklist */
.health-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.health-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: border-color 0.18s;
}
.health-item:hover { border-color: var(--border); }
.health-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.health-ok .health-dot { background: var(--success-bg); color: var(--success); }
.health-warn .health-dot { background: var(--warning-bg); color: var(--warning-text); }
.health-info .health-dot { background: var(--orange-soft); color: var(--orange-dark); }
.health-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.health-detail { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

/* Collapsed-by-default summary for the passing health checks. Premium UI
   hides "everything's fine" until you ask for it. */
.health-collapsed {
  margin: 0 0 28px;
}
.health-collapsed-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.health-collapsed-summary::-webkit-details-marker { display: none; }
.health-collapsed-summary:hover {
  background: #E1F5E9;
  border-color: rgba(31, 122, 77, 0.18);
}
.health-collapsed-summary .health-dot {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--success);
}
.health-collapsed-summary strong { font-weight: 700; }
.health-collapsed-chevron {
  font-size: 0.7rem;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.health-collapsed[open] .health-collapsed-chevron { transform: rotate(180deg); }
.health-action {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-dark);
  white-space: nowrap;
  text-decoration: none;
}
.health-action:hover { color: var(--orange); text-decoration: none; }

/* Overview cards row */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.overview-card { padding: 20px 22px; }
@media (max-width: 780px) {
  .overview-grid { grid-template-columns: 1fr; }
}

/* Empty state */
.empty-state {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 18px;
}
.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-tint);
  color: var(--text-muted);
  border-radius: 16px;
}
.empty-icon svg { width: 28px; height: 28px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 1.05rem; }
.empty-state p { margin: 0 0 16px; }

/* Smart suggestion card */
.suggestion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--orange-soft);
  border: 1px solid rgba(224,122,42,0.22);
  border-radius: 12px;
  margin: 16px 24px;
  font-size: 0.9rem;
}
.suggestion-ok {
  background: var(--success-bg);
  border-color: #BBF7D0;
}
.suggestion-ok strong { color: var(--success); }
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.18s, background 0.18s;
  margin-bottom: 6px;
}
.radio-row:hover { border-color: var(--orange); }
.radio-row:has(input:checked) {
  background: var(--orange-soft);
  border-color: var(--orange);
}
.radio-row input { accent-color: var(--orange); }

/* API key status rows */
.api-key-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 18px;
}
.api-key-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  align-items: start;
}
.api-key-row.is-ok { background: var(--success-bg); border-color: #BBF7D0; }
.api-key-row.is-warn { background: var(--warning-bg); border-color: #FCD34D; }
.api-key-row.is-info { background: var(--card-tint); border-color: var(--border-soft); }
.api-key-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.api-key-row.is-ok .api-key-icon { color: var(--success); }
.api-key-row.is-warn .api-key-icon { color: var(--warning-text); }
.api-key-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.api-key-name code {
  font-size: 0.78rem;
  background: rgba(255,255,255,0.55);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
}
.api-key-body p { margin: 4px 0 0; }
.suggestion-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.suggestion strong { color: var(--orange-dark); display: block; }
.suggestion p { margin: 2px 0 0; }

/* Tech pills + avatars */
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-soft);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}
.tech-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB572, var(--orange));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.tech-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.tech-option:hover { border-color: var(--orange); }
.tech-option input { position: absolute; opacity: 0; pointer-events: none; }
.tech-option .tech-name { font-size: 0.9rem; font-weight: 500; color: var(--text); }
.tech-option.is-checked {
  background: var(--orange-soft);
  border-color: var(--orange);
}
.tech-option.is-checked .tech-name { color: var(--orange-dark); font-weight: 600; }

/* Saved toast */
.saved-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(39, 41, 54,0.18);
  animation: toastIn 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.saved-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.4s, transform 0.4s;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Calendar audit */
.audit-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audit-controls input[type="text"] {
  width: 140px;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.audit-controls input[type="number"] { width: 80px; }
.audit-summary {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.audit-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.audit-day {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.audit-day.is-closed { background: var(--card-tint); opacity: 0.85; }
.audit-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  flex-wrap: wrap;
}
.audit-stat {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.audit-stat-full { background: var(--success-bg); color: var(--success); }
.audit-stat-partial { background: var(--warning-bg); color: var(--warning-text); }
.audit-stat-empty { background: var(--error-bg); color: var(--error); }
.audit-stat-closed { background: var(--card-tint); color: var(--text-muted); border: 1px solid var(--border-soft); }
.audit-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.audit-slot {
  display: grid;
  grid-template-columns: 100px 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
}
.audit-slot.is-empty { background: #FFF8F8; border-color: #FECACA; }
.audit-slot.is-toosoon { background: var(--card-tint); opacity: 0.7; }
.audit-slot-time {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.audit-slot-counts {
  display: flex;
  gap: 6px;
}
.audit-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.audit-count-free { background: var(--success-bg); color: var(--success); }
.audit-count-busy { background: var(--card-tint); color: var(--text-muted); }
.audit-slot-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.audit-tech {
  display: inline-flex;
  cursor: help;
  position: relative;
}
.audit-tech .tech-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.66rem;
  border: 1.5px solid transparent;
}
.audit-tech-free .tech-avatar { border-color: var(--success); }
.audit-tech-busy .tech-avatar {
  background: linear-gradient(135deg, #BFBFBF, #8E8E8E);
  border-color: #DDD;
  opacity: 0.55;
}
.audit-reason {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 700px) {
  .audit-slot { grid-template-columns: 1fr; }
  .audit-controls { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav {
    position: relative;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 16px;
  }
  .admin-nav-section { flex-direction: row; }
  .admin-nav-eyebrow { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 10px; }
  .admin-content { padding: 24px 20px 100px; }
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn-ghost {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}
.header-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.header-actions form { margin: 0; }
.btn-sm { font-size: 0.85rem; padding: 8px 16px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.18);
}
.status-pill.status-ok { color: #B7F0CB; }
.status-pill.status-error { color: #FFC4C4; }

/* Connection Hub — replaces the bare "● Connected" pill with a popover
   that breaks down HCP / Google / current-location status. */
.connection-hub {
  position: relative;
}
.connection-hub-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.connection-hub-summary::-webkit-details-marker { display: none; }
.connection-hub-summary:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); }
.connection-hub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6FE39B;
  box-shadow: 0 0 0 3px rgba(111, 227, 155, 0.18);
}
.connection-hub.is-warn .connection-hub-dot {
  background: #FFC97A;
  box-shadow: 0 0 0 3px rgba(255, 201, 122, 0.18);
}
.connection-hub.is-warn .connection-hub-summary { color: #FFD9A3; }
.connection-hub-chevron {
  font-size: 0.65rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.connection-hub[open] .connection-hub-chevron { transform: rotate(180deg); }

.connection-hub-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 320px;
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(39, 41, 54, 0.18);
  padding: 6px;
  z-index: 200;
  animation: hubPanelIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hubPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.connection-hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.connection-hub-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
}
.connection-hub-row + .connection-hub-row { margin-top: 2px; }
.connection-hub-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.connection-hub-row.is-warn .connection-hub-row-dot { background: #E8A33D; }
.connection-hub-row-body strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.connection-hub-row-body small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.connection-hub-scope {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card-tint);
  padding: 3px 7px;
  border-radius: 999px;
}
.connection-hub-footer {
  display: block;
  text-align: center;
  margin-top: 4px;
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-dark);
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
}
.connection-hub-footer:hover { color: var(--orange); text-decoration: none; background: var(--orange-soft); border-radius: 0 0 10px 10px; }

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.stat-card:hover { border-color: #D6D0C2; }
.stat-row .stat-card:nth-child(1) { animation-delay: 0.02s; }
.stat-row .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-row .stat-card:nth-child(3) { animation-delay: 0.14s; }
.stat-row .stat-card:nth-child(4) { animation-delay: 0.20s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-radius: 12px;
  flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; display: block; }
.stat-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.stat-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
  line-height: 1;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--navy);
  font-weight: 600;
  margin-top: 4px;
}
.stat-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .stat-row { grid-template-columns: 1fr; } }

/* Layout */
.admin-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.admin-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.admin-main { display: flex; flex-direction: column; gap: 20px; }
.admin-main > form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
@media (max-width: 1000px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
}

/* Card */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 28px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.admin-main > form > .card:nth-of-type(1) { animation-delay: 0.06s; }
.admin-main > form > .card:nth-of-type(2) { animation-delay: 0.12s; }
.admin-main > form > .card:nth-of-type(3) { animation-delay: 0.18s; }
.admin-main > form > .card:nth-of-type(4) { animation-delay: 0.24s; }
.admin-main > form > .card:nth-of-type(5) { animation-delay: 0.30s; }
.admin-sidebar > .card:nth-of-type(1) { animation-delay: 0.04s; }
.admin-sidebar > .card:nth-of-type(2) { animation-delay: 0.10s; }
.admin-sidebar > .card:nth-of-type(3) { animation-delay: 0.16s; }
.card-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.subhead {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card-tint);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
}
.badge-success { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; }
.badge-warning { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.badge-error { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }

/* Sidebar bits */
.diag-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.diag-link::before {
  content: '→';
  color: var(--orange);
  font-weight: 700;
  transition: transform 0.2s;
}
.diag-link:hover {
  background: var(--card-tint);
  border-color: var(--border-soft);
  text-decoration: none;
}
.diag-link:hover::before { transform: translateX(3px); }
.summary-link {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--orange-dark);
  padding: 6px 0;
  font-weight: 600;
}
.summary-link:hover { color: var(--orange); }
.small { font-size: 0.85rem; }

/* Day pills */
.day-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.day-pill { cursor: pointer; }
.day-pill input { display: none; }
.day-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28),
              background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.day-pill:hover span {
  border-color: var(--orange);
  color: var(--orange-dark);
}
.day-pill input:checked + span {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.day-pill:active span { transform: scale(0.96); }

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--card-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.toggle-row:hover { border-color: #D6D0C2; background: #F6F1E8; }
.toggle { position: relative; flex-shrink: 0; margin-top: 2px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #CCCCCC;
  border-radius: 999px;
  transition: background 0.2s;
  position: relative;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.toggle input:checked ~ .toggle-track { background: var(--orange); }
.toggle input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label { display: flex; flex-direction: column; line-height: 1.3; }
.toggle-label small { margin-top: 2px; font-weight: 400; }

/* Tag input */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  min-height: 48px;
  align-items: center;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.tag-input:hover:not(:focus-within) { border-color: #C9C2B5; }
.tag-input:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 133, 54, 0.18);
}
.tag-input input[type="text"],
.tag-input input[type="date"] {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 180px;
  padding: 4px 6px;
  font-size: 0.92rem;
  font-family: inherit;
  background: transparent;
  color: var(--navy);
}
.tag-input input[type="text"]::placeholder { color: #B4ADA0; }
/* Native date input — make the calendar icon clickable across the
   whole field and keep the typography consistent with chip entries. */
.tag-input input[type="date"] {
  cursor: pointer;
  color: var(--navy);
  min-width: 200px;
}
.tag-input input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: invert(28%) sepia(8%) saturate(660%) hue-rotate(190deg);
}
.tag-input input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}
.tag-input .chip-list { display: contents; }
.shake { animation: shake 0.35s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: chipIn 0.2s ease-out;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.chip-static {
  background: var(--cream);
  color: var(--text);
  border: 1px solid var(--border);
}
.chip-removable button {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0 0 4px;
  transition: color 0.15s;
}
.chip-removable button:hover { color: #fff; }
.chip-tech {
  background: #FFF6EE;
  color: var(--orange-dark);
  border: 1px solid #FFD9B8;
  font-weight: 600;
}
/* X button on chip-tech needs a darker color to read against the cream
   background (the default white-on-navy `.chip-removable button` would
   be invisible here). Tabular-nums prevents the time text from jiggling
   horizontally when chips re-render after add/remove. */
.chip.chip-tech.chip-removable button {
  color: rgba(184, 96, 18, 0.55);
}
.chip.chip-tech.chip-removable button:hover { color: var(--orange-dark); }

/* ═══ 7. Time zone select ═══ */
/* ───── Time zone select (custom dropdown with chip-style trigger) ─────
   Replaces the freeform IANA input. The trigger looks like a normal
   field with a chip-shaped tag inside showing the current selection;
   clicking opens a dropdown of curated US timezones. The hidden input
   alongside is what the form actually serializes. */
.tz-select {
  position: relative;
  display: block;
  width: 100%;
}
.tz-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}
.tz-select-trigger::-webkit-details-marker { display: none; }
.tz-select-trigger:hover { border-color: #C9C2B5; }
.tz-select[open] .tz-select-trigger {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224, 122, 42, 0.12);
}
.tz-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #FFF6EE;
  color: var(--orange-dark);
  border: 1px solid #FFD9B8;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  /* Chip animates in when an option is picked — reuses the chipIn keyframe
     defined for .chip above. */
  animation: chipIn 0.18s ease-out;
}
/* Empty state — no timezone selected yet. Demote the chip visually so
   it reads as a placeholder rather than a real selection. */
.tz-select-chip[data-empty="true"] {
  background: var(--card-tint);
  color: var(--text-muted);
  border-color: var(--border-soft);
  font-weight: 500;
}
.tz-select-chip svg { flex-shrink: 0; opacity: 0.85; }
.tz-select-chip-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.tz-select-chip-label {
  font-weight: 600;
  letter-spacing: 0;
}
.tz-select-chip-sub {
  font-size: 0.74rem;
  font-weight: 500;
  opacity: 0.7;
  font-family: ui-monospace, monospace;
  letter-spacing: 0;
}
.tz-select-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 4px;
}
.tz-select[open] .tz-select-chevron { transform: rotate(180deg); color: var(--orange-dark); }

/* Dropdown panel — anchored to the trigger; same elevation language as
   the location switcher and the help menu. */
.tz-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(39, 41, 54, 0.14);
  padding: 6px;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  animation: hubPanelIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  color: var(--text);
}
.tz-option:hover {
  background: var(--orange-soft);
  transform: translateX(2px);
}
.tz-option.is-current {
  background: rgba(245, 133, 54, 0.08);
  color: var(--orange-dark);
}
.tz-option.is-current svg { color: var(--orange); }
.tz-option-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tz-option-label {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
}
.tz-option-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
}
.tz-option.is-current .tz-option-sub { color: rgba(184, 96, 18, 0.75); }
.tz-select-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}
.tz-select-custom-note {
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.tz-select-custom-note code {
  font-size: 0.8rem;
  background: var(--card-tint);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Zone cards */
.zone-grid { display: grid; gap: 14px; }
.zone-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--card-tint);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.zone-card:hover {
  border-color: #D6D0C2;
  background: #FFFEFA;
  box-shadow: 0 4px 14px rgba(39, 41, 54, 0.05);
}
.zone-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.zone-card-head strong { color: var(--navy); font-size: 1rem; }
.zone-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.zone-pros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Service toggles */
.service-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.service-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.service-toggle:hover { border-color: var(--orange); background: #FFFBF6; }
.service-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.service-toggle-name { font-weight: 500; color: var(--text); font-size: 0.92rem; }
.service-toggle-state {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.service-toggle-state::before {
  content: 'Shown';
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--success);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--success-bg);
}
.service-toggle.is-hidden { background: var(--card-tint); border-style: dashed; }

/* Service-override editors (admin) */
.service-overrides {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.service-override {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.service-override.is-hidden { background: var(--card-tint); opacity: 0.7; }
.service-override-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.service-override-hcp {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.service-toggle.is-hidden .service-toggle-name {
  color: var(--text-muted);
  text-decoration: line-through;
}
.service-toggle.is-hidden .service-toggle-state::before {
  content: 'Hidden';
  color: var(--text-muted);
  background: var(--cream);
}

/* Employee chips */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.employee-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  font-size: 0.9rem;
  font-weight: 500;
}
.employee-chip:hover { border-color: var(--orange); background: #FFFBF6; }
.employee-chip:has(input:checked) {
  background: #FFF7ED;
  border-color: var(--orange);
}
.employee-chip input { position: absolute; opacity: 0; pointer-events: none; }
.employee-chip span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.15s;
}
.employee-chip input:checked + span {
  color: var(--orange-dark);
}
.employee-chip input:checked + span::before {
  background: var(--orange) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.5 12L2 7.5l1.5-1.5L6.5 9 12.5 3l1.5 1.5z"/></svg>') center/12px no-repeat;
  border-color: var(--orange);
}

/* KV list */
/* ═══ 8. Key-value list ═══ */
.kv { list-style: none; padding: 0; margin: 0 0 14px; font-size: 0.88rem; }
.kv li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.kv li:last-child { border-bottom: 0; }
.kv-k {
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  /* let labels shrink + wrap rather than push the value off-screen */
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
}
.kv-v {
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* values can wrap to a second line under the key on narrow viewports */
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  flex: 0 1 auto;
}

/* Google API diagnostic — constrain widths and let long status lines wrap
   instead of pushing the layout sideways. */
#google-diagnose-result {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#google-diagnose-result h4 {
  margin: 14px 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}
#google-diagnose-result h4 .muted {
  font-weight: 400;
}
#google-diagnose-result code { word-break: break-all; }
#google-diagnose-result > div {
  max-width: 100%;
}
#google-diagnose-result a { color: var(--orange-dark); }

/* Misc */
.link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-tint);
  border: 1px solid var(--border-soft);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  margin-top: 10px;
}
.link-box code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.78rem;
}
.codeblock {
  background: var(--navy-dark);
  color: #DFE8F5;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  line-height: 1.5;
  overflow-x: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

.mt-sm { margin-top: 8px; }
.mt-lg { margin-top: 24px; }

/* Save bar */
/* ═══ 9. Save bar (sticky) ═══ */
.save-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 8px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(39, 41, 54, 0.04), 0 12px 32px rgba(39, 41, 54, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 10;
}
.save-bar .btn-primary { padding: 10px 22px; }

select[multiple] { padding: 8px; min-height: 140px; }
textarea { font-family: inherit; resize: vertical; }

/* Stepper line connector */
/* Done-step "satisfying completion" pulse — applied only to the
   marker circle now (was on the whole step, which jiggled the label
   too). The marker briefly bumps to scale 1.08 and settles back. */
.stepper .step.done .step-marker { animation: stepDone 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes stepDone {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* Inline field errors (replace popup/toast for validation) */
.field-error {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--error);
  font-weight: 500;
  animation: fieldErrorIn 0.25s ease-out;
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.field input.has-error,
.field textarea.has-error,
input.has-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
  animation: fieldShake 0.35s ease-in-out;
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN UI v2 — refined design system layered on top of v1 admin
   styles. Booking-page rules above stay untouched. New surfaces use
   these tokens + components for a cohesive look.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing scale — every gap/margin/padding in v2 uses these */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* Type scale */
  --t-xs: 0.72rem;
  --t-sm: 0.82rem;
  --t-md: 0.92rem;
  --t-lg: 1rem;
  --t-xl: 1.18rem;
  --t-2xl: 1.5rem;
  --t-3xl: 1.85rem;

  /* Semantic state colors (light bg, mid border, dark text) */
  --st-ok-bg: #ECFDF5;
  --st-ok-border: #BBF7D0;
  --st-ok-fg: #166534;
  --st-warn-bg: #FEF3C7;
  --st-warn-border: #FCD34D;
  --st-warn-fg: #854D0E;
  --st-danger-bg: #FEF2F2;
  --st-danger-border: #FECACA;
  --st-danger-fg: #B91C1C;
  --st-info-bg: #EFF6FF;
  --st-info-border: #BFDBFE;
  --st-info-fg: #1E40AF;
  --st-neutral-bg: #F4F4F5;
  --st-neutral-border: #E4E4E7;
  --st-neutral-fg: #52525B;

  /* Shadow tiers */
  --shadow-1: 0 1px 2px rgba(39, 41, 54,0.05);
  --shadow-2: 0 2px 6px rgba(39, 41, 54,0.06), 0 1px 2px rgba(39, 41, 54,0.04);
  --shadow-3: 0 8px 20px rgba(39, 41, 54,0.08), 0 2px 6px rgba(39, 41, 54,0.04);
  --shadow-4: 0 18px 40px rgba(39, 41, 54,0.14), 0 4px 12px rgba(39, 41, 54,0.06);

  /* Focus ring — used everywhere keyboard-focusable */
  --focus-ring: 0 0 0 3px rgba(224,122,42,0.28);
  --focus-ring-tight: 0 0 0 2px var(--orange);
}

/* Universal focus visible — keyboard-only, never on click */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(224,122,42,0.55);
}

/* Skip-to-content link, hidden until tab-focused */
/* ═══ 10. Skip-link (a11y) ═══ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--t-sm);
  z-index: 99999;
  transition: top 0.2s;
}
.skip-link:focus,
.skip-link:focus-visible { top: 12px; text-decoration: none; }

/* Danger button (delete location, remove key, etc.) */
.btn-danger {
  background: var(--st-danger-fg);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #991B1B; }
.btn-danger:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(185,28,28,0.55); }

.btn-link {
  background: transparent;
  color: var(--orange-dark);
  padding: 4px 6px;
  font-weight: 600;
  font-size: var(--t-sm);
  border-radius: 6px;
}
.btn-link:hover { background: var(--orange-soft); text-decoration: none; }

/* Icon-only button (small) — keeps a 36×36 hit target */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: var(--card-tint); color: var(--text); }
.btn-icon svg { width: 18px; height: 18px; }

/* Toast queue — top-center stack with auto-dismiss + manual close */
/* ═══ 11. Toast host (admin) ═══ */
.toast-host {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1100;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  color: var(--text);
  padding: 12px 14px 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-3);
  font-size: var(--t-md);
  width: 100%;
  animation: toastSlideIn 0.32s cubic-bezier(0.34,1.4,0.64,1);
}
.toast.is-leaving {
  animation: toastSlideOut 0.22s ease-in forwards;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastSlideOut {
  to { opacity: 0; transform: translateY(-12px) scale(0.98); }
}
.toast-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.78rem;
}
.toast-body { flex: 1; min-width: 0; line-height: 1.4; }
.toast-body strong { display: block; font-weight: 600; font-size: var(--t-md); }
.toast-body p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.toast-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
  padding: 0 2px; align-self: flex-start;
}
.toast-close:hover { color: var(--text); }
.toast-success { border-color: var(--st-ok-border); }
.toast-success .toast-icon { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.toast-error { border-color: var(--st-danger-border); }
.toast-error .toast-icon { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.toast-warn { border-color: var(--st-warn-border); }
.toast-warn .toast-icon { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.toast-info { border-color: var(--st-info-border); }
.toast-info .toast-icon { background: var(--st-info-bg); color: var(--st-info-fg); }

/* Inline confirmation card — replaces browser confirm() for destructive
   actions. Slides into the section below the trigger button. */
.inline-confirm {
  margin: var(--sp-3) 0;
  padding: 14px 16px;
  background: var(--st-danger-bg);
  border: 1px solid var(--st-danger-border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  animation: confirmIn 0.22s ease-out;
}
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.inline-confirm-text {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--st-danger-fg);
  font-size: var(--t-md);
  font-weight: 500;
}
.inline-confirm-text strong { font-weight: 700; }

/* Type-to-confirm gate: the delete button stays disabled until the phrase
   in <code> is typed into this input (startDeleteConfirm). */
.inline-confirm-phrase {
  flex: 1 1 100%;
  display: grid;
  gap: 6px;
}
.inline-confirm-phrase span {
  color: var(--st-danger-fg);
  font-size: 12.5px;
  font-weight: 600;
}
.inline-confirm-phrase code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.65);
  font-weight: 700;
}
.inline-confirm-phrase input {
  width: min(280px, 100%);
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--st-danger-border);
  border-radius: 10px;
  background: #fff;
  color: var(--sw-ink, #373B4D);
  font: inherit;
  font-size: 13.5px;
}
.inline-confirm-phrase input:focus-visible {
  outline: 2px solid var(--st-danger-fg, #B91C1C);
  outline-offset: 1px;
}
.inline-confirm .bento-btn--danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.inline-confirm-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .inline-confirm-actions {
    width: 100%;
  }

  .inline-confirm-actions .bento-btn,
  .inline-confirm-actions .btn {
    flex: 1 1 120px;
    justify-content: center;
  }
}

/* Segmented control — radio group rendered as a connected pill bar.
   Better than scattered radios when there are 2-4 mutually exclusive
   options (used by Service Area mode). */
.segmented {
  display: inline-flex;
  background: var(--card-tint);
  border-radius: 10px;
  padding: 3px;
  gap: 0;
  border: 1px solid var(--border-soft);
}
.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.segmented label:hover:not(:has(input:checked)) { color: var(--text); }

/* Save bar v2 — clearer "unsaved changes" affordance + cleaner button */
.save-bar.v2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 18px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-4);
  border-radius: 14px;
  position: sticky;
  bottom: 16px;
  z-index: 50;
  margin-top: var(--sp-3);
}
/* `.save-bar.v2 { display: flex }` outweighs `[hidden] { display: none }`
   from the UA stylesheet (class > attribute specificity), so without this
   the bar stays visible everywhere even after JS sets `hidden`. Same fix
   pattern as `.field[hidden]` above. */
.save-bar[hidden] { display: none !important; }

/* Calendar audit form inputs. Bold + monospace + letter-spacing on the
   ZIP input made the placeholder ("22902") read like a real entered
   value — admins thought they'd already typed something. Placeholder is
   now visually demoted (lighter weight, normal spacing, faded color). */
.audit-zip-input,
.audit-days-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.audit-zip-input {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.audit-zip-input::placeholder,
.audit-days-input::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
  font-weight: 400;
  letter-spacing: normal;
  font-family: inherit;
}
.save-bar.v2 .save-bar-label {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.save-bar.v2 .save-bar-label strong {
  color: var(--text);
  font-weight: 600;
}
.save-bar.v2 .unsaved-pill {
  display: none;
  background: var(--orange-soft);
  color: var(--orange-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 6px;
}
.save-bar.v2.is-dirty .unsaved-pill { display: inline-flex; }
.save-bar.v2.is-dirty {
  border-color: rgba(224,122,42,0.4);
  box-shadow: 0 18px 40px rgba(224,122,42,0.14), 0 4px 12px rgba(224,122,42,0.08);
}

/* Card v2 — tighter spacing, optional collapsible details */
.card2 {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.card2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 18px 22px 6px;
}
.card2-header h3 {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.card2-header h3 + p,
.card2-header p {
  margin: 2px 0 0;
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.card2-header-meta { flex-shrink: 0; display: flex; gap: 8px; align-items: center; }
.card2-body { padding: 14px 22px 20px; }
.card2-body > p:first-child { margin-top: 0; }
.card2-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--sp-7);
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
  align-items: start;
}
.card2-row:first-of-type { border-top: 0; padding-top: 6px; }
.card2-row-label strong {
  display: block;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.card2-row-label p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.card2-row-control { min-width: 0; }
.card2-row-control input[type="text"],
.card2-row-control input[type="password"],
.card2-row-control input[type="email"],
.card2-row-control input[type="number"],
.card2-row-control textarea {
  font-family: inherit;
  font-size: var(--t-md);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.card2-row-control input:focus,
.card2-row-control textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,122,42,0.16);
}
.card2-row-control .field-help {
  margin-top: 6px;
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.card2 .card2-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0;
  border: 0;
}

/* Collapsible details element (replaces ad-hoc verbose paragraphs in cards) */
.disclosure {
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-4);
}
.disclosure summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 12px;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text);
  user-select: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.18s;
}
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure[open] > summary { color: var(--orange-dark); }
.disclosure-body { padding-bottom: 16px; }

/* Stat tile (Overview top row) */
/* ═══ 12. Stat tile ═══ */
.stat-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}
.stat-tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  color: var(--orange-dark);
  flex-shrink: 0;
}
.stat-tile-icon svg { width: 20px; height: 20px; }
.stat-tile-body { min-width: 0; flex: 1; }
.stat-tile-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-tile-label {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}
.stat-tile.is-warn .stat-tile-icon { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.stat-tile.is-ok .stat-tile-icon { background: var(--st-ok-bg); color: var(--st-ok-fg); }

/* ═══ 13. Stat grid / tiles ═══ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* Quick-start checklist (Overview) */
.quickstart {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  padding: 4px 0;
  margin-bottom: var(--sp-4);
}
.quickstart-head {
  padding: 14px 22px 6px;
}
.quickstart-head h3 { margin: 0; font-size: var(--t-lg); color: var(--navy); }
.quickstart-head p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.quickstart-head p strong { color: var(--text); font-weight: 700; }
/* Slim progress bar — fills as the admin completes quickstart steps. */
.quickstart-progress {
  position: relative;
  margin-top: 12px;
  height: 6px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.quickstart-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.quickstart-list { list-style: none; margin: 4px 0 0; padding: 0; }
.quickstart-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  border-top: 1px solid var(--border-soft);
}
.quickstart-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-weight: 800;
  font-size: 0.7rem;
}
.quickstart-item.is-done .quickstart-check {
  background: var(--st-ok-fg);
  border-color: var(--st-ok-fg);
  color: #fff;
}
.quickstart-title { font-weight: 600; color: var(--text); }
.quickstart-item.is-done .quickstart-title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.2); }
.quickstart-detail { font-size: var(--t-sm); color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.quickstart-cta {
  font-size: var(--t-sm); font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
}
.quickstart-cta:hover { background: var(--orange-soft); text-decoration: none; }

/* Status badge (used inline in cards: "Configured" / "Not configured") */
/* ═══ 14. Badges ═══ */
.badge2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge2-ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.badge2-warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.badge2-danger { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.badge2-neutral { background: var(--st-neutral-bg); color: var(--st-neutral-fg); }
.badge2 .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Sidebar v2 — louder active state with left accent */
.admin-nav-item.v2 {
  position: relative;
  padding: 9px 12px 9px 16px;
}
.admin-nav-item.v2.is-active {
  background: var(--orange-soft);
  border-color: transparent;
  color: var(--orange-dark);
  font-weight: 700;
  box-shadow: none;
}
.admin-nav-item.v2.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--orange);
  border-radius: 0 3px 3px 0;
}
.admin-nav-item.v2.is-active .admin-nav-icon { color: var(--orange); }

/* Location switcher v2 — popover-style */
.loc-switcher.v2 {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  padding: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.loc-switcher.v2 .loc-current {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-md);
  cursor: pointer;
  user-select: none;
}
.loc-switcher.v2 .loc-current::after {
  content: '';
  margin-left: auto;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transition: transform 0.18s;
}
.loc-switcher.v2[open] .loc-current::after { transform: rotate(180deg); }
.loc-switcher.v2 .loc-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.7rem;
  flex-shrink: 0;
}
.loc-switcher.v2 .loc-current strong { font-weight: 700; color: var(--text); }
.loc-switcher.v2 .loc-popover {
  border-top: 1px solid var(--border-soft);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}
.loc-switcher.v2 .loc-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--t-sm);
  color: var(--text);
  text-decoration: none;
}
.loc-switcher.v2 .loc-popover-item:hover { background: var(--card-tint); text-decoration: none; }
.loc-switcher.v2 .loc-popover-item.is-current { background: var(--orange-soft); color: var(--orange-dark); font-weight: 600; }
.loc-switcher.v2 .loc-popover-item .loc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-switcher.v2 .loc-popover-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
.loc-switcher.v2 .loc-add-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--orange-dark);
  width: 100%;
  text-align: left;
}
.loc-add-trigger:hover { background: var(--orange-soft); }
.loc-add-form { padding: 8px; border-top: 1px solid var(--border-soft); display: flex; gap: 6px; }
.loc-add-form input {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--t-sm);
}
.loc-add-form input:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }

/* Section-head v2 — breadcrumb + title + meta */
.section-head.v2 {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.section-head.v2 .crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.section-head.v2 .crumb a { color: var(--text-muted); }
.section-head.v2 .crumb a:hover { color: var(--orange-dark); }
.section-head.v2 .crumb-sep::after {
  content: '/';
  margin: 0 4px;
  opacity: 0.45;
}
.section-head.v2 .section-title { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.018em; color: var(--text); margin: 0; }
.section-head.v2 .section-sub { margin: 4px 0 0; color: var(--text-muted); font-size: var(--t-md); }

/* Copy button (with confirmed-copied state) */
.copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--card-tint);
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: var(--t-sm);
}
.copy-row code {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  padding: 0;
}
.copy-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.copy-btn:hover { background: var(--orange-soft); color: var(--orange-dark); border-color: var(--orange); }
.copy-btn.is-copied { background: var(--st-ok-fg); border-color: var(--st-ok-fg); color: #fff; }

/* "Big" toggle row — used for prominent on/off (replaces toggle-row pattern) */
.toggle-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.toggle-block-text strong {
  display: block;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text);
}
.toggle-block-text p {
  margin: 2px 0 0;
  font-size: var(--t-sm);
  color: var(--text-muted);
}

/* Search bar (Services filter) */
.search-bar {
  position: relative;
  margin-bottom: var(--sp-4);
}
.search-bar input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  font-size: var(--t-md);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
}
.search-bar input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,122,42,0.16);
}
.search-bar::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2386868B' stroke-width='1.6'><circle cx='7' cy='7' r='5'/><path d='M11 11l3 3' stroke-linecap='round'/></svg>") center/contain no-repeat;
  pointer-events: none;
}

/* Service row v2 — Visibility + inline override fields together */
.service-row {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}
.service-row.is-hidden {
  background: var(--card-tint);
  opacity: 0.75;
  border-style: dashed;
}
/* Lifted state while a drag is active. The dragstart handler adds
   .is-dragging on the row being moved; CSS dims it so the user can
   see where it'll insert relative to the others. */
.service-row.is-dragging {
  opacity: 0.45;
  transform: scale(0.99);
  box-shadow: 0 6px 16px rgba(39, 41, 54, 0.10);
  border-color: var(--orange, #E07A2A);
}

/* Drag handle — six-dot grip at the start of each service row's
   head. Always rendered; the drag itself is gated on mousedown
   landing here (see admin-dashboard.js). cursor: grab telegraphs
   the affordance without a label. */
.cs-drag-handle {
  appearance: none;
  border: 0;
  background: transparent;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: grab;
  color: var(--text-muted, rgba(39, 41, 54, 0.45));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-drag-handle:hover {
  background: rgba(39, 41, 54, 0.06);
  color: var(--text);
}
.cs-drag-handle:active { cursor: grabbing; }
.cs-drag-handle:focus-visible {
  outline: 2px solid var(--orange, #E07A2A);
  outline-offset: 2px;
}
.service-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.service-row-name { flex: 1; font-weight: 700; color: var(--text); }
.service-row-hcp {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Source badges — appear on every service row so the admin instantly knows
   if it's HCP-pulled or admin-managed. Both styles are cool/calm; the
   distinction is signaled by border + tint, not loud color. */
.service-source-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-left: 2px;
}
.service-source-hcp {
  background: rgba(40, 90, 156, 0.06);
  color: #2A5798;
  border-color: rgba(40, 90, 156, 0.18);
}
.service-source-custom {
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-color: rgba(245, 133, 54, 0.22);
}

/* Visual divider between admin-managed services and HCP-pulled services in
   the unified Services card. A hairline rule with a thin centered eyebrow. */
.services-divider {
  position: relative;
  height: 1px;
  background: var(--border-soft);
  margin: 18px 0 14px;
}

/* "Add a new service" disclosure inside the unified Services card —
   collapsed by default to keep the list tidy. */
.services-add-disclosure {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.services-add-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--orange-dark);
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.services-add-summary::-webkit-details-marker { display: none; }
.services-add-summary:hover { background: var(--orange-soft); }
.services-add-summary span { font-size: 1.1rem; line-height: 1; }
.services-add-disclosure[open] .services-add-summary { background: var(--orange-soft); }

/* Empty-state for custom services when there are none yet — softer than
   the previous bordered card2 since it now lives inside the unified card. */
.services-empty {
  background: var(--card-tint);
  border: 1px dashed var(--border-soft);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.services-empty h3 { margin: 8px 0 4px; font-size: 0.98rem; color: var(--navy); }
.services-empty p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.services-empty .empty2-icon { color: var(--text-muted); }
.service-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.service-row.is-hidden .service-row-grid { display: none; }
.service-row-grid label span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.service-row-grid input {
  font-family: inherit;
  font-size: var(--t-sm);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
}
.service-row-grid input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(224,122,42,0.18);
}
@media (max-width: 700px) {
  .service-row-grid { grid-template-columns: 1fr; }
}

/* Description editor: textarea where each line becomes a bullet on the
   booking page. Spans both grid columns so users have room to list
   multiple common issues. The hint after the label clarifies the line
   = bullet contract. */
.service-desc-label { grid-column: 1 / -1; }
.service-desc-hint {
  display: inline;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-left: 6px;
  opacity: 0.85;
}
.service-desc-textarea {
  font-family: inherit;
  font-size: var(--t-sm);
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  resize: vertical;
  min-height: 110px;
  background: #fff;
  color: var(--text);
}
.service-desc-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.service-desc-textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(224,122,42,0.18);
}

/* "Saved" / "Save failed" pip shown in the service row header after an
   AJAX save. Auto-removed after a short delay (see admin-dashboard JS).
   A small unobtrusive confirmation that doesn't disturb other forms. */
.cs-saved-pip {
  margin-left: 8px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 999px;
  animation: csPipIn 0.22s ease-out;
}
.cs-saved-pip.is-error {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}
@keyframes csPipIn {
  from { opacity: 0; transform: translateY(-2px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Schedule slot-times display: previously a separate `.time-strip` block
   below the tag-input. Removed — the orange chips inside the tag-input
   now serve as the only display, with X buttons for removal. */

/* ═══ 15. Tech service assignments ═══ */
/* ───── Tech service assignments (Schedule section) ───── */
.tech-assignments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tech-assignment-row {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tech-assignment-row:hover { border-color: var(--border); }
.tech-assignment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tech-assignment-row .tech-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-tint);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.tech-assignment-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  color: var(--navy);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tech-admin-pill {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bookable toggle — switch that controls whether this tech shows up
   on the public booking calendar. Sits in the head row to the right
   of the name and to the left of the service-count pill. */
.tech-bookable-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  cursor: pointer;
  user-select: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tech-bookable-toggle:hover {
  border-color: #C9BDA8;
  background: #FFFDF9;
}
.tech-bookable-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tech-bookable-toggle-track {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: #E5DED3;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.tech-bookable-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease;
}
.tech-bookable-toggle-input:checked + .tech-bookable-toggle-track {
  background: var(--sw-orange, #F38A3F);
}
.tech-bookable-toggle-input:checked + .tech-bookable-toggle-track .tech-bookable-toggle-knob {
  transform: translateX(12px);
}
.tech-bookable-toggle-input:focus-visible + .tech-bookable-toggle-track {
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.28);
}
.tech-bookable-toggle-label-on,
.tech-bookable-toggle-label-off {
  white-space: nowrap;
}
.tech-bookable-toggle-label-off { display: none; color: var(--text-muted); }
.tech-bookable-toggle:has(.tech-bookable-toggle-input:not(:checked)) .tech-bookable-toggle-label-on { display: none; }
.tech-bookable-toggle:has(.tech-bookable-toggle-input:not(:checked)) .tech-bookable-toggle-label-off { display: inline; }
.tech-bookable-toggle:has(.tech-bookable-toggle-input:checked) .tech-bookable-toggle-label-on { color: var(--orange-dark, #B36422); }

/* When the tech is hidden from the calendar, fade the whole row to
   reinforce "not currently bookable" without making it disappear from
   the admin's view. The toggle itself stays clickable. */
.tech-assignment-row.is-hidden-from-calendar {
  background: #FAF6EE;
  border-style: dashed;
}
/* Hidden-from-calendar techs: collapse the service grid to keep the list
   simple. The checkboxes stay in the DOM (display:none still submits), so
   their service selections are preserved on save and reappear if the tech
   is made bookable again. */
.tech-assignment-row.is-hidden-from-calendar .tech-assignment-services {
  display: none;
}
/* Small label that separates bookable techs from the hidden group. */
.tech-assignment-divider {
  margin: 14px 2px 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-muted, #7B8190);
}
.ta-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ta-status-any {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.ta-status-limited {
  background: #FFF6EE;
  color: var(--orange-dark);
  border: 1px solid #FFD9B8;
}
.tech-assignment-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Each service is a toggle styled like a chip — outline when off,
   solid orange when on. Click anywhere on the chip to toggle. The
   underlying checkbox is hidden but accessible. */
.service-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.service-toggle:hover {
  border-color: var(--orange);
  color: var(--text);
}
.service-toggle:active { transform: scale(0.97); }
.service-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.service-toggle.is-checked {
  background: #FFF6EE;
  border-color: #FFD9B8;
  color: var(--orange-dark);
}
.service-toggle.is-checked::before {
  content: '✓';
  margin-right: 5px;
  font-weight: 800;
  color: var(--orange);
}
.service-toggle:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 122, 42, 0.18);
}

/* Number-with-unit suffix */
.input-suffix {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  width: 180px;
}
.input-suffix input {
  border: 0 !important;
  padding: 10px 8px 10px 12px !important;
  font-size: var(--t-md);
  flex: 1;
  background: transparent;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
}
.input-suffix input:focus { outline: none; box-shadow: none !important; }
.input-suffix:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,122,42,0.16);
}
.input-suffix .suffix {
  padding: 0 12px;
  font-size: var(--t-sm);
  color: var(--text-muted);
  font-weight: 500;
  border-left: 1px solid var(--border-soft);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

/* Auth v2 — split panel layout */
/* ═══ 16. Admin mobile responsive sweep ═══ */
/* Mobile responsive sweep — admin v2 specifics */
@media (max-width: 900px) {
  .card2-row { grid-template-columns: 1fr; gap: 10px; }
  .card2-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card2-header-meta { align-self: stretch; }
  .section-head.v2 { padding-bottom: 14px; margin-bottom: 16px; }
  .stat-tile-value { font-size: 1.4rem; }
  .save-bar.v2 { flex-wrap: wrap; }
  /* Sidebar v2 in horizontal mobile nav: drop the left-edge accent bar
     (which only makes sense in a vertical column) and keep the active
     state purely as the orange-soft pill. */
  .admin-nav-item.v2.is-active::before { display: none; }
  .admin-nav-item.v2 { padding: 9px 12px; }
  /* Location switcher takes full width on mobile so it doesn't collide
     with horizontally-scrolling nav sections. */
  .loc-switcher.v2 { flex: 1 1 100%; min-width: 0; }
  .admin-nav { flex-wrap: wrap; gap: 10px; }
  /* Quick-start: stack the cta below the title on tight screens */
  .quickstart-item { grid-template-columns: 22px 1fr; }
  .quickstart-cta { grid-column: 2; justify-self: start; padding-left: 0; }
}
@media (max-width: 600px) {
  .save-bar.v2 .save-bar-label { width: 100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .auth-form-card { max-width: 100%; }
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* Tag editor — chip-style input used for marketing-sources Survey
   options. Existing values render as pills with an × remove button;
   the trailing input lets the admin type to add a new one (Enter or
   comma commits). The whole control behaves visually as one bordered
   field so it reads as a single setting rather than a list-and-input
   pair. */
.tag-editor {
  position: relative;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 10px;
  background: #FFFFFF;
  padding: 6px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  cursor: text;
}
.tag-editor:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(245, 133, 54, 0.15);
}
.tag-editor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tag-editor-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 4px 5px 12px;
  border-radius: 999px;
  background: var(--card-tint, #FAF7F1);
  border: 1px solid rgba(39, 41, 54, 0.10);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tag-editor-tag.is-flash {
  background: #FCE9D6;
  border-color: rgba(224, 122, 42, 0.45);
  animation: tagEditorFlash 0.4s ease;
}
@keyframes tagEditorFlash {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.tag-editor-tag-label {
  white-space: nowrap;
}
.tag-editor-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.tag-editor-remove:hover,
.tag-editor-remove:focus-visible {
  background: rgba(39, 41, 54, 0.08);
  color: var(--text);
  outline: none;
}
.tag-editor-input-row {
  flex: 1 1 140px;
  display: flex;
  min-width: 140px;
}
.tag-editor-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  min-width: 0;
}
.tag-editor-input::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   Admin booking link row
   The Location info card has a row showing the per-location admin
   booking URL (/admin/book/:slug) with a Copy button. Mono path,
   tucked inputs, small action buttons — keeps the row compact in
   the form layout without dominating.
   ═══════════════════════════════════════════════════════════════ */
.booking-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.booking-link-path {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  background: var(--card-tint, #FAF7F1);
  border: 1px solid var(--border-soft, rgba(39, 41, 54, 0.10));
  border-radius: 8px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow-x: auto;
  user-select: all;
}
.booking-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   ZIP → tech assignment rows
   One row per ZIP, with a 5-digit numeric input, an arrow, a tech
   <select>, and a remove button. The server expects sequential
   indices (zip_techs[0]..[N-1]); the JS re-indexes after every
   add/remove so qs parsing on the server stays consistent.
   ═══════════════════════════════════════════════════════════════ */
.zip-tech-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.zip-tech-empty {
  margin: 4px 0 0;
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
}
.zip-tech-row {
  display: grid;
  grid-template-columns: 110px 16px 1fr 32px;
  gap: 10px;
  align-items: center;
}
.zip-tech-zip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(39, 41, 54, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zip-tech-zip:focus {
  outline: none;
  border-color: var(--orange, #E07A2A);
  box-shadow: 0 0 0 3px rgba(224, 122, 42, 0.12);
}
.zip-tech-arrow {
  color: var(--text-muted, rgba(39, 41, 54, 0.5));
  text-align: center;
  font-size: 0.95rem;
  user-select: none;
}
.zip-tech-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(39, 41, 54, 0.12);
  border-radius: 8px;
  padding: 8px 36px 8px 12px;
  font-size: 0.95rem;
  color: var(--text);
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23272936' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
  min-width: 0;
}
.zip-tech-select:focus {
  outline: none;
  border-color: var(--orange, #E07A2A);
  box-shadow: 0 0 0 3px rgba(224, 122, 42, 0.12);
}
.zip-tech-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted, rgba(39, 41, 54, 0.6));
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.zip-tech-remove:hover {
  background: rgba(39, 41, 54, 0.06);
  color: var(--text);
}
.zip-tech-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   "How techs get assigned" — algorithm explainer
   Numbered chain of pick rules. Each step shows the rule + a brief
   rationale + (where applicable) the current location's state for
   that step. Mirrors pickTechForBooking exactly.
   ═══════════════════════════════════════════════════════════════ */
.pick-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: pick-step;
}
.pick-chain-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}
.pick-chain-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(224, 122, 42, 0.12);
  color: var(--orange-dark, #B86012);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.pick-chain-body strong {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 4px;
}
.pick-chain-body p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.pick-chain-state {
  font-size: 0.82rem !important;
  color: var(--text-muted, rgba(39, 41, 54, 0.7)) !important;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   Activity tab — booking-session log
   Renders a scrolling list of session cards on the per-location
   Activity page. Each card shows status, the customer's progress
   through the booking flow, and (for completed bookings) the
   assigned tech + reason. Filter chips at the top swap visibility.
   ═══════════════════════════════════════════════════════════════ */
.activity-filter {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-tint, #FAF7F1);
  border: 1px solid var(--border-soft, rgba(39, 41, 54, 0.08));
  border-radius: 999px;
}
.activity-filter-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.activity-filter-btn:hover { color: var(--text); }
.activity-filter-btn.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(39, 41, 54, 0.06);
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.activity-item {
  border: 1px solid var(--border-soft, rgba(39, 41, 54, 0.08));
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  transition: box-shadow 0.18s ease;
}
.activity-item:hover { box-shadow: 0 2px 8px rgba(39, 41, 54, 0.05); }
/* Subtle left-edge accent so the status reads at a glance even
   when the user has scrolled past the pill. */
.activity-status-completed { border-left: 3px solid #2E8B57; }
.activity-status-abandoned { border-left: 3px solid rgba(39, 41, 54, 0.20); }
.activity-status-in_progress { border-left: 3px solid var(--orange, #E07A2A); }

.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.activity-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.activity-row-meta time {
  font-size: 0.85rem;
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
  white-space: nowrap;
}

.activity-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.activity-pill-completed { background: #E6F2EB; color: #2E8B57; }
.activity-pill-abandoned { background: rgba(39, 41, 54, 0.06); color: var(--text-muted, rgba(39, 41, 54, 0.7)); }
.activity-pill-in_progress { background: rgba(224, 122, 42, 0.12); color: var(--orange-dark, #B86012); }
/* Admin-filed pill — surfaced next to the status pill when the
   booking came in via /admin/book/:slug (lead source = "Admin
   Booking" in HCP). Brand orange so it visually pops against the
   green Booked pill, and the same icon that's used in the admin
   booking banner so the connection reads clearly. */
.activity-pill-admin {
  background: rgba(224, 122, 42, 0.12);
  color: var(--orange-dark, #B86012);
  gap: 4px;
}
/* Override pill — marks bookings where the admin opted into one of
   the bypass toggles (closed-day/blackout or trip-charge). Lead-time
   bypass is automatic on every admin booking, so it's not worth
   surfacing on its own. Yellow-amber tone reads as "audit this" w/o
   being alarming. */
.activity-pill-bypass {
  background: rgba(204, 152, 24, 0.14);
  color: #8a6a10;
  gap: 4px;
}

.activity-step {
  font-size: 0.92rem;
  color: var(--text);
}
.activity-step strong { font-weight: 600; }

.activity-pick-reason {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.activity-pick-reason-continuity {
  background: rgba(46, 139, 87, 0.08);
  color: #2E8B57;
  border-color: rgba(46, 139, 87, 0.20);
}
.activity-pick-reason-round_robin {
  background: rgba(39, 41, 54, 0.04);
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
  border-color: rgba(39, 41, 54, 0.10);
}

.activity-summary {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.activity-summary-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.4;
}
.activity-summary-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.activity-summary-value { color: var(--text); word-break: break-word; }

.activity-details {
  margin-top: 10px;
  border-top: 1px dashed rgba(39, 41, 54, 0.10);
  padding-top: 8px;
}
.activity-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
  user-select: none;
}
.activity-details summary:hover { color: var(--text); }
.activity-events {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.activity-events li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  color: var(--text);
}
.activity-events time {
  color: var(--text-muted, rgba(39, 41, 54, 0.7));
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  min-width: 110px;
}
.activity-events code {
  background: rgba(39, 41, 54, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.activity-decision {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(39, 41, 54, 0.03);
  border: 1px solid rgba(39, 41, 54, 0.08);
}
.activity-decision h4 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--text);
}
.activity-decision-grid {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 6px 10px;
  font-size: 0.84rem;
}
.activity-decision-grid > span {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}
.activity-decision-grid strong {
  min-width: 0;
  word-break: break-word;
}
.activity-decision-busy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.activity-conflict {
  display: block;
  color: var(--text);
  word-break: break-word;
}

/* ═══ Drop-off funnel ════════════════════════════════════════════════
   Sits above the "Recent sessions" card in the per-location Activity
   tab. Aggregates the abandoned sessions into a funnel: each row is
   one step of the booking flow, the bar shows what % of abandoned
   customers reached that step, and the action chips below the bar
   show what those customers DID while there. The row matching the
   biggest drop-off gets the .is-worst flag for visual emphasis. */
.dropoff-card { margin-bottom: 18px; }
.dropoff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dropoff-row {
  /* Hairline divider between rows. Lighter than .card2's outer rule
     so the funnel reads as a cohesive block, not a stack of cards. */
  padding: 14px 16px;
  border: 1px solid rgba(39, 41, 54, 0.08);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.dropoff-row.is-worst {
  /* The biggest-drop row gets a soft orange skin so the eye lands
     there first. Matches the orange-soft pill treatment elsewhere
     in the dashboard for "needs attention" signals. */
  border-color: rgba(224, 122, 42, 0.32);
  background: var(--orange-soft);
}
.dropoff-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.dropoff-step-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 8px;
  background: rgba(39, 41, 54, 0.06);
  border-radius: 6px;
}
.dropoff-row.is-worst .dropoff-step-num {
  background: rgba(224, 122, 42, 0.18);
  color: var(--orange-dark);
}
.dropoff-step-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}
.dropoff-reached {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--text);
}
.dropoff-reached strong {
  font-size: 1rem;
  color: var(--navy);
}

/* Funnel bar — visualizes what percent of all abandoned customers
   reached this step. Bars naturally shrink left-to-right as the
   funnel progresses (fewer customers reach each subsequent step). */
.dropoff-bar {
  width: 100%;
  height: 10px;
  background: rgba(39, 41, 54, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.dropoff-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  border-radius: 999px;
  /* Smooth fill so the bar reads as a live measurement, not a static
     graphic. 0.6s matches the success-card check-draw cadence. */
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.dropoff-row.is-worst .dropoff-bar-fill {
  background: linear-gradient(90deg, var(--orange-dark) 0%, #8b3f08 100%);
}

/* "Dropped off here" call-out: the headline data point per row. */
.dropoff-here {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dropoff-here-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}
.dropoff-row.is-worst .dropoff-here-pill {
  background: rgba(220, 38, 38, 0.16);
}
.dropoff-here-pct {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Action chips — what the abandoned customers DID at this step. The
   server's `eventLabels` map translates the internal event-type
   names (service_picked, address_resolved, etc.) into the friendly
   labels rendered here. Counts pile up across all abandoned
   sessions, so a chip of "Address resolved 12" means 12 abandoned
   customers got an address to resolve before bailing. */
.dropoff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dropoff-actions-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 4px;
}
.dropoff-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: #fff;
  border: 1px solid rgba(39, 41, 54, 0.12);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text);
}
.dropoff-row.is-worst .dropoff-action-chip {
  background: rgba(255, 255, 255, 0.7);
}
.dropoff-action-chip[data-event="outside_area"] {
  /* "Outside service area" deserves its own visual key — the customer
     COULDN'T book regardless of how good the form was, so admins read
     this as "we don't have coverage" rather than "form needs work". */
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;
}
.dropoff-action-chip[data-event="submit_failed"] {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-weight: 600;
}
.dropoff-action-label { line-height: 1; }
.dropoff-action-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: rgba(39, 41, 54, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
}
.dropoff-action-chip[data-event="outside_area"] .dropoff-action-count,
.dropoff-action-chip[data-event="submit_failed"] .dropoff-action-count {
  background: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
}

@media (max-width: 600px) {
  .dropoff-row { padding: 12px 12px; }
  .dropoff-reached { margin-left: 0; width: 100%; }
  .dropoff-row-head { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Bento-Box Soft Minimalism — palette + components

   New design language per docs/INTERFACE_DESIGN_PHILOSOPHY_NEW.md.
   Scoped to .bento-* classes so existing .card2 / .section-page
   surfaces elsewhere on the dashboard stay untouched.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Warm canvas + cards. Cool grays were sterile — the new tokens
     read as printed paper. */
  --sw-canvas: #F8F5EF;
  --sw-card: #FCFAF6;
  --sw-card-lift: #FFFDF9;
  --sw-inset: #F3EFE7;
  --sw-border: #E5DED3;
  --sw-shadow: rgba(55, 59, 77, 0.08);

  /* Ink + brand colors per the philosophy doc. */
  --sw-ink: #373B4D;
  /* 2026-06-10: ink-deep unified with ink — ONE black across the whole app
     (headers, labels, icons). The old deep navy #0B2447 read as near-black
     against the orange selection; everything dark is now this slate. */
  --sw-ink-deep: #373B4D;
  --sw-muted: #7B8190;
  --sw-orange: #F38A3F;
  --sw-orange-soft: #FFEEDC;
  --sw-orange-dark: #C66518;
  --sw-blue: #BFE0F3;
  --sw-green: #4BAA78;
  --sw-gold: #D39A2E;
  --sw-coral: #D65F4F;
  --sw-coral-wash: #FCEBE7;

  /* Aggressive radii for the squircle look. */
  --sw-radius-card: 24px;
  --sw-radius-pill: 999px;
  --sw-radius-input: 14px;
}

/* ─── Bento grid ────────────────────────────────────────────────
   12-column flex-y grid. Cards declare their span via data-span
   ("12" / "8" / "6" / "4"); below 760px every card collapses to
   full width so the layout breathes on phones. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 760px) {
  .bento-grid { gap: 14px; }
}

/* ─── Bento card ────────────────────────────────────────────────
   Soft warm fill + 1px warm border + diffused ambient shadow.
   No harsh drop shadows — the card hovers millimeters above the
   canvas via the wide-blur, low-opacity treatment from the doc. */
.bento-card {
  grid-column: span 12;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-card);
  padding: 28px 28px 26px;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset,
              0 8px 24px var(--sw-shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.bento-card[data-span="8"] { grid-column: span 8; }
.bento-card[data-span="6"] { grid-column: span 6; }
.bento-card[data-span="4"] { grid-column: span 4; }
@media (max-width: 920px) {
  .bento-card[data-span="8"],
  .bento-card[data-span="6"] { grid-column: span 12; }
}
@media (max-width: 760px) {
  .bento-card { grid-column: span 12 !important; padding: 22px 20px 20px; }
}

.booking-settings-layout {
  display: grid;
  grid-template-columns: minmax(218px, 264px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.booking-settings-layout--single {
  display: block;
}

.booking-settings-menu {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,254,250,0.68), rgba(252,249,243,0.46));
  box-shadow: 0 18px 42px rgba(55,59,77,0.11), inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
}

.booking-settings-menu-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px 10px;
}

.booking-settings-menu-head span,
.booking-settings-save-card span {
  color: var(--sw-muted, #7B8190);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-settings-menu-head strong,
.booking-settings-save-card strong {
  overflow: hidden;
  color: var(--sw-ink-deep, #373B4D);
  font-size: 14px;
  font-weight: 820;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-settings-menu-btn {
  display: flex;
  width: 100%;
  min-height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--sw-ink, #373B4D);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.booking-settings-menu-btn:hover {
  border-color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.booking-settings-menu-btn.is-active {
  border-color: rgba(255,255,255,0.72);
  background: rgba(255,243,233,0.74);
  box-shadow: inset 3px 0 0 rgba(243,138,63,0.90), inset 0 1px 0 rgba(255,255,255,0.82);
}

.booking-settings-menu-btn strong {
  color: var(--sw-ink-deep, #373B4D);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

.booking-settings-menu-btn small,
.booking-settings-save-card small {
  color: var(--sw-muted, #7B8190);
  font-size: 11.5px;
  font-weight: 640;
  line-height: 1.25;
}

.booking-settings-save-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid rgba(229,222,211,0.88);
  border-radius: 12px;
  background: rgba(255,255,255,0.44);
}

.booking-settings-save-card--inline {
  margin: 0 0 16px;
}

.booking-settings-save-card.is-dirty {
  border-color: rgba(243,138,63,0.42);
  background: rgba(255,243,233,0.76);
  box-shadow: 0 10px 24px rgba(243,138,63,0.12);
}

.booking-settings-save-card .bento-btn {
  width: 100%;
  justify-content: center;
  margin-top: 3px;
}

.booking-settings-save-card--inline .bento-btn {
  width: auto;
  align-self: flex-start;
}

.settings-save-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(229,222,211,0.86);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,254,250,0.68), rgba(252,249,243,0.46));
  box-shadow: 0 14px 34px rgba(55,59,77,0.08), inset 0 1px 0 rgba(255,255,255,0.72);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.settings-save-strip.is-dirty {
  border-color: rgba(243,138,63,0.40);
  background: rgba(255,243,233,0.76);
  box-shadow: 0 14px 34px rgba(243,138,63,0.12);
}

.settings-save-strip > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.settings-save-strip span {
  color: #A29D8B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.settings-save-strip strong {
  color: var(--sw-ink-deep, #373B4D);
  font-size: 14px;
  font-weight: 820;
  letter-spacing: 0;
}

.settings-save-strip small {
  color: var(--sw-muted, #7B8190);
  font-size: 11.5px;
  font-weight: 620;
}

@media (max-width: 620px) {
  .settings-save-strip {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-save-strip .bento-btn {
    justify-content: center;
  }
}

/* Footer save cards/strips — the save control lives BELOW the settings now
   (settings start at the top of the page; a slim .hub-mini-head names the
   page where the card used to). In the saved state they sit in normal flow,
   so the page scrolls clean with nothing floating. While the form has
   unsaved changes (.is-dirty, toggled by the dirty tracker) they turn
   sticky so Save stays in reach on long pages. Sticky offsets resolve
   against .app-scroll's padding box, and --chrome-bottom (136px) already
   clears the dock — so bottom: 0 rests the bar at the content-area edge,
   ~36px above the dock. Do not add the dock height here; it double-counts.
   Condensed to a single row; the eyebrow <span> is hidden because the page
   title already names the section. */
.booking-settings-save-card--footer,
.settings-save-strip--footer {
  margin: 18px 0 0;
}
.booking-settings-save-card--footer.is-dirty,
.settings-save-strip--footer.is-dirty {
  position: sticky;
  bottom: 0;
  z-index: 30;
  /* Solid fill while floating — translucency reads as broken when cards
     scroll underneath. */
  background: #FFF4E9;
  border-color: rgba(243,138,63,0.50);
  box-shadow: 0 -10px 26px rgba(55,59,77,0.10), 0 14px 30px rgba(243,138,63,0.16);
}
.booking-settings-save-card--footer {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.booking-settings-save-card--footer > span { display: none; }
.booking-settings-save-card--footer strong { white-space: nowrap; font-size: 13.5px; }
.booking-settings-save-card--footer small { flex: 1; min-width: 0; }
.booking-settings-save-card--footer .bento-btn {
  width: auto;
  margin: 0 0 0 auto;
  align-self: center;
}
.settings-save-strip--footer { padding: 10px 14px; }
.settings-save-strip--footer > div { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.settings-save-strip--footer > div > span { display: none; }
@media (max-width: 620px) {
  .booking-settings-save-card--footer { flex-direction: column; align-items: stretch; }
  .booking-settings-save-card--footer .bento-btn { margin: 0; justify-content: center; }
}


.booking-settings-panels {
  min-width: 0;
}

.booking-settings-panels .bento-grid {
  align-items: start;
}

/* Booking settings is the one menu with multi-card rows, so stretch its
   cards to equal heights per row — the others are single full-width cards
   where this is a no-op. Keeps the 2x2 grid reading as a tidy block. */
.section-page[data-section="location-settings"] .booking-settings-panels .bento-grid {
  align-items: stretch;
}

.booking-settings-panels [data-settings-panel][hidden] {
  display: none !important;
}

.booking-settings-card {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,254,250,0.70), rgba(252,249,243,0.48));
  box-shadow: 0 18px 42px rgba(55,59,77,0.10), inset 0 1px 0 rgba(255,255,255,0.72);
}

@media (max-width: 980px) {
  .booking-settings-layout {
    grid-template-columns: 1fr;
  }
  .booking-settings-menu {
    position: relative;
    top: auto;
  }
}

/* ─── Bento card head ───────────────────────────────────────────
   Z-pattern corner anchoring: title cluster top-left (icon +
   title + optional description), action slot top-right. */
.bento-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.bento-card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.bento-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--sw-orange-soft);
  color: var(--sw-orange-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bento-card-icon--blue {
  background: rgba(191, 224, 243, 0.55);
  color: #1F5A86;
}
.bento-card-icon--ink {
  background: var(--sw-inset);
  color: var(--sw-ink);
}
.bento-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sw-ink);
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.2;
}
.bento-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
.bento-card-desc {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sw-muted);
  line-height: 1.45;
  max-width: 56ch;
}
.bento-card-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── Bento input ───────────────────────────────────────────────
   Warm inset background, pill-ish radius, generous padding.
   Replaces the existing thin border + cool fill from .card2-row. */
.bento-input,
.bento-card input[type="text"],
.bento-card input[type="tel"],
.bento-card input[type="email"],
.bento-card input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--sw-ink);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.bento-card input[type="text"]:focus,
.bento-card input[type="tel"]:focus,
.bento-card input[type="email"]:focus,
.bento-card input[type="number"]:focus,
.bento-input:focus {
  outline: none;
  border-color: var(--sw-orange);
  background: var(--sw-card);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}
.bento-input-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin: 0 0 8px;
}

/* ─── Bento KPI / value display ─────────────────────────────────
   For cards that show a single big value (time zone chip, support
   phone number, fee). Heavy weight + tabular numerals so the
   number anchors the card. */
.bento-kpi {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sw-ink-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ─── Booking link row ─────────────────────────────────────────
   URL chip + Copy + Open. Chip stretches; buttons stay pill-shaped
   and aligned to the right edge of the card body. */
.bento-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bento-link-stack {
  display: grid;
  gap: 10px;
}
.bento-link-label {
  flex: 0 0 150px;
  color: var(--sw-muted, #7B8190);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}
.bento-link-chip {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--sw-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-link-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bento-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--sw-radius-pill);
  border: 1px solid var(--sw-border);
  background: var(--sw-card-lift);
  color: var(--sw-ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  font-family: inherit;
  text-decoration: none;
}
.bento-btn:hover { background: var(--sw-inset); border-color: var(--sw-muted); }
.bento-btn:active { transform: translateY(1px); }
.bento-btn--primary {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
}
.bento-btn--primary:hover {
  background: var(--sw-orange-dark);
  border-color: var(--sw-orange-dark);
  color: #fff;
}
.bento-btn--danger {
  background: transparent;
  border-color: rgba(214, 95, 79, 0.35);
  color: var(--sw-coral);
}
.bento-btn--danger:hover {
  background: var(--sw-coral-wash);
  border-color: var(--sw-coral);
}
.bento-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sw-muted);
}
.bento-btn--ghost:hover {
  background: var(--sw-inset);
  color: var(--sw-ink);
}

/* ─── Section header (Bento) ───────────────────────────────────
   Replaces .section-head v2 for the redesigned Location info
   page. Hero number + subtitle + action slot. */
.bento-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
.bento-section-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin: 0 0 8px;
}
.bento-section-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--sw-ink-deep);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.bento-section-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sw-muted);
  max-width: 60ch;
}

/* ─── iOS-switch override inside bento cards ───────────────────
   Existing .ios-switch is already pill-shaped — just keep the
   warm-card alignment so the toggle sits on the card baseline. */
.bento-card .ios-switch { margin: 0; }

/* ─── Pill ────────────────────────────────────────────────────
   For tiny status / category badges inside bento cards. */
.bento-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--sw-radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bento-pill--orange { background: var(--sw-orange-soft); color: var(--sw-orange-dark); }
.bento-pill--blue   { background: rgba(191, 224, 243, 0.6); color: #1F5A86; }
.bento-pill--green  { background: rgba(75, 170, 120, 0.16); color: #2F7A52; }
.bento-pill--gold   { background: rgba(211, 154, 46, 0.16); color: #8C6213; }
.bento-pill--coral  { background: var(--sw-coral-wash); color: var(--sw-coral); }
.bento-pill--inset  { background: var(--sw-inset); color: var(--sw-ink); }
.bento-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ─── Bento section canvas ─────────────────────────────────────
   When the Location info section is active, paint the page
   backdrop the warm-canvas color so the bento cards (warm-card
   fill, slightly lighter) read as physical objects resting on
   paper. Other admin sections keep their existing backdrop. */
.section-page[data-section="location-settings"] {
  background: var(--sw-canvas);
  padding: 28px 24px 40px;
  border-radius: 0;
  margin: -28px -24px 0;
}
@media (max-width: 760px) {
  .section-page[data-section="location-settings"] {
    padding: 22px 16px 32px;
    margin: -22px -16px 0;
  }
}

/* ─── Tz-select + trip-charge alignment inside bento cards ─────
   Both controls have their own legacy styling. Inside bento
   cards we just need them to stretch to the card width so the
   "single big control as KPI" anchoring reads cleanly. */
.bento-card .tz-select { width: 100%; }
.bento-card .tz-select-trigger {
  width: 100%;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  padding: 12px 14px;
}
.bento-card .tz-select-trigger:hover { border-color: var(--sw-muted); }
.bento-card .tz-select[open] .tz-select-trigger {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}
.bento-card .trip-charge-input-wrap {
  display: flex;
  align-items: center;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bento-card .trip-charge-input-wrap:focus-within {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}
.bento-card .trip-charge-prefix {
  padding: 0 6px 0 16px;
  color: var(--sw-muted);
  font-weight: 600;
}
.bento-card .trip-charge-input {
  border: 0;
  background: transparent;
  padding: 14px 16px 14px 0;
  flex: 1;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--sw-ink);
  outline: none;
  box-shadow: none;
}
.bento-card .trip-charge-input:focus { box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════
   Bento-Box Soft Minimalism — admin dashboard frame

   Header + location switcher + sidebar + canvas. Everything is scoped
   under `body.admin-body` so the public booking page (which doesn't
   carry that class) keeps its current navy header.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Canvas ───────────────────────────────────────────────────
   Warm page backdrop for the entire dashboard. Cards (.bento-card,
   .card2, .form-card) sit on top of this. */
body.admin-body {
  background: var(--sw-canvas);
  color: var(--sw-ink);
}

/* Roll back the location-settings section's old margin/padding hack.
   The whole canvas is warm now so individual sections don't need to
   paint their own. */
.admin-body .section-page[data-section="location-settings"] {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* ─── Site header (top bar) ────────────────────────────────────
   Was solid navy. Now: flush against the warm canvas with a
   hairline bottom border, dark ink for the brand text. Reads as
   "letterhead" rather than a navigation pill. */
.admin-body .site-header {
  background: var(--sw-canvas);
  color: var(--sw-ink);
  border-bottom: 1px solid var(--sw-border);
  padding: 18px 0;
}
.admin-body .header-inner {
  /* Match .admin-body .admin-shell (max-width 1240, padding 24px) so the
     left-pinned workspace switcher lines up with the sidebar's left edge. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
/* Keep the switcher aligned with the sidebar at the shell's mobile padding. */
@media (max-width: 920px) {
  .admin-body .header-inner { padding: 0 16px; }
}

/* Super Admin (org) view — DARK navy header so it's instantly obvious you're
   in the cross-location workspace, not a single location. The `is-super-admin`
   body class is server-rendered (no flash). Brand + ghost-button text flip to
   light; the white switcher/profile pills stay readable on the dark bar. */
.admin-body.is-super-admin .site-header {
  background: #373B4D;
  border-bottom: 1px solid #373B4D;
}
.admin-body.is-super-admin .brand,
.admin-body.is-super-admin .brand:hover,
.admin-body.is-super-admin .brand-text strong { color: #FFFFFF; }
.admin-body.is-super-admin .brand-text small { color: rgba(255, 255, 255, 0.66); }
.admin-body.is-super-admin .header-actions .btn-ghost {
  color: #EAF0FB;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
.admin-body.is-super-admin .header-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
  color: #FFFFFF;
}
/* In the cross-location (super admin) view there is no single selected
   location, so the per-location tools group has no items — the scope filter
   hides each tool but leaves its orange "Location tools" header behind as an
   empty pill. Hide the whole group here so the menu ends cleanly. It stays
   visible in single-location admin views where the tools actually apply. */
.admin-body.is-super-admin .admin-nav-group--current-loc { display: none; }
/* Header layout: the workspace switcher is pinned LEFT and the actions
   cluster sits RIGHT (both stay in normal flow, so space-between pushes
   them to the edges). The brand is lifted OUT of flow and absolutely
   centered, so the logo anchors the middle of the header regardless of
   how wide the side clusters grow. */
.admin-body .brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.admin-body .brand,
.admin-body .brand:hover,
.admin-body .brand-text strong {
  color: var(--sw-ink-deep);
}
.admin-body .brand-mark { height: 44px; }
.admin-body .brand-text strong { font-size: 1.25rem; letter-spacing: -0.005em; }
.admin-body .brand-text small {
  color: var(--sw-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 3px;
  opacity: 1;
}

/* Header right-side cluster — buttons become bento pills, ghost
   variants pick up the warm palette instead of the white-on-navy
   overlays from the old dark header. */
.admin-body .header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-body .header-actions .btn,
.admin-body .header-actions .btn-ghost,
.admin-body .header-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--sw-radius-pill);
  border: 1px solid var(--sw-border);
  background: var(--sw-card-lift);
  color: var(--sw-ink);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-body .header-actions .btn:hover,
.admin-body .header-actions .btn-ghost:hover,
.admin-body .header-actions .btn-secondary:hover {
  background: var(--sw-inset);
  border-color: var(--sw-muted);
  color: var(--sw-ink);
}

/* ─── Connection hub (status pill in the header) ───────────────
   Was white-on-navy. Now: warm pill with status-colored dot. */
.admin-body .connection-hub-summary {
  background: var(--sw-card-lift);
  color: var(--sw-ink);
  border: 1px solid var(--sw-border);
  padding: 6px 14px 6px 12px;
}
.admin-body .connection-hub-summary:hover {
  background: var(--sw-inset);
  border-color: var(--sw-muted);
}
.admin-body .connection-hub-dot {
  background: var(--sw-green);
  box-shadow: 0 0 0 3px rgba(75, 170, 120, 0.18);
}
.admin-body .connection-hub.is-warn .connection-hub-summary {
  background: rgba(211, 154, 46, 0.10);
  border-color: rgba(211, 154, 46, 0.32);
  color: #8C6213;
}
.admin-body .connection-hub.is-warn .connection-hub-dot {
  background: var(--sw-gold);
  box-shadow: 0 0 0 3px rgba(211, 154, 46, 0.22);
}
.admin-body .connection-hub-panel {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 18px;
  box-shadow: 0 20px 48px var(--sw-shadow);
}

/* ─── Location switcher (Global / Locations tab bar) ───────────
   Sits sticky under the header. Was cool-gray segmented control.
   Now: warm-inset pill segment with orange active state. */
.admin-body .admin-tabs {
  background: var(--sw-canvas);
  border-bottom: 1px solid var(--sw-border);
  box-shadow: none;
}
.admin-body .admin-tabs-inner { padding: 12px 24px; }
.admin-body .admin-tabs-group {
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  padding: 4px;
  gap: 2px;
}
.admin-body .admin-tab,
.admin-body .admin-tab-summary {
  border-radius: var(--sw-radius-pill);
  padding: 7px 16px;
  color: var(--sw-muted);
  font-weight: 600;
}
.admin-body .admin-tab:hover,
.admin-body .admin-tab-summary:hover {
  color: var(--sw-ink);
  background: var(--sw-card-lift);
}
.admin-body .admin-tab.is-active,
.admin-body .admin-tab-summary.is-active {
  background: var(--sw-card);
  color: var(--sw-ink-deep);
  box-shadow: 0 2px 6px var(--sw-shadow), 0 0 0 1px var(--sw-border);
}
.admin-body .admin-tab-loc-current {
  color: var(--sw-orange-dark);
  border-left: 1px solid var(--sw-border);
  margin-left: 6px;
  padding-left: 12px;
  font-weight: 700;
}
.admin-body .admin-tab-locations-panel {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 18px;
  box-shadow: 0 20px 48px var(--sw-shadow);
}

/* ─── Sidebar shell + grid ─────────────────────────────────────
   Add a little breathing room above the columns and let the
   sidebar render as a floating warm card rather than a bare
   vertical strip with a border-right divider. */
.admin-body .admin-shell {
  padding: 22px 24px 64px;
  gap: 24px;
  max-width: 1240px;
}
@media (max-width: 920px) {
  .admin-body .admin-shell { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
}

/* ─── Sidebar (left nav) ───────────────────────────────────────
   The sidebar is now a single warm card with rounded corners.
   Items inside become pill-shaped rows; the location-scoped
   block keeps its soft-orange skin but adopts the warm palette. */
.admin-body .admin-nav {
  position: sticky;
  top: 22px;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-card);
  padding: 18px 14px 20px;
  gap: 14px;
  height: fit-content;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  box-shadow: 0 8px 24px var(--sw-shadow);
  border-right: 1px solid var(--sw-border); /* override the old bare border-right */
}

/* Section eyebrow — uppercase muted label above each nav group */
.admin-body .admin-nav-eyebrow {
  color: var(--sw-muted);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  padding: 4px 12px 6px;
}
.admin-body .admin-nav-section { gap: 4px; }

/* Location-scoped block (per-location nav items). Warm-inset
   skin with hairline orange border so the admin sees at a
   glance which scope they're touching. */
.admin-body .admin-nav-section--location {
  background: rgba(243, 138, 63, 0.06);
  border: 1px solid rgba(243, 138, 63, 0.18);
  border-radius: 18px;
  padding: 10px 6px 12px;
  margin-top: 8px;
}
.admin-body .admin-nav-section--location .admin-nav-eyebrow {
  color: var(--sw-orange-dark);
  padding-top: 4px;
}

/* Individual nav items */
.admin-body .admin-nav-item,
.admin-body .admin-nav-item.v2 {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--sw-ink);
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-body .admin-nav-item:hover,
.admin-body .admin-nav-item.v2:hover {
  background: var(--sw-inset);
  color: var(--sw-ink);
}
.admin-body .admin-nav-item.is-active,
.admin-body .admin-nav-item.v2.is-active {
  background: var(--sw-card-lift);
  border-color: rgba(243, 138, 63, 0.32);
  color: var(--sw-ink-deep);
  font-weight: 700;
  box-shadow: 0 1px 2px var(--sw-shadow);
}
.admin-body .admin-nav-item .admin-nav-icon,
.admin-body .admin-nav-item.v2 .admin-nav-icon { color: var(--sw-muted); }
.admin-body .admin-nav-item.is-active .admin-nav-icon,
.admin-body .admin-nav-item.v2.is-active .admin-nav-icon { color: var(--sw-orange); }

/* Notification dot on a sidebar item — keep the pulse but switch
   to the warm orange variable. */
.admin-body .admin-nav-dot { background: var(--sw-orange); }

/* ─── Main content column ──────────────────────────────────────
   Less aggressive padding since the sidebar already gives the
   page lateral breathing room, and the warm canvas extends
   edge-to-edge underneath. */
.admin-body .admin-content { padding: 6px 8px 80px; min-width: 0; }
@media (max-width: 920px) {
  .admin-body .admin-content { padding: 0; }
}

/* Section heading inside the warm canvas — drops the old
   border-bottom rule since cards below have their own chrome. */
.admin-body .section-head {
  border-bottom: 0;
  padding-bottom: 6px;
  margin-bottom: 18px;
}
.admin-body .section-title { color: var(--sw-ink-deep); }
.admin-body .section-sub { color: var(--sw-muted); }

/* ─── Bento card sub-zones, dividers, kv-grids ──────────────────
   Some bento cards (Housecall Pro) hold multiple related groups
   in one card. These classes give a consistent rhythm without
   needing to split into separate cards. */
.bento-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bento-divider {
  height: 1px;
  background: var(--sw-border);
  margin: 4px 0;
}
.bento-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Password / single-input row inside a bento card. The general
   .bento-card input rule above handles text/tel/email/number;
   add password explicitly here. */
.bento-card input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--sw-ink);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bento-card input[type="password"]:focus {
  outline: none;
  border-color: var(--sw-orange);
  background: var(--sw-card);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}

/* KV grid — used for the "company info we got back from HCP"
   preview. Three pill-like inset blocks side by side on wide
   viewports, stacking to one column on phones. */
.bento-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.bento-kv {
  padding: 12px 14px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bento-kv-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
.bento-kv-value {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--sw-ink);
  word-break: break-word;
}

/* Disabled bento buttons (e.g. "Pull phone & time zone" when no
   HCP key is set). Visually muted but still readable. */
.bento-btn:disabled,
.bento-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--sw-inset);
  border-color: var(--sw-border);
  color: var(--sw-muted);
  box-shadow: none;
}
.bento-btn.bento-btn--primary:disabled {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  color: var(--sw-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   Bento — Schedule page overrides

   Restyles day-pill, tag-input, input-suffix, toggle-block, tech-
   assignment rows, zip-tech rows, and pick-chain steps to land in
   the warm-palette bento aesthetic. Scoped under .bento-card so the
   legacy section (anywhere these classes appear outside a bento
   context) keeps working unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Day pills (Mon–Sun open days) ────────────────────────────
   Was a 7-cell grid of squarish boxes. Now: warm inset chips
   with orange fill on checked. */
.bento-card .day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.bento-card .day-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sw-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}
.bento-card .day-pill input { position: absolute; opacity: 0; pointer-events: none; }
.bento-card .day-pill:hover {
  background: var(--sw-card-lift);
  color: var(--sw-ink);
  border-color: var(--sw-muted);
}
.bento-card .day-pill:has(input:checked) {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(243, 138, 63, 0.22);
}
.bento-card .day-pill:has(input:checked):hover { background: var(--sw-orange-dark); border-color: var(--sw-orange-dark); }
@media (max-width: 600px) {
  .bento-card .day-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Availability: Open-days split + clean weekday selector ─────
   .sched-split puts the day selector and blackout chips side by
   side with a faint vertical divider. .day-toggle is a single,
   flat segmented chip (no legacy double-layer). */
.sched-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sched-split-aside {
  padding-left: 24px;
  border-left: 1px solid var(--sw-border);
}
@media (max-width: 760px) {
  .sched-split { grid-template-columns: 1fr; gap: 18px; }
  .sched-split-aside { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--sw-border); }
}
.day-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.day-toggle { position: relative; cursor: pointer; }
.day-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.day-toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 11px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  color: var(--sw-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.05s;
}
.day-toggle:hover span { color: var(--sw-ink); border-color: var(--sw-muted); }
.day-toggle input:checked + span {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
}
.day-toggle:active span { transform: scale(0.95); }
@media (max-width: 480px) {
  .day-row { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Tag input (chips + add field) ────────────────────────────
   Used for blackout dates + slot start times. Was a cool-gray
   chip group; now warm-inset with rounded chips. */
.bento-card .tag-input {
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bento-card .tag-input:focus-within {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}
.bento-card .tag-input .chip-list {
  display: contents;
}
.bento-card .tag-input .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--sw-orange-soft);
  color: var(--sw-orange-dark);
  border: 1px solid rgba(243, 138, 63, 0.32);
  border-radius: var(--sw-radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
}
.bento-card .tag-input .chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(243, 138, 63, 0.2);
  color: var(--sw-orange-dark);
  border: 0;
  cursor: pointer;
  font-size: 0.7rem;
}
.bento-card .tag-input .chip .chip-remove:hover {
  background: var(--sw-orange);
  color: #fff;
}
.bento-card .tag-input > input[type="text"],
.bento-card .tag-input > input[type="date"] {
  flex: 1;
  min-width: 140px;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  font-size: 0.92rem;
  color: var(--sw-ink);
  outline: none;
  box-shadow: none;
  width: auto;
}
.bento-card .tag-input > input[type="text"]:focus,
.bento-card .tag-input > input[type="date"]:focus { box-shadow: none; }

/* ─── Mini-grid + bento-num-input ──────────────────────────────
   2×2 layout of single-number settings inside Arrival windows.
   Each mini-tile reads as a KPI card: label, helper, big number
   input with a unit suffix. */
.bento-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 920px) { .bento-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bento-mini-grid { grid-template-columns: 1fr; } }
.bento-mini {
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bento-mini-help {
  margin: 0;
  font-size: 0.78rem;
  color: var(--sw-muted);
  line-height: 1.35;
}
.bento-num-input {
  display: flex;
  align-items: center;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  overflow: hidden;
  margin-top: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bento-num-input:focus-within {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}
.bento-num-input input[type="number"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 6px 12px 16px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sw-ink-deep);
  font-variant-numeric: tabular-nums;
  outline: none;
  box-shadow: none;
}
.bento-num-input input[type="number"]:focus { box-shadow: none; background: transparent; }
.bento-num-suffix {
  padding: 0 16px 0 6px;
  color: var(--sw-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

/* ─── Tech assignment rows ─────────────────────────────────────
   List of techs with avatar + name + status pill + grid of
   service-toggle pills. Was a flat list separated by hairlines;
   now each tech row is its own warm-inset block. */
.bento-card .tech-assignments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bento-card .tech-assignment-row {
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bento-card .tech-assignment-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bento-card .tech-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  color: var(--sw-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bento-card .tech-assignment-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--sw-ink);
  flex: 1;
}
.bento-card .tech-assignment-services {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bento-card .service-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  font-size: 0.74rem;
  color: var(--sw-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bento-card .service-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bento-card .service-toggle:hover { background: var(--sw-card); border-color: var(--sw-muted); color: var(--sw-ink); }
.bento-card .service-toggle.is-checked,
.bento-card .service-toggle:has(input:checked) {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
  font-weight: 600;
}

/* ─── ZIP → tech rows ──────────────────────────────────────────
   Each row: ZIP input → arrow → tech select → remove button. */
.bento-card .zip-tech-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.bento-card .zip-tech-row {
  display: grid;
  grid-template-columns: 110px 18px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
}
.bento-card .zip-tech-zip {
  width: 100%;
  padding: 10px 12px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: 10px;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sw-ink-deep);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.bento-card .zip-tech-zip:focus {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.14);
}
.bento-card .zip-tech-arrow {
  text-align: center;
  color: var(--sw-muted);
  font-size: 1.1rem;
}
.bento-card .zip-tech-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--sw-ink);
  cursor: pointer;
  outline: none;
}
.bento-card .zip-tech-select:focus {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.14);
}
.bento-card .zip-tech-remove {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--sw-muted);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bento-card .zip-tech-remove:hover {
  background: var(--sw-coral-wash);
  color: var(--sw-coral);
}
.bento-card .zip-tech-empty { margin: 4px 0 0; }
@media (max-width: 600px) {
  .bento-card .zip-tech-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bento-card .zip-tech-arrow { display: none; }
  .bento-card .zip-tech-remove { justify-self: end; }
}

/* ─── Pick-chain steps (How techs get assigned) ────────────────
   Numbered, step-by-step explainer. Each step is a warm-inset
   pill-card with a big number on the left and a body block on
   the right. */
.bento-card .pick-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bento-card .pick-chain-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 16px;
}
.bento-card .pick-chain-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--sw-orange-soft);
  color: var(--sw-orange-dark);
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bento-card .pick-chain-body strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--sw-ink);
  margin-bottom: 4px;
}
.bento-card .pick-chain-body p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sw-muted);
  line-height: 1.5;
}
.bento-card .pick-chain-body p + p { margin-top: 6px; }
.bento-card .pick-chain-state .bento-pill { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   Bento — Service Area page overrides

   Restyles sa-search, sa-tags, sa-tag, sa-empty, tech-grid /
   tech-option, textarea, and adds bento-textarea + bento-map-frame +
   bento-callout. Scoped under .bento-card so legacy uses elsewhere
   are unaffected.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Search input (Google autocomplete) ───────────────────────
   The legacy #sa-search has a cool-gray border + white fill.
   Inside a bento card, swap to the warm-input pattern + orange
   focus ring matching the rest of the dashboard. */
.bento-card #sa-search {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--sw-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237B8190' stroke-width='1.6'><circle cx='7' cy='7' r='5'/><path d='M11 11l3 3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bento-card #sa-search:focus {
  outline: none;
  border-color: var(--sw-orange);
  background-color: var(--sw-card);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}
.bento-card .sa-search-wrap { margin: 0; }

/* ─── Active areas tag list ────────────────────────────────────
   Tag chips lose the harsh orange-soft fill in favor of the
   warm pill treatment used elsewhere. Type label (CITY/COUNTY)
   stays as an inline meta pill on the right. */
.bento-card .sa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 12px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  min-height: 48px;
}
.bento-card .sa-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-orange-soft);
  border: 1px solid rgba(243, 138, 63, 0.30);
  color: var(--sw-orange-dark);
  font-size: 0.88rem;
  font-weight: 600;
}
.bento-card .sa-tag-icon { color: var(--sw-orange-dark); }
.bento-card .sa-tag-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--sw-radius-pill);
  background: rgba(255, 255, 255, 0.75);
  color: var(--sw-orange-dark);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.bento-card .sa-tag-remove {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--sw-orange-dark);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.bento-card .sa-tag-remove:hover {
  background: var(--sw-orange);
  color: #fff;
}
.bento-card .sa-empty {
  width: 100%;
  margin: 0;
  text-align: center;
}

/* ─── Map preview frame ────────────────────────────────────────
   The Google map iframe sits inside a warm-inset frame with
   rounded corners and a 1px warm border. Status text below it
   adopts the bento-card-desc muted tone. */
.bento-map-frame {
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 16px;
  padding: 10px;
}
.bento-map-frame #service-area-map {
  width: 100%;
  height: 380px;
  border-radius: 12px;
  background: var(--sw-card);
  overflow: hidden;
}

/* ─── Bento textarea ───────────────────────────────────────────
   Used for the out-of-area message + any other multi-line input
   on bento cards. Same warm-input pattern as the single-line
   inputs above. */
.bento-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--sw-ink);
  line-height: 1.5;
  resize: vertical;
  min-height: 88px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.bento-textarea:focus {
  outline: none;
  border-color: var(--sw-orange);
  background: var(--sw-card);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}

/* ─── Tech grid (fallback techs picker) ────────────────────────
   Each tech option is a warm-inset pill with avatar circle + name.
   Selected state goes orange to match the Schedule page's service
   toggle treatment. */
.bento-card .tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.bento-card .tech-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  position: relative;
}
.bento-card .tech-option input { position: absolute; opacity: 0; pointer-events: none; }
.bento-card .tech-option:hover {
  background: var(--sw-card-lift);
  border-color: var(--sw-muted);
}
.bento-card .tech-option .tech-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  color: var(--sw-ink);
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bento-card .tech-option .tech-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sw-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bento-card .tech-option.is-checked,
.bento-card .tech-option:has(input:checked) {
  background: var(--sw-orange-soft);
  border-color: var(--sw-orange);
  box-shadow: 0 2px 6px rgba(243, 138, 63, 0.18);
}
.bento-card .tech-option.is-checked .tech-avatar,
.bento-card .tech-option:has(input:checked) .tech-avatar {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
}
.bento-card .tech-option.is-checked .tech-name,
.bento-card .tech-option:has(input:checked) .tech-name {
  color: var(--sw-orange-dark);
}

/* ─── Bento callout (e.g. "set GOOGLE_API_KEY" hint) ────────────
   Replaces the legacy .suggestion box. Soft gold/warning skin
   since these calls-to-action are typically about configuration
   that needs attention but isn't urgent. */
.bento-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(211, 154, 46, 0.10);
  border: 1px solid rgba(211, 154, 46, 0.32);
  border-radius: 14px;
}
.bento-callout-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.bento-callout strong { display: block; color: var(--sw-ink-deep); margin-bottom: 4px; }
.bento-callout p { margin: 0; }

/* ─── Address suggestions dropdown (sa-search results) ────────
   The popover that appears under the search input. Warm card
   styling so it matches the parent bento card. */
.bento-card .sa-search-wrap .address-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  box-shadow: 0 16px 36px var(--sw-shadow);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   Scope-aware nav v3 — sidebar + scope banner + All Locations table

   Implements the "scope first, setting second" model:
     - Sidebar splits into 4 groups (Workspace, Global, Locations, Current
       Location) with distinct visual treatment so admins can never lose
       track of which scope they're editing.
     - Every section page carries a scope banner above its title that
       declares "Global Setting · X" or "Editing Location · Y" so admins
       know what a Save will affect BEFORE they click it.
     - All Locations page is a status table, not a settings form. Each
       row reports HCP, service-area, tech, and schedule health for one
       location with a Switch-into-that-location button.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Sidebar v3 base ──────────────────────────────────────────
   The v3 sidebar groups items by scope with clear eyebrows. The
   group containers themselves are flush (no border/bg) — we let
   the .admin-nav card chrome from the earlier bento override
   handle the outer frame. */
.admin-body .admin-nav-v3 { gap: 18px; }
.admin-body .admin-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-body .admin-nav-group + .admin-nav-group {
  border-top: 1px solid var(--sw-border);
  padding-top: 14px;
  margin-top: 4px;
}
/* Add-location wrapper is empty when the popover is hidden — strip
   the generic separator so the outer .admin-nav card hugs the last
   real location tool instead of trailing an empty band. */
.admin-body .admin-nav-group + .admin-nav-group--add-location:not(:has(.admin-nav-loc-add-panel:not([hidden]))) {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* The Locations group is now a single dropdown picker. The
   per-location switcher rows + tuck-in styling that used to live
   here moved into .admin-nav-loc-picker-menu below. The current-loc
   tools panel still sits beneath this group but no longer needs
   to bleed into a "current row" — the dropdown is the current row. */
.admin-body .admin-nav-group--locations {
  gap: 4px;
}
.admin-body .admin-nav-group--current-loc {
  position: relative;
  background: linear-gradient(180deg, rgba(243, 138, 63, 0.09), rgba(243, 138, 63, 0.055));
  border: 1px solid rgba(243, 138, 63, 0.22);
  border-radius: 16px;
  padding: 12px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

/* ─── Location dropdown picker ─────────────────────────────────
   Replaces the prior stack of one-row-per-location switcher links.
   Same <details>-based pattern as the admin booking page's
   location+scope picker, so admins recognize the affordance across
   surfaces. Summary button shows the active franchise as a chip;
   menu drops below with All Locations (hub) at the top, every
   location in the middle, and the Add Location entry at the bottom. */
.admin-body .admin-nav-loc-picker {
  position: relative;
}
.admin-body .admin-nav-loc-picker-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FFFDF9;
  border: 1px solid #E5DED3;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-body .admin-nav-loc-picker-summary::-webkit-details-marker { display: none; }
.admin-body .admin-nav-loc-picker-summary:hover {
  background: #FFFAF1;
  border-color: rgba(243, 138, 63, 0.42);
}
.admin-body .admin-nav-loc-picker[open] .admin-nav-loc-picker-summary {
  background: #FFFAF1;
  border-color: rgba(243, 138, 63, 0.55);
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.10);
}
.admin-body .admin-nav-loc-picker-summary:focus-visible {
  outline: none;
  border-color: #F38A3F;
  box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.22);
}
.admin-body .admin-nav-loc-picker-summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.admin-body .admin-nav-loc-picker-summary-icon .admin-nav-loc-bullet {
  background: #F38A3F;
  color: #fff;
}
.admin-body .admin-nav-loc-picker-summary-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
.admin-body .admin-nav-loc-picker-summary-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7B8190;
}
.admin-body .admin-nav-loc-picker-summary-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #373B4D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.admin-body .admin-nav-loc-picker-caret {
  color: #7B8190;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.admin-body .admin-nav-loc-picker[open] .admin-nav-loc-picker-caret {
  transform: rotate(180deg);
}

/* ── Menu ────────────────────────────────────────────────────── */
.admin-body .admin-nav-loc-picker-menu {
  /* Tucked inline (not absolute) so the menu pushes the Location
     tools group down naturally — admins keep their place in the
     sidebar instead of getting a floating layer that hides content. */
  margin-top: 6px;
  padding: 8px;
  background: #FCFAF6;
  border: 1px solid #E5DED3;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(55, 59, 77, 0.08),
              0 1px 0 rgba(255, 255, 255, 0.85) inset;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-body .admin-nav-loc-picker-divider {
  height: 1px;
  margin: 6px 4px;
  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));
}
.admin-body .admin-nav-loc-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.88rem;
  color: #373B4D;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-body .admin-nav-loc-picker-item:hover,
.admin-body .admin-nav-loc-picker-item:focus-visible {
  outline: none;
  background: rgba(243, 138, 63, 0.10);
  color: #373B4D;
}
.admin-body .admin-nav-loc-picker-item.is-current-loc {
  background: rgba(243, 138, 63, 0.10);
  color: #373B4D;
  font-weight: 700;
}
.admin-body .admin-nav-loc-picker-item.is-current-loc:hover {
  background: rgba(243, 138, 63, 0.14);
}
.admin-body .admin-nav-loc-picker-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7B8190;
}
.admin-body .admin-nav-loc-picker-item-icon .admin-nav-loc-bullet {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #F3EFE7;
  color: #373B4D;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-body .admin-nav-loc-picker-item.is-current-loc .admin-nav-loc-bullet {
  background: #F38A3F;
  color: #fff;
}
.admin-body .admin-nav-loc-picker-item-name {
  flex: 1 1 auto;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-body .admin-nav-loc-picker-item-check {
  color: #F38A3F;
  display: inline-flex;
  flex: 0 0 auto;
}
.admin-body .admin-nav-loc-picker-item--hub .admin-nav-loc-picker-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(191, 224, 243, 0.4);
  color: #1F5A86;
}
.admin-body .admin-nav-loc-picker-item--hub .admin-nav-count {
  margin-left: auto;
}
.admin-body .admin-nav-loc-picker-item--add {
  color: #B86012;
  font-weight: 700;
}
.admin-body .admin-nav-loc-picker-item--add .admin-nav-loc-picker-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(243, 138, 63, 0.14);
  color: #B86012;
}
.admin-body .admin-nav-loc-picker-item--add:hover {
  background: rgba(243, 138, 63, 0.14);
  color: #B86012;
}
/* Only reserve a separator + breathing room when the popover is
   actually open. With the popover hidden (default state), this
   wrapper has no visible children — leaving the spacing in would
   stretch the outer .admin-nav card with ~22px of empty band below
   the location tools. */
.admin-body .admin-nav-group--current-loc + .admin-nav-group--add-location:has(.admin-nav-loc-add-panel:not([hidden])) {
  border-top: 1px solid var(--sw-border);
  padding-top: 14px;
  margin-top: 8px;
}

/* Eyebrow label inside each group. Standard small-caps; the
   location-tools variant uses the active orange tone but does not
   repeat the selected location name. */
.admin-body .admin-nav-eyebrow {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-muted);
  padding: 2px 12px 6px;
}
.admin-body .admin-nav-eyebrow--loc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 8px;
}
.admin-body .admin-nav-eyebrow-prefix {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-orange-dark);
}
.admin-body .admin-nav-eyebrow--loc::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: rgba(196, 99, 31, 0.18);
}

/* ─── Location switcher links inside the Locations group ───────
   Each location is a nav row with a one-letter bullet + name +
   "Default" pill (if applicable) + a tiny dot indicating
   "currently active." Clicking reloads the whole page with the
   ?location= param. */
.admin-body .admin-nav-loc-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--sw-ink);
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-body .admin-nav-loc-switch:hover {
  background: var(--sw-inset);
  text-decoration: none;
}
.admin-body .admin-nav-loc-switch.is-current-loc {
  background: rgba(243, 138, 63, 0.10);
  border-color: rgba(243, 138, 63, 0.30);
  color: var(--sw-orange-dark);
  font-weight: 700;
}
.admin-body .admin-nav-loc-bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  color: var(--sw-ink);
  font-size: 0.68rem;
  font-weight: 700;
}
.admin-body .admin-nav-loc-switch.is-current-loc .admin-nav-loc-bullet {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
}
.admin-body .admin-nav-loc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-body .admin-nav-loc-current-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sw-orange);
  margin-left: 6px;
  flex-shrink: 0;
}

/* Add-location trigger + popover. Lives after the selected-location
   tools so it reads as a separate management action, not part of the
   current location submenu. */
.admin-body .admin-nav-loc-add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px dashed var(--sw-border);
  background: transparent;
  color: var(--sw-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  margin-top: 6px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-body .admin-nav-loc-add:hover {
  background: var(--sw-inset);
  color: var(--sw-ink);
  border-color: var(--sw-muted);
}
.admin-body .admin-nav-loc-add-panel {
  margin-top: 6px;
  padding: 10px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-body .admin-nav-loc-add-panel[hidden] {
  display: none !important;
}
/* The popover is wrapped in a tinted inset card so it doesn't look
   like a continuation of the location switcher list. Admins kept
   accidentally clicking popover entries thinking they were switchers;
   this distinct framing is the first line of defense. */
.admin-body .admin-nav-loc-add-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 2px;
  padding: 10px 8px 8px;
  background: rgba(243, 138, 63, 0.06);
  border: 1px dashed rgba(243, 138, 63, 0.38);
  border-radius: 12px;
}
.admin-body .admin-nav-loc-add-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 6px;
}
.admin-body .admin-nav-loc-add-eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-orange);
  margin: 0;
}
.admin-body .admin-nav-loc-add-hint {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--sw-muted);
  margin: 0;
}
.admin-body .admin-nav-loc-add-source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sw-border);
  background: #ffffff;
  border-radius: 10px;
  font-size: 0.86rem;
  color: var(--sw-ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.admin-body .admin-nav-loc-add-source:hover {
  background: #fff8ef;
  border-color: rgba(243, 138, 63, 0.55);
}
.admin-body .admin-nav-loc-add-source:active {
  transform: translateY(1px);
}
.admin-body .admin-nav-loc-add-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(243, 138, 63, 0.14);
  color: var(--sw-orange);
  flex: 0 0 26px;
}
.admin-body .admin-nav-loc-add-source-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-body .admin-nav-loc-add-source-verb {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
.admin-body .admin-nav-loc-add-source-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sw-ink-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-body .admin-nav-loc-add-source-default {
  font-weight: 500;
  color: var(--sw-muted);
}
.admin-body .admin-nav-loc-add-source-arrow {
  color: var(--sw-muted);
  font-size: 0.95rem;
  font-weight: 600;
  flex: 0 0 auto;
  transition: transform 0.12s ease, color 0.12s ease;
}
.admin-body .admin-nav-loc-add-source:hover .admin-nav-loc-add-source-arrow {
  color: var(--sw-orange);
  transform: translateX(2px);
}

/* ─── Scope banner ─────────────────────────────────────────────
   Sits at the top of every section, above the section heading.
   Declares which scope a page belongs to so admins always know
   what a Save will affect.

   Variants:
     --overview  → workspace-level neutral
     --global    → applies to ALL locations (calm blue)
     --location  → applies to ONE location (vivid orange)
     --locations → hub view (neutral inset) */
.bento-scope-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--sw-radius-pill);
  margin: 2px 0 18px;
  font-family: 'Inter', system-ui, sans-serif;
  border: 1px solid var(--sw-border);
  background: var(--sw-card);
}
.bento-scope-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--sw-radius-pill);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.bento-scope-banner-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sw-ink-deep);
  letter-spacing: -0.005em;
}
.bento-scope-banner-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --overview: neutral ink */
.bento-scope-banner--overview .bento-scope-banner-chip {
  background: var(--sw-inset);
  color: var(--sw-ink);
}

/* --global: calm blue. Per the philosophy doc, light blue is the
   "support" / informational accent — perfect for "this applies
   everywhere" since it's calm and unambiguous. */
.bento-scope-banner--global {
  background: rgba(191, 224, 243, 0.20);
  border-color: rgba(31, 90, 134, 0.18);
}
.bento-scope-banner--global .bento-scope-banner-chip {
  background: rgba(191, 224, 243, 0.85);
  color: #1F5A86;
}

/* --location: vivid orange. The active-scope highlight — admins
   should immediately register "this is for ONE location, not all
   of them." Same orange treatment as the active sidebar location. */
.bento-scope-banner--location {
  background: rgba(243, 138, 63, 0.10);
  border-color: rgba(243, 138, 63, 0.28);
}
.bento-scope-banner--location .bento-scope-banner-chip {
  background: var(--sw-orange);
  color: #fff;
}

/* --locations: neutral inset, used for the hub view that lets
   admins jump into any specific location. */
.bento-scope-banner--locations {
  background: var(--sw-inset);
}
.bento-scope-banner--locations .bento-scope-banner-chip {
  background: var(--sw-card);
  color: var(--sw-ink);
  border: 1px solid var(--sw-border);
}

/* ─── All Locations status table ───────────────────────────────
   Each row reports one location's wiring at a glance. The header
   row pins the column labels; data rows have hover state +
   Switch button on the right. */
.all-locations-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.all-locations-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sw-inset);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.all-locations-row:hover:not(.all-locations-row--head) {
  background: var(--sw-card-lift);
  border-color: var(--sw-muted);
}
.all-locations-row--head {
  background: transparent;
  border: 0;
  padding: 0 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
.all-locations-row.is-current {
  border-color: var(--sw-orange);
  background: rgba(243, 138, 63, 0.06);
}
.all-locations-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.all-locations-cell--name { font-weight: 600; color: var(--sw-ink); }
.all-locations-cell--action { justify-content: flex-end; }
.all-locations-loc-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.all-locations-loc-name strong {
  color: var(--sw-ink-deep);
  font-size: 0.95rem;
}
.all-locations-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sw-ink-deep);
  font-variant-numeric: tabular-nums;
}
.all-locations-unit {
  font-size: 0.82rem;
  color: var(--sw-muted);
}
.all-locations-unit.muted { color: var(--sw-muted); }

/* Inline action group for the Action cell: Switch button + small
   trash button side by side. Hides the trash for default + current
   rows (controlled by the template, not CSS — but the group still
   handles when only one button is present). */
.all-locations-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
/* Icon-only delete button. Smaller and more reserved than the
   header's "Delete location" button — it's a per-row utility for
   cleaning up duplicates, not a primary destructive action. */
.bento-btn--danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(214, 95, 79, 0.32);
  background: transparent;
  color: var(--sw-coral);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bento-btn--danger-outline:hover {
  background: var(--sw-coral-wash);
  border-color: var(--sw-coral);
  color: var(--sw-coral);
}
.bento-btn--danger-outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(214, 95, 79, 0.22);
}
/* Confirm host slot inserted between rows when a trash is clicked.
   Renders the .inline-confirm dialog full-width across the table
   so the admin sees + acknowledges it before the delete fires. */
.all-locations-row-confirm-host {
  padding: 0 14px;
}
.all-locations-row-confirm-host .inline-confirm {
  margin: 4px 0 8px;
}

@media (max-width: 920px) {
  .all-locations-row { grid-template-columns: 1fr; }
  .all-locations-row--head { display: none; }
  .all-locations-cell { width: 100%; }
  .all-locations-cell::before {
    content: attr(data-label);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sw-muted);
    margin-right: 8px;
  }
  .all-locations-cell--action { justify-content: flex-start; }
  .all-locations-action-group { justify-content: flex-start; }
}

/* ─── Save bar v3 (scope-explicit) ─────────────────────────────
   Each save bar declares its scope inline with a chip + plain-English
   description of what a Save will affect. Two variants:
     --global   → blue chip, "applies to all N locations"
     --location → orange chip, "Save <Name> only"
   The chip uses the same scope-banner-chip element from the page
   header so the visual association is direct. */
.admin-body .bento-save-bar {
  background: var(--sw-card);
  border-top: 1px solid var(--sw-border);
  box-shadow: 0 -8px 24px var(--sw-shadow);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.admin-body .bento-save-bar .save-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--sw-ink);
}
.admin-body .bento-save-bar-text { line-height: 1.4; }
.admin-body .bento-save-bar-text strong { color: var(--sw-ink-deep); }
.admin-body .bento-save-bar--global {
  border-top-color: rgba(31, 90, 134, 0.28);
  box-shadow: 0 -8px 24px rgba(31, 90, 134, 0.08);
}
.admin-body .bento-save-bar--location {
  border-top-color: rgba(243, 138, 63, 0.32);
  box-shadow: 0 -8px 24px rgba(243, 138, 63, 0.10);
}

/* ─── Drop-off funnel: Step 5 (Booked outcome) ──────────────────
   The conversion endpoint. Green-tinted to read as the success
   counterpart to the abandoned-only steps above. The bar shows
   marketing-attribution rate (what % of bookings told us where
   they found us), not a funnel-narrowing share, so the visual
   meaning is "how much insight do we have into successful
   conversions" rather than "how many people got this far." */
.dropoff-row--booked {
  border-color: rgba(75, 170, 120, 0.35);
  background: rgba(75, 170, 120, 0.06);
}
.dropoff-row--booked .dropoff-step-num {
  background: rgba(75, 170, 120, 0.18);
  color: #2F7A52;
}
.dropoff-bar--success {
  background: rgba(75, 170, 120, 0.12);
}
.dropoff-bar-fill--success {
  background: linear-gradient(90deg, var(--sw-green, #4BAA78) 0%, #2F7A52 100%);
}
.dropoff-here--success {
  /* Override the red-tinted abandoned-style pill color since this
     row reports a positive metric, not a drop-off. */
  color: #2F7A52;
}
.dropoff-here-pill--success {
  background: rgba(75, 170, 120, 0.16);
  color: #2F7A52;
}
.dropoff-action-chip--source {
  /* Source chips on the Booked row read as positive markers
     (an attributed booking is good) — switch to green skin so
     they don't look like the abandoned-style action chips. */
  background: rgba(75, 170, 120, 0.08);
  border-color: rgba(75, 170, 120, 0.32);
  color: #2F7A52;
  font-weight: 600;
}
.dropoff-action-chip--source .dropoff-action-count {
  background: rgba(75, 170, 120, 0.20);
  color: #2F7A52;
}
.dropoff-empty-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   Admin portal bento polish
   Final overrides for the scope-aware sidebar and the remaining
   legacy admin pages. Visual-only: no form names, IDs, or route
   contracts change.
   ═══════════════════════════════════════════════════════════════ */

.admin-body .admin-tabs { display: none; }

.admin-body .admin-shell {
  grid-template-columns: minmax(248px, 268px) minmax(0, 1fr);
  max-width: 1320px;
}

.admin-body .admin-nav.admin-nav-v3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  /* Override the base .admin-nav rule's position:sticky + height:100vh +
     overflow-y:auto. The v3 sidebar now scrolls with the page rather
     than pinning to the viewport; admins on a tall page can scroll past
     it. Internal-scroll scrollbar styling below is kept as a no-op
     fallback in case `overflow` ever gets reintroduced. */
  position: static;
  top: auto;
  height: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(112, 122, 142, 0.32) transparent;
}

.admin-body .admin-nav.admin-nav-v3::-webkit-scrollbar {
  width: 8px;
}

.admin-body .admin-nav.admin-nav-v3::-webkit-scrollbar-track {
  background: transparent;
  margin: 14px 0;
}

.admin-body .admin-nav.admin-nav-v3::-webkit-scrollbar-thumb {
  background: rgba(112, 122, 142, 0.24);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.admin-body .admin-nav.admin-nav-v3:hover::-webkit-scrollbar-thumb {
  background: rgba(112, 122, 142, 0.42);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.admin-body .admin-nav-v3 .admin-nav-group {
  min-width: 0;
}

.admin-body .admin-nav-v3 .admin-nav-item,
.admin-body .admin-nav-v3 .admin-nav-loc-switch,
.admin-body .admin-nav-v3 .admin-nav-loc-add {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  gap: 10px;
  line-height: 1.2;
  text-align: left;
}

.admin-body .admin-nav-v3 .admin-nav-item > span:not(.admin-nav-icon):not(.admin-nav-loc-bullet):not(.bento-pill):not(.admin-nav-loc-current-dot),
.admin-body .admin-nav-v3 .admin-nav-loc-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .admin-nav-v3 .admin-nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.admin-body .admin-nav-v3 .admin-nav-icon svg {
  width: 18px;
  height: 18px;
}

.admin-body .admin-nav-count {
  margin-left: auto;
  font-size: 0.62rem;
  padding: 2px 8px;
  flex-shrink: 0;
}

.admin-body .admin-nav-default-pill {
  margin-left: auto;
  font-size: 0.6rem;
  padding: 2px 7px;
  flex-shrink: 0;
}

.admin-body .admin-nav-loc-add-panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.admin-body .admin-nav-loc-add-source {
  min-height: 34px;
  width: 100%;
}

.admin-body .section-page {
  min-width: 0;
}

.admin-body .section-head.v2 {
  display: block;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 0 24px;
}

.admin-body .section-head.v2 .section-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--sw-ink-deep);
  line-height: 1.05;
}

.admin-body .section-head.v2 .section-sub {
  color: var(--sw-muted);
  max-width: 64ch;
}

.admin-body .section-head.v2 .crumb,
.admin-body .section-head.v2 .crumb a {
  color: var(--sw-muted);
}

.admin-body .bento-scope-banner {
  display: none;
}

.admin-body .alert {
  border-radius: 18px;
  border-color: rgba(214, 95, 79, 0.28);
  background: var(--sw-coral-wash);
  color: var(--sw-ink);
  box-shadow: 0 8px 24px var(--sw-shadow);
}

.admin-body .stat-grid {
  gap: 18px;
  margin-bottom: 18px;
}

.admin-body .stat-tile,
.admin-body .quickstart,
.admin-body .card2 {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-card);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset,
              0 8px 24px var(--sw-shadow);
}

.admin-body .stat-tile {
  padding: 22px;
}

.admin-body .stat-tile-icon {
  border-radius: 14px;
  background: var(--sw-orange-soft);
  color: var(--sw-orange-dark);
}

.admin-body .stat-tile.is-ok .stat-tile-icon {
  background: rgba(75, 170, 120, 0.16);
  color: #2F7A52;
}

.admin-body .stat-tile.is-warn .stat-tile-icon {
  background: rgba(211, 154, 46, 0.16);
  color: #8C6213;
}

.admin-body .stat-tile-value,
.admin-body .quickstart-head h3,
.admin-body .card2-header h3 {
  color: var(--sw-ink-deep);
}

.admin-body .stat-tile-label,
.admin-body .quickstart-head p,
.admin-body .quickstart-detail,
.admin-body .card2-header p,
.admin-body .card2-row-label p {
  color: var(--sw-muted);
}

.admin-body .quickstart {
  padding: 0;
  overflow: hidden;
}

.admin-body .quickstart-head {
  padding: 22px 26px 10px;
}

.admin-body .quickstart-progress {
  background: var(--sw-inset);
}

.admin-body .quickstart-progress-fill {
  background: linear-gradient(90deg, var(--sw-orange), var(--sw-orange-dark));
}

.admin-body .quickstart-item {
  padding: 14px 26px;
  border-top-color: var(--sw-border);
}

.admin-body .quickstart-check {
  border-color: var(--sw-border);
}

.admin-body .quickstart-item.is-done .quickstart-check {
  background: var(--sw-green);
  border-color: var(--sw-green);
}

.admin-body .quickstart-cta,
.admin-body .card2 a:not(.btn):not(.bento-btn) {
  color: var(--sw-orange-dark);
}

.admin-body .quickstart-cta {
  border-radius: var(--sw-radius-pill);
}

.admin-body .quickstart-cta:hover {
  background: var(--sw-orange-soft);
}

.admin-body .health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-body .health-item,
.admin-body .health-collapsed-summary {
  border-radius: 16px;
  border-color: var(--sw-border);
  background: var(--sw-card);
}

.admin-body .health-collapsed {
  margin-top: 10px;
}

.admin-body .card2 {
  margin-bottom: 18px;
  overflow: hidden;
}

.admin-body .card2-header {
  padding: 24px 28px 8px;
  gap: 16px;
}

.admin-body .card2-header-meta {
  align-self: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-body .card2-body {
  padding: 16px 28px 26px;
}

.admin-body .card2-row {
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 28px;
  border-top-color: var(--sw-border);
}

.admin-body .card2-row-label strong,
.admin-body .toggle-block-text strong,
.admin-body .service-row-name,
.admin-body .activity-row-main strong {
  color: var(--sw-ink-deep);
}

.admin-body .card2-row-control input[type="text"],
.admin-body .card2-row-control input[type="password"],
.admin-body .card2-row-control input[type="email"],
.admin-body .card2-row-control input[type="number"],
.admin-body .card2-row-control textarea,
.admin-body .card2 input[type="text"],
.admin-body .card2 input[type="password"],
.admin-body .card2 input[type="email"],
.admin-body .card2 input[type="number"],
.admin-body .card2 input[type="search"],
.admin-body .card2 textarea,
.admin-body .bento-card input[type="password"],
.admin-body .audit-control-grid input {
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-input);
  color: var(--sw-ink);
}

.admin-body .card2-row-control input:focus,
.admin-body .card2-row-control textarea:focus,
.admin-body .card2 input:focus,
.admin-body .card2 textarea:focus,
.admin-body .bento-card input[type="password"]:focus,
.admin-body .audit-control-grid input:focus {
  outline: none;
  border-color: var(--sw-orange);
  background: var(--sw-card);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}

.admin-body .admin-content .btn,
.probe-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--sw-radius-pill);
  border: 1px solid var(--sw-border);
  background: var(--sw-card-lift);
  color: var(--sw-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.admin-body .admin-content .btn:hover,
.probe-body .btn:hover {
  background: var(--sw-inset);
  border-color: var(--sw-muted);
  color: var(--sw-ink);
  text-decoration: none;
}

.admin-body .admin-content .btn-primary,
.probe-body .btn-primary {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
}

.admin-body .admin-content .btn-primary:hover,
.probe-body .btn-primary:hover {
  background: var(--sw-orange-dark);
  border-color: var(--sw-orange-dark);
  color: #fff;
}

.admin-body .admin-content .btn-link,
.probe-body .btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--sw-orange-dark);
  padding-left: 0;
  padding-right: 0;
}

.admin-body .admin-content .btn-sm,
.probe-body .btn-sm {
  padding: 8px 12px;
  font-size: 0.82rem;
}

.admin-body .admin-content .btn.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  flex: 0 0 36px;
}

.admin-body .admin-content .btn.btn-icon svg {
  width: 18px;
  height: 18px;
}

.admin-body .copy-row {
  padding: 12px;
  border-color: var(--sw-border);
  border-radius: 18px;
  background: var(--sw-inset);
}

.admin-body .copy-row code {
  color: var(--sw-ink);
}

.admin-body .copy-btn {
  border-radius: var(--sw-radius-pill);
  border-color: var(--sw-border);
  background: var(--sw-card-lift);
  color: var(--sw-ink);
}

.admin-body .copy-btn:hover {
  background: var(--sw-orange-soft);
  color: var(--sw-orange-dark);
  border-color: rgba(243, 138, 63, 0.45);
}

.admin-body .copy-btn.is-copied {
  background: var(--sw-green);
  border-color: var(--sw-green);
}

.admin-body .disclosure {
  border-top-color: var(--sw-border);
}

.admin-body .toggle-block {
  background: var(--sw-card);
  border-color: var(--sw-border);
  border-radius: 18px;
  box-shadow: 0 8px 24px var(--sw-shadow);
}

.admin-body .toggle-block-text p {
  color: var(--sw-muted);
}

.admin-body .search-bar input {
  background-color: var(--sw-card-lift);
  border-color: var(--sw-border);
  border-radius: var(--sw-radius-pill);
}

.admin-body .service-row {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  border-radius: 18px;
  padding: 16px;
}

.admin-body .services-custom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.admin-body .services-custom-head h4 {
  margin: 0;
  font-size: 0.94rem;
  color: var(--sw-ink-deep);
}

.admin-body .services-custom-head p {
  margin: 3px 0 0;
  color: var(--sw-muted);
  font-size: 0.86rem;
}

.admin-body .services-order-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: var(--sw-radius-pill);
  border: 1px solid rgba(75, 170, 120, 0.25);
  background: rgba(75, 170, 120, 0.12);
  color: #2f7a52;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-body .services-order-status[hidden] {
  display: none !important;
}

.admin-body .services-order-status.is-saving {
  border-color: rgba(31, 90, 134, 0.2);
  background: rgba(191, 224, 243, 0.45);
  color: #1f5a86;
}

.admin-body .services-order-status.is-error {
  border-color: rgba(214, 95, 79, 0.28);
  background: var(--sw-coral-wash);
  color: var(--sw-coral);
}

.admin-body .services-custom-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-body .service-row--custom {
  margin-bottom: 0;
  background: var(--sw-card);
  border-color: rgba(39, 41, 54, 0.1);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(39, 41, 54, 0.06);
}

.admin-body .service-row--custom .cs-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-body .service-row--custom .service-row-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.admin-body .service-row--custom .cs-drag-handle {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--sw-border);
  background: var(--sw-card-lift);
}

.admin-body .service-row--custom .cs-drag-handle:hover {
  background: var(--sw-inset);
  border-color: var(--sw-muted);
}

.admin-body .cs-order-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: var(--sw-inset);
  color: var(--sw-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-body .service-row--custom .service-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.admin-body .service-row--custom .cs-saved-pip {
  grid-column: 3 / -1;
  justify-self: start;
  margin-left: 0;
}

.admin-body .service-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-body #cs-list .bento-btn--compact {
  padding: 8px 14px;
  font-size: 0.82rem;
}

.admin-body #cs-list .bento-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
}

.admin-body #cs-list .bento-btn--icon svg {
  width: 17px;
  height: 17px;
}

.admin-body .service-row--custom .service-row-grid {
  grid-template-columns: minmax(220px, 0.75fr) minmax(300px, 1.25fr);
  gap: 14px;
}

.admin-body .service-row--custom .service-desc-label {
  grid-column: auto;
}

.admin-body .service-row--custom .service-desc-textarea {
  min-height: 112px;
}

.admin-body .service-row.is-hidden {
  background: rgba(243, 239, 231, 0.65);
}

.admin-body .service-row-grid input,
.admin-body .service-row-grid textarea,
.admin-body .tag-editor {
  background: var(--sw-card-lift);
  border-color: var(--sw-border);
  border-radius: var(--sw-radius-input);
}

.admin-body .service-row-grid input:focus,
.admin-body .service-row-grid textarea:focus,
.admin-body .tag-editor:focus-within {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 4px rgba(243, 138, 63, 0.14);
}

.admin-body .services-divider,
.admin-body .services-add-disclosure {
  border-color: var(--sw-border);
}

.admin-body .services-empty,
.admin-body .empty2 {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  border-radius: 18px;
}

@media (max-width: 760px) {
  .admin-body .services-custom-head {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-body .services-order-status {
    width: max-content;
  }

  .admin-body .service-row--custom .service-row-head {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .admin-body .service-row--custom .service-source-custom {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .admin-body .service-row--custom .service-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .admin-body .service-row--custom .service-row-grid {
    grid-template-columns: 1fr;
  }

  .admin-body .service-row--custom .service-desc-label {
    grid-column: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Service categories — compact collapse-by-default rows
   Each service is a one-line row; the name-override + Common-issues
   editor is hidden until the row's hidden checkbox (.svc-expand) is
   checked via its chevron label. No <details> (it would steal the
   drag-handle / ios-switch / Save clicks) and no new JS.
   ═══════════════════════════════════════════════════════════════════ */

/* Tight one-line rows. The custom head is display:grid (5 fixed cols) in
   the legacy bento rules; the compact row adds a pill, a preview, and a
   chevron, so force BOTH heads to flex and let them lay out in source order. */
.admin-body #service-list .service-row,
.admin-body #cs-list .service-row--custom { padding: 8px 12px; }
.admin-body #service-list .service-row .service-row-head,
.admin-body #cs-list .service-row--custom .service-row-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 0;
  min-height: 40px;
}

/* HCP rows render as a flat hairline roster, not a card per row. */
.admin-body #service-list { display: flex; flex-direction: column; }
.admin-body #service-list .service-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sw-border);
  border-radius: 0;
  margin: 0;
}
.admin-body #service-list .service-row:last-of-type { border-bottom: 0; }

/* Name sizes to content (with a ceiling); the preview fills the rest. */
.admin-body #service-list .service-row-name,
.admin-body #cs-list .service-row--custom .service-row-name {
  flex: 0 1 auto;
  max-width: 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collapse-by-default: hide the editor grid until the row is expanded. */
.admin-body #service-list .service-row .service-row-grid,
.admin-body #cs-list .service-row--custom .service-row-grid { display: none; }
.admin-body #service-list .service-row > .svc-expand:checked ~ .service-row-grid { display: grid; margin-top: 12px; }
.admin-body #cs-list .service-row--custom > .svc-expand:checked ~ form .service-row-grid { display: grid; margin-top: 12px; }

/* One-line "common issues" preview — trailing muted hint. */
.admin-body .svc-row__preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--sw-muted);
  font-size: 0.82rem;
}
@media (max-width: 760px) { .admin-body .svc-row__preview { display: none; } }

/* Expand chevron (the label that flips the hidden checkbox). */
.admin-body .svc-row__expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--sw-muted);
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.admin-body .svc-row__expand::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s;
}
.admin-body .svc-row__expand:hover { background: var(--sw-inset); color: var(--sw-ink); }
.admin-body #service-list .service-row > .svc-expand:checked ~ .service-row-head .svc-row__expand::before,
.admin-body #cs-list .service-row--custom > .svc-expand:checked ~ form .service-row-head .svc-row__expand::before { transform: rotate(-135deg); }

/* Visible/Hidden pill pair — driven by .is-hidden (the toggle flips it). */
.admin-body .service-row--hcp .svc-vis-hidden { display: none; }
.admin-body .service-row--hcp.is-hidden .svc-vis-visible { display: none; }
.admin-body .service-row--hcp.is-hidden .svc-vis-hidden { display: inline-flex; }

/* Search field + HCP empty state. */
.admin-body .svc-search-wrap { margin: 0 0 12px; }
.admin-body #service-search { width: 100%; }
.admin-body .svc-empty-state {
  padding: 18px;
  text-align: center;
  color: var(--sw-muted);
  background: var(--sw-inset);
  border: 1px dashed var(--sw-border);
  border-radius: 16px;
  font-size: 0.9rem;
}

.admin-body .tag-editor-tag {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  color: var(--sw-ink);
}

.admin-body .tag-editor-remove:hover,
.admin-body .tag-editor-remove:focus-visible {
  background: var(--sw-orange-soft);
  color: var(--sw-orange-dark);
}

.admin-body .attribution-row,
.admin-body .attribution-loc-row {
  border-color: var(--sw-border);
}

.admin-body .attribution-bar {
  background: var(--sw-inset);
}

.admin-body .attribution-bar-fill {
  background: linear-gradient(90deg, var(--sw-orange), var(--sw-orange-dark));
}

/* ─── Per-location performance table (Marketing tab) ──────────────
   One row per configured location with sessions, conversion %,
   abandonment %, per-step drop counts, and top lead source. Powered
   by perLocationStats from the dashboard route handler. Drill-down:
   clicking a non-current location's name switches dashboards via
   ?location=. */
.per-loc-table-wrap {
  overflow-x: auto;
  margin: 0 -8px;
}
.per-loc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}
.per-loc-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sw-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--sw-border);
  background: transparent;
  vertical-align: bottom;
  white-space: nowrap;
}
.per-loc-table thead .per-loc-th-group {
  text-align: center;
  border-left: 1px solid var(--sw-border);
  border-right: 1px solid var(--sw-border);
}
.per-loc-subhead th {
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--sw-muted);
  padding: 4px 6px !important;
  text-transform: none !important;
}
.per-loc-subhead th span {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--sw-muted);
  opacity: 0.75;
  letter-spacing: 0.04em;
  white-space: normal;
  max-width: 90px;
  margin-top: 2px;
  line-height: 1.15;
}
.per-loc-row td {
  padding: 12px;
  border-bottom: 1px solid var(--sw-border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  color: var(--sw-ink);
}
.per-loc-row:last-child td { border-bottom: 0; }
.per-loc-row.is-selected td { background: rgba(243, 138, 63, 0.05); }
.per-loc-name { font-weight: 500; }
.per-loc-name a {
  color: var(--sw-ink-deep, #373B4D);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
}
.per-loc-name a:hover { border-bottom-color: var(--sw-orange); }
.per-loc-here-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(243, 138, 63, 0.15);
  color: var(--sw-orange-dark, #B86012);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.per-loc-num,
.per-loc-step,
.per-loc-source {
  text-align: center;
}
.per-loc-source { text-align: left; }
.per-loc-num strong,
.per-loc-step strong,
.per-loc-source strong {
  font-weight: 700;
  color: var(--sw-ink-deep, #373B4D);
}
.per-loc-pct {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.78rem;
  color: var(--sw-muted);
}
.per-loc-step.is-worst {
  background: rgba(243, 138, 63, 0.10);
  border-radius: 6px;
}
.per-loc-step.is-worst strong { color: var(--sw-orange-dark, #B86012); }
.per-loc-step.is-zero { color: var(--sw-muted); }
.per-loc-foot { margin: 12px 0 0; font-size: 0.78rem; }

/* ─── Empty-slot capacity report (Marketing tab) ──────────────────
   Per-location measurement of unbooked tech-slots. Pickers up top,
   KPI tiles for the headline numbers, then per-tech bars and a
   per-day bar strip. Lazy-loaded one month at a time. */
.empty-slots-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.empty-slots-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sw-muted);
  margin-bottom: 6px;
}
.empty-slots-loc {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}
.empty-slots-loc select {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--sw-ink);
}
.empty-slots-months-wrap { flex: 1; min-width: 280px; }
.empty-slots-months {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.empty-slots-month-btn {
  appearance: none;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--sw-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.empty-slots-month-btn:hover {
  border-color: var(--sw-orange);
  background: #FFFDF9;
}
.empty-slots-month-btn.is-active {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff;
  font-weight: 700;
}
.empty-slots-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 6px 0 12px;
}
.empty-slots-kpi {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  padding: 14px 16px;
}
.empty-slots-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: #373B4D;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.empty-slots-kpi-label {
  font-size: 0.74rem;
  color: var(--sw-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.empty-slots-meta { margin: 4px 0 16px; font-size: 0.84rem; }
.empty-slots-section-h {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin: 18px 0 8px;
}
.empty-slots-tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.empty-slots-tech-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr minmax(160px, auto);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.empty-slots-tech-name {
  font-weight: 600;
  color: var(--sw-ink);
  font-size: 0.94rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* "started Apr 17" pill — flagged on techs whose first job in the
   analyzed month wasn't day 1 (new hires, mid-month van starts).
   Soft warm chip so it reads as informational, not alarming. */
.empty-slots-tech-started {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(243, 138, 63, 0.12);
  color: var(--sw-orange-dark, #B86012);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
}
.empty-slots-tech-bar {
  height: 8px;
  background: var(--sw-inset);
  border-radius: 999px;
  overflow: hidden;
}
.empty-slots-tech-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sw-orange), var(--sw-orange-dark));
  border-radius: 999px;
}
.empty-slots-tech-nums {
  font-size: 0.86rem;
  color: var(--sw-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.empty-slots-tech-nums strong { color: #373B4D; font-weight: 700; }
.empty-slots-day-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  gap: 4px;
}
.empty-slots-day {
  position: relative;
  height: 72px;
  background: var(--sw-inset);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.empty-slots-day.is-closed { opacity: 0.4; }
.empty-slots-day-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, var(--sw-orange), var(--sw-orange-dark));
  opacity: 0.85;
}
.empty-slots-day-num {
  position: relative;
  z-index: 1;
  font-size: 0.66rem;
  color: var(--sw-muted);
  font-weight: 600;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
  .empty-slots-tech-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .empty-slots-tech-nums { text-align: left; }
}

.admin-body .all-locations-table {
  min-width: 0;
}

.admin-body .all-locations-row {
  border-radius: 18px;
}

.admin-body .all-locations-cell--action .bento-btn {
  max-width: 100%;
  white-space: nowrap;
}

.admin-body .bento-card-head,
.admin-body .card2-header,
.admin-body .activity-row,
.admin-body .dropoff-row-head {
  min-width: 0;
}

.admin-body .bento-card-title-row > div,
.admin-body .card2-header > div:first-child {
  min-width: 0;
}

.admin-body .bento-card-title,
.admin-body .card2-header h3 {
  overflow-wrap: anywhere;
}

.admin-body .activity-filter {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  max-width: 100%;
  overflow-x: auto;
}

.admin-body .activity-filter-btn {
  color: var(--sw-muted);
  white-space: nowrap;
}

.admin-body .activity-filter-btn.is-active {
  background: var(--sw-card);
  color: var(--sw-ink-deep);
}

.admin-body .activity-item {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  border-radius: 18px;
  box-shadow: none;
}

.admin-body .activity-summary-row,
.admin-body .activity-decision,
.admin-body .activity-details {
  border-color: var(--sw-border);
}

.admin-body .dropoff-card {
  margin-bottom: 18px;
}

.admin-body .dropoff-row {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  border-radius: 18px;
}

.admin-body .audit-control-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.7fr) auto;
  gap: 14px;
  align-items: end;
}

.admin-body .audit-run-btn {
  min-height: 48px;
  white-space: nowrap;
}

.admin-body .bento-status-line {
  min-height: 18px;
  margin: -4px 0 0;
  color: var(--sw-muted);
}

.admin-body .audit-result-wrap {
  margin-top: 18px;
}

.admin-body .audit-summary,
.admin-body .audit-day {
  background: var(--sw-card);
  border-color: var(--sw-border);
  border-radius: 20px;
  box-shadow: 0 8px 24px var(--sw-shadow);
}

.admin-body .audit-slot {
  background: var(--sw-inset);
  border-color: var(--sw-border);
  border-radius: 16px;
}

.admin-body .audit-slot.is-empty {
  background: var(--sw-coral-wash);
  border-color: rgba(214, 95, 79, 0.28);
}

.admin-body .audit-count-free,
.admin-body .audit-stat-full {
  background: rgba(75, 170, 120, 0.16);
  color: #2F7A52;
}

.admin-body .audit-count-busy,
.admin-body .audit-stat-closed {
  background: var(--sw-inset);
  color: var(--sw-muted);
  border-color: var(--sw-border);
}

.admin-body .audit-stat-partial {
  background: rgba(211, 154, 46, 0.16);
  color: #8C6213;
}

.admin-body .audit-stat-empty {
  background: var(--sw-coral-wash);
  color: var(--sw-coral);
}

.admin-body .account-card {
  grid-column: span 8;
}

.admin-body .account-field-grid {
  display: grid;
  gap: 16px;
}

.admin-body .account-field-help {
  display: block;
  margin-top: 6px;
}

.admin-body .probe-page .btn,
.probe-body .probe-actions .btn {
  min-height: 38px;
}

@media (max-width: 920px) {
  .admin-body .admin-shell {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .admin-body .admin-nav.admin-nav-v3 {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    flex-direction: column;
    border-right: 1px solid var(--sw-border);
    border-bottom: 1px solid var(--sw-border);
  }

  .admin-body .admin-nav-v3 .admin-nav-group {
    flex-direction: column;
  }

  .admin-body .admin-nav-v3 .admin-nav-eyebrow {
    display: block;
  }

  .admin-body .card2-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .admin-body .card2-header-meta {
    justify-content: flex-start;
  }

  .admin-body .all-locations-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .admin-body .all-locations-cell {
    justify-content: space-between;
    gap: 12px;
  }

  .admin-body .all-locations-cell::before {
    flex: 0 0 auto;
  }

  .admin-body .all-locations-cell--name {
    justify-content: flex-start;
  }

  .admin-body .all-locations-cell--name::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .admin-body .admin-shell {
    padding: 14px;
  }

  .admin-body .admin-content {
    padding-bottom: 96px;
  }

  .admin-body .card2-header,
  .admin-body .card2-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .admin-body .bento-card-head,
  .admin-body .card2-header {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-body .audit-control-grid {
    grid-template-columns: 1fr;
  }

  .admin-body .account-card {
    grid-column: span 12;
  }

  .admin-body .save-bar-label {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .admin-body .stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-body .copy-row,
  .admin-body .bento-link-row {
    align-items: stretch;
  }

  .admin-body .copy-btn,
  .admin-body .bento-link-row .bento-btn {
    width: 100%;
    justify-content: center;
  }

  .admin-body .all-locations-cell {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-body .all-locations-cell--name {
    flex-direction: row;
    align-items: center;
  }
}

/* ═══ Workspace switcher (top-left header pill, HCP-style) ═══
   Compact pill trigger that sits between the brand and the header
   actions. Opens a card dropdown listing the org + every location
   with a search field. Replaces the older sidebar-based location
   picker; the sidebar version is hidden via .admin-nav-group--locations
   { display: none } below so existing wiring (add-location popover
   anchor) stays in place but doesn't render. */
.workspace-switcher {
  position: relative;
  /* Pin the location picker to the LEFT content edge so its left edge lines up
     with the sidebar menu card below (both containers share max-width 1240 +
     24px padding). order:-1 keeps it leftmost even if the brand renders in
     normal flow; margin-right:auto pushes the profile cluster to the right. */
  order: -1;
  margin-left: 0;
  margin-right: auto;
}
.workspace-switcher > summary {
  list-style: none;
  cursor: pointer;
}
.workspace-switcher > summary::-webkit-details-marker { display: none; }
.workspace-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: #FFFFFF;
  border: 1px solid #D8DCE3;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sw-ink, #373B4D);
  font-family: inherit;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  white-space: nowrap;
}
.workspace-switcher-trigger:hover {
  border-color: #9CA3AF;
  background: #F8FAFC;
}
.workspace-switcher[open] > .workspace-switcher-trigger {
  border-color: #4285F4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.18);
}
.workspace-switcher-trigger-caret {
  flex: 0 0 10px;
  color: #6B7280;
  transition: transform 0.18s ease;
}
.workspace-switcher[open] .workspace-switcher-trigger-caret {
  transform: rotate(180deg);
}

/* Panel — white card with shadow, anchored under the trigger. Width
   is fixed-ish so the search field has room without resizing as the
   user types. */
.workspace-switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 340px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 8px;
  animation: workspaceSwitcherIn 0.18s ease-out;
}
@keyframes workspaceSwitcherIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-switcher-panel { animation: none; }
}

/* Rows — uniform layout for org / location / +new. Avatar on the
   left, name in the middle, optional pill (Default / Current) on the
   right. The is-current state gets a soft blue wash; hover gets a
   warm gray. */
.workspace-switcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--sw-ink, #373B4D);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.workspace-switcher-row:hover { background: #F3F4F6; }
.workspace-switcher-row.is-current {
  background: #EFF6FF;
  color: #373B4D;
}
.workspace-switcher-row.is-current:hover { background: #DBEAFE; }
.workspace-switcher-row--org {
  font-weight: 600;
}

.workspace-switcher-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #E5E7EB;
  color: #4B5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.workspace-switcher-row.is-current .workspace-switcher-avatar {
  background: #BFDBFE;
  color: #1E40AF;
}
.workspace-switcher-avatar--add {
  background: transparent;
  border: 1.5px dashed #9CA3AF;
  color: #6B7280;
  font-size: 1.15rem;
  font-weight: 400;
}
.workspace-switcher-row-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-switcher-current-pill,
.workspace-switcher-default-pill {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.workspace-switcher-current-pill {
  background: #DBEAFE;
  color: #1E40AF;
}
.workspace-switcher-default-pill {
  background: #F1ECDC;
  color: #6B6555;
}

/* Search — inline icon + input. No border on the input itself; the
   wrapper carries the visual frame so the icon sits "inside" the
   field naturally. */
.workspace-switcher-search-wrap {
  position: relative;
  margin: 8px 4px 6px;
}
.workspace-switcher-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
}
.workspace-switcher-search {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--sw-ink, #373B4D);
  background: #FFFFFF;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.workspace-switcher-search::placeholder { color: #9CA3AF; }
.workspace-switcher-search:focus {
  outline: none;
  border-color: #4285F4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.18);
}

.workspace-switcher-list {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Locations nest as children of the org ("Super Admin") row above:
     indented a step in, with a thin guide line running down the left
     like a tree branch so the hierarchy reads at a glance. */
  margin: 2px 0 0 18px;
  padding-left: 8px;
  border-left: 1.5px solid #E8E5DC;
}
.workspace-switcher-empty {
  margin: 8px;
  padding: 16px 12px;
  text-align: center;
  color: #9CA3AF;
  font-size: 0.85rem;
}
.workspace-switcher-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 6px 4px;
}

/* Hide the old sidebar-based picker now that the workspace switcher
   in the header is the single source of truth. Keeping the markup in
   place (rather than ripping it out) so the existing add-location
   popover anchor still has its target — the workspace switcher
   delegates the "+ New Location" click to the same trigger. */
.admin-body .admin-nav-group--locations { display: none; }

/* ═══════ Site map (footer trigger + modal) ═══════
   Additive UI: a footer button that opens a modal listing every admin
   destination, including pages the scope filter currently hides. */
.admin-page-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 8px;
  padding: 18px 4px 4px;
  border-top: 1px solid #E8E5DC;
}
.admin-sitemap-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4A44;
  background: #FFFFFF;
  border: 1px solid #DDD9CE;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-sitemap-trigger:hover { background: #F4F2EB; border-color: #C9C4B5; color: #2B2B27; }
.admin-sitemap-trigger-icon { display: inline-flex; color: #8A8675; }
.admin-page-footer-meta { font-size: 12px; color: #9A9685; }

/* Overlay */
.sitemap-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 20px 40px;
  background: rgba(30, 28, 22, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  animation: sitemapFade 0.16s ease;
}
.sitemap-overlay[hidden] { display: none; }
@keyframes sitemapFade { from { opacity: 0; } to { opacity: 1; } }
body.sitemap-open { overflow: hidden; }

.sitemap-dialog {
  width: 100%;
  max-width: 880px;
  background: #FBFAF6;
  border: 1px solid #E2DED2;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(40, 36, 26, 0.28);
  padding: 26px 28px 30px;
  animation: sitemapRise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sitemapRise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sitemap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.sitemap-title { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #26241D; }
.sitemap-sub { margin: 0; font-size: 13px; color: #8A8675; max-width: 52ch; }
.sitemap-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #6B6657;
  background: #FFFFFF;
  border: 1px solid #DDD9CE;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sitemap-close:hover { background: #F0EEE6; color: #26241D; }

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px 28px;
}
.sitemap-group { min-width: 0; }
.sitemap-group-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A29D8B;
}
.sitemap-group-note {
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #BBB6A4;
}
.sitemap-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sitemap-links a,
.sitemap-linklike {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #3A3830;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.13s ease, color 0.13s ease;
}
.sitemap-links a:hover,
.sitemap-linklike:hover { background: #EFEDE4; color: #1F1D17; }
.sitemap-link-bullet {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  color: #7C7864;
  background: #ECEAE0;
  border-radius: 5px;
}
.sitemap-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5C7A52;
  background: #E7F0E2;
  padding: 1px 6px;
  border-radius: 999px;
}
.sitemap-ext { font-size: 12px; color: #A29D8B; }

@media (max-width: 560px) {
  .sitemap-dialog { padding: 20px 18px 24px; }
  .sitemap-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ═══════ Global API Keys tab — API health list ═══════
   Shared row layout for the Google env-key statuses and the per-location
   Housecall Pro health list. Clean two-column rows: label/identity on the
   left, status badge on the right. */
.api-health-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.api-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--sw-border);
}
.api-health-row:last-child { border-bottom: 0; }
.api-health-loc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 600;
  color: var(--sw-ink-deep);
  font-size: 0.95rem;
}
.api-health-loc code {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sw-ink-deep);
  background: #EFECE3;
  padding: 2px 7px;
  border-radius: 6px;
}
/* Key rows stack the env var name over a purpose line. */
.api-health-list--keys .api-health-loc {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.api-health-loc small {
  font-weight: 500;
  color: var(--sw-muted);
  font-size: 0.78rem;
}
.api-health-bullet {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7C7864;
  background: #ECEAE0;
  border-radius: 7px;
}
.api-health-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.api-health-status .btn-link.btn-sm {
  font-size: 0.82rem;
  padding: 2px 4px;
  white-space: nowrap;
}

/* ═══════ Global API Keys — friendly key list ═══════
   Each key leads with a plain-English name; the env-var name is demoted to a
   subtle inline mono chip in the description, and the right side carries one
   clean status pill (no more repeating the key name). */
.gkey-list { list-style: none; margin: 0; padding: 0; }
.gkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-top: 1px solid var(--sw-border);
}
.gkey-row:first-child { border-top: 0; padding-top: 2px; }
.gkey-info { min-width: 0; }
.gkey-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--sw-ink-deep);
}
.gkey-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sw-muted);
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  padding: 2px 6px;
  border-radius: 999px;
}
.gkey-desc {
  display: block;
  margin-top: 4px;
  color: var(--sw-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.gkey-desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  color: var(--sw-ink);
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.gkey-pill { flex: none; white-space: nowrap; }
.gkey-mask {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-left: 6px;
  opacity: 0.65;
  letter-spacing: 0.04em;
}
/* Default view = simple name + status rows only. */
.gkey-row--simple { padding: 12px 2px; }

/* Click-to-reveal technical block (env-var names, masked values, setup). */
.gkey-disclosure { margin-top: 14px; }
.gkey-detail-list { margin: 0; }
.gkey-detail { padding: 10px 0; border-top: 1px solid var(--sw-border); }
.gkey-detail:first-child { border-top: 0; padding-top: 2px; }
.gkey-detail dt { margin: 0 0 4px; }
.gkey-detail dt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sw-ink-deep);
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  padding: 2px 7px;
  border-radius: 6px;
}
.gkey-detail dd { margin: 0; color: var(--sw-muted); font-size: 0.85rem; line-height: 1.45; }
.gkey-detail-off { color: var(--sw-muted); font-style: italic; }
.gkey-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.gkey-guide { margin-top: 18px; }
.gkey-guide-title { margin: 0 0 8px; font-size: 0.92rem; color: var(--sw-ink-deep); }
.gkey-guide p { margin: 0 0 10px; color: var(--sw-muted); font-size: 0.86rem; line-height: 1.55; }
.gkey-guide ol { margin: 0 0 10px 18px; line-height: 1.6; color: var(--sw-ink); font-size: 0.86rem; }
.gkey-guide code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  background: var(--sw-card-lift);
  border: 1px solid var(--sw-border);
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--sw-ink);
}

@media (max-width: 560px) {
  .gkey-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Simple status rows stay on one line (name left, pill right). */
  .gkey-row--simple { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ═══════ Header profile menu (avatar dropdown) ═══════
   Replaces the old plain "Sign out" button. Native <details> toggle; an
   inline script closes it on outside click. */
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  /* No caret anymore — symmetric padding + zero gap keeps the trigger a clean
     circle around the avatar instead of an oblong pill. */
  gap: 0;
  padding: 3px;
  list-style: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--sw-border);
  background: #FFFFFF;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger:hover { border-color: #C9C4B5; background: #F6F4ED; }
.user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sw-ink-deep);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
  flex: none;
}
.user-menu-avatar--lg { width: 40px; height: 40px; font-size: 1rem; }
.user-menu-caret { color: var(--sw-muted); }
.user-menu[open] .user-menu-caret { transform: rotate(180deg); }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1100;
  width: 264px;
  background: #FFFFFF;
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(40, 36, 26, 0.22);
  padding: 8px;
  animation: sitemapRise 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.user-menu-id {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px 10px;
}
.user-menu-id-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-menu-id-text strong {
  font-size: 0.92rem;
  color: var(--sw-ink-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-id-text small {
  font-size: 0.78rem;
  color: var(--sw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-role {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6657;
  background: #EFEDE4;
  padding: 1px 7px;
  border-radius: 999px;
}
.user-menu-divider { height: 1px; background: var(--sw-border); margin: 2px 4px 6px; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sw-ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: background 0.13s ease, color 0.13s ease;
}
.user-menu-item:hover { background: #F3F1E9; color: var(--sw-ink-deep); }
.user-menu-item-icon { display: inline-flex; color: var(--sw-muted); }
.user-menu-item--danger:hover { background: #FBEDE9; color: #B23B2E; }
.user-menu-item--danger:hover .user-menu-item-icon { color: #B23B2E; }

/* ═══════ Account settings section ═══════ */
.account-identity-card { grid-column: 1 / -1; }
.account-card { grid-column: 1 / -1; }
.account-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.account-identity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sw-ink-deep);
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 700;
  flex: none;
}
.account-identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-identity-text strong { font-size: 1.05rem; color: var(--sw-ink-deep); }
.account-identity-text small { font-size: 0.84rem; color: var(--sw-muted); }
.account-identity-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.account-identity-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--sw-muted);
  line-height: 1.5;
}
.account-subhead {
  margin: 20px 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A29D8B;
}
.account-field--wide { grid-column: 1 / -1; }
.account-checks { display: flex; flex-direction: column; gap: 10px; }
.account-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--sw-ink);
  cursor: pointer;
}
.account-check input { width: 16px; height: 16px; flex: none; cursor: pointer; }

/* ════════ Users & Access section (folded into the dashboard) ════════
   Each person is an expandable row; expanding reveals role + technician +
   location editors in one place (replaces the old standalone /admin/users +
   /admin/access pages). Chips are scoped under .user-editor so they don't
   collide with the tag-input .chip component. */
.role-pill {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: #ECE9E0; color: #6B6555; white-space: nowrap;
}
.role-pill--owner          { background: #FBEAD3; color: #B86012; }
.role-pill--admin          { background: #E5EEFB; color: #1F5A86; }
.role-pill--technician     { background: #ECE7FA; color: #5B43B0; }
.role-pill--location_leader{ background: #E7F2EA; color: #2F6B47; }
.role-pill--viewer         { background: #ECE9E0; color: #6B6555; }

.user-list { list-style: none; margin: 0; padding: 0; }
.user-item { border-bottom: 1px solid var(--sw-border, #ECE5D6); }
.user-item:last-child { border-bottom: 0; }

.user-disclosure summary.user-summary {
  display: grid; align-items: center; gap: 14px; cursor: pointer; list-style: none;
  grid-template-columns: minmax(0,1fr) auto minmax(90px,160px) 86px 16px;
  padding: 13px 4px;
}
.user-disclosure summary.user-summary::-webkit-details-marker { display: none; }
.user-disclosure summary.user-summary:hover { background: var(--sw-card-lift, #FBF8F1); }
.user-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.user-name { font-weight: 600; color: var(--sw-ink-deep, #373B4D); font-size: 0.95rem; }
.user-email { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--sw-muted, #8A836F); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { font-size: 0.82rem; color: var(--sw-muted, #8A836F); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta-dim { color: #B5AE9C; font-style: italic; }
.user-meta-login { text-align: right; }
.user-chev { color: #B5AE9C; transition: transform 0.18s ease; display: inline-flex; justify-content: center; }
.user-disclosure[open] > summary .user-chev { transform: rotate(180deg); }

.user-editor {
  padding: 6px 4px 20px; display: grid; gap: 16px;
  grid-template-columns: 1fr; max-width: 720px;
}
.user-field { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.user-field-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sw-muted, #6B6555); padding-top: 6px; }
.user-field-control { min-width: 0; }
.user-inline-form { margin: 0; }
.user-field-control select {
  font: inherit; font-size: 0.86rem; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--sw-border, #DDD3BA); background: #fff; color: var(--sw-ink-deep, #373B4D);
  max-width: 100%;
}
.user-field-note { color: #9A9485; font-size: 0.78rem; margin: 6px 0 0; }
.user-none { color: #9A9485; font-size: 0.82rem; margin: 0 0 8px; }

.user-editor .chip-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.user-editor .chip {
  display: inline-flex; align-items: center; gap: 8px; background: #F5EFE0;
  border: 1px solid #E7DFC9; border-radius: 8px; padding: 5px 6px 5px 11px;
  font-size: 0.85rem; color: #4A4434; justify-content: flex-start;
}
.user-editor .chip-meta { color: #8A836F; font-size: 0.74rem; }
.user-editor .chip-lvl { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #1F5A86; background: #E5EEFB; border-radius: 999px; padding: 2px 7px; margin-left: 4px; }
.chip-x-form { margin: 0; display: inline-flex; }
.chip-x { font: inherit; line-height: 1; font-size: 1rem; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid #E2BDB3; background: #fff; color: #B14535; cursor: pointer; }
.chip-x:hover { background: #FCEBE7; }

.user-add-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.user-editor-foot { grid-column: 1 / -1; padding-top: 4px; }
.user-remove { color: #B14535; padding: 0; }
.user-remove:hover { text-decoration: underline; }

.user-add-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.user-add-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--sw-muted, #6B6555); }
.user-add-field span { font-weight: 600; }
.user-add-field input, .user-add-field select {
  font: inherit; font-size: 0.9rem; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--sw-border, #DDD3BA); background: #fff; color: var(--sw-ink-deep, #373B4D); min-width: 200px;
}

@media (max-width: 700px) {
  .user-disclosure summary.user-summary { grid-template-columns: minmax(0,1fr) auto 16px; }
  .user-meta-login, .user-summary .user-meta:not(.user-meta-login) { display: none; }
  .user-field { grid-template-columns: 1fr; gap: 6px; }
  .user-field-label { padding-top: 0; }
}

/* ════════ Horizon floating shell rewrite ════════ */
.admin-legacy-header {
  display: none !important;
}

.admin-body {
  color: var(--sw-ink, #373B4D);
  background:
    radial-gradient(980px 640px at 92% -12%, rgba(191,224,243,0.24), transparent 60%),
    radial-gradient(860px 620px at -12% 112%, rgba(243,138,63,0.10), transparent 58%),
    var(--sw-canvas, #F8F5EF);
}

/* ════════════════════════════════════════════════════════════════════
   Phase L0 — single-scroll frame + layout tokens
   See PAGE_LAYOUT_STANDARD.md sections 4 and 7. The whole admin dashboard
   scrolls inside ONE container (.app-scroll) instead of the document, so
   content no longer slides under the fixed top pills. Scoped to
   body.app-framed so the other admin pages that share admin.css / the
   .admin-body class keep normal document scroll.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --page-max: 1320px;
  --page-max-wide: 1600px;
  --page-gutter: clamp(16px, 4vw, 40px);
  --page-col-gap: 24px;
  --rail-w: 200px;
  --rail-pad: 7px;
  --rail-row-gap: 5px;
  --rail-group-gap: 16px;
  --rail-item-radius: 999px; /* style 13: rows are capsules, like the pill */
  --rail-min-h: 40px;
  --rail-indent: 16px;
  --rail-guide: var(--sw-border, #E5DED3);
  --rail-anim: 180ms;
  --rail-ink: var(--sw-ink, #373B4D);
  --rail-ink-strong: var(--sw-ink-deep, #373B4D);
  --rail-muted: var(--sw-muted, #7B8190);
  --rail-active-fill: rgba(255,243,233,0.74);
  --rail-active-bar: rgba(243,138,63,0.90);
  --rail-badge-fill: var(--sw-inset, #F3EFE7);

  --chrome-top: 54px;     /* clears the fixed location pill (top 12 + 36 tall = 48; +6px room).
                             The top-center search pill moved into the dock, so the
                             location pill is the only fixed top chrome. */
  --chrome-bottom: 136px; /* clears the bottom dock */
  --sticky-top: 54px;     /* sticky rails clear the fixed chrome. The .app-scroll
                             scrollport top is the viewport, so this offset must
                             include the top pill zone, not a small inset. */
}

/* The document itself never scrolls; .app-scroll owns the only scrollbar. */
html:has(body.app-framed) { height: 100%; overflow: hidden; }
body.app-framed { height: 100%; overflow: hidden; }

.app-scroll {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--chrome-top);
  padding-bottom: var(--chrome-bottom);
  scroll-padding-top: var(--chrome-top);
}

/* Centered max-width container for later phases. .admin-shell currently
   plays this role; scoped under .app-scroll so it never touches the
   class="page" used by other embedded views (e.g. admin-kpi.ejs). */
.app-scroll .page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.app-scroll .page--wide { max-width: var(--page-max-wide); }
.app-scroll .page--full { max-width: none; }

/* Shell becomes the inner container inside .app-scroll. The chrome
   clearance that used to live here (padding 94/136) moved to .app-scroll
   above so the two never double up. */
.admin-body .admin-shell {
  display: block;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 36px);
  min-height: calc(100vh - var(--chrome-top) - var(--chrome-bottom));
}

.admin-body .admin-content {
  padding: 0 !important;
  min-width: 0;
}

/* Section entrance: animate the CONTENT, never the section box itself, so the
   sticky rail inside .horizon-hub-layout stays perfectly still when you click
   between menu items of the same workspace (the rail is byte-identical across
   those pages). Children above the layout (scope banner, page head) fade and
   rise; inside the layout only the MAIN column does. */
.admin-body .section-page {
  animation: none;
}
.admin-body .section-page > * {
  animation: sectionIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-body .section-page > .horizon-hub-layout {
  animation: none;
}
.admin-body .section-page .horizon-hub-layout > .horizon-hub-main {
  animation: sectionIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* (The View Transitions crossfade that lived here was removed 2026-06-09:
   its old-page snapshot replayed stale pill positions on tab switches, and
   deferring activate() let the pill controllers read the wrong active tab.
   The sectionIn content fade above is the whole transition now.) */
@media (prefers-reduced-motion: reduce) {
  .admin-body .section-page > *,
  .admin-body .section-page .horizon-hub-layout > .horizon-hub-main { animation: none; }
}

.horizon-cornerbar,
.horizon-dock {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

/* The location pill caps the rail column: same fluid gutter as the shell,
   same 236px width as the rail card beneath it, and 36px tall so its round
   end caps share the rail's exact 18px corner curvature. Its shadow is a
   close ambient glow — the old 55px throw read as a dead band across the
   whole top of the page. */
.horizon-cornerbar {
  position: fixed;
  top: 12px;
  left: clamp(16px, 2.5vw, 36px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 236px;
  height: 36px;
  padding: 0 6px 0 10px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,254,250,0.68), rgba(252,249,243,0.46));
  box-shadow: 0 10px 26px rgba(55,59,77,0.12), 0 2px 8px rgba(55,59,77,0.05), inset 0 1px 0 rgba(255,255,255,0.72);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
}

/* The switcher fills the pill so the caret parks at the right edge; long
   location names ellipsize instead of stretching the pill. */
.horizon-cornerbar .horizon-workspace { flex: 1; min-width: 0; }
.horizon-cornerbar .horizon-workspace-trigger {
  width: 100%;
  min-width: 0;
  height: 28px;
  justify-content: space-between;
  padding: 0 8px;
}
.horizon-cornerbar .horizon-workspace-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizon-brand {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 0;
  flex: none;
  background: transparent;
  box-shadow: none;
}

.horizon-brand-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: none;
}

.horizon-workspace {
  position: relative;
}

.horizon-workspace-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px;
  list-style: none;
  cursor: pointer;
  border-radius: 12px;
  color: var(--sw-ink, #373B4D);
  font-weight: 780;
  letter-spacing: 0;
}

.horizon-workspace-trigger::-webkit-details-marker,
.horizon-profile-trigger::-webkit-details-marker {
  display: none;
}

.horizon-workspace-trigger:hover {
  background: rgba(255,255,255,0.48);
}

.horizon-workspace[open] .horizon-workspace-trigger svg {
  transform: rotate(180deg);
}

.horizon-workspace-menu,
.horizon-profile-menu {
  position: absolute;
  border: 1px solid rgba(219,211,198,0.88);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,254,250,0.96), rgba(252,250,246,0.91));
  box-shadow: 0 24px 54px rgba(55,59,77,0.19), 0 6px 18px rgba(55,59,77,0.08), inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  padding: 9px;
  min-width: 276px;
}

.horizon-workspace-menu {
  top: calc(100% + 7px);
  left: 0;
  transform: none;
}

.horizon-workspace-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 20px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(219,211,198,0.88);
  border-left: 1px solid rgba(219,211,198,0.88);
  background: rgba(255,254,250,0.96);
}

.horizon-menu-label {
  padding: 8px 12px 6px;
  color: var(--sw-muted, #8A836F);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.horizon-workspace-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--sw-ink, #373B4D);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.horizon-workspace-row:hover,
.horizon-workspace-row.is-current {
  background: rgba(243,239,231,0.9);
}

.horizon-workspace-row.is-current {
  background: var(--sw-orange-soft, #FFF3E9);
}

.horizon-workspace-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex: none;
  background: var(--sw-inset, #F3EFE7);
  color: var(--sw-ink-deep, #373B4D);
  font-weight: 800;
  font-size: 12px;
}

.horizon-workspace-row--org .horizon-workspace-avatar {
  background: linear-gradient(150deg, var(--sw-light-blue, #BFE0F3), #373B4D);
  color: #fff;
}

.horizon-workspace-avatar--add {
  background: var(--sw-orange, #F38A3F);
  color: #fff;
  font-size: 18px;
}

.horizon-workspace-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.horizon-workspace-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--sw-ink, #373B4D);
}

.horizon-workspace-copy small {
  color: var(--sw-muted, #8A836F);
  font-size: 11px;
  font-weight: 600;
}

.horizon-current-pill {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(243,138,63,0.14);
  color: #D9742B;
  font-size: 10px;
  font-weight: 800;
}

.horizon-menu-divider {
  height: 1px;
  margin: 7px 6px;
  background: var(--sw-border, #E5DED3);
}

/* (The fixed top-center search pill was removed 2026-06-10: search now lives
   in the dock as .horizon-dock-search, which opens the same command palette.
   The .horizon-command-kbd chip below survives — the palette's Esc hint uses
   it.) */

.horizon-command-kbd {
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 7px;
  background: rgba(255,255,255,0.52);
  color: #A29D8B;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
}

.horizon-dock {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(880px, calc(100vw - 32px));
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,254,250,0.68), rgba(252,249,243,0.48));
  box-shadow: 0 26px 64px rgba(55,59,77,0.20), 0 6px 18px rgba(55,59,77,0.07), inset 0 1px 0 rgba(255,255,255,0.76);
  backdrop-filter: blur(38px) saturate(200%);
  -webkit-backdrop-filter: blur(38px) saturate(200%);
  transform: translateX(-50%);
}

.horizon-dock-wing {
  display: flex;
  align-items: center;
  flex: none;
}

.horizon-dock-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
}

.horizon-add {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--sw-orange, #F38A3F);
  color: #fff;
  box-shadow: 0 2px 8px rgba(243,138,63,0.20);
  cursor: pointer;
}

.horizon-add span {
  display: block;
  margin-top: -2px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.horizon-add:hover {
  background: #D9742B;
  transform: translateY(-1px);
}

/* Dock search — the command palette's home now that the top-center pill is
   gone. A neutral frosted circle beside the +, so the orange + stays the
   dock's single loud action. */
.horizon-dock-wing { gap: 8px; }

.horizon-dock-search {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
  color: var(--sw-ink, #373B4D);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.horizon-dock-search:hover {
  background: rgba(255,255,255,0.78);
  transform: translateY(-1px);
}

.horizon-dock-search:focus-visible {
  outline: 2px solid var(--sw-orange, #F38A3F);
  outline-offset: 2px;
}

.horizon-tab,
.admin-body .horizon-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sw-muted, #7B8190);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Disabled "Coming Soon" dock item — greyed out, no hover, does not navigate. */
.horizon-tab--soon,
.admin-body .horizon-tab--soon {
  color: var(--sw-muted, #7B8190);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  font-weight: 700;
}
.horizon-tab--soon:hover,
.admin-body .horizon-tab--soon:hover {
  background: transparent;
  color: var(--sw-muted, #7B8190);
}

.horizon-tab:hover,
.admin-body .horizon-tab:hover {
  background: rgba(255,255,255,0.52);
  color: var(--sw-ink, #373B4D);
}

.horizon-tab.is-active,
.admin-body .horizon-tab.is-active {
  background: rgba(255,243,233,0.74);
  color: #C2671F;
  box-shadow: inset 0 0 0 1px rgba(243,138,63,0.28), 0 3px 10px rgba(243,138,63,0.14);
}

.horizon-profile {
  position: relative;
}

.horizon-profile-trigger {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
  background: var(--sw-ink, #373B4D);
  color: #fff;
  box-shadow: 0 2px 6px rgba(55,59,77,0.12);
  font-size: 12px;
  font-weight: 800;
}

.horizon-profile-trigger:hover {
  transform: translateY(-1px);
}

.horizon-profile-menu {
  right: 0;
  bottom: calc(100% + 14px);
  min-width: 242px;
}

.horizon-profile-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 13px;
}

.horizon-profile-head strong,
.horizon-profile-head small {
  display: block;
}

.horizon-profile-head strong {
  color: var(--sw-ink, #373B4D);
  font-size: 13.5px;
  font-weight: 750;
}

.horizon-profile-head small {
  color: var(--sw-muted, #8A836F);
  font-size: 11px;
  font-weight: 650;
  text-transform: capitalize;
}

.horizon-profile-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  background: var(--sw-ink, #373B4D);
  color: #fff;
  font-weight: 800;
}

.horizon-profile-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--sw-ink, #373B4D);
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}

.horizon-profile-item:hover {
  background: var(--sw-inset, #F3EFE7);
}

.horizon-profile-item--danger {
  color: #D65F4F;
}

.horizon-command-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(55,59,77,0.22);
  backdrop-filter: blur(3px);
}

.horizon-command-scrim[hidden],
.horizon-command-palette[hidden] {
  display: none;
}

.horizon-command-palette {
  position: fixed;
  top: 14vh;
  left: 50%;
  z-index: 130;
  width: min(640px, 92vw);
  overflow: hidden;
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 22px;
  background: rgba(252,250,246,0.78);
  box-shadow: 0 30px 80px rgba(55,59,77,0.24);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  transform: translateX(-50%);
}

.horizon-command-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sw-border, #E5DED3);
}

.horizon-command-input-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sw-ink, #373B4D);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
}

.horizon-command-input-row input::placeholder {
  color: #A29D8B;
}

.horizon-command-list {
  max-height: 48vh;
  overflow: auto;
  padding: 8px;
}

.horizon-command-group {
  padding: 10px 14px 5px;
  color: #A29D8B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.horizon-command-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--sw-ink, #373B4D);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.horizon-command-item:hover,
.horizon-command-item.is-selected {
  background: var(--sw-inset, #F3EFE7);
}

.horizon-command-item.is-selected .horizon-command-dot {
  background: var(--sw-orange, #F38A3F);
}

.horizon-command-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sw-light-blue, #BFE0F3);
  flex: none;
}

.horizon-command-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.horizon-command-title {
  min-width: 0;
  overflow: hidden;
  color: var(--sw-ink, #373B4D);
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizon-command-subtitle {
  min-width: 0;
  overflow: hidden;
  color: var(--sw-muted, #8A836F);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizon-command-kind {
  color: #A29D8B;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.horizon-command-empty {
  padding: 26px 18px;
  color: var(--sw-muted, #8A836F);
  text-align: center;
  font-weight: 650;
}

.horizon-command-status {
  margin: 6px 10px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(229, 222, 211, 0.8);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.46);
  color: var(--sw-muted, #8A836F);
  font-size: 11.5px;
  font-weight: 650;
}

.horizon-command-status--warn {
  color: #B96536;
}

.horizon-embed-section {
  max-width: min(1480px, 100%);
  margin: 0 auto;
}

/* The schedule is a dispatch board, not a reading page: give it more of the
   viewport than the standard 1480px column. Wider = more visible hours on the
   Day timeline and roomier Week matrix cells; the cap keeps ultrawide
   monitors from stretching cells absurdly. Only the schedule gets this. */
.horizon-embed-section[data-section="schedule-agenda"] {
  max-width: min(1880px, 100%);
}

/* The hub landing-page components (.horizon-hub-hero, -primary, -secondary,
   -grid, -card) were removed 2026-06-09 with the dead booking-hub and
   settings-hub sections. The eyebrow survives: empty/connect panels use it. */
.horizon-hub-eyebrow {
  margin: 0 0 7px;
  color: #D9742B;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* One fixed rail width everywhere (was three different minmax ranges): the
   rail column is exactly as wide as the fixed location pill above it, so the
   two share both edges and read as one column at every viewport width. */
.horizon-hub-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  transition: grid-template-columns var(--rail-anim, 180ms) ease;
}

.horizon-context-layout--wide {
  grid-template-columns: 236px minmax(0, 1fr);
}

/* The KPI rail used to be a narrow 150px strip; it now matches the standard
   rail width so every tab's menu reads as the same component. */
.horizon-context-layout--kpi {
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px;
}

.horizon-hub-main {
  min-width: 0;
}

/* ── Mini page head ──────────────────────────────────────────────────
   Page identity lives INSIDE the main column as one quiet row: a compact
   title plus a scope chip (which location, or global). Sections no longer
   render banners/titles/subs above .horizon-hub-layout, so every rail
   starts at the same Y on every tab and never jumps as you click through
   the menu; this row costs ~36px instead of the old banner + title + sub
   block. */
.hub-mini-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 32px;
  margin: 0 0 14px;
}

.hub-mini-title {
  margin: 0;
  color: var(--sw-ink-deep, #373B4D);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.hub-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 11px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
  color: var(--sw-muted, #7B8190);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hub-mini-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sw-orange, #F38A3F);
}

.hub-mini-chip--global .dot {
  background: var(--sw-green, #4BAA78);
}

/* A status badge can take the chip slot (e.g. Overview's health badge). */
.hub-mini-head > .badge2 {
  margin-left: auto;
}

/* ── Collapsible rail ──────────────────────────────────────────────
   One persisted body flag collapses every section rail so the work
   area gets full width. Toggled by #rail-toggle, injected once by
   admin-dashboard.js (setupRailCollapse). The grid-template-columns
   transition above animates the slide. */
body.rail-collapsed .horizon-hub-layout {
  grid-template-columns: minmax(0, 1fr);
}
body.rail-collapsed .horizon-hub-rail {
  display: none;
}

#rail-toggle {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,254,250,0.92), rgba(252,249,243,0.80));
  color: var(--sw-ink, #373B4D);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(55,59,77,0.14), inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
#rail-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(55,59,77,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
}
#rail-toggle:focus-visible {
  outline: 2px solid var(--rail-active-bar, rgba(243,138,63,0.90));
  outline-offset: 2px;
}
#rail-toggle svg {
  width: 17px;
  height: 17px;
  flex: none;
}
/* Icon + label swap by state: chevrons point the way the panel moves. */
#rail-toggle .rail-toggle-close,
#rail-toggle .rail-toggle-open { align-items: center; gap: 7px; }
#rail-toggle .rail-toggle-close { display: inline-flex; }
#rail-toggle .rail-toggle-open { display: none; }
body.rail-collapsed #rail-toggle .rail-toggle-open { display: inline-flex; }
body.rail-collapsed #rail-toggle .rail-toggle-close { display: none; }

/* On mobile the rail is already a compact horizontal strip and the
   bottom dock spans the width, so the toggle would collide. Hide it. */
@media (max-width: 860px) {
  #rail-toggle { display: none; }
  body.rail-collapsed .horizon-hub-rail { display: flex; }
  body.rail-collapsed .horizon-hub-layout { grid-template-columns: 1fr; }
}

/* One rail component for every tab (the booking rail's polish, promoted to
   the standard): soft glass panel, roomy tactile rows, and an independent
   scroll area. When the menu is taller than the viewport it scrolls
   internally; overscroll-behavior:contain keeps the wheel on the menu, not
   the page. */
.horizon-hub-rail {
  position: sticky;
  top: var(--sticky-top, 16px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,254,250,0.68), rgba(252,249,243,0.46));
  box-shadow: 0 18px 42px rgba(55,59,77,0.11), inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  max-height: calc(100dvh - var(--sticky-top, 16px) - 22px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sw-border, #E5DED3) transparent;
}
.horizon-hub-rail::-webkit-scrollbar { width: 10px; }
.horizon-hub-rail::-webkit-scrollbar-thumb {
  background: var(--sw-border, #E5DED3);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.horizon-hub-rail::-webkit-scrollbar-thumb:hover { background: var(--sw-muted, #7B8190); background-clip: padding-box; }
.horizon-hub-rail::-webkit-scrollbar-track { background: transparent; }

.horizon-hub-rail-title {
  display: block;
  padding: 7px 9px 5px;
  margin: 0;
  color: var(--sw-muted, #7B8190);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.horizon-hub-rail-link {
  display: flex;
  min-height: 40px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: var(--rail-item-radius, 999px);
  color: var(--sw-ink, #373B4D);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

/* Tactile press: the row gives slightly under the pointer. */
.horizon-hub-rail-link:active,
.rail-group-trigger:active {
  transform: scale(0.985);
}

/* Hover previews the selection in the same warm family, one register quieter
   than the orange pill: a pale orange-soft wash, no border or shadow chrome,
   label stays ink. The site-wide a:hover underline (style.css) is silenced
   for every anchor inside a rail. */
.horizon-hub-rail a:hover { text-decoration: none; }

.horizon-hub-rail-link:hover {
  border-color: transparent;
  background: var(--sw-orange-soft, #FFEEDC);
  box-shadow: none;
  text-decoration: none;
}

.horizon-hub-rail-link.is-active {
  /* Non-glide fallback (no sliding pill): same flat orange capsule. */
  border-color: transparent;
  background: var(--sw-orange, #F38A3F);
  box-shadow: none;
}

/* Resting labels speak in calm ink; only the selected row (and a closed group
   hiding it) steps up to deep ink at full weight, so the rail reads as one
   quiet list with a single confident selection. */
.horizon-hub-rail-link strong {
  color: var(--sw-ink, #373B4D);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

.horizon-hub-rail-link small {
  display: none;
  color: var(--sw-muted, #7B8190);
  font-size: 11.5px;
  font-weight: 640;
  line-height: 1.25;
}

/* Two-line rows (label + sub-label) stack their text in one column so the
   icon tile stays anchored at the left. */
.rail-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* ═══════════════ GLIDE RAILS — one sliding active indicator ═══════════════
   Every section rail carries .rail-glide: rows stay calm and transparent, and
   ONE pill (.rail-glide-ind) glides to the active item. KPI rails are
   positioned by public/js/kpi-rail.js (route-aware, incl. KPI Desk views);
   every other rail by setupRailGlide() in admin-dashboard.js. Because a
   workspace's rail is byte-identical on each of its pages, the pill reads as
   a single indicator sliding between items even when navigation swaps the
   underlying section. Design philosophy: warm fill + sunwave-orange accent
   for the current selection; calm elsewhere. */
.rail-glide .horizon-hub-rail-link,
.rail-glide .rail-group-trigger { position: relative; z-index: 1; }

/* Rows stay transparent; the sliding pill behind them shows the selection. */
.rail-glide .horizon-hub-rail-link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.rail-glide .horizon-hub-rail-link:hover {
  background: var(--sw-orange-soft, #FFEEDC);
  border-color: transparent;
  box-shadow: none;
}
.rail-glide .horizon-hub-rail-link.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Active-row lettering stays DARK INK (the original language): it reads on
   the orange pill (~6:1) and on the bare cream panel, so text never blinks
   out while the pill is mid-glide. Secondary bits get ink-toned tweaks so
   they hold up on the orange. */
.rail-glide .horizon-hub-rail-link.is-active .rail-label,
.rail-glide .horizon-hub-rail-link.is-active strong {
  color: var(--sw-ink-deep, #373B4D);
  font-weight: 800;
}
.rail-glide .horizon-hub-rail-link.is-active .sched-rail-sub { color: rgba(55,59,77,0.72); }
.rail-glide .horizon-hub-rail-link.is-active .rail-count {
  background: rgba(255,255,255,0.55);
  color: var(--sw-ink-deep, #373B4D);
}
.rail-glide .horizon-hub-rail-link--danger.is-active .rail-label { color: var(--sw-ink-deep, #373B4D); }

/* Danger rows (Log out, Delete location) keep their coral wash on hover. */
.rail-glide .horizon-hub-rail-link--danger:hover { background: var(--sw-coral-wash, #FCEBE7); }

/* The sliding pill. Size/position set inline by JS; hidden until placed.
   Same glossy solid-orange treatment as the dock's .is-active-target pill,
   so "selected" reads identically in every menu. No backdrop-filter here:
   blurring a constantly-moving element janks the glide, and the pill is
   near-opaque anyway — the white highlights supply the gloss/fog. */
.rail-glide-ind {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  /* Style 13 (2026-06-10): full capsule, flat fully opaque brand orange —
     no gradient, no gloss highlights, no glow. The selected row's glyph
     rides it bare (no icon coin); see the .is-active .rail-icon rule. */
  border-radius: var(--sw-radius-pill, 999px);
  background: var(--sw-orange, #F38A3F);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height;
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.30s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.30s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rail-glide-ind { transition: opacity 0.18s ease; }
}

/* Keep the menu perfectly still on navigation. The section-level 6px entrance
   used to translate the sticky rail (the "jerk"); run it on the KPI content
   only so the rail never moves. */
.admin-body .section-page.horizon-kpi-section,
.section-page.horizon-kpi-section { animation: none; }
.section-page.horizon-kpi-section .horizon-hub-main { animation: sectionIn 0.26s cubic-bezier(0.22, 1, 0.36, 1); }

.page-rail {
  width: 100%;
}

.rail-list {
  display: grid;
  gap: var(--rail-row-gap, 5px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-section-label + .rail-list,
.rail-list + .rail-group,
.rail-group + .rail-list,
.rail-group + .rail-group {
  margin-top: var(--rail-group-gap, 16px);
}

.page-rail-link {
  width: 100%;
  min-height: var(--rail-min-h, 40px);
}

button.page-rail-link {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rail-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-rail-link .rail-label {
  color: var(--sw-ink, #373B4D);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

.rail-count {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--rail-badge-fill, #F3EFE7);
  color: var(--rail-muted, #7B8190);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* An empty count is hidden so the rail stays quiet (no column of zeros). */
.rail-count:empty {
  display: none;
}

/* Status dot: a small at-a-glance signal at the left of a row. Prefer a dot
   over a colored pill so the rail stays calm (PAGE_LAYOUT_STANDARD.md 6.9). */
.rail-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sw-muted, #7B8190);
}
.rail-dot[hidden] { display: none; }
.rail-dot--review { background: var(--sw-gold, #D39A2E); }
.rail-dot--unpaid { background: var(--sw-coral, #D65F4F); }
.rail-dot--ok { background: var(--sw-green, #4BAA78); }
.rail-dot--info { background: var(--sw-blue, #BFE0F3); }

.rail-group {
  display: grid;
  gap: 4px;
}

.rail-group-trigger {
  appearance: none;
  display: flex;
  width: 100%;
  min-height: var(--rail-min-h, 40px);
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--rail-item-radius, 10px);
  background: transparent;
  color: var(--rail-ink, #373B4D);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.rail-group-trigger:hover,
.rail-group-trigger:focus-visible {
  border-color: transparent;
  background: var(--sw-orange-soft, #FFEEDC);
  box-shadow: none;
}

.rail-group-trigger .rail-label {
  color: var(--sw-ink, #373B4D);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

/* A closed group hiding the active row: a soft peach fill says "you are in
   here" (the old inset left bar drew a square edge inside the capsule). */
.rail-group--has-active:not(.is-open) .rail-group-trigger {
  background: var(--sw-orange-soft, #FFEEDC);
}

.rail-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--rail-muted, #7B8190);
  transition: transform var(--rail-anim, 180ms) ease;
}

.rail-group.is-open .rail-chevron {
  transform: rotate(90deg);
}

.rail-group-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--rail-anim, 180ms) ease, opacity var(--rail-anim, 180ms) ease;
}

.rail-group.is-open .rail-group-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.rail-group-panel .rail-list {
  min-height: 0;
  margin-left: var(--rail-indent, 16px);
  padding-left: 8px;
  overflow: hidden;
  border-left: 1px solid var(--rail-guide, #E5DED3);
}

.rail-group:not(.is-open) .rail-group-panel a,
.rail-group:not(.is-open) .rail-group-panel button {
  visibility: hidden;
  pointer-events: none;
}

.rail-list--nested .page-rail-link {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--rail-item-radius, 999px);
}

.rail-list--nested .page-rail-link strong,
.rail-list--nested .page-rail-link .rail-label {
  font-size: 12px;
  font-weight: 700;
}

/* Static fallback for panel links outside a glide rail (none today): match
   the flat orange capsule selected language. */
.rail-panel-link.is-active {
  background: var(--sw-orange, #F38A3F);
  border-radius: var(--sw-radius-pill, 999px);
  box-shadow: none;
}
.rail-panel-link.is-active .rail-label { color: var(--sw-ink-deep, #373B4D); }

/* Second, deeper level: the active settings item reveals its in-page sub-panels
   nested beneath it (e.g. Schedule settings -> Calendar, Arrival windows, ...).
   The indent and guide line come from the .rail-group-panel .rail-list rule
   above; this only adds vertical breathing room. */
.rail-list--panel {
  margin-top: 4px;
  margin-bottom: 6px;
}

.page-rail-link:focus-visible,
.rail-group-trigger:focus-visible {
  outline: 2px solid var(--sw-orange, #F38A3F);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rail-chevron,
  .rail-group-panel {
    transition: none;
  }
}

/* The booking rail's polish (icon tiles, tactile rows, independent scroll)
   was promoted to the base .horizon-hub-rail component above, so every tab's
   menu shares it; no booking-specific overrides remain. */

/* Icon coin on every rail row (same drawing language as the main nav:
   20x20 viewBox, 1.6 stroke, round caps). A perfect circle styled like a
   small frosted-glass token resting on the tray: warm lift fill, a hairline
   edge where the light catches, and a whisper of ambient shadow. Shared by
   every tab's menu — Booking, Schedule, KPI, Settings, Profile, Overview,
   Locations — so the rails read as one component across the whole admin. */
.horizon-hub-rail .rail-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sw-radius-pill, 999px);
  background: var(--sw-card-lift, #FFFDF9);
  color: var(--sw-muted, #7B8190);
  box-shadow: inset 0 0 0 1px var(--sw-border, #E5DED3),
              inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 1px 3px var(--sw-shadow, rgba(55, 59, 77, 0.08));
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.horizon-hub-rail .rail-icon svg { width: 16px; height: 16px; }

/* Hover warms the tile one step past the row wash so the whole row reads as a
   preview of selection: idle gray tile, hover warm tile on a pale peach row,
   active frosted-white tile riding the glossy orange pill. */
.horizon-hub-rail .horizon-hub-rail-link:hover .rail-icon,
.horizon-hub-rail .rail-group-trigger:hover .rail-icon {
  background: rgba(243, 138, 63, 0.18);
  color: var(--sw-orange-dark, #C8651C);
  box-shadow: inset 0 0 0 1px rgba(243, 138, 63, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Danger rows (Log out, Delete location) stay coral on hover; they never
   preview the orange selection. */
.horizon-hub-rail .horizon-hub-rail-link--danger:hover .rail-icon {
  background: var(--sw-coral-wash, #FCEBE7);
  color: var(--sw-coral, #D65F4F);
  box-shadow: inset 0 0 0 1px rgba(214, 95, 79, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Active rows ride the flat orange capsule with a BARE glyph: the coin
   dissolves entirely (style 13) and the icon draws in the same ink as the
   label, so icon + label read as one unit on the orange. */
.horizon-hub-rail .horizon-hub-rail-link.is-active .rail-icon,
.horizon-hub-rail .rail-panel-link.is-active .rail-icon,
.horizon-hub-rail .rail-group-trigger.is-active .rail-icon {
  background: transparent;
  color: var(--sw-ink-deep, #373B4D);
  box-shadow: none;
}

/* A closed group hiding the active row sits on cream (no pill), so its
   trigger keeps the warm orange tint. */
.horizon-hub-rail .rail-group--has-active:not(.is-open) .rail-group-trigger .rail-icon {
  background: rgba(243, 138, 63, 0.18);
  color: var(--sw-orange-dark, #C8651C);
  box-shadow: inset 0 0 0 1px rgba(243, 138, 63, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* A group trigger that is itself the active destination (e.g. KPI admin with
   no sub-queue chosen yet) rides the pill too; same dark-ink label. A closed
   group hiding the active row also keeps its label at selection strength. */
.rail-glide .rail-group-trigger.is-active .rail-label,
.rail-group--has-active:not(.is-open) .rail-group-trigger .rail-label {
  color: var(--sw-ink-deep, #373B4D);
  font-weight: 800;
}

/* Danger rows (Log out, Delete location) tint their coin coral. */
.horizon-hub-rail .horizon-hub-rail-link--danger .rail-icon {
  background: var(--sw-coral-wash, #FCEBE7);
  color: var(--sw-coral, #D65F4F);
  box-shadow: inset 0 0 0 1px rgba(214, 95, 79, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Nested (grouped) rows: slightly smaller tile, tighter indent. */
.horizon-hub-rail .rail-group-panel .rail-list { margin-left: 11px; padding-left: 10px; }
.horizon-hub-rail .rail-list--nested .page-rail-link { min-height: 34px; padding: 5px 8px; gap: 9px; }
.horizon-hub-rail .rail-list--nested .rail-icon { width: 24px; height: 24px; border-radius: var(--sw-radius-pill, 999px); }
.horizon-hub-rail .rail-list--nested .rail-icon svg { width: 15px; height: 15px; }

.horizon-embed-frame {
  display: block;
  width: 100%;
  height: min(980px, calc(100vh - 226px));
  min-height: 680px;
  border: 0;
  background: #fff;
}

.horizon-embed-frame--flush {
  height: calc(100vh - 232px);
  min-height: 720px;
  border-radius: 14px;
  background: transparent;
}

/* Auto-sized embed: the iframe grows to its content height (set inline by JS via
   the embed:height postMessage), so it has no inner scrollbar and flows with the
   page. The values here are only the pre-JS fallback. See PAGE_LAYOUT_STANDARD.md
   section 5. */
.horizon-embed-frame--autosize {
  height: auto;
  min-height: 600px;
}

/* Customer booking-link share bar above the embedded public booker.
   Bento-Box Soft Minimalism: warm card, generous whitespace, pill controls,
   one ambient low-opacity shadow. The copy is width-capped so it never crowds
   the actions cluster (Rule of Proximity). */
.online-booking-share {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 auto 14px;
  padding: 12px 16px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--sw-card-hi, #FFFDF9), var(--sw-card, #FCFAF6));
  box-shadow: 0 10px 26px rgba(55,59,77,0.05);
}
.online-booking-share-copy {
  display: grid;
  flex: 0 0 auto;
}
.online-booking-share-copy strong {
  color: var(--sw-ink-deep, #373B4D);
  font-size: 15px;
  font-weight: 820;
  letter-spacing: -0.01em;
}
.online-booking-share-copy span {
  color: var(--sw-muted, #7B8190);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.online-booking-share-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.online-booking-share-url {
  padding: 9px 20px;
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 999px;
  background: var(--sw-inset, #F3EFE7);
  color: var(--sw-ink, #373B4D);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.horizon-embed-frame--kpi {
  height: calc(100vh - 174px);
  min-height: 760px;
  border-radius: 12px;
}

.horizon-empty-panel {
  min-height: 420px;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,254,250,0.68), rgba(252,249,243,0.46));
  box-shadow: 0 18px 42px rgba(55,59,77,0.10), inset 0 1px 0 rgba(255,255,255,0.76);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
}

.horizon-empty-panel h1 {
  margin: 0 0 10px;
  color: var(--sw-ink-deep, #373B4D);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 840;
  letter-spacing: 0;
}

.horizon-empty-panel p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--sw-muted, #7B8190);
  font-size: 15px;
  font-weight: 620;
  line-height: 1.55;
}

.admin-body .admin-nav-source {
  position: fixed;
  top: 78px;
  left: 20px;
  z-index: 82;
  width: min(330px, calc(100vw - 40px));
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.admin-body .admin-nav-source .admin-nav-group {
  display: none !important;
}

.admin-body .admin-nav-source .admin-nav-group--add-location {
  display: block !important;
  pointer-events: auto;
}

.admin-body .admin-nav-source .admin-nav-loc-add-panel {
  margin: 0;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,254,250,0.78), rgba(252,250,246,0.62));
  box-shadow: 0 22px 50px rgba(55,59,77,0.18), 0 6px 18px rgba(55,59,77,0.08);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
}

.admin-body .admin-nav-source .admin-nav-loc-add-panel[hidden] {
  display: none !important;
}

.admin-body .admin-page-footer {
  padding-bottom: 18px;
}

.admin-body .save-bar,
.admin-body .bento-save-bar {
  bottom: 92px;
}

@media (max-width: 1040px) {
  .horizon-dock {
    gap: 5px;
    padding: 7px 8px;
  }
  .horizon-tab,
  .admin-body .horizon-tab {
    padding: 8px 11px;
    font-size: 13px;
  }
  /* Pill and rail shrink together so they keep sharing both edges. */
  .horizon-cornerbar {
    width: 170px;
  }
  .horizon-hub-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .admin-body .admin-shell {
    /* .admin-shell is INSIDE .app-scroll, which already pads top by
       var(--chrome-top) at every breakpoint. With search living in the dock,
       the location pill is the only top chrome on mobile too, so no extra
       clearance is needed here. Bottom is 0 because .app-scroll supplies
       --chrome-bottom. */
    padding: 0 16px 0;
  }
  .horizon-dock {
    bottom: 14px;
    width: calc(100vw - 20px);
    gap: 5px;
    border-radius: 24px;
  }
  .horizon-dock-center {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .horizon-dock-center::-webkit-scrollbar {
    display: none;
  }
  .horizon-tab,
  .admin-body .horizon-tab {
    padding: 8px 12px;
  }
  .horizon-command-kbd {
    display: none;
  }
  .horizon-hub-layout {
    grid-template-columns: 1fr;
  }
  /* On mobile every rail is a horizontal strip, so undo the desktop
     sticky / independent-scroll treatment and let it scroll sideways. */
  .horizon-hub-rail {
    position: relative;
    top: auto;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior: auto;
    padding: 7px;
    scrollbar-width: none;
  }
  .horizon-hub-rail::-webkit-scrollbar {
    display: none;
  }
  .horizon-hub-rail-link {
    min-width: 188px;
  }
  .page-rail .rail-list,
  .page-rail .rail-group {
    min-width: 188px;
  }
  .page-rail .rail-section-label {
    display: none;
  }
  .page-rail .rail-group-panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .page-rail .rail-group-panel .rail-list {
    margin-left: 0;
    margin-top: 6px;
    padding-left: 0;
    border-left: 0;
  }
  /* The strip forces every group panel open (above), so make those rows
     visible and clickable too, and drop the now-meaningless chevron. */
  .page-rail .rail-group:not(.is-open) .rail-group-panel a,
  .page-rail .rail-group:not(.is-open) .rail-group-panel button {
    visibility: visible;
    pointer-events: auto;
  }
  .page-rail .rail-chevron {
    display: none;
  }
  .horizon-embed-frame {
    height: calc(100vh - 238px);
    min-height: 560px;
  }
}

@media (max-width: 560px) {
  .horizon-cornerbar {
    right: 14px;
    left: 14px;
    width: auto;
  }
  .horizon-workspace {
    min-width: 0;
  }
  .horizon-workspace-trigger span {
    overflow: hidden;
    max-width: calc(100vw - 104px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .horizon-workspace-menu {
    width: calc(100vw - 28px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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: #F3EFE7;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── toolbar (shared) ── */
.sched-toolbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--sw-border, #E5DED3);
}
.sched-toolbar > .sched-toolbar-nav { justify-self: start; }
.sched-toolbar > .sched-datelabel { justify-self: center; }
.sched-toolbar > .sched-toolbar-actions { 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-stepgroup { display: inline-flex; }
.sched-stepgroup .sched-btn { border-radius: 0; }
.sched-stepgroup .sched-btn:first-child { border-radius: 12px 0 0 12px; }
.sched-stepgroup .sched-btn:last-child { border-radius: 0 12px 12px 0; border-left: 0; }
.sched-stepgroup .sched-btn:hover { transform: none; box-shadow: none; background: var(--sw-inset, #F3EFE7); }
.sched-toolbar-nav, .sched-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.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: #8A6210; }
.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-inset, #F3EFE7); }
.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-inset, #F3EFE7); 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: a satisfying press — */
#rail-toggle { transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
#rail-toggle:active { transform: translateY(0) scale(.97); }

/* 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 {
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.82), rgba(252, 249, 243, 0.66));
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 60px rgba(55, 59, 77, 0.18), 0 6px 16px rgba(55, 59, 77, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.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;
}
.horizon-dock-pill.is-active-target {
  /* Style 13 (2026-06-10): selected = flat fully opaque brand orange, no
     gradient or gloss highlights, matching the rail glide pill exactly.
     The ink label sits directly on it. */
  background: var(--sw-orange, #F38A3F);
  box-shadow: none;
}

/* the sliding pill is the highlight now — drop the per-tab backgrounds.
   The active label stays DARK INK: it reads on the orange pill (~6:1) and on
   the bare cream bar, so the label never disappears while the pill is still
   gliding over or parked elsewhere during hover. */
.admin-body .horizon-tab:hover { background: transparent; color: var(--sw-ink, #373B4D); }
.admin-body .horizon-tab.is-active { background: transparent; color: var(--sw-ink-deep, #373B4D); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .horizon-dock-pill { transition: background .22s ease, opacity .2s ease; }
}
/* ═══════════════════ 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 { 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-within { 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); }
.sched-datelabel-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; }
.sched-ava.is-unassigned { background: rgba(15, 23, 42, 0.08); color: #64748b; }
.sched-alltechs.is-active { background: var(--sw-orange-soft, #FFEEDC); color: var(--sw-orange-dark, #C66518); border-color: var(--sw-orange, #F38A3F); }

/* 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; }

/* ── 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: #8A6210; }
.cal-ags-chip--warn strong { color: #8A6210; }

/* ── 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; }
.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-canvas { position: relative; flex: 0 0 auto; }
.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); box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.14); 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); }

/* job blocks: horizontal text, status edge + tint, gentle lift on hover */
.cal-agt-job { 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); 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; }
.cal-agt-jtime { flex: none; font-size: 10px; font-weight: 800; color: var(--sw-muted, #7B8190); 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; }
.cal-agt-job.is-tight .cal-agt-jdesc, .cal-agt-job.is-tight .cal-agt-jtime { display: none; }
/* 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; }

/* ── 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, .cal-agm-wkhead { 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-wkhead { text-align: right; padding-right: 8px; }
.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: #8A6210; }
.cal-agm-cell { font: inherit; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 9px 6px; background: var(--sw-card-lift, #FFFDF9); border: 1px solid var(--sw-border, #E5DED3); border-radius: 12px; cursor: pointer; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease; }
.cal-agm-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(55, 59, 77, 0.12); border-color: #D9D1C4; }
.cal-agm-cell:active { transform: translateY(0) scale(0.97); }
.cal-agm-cell.is-today { background: #FFF6EB; border-color: rgba(243, 138, 63, 0.35); }
.cal-agm-cell--warn { background: var(--sw-card, #FCFAF6); border-style: dashed; 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); }
.cal-agm-dot.is-booked { background: #D9D2C6; }
.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: #8A6210; font-size: 11.5px; font-weight: 850; font-style: normal; font-variant-numeric: tabular-nums; }
.cal-agm-tot { font-size: 12.5px; font-weight: 800; color: var(--sw-muted, #7B8190); text-align: right; padding-right: 8px; 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-desc { max-width: 240px; font-size: 11.5px; color: var(--sw-muted, #7B8190); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 flyout (right-side panel over the agenda) ── */
.sched-fly-scrim { position: fixed; inset: 0; background: rgba(43, 38, 30, 0.32); backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%); opacity: 0; transition: opacity 0.22s ease; z-index: 1000; }
.sched-fly-scrim.is-open { opacity: 1; }
.sched-fly { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(420px, 92vw); background: var(--sw-card-lift, #FFFDF9); border-left: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px 0 0 18px; z-index: 1001; box-shadow: -18px 0 50px rgba(55, 59, 77, 0.20); display: flex; flex-direction: column; transform: translateX(102%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.sched-fly.is-open { transform: translateX(0); }
.sched-fly-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--sw-border, #E5DED3); }
.sched-fly-htext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sched-fly-cust { font-size: 17px; font-weight: 800; color: var(--sw-ink-deep, #373B4D); overflow-wrap: anywhere; }
.sched-fly-when { font-size: 12.5px; color: var(--sw-muted, #7B8190); }
.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-inset, #F3EFE7); 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: 14px 18px 28px; }
.sched-fly-section { padding: 4px 0; }
.sched-fly-section--detail { border-top: 1px solid var(--sw-border, #E5DED3); margin-top: 10px; padding-top: 14px; }
.sched-fly-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 0; align-items: start; }
.sched-fly-k { font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sw-muted, #7B8190); padding-top: 2px; }
.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 { margin: 4px 0 8px; padding-left: 18px; }
.sched-fly-items li { font-size: 13px; color: var(--sw-ink, #373B4D); margin: 3px 0; }
.sched-fly-qty { color: #94a3b8; font-weight: 700; }
.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; }
@media (prefers-reduced-motion: reduce) { .sched-fly, .sched-fly-scrim { transition: 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-tot,
.cal-agm-corner, .cal-agm-wkhead { 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); }

/* — the "now" line breathes — */
@keyframes schedNowPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(243, 138, 63, 0.16); }
  50% { box-shadow: 0 0 0 7px rgba(243, 138, 63, 0.05); }
}
.cal-agt-now { animation: schedNowPulse 2.6s ease-in-out infinite; }

/* — 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 {
  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-section--detail { animation-delay: 0.32s; }

/* — guards: slider drags re-render constantly; never replay entrances then — */
.sched-noanim .cal-agt, .sched-noanim .cal-ags, .sched-noanim .cal-agt-row,
.sched-noanim .cal-agt-job, .sched-noanim .cal-ags-chip { animation: none; }

@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-tot,
  .cal-agm-corner, .cal-agm-wkhead, .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; }
  .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  (appended, additive, reversible)
   ----------------------------------------------------------------------
   Tie #rail-toggle (the Hide/Show menu button) into the side menu instead
   of floating as a detached dock-style pill: it now wears the rail's own
   frosted-card aesthetic and the menu's orange accent (muted by default,
   orange on hover, like the rail links), sits anchored to the menu's left
   gutter, and glows in the brand color while the menu is collapsed so it is
   an obvious handle to bring the menu back. Remove this block to revert.
   ══════════════════════════════════════════════════════════════════════ */
#rail-toggle {
  left: 24px;
  bottom: 20px;
  height: 38px;
  gap: 9px;
  padding: 0 15px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.70);
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.80), rgba(252, 249, 243, 0.58));
  color: var(--sw-muted, #7B8190);
  font-size: 12.5px;
  font-weight: 750;
  box-shadow: 0 16px 38px rgba(55, 59, 77, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#rail-toggle:hover {
  transform: translateY(-1px);
  color: var(--sw-orange-dark, #C66518);
  border-color: rgba(243, 138, 63, 0.34);
  background: linear-gradient(180deg, rgba(255, 248, 240, 0.90), rgba(255, 243, 233, 0.68));
  box-shadow: 0 20px 44px rgba(55, 59, 77, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
#rail-toggle:active { transform: translateY(0) scale(.97); }
#rail-toggle svg { color: var(--sw-muted, #7B8190); transition: color 140ms ease; }
#rail-toggle:hover svg { color: var(--sw-orange, #F38A3F); }
/* collapsed = the toggle is the only handle left, so give it a brand hint */
body.rail-collapsed #rail-toggle { color: var(--sw-orange-dark, #C66518); border-color: rgba(243, 138, 63, 0.30); }
body.rail-collapsed #rail-toggle svg { color: var(--sw-orange, #F38A3F); }
/* ═══════════════════ 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;
}