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

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

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

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

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

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

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

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

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

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

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

/* --overview: neutral ink */
.bento-scope-banner--overview .bento-scope-banner-chip {
  background: var(--sw-card-lift, #FFFDF9);
  color: var(--sw-ink);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.admin-body .stat-tile.is-warn .stat-tile-icon {
  background: rgba(211, 154, 46, 0.16);
  color: var(--sw-orange-dark, #C66518);
}

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

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

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

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

.admin-body .quickstart-progress {
  background: var(--sw-card-lift, #FFFDF9);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.admin-body .copy-row {
  padding: 12px;
  border-color: var(--sw-border);
  border-radius: 18px;
  background: var(--sw-card-lift, #FFFDF9);
}

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

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

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

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

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

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

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

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

.admin-body .service-row {
  background: var(--sw-card-lift, #FFFDF9);
  border-color: var(--sw-border);
  border-radius: 18px;
  padding: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.admin-body .service-row--custom .cs-drag-handle:hover {
  background: var(--sw-card-lift, #FFFDF9);
  border-color: var(--sw-muted);
}

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

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

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

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

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

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

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

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

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

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

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

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

.admin-body .service-row-grid input:focus,
.admin-body .service-row-grid textarea:focus,
.admin-body .tag-editor:focus-within {
  border-color: transparent;
  box-shadow: var(--sw-focus-shadow, 0 0 0 1px #F38A3F, 0 6px 13px rgba(243, 138, 63, 0.30));
}

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

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

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

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

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

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

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

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

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