/*
 * =============================================================================
 * BIZ-CATALYST CORE STYLESHEET
 * biz-catalyst-core.css — v1.0
 * =============================================================================
 *
 * The single shared stylesheet for all Biz-Catalyst platform pages and
 * applettes. Provides the canonical implementation of every shared UI
 * component, eliminating the ~2,000 lines of per-file duplication identified
 * in the platform and Pencil In UI audits.
 *
 * LOAD ORDER (required):
 *   1. Google Fonts @import (must be first line of compiled output)
 *   2. bc-tokens.css          — design tokens (colours, spacing, type)
 *   3. biz-catalyst-core.css  — this file
 *   4. [app].css              — app-specific overrides only
 *
 * PREFIX CONVENTION:
 *   All class names use the .bc- prefix to prevent collisions with
 *   app-specific classes and third-party libraries (e.g. FullCalendar).
 *
 * DESIGN DECISIONS (documented here to prevent regression):
 *
 *   MODALS: One canonical pattern. .bc-modal is hidden by default (display:none).
 *   Opened via .bc-modal--open (display:flex). No .hidden toggle, no inline
 *   style hacks. JS must only add/remove the --open modifier.
 *
 *   DANGER BUTTONS: Two explicit variants.
 *   .bc-btn-danger      = solid red, white text (destructive action, high confidence)
 *   .bc-btn-danger-soft = tinted bg, red text (destructive but recoverable)
 *   The old single .btn-danger that meant both things is retired.
 *
 *   BADGES: One unified system. .bc-badge is the base. Semantic variants
 *   (.bc-badge--success etc.) and booking-status variants
 *   (.bc-badge--status-confirmed etc.) are modifiers. No separate
 *   .badge, .status-badge, or inline styles.
 *
 *   NAV: Mobile-first with a hamburger. Toggle via .bc-nav--open on the <nav>
 *   element. All 7+ Pencil In app pages had no mobile nav — this fixes that.
 *
 *   TENANT BRANDING: Primary action colour uses --bc-brand-primary throughout
 *   (not --bc-primary). Tenant branding is applied automatically because
 *   bc-tokens.css defaults --bc-brand-primary to --bc-primary.
 *
 * =============================================================================
 */


/* =============================================================================
   SECTION 1: CSS RESET
   Modern, minimal reset. Preserves useful browser defaults where possible.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Prevent font-size inflation on orientation change (iOS) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth scrolling for anchor links */
  scroll-behavior: smooth;
}

body {
  font-family: var(--bc-font);
  font-size: var(--bc-font-size-base);
  font-weight: var(--bc-font-weight-normal);
  line-height: var(--bc-line-height);
  color: var(--bc-text);
  background-color: var(--bc-page-bg);
  /* Prevent horizontal scroll from overflowing content */
  overflow-x: hidden;
  /* Improve font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove list styles from lists that have a role (accessible reset) */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Sensible media defaults */
img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls (browsers don't do this by default) */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove built-in form appearance where we're providing our own */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}

/* Anchor reset — apps apply their own link styles contextually */
a {
  color: inherit;
  text-decoration: none;
}

/* Prevent text overflow in table cells */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Hidden attribute should always work */
[hidden] {
  display: none !important;
}


/* =============================================================================
   SECTION 2: BASE TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  line-height: var(--bc-line-height-tight);
  font-weight: var(--bc-font-weight-semibold);
  color: var(--bc-text);
}

h1 { font-size: var(--bc-font-size-2xl); }
h2 { font-size: var(--bc-font-size-xl); }
h3 { font-size: var(--bc-font-size-lg); }
h4 { font-size: var(--bc-font-size-base); }
h5 { font-size: var(--bc-font-size-sm); }
h6 { font-size: var(--bc-font-size-xs); }

p {
  max-width: 70ch; /* Prevent very long lines in body copy */
}

/* Remove max-width for paragraphs that are layout children, not prose */
.bc-card p,
.bc-modal p,
.bc-form-hint,
.bc-nav p {
  max-width: none;
}

strong, b {
  font-weight: var(--bc-font-weight-semibold);
}

small {
  font-size: var(--bc-font-size-sm);
}

code, kbd, samp, pre {
  font-family: var(--bc-font-mono);
  font-size: var(--bc-font-size-sm);
}

code {
  background: var(--bc-surface-raised);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  padding: 0.1em 0.3em;
}

pre {
  background: var(--bc-surface-raised);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  padding: var(--bc-space-4);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

/* Inline links within prose */
.bc-link {
  color: var(--bc-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bc-transition);
}

.bc-link:hover {
  color: var(--bc-brand-primary-hover, var(--bc-primary-hover));
}

/* Muted / secondary text */
.bc-text-muted {
  color: var(--bc-text-muted);
  font-size: var(--bc-font-size-sm);
}


/* =============================================================================
   SECTION 3: LAYOUT
   ============================================================================= */

/* Content container — constrains page width */
.bc-container {
  width: 100%;
  max-width: var(--bc-container-max);
  margin-inline: auto;
  padding-inline: var(--bc-space-4);
  padding-top: var(--bc-space-6);
}

@media (min-width: 768px) {
  .bc-container {
    padding-inline: var(--bc-space-6);
  }
}

/* Page body wrapper — sits below the fixed header */
.bc-page {
  padding-top: var(--bc-header-height);
  min-height: 100vh;
}

/* Page-level header (title + subtitle, not the nav) */
.bc-page-header {
  padding: var(--bc-space-6) 0 var(--bc-space-4);
}

.bc-page-header h1 {
  font-size: var(--bc-font-size-2xl);
  font-weight: var(--bc-font-weight-bold);
  color: var(--bc-text);
  line-height: var(--bc-line-height-tight);
}

.bc-page-header p {
  color: var(--bc-text-muted);
  margin-top: var(--bc-space-1);
  font-size: var(--bc-font-size-sm);
}


/* =============================================================================
   SECTION 4: HEADER / NAVIGATION
   The dark platform nav bar. Consistent across all apps.
   Mobile-first: hamburger at small sizes, horizontal at ≥768px.
   ============================================================================= */

.bc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--bc-header-height);
  background: var(--bc-header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--bc-space-4);
  /* Prevent content flash through on mobile when menu opens */
  overflow: visible;
}

/* ── Brand / App Name ─────────────────────────────────────────── */

.bc-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  color: var(--bc-header-text-active);
  font-size: var(--bc-font-size-lg);
  font-weight: var(--bc-font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/*
 * App accent bracket: a coloured L-shape before the app name.
 * Set --bc-nav-accent to the current app's --bc-app-* token
 * on a <body> or <nav> element. e.g.:
 *   <nav class="bc-nav" style="--bc-nav-accent: var(--bc-app-pencil-in)">
 */
.bc-nav__brand::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.4em;
  border-radius: 2px;
  background: var(--bc-nav-accent, var(--bc-brand-primary));
  flex-shrink: 0;
}

/* ── Hamburger toggle (mobile only) ──────────────────────────── */

.bc-nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--bc-space-1);
  border-radius: var(--bc-radius-sm);
  flex-shrink: 0;
  /* Show on mobile, hide on desktop (see media query below) */
}

.bc-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bc-header-text);
  border-radius: 2px;
  transition: transform var(--bc-transition), opacity var(--bc-transition);
  transform-origin: center;
}

/* Animate to ✕ when menu is open */
.bc-nav--open .bc-nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.bc-nav--open .bc-nav__toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.bc-nav--open .bc-nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Navigation links ─────────────────────────────────────────── */

/*
 * Mobile: links panel drops down below the fixed header, full-width overlay.
 * On desktop they sit inline in the nav bar.
 */

.bc-nav__links {
  display: none; /* Hidden on mobile; shown via --open modifier */
  position: fixed;
  top: var(--bc-header-height);
  left: 0;
  right: 0;
  background: var(--bc-header-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--bc-space-3) var(--bc-space-4);
  flex-direction: column;
  gap: 0;
  /* Allow scroll if many links */
  max-height: calc(100vh - var(--bc-header-height));
  overflow-y: auto;
}

.bc-nav--open .bc-nav__links {
  display: flex;
}

.bc-nav__links a {
  color: var(--bc-header-text);
  font-size: var(--bc-font-size-sm);
  font-weight: var(--bc-font-weight-medium);
  text-decoration: none;
  padding: var(--bc-space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--bc-transition);
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
}

.bc-nav__links a:last-child {
  border-bottom: none;
}

.bc-nav__links a:hover,
.bc-nav__links a.bc-active {
  color: var(--bc-header-text-active);
}

/* Active link indicator — bottom border on desktop, left bar on mobile */
.bc-nav__links a.bc-active {
  position: relative;
}

/* ── Right-side controls (bell, "All Apps" link) ──────────────── */

.bc-nav__right {
  display: flex;
  align-items: center;
  gap: var(--bc-space-3);
  flex-shrink: 0;
}

.bc-nav__right a {
  color: var(--bc-header-text);
  font-size: var(--bc-font-size-xs);
  font-weight: var(--bc-font-weight-medium);
  text-decoration: none;
  transition: color var(--bc-transition);
  white-space: nowrap;
}

.bc-nav__right a:hover {
  color: var(--bc-header-text-active);
}

/* Busybody bell renders into #notification-bell — no styles needed here */

/* ── Desktop layout ───────────────────────────────────────────── */

@media (min-width: 768px) {
  .bc-nav {
    padding-inline: var(--bc-space-8);
  }

  .bc-nav__toggle {
    display: none; /* Hide hamburger on desktop */
  }

  .bc-nav__links {
    /* Reset mobile panel styles */
    display: flex;
    position: static;
    background: none;
    border-top: none;
    padding: 0;
    flex-direction: row;
    gap: var(--bc-space-1);
    max-height: none;
    overflow: visible;
    flex: 1;
    padding-inline: var(--bc-space-6);
  }

  .bc-nav__links a {
    padding: var(--bc-space-2) var(--bc-space-3);
    border-bottom: none;
    border-radius: var(--bc-radius-sm);
  }

  .bc-nav__links a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .bc-nav__links a.bc-active {
    color: var(--bc-header-text-active);
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ── Notification banners container ───────────────────────────── */
/* Busybody renders banners into this element, which sits below the nav */

#notification-banners {
  position: fixed;
  top: var(--bc-header-height);
  left: 0;
  right: 0;
  z-index: 190;
}


/* =============================================================================
   SECTION 5: BUTTONS
   Single authoritative definition for all button variants.

   Variants:
     .bc-btn-primary       Standard primary action (brand colour)
     .bc-btn-secondary     Secondary / cancel actions
     .bc-btn-danger        Destructive: solid red, white text
     .bc-btn-danger-soft   Destructive but recoverable: tinted bg, red text
     .bc-btn-success       Positive / approve actions
     .bc-btn-ghost         Transparent bg, border only
     .bc-btn-link          Looks like a text link, not a button

   Size modifiers:
     .bc-btn--sm           Small
     .bc-btn--lg           Large

   State modifiers:
     .bc-btn--block        Full width
     .bc-btn--loading      Shows spinner, disables interaction
   ============================================================================= */

.bc-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  /* Sizing */
  padding: var(--bc-space-2) var(--bc-space-5);
  min-height: 38px;
  /* Typography */
  font-size: var(--bc-font-size-sm);
  font-weight: var(--bc-font-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  /* Shape */
  border-radius: var(--bc-radius);
  border: 1px solid transparent;
  /* Interaction */
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--bc-transition),
              color var(--bc-transition),
              border-color var(--bc-transition),
              box-shadow var(--bc-transition),
              opacity var(--bc-transition);
  /* Prevent text selection during fast clicks */
  -webkit-tap-highlight-color: transparent;
}

/* Disabled state — applies to :disabled attribute AND .bc-btn--disabled class */
.bc-btn:disabled,
.bc-btn[aria-disabled="true"],
.bc-btn--loading {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Focus visible (keyboard navigation) */
.bc-btn:focus-visible {
  outline: 2px solid var(--bc-brand-primary);
  outline-offset: 2px;
}

/* ── Primary ─────────────────────────────────────────────────── */

.bc-btn-primary {
  background: var(--bc-brand-primary);
  color: #ffffff;
  border-color: var(--bc-brand-primary);
}

.bc-btn-primary:hover:not(:disabled):not([aria-disabled="true"]):not(.bc-btn--loading) {
  background: var(--bc-brand-primary-hover, var(--bc-primary-hover));
  border-color: var(--bc-brand-primary-hover, var(--bc-primary-hover));
}

/* ── Secondary ───────────────────────────────────────────────── */

.bc-btn-secondary {
  background: var(--bc-surface-raised);
  color: var(--bc-text);
  border-color: var(--bc-border-strong);
}

.bc-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]):not(.bc-btn--loading) {
  background: var(--bc-border);
  border-color: var(--bc-border-strong);
}

/* ── Danger (solid — high-consequence destructive) ───────────── */

.bc-btn-danger {
  background: var(--bc-danger);
  color: #ffffff;
  border-color: var(--bc-danger);
}

.bc-btn-danger:hover:not(:disabled):not([aria-disabled="true"]):not(.bc-btn--loading) {
  background: var(--bc-danger-hover);
  border-color: var(--bc-danger-hover);
}

/* ── Danger Soft (tinted — recoverable destructive) ──────────── */

.bc-btn-danger-soft {
  background: var(--bc-danger-tint);
  color: var(--bc-danger);
  border-color: var(--bc-danger-border);
}

.bc-btn-danger-soft:hover:not(:disabled):not([aria-disabled="true"]):not(.bc-btn--loading) {
  background: var(--bc-danger-border);
}

/* ── Success ──────────────────────────────────────────────────── */

.bc-btn-success {
  background: var(--bc-success);
  color: #ffffff;
  border-color: var(--bc-success);
}

.bc-btn-success:hover:not(:disabled):not([aria-disabled="true"]):not(.bc-btn--loading) {
  background: var(--bc-success-hover);
  border-color: var(--bc-success-hover);
}

/* ── Ghost (outline only) ─────────────────────────────────────── */

.bc-btn-ghost {
  background: transparent;
  color: var(--bc-brand-primary);
  border-color: var(--bc-brand-primary);
}

.bc-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]):not(.bc-btn--loading) {
  background: var(--bc-brand-primary-tint, var(--bc-primary-tint));
}

/* ── Link style ───────────────────────────────────────────────── */

.bc-btn-link {
  background: transparent;
  color: var(--bc-brand-primary);
  border-color: transparent;
  padding-inline: var(--bc-space-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: auto;
}

.bc-btn-link:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--bc-brand-primary-hover, var(--bc-primary-hover));
}

/* ── Size modifiers ───────────────────────────────────────────── */

.bc-btn--sm {
  padding: var(--bc-space-1) var(--bc-space-3);
  font-size: var(--bc-font-size-xs);
  min-height: 30px;
}

.bc-btn--lg {
  padding: var(--bc-space-3) var(--bc-space-6);
  font-size: var(--bc-font-size-base);
  min-height: 48px;
}

/* ── Block modifier ───────────────────────────────────────────── */

.bc-btn--block {
  width: 100%;
}

/* ── Loading state ────────────────────────────────────────────── */

.bc-btn--loading::before {
  content: '';
  display: block;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bc-spin 0.6s linear infinite;
  flex-shrink: 0;
}


/* =============================================================================
   SECTION 6: CARDS
   ============================================================================= */

.bc-card {
  background: var(--bc-surface);
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-border);
  padding: var(--bc-space-6);
  box-shadow: var(--bc-shadow);
}

/* Elevated variant — for modals, dropdowns, floating panels */
.bc-card--elevated {
  box-shadow: var(--bc-shadow-md);
}

/* Large variant — public-facing pages (book.html, consent.html etc.) */
.bc-card--lg {
  border-radius: var(--bc-radius-lg);
  padding: var(--bc-space-8);
}

/* Flat variant — inset sections, table panels */
.bc-card--flat {
  background: var(--bc-surface-raised);
  box-shadow: none;
}

/* Highlighted variant — warning, e.g. pending stat card */
.bc-card--warning {
  background: var(--bc-warning-tint);
  border-color: var(--bc-warning-border);
}

/* Card title */
.bc-card__title {
  font-size: var(--bc-font-size-lg);
  font-weight: var(--bc-font-weight-semibold);
  color: var(--bc-text);
  margin-bottom: var(--bc-space-4);
}

/* Card header (title + action button in a row) */
.bc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-4);
  margin-bottom: var(--bc-space-4);
}

.bc-card__header h2,
.bc-card__header h3 {
  margin: 0;
}

.bc-card--equal-height {
  display: flex;
  flex-direction: column;
}
.bc-card--equal-height .bc-card__body {
  flex: 1;
}

/* ── Stat cards ───────────────────────────────────────────────── */

.bc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--bc-space-4);
}

.bc-stat-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  padding: var(--bc-space-5);
  box-shadow: var(--bc-shadow);
  text-align: center;
  /* Support conditional background from JS if needed */
  transition: background var(--bc-transition);
}

.bc-stat-card__value {
  font-size: var(--bc-font-size-3xl);
  font-weight: var(--bc-font-weight-bold);
  color: var(--bc-text);
  line-height: 1.1;
}

.bc-stat-card__label {
  font-size: var(--bc-font-size-sm);
  color: var(--bc-text-muted);
  margin-top: var(--bc-space-1);
}


/* =============================================================================
   SECTION 7: FORMS
   ============================================================================= */

/* ── Form group (label + control + hint) ──────────────────────── */

.bc-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-1);
  margin-bottom: var(--bc-space-4);
}

.bc-form-group:last-child {
  margin-bottom: 0;
}

/* ── Label ────────────────────────────────────────────────────── */

.bc-label {
  font-size: var(--bc-font-size-sm);
  font-weight: var(--bc-font-weight-medium);
  color: var(--bc-text);
}

/* Required asterisk */
.bc-label--required::after {
  content: ' *';
  color: var(--bc-danger);
}

/* ── Base input styles ────────────────────────────────────────── */

.bc-input,
.bc-select,
.bc-textarea {
  width: 100%;
  padding: var(--bc-space-2) var(--bc-space-3);
  font-size: var(--bc-font-size-sm);
  font-family: inherit;
  color: var(--bc-text);
  background: var(--bc-surface);
  border: 1px solid var(--bc-border-strong);
  border-radius: var(--bc-radius);
  line-height: 1.5;
  transition: border-color var(--bc-transition), box-shadow var(--bc-transition);
}

.bc-input::placeholder,
.bc-textarea::placeholder {
  color: var(--bc-text-disabled);
}

.bc-input:focus,
.bc-select:focus,
.bc-textarea:focus {
  outline: none;
  border-color: var(--bc-brand-primary);
  box-shadow: 0 0 0 3px var(--bc-brand-primary-tint, var(--bc-primary-tint));
}

.bc-input:disabled,
.bc-select:disabled,
.bc-textarea:disabled,
.bc-input[readonly],
.bc-textarea[readonly] {
  background: var(--bc-surface-raised);
  color: var(--bc-text-muted);
  cursor: not-allowed;
  border-color: var(--bc-border);
}

/* ── Select ───────────────────────────────────────────────────── */

.bc-select {
  padding-right: var(--bc-space-8); /* Room for the chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--bc-space-3) center;
  cursor: pointer;
}

/* ── Textarea ─────────────────────────────────────────────────── */

.bc-textarea {
  resize: vertical;
  min-height: 100px;
}

/* ── Monospace input (booking references, feed URLs) ────────────  */

.bc-input--mono {
  font-family: var(--bc-font-mono);
  letter-spacing: 0.08em;
}

/* ── Error state ──────────────────────────────────────────────── */

.bc-input--error,
.bc-select--error,
.bc-textarea--error {
  border-color: var(--bc-danger);
}

.bc-input--error:focus,
.bc-select--error:focus,
.bc-textarea--error:focus {
  box-shadow: 0 0 0 3px var(--bc-danger-tint);
}

/* ── Hint / helper text ───────────────────────────────────────── */

.bc-form-hint {
  font-size: var(--bc-font-size-xs);
  color: var(--bc-text-muted);
}

/* ── Form error message ───────────────────────────────────────── */

.bc-form-error {
  font-size: var(--bc-font-size-xs);
  color: var(--bc-danger);
}

/* ── Two-column form row ──────────────────────────────────────── */

.bc-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bc-space-4);
}

@media (min-width: 480px) {
  .bc-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Toggle switch ────────────────────────────────────────────── */

/*
 * HTML pattern:
 *   <label class="bc-toggle">
 *     <input type="checkbox" class="bc-toggle__input">
 *     <span class="bc-toggle__slider"></span>
 *     <span class="bc-toggle__label">Enable thing</span>
 *   </label>
 */

.bc-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-3);
  cursor: pointer;
  user-select: none;
}

.bc-toggle__input {
  /* Visually hidden but accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bc-toggle__slider {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  background: var(--bc-border-strong);
  border-radius: var(--bc-radius-full);
  flex-shrink: 0;
  transition: background var(--bc-transition);
}

.bc-toggle__slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--bc-shadow-sm);
  transition: transform var(--bc-transition);
}

.bc-toggle__input:checked + .bc-toggle__slider {
  background: var(--bc-brand-primary);
}

.bc-toggle__input:checked + .bc-toggle__slider::after {
  transform: translateX(22px);
}

.bc-toggle__input:focus-visible + .bc-toggle__slider {
  outline: 2px solid var(--bc-brand-primary);
  outline-offset: 2px;
}

.bc-toggle__label {
  font-size: var(--bc-font-size-sm);
  color: var(--bc-text);
}

/* ── File upload drop zone ────────────────────────────────────── */

.bc-upload-area {
  border: 2px dashed var(--bc-border-strong);
  border-radius: var(--bc-radius);
  padding: var(--bc-space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--bc-transition), background var(--bc-transition);
}

.bc-upload-area:hover,
.bc-upload-area--dragover {
  border-color: var(--bc-brand-primary);
  background: var(--bc-brand-primary-tint, var(--bc-primary-tint));
}

.bc-upload-area input[type="file"] {
  /* Accessible but visually hidden — the whole zone is the trigger */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bc-upload-area__hint {
  font-size: var(--bc-font-size-xs);
  color: var(--bc-text-muted);
  margin-top: var(--bc-space-1);
}


/* =============================================================================
   SECTION 8: BADGES
   One unified system. .bc-badge is the base component.

   Semantic modifiers (general purpose):
     .bc-badge--success
     .bc-badge--warning
     .bc-badge--danger
     .bc-badge--info
     .bc-badge--neutral

   Booking status modifiers (Pencil In specific, but defined here so other
   applettes that handle bookings get them for free):
     .bc-badge--status-request
     .bc-badge--status-consultation
     .bc-badge--status-fee-pending
     .bc-badge--status-confirmed
     .bc-badge--status-completed
     .bc-badge--status-declined
     .bc-badge--status-cancelled
     .bc-badge--status-no-show
     .bc-badge--status-withdrawn
     .bc-badge--status-expired

   Size modifier:
     .bc-badge--pill     Full-radius pill shape (default is rounded rectangle)
   ============================================================================= */

.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  padding: 0.2em 0.6em;
  font-size: var(--bc-font-size-xs);
  font-weight: var(--bc-font-weight-medium);
  line-height: 1.4;
  border-radius: var(--bc-radius-sm);
  white-space: nowrap;
  /* Default: neutral appearance */
  background: var(--bc-surface-raised);
  color: var(--bc-text-muted);
  border: 1px solid var(--bc-border);
}

/* Pill shape modifier */
.bc-badge--pill {
  border-radius: var(--bc-radius-full);
}

/* ── Semantic variants ────────────────────────────────────────── */

.bc-badge--success {
  background: var(--bc-success-tint);
  color: var(--bc-success);
  border-color: var(--bc-success-border);
}

.bc-badge--warning {
  background: var(--bc-warning-tint);
  color: var(--bc-warning);
  border-color: var(--bc-warning-border);
}

.bc-badge--danger {
  background: var(--bc-danger-tint);
  color: var(--bc-danger);
  border-color: var(--bc-danger-border);
}

.bc-badge--info {
  background: var(--bc-info-tint);
  color: var(--bc-info);
  border-color: var(--bc-info-border);
}

.bc-badge--neutral {
  background: var(--bc-surface-raised);
  color: var(--bc-text-muted);
  border-color: var(--bc-border-strong);
}

/* ── Booking status variants ──────────────────────────────────── */

.bc-badge--status-request {
  background: var(--bc-warning-tint);    /* #fef3c7 */
  color: #92400e;
  border-color: var(--bc-warning-border);
}

.bc-badge--status-consultation {
  background: var(--bc-info-tint);       /* #dbeafe */
  color: #1e40af;
  border-color: var(--bc-info-border);
}

.bc-badge--status-fee-pending {
  background: #fce7f3;
  color: #9d174d;
  border-color: #fbcfe8;
}

.bc-badge--status-confirmed {
  background: var(--bc-success-tint);   /* #d1fae5 */
  color: #065f46;
  border-color: var(--bc-success-border);
}

.bc-badge--status-completed {
  background: var(--bc-border);          /* #e5e7eb */
  color: #374151;
  border-color: var(--bc-border-strong);
}

.bc-badge--status-declined,
.bc-badge--status-cancelled {
  background: var(--bc-danger-tint);    /* #fee2e2 */
  color: #991b1b;
  border-color: var(--bc-danger-border);
}

.bc-badge--status-no-show {
  background: #fecaca;
  color: #7f1d1d;
  border-color: #fca5a5;
}

.bc-badge--status-withdrawn,
.bc-badge--status-expired {
  background: #f3f4f6;
  color: #6b7280;
  border-color: var(--bc-border-strong);
}

/* Tab count badge (sits inside a .bc-tab button) */
.bc-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.3em;
  font-size: var(--bc-font-size-xs);
  font-weight: var(--bc-font-weight-medium);
  line-height: 1;
  border-radius: var(--bc-radius-full);
  background: var(--bc-danger);
  color: #ffffff;
  margin-left: var(--bc-space-1);
}


/* =============================================================================
   SECTION 9: TABS
   Horizontal scrollable on mobile. Single canonical implementation.
   ============================================================================= */

.bc-tabs {
  display: flex;
  border-bottom: 2px solid var(--bc-border);
  margin-bottom: var(--bc-space-6);
  overflow-x: auto;
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}

.bc-tabs::-webkit-scrollbar {
  display: none;
}

.bc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  padding: var(--bc-space-3) var(--bc-space-4);
  font-size: var(--bc-font-size-sm);
  font-weight: var(--bc-font-weight-medium);
  color: var(--bc-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* Overlap container border */
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--bc-transition), border-color var(--bc-transition);
  flex-shrink: 0;
}

.bc-tab:hover {
  color: var(--bc-text);
}

.bc-tab.bc-active {
  color: var(--bc-brand-primary);
  border-bottom-color: var(--bc-brand-primary);
}

.bc-tab:focus-visible {
  outline: 2px solid var(--bc-brand-primary);
  outline-offset: -2px;
}

/* Tab content panels */
.bc-tab-panel {
  display: none;
}

.bc-tab-panel.bc-active {
  display: block;
}


/* =============================================================================
   SECTION 10: MODALS
   One canonical pattern. Eliminates the three conflicting patterns in the audit.

   HTML structure:
     <div class="bc-modal" id="my-modal" role="dialog" aria-modal="true" aria-labelledby="my-modal-title">
       <div class="bc-modal__panel">
         <div class="bc-modal__header">
           <h2 id="my-modal-title" class="bc-modal__title">Title</h2>
           <button class="bc-modal__close" aria-label="Close">&times;</button>
         </div>
         <div class="bc-modal__body">...</div>
         <div class="bc-modal__footer">
           <button class="bc-btn bc-btn-secondary">Cancel</button>
           <button class="bc-btn bc-btn-primary">Save</button>
         </div>
       </div>
     </div>

   JS pattern (the ONLY pattern — no .hidden toggle, no inline style):
     document.getElementById('my-modal').classList.add('bc-modal--open');
     document.getElementById('my-modal').classList.remove('bc-modal--open');
   ============================================================================= */

.bc-modal {
  display: none; /* Hidden by default */
  position: fixed;
  inset: 0;
  background: var(--bc-overlay);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: var(--bc-space-4);
  /* Animate in */
  animation: bc-fade-in var(--bc-transition-slow) ease;
}

.bc-modal--open {
  display: flex;
}

.bc-modal__panel {
  background: var(--bc-surface);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Slide up on open */
  animation: bc-slide-up var(--bc-transition-slow) ease;
}

/* Wide modal for more complex forms */
.bc-modal--wide .bc-modal__panel {
  max-width: 720px;
}

.bc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-4);
  padding: var(--bc-space-5) var(--bc-space-6);
  border-bottom: 1px solid var(--bc-border);
  flex-shrink: 0;
}

.bc-modal__title {
  font-size: var(--bc-font-size-lg);
  font-weight: var(--bc-font-weight-semibold);
  margin: 0;
}

.bc-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--bc-radius-sm);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--bc-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--bc-transition), background var(--bc-transition);
}

.bc-modal__close:hover {
  color: var(--bc-text);
  background: var(--bc-surface-raised);
}

.bc-modal__body {
  padding: var(--bc-space-6);
  flex: 1;
  overflow-y: auto;
}

.bc-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bc-space-3);
  padding: var(--bc-space-4) var(--bc-space-6);
  border-top: 1px solid var(--bc-border);
  flex-shrink: 0;
  /* Stack on very small screens */
  flex-wrap: wrap;
}

/* Modal-level tabs (inside modal body, e.g. Details / Conversation / Images) */
.bc-modal__body .bc-tabs {
  margin-top: calc(-1 * var(--bc-space-6));
  margin-inline: calc(-1 * var(--bc-space-6));
  padding-inline: var(--bc-space-6);
  margin-bottom: var(--bc-space-4);
  border-bottom-color: var(--bc-border);
}


/* =============================================================================
   SECTION 11: TOASTS
   Busybody handles toast rendering via BizNotifications.toast().
   We define the .bc-toast structure here so apps can also emit toasts
   from plain JS without Busybody if needed (e.g. offline fallback).
   These classes match Busybody's output class names for consistency.

   Busybody injects: biz-toast, biz-toast-success, biz-toast-error,
   biz-toast-warning, biz-toast-info — those are external and not here.
   This section provides a bc-prefixed fallback system.
   ============================================================================= */

/* Toast container — fixed to top-right */
.bc-toasts {
  position: fixed;
  top: calc(var(--bc-header-height) + var(--bc-space-4));
  right: var(--bc-space-4);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-2);
  width: min(320px, calc(100vw - var(--bc-space-8)));
  pointer-events: none; /* Let clicks through to page */
}

.bc-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-radius: var(--bc-radius);
  border: 1px solid transparent;
  box-shadow: var(--bc-shadow-md);
  pointer-events: auto;
  animation: bc-slide-in-right var(--bc-transition) ease;
  background: var(--bc-surface);
}

.bc-toast__message {
  font-size: var(--bc-font-size-sm);
  line-height: 1.5;
  flex: 1;
}

.bc-toast--success {
  background: var(--bc-success-tint);
  border-color: var(--bc-success-border);
  color: var(--bc-success);
}

.bc-toast--error {
  background: var(--bc-danger-tint);
  border-color: var(--bc-danger-border);
  color: var(--bc-danger);
}

.bc-toast--warning {
  background: var(--bc-warning-tint);
  border-color: var(--bc-warning-border);
  color: var(--bc-warning);
}

.bc-toast--info {
  background: var(--bc-info-tint);
  border-color: var(--bc-info-border);
  color: var(--bc-info);
}


/* =============================================================================
   SECTION 12: UTILITY CLASSES
   Deliberately minimal — full utility systems belong to app stylesheets or
   a dedicated utilities file. These are only the universally-needed ones.
   ============================================================================= */

/* Spinner */
.bc-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--bc-border-strong);
  border-top-color: var(--bc-brand-primary);
  border-radius: 50%;
  animation: bc-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.bc-spinner--sm {
  width: 1rem;
  height: 1rem;
}

.bc-spinner--lg {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

/* Loading state — page or section */
.bc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-3);
  padding: var(--bc-space-12);
  color: var(--bc-text-muted);
  font-size: var(--bc-font-size-sm);
  text-align: center;
}

/* Empty state */
.bc-empty-state {
  padding: var(--bc-space-12) var(--bc-space-6);
  text-align: center;
  color: var(--bc-text-muted);
}

.bc-empty-state h3 {
  font-size: var(--bc-font-size-lg);
  font-weight: var(--bc-font-weight-medium);
  color: var(--bc-text);
  margin-bottom: var(--bc-space-2);
}

.bc-empty-state p {
  font-size: var(--bc-font-size-sm);
  max-width: 36ch;
  margin-inline: auto;
}

/* Alert / inline message block */
.bc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  padding: var(--bc-space-4);
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-border);
  font-size: var(--bc-font-size-sm);
  line-height: 1.5;
  background: var(--bc-surface-raised);
}

.bc-alert--success {
  background: var(--bc-success-tint);
  border-color: var(--bc-success-border);
  color: var(--bc-success);
}

.bc-alert--warning {
  background: var(--bc-warning-tint);
  border-color: var(--bc-warning-border);
  color: var(--bc-warning);
}

.bc-alert--danger {
  background: var(--bc-danger-tint);
  border-color: var(--bc-danger-border);
  color: var(--bc-danger);
}

.bc-alert--info {
  background: var(--bc-info-tint);
  border-color: var(--bc-info-border);
  color: var(--bc-info);
}

/* Divider */
.bc-divider {
  border: none;
  border-top: 1px solid var(--bc-border);
  margin-block: var(--bc-space-6);
}

/* Visually hidden (accessible) */
.bc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Generic hidden helper */
.bc-hidden {
  display: none !important;
}

/* Text alignment */
.bc-text-center { text-align: center; }
.bc-text-right  { text-align: right; }
.bc-text-left   { text-align: left; }

/* Truncate single-line text */
.bc-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Pagination ───────────────────────────────────────────────── */

.bc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  margin-top: var(--bc-space-6);
}


/* =============================================================================
   SECTION 13: KEYFRAME ANIMATIONS
   ============================================================================= */

@keyframes bc-spin {
  to { transform: rotate(360deg); }
}

@keyframes bc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bc-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bc-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* =============================================================================
   SECTION 14: REDUCED MOTION
   Respect user preference for reduced motion.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}