/* ═══════════════════════════════════════════════════════════════
   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 */
/* ── Warm the legacy palette for the admin app only ──────────────────────────
   style.css's :root defines the OLD admin/booking palette: --card #FFFFFF (pure
   white) and --card-tint #F4F5F7 (a cool blue-grey). On the warm frosted canvas
   (app-background.css, base #FBF8F3) those legacy tokens make leftover panels
   read as cold white / cool-grey rectangles that don't match the page — the
   "funky background" mismatch. Re-point the two surface tokens to the warm card
   family (matching --sw-card / the warm tint used as a fallback elsewhere) so
   every legacy component that fills with var(--card)/var(--card-tint) blends
   into the canvas. Scoped to .admin-body so the public booking + estimate pages
   (which deliberately use the doc's canonical palette) are untouched. --bg is
   left at its documented canonical value (and is hidden by the frost anyway). */
.admin-body {
  --card: #FCFAF6;
  --card-tint: #FAF7F1;
}
.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: transparent; box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30)); }
.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;
}
/* Sections enter from the RIGHT (a short eased slide + fade), so a tab click
   reads as the new page physically sliding in. .app-scroll clips overflow-x,
   so the 26px overhang can never flash a horizontal scrollbar. */
@keyframes sectionIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.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: 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: var(--card);
  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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.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);
}
/* One glow only: suppress the universal :focus-visible ring on the input so
   the .tag-input wrapper's focus-within glow is the single focus treatment. */
.tag-input input[type="text"]:focus,
.tag-input input[type="date"]:focus,
.tag-input input[type="text"]:focus-visible,
.tag-input input[type="date"]:focus-visible { outline: none; box-shadow: none; }
.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; }

/* ── Technician schedule-color picker (Available techs) ─────────────────────
   A strip of palette swatches per tech, the same palette the schedule boards
   paint. Radios drive the active state in pure CSS (checked dot gets a ring);
   the "Auto" swatch (empty value) means no override — the tech keeps their
   name-derived color. */
.tech-color-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.tech-color-label { flex: none; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.tech-color-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-color-swatch { position: relative; display: inline-flex; line-height: 0; cursor: pointer; }
.tech-color-swatch input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.tech-color-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(55, 59, 77, 0.14);
  font-size: 0.6rem; font-weight: 800; color: #fff;
  transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease;
}
.tech-color-swatch--auto .tech-color-dot { background: #fff; color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--border); }
.tech-color-swatch:hover .tech-color-dot { transform: scale(1.14); }
.tech-color-swatch input:checked + .tech-color-dot { transform: scale(1.06); box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--swatch, var(--text-muted)); }
.tech-color-swatch--auto input:checked + .tech-color-dot { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--text-muted); }
.tech-color-swatch input:focus-visible + .tech-color-dot { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--orange); }

/* 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);
  /* Soft orange drop shadow for editable input focus (mirrors tokens.css) */
  --sw-focus-shadow: 0 0 0 1px var(--sw-orange), 0 6px 13px rgba(243, 138, 63, 0.30);
}

/* Universal focus visible — keyboard-only, never on click */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
/* Editable type-in fields show focus as a soft orange drop shadow (no hard
   ring), overriding the generic keyboard ring above. Inputs only — buttons
   and links keep --focus-ring. */
input:focus-visible, textarea:focus-visible, select:focus-visible,
input:focus, textarea:focus, select:focus {
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
  border-color: transparent;
}
.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;
  /* Above every modal/overlay (send modal scrim is 5000) so a "Sent" / error
     toast is never hidden behind the popup that triggered it. */
  z-index: 2147483200;
  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: var(--card);
  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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.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: var(--card);
  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: var(--card);
  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: var(--orange);
  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: transparent; box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30)); }

/* 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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
@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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}

/* "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) ───── */
/* Available techs — staged-load skeleton. The tech list is hydrated after first
   paint (GET /admin/api/available-techs) so the cold HCP employees fetch never
   blocks the dashboard render; this holds the space with a calm pulse until the
   real rows arrive. */
.avtech-skel { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.avtech-skel-row {
  height: 64px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(90deg, rgba(0,0,0,0.035) 25%, rgba(0,0,0,0.06) 37%, rgba(0,0,0,0.035) 63%);
  background-size: 400% 100%;
  animation: avtechSkel 1.3s ease-in-out infinite;
}
.avtech-skel-note { margin-top: 10px; opacity: 0.7; }
@keyframes avtechSkel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .avtech-skel-row { animation: none; } }
/* Stage 1 of a workspace switch: dim the name labels while the (now-fast) page
   reload lands, so the instant client-side name update reads as "loading". */
body.is-workspace-switching .workspace-switcher-trigger-text,
body.is-workspace-switching .admin-nav-loc-picker-summary-value,
body.is-workspace-switching #horizon-workspace-name { opacity: 0.55; transition: opacity 0.15s ease; }
/* Users & Access — staged-load skeleton for the People list (rows hydrate via
   GET /admin/api/users-access after first paint; reuses the avtechSkel sweep). */
.user-list .user-skel {
  list-style: none;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.035) 25%, rgba(0,0,0,0.06) 37%, rgba(0,0,0,0.035) 63%);
  background-size: 400% 100%;
  animation: avtechSkel 1.3s ease-in-out infinite;
}
.user-list .user-empty { list-style: none; padding: 14px 4px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .user-list .user-skel { animation: none; } }

.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: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}

/* 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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.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: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}
.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;
}
/* One glow only: suppress the universal :focus-visible ring on the input so
   the .tag-editor wrapper's focus-within glow is the single focus treatment. */
.tag-editor-input:focus,
.tag-editor-input:focus-visible { outline: none; box-shadow: none; }
.tag-editor-input::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}
.admin-body [hidden] {
  display: none !important;
}