:root {
  --bg: #f4f6f5;
  --surface: #ffffff;
  --surface-2: #eef3f1;
  --text: #17201d;
  /* --ink is a historical alias for --text used by ~80 rules across the
   * file (calendar nav, ribbon labels, schedule headings, public footer,
   * modals etc). Without this alias the var() resolves to invalid,
   * declarations fall back to inherited color, and form controls
   * (button / select / input) drop to the user-agent default (black)
   * which is invisible in dark mode. Keep the alias in light AND every
   * theme override below so it tracks the active text color. */
  --ink: var(--text);
  --muted: #5f6d69;
  --line: #e1e7e4;
  --accent: #14715d;
  --accent-dark: #0d4f41;
  --accent-soft: #dff0eb;
  --warning: #a86617;
  --attention: #46557a;
  --attention-soft: #eef1f7;
  --attention-strong: #2f3a55;
  --shadow: 0 1px 2px rgba(26, 39, 35, 0.04), 0 8px 24px rgba(26, 39, 35, 0.05);
  --radius: 8px;
  --app-content-max: 1440px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  /* Reserve scrollbar space at all times so the main content keeps the
     same width whether the page is long (scrollbar visible) or short
     (no scrollbar). Without this Settings/Payments rendered ~15px
     narrower than Bookings on desktop, which looked like a layout bug. */
  scrollbar-gutter: stable;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

@keyframes softFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }
}



@keyframes ringDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-12px, -8px, 0) scale(1.04);
  }
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  text-decoration: none;
}

.home-page {
  display: none;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #fbfcfb 0%, #f3f7f5 42%, #fbfcfb 100%);
}

.home-page.active {
  display: block;
}

.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 28px;
  position: relative;
  z-index: 20;
}

.home-nav nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-weight: 750;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  display: block;
  height: auto;
}

.full-logo {
  width: 228px;
  max-width: 58vw;
}

.home-nav a {
  text-decoration: none;
}

.mobile-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  font-weight: 800;
}

.mobile-menu-button span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(26, 39, 35, 0.05);
}

.theme-toggle::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid transparent;
  border-radius: 999px;
  pointer-events: none;
}

.theme-toggle span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 63% 36%, #fff 0 24%, transparent 25%),
    linear-gradient(135deg, #10201b, #14715d);
  box-shadow: inset 0 0 0 1px rgba(16, 32, 27, 0.15);
}

.theme-toggle:hover {
  border-color: #bcdad0;
  transform: translateY(-1px);
}

.theme-toggle.theme-nudge {
  animation: theme-nudge 1500ms ease-out 3;
}

.theme-toggle.theme-nudge::after {
  animation: theme-nudge-ring 1500ms ease-out 3;
}

.theme-toggle.theme-nudge span {
  animation: theme-nudge-dot 1500ms ease-out 3;
}

@keyframes theme-nudge {
  0%,
  100% {
    box-shadow: 0 10px 22px rgba(26, 39, 35, 0.05);
    transform: translateY(0);
  }

  35% {
    border-color: rgba(21, 125, 98, 0.44);
    box-shadow:
      0 0 0 6px rgba(101, 196, 166, 0.16),
      0 14px 30px rgba(26, 39, 35, 0.1);
    transform: translateY(-1px);
  }
}

@keyframes theme-nudge-ring {
  0%,
  100% {
    border-color: transparent;
    opacity: 0;
    transform: scale(0.92);
  }

  35% {
    border-color: rgba(101, 196, 166, 0.72);
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes theme-nudge-dot {
  0%,
  100% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle.theme-nudge {
    animation: none;
    box-shadow: 0 0 0 5px rgba(101, 196, 166, 0.16);
  }

  .theme-toggle.theme-nudge::after,
  .theme-toggle.theme-nudge span {
    animation: none;
  }
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  min-height: min(700px, calc(100vh - 76px));
  margin: 0 auto;
  padding: 36px 28px 52px;
}

.hero-copy h1 {
  max-width: 780px;
  margin: 0;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0;
}

.hero-copy p:not(.eyebrow) {
  max-width: 600px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.52;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.hero-secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}

.hero-secondary-link::after {
  content: "→";
  margin-left: 8px;
  color: var(--accent);
}

.hero-secondary-link:hover {
  color: var(--accent-dark);
}

.hero-proof {
  display: grid;
  gap: 9px;
  max-width: 560px;
  margin-top: 24px;
}

.hero-proof span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4e615b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.hero-proof strong {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px #dcefe8;
}

.hero-value-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 610px;
  margin-top: 28px;
}

.hero-value-strip article {
  display: flex;
  min-height: 86px;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(26, 39, 35, 0.04);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.hero-value-strip article:hover {
  border-color: #bcdad0;
  box-shadow: 0 20px 42px rgba(26, 39, 35, 0.08);
  transform: translateY(-3px);
}

.hero-value-strip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.18;
  text-transform: uppercase;
}

.hero-value-strip strong {
  display: block;
  color: var(--text);
  font-size: 21px;
  line-height: 1;
}

.hero-product {
  align-self: stretch;
  display: grid;
  place-items: center;
}

.product-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow:
    0 34px 84px rgba(20, 38, 32, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.hero-callout {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 144px;
  border: 1px solid rgba(20, 113, 93, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  padding: 12px 14px;
  box-shadow: 0 22px 48px rgba(20, 38, 32, 0.13);
}

.hero-callout span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-callout strong {
  color: var(--text);
  font-size: 18px;
}

.deposit-callout {
  top: 216px;
  left: -72px;
}

.mock-field-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.audience-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1180px;
  margin: 34px auto 0;
}

.audience-strip article {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  border: 1px solid rgba(20, 113, 93, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(237, 247, 243, 0.86), rgba(255, 255, 255, 0) 58%),
    radial-gradient(circle at 95% 0%, rgba(123, 181, 161, 0.12), transparent 34%),
    #fff;
  padding: 22px;
  box-shadow: 0 16px 38px rgba(26, 39, 35, 0.055);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.audience-strip article::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--accent), rgba(123, 181, 161, 0.28));
  transform: scaleX(0.58);
  transform-origin: left center;
  transition:
    transform 180ms ease;
}

.audience-strip article:hover {
  border-color: rgba(20, 113, 93, 0.28);
  box-shadow: 0 24px 56px rgba(26, 39, 35, 0.09);
  transform: translateY(-4px);
}

.audience-strip article:hover::before {
  transform: scaleX(1);
}

.audience-strip span,
.audience-strip strong,
.audience-strip small {
  position: relative;
  display: block;
  z-index: 1;
}

.audience-strip span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audience-strip strong {
  margin-top: 14px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.12;
}

.audience-strip small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.audience-strip small::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(20, 113, 93, 0.1);
}

.home-band {
  padding: 72px 28px;
  border-top: 1px solid var(--line);
}

.muted-band {
  background: #eef3f1;
}

.audience-band {
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f7f5 100%);
}

.audience-heading {
  margin-bottom: 0;
}

.section-heading {
  max-width: 1180px;
  margin: 0 auto 28px;
}

.section-heading h2 {
  max-width: 760px;
  margin: 0;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: 0;
}

.section-heading p:not(.eyebrow) {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.feature-grid,
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}

.feature-grid article,
.process-grid article,
.payment-story article {
  min-height: 168px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.feature-grid article {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 42px rgba(26, 39, 35, 0.055);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.feature-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(21, 125, 98, 0.08), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 90% 10%, rgba(119, 174, 158, 0.13), transparent 32%);
}

.feature-grid article > * {
  position: relative;
}

.feature-grid article:hover,
.process-grid article:hover,
.decision-grid article:hover,
.showcase-panel:hover,
.faq-grid article:hover {
  border-color: #bcdad0;
  box-shadow: 0 24px 56px rgba(26, 39, 35, 0.095);
  transform: translateY(-4px);
}

.process-grid article {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(26, 39, 35, 0.06);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.process-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(21, 125, 98, 0.1), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 86% 12%, rgba(119, 174, 158, 0.16), transparent 34%);
}

.process-grid article > * {
  position: relative;
}

.feature-grid > article > strong,
.process-grid > article > strong,
.payment-story strong {
  display: block;
  font-size: 18px;
  line-height: 1.18;
}

.feature-grid > article > p,
.process-grid > article > p,
.payment-story p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.feature-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feature-card-top small {
  max-width: 120px;
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.local-mini {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.local-mini span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 850;
}

.audience-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

.audience-layout .section-heading {
  margin: 0;
}

.audience-list {
  display: grid;
  gap: 12px;
}

.audience-list article {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 18px 18px 18px 56px;
  box-shadow: 0 16px 42px rgba(26, 39, 35, 0.05);
}

.audience-list article::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 23px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(20, 113, 93, 0.26);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--accent) 0 36%, transparent 37%),
    var(--accent-soft);
}

.audience-list strong {
  display: block;
  font-size: 18px;
}

.audience-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.decision-band {
  border-top: 0;
  background:
    linear-gradient(135deg, #10201b 0%, #172621 58%, #eef3f1 58%, #eef3f1 100%);
  color: #fff;
}

.decision-band + .home-band {
  border-top: 0;
}

.decision-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1fr);
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: center;
}

.decision-copy h2 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: 52px;
  line-height: 1.04;
}

.decision-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 18px 0 0;
  color: #c9d9d4;
  font-size: 18px;
  line-height: 1.55;
}

.decision-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.decision-proof span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #e6f1ed;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 850;
}

.decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.decision-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px 14px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 43, 35, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(160deg, #ffffff 0%, #f7fbf9 100%);
  color: var(--text);
  padding: 18px;
  box-shadow: 0 18px 44px rgba(26, 39, 35, 0.055);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.decision-grid article::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  border: 12px solid rgba(20, 113, 93, 0.055);
  animation: ringDrift 11s ease-in-out infinite;
}

.decision-grid article:nth-child(2)::after {
  animation-delay: -3s;
}

.decision-grid article:nth-child(3)::after {
  animation-delay: -6s;
}

.decision-grid span {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: grid;
  width: 48px;
  height: 42px;
  place-items: center;
  border-radius: 0;
  color: var(--text);
  font-weight: 850;
}

.decision-grid strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 21px;
  line-height: 1.15;
}

.decision-grid p {
  position: relative;
  z-index: 1;
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.process-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.process-card-top small {
  max-width: 120px;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.process-card-top span,
.story-number,
.decision-grid span,
.faq-number {
  --bracket-color: var(--text);
  position: relative;
  isolation: isolate;
}

.process-card-top span::before,
.process-card-top span::after,
.story-number::before,
.story-number::after,
.decision-grid span::before,
.decision-grid span::after,
.faq-number::before,
.faq-number::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 13px;
  pointer-events: none;
  z-index: -1;
}

.process-card-top span::before,
.story-number::before,
.decision-grid span::before,
.faq-number::before {
  left: 0;
  border-top: 4px solid var(--bracket-color);
  border-bottom: 4px solid var(--bracket-color);
  border-left: 4px solid var(--bracket-color);
  border-radius: 8px 0 0 8px;
}

.process-card-top span::after,
.story-number::after,
.decision-grid span::after,
.faq-number::after {
  right: 0;
  border-top: 4px solid var(--bracket-color);
  border-right: 4px solid var(--bracket-color);
  border-bottom: 4px solid var(--bracket-color);
  border-radius: 0 8px 8px 0;
}

.process-card-top span,
.story-number {
  display: grid;
  width: 44px;
  height: 38px;
  place-items: center;
  border-radius: 0;
  color: var(--text);
  font-weight: 850;
}

.service-option,
.booking-service-line,
.process-date-row span,
.process-time-row span,
.checkout-line {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.service-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.service-option strong {
  color: var(--accent-dark);
  font-size: 13px;
  white-space: nowrap;
}

.service-option.is-selected {
  border-color: rgba(21, 125, 98, 0.32);
  background: #eef8f4;
  box-shadow: inset 4px 0 0 var(--accent);
}

.payment-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.payment-route span {
  display: grid;
  min-width: 0;
  min-height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.payment-route i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}

.payment-route i::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  margin-left: auto;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

.product-showcase {
  background: #fbfcfb;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}

.showcase-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.dark-panel {
  background: #111c19;
  color: #fff;
}

.mock-window-header {
  display: flex;
  gap: 7px;
  padding: 13px;
  border-bottom: 1px solid var(--line);
  background: rgba(242, 245, 244, 0.86);
}

.dark-panel .mock-window-header {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.mock-window-header span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd6d2;
}

.showcase-booking,
.showcase-admin {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.showcase-booking h3,
.showcase-admin h3 {
  margin: 0;
  font-size: 26px;
}

.service-choice,
.showcase-admin div,
.time-row span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 13px;
}

.service-choice.active,
.time-row .active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.service-choice strong,
.service-choice span,
.showcase-admin strong,
.showcase-admin span {
  display: block;
}

.service-choice span,
.showcase-admin span {
  margin-top: 4px;
  color: var(--muted);
}

.dark-panel .showcase-admin div {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.dark-panel .showcase-admin span {
  color: #b7c7c2;
}

.time-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.time-row span {
  text-align: center;
  font-weight: 850;
}

.pricing-band {
  display: grid;
  /* 1fr, not 0.9fr: fr factors summing below 1 leave a slice of free
     space unfilled, which pulled the pricing card 68px short of the
     1180px grid every other band aligns to. */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 36px;
  align-items: center;
  max-width: none;
  width: 100%;
  margin: 0;
  padding-right: max(24px, calc((100% - 1180px) / 2));
  padding-left: max(24px, calc((100% - 1180px) / 2));
}

.pricing-band.home-band {
  border-top: 0;
}

.pricing-copy h2 {
  max-width: 720px;
  margin: 0;
  font-size: 54px;
  line-height: 1.04;
}

.pricing-copy p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.58;
}

.pricing-card {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111c19;
  color: #fff;
  padding: 30px;
  box-shadow: 0 30px 72px rgba(17, 28, 25, 0.2);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 0%, rgba(101, 196, 166, 0.22), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent 40%);
}

.pricing-card > * {
  position: relative;
}

.pricing-card:hover {
  box-shadow: 0 24px 60px rgba(17, 28, 25, 0.22);
  transform: translateY(-4px);
}

.pricing-card span,
.pricing-card p {
  color: #b7c7c2;
}

.pricing-card strong {
  font-size: 40px;
  line-height: 1;
}

.pricing-card p {
  margin: 0 0 6px;
  line-height: 1.5;
}

.pricing-card ul {
  display: grid;
  gap: 9px;
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  position: relative;
  padding-left: 22px;
  color: #d8e4e0;
  line-height: 1.45;
}

.pricing-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #65c4a6;
}

.faq-band {
  background:
    radial-gradient(circle at 82% 12%, rgba(101, 196, 166, 0.22), transparent 28%),
    linear-gradient(180deg, #10201b 0%, #10201b 42%, #f5faf8 42%, #f5faf8 100%);
  color: #fff;
}

.faq-band .section-heading h2 {
  max-width: 860px;
  color: #fff;
}

.faq-band .section-heading p:not(.eyebrow) {
  max-width: 660px;
  color: #c7d8d2;
}

.faq-grid {
  counter-reset: faq;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}

.faq-grid article {
  counter-increment: faq;
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 178px;
  overflow: hidden;
  border: 1px solid rgba(20, 113, 93, 0.14);
  border-top: 4px solid rgba(20, 113, 93, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, #ffffff 0%, #f8fbfa 100%);
  color: var(--text);
  padding: 24px 24px 24px 80px;
  box-shadow: 0 18px 44px rgba(26, 39, 35, 0.075);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.faq-grid article::before {
  content: none;
}

.faq-number {
  position: absolute;
  left: 24px;
  top: 24px;
  display: grid;
  width: 48px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.faq-grid article::after {
  content: "";
  position: absolute;
  left: 80px;
  right: 24px;
  top: 58px;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 113, 93, 0.14), transparent);
}

.faq-grid article:nth-child(2n) .faq-number {
  --bracket-color: var(--accent);
}

.faq-grid article:nth-child(2n) {
  border-top-color: rgba(20, 113, 93, 0.34);
}

.faq-grid strong {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 1.15;
}

.faq-grid p {
  position: relative;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.home-footer {
  margin: 0;
  border-top: 0;
  background:
    linear-gradient(135deg, #10201b 0%, #123328 58%, #0c1815 100%);
  color: #fff;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 28px 34px;
}

.footer-brand {
  display: grid;
  gap: 16px;
  max-width: 540px;
}

.footer-brand .brand-logo {
  height: 46px;
}

.footer-brand p {
  margin: 0;
  color: #c7d8d2;
  font-size: 17px;
  line-height: 1.55;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.footer-links div {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-links h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 16px;
}

.footer-links a {
  color: #c7d8d2;
  font-weight: 700;
  text-decoration: none;
}

.footer-links a:hover {
  color: #79d8b8;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #a9beb7;
  font-size: 14px;
  font-weight: 700;
}

.home-page.theme-dark {
  --surface: #13231e;
  --surface-2: #10201b;
  --text: #f7fbf9;
  --ink: var(--text);
  --muted: #b8cac4;
  --line: rgba(217, 238, 232, 0.14);
  --accent: #65c4a6;
  --accent-dark: #9be6cc;
  --accent-soft: rgba(101, 196, 166, 0.16);
  --shadow: 0 28px 78px rgba(0, 0, 0, 0.28);
  background:
    radial-gradient(circle at 78% 4%, rgba(101, 196, 166, 0.2), transparent 28%),
    radial-gradient(circle at 8% 20%, rgba(21, 125, 98, 0.26), transparent 32%),
    linear-gradient(180deg, #07100d 0%, #0d1b17 46%, #091411 100%);
  color: var(--text);
}

.home-page.theme-dark .home-nav {
  color: var(--text);
}

.home-page.theme-dark .home-nav nav {
  color: #cadbd5;
}

.home-page.theme-dark .mobile-menu-button,
.home-page.theme-dark .theme-toggle {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.08);
  color: #f7fbf9;
  box-shadow: none;
}

.home-page.theme-dark .theme-toggle span {
  background:
    radial-gradient(circle at 36% 34%, #10201b 0 28%, transparent 29%),
    linear-gradient(135deg, #d8efe7, #65c4a6);
}

.home-page.theme-dark .theme-toggle.theme-nudge {
  animation-name: theme-nudge-dark;
}

@keyframes theme-nudge-dark {
  0%,
  100% {
    box-shadow: none;
    transform: translateY(0);
  }

  35% {
    border-color: rgba(101, 196, 166, 0.48);
    box-shadow:
      0 0 0 6px rgba(101, 196, 166, 0.2),
      0 12px 28px rgba(0, 0, 0, 0.26);
    transform: translateY(-1px);
  }
}

.home-page.theme-dark .nav-cta,
.home-page.theme-dark .primary-button {
  background: #65c4a6;
  color: #07100d;
}

.home-page.theme-dark .nav-cta:hover,
.home-page.theme-dark .primary-button:hover {
  background: #8de0c5;
}

.home-page.theme-dark .hero-copy h1,
.home-page.theme-dark .section-heading h2,
.home-page.theme-dark .pricing-copy h2 {
  color: #ffffff;
}

.home-page.theme-dark .hero-copy p:not(.eyebrow),
.home-page.theme-dark .section-heading p:not(.eyebrow),
.home-page.theme-dark .pricing-copy p:not(.eyebrow) {
  color: #bfd1cb;
}

.home-page.theme-dark .hero-secondary-link {
  color: #e9f4f0;
}

.home-page.theme-dark .hero-secondary-link::after,
.home-page.theme-dark .eyebrow,
.home-page.theme-dark .audience-strip span,
.home-page.theme-dark .coming-card span {
  color: #79d8b8;
}

.home-page.theme-dark .hero-proof span {
  color: #d4e2dd;
}

.home-page.theme-dark .hero-proof strong {
  background: #79d8b8;
  box-shadow: 0 0 0 5px rgba(101, 196, 166, 0.16);
}

.home-page.theme-dark .hero-value-strip article,
.home-page.theme-dark .feature-grid article,
.home-page.theme-dark .process-grid article,
.home-page.theme-dark .payment-story article,
.home-page.theme-dark .audience-strip article,
.home-page.theme-dark .coming-card,
.home-page.theme-dark .faq-grid article {
  border-color: rgba(217, 238, 232, 0.14);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    #12221d;
  color: #f7fbf9;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.home-page.theme-dark .hero-value-strip span,
.home-page.theme-dark .feature-card-top small,
.home-page.theme-dark .process-card-top small,
.home-page.theme-dark .feature-grid > article > p,
.home-page.theme-dark .process-grid > article > p,
.home-page.theme-dark .payment-story p,
.home-page.theme-dark .audience-strip small,
.home-page.theme-dark .coming-card p,
.home-page.theme-dark .faq-grid p {
  color: #b8cac4;
}

.home-page.theme-dark .hero-value-strip strong,
.home-page.theme-dark .audience-strip strong,
.home-page.theme-dark .coming-card strong,
.home-page.theme-dark .faq-grid strong {
  color: #ffffff;
}

.home-page.theme-dark .home-band {
  border-top-color: rgba(217, 238, 232, 0.09);
  background:
    radial-gradient(circle at 86% 10%, rgba(101, 196, 166, 0.1), transparent 28%),
    linear-gradient(180deg, #0a1411 0%, #0f1d19 100%);
}

.home-page.theme-dark .muted-band,
.home-page.theme-dark .audience-band {
  background:
    radial-gradient(circle at 14% 0%, rgba(101, 196, 166, 0.13), transparent 30%),
    linear-gradient(180deg, #11231e 0%, #091411 100%);
}

.home-page.theme-dark .decision-band {
  background:
    linear-gradient(135deg, #07100d 0%, #10201b 58%, #17362e 58%, #21483e 100%);
}

.home-page.theme-dark .decision-grid article {
  border-color: rgba(217, 238, 232, 0.16);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    #f7fbf9;
  color: #17201d;
}

.home-page.theme-dark .decision-grid p {
  color: #61706b;
}

.home-page.theme-dark .decision-grid span {
  --bracket-color: #17201d;
  color: #17201d;
}

.home-page.theme-dark .decision-grid article::after,
.home-page.theme-dark .faq-grid article::before {
  border-color: rgba(101, 196, 166, 0.08);
}

.home-page.theme-dark .booking-preview-card,
.home-page.theme-dark .hero-callout {
  --text: #17201d;
  --ink: var(--text);
  --muted: #697773;
  --line: #dfe6e3;
  --accent: #14715d;
  --accent-dark: #0d4f41;
  --accent-soft: #dff0eb;
  background: #ffffff;
  color: #17201d;
}

.home-page.theme-dark .feature-mini span,
.home-page.theme-dark .feature-mini strong,
.home-page.theme-dark .service-option,
.home-page.theme-dark .setup-summary span,
.home-page.theme-dark .booking-service-line,
.home-page.theme-dark .process-date-row span,
.home-page.theme-dark .process-time-row span,
.home-page.theme-dark .checkout-line,
.home-page.theme-dark .payment-route span,
.home-page.theme-dark .mini-site-card {
  border-color: rgba(217, 238, 232, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf5f1;
}

.home-page.theme-dark .service-option.is-selected {
  border-color: rgba(101, 196, 166, 0.36);
  background: rgba(101, 196, 166, 0.14);
}

.home-page.theme-dark .service-option strong,
.home-page.theme-dark .setup-summary b,
.home-page.theme-dark .mini-site-card > em {
  color: #bff4e2;
}

.home-page.theme-dark .payment-split::before,
.home-page.theme-dark .payment-split::after,
.home-page.theme-dark .faq-grid article::after {
  background: rgba(217, 238, 232, 0.12);
}

.home-page.theme-dark .pricing-card {
  border-color: rgba(101, 196, 166, 0.22);
  background: #07100d;
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.36);
}

.home-page.theme-dark .faq-band {
  background:
    radial-gradient(circle at 82% 12%, rgba(101, 196, 166, 0.2), transparent 28%),
    linear-gradient(180deg, #07100d 0%, #10201b 100%);
}

.home-page.theme-dark .faq-band .section-heading p:not(.eyebrow) {
  color: #bfd1cb;
}

.home-page.theme-dark .faq-number,
.home-page.theme-dark .process-card-top span,
.home-page.theme-dark .story-number {
  --bracket-color: #f7fbf9;
  color: #f7fbf9;
}

.home-page.theme-dark .faq-grid article:nth-child(2n) .faq-number {
  --bracket-color: #65c4a6;
}

.home-page.theme-dark .home-footer {
  background:
    radial-gradient(circle at 78% 0%, rgba(101, 196, 166, 0.15), transparent 28%),
    linear-gradient(135deg, #07100d 0%, #10241e 58%, #050b09 100%);
}

.app-shell {
  display: none;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.owner-login-shell {
  display: none;
  min-height: 100vh;
  place-items: center;
  padding: 28px;
  background: #fbfcfb;
}

.admin-shell {
  display: none;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell.theme-dark,
.admin-shell.theme-dark {
  --bg: #07100d;
  --surface: #122722;
  --surface-2: #1d322b;
  --text: #f4f8f6;
  --ink: var(--text);
  --muted: #c4d2cd;
  --line: rgba(217, 238, 232, 0.16);
  --accent: #65c4a6;
  --accent-dark: #bff4e2;
  --accent-soft: rgba(101, 196, 166, 0.16);
  --attention: #aab6d4;
  --attention-soft: rgba(154, 170, 210, 0.12);
  --attention-strong: #d5dcee;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.22);
  background: var(--bg);
  color: var(--text);
}

.owner-login-shell.active {
  display: grid;
}

.app-shell.active {
  display: grid;
}

.admin-shell.active {
  display: grid;
}

body.public-route .app-shell.active {
  grid-template-columns: 1fr;
}

body.public-route .sidebar,
body.public-route .topbar {
  display: none;
}

body.public-route .main {
  width: auto;
  padding: 28px;
  justify-self: stretch;
  max-width: none;
}

body.public-route .public-view {
  max-width: 1180px;
}

body.public-route .booking-page {
  padding-top: 12px;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 24px;
  background: #101816;
  color: #f7fbfa;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  scrollbar-width: thin;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #d7f2e8;
  color: var(--accent-dark);
  font-weight: 800;
}

.brand-mark-image {
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.sidebar-card span {
  color: #a8b9b4;
  font-size: 13px;
}

.nav {
  display: grid;
  gap: 6px;
}

.app-menu-toggle {
  display: none;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 0 14px;
  font-weight: 850;
}

.nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #cdd9d5;
  padding: 10px 12px 10px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background 120ms ease;
}

.nav-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: rgba(216, 238, 232, 0.6);
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: color 120ms ease;
}

.nav-item span {
  min-width: 0;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.nav-item.active {
  background: rgba(101, 196, 166, 0.08);
  color: #ffffff;
}

.nav-item.active::before {
  background: #65c4a6;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #65c4a6;
}

.nav-link {
  display: block;
  text-decoration: none;
}

.sidebar-card {
  margin-top: auto;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.sidebar-card strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 600;
  color: #f1f6f4;
}

.main {
  min-width: 0;
  width: min(100%, var(--app-content-max));
  padding: 28px;
  justify-self: center;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.topbar h1,
.panel h2,
.business-panel h2,
.booking-step h3,
.summary-panel h3 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-actions {
  display: flex;
  position: relative;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.setup-status {
  position: relative;
}

.setup-status-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.setup-status-button span,
.setup-status-popover .check-list span,
.compact-check-list span {
  flex: 0 0 auto;
}

#setup-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d6a44f;
}

.setup-status.complete #setup-status-dot {
  background: var(--accent);
}

.setup-status-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 30;
  width: min(360px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.setup-status-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 24px;
  left: auto;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface);
  transform: rotate(45deg);
}

.compact-check-list {
  gap: 10px;
}

.setup-task {
  min-width: 0;
}

.setup-task strong {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.2;
}

.setup-task .small-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 10px;
}

.panel-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.panel-theme-toggle span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 63% 36%, #ffffff 0 24%, transparent 25%),
    linear-gradient(135deg, #10201b, #14715d);
  box-shadow: inset 0 0 0 1px rgba(16, 32, 27, 0.16);
}

.app-shell.theme-dark .panel-theme-toggle span,
.admin-shell.theme-dark .panel-theme-toggle span {
  background:
    radial-gradient(circle at 36% 34%, #10201b 0 28%, transparent 29%),
    linear-gradient(135deg, #d8efe7, #65c4a6);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-shell .eyebrow,
.admin-shell .eyebrow {
  color: var(--muted);
}

.primary-button,
.ghost-button,
.small-button,
.icon-button {
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 750;
}

.primary-button {
  background: var(--accent);
  color: #ffffff;
}

.primary-button:hover {
  background: var(--accent-dark);
}

/* Any anchor styled as a primary / ghost / small button should not
 * keep the default text-decoration underline. Without this an
 * <a class="primary-button"> renders as a green pill with the link
 * text underlined inside, which looks broken. Centered inline-flex
 * so the label sits the same as a real <button>. */
a.primary-button,
a.ghost-button,
a.small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ghost-button,
.small-button,
.icon-button {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

.small-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

.danger-button {
  background: #fff5f5;
  border-color: #f1b9b9;
  color: #9b1c1c;
}

.danger-button:hover {
  background: #fde8e8;
}

.app-shell.theme-dark .danger-button,
.admin-shell.theme-dark .danger-button {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.34);
  color: #fecaca;
}

.app-shell.theme-dark .danger-button:hover,
.admin-shell.theme-dark .danger-button:hover {
  background: rgba(248, 113, 113, 0.18);
}

.icon-button {
  width: 38px;
  padding: 0;
}

.full-width {
  width: 100%;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 10px;
  margin-bottom: 14px;
}

.bookings-ribbon {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.ribbon-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 6px 0;
}

.ribbon-row + .ribbon-row {
  border-top: 1px solid var(--line);
}

.app-shell.theme-dark .ribbon-row + .ribbon-row,
.admin-shell.theme-dark .ribbon-row + .ribbon-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.ribbon-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ribbon-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ribbon-group strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ribbon-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: var(--line);
  margin-block: 2px;
  margin-inline: 4px;
}

#bookings-view #dashboard-alerts {
  display: none !important;
}

.metric,
.panel,
.business-panel,
.access-banner,
.booking-flow,
.summary-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.app-shell .metric,
.app-shell .panel,
.admin-shell .panel {
  box-shadow: none;
}

.app-shell .panel .metric,
.app-shell .panel .booking-row,
.app-shell .panel .dashboard-booking-card,
.app-shell .panel .service-card,
.app-shell .panel .manual-section,
.app-shell .panel .manual-summary-card {
  box-shadow: none;
}

.metric {
  padding: 14px 16px;
}

.booking-metrics,
.revenue-metrics {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 86px;
  padding: 14px 16px;
}

.appointment-metric-title {
  display: grid;
  gap: 3px;
}

.appointment-metric-title .metric-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.appointment-metric-title strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.05;
}

.appointment-metric-title small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.appointment-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.revenue-metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metric-split {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.metric-split:first-child {
  border-left: 0;
  padding-left: 0;
}

.metric span,
.metric small {
  display: block;
  color: var(--muted);
}

.metric strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.booking-metrics .metric-split strong,
.revenue-metrics .metric-split strong {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.booking-metrics .metric-split span,
.revenue-metrics .metric-split span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.appointment-metric-title strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
}

.panel {
  padding: 20px;
}

.wide-panel {
  min-width: 0;
}

.dashboard-content-grid {
  grid-template-columns: 1fr;
}

.dashboard-live-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  gap: 16px;
  align-items: stretch;
}

.dashboard-calendar-card,
.dashboard-day-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.dashboard-calendar-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

.dashboard-day-details {
  min-height: 560px;
}

.dashboard-calendar-header,
.dashboard-day-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-calendar-header {
  align-items: center;
}

.dashboard-day-heading {
  display: grid;
  justify-content: start;
  gap: 5px;
}

.dashboard-calendar-header strong {
  font-size: 18px;
  text-align: center;
}

.dashboard-calendar-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-calendar-grid.weeks-4 {
  grid-template-rows: auto repeat(4, minmax(0, 1fr));
}

.dashboard-calendar-grid.weeks-5 {
  grid-template-rows: auto repeat(5, minmax(0, 1fr));
}

.dashboard-calendar-grid.weeks-6 {
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
}

.dashboard-calendar-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.dashboard-calendar-cell {
  min-height: 57px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--text);
  padding: 7px;
  display: grid;
  align-content: space-between;
  gap: 4px;
  text-align: left;
}

.dashboard-calendar-cell.is-empty {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

.dashboard-calendar-cell span {
  font-size: 13px;
  font-weight: 850;
}

.dashboard-calendar-cell strong {
  width: fit-content;
  min-width: 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.dashboard-calendar-cell.has-bookings {
  border-color: #b9d8ce;
}

.dashboard-calendar-cell.active {
  border-color: var(--accent);
  background: #eaf4f0;
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.14);
}

.dashboard-calendar-cell.is-today:not(.active) {
  border-color: rgba(20, 126, 101, 0.35);
}

.dashboard-day-heading h3 {
  margin: 0;
  font-size: 24px;
}

.dashboard-day-heading .eyebrow {
  margin-bottom: 0;
}

.dashboard-day-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dashboard-day-title-row > span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #edf3f1;
  color: var(--muted);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.dashboard-day-bookings {
  max-height: 488px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.dashboard-day-bookings::-webkit-scrollbar {
  width: 8px;
}

.dashboard-day-bookings::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-day-bookings::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c9d8d3;
}

.dashboard-booking-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(150px, auto);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.dashboard-booking-card:hover,
.dashboard-booking-card:focus-visible {
  border-color: rgba(20, 126, 101, 0.4);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.08);
  outline: 0;
}

.dashboard-booking-card.expanded {
  border-color: rgba(20, 126, 101, 0.45);
}

.dashboard-booking-card.pay-on-arrival {
  border-color: rgba(70, 85, 122, 0.28);
  background: var(--attention-soft);
}

.dashboard-booking-card.pay-on-arrival.expanded {
  border-color: rgba(70, 85, 122, 0.42);
}

.dashboard-booking-time,
.dashboard-booking-payment {
  display: grid;
  align-content: center;
  gap: 4px;
  border-radius: 8px;
  background: #edf3f1;
  padding: 10px;
}

.dashboard-booking-time strong {
  font-size: 22px;
  line-height: 1;
}

/* Inline pill + kebab row inside the expanded dashboard booking card.
 * Replaces the old dead status <select> + Mark-paid + Send-link buttons
 * with the same kebab pattern used on the schedule list / day timeline. */
.dashboard-booking-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.dashboard-booking-time span,
.dashboard-booking-payment small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-booking-main {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.dashboard-booking-main strong {
  font-size: 18px;
  line-height: 1.1;
}

.dashboard-booking-main span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.dashboard-booking-payment {
  justify-items: start;
}

.dashboard-booking-payment.payment-attention {
  border: 1px solid rgba(70, 85, 122, 0.24);
  background: var(--attention-soft);
}

.dashboard-booking-payment span {
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
}

.dashboard-booking-payment.payment-attention span {
  color: var(--attention-strong);
}

.dashboard-booking-payment.payment-attention small {
  color: var(--attention);
}

.dashboard-booking-payment .dashboard-status-select {
  width: 100%;
  min-height: 36px;
  margin-top: 6px;
  background: var(--surface);
}

.dashboard-booking-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  cursor: default;
}

.dashboard-booking-details > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: #edf3f1;
}

.dashboard-booking-details > div.wide {
  grid-column: 1 / -1;
}

.dashboard-booking-details span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-booking-details strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.app-shell.theme-dark .dashboard-calendar-card,
.admin-shell.theme-dark .dashboard-calendar-card,
.app-shell.theme-dark .dashboard-day-details,
.admin-shell.theme-dark .dashboard-day-details,
.app-shell.theme-dark .dashboard-calendar-cell,
.admin-shell.theme-dark .dashboard-calendar-cell,
.app-shell.theme-dark .dashboard-booking-card,
.admin-shell.theme-dark .dashboard-booking-card {
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark .dashboard-calendar-cell.active,
.admin-shell.theme-dark .dashboard-calendar-cell.active,
.app-shell.theme-dark .dashboard-booking-time,
.admin-shell.theme-dark .dashboard-booking-time,
.app-shell.theme-dark .dashboard-booking-payment,
.admin-shell.theme-dark .dashboard-booking-payment,
.app-shell.theme-dark .dashboard-booking-details > div,
.admin-shell.theme-dark .dashboard-booking-details > div,
.app-shell.theme-dark .dashboard-day-title-row > span,
.admin-shell.theme-dark .dashboard-day-title-row > span {
  background: rgba(111, 208, 181, 0.1);
}

.app-shell.theme-dark .dashboard-calendar-cell strong,
.admin-shell.theme-dark .dashboard-calendar-cell strong {
  background: rgba(111, 208, 181, 0.18);
  color: var(--accent);
}

.app-shell.theme-dark .dashboard-booking-card.pay-on-arrival,
.admin-shell.theme-dark .dashboard-booking-card.pay-on-arrival,
.app-shell.theme-dark .booking-row.pay-on-arrival,
.admin-shell.theme-dark .booking-row.pay-on-arrival {
  border-color: rgba(170, 182, 212, 0.32);
  background: rgba(170, 182, 212, 0.07);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention {
  border-color: rgba(170, 182, 212, 0.24);
  background: rgba(170, 182, 212, 0.1);
}

.app-shell.theme-dark .booking-row.needs-attention:not(.pay-on-arrival) .booking-actions,
.admin-shell.theme-dark .booking-row.needs-attention:not(.pay-on-arrival) .booking-actions {
  background: rgba(170, 182, 212, 0.1);
  box-shadow: inset 3px 0 0 rgba(170, 182, 212, 0.5);
}

.app-shell.theme-dark .booking-row.pay-on-arrival .booking-actions,
.admin-shell.theme-dark .booking-row.pay-on-arrival .booking-actions {
  border-color: rgba(170, 182, 212, 0.24);
  background: rgba(170, 182, 212, 0.1);
  box-shadow: none;
}

.app-shell.theme-dark .booking-row.pay-on-arrival .status-select,
.admin-shell.theme-dark .booking-row.pay-on-arrival .status-select {
  border-color: rgba(170, 182, 212, 0.28);
  background: rgba(7, 16, 13, 0.58);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention span,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention span,
.app-shell.theme-dark .booking-payment-meta.payment-attention,
.admin-shell.theme-dark .booking-payment-meta.payment-attention,
.app-shell.theme-dark .amount.payment-attention,
.admin-shell.theme-dark .amount.payment-attention {
  color: var(--attention-strong);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention small,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention small,
.app-shell.theme-dark .amount.payment-attention small,
.admin-shell.theme-dark .amount.payment-attention small {
  color: var(--attention);
}

.app-shell.theme-dark .dashboard-day-bookings::-webkit-scrollbar-thumb,
.admin-shell.theme-dark .dashboard-day-bookings::-webkit-scrollbar-thumb {
  background: rgba(188, 235, 221, 0.3);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-live-queue-panel .panel-header {
  align-items: center;
  justify-content: flex-start;
}

.dashboard-live-queue-panel .panel-header-actions {
  margin-left: 14px;
}

.dashboard-live-queue-panel .panel-header-actions .primary-button,
.dashboard-live-queue-panel .panel-header-actions .small-button {
  min-height: 42px;
}

.admin-business-list {
  display: grid;
  gap: 12px;
}

.admin-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-login-panel {
  max-width: 560px;
}

.login-card {
  display: grid;
  gap: 18px;
  width: min(100%, 440px);
  padding: 32px 30px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card.register-mode {
  width: min(100%, 720px);
}

.login-card-header {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.login-card.register-mode .login-card-header {
  gap: 12px;
}

.login-logo {
  width: 168px;
  max-width: 60vw;
}

.login-card-heading {
  display: grid;
  gap: 6px;
}

.login-card h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.login-card.register-mode h1 {
  font-size: 30px;
}

.login-card p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.95rem;
}

.admin-login-form {
  display: grid;
  gap: 14px;
}

.admin-login-form label,
.admin-login-form input,
.admin-login-form textarea {
  display: block;
  width: 100%;
}

.admin-login-form label {
  color: #33413d;
  font-weight: 750;
}

.app-shell.theme-dark .admin-login-form label,
.admin-shell.theme-dark .admin-login-form label {
  color: var(--text);
}

.field-hint {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.field-hint strong {
  color: var(--accent);
  font-weight: 800;
}

/* Required field marker: a small red asterisk next to the label text.
 * Owners learn at a glance which fields can't be left blank without
 * needing to click Save first and read a toast. Pair it with the HTML5
 * `required` attribute on the input/textarea so the browser also shows
 * its native "Please fill out this field" tooltip on attempted submit. */
.required-mark {
  color: var(--danger, #c0392b);
  font-weight: 700;
  margin-left: 2px;
}

/* When a required field is left empty and the form is submitted, the
 * browser adds :invalid. We highlight the offending input with a subtle
 * red ring so the eye lands on it. The :focus override keeps the calm
 * mint accent while the owner is actively typing. */
input:user-invalid,
textarea:user-invalid {
  border-color: var(--danger, #c0392b);
  box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.2);
}

.slug-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

/* Keep the "Use name" button on a single line even on narrow viewports. */
.slug-input-row #business-slug-from-name {
  white-space: nowrap;
}

.admin-login-form input,
.admin-login-form textarea {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
}

.admin-login-form textarea {
  min-height: 92px;
  padding: 12px;
  resize: vertical;
}

.owner-register-form {
  gap: 16px;
}

.owner-register-form textarea {
  min-height: 112px;
}

/* Register form keeps two columns at any width above mobile.
   Card is capped at 720px so two-col always fits. */
.owner-register-form .form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .owner-register-form .form-grid.two-col {
    grid-template-columns: 1fr;
  }
}

.admin-login-panel p {
  margin: 14px 0 0;
  color: var(--muted);
}

.login-secondary-action {
  justify-self: start;
}

.login-text-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease;
}

.login-text-link:hover,
.login-text-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  outline: none;
}

.login-text-link-strong {
  color: var(--accent);
  font-weight: 800;
}

.login-text-link-strong:hover,
.login-text-link-strong:focus-visible {
  color: var(--accent-dark);
}

.admin-login-form .login-text-link {
  justify-self: center;
  margin-top: 4px;
}

.login-switch {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
}

.login-switch .login-text-link {
  margin-left: 4px;
}

.login-status-line {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.login-status-line:empty {
  display: none;
}

.login-card-footer {
  margin: 0;
  padding-top: 4px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.login-card-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-card-footer a:hover {
  color: var(--accent);
}

.reset-dev-link {
  display: inline-flex;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.admin-business-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(120px, 0.68fr)) minmax(320px, 1.35fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.admin-customer-row {
  grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(160px, 0.85fr)) auto;
}

.admin-archived-row {
  opacity: 0.82;
}

.admin-business-row strong,
.admin-business-row span {
  display: block;
}

.admin-business-row span,
.admin-business-row small {
  color: var(--muted);
}

.admin-customer-identity,
.admin-row-card {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-row-kicker {
  color: var(--accent) !important;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-row-card strong,
.admin-customer-identity strong {
  overflow-wrap: anywhere;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-row-actions {
  min-width: 190px;
}

.admin-custom-access-form {
  display: grid;
  grid-template-columns: minmax(64px, 0.7fr) minmax(92px, 0.9fr) auto;
  gap: 8px;
  width: 100%;
}

.admin-custom-access-form input,
.admin-custom-access-form select {
  min-height: 38px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
}

.admin-detail-grid,
.admin-detail-columns {
  display: grid;
  gap: 14px;
}

.admin-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-detail-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.admin-detail-card,
.admin-detail-section,
.admin-detail-columns section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 16px;
}

.admin-detail-section {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.admin-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-detail-section h3,
.admin-detail-section p {
  margin: 0;
}

.admin-detail-section p {
  color: var(--muted);
}

.admin-billing-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-billing-table div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.admin-billing-table strong,
.admin-billing-table span {
  display: block;
  overflow-wrap: anywhere;
}

.admin-billing-table span {
  margin-top: 4px;
  color: var(--muted);
}

.admin-billing-actions {
  justify-content: flex-start;
}

.admin-technical-details {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(237, 243, 241, 0.48);
  padding: 10px 12px;
}

.admin-technical-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.admin-technical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.admin-technical-grid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.admin-technical-grid strong,
.admin-technical-grid span {
  display: block;
  overflow-wrap: anywhere;
}

.admin-technical-grid strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.admin-technical-grid span {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--text);
}

.admin-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-control-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.admin-control-card > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-control-card strong,
.admin-control-card p {
  margin: 0;
}

.admin-control-card strong {
  font-size: 18px;
  line-height: 1.15;
}

.admin-control-card p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-control-card button {
  width: 100%;
  align-self: end;
}

.admin-danger-card {
  border-color: rgba(185, 79, 72, 0.28);
  background: #fffafa;
}

.admin-danger-card > span {
  color: #9b1c1c;
}

.admin-record-section {
  border-style: dashed;
}

.status-pill.archived {
  background: rgba(91, 104, 99, 0.13);
  color: var(--muted);
}

.admin-inline-actions,
.admin-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-compact-access-form {
  max-width: 430px;
}

.admin-detail-card strong,
.admin-detail-card span,
.admin-detail-card small {
  display: block;
}

.admin-detail-card span,
.admin-detail-card small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-detail-columns h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.admin-mini-list {
  display: grid;
  gap: 8px;
}

.admin-mini-list div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.admin-mini-list strong,
.admin-mini-list span {
  display: block;
  overflow-wrap: anywhere;
}

.admin-mini-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.admin-note-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-note-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  padding: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #e4f3ec;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
}

.status-pill.active {
  background: #e4f3ec;
  color: var(--accent-dark);
}

.status-pill.inactive {
  background: #eef2f1;
  color: #65736f;
}

.app-shell.theme-dark .status-pill.active,
.admin-shell.theme-dark .status-pill.active {
  background: rgba(101, 196, 166, 0.16);
  color: #bcebdd;
}

.app-shell.theme-dark .status-pill.inactive,
.admin-shell.theme-dark .status-pill.inactive {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.status-pill.blocked {
  background: #fde8e8;
  color: #9b1c1c;
}

.status-pill.manual-free,
.status-pill.lifetime {
  background: #eef0ff;
  color: #35308f;
}

.booking-list {
  display: grid;
  gap: 10px;
}

.booking-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(170px, auto);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.booking-card {
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.booking-card:hover,
.booking-card:focus-visible {
  border-color: rgba(20, 126, 101, 0.4);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.08);
  outline: 0;
}

.booking-card.expanded {
  border-color: rgba(20, 126, 101, 0.45);
}

.booking-time-badge,
.booking-actions {
  display: grid;
  align-content: center;
  gap: 4px;
  border-radius: 8px;
  background: #edf3f1;
  padding: 10px;
}

.booking-time-badge {
  place-items: center;
}

.booking-time-badge strong {
  font-size: 24px;
  line-height: 1;
}

.booking-card-main {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.booking-card-main strong {
  font-size: 18px;
  line-height: 1.1;
}

.booking-card-main span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.booking-card-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.booking-row.pay-on-arrival {
  border-color: rgba(70, 85, 122, 0.22);
  background: var(--attention-soft);
}

.booking-row.needs-attention:not(.pay-on-arrival) {
  border-color: rgba(70, 85, 122, 0.26);
}

.app-shell.theme-dark .booking-row,
.admin-shell.theme-dark .booking-row,
.app-shell.theme-dark .service-card,
.admin-shell.theme-dark .service-card,
.app-shell.theme-dark .admin-business-row,
.admin-shell.theme-dark .admin-business-row,
.app-shell.theme-dark .admin-control-card,
.admin-shell.theme-dark .admin-control-card,
.app-shell.theme-dark .hours-row,
.admin-shell.theme-dark .hours-row,
.app-shell.theme-dark .blocked-list div,
.admin-shell.theme-dark .blocked-list div {
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark .admin-danger-card,
.admin-shell.theme-dark .admin-danger-card {
  border-color: rgba(214, 164, 79, 0.32);
  background: rgba(214, 164, 79, 0.08);
}

.app-shell.theme-dark .admin-danger-card > span,
.admin-shell.theme-dark .admin-danger-card > span {
  color: #f0c979;
}

.booking-row strong,
.booking-row span {
  display: block;
}

.booking-row span,
.booking-row small,
.service-card p,
.business-panel p,
.business-details span,
.blocked-list span,
.secure-note {
  color: var(--muted);
}

.booking-payment-meta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.booking-payment-meta.payment-attention,
.amount.payment-attention {
  color: var(--text);
}

.amount.payment-attention {
  display: grid;
  align-content: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.booking-row.pay-on-arrival .booking-actions {
  border: 1px solid rgba(70, 85, 122, 0.22);
  background: var(--attention-soft);
  box-shadow: none;
}

.booking-row.needs-attention:not(.pay-on-arrival) .booking-actions {
  background: var(--attention-soft);
  box-shadow: inset 3px 0 0 var(--attention);
}

.booking-row.pay-on-arrival .amount strong {
  color: var(--attention-strong);
  font-size: 17px;
}

.booking-row.pay-on-arrival .amount {
  justify-items: start;
  text-align: left;
}

.booking-row.pay-on-arrival .status-select {
  min-height: 30px;
  margin-top: 6px;
  border-color: rgba(70, 85, 122, 0.24);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  font-size: 13px;
}

.status {
  min-width: 106px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.booking-card-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  cursor: default;
}

.booking-card-details > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: #edf3f1;
}

.booking-card-details > div.wide {
  grid-column: 1 / -1;
}

.booking-card-details span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.booking-card-details strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.amount {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
  font-weight: 800;
}

.amount strong {
  line-height: 1.15;
}

.amount small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.amount.payment-attention small {
  color: #746650;
}

.check-list {
  display: grid;
  gap: 14px;
}

.check-list div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #33413d;
}

.app-shell.theme-dark .check-list div,
.admin-shell.theme-dark .check-list div {
  color: var(--text);
}

.check-list span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.check-list .muted-check span {
  background: #b8c6c1;
}

.billing-box {
  display: grid;
  gap: 12px;
}

.dashboard-alerts {
  display: grid;
  gap: 10px;
  margin: -2px 0 14px;
}

.dashboard-alerts.hidden {
  display: none;
}

.attention-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 164, 79, 0.34);
  border-radius: 8px;
  background: rgba(214, 164, 79, 0.08);
}

.attention-alert > div:first-child {
  display: grid;
  gap: 3px;
}

.attention-alert strong,
.attention-alert p {
  margin: 0;
}

.attention-alert strong {
  font-size: 16px;
}

.attention-alert p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-connect-alert {
  border-color: rgba(20, 126, 101, 0.24);
  background: rgba(20, 126, 101, 0.06);
}

.payments-board {
  display: grid;
  gap: 14px;
}

.payments-command-card,
.payments-task-card,
.payments-activity-card,
.payments-money-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.payments-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  background:
    radial-gradient(circle at 96% 10%, rgba(101, 196, 166, 0.12), transparent 34%),
    var(--surface);
}

.payments-command-card[data-state="connected"] {
  border-color: rgba(20, 126, 101, 0.24);
  background:
    radial-gradient(circle at 96% 10%, rgba(101, 196, 166, 0.18), transparent 35%),
    rgba(20, 126, 101, 0.045);
}

.payments-command-status {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.payments-state-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d6a44f;
  box-shadow: 0 0 0 5px rgba(214, 164, 79, 0.1);
}

.payments-command-card[data-state="connected"] .payments-state-dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(20, 126, 101, 0.1);
}

.payments-title-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.payments-command-card h3,
.payments-command-card p,
.payments-command-actions p,
.payments-task-card h3,
.payments-task-card p,
.payments-activity-card h3,
.payments-data-list {
  margin: 0;
}

.payments-command-card h3 {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.12;
}

.payments-command-card p {
  max-width: 620px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.3;
}

.payments-status-badge {
  display: none;
  min-height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #edf3f1;
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.payments-status-badge[data-state="connected"] {
  background: rgba(20, 126, 101, 0.13);
  color: var(--accent-dark);
}

.payments-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: min(460px, 100%);
}

.payments-command-actions .primary-button,
.payments-command-actions .ghost-button {
  width: auto;
  max-width: none;
  min-height: 40px;
  padding-inline: 18px;
}

.payments-command-actions p {
  flex-basis: 100%;
  max-width: 360px;
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.payments-money-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.payments-money-card {
  display: grid;
  min-height: 74px;
  gap: 4px;
  align-content: center;
  justify-items: start;
  min-width: 0;
  padding: 12px 16px;
  text-align: left;
  background:
    radial-gradient(circle at 92% 0%, rgba(101, 196, 166, 0.13), transparent 42%),
    var(--surface-2);
}

.payments-money-card span,
.payments-money-card small {
  color: var(--muted);
  font-weight: 800;
}

.payments-money-card span {
  font-size: 12px;
  letter-spacing: 0;
}

.payments-money-card strong {
  color: var(--text);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
}

.payments-money-card-primary,
.payments-money-card:first-child {
  border-color: rgba(20, 126, 101, 0.22);
  background:
    linear-gradient(135deg, rgba(101, 196, 166, 0.2), rgba(255, 255, 255, 0.74)),
    var(--surface-2);
}

.payments-money-card small {
  font-size: 11px;
  line-height: 1.2;
}

.payments-task-card,
.payments-activity-card {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

.payments-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payments-section-title h3,
.payments-task-card h3,
.payments-task-card p {
  margin: 0;
}

.payments-section-title h3 {
  font-size: clamp(22px, 2vw, 30px);
}

.payments-task-list,
.payments-activity-list {
  display: grid;
  gap: 10px;
}

.payments-task-item,
.payments-activity-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
}

.payments-task-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.payments-task-item > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d6a44f;
  box-shadow: 0 0 0 5px rgba(214, 164, 79, 0.1);
}

.payments-task-item strong,
.payments-task-item p,
.payments-activity-row strong,
.payments-activity-row span {
  display: block;
  overflow-wrap: anywhere;
}

.payments-task-item p,
.payments-activity-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.payments-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.payments-activity-row > div:last-child {
  text-align: right;
}

.payments-activity-row.attention {
  border-color: rgba(214, 164, 79, 0.36);
  background: #fffaf0;
}

.payments-data-list {
  display: grid;
  gap: 8px;
}

.payments-data-list div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.payments-data-list dd {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
}

.payments-data-list dt,
.payments-task-card p,
.payments-data-list dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.payments-data-list dt {
  text-transform: uppercase;
}

.payments-data-list dd {
  margin: 0;
}

.payments-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  letter-spacing: 0;
}

.payments-technical-details {
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.payments-technical-details summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  list-style: none;
}

.payments-technical-details summary::-webkit-details-marker {
  display: none;
}

.payments-technical-details summary::after {
  content: "+";
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
}

.payments-technical-details[open] summary {
  border-bottom: 0;
}

.payments-technical-details[open] summary::after {
  content: "-";
}

.payments-technical-details > div {
  padding: 8px 0 0;
}

@media (max-width: 1180px) {
  .payments-command-card {
    grid-template-columns: 1fr;
  }

  .payments-command-actions {
    justify-content: stretch;
    min-width: 0;
  }

  .payments-command-actions .primary-button,
  .payments-command-actions .ghost-button {
    width: 100%;
  }

  .payments-command-actions p {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .payments-money-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

.app-shell.theme-dark .payments-status-badge[data-state="connected"],
.admin-shell.theme-dark .payments-status-badge[data-state="connected"] {
  background: rgba(111, 208, 181, 0.14);
  color: #bcebdd;
}

.app-shell.theme-dark .payments-command-card,
.admin-shell.theme-dark .payments-command-card,
.app-shell.theme-dark .payments-task-card,
.admin-shell.theme-dark .payments-task-card,
.app-shell.theme-dark .payments-activity-card,
.admin-shell.theme-dark .payments-activity-card,
.app-shell.theme-dark .payments-money-card,
.admin-shell.theme-dark .payments-money-card {
  background: rgba(255, 255, 255, 0.035);
}

.app-shell.theme-dark .payments-command-card[data-state="connected"],
.admin-shell.theme-dark .payments-command-card[data-state="connected"] {
  border-color: rgba(111, 208, 181, 0.24);
  background: rgba(101, 196, 166, 0.08);
}

.app-shell.theme-dark .payments-money-card-primary,
.admin-shell.theme-dark .payments-money-card-primary,
.app-shell.theme-dark .payments-money-card:first-child,
.admin-shell.theme-dark .payments-money-card:first-child {
  border-color: rgba(111, 208, 181, 0.26);
  background: rgba(111, 208, 181, 0.09);
}

.app-shell.theme-dark .payments-task-item,
.admin-shell.theme-dark .payments-task-item,
.app-shell.theme-dark .payments-activity-row,
.admin-shell.theme-dark .payments-activity-row {
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark .payments-activity-row.attention,
.admin-shell.theme-dark .payments-activity-row.attention {
  border-color: rgba(214, 164, 79, 0.32);
  background: rgba(214, 164, 79, 0.08);
}

.app-shell.theme-dark .payments-task-card,
.admin-shell.theme-dark .payments-task-card,
.app-shell.theme-dark .payments-activity-card,
.admin-shell.theme-dark .payments-activity-card {
  background: rgba(255, 255, 255, 0.025);
}

.app-shell.theme-dark .attention-alert,
.admin-shell.theme-dark .attention-alert {
  border-color: rgba(214, 164, 79, 0.32);
  background: rgba(214, 164, 79, 0.1);
}

.app-shell.theme-dark .dashboard-connect-alert,
.admin-shell.theme-dark .dashboard-connect-alert {
  border-color: rgba(111, 208, 181, 0.24);
  background: rgba(111, 208, 181, 0.08);
}

.billing-reminder-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.billing-reminder-actions .primary-button,
.billing-reminder-actions .ghost-button {
  min-height: 36px;
}

.billing-box strong,
.billing-box span {
  display: block;
}

.billing-box strong {
  font-size: 22px;
}

.billing-box span,
.billing-box p {
  color: var(--muted);
}

.billing-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.billing-state {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
}

.billing-box .connect-requirements {
  border: 1px solid #d7e2de;
  border-radius: 8px;
  background: #f7fbf9;
  padding: 10px 12px;
  color: #33413d;
}

.app-shell.theme-dark .billing-box .connect-requirements,
.admin-shell.theme-dark .billing-box .connect-requirements {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.segmented button,
.payment-choice button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 750;
}

.segmented .active,
.payment-choice .active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(20, 27, 24, 0.08);
}

.booking-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.booking-toolbar .primary-button {
  min-height: 42px;
}

#bookings-view .booking-toolbar {
  justify-content: flex-start;
  margin-bottom: 18px;
}

#bookings-view .booking-toolbar .segmented {
  min-width: 0;
  flex-wrap: wrap;
}

#bookings-view .booking-toolbar .segmented button {
  white-space: nowrap;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-empty-state {
  grid-column: 1 / -1;
}

.link-helper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.link-helper span,
.service-link-box span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.link-helper strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.settings-form-section {
  display: grid;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.settings-form-section:first-child {
  padding-top: 2px;
  border-top: 0;
}

.settings-section-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.settings-form .form-grid.two-col {
  gap: 14px;
}

.settings-form textarea {
  min-height: 92px;
  resize: vertical;
}

.settings-form-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 12px;
  align-items: stretch;
  padding-top: 2px;
}

.settings-link-helper {
  margin-bottom: 0;
}

.settings-form-footer > .primary-button {
  min-height: 100%;
  padding-inline: 24px;
}

.service-form {
  display: none;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.service-form.active {
  display: grid;
}

.compact-form {
  margin-bottom: 14px;
}

.hidden {
  display: none !important;
}

.form-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.form-header h3 {
  margin: 0;
}

.service-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.service-duration-field {
  display: grid;
  gap: 7px;
}

.field-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.duration-input-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.duration-input-row label {
  gap: 5px;
}

.service-form input,
.service-form textarea,
.service-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form {
  gap: 18px;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.manual-booking-form {
  gap: 18px;
  padding: 18px;
  background: var(--surface);
  box-shadow: none;
}

.manual-form-header {
  align-items: flex-start;
}

.manual-form-actions {
  justify-content: flex-end;
  margin-bottom: -4px;
}

.manual-booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.46fr);
  gap: 18px;
  align-items: start;
}

.manual-section,
.manual-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.manual-section {
  padding: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.manual-appointment-section {
  grid-column: 1;
}

.manual-section-heading {
  margin-bottom: 12px;
}

.manual-section-heading h4,
.manual-summary-card h4 {
  margin: 0;
  font-size: 20px;
}

.manual-field-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(156px, 0.34fr);
  gap: 12px;
  align-items: start;
}

.manual-field-wide {
  grid-column: 1 / -1;
}

.manual-service-field {
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.manual-service-select {
  display: none;
}

.manual-service-trigger {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
}

.manual-service-trigger:hover,
.manual-service-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.1);
}

.manual-service-trigger span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.manual-service-trigger strong,
.manual-service-trigger small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-service-trigger strong {
  color: var(--text);
  font-size: 19px;
  font-weight: 900;
}

.manual-service-trigger small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-service-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(15, 36, 30, 0.16);
}

.manual-service-menu.hidden {
  display: none;
}

#manual-service-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.manual-service-options {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-color: rgba(20, 126, 101, 0.32) transparent;
  scrollbar-width: thin;
}

.manual-service-option {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.manual-service-option strong,
.manual-service-option span {
  display: block;
}

.manual-service-option strong {
  font-size: 16px;
  font-weight: 900;
}

.manual-service-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.manual-service-option:not(.active):hover {
  border-color: rgba(20, 126, 101, 0.42);
}

.manual-service-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.12);
}

.manual-service-empty {
  min-height: 54px;
  display: flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 12px;
  font-weight: 850;
}

.manual-date-field {
  order: 2;
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.manual-customer-inline {
  order: 4;
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.manual-customer-inline .manual-section-heading {
  margin-bottom: 6px;
}

.manual-customer-inline .manual-section-heading h4 {
  font-size: 16px;
}

.manual-customer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manual-customer-fields .manual-name-field {
  grid-column: 1;
  grid-row: 1;
}

.manual-customer-fields .manual-email-field {
  grid-column: 1;
  grid-row: 2;
}

.manual-customer-fields .manual-phone-field {
  grid-column: 1;
  grid-row: 3;
}

.manual-customer-fields .manual-note-field {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.manual-customer-fields .manual-note-field textarea {
  height: 100%;
  min-height: 88px;
  resize: vertical;
}

.manual-time-field {
  order: 3;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.manual-time-select {
  display: none;
}

.manual-time-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(60px, 1fr));
  gap: 5px;
}

.manual-time-option {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  padding: 0 6px;
  font-size: 13px;
  font-weight: 800;
}

.manual-time-option:not(.active):hover {
  border-color: rgba(20, 126, 101, 0.42);
}

.manual-time-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.12);
}

.manual-time-empty {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 12px;
  font-weight: 850;
}

.manual-time-field p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.manual-date-trigger {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  text-align: left;
}

.manual-date-trigger:hover,
.manual-date-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.manual-date-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: min(348px, calc(100vw - 56px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(15, 36, 30, 0.16);
}

.manual-date-picker-inline {
  position: static;
  z-index: auto;
  width: 100%;
  padding: 14px;
  background: var(--surface-2);
  box-shadow: none;
}

.manual-date-picker-inline.hidden {
  display: block;
}

.manual-date-picker-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.manual-date-picker-header strong {
  color: var(--text);
  font-size: 15px;
  text-align: center;
}

.manual-date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.manual-date-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.manual-date-cell {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 850;
}

.manual-date-picker-inline .manual-date-cell {
  min-height: 42px;
}

.manual-date-cell.is-empty {
  border-color: transparent;
  background: transparent;
}

.manual-date-cell:not(:disabled):hover {
  border-color: var(--accent);
}

.manual-date-cell.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.12);
}

.manual-date-cell.unavailable,
.manual-date-cell:disabled {
  background: var(--surface-2);
  color: rgba(104, 121, 116, 0.52);
  cursor: not-allowed;
}

/* Closed-day: studio normally closed on this date but the owner can still
   create a manual booking (override). Subtle stripe pattern + muted text
   so it reads as "different from open days" without looking disabled.
   Selector matches the same specificity as the bookings-view-scoped rule
   that sets a flat background, so the stripe wins. */
#bookings-view .manual-date-cell.closed-day,
.manual-date-cell.closed-day {
  color: rgba(104, 121, 116, 0.75);
  background-color: var(--surface, #fff);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(104, 121, 116, 0.14) 4px,
    rgba(104, 121, 116, 0.14) 5px
  );
}

#bookings-view .manual-date-cell.closed-day:not(.active):hover,
.manual-date-cell.closed-day:not(.active):hover {
  background-color: rgba(20, 126, 101, 0.06);
}

#bookings-view .manual-date-cell.closed-day.active,
.manual-date-cell.closed-day.active {
  background-image: none;
  color: var(--accent-dark);
}

.manual-payment-field {
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.manual-payment-bottom {
  margin-top: 14px;
}

.manual-payment-select {
  display: none;
}

.manual-payment-control {
  position: relative;
}

.manual-payment-trigger {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 14px;
  text-align: left;
}

.manual-payment-trigger[data-payment-mode="arrival"] {
  border-color: rgba(70, 85, 122, 0.32);
  background: var(--attention-soft);
}

.manual-payment-trigger:hover,
.manual-payment-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.1);
}

.manual-payment-trigger[data-payment-mode="arrival"]:hover,
.manual-payment-trigger[data-payment-mode="arrival"][aria-expanded="true"] {
  border-color: var(--attention);
  box-shadow: 0 0 0 2px rgba(70, 85, 122, 0.14);
}

.manual-payment-trigger span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.manual-payment-trigger small,
.manual-payment-trigger strong,
.manual-payment-trigger em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-payment-trigger small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-payment-trigger strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.manual-payment-trigger[data-payment-mode="arrival"] small {
  color: var(--attention);
}

.manual-payment-trigger[data-payment-mode="arrival"] strong {
  color: var(--attention-strong);
}

.manual-payment-trigger em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.manual-payment-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 65;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(15, 36, 30, 0.16);
}

.manual-payment-menu.hidden {
  display: none;
}

.manual-payment-options {
  display: contents;
}

.manual-payment-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.manual-payment-option:hover {
  border-color: rgba(20, 126, 101, 0.42);
}

.manual-payment-option strong,
.manual-payment-option span {
  display: block;
}

.manual-payment-option strong {
  font-size: 14px;
  font-weight: 900;
}

.manual-payment-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.manual-payment-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.manual-payment-option.attention.active {
  border-color: #d8a23a;
  background: #fff5dc;
}

.manual-summary-card {
  position: sticky;
  top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-color: rgba(20, 126, 101, 0.18);
  background:
    linear-gradient(180deg, rgba(223, 240, 235, 0.86), rgba(246, 250, 248, 0.88)),
    var(--surface-2);
  box-shadow: 0 16px 36px rgba(26, 39, 35, 0.08);
}

.manual-summary-heading {
  display: grid;
  gap: 4px;
}

.manual-summary-card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.manual-summary-card dl div {
  display: grid;
  grid-template-columns: minmax(72px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 13px 0;
  border-left: 0;
  border-bottom: 1px solid var(--line);
}

.manual-summary-card dl div:last-child {
  border-bottom: 0;
}

.manual-summary-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.manual-summary-card dd {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  text-align: right;
}

.manual-summary-card p:last-child {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.manual-form-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 12px;
  align-items: center;
}

.manual-form-footer span {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.manual-form-buttons {
  display: grid;
  grid-template-columns: minmax(96px, 0.36fr) minmax(220px, 1fr);
  gap: 8px;
}

.manual-form-buttons .small-button,
.manual-form-buttons .primary-button {
  width: 100%;
  white-space: nowrap;
}

.manual-form-footer .primary-button {
  width: 100%;
}

@media (max-width: 1580px) {
  .manual-booking-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Tighter section padding so the slide-over is less long. */
  .manual-section {
    padding: 14px;
  }

  /* Summary card collapses to a compact horizontal strip: the heading
   * row goes inline with the dl, and each Date/Time/Payment/Customer
   * lives as a vertical mini-stat (label on top, value below) sharing
   * one row. Much shorter than the original stacked layout. */
  .manual-summary-card {
    position: static;
    top: auto;
    box-shadow: none;
    padding: 12px 14px;
    gap: 10px;
  }

  .manual-summary-heading {
    gap: 2px;
  }

  .manual-summary-heading h4 {
    font-size: 16px;
  }

  .manual-summary-card dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .manual-summary-card dl div {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 0 10px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .manual-summary-card dl div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .manual-summary-card dt {
    font-size: 10px;
  }

  .manual-summary-card dd {
    text-align: left;
    font-size: 13px;
  }

  /* The footer note below the dl gets a smaller chip-like style so it
   * doesn't add another tall block to the layout. */
  .manual-summary-card p:last-child {
    padding: 7px 10px;
    font-size: 12px;
  }

  .manual-form-footer {
    grid-template-columns: 1fr;
  }
}

/* Below tablet width the 4-column summary strip gets cramped, so we
 * fall back to a 2x2 grid which still costs less vertical space than
 * the original 4-row stack. */
@media (max-width: 720px) {
  .manual-summary-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-summary-card dl div {
    padding: 6px 10px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .manual-summary-card dl div:nth-child(2) {
    border-left: 1px solid var(--line);
  }

  .manual-summary-card dl div:nth-child(-n+2) {
    border-top: 0;
  }
}

@media (max-width: 980px) {
  .manual-field-grid {
    grid-template-columns: 1fr;
  }

  .manual-date-field,
  .manual-time-field,
  .manual-customer-inline {
    grid-column: 1;
  }

  .manual-time-field {
    order: 3;
  }

  .manual-customer-inline {
    order: 4;
  }
}

.app-shell.theme-dark .manual-booking-form,
.admin-shell.theme-dark .manual-booking-form {
  background:
    linear-gradient(135deg, rgba(111, 208, 181, 0.08), transparent 44%),
    var(--surface);
}

.app-shell.theme-dark .manual-section,
.admin-shell.theme-dark .manual-section,
.app-shell.theme-dark .manual-summary-card,
.admin-shell.theme-dark .manual-summary-card,
.app-shell.theme-dark .manual-date-picker,
.admin-shell.theme-dark .manual-date-picker,
.app-shell.theme-dark .manual-service-menu,
.admin-shell.theme-dark .manual-service-menu,
.app-shell.theme-dark .manual-payment-menu,
.admin-shell.theme-dark .manual-payment-menu,
.app-shell.theme-dark .manual-payment-option,
.admin-shell.theme-dark .manual-payment-option {
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark .manual-date-trigger,
.admin-shell.theme-dark .manual-date-trigger,
.app-shell.theme-dark .manual-service-trigger,
.admin-shell.theme-dark .manual-service-trigger,
.app-shell.theme-dark .manual-payment-trigger,
.admin-shell.theme-dark .manual-payment-trigger,
.app-shell.theme-dark #manual-service-search,
.admin-shell.theme-dark #manual-service-search,
.app-shell.theme-dark .manual-date-cell,
.admin-shell.theme-dark .manual-date-cell,
.app-shell.theme-dark .manual-service-option,
.admin-shell.theme-dark .manual-service-option,
.app-shell.theme-dark .manual-time-option,
.admin-shell.theme-dark .manual-time-option {
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"],
.admin-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] {
  background: rgba(216, 162, 58, 0.16);
}

.app-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] small,
.admin-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] small {
  color: #f2d08d;
}

.app-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] strong,
.admin-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] strong {
  color: #ffd37a;
}

.app-shell.theme-dark .manual-date-cell.active,
.admin-shell.theme-dark .manual-date-cell.active,
.app-shell.theme-dark .manual-service-option.active,
.admin-shell.theme-dark .manual-service-option.active,
.app-shell.theme-dark .manual-time-option.active,
.admin-shell.theme-dark .manual-time-option.active {
  background: rgba(111, 208, 181, 0.14);
}

.app-shell.theme-dark .manual-date-cell.unavailable,
.admin-shell.theme-dark .manual-date-cell.unavailable,
.app-shell.theme-dark .manual-date-cell:disabled,
.admin-shell.theme-dark .manual-date-cell:disabled {
  background: rgba(255, 255, 255, 0.025);
  color: rgba(203, 222, 216, 0.34);
}

.app-shell.theme-dark .manual-payment-option.active,
.admin-shell.theme-dark .manual-payment-option.active {
  background: rgba(111, 208, 181, 0.14);
}

.app-shell.theme-dark .manual-payment-option.attention.active,
.admin-shell.theme-dark .manual-payment-option.attention.active {
  background: rgba(216, 162, 58, 0.16);
  border-color: #d8a23a;
}

.toggle-row {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 9px !important;
}

.toggle-row input {
  width: auto;
}

/* Mobile fix: the Settings "Play a chime" toggle row collapsed on phones -
   the checkbox sat at the far left and the label was squeezed into a
   one-word-per-line sliver on the right with a big empty gap. Force a clean
   flex row so the checkbox stays a fixed small size and the label fills the
   remaining width and wraps normally. Higher specificity than the base
   .toggle-row, scoped to the settings form + mobile, so desktop and every
   other toggle row are untouched. */
@media (max-width: 760px) {
  .settings-form .toggle-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }
  .settings-form .toggle-row > input {
    flex: 0 0 auto;
    width: auto !important;
  }
  .settings-form .toggle-row > span {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.service-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.service-card.inactive {
  background: var(--surface-2);
}

.service-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.service-activation-toggle {
  width: 54px;
  min-width: 54px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.service-activation-toggle.active {
  justify-content: flex-end;
  border-color: rgba(20, 126, 101, 0.28);
  background: rgba(111, 208, 181, 0.2);
}

.service-activation-toggle.inactive {
  justify-content: flex-start;
  border-color: rgba(106, 120, 116, 0.28);
  background: rgba(106, 120, 116, 0.1);
}

.service-activation-toggle:hover {
  box-shadow: 0 6px 18px rgba(15, 38, 32, 0.08);
}

.service-activation-toggle:focus-visible {
  outline: 3px solid rgba(20, 126, 101, 0.2);
  outline-offset: 2px;
}

.service-activation-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 1px 4px rgba(15, 38, 32, 0.16);
}

.service-activation-toggle.active .service-activation-dot {
  background: var(--accent);
}

.service-card h3,
.service-card p {
  margin: 0;
}

.service-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent-dark);
  font-weight: 800;
}

.service-link-box {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg);
}

.service-link-box code {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.service-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.data-list {
  display: grid;
  gap: 10px;
}

.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.data-row strong,
.data-row span,
.data-row small {
  display: block;
}

.data-row span,
.data-row small {
  color: var(--muted);
}

.app-shell.theme-dark .data-row,
.admin-shell.theme-dark .data-row,
.app-shell.theme-dark .booking-calendar-card,
.admin-shell.theme-dark .booking-calendar-card,
.app-shell.theme-dark .booking-day-panel,
.admin-shell.theme-dark .booking-day-panel,
.app-shell.theme-dark .booking-time-badge,
.admin-shell.theme-dark .booking-time-badge,
.app-shell.theme-dark .booking-actions,
.admin-shell.theme-dark .booking-actions,
.app-shell.theme-dark .booking-card-details > div,
.admin-shell.theme-dark .booking-card-details > div,
.app-shell.theme-dark .booking-day-title-row > span,
.admin-shell.theme-dark .booking-day-title-row > span {
  background: rgba(255, 255, 255, 0.045);
}

.service-hidden-note {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.booking-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.calendar-invite-note {
  margin: 12px auto 0;
  max-width: 440px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
  text-align: center;
}

.booking-calendar-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.booking-calendar-card,
.booking-day-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.booking-calendar-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-calendar-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.booking-calendar-header h3,
.booking-day-panel h3 {
  margin: 0;
}

.booking-calendar-header h3 {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
}

.booking-calendar-header .icon-button {
  width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

.booking-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.booking-calendar-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.booking-calendar-cell {
  position: relative;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 4px 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.booking-calendar-cell:hover:not(.is-empty) {
  background: var(--surface-2);
}

.booking-calendar-cell.is-empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

.booking-calendar-cell span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.booking-calendar-cell strong {
  width: 5px;
  height: 5px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--accent);
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.booking-calendar-cell.has-bookings span {
  color: var(--text);
}

.booking-calendar-cell.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.booking-calendar-cell.active span {
  color: var(--accent-dark);
}

/* Closed-day in the main Bookings calendar (and other bookings-view-scoped
   calendar cells). Subtle diagonal stripes + muted day number so the
   owner can read at a glance which weekdays the studio is normally shut.
   The cell stays clickable - the owner may want to review or jump to
   that day. */
.booking-calendar-cell.closed-day:not(.active) {
  background-color: transparent;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(104, 121, 116, 0.12) 4px,
    rgba(104, 121, 116, 0.12) 5px
  );
}

.booking-calendar-cell.closed-day:not(.active) span {
  color: rgba(104, 121, 116, 0.7);
}

.app-shell.theme-dark .booking-calendar-cell.closed-day:not(.active),
.admin-shell.theme-dark .booking-calendar-cell.closed-day:not(.active) {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(217, 238, 232, 0.10) 4px,
    rgba(217, 238, 232, 0.10) 5px
  );
}

.app-shell.theme-dark .booking-calendar-cell.closed-day:not(.active) span,
.admin-shell.theme-dark .booking-calendar-cell.closed-day:not(.active) span {
  color: rgba(217, 238, 232, 0.55);
}

.app-shell.theme-dark .booking-calendar-cell strong,
.admin-shell.theme-dark .booking-calendar-cell strong {
  background: var(--accent);
}

.app-shell.theme-dark .booking-calendar-cell.active,
.admin-shell.theme-dark .booking-calendar-cell.active {
  background: rgba(101, 196, 166, 0.16);
  border-color: var(--accent);
}

.app-shell.theme-dark .booking-calendar-cell.active span,
.admin-shell.theme-dark .booking-calendar-cell.active span {
  color: var(--accent-dark);
}

.booking-day-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.booking-day-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.booking-day-title-row > span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #edf3f1;
  color: var(--muted);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.status-select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font-weight: 750;
}

.refund-button {
  min-height: 34px;
}

.service-preview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hours-list,
.blocked-list {
  display: grid;
  gap: 10px;
}

.hours-row,
.blocked-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdfc;
}

.editable-hours-row {
  align-items: center;
}

.hours-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hours-inputs input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 8px;
}

.hours-inputs span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.blocked-row > span span {
  display: block;
  margin-top: 4px;
}

.public-view {
  max-width: 1180px;
  margin: 0 auto;
}

.booking-page {
  display: grid;
  gap: 18px;
}

.business-panel,
.access-banner,
.booking-flow,
.confirmation-panel {
  padding: 22px;
}

.access-banner {
  border-color: #d7e2de;
  background: #f7fbf9;
}

.access-banner h2 {
  margin: 4px 0 8px;
  font-size: 28px;
}

.access-banner p:last-child {
  margin: 0;
  color: var(--muted);
}

.business-hero {
  display: flex;
  gap: 16px;
  align-items: center;
}

.business-logo {
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 8px;
  background: #13241f;
  color: #f7fffb;
  font-weight: 850;
}

.business-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.business-details div {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.business-details span,
.business-details strong {
  display: block;
}

.business-details strong {
  margin-top: 5px;
  font-size: 14px;
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
}

.booking-main {
  display: grid;
  gap: 0;
}

.booking-step {
  padding: 18px 0;
  border: 0;
  border-radius: 0;
}

.booking-step:first-of-type {
  padding-top: 4px;
}

.booking-step + .booking-step {
  border-top: 1px solid var(--line);
}

.step-heading {
  margin: 0 0 12px;
}

.step-heading h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.app-shell.theme-dark .booking-step + .booking-step,
.admin-shell.theme-dark .booking-step + .booking-step {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .step-heading h3,
.admin-shell.theme-dark .step-heading h3 { color: #e6f4ee; }

.public-services {
  display: grid;
  gap: 10px;
}

.service-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdfc;
  text-align: left;
}

/* Service categories on the public booking page (Hair / Nails /
   Massage etc.). Owner sets them in the Service editor; rendered
   only when 2+ categories are in use. Heading sits flush above
   the group with a thin underline so it reads as a section, not
   another card. The group block keeps the same 10px row gap as
   the flat layout so swapping between grouped and flat does not
   shift rhythm. */
.public-service-group + .public-service-group {
  margin-top: 18px;
}

.public-service-group-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.public-service-group-items {
  display: grid;
  gap: 10px;
}

.service-option.active,
.date-cell.active,
.slot-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.service-option strong,
.service-option span {
  display: block;
}

.service-option span {
  color: var(--muted);
  font-size: 14px;
}

.calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.calendar-header strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.calendar-nav-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.calendar-nav-button:hover:not([disabled]) {
  background: rgba(20, 126, 101, 0.08);
  color: rgb(13, 79, 65);
}

.calendar-nav-button[disabled] {
  color: rgba(7, 24, 19, 0.20);
  cursor: not-allowed;
}

.app-shell.theme-dark .calendar-header strong,
.admin-shell.theme-dark .calendar-header strong { color: #e6f4ee; }

.app-shell.theme-dark .calendar-nav-button,
.admin-shell.theme-dark .calendar-nav-button { color: #e6f4ee; }

.app-shell.theme-dark .calendar-nav-button:hover:not([disabled]),
.admin-shell.theme-dark .calendar-nav-button:hover:not([disabled]) {
  background: rgba(102, 209, 173, 0.10);
  color: #66d1ad;
}

.app-shell.theme-dark .calendar-nav-button[disabled],
.admin-shell.theme-dark .calendar-nav-button[disabled] { color: rgba(230, 244, 238, 0.20); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  background: var(--surface);
}

/* Day labels: subtle, less "fontowe" */
.date-label {
  display: grid;
  place-items: center;
  min-height: 30px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Base cell */
.date-cell {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 8px;
  margin: 2px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.date-cell.is-blank {
  pointer-events: none;
  background: transparent;
}

/* Available days: hover state */
.date-cell:not([disabled]):not(.active):hover {
  background: rgba(20, 126, 101, 0.08);
  color: var(--ink);
}

/* Today marker: thin mint outline (when not selected) */
.date-cell.is-today:not(.active) {
  box-shadow: inset 0 0 0 1.5px rgba(20, 126, 101, 0.5);
  color: rgb(13, 79, 65);
}

/* Past + blocked days: jednolicie wyblakłe (no diagonal, no fill) */
.date-cell.is-past,
.date-cell.is-blocked {
  color: rgba(7, 24, 19, 0.28);
  cursor: not-allowed;
  font-weight: 600;
}

/* Selected (active) */
.date-cell.active {
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
  font-weight: 850;
  box-shadow: inset 0 0 0 1.5px rgba(20, 126, 101, 0.45);
}

/* Dark mode */
.app-shell.theme-dark .date-cell,
.admin-shell.theme-dark .date-cell { color: #e6f4ee; }

.app-shell.theme-dark .date-cell.is-past,
.admin-shell.theme-dark .date-cell.is-past,
.app-shell.theme-dark .date-cell.is-blocked,
.admin-shell.theme-dark .date-cell.is-blocked { color: rgba(230, 244, 238, 0.25); background: transparent; }

.app-shell.theme-dark .date-cell:not([disabled]):not(.active):hover,
.admin-shell.theme-dark .date-cell:not([disabled]):not(.active):hover {
  background: rgba(102, 209, 173, 0.10);
}

.app-shell.theme-dark .date-cell.active,
.admin-shell.theme-dark .date-cell.active {
  background: rgba(102, 209, 173, 0.18);
  color: #b8e6d2;
  box-shadow: inset 0 0 0 1.5px rgba(102, 209, 173, 0.45);
}

.app-shell.theme-dark .date-cell.is-today:not(.active),
.admin-shell.theme-dark .date-cell.is-today:not(.active) {
  box-shadow: inset 0 0 0 1.5px rgba(102, 209, 173, 0.45);
  color: #b8e6d2;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.empty-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--muted);
}

/* Public booking page empty states */
.public-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(20, 126, 101, 0.025);
  text-align: center;
  color: var(--muted);
}

.public-empty-state strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.public-empty-state > span:not(.public-empty-state-icon) {
  font-size: 13px;
  line-height: 1.5;
  max-width: 360px;
}

.public-empty-state-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(20, 126, 101, 0.10);
  color: rgb(13, 79, 65);
}

.public-empty-state-slim {
  flex-direction: row;
  gap: 12px;
  padding: 18px 18px;
  align-items: center;
  text-align: left;
}

.public-empty-state-slim .public-empty-state-icon {
  width: 32px;
  height: 32px;
}

.app-shell.theme-dark .public-empty-state,
.admin-shell.theme-dark .public-empty-state {
  background: rgba(102, 209, 173, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark .public-empty-state strong,
.admin-shell.theme-dark .public-empty-state strong { color: #e6f4ee; }

.app-shell.theme-dark .public-empty-state-icon,
.admin-shell.theme-dark .public-empty-state-icon {
  background: rgba(102, 209, 173, 0.10);
  color: #66d1ad;
}

.booking-overflow-note {
  width: 100%;
  margin: 2px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 750;
  text-align: left;
}

.booking-overflow-note:hover,
.booking-overflow-note:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  outline: none;
}

.slot-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--text);
  font-weight: 800;
}

.customer-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.005em;
}

.customer-form .customer-name-field {
  grid-column: 1;
  grid-row: 1;
}

.customer-form .customer-phone-field {
  grid-column: 2;
  grid-row: 1;
}

.customer-form .customer-email-field {
  grid-column: 1 / -1;
  grid-row: 2;
}

.customer-form .customer-note-field {
  grid-column: 1 / -1;
  grid-row: 3;
}

.customer-form input,
.customer-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.customer-form input:focus,
.customer-form textarea:focus {
  outline: none;
  border-color: rgba(20, 126, 101, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 126, 101, 0.12);
}

.customer-form input.is-invalid,
.customer-form textarea.is-invalid {
  border-color: #d4544c;
  background: rgba(212, 84, 76, 0.04);
  box-shadow: 0 0 0 3px rgba(212, 84, 76, 0.10);
}

.customer-form .customer-note-field textarea {
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
}

.customer-form-optional {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}

@media (max-width: 640px) {
  .customer-form {
    grid-template-columns: 1fr;
  }
  .customer-form .customer-name-field,
  .customer-form .customer-phone-field,
  .customer-form .customer-email-field,
  .customer-form .customer-note-field {
    grid-column: 1;
  }
  .customer-form .customer-name-field { grid-row: 1; }
  .customer-form .customer-phone-field { grid-row: 2; }
  .customer-form .customer-email-field { grid-row: 3; }
  .customer-form .customer-note-field { grid-row: 4; }
}

.summary-panel {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 18px;
}

.confirmation-panel {
  display: none;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.confirmation-panel.active {
  display: block;
}

.confirmation-mark {
  display: grid;
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.confirmation-mark img {
  width: 48px;
  height: 48px;
}

.confirmation-panel h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (max-width: 640px) {
  .confirmation-panel h2 { font-size: 26px; }
}

.confirmation-panel > p:not(.eyebrow) {
  max-width: 520px;
  margin: 12px auto 0;
  color: var(--muted);
}

.confirmation-panel dl {
  display: grid;
  gap: 0;
  max-width: 520px;
  margin: 22px auto;
  text-align: left;
  border-top: 1px solid var(--line);
}

.confirmation-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.confirmation-panel dt {
  color: var(--muted);
}

.confirmation-panel dd {
  margin: 0;
  font-weight: 850;
  text-align: right;
}

.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-panel dl {
  display: grid;
  gap: 0;
  margin: 18px 0;
  border-top: 1px solid var(--line);
}

.summary-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.summary-panel dt {
  color: var(--muted);
}

.summary-panel dd {
  margin: 0;
  font-weight: 850;
}

.payment-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.policy-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.secure-note {
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  transform: translateY(80px);
  padding: 12px 16px;
  border-radius: 8px;
  background: #101816;
  color: #ffffff;
  opacity: 0;
  max-width: min(420px, calc(100vw - 36px));
  line-height: 1.45;
  font-size: 13px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  z-index: 9999;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 120ms ease;
}

/* Clickable toast variant (new-booking notification). Adds a "Tap
   to open" affordance via a soft right-side caret so the owner
   knows the toast itself is a button, not just dismissable. */
.toast.is-clickable {
  padding-right: 32px;
  background: linear-gradient(180deg, #0f3027, #0a201a);
}

.toast.is-clickable::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 600;
  opacity: 0.75;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Error-flavoured toast: brick red background + amber left rule so a
 * long "Cannot reopen: ..." message stands out from a normal "Saved"
 * confirmation. Same dwell / hover / click semantics as the success
 * variant; only color changes. */
.toast.is-error {
  background: #8a1f1f;
  border-left: 4px solid #f59e0b;
  padding-left: 12px;
}

.choice-modal {
  position: fixed;
  inset: 0;
  /* Above .trial-banner (z-index 60) and other sticky chrome so a
     Cancel-booking / Refund choice modal opened on a narrow screen
     does not visually overlap the floating trial banner in the
     bottom-right corner. Matches .modal-overlay (z-index 100). */
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 18, 15, 0.58);
}

.choice-modal.hidden {
  display: none;
}

.choice-modal-panel {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.choice-modal-panel h2,
.choice-modal-panel p {
  margin: 0;
}

.choice-modal-panel > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.choice-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.refund-amount-field {
  display: grid;
  gap: 8px;
}

.refund-amount-field span,
.refund-modal-note {
  color: var(--muted);
  font-weight: 800;
}

.refund-amount-field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 24px;
  font-weight: 900;
}

.refund-amount-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.refund-modal-note {
  margin: -4px 0 0;
  line-height: 1.4;
}

@media (max-width: 1680px) {
  .booking-metrics,
  .revenue-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .appointment-metric-row,
  .revenue-metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .revenue-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-live-layout {
    grid-template-columns: 1fr;
  }

  .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  .booking-calendar-card,
  .booking-day-panel {
    min-height: auto;
  }

  .dashboard-day-details {
    min-height: auto;
  }

  .dashboard-day-bookings {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 1120px) {
  .home-nav {
    align-items: center;
    padding: 16px 22px;
  }

  .home-nav nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 22px;
    left: auto;
    z-index: 40;
    display: none;
    width: min(360px, calc(100vw - 44px));
    max-height: min(520px, calc(100svh - 104px));
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }

  .home-nav.menu-open nav {
    display: grid;
    gap: 8px;
  }

  .home-nav nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
  }

  .home-nav nav .theme-toggle {
    justify-content: center;
    width: 100%;
    min-height: 40px;
  }

  .home-nav nav a:hover {
    background: #edf7f3;
  }

  .home-page.theme-dark .home-nav nav {
    background: #07100d;
  }

  .home-page.theme-dark .home-nav nav a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .home-nav .nav-cta {
    justify-content: center;
    margin-top: 2px;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .full-logo {
    width: 210px;
    max-width: 56vw;
  }
}

@media (max-width: 1120px) and (orientation: landscape) {
  .home-nav {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .home-nav nav {
    width: min(520px, calc(100vw - 44px));
    max-height: calc(100svh - 92px);
  }

  .home-nav.menu-open nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-nav nav a,
  .home-nav nav .theme-toggle {
    justify-content: center;
  }

  .home-nav nav .theme-toggle {
    width: auto;
  }

  .home-nav .nav-cta {
    margin-top: 0;
  }

  .hero-section {
    padding-top: 24px;
  }
}

@media (max-width: 1040px) {
  .hero-section,
  .feature-grid,
  .process-grid,
  .payment-flow,
  .payment-story,
  .showcase-grid,
  .audience-layout,
  .decision-layout,
  .decision-grid,
  .pricing-band {
    grid-template-columns: 1fr;
  }

  .decision-band {
    background: #10201b;
  }

  .feature-grid article:nth-child(2),
  .feature-grid article:nth-child(4) {
    margin-top: 0;
  }

  .hero-callout {
    position: static;
    margin-top: 12px;
  }

  .hero-copy h1 {
    font-size: 54px;
  }

  .section-heading h2,
  .pricing-copy h2 {
    font-size: 42px;
  }

  .topbar h1,
  .confirmation-panel h2 {
    font-size: 38px;
  }

  .audience-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 12px 16px;
  }

  .sidebar .brand {
    min-width: 0;
  }

  .sidebar .brand span {
    white-space: nowrap;
  }

  .app-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: min(56svh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 6px;
  }

  .sidebar.menu-open .nav {
    display: grid;
  }

  .admin-sidebar .nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav-item {
    min-height: 42px;
    white-space: nowrap;
    text-align: center;
  }

  .sidebar-card {
    display: none;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .topbar-actions > * {
    min-width: 0;
  }

  .topbar-actions .ghost-button,
  .topbar-actions .primary-button,
  .topbar-actions .theme-toggle,
  .topbar-actions .setup-status-button {
    width: 100%;
  }

  .metric-grid,
  .content-grid,
  .dashboard-live-layout,
  .booking-layout,
  .manual-booking-layout,
  .admin-business-row,
  .data-row,
  .admin-detail-grid,
  .admin-detail-columns,
  .admin-control-grid,
  .admin-billing-table,
  .admin-technical-grid {
    grid-template-columns: 1fr;
  }

  .manual-appointment-section,
  .manual-summary-card {
    grid-column: 1;
  }

  .manual-summary-card {
    grid-row: auto;
    position: static;
    margin-top: 0;
  }

  .manual-summary-card,
  .manual-summary-card dl {
    grid-template-columns: 1fr;
  }

  .manual-summary-card dl div {
    grid-template-columns: 1fr;
    padding: 9px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .manual-summary-card dd {
    text-align: left;
  }

  .manual-summary-card dl div:last-child {
    border-bottom: 0;
  }

  .manual-service-menu {
    position: static;
    box-shadow: none;
  }

  .manual-payment-menu {
    position: static;
    box-shadow: none;
  }

  .manual-service-option {
    grid-template-columns: 1fr;
  }

  .manual-service-option span,
  .manual-payment-option span {
    text-align: left;
  }

  .manual-form-footer {
    grid-template-columns: 1fr;
  }

  .manual-form-buttons {
    grid-template-columns: 1fr;
  }

  .settings-form-footer {
    grid-template-columns: 1fr;
  }

  .settings-form .form-grid.two-col {
    grid-template-columns: 1fr;
  }

  .settings-link-helper {
    grid-template-columns: 1fr;
  }

  .settings-form-footer > .primary-button {
    min-height: 44px;
  }

  .admin-actions {
    justify-content: flex-start;
  }

  .admin-custom-access-form {
    grid-template-columns: minmax(80px, 1fr) minmax(100px, 1fr) auto;
  }

  .summary-panel {
    position: static;
  }

  .booking-metrics,
  .revenue-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .appointment-metric-row,
  .revenue-metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .revenue-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-split {
    display: grid;
    justify-items: start;
    gap: 2px;
    padding: 10px 12px;
  }

  .dashboard-booking-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .dashboard-booking-payment {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .booking-toolbar {
    justify-content: flex-start;
  }

  .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  .booking-calendar-card,
  .booking-day-panel {
    min-height: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 700px) {
  .home-nav {
    align-items: center;
    padding: 16px 18px;
  }

  .home-nav nav {
    position: absolute;
    top: calc(100% - 4px);
    left: 18px;
    right: 18px;
    display: none;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
  }

  .home-nav.menu-open nav {
    display: grid;
    gap: 10px;
  }

  .home-nav nav a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
  }

  .home-nav nav .theme-toggle {
    justify-content: center;
    width: 100%;
    min-height: 42px;
  }

  .home-nav nav a:hover {
    background: #edf7f3;
  }

  .home-page.theme-dark .home-nav nav {
    background: #07100d;
  }

  .home-page.theme-dark .home-nav nav a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .home-nav .nav-cta {
    justify-content: center;
    margin-top: 4px;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .full-logo {
    width: 196px;
    max-width: 62vw;
  }

  .hero-section,
  .home-band,
  .home-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-section {
    padding-top: 28px;
  }

  .hero-proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-callout {
    min-width: 0;
  }

  .audience-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .audience-strip article {
    min-height: 144px;
    padding: 20px;
  }

  .audience-strip strong {
    margin-top: 10px;
    font-size: 15px;
  }

  .audience-strip small {
    font-size: 12px;
  }

  .hero-copy h1 {
    font-size: 40px;
  }

  .section-heading h2,
  .pricing-copy h2,
  .topbar h1,
  .confirmation-panel h2 {
    font-size: 34px;
  }

  .mini-calendar,
  .mini-slots,
  .mini-dashboard-grid,
  .time-row {
    grid-template-columns: 1fr 1fr;
  }

  .hero-value-strip {
    grid-template-columns: 1fr;
  }

  .main {
    padding: 14px;
  }

  .sidebar {
    padding: 10px 12px;
  }

  .sidebar .brand span {
    display: none;
  }

  .app-menu-toggle {
    min-height: 38px;
    padding: 0 12px;
  }

  .nav {
    gap: 4px;
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: visible;
  }

  .nav-item {
    min-height: 36px;
    padding: 8px 12px;
    text-align: left;
  }

  .topbar,
  .panel-header,
  .business-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-live-queue-panel .panel-header {
    align-items: stretch;
  }

  .dashboard-live-queue-panel .panel-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-left: 0;
  }

  .dashboard-live-queue-panel .panel-header-actions .primary-button,
  .dashboard-live-queue-panel .panel-header-actions .small-button {
    width: 100%;
  }

  .topbar-actions,
  .booking-toolbar,
  .segmented {
    width: 100%;
  }

  .booking-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .booking-toolbar .primary-button {
    width: 100%;
  }

  .booking-toolbar .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: flex-start;
    overflow-x: visible;
  }

  .booking-toolbar .segmented button {
    flex: 0 1 auto;
    white-space: normal;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-actions > * {
    min-width: 0;
  }

  .topbar-actions button,
  .topbar-actions a,
  .segmented button {
    flex: 1;
  }

  .topbar-actions .small-button,
  .topbar-actions .primary-button,
  .topbar-actions .theme-toggle,
  .topbar-actions .setup-status-button {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    font-size: 14px;
  }

  .panel {
    padding: 14px;
  }

  .attention-alert {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-reminder-actions {
    justify-content: stretch;
  }

  .billing-reminder-actions .primary-button,
  .billing-reminder-actions .ghost-button {
    width: 100%;
  }

  .payments-command-card {
    grid-template-columns: 1fr;
  }

  .payments-command-actions,
  .payments-command-actions .primary-button,
  .payments-command-actions .ghost-button {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .payments-command-actions {
    display: grid;
    justify-content: stretch;
  }

  .payments-command-actions p {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .payments-money-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .payments-money-card {
    min-height: 74px;
    padding: 10px 12px;
  }

  .payments-money-card strong {
    font-size: 24px;
  }

  .payments-task-item,
  .payments-activity-row {
    grid-template-columns: 1fr;
  }

  .payments-task-item > span {
    display: none;
  }

  .payments-activity-row > div:last-child {
    text-align: left;
  }

  .metric-grid {
    gap: 8px;
  }

  .booking-metrics,
  .revenue-metrics {
    min-height: auto;
    padding: 12px;
  }

  .appointment-metric-title strong {
    font-size: 20px;
  }

  .appointment-metric-title small {
    font-size: 12px;
  }

  .appointment-metric-row,
  .revenue-metric-row {
    gap: 6px;
  }

  .metric-split {
    min-height: 58px;
    padding: 8px;
  }

  .booking-metrics .metric-split strong,
  .revenue-metrics .metric-split strong {
    font-size: 22px;
  }

  .booking-metrics .metric-split span,
  .revenue-metrics .metric-split span {
    font-size: 11px;
    line-height: 1.15;
  }

  .booking-calendar-card,
  .booking-day-panel {
    min-height: auto;
    padding: 10px;
  }

  .booking-calendar-header {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 8px;
  }

  .booking-calendar-header h3 {
    font-size: 17px;
  }

  .booking-calendar-header .icon-button {
    width: 36px;
    min-height: 36px;
  }

  .booking-calendar-grid {
    gap: 5px;
  }

  .dashboard-calendar-grid {
    gap: 5px;
  }

  .dashboard-calendar-card,
  .dashboard-day-details {
    padding: 10px;
  }

  .dashboard-calendar-card {
    min-height: auto;
  }

  .dashboard-day-details {
    min-height: auto;
  }

  .dashboard-calendar-header,
  .dashboard-day-heading {
    margin-bottom: 10px;
  }

  .dashboard-calendar-header strong {
    font-size: 17px;
  }

  .dashboard-calendar-header .icon-button {
    width: 34px;
    min-height: 34px;
  }

  .dashboard-calendar-label {
    font-size: 9px;
  }

  .booking-calendar-cell {
    min-height: 42px;
    padding: 5px;
    border-radius: 7px;
  }

  .dashboard-calendar-cell {
    min-height: 38px;
    padding: 5px;
    border-radius: 7px;
  }

  .dashboard-calendar-cell span {
    font-size: 12px;
  }

  .dashboard-calendar-cell strong {
    min-width: 18px;
    padding: 2px 5px;
    font-size: 10px;
  }

  .booking-calendar-cell strong {
    font-size: 10px;
    padding: 2px 5px;
  }

  .booking-day-title-row {
    gap: 8px;
  }

  .booking-day-title-row h3 {
    font-size: 24px;
  }

  .booking-day-title-row > span {
    padding: 5px 9px;
    font-size: 11px;
  }

  .metric-grid,
  .service-grid,
  .business-details,
  .customer-form,
  .form-grid,
  .manual-field-grid,
  .faq-grid,
  .footer-links {
    grid-template-columns: 1fr;
  }

  .customer-form .customer-name-field,
  .customer-form .customer-email-field,
  .customer-form .customer-phone-field,
  .customer-form .customer-note-field {
    grid-column: 1;
    grid-row: auto;
  }

  .customer-form .customer-note-field textarea {
    min-height: 64px;
  }

  .manual-booking-form {
    padding: 14px;
  }

  .manual-form-header {
    display: grid;
    gap: 12px;
  }

  .manual-form-header .small-button {
    width: 100%;
  }

  .manual-customer-fields {
    grid-template-columns: 1fr;
  }

  .manual-customer-fields .manual-name-field,
  .manual-customer-fields .manual-email-field,
  .manual-customer-fields .manual-phone-field,
  .manual-customer-fields .manual-note-field {
    grid-column: 1;
    grid-row: auto;
  }

  .manual-customer-fields .manual-note-field textarea {
    min-height: 120px;
  }

  .manual-summary-card dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .manual-summary-card dd {
    text-align: left;
  }

  .manual-date-picker {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .manual-service-options {
    grid-auto-columns: minmax(220px, 84%);
  }

  .manual-time-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: column;
  }

  .booking-row,
  .hours-row,
  .blocked-list div,
  .service-option {
    grid-template-columns: 1fr;
  }

  .booking-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .booking-time-badge,
  .booking-actions {
    padding: 8px;
  }

  .booking-time-badge strong {
    font-size: 20px;
  }

  .booking-actions small {
    font-size: 10px;
  }

  .booking-card-main strong {
    font-size: 17px;
  }

  .booking-card-main span {
    font-size: 13px;
  }

  .booking-actions,
  .booking-card-details {
    grid-column: 1 / -1;
  }

  .booking-card-details {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .booking-card-details > div.wide {
    grid-column: auto;
  }

  .dashboard-day-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-day-heading h3 {
    font-size: 24px;
  }

  .dashboard-day-bookings {
    padding-right: 0;
  }

  .dashboard-booking-card {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .dashboard-booking-time,
  .dashboard-booking-payment {
    padding: 8px;
  }

  .dashboard-booking-time strong {
    font-size: 20px;
  }

  .dashboard-booking-main strong {
    font-size: 17px;
  }

  .dashboard-booking-main span {
    font-size: 13px;
  }

  .dashboard-booking-payment {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .dashboard-booking-payment span {
    font-size: 16px;
  }

  .dashboard-booking-details {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 10px;
  }

  .dashboard-booking-details > div.wide {
    grid-column: auto;
  }

  .amount,
  .booking-actions {
    text-align: left;
    justify-content: flex-start;
  }

  .amount {
    justify-items: start;
  }

  .slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dashboard redesign v1: focused operator view. */
#dashboard-view {
  display: none;
}

#dashboard-view.active {
  display: block;
}

#dashboard-view .metric-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  gap: 14px;
  margin-bottom: 16px;
}

#dashboard-view .metric {
  position: relative;
  overflow: hidden;
  border-color: rgba(24, 60, 50, 0.12);
  background:
    radial-gradient(circle at 92% 10%, rgba(110, 198, 173, 0.13), transparent 28%),
    var(--surface);
  box-shadow: 0 18px 42px rgba(14, 31, 25, 0.07);
}

#dashboard-view .booking-metrics,
#dashboard-view .revenue-metrics {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 16px;
  min-height: 144px;
  padding: 22px 24px 24px;
}

#dashboard-view .appointment-metric-title {
  align-content: start;
  gap: 0;
}

#dashboard-view .appointment-metric-title strong {
  font-size: clamp(28px, 2.1vw, 36px);
  line-height: 1;
}

#dashboard-view .appointment-metric-title small {
  font-size: 16px;
  line-height: 1.25;
}

#dashboard-view .appointment-metric-row,
#dashboard-view .revenue-metric-row {
  align-items: stretch;
  gap: 8px;
}

#dashboard-view .metric-split {
  min-height: 86px;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 14px 16px;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(235, 244, 240, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  text-align: center;
}

#dashboard-view .metric-split-primary {
  min-height: 96px;
  border-color: rgba(20, 126, 101, 0.22);
  background:
    linear-gradient(135deg, rgba(205, 237, 226, 0.96), rgba(222, 246, 239, 0.88));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    0 14px 30px rgba(20, 126, 101, 0.08);
}

#dashboard-view .metric-split-secondary {
  border-color: rgba(24, 60, 50, 0.09);
  background:
    linear-gradient(135deg, rgba(239, 247, 244, 0.88), rgba(247, 251, 249, 0.82));
}

#dashboard-view .revenue-metrics .metric-split-due {
  border-color: rgba(164, 124, 35, 0.14);
  background:
    linear-gradient(135deg, rgba(247, 244, 235, 0.82), rgba(246, 251, 248, 0.8));
}

#dashboard-view .booking-metrics .metric-split span,
#dashboard-view .revenue-metrics .metric-split span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 850;
}

#dashboard-view .booking-metrics .metric-split strong,
#dashboard-view .revenue-metrics .metric-split strong {
  font-size: clamp(32px, 2.7vw, 44px);
  line-height: 0.98;
}

#dashboard-view .booking-metrics .metric-split-primary strong,
#dashboard-view .revenue-metrics .metric-split-primary strong {
  font-size: clamp(40px, 3.4vw, 56px);
}

#dashboard-view .metric-context {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(24, 60, 50, 0.07);
}

#dashboard-view .metric-context::before {
  content: "";
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(20, 126, 101, 0.82), rgba(111, 208, 181, 0.45));
}

#dashboard-view .metric-context-payments::before {
  width: 54%;
  background: linear-gradient(90deg, rgba(20, 126, 101, 0.82), rgba(214, 163, 60, 0.42));
}

#dashboard-view .dashboard-alerts {
  gap: 14px;
  margin: 0 0 22px;
  padding: 20px;
  border: 1px solid rgba(24, 60, 50, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 235, 0.78), rgba(239, 251, 247, 0.86)),
    var(--surface);
  box-shadow: 0 16px 34px rgba(14, 31, 25, 0.06);
}

#dashboard-view .dashboard-alerts.hidden {
  display: none;
}

.dashboard-setup-header {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.dashboard-setup-header strong,
.dashboard-setup-header p {
  margin: 0;
}

.dashboard-setup-header strong {
  font-size: 20px;
  line-height: 1.1;
}

.dashboard-setup-header p {
  color: var(--muted);
  font-weight: 750;
}

#dashboard-view .attention-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-color: rgba(214, 164, 79, 0.32);
  background: rgba(255, 253, 247, 0.86);
}

#dashboard-view .dashboard-connect-alert {
  border-color: rgba(20, 126, 101, 0.24);
  background: rgba(239, 251, 247, 0.92);
}

#dashboard-view .attention-alert strong {
  font-size: 18px;
  line-height: 1.15;
}

#dashboard-view .attention-alert p {
  max-width: 720px;
  font-size: 13px;
  line-height: 1.25;
}

#dashboard-view .attention-alert p:empty {
  display: none;
}

#dashboard-view .billing-reminder-actions {
  min-width: min(250px, 100%);
  display: grid;
  gap: 10px;
}

#dashboard-view .dashboard-connect-alert .billing-reminder-actions {
  min-width: min(420px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dashboard-view .billing-reminder-actions .primary-button,
#dashboard-view .billing-reminder-actions .ghost-button {
  min-height: 40px;
}

#dashboard-view .dashboard-live-queue-panel {
  padding: 24px;
  border-color: rgba(24, 60, 50, 0.12);
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(14, 31, 25, 0.07);
}

#dashboard-view .dashboard-live-queue-panel .panel-header {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

#dashboard-view .dashboard-live-queue-panel .panel-header-actions {
  margin-left: 0;
}

#dashboard-view .dashboard-live-queue-panel .panel-header h2 {
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1;
}

#dashboard-view .dashboard-live-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

#dashboard-view .dashboard-calendar-card,
#dashboard-view .dashboard-day-details {
  border-color: rgba(24, 60, 50, 0.12);
  background: #fbfdfc;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

#dashboard-view .dashboard-calendar-card {
  min-height: 650px;
  padding: 20px;
}

#dashboard-view .dashboard-day-details {
  min-height: 650px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

#dashboard-view .dashboard-calendar-header {
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  display: grid;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

#dashboard-view .dashboard-calendar-header strong {
  font-size: 24px;
}

#dashboard-view .dashboard-calendar-header .icon-button {
  width: 52px;
  min-height: 52px;
}

#dashboard-view .dashboard-calendar-grid {
  gap: 8px;
}

#dashboard-view .dashboard-calendar-cell {
  min-height: 66px;
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(255, 255, 255, 0.88);
  padding: 9px;
}

#dashboard-view .dashboard-calendar-cell.is-empty {
  background: transparent;
}

#dashboard-view .dashboard-calendar-cell span {
  font-size: 15px;
}

#dashboard-view .dashboard-calendar-cell strong {
  min-width: 24px;
  padding: 4px 7px;
  background: rgba(111, 208, 181, 0.2);
  font-size: 12px;
}

#dashboard-view .dashboard-calendar-cell.has-bookings {
  border-color: rgba(20, 126, 101, 0.28);
}

#dashboard-view .dashboard-calendar-cell.active {
  border-color: var(--accent);
  background: rgba(221, 242, 235, 0.88);
  box-shadow: inset 0 0 0 2px rgba(16, 44, 36, 0.82);
}

.dashboard-calendar-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.dashboard-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-calendar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
}

.dashboard-calendar-legend span:last-child i {
  background: rgba(111, 208, 181, 0.42);
}

#dashboard-view .dashboard-day-heading {
  margin-bottom: 18px;
}

#dashboard-view .dashboard-day-title-row {
  gap: 18px;
}

#dashboard-view .dashboard-day-heading h3 {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
}

#dashboard-view .dashboard-day-title-row > span {
  padding: 10px 16px;
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(235, 244, 240, 0.92);
  font-size: 15px;
}

#dashboard-view .dashboard-day-bookings {
  flex: 0 0 auto;
  height: 500px;
  max-height: 500px;
  align-items: start;
  align-content: start;
  grid-auto-rows: min-content;
  overflow-y: auto;
  padding-right: 6px;
}

#dashboard-view .dashboard-booking-card {
  grid-template-columns: 106px minmax(0, 1fr) minmax(170px, auto);
  gap: 14px;
  align-self: start;
  min-height: 98px;
  padding: 14px;
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(255, 255, 255, 0.9);
}

#dashboard-view .dashboard-booking-card + .dashboard-booking-card {
  margin-top: 12px;
}

#dashboard-view .dashboard-booking-time,
#dashboard-view .dashboard-booking-payment,
#dashboard-view .dashboard-booking-details > div {
  background: rgba(235, 244, 240, 0.9);
}

#dashboard-view .dashboard-booking-time {
  min-height: 70px;
  justify-items: center;
  text-align: center;
}

#dashboard-view .dashboard-booking-time strong {
  font-size: 28px;
}

#dashboard-view .dashboard-booking-main strong {
  font-size: 22px;
}

#dashboard-view .dashboard-booking-main span {
  font-size: 16px;
}

#dashboard-view .dashboard-booking-payment {
  min-width: 170px;
  justify-items: start;
  padding: 14px;
}

#dashboard-view .dashboard-booking-payment span {
  font-size: 19px;
}

#dashboard-view .dashboard-booking-card.pay-on-arrival {
  border-color: rgba(70, 85, 122, 0.28);
  background: var(--attention-soft);
}

#dashboard-view .dashboard-booking-payment.payment-attention {
  border-color: rgba(70, 85, 122, 0.22);
  background: rgba(70, 85, 122, 0.08);
}

#dashboard-view .dashboard-booking-details {
  gap: 12px;
  padding-top: 14px;
}

#dashboard-view .dashboard-booking-details > div {
  padding: 13px;
}

#dashboard-view .dashboard-booking-details span {
  font-size: 12px;
}

#dashboard-view .dashboard-booking-details strong {
  font-size: 15px;
}

.app-shell.theme-dark #dashboard-view .metric,
.admin-shell.theme-dark #dashboard-view .metric,
.app-shell.theme-dark #dashboard-view .dashboard-live-queue-panel,
.admin-shell.theme-dark #dashboard-view .dashboard-live-queue-panel {
  border-color: rgba(185, 216, 206, 0.18);
  background:
    radial-gradient(circle at 92% 10%, rgba(111, 208, 181, 0.12), transparent 28%),
    var(--surface);
  box-shadow: none;
}

.app-shell.theme-dark #dashboard-view .metric-split,
.admin-shell.theme-dark #dashboard-view .metric-split,
.app-shell.theme-dark #dashboard-view .dashboard-calendar-card,
.admin-shell.theme-dark #dashboard-view .dashboard-calendar-card,
.app-shell.theme-dark #dashboard-view .dashboard-day-details,
.admin-shell.theme-dark #dashboard-view .dashboard-day-details,
.app-shell.theme-dark #dashboard-view .dashboard-booking-time,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-time,
.app-shell.theme-dark #dashboard-view .dashboard-booking-payment,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-payment,
.app-shell.theme-dark #dashboard-view .dashboard-booking-details > div,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-details > div {
  border-color: rgba(185, 216, 206, 0.16);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.app-shell.theme-dark #dashboard-view .metric-split-primary,
.admin-shell.theme-dark #dashboard-view .metric-split-primary {
  border-color: rgba(111, 208, 181, 0.34);
  background:
    linear-gradient(135deg, rgba(83, 170, 143, 0.22), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.app-shell.theme-dark #dashboard-view .metric-split-secondary,
.admin-shell.theme-dark #dashboard-view .metric-split-secondary {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark #dashboard-view .revenue-metrics .metric-split-due,
.admin-shell.theme-dark #dashboard-view .revenue-metrics .metric-split-due {
  border-color: rgba(229, 174, 76, 0.22);
  background: rgba(229, 174, 76, 0.075);
}

.app-shell.theme-dark #dashboard-view .metric-context,
.admin-shell.theme-dark #dashboard-view .metric-context {
  background: rgba(185, 216, 206, 0.12);
}

.app-shell.theme-dark #dashboard-view .dashboard-alerts,
.admin-shell.theme-dark #dashboard-view .dashboard-alerts {
  border-color: rgba(185, 216, 206, 0.16);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.app-shell.theme-dark #dashboard-view .attention-alert,
.admin-shell.theme-dark #dashboard-view .attention-alert {
  background: rgba(229, 174, 76, 0.08);
}

.app-shell.theme-dark #dashboard-view .dashboard-connect-alert,
.admin-shell.theme-dark #dashboard-view .dashboard-connect-alert {
  background: rgba(111, 208, 181, 0.08);
}

.app-shell.theme-dark #dashboard-view .dashboard-calendar-cell,
.admin-shell.theme-dark #dashboard-view .dashboard-calendar-cell,
.app-shell.theme-dark #dashboard-view .dashboard-booking-card,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-card {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.app-shell.theme-dark #dashboard-view .dashboard-calendar-cell.active,
.admin-shell.theme-dark #dashboard-view .dashboard-calendar-cell.active {
  background: rgba(111, 208, 181, 0.12);
  box-shadow: inset 0 0 0 2px rgba(240, 255, 250, 0.85);
}

@media (max-width: 1420px) {
  #dashboard-view .dashboard-live-layout {
    grid-template-columns: 1fr;
  }

  #dashboard-view .dashboard-calendar-card,
  #dashboard-view .dashboard-day-details {
    min-height: auto;
  }

  #dashboard-view .dashboard-calendar-card {
    min-height: 520px;
  }

  #dashboard-view .dashboard-day-bookings {
    height: auto;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

@media (max-width: 1180px) {
  #dashboard-view .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboard-view .booking-metrics,
  #dashboard-view .revenue-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #dashboard-view .metric-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }

  #dashboard-view .booking-metrics,
  #dashboard-view .revenue-metrics,
  #dashboard-view .dashboard-live-queue-panel {
    padding: 14px;
  }

  #dashboard-view .appointment-metric-title strong,
  #dashboard-view .dashboard-live-queue-panel .panel-header h2,
  #dashboard-view .dashboard-day-heading h3 {
    font-size: 26px;
  }

  #dashboard-view .appointment-metric-title small {
    font-size: 13px;
  }

  #dashboard-view .appointment-metric-row,
  #dashboard-view .revenue-metric-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #dashboard-view .metric-split {
    min-height: 62px;
    padding: 10px 12px;
  }

  #dashboard-view .booking-metrics .metric-split strong,
  #dashboard-view .revenue-metrics .metric-split strong {
    font-size: 28px;
  }

  #dashboard-view .dashboard-alerts {
    padding: 14px;
  }

  #dashboard-view .attention-alert {
    grid-template-columns: 1fr;
  }

  #dashboard-view .billing-reminder-actions {
    min-width: 0;
  }

  #dashboard-view .dashboard-connect-alert .billing-reminder-actions {
    grid-template-columns: 1fr;
  }

  #dashboard-view .dashboard-live-queue-panel .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  #dashboard-view .dashboard-live-queue-panel .panel-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #dashboard-view .dashboard-live-queue-panel .panel-header-actions .primary-button,
  #dashboard-view .dashboard-live-queue-panel .panel-header-actions .small-button {
    width: 100%;
  }

  #dashboard-view .dashboard-calendar-card,
  #dashboard-view .dashboard-day-details {
    padding: 12px;
  }

  #dashboard-view .dashboard-calendar-card {
    min-height: auto;
  }

  #dashboard-view .dashboard-calendar-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  #dashboard-view .dashboard-calendar-header strong {
    font-size: 19px;
  }

  #dashboard-view .dashboard-calendar-header .icon-button {
    width: 40px;
    min-height: 40px;
  }

  #dashboard-view .dashboard-calendar-grid {
    gap: 5px;
  }

  #dashboard-view .dashboard-calendar-cell {
    min-height: 44px;
    padding: 5px;
  }

  #dashboard-view .dashboard-calendar-cell span {
    font-size: 12px;
  }

  #dashboard-view .dashboard-calendar-label {
    font-size: 9px;
  }

  #dashboard-view .dashboard-booking-card {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  #dashboard-view .dashboard-booking-time {
    min-height: 76px;
  }

  #dashboard-view .dashboard-booking-time strong {
    font-size: 21px;
  }

  #dashboard-view .dashboard-booking-main strong {
    font-size: 18px;
  }

  #dashboard-view .dashboard-booking-main span {
    font-size: 13px;
  }

  #dashboard-view .dashboard-booking-payment {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

@media (max-width: 460px) {
  #dashboard-view .dashboard-live-queue-panel .panel-header-actions {
    grid-template-columns: 1fr;
  }

  #dashboard-view .dashboard-calendar-cell {
    min-height: 38px;
  }

  .dashboard-calendar-legend {
    gap: 10px;
    font-size: 12px;
  }
}

/* Bookings view polish aligned with the dashboard language */
#bookings-view > .panel {
  padding: 18px;
  border-color: rgba(24, 60, 50, 0.11);
  background:
    radial-gradient(circle at 96% 0, rgba(20, 126, 101, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 251, 0.94));
  box-shadow: 0 20px 56px rgba(26, 39, 35, 0.07);
}

#bookings-view .booking-toolbar {
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
  flex-wrap: wrap;
}

#bookings-view .booking-toolbar .primary-button {
  min-height: 44px;
  padding-inline: 18px;
}

#bookings-view .booking-toolbar .segmented {
  min-height: 44px;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(238, 244, 241, 0.75);
}

#bookings-view .booking-toolbar .segmented button {
  min-height: 34px;
  border: 1px solid transparent;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 850;
  white-space: nowrap;
}

#bookings-view .booking-toolbar .segmented .active {
  border-color: rgba(24, 60, 50, 0.09);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(26, 39, 35, 0.08);
}

#bookings-view .manual-booking-form {
  border-color: rgba(24, 60, 50, 0.1);
  background:
    radial-gradient(circle at 0 0, rgba(20, 126, 101, 0.055), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 251, 0.96));
  box-shadow: 0 18px 44px rgba(26, 39, 35, 0.065);
}

#bookings-view .manual-booking-layout {
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.9fr);
  gap: 14px;
}

#bookings-view .manual-section,
#bookings-view .manual-summary-card {
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(255, 255, 255, 0.88);
}

#bookings-view .manual-service-trigger,
#bookings-view .manual-date-picker-inline,
#bookings-view .manual-payment-trigger,
#bookings-view .manual-summary-card,
#bookings-view .manual-customer-inline input {
  border-color: rgba(24, 60, 50, 0.11);
}

#bookings-view .manual-service-trigger,
#bookings-view .manual-date-picker-inline {
  background:
    linear-gradient(135deg, rgba(224, 241, 235, 0.72), rgba(255, 255, 255, 0.78)),
    var(--surface);
}

#bookings-view .manual-field-grid {
  grid-template-columns: minmax(320px, 1.28fr) minmax(230px, 0.72fr);
  gap: 12px;
}

#bookings-view .manual-time-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#bookings-view .manual-time-option {
  min-height: 32px;
}

#bookings-view .manual-customer-inline {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 60, 50, 0.1);
}

#bookings-view .manual-customer-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#bookings-view .manual-date-cell,
#bookings-view .manual-time-option {
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

#bookings-view .manual-date-cell.active,
#bookings-view .manual-time-option.active {
  border-color: var(--accent);
  background: rgba(221, 242, 235, 0.94);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 2px rgba(16, 44, 36, 0.12);
}

#bookings-view .manual-payment-trigger[data-payment-mode="arrival"] {
  border-color: rgba(70, 85, 122, 0.3);
  background: var(--attention-soft);
}

#bookings-view .manual-summary-card {
  background: var(--surface-2);
  box-shadow: none;
}

#bookings-view .manual-form-footer {
  margin-top: 4px;
  align-items: center;
  gap: 12px;
}

#bookings-view .manual-form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#bookings-view .booking-calendar-panel {
  gap: 14px;
  align-items: stretch;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr);
}

#bookings-view .booking-calendar-card,
#bookings-view .booking-day-panel {
  padding: 14px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

#bookings-view .booking-calendar-card {
  justify-content: start;
}

#bookings-view .booking-calendar-grid {
  flex: 0 0 auto;
  min-height: 0;
}

#bookings-view .booking-calendar-cell {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
}

#bookings-view .booking-calendar-cell.has-bookings {
  border-color: transparent;
  background: transparent;
}

#bookings-view .booking-calendar-cell.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

#bookings-view .booking-calendar-cell strong {
  background: var(--accent);
}

#bookings-view .booking-day-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#bookings-view .booking-day-title-row {
  gap: 12px;
  margin-bottom: 10px;
}

#bookings-view .booking-day-title-row h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

#bookings-view .booking-day-title-row > span {
  padding: 9px 14px;
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(235, 244, 240, 0.92);
  font-size: 14px;
}

/* When dayCount is rendered as inline meta line (per schedule-list
 * day header), drop the pill background so it matches "3 bookings ·
 * £60 collected" treatment from the approved mockup. */
#bookings-view .booking-day-title-row > span.booking-day-meta {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: baseline;
}

#bookings-view #booking-day-bookings {
  display: grid;
  gap: 10px;
  align-content: start;
  align-items: start;
  grid-auto-rows: min-content;
  max-height: 510px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: rgba(20, 126, 101, 0.28) transparent;
  scrollbar-width: thin;
}

#bookings-view .booking-row {
  align-self: start;
  min-height: 104px;
  grid-template-columns: 92px minmax(0, 1fr) minmax(170px, 210px);
  gap: 14px;
  padding: 12px 14px;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

#bookings-view .booking-row.expanded {
  min-height: auto;
}

#bookings-view .booking-row + .booking-row {
  margin-top: 0;
}

#bookings-view .booking-time-badge,
#bookings-view .booking-actions,
#bookings-view .booking-card-details > div {
  background: rgba(235, 244, 240, 0.9);
}

#bookings-view .booking-time-badge {
  min-height: 74px;
  justify-items: center;
  text-align: center;
}

#bookings-view .booking-time-badge strong {
  font-size: 27px;
}

#bookings-view .booking-card-main strong {
  font-size: 20px;
}

#bookings-view .booking-card-main span {
  font-size: 15px;
}

#bookings-view .booking-actions {
  min-width: 170px;
  gap: 6px;
  padding: 8px;
  justify-items: end;
  text-align: right;
}

#bookings-view .amount strong {
  font-size: 18px;
}

#bookings-view .amount small,
#bookings-view .booking-actions small {
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0;
}

#bookings-view .status-select {
  min-height: 30px;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 850;
}

/* Custom status dropdown (replaces native <select> for consistent styling) */
.status-dropdown {
  position: relative;
  display: inline-block;
}

.status-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #ffffff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}

.status-dropdown-trigger:hover {
  border-color: rgba(20, 126, 101, 0.32);
}

.status-dropdown-trigger[aria-expanded="true"] {
  border-color: rgba(20, 126, 101, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 126, 101, 0.12);
}

.status-dropdown-caret {
  flex: 0 0 14px;
  color: var(--muted);
  transition: transform 140ms ease, color 140ms ease;
}

.status-dropdown-trigger[aria-expanded="true"] .status-dropdown-caret {
  transform: rotate(180deg);
  color: rgb(13, 79, 65);
}

.status-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #ffffff);
  box-shadow: 0 12px 28px -10px rgba(7, 18, 15, 0.18);
  animation: statusDropdownIn 140ms ease;
}

.status-dropdown-menu[hidden] { display: none; }

@keyframes statusDropdownIn {
  from { transform: translateY(-4px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.status-dropdown-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.status-dropdown-option:hover {
  background: rgba(20, 126, 101, 0.08);
}

.status-dropdown-option.is-active {
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
  font-weight: 850;
}

.app-shell.theme-dark .status-dropdown-trigger,
.admin-shell.theme-dark .status-dropdown-trigger {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #e6f4ee;
}

.app-shell.theme-dark .status-dropdown-trigger:hover,
.admin-shell.theme-dark .status-dropdown-trigger:hover {
  border-color: rgba(102, 209, 173, 0.30);
}

.app-shell.theme-dark .status-dropdown-menu,
.admin-shell.theme-dark .status-dropdown-menu {
  background: #14201c;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.55);
}

.app-shell.theme-dark .status-dropdown-option,
.admin-shell.theme-dark .status-dropdown-option { color: #e6f4ee; }

.app-shell.theme-dark .status-dropdown-option:hover,
.admin-shell.theme-dark .status-dropdown-option:hover {
  background: rgba(102, 209, 173, 0.10);
}

.app-shell.theme-dark .status-dropdown-option.is-active,
.admin-shell.theme-dark .status-dropdown-option.is-active {
  background: rgba(102, 209, 173, 0.16);
  color: #66d1ad;
}

#bookings-view .booking-actions .small-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

#bookings-view .booking-row.pay-on-arrival {
  border-color: rgba(70, 85, 122, 0.24);
  background: var(--attention-soft);
}

#bookings-view .booking-row.pay-on-arrival .booking-actions {
  min-width: 190px;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 0.58fr);
  grid-template-areas:
    "amount amount"
    "status paid";
  align-items: center;
  justify-items: stretch;
  gap: 7px;
  border-color: rgba(70, 85, 122, 0.2);
  background: rgba(70, 85, 122, 0.07);
}

#bookings-view .booking-row.pay-on-arrival .amount strong {
  color: var(--attention-strong);
  font-size: 17px;
}

#bookings-view .booking-row.pay-on-arrival .amount {
  grid-area: amount;
  text-align: left;
  justify-items: start;
}

#bookings-view .booking-row.pay-on-arrival .status-select,
#bookings-view .booking-row.pay-on-arrival .manual-paid-button {
  min-width: 0;
  width: 100%;
}

#bookings-view .booking-row.pay-on-arrival .status-select {
  grid-area: status;
  min-height: 30px;
  margin-top: 0;
  padding-inline: 9px;
  font-size: 12px;
}

#bookings-view .booking-row.pay-on-arrival .manual-paid-button {
  grid-area: paid;
  min-height: 30px;
  padding-inline: 8px;
  font-size: 11px;
}

#bookings-view .booking-card-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 60, 50, 0.1);
}

#bookings-view .booking-card-details .wide {
  grid-column: 1 / -1;
}

.app-shell.theme-dark #bookings-view > .panel,
.admin-shell.theme-dark #bookings-view > .panel,
.app-shell.theme-dark #bookings-view .booking-calendar-card,
.admin-shell.theme-dark #bookings-view .booking-calendar-card,
.app-shell.theme-dark #bookings-view .booking-day-panel,
.admin-shell.theme-dark #bookings-view .booking-day-panel,
.app-shell.theme-dark #bookings-view .manual-booking-form,
.admin-shell.theme-dark #bookings-view .manual-booking-form {
  border-color: rgba(185, 216, 206, 0.16);
  background:
    radial-gradient(circle at 96% 0, rgba(111, 208, 181, 0.11), transparent 32%),
    var(--surface);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view .booking-toolbar .segmented,
.admin-shell.theme-dark #bookings-view .booking-toolbar .segmented,
.app-shell.theme-dark #bookings-view .manual-date-picker-inline,
.admin-shell.theme-dark #bookings-view .manual-date-picker-inline,
.app-shell.theme-dark #bookings-view .manual-service-trigger,
.admin-shell.theme-dark #bookings-view .manual-service-trigger,
.app-shell.theme-dark #bookings-view .manual-section,
.admin-shell.theme-dark #bookings-view .manual-section,
.app-shell.theme-dark #bookings-view .manual-summary-card,
.admin-shell.theme-dark #bookings-view .manual-summary-card,
.app-shell.theme-dark #bookings-view .booking-time-badge,
.admin-shell.theme-dark #bookings-view .booking-time-badge,
.app-shell.theme-dark #bookings-view .booking-actions,
.admin-shell.theme-dark #bookings-view .booking-actions,
.app-shell.theme-dark #bookings-view .booking-card-details > div,
.admin-shell.theme-dark #bookings-view .booking-card-details > div {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view .booking-toolbar .segmented .active,
.admin-shell.theme-dark #bookings-view .booking-toolbar .segmented .active {
  border-color: rgba(185, 216, 206, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

.app-shell.theme-dark #bookings-view .booking-row,
.admin-shell.theme-dark #bookings-view .booking-row,
.app-shell.theme-dark #bookings-view .booking-calendar-cell,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell,
.app-shell.theme-dark #bookings-view .manual-date-cell,
.admin-shell.theme-dark #bookings-view .manual-date-cell,
.app-shell.theme-dark #bookings-view .manual-time-option,
.admin-shell.theme-dark #bookings-view .manual-time-option {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival,
.app-shell.theme-dark #bookings-view .manual-payment-trigger[data-payment-mode="arrival"],
.admin-shell.theme-dark #bookings-view .manual-payment-trigger[data-payment-mode="arrival"] {
  border-color: rgba(170, 182, 212, 0.3);
  background: rgba(170, 182, 212, 0.08);
}

.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .booking-actions,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .booking-actions {
  border-color: rgba(170, 182, 212, 0.24);
  background: rgba(170, 182, 212, 0.1);
}

.app-shell.theme-dark #bookings-view .manual-summary-card p:last-child,
.admin-shell.theme-dark #bookings-view .manual-summary-card p:last-child {
  border: 1px solid rgba(176, 217, 255, 0.22);
  background: rgba(8, 20, 25, 0.68);
  color: #dbeff7;
}

@media (max-width: 1280px) {
  #bookings-view .manual-booking-layout,
  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  #bookings-view .manual-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #bookings-view .booking-calendar-card,
  #bookings-view .booking-day-panel {
    min-height: auto;
  }

  #bookings-view .booking-calendar-card {
    min-height: 520px;
  }

  #bookings-view #booking-day-bookings {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  #bookings-view > .panel,
  #bookings-view .manual-booking-form,
  #bookings-view .booking-calendar-card,
  #bookings-view .booking-day-panel {
    padding: 12px;
  }

  #bookings-view .booking-toolbar {
    align-items: stretch;
  }

  #bookings-view .booking-toolbar .primary-button,
  #bookings-view .booking-toolbar .segmented {
    width: 100%;
  }

  #bookings-view .booking-toolbar .segmented {
    overflow-x: visible;
    flex-wrap: wrap;
  }

  #bookings-view .booking-toolbar .segmented button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  #bookings-view .booking-calendar-card {
    min-height: auto;
  }

  #bookings-view .booking-calendar-cell {
    min-height: 44px;
    padding: 5px;
  }

  #bookings-view .booking-calendar-label {
    font-size: 9px;
  }

  #bookings-view .booking-day-title-row h3 {
    font-size: 28px;
  }

  #bookings-view .booking-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  #bookings-view .booking-actions {
    grid-column: 1 / -1;
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  #bookings-view .booking-row.pay-on-arrival .booking-actions {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  #bookings-view .manual-customer-fields,
  #bookings-view .booking-card-details {
    grid-template-columns: 1fr;
  }

  #bookings-view .manual-customer-fields .manual-name-field,
  #bookings-view .manual-customer-fields .manual-email-field,
  #bookings-view .manual-customer-fields .manual-phone-field,
  #bookings-view .manual-customer-fields .manual-note-field {
    grid-column: 1;
    grid-row: auto;
  }

  #bookings-view .booking-time-badge strong {
    font-size: 21px;
  }
}

/* Bookings tab dashboard-style refinement */
#bookings-view > .panel {
  padding: 20px;
}

#bookings-view .booking-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

#bookings-view .booking-toolbar .primary-button {
  min-height: 44px;
  border-radius: 8px;
  padding-inline: 20px;
  white-space: nowrap;
}

#bookings-view .booking-toolbar .segmented {
  min-height: 44px;
  border-radius: 8px;
  background: rgba(238, 244, 241, 0.76);
  box-shadow: inset 0 0 0 1px rgba(24, 60, 50, 0.04);
}

#bookings-view .booking-toolbar .segmented button {
  min-height: 34px;
  border-radius: 7px;
  font-size: 15px;
}

#bookings-view .manual-booking-form {
  padding: 18px;
  border-radius: 8px;
}

#bookings-view .manual-booking-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

#bookings-view .manual-section {
  padding: 14px;
  border-radius: 8px;
}

#bookings-view .manual-service-trigger,
#bookings-view .manual-payment-trigger {
  min-height: 56px;
  border-radius: 8px;
}

#bookings-view .manual-date-picker-inline {
  border-radius: 8px;
}

#bookings-view .manual-date-cell,
#bookings-view .manual-time-option {
  border-radius: 7px;
}

#bookings-view .manual-time-options {
  gap: 5px;
}

#bookings-view .manual-time-option {
  min-height: 32px;
  font-size: 13px;
}

#bookings-view .manual-summary-card {
  position: static;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 16px 20px;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(26, 39, 35, 0.06);
}

#bookings-view .manual-summary-card dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#bookings-view .manual-summary-card dl div {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 0 14px;
  border-bottom: 0;
  border-left: 1px solid rgba(24, 60, 50, 0.1);
}

#bookings-view .manual-summary-card dl div:first-child {
  padding-left: 0;
  border-left: 0;
}

#bookings-view .manual-summary-card dd {
  text-align: left;
}

#bookings-view .manual-form-footer {
  padding-top: 10px;
}

#bookings-view .booking-calendar-panel {
  gap: 18px;
}

#bookings-view .booking-calendar-card,
#bookings-view .booking-day-panel {
  border-radius: 8px;
  padding: 18px;
}

/* Day panel keeps a comfortable floor so an empty day does not collapse
   the calendar column into nothing. Calendar card sizes to its content
   (header + 6 weeks of dates + footer padding) via align-self: start. */
#bookings-view .booking-day-panel {
  min-height: 520px;
}

#bookings-view .booking-calendar-header {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  margin-bottom: 14px;
}

#bookings-view .booking-calendar-header .icon-button {
  width: 44px;
  min-height: 44px;
  border-radius: 8px;
}

#bookings-view .booking-calendar-header strong {
  font-size: 24px;
}

#bookings-view .booking-calendar-grid {
  gap: 7px;
}

#bookings-view .booking-calendar-cell {
  min-height: 74px;
  border-radius: 8px;
  padding: 9px;
}

#bookings-view .booking-calendar-cell span {
  font-size: 15px;
  line-height: 1;
}

#bookings-view .booking-calendar-cell strong {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

#bookings-view .booking-day-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

#bookings-view .booking-day-title-row {
  align-items: center;
  margin-bottom: 16px;
}

#bookings-view .booking-day-title-row h3 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0;
}

#bookings-view .booking-day-title-row > span {
  border-radius: 999px;
  padding: 9px 15px;
}

#bookings-view #booking-day-bookings {
  max-height: 540px;
  gap: 10px;
}

#bookings-view .booking-row {
  min-height: 96px;
  grid-template-columns: 88px minmax(0, 1fr) minmax(164px, 200px);
  gap: 12px;
  border-radius: 8px;
  padding: 10px;
}

#bookings-view .booking-time-badge {
  min-height: 74px;
  border-radius: 8px;
}

#bookings-view .booking-time-badge strong {
  font-size: 26px;
}

#bookings-view .booking-card-main {
  gap: 4px;
}

#bookings-view .booking-card-main strong {
  font-size: 19px;
}

#bookings-view .booking-actions {
  min-width: 164px;
  border-radius: 8px;
}

#bookings-view .booking-actions .amount {
  width: 100%;
}

#bookings-view .amount strong {
  font-size: 18px;
}

#bookings-view .status-select,
#bookings-view .booking-actions .small-button {
  border-radius: 7px;
}

#bookings-view .booking-row.pay-on-arrival {
  background: rgba(255, 250, 240, 0.86);
}

#bookings-view .booking-row.pay-on-arrival .booking-actions {
  grid-template-columns: 1fr;
  grid-template-areas:
    "amount"
    "status"
    "paid";
}

#bookings-view .booking-row.pay-on-arrival .amount {
  text-align: left;
}

#bookings-view .booking-row.pay-on-arrival .amount strong {
  font-size: 18px;
}

#bookings-view .booking-card-details {
  gap: 8px;
}

#bookings-view .booking-card-details > div {
  border-radius: 8px;
  padding: 10px;
}

#bookings-view #all-bookings {
  gap: 10px;
}

#bookings-view #all-bookings .booking-row {
  min-height: 92px;
}

@media (min-width: 1281px) {
  #bookings-view .booking-day-panel #booking-day-bookings {
    overflow-y: auto;
  }

  #bookings-view #booking-day-bookings .booking-row:nth-child(n + 5) {
    margin-top: 0;
  }
}

@media (max-width: 1280px) {
  #bookings-view .manual-booking-layout,
  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  #bookings-view .booking-calendar-card,
  #bookings-view .booking-day-panel {
    min-height: auto;
  }

  #bookings-view .booking-calendar-card {
    min-height: 560px;
  }

  #bookings-view #booking-day-bookings {
    max-height: none;
  }
}

@media (max-width: 900px) {
  #bookings-view .booking-toolbar {
    align-items: stretch;
  }

  #bookings-view .booking-toolbar .primary-button {
    width: 100%;
  }

  #bookings-view .booking-toolbar .segmented {
    flex: 1 1 auto;
  }
}

@media (max-width: 760px) {
  #bookings-view > .panel {
    padding: 12px;
  }

  #bookings-view .booking-toolbar {
    gap: 10px;
    margin-bottom: 14px;
  }

  #bookings-view .booking-toolbar .segmented button {
    font-size: 13px;
    padding-inline: 9px;
  }

  #bookings-view .manual-booking-form {
    padding: 12px;
  }

  #bookings-view .manual-summary-card,
  #bookings-view .manual-summary-card dl {
    grid-template-columns: 1fr;
  }

  #bookings-view .manual-summary-card dl div {
    padding: 9px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  #bookings-view .manual-summary-card dl div:last-child {
    border-bottom: 0;
  }

  #bookings-view .booking-calendar-card {
    min-height: auto;
  }

  #bookings-view .booking-calendar-header strong {
    font-size: 20px;
  }

  #bookings-view .booking-calendar-cell {
    min-height: 46px;
    padding: 6px;
  }

  #bookings-view .booking-day-title-row h3 {
    font-size: 28px;
  }

  #bookings-view .booking-row {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 0;
  }

  #bookings-view .booking-time-badge {
    min-height: 68px;
  }

  #bookings-view .booking-actions {
    min-width: 0;
  }
}

/* Bookings tab polish: match the calmer dashboard rhythm */
#bookings-view > .panel {
  border-color: rgba(24, 60, 50, 0.12);
  background:
    radial-gradient(circle at 92% 4%, rgba(110, 198, 173, 0.1), transparent 26%),
    var(--surface);
  box-shadow: 0 18px 42px rgba(14, 31, 25, 0.07);
}

#bookings-view .booking-toolbar {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

#bookings-view .booking-toolbar .primary-button,
#bookings-view .booking-toolbar .segmented {
  box-shadow: 0 10px 24px rgba(14, 31, 25, 0.05);
}

#bookings-view .booking-toolbar .segmented {
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

#bookings-view .booking-toolbar .segmented .active {
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(14, 31, 25, 0.07);
}

#bookings-view .booking-calendar-panel {
  /* Narrow mini-calendar (~24% of the column) so the day timeline
   * on the right gets the breathing room - that's where the actual
   * appointments live and where the owner spends most of the time.
   * Previous 0.94fr / 1.06fr setup made the calendar nearly half
   * the row and squeezed the timeline. */
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

#bookings-view .booking-calendar-card,
#bookings-view .booking-day-panel {
  min-height: 728px;
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

#bookings-view .booking-calendar-card {
  justify-content: space-between;
}

#bookings-view .booking-calendar-grid {
  gap: 8px;
}

#bookings-view .booking-calendar-cell {
  min-height: 82px;
  background: rgba(255, 255, 255, 0.7);
}

#bookings-view .booking-calendar-cell.is-selected {
  background: rgba(210, 239, 231, 0.86);
}

#bookings-view .booking-day-panel {
  overflow: hidden;
}

#bookings-view .booking-day-title-row {
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

#bookings-view .booking-day-title-row h3 {
  font-size: clamp(27px, 2.45vw, 38px);
}

#bookings-view .booking-day-title-row > span {
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(238, 244, 241, 0.88);
}

#bookings-view #booking-day-bookings {
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  max-height: 590px;
  padding-right: 8px;
}

#bookings-view #booking-day-bookings .booking-row {
  width: 100%;
}

#bookings-view .booking-row {
  min-height: 106px;
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

#bookings-view .booking-time-badge,
#bookings-view .booking-actions {
  min-height: 78px;
  background: rgba(238, 244, 241, 0.9);
}

#bookings-view .booking-row.pay-on-arrival {
  border-color: rgba(224, 161, 50, 0.42);
  background: rgba(255, 250, 240, 0.88);
}

#bookings-view .booking-row.pay-on-arrival .booking-actions {
  border-color: rgba(224, 161, 50, 0.32);
  background: rgba(255, 243, 211, 0.82);
}

#bookings-view .booking-card-details > div {
  background: rgba(238, 244, 241, 0.82);
}

@media (max-width: 1280px) {
  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  #bookings-view .booking-calendar-card,
  #bookings-view .booking-day-panel {
    min-height: auto;
  }

  #bookings-view .booking-calendar-card {
    min-height: 560px;
  }

  #bookings-view #booking-day-bookings {
    max-height: none;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  #bookings-view .booking-calendar-cell {
    min-height: 50px;
  }

  #bookings-view .booking-row {
    min-height: 0;
  }

  #bookings-view .booking-actions {
    grid-column: 1 / -1;
  }
}

/* Bookings tab final alignment with the dashboard cards */
#bookings-view > .panel {
  border-color: rgba(24, 60, 50, 0.12);
  background:
    radial-gradient(circle at 96% 0, rgba(109, 205, 177, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 251, 0.94));
  box-shadow: 0 18px 46px rgba(14, 31, 25, 0.07);
}

#bookings-view .booking-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

#bookings-view .booking-toolbar .primary-button {
  min-height: 44px;
  border-radius: 8px;
  padding-inline: 18px;
}

#bookings-view .booking-toolbar .segmented {
  min-height: 44px;
  border-color: rgba(24, 60, 50, 0.12);
  border-radius: 8px;
  background: rgba(238, 244, 241, 0.74);
  padding: 5px;
  gap: 4px;
  box-shadow: none;
}

#bookings-view .booking-toolbar .segmented button {
  min-height: 34px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}

#bookings-view .booking-toolbar .segmented .active {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 7px 18px rgba(14, 31, 25, 0.06);
}

#bookings-view .booking-calendar-panel {
  /* Same narrow-mini-calendar treatment as the override above, kept
   * in sync for this breakpoint. */
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

#bookings-view .booking-calendar-card,
#bookings-view .booking-day-panel {
  min-height: 660px;
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

#bookings-view .booking-calendar-card {
  justify-content: space-between;
}

#bookings-view .booking-calendar-grid {
  gap: 8px;
}

#bookings-view .booking-calendar-cell {
  min-height: 72px;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(255, 255, 255, 0.76);
}

#bookings-view .booking-calendar-cell.has-bookings {
  border-color: rgba(20, 126, 101, 0.28);
  background: rgba(249, 253, 251, 0.95);
}

#bookings-view .booking-calendar-cell.active {
  border-color: var(--accent-dark);
  background: rgba(218, 241, 234, 0.9);
  box-shadow: inset 0 0 0 2px rgba(16, 44, 36, 0.78);
}

#bookings-view .booking-day-panel {
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

#bookings-view .booking-day-title-row {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#bookings-view .booking-day-title-row h3 {
  font-size: clamp(27px, 2.4vw, 38px);
  line-height: 1;
}

#bookings-view .booking-day-title-row > span {
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(238, 244, 241, 0.92);
  padding: 9px 14px;
}

#bookings-view #booking-day-bookings {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 7px;
  scrollbar-color: rgba(20, 126, 101, 0.28) transparent;
  scrollbar-width: thin;
}

#bookings-view #booking-day-bookings .booking-row {
  width: 100%;
}

#bookings-view .booking-row {
  align-self: start;
  min-height: 104px;
  grid-template-columns: 92px minmax(0, 1fr) minmax(170px, 210px);
  gap: 14px;
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

#bookings-view .booking-row.expanded {
  min-height: auto;
}

#bookings-view .booking-time-badge,
#bookings-view .booking-actions {
  min-height: 76px;
  background: rgba(238, 244, 241, 0.92);
}

#bookings-view .booking-time-badge {
  justify-items: center;
  text-align: center;
}

#bookings-view .booking-time-badge strong {
  font-size: 27px;
}

#bookings-view .booking-card-main strong {
  font-size: 20px;
}

#bookings-view .booking-card-main span {
  font-size: 15px;
}

#bookings-view .booking-actions {
  justify-items: end;
  text-align: right;
}

#bookings-view .booking-row.pay-on-arrival {
  border-color: rgba(205, 145, 40, 0.42);
  background: rgba(255, 251, 242, 0.86);
}

#bookings-view .booking-row.pay-on-arrival .booking-actions {
  border-color: rgba(205, 145, 40, 0.3);
  background: rgba(255, 243, 218, 0.92);
}

#bookings-view .booking-card-details > div {
  background: rgba(238, 244, 241, 0.88);
}

.app-shell.theme-dark #bookings-view > .panel,
.admin-shell.theme-dark #bookings-view > .panel,
.app-shell.theme-dark #bookings-view .booking-calendar-card,
.admin-shell.theme-dark #bookings-view .booking-calendar-card,
.app-shell.theme-dark #bookings-view .booking-day-panel,
.admin-shell.theme-dark #bookings-view .booking-day-panel {
  border-color: rgba(185, 216, 206, 0.16);
  background:
    radial-gradient(circle at 96% 0, rgba(111, 208, 181, 0.11), transparent 32%),
    var(--surface);
}

@media (max-width: 1280px) {
  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  #bookings-view .booking-calendar-card,
  #bookings-view .booking-day-panel {
    min-height: auto;
  }

  #bookings-view .booking-calendar-card {
    min-height: 560px;
  }

  #bookings-view #booking-day-bookings {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  #bookings-view .booking-toolbar {
    align-items: stretch;
  }

  #bookings-view .booking-toolbar .primary-button,
  #bookings-view .booking-toolbar .segmented {
    width: 100%;
  }

  #bookings-view .booking-toolbar .segmented {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  #bookings-view .booking-calendar-card {
    min-height: auto;
  }

  #bookings-view .booking-calendar-cell {
    min-height: 48px;
  }

  #bookings-view .booking-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  #bookings-view .booking-actions {
    grid-column: 1 / -1;
    min-width: 0;
    justify-items: stretch;
    text-align: left;
  }
}

/* Booking cards: keep collapsed rows scan-first, reveal money/actions on expand. */
#dashboard-view .dashboard-booking-card {
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 92px;
}

#dashboard-view .dashboard-booking-card.expanded {
  grid-template-columns: 122px minmax(0, 1fr) minmax(220px, 300px);
}

#dashboard-view .dashboard-booking-card.expanded .dashboard-booking-payment {
  grid-column: auto;
  min-width: 220px;
}

#dashboard-view .dashboard-booking-card:not(.expanded) .dashboard-booking-main {
  padding-right: 12px;
}

#dashboard-view .dashboard-booking-card:not(.expanded).pay-on-arrival {
  border-color: rgba(205, 145, 40, 0.34);
}

#dashboard-view .dashboard-booking-card.expanded .dashboard-booking-details {
  grid-column: 1 / -1;
}

#bookings-view .booking-row {
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 96px;
}

#bookings-view .booking-row.expanded {
  grid-template-columns: 104px minmax(0, 1fr) minmax(210px, 270px);
}

/* (Moved to the bottom of the file so it overrides the older
   #bookings-view #all-bookings rule that pinned the panel to grid-column 3.) */

#bookings-view .booking-row:not(.expanded).pay-on-arrival {
  border-color: rgba(205, 145, 40, 0.34);
  background: rgba(255, 253, 248, 0.9);
}

#bookings-view .booking-row.expanded.pay-on-arrival {
  border-color: rgba(205, 145, 40, 0.48);
  background: rgba(255, 250, 240, 0.88);
}

#bookings-view .booking-card-details {
  grid-column: 1 / -1;
}

#bookings-view .booking-card-payment-panel {
  align-content: center;
}

@media (max-width: 1280px) {
  #dashboard-view .dashboard-booking-card.expanded,
  #bookings-view .booking-row.expanded {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  #dashboard-view .dashboard-booking-card.expanded .dashboard-booking-payment,
  #bookings-view .booking-row.expanded .booking-card-payment-panel {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  #dashboard-view .dashboard-booking-card,
  #dashboard-view .dashboard-booking-card.expanded,
  #bookings-view .booking-row,
  #bookings-view .booking-row.expanded {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

/* Bookings workspace reset: keep this view operational and distinct from Dashboard. */
#bookings-view > .metric-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  gap: 16px;
  margin: 0 0 16px;
}

#bookings-view > .metric-grid .metric {
  position: relative;
  overflow: hidden;
  border-color: rgba(24, 60, 50, 0.12);
  background:
    radial-gradient(circle at 92% 10%, rgba(110, 198, 173, 0.12), transparent 30%),
    var(--surface);
  box-shadow: 0 18px 42px rgba(14, 31, 25, 0.07);
}

#bookings-view > .metric-grid .booking-metrics,
#bookings-view > .metric-grid .revenue-metrics {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 12px;
  min-height: 130px;
  padding: 18px 20px;
}

#bookings-view > .metric-grid .appointment-metric-title {
  gap: 0;
}

#bookings-view > .metric-grid .appointment-metric-title strong {
  font-size: clamp(25px, 1.9vw, 32px);
  line-height: 1;
}

#bookings-view > .metric-grid .appointment-metric-row,
#bookings-view > .metric-grid .revenue-metric-row {
  align-items: stretch;
  gap: 10px;
}

#bookings-view > .metric-grid .appointment-metric-row {
  grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 0.94fr));
}

#bookings-view > .metric-grid .revenue-metric-row {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

#bookings-view > .metric-grid .metric-split {
  min-height: 84px;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 12px 16px;
  text-align: center;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(235, 244, 240, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

#bookings-view > .metric-grid .metric-split-primary {
  border-color: rgba(20, 126, 101, 0.22);
  background:
    linear-gradient(135deg, rgba(205, 237, 226, 0.96), rgba(222, 246, 239, 0.88));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    0 14px 30px rgba(20, 126, 101, 0.08);
}

#bookings-view > .metric-grid .metric-split-secondary {
  border-color: rgba(24, 60, 50, 0.09);
  background:
    linear-gradient(135deg, rgba(239, 247, 244, 0.88), rgba(247, 251, 249, 0.82));
}

#bookings-view > .metric-grid .revenue-metrics .metric-split-due {
  border-color: rgba(164, 124, 35, 0.14);
  background:
    linear-gradient(135deg, rgba(247, 244, 235, 0.82), rgba(246, 251, 248, 0.8));
}

#bookings-view > .metric-grid .metric-split span {
  color: var(--muted);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 850;
}

#bookings-view > .metric-grid .metric-split strong {
  margin: 0;
  font-size: clamp(32px, 2.7vw, 46px);
  line-height: 0.96;
}

#bookings-view > .metric-grid .metric-split-primary strong {
  font-size: clamp(36px, 3vw, 52px);
}

#bookings-view > .dashboard-alerts {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(24, 60, 50, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 235, 0.78), rgba(239, 251, 247, 0.86)),
    var(--surface);
  box-shadow: 0 16px 34px rgba(14, 31, 25, 0.06);
}

#bookings-view > .dashboard-alerts.hidden {
  display: none;
}

#bookings-view .dashboard-setup-header {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}

#bookings-view .dashboard-setup-header strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.05;
}

#bookings-view .dashboard-setup-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

#bookings-view .attention-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(224, 168, 66, 0.26);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.86);
}

#bookings-view .dashboard-connect-alert {
  border-color: rgba(20, 126, 101, 0.22);
  background: rgba(235, 250, 245, 0.82);
}

#bookings-view .attention-alert strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.08;
}

#bookings-view .attention-alert p {
  max-width: 720px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

#bookings-view .billing-reminder-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

#bookings-view .billing-reminder-actions .primary-button,
#bookings-view .billing-reminder-actions .ghost-button {
  min-height: 42px;
  padding-inline: 18px;
  white-space: nowrap;
}

#bookings-view .dashboard-connect-alert .billing-reminder-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: initial;
  min-width: min(410px, 100%);
}

#bookings-view > .panel {
  padding: clamp(18px, 2vw, 26px);
}

#bookings-view .booking-toolbar {
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

#bookings-view .booking-toolbar .primary-button {
  min-height: 46px;
  padding-inline: 18px;
}

#bookings-view .booking-toolbar .segmented {
  min-height: 46px;
  padding: 5px;
  gap: 4px;
  border-radius: 8px;
  background: rgba(238, 244, 241, 0.72);
  box-shadow: none;
}

#bookings-view .booking-toolbar .segmented button {
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}

#bookings-view .booking-calendar-panel {
  /* Narrow mini-calendar (~24% of column). See base override above. */
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

#bookings-view .booking-calendar-card,
#bookings-view .booking-day-panel {
  min-height: 690px;
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: none;
}

#bookings-view .booking-calendar-card {
  justify-content: space-between;
}

#bookings-view .booking-calendar-grid {
  gap: 8px;
}

#bookings-view .booking-calendar-cell {
  min-height: 76px;
  border-color: rgba(24, 60, 50, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

#bookings-view .booking-calendar-cell.has-bookings {
  border-color: rgba(20, 126, 101, 0.28);
  background: rgba(249, 253, 251, 0.96);
}

#bookings-view .booking-calendar-cell.active {
  border-color: var(--accent-dark);
  background: rgba(218, 241, 234, 0.92);
  box-shadow: inset 0 0 0 2px rgba(16, 44, 36, 0.78);
}

#bookings-view .booking-day-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#bookings-view .booking-day-title-row {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#bookings-view .booking-day-title-row h3 {
  font-size: clamp(30px, 2.75vw, 44px);
  line-height: 1;
}

#bookings-view .booking-day-title-row > span {
  padding: 9px 14px;
  border-color: rgba(24, 60, 50, 0.12);
  background: rgba(238, 244, 241, 0.92);
}

#bookings-view #booking-day-bookings {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 12px;
  max-height: 568px;
  overflow-y: auto;
  padding-right: 7px;
  scrollbar-color: rgba(20, 126, 101, 0.28) transparent;
  scrollbar-width: thin;
}

#bookings-view #booking-day-bookings .booking-row {
  width: 100%;
}

#bookings-view .booking-row {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  min-height: 104px;
  gap: 14px;
  padding: 13px;
  border-color: rgba(24, 60, 50, 0.11);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: none;
}

#bookings-view .booking-row.expanded {
  grid-template-columns: 104px minmax(0, 1fr) minmax(210px, 270px);
  align-items: start;
  min-height: auto;
}

#bookings-view .booking-time-badge {
  min-height: 76px;
  justify-items: center;
  text-align: center;
  background: rgba(238, 244, 241, 0.92);
}

#bookings-view .booking-time-badge strong {
  font-size: 27px;
}

#bookings-view .booking-card-main {
  align-self: center;
}

#bookings-view .booking-card-main strong {
  font-size: 21px;
}

#bookings-view .booking-card-main span {
  font-size: 15px;
  color: var(--muted);
}

#bookings-view .booking-card-payment-panel {
  min-width: 210px;
  min-height: 76px;
  align-content: center;
  justify-items: stretch;
  background: rgba(238, 244, 241, 0.92);
}

#bookings-view .booking-card-payment-panel .amount {
  text-align: left;
}

#bookings-view .booking-card-details {
  grid-column: 1 / -1;
  margin-top: 2px;
}

#bookings-view .booking-card-details > div {
  background: rgba(238, 244, 241, 0.88);
}

#bookings-view .booking-row:not(.expanded).pay-on-arrival {
  border-color: rgba(205, 145, 40, 0.34);
  background: rgba(255, 253, 248, 0.9);
}

#bookings-view .booking-row.expanded.pay-on-arrival {
  border-color: rgba(205, 145, 40, 0.48);
  background: rgba(255, 250, 240, 0.88);
}

#bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel {
  border-color: rgba(205, 145, 40, 0.3);
  background: rgba(255, 243, 218, 0.92);
}

.app-shell.theme-dark #bookings-view > .metric-grid .metric,
.admin-shell.theme-dark #bookings-view > .metric-grid .metric {
  border-color: rgba(185, 216, 206, 0.16);
  background:
    radial-gradient(circle at 92% 10%, rgba(111, 208, 181, 0.1), transparent 30%),
    rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view > .metric-grid .metric-split,
.admin-shell.theme-dark #bookings-view > .metric-grid .metric-split {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view > .metric-grid .metric-split-primary,
.admin-shell.theme-dark #bookings-view > .metric-grid .metric-split-primary {
  border-color: rgba(111, 208, 181, 0.26);
  background: rgba(111, 208, 181, 0.11);
}

.app-shell.theme-dark #bookings-view > .metric-grid .revenue-metrics .metric-split-due,
.admin-shell.theme-dark #bookings-view > .metric-grid .revenue-metrics .metric-split-due {
  border-color: rgba(229, 174, 76, 0.22);
  background: rgba(229, 174, 76, 0.075);
}

.app-shell.theme-dark #bookings-view > .dashboard-alerts,
.admin-shell.theme-dark #bookings-view > .dashboard-alerts {
  border-color: rgba(185, 216, 206, 0.16);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view .attention-alert,
.admin-shell.theme-dark #bookings-view .attention-alert {
  border-color: rgba(229, 174, 76, 0.22);
  background: rgba(229, 174, 76, 0.08);
}

.app-shell.theme-dark #bookings-view .dashboard-connect-alert,
.admin-shell.theme-dark #bookings-view .dashboard-connect-alert {
  border-color: rgba(111, 208, 181, 0.2);
  background: rgba(111, 208, 181, 0.08);
}

@media (max-width: 1280px) {
  #bookings-view > .metric-grid {
    grid-template-columns: 1fr;
  }

  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr;
  }

  #bookings-view .booking-calendar-card,
  #bookings-view .booking-day-panel {
    min-height: auto;
  }

  #bookings-view .booking-calendar-card {
    min-height: 560px;
  }

  #bookings-view #booking-day-bookings {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  #bookings-view .booking-row.expanded {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  #bookings-view .booking-row.expanded .booking-card-payment-panel {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  #bookings-view > .metric-grid {
    gap: 12px;
    margin-bottom: 14px;
  }

  #bookings-view > .metric-grid .booking-metrics,
  #bookings-view > .metric-grid .revenue-metrics {
    min-height: auto;
    gap: 14px;
    padding: 18px;
  }

  #bookings-view > .metric-grid .appointment-metric-title strong {
    font-size: 30px;
  }

  #bookings-view > .metric-grid .appointment-metric-row,
  #bookings-view > .metric-grid .revenue-metric-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #bookings-view > .metric-grid .metric-split {
    min-height: 82px;
    padding: 12px;
  }

  #bookings-view > .metric-grid .metric-split strong,
  #bookings-view > .metric-grid .metric-split-primary strong {
    font-size: 36px;
  }

  #bookings-view .attention-alert,
  #bookings-view .dashboard-connect-alert .billing-reminder-actions {
    grid-template-columns: 1fr;
  }

  #bookings-view .billing-reminder-actions {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    justify-content: stretch;
  }

  #bookings-view .billing-reminder-actions .primary-button,
  #bookings-view .billing-reminder-actions .ghost-button {
    width: 100%;
  }

  #bookings-view .booking-toolbar {
    align-items: stretch;
  }

  #bookings-view .booking-toolbar .primary-button,
  #bookings-view .booking-toolbar .segmented {
    width: 100%;
  }

  #bookings-view .booking-toolbar .segmented {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  #bookings-view .booking-calendar-card {
    min-height: auto;
  }

  #bookings-view .booking-calendar-cell {
    min-height: 48px;
  }

  #bookings-view .booking-row,
  #bookings-view .booking-row.expanded {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  #bookings-view .booking-card-payment-panel,
  #bookings-view .booking-row.expanded .booking-card-payment-panel {
    grid-column: 1 / -1;
  }
}

/* Dark mode refinements for operational calendars and the public booking flow. */
.app-shell.theme-dark #bookings-view .booking-calendar-card,
.admin-shell.theme-dark #bookings-view .booking-calendar-card,
.app-shell.theme-dark #bookings-view .booking-day-panel,
.admin-shell.theme-dark #bookings-view .booking-day-panel {
  border-color: rgba(185, 216, 206, 0.18);
  background:
    radial-gradient(circle at 96% 0, rgba(111, 208, 181, 0.08), transparent 30%),
    #0d1c17;
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell {
  border-color: rgba(185, 216, 206, 0.13);
  background: rgba(255, 255, 255, 0.035);
  color: #f7fbf9;
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell.has-bookings,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell.has-bookings {
  border-color: rgba(111, 208, 181, 0.32);
  background: rgba(111, 208, 181, 0.08);
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell.active,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell.active {
  border-color: rgba(142, 232, 203, 0.88);
  background: rgba(111, 208, 181, 0.18);
  box-shadow: inset 0 0 0 2px rgba(142, 232, 203, 0.28);
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell.is-empty,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell.is-empty {
  background: transparent;
  border-color: transparent;
}

.app-shell.theme-dark #bookings-view .booking-day-title-row > span,
.admin-shell.theme-dark #bookings-view .booking-day-title-row > span,
.app-shell.theme-dark #bookings-view .empty-state,
.admin-shell.theme-dark #bookings-view .empty-state,
.app-shell.theme-dark #bookings-view .booking-time-badge,
.admin-shell.theme-dark #bookings-view .booking-time-badge,
.app-shell.theme-dark #bookings-view .booking-card-payment-panel,
.admin-shell.theme-dark #bookings-view .booking-card-payment-panel,
.app-shell.theme-dark #bookings-view .booking-card-details > div,
.admin-shell.theme-dark #bookings-view .booking-card-details > div {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view .booking-day-title-row > span {
  color: rgba(216, 235, 229, 0.82);
}

.app-shell.theme-dark #bookings-view .empty-state,
.admin-shell.theme-dark #bookings-view .empty-state {
  color: rgba(216, 235, 229, 0.72);
}

.app-shell.theme-dark #bookings-view .booking-row,
.admin-shell.theme-dark #bookings-view .booking-row {
  border-color: rgba(185, 216, 206, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark #bookings-view .booking-row:not(.expanded).pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row:not(.expanded).pay-on-arrival,
.app-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival {
  border-color: rgba(111, 208, 181, 0.24);
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel,
.admin-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel {
  border-color: rgba(111, 208, 181, 0.2);
  background: rgba(111, 208, 181, 0.08);
}

body.public-route .app-shell.theme-dark .booking-step,
body.public-route .app-shell.theme-dark .summary-panel,
body.public-route .app-shell.theme-dark .business-panel,
body.public-route .app-shell.theme-dark .confirmation-panel,
.app-shell.theme-dark .public-view .booking-step,
.app-shell.theme-dark .public-view .summary-panel,
.app-shell.theme-dark .public-view .business-panel,
.app-shell.theme-dark .public-view .confirmation-panel {
  border-color: rgba(185, 216, 206, 0.18);
  background: #0d1c17;
  box-shadow: none;
}

body.public-route .app-shell.theme-dark .business-details div,
body.public-route .app-shell.theme-dark .service-option,
body.public-route .app-shell.theme-dark .slot-button,
body.public-route .app-shell.theme-dark .empty-state,
body.public-route .app-shell.theme-dark .confirmation-mark,
body.public-route .app-shell.theme-dark .customer-form input,
body.public-route .app-shell.theme-dark .customer-form textarea,
.app-shell.theme-dark .public-view .business-details div,
.app-shell.theme-dark .public-view .service-option,
.app-shell.theme-dark .public-view .slot-button,
.app-shell.theme-dark .public-view .empty-state,
.app-shell.theme-dark .public-view .confirmation-mark,
.app-shell.theme-dark .public-view .customer-form input,
.app-shell.theme-dark .public-view .customer-form textarea {
  border-color: rgba(185, 216, 206, 0.15);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

body.public-route .app-shell.theme-dark .calendar,
.app-shell.theme-dark .public-view .calendar {
  border-color: rgba(185, 216, 206, 0.18);
  background: rgba(255, 255, 255, 0.025);
}

body.public-route .app-shell.theme-dark .calendar-header,
.app-shell.theme-dark .public-view .calendar-header {
  border-bottom-color: rgba(185, 216, 206, 0.15);
  background: rgba(255, 255, 255, 0.025);
}

body.public-route .app-shell.theme-dark .calendar-grid,
.app-shell.theme-dark .public-view .calendar-grid {
  background: rgba(185, 216, 206, 0.12);
}

body.public-route .app-shell.theme-dark .date-label,
.app-shell.theme-dark .public-view .date-label {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(184, 202, 196, 0.84);
}

body.public-route .app-shell.theme-dark .date-cell,
.app-shell.theme-dark .public-view .date-cell {
  background: rgba(255, 255, 255, 0.035);
  color: #f7fbf9;
}

body.public-route .app-shell.theme-dark .date-cell[disabled],
.app-shell.theme-dark .public-view .date-cell[disabled] {
  background: rgba(255, 255, 255, 0.018);
  color: rgba(184, 202, 196, 0.42);
}

body.public-route .app-shell.theme-dark .service-option.active,
body.public-route .app-shell.theme-dark .date-cell.active,
body.public-route .app-shell.theme-dark .slot-button.active,
.app-shell.theme-dark .public-view .service-option.active,
.app-shell.theme-dark .public-view .date-cell.active,
.app-shell.theme-dark .public-view .slot-button.active {
  border-color: rgba(142, 232, 203, 0.9);
  background: rgba(111, 208, 181, 0.18);
  box-shadow: inset 0 0 0 1px rgba(142, 232, 203, 0.22);
}

body.public-route .app-shell.theme-dark .payment-choice,
.app-shell.theme-dark .public-view .payment-choice {
  border-color: rgba(185, 216, 206, 0.15);
  background: rgba(0, 0, 0, 0.28);
}

body.public-route .app-shell.theme-dark .payment-choice .active,
.app-shell.theme-dark .public-view .payment-choice .active {
  background: rgba(111, 208, 181, 0.14);
  color: var(--text);
  box-shadow: none;
}

.app-shell.theme-dark .payments-activity-row.attention,
.admin-shell.theme-dark .payments-activity-row.attention,
.app-shell.theme-dark .dashboard-booking-card.pay-on-arrival,
.admin-shell.theme-dark .dashboard-booking-card.pay-on-arrival,
.app-shell.theme-dark .booking-row.pay-on-arrival,
.admin-shell.theme-dark .booking-row.pay-on-arrival {
  border-color: rgba(111, 208, 181, 0.24);
  background: rgba(255, 255, 255, 0.045);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention,
.app-shell.theme-dark .booking-row.pay-on-arrival .booking-actions,
.admin-shell.theme-dark .booking-row.pay-on-arrival .booking-actions {
  border-color: rgba(111, 208, 181, 0.2);
  background: rgba(111, 208, 181, 0.08);
}

.app-shell.theme-dark .booking-row.pay-on-arrival .status-select,
.admin-shell.theme-dark .booking-row.pay-on-arrival .status-select {
  border-color: rgba(111, 208, 181, 0.22);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention span,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention span,
.app-shell.theme-dark .booking-payment-meta.payment-attention,
.admin-shell.theme-dark .booking-payment-meta.payment-attention,
.app-shell.theme-dark .amount.payment-attention,
.admin-shell.theme-dark .amount.payment-attention {
  color: #c8f5e6;
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention small,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention small,
.app-shell.theme-dark .amount.payment-attention small,
.admin-shell.theme-dark .amount.payment-attention small {
  color: rgba(216, 235, 229, 0.72);
}

.app-shell.theme-dark .empty-state,
.admin-shell.theme-dark .empty-state,
.app-shell.theme-dark .manual-service-empty,
.admin-shell.theme-dark .manual-service-empty,
.app-shell.theme-dark .manual-time-empty,
.admin-shell.theme-dark .manual-time-empty {
  border-color: rgba(185, 216, 206, 0.15);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(216, 235, 229, 0.78);
  box-shadow: none;
}

.app-shell.theme-dark .empty-state strong,
.admin-shell.theme-dark .empty-state strong,
.app-shell.theme-dark .manual-service-empty strong,
.admin-shell.theme-dark .manual-service-empty strong,
.app-shell.theme-dark .manual-time-empty strong,
.admin-shell.theme-dark .manual-time-empty strong {
  color: var(--text);
}

.app-shell.theme-dark #public-view .service-option,
.app-shell.theme-dark #public-view .slot-button,
.app-shell.theme-dark #public-view .customer-form input,
.app-shell.theme-dark #public-view .customer-form textarea {
  border-color: rgba(185, 216, 206, 0.18);
  background: #10231d;
  color: #f7fbf9;
  box-shadow: none;
}

.app-shell.theme-dark #public-view .service-option strong,
.app-shell.theme-dark #public-view .service-option > span:last-child,
.app-shell.theme-dark #public-view .slot-button {
  color: #f7fbf9;
}

.app-shell.theme-dark #public-view .service-option span {
  color: rgba(216, 235, 229, 0.78);
}

.app-shell.theme-dark #public-view .service-option:hover,
.app-shell.theme-dark #public-view .slot-button:hover {
  border-color: rgba(142, 232, 203, 0.48);
  background: #132b24;
}

.app-shell.theme-dark #public-view .service-option.active,
.app-shell.theme-dark #public-view .slot-button.active,
.app-shell.theme-dark #public-view .date-cell.active {
  border-color: rgba(142, 232, 203, 0.9);
  background: #1c463a;
  color: #f7fbf9;
  box-shadow: inset 0 0 0 1px rgba(142, 232, 203, 0.28);
}

.app-shell.theme-dark #public-view .service-option.active span {
  color: rgba(232, 248, 243, 0.86);
}

.app-shell.theme-dark #public-view .calendar {
  border-color: rgba(185, 216, 206, 0.2);
  background: #0b1713;
}

.app-shell.theme-dark #public-view .calendar-header {
  border-bottom-color: rgba(185, 216, 206, 0.16);
  background: #0d1c17;
}

.app-shell.theme-dark #public-view .calendar-grid {
  background: rgba(185, 216, 206, 0.13);
}

.app-shell.theme-dark #public-view .date-label {
  background: #142820;
  color: rgba(216, 235, 229, 0.72);
}

.app-shell.theme-dark #public-view .date-cell {
  background: #10231d;
  color: #f7fbf9;
}

.app-shell.theme-dark #public-view .date-cell[disabled] {
  background: #17211e;
  color: rgba(216, 235, 229, 0.44);
}

.app-shell.theme-dark #public-view .date-cell:not([disabled]):not(.active):hover {
  background: #132b24;
  color: #ffffff;
}

.app-shell.theme-dark .attention-alert,
.admin-shell.theme-dark .attention-alert,
.app-shell.theme-dark #dashboard-view .attention-alert,
.admin-shell.theme-dark #dashboard-view .attention-alert,
.app-shell.theme-dark #bookings-view .attention-alert,
.admin-shell.theme-dark #bookings-view .attention-alert {
  border-color: rgba(111, 208, 181, 0.2);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.app-shell.theme-dark .billing-reminder,
.admin-shell.theme-dark .billing-reminder,
.app-shell.theme-dark #dashboard-view .billing-reminder,
.admin-shell.theme-dark #dashboard-view .billing-reminder,
.app-shell.theme-dark #bookings-view .billing-reminder,
.admin-shell.theme-dark #bookings-view .billing-reminder {
  border-color: rgba(111, 208, 181, 0.24);
  background: linear-gradient(90deg, rgba(111, 208, 181, 0.08), rgba(255, 255, 255, 0.035));
}

.app-shell.theme-dark .attention-alert p,
.admin-shell.theme-dark .attention-alert p {
  color: rgba(216, 235, 229, 0.72);
}

.app-shell.theme-dark .revenue-metrics .metric-split-due,
.admin-shell.theme-dark .revenue-metrics .metric-split-due,
.app-shell.theme-dark #dashboard-view .revenue-metrics .metric-split-due,
.admin-shell.theme-dark #dashboard-view .revenue-metrics .metric-split-due,
.app-shell.theme-dark #bookings-view > .metric-grid .revenue-metrics .metric-split-due,
.admin-shell.theme-dark #bookings-view > .metric-grid .revenue-metrics .metric-split-due {
  border-color: rgba(126, 193, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(78, 122, 150, 0.28), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 0 0 1px rgba(196, 226, 255, 0.06);
}

.app-shell.theme-dark .revenue-metrics .metric-split-due span,
.admin-shell.theme-dark .revenue-metrics .metric-split-due span,
.app-shell.theme-dark #dashboard-view .revenue-metrics .metric-split-due span,
.admin-shell.theme-dark #dashboard-view .revenue-metrics .metric-split-due span,
.app-shell.theme-dark #bookings-view > .metric-grid .revenue-metrics .metric-split-due span,
.admin-shell.theme-dark #bookings-view > .metric-grid .revenue-metrics .metric-split-due span {
  color: rgba(219, 235, 247, 0.78);
}

/* Cool dark-mode attention tone. Replaces the old amber/brown treatment. */
.app-shell.theme-dark .attention-alert,
.admin-shell.theme-dark .attention-alert,
.app-shell.theme-dark #dashboard-view .attention-alert,
.admin-shell.theme-dark #dashboard-view .attention-alert,
.app-shell.theme-dark #bookings-view .attention-alert,
.admin-shell.theme-dark #bookings-view .attention-alert,
.app-shell.theme-dark .billing-reminder,
.admin-shell.theme-dark .billing-reminder,
.app-shell.theme-dark #dashboard-view .billing-reminder,
.admin-shell.theme-dark #dashboard-view .billing-reminder,
.app-shell.theme-dark #bookings-view .billing-reminder,
.admin-shell.theme-dark #bookings-view .billing-reminder,
.app-shell.theme-dark .payments-activity-row.attention,
.admin-shell.theme-dark .payments-activity-row.attention,
.app-shell.theme-dark .dashboard-booking-card.pay-on-arrival,
.admin-shell.theme-dark .dashboard-booking-card.pay-on-arrival,
.app-shell.theme-dark .booking-row.pay-on-arrival,
.admin-shell.theme-dark .booking-row.pay-on-arrival,
.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival,
.app-shell.theme-dark #bookings-view .booking-row:not(.expanded).pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row:not(.expanded).pay-on-arrival,
.app-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival,
.app-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"],
.admin-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"],
.app-shell.theme-dark #bookings-view .manual-payment-trigger[data-payment-mode="arrival"],
.admin-shell.theme-dark #bookings-view .manual-payment-trigger[data-payment-mode="arrival"],
.app-shell.theme-dark .manual-payment-option.attention.active,
.admin-shell.theme-dark .manual-payment-option.attention.active {
  border-color: rgba(126, 193, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(78, 122, 150, 0.28), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 0 0 1px rgba(196, 226, 255, 0.06);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention,
.app-shell.theme-dark .booking-row.pay-on-arrival .booking-actions,
.admin-shell.theme-dark .booking-row.pay-on-arrival .booking-actions,
.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .booking-actions,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .booking-actions,
.app-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel,
.admin-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel,
.app-shell.theme-dark .booking-row.needs-attention:not(.pay-on-arrival) .booking-actions,
.admin-shell.theme-dark .booking-row.needs-attention:not(.pay-on-arrival) .booking-actions {
  border-color: rgba(126, 193, 255, 0.24);
  background: rgba(78, 122, 150, 0.18);
  box-shadow: inset 3px 0 0 rgba(126, 193, 255, 0.28);
}

.app-shell.theme-dark .booking-row.pay-on-arrival .status-select,
.admin-shell.theme-dark .booking-row.pay-on-arrival .status-select,
.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .status-select,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .status-select {
  border-color: rgba(126, 193, 255, 0.24);
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention span,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention span,
.app-shell.theme-dark .booking-payment-meta.payment-attention,
.admin-shell.theme-dark .booking-payment-meta.payment-attention,
.app-shell.theme-dark .amount.payment-attention,
.admin-shell.theme-dark .amount.payment-attention,
.app-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] strong,
.admin-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] strong {
  color: #dbeff7;
}

.app-shell.theme-dark .dashboard-booking-payment.payment-attention small,
.admin-shell.theme-dark .dashboard-booking-payment.payment-attention small,
.app-shell.theme-dark .amount.payment-attention small,
.admin-shell.theme-dark .amount.payment-attention small,
.app-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] small,
.admin-shell.theme-dark .manual-payment-trigger[data-payment-mode="arrival"] small {
  color: rgba(219, 235, 247, 0.76);
}

.app-shell.theme-dark #dashboard-view .dashboard-booking-card.pay-on-arrival,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-card.pay-on-arrival,
.app-shell.theme-dark #dashboard-view .dashboard-booking-card:not(.expanded).pay-on-arrival,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-card:not(.expanded).pay-on-arrival,
.app-shell.theme-dark #dashboard-view .dashboard-booking-card.expanded.pay-on-arrival,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-card.expanded.pay-on-arrival,
.app-shell.theme-dark #bookings-view .booking-row:not(.expanded).pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row:not(.expanded).pay-on-arrival,
.app-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival,
.admin-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival {
  border-color: rgba(126, 193, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(78, 122, 150, 0.28), rgba(255, 255, 255, 0.045));
}

.app-shell.theme-dark #dashboard-view .dashboard-booking-payment.payment-attention,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-payment.payment-attention,
.app-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel,
.admin-shell.theme-dark #bookings-view .booking-row.expanded.pay-on-arrival .booking-card-payment-panel {
  border-color: rgba(126, 193, 255, 0.24);
  background: rgba(78, 122, 150, 0.18);
}

.app-shell.theme-dark #dashboard-view .dashboard-booking-payment.payment-attention span,
.admin-shell.theme-dark #dashboard-view .dashboard-booking-payment.payment-attention span,
.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .amount strong,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .amount strong {
  color: #dbeff7;
}

.app-shell.theme-dark .dashboard-booking-payment .dashboard-status-select,
.admin-shell.theme-dark .dashboard-booking-payment .dashboard-status-select,
.app-shell.theme-dark .booking-row.pay-on-arrival .status-select,
.admin-shell.theme-dark .booking-row.pay-on-arrival .status-select,
.app-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .status-select,
.admin-shell.theme-dark #bookings-view .booking-row.pay-on-arrival .status-select {
  border-color: rgba(176, 217, 255, 0.34);
  background: rgba(8, 20, 25, 0.74);
  color: #f7fbf9;
  box-shadow: inset 0 0 0 1px rgba(196, 226, 255, 0.08);
}

.app-shell.theme-dark .dashboard-booking-payment .dashboard-status-select option,
.admin-shell.theme-dark .dashboard-booking-payment .dashboard-status-select option,
.app-shell.theme-dark .booking-row.pay-on-arrival .status-select option,
.admin-shell.theme-dark .booking-row.pay-on-arrival .status-select option {
  background: #0d1c17;
  color: #f7fbf9;
}

/* === Inline-editable booking note === */
.booking-note-editable {
  cursor: text;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color 120ms ease, background 120ms ease;
}

.booking-note-editable:hover {
  outline-color: var(--line);
  background: var(--surface-2);
}

.booking-note-editable:focus {
  outline: 1px solid var(--accent) !important;
  background: var(--surface);
}

.booking-note-editable.is-empty {
  color: var(--muted) !important;
  font-style: italic;
  font-weight: 500 !important;
}

.booking-note-editable.is-saving {
  opacity: 0.6;
  pointer-events: none;
}

.app-shell.theme-dark .booking-note-editable:hover,
.admin-shell.theme-dark .booking-note-editable:hover {
  background: rgba(255, 255, 255, 0.05);
  outline-color: rgba(255, 255, 255, 0.16);
}

/* === Bookings Week view (7-day grid) === */
.bookings-week-panel {
  display: grid;
  gap: 14px;
}

.bookings-week-panel.hidden {
  display: none;
}

.bookings-week-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.bookings-week-header h3 {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bookings-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.bookings-week-day {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  min-height: 200px;
  overflow: hidden;
}

.bookings-week-day.is-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(20, 126, 101, 0.16);
}

.bookings-week-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.bookings-week-day-header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.bookings-week-day-header strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.bookings-week-day.is-today .bookings-week-day-header strong {
  color: var(--accent);
}

.bookings-week-day-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  flex: 1;
}

.bookings-week-day-empty {
  margin: auto;
  color: var(--muted);
  font-size: 18px;
}

.bookings-week-block {
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid hsl(var(--service-hue, 160) 50% 70%);
  border-left: 3px solid hsl(var(--service-hue, 160) 55% 45%);
  border-radius: 6px;
  background: hsl(var(--service-hue, 160) 60% 95%);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bookings-week-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px hsl(var(--service-hue, 160) 50% 50% / 0.16);
}

.bookings-week-block-time {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--service-hue, 160) 60% 28%);
  letter-spacing: 0.02em;
}

.bookings-week-block strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookings-week-block-service {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookings-week-block.pay-on-arrival {
  background: var(--attention-soft);
  border-color: rgba(70, 85, 122, 0.32);
  border-left-color: var(--attention);
}

.bookings-week-block.pay-on-arrival .bookings-week-block-time {
  color: var(--attention-strong);
}

.app-shell.theme-dark .bookings-week-day,
.admin-shell.theme-dark .bookings-week-day {
  background: rgba(255, 255, 255, 0.03);
}

.app-shell.theme-dark .bookings-week-day-header,
.admin-shell.theme-dark .bookings-week-day-header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .bookings-week-block,
.admin-shell.theme-dark .bookings-week-block {
  background: hsl(var(--service-hue, 160) 35% 20%);
  border-color: hsl(var(--service-hue, 160) 45% 38%);
  border-left-color: hsl(var(--service-hue, 160) 55% 60%);
}

.app-shell.theme-dark .bookings-week-block-time,
.admin-shell.theme-dark .bookings-week-block-time {
  color: hsl(var(--service-hue, 160) 60% 78%);
}

/* Mobile: stack week days vertically (each day full width) */
@media (max-width: 760px) {
  .bookings-week-grid {
    grid-template-columns: 1fr;
  }

  .bookings-week-day {
    min-height: 0;
  }

  .bookings-week-day-list:empty {
    display: none;
  }
}

/* === Print stylesheet — clean schedule for paper === */
@media print {
  @page {
    margin: 1.5cm;
  }

  body,
  .app-shell.active {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Hide chrome that doesn't belong on a printout */
  .sidebar,
  .topbar-actions,
  .booking-toolbar,
  .manual-booking-form,
  .context-menu,
  .toast,
  .booking-empty-state-actions,
  .icon-button,
  .bookings-ribbon .ribbon-divider,
  .bookings-week-header button {
    display: none !important;
  }

  /* Keep the title row but anchor it to the page */
  .topbar {
    padding: 0 !important;
    margin: 0 0 20px !important;
    border-bottom: 1px solid #000;
    padding-bottom: 12px !important;
  }

  .topbar h1 {
    font-size: 20px !important;
    color: #000 !important;
  }

  .topbar-subtitle {
    color: #444 !important;
  }

  /* Ribbon stays so the printout shows the metrics, but lose the box */
  .bookings-ribbon {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin-bottom: 16px !important;
  }

  .ribbon-row + .ribbon-row {
    border-color: #ccc !important;
  }

  /* Panels: drop visuals */
  .panel,
  .booking-calendar-card,
  .booking-day-panel,
  .bookings-week-day,
  .booking-row,
  .day-timeline-block,
  .bookings-week-block {
    border-color: #ccc !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000 !important;
    page-break-inside: avoid;
  }

  /* Conflict + pay-on-arrival keep a subtle marker */
  .booking-row.pay-on-arrival,
  .day-timeline-block.pay-on-arrival,
  .bookings-week-block.pay-on-arrival {
    background: #f4f5fa !important;
  }

  .day-timeline-block.has-conflict {
    border-left: 3px solid #c63b46 !important;
  }

  /* Hide drag indicator + now marker on print */
  .day-timeline-drop-indicator,
  .day-timeline-now {
    display: none !important;
  }

  /* Make sure the active view stays visible; force the others gone */
  .booking-list.hidden,
  .booking-calendar-panel.hidden,
  .bookings-week-panel.hidden {
    display: none !important;
  }

  /* Avatars and status badges stay readable in B&W */
  .customer-avatar {
    background: #444 !important;
    color: #fff !important;
  }

  .booking-status-badge {
    background: transparent !important;
    border: 1px solid #888 !important;
    color: #000 !important;
  }
}

/* === Right-click context menu === */
@keyframes context-menu-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.context-menu {
  position: absolute;
  z-index: 95;
  min-width: 200px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(15, 36, 30, 0.18), 0 2px 6px rgba(15, 36, 30, 0.08);
  animation: context-menu-in 140ms ease-out;
}

.context-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.context-menu-item:hover,
.context-menu-item:focus-visible {
  background: var(--surface-2);
  outline: 0;
}

.context-menu-item.is-destructive {
  color: #9b1c1c;
}

.context-menu-item.is-destructive:hover {
  background: rgba(155, 28, 28, 0.08);
}

.app-shell.theme-dark .context-menu,
.admin-shell.theme-dark .context-menu {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.app-shell.theme-dark .context-menu-item.is-destructive,
.admin-shell.theme-dark .context-menu-item.is-destructive {
  color: #fecaca;
}

.app-shell.theme-dark .context-menu-item.is-destructive:hover,
.admin-shell.theme-dark .context-menu-item.is-destructive:hover {
  background: rgba(248, 113, 113, 0.12);
}

/* === Drag & drop reschedule === */
.day-timeline-block {
  cursor: grab;
}

.day-timeline-block:active {
  cursor: grabbing;
}

.day-timeline-block.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.day-timeline-drop-indicator {
  position: absolute;
  left: 52px;
  right: 4px;
  top: 0;
  height: 0;
  border-top: 2px dashed var(--accent);
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(to bottom, var(--accent-soft), transparent);
}

.day-timeline-drop-indicator::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

/* Time chip lives in the hour gutter on the LEFT of the timeline track,
 * so the owner sees the exact target time aligned with the hour ticks
 * (instead of a number floating on top of the dashed line in the track).
 * The indicator line starts at x=52px inside the track (where the gutter
 * ends), so a -50px offset puts the chip inside the 52px-wide gutter
 * itself, aligned with the hour labels. */
.day-timeline-drop-time {
  position: absolute;
  top: -11px;
  left: -50px;
  width: 44px;
  text-align: center;
  padding: 3px 6px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(13, 79, 65, 0.25);
  box-sizing: border-box;
}

.app-shell.theme-dark .day-timeline-drop-indicator,
.admin-shell.theme-dark .day-timeline-drop-indicator {
  background: linear-gradient(to bottom, rgba(101, 196, 166, 0.2), transparent);
}

.app-shell.theme-dark .day-timeline-drop-time,
.admin-shell.theme-dark .day-timeline-drop-time {
  background: var(--accent);
  color: #0c1f1a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* === Timeline conflict marker ===
 * When two bookings overlap in time, both get a red border-left
 * accent and a warning triangle in the corner. */
.day-timeline-block.has-conflict {
  border-color: #e0626a !important;
  border-left-color: #c63b46 !important;
  border-left-width: 3px;
  box-shadow: 0 0 0 1px rgba(224, 98, 106, 0.18);
}

.day-timeline-conflict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(224, 98, 106, 0.16);
  color: #c63b46;
  flex: 0 0 auto;
}

.day-timeline-conflict-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.day-timeline-block .day-timeline-block-top {
  width: 100%;
}

.app-shell.theme-dark .day-timeline-block.has-conflict,
.admin-shell.theme-dark .day-timeline-block.has-conflict {
  border-color: rgba(248, 113, 113, 0.5) !important;
  border-left-color: rgba(248, 113, 113, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2);
}

.app-shell.theme-dark .day-timeline-conflict-icon,
.admin-shell.theme-dark .day-timeline-conflict-icon {
  background: rgba(248, 113, 113, 0.22);
  color: #fecaca;
}

/* === Day timeline off-hours overlay ===
 * Greyed strips for hours outside the business's working hours, so the
 * owner can see at a glance when the studio is closed. */
.day-timeline-off-hours {
  position: absolute;
  left: 52px;
  right: 4px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 6px,
      rgba(0, 0, 0, 0.05) 6px,
      rgba(0, 0, 0, 0.05) 12px
    );
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}

.app-shell.theme-dark .day-timeline-off-hours,
.admin-shell.theme-dark .day-timeline-off-hours {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 6px,
      rgba(255, 255, 255, 0.05) 6px,
      rgba(255, 255, 255, 0.05) 12px
    );
}

/* === View toggle (Calendar / List as icon buttons) ===
 * Separates "how to view" from "what to filter" visually — the status
 * segmented control is one row of decisions, view toggle is another. */
#bookings-view > .panel > .booking-toolbar .view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

#bookings-view > .panel > .booking-toolbar .view-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

#bookings-view > .panel > .booking-toolbar .view-toggle-button:hover {
  background: var(--surface-2);
  color: var(--text);
}

#bookings-view > .panel > .booking-toolbar .view-toggle-button.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

#bookings-view > .panel > .booking-toolbar .view-toggle-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.app-shell.theme-dark #bookings-view > .panel > .booking-toolbar .view-toggle,
.admin-shell.theme-dark #bookings-view > .panel > .booking-toolbar .view-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.app-shell.theme-dark #bookings-view > .panel > .booking-toolbar .view-toggle-button.active,
.admin-shell.theme-dark #bookings-view > .panel > .booking-toolbar .view-toggle-button.active {
  background: rgba(101, 196, 166, 0.16);
  color: var(--accent-dark);
}

/* Drop the hairline divider between segments now that view-toggle is
 * visually distinct from the status filter */
#bookings-view > .panel > .booking-toolbar .segmented + .view-toggle {
  margin-left: 8px;
}

#bookings-view > .panel > .booking-toolbar .segmented + .segmented::before {
  display: none;
}

/* Mobile: keep view-toggle as 2 small icon buttons centred under the
 * status filter, NOT a full-width grid */
@media (max-width: 639px) {
  #bookings-view > .panel > .booking-toolbar .view-toggle {
    align-self: center;
    margin-left: 0 !important;
  }
}

/* === Booking search field === */
.booking-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-width: 220px;
}

.booking-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

.booking-search input {
  width: 100%;
  min-height: 36px;
  padding: 6px 12px 6px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.booking-search input::-webkit-search-cancel-button {
  appearance: none;
}

.booking-search input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.booking-search input::placeholder {
  color: var(--muted);
}

@media (max-width: 1023px) {
  .booking-search {
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }
}

.app-shell.theme-dark .booking-search input,
.admin-shell.theme-dark .booking-search input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* === Service colour coding ===
 * Each service hashes to a hue on the HSL wheel. Timeline blocks get a
 * subtle tinted background + matching accent left border; list rows get
 * a 3px coloured strip on the left edge. Pay-on-arrival keeps its
 * slate-indigo tint because the settlement signal outranks service.
 */
.day-timeline-block:not(.pay-on-arrival) {
  background: hsl(var(--service-hue, 160) 60% 95%);
  border-color: hsl(var(--service-hue, 160) 50% 70%);
  border-left-color: hsl(var(--service-hue, 160) 55% 45%);
}

.day-timeline-block:not(.pay-on-arrival):hover,
.day-timeline-block:not(.pay-on-arrival):focus-visible {
  box-shadow: 0 4px 14px hsl(var(--service-hue, 160) 50% 50% / 0.18);
}

.day-timeline-block:not(.pay-on-arrival) .day-timeline-block-time {
  color: hsl(var(--service-hue, 160) 60% 28%);
}

.app-shell.theme-dark .day-timeline-block:not(.pay-on-arrival),
.admin-shell.theme-dark .day-timeline-block:not(.pay-on-arrival) {
  background: hsl(var(--service-hue, 160) 35% 20%);
  border-color: hsl(var(--service-hue, 160) 45% 38%);
  border-left-color: hsl(var(--service-hue, 160) 55% 60%);
}

.app-shell.theme-dark .day-timeline-block:not(.pay-on-arrival) .day-timeline-block-time,
.admin-shell.theme-dark .day-timeline-block:not(.pay-on-arrival) .day-timeline-block-time {
  color: hsl(var(--service-hue, 160) 60% 78%);
}

/* List view: a 3px coloured strip flush with the left rounded corner */
#bookings-view #all-bookings .booking-row {
  position: relative;
  overflow: hidden;
}

#bookings-view #all-bookings .booking-row:not(.pay-on-arrival)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row:not(.pay-on-arrival)::before,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row:not(.pay-on-arrival)::before {
  background: hsl(var(--service-hue, 160) 55% 60%);
}

/* === Microinteractions: smooth transitions, hover lift, click feedback === */

/* Smooth state transitions across interactive elements */
.booking-row,
.day-timeline-block,
.quick-action,
.icon-action,
.primary-button,
.ghost-button,
.small-button,
.icon-button,
.booking-calendar-cell,
.dashboard-calendar-cell,
.segmented button,
.nav-item,
.manual-date-cell,
.booking-status-badge {
  transition:
    background 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

/* Active (click) feedback - subtle press */
.primary-button:active,
.ghost-button:active,
.small-button:active,
.quick-action:active,
.icon-action:active,
.icon-button:active,
.segmented button:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Booking row hover state in List view (not expanded). Previously
   used translateY(-1px) for a subtle lift, but that creates a new
   containing block for position:fixed children, which broke the
   resolve menu's viewport-relative positioning on collapsed rows
   (menu opened off-screen until cursor moved). Box-shadow alone
   gives enough hover feedback. */
#bookings-view #all-bookings .booking-row:not(.expanded):hover {
  box-shadow: 0 4px 12px rgba(20, 27, 24, 0.06);
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row:not(.expanded):hover,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row:not(.expanded):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

/* Calendar day cell — subtle scale on hover */
#bookings-view .booking-calendar-cell:hover:not(.is-empty):not(.active) {
  transform: scale(1.04);
}

/* Subtle fade-in on first render. Originally used translateY for an
 * "entry" feel, but a CSS transform on a parent creates a containing
 * block for position:fixed descendants — that broke the kebab actions
 * menu in day timeline blocks (menu opened relative to the block
 * instead of the viewport, then got clipped by the block's
 * overflow:hidden, producing the user-visible flickering). Opacity
 * alone preserves the gentle entry without the side-effect.
 * 2026-05-27. */
@keyframes booking-fade-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#bookings-view #all-bookings .booking-row {
  animation: booking-fade-up 240ms ease-out;
}

/* Timeline blocks fade-in too */
.day-timeline-block {
  animation: booking-fade-up 280ms ease-out;
}

/* Toast (already exists in DOM) — entry/exit polish */
.toast {
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Theme toggle smooth color transition on root variables */
.app-shell,
.admin-shell,
.main,
.panel,
.bookings-ribbon,
.booking-row,
.day-timeline-block {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

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

/* === Inline expanded booking panel: customer edit + form === */

/* "Edit details" button under the read-only customer info. Quiet by
 * default, primary on hover. */
.customer-edit-toggle {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.customer-edit-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* The inline edit form swaps in for the read-only display when the
 * Edit button is clicked. Same container width as the read-only view. */
.customer-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.customer-edit-form.hidden {
  display: none;
}
.customer-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.customer-edit-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.customer-edit-field input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.customer-edit-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.customer-edit-apply-all {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 6px;
}
.customer-edit-apply-all input {
  margin-top: 2px;
  flex: 0 0 auto;
}
.customer-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Per-booking note section inside the inline expanded panel. Reuses
 * the .customer-crm-* form blocks for visual consistency with the rest
 * of the booking edit chrome. */
.booking-note-section {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.booking-note-section .customer-crm-head {
  margin-bottom: 8px;
}
.booking-note-section textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
  min-height: 60px;
}
.booking-note-section textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Booking note preview line in schedule list rows. Muted, italic,
 * truncates at one line. Title attribute shows the full text on
 * hover when truncated. */
.schedule-row .schedule-main .schedule-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* Inline amount badge inside .schedule-detail. Bolded + colored by
 * payment state so the eye picks up "owed / paid / refunded" without
 * scanning to a separate right-side column. Replaces the old
 * .schedule-amount column dropped 2026-05-27. */
.schedule-amount-inline {
  font-weight: 800;
  font-style: normal;
}

.schedule-amount-inline.state-paid {
  color: #0f5a3f;
}

.schedule-amount-inline.state-deposit-paid {
  color: #b85f1a;
}

.schedule-amount-inline.state-unpaid {
  color: #a8443a;
}

.schedule-amount-inline.state-needs-closing {
  color: #b25b1a;
}

.schedule-amount-inline.state-refunded,
.schedule-amount-inline.state-cancelled,
.schedule-amount-inline.state-no-show {
  color: #717269;
}

/* Payment value in the meta strip: same palette as the inline amount,
 * so the row + the expanded panel read with one consistent color
 * language for payment state. */
.booking-expanded-payment-value {
  /* Default: text color from --text. State classes override below. */
}

.booking-expanded-payment-value.state-paid {
  color: #0f5a3f;
}

.booking-expanded-payment-value.state-deposit-paid {
  color: #b85f1a;
}

.booking-expanded-payment-value.state-unpaid,
.booking-expanded-payment-value.state-needs-closing {
  color: #a8443a;
}

.booking-expanded-payment-value.state-refunded,
.booking-expanded-payment-value.state-partial-refund {
  color: #717269;
}

/* Pending payment: warm amber. Cancelled / completed / no-show:
 * muted slate. Without these rules the panel's Payment line for those
 * states would render in plain --text under a colored pill, making the
 * state read inconsistently between row and panel. */
.booking-expanded-payment-value.state-pending {
  color: #b85f1a;
}

.booking-expanded-payment-value.state-cancelled,
.booking-expanded-payment-value.state-completed,
.booking-expanded-payment-value.state-no-show {
  color: #717269;
}

/* Email status line in the meta strip. Diagnostic only (retry action
 * lives in the kebab). Color tracks the same palette as payment state:
 * red-ish when delivery failed, otherwise stays in the muted neutral
 * tone so it does not compete with the booking's actual data. */
.booking-expanded-email-value {
  font-weight: 600;
  color: var(--muted);
}

.booking-expanded-email-value.state-needs-closing {
  color: #a8443a;
  font-weight: 700;
}

/* Dark-mode variants. Slightly lifted saturation so the colors don't
 * disappear against the dark surface. */
.app-shell.theme-dark .schedule-amount-inline.state-paid,
.admin-shell.theme-dark .schedule-amount-inline.state-paid,
.app-shell.theme-dark .booking-expanded-payment-value.state-paid,
.admin-shell.theme-dark .booking-expanded-payment-value.state-paid {
  color: #66d1ad;
}

.app-shell.theme-dark .schedule-amount-inline.state-deposit-paid,
.admin-shell.theme-dark .schedule-amount-inline.state-deposit-paid,
.app-shell.theme-dark .booking-expanded-payment-value.state-deposit-paid,
.admin-shell.theme-dark .booking-expanded-payment-value.state-deposit-paid {
  color: #f0b974;
}

.app-shell.theme-dark .schedule-amount-inline.state-unpaid,
.admin-shell.theme-dark .schedule-amount-inline.state-unpaid,
.app-shell.theme-dark .schedule-amount-inline.state-needs-closing,
.admin-shell.theme-dark .schedule-amount-inline.state-needs-closing,
.app-shell.theme-dark .booking-expanded-payment-value.state-unpaid,
.admin-shell.theme-dark .booking-expanded-payment-value.state-unpaid,
.app-shell.theme-dark .booking-expanded-payment-value.state-needs-closing,
.admin-shell.theme-dark .booking-expanded-payment-value.state-needs-closing {
  color: #f59488;
}

.app-shell.theme-dark .schedule-amount-inline.state-refunded,
.admin-shell.theme-dark .schedule-amount-inline.state-refunded,
.app-shell.theme-dark .schedule-amount-inline.state-cancelled,
.admin-shell.theme-dark .schedule-amount-inline.state-cancelled,
.app-shell.theme-dark .schedule-amount-inline.state-no-show,
.admin-shell.theme-dark .schedule-amount-inline.state-no-show,
.app-shell.theme-dark .booking-expanded-payment-value.state-refunded,
.admin-shell.theme-dark .booking-expanded-payment-value.state-refunded,
.app-shell.theme-dark .booking-expanded-payment-value.state-partial-refund,
.admin-shell.theme-dark .booking-expanded-payment-value.state-partial-refund {
  color: #a8a99e;
}

.app-shell.theme-dark .booking-expanded-email-value.state-needs-closing,
.admin-shell.theme-dark .booking-expanded-email-value.state-needs-closing {
  color: #f59488;
}

.app-shell.theme-dark .booking-expanded-payment-value.state-pending,
.admin-shell.theme-dark .booking-expanded-payment-value.state-pending {
  color: #f0b974;
}

.app-shell.theme-dark .booking-expanded-payment-value.state-cancelled,
.app-shell.theme-dark .booking-expanded-payment-value.state-completed,
.app-shell.theme-dark .booking-expanded-payment-value.state-no-show,
.admin-shell.theme-dark .booking-expanded-payment-value.state-cancelled,
.admin-shell.theme-dark .booking-expanded-payment-value.state-completed,
.admin-shell.theme-dark .booking-expanded-payment-value.state-no-show {
  color: #a8a99e;
}

.customer-visits-section {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.customer-visits-section .eyebrow {
  margin: 0 0 4px;
}

.customer-visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.customer-visit:first-of-type {
  border-top: 0;
}

.customer-visit-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  grid-column: 1;
  grid-row: 1;
}

.customer-visit strong {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  font-weight: 600;
}

.customer-visit-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.customer-visit-status .booking-status-badge {
  margin-left: 0;
}

.app-shell.theme-dark .customer-visit,
.app-shell.theme-dark .customer-visits-section,
.admin-shell.theme-dark .customer-visit,
.admin-shell.theme-dark .customer-visits-section {
  border-color: rgba(255, 255, 255, 0.08);
}

/* === Booking note edit form ===
   The hint/form/field/actions/status/save building blocks below are
   still in use by the inline expanded booking panel; the legacy
   .customer-crm parent class is gone (replaced by .booking-note-section
   in app.js). */
.customer-crm-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.customer-crm-form {
  display: grid;
  gap: 10px;
}

.customer-crm-field {
  display: grid;
  gap: 4px;
}

.customer-crm-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.customer-crm-field textarea,
.customer-crm-field input[type="text"],
.customer-crm-field input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #ffffff);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.customer-crm-field textarea {
  min-height: 70px;
  line-height: 1.45;
}

.customer-crm-field textarea:focus,
.customer-crm-field input:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.customer-crm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 2px;
}

.customer-crm-status {
  font-size: 12px;
  color: var(--muted);
}

.customer-crm-status.is-success {
  color: var(--accent-dark);
}

.customer-crm-status.is-error {
  color: #c0392b;
}

.customer-crm-save {
  appearance: none;
  border: 0;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, transform 60ms ease;
}

.customer-crm-save:hover,
.customer-crm-save:focus-visible {
  background: var(--accent-dark);
  outline: 0;
}

.customer-crm-save:active {
  transform: translateY(1px);
}

.customer-crm-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.customer-crm-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.app-shell.theme-dark .customer-crm,
.admin-shell.theme-dark .customer-crm {
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .customer-crm-field textarea,
.app-shell.theme-dark .customer-crm-field input[type="text"],
.app-shell.theme-dark .customer-crm-field input[type="date"],
.admin-shell.theme-dark .customer-crm-field textarea,
.admin-shell.theme-dark .customer-crm-field input[type="text"],
.admin-shell.theme-dark .customer-crm-field input[type="date"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.app-shell.theme-dark .customer-crm-status.is-error,
.admin-shell.theme-dark .customer-crm-status.is-error {
  color: #ff8b7a;
}

/* === Quick contact actions (Call / Email / SMS) === */
.quick-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.quick-action:hover,
.quick-action:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: 0;
}

.quick-action svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.app-shell.theme-dark .quick-action,
.admin-shell.theme-dark .quick-action {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.app-shell.theme-dark .quick-action:hover,
.admin-shell.theme-dark .quick-action:hover {
  background: rgba(101, 196, 166, 0.16);
  color: var(--accent-dark);
  border-color: var(--accent);
}

/* Quick actions inside the list-view expanded row sit above the
 * payment/date/etc rows, separated by a hairline. */
#bookings-view #all-bookings .booking-row.expanded .booking-detail-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 8px !important;
  padding: 4px 0 8px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-detail-actions .quick-actions {
  gap: 6px;
}

/* === Booking empty state: friendly + actionable === */
.booking-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 32px 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  text-align: center;
}

.booking-empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  margin-bottom: 4px;
}

.booking-empty-state-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.booking-empty-state strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.booking-empty-state p {
  margin: 0;
  max-width: 340px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.booking-empty-state-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.booking-empty-state-actions .primary-button,
.booking-empty-state-actions .ghost-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.app-shell.theme-dark .booking-empty-state,
.admin-shell.theme-dark .booking-empty-state {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.app-shell.theme-dark .booking-empty-state-icon,
.admin-shell.theme-dark .booking-empty-state-icon {
  background: rgba(255, 255, 255, 0.06);
}

/* === Customer avatar (initials in a coloured circle) === */
.customer-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  border-radius: 999px;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  vertical-align: middle;
  margin: 0 8px 0 0;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-transform: none !important;
  box-sizing: border-box !important;
  overflow: hidden;
  white-space: nowrap;
}

.customer-avatar.avatar-lg {
  width: 40px !important;
  height: 40px !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* === Booking status badges === */
.booking-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.booking-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.booking-status-badge.status-confirmed {
  background: rgba(20, 126, 101, 0.12);
  color: var(--accent-dark);
}

/* Payment-focused status pills (replaces the old "Confirmed" label) */

/* Paid = fully settled, no balance due */
.booking-status-badge.status-paid {
  background: rgba(20, 126, 101, 0.14);
  color: var(--accent-dark);
  border: 1px solid rgba(20, 126, 101, 0.28);
}

.app-shell.theme-dark .booking-status-badge.status-paid,
.admin-shell.theme-dark .booking-status-badge.status-paid {
  background: rgba(102, 209, 173, 0.18);
  color: rgb(170, 232, 207);
  border-color: rgba(102, 209, 173, 0.45);
}

/* Deposit paid = partial payment received, balance still due */
.booking-status-badge.status-deposit-paid {
  background: rgba(101, 196, 166, 0.16);
  color: #0f6b56;
  border: 1px solid rgba(101, 196, 166, 0.35);
}

.app-shell.theme-dark .booking-status-badge.status-deposit-paid,
.admin-shell.theme-dark .booking-status-badge.status-deposit-paid {
  background: rgba(101, 196, 166, 0.16);
  color: #b9e6d4;
  border-color: rgba(101, 196, 166, 0.40);
}

/* Refunded = all of the deposit / payment has been returned to the
 * customer. Soft slate-rose so it reads as "this booking is not in a
 * paid state anymore" without screaming red like Cancelled. */
.booking-status-badge.status-refunded {
  background: rgba(160, 90, 90, 0.10);
  color: #8b4a4a;
  border: 1px solid rgba(160, 90, 90, 0.28);
}

.app-shell.theme-dark .booking-status-badge.status-refunded,
.admin-shell.theme-dark .booking-status-badge.status-refunded {
  background: rgba(220, 140, 140, 0.16);
  color: rgb(248, 198, 198);
  border-color: rgba(220, 140, 140, 0.40);
}

/* Partial refund = some money returned, customer still has a balance.
 * Slightly warmer tone than full refund so the two states stay
 * visually distinct at a glance in the list view. */
.booking-status-badge.status-partial-refund {
  background: rgba(202, 138, 4, 0.10);
  color: rgb(146, 100, 7);
  border: 1px solid rgba(202, 138, 4, 0.26);
}

.app-shell.theme-dark .booking-status-badge.status-partial-refund,
.admin-shell.theme-dark .booking-status-badge.status-partial-refund {
  background: rgba(250, 204, 21, 0.14);
  color: rgb(254, 240, 138);
  border-color: rgba(250, 204, 21, 0.36);
}

/* Unpaid = pay-on-arrival, nothing collected yet */
.booking-status-badge.status-unpaid {
  background: rgba(100, 116, 139, 0.10);
  color: rgb(71, 85, 105);
  border: 1px solid rgba(100, 116, 139, 0.22);
}

.app-shell.theme-dark .booking-status-badge.status-unpaid,
.admin-shell.theme-dark .booking-status-badge.status-unpaid {
  background: rgba(148, 163, 184, 0.14);
  color: rgb(203, 213, 225);
  border-color: rgba(148, 163, 184, 0.30);
}

/* Needs closing = past unpaid confirmed booking that the owner forgot
   to settle. Amber accent because it's actionable / attention-needed. */
.booking-status-badge.status-needs-closing {
  background: rgba(254, 215, 170, 0.65);
  color: rgb(127, 60, 9);
  border: 1px solid rgba(180, 83, 9, 0.30);
}

.app-shell.theme-dark .booking-status-badge.status-needs-closing,
.admin-shell.theme-dark .booking-status-badge.status-needs-closing {
  background: rgba(146, 64, 14, 0.32);
  color: rgb(252, 211, 153);
  border-color: rgba(217, 119, 6, 0.55);
}

/* Pending = deposit booking still finishing checkout (Stripe pending) */
.booking-status-badge.status-pending {
  background: rgba(180, 83, 9, 0.10);
  color: rgb(127, 60, 9);
  border: 1px solid rgba(180, 83, 9, 0.24);
}

.app-shell.theme-dark .booking-status-badge.status-pending,
.admin-shell.theme-dark .booking-status-badge.status-pending {
  background: rgba(217, 119, 6, 0.18);
  color: rgb(252, 211, 153);
  border-color: rgba(217, 119, 6, 0.40);
}

/* Reserved virtual status was retired in commit 2e0d926 - the
   bookingDisplayState mapper never returns key "reserved" any more.
   Rules removed to avoid confusing future readers. */

/* Subtitle under the Payment value showing when free cancellation ends. */
.booking-cancellation-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f6b56;
  text-transform: none;
  /* Inside the expanded booking-card-details grid the parent cell has
     a 2-column layout (label + value). Force the hint to span both so
     it does not get squeezed into the narrow label column. */
  grid-column: 1 / -1;
  white-space: normal;
  word-break: normal;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-cancellation-hint {
  grid-column: 1 / -1 !important;
  padding-left: 78px;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0f6b56 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  margin-top: 2px;
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-cancellation-hint,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-cancellation-hint {
  color: #66d1ad !important;
}

.app-shell.theme-dark .booking-cancellation-hint,
.admin-shell.theme-dark .booking-cancellation-hint {
  color: #66d1ad;
}

/* Refund modal redesigned: bigger panel, booking summary chip,
   Full/Custom toggle, optional reason picker. */
#refund-booking-modal .choice-modal-panel.refund-modal-panel {
  width: min(480px, 96vw);
  max-width: 96vw;
  padding: 22px 24px 18px;
}

.refund-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.refund-modal-header .eyebrow { margin: 0; }

.refund-modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.refund-modal-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

#refund-booking-title {
  margin: 6px 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Booking summary chip showing customer + service + paid amount. */
.refund-booking-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(238, 244, 241, 0.45);
  overflow: hidden;
}

.refund-summary-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

.refund-summary-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.refund-summary-main strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.refund-summary-main span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.refund-summary-main small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f6b56;
  margin-top: 2px;
}

.refund-modal-body {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Full / Custom toggle - calm Bookings filter style. */
.refund-amount-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.refund-amount-option {
  flex: 1 1 auto;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.refund-amount-option:hover { color: var(--ink); }

.refund-amount-option.active {
  background: rgb(223, 240, 235);
  border-color: rgba(24, 60, 50, 0.12);
  color: rgb(13, 79, 65);
  font-weight: 800;
}

.refund-amount-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.refund-amount-field.hidden { display: none !important; }

.refund-amount-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.refund-amount-field input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.refund-amount-field small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.refund-reason-field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.refund-reason-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.refund-reason-field select {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

/* "Also cancel this booking" row at the bottom of the refund modal.
 * Two-column layout: checkbox on the left, label + helper on the
 * right. Hidden when the booking is already cancelled (no point
 * offering the same action twice). */
.refund-cancel-after-field {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  margin: 4px 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20, 113, 93, 0.04);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.refund-cancel-after-field:hover {
  background: rgba(20, 113, 93, 0.07);
  border-color: rgba(20, 113, 93, 0.18);
}

.refund-cancel-after-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: rgb(13, 79, 65);
  cursor: pointer;
}

.refund-cancel-after-field > span {
  display: grid;
  gap: 3px;
}

.refund-cancel-after-field strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.refund-cancel-after-field small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
}

.refund-cancel-after-field.hidden {
  display: none;
}

.app-shell.theme-dark .refund-cancel-after-field,
.admin-shell.theme-dark .refund-cancel-after-field {
  background: rgba(102, 209, 173, 0.06);
  border-color: rgba(102, 209, 173, 0.15);
}

.app-shell.theme-dark .refund-cancel-after-field:hover,
.admin-shell.theme-dark .refund-cancel-after-field:hover {
  background: rgba(102, 209, 173, 0.10);
  border-color: rgba(102, 209, 173, 0.25);
}

#refund-booking-modal .choice-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#refund-booking-modal .choice-modal-actions .ghost-button,
#refund-booking-modal .choice-modal-actions .primary-button {
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
}

#refund-booking-modal .choice-modal-actions .primary-button {
  min-width: 140px;
}

.app-shell.theme-dark .refund-booking-summary,
.admin-shell.theme-dark .refund-booking-summary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .refund-summary-main strong,
.admin-shell.theme-dark .refund-summary-main strong { color: #e6f4ee; }

.app-shell.theme-dark .refund-amount-option.active,
.admin-shell.theme-dark .refund-amount-option.active {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.30);
  color: #66d1ad;
}

/* Refund modal: amber/warning treatment when outside the free
   cancellation window. Owner has to consciously confirm. */
#refund-booking-copy.refund-warning {
  padding: 12px 14px;
  border: 1px solid rgba(214, 164, 79, 0.45);
  background: rgba(214, 164, 79, 0.10);
  border-radius: 10px;
  color: #7a4f10;
  line-height: 1.4;
}

#refund-booking-copy.refund-warning strong {
  color: #6b3d0a;
  font-weight: 800;
}

.app-shell.theme-dark #refund-booking-copy.refund-warning,
.admin-shell.theme-dark #refund-booking-copy.refund-warning {
  border-color: rgba(214, 164, 79, 0.55);
  background: rgba(214, 164, 79, 0.16);
  color: #f0c98d;
}

.app-shell.theme-dark #refund-booking-copy.refund-warning strong,
.admin-shell.theme-dark #refund-booking-copy.refund-warning strong {
  color: #ffe1ad;
}

/* When the modal carries the warning, switch the primary action to
   match the amber palette so the click feels like a goodwill exception
   rather than a routine refund. */
.refund-modal-warning #refund-submit-button {
  background: linear-gradient(180deg, #d6a44f, #b8862e) !important;
  border-color: #a67220 !important;
  color: #fff !important;
}

.refund-modal-warning #refund-submit-button:hover {
  background: linear-gradient(180deg, #c89540, #a3771f) !important;
}

.booking-status-badge.status-completed {
  background: rgba(104, 121, 116, 0.14);
  color: var(--muted);
}

.booking-status-badge.status-cancelled {
  background: rgba(155, 28, 28, 0.1);
  color: #9b1c1c;
}

/* .booking-status-badge.status-pending-payment removed: bookingDisplayState
   maps "pending_payment" to key "pending", not "pending-payment", so this
   selector never matched anything in the live app. The canonical
   .status-pending rules in the payment-focused pills block above are the
   active definition. */


.app-shell.theme-dark .booking-status-badge.status-confirmed,
.admin-shell.theme-dark .booking-status-badge.status-confirmed {
  background: rgba(101, 196, 166, 0.16);
  color: var(--accent-dark);
}

.app-shell.theme-dark .booking-status-badge.status-completed,
.admin-shell.theme-dark .booking-status-badge.status-completed {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.app-shell.theme-dark .booking-status-badge.status-cancelled,
.admin-shell.theme-dark .booking-status-badge.status-cancelled {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

/* Dark-mode .status-pending-payment removed: light variant deleted
   too. bookingDisplayState never emits this key.
   Dark-mode .status-no-show duplicate (red palette) removed: the
   canonical slate variant lives further down with the muted
   "neutral negative" treatment that matches the light pill. */


/* === Topbar polish: business-name title + icon actions === */
.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.topbar-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

.topbar-subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Icon-only action buttons in topbar (setup chip, theme toggle) */
.icon-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.icon-action:hover,
.icon-action:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
  outline: 0;
}

.icon-action-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Notification-style badge on setup chip — shows only when there are
 * unfinished tasks (.setup-status loses .complete) */
.icon-action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d6a44f;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  border: 2px solid var(--surface);
}

.setup-status.complete .icon-action-badge {
  display: none;
}

.icon-action-badge.hidden {
  display: none;
}

/* Theme toggle: show sun in dark mode (target = light), moon in light mode */
.icon-theme-sun {
  display: none;
}

.icon-theme-moon {
  display: block;
}

.app-shell.theme-dark .icon-theme-sun,
.admin-shell.theme-dark .icon-theme-sun {
  display: block;
}

.app-shell.theme-dark .icon-theme-moon,
.admin-shell.theme-dark .icon-theme-moon {
  display: none;
}

/* Setup popover stays anchored to icon button right edge */
.setup-status .setup-status-popover {
  top: calc(100% + 8px);
}

/* === Bookings toolbar — quiet, harmonised === */
#bookings-view > .panel > .booking-toolbar {
  align-items: center;
  gap: 8px;
}

/* "Add Manual Booking" — keep primary intent, shrink the chrome */
#bookings-view > .panel > .booking-toolbar > .primary-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}

/* Segmented controls in this toolbar lose their pill container — active
 * segment gets a soft accent fill, the rest is just muted text. Reads as
 * a row of tabs instead of three different boxes. */
#bookings-view > .panel > .booking-toolbar .segmented {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 2px;
}

#bookings-view > .panel > .booking-toolbar .segmented button {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}

#bookings-view > .panel > .booking-toolbar .segmented button:hover {
  background: var(--surface-2);
  color: var(--text);
}

#bookings-view > .panel > .booking-toolbar .segmented .active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  box-shadow: none;
}

/* Thin divider between the two segmented groups (status filter vs view) */
#bookings-view > .panel > .booking-toolbar .segmented + .segmented {
  position: relative;
  margin-left: 12px;
}

#bookings-view > .panel > .booking-toolbar .segmented + .segmented::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.app-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented .active,
.admin-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented .active {
  background: rgba(101, 196, 166, 0.16);
  color: var(--accent-dark);
}

.app-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented button:hover,
.admin-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented button:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* === Mini-calendar authoritative reset ===
 * Earlier iterations layered multiple #bookings-view .booking-calendar-cell
 * overrides (min-height 68px → 72 → 74 → 76 → 82). This block resets them
 * back to a single compact mini-calendar look used by the Bookings hero.
 */
#bookings-view .booking-calendar-panel {
  /* Final override - sits LATER in the file than the earlier
   * rules and used to win cascade with 0.88fr, which kept the
   * mini-cal at half-width. Now matches the narrow target so the
   * day timeline gets the breathing room it needs. */
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#bookings-view .booking-calendar-card,
#bookings-view .booking-day-panel {
  padding: 14px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  min-height: 0;
}

#bookings-view .booking-calendar-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#bookings-view .booking-calendar-grid {
  gap: 4px;
  flex: 0 0 auto;
  grid-auto-rows: 46px;
}

#bookings-view .booking-calendar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  color: var(--muted);
}

#bookings-view .booking-calendar-cell {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

#bookings-view .booking-calendar-cell:hover:not(.is-empty) {
  background: var(--surface-2);
}

#bookings-view .booking-calendar-cell.has-bookings {
  background: transparent;
  border-color: transparent;
}

#bookings-view .booking-calendar-cell.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: none;
  color: var(--accent-dark);
}

#bookings-view .booking-calendar-cell span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* Day number for today gets a subtle accent ring */
#bookings-view .booking-calendar-cell.is-today:not(.active) {
  border-color: rgba(20, 126, 101, 0.28);
}

#bookings-view .booking-calendar-cell.is-today:not(.active) span {
  color: var(--accent);
}

/* Booking count badge — replaces the small dot. Shows "3" for a day with
 * 3 bookings, sits at the bottom of the cell. */
#bookings-view .booking-calendar-cell strong {
  width: auto;
  height: auto;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Days with bookings: tint the day number so the calendar reads at a glance */
#bookings-view .booking-calendar-cell.has-bookings:not(.active) span {
  color: var(--accent);
  font-weight: 700;
}

/* On narrower calendars, scale the badge down instead of swapping it for a
 * dot — the count is the useful info. */
@media (max-width: 1023px) {
  #bookings-view .booking-calendar-cell strong {
    min-width: 14px;
    padding: 1px 4px;
    font-size: 9px;
  }
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell {
  background: transparent;
  border-color: transparent;
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell.has-bookings,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell.has-bookings {
  background: transparent;
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell.active,
.admin-shell.theme-dark #bookings-view .booking-calendar-cell.active {
  background: rgba(101, 196, 166, 0.16);
  border-color: var(--accent);
  box-shadow: none;
}

.app-shell.theme-dark #bookings-view .booking-calendar-cell:hover:not(.is-empty),
.admin-shell.theme-dark #bookings-view .booking-calendar-cell:hover:not(.is-empty) {
  background: rgba(255, 255, 255, 0.04);
}

/* === Day timeline === */
#bookings-view #booking-day-bookings.day-list-hidden {
  display: none;
}

.day-timeline {
  position: relative;
  width: 100%;
  margin-top: 4px;
}

.day-timeline-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.day-timeline-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.day-timeline-track {
  position: relative;
  padding-left: 52px;
  padding-right: 4px;
  /* At HOUR_PX=120, 6 hours = 720px. Caps below assume owners want roughly
   * 5-6 working hours visible at once before scrolling. Anything past that
   * scrolls naturally inside the track without pushing the page layout. */
  max-height: 720px;
  overflow-y: auto;
  scrollbar-color: rgba(120, 140, 134, 0.4) transparent;
  scrollbar-width: thin;
}

.day-timeline-hour {
  position: absolute;
  left: 0;
  right: 4px;
  display: flex;
  align-items: center;
  height: 0;
}

.day-timeline-hour-label {
  position: absolute;
  left: 0;
  width: 44px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.day-timeline-hour-line {
  flex: 1;
  height: 1px;
  margin-left: 52px;
  background: var(--line);
}

/* Subtle half-hour tick: a short dashed line just after the gutter so
 * the eye can quickly spot the :30 boundary without an extra label. */
.day-timeline-half {
  position: absolute;
  left: 52px;
  right: 4px;
  height: 0;
  border-top: 1px dashed var(--line);
  opacity: 0.45;
  pointer-events: none;
}

/* Dark mode: --line is faint enough that 0.45 opacity is almost invisible.
 * Bump opacity and use a slightly stronger dashed line. */
.app-shell.theme-dark .day-timeline-half,
.admin-shell.theme-dark .day-timeline-half {
  opacity: 0.7;
  border-top-color: rgba(217, 238, 232, 0.22);
}

.day-timeline-block {
  position: absolute;
  left: 52px;
  right: 4px;
  display: flex;
  flex-direction: column;
  /* flex-start so the time label sits right at the block's top edge.
   * Center would push the time text 5+ minutes below the actual start
   * marker on taller blocks, making the timeline feel misaligned. */
  justify-content: flex-start;
  gap: 2px;
  padding: 5px 10px 6px;
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.day-timeline-block-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.day-timeline-block-top .day-timeline-block-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact mode — short slots (< 44px). All three pieces inline so the
 * service title is still visible: "09:00 Anna Kowalski · Brow shaping" */
.day-timeline-block.is-compact {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-block: 3px;
}

.day-timeline-block.is-compact .day-timeline-block-top {
  flex: 0 0 auto;
  align-items: center;
}

.day-timeline-block.is-compact .day-timeline-block-service {
  flex: 1 1 auto;
  position: relative;
  padding-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.day-timeline-block.is-compact .day-timeline-block-service::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--muted);
}

.day-timeline-block:hover,
.day-timeline-block:focus-visible {
  outline: 0;
  box-shadow: 0 4px 12px rgba(20, 126, 101, 0.18);
  transform: translateY(-1px);
}

.day-timeline-block.expanded {
  box-shadow: 0 0 0 2px var(--accent);
}

.day-timeline-block-time {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.day-timeline-block-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-timeline-block-service {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-timeline-block.pay-on-arrival {
  border-color: var(--attention);
  border-left-color: var(--attention);
  background: var(--attention-soft);
}

.day-timeline-block.pay-on-arrival .day-timeline-block-time {
  color: var(--attention-strong);
}

.day-timeline-now {
  position: absolute;
  left: 0;
  right: 4px;
  height: 0;
  pointer-events: none;
}

.day-timeline-now::before {
  content: "";
  position: absolute;
  left: 52px;
  right: 0;
  top: 0;
  height: 2px;
  background: #e0626a;
  border-radius: 2px;
}

.day-timeline-now span {
  position: absolute;
  left: 46px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e0626a;
  box-shadow: 0 0 0 3px rgba(224, 98, 106, 0.18);
}

.app-shell.theme-dark .day-timeline-block,
.admin-shell.theme-dark .day-timeline-block {
  background: rgba(101, 196, 166, 0.12);
  border-color: rgba(101, 196, 166, 0.35);
  border-left-color: var(--accent);
}

.app-shell.theme-dark .day-timeline-block .day-timeline-block-time,
.admin-shell.theme-dark .day-timeline-block .day-timeline-block-time {
  color: var(--accent-dark);
}

.app-shell.theme-dark .day-timeline-block.pay-on-arrival,
.admin-shell.theme-dark .day-timeline-block.pay-on-arrival {
  background: rgba(170, 182, 212, 0.12);
  border-color: rgba(170, 182, 212, 0.32);
  border-left-color: var(--attention);
}

.app-shell.theme-dark .day-timeline-block.pay-on-arrival .day-timeline-block-time,
.admin-shell.theme-dark .day-timeline-block.pay-on-arrival .day-timeline-block-time {
  color: var(--attention-strong);
}

.app-shell.theme-dark .day-timeline-hour-line,
.admin-shell.theme-dark .day-timeline-hour-line {
  background: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .day-timeline-empty,
.admin-shell.theme-dark .day-timeline-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* === Compact booking list (List view) ===
 * Earlier iterations set #bookings-view .booking-row to 92-104px tall with
 * a 84x60 time chip. Compress to a single 44px row so 12+ bookings fit
 * without scrolling. Expanded state keeps generous padding for details.
 */
#bookings-view #all-bookings {
  gap: 4px;
}

#bookings-view #all-bookings .booking-row {
  min-height: 44px;
  padding: 4px 12px;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border-color: var(--line);
}

#bookings-view #all-bookings .booking-row:hover:not(.expanded) {
  background: var(--surface-2);
}

#bookings-view #all-bookings .booking-row.expanded {
  min-height: auto;
  padding: 10px 14px 12px;
  align-items: center;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  row-gap: 0;
}

/* In expanded state the booking-card-main collapses to name + service inline.
 * The trailing date small label is hidden — date moves to the details list. */
#bookings-view #all-bookings .booking-row.expanded .booking-card-main {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-main small {
  display: none !important;
}

/* Expanded row actions: wrap to a new full-width line under the customer
   info so the buttons never crowd the customer name column. */
#bookings-view #all-bookings .booking-row.expanded .booking-actions {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-width: 0;
  min-height: 0;
}

/* Direct children of the action row should keep their natural width. */
#bookings-view #all-bookings .booking-row.expanded .booking-actions > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-actions .status-select {
  min-width: 160px !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-actions .amount {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  justify-items: start !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-actions .amount strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-actions .amount small {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 !important;
}

#bookings-view #all-bookings .booking-row.pay-on-arrival.expanded .booking-actions .amount strong {
  color: var(--attention-strong) !important;
}

#bookings-view #all-bookings .booking-row.pay-on-arrival.expanded .booking-actions .amount small {
  color: var(--attention) !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-actions .status-select {
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 28px 4px 10px !important;
  border-radius: 6px;
  font-size: 12px !important;
  font-weight: 600;
  background-color: var(--surface);
}

#bookings-view #all-bookings .booking-row.expanded .booking-actions .small-button {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* Pay-on-arrival keeps the slate-indigo row tint but loses the inner tile + giant banner.
 * "Mark as paid" sits next to the status select instead of stacking below. */
#bookings-view #all-bookings .booking-row.pay-on-arrival.expanded .booking-actions {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Detail list — flat, hairline-separated, no tiles, no fills */
#bookings-view #all-bookings .booking-row.expanded .booking-card-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 6px 0 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--line);
  cursor: default;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details > div {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 7px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  align-items: baseline !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details > div + div {
  border-top: 1px solid var(--line) !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details > div.wide {
  grid-column: 1 / -1 !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details strong {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--text) !important;
  word-break: break-word;
}

/* Payment detail row carries the payment title + breakdown inline.
 * The breakdown (e.g. "£80 due" or "No deposit · £55 due · Manual")
 * renders as <em> next to the title, muted and uppercase. */
#bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-detail-payment strong {
  font-weight: 700 !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-detail-payment em {
  margin-left: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-detail-payment.payment-attention strong {
  color: var(--attention-strong) !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-details .booking-detail-payment.payment-attention em {
  color: var(--attention) !important;
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row.expanded .booking-card-details,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row.expanded .booking-card-details {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row.expanded .booking-card-details > div + div,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row.expanded .booking-card-details > div + div {
  border-top-color: rgba(255, 255, 255, 0.08);
}

#bookings-view #all-bookings .booking-time-badge {
  min-height: 0;
  padding: 2px 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

#bookings-view #all-bookings .booking-time-badge strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#bookings-view #all-bookings .booking-card-main {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#bookings-view #all-bookings .booking-card-main strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#bookings-view #all-bookings .booking-card-main strong .customer-avatar {
  margin: 0 !important;
}

#bookings-view #all-bookings .booking-card-main strong .booking-status-badge {
  margin-left: 0 !important;
}

#bookings-view #all-bookings .booking-card-main span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bookings-view #all-bookings .booking-card-main small {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

#bookings-view #all-bookings .booking-row.pay-on-arrival {
  background: var(--attention-soft);
  border-color: rgba(70, 85, 122, 0.22);
}

#bookings-view #all-bookings .booking-row.pay-on-arrival .booking-time-badge {
  background: transparent;
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row:hover:not(.expanded),
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row:hover:not(.expanded) {
  background: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row.pay-on-arrival,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row.pay-on-arrival {
  background: rgba(170, 182, 212, 0.1);
  border-color: rgba(170, 182, 212, 0.24);
}

/* === Manual booking as a right-side slide-over === */
#bookings-view .manual-booking-form.active {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(460px, 96vw);
  padding: 20px 22px 24px;
  overflow-y: auto;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: -16px 0 40px rgba(15, 36, 30, 0.18);
  animation: slide-over-enter 200ms ease-out;
}

#bookings-view .manual-booking-form.active::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: min(460px, 96vw);
  z-index: -1;
  background: rgba(15, 36, 30, 0.32);
  animation: backdrop-enter 200ms ease-out;
}

@keyframes slide-over-enter {
  from {
    transform: translateX(8%);
    opacity: 0.5;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#bookings-view .manual-booking-form.active .manual-booking-layout {
  grid-template-columns: 1fr;
  gap: 14px;
}

#bookings-view .manual-booking-form.active .manual-section {
  padding: 14px;
}

#bookings-view .manual-booking-form.active .manual-field-grid {
  grid-template-columns: 1fr;
}

#bookings-view .manual-booking-form.active .manual-customer-inline {
  margin-top: 0;
}

#bookings-view .manual-booking-form.active .manual-customer-fields {
  grid-template-columns: 1fr;
}

#bookings-view .manual-booking-form.active .manual-summary-card {
  display: block;
  padding: 14px;
}

#bookings-view .manual-booking-form.active .manual-summary-heading {
  margin-bottom: 12px;
}

#bookings-view .manual-booking-form.active .manual-summary-card dl {
  display: grid;
  /* Two cells per row turns the 4 facts (Date, Time, Payment, Customer)
   * into a compact 2x2 mini-stat block instead of four stacked rows. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

#bookings-view .manual-booking-form.active .manual-summary-card dl > div {
  display: grid;
  /* Label sits on top of value, eyebrow-style. With 2 columns of items
   * this saves a row of vertical space and keeps long values readable. */
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: start;
  padding: 0;
  border: 0;
}

#bookings-view .manual-booking-form.active .manual-summary-card dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#bookings-view .manual-booking-form.active .manual-summary-card dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

#bookings-view .manual-booking-form.active .manual-form-footer {
  position: static;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  margin: 16px 0 0 !important;
  padding: 14px 0 0 !important;
  background: transparent;
  border-top: 1px solid var(--line);
}

.app-shell.theme-dark #bookings-view .manual-booking-form.active,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active {
  background: var(--surface);
  border-left-color: rgba(255, 255, 255, 0.08);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
}

.app-shell.theme-dark #bookings-view .manual-booking-form.active::before,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active::before {
  background: rgba(0, 0, 0, 0.5);
}

/* Dark-mode dropdowns inside the slide-over need opaque backgrounds so
 * they don't reveal the calendar / form fields underneath. */
.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-service-menu,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-service-menu,
.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-payment-menu,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-payment-menu {
  background: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-service-option,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-service-option,
.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-payment-option,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-payment-option {
  background: var(--surface-2) !important;
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-service-option:hover,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-service-option:hover,
.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-payment-option:hover,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-payment-option:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.app-shell.theme-dark #bookings-view .manual-booking-form.active .manual-form-footer,
.admin-shell.theme-dark #bookings-view .manual-booking-form.active .manual-form-footer {
  background: var(--surface);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* === Slide-over manual booking — tighter, calmer === */
#bookings-view .manual-booking-form.active .manual-section {
  padding: 0 !important;
  background: transparent;
  border: 0;
}

/* Manual booking layout inside slide-over: single column, no internal gaps */
#bookings-view .manual-booking-form.active .manual-booking-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

#bookings-view .manual-booking-form.active .field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Service trigger (top of slide-over) — quieter */
#bookings-view .manual-booking-form.active .manual-service-field {
  margin-bottom: 14px;
}

#bookings-view .manual-booking-form.active .manual-service-trigger {
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

#bookings-view .manual-booking-form.active .manual-service-trigger strong {
  font-size: 15px;
  font-weight: 700;
}

#bookings-view .manual-booking-form.active .manual-service-trigger small {
  font-size: 12px;
  color: var(--muted);
}

/* Date picker — compact mini-calendar look, like the Bookings hero */
#bookings-view .manual-booking-form.active .manual-date-field {
  margin-bottom: 14px;
}

#bookings-view .manual-booking-form.active .manual-date-picker-inline {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

#bookings-view .manual-booking-form.active .manual-date-picker-header {
  margin-bottom: 6px;
}

#bookings-view .manual-booking-form.active .manual-date-picker-header strong {
  font-size: 13px;
  font-weight: 700;
}

#bookings-view .manual-booking-form.active .manual-date-picker-header .icon-button {
  width: 26px;
  min-height: 26px;
  font-size: 13px;
}

#bookings-view .manual-booking-form.active .manual-date-picker-grid {
  gap: 2px;
}

#bookings-view .manual-booking-form.active .manual-date-picker-grid .manual-date-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 2px;
}

#bookings-view .manual-booking-form.active .manual-date-picker-inline .manual-date-cell,
#bookings-view .manual-booking-form.active .manual-date-cell {
  min-height: 32px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  box-shadow: none;
}

#bookings-view .manual-booking-form.active .manual-date-cell:not(:disabled):hover {
  background: var(--surface-2);
  border-color: transparent;
}

#bookings-view .manual-booking-form.active .manual-date-cell.active {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  box-shadow: none;
}

#bookings-view .manual-booking-form.active .manual-date-cell.unavailable,
#bookings-view .manual-booking-form.active .manual-date-cell:disabled {
  background: transparent;
  color: rgba(104, 121, 116, 0.4);
}

#bookings-view .manual-booking-form.active .manual-date-cell.today:not(.active) {
  border: 1px solid var(--line);
}

/* Closed-day in the manual booking slide-over. Match specificity of the
   wrapping rules above so the diagonal stripe wins. The day stays
   clickable - this is the owner's manual override territory. */
#bookings-view .manual-booking-form.active .manual-date-cell.closed-day {
  color: rgba(104, 121, 116, 0.75);
  background-color: transparent;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(104, 121, 116, 0.16) 4px,
    rgba(104, 121, 116, 0.16) 5px
  );
}

#bookings-view .manual-booking-form.active .manual-date-cell.closed-day:not(:disabled):hover {
  background-color: rgba(20, 126, 101, 0.08);
}

#bookings-view .manual-booking-form.active .manual-date-cell.closed-day.active {
  background-color: var(--accent-soft);
  background-image: none;
  color: var(--accent-dark);
}

/* Time slot field */
#bookings-view .manual-booking-form.active .manual-time-field {
  margin-bottom: 14px;
}

#bookings-view .manual-booking-form.active .manual-time-options:empty + p,
#bookings-view .manual-booking-form.active #manual-time-note {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* Customer block — kill the bulky h4 + eyebrow pair, stack fields */
#bookings-view .manual-booking-form.active .manual-customer-inline {
  margin-top: 4px;
}

#bookings-view .manual-booking-form.active .manual-section-heading {
  margin-bottom: 8px;
}

#bookings-view .manual-booking-form.active .manual-section-heading .eyebrow {
  margin: 0;
}

#bookings-view .manual-booking-form.active .manual-section-heading h4 {
  display: none;
}

#bookings-view .manual-booking-form.active .manual-customer-fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#bookings-view .manual-booking-form.active .manual-customer-fields .manual-name-field,
#bookings-view .manual-booking-form.active .manual-customer-fields .manual-email-field,
#bookings-view .manual-booking-form.active .manual-customer-fields .manual-phone-field,
#bookings-view .manual-booking-form.active .manual-customer-fields .manual-note-field {
  grid-column: 1 !important;
  grid-row: auto !important;
}

#bookings-view .manual-booking-form.active .manual-customer-fields label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

#bookings-view .manual-booking-form.active .manual-customer-fields input,
#bookings-view .manual-booking-form.active .manual-customer-fields textarea {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

#bookings-view .manual-booking-form.active .manual-customer-fields textarea {
  min-height: 72px;
  max-height: 140px;
  resize: vertical;
}

#bookings-view .manual-booking-form.active .manual-customer-fields .manual-note-field {
  grid-column: 1 / -1;
}

/* Payment trigger — keep slate-indigo for "pay on arrival" but tone down */
#bookings-view .manual-booking-form.active .manual-payment-field {
  margin-bottom: 12px;
}

#bookings-view .manual-booking-form.active .manual-payment-trigger {
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 8px;
}

#bookings-view .manual-booking-form.active .manual-payment-trigger small {
  font-size: 10px;
  letter-spacing: 0.06em;
}

#bookings-view .manual-booking-form.active .manual-payment-trigger strong {
  font-size: 15px;
}

#bookings-view .manual-booking-form.active .manual-payment-trigger em {
  font-size: 11px;
  font-weight: 500;
}

/* Summary card inside slide-over — clean key/value, no nested card look */
#bookings-view .manual-booking-form.active .manual-summary-card {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

#bookings-view .manual-booking-form.active .manual-summary-heading {
  margin-bottom: 8px;
}

#bookings-view .manual-booking-form.active .manual-summary-heading .eyebrow {
  margin: 0 0 2px;
}

#bookings-view .manual-booking-form.active .manual-summary-heading h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

#bookings-view .manual-booking-form.active .manual-summary-card dl > div {
  grid-template-columns: 1fr;
  padding: 2px 0;
}

#bookings-view .manual-booking-form.active .manual-summary-card dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#bookings-view .manual-booking-form.active .manual-summary-card dd {
  font-size: 13px;
}

#bookings-view .manual-booking-form.active .manual-summary-card p:last-child {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Footer text shrink */
#bookings-view .manual-booking-form.active #manual-form-status {
  display: none;
}

#bookings-view .manual-booking-form.active .manual-form-buttons {
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px !important;
}

#bookings-view .manual-booking-form.active .manual-form-buttons .small-button {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 14px !important;
  min-height: 40px !important;
}

#bookings-view .manual-booking-form.active .manual-form-buttons .primary-button {
  width: auto !important;
  flex: 1 1 auto !important;
  min-height: 40px !important;
  white-space: nowrap;
}

/* When the sidebar collapses to a sticky header (≤1280px), the parent
 * .app-shell still has min-height: 100vh and only two grid rows. The default
 * grid row sizing was stretching the sidebar row to fill the slack, leaving
 * a ~100px empty band between the sticky header and the page content.
 * Pin the rows to content-height + 1fr so the sidebar is exactly its content. */
@media (max-width: 1280px) {
  .app-shell.active,
  .admin-shell.active {
    grid-template-rows: auto 1fr !important;
    align-content: start !important;
  }
}

/* === Bookings responsive — tablet ≤ 1180px === */
@media (max-width: 1180px) {
  .topbar {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 14px;
  }

  .topbar > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-actions {
    display: flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .topbar-actions .small-button,
  .topbar-actions .ghost-button,
  .topbar-actions .setup-status-button,
  .topbar-actions .panel-theme-toggle {
    width: auto !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  /* Toolbar still in one row with auto-width buttons */
  #bookings-view .booking-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    align-items: center;
  }

  #bookings-view .booking-toolbar .primary-button {
    width: auto !important;
    min-height: 36px !important;
    padding: 0 14px !important;
  }

  #bookings-view .booking-toolbar .segmented {
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
  }

  #bookings-view .booking-toolbar .segmented button {
    flex: 0 0 auto !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  #bookings-view .booking-day-title-row h3 {
    font-size: 18px !important;
  }
}

/* === Hero in tight tablet range (640–1023px): keep 2-col, slim it down === */
@media (max-width: 1023px) and (min-width: 640px) {
  #bookings-view .booking-calendar-panel {
    grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #bookings-view .booking-calendar-card {
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 12px !important;
  }

  #bookings-view .booking-calendar-cell {
    min-height: 38px !important;
  }

  #bookings-view .booking-calendar-cell span {
    font-size: 13px !important;
  }

  /* Keep 3-letter weekday labels (MON / TUE / ...) at this width — there's
   * room for them and they're easier to scan than single-letter shorthands. */
  #bookings-view .booking-calendar-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    padding-bottom: 4px !important;
    line-height: 1 !important;
  }

  #bookings-view .booking-calendar-label::first-letter {
    font-size: inherit !important;
    color: inherit !important;
  }

  #bookings-view .booking-calendar-grid {
    grid-auto-rows: 38px !important;
    gap: 2px !important;
  }

  #bookings-view .booking-calendar-header {
    grid-template-columns: 22px 1fr 22px !important;
    gap: 4px !important;
  }

  #bookings-view .booking-calendar-header h3 {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #bookings-view .booking-calendar-header .icon-button {
    width: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
  }

  /* Toolbar in this range: single row, autowidth, no padded white space */
  #bookings-view .booking-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 6px !important;
  }

  #bookings-view .booking-toolbar .primary-button {
    width: auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  #bookings-view .booking-toolbar .segmented {
    width: auto !important;
    display: inline-flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    padding: 3px !important;
  }

  #bookings-view .booking-toolbar .segmented button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
  }
}

/* === Hero stacks only on small screens (< 640px) === */
@media (max-width: 639px) {
  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  #bookings-view .booking-calendar-card {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }

  #bookings-view .booking-calendar-header h3 {
    font-size: 13px;
    white-space: nowrap;
  }
}

/* === Bookings responsive — mobile ≤ 639px === */
@media (max-width: 639px) {
  .main {
    padding: 16px;
  }

  .topbar {
    margin-bottom: 16px;
  }

  .topbar h1 {
    font-size: 20px !important;
  }

  .topbar .eyebrow {
    font-size: 10px;
  }

  .bookings-ribbon {
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 10px;
  }

  .ribbon-group {
    gap: 6px;
  }

  .ribbon-group strong {
    font-size: 16px !important;
  }

  .ribbon-label {
    font-size: 9px !important;
  }

  .ribbon-divider {
    display: none;
  }

  /* Hero stacks - calendar on top, timeline below */
  #bookings-view .booking-calendar-panel {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  #bookings-view .booking-calendar-card {
    max-width: 360px;
    margin-inline: auto;
    width: 100%;
  }

  #bookings-view .booking-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #bookings-view .booking-toolbar .primary-button {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }

  /* On mobile, give the segmented controls a proper container border +
   * symmetric inactive/active states so the toolbar reads as one piece
   * of UI instead of three free-floating chips. */
  #bookings-view > .panel > .booking-toolbar .segmented {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 3px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--surface-2) !important;
    gap: 2px !important;
  }

  #bookings-view > .panel > .booking-toolbar .segmented:last-of-type {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #bookings-view > .panel > .booking-toolbar .segmented button {
    flex: 1 1 auto !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    text-align: center;
    white-space: nowrap;
    background: transparent !important;
    color: var(--muted) !important;
    border-radius: 6px !important;
  }

  #bookings-view > .panel > .booking-toolbar .segmented .active {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 4px rgba(20, 27, 24, 0.08) !important;
  }

  .app-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented,
  .admin-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .app-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented .active,
  .admin-shell.theme-dark #bookings-view > .panel > .booking-toolbar .segmented .active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }

  /* Phones use the schedule list (full-width rows) as the only bookings
     view: the calendar/timeline is too cramped on a narrow screen, so the
     view toggle is hidden. renderBookingPanels also coerces the render to
     the list on narrow viewports, so a desktop -> mobile resize can't leave
     a phone stuck on the calendar. */
  #bookings-view .view-toggle {
    display: none;
  }

  /* Widen the schedule row content on phones. The time column, the 14px
     inter-column gaps and the 16px row padding boxed the row into a narrow
     inset; trim all three so both the status card AND the full-width
     expanded detail panel (grid-column 1/-1) stretch closer to the edges. */
  #bookings-view .schedule-row {
    grid-template-columns: 42px 4px 1fr auto;
    gap: 8px;
    padding: 10px 6px;
  }

  /* The expanded detail panel spans the full row (grid-column 1/-1) but its
     own 18px side padding kept the PAYMENT / DATE / CONTACT content inset.
     Trim it on mobile so the panel fills the row card. Higher specificity
     than the base .booking-expanded-panel so it wins despite sitting earlier
     in the file. */
  #bookings-view .booking-expanded-panel {
    padding: 14px 8px 16px;
  }

  .day-timeline-track {
    padding-left: 44px;
  }

  /* Mobile gutter is 44px wide (44px padding-left vs 52px desktop). The
   * half-hour dashed tick and drop indicator need to follow so they stay
   * aligned with the block edge. */
  .day-timeline-half,
  .day-timeline-drop-indicator {
    left: 44px;
  }

  .day-timeline-hour-label {
    width: 36px;
    font-size: 10px;
  }

  .day-timeline-hour-line {
    margin-left: 44px;
  }

  .day-timeline-block {
    left: 44px;
    padding: 4px 8px;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
  }

  /* Expanded: break out of the 44px hour gutter so the detail panel uses
     the full width on mobile. Collapsed blocks stay at left:44px to line
     up with the timeline; once expanded the block becomes a focused
     full-width card (z-index:5 + opaque background cover the hour labels
     behind it), so the payment/contact rows stop wrapping into a narrow
     column. */
  .day-timeline-block.expanded {
    left: 6px;
    right: 6px;
  }

  .day-timeline-block-time {
    font-size: 10px;
  }

  .day-timeline-block-name {
    font-size: 13px;
  }

  .day-timeline-block-service {
    font-size: 11px;
  }

  /* On narrow viewports the compact-row layout has time + name + service
     in one line, but service truncates to a single leading dot which
     looks like a typo. Hide it on mobile - owners tap the block for the
     full detail panel. */
  .day-timeline-block.is-compact .day-timeline-block-service {
    display: none;
  }

  #bookings-view #all-bookings .booking-row {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    padding: 6px 10px !important;
  }

  #bookings-view #all-bookings .booking-card-main {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #bookings-view #all-bookings .booking-card-main small {
    display: none;
  }

  /* Expanded state on mobile: actions drop to row 2 so name+service get
   * the full width on row 1. Details stay full-width on row 3. */
  #bookings-view #all-bookings .booking-row.expanded {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  /* Stack name above service on mobile expanded so long names + long
   * service titles wrap onto their own lines instead of getting
   * truncated with ellipsis. */
  #bookings-view #all-bookings .booking-row.expanded .booking-card-main {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #bookings-view #all-bookings .booking-row.expanded .booking-card-main strong,
  #bookings-view #all-bookings .booking-row.expanded .booking-card-main span {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    line-height: 1.25 !important;
  }

  #bookings-view #all-bookings .booking-row.expanded .booking-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
    flex-wrap: wrap !important;
  }

  #bookings-view #all-bookings .booking-row.expanded .booking-actions .status-select {
    flex: 1 1 auto !important;
    min-width: 120px;
  }

  #bookings-view #all-bookings .booking-row.expanded .booking-actions .small-button {
    flex: 0 0 auto !important;
  }

  #bookings-view #all-bookings .booking-row.expanded .booking-card-details {
    grid-row: 3 !important;
  }

  #bookings-view #all-bookings .booking-row.expanded .booking-card-details > div {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Slide-over is already 96vw on small screens via existing CSS */
  #bookings-view .manual-booking-form.active {
    width: 96vw !important;
    padding: 16px 14px 18px !important;
  }

  #bookings-view .manual-booking-form.active .manual-form-footer {
    margin: 16px 0 0 !important;
    padding: 12px 0 0 !important;
  }
}

/* === Bulk actions (Faza 4 #17) === */
.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(20, 126, 101, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(20, 126, 101, 0.08), rgba(20, 126, 101, 0.04));
  box-shadow: 0 1px 0 rgba(20, 126, 101, 0.05);
  animation: bulkBarSlideIn 180ms ease;
}

@keyframes bulkBarSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.bulk-action-bar.hidden {
  display: none !important;
}

/* ==========================================================
   "Needs closing" banner + inline pill + row/timeline accent
   Past confirmed appointments that still expect a payment.
   Amber accent is reserved exclusively for this signal so the
   owner learns to read it at a glance.
   ========================================================== */

.bookings-attention-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(180, 83, 9, 0.30);
  border-radius: 10px;
  background: rgba(254, 235, 200, 0.55);
  color: rgb(127, 60, 9);
  font-size: 13px;
  font-weight: 600;
  animation: bulkBarSlideIn 180ms ease;
}

.bookings-attention-banner.hidden {
  display: none !important;
}

/* One-time onboarding hint about the new "pill is the actions trigger"
   pattern. Mint info-style banner with a dismiss button. */
.bookings-attention-banner-text strong {
  font-size: 14px;
  font-weight: 850;
  color: rgb(127, 60, 9);
  margin-right: 6px;
}

.bookings-attention-banner .small-button {
  border-color: rgba(180, 83, 9, 0.45);
  color: rgb(127, 60, 9);
  background: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.bookings-attention-banner .small-button:hover {
  background: rgba(255, 255, 255, 0.85);
}

.app-shell.theme-dark .bookings-attention-banner {
  border-color: rgba(217, 119, 6, 0.55);
  background: rgba(146, 64, 14, 0.20);
  color: rgb(252, 211, 153);
}

.app-shell.theme-dark .bookings-attention-banner-text strong {
  color: rgb(252, 211, 153);
}

.app-shell.theme-dark .bookings-attention-banner .small-button {
  background: rgba(252, 211, 153, 0.08);
  color: rgb(252, 211, 153);
  border-color: rgba(252, 211, 153, 0.45);
}

/* Inline pill shown on the booking row next to the customer name */
.needs-closing-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(254, 215, 170, 0.65);
  color: rgb(127, 60, 9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid rgba(180, 83, 9, 0.30);
  white-space: nowrap;
}

.app-shell.theme-dark .needs-closing-pill {
  background: rgba(146, 64, 14, 0.32);
  color: rgb(252, 211, 153);
  border-color: rgba(217, 119, 6, 0.55);
}

/* Clickable variant: the same pill now opens the resolve menu so the
   owner does not need a second button. Wrapper is the popover anchor. */
.needs-closing-wrapper {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

.needs-closing-pill.is-action {
  margin-left: 0;
  gap: 5px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  font-family: inherit;
}

.needs-closing-pill.is-action:hover {
  background: rgba(254, 215, 170, 0.90);
  border-color: rgba(180, 83, 9, 0.50);
}

.needs-closing-pill.is-action[aria-expanded="true"] {
  background: rgba(254, 195, 130, 0.95);
  border-color: rgba(180, 83, 9, 0.60);
}

.needs-closing-caret {
  opacity: 0.7;
}

.app-shell.theme-dark .needs-closing-pill.is-action:hover {
  background: rgba(146, 64, 14, 0.55);
  border-color: rgba(217, 119, 6, 0.75);
}

.app-shell.theme-dark .needs-closing-pill.is-action[aria-expanded="true"] {
  background: rgba(146, 64, 14, 0.75);
  border-color: rgba(217, 119, 6, 0.90);
}

/* List row: replace the service-hue stripe with amber when needs
   closing. Owner sees the warning even when scanning the left edge. */
.booking-row.needs-closing {
  box-shadow: inset 3px 0 0 rgb(180, 83, 9);
}

.app-shell.theme-dark .booking-row.needs-closing {
  box-shadow: inset 3px 0 0 rgb(217, 119, 6);
}

/* Timeline block on the day view: amber outline so the block reads
   as "still open" against neighbouring completed/confirmed blocks. */
.day-timeline-block.needs-closing {
  outline: 2px solid rgb(180, 83, 9);
  outline-offset: -2px;
}

.app-shell.theme-dark .day-timeline-block.needs-closing {
  outline-color: rgb(217, 119, 6);
}

/* ==========================================================
   Booking row "resolve" action panel
   One big primary action + dropdown for edge cases.
   Shown when bookingNeedsClosing(booking) is true.
   ========================================================== */

.booking-action-resolve {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* Drop out of the right-side grid cell and span the row, so the
     action trigger sits flush left under the header info. */
  grid-column: 1 / -1;
  justify-content: flex-start;
  background: transparent;
  padding: 10px 0 4px;
}

/* Beats the legacy `#bookings-view #all-bookings .booking-row.expanded
   .booking-actions { justify-content: flex-end !important }` rule
   that defaults all expanded action panels to right-aligned. The
   resolve panel needs to stay left-aligned. */
#bookings-view #all-bookings .booking-row.expanded .booking-action-resolve,
#bookings-view .booking-row.expanded .booking-action-resolve {
  justify-content: flex-start !important;
  padding: 10px 0 4px !important;
  background: transparent !important;
}

.resolve-menu-wrapper {
  position: relative;
  flex: 0 0 auto;
}

/* Compact trigger: pill-shaped button "Resolve ▾" with subtle accent.
   Reads as "you can take an action here" without dominating the row. */
.resolve-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(20, 126, 101, 0.28);
  border-radius: 999px;
  background: rgba(20, 126, 101, 0.08);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.resolve-menu-trigger:hover {
  background: rgba(20, 126, 101, 0.14);
  border-color: rgba(20, 126, 101, 0.40);
}

.resolve-menu-trigger[aria-expanded="true"] {
  background: rgba(20, 126, 101, 0.16);
  border-color: rgba(20, 126, 101, 0.45);
}

.resolve-menu {
  /* JS positions this as fixed (with explicit top/left) when opened
     so it escapes parents with overflow:hidden. z-index high enough
     to beat sticky day-group headers and the bookings calm header.
     Park it off-screen by default so the brief moment between
     [hidden] removal and JS positioning does not flash the menu at
     the viewport's top-left corner. */
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 1000;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.resolve-menu[hidden] { display: none; }

.resolve-menu-divider {
  height: 1px;
  margin: 4px 4px;
  background: var(--line);
}

.resolve-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.resolve-menu-option-icon {
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.85;
}

.resolve-menu-option:hover,
.resolve-menu-option:focus-visible {
  background: rgba(20, 126, 101, 0.08);
  color: var(--accent-dark);
  outline: none;
}

/* Primary item ("Mark paid X cash") sits at the top of the menu and
   gets a quiet mint background to read as the recommended choice. */
.resolve-menu-option.is-primary {
  background: rgba(20, 126, 101, 0.10);
  color: var(--accent-dark);
  font-weight: 800;
}

.resolve-menu-option.is-primary:hover,
.resolve-menu-option.is-primary:focus-visible {
  background: rgba(20, 126, 101, 0.18);
}

.resolve-menu-option.is-danger {
  color: rgb(190, 40, 50);
}

.resolve-menu-option.is-danger:hover,
.resolve-menu-option.is-danger:focus-visible {
  background: rgba(190, 40, 50, 0.10);
  color: rgb(160, 24, 30);
}

.app-shell.theme-dark .resolve-menu-trigger {
  background: rgba(102, 209, 173, 0.10);
  border-color: rgba(102, 209, 173, 0.32);
  color: rgb(170, 232, 207);
}

.app-shell.theme-dark .resolve-menu-trigger:hover {
  background: rgba(102, 209, 173, 0.18);
  border-color: rgba(102, 209, 173, 0.45);
}

.app-shell.theme-dark .resolve-menu {
  background: rgb(28, 38, 36);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.app-shell.theme-dark .resolve-menu-option:hover,
.app-shell.theme-dark .resolve-menu-option:focus-visible {
  background: rgba(102, 209, 173, 0.10);
  color: rgb(170, 232, 207);
}

.app-shell.theme-dark .resolve-menu-option.is-primary {
  background: rgba(102, 209, 173, 0.14);
  color: rgb(170, 232, 207);
}

.app-shell.theme-dark .resolve-menu-option.is-primary:hover {
  background: rgba(102, 209, 173, 0.22);
}

.app-shell.theme-dark .resolve-menu-option.is-danger {
  color: rgb(255, 130, 138);
}

.app-shell.theme-dark .resolve-menu-option.is-danger:hover {
  background: rgba(255, 130, 138, 0.10);
  color: rgb(255, 160, 168);
}

/* No-show status pill: distinct from cancelled (red) and completed
   (mint). Uses a muted slate so it reads as "neutral negative" - the
   visit did not happen, but it is not an active error. */
.booking-status-badge.status-no-show {
  background: rgba(100, 116, 139, 0.14);
  color: rgb(71, 85, 105);
  border: 1px solid rgba(100, 116, 139, 0.24);
}

.app-shell.theme-dark .booking-status-badge.status-no-show {
  background: rgba(148, 163, 184, 0.16);
  color: rgb(203, 213, 225);
  border-color: rgba(148, 163, 184, 0.32);
}

.bulk-action-count {
  font-size: 14px;
  font-weight: 850;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.bulk-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.app-shell.theme-dark .bulk-action-bar,
.admin-shell.theme-dark .bulk-action-bar {
  border-color: rgba(102, 209, 173, 0.32);
  background: linear-gradient(135deg, rgba(102, 209, 173, 0.12), rgba(102, 209, 173, 0.04));
}

.app-shell.theme-dark .bulk-action-count,
.admin-shell.theme-dark .bulk-action-count {
  color: #e6f4ee;
}

/* Checkbox on each booking row */
.booking-row {
  position: relative;
}

/* Checkbox is anchored INSIDE the time-badge cell so it always tracks
   the hour vertically, regardless of row height (collapsed vs expanded). */
.booking-time-badge {
  position: relative;
}

.booking-row-checkbox {
  position: absolute;
  top: 50%;
  left: -26px;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(24, 60, 50, 0.18);
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, border-color 140ms ease;
  cursor: pointer;
}

.booking-row:hover .booking-row-checkbox,
.booking-row:focus-within .booking-row-checkbox,
.booking-row.is-selected .booking-row-checkbox {
  opacity: 1;
}

.booking-row-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: #147e65;
}

.booking-row.is-selected {
  border-color: rgba(20, 126, 101, 0.55) !important;
  background: linear-gradient(180deg, rgba(20, 126, 101, 0.08), rgba(20, 126, 101, 0.04)) !important;
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.12);
}

.app-shell.theme-dark .booking-row-checkbox,
.admin-shell.theme-dark .booking-row-checkbox {
  background: rgba(20, 30, 26, 0.7);
  border-color: rgba(102, 209, 173, 0.34);
}

.app-shell.theme-dark .booking-row.is-selected,
.admin-shell.theme-dark .booking-row.is-selected {
  border-color: rgba(102, 209, 173, 0.55) !important;
  background: linear-gradient(180deg, rgba(102, 209, 173, 0.14), rgba(102, 209, 173, 0.06)) !important;
  box-shadow: 0 0 0 2px rgba(102, 209, 173, 0.18);
}

/* Reserve a left gutter for the checkbox so it does not cover content.
   Use dual-id specificity (and !important on the left padding) to win over the
   compact #all-bookings row overrides defined earlier in the file. */
#bookings-view #all-bookings .booking-row:has(.booking-row-checkbox),
#bookings-view #booking-day-bookings .booking-row:has(.booking-row-checkbox) {
  padding-left: 36px !important;
}

.booking-row:has(.booking-row-checkbox) {
  padding-left: 34px;
}

/* Checkbox now anchors to the time-badge directly (see base rule
   above), so we no longer need viewport-specific top overrides. */

#bookings-view #all-bookings .booking-row.is-selected {
  background: linear-gradient(180deg, rgba(20, 126, 101, 0.10), rgba(20, 126, 101, 0.05)) !important;
}

.app-shell.theme-dark #bookings-view #all-bookings .booking-row.is-selected,
.admin-shell.theme-dark #bookings-view #all-bookings .booking-row.is-selected {
  background: linear-gradient(180deg, rgba(102, 209, 173, 0.14), rgba(102, 209, 173, 0.06)) !important;
}

@media (max-width: 760px) {
  .bulk-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bulk-action-buttons {
    justify-content: stretch;
  }
  .bulk-action-buttons .small-button,
  .bulk-action-buttons .ghost-button {
    flex: 1;
  }
}

@media print {
  .bulk-action-bar,
  .booking-row-checkbox { display: none !important; }
}

/* === Selected day heading: smaller, calmer pill === */
#bookings-view #booking-selected-day-title,
#bookings-view .booking-day-title-row h3 {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  color: var(--ink);
}

#bookings-view .booking-day-title-row {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#bookings-view .booking-day-title-row > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(20, 126, 101, 0.28) !important;
  background: rgba(20, 126, 101, 0.10) !important;
  color: #0f6b56 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.app-shell.theme-dark #bookings-view .booking-day-title-row > span,
.admin-shell.theme-dark #bookings-view .booking-day-title-row > span {
  border-color: rgba(102, 209, 173, 0.35) !important;
  background: rgba(102, 209, 173, 0.12) !important;
  color: #66d1ad !important;
}

@media (max-width: 760px) {
  #bookings-view #booking-selected-day-title,
  #bookings-view .booking-day-title-row h3 {
    font-size: 17px !important;
  }
}

/* === Calendar card sits at its natural height, day panel stretches ===
   When calendar and day panel sit side by side (>=640px), the calendar
   card anchors to the TOP of its grid cell (align-self: start) so a tall
   day timeline does not push the dates to the bottom of the column. The
   day panel keeps the implicit stretch so its inner track can use the
   available vertical room. */
@media (min-width: 640px) {
  #bookings-view .booking-calendar-panel {
    align-items: start !important;
  }

  #bookings-view .booking-calendar-card {
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #bookings-view .booking-calendar-grid {
    flex: 0 0 auto !important;
    grid-auto-rows: 54px !important;
    align-content: start !important;
  }
}

/* Desktop: cap the timeline track so long working days do not push the
   day panel taller than the calendar card. */
@media (min-width: 1281px) {
  #bookings-view .day-timeline-track {
    /* 6 hours visible at HOUR_PX=120; the old 380px cap pre-dated the
     * roomier timeline and only showed 3 hours after the bump. */
    max-height: 720px !important;
  }
}

/* Tablet / mid-width side by side: tighter caps */
@media (min-width: 640px) and (max-width: 1280px) {
  #bookings-view .day-timeline-track {
    /* ~5 hours visible at HOUR_PX=120. */
    max-height: 640px !important;
  }
  #bookings-view .booking-calendar-grid {
    grid-auto-rows: 50px !important;
  }
}

/* Mobile (<640px): single column, no stretching needed. */
@media (max-width: 639px) {
  #bookings-view .booking-calendar-grid {
    grid-auto-rows: 46px !important;
  }
  #bookings-view .day-timeline-track {
    /* ~5 hours visible at HOUR_PX=120 on mobile too. */
    max-height: 600px !important;
  }
}

/* === Month overview footer in the calendar card === */
.booking-calendar-summary {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-calendar-summary-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.booking-calendar-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}

.booking-calendar-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(238, 244, 241, 0.65);
  border: 1px solid rgba(24, 60, 50, 0.06);
}

.booking-calendar-summary-stat span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.booking-calendar-summary-stat strong {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.booking-calendar-summary-stat.is-confirmed { background: rgba(20, 126, 101, 0.08); border-color: rgba(20, 126, 101, 0.18); }
.booking-calendar-summary-stat.is-confirmed strong { color: #0f6b56; }
.booking-calendar-summary-stat.is-completed { background: rgba(82, 113, 196, 0.08); border-color: rgba(82, 113, 196, 0.18); }
.booking-calendar-summary-stat.is-completed strong { color: #4258a8; }
.booking-calendar-summary-stat.is-pending { background: rgba(214, 164, 79, 0.10); border-color: rgba(214, 164, 79, 0.22); }
.booking-calendar-summary-stat.is-pending strong { color: #a8741c; }
.booking-calendar-summary-stat.is-cancelled { background: rgba(160, 90, 90, 0.08); border-color: rgba(160, 90, 90, 0.18); }
.booking-calendar-summary-stat.is-cancelled strong { color: #8b4a4a; }

.app-shell.theme-dark .booking-calendar-summary,
.admin-shell.theme-dark .booking-calendar-summary {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .booking-calendar-summary-stat,
.admin-shell.theme-dark .booking-calendar-summary-stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .booking-calendar-summary-stat strong,
.admin-shell.theme-dark .booking-calendar-summary-stat strong {
  color: #e6f4ee;
}

.app-shell.theme-dark .booking-calendar-summary-stat.is-confirmed,
.admin-shell.theme-dark .booking-calendar-summary-stat.is-confirmed {
  background: rgba(102, 209, 173, 0.10);
  border-color: rgba(102, 209, 173, 0.20);
}
.app-shell.theme-dark .booking-calendar-summary-stat.is-confirmed strong,
.admin-shell.theme-dark .booking-calendar-summary-stat.is-confirmed strong { color: #66d1ad; }

.app-shell.theme-dark .booking-calendar-summary-stat.is-completed strong,
.admin-shell.theme-dark .booking-calendar-summary-stat.is-completed strong { color: #9faff0; }

.app-shell.theme-dark .booking-calendar-summary-stat.is-pending strong,
.admin-shell.theme-dark .booking-calendar-summary-stat.is-pending strong { color: #e6c084; }

.app-shell.theme-dark .booking-calendar-summary-stat.is-cancelled strong,
.admin-shell.theme-dark .booking-calendar-summary-stat.is-cancelled strong { color: #d49595; }

@media (max-width: 639px) {
  .booking-calendar-summary { display: none; }
}

/* ==========================================================
   PAYMENTS VIEW — matches the Bookings style: ribbon + toolbar
   + booking-row style activity list + outstanding panel.
   ========================================================== */

/* Hide the legacy payments-money-grid / activity-card if they still
   render (no-op once HTML is migrated, but cheap insurance). */
#payments-view .payments-money-grid,
#payments-view .payments-activity-card,
#payments-view .payments-board { all: unset; }
#payments-view .payments-money-grid { display: none !important; }
#payments-view .payments-activity-card { display: contents; }

#payments-view .payments-ribbon,
#reports-view .reports-ribbon {
  margin-bottom: 14px;
}

#payments-view .payments-ribbon .ribbon-hint,
#reports-view .reports-ribbon .ribbon-hint {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}

/* Reports view: accounting-style backward look. Three cards stacked
   vertically on tablet/mobile, side-by-side on wide screens.
   Stripe payout (Available + Still settling), Revenue (12 months
   with bar viz), Refunds log (10 most recent + count of hidden).
   CSV export hangs off the panel header. */
.reports-panel {
  padding: 20px 22px;
}

.reports-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.reports-panel-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.reports-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}

.reports-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
  line-height: 1.45;
}

.reports-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 1100px) {
  .reports-cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .reports-card-stripe { grid-column: 1 / -1; }
}

.reports-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.reports-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.reports-card-header .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.reports-card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.reports-card-total {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.reports-card-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.reports-card-empty.hidden { display: none; }

/* Stripe payout card: two figures side by side. The primary figure
   (Available) gets a slightly larger amount and a positive accent. */
.reports-stripe-figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.reports-stripe-figures.hidden { display: none; }

.reports-stripe-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border);
}

.reports-stripe-figure-primary {
  background: rgba(45, 106, 79, 0.06);
  border-color: rgba(45, 106, 79, 0.25);
}

.reports-stripe-figure-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.reports-stripe-figure strong {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.reports-stripe-figure-primary strong {
  color: rgb(20, 83, 65);
}

.reports-stripe-figure-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.reports-stripe-empty {
  padding: 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px dashed var(--border);
}

.reports-stripe-empty.hidden { display: none; }

.reports-stripe-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .reports-stripe-figures {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Revenue rollup: month label | bar | net amount. */
.reports-revenue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reports-revenue-list.hidden { display: none; }

.reports-revenue-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.reports-revenue-month {
  color: var(--muted);
  font-weight: 500;
}

.reports-revenue-bar-wrap {
  height: 8px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.reports-revenue-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(45, 106, 79, 0.55), rgba(45, 106, 79, 0.85));
  border-radius: 6px;
  transition: width 320ms ease;
}

.reports-revenue-bar.is-negative {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.55), rgba(220, 38, 38, 0.8));
}

.reports-revenue-amount {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.reports-revenue-amount.is-negative {
  color: rgb(185, 28, 28);
}

/* Refunds log: date | customer/meta/reason stack | amount. */
.reports-refunds-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reports-refunds-list.hidden { display: none; }

.reports-refund-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 80px;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.reports-refund-row:last-child {
  border-bottom: 0;
}

.reports-refund-date {
  font-size: 12px;
  color: var(--muted);
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.reports-refund-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reports-refund-customer {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reports-refund-meta {
  font-size: 12px;
  color: var(--muted);
}

.reports-refund-reason {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.reports-refund-amount {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.reports-refund-more {
  list-style: none;
  padding: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Product sales rows reuse the refund-row layout but are clickable
   (open the order detail modal), so they need pointer + hover
   affordance. */
.reports-refund-row.reports-order-row {
  cursor: pointer;
  border-radius: 8px;
  transition: background 120ms ease;
}

/* Keep the status badge visible next to long buyer names: the name
   gets its own ellipsis span instead of truncating the whole line
   (badge included). */
.reports-order-row .reports-refund-customer {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.reports-order-row .reports-order-buyer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-order-row .booking-status-badge {
  flex-shrink: 0;
}

.reports-refund-row.reports-order-row:hover,
.reports-refund-row.reports-order-row:focus-visible {
  background: rgba(13, 79, 65, 0.05);
  outline: none;
}

.app-shell.theme-dark .reports-refund-row.reports-order-row:hover,
.app-shell.theme-dark .reports-refund-row.reports-order-row:focus-visible {
  background: rgba(102, 209, 173, 0.1);
}

@media (max-width: 640px) {
  .reports-panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  .reports-panel-actions {
    justify-content: flex-end;
  }
  .reports-revenue-row {
    grid-template-columns: 64px minmax(0, 1fr) 72px;
    gap: 8px;
  }
  .reports-refund-row {
    grid-template-columns: 64px minmax(0, 1fr) 72px;
    gap: 8px;
  }
}

/* Compact Stripe connect strip (only visible when not connected). */
.payments-connect-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(214, 164, 79, 0.32);
  border-radius: 10px;
  background: rgba(214, 164, 79, 0.06);
}

.payments-connect-strip.hidden { display: none !important; }

.payments-connect-strip-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 280px;
  min-width: 0;
}

.payments-connect-strip .payments-state-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: #d6a44f;
  flex: 0 0 auto;
}

.payments-connect-strip[data-state="connected"] .payments-state-dot { background: #147e65; }
.payments-connect-strip[data-state="pending"] .payments-state-dot { background: #d6a44f; }

.payments-connect-strip .payments-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payments-connect-strip .payments-title-line strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.payments-connect-strip .payments-status-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(214, 164, 79, 0.15);
  color: #a8741c;
  border: 1px solid rgba(214, 164, 79, 0.32);
}

.payments-connect-strip p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.payments-connect-strip-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.payments-connect-strip-actions .primary-button,
.payments-connect-strip-actions .ghost-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.app-shell.theme-dark .payments-connect-strip,
.admin-shell.theme-dark .payments-connect-strip {
  border-color: rgba(214, 164, 79, 0.38);
  background: rgba(214, 164, 79, 0.10);
}

.app-shell.theme-dark .payments-connect-strip .payments-title-line strong,
.admin-shell.theme-dark .payments-connect-strip .payments-title-line strong { color: #f6efe1; }

/* Payments toolbar */
.payments-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.payments-filter-segmented {
  flex: 0 1 auto;
}

.payments-search-input {
  flex: 1 1 240px;
  max-width: 360px;
  margin-left: auto;
}

/* Second toolbar row: date range chips. Same calm filter style as
 * the status tabs above so the two filter rows feel like one set. */
.payments-range-segmented {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}

/* Keep each chip's text on one line so multi-word labels
 * ("Last 7 days", "This month", "Outstanding") don't wrap
 * mid-pill on a narrow screen. The chip block itself can still
 * wrap to the next row thanks to flex-wrap above. Applied to
 * every calm-filter set so behavior is consistent across views. */
.segmented > button {
  white-space: nowrap;
}

/* Sticky group headers inside the payments list. Mirrors the
 * Bookings list grouping (Today / Yesterday / This week / Earlier)
 * so the two surfaces share vocabulary and visual rhythm. */
.payment-group-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 6px 4px 4px;
  background: var(--surface);
}

.payment-group-header:first-child {
  margin-top: 0;
}

.payment-group-header span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.payment-group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.app-shell.theme-dark .payment-group-header,
.admin-shell.theme-dark .payment-group-header {
  background: var(--surface);
}

/* Wrapper for the "Show more" button at the bottom of a paginated list.
 * The [hidden] override is mandatory: setting display: flex above would
 * otherwise defeat the browser's implicit display: none for hidden
 * elements, leaving an empty ghost button visible below the list. */
.payments-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.payments-load-more {
  min-width: 200px;
}

/* Payment list row */
#payments-view .payments-activity-list {
  display: grid;
  gap: 6px;
}

.payment-row {
  position: relative;
  display: grid;
  /* main info | amount | kebab actions (booking rows). Order rows
   * keep the 2-col layout since they open a modal, no kebab needed. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

/* Order rows are click-to-modal so they stay clickable; booking rows
 * use the kebab + are no longer click targets. */
.payment-row.order-row {
  cursor: pointer;
}

.payment-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

.payment-row.order-row:hover {
  border-color: rgba(20, 126, 101, 0.32);
  background: rgba(20, 126, 101, 0.03);
}

/* Kebab column - sits to the right of the amount on booking rows. */
.payment-row-actions {
  display: flex;
  align-items: center;
}

.payment-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.payment-row-main strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-row-main span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-row-main span small {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
  margin-left: 4px;
}

.payment-row-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.payment-row-amount strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.payment-row-amount span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-shell.theme-dark .payment-row,
.admin-shell.theme-dark .payment-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .payment-row:hover,
.admin-shell.theme-dark .payment-row:hover {
  background: rgba(102, 209, 173, 0.05);
}

.app-shell.theme-dark .payment-row-main strong,
.admin-shell.theme-dark .payment-row-main strong,
.app-shell.theme-dark .payment-row-amount strong,
.admin-shell.theme-dark .payment-row-amount strong { color: #e6f4ee; }

/* Status badge colors for payment rows (reuse booking-status-badge). */
.booking-status-badge.status-paid {
  background: rgba(20, 126, 101, 0.12);
  color: #0f6b56;
  border-color: rgba(20, 126, 101, 0.28);
}
.booking-status-badge.status-deposit {
  background: rgba(20, 126, 101, 0.08);
  color: #147e65;
  border-color: rgba(20, 126, 101, 0.22);
}
.booking-status-badge.status-on-arrival {
  background: rgba(70, 85, 122, 0.12);
  color: #46557a;
  border-color: rgba(70, 85, 122, 0.28);
}
.booking-status-badge.status-refunded {
  background: rgba(160, 90, 90, 0.10);
  color: #8b4a4a;
  border-color: rgba(160, 90, 90, 0.28);
}
.booking-status-badge.status-pending {
  background: rgba(214, 164, 79, 0.14);
  color: #a8741c;
  border-color: rgba(214, 164, 79, 0.30);
}

/* Outstanding panel under the activity list. */
.payments-outstanding {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.payments-outstanding.hidden { display: none !important; }

.payments-outstanding-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.payments-outstanding-header .eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.payments-outstanding-header strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.payments-outstanding-list {
  display: grid;
  gap: 6px;
}

.payments-outstanding-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.payments-outstanding-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

.payments-outstanding-row:hover {
  border-color: rgba(20, 126, 101, 0.30);
  background: rgba(20, 126, 101, 0.03);
}

.payments-outstanding-row strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.payments-outstanding-row > div span {
  font-size: 11px;
  color: var(--muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payments-outstanding-row > strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.app-shell.theme-dark .payments-outstanding,
.admin-shell.theme-dark .payments-outstanding { border-top-color: rgba(255, 255, 255, 0.08); }

.app-shell.theme-dark .payments-outstanding-row,
.admin-shell.theme-dark .payments-outstanding-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .payments-outstanding-row strong,
.admin-shell.theme-dark .payments-outstanding-row strong { color: #e6f4ee; }

.app-shell.theme-dark .payments-outstanding-header strong,
.admin-shell.theme-dark .payments-outstanding-header strong { color: #e6f4ee; }

/* Empty state in payments. */
.payments-empty {
  padding: 24px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  display: grid;
  gap: 4px;
  background: rgba(238, 244, 241, 0.4);
}
.payments-empty strong { font-size: 14px; color: var(--ink); }
.payments-empty p { margin: 0; font-size: 12px; color: var(--muted); }

.app-shell.theme-dark .payments-empty,
.admin-shell.theme-dark .payments-empty {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
  .payments-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .payments-search-input {
    /* Reset desktop flex-basis (240px) which becomes height in a column
       flex container — without this the search bar grows to 240px tall. */
    flex: 0 0 auto;
    margin-left: 0;
    max-width: none;
  }
  .payments-filter-segmented {
    overflow-x: auto;
  }
  .payment-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 12px;
  }
  .payment-row-main strong { font-size: 13px; }
  .payment-row-amount strong { font-size: 15px; }
}

/* ==========================================================
   SERVICES VIEW — ribbon + toolbar + service-hue cards
   ========================================================== */
#services-view .services-ribbon { margin-bottom: 14px; }

.services-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.services-toolbar .primary-button {
  min-height: 38px;
}

.services-filter-segmented { flex: 0 1 auto; }

.services-link-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
}

.services-link-pill > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.services-link-pill code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--ink);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  padding: 0;
}

.services-link-pill .small-button {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 999px;
}

.app-shell.theme-dark .services-link-pill,
.admin-shell.theme-dark .services-link-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .services-link-pill code,
.admin-shell.theme-dark .services-link-pill code { color: #e6f4ee; }

/* === Service card === */
#services-view .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

#services-view .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

#services-view .service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

#services-view .service-card:hover {
  border-color: rgba(20, 126, 101, 0.32);
  box-shadow: 0 4px 16px rgba(20, 60, 50, 0.06);
}

#services-view .service-card.inactive {
  opacity: 0.62;
}

#services-view .service-card.inactive::before {
  background: rgba(140, 150, 145, 0.45);
}

.service-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.service-card-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.service-card-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 160) 55% 50%);
  flex: 0 0 auto;
}

.service-card-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.service-card-title p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.service-inactive-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(140, 150, 145, 0.18);
  color: var(--muted);
}

.service-card-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.service-card-delete:hover {
  background: rgba(160, 90, 90, 0.10);
  border-color: rgba(160, 90, 90, 0.30);
  color: #8b4a4a;
}

.service-card-delete svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#services-view .service-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

#services-view .service-meta span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

#services-view .service-meta strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#services-view .service-meta-extra,
#services-view .service-stats-line {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

#services-view .service-stats-line {
  font-weight: 700;
  letter-spacing: 0.01em;
}

#services-view .service-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

#services-view .service-actions .small-button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

#services-view .service-actions .primary-button {
  flex: 1 1 auto;
}

#services-view .service-actions .service-preview-link {
  text-decoration: none;
}

/* Dark mode */
.app-shell.theme-dark #services-view .service-card,
.admin-shell.theme-dark #services-view .service-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #services-view .service-card:hover,
.admin-shell.theme-dark #services-view .service-card:hover {
  border-color: rgba(102, 209, 173, 0.30);
}

.app-shell.theme-dark .service-card-title h3,
.admin-shell.theme-dark .service-card-title h3,
.app-shell.theme-dark #services-view .service-meta strong,
.admin-shell.theme-dark #services-view .service-meta strong { color: #e6f4ee; }

.app-shell.theme-dark .service-inactive-badge,
.admin-shell.theme-dark .service-inactive-badge {
  background: rgba(255, 255, 255, 0.06);
  color: #aab5b1;
}

/* Empty state */
.services-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(238, 244, 241, 0.4);
}
.services-empty strong { font-size: 15px; color: var(--ink); }
.services-empty p { margin: 0; font-size: 13px; color: var(--muted); }
.services-empty .primary-button { margin-top: 6px; }

.app-shell.theme-dark .services-empty,
.admin-shell.theme-dark .services-empty {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.10);
}
.app-shell.theme-dark .services-empty strong,
.admin-shell.theme-dark .services-empty strong { color: #e6f4ee; }

@media (max-width: 760px) {
  .services-toolbar { flex-direction: column; align-items: stretch; }
  .services-link-pill { margin-left: 0; }
  .services-link-pill code { max-width: none; }
  #services-view .service-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   PRODUCTS VIEW — reuses service-card style + thumbnail
   ========================================================== */
#products-view .products-ribbon { margin-bottom: 14px; }

#products-view .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* Reuse all .service-card styles inside products-view. Add a thumbnail
   variant for products that have an image URL. */
#products-view .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

#products-view .service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

#products-view .service-card:hover {
  border-color: rgba(20, 126, 101, 0.32);
  box-shadow: 0 4px 16px rgba(20, 60, 50, 0.06);
}

#products-view .service-card.inactive { opacity: 0.62; }
#products-view .service-card.inactive::before { background: rgba(140, 150, 145, 0.45); }

.product-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(238, 244, 241, 0.6);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.product-type-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 160) 60% 95%);
  color: hsl(var(--service-hue, 160) 55% 30%);
  border: 1px solid hsl(var(--service-hue, 160) 55% 80%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.app-shell.theme-dark #products-view .service-card,
.admin-shell.theme-dark #products-view .service-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .product-type-chip,
.admin-shell.theme-dark .product-type-chip {
  background: hsl(var(--service-hue, 160) 40% 20%);
  color: hsl(var(--service-hue, 160) 60% 80%);
  border-color: hsl(var(--service-hue, 160) 40% 30%);
}

.app-shell.theme-dark .product-thumb,
.admin-shell.theme-dark .product-thumb {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
  #products-view .products-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   ORDERS VIEW — reuses payment-row style
   ========================================================== */
#orders-view .orders-ribbon { margin-bottom: 14px; }

#orders-view .orders-list {
  display: grid;
  gap: 6px;
}

/* Order rows reuse .payment-row; remove pointer to signal no click yet */
#orders-view .payment-row.order-row {
  cursor: default;
}

#orders-view .payment-row.order-row:hover {
  border-color: var(--line);
  background: var(--surface);
}

.app-shell.theme-dark #orders-view .payment-row.order-row:hover,
.admin-shell.theme-dark #orders-view .payment-row.order-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================
   AVAILABILITY VIEW: ribbon + polished rows
   ========================================================== */
#availability-view .availability-ribbon { margin-bottom: 14px; }

/* Polished hours rows: subtler when closed */
#availability-view .hours-row.is-closed {
  opacity: 0.62;
}

/* Blocked time list: cleaner trash icon, empty state */
.blocked-list .delete-block-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
}

.blocked-list .delete-block-button:hover {
  background: rgba(160, 90, 90, 0.10);
  border-color: rgba(160, 90, 90, 0.30);
  color: #8b4a4a;
}

.blocked-list .delete-block-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blocked-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  background: rgba(238, 244, 241, 0.4);
}

.blocked-empty strong { font-size: 13px; color: var(--ink); }
.blocked-empty p { margin: 0; font-size: 12px; color: var(--muted); }

.app-shell.theme-dark .blocked-empty,
.admin-shell.theme-dark .blocked-empty {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark .blocked-empty strong,
.admin-shell.theme-dark .blocked-empty strong { color: #e6f4ee; }


/* ==========================================================
   PUBLIC BOOKING PAGE — stepper, service-hue cards, time groups
   ========================================================== */

/* --- Slim hero strip (replaces hero card + 3 info boxes) ------ */
.public-hero-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 22px !important;
  flex-wrap: wrap;
}

.public-hero-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 280px;
}

.public-hero-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #14342a, #0f221c);
  color: #f0fbf5;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.02em;
  overflow: hidden;
}

/* When a real logo image is uploaded, the avatar expands to a
   rectangle (most salon logos are wider than tall) and drops the
   dark mint gradient. The container keeps the rounded edges so the
   logo sits in a tidy frame next to the business name. */
.public-hero-avatar.has-logo {
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  min-width: 44px;
  max-width: 160px;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.public-hero-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 44px;
  object-fit: contain;
  object-position: center;
}

.public-hero-avatar-img[hidden] { display: none; }
.public-hero-avatar-initials[hidden] { display: none; }

@media (max-width: 640px) {
  .public-hero-avatar.has-logo {
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .public-hero-avatar.has-logo {
    max-width: 96px;
  }
}

/* Mobile booking flow polish (2026-05-28 audit pass). Touch
   targets boosted to 44px minimum on calendar / payment / nav
   buttons, sticky CTA + inline Continue no longer overlap,
   policy checkbox row gets a real tap area. */
@media (max-width: 760px) {
  /* Calendar nav buttons (Prev / Next month) on the public page
     get a proper finger-sized hit area. Same applies to the
     dashboard / bookings calendar so the touch story is uniform. */
  .calendar-nav-button {
    width: 44px;
    height: 44px;
  }

  /* Date cells: keep the 7-column grid but boost the row height
     so each day is a thumb-friendly target. */
  .public-view .calendar-grid {
    gap: 2px;
  }
  .public-view .date-cell {
    min-height: 48px;
    margin: 0;
  }

  /* Payment choice pills (Pay deposit / Pay in full). Conversion
     critical, was 38px which sat just under the 44px guideline. */
  #public-view .payment-choice button {
    min-height: 44px;
  }

  /* Policy checkbox row: the native checkbox is ~13px tall; the
     line of text around it acts as a label but the parent had no
     hit area. Add vertical padding so the whole row is at least
     44px. Cursor stays pointer because the inner span is the
     clickable label for the input. */
  #public-view .policy-check {
    min-height: 44px;
    padding: 8px 0;
    align-items: center;
    cursor: pointer;
  }
  #public-view .policy-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Public hero meta: stack the items so a long postcode + a long
     email don't shove each other onto narrow lines. */
  .public-hero-meta {
    flex-direction: column;
    gap: 6px;
  }
  .public-hero-meta > li {
    flex: 1 1 auto;
  }

  /* Hide the duplicate "Continue to secure payment" button +
     secure note that appear inline at the bottom of the form on
     mobile - the sticky `.public-mobile-cta` at the very bottom
     of the viewport carries the same action. The dl with
     date/time/price/due stays visible because it's useful summary
     context above the customer-form. */
  .booking-flow .summary-panel #confirm-button,
  .booking-flow .summary-panel .secure-note {
    display: none !important;
  }

  /* Add a generous bottom scroll-padding so iOS Safari (and any
     other mobile browser that auto-scrolls focused inputs into
     view) keeps the typing field above the sticky CTA + keyboard
     stack. 120px = ~70px CTA + a small buffer; the keyboard
     itself adjusts the visible viewport so we only need to
     handle the CTA height. */
  html {
    scroll-padding-bottom: 120px;
  }
}

.public-hero-text { min-width: 0; }

.public-hero-text h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}

.public-hero-text p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.public-hero-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.public-hero-meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding-left: 22px;
  min-width: 0;
}

.public-hero-meta li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}

.public-hero-meta li:first-child { padding-left: 0; }

.public-hero-meta span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.public-hero-meta strong {
  font-size: 13px;
  font-weight: 750;
  color: var(--ink);
  line-height: 1.3;
}

.public-hours-today { display: none; }

@media (max-width: 760px) {
  .public-hours-full { display: none; }
  .public-hours-today { display: block; }
}

/* Hero contact: clickable email + phone links */
.public-hero-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.public-hero-contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted rgba(20, 126, 101, 0.45);
  transition: color 140ms ease, border-color 140ms ease;
  font-weight: 750;
}

.public-hero-contact a:hover {
  color: rgb(13, 79, 65);
  border-bottom-color: rgb(13, 79, 65);
}

.public-hero-contact-sep {
  color: var(--muted);
  font-weight: 400;
}

.app-shell.theme-dark .public-hero-contact a,
.admin-shell.theme-dark .public-hero-contact a {
  color: #e6f4ee;
  border-bottom-color: rgba(102, 209, 173, 0.45);
}

.app-shell.theme-dark .public-hero-contact a:hover,
.admin-shell.theme-dark .public-hero-contact a:hover { color: #66d1ad; }

/* Confirmation contact line */
.confirmation-contact {
  margin: 12px auto 0;
  max-width: 520px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.confirmation-contact a {
  color: rgb(13, 79, 65);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted rgba(20, 126, 101, 0.45);
}

.confirmation-contact a:hover { border-bottom-style: solid; }

.app-shell.theme-dark .confirmation-contact a,
.admin-shell.theme-dark .confirmation-contact a {
  color: #66d1ad;
  border-bottom-color: rgba(102, 209, 173, 0.45);
}

/* Confirmation page upsell to the business's gift voucher product.
 * Discreet single-line text link beneath the main actions so it does
 * not pretend to be a CTA. Only renders when the business actually has
 * an active gift_voucher product (see showBookingConfirmation in app.js
 * for the visibility check). */
.confirmation-upsell {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.confirmation-upsell a {
  color: rgb(13, 79, 65);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted rgba(20, 126, 101, 0.45);
  margin-left: 4px;
}

.confirmation-upsell a:hover { border-bottom-style: solid; }

.app-shell.theme-dark .confirmation-upsell a,
.admin-shell.theme-dark .confirmation-upsell a {
  color: #66d1ad;
  border-bottom-color: rgba(102, 209, 173, 0.45);
}

/* Hidden state must beat the default `display: ...` inherited from
 * parent, otherwise the `[hidden]` attribute alone would not hide
 * the upsell row when the business has no products. */
.confirmation-upsell[hidden],
#manage-booking-link[hidden],
#confirmation-return-link[hidden] {
  display: none !important;
}

.app-shell.theme-dark .public-hero-meta li + li::before,
.admin-shell.theme-dark .public-hero-meta li + li::before {
  background: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark .public-hero-text h2,
.admin-shell.theme-dark .public-hero-text h2,
.app-shell.theme-dark .public-hero-meta strong,
.admin-shell.theme-dark .public-hero-meta strong { color: #e6f4ee; }

@media (max-width: 760px) {
  .public-hero-strip {
    padding: 14px 16px !important;
    gap: 14px;
  }
  .public-hero-meta {
    gap: 10px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .public-hero-meta li {
    flex: 1 1 calc(50% - 5px);
    padding-left: 0;
  }
  .public-hero-meta li + li::before { display: none; }
}


/* Stepper: horizontal progress at the top of the booking flow */
.booking-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0 0 4px;
  padding: 12px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  position: relative;
}

.booking-stepper li {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.booking-stepper li + li::before {
  content: "";
  position: absolute;
  left: -50%;
  right: calc(100% - 6px);
  top: 50%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.booking-stepper-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.booking-stepper-dot span { line-height: 1; }

.booking-stepper li.is-active .booking-stepper-dot {
  background: var(--accent, #147e65);
  border-color: var(--accent, #147e65);
  color: #fff;
  transform: scale(1.05);
}

.booking-stepper li.is-active .booking-stepper-label {
  color: var(--ink);
}

.booking-stepper li.is-done .booking-stepper-dot {
  background: rgba(20, 126, 101, 0.12);
  border-color: rgba(20, 126, 101, 0.45);
  color: #0f6b56;
}

.booking-stepper li.is-done + li::before,
.booking-stepper li.is-active + li::before {
  background: rgba(20, 126, 101, 0.35);
}

.app-shell.theme-dark .booking-stepper,
.admin-shell.theme-dark .booking-stepper {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .booking-stepper-dot,
.admin-shell.theme-dark .booking-stepper-dot {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark .booking-stepper li.is-active .booking-stepper-label,
.admin-shell.theme-dark .booking-stepper li.is-active .booking-stepper-label { color: #e6f4ee; }

@media (max-width: 760px) {
  .booking-stepper {
    padding: 10px 12px;
    gap: 4px;
  }
  .booking-stepper-label { display: none; }
  .booking-stepper li { justify-content: center; }
  .booking-stepper li + li::before { left: -30%; right: calc(100% - 14px); }
}

/* Service option cards with hue stripe + dot */
.public-services {
  display: grid;
  gap: 8px;
}

#public-view .service-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px 12px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#public-view .service-option::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

.service-option-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

/* Service option thumbnail: when the owner uploads a photo for a
   service (service.imageUrl), it replaces the colour dot on the
   public booking page service row. 52x52 cover-cropped square so
   wide-and-narrow before/after shots and portrait shots both
   render predictably. The 4px hue stripe on .service-option::before
   stays so the row still carries the brand colour. */
.service-option-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.05);
  display: block;
}

.service-option-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slightly tighter inner padding when a thumb is present so the
   row keeps a clean rhythm and the thumb sits flush against the
   hue stripe. */
#public-view .service-option.has-thumb {
  padding-left: 14px;
}

.service-option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.service-option-main strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.service-option-main span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.service-option-description {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.service-option-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#public-view .service-option:hover {
  border-color: rgba(20, 126, 101, 0.32);
  background: rgba(20, 126, 101, 0.02);
}

#public-view .service-option.active {
  border-color: hsl(var(--service-hue, 160) 55% 45%);
  background: hsl(var(--service-hue, 160) 60% 96%);
  box-shadow: 0 0 0 2px hsl(var(--service-hue, 160) 60% 88%);
}

.app-shell.theme-dark #public-view .service-option,
.admin-shell.theme-dark #public-view .service-option {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #public-view .service-option-main strong,
.admin-shell.theme-dark #public-view .service-option-main strong,
.app-shell.theme-dark .service-option-price,
.admin-shell.theme-dark .service-option-price { color: #e6f4ee; }

.app-shell.theme-dark #public-view .service-option.active,
.admin-shell.theme-dark #public-view .service-option.active {
  background: hsl(var(--service-hue, 160) 40% 14%);
  border-color: hsl(var(--service-hue, 160) 55% 45%);
  box-shadow: 0 0 0 2px hsl(var(--service-hue, 160) 45% 25%);
}

/* Time slot groups (Morning / Afternoon / Evening) */
.slot-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

.slot-group {
  display: grid;
  gap: 8px;
}

.slot-group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2px;
}

.slot-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

#public-view .slot-button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 750;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

#public-view .slot-button:hover {
  border-color: rgba(20, 126, 101, 0.32);
  background: rgba(20, 126, 101, 0.04);
}

#public-view .slot-button.active {
  background: rgb(223, 240, 235);
  border-color: rgba(24, 60, 50, 0.18);
  color: rgb(13, 79, 65);
  font-weight: 800;
}

.app-shell.theme-dark #public-view .slot-button,
.admin-shell.theme-dark #public-view .slot-button {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
  color: #e6f4ee;
}

.app-shell.theme-dark #public-view .slot-button.active,
.admin-shell.theme-dark #public-view .slot-button.active {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.32);
  color: #66d1ad;
}

/* Summary panel: pick up service-hue tint */
.summary-panel {
  --service-hue: 160;
  position: sticky;
  top: 16px;
  border-top: 3px solid hsl(var(--service-hue, 160) 55% 50%);
}

/* Payment choice: calm filter style (was bordered segmented) */
#public-view .payment-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

#public-view .payment-choice button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

#public-view .payment-choice button:hover { color: var(--ink); }

#public-view .payment-choice button.active {
  background: rgb(223, 240, 235);
  border-color: rgba(24, 60, 50, 0.12);
  color: rgb(13, 79, 65);
  font-weight: 800;
}

.app-shell.theme-dark #public-view .payment-choice button.active,
.admin-shell.theme-dark #public-view .payment-choice button.active {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.30);
  color: #66d1ad;
}

/* Service option: guard against price/description collision on narrow widths */
#public-view .service-option-main { overflow: hidden; }

#public-view .service-option-main strong,
#public-view .service-option-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#public-view .service-option-price {
  white-space: nowrap;
  margin-left: 8px;
}

/* Mobile sticky CTA --------------------------------------------- */
.public-mobile-cta {
  display: none;
}

@media (max-width: 980px) {
  .summary-panel { position: static; }

  .public-mobile-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -8px rgba(7, 18, 15, 0.10);
  }

  .public-mobile-cta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .public-mobile-cta-info span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .public-mobile-cta-info strong {
    font-size: 18px;
    font-weight: 850;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .public-mobile-cta .primary-button {
    flex: 0 1 auto;
    min-width: 160px;
    padding: 12px 22px;
  }

  body.public-route { padding-bottom: 80px; }

  .app-shell.theme-dark .public-mobile-cta,
  .admin-shell.theme-dark .public-mobile-cta {
    background: rgba(20, 32, 28, 0.92);
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  .app-shell.theme-dark .public-mobile-cta-info strong,
  .admin-shell.theme-dark .public-mobile-cta-info strong { color: #e6f4ee; }
}

/* Disabled state when no service / time chosen yet */
.public-mobile-cta.is-disabled .primary-button {
  opacity: 0.5;
  pointer-events: none;
}

/* Inline button spinner (used during Stripe Checkout redirect) */
.primary-button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: progress;
}

.button-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: buttonSpinnerSpin 600ms linear infinite;
  flex: 0 0 14px;
}

@keyframes buttonSpinnerSpin {
  to { transform: rotate(360deg); }
}

/* --- Policy link inside checkbox label --------------------- */
.payment-choice-hint {
  margin: 6px 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
}

.policy-check {
  align-items: center;
}

.policy-check > span {
  flex: 1 1 auto;
  line-height: 1.4;
}

.policy-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgb(13, 79, 65);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.policy-link:hover { color: var(--accent-dark, #0a5a48); }

.app-shell.theme-dark .policy-link,
.admin-shell.theme-dark .policy-link { color: #66d1ad; }

/* --- Public footer (trust + brand) ------------------------- */
.public-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.public-footer-link {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  user-select: all;
}

.public-footer-divider { color: rgba(7, 24, 19, 0.20); }

.public-footer-link-text {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  transition: color 140ms ease;
}

.public-footer-link-text:hover { color: var(--ink); }

.app-shell.theme-dark .public-footer-link-text:hover,
.admin-shell.theme-dark .public-footer-link-text:hover { color: #e6f4ee; }

/* --- Legal page (/terms, /privacy) ------------------------- */
.legal-page {
  display: none;
  min-height: 100vh;
  background: var(--bg, #f5f7f6);
  padding: 32px 16px 64px;
}

.legal-page.active { display: block; }

/* Legal route: hide the owner app chrome (sidebar, topbar, nav) so the
   legal page reads cleanly. Pull the legal-page out as a fixed overlay so
   it covers the whole viewport regardless of its position in the DOM. */
body.legal-route .app-shell {
  display: block !important;
  background: var(--bg, #f5f7f6);
}

body.legal-route .app-shell > *:not(:has(#legal-page)),
body.legal-route .app-shell > .sidebar,
body.legal-route .app-shell > .topbar,
body.legal-route .app-shell .sidebar,
body.legal-route .app-shell .topbar,
body.legal-route .app-shell .view:not(#legal-page),
body.legal-route .app-shell .trial-banner,
body.legal-route .app-shell .bookings-bulk-bar,
body.legal-route .public-mobile-cta { display: none !important; }

/* Hide the sticky mobile booking CTA once the booking is confirmed. The
   "You're all set" confirmation panel (#booking-confirmation.active)
   replaces the form, so the stale "DUE TODAY £X / Continue" bar must not
   linger at the bottom. The CTA is a later sibling of the confirmation
   panel, so the general-sibling selector targets it only while confirmed. */
#booking-confirmation.active ~ .public-mobile-cta { display: none !important; }

body.legal-route .legal-page.active {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
}

.legal-header {
  max-width: 720px;
  margin: 0 auto 22px;
}

.legal-brand img { height: 22px; display: block; }

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px 32px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.legal-content .eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-content h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal-updated {
  margin: 0 0 24px;
  font-size: 12px;
  color: var(--muted);
}

.legal-content section { margin: 22px 0; }

.legal-content h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.legal-content p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #1a2724);
}

.legal-content p:last-child { margin-bottom: 0; }

.legal-content a {
  color: rgb(13, 79, 65);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.legal-content a:hover { color: var(--accent-dark, #0a5a48); }

.legal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.legal-footer a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.legal-footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .legal-content { padding: 22px 20px 26px; }
  .legal-content h1 { font-size: 22px; }
}

/* Adjust policy modal footer to fit Read full terms ghost button */
.policy-modal-footer {
  justify-content: space-between !important;
  gap: 10px;
  flex-wrap: wrap;
}

.public-footer-brand {
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease;
}

.public-footer-brand strong {
  font-weight: 850;
  color: var(--ink);
}

.public-footer-brand:hover { color: var(--ink); }

.app-shell.theme-dark .public-footer-brand strong,
.admin-shell.theme-dark .public-footer-brand strong { color: #e6f4ee; }

@media (max-width: 760px) {
  .public-footer {
    font-size: 11px;
    padding: 14px 18px;
  }
  .public-footer-link { font-size: 11px; }
}

/* --- Policy modal ------------------------------------------- */
.policy-modal {
  position: fixed;
  inset: 0;
  /* Sits above any expanded booking row chrome and the kebab menu
     portal so it never opens behind a visible booking detail. */
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.policy-modal[hidden] { display: none; }

.policy-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 24, 19, 0.50);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.policy-modal-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(7, 18, 15, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: policyModalIn 220ms ease;
}

@keyframes policyModalIn {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.policy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.policy-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.policy-modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.policy-modal-close:hover {
  background: rgba(7, 24, 19, 0.06);
  color: var(--ink);
}

.policy-modal-body {
  padding: 18px 22px;
  display: grid;
  gap: 18px;
  overflow-y: auto;
}

.policy-modal-section .eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.policy-modal-section p:not(.eyebrow) {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.policy-modal-window {
  margin-top: 8px !important;
  padding: 10px 12px;
  background: rgba(20, 126, 101, 0.06);
  border-left: 3px solid rgba(20, 126, 101, 0.45);
  border-radius: 0 8px 8px 0;
  color: rgb(13, 79, 65) !important;
  font-size: 13px !important;
  font-weight: 700;
}

.policy-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
}

.app-shell.theme-dark .policy-modal-panel,
.admin-shell.theme-dark .policy-modal-panel {
  background: #14201c;
  color: #e6f4ee;
}

.app-shell.theme-dark .policy-modal-header,
.app-shell.theme-dark .policy-modal-footer,
.admin-shell.theme-dark .policy-modal-header,
.admin-shell.theme-dark .policy-modal-footer { border-color: rgba(255, 255, 255, 0.08); }

.app-shell.theme-dark .policy-modal-header h2,
.admin-shell.theme-dark .policy-modal-header h2,
.app-shell.theme-dark .policy-modal-section p:not(.eyebrow),
.admin-shell.theme-dark .policy-modal-section p:not(.eyebrow) { color: #e6f4ee; }

.app-shell.theme-dark .policy-modal-window,
.admin-shell.theme-dark .policy-modal-window {
  background: rgba(102, 209, 173, 0.08);
  border-left-color: rgba(102, 209, 173, 0.45);
  color: #66d1ad !important;
}

/* ==========================================================
   SETTINGS VIEW — calm shell redesign (matches owner app convention)
   ========================================================== */

#settings-view .settings-shell {
  /* Constrain Settings content to a comfortable reading / form
   * width. Without this the panel stretches edge-to-edge of the
   * main column on wide screens, leaving short inputs (Name,
   * City, Postcode) floating in a sea of whitespace and the
   * Description textarea uncomfortably wide. 820px hits the
   * sweet spot: two-column form-grid still fits, but the
   * page reads as a contained card. */
  max-width: 820px;
  margin: 0 auto;
  padding: 22px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

/* When Settings is the active view, also shrink the topbar above
 * it to the same 820px column. Without this rule the topbar's
 * "Tik Tak / SETTINGS" eyebrow on the left and the print/theme
 * icons on the right sat against the full viewport edges while
 * the Settings card was centred 820px wide, which read as a
 * visual mismatch. :has() lets us scope this to Settings only -
 * Bookings / Payments / etc. still use the full main column. */
.app-shell:has(#settings-view.active) .topbar {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Same idea for the public booking page preview: .public-view is
 * already capped at 1180px and centred. Align the topbar to that
 * column so "Tik Tak / BOOKING PAGE PREVIEW" sits inline with the
 * business hero card and the two-column flow below it. */
.app-shell:has(#public-view.active) .topbar {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

#settings-view .settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

#settings-view .settings-header .eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

#settings-view .settings-header h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}

#settings-view .settings-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.45;
}

#settings-view .settings-link-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2, #fbfdfc);
  font-size: 12px;
  max-width: 100%;
  min-width: 0;
}

#settings-view .settings-link-bar-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

#settings-view .settings-link-bar code {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#settings-view .settings-link-bar-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease;
  flex: 0 0 auto;
}

#settings-view .settings-link-bar-copy:hover {
  background: rgb(204, 230, 222);
}

#settings-view .settings-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

#settings-view .settings-section:last-of-type {
  border-bottom: 0;
}

#settings-view .settings-section-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(13, 79, 65);
}

#settings-view .settings-section-eyebrow-hint {
  margin-left: 6px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-size: 11px;
}

#settings-view .settings-section-help {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 540px;
}

/* Soft attention banner asking the owner to review + save their
 * cancellation policy. Lives at the top of the Policies section
 * until the first Settings save stamps policyConfirmedAt. */
.policy-confirm-banner {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 113, 93, 0.20);
  border-left: 3px solid rgb(13, 79, 65);
  border-radius: 8px;
  background: rgba(20, 113, 93, 0.05);
}

.policy-confirm-banner strong {
  font-size: 13px;
  font-weight: 800;
  color: rgb(13, 79, 65);
}

.policy-confirm-banner span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
}

.policy-confirm-banner.hidden {
  display: none;
}

.app-shell.theme-dark .policy-confirm-banner,
.admin-shell.theme-dark .policy-confirm-banner {
  background: rgba(102, 209, 173, 0.08);
  border-color: rgba(102, 209, 173, 0.25);
  border-left-color: #66d1ad;
}

.app-shell.theme-dark .policy-confirm-banner strong,
.admin-shell.theme-dark .policy-confirm-banner strong { color: #66d1ad; }

#settings-view .settings-form {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#settings-view .settings-form label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.005em;
}

#settings-view .settings-form label:last-child { margin-bottom: 0; }

#settings-view .settings-form input,
#settings-view .settings-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

#settings-view .settings-form input:focus,
#settings-view .settings-form textarea:focus {
  outline: none;
  border-color: rgba(20, 126, 101, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 126, 101, 0.12);
}

#settings-view .settings-form .form-grid.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

#settings-view .settings-form .form-grid.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

#settings-view .settings-form .form-grid label { margin-bottom: 0; }

#settings-view .settings-form .field-width-half {
  max-width: calc(50% - 6px);
}

#settings-view .settings-form .field-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
}

#settings-view .settings-form .field-hint-inline {
  font-weight: 700;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

#settings-view .settings-required-mark {
  color: #d4544c;
  font-weight: 850;
  margin-left: 2px;
}

#settings-view .settings-form input.is-invalid {
  border-color: #d4544c;
  background: rgba(212, 84, 76, 0.04);
  box-shadow: 0 0 0 3px rgba(212, 84, 76, 0.10);
}

#settings-view .settings-form .slug-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#settings-view .settings-form .slug-input-row input { flex: 1 1 auto; }

#settings-view .settings-form-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Stripe Connect status card inside Settings */
.settings-stripe-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20, 126, 101, 0.025);
}

/* Calendar sync card: URL field with copy + regenerate, and a
   collapsible block of instructions for each calendar app. */
.settings-feed-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20, 126, 101, 0.025);
}

.settings-feed-url-label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}

.settings-feed-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.settings-feed-url-row input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.settings-feed-url-row input:focus {
  outline: 2px solid rgba(20, 126, 101, 0.35);
  outline-offset: 1px;
}

.settings-feed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: flex-start;
}

.settings-feed-hint {
  font-size: 12px;
  color: var(--muted);
}

.settings-feed-help {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 13px;
}

.settings-feed-help + .settings-feed-help {
  border-top: 1px solid var(--line);
}

.settings-feed-help summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 4px 0;
  color: var(--ink);
}

.settings-feed-help summary::-webkit-details-marker { display: none; }

.settings-feed-help summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  font-size: 11px;
  color: var(--muted);
  transition: transform 120ms ease;
}

.settings-feed-help[open] summary::before {
  transform: rotate(90deg);
}

.settings-feed-help ol {
  margin: 8px 0 4px 22px;
  padding: 0;
  color: var(--muted);
  line-height: 1.6;
}

.settings-feed-help ol li + li { margin-top: 4px; }

.settings-feed-help a {
  color: rgb(20, 83, 65);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .settings-feed-url-row {
    flex-direction: column;
  }
  .settings-feed-url-row button {
    align-self: flex-start;
  }
}

.settings-stripe-card[data-state="not-started"] {
  background: rgba(7, 24, 19, 0.025);
}

.settings-stripe-card[data-state="pending"],
.settings-stripe-card[data-state="started"] {
  background: rgba(212, 168, 67, 0.06);
  border-color: rgba(212, 168, 67, 0.30);
}

.settings-stripe-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-stripe-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-stripe-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(7, 24, 19, 0.30);
}

.settings-stripe-card[data-state="connected"] .settings-stripe-status-dot { background: rgb(20, 126, 101); }
.settings-stripe-card[data-state="pending"] .settings-stripe-status-dot,
.settings-stripe-card[data-state="started"] .settings-stripe-status-dot { background: rgb(212, 168, 67); }

.settings-stripe-status-label {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.settings-stripe-card[data-state="connected"] .settings-stripe-status-label { color: rgb(13, 79, 65); }

.settings-stripe-account {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  user-select: all;
}

.settings-stripe-message {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.settings-stripe-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.app-shell.theme-dark .settings-stripe-card,
.admin-shell.theme-dark .settings-stripe-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .settings-stripe-card[data-state="connected"] .settings-stripe-status-dot,
.admin-shell.theme-dark .settings-stripe-card[data-state="connected"] .settings-stripe-status-dot { background: #66d1ad; }

.app-shell.theme-dark .settings-stripe-status-label,
.admin-shell.theme-dark .settings-stripe-status-label { color: #e6f4ee; }

.app-shell.theme-dark .settings-stripe-card[data-state="connected"] .settings-stripe-status-label,
.admin-shell.theme-dark .settings-stripe-card[data-state="connected"] .settings-stripe-status-label { color: #66d1ad; }

/* Dark mode */
.app-shell.theme-dark #settings-view .settings-shell,
.admin-shell.theme-dark #settings-view .settings-shell {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #settings-view .settings-header,
.app-shell.theme-dark #settings-view .settings-section,
.app-shell.theme-dark #settings-view .settings-form-footer,
.admin-shell.theme-dark #settings-view .settings-header,
.admin-shell.theme-dark #settings-view .settings-section,
.admin-shell.theme-dark #settings-view .settings-form-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #settings-view .settings-header h2,
.admin-shell.theme-dark #settings-view .settings-header h2 { color: #e6f4ee; }

.app-shell.theme-dark #settings-view .settings-link-bar,
.admin-shell.theme-dark #settings-view .settings-link-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark #settings-view .settings-link-bar code,
.admin-shell.theme-dark #settings-view .settings-link-bar code { color: #e6f4ee; }

.app-shell.theme-dark #settings-view .settings-link-bar-copy,
.admin-shell.theme-dark #settings-view .settings-link-bar-copy {
  background: rgba(102, 209, 173, 0.16);
  color: #66d1ad;
}

.app-shell.theme-dark #settings-view .settings-section-eyebrow,
.admin-shell.theme-dark #settings-view .settings-section-eyebrow { color: #66d1ad; }

.app-shell.theme-dark #settings-view .settings-form input,
.app-shell.theme-dark #settings-view .settings-form textarea,
.admin-shell.theme-dark #settings-view .settings-form input,
.admin-shell.theme-dark #settings-view .settings-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #e6f4ee;
}

@media (max-width: 760px) {
  #settings-view .settings-shell { padding: 18px 18px 22px; }
  #settings-view .settings-form .form-grid.two-col,
  #settings-view .settings-form .form-grid.three-col {
    grid-template-columns: 1fr;
  }
  #settings-view .settings-form .field-width-half { max-width: 100%; }
  #settings-view .settings-link-bar { width: 100%; }
  /* Keep the URL on a single line with ellipsis truncation - breaking it
     mid-character (e.g. ":417" + "4/anna-siepka") looks broken to users. */
  #settings-view .settings-link-bar code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================
   UNIFIED CALM FILTER STYLE
   Mirror the Bookings toolbar look on every section's filter:
   transparent parent, mint pill on the active button, ghost text
   on the inactive ones. Replaces the heavier "bordered segmented"
   look used by Payments / Services / Products / Orders.
   ========================================================== */
.payments-filter-segmented,
.payments-range-segmented,
.services-filter-segmented,
.admin-filter-segmented {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  flex-wrap: wrap !important;
}

.payments-filter-segmented > button,
.payments-range-segmented > button,
.services-filter-segmented > button,
.admin-filter-segmented > button {
  min-height: 34px !important;
  padding: 6px 14px !important;
  /* Inactive state now has a soft grey-mint tint + 1px border so
   * the chip reads as a clickable button rather than plain text.
   * Previously every inactive chip looked like a static label,
   * which made the toolbar feel un-interactive on first scan. */
  background: rgba(20, 60, 50, 0.035) !important;
  border: 1px solid rgba(20, 60, 50, 0.08) !important;
  border-radius: 7px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease !important;
}

.payments-filter-segmented > button:hover,
.payments-range-segmented > button:hover,
.services-filter-segmented > button:hover,
.admin-filter-segmented > button:hover {
  background: rgba(20, 60, 50, 0.07) !important;
  border-color: rgba(20, 60, 50, 0.16) !important;
  color: var(--ink) !important;
}

.payments-filter-segmented > button.active,
.payments-range-segmented > button.active,
.services-filter-segmented > button.active,
.admin-filter-segmented > button.active {
  background: rgb(223, 240, 235) !important;
  border-color: rgba(24, 60, 50, 0.18) !important;
  color: rgb(13, 79, 65) !important;
  font-weight: 800 !important;
}

/* Smaller, quieter chip treatment for the date-range row so it
 * reads as a secondary filter to the status row above. Slightly
 * smaller font + reduced vertical padding. */
.payments-range-segmented > button {
  min-height: 28px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* Saved views (tabs at the top of Payments). Stripe Dashboard /
 * Shopify Orders / Linear style: smaller underline tabs with a
 * count badge for each view. Click a tab and the filter state
 * jumps to that preset (no chips needed). */
.payments-saved-views {
  display: flex;
  gap: 24px;
  margin: 0 0 16px;
  padding-left: 4px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.payments-saved-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(95, 109, 105, 0.92);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  transition: color 140ms ease, border-color 140ms ease;
}

.payments-saved-view:hover {
  color: var(--ink);
}

.payments-saved-view.active {
  color: rgb(13, 79, 65);
  border-bottom-color: rgb(13, 79, 65);
  font-weight: 800;
}

.payments-saved-view-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 7px;
  background: rgba(20, 60, 50, 0.07);
  color: var(--muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.payments-saved-view.active .payments-saved-view-count {
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
}

.app-shell.theme-dark .payments-saved-view {
  color: rgba(170, 188, 180, 0.85);
}

.app-shell.theme-dark .payments-saved-view.active,
.admin-shell.theme-dark .payments-saved-view.active {
  color: #66d1ad;
  border-bottom-color: #66d1ad;
}

.app-shell.theme-dark .payments-saved-view:hover,
.admin-shell.theme-dark .payments-saved-view:hover {
  color: #e6f4ee;
}

.app-shell.theme-dark .payments-saved-view-count,
.admin-shell.theme-dark .payments-saved-view-count {
  background: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .payments-saved-view.active .payments-saved-view-count,
.admin-shell.theme-dark .payments-saved-view.active .payments-saved-view-count {
  background: rgba(102, 209, 173, 0.18);
  color: #66d1ad;
}

/* Applied filter row: shows pills for filters added on top of the
 * current saved view + the "+ Add filter" trigger. Hidden entirely
 * when there are no extra filters and the menu isn't open -
 * default state of a saved view is visually clean. */
.payments-filter-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.payments-filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.payments-filter-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 4px 0 12px;
  background: rgb(223, 240, 235);
  border: 1px solid rgba(24, 60, 50, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgb(13, 79, 65);
  gap: 4px;
}

.payments-filter-pill .pill-key {
  color: rgb(20, 113, 93);
  font-weight: 800;
}

.payments-filter-pill .pill-close {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: rgb(13, 79, 65);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.payments-filter-pill .pill-close:hover {
  background: rgba(20, 60, 50, 0.10);
}

/* "+ Add filter" button (dashed border so it reads as actionable
 * but not heavy). Active state when the menu is open. */
.payments-add-filter-wrap {
  position: relative;
  display: inline-block;
}

.payments-add-filter {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px dashed rgba(20, 60, 50, 0.25);
  border-radius: 999px;
  color: rgb(20, 113, 93);
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}

.payments-add-filter .plus {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.payments-add-filter:hover {
  background: rgba(20, 60, 50, 0.04);
  border-color: rgba(20, 60, 50, 0.45);
}

.payments-add-filter[aria-expanded="true"] {
  background: rgb(223, 240, 235);
  border-style: solid;
  border-color: rgba(24, 60, 50, 0.20);
  color: rgb(13, 79, 65);
}

/* Filter menu popover */
.payments-filter-menu {
  position: absolute;
  top: 38px;
  left: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 4px;
  z-index: 30;
}


.payments-filter-menu .menu-group-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.payments-filter-menu .menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 600;
}

.payments-filter-menu .menu-row:hover {
  background: rgba(20, 60, 50, 0.05);
}

.payments-filter-menu .menu-row .chev {
  color: var(--muted);
  font-size: 11px;
}

.payments-filter-menu .menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

/* Spacer pushes record-sale + export to the right on the toolbar. */
.payments-toolbar-spacer { flex: 1 1 auto; }

/* ==========================================================
   BOOKINGS — saved views + add-filter (Stripe Dashboard pattern,
   mirrored from the Payments toolbar so the two sections share
   one mental model).
   ========================================================== */

/* Money strip on the Bookings panel: a single Outstanding tile
   sitting above the saved-view tabs. Click drives the Payment
   filter so the list narrows to unpaid items. Hidden when nothing
   is owed. Tile width is capped so it sits on the left like a
   chip rather than stretching across the panel; Stripe payout
   lives only in Reports (book-keeping, not operational). */
.bookings-money-strip {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
}

.bookings-money-strip .bookings-money-tile {
  flex: 0 1 280px;
  max-width: 320px;
}

.bookings-money-strip.hidden { display: none; }

.bookings-money-tile {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 80ms ease;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.bookings-money-tile:hover {
  border-color: rgba(45, 106, 79, 0.45);
  background: rgba(45, 106, 79, 0.04);
}

.bookings-money-tile:active {
  transform: translateY(1px);
}

.bookings-money-tile.hidden { display: none; }

.bookings-money-tile.is-active {
  border-color: rgba(45, 106, 79, 0.7);
  background: rgba(45, 106, 79, 0.08);
}

.bookings-money-tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.bookings-money-tile-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bookings-money-tile.is-active .bookings-money-tile-value,
.bookings-money-tile.bookings-money-tile-stripe .bookings-money-tile-value {
  color: rgb(20, 83, 65);
}

.bookings-money-tile-hint {
  font-size: 11px;
  color: var(--muted);
}

.bookings-saved-views {
  display: flex;
  gap: 24px;
  margin: 0 0 16px;
  padding-left: 4px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.bookings-saved-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(95, 109, 105, 0.92);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  transition: color 140ms ease, border-color 140ms ease;
  position: relative;
}

.bookings-saved-view:hover { color: var(--ink); }

.bookings-saved-view.active {
  color: rgb(13, 79, 65);
  border-bottom-color: rgb(13, 79, 65);
  font-weight: 800;
}

.bookings-saved-view-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 7px;
  background: rgba(20, 60, 50, 0.07);
  color: var(--muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.bookings-saved-view.active .bookings-saved-view-count {
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
}

/* "Needs closing" tab gets a red accent when > 0 so the owner
 * can spot pending work at a glance without filtering. */
.bookings-saved-view[data-booking-view-tab="needsClosing"][data-has-attention="true"] .bookings-saved-view-count {
  background: rgb(252, 226, 226);
  color: rgb(160, 50, 50);
}

.bookings-saved-view[data-booking-view-tab="needsClosing"][data-has-attention="true"]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(192, 80, 80);
  margin-left: 2px;
}

.app-shell.theme-dark .bookings-saved-view {
  color: rgba(170, 188, 180, 0.85);
}

.app-shell.theme-dark .bookings-saved-view.active,
.admin-shell.theme-dark .bookings-saved-view.active {
  color: #66d1ad;
  border-bottom-color: #66d1ad;
}

.app-shell.theme-dark .bookings-saved-view:hover,
.admin-shell.theme-dark .bookings-saved-view:hover {
  color: #e6f4ee;
}

.app-shell.theme-dark .bookings-saved-view-count,
.admin-shell.theme-dark .bookings-saved-view-count {
  background: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .bookings-saved-view.active .bookings-saved-view-count,
.admin-shell.theme-dark .bookings-saved-view.active .bookings-saved-view-count {
  background: rgba(102, 209, 173, 0.18);
  color: #66d1ad;
}

/* Applied filter row + pills (same shape as Payments) */
.bookings-filter-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.bookings-filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bookings-filter-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 4px 0 12px;
  background: rgb(223, 240, 235);
  border: 1px solid rgba(24, 60, 50, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgb(13, 79, 65);
  gap: 4px;
}

.bookings-filter-pill .pill-key {
  color: rgb(20, 113, 93);
  font-weight: 800;
}

.bookings-filter-pill .pill-close {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: rgb(13, 79, 65);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bookings-filter-pill .pill-close:hover {
  background: rgba(20, 60, 50, 0.10);
}

.bookings-add-filter-wrap {
  position: relative;
  display: inline-block;
}

.bookings-add-filter {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px dashed rgba(20, 60, 50, 0.25);
  border-radius: 999px;
  color: rgb(20, 113, 93);
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}

.bookings-add-filter .plus {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.bookings-add-filter:hover {
  background: rgba(20, 60, 50, 0.04);
  border-color: rgba(20, 60, 50, 0.45);
}

.bookings-add-filter[aria-expanded="true"] {
  background: rgb(223, 240, 235);
  border-style: solid;
  border-color: rgba(24, 60, 50, 0.20);
  color: rgb(13, 79, 65);
}

.bookings-filter-menu {
  position: absolute;
  top: 38px;
  left: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 4px;
  z-index: 30;
}

.bookings-filter-menu[hidden] { display: none; }

.bookings-filter-menu .menu-group-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.bookings-filter-menu .menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 600;
}

.bookings-filter-menu .menu-row:hover {
  background: rgba(20, 60, 50, 0.05);
}

.bookings-filter-menu .menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

.booking-toolbar-spacer { flex: 1 1 auto; }

/* Filter pills row sits between the saved-view tabs and the toolbar
 * proper. Hidden visually when no pills are present (just adds 0
 * height to the layout). */
.bookings-filter-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bookings-filter-pills-row:empty,
.bookings-filter-pills-row .bookings-filter-pills:empty {
  display: none;
}
.bookings-filter-pills-row:has(.bookings-filter-pills:empty) {
  display: none;
}
.bookings-filter-pills-row .bookings-filter-pills:not(:empty) {
  margin-bottom: 12px;
}

/* ==========================================================
   BOOKINGS — Schedule list rows (day-grouped, time-leading,
   service-stripe + tinted bar). Matches the approved mockup.
   ========================================================== */

.schedule-day-group {
  margin-bottom: 24px;
}

.schedule-day-group:last-child { margin-bottom: 8px; }

.schedule-day-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.schedule-day-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.schedule-today-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-day-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.schedule-row {
  display: grid;
  /* 4-col grid: time / colored stripe / main content / kebab actions.
   * Amount column dropped 2026-05-27 (amount now inline in detail line);
   * kebab column added the same day so the owner can act on the booking
   * without expanding it. Time trimmed from 70px to 56px. */
  grid-template-columns: 56px 4px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  cursor: pointer;
}

.schedule-row + .schedule-row {
  border-top: 1px solid rgba(20, 60, 50, 0.04);
}

.schedule-row .schedule-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.schedule-row .schedule-stripe {
  width: 4px;
  height: 42px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 160), 50%, 50%);
}

/* The tinted "bar" that holds customer name + status badge + service line.
 * Background colour reflects payment status so the row reads as paid /
 * deposit / unpaid at a glance. */
.schedule-row .schedule-main {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(20, 60, 50, 0.04);
  min-width: 0;
}

.schedule-row[data-state="paid"] .schedule-main {
  background: rgba(102, 184, 156, 0.16);
}
.schedule-row[data-state="deposit-paid"] .schedule-main,
.schedule-row[data-state="deposit"] .schedule-main {
  background: rgba(217, 178, 102, 0.18);
}
.schedule-row[data-state="needs-closing"] .schedule-main {
  background: rgba(212, 138, 56, 0.18);
}
.schedule-row[data-state="refunded"] .schedule-main,
.schedule-row[data-state="partial-refund"] .schedule-main {
  background: rgba(170, 100, 100, 0.14);
}
.schedule-row[data-state="cancelled"] .schedule-main {
  background: rgba(150, 80, 80, 0.12);
  opacity: 0.78;
}
.schedule-row[data-state="completed"] .schedule-main {
  background: rgba(140, 150, 145, 0.14);
}

.schedule-row .schedule-main strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 2px;
  min-width: 0;
}

/* Customer name truncates on long names; the status pill next to it
 * stays fully visible. */
.schedule-row .schedule-main .schedule-customer {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-row .schedule-main .booking-status-badge {
  flex: 0 0 auto;
  /* The pill brings its own font-weight; reset the heritage 800 so
   * "PAID" inside it doesn't render at an inconsistent weight. */
  font-weight: 700;
  /* The global pill carries a baseline margin-left for sitting next to
   * inline customer text. Inside the schedule's flex strong we use the
   * parent's gap (8px) for spacing, so neutralise the legacy margin to
   * avoid a doubled-up gap. */
  margin-left: 0;
}

/* .schedule-status-pill is the legacy static pill rendered before we
 * switched to the interactive booking-status-badge. The selectors below
 * remain so that any older cached schedule HTML keeps the same visual
 * tone until the next render, but new renders never produce this class.
 * Safe to drop in a later cleanup pass. */
.schedule-row .schedule-main .schedule-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

.schedule-row .schedule-main .schedule-status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.schedule-row .schedule-main span.schedule-detail {
  display: block;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-row .schedule-amount {
  text-align: right;
  white-space: nowrap;
}

.schedule-row .schedule-amount strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.schedule-row .schedule-amount span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.schedule-empty {
  padding: 36px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.schedule-empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

/* Dark mode tints */
.app-shell.theme-dark .schedule-row[data-state="paid"] .schedule-main,
.admin-shell.theme-dark .schedule-row[data-state="paid"] .schedule-main {
  background: rgba(102, 209, 173, 0.14);
}
.app-shell.theme-dark .schedule-row[data-state="deposit-paid"] .schedule-main,
.app-shell.theme-dark .schedule-row[data-state="deposit"] .schedule-main {
  background: rgba(232, 196, 112, 0.14);
}
.app-shell.theme-dark .schedule-row .schedule-main strong {
  color: #e6f4ee;
}
.app-shell.theme-dark .schedule-day-header h3 { color: #e6f4ee; }
.app-shell.theme-dark .schedule-today-badge {
  background: rgba(102, 209, 173, 0.18);
  color: #66d1ad;
}

/* Dark mode bits for the new bookings filter UI. */
.app-shell.theme-dark .bookings-filter-menu,
.admin-shell.theme-dark .bookings-filter-menu {
  background: #182622;
  border-color: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark .bookings-filter-menu .menu-row,
.admin-shell.theme-dark .bookings-filter-menu .menu-row {
  color: #e6f4ee;
}

.app-shell.theme-dark .bookings-filter-menu .menu-row:hover,
.admin-shell.theme-dark .bookings-filter-menu .menu-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .bookings-filter-pill,
.admin-shell.theme-dark .bookings-filter-pill {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.30);
  color: #66d1ad;
}

.app-shell.theme-dark .bookings-filter-pill .pill-key,
.admin-shell.theme-dark .bookings-filter-pill .pill-key {
  color: #66d1ad;
}

.app-shell.theme-dark .bookings-add-filter,
.admin-shell.theme-dark .bookings-add-filter {
  color: #66d1ad;
  border-color: rgba(102, 209, 173, 0.30);
}

.app-shell.theme-dark .bookings-add-filter[aria-expanded="true"],
.admin-shell.theme-dark .bookings-add-filter[aria-expanded="true"] {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.40);
  color: #66d1ad;
}

.app-shell.theme-dark .payments-filter-menu,
.admin-shell.theme-dark .payments-filter-menu {
  background: #182622;
  border-color: rgba(255, 255, 255, 0.10);
}

.app-shell.theme-dark .payments-filter-menu .menu-row,
.admin-shell.theme-dark .payments-filter-menu .menu-row {
  color: #e6f4ee;
}

.app-shell.theme-dark .payments-filter-menu .menu-row:hover,
.admin-shell.theme-dark .payments-filter-menu .menu-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .payments-filter-pill,
.admin-shell.theme-dark .payments-filter-pill {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.30);
  color: #66d1ad;
}

.app-shell.theme-dark .payments-filter-pill .pill-key,
.admin-shell.theme-dark .payments-filter-pill .pill-key {
  color: #66d1ad;
}

.app-shell.theme-dark .payments-add-filter,
.admin-shell.theme-dark .payments-add-filter {
  color: #66d1ad;
  border-color: rgba(102, 209, 173, 0.30);
}

.app-shell.theme-dark .payments-add-filter[aria-expanded="true"],
.admin-shell.theme-dark .payments-add-filter[aria-expanded="true"] {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.40);
  color: #66d1ad;
}

/* Small "Product" tag inside merged Payments rows so the owner can
 * tell at a glance which row is a booking vs which is a voucher /
 * digital product order. Light slate background, no border, smaller
 * than the status badge next to it. */
.payment-row-kind {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(64, 84, 100, 0.10);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.app-shell.theme-dark .payment-row-kind,
.admin-shell.theme-dark .payment-row-kind {
  background: rgba(180, 200, 220, 0.10);
  color: rgba(220, 232, 240, 0.66);
}

.payments-export-button,
.payments-record-sale-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.payments-export-button svg,
.payments-record-sale-button svg { flex: 0 0 14px; }

/* Reschedule modal --------------------------------------------------- */
.reschedule-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 4px;
}

.reschedule-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.005em;
}

.reschedule-form-grid input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.reschedule-form-grid input:focus {
  outline: none;
  border-color: rgba(20, 126, 101, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 126, 101, 0.12);
}

.reschedule-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #d4544c;
  background: rgba(212, 84, 76, 0.06);
  color: #8b3a32;
  font-size: 13px;
  font-weight: 700;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 640px) {
  .reschedule-form-grid { grid-template-columns: 1fr; }
}

/* Dark mode: chip-on-dark needs a slightly stronger surface so
 * the affordance still reads. Soft white-mint tint instead of
 * green-mint, hover lifts a notch, active stays the brand
 * mint pill. */
.app-shell.theme-dark .payments-filter-segmented > button,
.admin-shell.theme-dark .payments-filter-segmented > button,
.app-shell.theme-dark .payments-range-segmented > button,
.admin-shell.theme-dark .payments-range-segmented > button,
.app-shell.theme-dark .services-filter-segmented > button,
.admin-shell.theme-dark .services-filter-segmented > button,
.admin-shell.theme-dark .admin-filter-segmented > button {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.app-shell.theme-dark .payments-filter-segmented > button.active,
.admin-shell.theme-dark .payments-filter-segmented > button.active,
.app-shell.theme-dark .payments-range-segmented > button.active,
.admin-shell.theme-dark .payments-range-segmented > button.active,
.app-shell.theme-dark .services-filter-segmented > button.active,
.admin-shell.theme-dark .services-filter-segmented > button.active,
.admin-shell.theme-dark .admin-filter-segmented > button.active {
  background: rgba(102, 209, 173, 0.16) !important;
  border-color: rgba(102, 209, 173, 0.30) !important;
  color: #66d1ad !important;
}

.app-shell.theme-dark .payments-filter-segmented > button:hover,
.admin-shell.theme-dark .payments-filter-segmented > button:hover,
.app-shell.theme-dark .payments-range-segmented > button:hover,
.admin-shell.theme-dark .payments-range-segmented > button:hover,
.app-shell.theme-dark .services-filter-segmented > button:hover,
.admin-shell.theme-dark .services-filter-segmented > button:hover,
.admin-shell.theme-dark .admin-filter-segmented > button:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e6f4ee !important;
}

/* ==========================================================
   PLAN VIEW — HoldSpot subscription (Stripe Billing)
   ========================================================== */
#plan-view .plan-ribbon { margin-bottom: 14px; }

.plan-panel { padding: 18px; }

.plan-hero {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid rgba(20, 126, 101, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 126, 101, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 249, 0.96));
}

.plan-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-hero-head .eyebrow { margin: 0; }

.plan-hero-head h2 {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.plan-hero-price {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.plan-hero-price strong {
  font-size: 26px;
  font-weight: 850;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.plan-hero-status {
  align-self: flex-start;
  font-size: 11px;
}

.plan-hero-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.plan-hero-features li {
  position: relative;
  padding: 0 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.plan-hero-features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #147e65;
  border-bottom: 2px solid #147e65;
  transform: rotate(-45deg);
}

.plan-hero-message {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(20, 126, 101, 0.18);
  background: rgba(20, 126, 101, 0.06);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0f6b56;
}

.plan-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.plan-hero-actions .primary-button,
.plan-hero-actions .ghost-button {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
}

.plan-hero-actions .ghost-button {
  border-color: rgba(24, 60, 50, 0.12);
}

.plan-hero-note {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-shell.theme-dark .plan-hero,
.admin-shell.theme-dark .plan-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(102, 209, 173, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border-color: rgba(102, 209, 173, 0.22);
}

.app-shell.theme-dark .plan-hero-head h2,
.admin-shell.theme-dark .plan-hero-head h2,
.app-shell.theme-dark .plan-hero-price strong,
.admin-shell.theme-dark .plan-hero-price strong { color: #e6f4ee; }

.app-shell.theme-dark .plan-hero-features li,
.admin-shell.theme-dark .plan-hero-features li { color: #d6e8e1; }

.app-shell.theme-dark .plan-hero-features li::before,
.admin-shell.theme-dark .plan-hero-features li::before {
  border-color: #66d1ad;
}

.app-shell.theme-dark .plan-hero-message,
.admin-shell.theme-dark .plan-hero-message {
  background: rgba(102, 209, 173, 0.08);
  border-color: rgba(102, 209, 173, 0.22);
  color: #b8e6d4;
}

/* Trial banner (slim floating strip pinned to the bottom-right corner) */
.trial-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(214, 164, 79, 0.32);
  background: linear-gradient(135deg, rgba(214, 164, 79, 0.12), rgba(214, 164, 79, 0.05));
  box-shadow: 0 6px 20px rgba(40, 30, 10, 0.10);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  animation: trialBannerIn 200ms ease;
}

@keyframes trialBannerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.trial-banner.hidden { display: none !important; }

.trial-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d6a44f;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(214, 164, 79, 0.2);
}

.trial-banner .small-button {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.trial-banner-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}

.trial-banner-close:hover { color: var(--ink); }

.app-shell.theme-dark .trial-banner,
.admin-shell.theme-dark .trial-banner {
  background: linear-gradient(135deg, rgba(214, 164, 79, 0.18), rgba(214, 164, 79, 0.06));
  border-color: rgba(214, 164, 79, 0.38);
  color: #f6efe1;
}

@media (max-width: 760px) {
  .trial-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: space-between;
  }
}

/* ==========================================================
   SLIDE-OVER FORM (Service editor)
   Right-side drawer with sticky footer, sections with eyebrows,
   live preview chip and color picker.
   ========================================================== */
.service-form.slide-over-form {
  /* Default state: hidden (existing rule sets display:none) */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  max-width: 100vw;
  z-index: 70;
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: -16px 0 40px rgba(20, 60, 50, 0.10);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.16, 0.84, 0.32, 1);
  --service-hue: 160;
  --slide-over-pad: 22px;
}

.service-form.slide-over-form.active {
  transform: translateX(0);
}

/* Slide-over header (eyebrow + title + close icon) */
.service-form.slide-over-form > .form-header {
  align-items: flex-start;
  padding: 18px var(--slide-over-pad) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.service-form.slide-over-form > .form-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.slide-over-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.slide-over-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.slide-over-close:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}

/* Scrollable content area between header and footer */
.service-form.slide-over-form > .slide-over-preview,
.service-form.slide-over-form > .slide-over-section,
.service-form.slide-over-form > input[type="hidden"] {
  /* These all live in the middle scrollable area thanks to the grid */
}

/* Preview chip at the top, just under the header */
.slide-over-preview {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 14px var(--slide-over-pad) 0;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, rgba(238, 244, 241, 0.45));
  overflow: hidden;
}

.slide-over-preview-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: hsl(var(--service-hue, 160) 55% 50%);
}

.slide-over-preview-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.slide-over-preview-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 160) 55% 50%);
  flex: 0 0 auto;
}

.slide-over-preview-main strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-over-preview-main small {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.slide-over-preview-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(238, 244, 241, 0.6);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.slide-over-preview-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.app-shell.theme-dark .slide-over-preview-thumb,
.admin-shell.theme-dark .slide-over-preview-thumb {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.slide-over-preview-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Form sections */
.slide-over-section {
  display: grid;
  gap: 12px;
  padding: 16px var(--slide-over-pad);
  border-top: 1px solid rgba(24, 60, 50, 0.06);
}

.slide-over-section:first-of-type {
  border-top: 0;
}

.slide-over-section-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.service-form.slide-over-form .field-hint {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: normal;
  text-transform: none;
}

.service-form.slide-over-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  text-transform: none;
}

.service-form.slide-over-form .toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 700;
}

.service-form.slide-over-form .toggle-row input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
}

.service-form.slide-over-form .toggle-row > span {
  display: grid;
  gap: 2px;
}

.service-form.slide-over-form .toggle-row strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* Make the body between header and footer scrollable */
.service-form.slide-over-form {
  overflow: hidden;
}

.service-form.slide-over-form > .form-header { grid-row: 1; }
.service-form.slide-over-form > .slide-over-footer { grid-row: 3; }
.service-form.slide-over-form > input[type="hidden"],
.service-form.slide-over-form > .slide-over-preview,
.service-form.slide-over-form > .slide-over-section {
  grid-row: 2;
}

.service-form.slide-over-form {
  /* Override the children placement so all middle children stack in row 2 */
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.service-form.slide-over-form > .slide-over-scroll-anchor { display: none; }

/* Treat the form like a flex column for the middle area scrollability */
.service-form.slide-over-form {
  display: flex !important;
  flex-direction: column;
}

.service-form.slide-over-form > .form-header,
.service-form.slide-over-form > .slide-over-footer {
  flex: 0 0 auto;
}

.service-form.slide-over-form > .slide-over-preview,
.service-form.slide-over-form > .slide-over-section {
  flex: 0 0 auto;
}

.service-form.slide-over-form > .slide-over-preview { margin-top: 14px; }

.service-form.slide-over-form > .slide-over-section:last-of-type {
  padding-bottom: 14px;
}

/* Scroll the middle children */
.service-form.slide-over-form {
  /* Use a wrapper-less approach: form itself scrolls in the middle */
}

/* Color picker swatches */
.color-picker {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.color-swatch {
  position: relative;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(24, 60, 50, 0.08);
  background: hsl(var(--service-hue, 160) 55% 50%);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.color-swatch:hover {
  transform: translateY(-1px);
}

.color-swatch.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(20, 126, 101, 0.20);
  transform: translateY(-1px);
}

.color-swatch.is-selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
}

/* Sticky footer */
.slide-over-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px var(--slide-over-pad);
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex: 0 0 auto;
}

.slide-over-footer .primary-button,
.slide-over-footer .ghost-button {
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
}

.slide-over-footer .primary-button { min-width: 140px; }

/* Make the slide-over scroll the middle area only.
   Achieved by making the form a flex column and the middle children
   share a scrollable wrapper. We'll wrap them via :is() selector chains
   using overflow on the form is simplest: */
.service-form.slide-over-form {
  /* The form scrolls vertically; header and footer stay put via sticky. */
  overflow-y: auto;
}

.service-form.slide-over-form > .form-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

.service-form.slide-over-form > .slide-over-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* Dark mode */
.app-shell.theme-dark .service-form.slide-over-form,
.admin-shell.theme-dark .service-form.slide-over-form {
  background: #11201c;
  border-left-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .service-form.slide-over-form > .form-header,
.admin-shell.theme-dark .service-form.slide-over-form > .form-header,
.app-shell.theme-dark .service-form.slide-over-form > .slide-over-footer,
.admin-shell.theme-dark .service-form.slide-over-form > .slide-over-footer {
  background: #11201c;
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .slide-over-preview,
.admin-shell.theme-dark .slide-over-preview {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .slide-over-preview-main strong,
.admin-shell.theme-dark .slide-over-preview-main strong,
.app-shell.theme-dark .slide-over-preview-price,
.admin-shell.theme-dark .slide-over-preview-price { color: #e6f4ee; }

.app-shell.theme-dark .slide-over-section,
.admin-shell.theme-dark .slide-over-section {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .service-form.slide-over-form input,
.app-shell.theme-dark .service-form.slide-over-form textarea,
.app-shell.theme-dark .service-form.slide-over-form select,
.admin-shell.theme-dark .service-form.slide-over-form input,
.admin-shell.theme-dark .service-form.slide-over-form textarea,
.admin-shell.theme-dark .service-form.slide-over-form select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #e6f4ee;
}

.app-shell.theme-dark .color-swatch.is-selected,
.admin-shell.theme-dark .color-swatch.is-selected {
  border-color: #66d1ad;
}

/* Mobile */
@media (max-width: 760px) {
  .service-form.slide-over-form {
    width: 100vw;
  }
  .color-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================
   PUBLIC PAYMENT PAGE (/<slug>/pay/<bookingId>?token=...)
   Standalone, calm view for the customer to settle their
   remaining balance via Stripe Checkout.
   ========================================================== */
body.payment-route {
  display: block !important;
}

body.payment-route .home-page,
body.payment-route .app-shell,
body.payment-route .admin-shell,
body.payment-route .owner-login-shell {
  display: none !important;
}

.payment-shell {
  display: none;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: linear-gradient(180deg, #f7faf8 0%, #eef4f1 100%);
}

.payment-shell.active {
  display: flex;
}

.payment-card {
  width: 100%;
  max-width: 480px;
  display: grid;
  gap: 18px;
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(20, 60, 50, 0.10);
}

.payment-logo {
  width: 130px;
  height: auto;
  margin-bottom: 4px;
}

.payment-card .eyebrow {
  margin: 0;
  color: var(--muted);
}

.payment-card h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.payment-card h2 {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.payment-intro {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.payment-summary {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(238, 244, 241, 0.4);
}

.payment-summary-row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  /* Defensive resets so global span/strong rules don't make these
     labels look like pills or badges. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.payment-summary-row > span {
  display: inline !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.payment-summary-row > strong {
  display: inline !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.payment-summary-divider {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
}

.payment-summary-total > span,
.payment-summary-total > strong {
  font-size: 16px;
}

.payment-summary-total > strong {
  color: #0f6b56;
}

.payment-actions { display: grid; gap: 10px; }

.payment-note {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.payment-success {
  display: grid;
  gap: 8px;
  text-align: center;
}

.payment-success p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.payment-error {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(160, 90, 90, 0.28);
  background: rgba(160, 90, 90, 0.06);
  border-radius: 10px;
}

.payment-error strong { color: #8b4a4a; font-size: 14px; }
.payment-error p { margin: 0; color: var(--muted); font-size: 13px; }

/* Payment page intentionally stays in light mode for the customer.
   This is a 30-second checkout view and matches HoldSpot's brand and
   the Stripe Checkout that follows. No prefers-color-scheme override. */
.payment-shell, .payment-card { color-scheme: light; }

/* ==========================================================
   PAYMENT LINK MODAL (owner side)
   ========================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Sits above the slide-over and any sticky page chrome so the modal
   * is always interactive even when stacked on top of other surfaces. */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 25, 21, 0.45);
  padding: 16px;
}

.modal-overlay.hidden { display: none !important; }

.modal-card {
  width: 100%;
  max-width: 480px;
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  animation: modalIn 200ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-header .eyebrow { margin: 0; }

.modal-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.modal-body-copy {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.modal-close {
  background: transparent;
  border: 1px solid var(--line);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
}

.modal-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.payment-link-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(238, 244, 241, 0.6);
  min-width: 0;
}

.payment-link-pill code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-link-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.payment-link-actions .primary-button,
.payment-link-actions .ghost-button {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}

.payment-link-actions .primary-button.hidden { display: none !important; }

.payment-link-foot {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-shell.theme-dark .modal-card,
.admin-shell.theme-dark .modal-card {
  background: #11201c;
}

.app-shell.theme-dark .modal-card h3,
.admin-shell.theme-dark .modal-card h3,
.app-shell.theme-dark .payment-link-pill code,
.admin-shell.theme-dark .payment-link-pill code { color: #e6f4ee; }

.app-shell.theme-dark .payment-link-pill,
.admin-shell.theme-dark .payment-link-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Owner-side action buttons: keep labels on a single line */
.payment-link-button,
.manage-link-button,
.manual-paid-button,
.profile-link-button {
  white-space: nowrap !important;
}

/* Customer-facing cancel block on the payment page */
.payment-cancel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 247, 236, 0.6);
}

.payment-cancel.hidden { display: none !important; }

.payment-cancel-policy {
  display: grid;
  gap: 4px;
}

.payment-cancel-policy .eyebrow {
  margin: 0;
  color: var(--muted);
}

.payment-cancel-policy strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.payment-cancel-policy p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

#payment-cancel-button {
  border-color: rgba(160, 90, 90, 0.30);
  color: #8b4a4a;
  font-weight: 800;
}

#payment-cancel-button:hover {
  background: rgba(160, 90, 90, 0.06);
  border-color: rgba(160, 90, 90, 0.45);
}

.payment-cancelled {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(160, 90, 90, 0.22);
  border-radius: 10px;
  background: rgba(160, 90, 90, 0.05);
  text-align: center;
}

.payment-cancelled.hidden { display: none !important; }

.payment-cancelled h2 { margin: 0; color: #8b4a4a; font-size: 18px; }
.payment-cancelled p { margin: 0; color: var(--muted); font-size: 13px; }

.profile-link-button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.profile-link-button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

/* Inline clickable contact link for email/phone rows in expanded booking */
.booking-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 850;
  transition: background 140ms ease, color 140ms ease;
}

.booking-contact-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: stroke 140ms ease;
}

.booking-contact-link:hover {
  background: rgba(20, 126, 101, 0.08);
  color: #0f6b56;
}

.booking-contact-link:hover svg {
  stroke: #147e65;
}

.app-shell.theme-dark .booking-contact-link,
.admin-shell.theme-dark .booking-contact-link {
  color: #e6f4ee;
}

.app-shell.theme-dark .booking-contact-link:hover,
.admin-shell.theme-dark .booking-contact-link:hover {
  background: rgba(102, 209, 173, 0.10);
  color: #66d1ad;
}

.app-shell.theme-dark .booking-contact-link:hover svg,
.admin-shell.theme-dark .booking-contact-link:hover svg {
  stroke: #66d1ad;
}

/* ==========================================================
   AUTHORITATIVE: expanded booking row action panel wraps below
   customer info. Sits at the very end of the file so it wins
   over the older #bookings-view #all-bookings overrides that
   pinned grid-column to 3 / 4.
   ========================================================== */
#bookings-view #all-bookings .booking-row.expanded .booking-card-payment-panel,
#bookings-view #all-bookings .booking-row.expanded .booking-actions {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

/* Override the authoritative rule above specifically for the
   simplified "needs closing" resolve panel, which must sit flush
   left under the customer info, not right-aligned with the rest
   of the expanded-row buttons. */
#bookings-view #all-bookings .booking-row.expanded .booking-action-resolve,
#bookings-view .booking-row.expanded .booking-action-resolve {
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 4px 0 0 !important;
  background: transparent !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-payment-panel > *,
#bookings-view #all-bookings .booking-row.expanded .booking-actions > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

#bookings-view #all-bookings .booking-row.expanded .booking-card-payment-panel .status-select,
#bookings-view #all-bookings .booking-row.expanded .booking-actions .status-select {
  min-width: 160px !important;
}

/* ==========================================================
   BOOKINGS LIST — day group headers
   Grouping by day with sticky headers + Today/Tomorrow badges.
   ========================================================== */

#all-bookings .booking-day-group {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

#all-bookings .booking-day-group:last-child { margin-bottom: 0; }

.day-group-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  background: linear-gradient(180deg, var(--surface) 70%, rgba(255,255,255,0));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.day-group-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.002em;
  color: var(--ink);
}

.day-group-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.day-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

.day-group-badge-today {
  background: rgb(223, 240, 235);
  color: rgb(13, 79, 65);
  border: 1px solid rgba(24, 60, 50, 0.12);
}

.day-group-badge-tomorrow {
  background: rgba(20, 126, 101, 0.06);
  color: rgb(13, 79, 65);
  border: 1px solid rgba(24, 60, 50, 0.10);
}

/* Dark mode */
.app-shell.theme-dark .day-group-header,
.admin-shell.theme-dark .day-group-header {
  background: linear-gradient(180deg, rgba(20, 32, 28, 0.95) 70%, rgba(20, 32, 28, 0));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .day-group-title,
.admin-shell.theme-dark .day-group-title { color: #e6f4ee; }

.app-shell.theme-dark .day-group-badge-today,
.admin-shell.theme-dark .day-group-badge-today {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.30);
  color: #66d1ad;
}

.app-shell.theme-dark .day-group-badge-tomorrow,
.admin-shell.theme-dark .day-group-badge-tomorrow {
  background: rgba(102, 209, 173, 0.08);
  border-color: rgba(102, 209, 173, 0.18);
  color: #66d1ad;
}

/* ----- Admin login: hide sidebar on mobile before auth -----
   The admin shell normally shows a sidebar (Businesses / Owner app / Home).
   On the login screen the nav items lead nowhere useful and on mobile they
   take ~400px above the login card, pushing it off the first viewport.
   Collapse the sidebar on small screens while waiting for authentication. */
@media (max-width: 760px) {
  .admin-shell.admin-pre-auth .admin-sidebar {
    display: none;
  }
}

/* ----- iOS Safari zoom prevention -----
   Safari on iOS auto-zooms when focusing any input/textarea/select with
   font-size below 16px, and never zooms back out. Bump to 16px on mobile
   so focus does not trigger zoom. Desktop layout keeps its original sizing.
   !important is required because many component selectors set 14px via
   class-scoped rules with higher specificity than a bare element selector. */
@media (max-width: 600px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ==========================================================
   SUPER ADMIN — calm shell pass
   Bring the admin into the same visual language as the owner app:
   quiet panels, soft dividers instead of nested boxes, mint accents
   for action items, monochrome neutral text, slimmer typography.
   This block overrides the older Codex-era admin styles further up
   in the file - cleaner to layer it than rewrite each rule.
   ========================================================== */

/* Container: same calm-shell panel as Settings (single border, surface bg) */
.admin-shell .panel.admin-businesses-panel,
.admin-shell #admin-business-detail-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  padding: 22px 26px 28px;
}

.admin-shell #admin-business-detail-panel .panel-header {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

/* Overview grid: 3 cards on top of detail panel. Drop nested borders,
   keep just an inset accent stripe on the left for character. */
.admin-shell .admin-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-shell .admin-detail-card {
  position: relative;
  border: 1px solid rgba(24, 60, 50, 0.10);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px 16px;
  display: grid;
  gap: 4px;
  box-shadow: none;
}

.admin-shell .admin-detail-card .eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.admin-shell .admin-detail-card strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
}

.admin-shell .admin-detail-card span,
.admin-shell .admin-detail-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Sections inside the detail: drop the heavy box, use a horizontal
   divider between sections like the settings page does. */
.admin-shell .admin-detail-section {
  border: 0;
  background: transparent;
  padding: 18px 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.admin-shell .admin-detail-section.admin-record-section {
  border-style: solid;
}

.admin-shell .admin-section-heading {
  margin-bottom: 14px;
}

.admin-shell .admin-section-heading .eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 800;
  margin: 0 0 4px;
}

.admin-shell .admin-section-heading h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  color: var(--text);
  letter-spacing: -0.01em;
}

.admin-shell .admin-section-heading p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* Billing table: three columns of label/value, soft divider only */
.admin-shell .admin-billing-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.admin-shell .admin-billing-table > div {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 14px;
  border-radius: 0;
}

.admin-shell .admin-billing-table > div:nth-child(3n) {
  border-right: 0;
}

.admin-shell .admin-billing-table > div:nth-last-child(-n+3) {
  border-bottom: 0;
}

.admin-shell .admin-billing-table strong {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shell .admin-billing-table span {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Technical IDs collapsed by default: less prominent */
.admin-shell .admin-technical-details {
  border: 1px dashed rgba(24, 60, 50, 0.16);
  border-radius: 10px;
  background: transparent;
  padding: 8px 14px;
}

.admin-shell .admin-technical-details[open] {
  padding-bottom: 12px;
}

.admin-shell .admin-technical-details summary {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* Control grid: lighter cards, less padding, the ghost/danger
   button stretches full width as before. */
.admin-shell .admin-control-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-shell .admin-control-card {
  border: 1px solid rgba(24, 60, 50, 0.10);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px;
  gap: 6px;
}

.admin-shell .admin-control-card > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shell .admin-control-card strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}

.admin-shell .admin-control-card p {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
}

.admin-shell .admin-control-card button {
  margin-top: 4px;
  min-height: 34px;
  font-size: 13px;
  font-weight: 800;
}

.admin-shell .admin-danger-card {
  border-color: rgba(200, 50, 50, 0.20);
  background: rgba(200, 50, 50, 0.03);
}

.admin-shell .admin-danger-card > span {
  color: rgb(150, 30, 30);
}

/* Mini-list (Services / Recent bookings / Notes / Audit log): drop
   the box-each-row look; one container with thin row dividers. */
.admin-shell .admin-mini-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  gap: 0;
}

.admin-shell .admin-mini-list > div {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.admin-shell .admin-mini-list > div:last-child {
  border-bottom: 0;
}

.admin-shell .admin-mini-list strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.admin-shell .admin-mini-list span {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.admin-shell .admin-mini-list .empty-state {
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.admin-shell .admin-detail-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.admin-shell .admin-detail-columns section {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.admin-shell .admin-detail-columns h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Access override buttons row: tighter chips */
.admin-shell .admin-access-actions {
  gap: 6px;
}

.admin-shell .admin-access-actions .small-button,
.admin-shell .admin-access-actions .danger-button {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
}

.admin-shell .admin-custom-access-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-shell .admin-custom-access-value,
.admin-shell .admin-custom-access-unit {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
}

.admin-shell .admin-custom-access-value {
  width: 64px;
}

/* Note form */
.admin-shell .admin-note-form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-shell .admin-note-form textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 80px;
}

.admin-shell .admin-note-form button {
  justify-self: start;
  min-height: 34px;
  padding: 0 16px;
  font-size: 13px;
}

/* Topbar inside admin: align with owner panel - eyebrow + h1 + ghost
   actions on the right. */
.admin-shell .topbar {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.admin-shell .topbar h1 {
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.01em;
  margin: 0;
}

.admin-shell .topbar .eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

/* Quiet the row card columns inside the business row so they line up
   visually like the booking-row pattern. */
.admin-shell .admin-row-card {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-shell .admin-row-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shell .admin-row-card strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.admin-shell .admin-row-card span,
.admin-shell .admin-row-card small {
  font-size: 12px;
  color: var(--muted);
}

/* Tighter action buttons inside the row */
.admin-shell .admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-shell .admin-row-actions .small-button,
.admin-shell .admin-row-actions .danger-button {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
}

/* Dark mode adjustments for the new calm shell */
.admin-shell.theme-dark .panel.admin-businesses-panel,
.admin-shell.theme-dark #admin-business-detail-panel,
.admin-shell.theme-dark .admin-detail-card,
.admin-shell.theme-dark .admin-control-card,
.admin-shell.theme-dark .admin-mini-list,
.admin-shell.theme-dark .admin-billing-table {
  background: var(--surface);
  border-color: rgba(217, 238, 232, 0.10);
}

.admin-shell.theme-dark .admin-billing-table > div {
  border-color: rgba(217, 238, 232, 0.10);
}

.admin-shell.theme-dark .admin-mini-list > div {
  border-bottom-color: rgba(217, 238, 232, 0.10);
}

.admin-shell.theme-dark .admin-section-heading .eyebrow,
.admin-shell.theme-dark .admin-detail-columns h3 {
  color: #bff4e2;
}

.admin-shell.theme-dark .admin-danger-card {
  background: rgba(248, 113, 113, 0.05);
  border-color: rgba(248, 113, 113, 0.18);
}

.admin-shell.theme-dark .admin-danger-card > span {
  color: #fecaca;
}

/* Tablet / narrow desktop */
@media (max-width: 1100px) {
  .admin-shell .admin-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell .admin-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell .admin-detail-columns { grid-template-columns: 1fr; }
  .admin-shell .admin-billing-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell .admin-billing-table > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .admin-shell .admin-billing-table > div:nth-child(2n) { border-right: 0; }
}

@media (max-width: 760px) {
  .admin-shell .admin-detail-grid,
  .admin-shell .admin-control-grid { grid-template-columns: 1fr; }
  .admin-shell .admin-billing-table { grid-template-columns: 1fr; }
  .admin-shell .admin-billing-table > div { border-right: 0 !important; }
  .admin-shell .panel.admin-businesses-panel,
  .admin-shell #admin-business-detail-panel { padding: 16px 18px 20px; }
}

/* ----- iOS Safari zoom prevention -----

/* Toolbar above the business list (filter + search) */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-search-input {
  flex: 1 1 220px;
  max-width: 360px;
  margin-left: auto;
}

.admin-filter-segmented {
  flex: 0 1 auto;
}

@media (max-width: 760px) {
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-search-input { flex: 0 0 auto; margin-left: 0; max-width: none; }
}

/* Business avatar (initials in a soft circle, same shape as customer avatar
   in the owner Bookings list). */
.admin-business-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 126, 101, 0.10);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.admin-shell.theme-dark .admin-business-avatar {
  background: rgba(102, 209, 173, 0.16);
  color: #bff4e2;
}

/* Identity header inside the business row */
.admin-customer-identity-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-customer-identity-head > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-customer-identity-head strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}

.admin-customer-identity-head span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-customer-identity > small {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

/* Quiet panel rows: drop the heavy border + tinted bg in favour of a
   single soft border that matches the calm shell. */
.admin-shell .admin-business-row {
  border-color: rgba(24, 60, 50, 0.10);
  background: var(--surface);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.admin-shell .admin-business-row:hover {
  border-color: rgba(20, 126, 101, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 36, 30, 0.07);
}

/* Color-coded status pills: mint=active, blue=free/lifetime,
   red=blocked, grey=archived. Borrows the same calm-mint look as the
   bookings filter so the panel feels like one product. */
.admin-shell .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.admin-shell .status-pill.active,
.admin-shell .status-pill.is-active {
  background: rgb(223, 240, 235);
  border-color: rgba(20, 126, 101, 0.20);
  color: rgb(13, 79, 65);
}

.admin-shell .status-pill.free,
.admin-shell .status-pill.lifetime {
  background: rgba(70, 85, 122, 0.10);
  border-color: rgba(70, 85, 122, 0.24);
  color: rgb(47, 58, 85);
}

.admin-shell .status-pill.blocked,
.admin-shell .status-pill.danger,
.admin-shell .status-pill.is-blocked {
  background: rgba(200, 50, 50, 0.10);
  border-color: rgba(200, 50, 50, 0.26);
  color: rgb(150, 30, 30);
}

.admin-shell .status-pill.archived,
.admin-shell .status-pill.inactive,
.admin-shell .status-pill.canceled,
.admin-shell .status-pill.cancelled {
  background: rgba(120, 130, 130, 0.10);
  border-color: rgba(120, 130, 130, 0.24);
  color: rgb(70, 80, 80);
}

.admin-shell .status-pill.trialing,
.admin-shell .status-pill.past_due {
  background: rgba(168, 102, 23, 0.10);
  border-color: rgba(168, 102, 23, 0.26);
  color: rgb(140, 80, 10);
}

/* Dark mode for status pills */
.admin-shell.theme-dark .status-pill.active,
.admin-shell.theme-dark .status-pill.is-active {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.30);
  color: #bff4e2;
}

.admin-shell.theme-dark .status-pill.free,
.admin-shell.theme-dark .status-pill.lifetime {
  background: rgba(154, 170, 210, 0.14);
  border-color: rgba(154, 170, 210, 0.28);
  color: #d5dcee;
}

.admin-shell.theme-dark .status-pill.blocked,
.admin-shell.theme-dark .status-pill.danger {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.30);
  color: #fecaca;
}

.admin-shell.theme-dark .status-pill.archived,
.admin-shell.theme-dark .status-pill.canceled,
.admin-shell.theme-dark .status-pill.cancelled {
  background: rgba(217, 238, 232, 0.08);
  border-color: rgba(217, 238, 232, 0.18);
  color: rgba(217, 238, 232, 0.7);
}

/* Metric tiles: slimmer, tighter, no shadow, accent number */
.admin-shell .admin-metrics .metric {
  background: var(--surface);
  border: 1px solid rgba(24, 60, 50, 0.10);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: none;
  display: grid;
  gap: 4px;
}

.admin-shell .admin-metrics .metric span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shell .admin-metrics .metric strong {
  font-size: 28px;
  font-weight: 850;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.admin-shell .admin-metrics .metric small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* ==========================================================
   SUPER ADMIN — redesigned detail (tabs)
   Hero header on top + Overview / Billing / Access tabs.
   ========================================================== */

.admin-detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.admin-detail-hero-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-detail-hero-name {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text);
}

.admin-detail-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.admin-detail-hero-meta .admin-detail-hero-context {
  color: var(--text);
  font-weight: 700;
}

.admin-detail-hero-meta a {
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}

.admin-detail-hero-divider {
  color: var(--muted);
  opacity: 0.5;
}

.admin-detail-hero-actions {
  flex-shrink: 0;
}

.admin-detail-hero-actions .small-button {
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: rgba(20, 126, 101, 0.20);
}

.admin-detail-hero-actions .small-button:hover {
  background: rgba(20, 126, 101, 0.16);
}

/* Tab nav */
.admin-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 0 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.admin-detail-tabs button {
  position: relative;
  background: none;
  border: 0;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}

.admin-detail-tabs button:hover { color: var(--text); }

.admin-detail-tabs button.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.admin-shell.theme-dark .admin-detail-tabs button.active {
  color: #bff4e2;
}

.admin-detail-tab-content {
  display: grid;
  gap: 22px;
}

.admin-overview-section {
  display: grid;
  gap: 12px;
}

.admin-overview-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.admin-shell.theme-dark .admin-overview-section-title { color: #bff4e2; }

/* Overview stats — slim inline ribbon (matches top-of-page strip) */
.admin-overview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid rgba(24, 60, 50, 0.10);
  border-radius: 10px;
  background: var(--surface);
}

.admin-overview-stats > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.admin-overview-stats span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-overview-stats strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Access status card */
.admin-access-status-card {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
}

.admin-access-status-card.status-blocked,
.admin-access-status-card.status-danger {
  border-left-color: rgb(200, 50, 50);
}

.admin-access-status-card.status-free,
.admin-access-status-card.status-lifetime {
  border-left-color: rgb(70, 85, 122);
}

.admin-access-status-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

/* Action rows */
.admin-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-action-row .small-button,
.admin-action-row .danger-button {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
}

/* Refund block: last payment row + actions + custom-amount form below */
.admin-refund-block {
  display: grid;
  gap: 10px;
}

.admin-refund-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.admin-refund-summary { display: grid; gap: 2px; }

.admin-refund-summary strong { font-size: 14px; font-weight: 800; }

.admin-refund-summary span {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
}

.admin-refund-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-refund-actions .small-button,
.admin-refund-actions .danger-button {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
}

/* Custom refund amount form */
.admin-refund-custom-form {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 12px 16px;
  border: 1px dashed rgba(24, 60, 50, 0.18);
  border-radius: 10px;
  background: transparent;
}

.admin-refund-custom-form label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-refund-custom-input {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  min-height: 34px;
  text-transform: none;
  letter-spacing: 0;
}

.admin-refund-custom-input span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-refund-custom-value {
  border: 0;
  padding: 0;
  min-height: 32px;
  width: 100px;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: var(--text);
}

.admin-refund-custom-value:focus { outline: none; }

.admin-refund-custom-form button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}

/* Sync row inside Stripe technical IDs collapsed details */
.admin-technical-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(24, 60, 50, 0.16);
}

.admin-technical-sync small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Block-until form */
.admin-block-until-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.admin-block-until-form label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.admin-block-until-form input[type="date"] {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
}

.admin-block-until-form button {
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .admin-overview-stats { gap: 14px 22px; }
}

@media (max-width: 760px) {
  .admin-detail-hero { flex-direction: column; align-items: flex-start; }
  .admin-detail-hero-actions { width: 100%; }
  .admin-detail-hero-actions .small-button { width: 100%; }
  .admin-overview-stats { flex-direction: column; align-items: flex-start; gap: 10px; }
  .admin-overview-stats > div { width: 100%; justify-content: space-between; }
  .admin-detail-tabs { overflow-x: auto; }
  .admin-block-until-form { flex-wrap: wrap; margin-left: 0; }
  .admin-action-row { flex-direction: column; align-items: stretch; }
  .admin-action-row .small-button,
  .admin-action-row .danger-button { width: 100%; }
}

/* ==========================================================
   SUPER ADMIN — slim accordion list
   Single-line collapsed row. Click Details ▾ → row expands
   in place to show hero + 3 tabs. Click again to collapse.
   ========================================================== */

/* Metric ribbon: slim horizontal strip instead of 4 hero cards */
.admin-shell .admin-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 16px;
}

.admin-shell .admin-metrics .metric {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.admin-shell .admin-metrics .metric span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shell .admin-metrics .metric strong {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.1;
}

.admin-shell .admin-metrics .metric small {
  display: none;
}

/* Slim accordion row */
.admin-shell .admin-business-row {
  display: block;
  padding: 0;
  border: 1px solid rgba(24, 60, 50, 0.10);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-shell .admin-business-row:hover {
  border-color: rgba(20, 126, 101, 0.30);
}

.admin-shell .admin-business-row.is-expanded {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(15, 36, 30, 0.06);
}

/* The summary row is the full-width clickable header */
.admin-shell .admin-row-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) auto minmax(160px, 1.1fr) minmax(140px, 0.9fr) 24px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.admin-shell .admin-row-summary:hover {
  background: rgba(20, 126, 101, 0.03);
}

.admin-shell .admin-business-row.is-expanded .admin-row-summary {
  background: rgba(20, 126, 101, 0.05);
}

.admin-shell .admin-row-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-shell .admin-row-identity strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-shell .admin-row-identity span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-shell .admin-row-status {
  display: inline-flex;
  align-items: center;
}

.admin-shell .admin-row-context,
.admin-shell .admin-row-metrics {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-shell .admin-row-metrics {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-shell .admin-row-chevron {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  transition: transform 140ms ease;
}

.admin-shell .admin-business-row.is-expanded .admin-row-chevron {
  color: var(--accent);
}

/* Expanded content inside the row */
.admin-shell .admin-row-expanded {
  padding: 22px 26px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Dark mode */
.admin-shell.theme-dark .admin-business-row {
  background: var(--surface);
  border-color: rgba(217, 238, 232, 0.10);
}

.admin-shell.theme-dark .admin-business-row.is-expanded {
  border-color: var(--accent);
}

.admin-shell.theme-dark .admin-row-summary:hover,
.admin-shell.theme-dark .admin-business-row.is-expanded .admin-row-summary {
  background: rgba(102, 209, 173, 0.06);
}

.admin-shell.theme-dark .admin-metrics {
  background: var(--surface);
  border-color: rgba(217, 238, 232, 0.10);
}

/* Tablet / mobile collapse */
@media (max-width: 1100px) {
  .admin-shell .admin-row-summary {
    grid-template-columns: minmax(180px, 1fr) auto minmax(140px, 1fr) 24px;
  }
  .admin-shell .admin-row-metrics { display: none; }
}

@media (max-width: 760px) {
  .admin-shell .admin-metrics { gap: 18px; padding: 12px 14px; }
  .admin-shell .admin-metrics .metric strong { font-size: 18px; }
  .admin-shell .admin-row-summary {
    grid-template-columns: 1fr auto 20px;
    gap: 10px;
  }
  .admin-shell .admin-row-context { display: none; }
  .admin-shell .admin-row-expanded { padding: 16px 18px 20px; }
}

/* Inline empty-state line for sections where the bordered mini-list
   container would feel like a duplicate (e.g. Internal notes empty
   state right under the Save note button). */
.admin-empty-line {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  font-style: italic;
}

/* ==========================================================
   SUPER ADMIN — no sidebar, no topbar
   Only one nav item (Customers), so the sidebar is gone entirely.
   A slim strip in the top-right holds just the theme toggle.
   ========================================================== */

.admin-shell {
  grid-template-columns: minmax(0, 1fr);
}

.admin-top-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-theme-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.admin-theme-icon:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Logout uses the same circle but tints to a soft red on hover so the
   destructive-ish action reads differently from the theme toggle. */
.admin-logout-icon:hover {
  border-color: rgba(200, 50, 50, 0.45);
  color: rgb(150, 30, 30);
}

.admin-shell.theme-dark .admin-logout-icon:hover {
  border-color: rgba(248, 113, 113, 0.40);
  color: #fecaca;
}

.admin-theme-icon svg {
  display: block;
}

.admin-shell .admin-theme-icon-light { display: block; }
.admin-shell .admin-theme-icon-dark { display: none; }
.admin-shell.theme-dark .admin-theme-icon-light { display: none; }
.admin-shell.theme-dark .admin-theme-icon-dark { display: block; }

.admin-shell.theme-dark .admin-theme-icon {
  background: rgba(217, 238, 232, 0.05);
  border-color: rgba(217, 238, 232, 0.12);
  color: rgba(217, 238, 232, 0.75);
}

.admin-shell.theme-dark .admin-theme-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-shell .admin-sidebar {
  /* Re-distribute the 28px gap into a top + middle + bottom layout */
  gap: 0;
  padding: 24px 18px 18px;
}

.admin-shell .admin-sidebar .brand {
  padding-bottom: 24px;
}

.admin-shell .admin-nav-primary {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.admin-shell .admin-nav-primary .nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-shell .nav-item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.admin-shell .nav-item.active .nav-item-count {
  background: rgba(102, 209, 173, 0.22);
  color: #bff4e2;
}

/* Footer area pinned to the bottom of the sidebar */
.admin-shell .admin-nav-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
}

.admin-shell .admin-nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px 4px;
}

.admin-shell .nav-icon-action {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.admin-shell .nav-icon-action:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.admin-shell .nav-icon-action svg {
  display: block;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
}

.admin-shell .nav-icon-action:hover svg {
  color: #fff;
}

/* Theme toggle: show sun in light mode, moon in dark mode.
   The wrapping spans need explicit width/height so they take space in
   the flex row - without it the SVG renders on top of the label text. */
.admin-shell .panel-theme-toggle .nav-icon-light,
.admin-shell .panel-theme-toggle .nav-icon-dark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.admin-shell .panel-theme-toggle .nav-icon-light { display: flex; }
.admin-shell .panel-theme-toggle .nav-icon-dark { display: none; }
.admin-shell.theme-dark .panel-theme-toggle .nav-icon-light { display: none; }
.admin-shell.theme-dark .panel-theme-toggle .nav-icon-dark { display: flex; }

.admin-shell .nav-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-shell .admin-nav-footer .nav-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 10px;
  text-transform: none;
  letter-spacing: 0;
}

.admin-shell .admin-nav-footer .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* Customers panel header: just a clean h2 now, no eyebrow above it */
.admin-shell .admin-customers-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Give the main content a calm margin from the top edge. */
.admin-shell .admin-main {
  padding-top: 18px;
}

@media (max-width: 1280px) {
  /* When the sidebar collapses to a horizontal bar, footer area sits
     beside the primary nav instead of below it. */
  .admin-shell .admin-sidebar {
    padding: 16px 18px;
  }
  .admin-shell .admin-sidebar .brand {
    padding-bottom: 0;
  }
  .admin-shell .admin-nav-primary { margin-bottom: 0; }
  .admin-shell .admin-nav-footer {
    margin-top: 0;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .admin-shell .admin-nav-divider {
    width: 1px;
    height: 24px;
    margin: 0 6px;
  }
  .admin-shell .admin-main { padding-top: 24px; }
}

/* === Public product checkout page === */

body.public-checkout-page {
  margin: 0;
  background: #f5f7f6;
  color: #1a2724;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pub-checkout {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 18px 80px;
}

.pub-checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.pub-checkout-back {
  color: #147e65;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.pub-checkout-back:hover {
  text-decoration: underline;
}

/* Business name as plain branding on the checkout page (no link).
 * Matches the back link's weight + color so the header still feels
 * balanced against the eyebrow on the right. */
.pub-checkout-brand {
  color: #147e65;
  font-weight: 700;
  font-size: 14px;
}

.pub-checkout-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6d69;
}

.pub-checkout-card {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e3eae7;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(20, 60, 50, 0.06);
}

/* Stacked variant: full-width banner on top, content below. Used on the
 * public checkout page so an uploaded voucher banner shows at its
 * native aspect ratio (wide vouchers look like real vouchers, square
 * thumbnails look like square thumbnails) without an awkward empty
 * column next to it. */
.pub-checkout-card-stacked {
  display: block;
  padding: 0;
  overflow: hidden;
}

.pub-checkout-card-stacked .pub-checkout-body {
  padding: 28px;
}

.pub-checkout-hero {
  width: 100%;
  display: block;
  background: linear-gradient(135deg, #e8f3ee, #f5f9f7);
  border-bottom: 1px solid #e3eae7;
}

.pub-checkout-hero img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .pub-checkout-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .pub-checkout-card-stacked {
    padding: 0;
  }
  .pub-checkout-card-stacked .pub-checkout-body {
    padding: 22px;
  }
}

.pub-checkout-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e3eae7;
}

.pub-checkout-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f3ee, #f5f9f7);
  border: 1px solid #d6e6dd;
  color: #147e65;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.pub-checkout-body h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: #1a2724;
}

.pub-checkout-desc {
  margin: 0 0 14px;
  color: #3a4a45;
  line-height: 1.5;
  font-size: 14px;
}

.pub-checkout-price {
  display: inline-block;
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 850;
  color: #0f6b56;
}

.pub-checkout-alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid #d6a44f;
  background: #fff7e8;
  border-radius: 8px;
  font-size: 13px;
  color: #5b3f10;
}

.pub-checkout-form {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.pub-checkout-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1a2724;
}

.pub-checkout-form label > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f6d69;
  text-transform: uppercase;
}

.pub-checkout-form input,
.pub-checkout-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d2dcd8;
  border-radius: 8px;
  background: #ffffff;
  color: #1a2724;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.pub-checkout-form input:focus,
.pub-checkout-form textarea:focus {
  outline: 0;
  border-color: #147e65;
  box-shadow: 0 0 0 3px rgba(20, 126, 101, 0.18);
}

.pub-checkout-form small {
  font-size: 12px;
  color: #6a7773;
  font-weight: 500;
}

.pub-checkout-fieldset {
  margin: 6px 0 0;
  padding: 14px;
  border: 1px solid #e3eae7;
  border-radius: 10px;
  background: #f9fbfa;
  display: grid;
  gap: 10px;
}

.pub-checkout-fieldset legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #5f6d69;
  text-transform: uppercase;
}

.pub-checkout-submit {
  margin-top: 6px;
  padding: 14px 18px;
  border: 0;
  border-radius: 10px;
  background: #147e65;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background 120ms ease;
}

.pub-checkout-submit:hover,
.pub-checkout-submit:focus-visible {
  background: #0f6b56;
  outline: 0;
}

.pub-checkout-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pub-checkout-error {
  margin: 0;
  padding: 10px 12px;
  background: #fff0ee;
  color: #8b2c2c;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.pub-checkout-secure {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6a7773;
}

.pub-checkout-footer {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: #6a7773;
}

.pub-checkout-footer a {
  color: #147e65;
  text-decoration: none;
  font-weight: 700;
}

.pub-checkout-footer a:hover {
  text-decoration: underline;
}

.pub-checkout-empty h1 {
  margin: 0 0 10px;
  font-size: 22px;
}

.pub-checkout-empty p {
  margin: 0 0 8px;
  color: #3a4a45;
}

.pub-checkout-success {
  /* This card also carries .pub-checkout-card, whose 2-column grid
     (image | form) is for the checkout page. The confirmation is a single
     centred column, so override the grid: otherwise the content is squeezed
     into the 280px first track with an empty track beside it. */
  display: block;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

/* Digital-product (ebook) order: the hero is a portrait cover, so cap it
   smaller than the wide voucher-banner default, and drop the monospace
   voucher-code styling from the "Your file is ready" note. */
.pub-checkout-success.is-download .pub-success-hero {
  max-width: 240px;
}
.pub-checkout-success.is-download .pub-success-callout-value {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
}
/* Full-width download button so the callout doesn't look empty: the short
   digital-product content left a small pill lost in a box sized for a long
   voucher code. */
.pub-checkout-success.is-download .pub-success-callout-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px;
  padding: 11px 12px;
  font-size: 15px;
}

.pub-success-state h1 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 850;
}

.pub-success-state p {
  margin: 0 0 12px;
  color: #3a4a45;
  line-height: 1.5;
}

.pub-success-callout {
  margin: 18px auto;
  max-width: 360px;
  padding: 18px 20px;
  background: #eaf6f1;
  border-left: 4px solid #147e65;
  border-radius: 10px;
  text-align: left;
}

.pub-success-callout-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f6b56;
}

.pub-success-callout-value {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  font-weight: 850;
  color: #0f6b56;
  font-family: Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.pub-success-callout-link {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #147e65;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.pub-success-receipt {
  margin-top: 14px;
  font-size: 13px;
  color: #6a7773;
}

/* Order detail + manual order modals */
.order-detail-card,
.manual-order-card {
  max-width: 480px;
}

.order-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px 0 0;
}

.order-detail-list > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.order-detail-list > div:first-child {
  border-top: 0;
}

.order-detail-list dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-list dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

.order-detail-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.manual-order-form {
  display: grid;
  gap: 12px;
}

.manual-order-form label {
  display: grid;
  gap: 4px;
}

.manual-order-form label > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.manual-order-form select,
.manual-order-form input {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.manual-order-form select:focus,
.manual-order-form input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.manual-order-form small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.manual-order-error {
  margin: 0;
  padding: 9px 11px;
  background: rgba(193, 68, 68, 0.1);
  color: #8b2c2c;
  border-radius: 8px;
  font-size: 13px;
}

.app-shell.theme-dark .manual-order-form select,
.app-shell.theme-dark .manual-order-form input,
.admin-shell.theme-dark .manual-order-form select,
.admin-shell.theme-dark .manual-order-form input {
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.app-shell.theme-dark .manual-order-error,
.admin-shell.theme-dark .manual-order-error {
  color: #ff8b7a;
  background: rgba(255, 139, 122, 0.1);
}

/* Hero banner at the top of the order success card (mirrors the email). */
.pub-success-hero {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 12px;
  border: 1px solid #e3eae7;
}

/* Voucher banner upload (drag&drop + file picker + URL fallback) */
.voucher-upload-field {
  display: grid;
  gap: 8px;
}

.voucher-upload-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.voucher-upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 18px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2, #f6f9f8);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  overflow: hidden;
}

.voucher-upload-zone:hover,
.voucher-upload-zone:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 0;
}

.voucher-upload-zone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(20, 126, 101, 0.18) inset;
}

.voucher-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  color: var(--muted);
}

/* display: flex / block above defeats the browser's implicit hidden
 * attribute, so we override per-element. Otherwise both the empty
 * state and the thumbnail render at the same time after an upload. */
.voucher-upload-empty[hidden],
.voucher-upload-preview[hidden],
.voucher-upload-remove[hidden],
.voucher-upload-status[hidden],
.ebook-upload-filename[hidden] {
  display: none !important;
}

/* Filename chip shown in the ebook upload zone once a PDF is attached (the
   zone has no <img> preview like the image uploaders do). */
.ebook-upload-filename {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  word-break: break-all;
  text-align: center;
}

.voucher-upload-empty svg {
  color: var(--accent);
  margin-bottom: 2px;
}

.voucher-upload-empty strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.voucher-upload-empty span {
  font-size: 12px;
  color: var(--muted);
}

.voucher-upload-preview {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(20, 60, 50, 0.08);
}

.voucher-upload-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.voucher-upload-remove:hover {
  border-color: #c14444;
  color: #c14444;
}

.voucher-upload-status {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2, #f6f9f8);
  color: var(--muted);
}

.voucher-upload-status.is-progress {
  background: rgba(20, 126, 101, 0.08);
  color: var(--accent-dark);
}

.voucher-upload-status.is-success {
  background: rgba(20, 126, 101, 0.12);
  color: var(--accent-dark);
}

.voucher-upload-status.is-error {
  background: rgba(193, 68, 68, 0.1);
  color: #8b2c2c;
}

.voucher-upload-or {
  display: grid;
  gap: 4px;
}

.voucher-upload-or > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-shell.theme-dark .voucher-upload-zone,
.admin-shell.theme-dark .voucher-upload-zone {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}

.app-shell.theme-dark .voucher-upload-zone:hover,
.app-shell.theme-dark .voucher-upload-zone:focus-visible,
.admin-shell.theme-dark .voucher-upload-zone:hover,
.admin-shell.theme-dark .voucher-upload-zone:focus-visible {
  background: rgba(101, 196, 166, 0.08);
}

.app-shell.theme-dark .voucher-upload-remove,
.admin-shell.theme-dark .voucher-upload-remove {
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
}

.app-shell.theme-dark .voucher-upload-status.is-error,
.admin-shell.theme-dark .voucher-upload-status.is-error {
  color: #ff8b7a;
  background: rgba(255, 139, 122, 0.1);
}

/* "Continue to {site}" button on the order success page, shown only
 * when the product has a returnUrl set. Mirrors the primary CTA style
 * so the buyer perceives it as the natural next step. */
.pub-success-return-wrap {
  margin: 18px 0 4px;
}

.pub-success-return-wrap[hidden] {
  display: none !important;
}

.pub-success-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 10px;
  background: #147e65;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: background 120ms ease;
  /* Keep "Continue to {host}" on one line instead of wrapping "Continue to"
     onto two lines in a narrow column. */
  white-space: nowrap;
}

.pub-success-return:hover,
.pub-success-return:focus-visible {
  background: #0f6b56;
  outline: 0;
}

.pub-success-return span:last-child {
  font-weight: 700;
  margin-left: 2px;
}

/* "Close this tab" secondary control on the order success page. Added
   2026-07-03: most buyers arrive in a new tab, so closing it returns
   them to the site they came from. */
.pub-success-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 6px;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid rgba(20, 126, 101, 0.4);
  background: transparent;
  color: #147e65;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.pub-success-close:hover,
.pub-success-close:focus-visible {
  background: rgba(20, 126, 101, 0.08);
  border-color: rgba(20, 126, 101, 0.7);
  outline: 0;
}

.pub-success-close-note {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

/* Booking confirmation: "you can close this tab" helper note. */
.confirmation-close-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Plain SSR Terms of Use page. Reuses the public-checkout-card shell. */
.pub-terms .pub-terms-card {
  padding: 32px 28px;
}

.pub-terms-card h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.pub-terms-meta {
  margin: 0 0 22px;
  color: #6a7773;
  font-size: 13px;
}

.pub-terms-card h2 {
  margin: 22px 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #147e65;
}

.pub-terms-card p {
  margin: 0 0 12px;
  line-height: 1.6;
  color: #3a4a45;
  font-size: 14px;
}

.pub-terms-card a {
  color: #147e65;
  font-weight: 700;
}

.pub-terms-foot {
  margin-top: 28px !important;
  padding-top: 18px;
  border-top: 1px solid #e3eae7;
}

/* Refund order modal */
.refund-order-card {
  max-width: 440px;
}

.refund-order-summary {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.refund-order-form {
  display: grid;
  gap: 12px;
}

.refund-order-form label {
  display: grid;
  gap: 4px;
}

.refund-order-form label > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.refund-order-form input[type="number"],
.refund-order-form select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  box-sizing: border-box;
}

.refund-order-form input[type="number"]:focus,
.refund-order-form select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.refund-order-form small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.refund-order-warn {
  margin: 0;
  padding: 9px 11px;
  background: rgba(193, 68, 68, 0.08);
  color: #8b2c2c;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.refund-order-warn[hidden] {
  display: none !important;
}

.app-shell.theme-dark .refund-order-form input[type="number"],
.app-shell.theme-dark .refund-order-form select,
.admin-shell.theme-dark .refund-order-form input[type="number"],
.admin-shell.theme-dark .refund-order-form select {
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.app-shell.theme-dark .refund-order-warn,
.admin-shell.theme-dark .refund-order-warn {
  color: #ff8b7a;
  background: rgba(255, 139, 122, 0.1);
}

/* Product thumbnail upload zone, smaller / squarer than the voucher
 * banner one, since the thumbnail is shown as a small square on the
 * card and inside Stripe Checkout. */
.thumb-upload-zone {
  min-height: 120px;
}

.thumb-upload-zone .voucher-upload-preview {
  max-height: 160px;
}

/* Service photo upload zone in the Service slide-over. Slightly
   wider than the logo zone since the photo can be a real result
   shot (4:3 or 1:1), not a logo. Preview keeps aspect via
   object-fit: cover so a horizontal photo doesn't squish. */
.service-image-upload-zone {
  min-height: 140px;
  max-width: 420px;
}

.service-image-upload-zone .voucher-upload-preview {
  max-height: 180px;
  object-fit: cover;
}

/* Logo upload zone in Settings: shorter than the voucher banner
   zone. Logo is shown small in the public hero, so the preview can
   be modest. White-ish background so a logo with light edges has a
   visible frame in the preview. */
.logo-upload-zone {
  min-height: 110px;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.5);
}

.logo-upload-zone .voucher-upload-preview {
  max-height: 96px;
  object-fit: contain;
}

/* Photo gallery editor (Settings). Grid of thumbnails with a
   floating Remove (x) button on each, plus an "Add photo" button
   below. Add button greys out when the 6-photo cap is reached. */
.gallery-field {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.gallery-grid:empty {
  display: none;
}

.gallery-grid-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border);
}

.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-grid-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 120ms ease, transform 80ms ease;
}

.gallery-grid-remove:hover {
  background: rgb(185, 28, 28);
}

.gallery-grid-remove:active {
  transform: scale(0.94);
}

.gallery-add-button {
  align-self: flex-start;
  justify-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gallery-add-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Public booking page gallery. Hidden when no photos. Three-up grid
   on desktop, horizontal scroll on mobile so the page does not get
   pushed too far down before the customer reaches the booking flow. */
.public-gallery {
  margin: 14px 0 18px;
  display: grid;
  gap: 10px;
}

.public-gallery.hidden { display: none; }

.public-gallery[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}

.public-gallery[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-gallery[data-count="3"],
.public-gallery[data-count="4"],
.public-gallery[data-count="5"],
.public-gallery[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.05);
  cursor: zoom-in;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.public-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.25);
}

.public-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .public-gallery[data-count] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-inline: -4px;
    padding-inline: 4px;
  }
  .public-gallery-item {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
  }
}

/* ===========================================================================
 * Public booking page: gift vouchers + digital products discovery.
 * Rendered by renderPublicVouchers() under the booking flow. Mirrors
 * the service-option visual language (hue accent stripe, dot/thumb,
 * name + short description, price) so it reads as part of the same
 * page rather than a bolted-on shop. Product hue: gold (45) for
 * vouchers, blue (220) for digital, set inline via --service-hue.
 * =========================================================================*/
.public-vouchers {
  margin: 26px 0 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.public-vouchers.hidden { display: none; }

.public-voucher-head {
  margin-bottom: 14px;
}

.public-voucher-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.public-voucher-head p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.45;
}

.public-voucher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.public-voucher-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdfc;
  text-decoration: none;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* Hue accent stripe down the left edge, same device as booking rows
   and service options. */
.public-voucher-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: hsl(var(--service-hue, 45) 70% 52%);
}

.public-voucher-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--service-hue, 45) 60% 55%);
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.3);
}

.public-voucher-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 45) 65% 50%);
  margin-left: 4px;
}

.public-voucher-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.05);
  display: block;
  margin-left: 2px;
}

.public-voucher-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-voucher-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.public-voucher-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: hsl(var(--service-hue, 45) 45% 42%);
}

.public-voucher-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.public-voucher-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.public-voucher-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.public-voucher-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.public-voucher-cta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  border-radius: 999px;
  background: hsl(var(--service-hue, 45) 60% 94%);
  color: hsl(var(--service-hue, 45) 50% 32%);
  border: 1px solid hsl(var(--service-hue, 45) 55% 82%);
}

.public-voucher-card:hover .public-voucher-cta {
  background: hsl(var(--service-hue, 45) 65% 50%);
  color: #fff;
  border-color: hsl(var(--service-hue, 45) 65% 50%);
}

/* Dark mode: match the public-view service-option treatment. */
.app-shell.theme-dark #public-view .public-voucher-card,
.admin-shell.theme-dark #public-view .public-voucher-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark #public-view .public-voucher-name,
.admin-shell.theme-dark #public-view .public-voucher-name,
.app-shell.theme-dark #public-view .public-voucher-price,
.admin-shell.theme-dark #public-view .public-voucher-price { color: #e6f4ee; }

.app-shell.theme-dark #public-view .public-voucher-cta,
.admin-shell.theme-dark #public-view .public-voucher-cta {
  background: hsl(var(--service-hue, 45) 40% 16%);
  color: hsl(var(--service-hue, 45) 70% 78%);
  border-color: hsl(var(--service-hue, 45) 40% 30%);
}

@media (max-width: 760px) {
  .public-voucher-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
 * Inline expanded booking panel (replaces the legacy Customer Drawer).
 * Lives inside .booking-row.expanded, .schedule-row.expanded, and
 * .day-timeline-block.expanded. Same markup, different container.
 * =========================================================================*/

.booking-expanded-panel {
  /* One calm zone, no nested boxes. Meta strip + booking note used to
   * each carry their own tinted card chrome (background + border +
   * padding), stacked inside the panel which itself had a faint
   * gradient. Three frames inside the row card = visual noise. Dropped
   * 2026-05-27. Panel now is just spacing + a hairline border-top to
   * mark the seam between the row summary and the panel content;
   * sections inside are separated by spacing alone (or a single
   * hairline between meta and note). */
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  grid-column: 1 / -1;
  padding: 16px 18px 18px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  background: transparent;
  border-radius: 0 0 12px 12px;
  cursor: default;
  text-align: left;
}

/* Inner divs of the panel must NOT inherit the legacy tinted-card style
 * from .booking-card-details > div. Reset everything except `gap`:
 * each sub-section (.booking-expanded-meta, .booking-expanded-note-block)
 * declares its OWN gap value, and a `gap: 0` here would override those
 * with higher specificity than the section's plain class selector. */
.booking-expanded-panel > div,
.booking-expanded-panel > form {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: block;
  margin: 0;
}

/* Kebab actions button in the row summary -------------------------------
 * Sits as the right-most column of the schedule row (and as the top-right
 * corner of the day timeline block). Click opens the booking actions
 * menu via the shared .resolve-menu infrastructure. The expanded panel
 * below the row no longer carries any action buttons; this kebab is the
 * single point of entry. */

.row-actions-wrapper {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
}

.row-kebab {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}

.row-kebab:hover,
.row-kebab[aria-expanded="true"] {
  background: rgba(20, 126, 101, 0.08);
  border-color: rgba(20, 126, 101, 0.32);
  color: var(--accent-dark, currentColor);
}

.row-kebab svg {
  display: block;
}

/* Kebab inside a day timeline block: top-right corner, smaller, no
 * border so it does not visually compete with the block edge.
 * Deliberately NO z-index here. z-index on the wrapper would create
 * a new stacking context, which would trap the resolve menu's
 * position:fixed render within the wrapper's local z-index range
 * instead of letting it sit at the document level with z-index 1000.
 * The kebab's absolute positioning is enough to render above the
 * sibling content inside .day-timeline-block-top without needing
 * an explicit z-index. */
.day-timeline-block .row-actions-wrapper {
  position: absolute;
  top: 6px;
  right: 6px;
  -webkit-user-drag: none;
  user-drag: none;
}

.day-timeline-block .row-kebab {
  width: 28px;
  height: 28px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: auto;
  -webkit-user-drag: none;
  user-drag: none;
}

.day-timeline-block .row-actions-wrapper *,
.day-timeline-block .row-kebab * {
  -webkit-user-drag: none;
  user-drag: none;
}

.day-timeline-block .row-kebab:hover,
.day-timeline-block .row-kebab[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(20, 126, 101, 0.32);
}

.day-timeline-block.is-compact .row-actions-wrapper {
  /* Very short blocks (under ~40 min) get cramped; hide the kebab
   * there and let the owner click the block to expand, then act from
   * the kebab in the expanded version (which has room). */
  display: none;
}

.day-timeline-block.expanded .row-actions-wrapper {
  display: inline-flex;
}

.app-shell.theme-dark .day-timeline-block .row-kebab,
.admin-shell.theme-dark .day-timeline-block .row-kebab {
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
}

.app-shell.theme-dark .day-timeline-block .row-kebab:hover,
.admin-shell.theme-dark .day-timeline-block .row-kebab:hover,
.app-shell.theme-dark .day-timeline-block .row-kebab[aria-expanded="true"],
.admin-shell.theme-dark .day-timeline-block .row-kebab[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(102, 209, 173, 0.32);
}

/* Meta strip (payment / date / contact) ---------------------------------- */

.booking-expanded-panel .booking-expanded-meta {
  /* Plain vertical stack of rows. No background, no border. The card
   * chrome was dropped 2026-05-27 to remove the frame-in-frame
   * stacking inside the row. Padding stays at 0 so labels line up
   * with the panel's left edge. */
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
}

.booking-expanded-panel .booking-expanded-note-block {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  /* Thin hairline above the note block to separate it visually from
   * the meta strip without resurrecting the "card inside a card"
   * problem. Padding-top keeps the eyebrow off the line. */
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Read-only customer booking note: muted background frame so the
   owner reads it as "given to me by the client" rather than an
   editable text. Empty state uses a muted italic placeholder. */
.booking-customer-note-readonly {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.booking-customer-note-readonly em {
  color: var(--muted);
  font-style: italic;
}

/* Private note section sits under the customer note. A bit of top
   margin separates it visually so the owner reads them as two
   distinct zones (theirs vs the customer's). */
.booking-expanded-note-head-private {
  margin-top: 6px;
}

.booking-expanded-meta-row {
  display: grid !important;
  grid-template-columns: 96px 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
}

.booking-expanded-meta-row > span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.booking-expanded-meta-row > strong {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.booking-expanded-meta-row > strong em {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
  margin-left: 6px;
}

.booking-expanded-meta-row .booking-cancellation-hint {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--muted);
}

.booking-expanded-meta-row .customer-edit-toggle {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  font-size: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.booking-expanded-meta-row .customer-edit-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}

.booking-expanded-no-contact {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

.booking-expanded-meta .customer-edit-form {
  display: grid;
  /* 3-col grid (Name | Email | Phone) so Phone does not leave an awkward
   * half-empty row. Drops to 1-col on mobile via the media query at the
   * bottom of this file. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
}

.booking-expanded-meta .customer-edit-form.hidden {
  display: none !important;
}

.booking-expanded-meta .customer-edit-form .customer-edit-apply-all,
.booking-expanded-meta .customer-edit-form .customer-edit-actions {
  grid-column: 1 / -1;
}

/* Smaller buttons inside the edit form: the default .primary-button +
 * .ghost-button inherit min-height: 42px from the global app stack,
 * which dwarfs the surrounding inputs. Scale them down to match the
 * panel's typography. */
.booking-expanded-meta .customer-edit-actions .primary-button,
.booking-expanded-meta .customer-edit-actions .ghost-button {
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}

/* Note blocks (per-booking + CRM private notes) -------------------------- */

.booking-expanded-note-block {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

.booking-expanded-note-head {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 2px;
}

.booking-expanded-note-head .eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.booking-expanded-note-head .customer-crm-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.booking-expanded-panel .customer-crm-form {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
}

.booking-expanded-panel .customer-crm-field textarea,
.booking-expanded-panel .customer-crm-field input {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel, #fff);
  color: var(--text);
}

.booking-expanded-panel .customer-crm-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Schedule list expanded row -------------------------------------------- */

.schedule-row.expanded {
  background: rgba(0, 0, 0, 0.025);
  border-radius: 12px;
}

.schedule-row .schedule-row-summary {
  display: contents;
}

/* Day timeline expanded block ------------------------------------------- */

.day-timeline-block.expanded {
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.day-timeline-block.expanded .booking-expanded-panel {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Dark mode tweaks ------------------------------------------------------ */

.app-shell.theme-dark .booking-expanded-panel,
.admin-shell.theme-dark .booking-expanded-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* .booking-expanded-meta intentionally has no chrome (transparent
   background, no border) in both light AND dark mode - the card was
   dropped on 2026-05-27 to remove the frame-in-frame stacking inside
   the row. The previous dark override re-introduced exactly that
   frame, so it is removed here. */

.app-shell.theme-dark .booking-expanded-actions-danger,
.admin-shell.theme-dark .booking-expanded-actions-danger {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.app-shell.theme-dark .booking-expanded-actions-danger .ghost-button.is-danger,
.admin-shell.theme-dark .booking-expanded-actions-danger .ghost-button.is-danger {
  color: #f59488;
  border-color: rgba(245, 148, 136, 0.32);
}

.app-shell.theme-dark .booking-expanded-actions-danger .ghost-button.is-danger:hover,
.admin-shell.theme-dark .booking-expanded-actions-danger .ghost-button.is-danger:hover {
  background: rgba(245, 148, 136, 0.1);
  border-color: rgba(245, 148, 136, 0.55);
}

.app-shell.theme-dark .booking-expanded-meta-row .customer-edit-toggle,
.admin-shell.theme-dark .booking-expanded-meta-row .customer-edit-toggle {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.app-shell.theme-dark .booking-expanded-meta-row .customer-edit-toggle:hover,
.admin-shell.theme-dark .booking-expanded-meta-row .customer-edit-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .booking-expanded-panel .customer-crm-field textarea,
.app-shell.theme-dark .booking-expanded-panel .customer-crm-field input,
.admin-shell.theme-dark .booking-expanded-panel .customer-crm-field textarea,
.admin-shell.theme-dark .booking-expanded-panel .customer-crm-field input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.app-shell.theme-dark .schedule-row.expanded,
.admin-shell.theme-dark .schedule-row.expanded {
  background: rgba(255, 255, 255, 0.04);
}

.app-shell.theme-dark .day-timeline-block.expanded .booking-expanded-panel,
.admin-shell.theme-dark .day-timeline-block.expanded .booking-expanded-panel {
  background: rgba(0, 0, 0, 0.25);
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Mobile tweaks --------------------------------------------------------- */

@media (max-width: 600px) {
  .booking-expanded-meta-row {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  /* The cancellation hint declares grid-column: 2 / -1 for the desktop
     3-column grid. On the mobile single-column grid that "2" forces an
     implicit 2nd column to exist, so the label <span> and value <strong>
     land side by side in one row ("PAYMENT£25 paid") instead of stacking.
     Reset it to span the single column so the PAYMENT row stacks like the
     others. */
  .booking-expanded-meta-row .booking-cancellation-hint {
    grid-column: 1 / -1;
  }

  .booking-expanded-meta-row .customer-edit-toggle {
    grid-column: 1;
    justify-self: start;
    margin-top: 4px;
  }

  .booking-expanded-meta .customer-edit-form {
    grid-template-columns: 1fr;
  }

  .booking-expanded-actions-primary .primary-button,
  .booking-expanded-actions-primary .ghost-button,
  .booking-expanded-actions-secondary .ghost-button,
  .booking-expanded-actions-danger .ghost-button {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   HOME: SEE IT IN ACTION (product tour with real screenshots)
   Added 2026-07-02. Light + dark home theme supported.
   ============================================================ */
.tour-row {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 40px 0;
}

.tour-row + .tour-row {
  border-top: 1px dashed var(--line);
}

.tour-row-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}

.tour-row-flip .tour-copy { order: 2; }
.tour-row-flip .shot-frame { order: 1; }

.tour-copy h3 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tour-copy > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.tour-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.tour-points li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
}

.tour-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(13, 79, 65, 0.4);
}

.shot-frame {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(10, 40, 32, 0.16);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d3ddd9;
}

.shot-bar span {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dark home theme */
.home-page.theme-dark .tour-row + .tour-row {
  border-top-color: rgba(255, 255, 255, 0.09);
}

.home-page.theme-dark .tour-copy h3 {
  color: #f2f7f5;
}

.home-page.theme-dark .tour-copy > p {
  color: rgba(226, 238, 234, 0.72);
}

.home-page.theme-dark .tour-points li {
  color: rgba(226, 238, 234, 0.88);
}

.home-page.theme-dark .tour-points li::before {
  background: rgba(102, 209, 173, 0.16);
  border-color: rgba(102, 209, 173, 0.5);
}

.home-page.theme-dark .shot-frame {
  background: #0d1a16;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

.home-page.theme-dark .shot-bar {
  background: #0f211c;
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.home-page.theme-dark .shot-bar i {
  background: #24423a;
}

.home-page.theme-dark .shot-bar span {
  background: #0d1a16;
  border-color: rgba(255, 255, 255, 0.12);
  color: #7da296;
}

@media (max-width: 940px) {
  .tour-row,
  .tour-row-flip {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 0;
  }

  .tour-row-flip .tour-copy { order: 1; }
  .tour-row-flip .shot-frame { order: 2; }
}


/* ============================================================
   HOME hero: real screenshot in a browser frame (replaces the
   old CSS mockup stack). Added 2026-07-02.
   ============================================================ */
.hero-shot-wrap {
  position: relative;
  width: min(100%, 620px);
}

.hero-shot-wrap .deposit-callout {
  top: auto;
  bottom: 30px;
  left: -30px;
}


/* HOME hero phone frame (mobile booking page shot). Added 2026-07-02. */
.hero-phone {
  margin: 0;
  width: min(100%, 300px);
  border-radius: 42px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
  box-shadow: 0 32px 80px rgba(10, 40, 32, 0.28);
}

.hero-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
}

.hero-shot-wrap:has(.hero-phone) {
  width: auto;
}

.hero-phone {
  position: relative;
}

.hero-product:has(.hero-phone) {
  place-items: center end;
}

.hero-phone .deposit-callout {
  top: 58%;
  bottom: auto;
  left: -76px;
  right: auto;
}

.home-page.theme-dark .hero-phone {
  background: #0d1a16;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.6);
}

@media (max-width: 940px) {
  /* The phone shot already shows the DUE TODAY GBP20 bar; the floating
     chip rendered as a detached strip under the phone on mobile. */
  .hero-phone .deposit-callout {
    display: none;
  }
}


/* ============================================================
   HOME payments band: calm two-route layout (replaces the
   payment-map / payment-story tile grid). Added 2026-07-02.
   ============================================================ */
.payment-routes {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.payment-routes article {
  display: grid;
  gap: 10px;
  align-content: start;
  border-left: 3px solid var(--accent);
  padding-left: 22px;
}

.route-chip {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.payment-routes strong {
  font-size: 24px;
  line-height: 1.15;
  color: var(--text);
}

.payment-routes p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.payment-routes small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.payment-note {
  max-width: 1180px;
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 15px;
}

.home-page.theme-dark .payment-routes article {
  border-left-color: rgba(102, 209, 173, 0.55);
}

.home-page.theme-dark .payment-routes strong {
  color: #f2f7f5;
}

.home-page.theme-dark .payment-routes p,
.home-page.theme-dark .payment-routes small,
.home-page.theme-dark .payment-note {
  color: rgba(226, 238, 234, 0.72);
}

.home-page.theme-dark .route-chip {
  background: rgba(102, 209, 173, 0.16);
  color: #8fd9bd;
}

.home-page.theme-dark .payment-note {
  border-top-color: rgba(255, 255, 255, 0.09);
}

@media (max-width: 940px) {
  .payment-routes {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* HOME pricing band: quiet one-line roadmap note (replaces the
   coming-card tile). Added 2026-07-02. */
.coming-note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.coming-note strong {
  margin-right: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-page.theme-dark .coming-note {
  color: rgba(226, 238, 234, 0.66);
  border-top-color: rgba(255, 255, 255, 0.09);
}

.home-page.theme-dark .coming-note strong {
  color: #8fd9bd;
}

/* ============================================================
   HOME motion polish. Added 2026-07-02.
   - hero entrance (copy cascade + phone rise + floating chip)
   - scroll-reveal (.reveal added by setupHomeReveal in app.js)
   - hover lift on screenshot frames
   All gated behind prefers-reduced-motion: no-preference.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes homeRise {
    from {
      opacity: 0;
      transform: translateY(22px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .home-page.active .hero-copy > * {
    animation: homeRise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .home-page.active .hero-copy > *:nth-child(2) { animation-delay: 0.07s; }
  .home-page.active .hero-copy > *:nth-child(3) { animation-delay: 0.14s; }
  .home-page.active .hero-copy > *:nth-child(4) { animation-delay: 0.21s; }
  .home-page.active .hero-copy > *:nth-child(5) { animation-delay: 0.28s; }
  .home-page.active .hero-copy > *:nth-child(6) { animation-delay: 0.35s; }

  .home-page.active .hero-phone {
    animation: homeRise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s both;
  }

  .hero-phone .deposit-callout {
    animation: softFloat 7s ease-in-out 1.8s infinite;
  }

  .home-page .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.65s ease,
      transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .home-page .reveal.revealed {
    opacity: 1;
    transform: none;
  }

  .shot-frame {
    transition:
      transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
      box-shadow 0.35s ease;
  }

  .tour-row .shot-frame:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 80px rgba(10, 40, 32, 0.22);
  }

  .home-page.theme-dark .tour-row .shot-frame:hover {
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.65);
  }
}

/* ============================================================
   HOME "Who it is for": quiet editorial columns instead of the
   fourth row of tiles. Added 2026-07-02.
   ============================================================ */
.audience-strip {
  gap: 36px;
  margin-top: 44px;
}

.audience-strip article,
.home-page.theme-dark .audience-strip article {
  min-height: 0;
  padding: 18px 0 4px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.audience-strip article::before,
.home-page.theme-dark .audience-strip article::before {
  top: -1px;
  bottom: auto;
  left: 0;
  right: auto;
  width: 46px;
  height: 2px;
  border-radius: 0;
  background: var(--accent);
  transform: none;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.audience-strip article:hover,
.home-page.theme-dark .audience-strip article:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}

.audience-strip article:hover::before {
  width: 100%;
}

.home-page.theme-dark .audience-strip article,
.home-page.theme-dark .audience-strip article:hover {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.home-page.theme-dark .audience-strip article::before {
  background: rgba(102, 209, 173, 0.75);
}

@media (max-width: 940px) {
  .audience-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
   HOME FAQ: editorial list (replaces the tile grid whose fixed
   58px divider sliced through wrapped question titles on mobile).
   Added 2026-07-02.
   ============================================================ */
.faq-grid {
  gap: 36px 48px;
}

.faq-grid article,
.home-page.theme-dark .faq-grid article {
  min-height: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 10px;
}

.faq-grid article:hover,
.home-page.theme-dark .faq-grid article:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}

.home-page.theme-dark .faq-grid article,
.home-page.theme-dark .faq-grid article:hover {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.faq-grid article::before,
.home-page.theme-dark .faq-grid article::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  border: 0;
  background: var(--accent);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.faq-grid article:hover::before {
  width: 100%;
}

.home-page.theme-dark .faq-grid article::before {
  background: rgba(102, 209, 173, 0.75);
}

.faq-grid article::after,
.home-page.theme-dark .faq-grid article::after {
  content: none;
}

.faq-number,
.home-page.theme-dark .faq-number,
.home-page.theme-dark .faq-grid article:nth-child(2n) .faq-number {
  position: static;
  width: auto;
  height: auto;
  display: block;
  place-items: unset;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.faq-number::before,
.faq-number::after {
  content: none;
}

.home-page.theme-dark .faq-number,
.home-page.theme-dark .faq-grid article:nth-child(2n) .faq-number {
  color: #8fd9bd;
}

@media (max-width: 940px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* FAQ band: plain light background in light theme. The old split
   dark/light gradient was built for the removed tile grid; the
   editorial list's first row straddled the boundary and dark titles
   vanished on the dark upper region. Dark theme keeps its own
   .theme-dark .faq-band override. Added 2026-07-02. */
.faq-band {
  background: linear-gradient(180deg, #ffffff 0%, #f2f7f5 100%);
  color: var(--text);
}

.faq-band .section-heading h2 {
  color: var(--text);
}

.faq-band .section-heading p:not(.eyebrow) {
  color: var(--muted);
}

/* ============================================================
   Public booking page: clearer selected state + expandable
   treatment details. Added 2026-07-03.
   ============================================================ */
.service-option {
  cursor: pointer;
}

.service-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.service-option.active {
  padding: 12px;
  border: 3px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(20, 113, 93, 0.14);
}

.service-option-more {
  justify-self: start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-option-more:hover {
  color: var(--accent);
}

.service-option-details {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.app-shell.theme-dark #public-view .service-option-more,
body.public-route .app-shell.theme-dark .service-option-more {
  color: #8fd9bd;
}

.app-shell.theme-dark #public-view .service-option-details,
body.public-route .app-shell.theme-dark .service-option-details {
  color: #b8cac4;
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* The expanded treatment details must wrap freely; the narrow-width
   nowrap/ellipsis guard above applies only to the one-line rows. */
#public-view .service-option-main span.service-option-details {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


/* Availability: optional daily break inputs. Added 2026-07-03. */
.hours-break-inputs {
  margin-top: 6px;
  opacity: 0.92;
}

.hours-break-label {
  min-width: 44px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.editable-hours-row.is-closed .hours-break-inputs {
  opacity: 0.45;
}

/* Disabled admin action buttons must look disabled. Without this a
   gated "Cancel now + block" / "Refund + cancel + block" still rendered
   in full danger-red for a business with no Stripe subscription, so it
   looked clickable even though the disabled attribute blocked it.
   Added 2026-07-03. */
.small-button:disabled,
.danger-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.danger-button:disabled:hover,
.small-button:disabled:hover {
  filter: none;
  transform: none;
}