/* ==========================================================================
   SolidW — Dashboard (business owner)
   ========================================================================== */

/* ==========================================================================
   TODAY — command-center dashboard home
   Editorial workspace, not a SaaS card grid. Timeline is the hero; the
   right rail is one continuous editorial column split by hairlines,
   never three separate boxed cards.
   ========================================================================== */

/* ---- neutral "premium 2030s" surface tokens, scoped to this page ----
   The app's shared tokens lean slightly lavender/periwinkle; this command
   center reference is a true warm neutral gray/black, so it gets its own
   small local palette rather than shifting colors app-wide. */
.today {
  max-width: 640px;
  margin: 0 auto;
  --today-bg-soft: #F0EEEC;
  --today-card: #FFFFFF;
  --today-border: rgba(23, 22, 30, 0.08);
  --today-ink: #17161E;
  --today-ink-muted: #8B8A93;
  --today-ring-track: rgba(23, 22, 30, 0.09);
}

/* ---- chosen-business switcher (only when 2+ businesses) ----
   Small "Chosen business: X" line with a tiny arrow; tap opens a compact
   list to switch. The arrow's size is also set inline in the HTML as a
   fail-safe, so this rule is a second line of defense, not the only one. */
.today-biz-chosen {
  position: relative;
  display: inline-block;
  margin: var(--space-3) 0 0;
}
.today-biz-chosen-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--today-ink-muted);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  max-width: 100%;
}
.today-biz-chosen-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-biz-chosen-label strong { color: var(--today-ink); font-weight: var(--fw-semibold); }
.today-biz-chosen-arrow,
.today-biz-chosen-arrow.today-biz-chosen-arrow {
  width: 10px !important;
  height: 10px !important;
  max-width: 10px;
  max-height: 10px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.today-biz-chosen-btn:hover .today-biz-chosen-label strong { color: var(--today-ink); }
.today-biz-chosen-btn[aria-expanded="true"] .today-biz-chosen-arrow { transform: rotate(180deg); }
.today-biz-chosen-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  max-width: calc(100vw - 32px);
  background: var(--today-card);
  border: 1px solid var(--today-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(23, 22, 30, 0.14);
  z-index: 50;
  overflow: hidden;
  padding: 4px;
}
.today-biz-chosen-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--today-ink-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.today-biz-chosen-option:hover { background: var(--today-bg-soft); color: var(--today-ink); }
.today-biz-chosen-option.is-active { color: var(--today-ink); font-weight: var(--fw-semibold); background: var(--today-bg-soft); }

/* ==========================================================================
   Top bar — hamburger · greeting · notification bell
   ========================================================================== */
.today-topbar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.today-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--today-bg-soft);
  border: none;
  color: var(--today-ink);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.today-icon-btn svg { width: 19px; height: 19px; }
.today-icon-btn:hover { background: #E7E4E1; }
.today-icon-btn:active { transform: scale(0.94); }

/* ---- notification bell: badge + dropdown ---- */
.today-bell-wrap { position: relative; flex-shrink: 0; }
.today-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #FF3B30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  border: none;
  box-shadow: none;
  z-index: 2;
}
.today-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--today-card);
  border: 1px solid var(--today-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(23, 22, 30, 0.14);
  z-index: 50;
  overflow: hidden;
}
.today-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--today-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--today-ink);
}
.today-notif-mark-all {
  background: none;
  border: none;
  color: var(--today-ink-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 0;
}
.today-notif-mark-all:hover { color: var(--today-ink); }
.today-notif-list { max-height: 360px; overflow-y: auto; }
.today-notif-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--today-ink-muted);
  font-size: var(--fs-sm);
}
.today-notif-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--today-border);
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.today-notif-item:last-child { border-bottom: none; }
.today-notif-item:hover { background: var(--today-bg-soft); }
.today-notif-item.is-unread { background: rgba(23, 22, 30, 0.03); }
.today-notif-item-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.today-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E5484D;
  margin-top: 6px;
  flex-shrink: 0;
  visibility: hidden;
}
.today-notif-item.is-unread .today-notif-dot { visibility: visible; }
.today-notif-text { font-size: var(--fs-sm); color: var(--today-ink); line-height: 1.4; }
.today-notif-time { font-size: 11px; color: var(--today-ink-muted); margin-top: 2px; display: block; }

.today-greeting-block { flex: 1; min-width: 0; padding-top: 2px; }
.today-greeting {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--today-ink);
  margin: 0;
  line-height: 1.25;
}
.today-subtitle {
  font-size: var(--fs-sm);
  color: var(--today-ink-muted);
  margin: 2px 0 0;
}

/* ---- date row ----
   A single restrained line of text sitting under the header: a quiet,
   editorial detail rather than a calendar widget. No icons, no fills,
   no borders — just type, spacing, and a hairline to separate fields. */
.today-date-row {
  display: flex;
  align-items: baseline;
  margin: 0 0 var(--space-5);
}
.today-date-part {
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  color: var(--today-ink-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.today-date-day {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--today-ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.today-date-sep {
  width: 1px;
  height: 11px;
  background: var(--today-border);
  flex-shrink: 0;
  align-self: center;
  margin: 0 var(--space-3);
}

/* ---- appointment count + plan line ---- */
.today-count {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--today-ink);
  margin: 0;
  line-height: var(--lh-tight);
}

.today-plan-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--today-ink-muted);
  margin: var(--space-3) 0 var(--space-6);
  text-decoration: none;
}
.today-plan-badge.today-plan-badge {
  background-color: #E4E1DD;
  color: var(--today-ink);
  border-color: transparent;
  font-weight: var(--fw-semibold);
}
.today-plan-text { color: var(--today-ink-muted); }
.today-plan-arrow { width: 14px; height: 14px; color: var(--today-ink-muted); transition: transform var(--transition-fast); }
.today-plan-line:hover .today-plan-arrow { transform: translateX(2px); }
.today-plan-line:hover .today-plan-text { color: var(--today-ink); }

/* ---- shared eyebrow label used inside the Pulse + Booking Page cards ---- */
.today-eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--today-ink-muted);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Today's schedule — hero card
   ========================================================================== */
.today-schedule-card {
  background: var(--today-card);
  border: 1px solid var(--today-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft-sm);
  margin-bottom: var(--space-4);
}
.today-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.today-schedule-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--today-ink);
}
.today-schedule-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--today-ink-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.today-schedule-more svg { width: 13px; height: 13px; }
.today-schedule-more:hover { color: var(--today-ink); }

.today-timeline { display: flex; flex-direction: column; }

.tl-row {
  display: grid;
  grid-template-columns: 50px 1px 34px 1fr 8px auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--today-border);
  transition: background-color var(--transition-fast);
}
.today-timeline .tl-row:first-child { border-top: none; padding-top: var(--space-3); }

.tl-time {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--today-ink);
  font-variant-numeric: tabular-nums;
}

.tl-divider {
  width: 1px;
  height: 34px;
  background: var(--today-border);
  justify-self: center;
}

.tl-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--today-bg-soft);
  color: var(--today-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* min-width: 0 lets this grid cell shrink below its content's natural
   width, which is what allows the ellipsis truncation below to kick in
   instead of the row overflowing/breaking the layout. */
.tl-main { min-width: 0; }

.tl-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--today-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-meta {
  font-size: var(--fs-xs);
  color: var(--today-ink-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--today-border);
  background: var(--today-card);
  color: var(--today-ink-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tl-action-btn svg { width: 15px; height: 15px; }
.tl-action-btn:hover { color: var(--today-ink); border-color: rgba(23, 22, 30, 0.2); }

/* ---- empty state: zero appointments today ---- */
.tl-empty {
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.tl-empty-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--today-ink);
  margin: 0 0 var(--space-2);
}
.tl-empty-text {
  font-size: var(--fs-sm);
  color: var(--today-ink-muted);
  margin: 0 0 var(--space-4);
}
.tl-empty-link {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--today-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--today-border);
}
.tl-empty-link:hover { border-color: var(--today-ink); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; justify-self: center; }
.status-dot--confirmed { background: var(--color-success); }
.status-dot--pending { background: var(--color-warning); }
.status-dot--cancelled { background: var(--color-danger); }
.status-dot--rejected { background: var(--color-danger); }
.status-dot--none { background: transparent; }

.tl-row--open { opacity: 0.55; }
.tl-row--open .tl-name { font-weight: var(--fw-regular); font-style: italic; color: var(--today-ink-muted); }

/* Completed appointments are visually subdued rather than flagged with a dot. */
.tl-row--completed { opacity: 0.55; }

/* ==========================================================================
   Pulse — bookings / revenue / occupancy ring + bar, one neutral card
   ========================================================================== */
.pulse-card {
  background: var(--today-card);
  border: 1px solid var(--today-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft-sm);
  margin-bottom: var(--space-4);
}

.pulse-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.pulse-value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--today-ink);
  line-height: 1.1;
}
.pulse-label {
  font-size: var(--fs-xs);
  color: var(--today-ink-muted);
  margin-top: 2px;
}
.pulse-divider { width: 1px; height: 32px; background: var(--today-border); flex-shrink: 0; }

.pulse-ring-col {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pulse-ring-wrap { position: relative; width: 62px; height: 62px; }
.pulse-ring { width: 62px; height: 62px; transform: rotate(-90deg); }
.pulse-ring-track { fill: none; stroke: var(--today-ring-track); stroke-width: 5; }
.pulse-ring-fill {
  fill: none;
  stroke: var(--today-ink);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-slow);
}
.pulse-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--today-ink);
}
.pulse-ring-caption {
  font-size: 0.6875rem;
  color: var(--today-ink-muted);
}

.pulse-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--today-border);
}
.pulse-progress-track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--today-ring-track);
  overflow: hidden;
}
.pulse-progress-fill {
  height: 100%;
  background: var(--today-ink);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
#occupancyLabel { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--today-ink); white-space: nowrap; }
.pulse-progress-caption { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--today-ink-muted); }

/* ==========================================================================
   Needs Attention — compact status row
   ========================================================================== */
.attention-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--today-card);
  border: 1px solid var(--today-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-soft-sm);
  margin-bottom: var(--space-4);
}
.attention-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--today-bg-soft);
  color: var(--today-ink);
}
.attention-icon svg { width: 18px; height: 18px; }
.attention-card--warn .attention-icon { background: color-mix(in srgb, var(--color-warning) 16%, var(--today-bg-soft)); color: var(--color-warning); }

.attention-body { flex: 1; min-width: 0; }
.attention-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--today-ink);
}
.attention-subtitle {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--today-ink-muted);
}
.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.attention-list li a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--today-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.attention-list li a:hover { text-decoration: underline; }

.attention-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--today-ink-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.attention-arrow svg { width: 16px; height: 16px; }
.attention-card:hover .attention-arrow { color: var(--today-ink); transform: translateX(2px); }

/* ==========================================================================
   Booking Page — link, live status, weekly count, open button
   ========================================================================== */
.booking-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--today-card);
  border: 1px solid var(--today-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft-sm);
  isolation: isolate;
}
/* soft lavender glow sitting just outside the card, for a premium lift */
.booking-card::before {
  content: "";
  position: absolute;
  inset: -28px;
  background: radial-gradient(55% 55% at 28% 15%, rgba(140, 130, 255, 0.16), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}
.booking-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--today-bg-soft);
  color: var(--today-ink);
  align-self: center;
}
.booking-icon svg { width: 14px; height: 14px; }
.booking-body { flex: 1; min-width: 0; }
.booking-body .today-eyebrow { font-size: 0.625rem; margin-bottom: var(--space-2); }
.booking-status-row { margin: 5px 0 5px; }
.booking-link {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--today-ink-muted);
  text-decoration: none;
  word-break: break-all;
}
.booking-link:hover { color: var(--today-ink); }
.booking-stat { margin-top: 3px; font-size: 0.6875rem; color: var(--today-ink-muted); }

.booking-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--today-border);
  background: var(--today-card);
  color: var(--today-ink-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.booking-open-btn svg { width: 14px; height: 14px; }
.booking-open-btn:hover { color: var(--today-ink); border-color: rgba(23, 22, 30, 0.2); }

/* ---- low-key secondary section: businesses + upgrade ---- */
.today-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}
#upgradeBanner h3 { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
#upgradeBanner p { margin: 0 0 var(--space-4); }

/* ---- Upgrade to Pro promo card ---- */
.upgrade-promo-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
}
.upgrade-promo-dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background-image: radial-gradient(var(--color-pastel-lavender) 1.4px, transparent 1.4px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(circle at top right, black 0%, black 35%, transparent 72%);
  mask-image: radial-gradient(circle at top right, black 0%, black 35%, transparent 72%);
  opacity: 0.8;
  pointer-events: none;
}
.upgrade-promo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: #EDE9FE;
  color: #6D4FE0;
  margin-bottom: var(--space-3);
}
.upgrade-promo-icon svg { width: 22px; height: 22px; }
#upgradeBanner .upgrade-promo-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--today-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.upgrade-promo-sparkle { color: var(--color-brand-primary); font-size: 0.9em; }
#upgradeBanner .upgrade-promo-subtitle {
  margin: 0 0 var(--space-2);
  color: var(--today-ink-muted);
  font-size: var(--fs-sm);
}
#upgradeBanner .upgrade-promo-meta {
  margin: 0 0 var(--space-4);
  color: var(--today-ink-muted);
  font-size: var(--fs-xs);
}
.upgrade-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--gradient-pastel-solid);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-soft-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.upgrade-promo-cta svg { width: 15px; height: 15px; }
.upgrade-promo-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft-md); }

/* Our own inline hamburger replaces the app-wide floating one on this page. */
body.dashboard-home .mobile-nav-open-btn { display: none; }

/* ---- mobile ---- */
@media (max-width: 860px) {
  .main-content.today { padding-top: var(--space-5); }

  .today-greeting { font-size: 1.25rem; }
  .today-count { font-size: 1.5rem; }

  .today-date-row { flex-wrap: wrap; row-gap: var(--space-2); }
  .today-date-sep { margin: 0 var(--space-2); }
  .today-date-part { font-size: 0.625rem; letter-spacing: 0.13em; }

  .tl-row { grid-template-columns: 44px 1px 32px 1fr 6px auto; padding: var(--space-3) 0; }

  .today-footer-grid { grid-template-columns: 1fr; margin-top: var(--space-6); }

}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.dashboard-topbar h1 { font-size: var(--fs-xl); }

.plan-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft-sm);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat-card .stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.stat-card .stat-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---- Logo / cover upload ---- */
.upload-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.upload-dropzone:hover, .upload-dropzone.dragover {
  border-color: var(--color-brand-primary);
  background-color: color-mix(in srgb, var(--color-brand-primary) 5%, transparent);
}
.upload-dropzone input[type="file"] { display: none; }

.cover-preview {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  background-color: var(--bg-canvas-alt);
}

.logo-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-soft-sm);
}

/* ---- Header image reposition/zoom editor (cover + logo) ----
   Lets a business drag their uploaded image and zoom it slightly, exactly
   like adjusting a Twitter/X header or profile photo. No cropping tools,
   no filters — just position + zoom, stored as plain numbers. */
.reposition-box {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-3);
  background-color: var(--bg-canvas-alt);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.reposition-box:active { cursor: grabbing; }

.reposition-box--cover {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-md);
}
.reposition-box--logo {
  width: 96px;
  height: 96px;
  overflow: visible;
  background-color: transparent;
}
.reposition-box--logo .reposition-clip {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-soft-sm);
  overflow: hidden;
  background-color: var(--bg-canvas-alt);
}

.reposition-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  pointer-events: none;
}

.reposition-remove-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background-color: color-mix(in srgb, var(--color-ink) 65%, transparent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.reposition-remove-btn svg { width: 14px; height: 14px; }
.reposition-remove-btn:hover { background-color: var(--color-danger); }
.reposition-remove-btn:active { transform: scale(0.92); }

/* The logo box is circular and small — pin its remove button just outside
   the top-right of the circle instead of overlapping the face of it. */
.reposition-box--logo .reposition-remove-btn {
  top: -6px;
  right: -6px;
}

.reposition-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
}
.reposition-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.reposition-zoom-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
.reposition-zoom-row input[type="range"] {
  flex: 1;
}

/* ---- Gallery grid ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-canvas-alt);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.gallery-item-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
}

.gallery-add-tile {
  aspect-ratio: 1;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-2xl);
}
.gallery-add-tile:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

/* ---- Services list ---- */
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.service-row-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.service-row-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.service-row-thumb-placeholder {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  background: var(--gradient-pastel-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.service-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.service-row-info > strong { font-size: var(--fs-sm); }
.service-row-info > .text-muted {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.service-row-price { font-weight: var(--fw-semibold); color: var(--color-secondary); font-size: var(--fs-sm); }
.service-row-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 0.75rem; color: var(--color-text-muted); }
.service-row-meta .badge { font-size: 0.6875rem; padding: 2px 8px; }
.service-row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.service-row-actions .btn { padding: 6px 12px; font-size: 0.8125rem; }

@media (max-width: 560px) {
  .service-row-actions { width: 100%; }
  .service-row-actions .btn { flex: 1; }
}

/* ---- Provider picker (assign providers to a service) ---- */
.provider-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-surface);
}
.provider-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.provider-picker-item:hover { background-color: var(--color-surface-alt); }
.provider-picker-item input[type="checkbox"] { width: auto; flex-shrink: 0; margin: 0; }
.provider-picker-thumb,
.provider-picker-thumb-placeholder {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.provider-picker-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-pastel-solid);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 0.6875rem;
}
.provider-picker-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-name .text-muted { font-size: 0.6875rem; }
.provider-picker-empty {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding: var(--space-2);
}
.provider-picker-empty a { color: var(--color-brand-primary); }

/* ---- Opening hours — stacked day cards, mobile-first ---- */
#hoursContent { padding: var(--space-4); }

#hoursTable {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hours-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.hours-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hours-day-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text);
  width: 88px;
  flex-shrink: 0;
}

.hours-closed-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.hours-closed-toggle input[type="checkbox"] { display: none; width: auto; }
.hours-toggle-track {
  width: 34px; height: 19px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.hours-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.hours-closed-toggle input:checked ~ .hours-toggle-track { background-color: var(--color-danger); }
.hours-closed-toggle input:checked ~ .hours-toggle-track .hours-toggle-thumb { transform: translateX(15px); }
.hours-toggle-text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  min-width: 44px;
}

.hours-times {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

#hoursTable input[type="time"] {
  width: 92px;
  padding: 0.4rem 0.5rem;
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  text-align: center;
}
#hoursTable input[type="time"]:disabled { opacity: 0.4; }
#hoursTable input[type="time"]:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
}
.hours-time-sep { color: var(--color-text-muted); font-size: var(--fs-xs); flex-shrink: 0; }

@media (max-width: 480px) {
  .hours-card { flex-direction: column; align-items: stretch; }
  .hours-card-top { justify-content: space-between; }
  .hours-times { margin-left: 0; justify-content: center; }
}

/* ---- Reservations toolbar + filters ---- */
.admin-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-toolbar-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: end;
}

.admin-filter-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-filter-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.admin-filter-tab:hover { color: var(--color-text); }
.admin-filter-tab.active {
  background: var(--color-brand-navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-soft-sm);
}

@media (max-width: 640px) {
  .admin-toolbar-controls {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .admin-toolbar .form-group { max-width: none !important; }

  .admin-filter-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
  }
}

/* ---- Reservations list — compact premium redesign ----
   Apple / Linear / Notion-style card: white surface, hairline border,
   soft shadow, generous radius, no colored left border, no avatar
   decoration. Built mobile-first; refines upward at 480px. */

.rcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft-xs);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
  max-width: 420px;
  width: 100%;
}
.rcard:hover {
  box-shadow: var(--shadow-soft-sm);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

@media (min-width: 480px) {
  .rcard { padding: 12px 14px; border-radius: 16px; gap: 8px; }
}

/* Header: name + status */
.rcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.rcard-name {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rcard-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-transform: capitalize;
  line-height: 1.5;
  border: 1px solid transparent;
}
.rcard-status::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.rcard-status--pending {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, white);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.rcard-status--confirmed {
  color: var(--color-brand-primary);
  background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
  border-color: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
}
.rcard-status--completed {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, white);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.rcard-status--cancelled {
  color: var(--text-muted);
  background: var(--bg-canvas);
  border-color: var(--border-subtle);
}
.rcard-status--rejected {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, white);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

/* Meta: date/time, phone, note */
.rcard-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rcard-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 0;
}
.rcard-meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcard-meta-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
}

@media (min-width: 480px) {
  .rcard-meta { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-3); row-gap: 3px; }
}

/* Staff/provider row — a compact select sitting inline with the other
   meta rows (date, phone, notes). Only rendered at all when the business
   has active providers set up. */
.rcard-provider-row {
  flex-basis: 100%;
}
.rcard-provider-select {
  font-size: 0.75rem;
  padding: 3px 22px 3px 8px;
  height: auto;
  min-height: 0;
  border-radius: var(--radius-sm, 6px);
  max-width: 130px;
}

/* Booking details — collapsible list, hidden until requested */
.rcard-details {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
}
.rcard-details.open { display: flex; }
.rcard-details-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.75rem;
}
.rcard-details-row span:first-child {
  color: var(--text-secondary);
}
.rcard-details-row span:last-child {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.rcard-details-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Actions row — three-status buttons (Confirm/Reject/Complete, when
   present) form one visual row via .rcard-btn--action + the flex-basis:100%
   break below; Booking details + the overflow menu always sit on their own
   row underneath, mirroring the two-tier layout of the reference design
   instead of one big row that wraps unpredictably at different widths. */
.rcard-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
}
.rcard-actions-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.rcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: #FFFFFF;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.rcard-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.rcard-btn:hover { background: var(--bg-canvas); border-color: var(--border-medium); color: var(--text-primary); }

/* Booking details — bumped up slightly from the base .rcard-btn size so it
   reads as the more prominent utility action on the card (it's the one
   people tap most), while the overflow "⋮" icon button next to it stays
   at the smaller base size. */
.rcard-btn--details {
  height: 28px;
  padding: 0 12px;
  font-size: 0.75rem;
  gap: 5px;
}
.rcard-btn--details svg { width: 13px; height: 13px; }

/* Confirm / Reject / Complete — the three primary status actions. Sized and
   shaped distinctly from the plain utility buttons (Booking details, the
   overflow icon): taller, evenly split across the row, and a modest
   border-radius rather than a full pill, so they read as clear, clickable
   controls ("polished SaaS dashboard buttons") rather than soft tags. */
.rcard-btn--action {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 0.6875rem;
  letter-spacing: 0;
}
.rcard-btn--action svg { width: 11px; height: 11px; }

/* Confirm — soft indigo, same color-mix pattern as .rcard-status--confirmed
   rather than a solid fill, so the action row reads as calm/pastel instead
   of shouting in saturated blue/green/red. */
.rcard-btn--primary {
  background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
  color: var(--color-brand-primary);
  border-color: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}
.rcard-btn--primary:hover {
  background: color-mix(in srgb, var(--color-brand-primary) 20%, white);
  border-color: color-mix(in srgb, var(--color-brand-primary) 32%, transparent);
  color: var(--color-brand-primary);
}

/* Complete — soft green */
.rcard-btn--success {
  background: color-mix(in srgb, var(--color-success) 12%, white);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 22%, transparent);
}
.rcard-btn--success:hover {
  background: color-mix(in srgb, var(--color-success) 20%, white);
  border-color: color-mix(in srgb, var(--color-success) 32%, transparent);
  color: var(--color-success);
}

.rcard-btn--details.open {
  background: var(--bg-canvas);
  border-color: var(--border-medium);
  color: var(--text-primary);
}
.rcard-btn--details svg:last-child { transition: transform var(--duration-fast) var(--ease-standard); }
.rcard-btn--details.open svg:last-child { transform: rotate(180deg); }

/* Reject — soft red, same pastel pattern */
.rcard-btn--danger {
  background: color-mix(in srgb, var(--color-danger) 10%, white);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.rcard-btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 18%, white);
  border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);
  color: var(--color-danger);
}

/* Overflow "more" menu — keeps the row from filling up with buttons */
.rcard-menu {
  position: relative;
  margin-left: auto;
}
.rcard-btn--icon {
  width: 22px;
  height: 22px;
  padding: 0;
  flex-shrink: 0;
}
.rcard-btn--icon svg { width: 11px; height: 11px; }

.rcard-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-soft-sm);
  flex-direction: column;
  gap: 2px;
}
.rcard-menu-dropdown.open { display: flex; }
.rcard-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.rcard-menu-dropdown button svg { width: 14px; height: 14px; flex-shrink: 0; }
.rcard-menu-dropdown button:hover { background: var(--bg-canvas); color: var(--text-primary); }
.rcard-menu-dropdown button.rcard-menu-danger { color: var(--color-danger); }
.rcard-menu-dropdown button.rcard-menu-danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, white); }

/* "Send via" popover — shown after Confirm / Reject / Contact Customer so the
   business can pick WhatsApp or SMS before the pre-filled message opens.
   Styled like the collapsible booking-details panel so it reads as part of
   the existing card, not a new floating menu. */
.rcard-channel-popover {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
}
.rcard-channel-popover.open { display: flex; }
.rcard-channel-popover-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  margin-right: 2px;
}
.rcard-channel-popover button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  background: #FFFFFF;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.rcard-channel-popover button svg { width: 13px; height: 13px; flex-shrink: 0; }
.rcard-channel-popover button:hover { background: var(--bg-canvas-alt); border-color: var(--border-medium); color: var(--text-primary); }
.rcard-channel-popover button[data-channel="call"]:hover { border-color: var(--border-brand, var(--color-accent)); color: var(--color-accent); }


/* ---- QR code page ---- */
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
}
.qr-link-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--bg-canvas-alt);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--color-text);
}

/* ---- Share your booking page card ---- */
.share-card { padding: var(--space-6); }
.share-card h3 { margin: 0 0 var(--space-4); }

.share-link-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background-color: var(--bg-canvas-alt);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.share-link-text {
  flex: 1 1 200px;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--color-text);
  scrollbar-width: none;
}
.share-link-text::-webkit-scrollbar { display: none; }
.share-copy-btn { flex-shrink: 0; }

.share-copied-note {
  margin: var(--space-2) 0 0;
  min-height: 18px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-success);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.share-copied-note--visible {
  opacity: 1;
  transform: translateY(0);
}

.share-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 560px) {
  .share-actions-grid { grid-template-columns: repeat(6, 1fr); }
}

.share-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.share-action-btn:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft-sm);
  transform: translateY(-1px);
}
.share-action-btn:active { transform: translateY(0) scale(0.96); }
.share-action-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.share-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-canvas-alt);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}
.share-action-icon svg { width: 18px; height: 18px; }
.share-action-btn:hover .share-action-icon { color: var(--color-accent); }

@media (max-width: 479px) {
  .share-link-row { flex-direction: column; align-items: stretch; }
  .share-copy-btn { width: 100%; }
}

/* ---- Upgrade banner ---- */
.upgrade-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-pastel-periwinkle) 0%, var(--color-brand-deep) 100%);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-soft-lg), var(--shadow-blue-glow);
  overflow: hidden;
  flex-wrap: wrap;
}
.upgrade-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255,255,255,0.22) 0%, transparent 45%);
  pointer-events: none;
}
.upgrade-banner > * { position: relative; z-index: 1; }
.upgrade-banner > div { max-width: 480px; }
.upgrade-banner h3 { color: var(--color-text-inverse); margin: 0 0 var(--space-2); }
.upgrade-banner p { color: var(--color-text-inverse-muted); margin: 0; }
.upgrade-banner .btn { margin-top: var(--space-2); }


/* ---- Quick Links / feature cards ---- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
/* ---- Business list cards ---- */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.biz-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft-md), var(--shadow-inner-highlight);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.biz-card:hover {
  box-shadow: var(--shadow-soft-lg), var(--shadow-inner-highlight);
  transform: translateY(-3px);
}
.biz-card-cover {
  height: 120px;
  background: var(--gradient-pastel-soft);
  background-size: cover;
  background-position: center;
}
.biz-card-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.biz-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.biz-card-top h3 {
  margin: 0;
  font-size: 1.05rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-pill--live { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.status-pill--live::before { background: var(--color-success); }
.status-pill--draft { background: var(--color-surface-alt); color: var(--color-text-muted); }
.status-pill--draft::before { background: var(--color-text-muted); }
.badge-category {
  background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
  color: var(--color-brand-primary);
  border-color: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
  margin-bottom: var(--space-4);
}
.biz-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.feature-card h4 { margin-bottom: var(--space-2); }
.feature-card p { margin: 0; font-size: var(--fs-sm); }

/* ---- Sidebar SVG icons ---- */
.sidebar-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- Frosted glass buttons ---- */
.btn-glass {
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
}
.btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ---- Plan stats row (Settings → Plan) ---- */
.plan-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.plan-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.plan-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.plan-stat-icon svg { width: 18px; height: 18px; }
.plan-stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.1;
}
.plan-stat-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.plan-stat-divider { width: 1px; height: 40px; background: var(--color-border); flex-shrink: 0; }

/* ---- Upgrade to Pro row (Settings → Plan) ---- */
.plan-upgrade-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.plan-upgrade-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-brand-primary);
  flex-shrink: 0;
}
.plan-upgrade-icon svg { width: 18px; height: 18px; }
.plan-upgrade-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-upgrade-title { font-weight: var(--fw-semibold); color: var(--color-text); font-size: var(--fs-base); }
.plan-upgrade-subtitle { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.plan-upgrade-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.plan-upgrade-arrow svg { width: 15px; height: 15px; }
.plan-upgrade-row.is-open .plan-upgrade-arrow { transform: rotate(90deg); }

/* ---- Pro plan pricing cards (Settings → Upgrade to Pro) ---- */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-4);
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft-sm);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft-md); }

.plan-card--popular {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--color-surface-alt), var(--color-surface-alt)) padding-box,
    var(--gradient-pastel) border-box;
  box-shadow: var(--shadow-soft-md), var(--shadow-blue-glow);
}

.plan-card-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--color-text-inverse);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-pastel-periwinkle), var(--color-brand-primary));
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.badge-savings {
  background: var(--gradient-pastel);
  color: var(--color-brand-navy);
  border-color: transparent;
}

.plan-card-name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--color-text); }

.plan-card-price {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.plan-card-price span { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); }

.plan-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.plan-card-features li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-5);
  position: relative;
}
.plan-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-brand-primary);
  font-weight: var(--fw-bold);
}

@media (max-width: 640px) {
  .plan-cards { grid-template-columns: 1fr; }
}

/* ---- Autofill fix ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
}

/* ---- Button appearance reset ---- */
button {
  -webkit-appearance: none;
  appearance: none;
}
/* ---- Business summary card refinements ---- */
.biz-summary-category { margin: 0 0 var(--space-3); }
.biz-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.biz-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.biz-contact-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

/* ==========================================================================
   Dashboard — Reviews page
   ========================================================================== */
.stat-stars {
  display: inline-flex;
  gap: 2px;
}
.stat-stars svg {
  width: 16px;
  height: 16px;
  color: var(--color-warning);
}
.stat-stars svg.is-empty {
  color: var(--color-border-strong);
}

.review-breakdown-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
}
.review-breakdown-row {
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.review-breakdown-track {
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  overflow: hidden;
}
.review-breakdown-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-warning);
}
.review-breakdown-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-stars {
  display: inline-flex;
  gap: 1px;
}
.table-stars svg {
  width: 13px;
  height: 13px;
  color: var(--color-warning);
}
.table-stars svg.is-empty {
  color: var(--color-border-strong);
}

.review-table-body-cell {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.review-table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}
.review-table-actions .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.review-table-actions .icon-btn svg { width: 16px; height: 16px; }
.review-table-actions .icon-btn:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}
.review-table-actions .icon-btn.danger:hover {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}
.review-table-actions .icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.review-table-actions .icon-btn:disabled:hover {
  background-color: transparent;
  color: var(--color-text-muted);
}

.reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-2);
}
.reviews-pagination-info {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: 0 var(--space-3);
}

.review-status-reported { color: var(--color-danger) !important; }