/* The bookings calendar and register (FR-32). Loaded by the staff, public and portal layouts, so it reads only the
   tokens all three define (--ink, --muted, --line) and keeps its own for the entry kinds — those match the colours on
   the gym's printed calendar and are content, not decoration. */

.booking-cal {
  --k-class: #8e6b7e;
  --k-class-w: #f0e7ec;
  --k-private: #4f6f8c;
  --k-private-w: #e4ebf1;
  --k-setting: #55684f;
  --k-setting-w: #e6ebe3;
  --k-social: #9a6447;
  --k-social-w: #f5e9e2;
  --k-hours: #6b6b6b;
  --k-hours-w: #ececec;
}

.booking-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.booking-cal-head h2 { margin: 0; }

.booking-cal-paging { display: flex; gap: 8px; }

.booking-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.booking-cal-dow {
  background: var(--paper, var(--surface, #fff));
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.booking-cal-day {
  background: var(--paper, var(--surface, #fff));
  min-height: 92px;
  padding: 5px 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.booking-cal-day.outside { opacity: 0.45; }
.booking-cal-day.today { box-shadow: inset 0 0 0 2px var(--ink); }

.booking-cal-num { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
/* On the staff calendar the day's number opens a new booking type on that day (D1025). */
a.booking-cal-add {
  align-self: flex-start;
  margin: -2px -5px;
  padding: 2px 5px;
  border-radius: 999px;
  text-decoration: none;
}
a.booking-cal-add:hover,
a.booking-cal-add:focus-visible { background: var(--line); color: var(--ink); }
a.booking-cal-add:hover::after,
a.booking-cal-add:focus-visible::after { content: " +"; }

a.booking-chip,
.booking-chip {
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  padding: 4px 6px;
  border-radius: 3px;
  border-left: 3px solid var(--chip, var(--k-class));
  background: var(--chip-w, var(--k-class-w));
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.booking-chip:hover { filter: brightness(0.96); }
.booking-chip b { display: block; font-weight: 700; }
.booking-chip .muted { color: var(--muted); }
.booking-chip.cancelled { text-decoration: line-through; opacity: 0.6; }

.booking-chip.k-class { --chip: var(--k-class); --chip-w: var(--k-class-w); }
.booking-chip.k-private { --chip: var(--k-private); --chip-w: var(--k-private-w); }
.booking-chip.k-setting { --chip: var(--k-setting); --chip-w: var(--k-setting-w); }
.booking-chip.k-social { --chip: var(--k-social); --chip-w: var(--k-social-w); }
.booking-chip.k-hours { --chip: var(--k-hours); --chip-w: var(--k-hours-w); }

.booking-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--muted);
}

.booking-cal-legend li { display: flex; align-items: center; gap: 6px; }
.booking-cal-legend .swatch.booking-chip { display: inline-block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 2px; background: var(--chip); }

/* A phone has no room for seven columns: the same month as a list of the days with something on (D863). */
.booking-cal-list { display: none; list-style: none; margin: 0; padding: 0; }
.booking-cal-list > li { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.booking-cal-list h3 { margin: 0; font-size: 0.9rem; }

@media (max-width: 720px) {
  .booking-cal-grid { display: none; }
  .booking-cal-list { display: block; }
}

/* The register. */
.register-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.register-row .register-who { min-width: 0; flex: 1 1 16rem; }
.register-row .register-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.register-flag { font-size: 0.78rem; }
.register-flag.bad { color: var(--red, var(--bad, #b42318)); }
.register-flag.ok { color: var(--muted); }

.booking-form-people { display: grid; gap: 12px; }
.booking-form-person { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: grid; gap: 8px; }
.booking-form-person h3 { margin: 0; font-size: 0.95rem; }

/* The widget's own page, drawn inside somebody else's site. */
.booking-embed { padding: 8px; background: transparent; }

/* A group of choices on a staff form — not a `.signin-field`, whose label styling would set every choice in capitals. */
.booking-form-pay { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.booking-form-pay legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* A booking type's pages (D1021): sections apart, and short fields side by side where there is room. `.signin-field`
   carries no margin of its own, so a form of them stacked straight is what read as cramped. */
.booking-type-form { display: grid; gap: 28px; }
.booking-type-form .booking-form-section { display: grid; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.booking-type-form .booking-form-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.booking-type-form .booking-form-section h2 { margin: 0; font-size: 1.05rem; }
.booking-type-form .booking-form-section > p.muted { margin: -10px 0 0; }
.booking-form-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 18px 28px; align-items: start; }

/* The Sessions tab's list: one row a session, its places and its switch. */
.booking-session-list { list-style: none; margin: 0; padding: 0; }
.booking-session-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 18px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.booking-session-list > li.inactive .session-when { color: var(--muted); text-decoration: line-through; }
.booking-session-list .session-taken { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.booking-session-list form { margin: 0; }
/* A session's own name, and the way to give it one (D1025). */
.booking-session-list .session-own { margin-left: 8px; font-size: 0.85rem; color: var(--muted); }
.booking-session-list .session-change { margin-left: 10px; font-size: 0.8rem; color: var(--muted); }


/* The Emails tab: one card a kind. */
.booking-email { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); }
.booking-email:first-of-type { border-top: 0; padding-top: 0; }
.booking-email .booking-email-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.booking-email h3 { margin: 0; font-size: 1rem; }
.booking-type-form textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--paper-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* A hint in a form's right-hand column opens leftward, or its hidden bubble widens the page to a sideways scroll
   (D547's `.info-hint.end`). Only where the form is two columns; one column keeps the default. */
@media (min-width: 1000px) {
  .booking-form-pair > :nth-child(2n) .info-hint::after { left: auto; right: 0; }
}

/* A session's on/off switch: a track and a knob, its word beside it. A button, so it works with no script. */
.session-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 6.5rem;
  padding: 4px 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.session-toggle .track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--line-strong, #c8d3cf);
  transition: background 0.15s;
}
.session-toggle .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s;
}
.session-toggle.on .track { background: var(--brand); }
.session-toggle.on .track::after { left: 16px; }
.session-toggle.off { color: var(--muted); }
.session-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* The register (D1025): one row a person, each booking a band of its own, flags as small pills, so a list of a hundred
   reads at a glance. */
.booking-register { font-size: 0.88rem; }
.booking-register td { padding: 6px 10px; vertical-align: middle; }
.booking-register td form { display: inline; margin: 0; }
.booking-register tbody.register-booking { border-top: 2px solid var(--line-strong, var(--line)); }
.booking-register tbody.register-booking:nth-of-type(even) { background: var(--paper-2); }
.booking-register .register-paid { white-space: nowrap; }
.booking-register .register-flag {
  display: inline-block;
  margin: 1px 6px 1px 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.booking-register .register-flag.bad { background: var(--red-soft); border-color: var(--red); }
.booking-register .register-check,
.booking-register .register-more { width: 1%; white-space: nowrap; text-align: right; }
.booking-register .register-done { color: var(--brand-dark); font-weight: 600; }
.booking-register .register-done::before { content: "✓ "; }
.booking-register .link-button { font-size: 0.8rem; margin-left: 6px; }
.booking-register .register-owing { color: var(--red); font-weight: 600; }
.booking-register td .primary-button.compact,
.booking-register td .ghost-button.compact { padding-top: 4px; padding-bottom: 4px; }
/* Add a person: the name and Find on one line. */
.booking-find { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.booking-find .signin-field { flex: 1 1 18rem; margin: 0; }
/* A price and whether it includes entry, one column (D1028). */
.booking-price { display: grid; gap: 10px; align-content: start; }