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

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

:root {
  /* Warm canvas + cards. Cool grays were sterile — the new tokens
     read as printed paper. */
  --sw-canvas: #F8F5EF;
  --sw-card: #FCFAF6;
  --sw-card-lift: #FFFDF9;
  /* --sw-inset retired 2026-06-13: the warm tan (#F3EFE7) read as brown and is
     banned. Quiet/recessed surfaces use --sw-card-lift + a hairline border. */
  --sw-border: #E5DED3;
  --sw-shadow: rgba(55, 59, 77, 0.08);

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

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

  /* Canonical input focus: soft orange drop shadow, no hard edge. Mirrors
     tokens.css so bento surfaces float on the same shadow app-wide. */
  --sw-focus-shadow: 0 0 0 1px var(--sw-orange), 0 6px 13px rgba(243, 138, 63, 0.30);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Footer save cards/strips — the save control lives BELOW the settings now
   (settings start at the top of the page; a slim .hub-mini-head names the
   page where the card used to). In the saved state they sit in normal flow,
   so the page scrolls clean with nothing floating. While the form has
   unsaved changes (.is-dirty, toggled by the dirty tracker) they turn
   sticky so Save stays in reach on long pages. Sticky offsets resolve
   against .app-scroll's padding box, and --chrome-bottom (136px) already
   clears the dock — so bottom: 0 rests the bar at the content-area edge,
   ~36px above the dock. Do not add the dock height here; it double-counts.
   Condensed to a single row; the eyebrow <span> is hidden because the page
   title already names the section. */
.booking-settings-save-card--footer,
.settings-save-strip--footer {
  margin: 18px 0 0;
}
.booking-settings-save-card--footer.is-dirty,
.settings-save-strip--footer.is-dirty {
  position: sticky;
  bottom: 0;
  z-index: 30;
  /* Solid fill while floating — translucency reads as broken when cards
     scroll underneath. */
  background: #FFF4E9;
  border-color: rgba(243,138,63,0.50);
  box-shadow: 0 -10px 26px rgba(55,59,77,0.10), 0 14px 30px rgba(243,138,63,0.16);
}
.booking-settings-save-card--footer {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.booking-settings-save-card--footer > span { display: none; }
.booking-settings-save-card--footer strong { white-space: nowrap; font-size: 13.5px; }
.booking-settings-save-card--footer small { flex: 1; min-width: 0; }
.booking-settings-save-card--footer[data-state="saving"] small {
  color: var(--sw-orange-dark, #C66518);
}
.booking-settings-save-card--footer[data-state="saving"] small::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 2px solid var(--sw-orange-soft, #FFEEDC);
  border-top-color: var(--sw-orange, #F38A3F);
  border-radius: var(--sw-radius-pill, 999px);
  animation: booking-settings-saving-spin 700ms linear infinite;
}
@keyframes booking-settings-saving-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .booking-settings-save-card--footer[data-state="saving"] small::before { animation: none; }
}
.booking-settings-save-card--footer[data-state="saved"] small,
.booking-settings-save-card--footer[data-location-autosave-status][data-state="saved"] small,
.booking-settings-save-card--footer[data-schedule-autosave-status][data-state="saved"] small {
  color: var(--sw-green, #4BAA78);
}
.booking-settings-save-card--footer[data-state="error"] small,
.booking-settings-save-card--footer[data-location-autosave-status][data-state="error"] small,
.booking-settings-save-card--footer[data-schedule-autosave-status][data-state="error"] small {
  color: var(--sw-coral, #D65F4F);
}
.booking-settings-save-card--footer .bento-btn {
  width: auto;
  margin: 0 0 0 auto;
  align-self: center;
}
.settings-save-strip--footer { padding: 10px 14px; }
.settings-save-strip--footer > div { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.settings-save-strip--footer > div > span { display: none; }
@media (max-width: 620px) {
  .booking-settings-save-card--footer { flex-direction: column; align-items: stretch; }
  .booking-settings-save-card--footer .bento-btn { margin: 0; justify-content: center; }
}


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

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

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

/* ─── Compact settings tabs ─────────────────────────────────────
   The booking-settings tabs (Booking settings, Availability, Available
   techs, Service area, Service categories) are dense control panels, not
   reading pages: rows of small toggles and number fields scanned at a
   glance. Tighten the bento rhythm a notch on these pages only — still
   soft, still tactile, just less air between clusters so each tab fits
   without scrolling. The reading-page tabs (Overview, KPI) keep the
   roomier default padding. */
.booking-settings-page .booking-settings-layout--single { margin-top: 0; }
.booking-settings-page .bento-grid { gap: 14px; }
.booking-settings-page .bento-card { padding: 20px 22px 18px; gap: 13px; }
.booking-settings-page .bento-card-head { gap: 12px; }
@media (max-width: 760px) {
  .booking-settings-page .bento-card { padding: 18px 16px 16px; }
}

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

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

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

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

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

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

/* ─── Booking link row ─────────────────────────────────────────
   URL chip + Copy + Open. Chip stretches; buttons stay pill-shaped
   and aligned to the right edge of the card body. */
.bento-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bento-link-stack {
  display: grid;
  gap: 10px;
}
.bento-link-label {
  flex: 0 0 150px;
  color: var(--sw-muted, #7B8190);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}
.bento-link-chip {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  background: var(--sw-card-lift, #FFFDF9);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--sw-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-link-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Sunwave button system (2026-06-14): the default button is a soft "squircle"
   defined by a shadow (no outline), with a dark ink icon. It floats up a hair on
   hover and flushes orange with white text on press; a selected/toggled button
   (.is-on or [aria-pressed="true"]) stays orange. The --primary variant is always
   orange. Documented in INTERFACE_DESIGN_PHILOSOPHY_NEW.md. Shell/nav buttons use
   their own classes (horizon-*, *-rail/-dock/-nav, admin-nav) and are unaffected. */
.bento-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 10px 18px;
  border-radius: 16px;
  border: 0;
  background: var(--sw-card-lift, #FFFDF9);
  color: var(--sw-ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(55, 59, 77, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.16s ease, color 0.16s ease;
}
/* Width is shrink-to-content by default, at ZERO specificity (:where) so any
   button that opts into full width (its own width: 100%) always wins. */
:where(.bento-btn) { width: fit-content; max-width: 100%; }
.bento-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 22px rgba(55, 59, 77, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.bento-btn:active {
  transform: translateY(0) scale(0.99);
  background: var(--sw-orange);
  color: #fff;
  box-shadow: 0 3px 9px rgba(55, 59, 77, 0.2);
}
.bento-btn.is-on,
.bento-btn[aria-pressed="true"] {
  background: var(--sw-orange);
  color: #fff;
  box-shadow: 0 4px 12px rgba(55, 59, 77, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.bento-btn.is-on:hover,
.bento-btn[aria-pressed="true"]:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--sw-orange-dark);
  box-shadow: 0 11px 23px rgba(55, 59, 77, 0.26);
}
.bento-btn--primary {
  background: var(--sw-orange, #F38A3F);
  color: var(--sw-card-lift, #FFFDF9);
  box-shadow: 0 5px 14px rgba(55, 59, 77, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.bento-btn--primary:hover {
  background: var(--sw-orange-dark, #C66518);
  color: var(--sw-card-lift, #FFFDF9);
}
.bento-btn--danger {
  background: transparent;
  border: 1px solid rgba(214, 95, 79, 0.35);
  color: var(--sw-coral);
  box-shadow: none;
}
.bento-btn--danger:hover {
  background: var(--sw-coral-wash);
  border-color: var(--sw-coral);
  box-shadow: none;
}
.bento-btn--danger:active {
  background: var(--sw-coral-wash);
  color: var(--sw-coral);
}
.bento-btn--ghost {
  background: transparent;
  color: var(--sw-muted);
  box-shadow: none;
}
.bento-btn--ghost:hover {
  background: var(--sw-card-lift, #FFFDF9);
  color: var(--sw-ink);
  box-shadow: none;
}
.bento-btn--ghost:active {
  background: var(--sw-card-lift, #FFFDF9);
  color: var(--sw-ink);
  transform: translateY(0) scale(0.99);
}
@media (prefers-reduced-motion: reduce) {
  .bento-btn { transition: background 0.16s ease, color 0.16s ease; }
  .bento-btn:hover, .bento-btn:active,
  .bento-btn.is-on:hover, .bento-btn[aria-pressed="true"]:hover,
  .bento-btn--primary:hover, .bento-btn--primary:active,
  .bento-btn--ghost:active { transform: none; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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