/* ============================================================================
   Setpoint Admin — Mockup UI Kit (plain CSS, no frameworks)
   Derived from apps/admin/src/app/globals.css and src/components/ui/*.tsx
   Tokens copied VERBATIM. Component sizes translated 1:1 from Tailwind
   classes (h-9 = 36px, rounded-md = 6px, text-sm = 14px, p-6 = 24px, ...).
   Never hard-code a hex in a mockup — use var(--*) or the hsl(var(--*)) form.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS --
   LIGHT MODE — Setpoint Teal Brand + Warm Whites                            */
:root {
  /* Surfaces */
  --background: 210 20% 98%;
  --foreground: 220 14% 10%;
  --card: 0 0% 100%;
  --card-foreground: 220 14% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 14% 10%;

  /* Brand */
  --primary: 172 66% 40%;
  --primary-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 210 16% 95%;
  --secondary-foreground: 220 14% 10%;

  /* Muted */
  --muted: 210 16% 95%;
  --muted-foreground: 220 8% 46%;

  /* Accent */
  --accent: 172 50% 95%;
  --accent-foreground: 172 66% 25%;

  /* Destructive */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  /* Borders & inputs */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 172 66% 40%;

  /* Charts */
  --chart-1: 172 66% 40%;
  --chart-2: 217 91% 60%;
  --chart-3: 152 69% 40%;
  --chart-4: 38 92% 50%;
  --chart-5: 262 83% 58%;

  /* Radius */
  --radius: 0.5rem;

  /* Sidebar */
  --sidebar: 210 20% 98%;
  --sidebar-foreground: 220 14% 10%;
  --sidebar-primary: 172 66% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 16% 95%;
  --sidebar-accent-foreground: 220 14% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 172 66% 40%;

  /* Sport colors */
  --sport-padel: 217 91% 60%;
  --sport-tennis: 152 69% 40%;
  --sport-pickleball: 38 92% 50%;

  /* Status colors */
  --status-confirmed: 217 91% 60%;
  --status-checked-in: 152 69% 40%;
  --status-cancelled: 0 84% 60%;
  --status-no-show: 38 92% 50%;
  --status-hold: 262 83% 58%;

  /* Success / Warning */
  --success: 152 69% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 38 92% 15%;

  /* Tailwind palette values the real components reference directly
     (booking-type-badge "match" uses blue-500/blue-600; calendar
     "unavailable" uses neutral-200 / neutral-800). Tokenised here so a
     mockup never writes a raw hex. */
  --blue-500: 217 91% 60%;
  --blue-600: 221 83% 53%;
  --neutral-200: 0 0% 90%;
  --neutral-800: 0 0% 15%;

  /* Derived radii (from @theme inline) */
  --radius-sm: calc(var(--radius) - 4px);   /* 4px */
  --radius-md: calc(var(--radius) - 2px);   /* 6px */
  --radius-lg: var(--radius);               /* 8px */
  --radius-xl: calc(var(--radius) + 4px);   /* 12px */

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* DARK MODE — Linear-inspired warm dark grays.
   The app toggles `.dark` on <html>; this kit also accepts [data-theme=dark]
   so a static mockup can flip themes with one attribute. */
.dark,
[data-theme="dark"] {
  --background: 225 12% 10%;
  --foreground: 220 10% 93%;
  --card: 225 10% 13%;
  --card-foreground: 220 10% 93%;
  --popover: 225 10% 13%;
  --popover-foreground: 220 10% 93%;

  --primary: 172 60% 48%;
  --primary-foreground: 225 12% 10%;

  --secondary: 225 10% 17%;
  --secondary-foreground: 220 10% 93%;

  --muted: 225 10% 17%;
  --muted-foreground: 220 8% 55%;

  --accent: 172 40% 15%;
  --accent-foreground: 172 60% 70%;

  --destructive: 0 62% 50%;
  --destructive-foreground: 220 10% 93%;

  --border: 225 8% 20%;
  --input: 225 8% 20%;
  --ring: 172 60% 48%;

  --chart-1: 172 60% 48%;
  --chart-2: 217 80% 65%;
  --chart-3: 152 60% 50%;
  --chart-4: 38 85% 55%;
  --chart-5: 262 75% 65%;

  --sidebar: 225 12% 8%;
  --sidebar-foreground: 220 10% 93%;
  --sidebar-primary: 172 60% 48%;
  --sidebar-primary-foreground: 225 12% 10%;
  --sidebar-accent: 225 10% 15%;
  --sidebar-accent-foreground: 220 10% 93%;
  --sidebar-border: 225 8% 18%;
  --sidebar-ring: 172 60% 48%;

  --sport-padel: 217 80% 65%;
  --sport-tennis: 152 60% 50%;
  --sport-pickleball: 38 85% 55%;

  --status-confirmed: 217 80% 65%;
  --status-checked-in: 152 60% 50%;
  --status-cancelled: 0 75% 60%;
  --status-no-show: 38 85% 55%;
  --status-hold: 262 75% 65%;

  --success: 152 60% 50%;
  --success-foreground: 225 12% 10%;
  --warning: 38 85% 55%;
  --warning-foreground: 225 12% 10%;

  --blue-500: 217 80% 65%;
  --blue-600: 217 80% 65%;
}

/* ------------------------------------------------------------ CONVENIENCE --
   Token aliases so a mockup can write `color: var(--fg)` without hsl(). */
:root,
.dark,
[data-theme="dark"] {
  --bg: hsl(var(--background));
  --fg: hsl(var(--foreground));
  --c-card: hsl(var(--card));
  --c-card-fg: hsl(var(--card-foreground));
  --c-primary: hsl(var(--primary));
  --c-primary-fg: hsl(var(--primary-foreground));
  --c-secondary: hsl(var(--secondary));
  --c-secondary-fg: hsl(var(--secondary-foreground));
  --c-muted: hsl(var(--muted));
  --c-muted-fg: hsl(var(--muted-foreground));
  --c-accent: hsl(var(--accent));
  --c-accent-fg: hsl(var(--accent-foreground));
  --c-destructive: hsl(var(--destructive));
  --c-border: hsl(var(--border));
  --c-ring: hsl(var(--ring));
  --c-success: hsl(var(--success));
  --c-warning: hsl(var(--warning));
}

/* --------------------------------------------------------------- BASE ---- */
*,
*::before,
*::after { box-sizing: border-box; border-color: hsl(var(--border)); }

html { color-scheme: light; }
.dark, [data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 14px;          /* text-sm — the app's default UI size */
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

button, a, [role="button"], [role="link"], label[for], select, summary { cursor: pointer; }

img { max-width: 100%; }
[hidden] { display: none !important; }

.mono { font-family: var(--font-mono); }
.muted { color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------- BUTTON --
   button.tsx: rounded-md · text-sm · font-medium · gap-2 · h-9 px-4 py-2   */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                          /* gap-2 */
  white-space: nowrap;
  border-radius: var(--radius-md);   /* rounded-md — 6px */
  font-family: inherit;
  font-size: 14px;                   /* text-sm */
  line-height: 20px;
  font-weight: 500;                  /* font-medium */
  height: 36px;                      /* h-9 */
  padding: 8px 16px;                 /* py-2 px-4 */
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 150ms ease;
  text-decoration: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px hsl(var(--background)), 0 0 0 3px hsl(var(--ring));
}
.btn:active { transform: scale(0.98); }         /* active:scale-[0.98] */
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }

.btn-default {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-default:hover { background: hsl(var(--primary) / 0.9); }

.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-destructive:hover { background: hsl(var(--destructive) / 0.9); }

.btn-outline {
  border-color: hsl(var(--input));
  background: hsl(var(--background));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-secondary:hover { background: hsl(var(--secondary) / 0.8); }

.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-link {
  color: hsl(var(--primary));
  text-underline-offset: 4px;
}
.btn-link:hover { text-decoration: underline; }

.btn-sm { height: 32px; padding-inline: 12px; font-size: 12px; line-height: 16px; border-radius: var(--radius-md); }
.btn-lg { height: 40px; padding-inline: 32px; border-radius: var(--radius-md); }
.btn-icon { height: 36px; width: 36px; padding: 0; }
.btn-sm.btn-icon { height: 32px; width: 32px; }

/* ---------------------------------------------------------------- BADGE --
   badge.tsx: rounded-md · border · px-2.5 py-0.5 · text-xs · font-semibold */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 2px 10px;                  /* py-0.5 px-2.5 */
  font-size: 12px;                    /* text-xs */
  line-height: 16px;
  font-weight: 600;                   /* font-semibold */
  transition: background-color 150ms ease;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }       /* h-3 w-3 */

.badge-default {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.badge-outline { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }

/* badge size="sm" — text-[10px] px-1.5 py-0 */
.badge-xs { font-size: 10px; line-height: 14px; padding: 0 6px; }
.badge-xs svg { width: 10px; height: 10px; }

/* ------------------------------------------------------- STATUS BADGES --
   status-badge.tsx — bg/15, text, border/25 off the status token.
   Apply on top of `.badge .badge-outline`.                                 */
.status-confirmed {
  background: hsl(var(--status-confirmed) / 0.15);
  color: hsl(var(--status-confirmed));
  border-color: hsl(var(--status-confirmed) / 0.25);
}
.status-checked-in {
  background: hsl(var(--status-checked-in) / 0.15);
  color: hsl(var(--status-checked-in));
  border-color: hsl(var(--status-checked-in) / 0.25);
}
.status-completed { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.status-cancelled {
  background: hsl(var(--destructive) / 0.15);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.25);
}
.status-no-show {
  background: hsl(var(--status-no-show) / 0.15);
  color: hsl(var(--status-no-show));
  border-color: hsl(var(--status-no-show) / 0.25);
}
.status-hold {
  background: hsl(var(--status-hold) / 0.15);
  color: hsl(var(--status-hold));
  border-color: hsl(var(--status-hold) / 0.25);
}

/* --------------------------------------------------------- SPORT BADGES -- */
.sport-padel {
  background: hsl(var(--sport-padel) / 0.15);
  color: hsl(var(--sport-padel));
  border-color: hsl(var(--sport-padel) / 0.25);
}
.sport-tennis {
  background: hsl(var(--sport-tennis) / 0.15);
  color: hsl(var(--sport-tennis));
  border-color: hsl(var(--sport-tennis) / 0.25);
}
.sport-pickleball {
  background: hsl(var(--sport-pickleball) / 0.15);
  color: hsl(var(--sport-pickleball));
  border-color: hsl(var(--sport-pickleball) / 0.25);
}
.sport-badge-label { text-transform: capitalize; }

/* SportDot — h-2 w-2 rounded-full */
.sport-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: hsl(var(--primary)); }
.sport-dot.sport-padel { background: hsl(var(--sport-padel)); }
.sport-dot.sport-tennis { background: hsl(var(--sport-tennis)); }
.sport-dot.sport-pickleball { background: hsl(var(--sport-pickleball)); }

/* -------------------------------------------------- BOOKING TYPE BADGES --
   booking-type-badge.tsx — lesson "Coaching", match "Event", court "Court" */
.type-lesson {
  background: hsl(var(--status-hold) / 0.15);
  color: hsl(var(--status-hold));
  border-color: hsl(var(--status-hold) / 0.25);
}
.type-match {
  background: hsl(var(--blue-500) / 0.15);
  color: hsl(var(--blue-600));
  border-color: hsl(var(--blue-500) / 0.25);
}
.type-court { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }

/* ----------------------------------------------------------------- CARD --
   card.tsx: rounded-xl · border · bg-card · shadow-sm                      */
.card {
  border-radius: var(--radius-xl);    /* 12px */
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 150ms ease;
}
.card-header { display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.card-title { font-weight: 600; line-height: 1; letter-spacing: -0.015em; font-size: 16px; }
.card-description { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
.card-content { padding: 0 24px 24px; }
.card-footer { display: flex; align-items: center; padding: 0 24px 24px; gap: 8px; }
/* globals.css .card-shadow */
.card-shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04); }
.dark .card-shadow, [data-theme="dark"] .card-shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.15); }

/* ---------------------------------------------------------------- TABLE --
   table.tsx: text-sm · th h-10 px-2 · td p-2 · row border-b               */
.table-container { position: relative; width: 100%; overflow-x: auto; }
.table { width: 100%; caption-side: bottom; font-size: 14px; line-height: 20px; border-collapse: collapse; }
.table thead tr { border-bottom: 1px solid hsl(var(--border)); }
.table tbody tr { border-bottom: 1px solid hsl(var(--border)); transition: background-color 150ms ease; }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: hsl(var(--muted) / 0.5); }
.table tbody tr[data-state="selected"] { background: hsl(var(--muted)); }
.table th {
  height: 40px;                      /* h-10 */
  padding: 0 8px;                    /* px-2 */
  text-align: left;
  vertical-align: middle;
  font-weight: 500;                  /* font-medium */
  white-space: nowrap;
  color: hsl(var(--foreground));
}
.table td { padding: 8px; vertical-align: middle; white-space: nowrap; }
.table tfoot { background: hsl(var(--muted) / 0.5); border-top: 1px solid hsl(var(--border)); font-weight: 500; }
.table caption { margin-top: 16px; font-size: 14px; color: hsl(var(--muted-foreground)); }

/* ----------------------------------------------------------------- TABS --
   tabs.tsx: list h-9 rounded-lg bg-muted p-1; trigger rounded-md px-3 py-1 */
.tabs { display: block; }
.tabs-list {
  display: inline-flex;
  align-self: flex-start;   /* never stretch inside a flex column */
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);    /* 8px */
  background: hsl(var(--muted));
  padding: 4px;
  color: hsl(var(--muted-foreground));
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-md);
  padding: 4px 12px;                 /* py-1 px-3 */
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 150ms ease;
}
.tab-active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.tabs-content { margin-top: 8px; }

/* ---------------------------------------------------------------- INPUT --
   input.tsx: h-9 rounded-md border-input px-3 py-1 text-sm shadow-sm      */
.input {
  display: flex;
  height: 36px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background: transparent;
  color: hsl(var(--foreground));
  padding: 4px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.input:disabled { cursor: not-allowed; opacity: 0.5; }

.textarea { min-height: 60px; height: auto; padding: 8px 12px; resize: vertical; }

.label { font-size: 14px; line-height: 20px; font-weight: 500; }

/* --------------------------------------------------------------- SELECT --
   select.tsx trigger: h-9 rounded-md border px-3 py-2 text-sm + chevron   */
.select {
  display: flex;
  height: 36px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background: transparent;
  color: hsl(var(--foreground));
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  /* native <select> chevron replacement, drawn from currentColor */
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.select:focus { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.select-content {
  position: relative;
  z-index: 50;
  min-width: 128px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 4px;
}
.select-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 6px 32px 6px 8px;
  font-size: 14px;
  cursor: pointer;
}
.select-item:hover, .select-item[data-state="checked"] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.select-separator { height: 1px; margin: 4px -4px; background: hsl(var(--muted)); }

/* --------------------------------------------------------------- SWITCH --
   switch.tsx: h-[1.15rem] w-8 rounded-full, thumb size-4                   */
.switch {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 32px;
  height: 18.4px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: hsl(var(--input));
  padding: 0;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.05);
  transition: background-color 150ms ease;
  cursor: pointer;
}
.switch::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: hsl(var(--background));
  transform: translateX(0);
  transition: transform 150ms ease;
}
.switch[data-state="checked"], .switch.is-on { background: hsl(var(--primary)); }
.switch[data-state="checked"]::after, .switch.is-on::after { transform: translateX(calc(100% - 2px)); }
.switch:disabled { cursor: not-allowed; opacity: 0.5; }
.switch-sm { width: 24px; height: 14px; }
.switch-sm::after { width: 12px; height: 12px; }

/* ------------------------------------------------------------- CHECKBOX --
   checkbox.tsx: size-4 rounded-[4px] border-input, checked bg-primary      */
.checkbox {
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid hsl(var(--input));
  background: transparent;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  appearance: none;
  transition: box-shadow 150ms ease;
}
.checkbox:checked, .checkbox[data-state="checked"] {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  /* size-3.5 check, matches lucide CheckIcon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox:disabled { cursor: not-allowed; opacity: 0.5; }

/* --------------------------------------------------------------- DIALOG --
   dialog.tsx: max-w-lg (512px) · border · bg-background · px-6 pb-6 ·
   sticky header px-6 py-3.5 border-b · sm:rounded-lg                      */
.dialog-overlay { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.8); }
.dialog {
  position: relative;
  z-index: 50;
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 512px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 0 24px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  overflow-x: hidden;
}
.dialog-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 14px 48px 14px 24px;      /* py-3.5 px-6 pr-12 */
  text-align: left;
}
.dialog-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.dialog-description { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); margin: 0; }
.dialog-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: inherit; opacity: 0.7;
  border-radius: var(--radius-sm); padding: 2px; cursor: pointer;
}
.dialog-close:hover { opacity: 1; }
.dialog-body { font-size: 14px; line-height: 20px; }
.dialog-footer { display: flex; flex-direction: row; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- SHEET --
   sheet.tsx side="right": w-3/4 sm:max-w-sm (384px) · p-6 · border-l      */
.sheet {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  width: 384px;
  max-width: 100%;
  border-left: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.sheet-header { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sheet-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.sheet-description { font-size: 14px; color: hsl(var(--muted-foreground)); margin: 0; }
.sheet-footer { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: auto; }
.sheet-close { position: absolute; right: 16px; top: 16px; border: 0; background: transparent; color: inherit; opacity: 0.7; cursor: pointer; }

/* ------------------------------------------------------------- SKELETON -- */
.skeleton {
  border-radius: var(--radius-md);
  background: hsl(var(--primary) / 0.1);
  animation: sp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes sp-pulse { 50% { opacity: 0.5; } }

/* -------------------------------------------------------- SECTION HEADER --
   section-header.tsx: flex justify-between gap-4; title text-sm semibold  */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.section-header-title { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.section-header-sm .section-header-title {
  font-size: 12px; line-height: 16px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
}
.section-header-lg .section-header-title { font-size: 20px; line-height: 28px; }
.section-header-description { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); margin: 0; }
.section-header-action { flex-shrink: 0; }

/* ---------------------------------------------------------------- PRICE --
   price-display.tsx: inline-flex gap-1.5; amount font-semibold text-base  */
.price { display: inline-flex; align-items: center; gap: 6px; }
.price-amount { font-weight: 600; font-size: 16px; line-height: 24px; }
.price-original { color: hsl(var(--muted-foreground)); text-decoration: line-through; font-size: 14px; }
.price.has-discount .price-amount { color: hsl(var(--success)); }
.price-sm .price-amount { font-size: 14px; }
.price-sm .price-original { font-size: 12px; }
.price-lg .price-amount { font-size: 18px; line-height: 28px; font-weight: 700; }
.price-lg .price-original { font-size: 16px; }

/* ------------------------------------------------------------- INFO ROW --
   info-row.tsx: flex gap-3 text-sm; icon h-4 w-4 muted                    */
.info-row { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; }
.info-row > svg { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
.info-row-body { min-width: 0; flex: 1 1 0%; }

/* -------------------------------------------------------------- TOOLTIP --
   tooltip.tsx: rounded-md bg-primary px-3 py-1.5 text-xs                  */
.tooltip {
  z-index: 50;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 6px 12px;
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  width: max-content;
}

/* ---------------------------------------------------------------- TOAST --
   toast.tsx: rounded-md border p-4 pr-6 shadow-lg, max-w 420px            */
.toast {
  position: relative;
  pointer-events: auto;
  display: flex;
  width: 100%;
  max-width: 420px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 16px 24px 16px 16px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.toast-destructive {
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.toast-title { font-size: 14px; font-weight: 600; }
.toast-description { font-size: 14px; opacity: 0.9; }
.toast-action {
  display: inline-flex; height: 32px; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: transparent;
  padding: 0 12px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.toast-action:hover { background: hsl(var(--secondary)); }

/* ------------------------------------------------------------ SEPARATOR -- */
.separator { height: 1px; width: 100%; background: hsl(var(--border)); border: 0; margin: 0; flex-shrink: 0; }
.separator-vertical { width: 1px; height: auto; align-self: stretch; }

/* ================================================================= SHELL ==
   admin-sidebar.tsx: aside w-48 (192px) border-r bg-sidebar               */
.app { display: flex; min-height: 100vh; background: hsl(var(--background)); }

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  width: 192px;                       /* w-48 */
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid hsl(var(--sidebar-border));
  background: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
}
/* Facility switcher row — h-14 border-b */
.facility-switcher {
  display: flex;
  height: 56px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  padding: 0 12px;
  cursor: pointer;
}
.facility-logo {
  display: grid;
  place-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.facility-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facility-caret { margin-left: auto; opacity: 0.5; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; flex: 1 1 auto; overflow-y: auto; }

/* Nav item — h-10 rounded-lg px-3 text-sm font-medium */
.nav-item {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border: 0;
  background: transparent;
  color: hsl(var(--sidebar-foreground) / 0.7);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-item:hover { background: hsl(var(--sidebar-accent) / 0.5); color: hsl(var(--sidebar-accent-foreground)); }
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item span { margin-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-caret { margin-left: auto; width: 16px; height: 16px; transition: transform 200ms ease; }
.nav-item[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }
.nav-active { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); }

/* Sub-item — h-8 rounded-lg pl-8 pr-3 text-sm */
.nav-children { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nav-child {
  display: flex;
  height: 32px;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 0 12px 0 32px;
  font-size: 14px;
  line-height: 20px;
  color: hsl(var(--sidebar-foreground) / 0.6);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-child:hover { background: hsl(var(--sidebar-accent) / 0.5); color: hsl(var(--sidebar-accent-foreground)); }
.nav-child svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-child span { margin-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-child-active { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); font-weight: 500; }

.sidebar-footer { flex-shrink: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }

/* Main column */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
}
.page-title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-subtitle { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); margin: 4px 0 0; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.page-content { padding: 0 24px 32px; display: flex; flex-direction: column; gap: 16px; }

/* KPI tile — built from .card, used across the admin dashboards */
.kpi { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.kpi-value { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.kpi-delta { font-size: 12px; color: hsl(var(--muted-foreground)); }
.kpi-delta.up { color: hsl(var(--success)); }
.kpi-delta.down { color: hsl(var(--destructive)); }

/* ============================================================== CALENDAR ==
   calendar-grid.tsx vertical orientation:
   time rail w-14 (56px) · tick 28px · court column min-w 140px ·
   column header h-9 bg-muted/50 border-b                                   */
.cal { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--card)); }
.cal-scroll { overflow-x: auto; }
.cal-grid { display: flex; min-width: 700px; }
.cal-rail { display: flex; width: 56px; flex-shrink: 0; flex-direction: column; border-right: 1px solid hsl(var(--border)); }
.cal-rail-head { height: 36px; flex-shrink: 0; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5); }
.cal-tick {
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 10px;
  line-height: 14px;
  color: hsl(var(--muted-foreground));
}
.cal-tick.hour { border-top: 1px solid hsl(var(--border)); }
.cal-col { display: flex; min-width: 140px; flex: 1 1 0%; flex-direction: column; border-right: 1px solid hsl(var(--border)); }
.cal-col:last-child { border-right: 0; }
.cal-col-head {
  display: flex; height: 36px; flex-shrink: 0; align-items: center; gap: 6px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  padding: 0 8px;
  font-size: 12px; font-weight: 500;
}
.cal-body { position: relative; }
.cal-slot { height: 28px; }
.cal-slot.hour { border-top: 1px solid hsl(var(--border)); }
.cal-slot-empty { display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground) / 0.2); font-size: 10px; }
.cal-slot-empty:hover { background: hsl(var(--muted) / 0.3); }

/* booking-card-vertical: absolute inset-x-0.5 rounded px-1.5 py-1 gap-0.5 */
.booking-card {
  position: absolute;
  left: 2px; right: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: left;
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: opacity 150ms ease;
  background: hsl(var(--sport-padel) / 0.15);   /* default: padel court tint */
}
.booking-card:hover { opacity: 0.8; }
.booking-title { font-size: 11px; line-height: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-title .plus { margin-left: 4px; font-size: 9px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.booking-meta { font-size: 10px; line-height: 13px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-chip { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; gap: 4px; }
.booking-chip .badge { font-size: 8px; line-height: 12px; padding: 0 4px; }
.booking-flag { position: absolute; left: 4px; top: 4px; border-radius: 4px; background: hsl(var(--background) / 0.8); padding: 2px; display: inline-flex; }
.booking-flag svg { width: 10px; height: 10px; color: hsl(var(--muted-foreground)); }

/* Court-sport tints (sportColorBg equivalents) */
.court-booking { background: hsl(var(--sport-padel) / 0.15); }
.court-booking.tennis { background: hsl(var(--sport-tennis) / 0.15); }
.court-booking.pickleball { background: hsl(var(--sport-pickleball) / 0.15); }

/* lesson — border-l-2 border-l-status-hold, exactly as in calendar-grid.tsx */
.booking-card.lesson { border-left: 2px solid hsl(var(--status-hold)); background: hsl(var(--status-hold) / 0.12); }
.booking-card.match { background: hsl(var(--blue-500) / 0.15); border-left: 2px solid hsl(var(--blue-500)); }

/* Academy-mockup lifecycle variants (kit additions — see KIT-README) */
.booking-card.reserved { background: transparent; border: 1px dashed hsl(var(--status-confirmed) / 0.5); }
.booking-card.consumed { background: hsl(var(--status-checked-in) / 0.22); border-left: 2px solid hsl(var(--status-checked-in)); }
.booking-card.no-show { background: hsl(var(--status-no-show) / 0.15); border-left: 2px solid hsl(var(--status-no-show)); }
.booking-card.no-show .booking-title { text-decoration: line-through; }
.booking-card.released { opacity: 0.45; background: hsl(var(--muted)); }
.booking-card.striped {
  background: repeating-linear-gradient(
    45deg,
    hsl(var(--neutral-200) / 0.8) 0 6px,
    transparent 6px 12px
  );
  cursor: default;
}
.dark .booking-card.striped, [data-theme="dark"] .booking-card.striped {
  background: repeating-linear-gradient(
    45deg,
    hsl(var(--neutral-800) / 0.8) 0 6px,
    transparent 6px 12px
  );
}

/* ============================================================ MOCKUP CHROME */
.mockup-ribbon {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--warning) / 0.35);
  background: hsl(var(--warning) / 0.15);
  color: hsl(var(--warning));
  padding: 4px 10px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.mockup-note {
  border-left: 2px solid hsl(var(--border));
  padding: 4px 0 4px 12px;
  font-size: 12px;
  line-height: 18px;
  color: hsl(var(--muted-foreground));
}
.mockup-note strong { color: hsl(var(--foreground)); font-weight: 600; }

/* Mobile artboard — a 390px phone frame for mobile mockups */
.mobile-frame {
  width: 390px;
  max-width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 28px;
  background: hsl(var(--background));
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25);
}
.mobile-frame > * { max-width: 100%; }

/* Utilities used across the mockups */
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wrap { flex-wrap: wrap; }
.text-xs { font-size: 12px; line-height: 16px; }
.text-sm { font-size: 14px; line-height: 20px; }
.text-base { font-size: 16px; line-height: 24px; }

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
}

/* ===================================================================
   proposal additions — classes introduced by mockups D, E, F.
   Kit additions, not classes that exist in Setpoint today. Tokens only.
   =================================================================== */

/* Subscription lifecycle badges (player_packages.status target values).
   Apply on top of `.badge .badge-outline`, like the status badges above. */
.state-active {
  background: hsl(var(--success) / 0.15);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.25);
}
.state-past-due {
  background: hsl(var(--warning) / 0.18);
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / 0.35);
}
.state-paused {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}
.state-cancelled {
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}
.state-expired {
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-style: dashed;
  border-color: hsl(var(--border));
}

/* A row that is present but not actionable (session banks on the 1st). */
.row-faded > td { opacity: 0.5; }
.is-faded { opacity: 0.5; }

/* Page body that carries a right-hand detail sheet. */
.with-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 308px;
  gap: 16px;
  align-items: start;
}
.with-sheet > .sheet {
  width: auto;
  height: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: none;
  position: sticky;
  top: 16px;
}

/* Billing state timeline inside a sheet. Steps read top to bottom. */
.timeline { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 16px 24px;
  border-left: 1px solid hsl(var(--border));
  margin-left: 5px;
}
.timeline-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-step::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--background));
}
.timeline-step.is-done::before { border-color: hsl(var(--success)); background: hsl(var(--success)); }
.timeline-step.is-warning::before { border-color: hsl(var(--warning)); }
.timeline-step.is-done.is-warning::before { border-color: hsl(var(--warning)); background: hsl(var(--warning)); }
.timeline-label { font-size: 14px; line-height: 20px; font-weight: 500; }
.timeline-when { font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }

/* Read-only settings list — label left, value right, no inputs. */
.setting-list { display: flex; flex-direction: column; gap: 0; }
.setting-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 14px;
  line-height: 20px;
}
.setting-row:last-child { border-bottom: 0; }
.setting-row dt { color: hsl(var(--muted-foreground)); margin: 0; }
.setting-row dd { margin: 0; font-weight: 500; text-align: right; }

/* Channel health dot for the reminders header. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; background: hsl(var(--muted-foreground)); }
.dot-on { background: hsl(var(--success)); }
.dot-pending { background: hsl(var(--warning)); }
.dot-off { background: hsl(var(--muted-foreground) / 0.5); }

/* Rendered message preview — what the student actually receives. */
.preview {
  border: 1px solid hsl(var(--border));
  border-left: 2px solid hsl(var(--success));
  border-radius: var(--radius-md);
  background: hsl(var(--muted) / 0.5);
  padding: 12px;
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
}
.preview-caption {
  font-size: 10px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  margin: 0 0 6px;
}

/* The arithmetic behind a number, shown small so the number leads. */
.formula {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: hsl(var(--muted-foreground));
}

/* Table cell allowed to wrap — a reason is prose, not a value. */
.table td.cell-wrap { white-space: normal; min-width: 148px; }

/* Collapsed rationale — the number leads, the arithmetic waits behind a click. */
.why { margin-top: 10px; }
.why > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: hsl(var(--muted-foreground));
  list-style: none;
}
.why > summary::-webkit-details-marker { display: none; }
.why > summary::before { content: "\25B8"; font-size: 9px; }
.why[open] > summary::before { content: "\25BE"; }
.why > summary:hover { color: hsl(var(--foreground)); }
.why > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); border-radius: var(--radius-sm); }

/* Numeric table cells — align the decimal points. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Side-by-side artboards (desktop frame + mobile frame on one page). */
.frames { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.frame-label {
  font-size: 10px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  margin: 0 0 8px;
}

@media (max-width: 1100px) {
  .with-sheet { grid-template-columns: minmax(0, 1fr); }
  .with-sheet > .sheet { position: static; }
}

/* ============================================================ PROPOSAL ADDITIONS
   Added for proposal mockups A/B/C. None of these exist in Setpoint today; they
   express target-model states (drag-to-move, coverage lapse, session ledger).
   Tokens only — no hex, both themes covered by the token layer. */

/* Drag-to-move on the planning calendar (mockup A) */
.booking-card.drag-ghost {
  background: hsl(var(--muted));
  border: 1px dashed hsl(var(--border));
  border-left-width: 1px;
  opacity: 0.45;
}
.booking-card.dragging {
  z-index: 30;
  cursor: grabbing;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.35);
}
.cal-drop-target {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  border: 2px dashed hsl(var(--primary));
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / 0.1);
}
.cal-drop-label { font-size: 10px; line-height: 13px; font-weight: 600; color: hsl(var(--primary)); }

/* Small anchored confirm (swap courts) */
.inline-confirm {
  position: absolute;
  z-index: 40;
  width: 214px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.30);
}
.inline-confirm-title { font-size: 12px; line-height: 16px; font-weight: 600; }
.inline-confirm-body { font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }

/* Overlay docking for a toast inside a mockup frame */
.overlay-host { position: relative; }
.toast-overlay { position: absolute; right: 16px; bottom: 16px; z-index: 50; max-width: 420px; }

/* Coverage state between confirmed and no-show (mockup B) */
.status-lapsing {
  background: hsl(var(--warning) / 0.12);
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / 0.4);
}

/* Session balance squares: filled = consumed, outline = reserved, empty = free */
.balance-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.session-squares { display: inline-flex; gap: 4px; }
.session-square {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.6);
}
.session-square.used { background: hsl(var(--status-checked-in)); border-color: hsl(var(--status-checked-in)); }
.session-square.reserved { background: transparent; border: 1px dashed hsl(var(--status-confirmed)); }
.session-square.free { background: transparent; }

/* Row-level lifecycle language in tables */
.is-struck { text-decoration: line-through; }
.is-faded { opacity: 0.5; }
.table tbody tr.row-muted td { color: hsl(var(--muted-foreground)); }
.table td.wrap-cell { white-space: normal; }

/* proposal additions ========================================================
   Added by the G/H/I mockups (reconciliation, attendance-vs-payment, leads).
   Tokens only — no hex, both themes.                                        */

/* Five-across KPI row (Leads pipeline) */
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

/* Main column + narrow aside (rules panel, help panel) */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; align-items: start; }

/* A dialog or sheet shown open, in page flow, over a dimmed stage */
.mockup-stage {
  display: flex; justify-content: center; padding: 24px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg);
  background: hsl(var(--muted) / 0.6);
}
.mockup-stage-right { justify-content: flex-end; }

/* Numeric table cell — money and counts align on the decimal */
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Event timeline (lead detail, student detail) */
.tl { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; padding: 0 0 14px 16px; border-left: 1px solid hsl(var(--border)); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px;
  border-radius: 9999px; background: hsl(var(--muted-foreground));
}
.tl-item.is-current::before { background: hsl(var(--primary)); }
.tl-title { font-size: 13px; line-height: 18px; font-weight: 500; }
.tl-time { font-size: 11px; line-height: 16px; color: hsl(var(--muted-foreground)); }

@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .with-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .grid-5 { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================== proposal additions ==
   Added for the proposal mockups J / K / L + index. These are kit-only
   presentation helpers; none of them exist in Setpoint today.            */

/* A framed "stage" so a dialog or sheet can be shown open, in place,
   without position:fixed taking over the whole document. */
.stage {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 420px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  background: hsl(var(--background));
  overflow: hidden;
}
.stage-under { position: relative; flex: 1 1 0%; min-width: 0; padding: 20px; }
.stage-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); }
.stage-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow: auto; }
.stage-overlay > .dialog { z-index: 60; }

/* Breadcrumb — Academy › Lessons › … */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
.breadcrumb b { font-weight: 500; color: hsl(var(--foreground)); }

/* Audience chip — one recipient, with the channel it resolves to */
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12px; line-height: 16px; background: hsl(var(--card)); }
.chip-avatar { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: 10px; font-weight: 600; }
.chip-channel { color: hsl(var(--muted-foreground)); }
.chip-off { opacity: 0.5; }

/* Before → after diff chips for the audit trail */
.diff { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; }
.diff-key { color: hsl(var(--muted-foreground)); }
.diff-from { border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 1px 6px; color: hsl(var(--muted-foreground)); text-decoration: line-through; }
.diff-to { border: 1px solid hsl(var(--success) / 0.4); background: hsl(var(--success) / 0.12); border-radius: var(--radius-sm); padding: 1px 6px; color: hsl(var(--success)); }
.diff-arrow { color: hsl(var(--muted-foreground)); }

/* Collapsed raw payload — native <details>, no script */
.raw { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); }
.raw > summary { cursor: pointer; list-style: none; padding: 8px 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); }
.raw > summary::-webkit-details-marker { display: none; }
.raw > summary::before { content: "\25B8"; font-size: 10px; }
.raw[open] > summary::before { content: "\25BE"; }
.raw > summary:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.5); }
.raw[open] > summary { border-bottom: 1px solid hsl(var(--border)); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.raw > .code-block { border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: transparent; }

/* Mono block for a raw before/after payload */
.code-block { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: hsl(var(--foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: 12px; overflow-x: auto; white-space: pre; }

/* Horizontal scroll for anything wider than its card on a narrow screen */
.scroll-x { max-width: 100%; overflow-x: auto; }

/* CSV column tokens */
.col-token { font-family: var(--font-mono); font-size: 11px; line-height: 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); padding: 2px 6px; }

/* Coach PWA message cards */
.msg { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); padding: 12px; }
.msg-in { background: hsl(var(--muted)); border-color: hsl(var(--border)); }
.msg-out { background: hsl(var(--accent)); border-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.msg-meta { font-size: 11px; line-height: 16px; color: hsl(var(--muted-foreground)); }

/* Plain index page (no sidebar) */
.index-page { max-width: 840px; margin: 0 auto; padding: 48px 24px 64px; }
.index-card { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); padding: 14px 16px; }
.index-card:hover { border-color: hsl(var(--ring) / 0.5); background: hsl(var(--accent) / 0.4); }
.index-letter { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-md); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.index-card > span:last-child { display: block; min-width: 0; }
.index-title { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.index-what { display: block; font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); margin: 2px 0 0; }

/* The fixed mockup ribbon sits over the page header's actions; reserve a gutter. */
.mockup-ribbon ~ .app .page-header { padding-right: 172px; }
/* Two-up cards that should keep their natural height instead of stretching. */
.grid-2.align-start { align-items: start; }