/* MOVE OS — design system (locked in slice 1, reused everywhere).
   Apple / Notion inspired: light, neutral, one restrained accent (MOVE green),
   Apple system font, subtle borders over heavy cards, generous whitespace. */

:root {
  --bg: #ffffff;
  --bg-sidebar: #fbfbfa;
  --bg-subtle: #f7f7f5;
  --bg-hover: #f4f4f2;

  --text: #1d1d1f;
  --text-secondary: #6b6b70;
  --text-tertiary: #9a9aa0;

  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.13);

  /* The single restrained accent — MOVE Cadmium Green. */
  --accent: #11726b;
  --accent-strong: #0d5c56;
  --accent-soft: rgba(17, 114, 107, 0.09);

  --radius: 8px;
  --radius-sm: 6px;
  --sidebar-w: 248px;

  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---- App frame ------------------------------------------------------------ */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { padding: 4px 10px 22px; }
.brand__mark {
  display: block;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--text);
}
/* Uploaded logo replacing the wordmark in the sidebar. */
.brand__logo { display: block; max-height: 30px; max-width: 180px; width: auto; object-fit: contain; }
.brand__sub {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.nav__item:hover { background: var(--bg-hover); text-decoration: none; color: var(--text); }
.nav__item.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav__item.is-active .nav__dot { background: var(--accent); }
.nav__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-tertiary);
}
.nav__item--muted {
  color: var(--text-tertiary);
  cursor: default;
  justify-content: space-between;
}
.nav__item--muted:hover { background: transparent; color: var(--text-tertiary); }
.nav__soon {
  font-size: 10.5px;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
}
.nav__section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  padding: 18px 10px 7px;
}
.sidebar__foot {
  margin-top: auto;
  padding: 12px 10px 2px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---- Top bar + view-as switcher ------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 56px;
  padding: 0 40px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__title { font-size: 14px; font-weight: 600; color: var(--text); }

.switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.switcher__label {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.switcher__sep { color: var(--text-tertiary); font-size: 13px; }
.switcher__scope { font-size: 13px; }

.select { position: relative; display: inline-flex; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 28px 5px 11px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b70' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.select select:hover { border-color: var(--text-tertiary); }
.select select:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }

.pillset { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 4px 11px;
  cursor: pointer;
  user-select: none;
}
.pill:hover { border-color: var(--text-tertiary); }
.pill.is-on {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: rgba(17, 114, 107, 0.35);
}
.pill input { accent-color: var(--accent); margin: 0; }

.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { background: var(--bg-subtle); }
.btn.is-disabled { color: var(--text-tertiary); border-color: var(--border); background: var(--bg); cursor: default; pointer-events: none; }

/* Pager (Sessions list) — Prev / page / Next, right-aligned under the table. */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pager__page { font-size: 13px; color: var(--text-secondary); }

/* Transient toast — the ~30s commission-settle hint after marking attendance. Fixed
   and pointer-events:none so it NEVER blocks the next click; fades in/out; a single
   element, so marking sessions in succession refreshes one toast instead of stacking. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  max-width: min(440px, calc(100vw - 32px));
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
}
.toast--show { opacity: 1; transform: translate(-50%, 0); }

/* Business-day / timezone line under "Internal tool" in the sidebar foot. */
.sidebar__when { display: block; margin-top: 4px; color: var(--text-tertiary); }

/* ---- Content -------------------------------------------------------------- */

/* The content area fills the available width so data tables use the whole screen
   on a wide monitor (no wasted right-side gap). Forms and long text keep their own
   readable caps (.form is 760px, .report-note 70ch, etc.), so they never sprawl —
   only tables and lists take the extra room. Narrow/laptop screens are unchanged. */
.content { padding: 32px 40px 64px; }

.page-head { margin-bottom: 24px; }
.page-head__title { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 10px; }
.page-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head__count { font-size: 13px; color: var(--text-secondary); }

.chip {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 11px;
}

.muted { color: var(--text-tertiary); }

/* ---- Table ---------------------------------------------------------------- */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  padding: 11px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-secondary);
}
.table tbody tr:last-child td { border-bottom: none; }
.row { cursor: pointer; }
.row:hover td { background: var(--bg-subtle); }
.cell-name { font-weight: 600; color: var(--text); }
.cell-name a { color: var(--text); }
.cell-name a:hover { color: var(--accent); text-decoration: none; }

/* ---- Badges --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg);
  white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--active { color: var(--accent-strong); background: var(--accent-soft); border-color: rgba(17,114,107,0.2); }
.badge--inactive { color: var(--text-tertiary); background: var(--bg-subtle); }
.badge--country { font-size: 11px; letter-spacing: 0.03em; color: var(--text-tertiary); padding: 2px 7px; }
.badge--tier { font-size: 11px; }
.badge--tier-lead { color: var(--accent-strong); background: var(--accent-soft); border-color: rgba(17,114,107,0.2); }

/* ---- Client profile ------------------------------------------------------- */

.back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.back:hover { color: var(--accent); text-decoration: none; }

.profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.profile-head__name { font-size: 26px; font-weight: 680; letter-spacing: -0.015em; margin: 0 0 6px; }
.profile-head__sub { font-size: 13.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }

.meta {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.meta__row { display: flex; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.meta__row:last-child { border-bottom: none; }
.meta__label { flex: 0 0 150px; font-size: 13px; color: var(--text-tertiary); }
.meta__value { flex: 1 1 auto; font-size: 13.5px; color: var(--text); }
.coach-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }

/* ---- Placeholder sections ------------------------------------------------- */

.section { margin-bottom: 18px; }
.section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.section__title { font-size: 15px; font-weight: 620; margin: 0; }
.section__tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
}
.section__body {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.section__body--empty {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.placeholder { margin: 0; padding: 22px 20px; color: var(--text-tertiary); font-size: 13.5px; }

/* ---- Empty / message states ----------------------------------------------- */

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 40px 28px;
  max-width: 560px;
}
.empty__title { font-size: 16px; font-weight: 620; margin-bottom: 6px; }
.empty__body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }

/* ===========================================================================
   Slice 2 — buttons, forms, cards, package table, settings.
   =========================================================================== */

/* ---- Buttons & page-head action ------------------------------------------- */

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--sm { padding: 4px 10px; font-size: 12.5px; }

.page-head__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.page-head__bar .page-head__title { margin-bottom: 0; }

.profile-head__actions { display: flex; align-items: center; gap: 10px; }

/* ---- Success notice -------------------------------------------------------- */

.notice {
  background: var(--accent-soft);
  border: 1px solid rgba(17, 114, 107, 0.25);
  color: var(--accent-strong);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---- Status badges (package) ---------------------------------------------- */

.badge--expired {
  color: #8a5a00;
  background: rgba(255, 191, 0, 0.14);
  border-color: rgba(255, 191, 0, 0.4);
}
.badge--depleted { color: var(--text-tertiary); background: var(--bg-subtle); }

/* ---- Cards & forms -------------------------------------------------------- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card__section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.card__section-title--spaced {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.form { max-width: 760px; }
.form__group { margin-bottom: 16px; }
.form__label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.req { color: var(--accent); }
.form__input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
}
.form__input:hover { border-color: var(--text-tertiary); }
.form__input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }
textarea.form__input { resize: vertical; line-height: 1.5; }
.form__hint { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.form__hint--above { margin-top: 0; margin-bottom: 10px; }
.form__row { display: flex; gap: 16px; }
.form__row > * { flex: 1 1 0; min-width: 0; }
.form__static { font-size: 14px; padding: 8px 0; color: var(--text); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 4px; }

.form-error {
  background: #fbecec;
  border: 1px solid #e6b8b8;
  color: #8a2b2b;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13px;
}
.form-error ul { margin: 6px 0 0; padding-left: 18px; }

/* Make the shared .select fill the form column. */
.select--block { display: block; }
.select--block select { width: 100%; }

/* ---- Coach checkboxes ------------------------------------------------------ */

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.checkbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
}
.checkbox-card input { position: absolute; top: 11px; right: 11px; accent-color: var(--accent); }
.checkbox-card:has(input:checked),
.checkbox-card.is-on {
  border-color: rgba(17, 114, 107, 0.4);
  background: var(--accent-soft);
}
.checkbox-card__main { font-size: 13.5px; font-weight: 600; color: var(--text); padding-right: 22px; }
.checkbox-card__meta { font-size: 12px; color: var(--text-tertiary); }

/* ---- Package list (client profile) ---------------------------------------- */

.section__head--bar { justify-content: space-between; }
.pkg-cat { font-weight: 600; color: var(--text); }
.pkg-alloc { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.num-strong { font-weight: 700; color: var(--text); font-size: 15px; }

/* ---- Non-coach payees (settings) ------------------------------------------ */

.payee-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.payee-row { display: flex; align-items: center; gap: 10px; }
.payee-row__name { flex: 1 1 auto; max-width: 360px; }
.payee-row__active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.payee-row__active input { accent-color: var(--accent); }
.payee-add { display: flex; gap: 10px; align-items: center; }
.payee-add .form__input { max-width: 360px; }

/* ---- "Start from a template" picker (sell-package form) -------------------- */

.template-picker { max-width: 760px; }
.template-picker .select--block select { max-width: 520px; }

/* ===========================================================================
   Payments, installments & dashboard.
   =========================================================================== */

/* Big-number figures (package detail) */
.figures { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.figure {
  flex: 1 1 170px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 16px 18px;
}
.figure__num { font-size: 21px; font-weight: 680; letter-spacing: -0.01em; color: var(--text); }
.figure__label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.figure__sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }

/* Inline "record payment" form inside the installments table */
.inline-pay { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.select--sm select { padding: 4px 26px 4px 9px; font-size: 12.5px; }
.form__input--sm { width: auto; max-width: 150px; padding: 5px 9px; font-size: 12.5px; }

/* Dashboard / due badges */
.badge--overdue { color: #b42318; background: #fdecea; border-color: #f3b4ad; }
.badge--due-soon { color: #8a5a00; background: rgba(255, 191, 0, 0.14); border-color: rgba(255, 191, 0, 0.4); }
.text-warn { color: #b42318; font-weight: 600; }

/* ===========================================================================
   Sessions, bookings & attendance.
   =========================================================================== */

.badge--booked { color: #3a5bbf; background: rgba(58, 91, 191, 0.10); border-color: rgba(58, 91, 191, 0.28); }

.filters { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Bulk status actions on the List view */
.bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.bulkbar__all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.bulkbar__all input { accent-color: var(--accent); margin: 0; }
.bulkbar__spacer { flex: 1 1 auto; }
.bulkbar__sep { align-self: stretch; width: 1px; margin: 2px 2px; background: var(--border); }
.table th.check, .table td.check { width: 34px; text-align: center; padding-left: 14px; padding-right: 0; }
.table td.check input { accent-color: var(--accent); cursor: pointer; }

/* Participant cards on the session detail page */
.participant {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg);
}
.participant__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.participant__name { font-weight: 600; color: var(--text); font-size: 15px; }
.participant__name:hover { color: var(--accent); text-decoration: none; }
.participant__sub { font-size: 13px; margin-top: 2px; }
.participant__status { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }

.act-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.act { display: inline; margin: 0; }
.act-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
.adjust {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.adjust__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }

/* Amber variant of the success notice — used for "series capped to credits". */
.notice--warn {
  background: rgba(255, 191, 0, 0.12);
  border-color: rgba(255, 191, 0, 0.45);
  color: #8a5a00;
}

/* "Part of a recurring series" links on the session detail page. */
.series-dates { font-size: 12px; line-height: 1.7; margin-top: 4px; }

/* ===========================================================================
   Calendar — Month overview + Week time-grid (Sessions page).
   Light theme, MOVE green accent; chips reuse the participant status palette.
   =========================================================================== */

/* View toggle + page-head actions */
.head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.viewtoggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
/* Import has many entity tabs — let them wrap so none are ever clipped/unreachable. */
.viewtoggle--wrap { flex-wrap: wrap; overflow: visible; max-width: 100%; }
.viewtoggle--wrap .viewtoggle__opt { border-top: 1px solid var(--border); }
.viewtoggle__opt {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-left: 1px solid var(--border);
}
.viewtoggle__opt:first-child { border-left: none; }
.viewtoggle__opt:hover { background: var(--bg-subtle); text-decoration: none; color: var(--text); }
.viewtoggle__opt.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

/* Period navigation (‹ Today ›  Month Year) */
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-nav__title { font-size: 14px; font-weight: 600; color: var(--text); margin-left: 6px; }

/* Session chip, shared by both calendar views */
.cal-ev {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-tertiary);
  border-radius: 5px;
  padding: 2px 7px;
  overflow: hidden;
  min-width: 0;
}
.cal-ev:hover { background: var(--bg-hover); text-decoration: none; }
.cal-ev__line { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.cal-ev__time { font-weight: 600; flex-shrink: 0; }
.cal-ev__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-ev__coach { color: var(--text-tertiary); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev--booked { border-left-color: #3a5bbf; }
.cal-ev--done { border-left-color: var(--accent); }
.cal-ev--burn { border-left-color: #b42318; }
.cal-ev--cancelled { border-left-color: var(--text-tertiary); opacity: 0.7; }
.cal-ev--cancelled .cal-ev__who { text-decoration: line-through; }

/* Status legend */
.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--text-secondary); }
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 9px; height: 3px; border-radius: 2px; background: var(--text-tertiary); }
.cal-dot--booked { background: #3a5bbf; }
.cal-dot--done { background: var(--accent); }
.cal-dot--burn { background: #b42318; }
.cal-dot--cancelled { background: var(--text-tertiary); }

/* ---- Month grid ----------------------------------------------------------- */

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid--head {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--bg-subtle);
}
.cal-dow {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  text-align: left;
}
.cal-grid--body {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.cal-day {
  min-height: 104px;
  padding: 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day--muted { background: var(--bg-sidebar); }
.cal-day--muted .cal-day__num { color: var(--text-tertiary); }
.cal-day--today { background: var(--accent-soft); }
.cal-day__top { display: flex; justify-content: flex-end; }
.cal-day__num {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
a.cal-day__num:hover { background: var(--bg); color: var(--accent); text-decoration: none; }
.cal-day--today .cal-day__num { background: var(--accent); color: #fff; }
.cal-day__events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-more { font-size: 11.5px; color: var(--text-secondary); padding: 0 2px; }

/* ---- Week time-grid ------------------------------------------------------- */

.wk-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}
.wk-row--head,
.wk-body { min-width: 760px; }
.wk-row--head {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.wk-corner { border-right: 1px solid var(--border); }
.wk-dayhead {
  padding: 7px 10px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wk-dayhead:last-child { border-right: none; }
.wk-dayhead__dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 600; }
.wk-dayhead__date { font-size: 13px; font-weight: 600; color: var(--text); }
.wk-dayhead--today { background: var(--accent-soft); }
.wk-dayhead--today .wk-dayhead__date { color: var(--accent-strong); }
.wk-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(46px, auto); }
.wk-hourlabel {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 4px 8px;
  text-align: right;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wk-cell {
  position: relative;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wk-cell:nth-child(8n+1) { /* hour label column already styled */ }
.wk-cell--today { background: rgba(17, 114, 107, 0.04); }
.wk-cell__add {
  opacity: 0;
  align-self: flex-end;
  font-size: 14px;
  line-height: 1;
  color: var(--text-tertiary);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.wk-cell:hover .wk-cell__add { opacity: 1; }
.wk-cell__add:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }

/* ---- Occurrence checklist (booking step 2) -------------------------------- */

.occ-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.occ {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.occ:hover { border-color: var(--text-tertiary); }
.occ.is-on { border-color: rgba(17, 114, 107, 0.4); background: var(--accent-soft); }
.occ input { accent-color: var(--accent); margin: 0; }

/* ===========================================================================
   Commission report (slice 4). Reuses the table / section / filter primitives;
   adds right-aligned money columns, per-currency table groups and totals rows.
   =========================================================================== */
.report-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.filters__text { font-size: 12.5px; color: var(--text-tertiary); }
.report-note { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.65; margin: 0 0 20px; max-width: 70ch; }

/* Per-currency totals strip above an in-app business report. */
.rep-summary { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 2px 0 12px; font-size: 12.5px; color: var(--text-secondary); }
.rep-summary strong { color: var(--text); font-weight: 650; }

/* Reports sidebar sub-nav (the report picker under "Reports"). */
.subnav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding-left: 16px; }
.subnav__group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); padding: 9px 10px 3px; }
.subnav__item { padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; }
.subnav__item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.subnav__item.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

/* Single-report table: roomy, columns size to content, scroll sideways if needed. */
.rep-table-wrap { overflow-x: auto; }
.rep-table-wrap th, .rep-table-wrap td { white-space: nowrap; }

/* Right-aligned, tabular money columns (header + cells). */
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Per-currency grouping heading above each commission table. */
.cur-head {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin: 16px 0 6px;
}
.cur-head:first-child { margin-top: 0; }

/* Totals row. */
.table tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--border-strong);
  font-weight: 650;
  color: var(--text);
}

/* A net-negative amount (more reversed than earned in range). */
.amount-neg { color: #b42318; }

/* Collapsible detail breakdown (native <details>, no JS). */
.detail__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  margin-bottom: 10px;
}
.detail__summary::-webkit-details-marker { display: none; }
.detail__summary::before {
  content: "›";
  color: var(--text-tertiary);
  font-size: 16px;
  transition: transform 0.12s ease;
}
.detail[open] .detail__summary::before { transform: rotate(90deg); }
.detail__summary:hover .section__title { color: var(--accent-strong); }

/* ---- CSV import (slice 6) -------------------------------------------------- */
.import-help { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.import-help code { font-size: 12px; background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; }
.import-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.import-textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: pre; }
.form-actions--left { justify-content: flex-start; gap: 10px; }
.import-summary { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; }
.import-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.import-confirm .form__hint { margin: 0; }

/* CSV export (slice 6): the saved-bundle path. */
.export-path { margin: 0 0 14px; padding: 10px 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; }
.export-path code { border: 0; background: none; padding: 0; font-size: 12.5px; white-space: pre; }

/* ---- Payments & documents (slice 5) --------------------------------------- */

/* Record-a-payment card on the package page. */
.pay-form { margin-bottom: 16px; }
.pay-form .form__group { margin-bottom: 0; }
.pay-form .form__row { margin-bottom: 12px; }
.pay-form .form-actions { margin-top: 2px; }

/* Document list (invoice + receipts) on the package page. */
.doc-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.doc-group__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
}
.doc-group__label + .doc-row { border-top: none; }
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.doc-row:last-child { border-bottom: none; }
.doc-row__main { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.doc-row__title { font-weight: 600; color: var(--text); }

/* ---- Refunds, cancellation & the danger zone (package detail) ------------- */
.card__section-title--spaced { margin-top: 18px; }

.btn--danger { color: #b42318; border-color: #f3b4ad; background: #fff; }
.btn--danger:hover { background: #fdecea; border-color: #e8978c; }

.danger-zone {
  border: 1px solid #f3b4ad;
  border-radius: var(--radius);
  background: #fefbfa;
  padding: 0;
}
.danger-zone__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  color: #b42318;
}
.danger-zone__summary::-webkit-details-marker { display: none; }
.danger-zone__summary::before { content: "⌄"; margin-right: 8px; color: #b42318; }
.danger-zone[open] .danger-zone__summary { border-bottom: 1px solid #f3d3ce; }
.cancel-form { padding: 14px 16px 16px; }
.danger-zone__note {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.cancel-form .check { margin-top: 4px; }
.cancel-form .check + .form__hint { margin-top: 8px; }

.section__head--spaced { margin-top: 26px; }
.extend-form__row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.extend-form__row .form__group { margin: 0; flex: 1; min-width: 220px; }

/* ---- Status-history timeline (session detail) ---------------------------- */
.timeline-wrap { margin-top: 10px; }
.timeline-wrap__summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  list-style: none;
}
.timeline-wrap__summary::-webkit-details-marker { display: none; }
.timeline-wrap__summary::before { content: "›"; margin-right: 6px; }
.timeline-wrap[open] .timeline-wrap__summary::before { content: "⌄"; }
.timeline {
  list-style: none;
  margin: 10px 0 2px;
  padding: 0 0 0 4px;
  border-left: 2px solid var(--border);
}
.timeline__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 5px 0 5px 14px;
  font-size: 13px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.timeline__when { color: var(--text-tertiary); min-width: 150px; }
.timeline__what { color: var(--text); }
.tag-credit {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
  border-radius: 4px;
  vertical-align: 1px;
}
.tag-credit--burn { color: #b42318; background: #fdecea; }
.tag-credit--back { color: var(--accent-strong); background: var(--accent-soft); }

/* ---- Data-health board (admin) ------------------------------------------- */
.health-banner {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.health-banner--ok { background: var(--accent-soft); border-color: rgba(17, 114, 107, 0.3); }
.health-banner--fail { background: #fdecea; border-color: #f3b4ad; }
.health-banner__title { font-weight: 650; font-size: 15px; margin-bottom: 3px; }
.health-banner--ok .health-banner__title { color: var(--accent-strong); }
.health-banner--fail .health-banner__title { color: #b42318; }
.health-banner__sub { color: var(--text-secondary); font-size: 13px; }

.health-list { display: flex; flex-direction: column; gap: 10px; }
.health-check {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg);
}
.health-check.is-fail { border-color: #f3b4ad; background: #fefbfa; }
.health-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.health-check__title { font-weight: 600; }
.health-check__desc { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }
.health-check__more { font-size: 12.5px; margin-top: 6px; }

.table--sm { margin-top: 12px; font-size: 12.5px; }
.table--sm th, .table--sm td { padding: 5px 8px; }
.table--sm td { font-variant-numeric: tabular-nums; word-break: break-all; }

/* ---- Auth (sign-in page) + signed-in user menu ---------------------------- */

.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-sidebar);
}
.auth__card {
  width: 100%;
  max-width: 380px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 30px 30px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.auth__logo { display: block; height: 30px; width: auto; margin: 0 auto 22px; object-fit: contain; }
.auth__title { font-size: 18px; font-weight: 640; margin: 0 0 4px; }
.auth__lead { font-size: 13px; color: var(--text-tertiary); margin: 0 0 22px; }
.auth__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 4px; }
.auth__muted { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.6; }
.auth .notice, .auth .form-error { text-align: left; }
.auth__dev {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-strong);
  text-align: left;
}
.auth__dev-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.auth__dev-form { display: flex; gap: 8px; }
.auth__dev-form .select { flex: 1 1 auto; }
.auth__dev-form .select select { width: 100%; }

.usermenu { display: flex; align-items: center; gap: 14px; }
.usermenu__id { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.usermenu__name { font-size: 13px; font-weight: 600; color: var(--text); }
.usermenu__role { font-size: 11px; color: var(--text-tertiary); }
.usermenu__link { font-size: 13px; }
.usermenu__logout { margin: 0; }

/* ---- Admin impersonation ("view as") -------------------------------------- */
/* A persistent amber banner pins to the very top while an admin is viewing as
   another user, so the mode is always obvious and one click returns. In this mode
   the sticky sidebar & topbar are pushed down by the banner's height (44px). */
.imp-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 44px;
  padding: 0 20px 0 40px;
  background: #ffb300;
  color: #3a2a00;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.imp-banner__text { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.imp-banner__eye { font-size: 14px; flex: 0 0 auto; }
.imp-banner__role {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.13); border-radius: 20px; padding: 2px 8px; flex: 0 0 auto;
}
.imp-banner__sep { opacity: 0.45; }
.imp-banner__form { margin: 0; flex: 0 0 auto; }
.imp-banner__exit {
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: #1d1d1f; color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 6px 14px;
}
.imp-banner__exit:hover { background: #000; }

.is-impersonating .sidebar { top: 44px; height: calc(100vh - 44px); }
.is-impersonating .topbar { top: 44px; }

/* "View as" action cell on the Users table + the recent-activity log. */
.cell-actions { text-align: right; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }
.imp-log { margin-top: 28px; }

/* ---- What's New (changelog) ----------------------------------------------- */
.changelog__help .changelog__links { display: flex; gap: 10px; flex-wrap: wrap; }
.changelog__entry { max-width: 760px; }
.changelog__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
.changelog__heading { display: flex; flex-direction: column; gap: 8px; }
.changelog__title { font-size: 16px; font-weight: 650; margin: 0; }
.changelog__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.changelog__date { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; padding-top: 2px; }
.changelog__summary { margin: 0 0 10px; color: var(--text-secondary); }
.changelog__points { margin: 0; padding-left: 18px; color: var(--text-secondary); }
.changelog__points li { margin-bottom: 4px; }