/** Shared surfaces for booking list & detail — aligned with rule-engine polish. */

export const bookingSurface = {
  page: "min-h-screen bg-gradient-to-b from-muted/40 via-background to-background",
  pageInner: "mx-auto max-w-[1600px] space-y-6 p-6 lg:p-8",
  hero:
    "relative overflow-hidden rounded-2xl border border-border/80 bg-card shadow-sm",
  heroGlow:
    "pointer-events-none absolute -right-20 -top-20 size-64 rounded-full bg-primary/10 blur-3xl",
  panel:
    "overflow-hidden rounded-xl border border-border bg-card shadow-sm",
  panelToolbar:
    "flex flex-wrap items-center justify-between gap-3 border-b border-border bg-muted/25 px-4 py-3.5 sm:px-5",
  tableWrap: "px-0",
  sectionCard:
    "overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-shadow hover:shadow-md",
  sectionHeader:
    "flex items-center gap-3 border-b border-border/60 bg-muted/20 px-5 py-4",
  sectionBody: "px-5 py-5",
  detailHero:
    "relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-card via-card to-primary/[0.04] shadow-sm",
  stickySidebar: "lg:sticky lg:top-6 lg:self-start",
  metricTile:
    "rounded-lg border border-border/70 bg-background/80 px-4 py-3 shadow-xs",
  emptyState:
    "flex flex-col items-center justify-center gap-3 px-6 py-16 text-center",
} as const;

export const bookingInput = {
  search:
    "h-10 w-full rounded-lg border border-input bg-background pl-10 text-sm shadow-xs transition-[box-shadow,border-color] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/25 sm:max-w-xs",
} as const;