/* ═══════════════════════════════════════════════════════════════
   Sled Check-In — App-specific styles
   ═══════════════════════════════════════════════════════════════ */

/* Widen main for table layout */
.sled-main { max-width: 1400px; }

/* Override header-inner max-width */
.app-header .header-inner { max-width: 1400px; }

/* Date navigation bar */
.date-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.date-label {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand);
  margin-left: auto;
}

/* Table inputs */
.inp-small { width: 70px !important; display: inline-block !important; }

/* Note editing */
.note-cell { cursor: pointer; min-width: 120px; }
.note-cell:hover .note-display { background: var(--brand-light); border-radius: 4px; padding: 2px 4px; }
.add-note-hint { color: var(--text-muted); font-size: .8rem; font-style: italic; }
.note-edit textarea { min-height: 50px; font-size: .875rem; }
.note-actions { display: flex; gap: .4rem; margin-top: .3rem; }

/* Booking source badge for walk-ins */
.badge-walkin {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 5px;
  vertical-align: middle;
}

/* State styling */
.state-returned td { color: var(--text-muted); }

/* Walk-in form layout */
#walkin-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
#walkin-fields .form-group {
  flex: 0 0 auto;
  min-width: 120px;
  margin-bottom: 0;
}
#walkin-fields .form-group.wide { min-width: 180px; }

/* No data message */
.no-data { text-align: center; color: var(--text-muted); padding: 2rem !important; font-style: italic; }

/* Tab button style (reuses shared .tab but tabs are <button> here) */
.tabs .tab {
  background: none;
  cursor: pointer;
}

/* Activity info copy */
.activity-info {
  background: var(--brand-light);
  color: var(--brand);
  padding: .5rem .75rem;
  border-radius: 4px;
  font-size: .875rem;
  margin-bottom: .75rem;
  display: none;
}

/* Booking ref link */
.ref-link, .booking-ref {
  text-transform: uppercase;
}
.ref-link {
  color: var(--brand);
  text-decoration: underline;
  font-weight: 600;
}
.ref-link:hover {
  color: var(--brand-dark, #004a6b);
}

/* Add Booking form actions */
.booking-actions {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* Price breakdown */
#booking-price-area {
  margin-top: .75rem;
}
.price-breakdown {
  background: var(--brand-light);
  border-radius: 6px;
  padding: .75rem 1rem;
  max-width: 400px;
}
.price-line {
  display: flex;
  justify-content: space-between;
  padding: .25rem 0;
  font-size: .9rem;
}
.price-line .price-amount {
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}
.price-total {
  border-top: 2px solid var(--brand);
  margin-top: .25rem;
  padding-top: .5rem;
  font-weight: 700;
  font-size: 1rem;
}
.price-error {
  color: var(--danger);
  font-size: .9rem;
  padding: .5rem 0;
}
.form-control.field-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, .18);
}

/* Edit booking modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: 1.1rem; }
.modal-close {
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: var(--text-muted); line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 1.25rem; }
.edit-fields {
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.edit-fields .form-group { flex: 1 1 45%; min-width: 140px; margin-bottom: 0; }
#edit-ski-fields { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .75rem; }
#edit-ski-fields .form-group { flex: 1 1 45%; min-width: 140px; margin-bottom: 0; }
.modal-actions { display: flex; gap: .75rem; }
.price-diff-note {
  font-size: .85rem;
  padding: .5rem .75rem;
  border-radius: 4px;
  margin-top: .5rem;
}
.price-diff-note--additional {
  background: var(--warn-bg); color: var(--warn);
  font-weight: 600;
}
.price-diff-note--none {
  background: var(--success-bg, #d1e7dd); color: var(--success, #0f5132);
}

/* Toboggan tab */
.tob-slot-header td {
  background: var(--brand-light);
  color: var(--brand);
  padding: .5rem .75rem !important;
  font-size: .9rem;
  border-bottom: 2px solid var(--brand);
}
.tob-status {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.tob-arrived {
  background: var(--success-bg, #d1e7dd);
  color: var(--success, #0f5132);
}
.tob-not-arrived {
  background: var(--danger-bg, #f8d7da);
  color: var(--danger);
}

/* Expand/collapse toggle arrow */
.ev-toggle {
  display: inline-block;
  width: 1em;
  font-size: .85rem;
  color: var(--brand);
  margin-right: .25rem;
  transition: transform .15s;
}
.ev-row { user-select: none; }
.ev-row:hover { background: rgba(0,94,133,.04); }

/* Person detail rows */
.ev-person td {
  border-bottom: none !important;
}

/* Wide modal variant (move booking) */
.modal-box--wide { max-width: 720px; }

/* Day summary bar */
.day-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  background: var(--brand-light);
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 600;
}
.day-summary .summary-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.day-summary .summary-count {
  font-size: 1.1rem;
  font-weight: 700;
}
.day-summary .summary-label {
  color: var(--text-muted);
  font-weight: 500;
}
.day-summary .summary-arrived { color: var(--success, #0f5132); }

/* Participant status badges (kit + course card) */
.ps-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: .35rem;
  vertical-align: middle;
  text-transform: uppercase;
}
.ps-kit-issued   { background: var(--brand-light); color: var(--brand); }
.ps-kit-returned { background: var(--success-bg, #d1e7dd); color: var(--success, #0f5132); }
.ps-card-progress { background: var(--warn-bg); color: var(--warn); }
.ps-card-complete { background: var(--success-bg, #d1e7dd); color: var(--success, #0f5132); }

/* Search All panel */
.search-all-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 500;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  width: 480px;
  max-height: 400px;
  overflow-y: auto;
  padding: .5rem 0;
}
.search-all-panel .sa-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  cursor: pointer;
  font-size: .875rem;
}
.search-all-panel .sa-row:hover {
  background: var(--brand-light);
}
.search-all-panel .sa-tab {
  font-size: .7rem;
  font-weight: 700;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}
.search-all-panel .sa-ref {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--brand);
  min-width: 60px;
}
.search-all-panel .sa-name { flex: 1; }
.search-all-panel .sa-detail {
  color: var(--text-muted);
  font-size: .8rem;
}
.search-all-panel .sa-status {
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.search-all-panel .sa-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 1rem;
  font-style: italic;
}
.filter-bar { position: relative; }

/* Print header — hidden on screen, shown when printing */
.print-header {
  display: none;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

/* Print styles */
@media print {
  .app-header, .date-nav, .tabs, .filter-bar, .form-section,
  .modal-overlay, .btn-checkin, .btn-checkout, .btn-ev-checkin,
  .btn-ev-uncheck, .btn-ev-move, .btn-tob-checkin, .btn-tob-uncheck,
  .btn-tob-edit, .btn-edit-booking, .btn-move-select,
  .btn-show-empty, .btn-hide-empty, .btn-print, .search-all-panel, .global-search,
  #activity-info, .busy-panel, .btn-person-edit, .ev-toggle {
    display: none !important;
  }
  .print-header {
    display: block !important;
  }
  .day-summary {
    background: none !important;
    border: 1px solid #ccc;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .card {
    box-shadow: none !important;
    border: none !important;
  }
  .data-table th, .data-table td {
    border: 1px solid #ccc !important;
    padding: .3rem .5rem !important;
  }
  body { font-size: 11pt; }
  @page { margin: 1cm; }
}

/* ═══════════════════════════════════════════════════════════════
   2026-10 reception feedback
   ═══════════════════════════════════════════════════════════════ */

/* Layout that used to be inline styles (so the phone layout can override it) */
/* The date bar sits straight on the page: no white card behind it */
.date-nav.card { margin-bottom: 1rem; padding: 0; background: none; box-shadow: none; }
/* Date bar: Today, then one joined control: back | the date | forward */
.date-nav-inner { gap: .6rem; }
#btn-today { height: 2.4rem; padding: 0 1rem; }
.date-step {
  display: inline-flex;
  align-items: stretch;
  height: 2.4rem;
  border: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  overflow: hidden;
}
.date-step .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  cursor: pointer;
  transition: background .15s;
}
.date-step .btn-arrow:hover { background: var(--brand-light); }
.date-step .btn-arrow svg { width: 1.1rem; height: 1.1rem; }
#inp-date {
  width: auto;
  padding: 0 .7rem;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: none;
  color: var(--brand);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  outline: 0;
}
#inp-date:focus { background: var(--brand-light); }
.date-pick { display: flex; align-items: stretch; margin: 0; }
.date-short { display: none; }
.table-card { margin-bottom: 1rem; padding: .75rem; }
.sled-filter-bar {
  margin-bottom: .75rem;
  padding: 0;
  background: none;
  box-shadow: none;
  gap: .5rem;
}

/* One search for every activity, between the date and the tabs. Styled as the
   Projects app's box: slim, rounded, magnifier in front, results in a floating panel. */
.global-search { position: relative; display: flex; justify-content: flex-start; margin-bottom: 1rem; }
.searchbox {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: min(34rem, 100%);
  height: 2.25rem;
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: text;
  transition: border-color .12s, box-shadow .12s;
}
.searchbox:hover { border-color: #c3cad4; }
.searchbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,94,133,.15); color: var(--text); }
.searchbox svg { width: 1rem; height: 1rem; flex: 0 0 auto; opacity: .85; }
.searchbox input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
}
.searchbox input::placeholder { color: var(--text-muted); }
.global-search .search-all-panel {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  padding: .25rem 0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08);
}
/* On a desktop the search sits in the middle of the header, as in Projects:
   see-through on the blue until it is clicked into */
.header-search { display: flex; justify-content: center; min-width: 0; }
@media (min-width: 901px) {
  /* Equal columns either side, so the search is centred on the page and not just in the gap */
  .app-header .header-inner { display: grid; grid-template-columns: 1fr minmax(0, 34rem) 1fr; gap: 1rem; }
  .app-header .header-logo { justify-self: start; }
  .app-header .header-actions { justify-self: end; }
}
.app-header .global-search { flex: 1 1 auto; justify-content: center; margin: 0; }
.app-header .searchbox {
  height: 2rem;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.app-header .searchbox:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); }
.app-header .searchbox input { color: #fff; }
.app-header .searchbox input::placeholder { color: rgba(255,255,255,.82); }
.app-header .searchbox:focus-within { background: #fff; border-color: #fff; color: var(--text); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.app-header .searchbox:focus-within input { color: var(--text); }
.app-header .searchbox:focus-within input::placeholder { color: var(--text-muted); }
.app-header .global-search .search-all-panel { left: 50%; transform: translateX(-50%); color: var(--text); }

.search-all-panel .sa-group {
  padding: .45rem 1rem .25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
}
.search-all-panel .sa-count { font-weight: 500; }
.search-all-panel .sa-time { flex: 0 0 3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.search-all-panel .sa-name { font-weight: 600; }
.search-all-panel .sa-name .sa-detail { margin-left: .5rem; font-weight: 400; }
.search-all-panel .sa-ref { min-width: 0; }

/* The activity reminder: plain text to the right of the filter buttons */
.sled-filter-bar .activity-info {
  flex: 1 1 12rem;
  margin: 0 0 0 .5rem;
  padding: 0;
  background: none;
  color: var(--text-muted);
  font-size: .85rem;
}

/* Header wordmark, as on Insight and Projects: a small M, then MENDIP bold and
   the app's name regular, upper case, in self-hosted Poppins */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
.header-logo { gap: .5rem; }
.header-logo .logo-mark { height: 18px; width: auto; display: block; }
.header-logo .logo-text {
  display: inline-flex; align-items: baseline; gap: .3em;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400; font-size: 1.05rem; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; line-height: 1; white-space: nowrap;
}
.header-logo .logo-text .lt-mendip { font-weight: 700; }

/* Header: "Log out" with the estate's icon replaces the X */
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .65rem;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
}
.btn-logout svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-logout:hover { background: rgba(255,255,255,.14); text-decoration: none; }

/* Fixed columns (widths set by sizeColumns() in app.js), so the headings do not
   move when a time slot or a session is opened or closed. Card layout on a
   phone has no columns and is left alone. */
@media (min-width: 901px) {
  #bookings-table { table-layout: fixed; }
  #bookings-table > tbody > tr > td { overflow-wrap: anywhere; }
  #bookings-table .c-action { white-space: normal; }
  #bookings-table .c-action .btn { margin: .1rem 0; }
  #bookings-table .booked-by { white-space: normal; }
  /* The discs, deposit and method boxes keep their size however many columns the table has */
  #bookings-table .inp-discs { width: 3.4rem; min-width: 3.4rem; }
  #bookings-table .deposit-inputs { display: flex; flex-wrap: nowrap; white-space: nowrap; }
  #bookings-table .inp-deposit { width: 5.2rem; min-width: 5.2rem; flex: 0 0 auto; }
  #bookings-table .inp-method { width: 4.4rem; min-width: 4.4rem; flex: 0 0 auto; }
  #bookings-table .c-activity, #bookings-table .c-time { white-space: nowrap; }
}

/* Group headings (time slot, staff, outdoor session): a thin grey rule sits on top,
   dividing the group from the one before, not between the heading and its rows */
#bookings-table .tob-slot-header td { border-bottom: 0; border-top: 1px solid #cfd6de; }
/* Three levels, darkest at the top: the session heading is pale blue, a booking
   in it is grey, the people on the booking are white. Nothing changes colour
   under the pointer. */
#bookings-table .tob-slot-header td,
#bookings-table .tob-slot-header:hover td { background: var(--brand-light); }
#bookings-table > tbody > tr:not(.tob-slot-header):not(.row-flagged):not(.ev-person):not(.ev-booking):hover > td { background: inherit; }
#bookings-table > tbody > tr.ev-booking > td,
#bookings-table > tbody > tr.ev-booking:hover > td { background-color: var(--bg); }
#bookings-table > tbody > tr.ev-person > td,
#bookings-table > tbody > tr.ev-person:hover > td { background-color: var(--card-bg); }
#bookings-table > tbody > tr.ev-row:hover { background: none; }

/* Time slot headers (self-led) and event rows open and close on click */
.slot-row, .ev-row { cursor: pointer; user-select: none; }
.slot-meta { margin-left: .5rem; font-weight: 500; }
.slot-arrived { float: right; font-weight: 600; }

/* Who booked, who checked in */
.tob-status { white-space: nowrap; }
.booked-by { font-size: .75rem; color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.by-staff { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
/* Initials with a name behind them: hover says who */
.staff-init { cursor: help; }
.returned-line { font-size: .78rem; color: var(--text-muted); margin-top: .2rem; }

/* Toboggan: people breakdown, slot note, included slushy / drink */
.tob-breakdown { min-width: 6.5rem; font-size: .75rem; color: var(--text-muted); }
.tob-note { font-size: .82rem; }
.note-drink {
  display: inline-block;
  background: #ede7f6;
  color: #4a2d82;
  border-radius: 4px;
  font-weight: 700;
  padding: 2px 7px;
}
.people-fields .form-group { margin-bottom: .75rem; }
.modal-subtitle { margin-bottom: .75rem; color: var(--text-muted); font-size: .9rem; }

/* Notes: click to add or change, on every tab */
div.note-cell { min-width: 110px; }
.tob-note + .note-cell, .customer-note + .note-cell { margin-top: .2rem; }
.customer-note { font-size: .82rem; }

/* Create Booking: the form on the left, Add Voucher down the right */
/* On a desktop the whole card is the grid, so the voucher column runs from the
   title down: title and form on the left, Add Voucher the full height on the right */
@media (min-width: 901px) {
  #walkin-section { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; grid-template-rows: auto 1fr; column-gap: 1.5rem; }
  #walkin-section > .section-title { grid-column: 1; grid-row: 1; }
  #walkin-section .bk-layout { display: contents; }
  #walkin-section .bk-main { grid-column: 1; grid-row: 2; }
  #walkin-section > .bk-layout > .bk-voucher { grid-column: 2; grid-row: 1 / span 2; }
}
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; align-items: start; }
.bk-main { min-width: 0; }
#walkin-fields { display: block; margin-bottom: 0; }
.bk-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.bk-booking .form-group { min-width: 0; }
#wk-ad, #wk-ch { width: 5.5rem; }
#wk-time { width: 8rem; }
.booking-create { margin: .75rem 0 0; }
/* The voucher box is a column the full height of the form on a desktop */
.bk-voucher { align-self: stretch; padding: 1.1rem 1.1rem 1.25rem; background: var(--bg); border-radius: var(--radius-sm); }
.bk-voucher-inner { position: sticky; top: calc(var(--header-h) + 4rem); } /* follows the page while the form scrolls, clear of the sticky header and tabs */
.bk-voucher-title { margin-bottom: .75rem; font-size: .95rem; font-weight: 700; color: var(--brand); }
.bk-voucher .form-group { margin-bottom: .7rem; }
.bk-voucher .form-control { padding: .5rem .7rem; font-size: .95rem; }
.bk-voucher #btn-voucher, .bk-voucher #btn-voucher-more { width: 100%; }
/* The vouchers held, one card each, above the code boxes */
.voucher-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.voucher-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .7rem;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
}
.bk-voucher .price-error { padding-bottom: 0; font-size: .85rem; }
.price-voucher { color: var(--success, #1a8c4e); font-weight: 600; }

/* Add Booking: existing customer search */
#walkin-fields .cust-search { position: relative; flex: 1 1 100%; max-width: 34rem; }
#walkin-fields .cust-search .searchbox { width: 100%; }
/* The search (or the chosen customer) has the first row to itself */
.wk-break { flex: 0 0 100%; height: 0; margin-top: -1rem; }
/* "or" between finding a customer and typing a new one */
.wk-or { flex: 0 0 100%; margin: .6rem 0 .1rem .15rem; font-weight: 700; color: var(--text-muted); }
.cust-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.cust-row { padding: .55rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.cust-row:last-child { border-bottom: 0; }
.cust-row:hover, .cust-row.active { background: var(--brand-light); }
.cust-name { display: block; font-weight: 700; }
.cust-contact { display: block; font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; }
.cust-chosen .cust-contact:empty { display: none; }
.cust-chosen .cust-name { margin-bottom: .1rem; }
.cust-empty { padding: .6rem .8rem; font-size: .85rem; color: var(--text-muted); font-style: italic; }
.cust-chosen {
  flex: 1 1 100%;
  max-width: 34rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .8rem;
  background: var(--brand-light);
  border-radius: var(--radius-sm);
}

/* Move Booking: the booking's details, then the next sessions of its activity */
.move-details { margin-bottom: 1rem; }
.move-who { font-weight: 700; font-size: 1.05rem; }
.move-who .booking-ref { margin-left: .5rem; font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.move-what { color: var(--text-muted); font-size: .9rem; }
.move-heading { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; color: var(--brand); }
.move-table td, .move-table th { padding: .5rem .6rem; }
.move-more { margin-top: .5rem; }
.move-or { margin: 1rem 0 .5rem; }

/* Create Booking: the payment step, under the price */
.pay-step { max-width: 34rem; margin: 1.75rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.pay-title { margin: 0 0 .85rem; font-size: 1rem; font-weight: 700; color: var(--brand); }
/* Calculate Prices sits at the end of the activity line, level with the boxes */
.bk-booking #btn-calc-price { height: 2.75rem; align-self: flex-end; margin-left: .5rem; }
.booking-actions:empty { display: none; }
@media (max-width: 900px) { .bk-booking #btn-calc-price { flex: 1 1 100%; margin-left: 0; } }
/* Every box on the Create Booking form is the same height: the customer search,
   the details, the time and numbers, the voucher codes */
#walkin-section .searchbox,
#walkin-section input.form-control, #walkin-section select.form-control { height: 2.75rem; min-width: 0; padding-top: 0; padding-bottom: 0; font-size: .95rem; }
/* The form's three parts, each under its own heading: Contact details, Activity details, Payment details */
.bk-sub { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: var(--brand); }
.bk-sub-rule { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.pay-seg { margin-bottom: 1.1rem; }
.pay-none { margin: 0 0 1.1rem; font-weight: 600; color: var(--success, #2e7d32); }
#walkin-section input.form-control:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
.pay-receipt { max-width: 22rem; }
/* Defer: the amount and the note side by side */
.pay-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.pay-line .form-group { margin-bottom: 1rem; }
.pay-defer-amount { flex: 0 0 auto; }
.pay-note { flex: 1 1 14rem; max-width: 24rem; }
.pay-amount { display: flex; align-items: center; gap: .35rem; }
.pay-amount .form-control { width: 7.5rem; }
.pay-pound { font-weight: 600; }
.pay-hint { margin: -.4rem 0 .9rem; font-size: .85rem; color: var(--text-muted); }
.pay-hint.is-error { color: var(--danger); font-weight: 600; }
@media (max-width: 900px) { .pay-note { flex-basis: 100%; max-width: none; } }

/* Create / Complete Booking waits, greyed out, until the form is complete */
#btn-add-booking { transition: none; }
#btn-add-booking:disabled { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: 1; box-shadow: none; }
.booking-create { margin-top: 1.25rem; }

/* The customer's own vouchers: a button under Redeem voucher, a list to pick from */
.cust-vouchers-wrap { margin-top: .75rem; }
.voucher-or { margin: 0 0 .6rem .15rem; }
.bk-voucher #btn-cust-vouchers { width: 100%; }
.cust-voucher-list { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; }
.cust-voucher-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cust-voucher-text { min-width: 0; }

/* The booking is made: "Booking Complete!" in green, then what was booked, plain */
.booking-done { max-width: 34rem; margin-top: 1.25rem; }
.bd-title { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; color: #146c3c; }
.bd-row { display: flex; gap: 1rem; padding: .15rem 0; font-size: .92rem; }
.bd-label { flex: 0 0 10rem; color: var(--text-muted); }
.bd-link { font-weight: 700; color: var(--brand); text-decoration: underline; }
@media (max-width: 900px) { .bd-label { flex-basis: 8rem; } }

/* Create Booking on the session tabs and Tobogganing: the picker */
.wk-picker { flex: 0 0 100%; }
.wk-pick-activity { max-width: 22rem; }
.wk-find { flex: 0 0 100%; }
.c-activity { white-space: nowrap; }
.wk-find .form-label { display: block; }
/* The Date box steps with the top bar's arrows, in a plain form border */
.wk-date-step { height: auto; border: 1px solid var(--border); border-radius: 8px; }
.wk-date-step #wk-date { width: auto; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0; }
.wk-date-step #wk-date:focus { box-shadow: none; }
.wk-date-step .btn-arrow { width: 2.2rem; }
.wk-pick-table { margin-bottom: .5rem; }
.wk-more { display: flex; gap: .5rem; margin-bottom: .75rem; }
.wk-people-note { flex: 0 0 100%; margin: -.25rem 0 0; font-size: .82rem; color: var(--text-muted); }
.wk-pick-row { cursor: pointer; }
.wk-pick-row.is-picked > td, .wk-tob-table tr.is-picked > td { background: var(--brand-light) !important; }
.wk-tob-table th .booked-by { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; }
.wk-tob-cell { white-space: nowrap; }
.wk-tob-cell.is-off { color: var(--text-muted); }
.wk-tob-pick { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 600; }
.wk-tob-pick input { margin: 0; }
.wk-tob-note { display: block; font-size: .72rem; font-weight: 400; color: var(--text-muted); }
.wk-tob-warning { max-width: 40rem; margin: .25rem 0 .75rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--bg); font-size: .85rem; }

/* "Are you sure?" pop-up */
.modal-box--narrow { max-width: 400px; }
.confirm-message { font-weight: 700; margin-bottom: .4rem; }
.modal-box--narrow .modal-actions { margin-top: 1rem; }

/* Frisbee golf: what is missing when Check In is pressed */
.deposit-flag { margin-top: .25rem; color: var(--danger); font-size: .8rem; font-weight: 700; }

.cust-chosen-actions { display: flex; gap: .4rem; flex: 0 0 auto; }
.cust-chosen.cust-editing { flex-direction: column; align-items: stretch; background: var(--card-bg); border: 1px solid var(--border); }
.cust-edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cust-edit-fields .form-group { margin-bottom: 0; }

/* Frisbee golf check-in inputs */
.deposit-inputs { display: inline-flex; gap: .35rem; align-items: center; }
.inp-discs { width: 70px; }
.inp-deposit, .inp-method { width: 90px; }
.c-action { white-space: nowrap; }
.c-time { white-space: nowrap; }

/* Event rows */
.ev-note {
  padding-left: 2rem !important;
  padding-top: 0 !important;
  font-size: .85em;
  color: var(--text-muted);
  font-style: italic;
}
.ev-empty { color: var(--text-muted); font-style: italic; padding-left: 2rem !important; }
.ev-indent { padding-left: 2rem !important; }
.c-evtime, .c-evarrived { white-space: nowrap; }

/* The course card badge is a link to the card in MendipSys */
a.ps-card-link { text-decoration: underline; cursor: pointer; }
a.ps-card-link:hover { filter: brightness(.95); }

/* A booking inside a session: one line for the booking (name, reference, who
   booked | note | status | buttons), then a line per participant in the same
   columns, across the full width */
#bookings-table .ev-booking > td { padding-top: .45rem; padding-bottom: .3rem; }
.ev-booking:has(+ .ev-person) > td { border-bottom: none; }
.ev-booking .bk-name { font-weight: 600; }
.ev-booking .c-name .ref-link, .ev-booking .c-name .booking-ref { margin-left: .5rem; font-size: .8rem; }
.ev-booking .booked-by { display: inline; margin-left: .5rem; }
#bookings-table .ev-person > td {
  padding-top: .15rem;
  padding-bottom: .15rem;
  border-bottom: none;
  font-size: .85rem;
}
#bookings-table .ev-person.ev-person-last > td { padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
#bookings-table .ev-person > td.c-pname { padding-left: 3rem; }
.pp-age { margin-left: .6rem; color: var(--text-muted); font-size: .78rem; }
.pp-note-cell { cursor: pointer; }
.ev-person .c-action .btn-xs { padding: .2rem .65rem; }
.pp-edit-pair { display: flex; gap: .4rem; }
.pp-edit-pair .pp-name { flex: 1 1 auto; min-width: 0; }
.pp-edit-pair .pp-age { flex: 0 0 4.5rem; width: 4.5rem; margin: 0; font-size: .875rem; color: var(--text); }
.ev-person input.form-control { padding: .25rem .5rem; }
.tob-partial { background: var(--warn-bg); color: var(--warn); }
/* The buttons on a booking and on its people: one row, fixed sizes, so every
   Check In sits under the one above and the symbols line up in columns */
#bookings-table .ev-booking > td.c-action > .cv,
#bookings-table .ev-person > td.c-action > .cv { display: flex; align-items: center; gap: .35rem; }
#bookings-table .ev-booking .c-action .btn,
#bookings-table .ev-person .c-action .btn { height: 1.8rem; padding: 0 .6rem; margin: 0; font-size: .8rem; line-height: 1; }
.btn-ev-checkin, .btn-ev-uncheck, .btn-person-checkin, .btn-person-uncheck { min-width: 5.2rem; }
/* Move and Edit are symbols */
#bookings-table .btn-icon-move { width: 2rem; padding: 0 !important; }
.btn-icon-move svg { width: .95rem; height: .95rem; pointer-events: none; display: block; }
.icon-slot { display: inline-block; width: 2rem; flex: 0 0 auto; }
#bookings-table .ev-person > td { padding-top: .12rem; padding-bottom: .12rem; }

/* Busy times grid */
.busy-panel { margin-bottom: 1rem; padding: .6rem .75rem; }
.busy-body { overflow-x: auto; }
.busy-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-size: .8rem;
}
.busy-grid thead th {
  padding: 0 .25rem .15rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}
.busy-grid tbody th {
  position: sticky;
  left: 0;
  width: 7rem;
  padding-right: .5rem;
  font-weight: 600;
  background: var(--card-bg);
  text-align: left;
  white-space: nowrap;
}
.busy-grid td {
  min-width: 2.6rem;
  height: 1.9rem;
  border-radius: 4px;
  background: var(--bg);
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Everyone out that hour, with "+N" underneath for those starting in it */
.busy-grid td { padding: .15rem 0; }
/* Each figure is everyone out that hour, with "+N" arriving beneath */
.busy-grid td { height: 2.5rem; padding: .15rem 0; }
.busy-total { display: block; line-height: 1.15; }
.busy-new { display: block; font-size: .68rem; font-weight: 600; line-height: 1.1; opacity: .8; }
.busy-grid thead th.busy-key { text-align: left; font-weight: 700; color: var(--text); white-space: nowrap; }
.busy-key span { display: block; font-weight: 500; color: var(--text-muted); }
.busy-total-row th, .busy-total-row td { font-weight: 800; }
/* One hue, light to dark; the number is always printed so shade is never the only cue */
.busy-grid td.busy-l1 { background: #eef5fb; color: #0b3c55; }
.busy-grid td.busy-l2 { background: #e3f0f9; color: #0b3c55; }
.busy-grid td.busy-l3 { background: #cde3f4; color: #0b3c55; }
.busy-grid td.busy-l4 { background: #b5d7ee; color: #0b3c55; }
.busy-grid thead th.busy-now { color: var(--brand); font-weight: 800; }
/* The key to the hourly grid: the big figure and the bracketed one, each with its meaning */
/* The key is laid out and set exactly as a cell: the total, the new figure beneath (George, 2026-10-08) */
.busy-legend { display: block; margin-bottom: .5rem; color: #0b3c55; font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; } /* .8rem: the grid's own size */
/* Hours and row names a size up, so the grid reads without leaning in */
.busy-grid thead th { font-size: .78rem; }
.busy-new { font-size: .72rem; }
/* The names column is only as wide as its longest name: no gap before the first hour */
.busy-grid thead th.busy-key, .busy-grid tbody th { width: 1%; white-space: nowrap; }
/* Weight follows importance: a plain row is regular, a total is bold, in name and in figures alike */
.busy-grid tbody th { font-size: .82rem; font-weight: 500; color: var(--text); }
.busy-grid td { font-weight: 500; }
.busy-grid .busy-total-row th, .busy-grid .busy-total-row td { font-weight: 700; }
.busy-new { font-weight: 500; }
/* Every timeline reads as a ruler: the time sits at the left edge of its column,
   where that half hour or hour starts, with a small tick beneath it */
.busy-grid thead th:not(.busy-key), .tob-grid thead th:not(:first-child) {
  position: relative;
  padding-left: .3rem;
  padding-bottom: .35rem;
  text-align: left;
}
.busy-grid thead th:not(.busy-key)::after, .tob-grid thead th:not(:first-child)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: .3rem;
  background: #b4bfcc;
}
/* The grid's own lines: a faint rule the ticks hang from */
.busy-grid thead th, .tob-grid thead th { border-bottom: 1px solid #e3e7ec; }
.busy-grid thead th.busy-key, .tob-grid thead th:first-child { border-bottom-color: transparent; }

/* A long label on a desktop, its short form on a phone */
.lbl-narrow { display: none; }
@media (max-width: 900px) { .lbl-wide { display: none; } .lbl-narrow { display: inline; } }
/* The rec slope's grid is three groups (rec, lessons, everyone): a little air between them */
.busy-grid tr.busy-gap-row > th, .busy-grid tr.busy-gap-row > td { border-top: .45rem solid var(--card-bg); }
.busy-grid tbody th { padding-right: .9rem; }

/* Toboggan sessions: a column per half hour, a row per side of the slope */
.busy-none { color: var(--text-muted); font-style: italic; font-size: .85rem; }
.tob-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .72rem; table-layout: fixed; }
.tob-grid thead th {
  padding: 0 0 .15rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}
.tob-grid thead th:first-child, .tob-grid tbody th { width: 3.4rem; }
.tob-grid thead th.busy-now { color: var(--brand); font-weight: 800; }
.tob-grid tbody th {
  position: sticky;
  left: 0;
  background: var(--card-bg);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.tob-grid td {
  height: 3.6rem;
  padding: .2rem .15rem;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  line-height: 1.2;
}
.tob-grid td span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-kind { font-weight: 700; }
.tg-name { opacity: .85; }
.tg-fill { font-weight: 600; }
/* The CRM diary's colours: purple = open but nobody booked yet, green = has
   bookings, stronger blue = full or taken whole (exclusive, private, hour) */
/* The CRM diary's own green and lilac */
.tob-grid td.tg-free   { background: #efc9f3; }
.tob-grid td.tg-ind    { background: #d2f3bd; }
.tob-grid td.tg-full   { background: #b5d7ee; }
/* Black text on every block: the colour is the background's job */
.tob-grid td, .sched-grid td { color: var(--text); }

.tob-grid td.tg-exc    { background: #b5d7ee; }
.tob-grid td.tg-hour   { background: #b5d7ee; }
.tob-grid td.tg-closed { background: var(--bg); color: var(--text-muted); font-style: italic; }
/* A long day (twilight runs to 23 sessions) keeps readable columns and scrolls sideways rather than squashing */
.tob-grid:not(.sched-grid) { min-width: calc(3.4rem + var(--cols, 8) * 4.4rem); }
/* The type bar along the bottom of the toboggan timeline (Twilight, Disco...) */
.tob-grid tr.tg-type-row > td { height: 1.25rem; padding: 0 .4rem; font-size: .7rem; font-weight: 700; line-height: 1.25rem; color: #1f2733; text-align: left; white-space: nowrap; }
.tob-grid tr.tg-type-row > td.tg-type-none { background: none; }
/* Outdoor schedule: activity names down the side, gaps where nothing runs */
.sched-grid thead th:first-child, .sched-grid tbody th { width: 8.5rem; white-space: normal; }
.sched-grid td { height: 3.2rem; }
.sched-grid td.tg-none { background: var(--bg); }
.sched-grid td.tg-free { background: #efc9f3; }
.sched-grid td[data-event-id] { cursor: pointer; }
/* A session's name may run to two lines before it is cut short, so a short lesson still says what it is */
.sched-grid td .tg-kind { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.sched-grid td { height: 3.4rem; }
/* The same on the hourly and toboggan grids: a booked time leads to its bookings */
#busy-body td[data-slot] { cursor: pointer; }
/* Leave room for the sticky header when a heading is scrolled to */
#bookings-table .slot-row, #bookings-table .ev-row { scroll-margin-top: 4.5rem; }
/* Snowsports: the instructor's name with their initials beneath */
.sg-name { display: block; font-weight: 600; white-space: normal; line-height: 1.2; }
.sg-abbr { display: block; font-size: .68rem; font-weight: 500; color: var(--text-muted); }

/* Footer bar and the "beta · Leave feedback" corner pill, as on Insight */
.cfx-foot {
  margin: 0;
  padding: 15px 22px calc(15px + env(safe-area-inset-bottom));
  background: #3C3C3B;
  color: rgba(255,255,255,.85);
  font-size: .8rem;
  line-height: 1.5;
  text-align: center;
}
.cfx-foot .sep { margin: 0 .55em; opacity: .5; }
.beta-badge {
  position: fixed; right: .6rem; bottom: .6rem; z-index: 150;
  padding: .18rem .6rem; border-radius: 999px;
  background: #ffedd5; color: #8a4b00; border: 1px solid #f5aa4c;
  font-size: 11px; font-weight: 650; letter-spacing: .05em; line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); pointer-events: none; opacity: .85;
}
.beta-badge .bb-sep { opacity: .5; margin: 0 .3em; }
.beta-badge a.feedback-link {
  pointer-events: auto; color: inherit; font-weight: 500; letter-spacing: 0; text-decoration: none;
}
.beta-badge a.feedback-link:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .beta-badge { right: .35rem; bottom: .35rem; padding: .1rem .45rem; font-size: 9.5px; opacity: .7; box-shadow: none; }
  .beta-badge a.feedback-link { padding: .25rem 0; }
}

/* The day's count sits straight on the card: no blue box */
.day-summary { padding: 0; background: none; }
/* "Show N empty sessions": top right of Check In */
#btn-toggle-empty { margin-left: auto; }
/* Section titles: Timeline, Check In, Create Booking */
.busy-panel .section-title, .table-card .section-title { margin-bottom: .6rem; padding-bottom: .4rem; }
/* The rule under the tabs is blue */
.tabs { border-bottom-color: var(--brand); }
/* The tab on screen is filled in: brand blue, white text */
.tabs .tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Boxes and buttons do not take the page's typeface unless told to (they fall
   back to Arial): every one of them now uses the app's, as the date at the top does */
input, select, textarea, button, .form-control, .btn, .tabs .tab, .tabs-toggle { font-family: inherit; }
/* Times, dates and numbers typed into a box: the same weight as that date, figures lined up */
input[type="time"], input[type="date"], input[type="number"], .inp-discs, .inp-deposit { font-weight: 600; font-variant-numeric: tabular-nums; }

/* The phone menu button is not there on a desktop, where the tabs are a row */
.tabs-toggle { display: none; }

/* ── Phone layout ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sled-main { padding: .6rem .6rem 1rem; }
  .header-logo .logo-text { font-size: .9rem; }

  /* Date bar: the date as a heading, then Today and the joined control on one line */
  .date-nav.card { padding: 0; margin-bottom: .6rem; }
  .date-nav-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; position: relative; padding-top: 1.75rem; }
  .date-label { position: absolute; top: 0; left: 0; right: 0; margin: 0; font-size: 1.1rem; text-align: center; }
  #btn-today, .date-step { height: 2.6rem; }
  #btn-today { flex: 0 0 auto; padding: 0 .85rem; }
  .date-step { flex: 1 1 0; min-width: 0; }
  .date-step .btn-arrow { width: 2.6rem; flex: 0 0 auto; }
  #inp-date { flex: 1 1 0; min-width: 0; padding: 0 .4rem; font-size: 16px; text-align: center; }

  /* Tabs fold into one menu: a button showing the activity on screen, which
     opens the list. Kept tight: this sits above everything staff scroll to. */
  .tabs-wrap { margin-bottom: .6rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .tabs-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .7rem;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }
  .tabs-toggle-label { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
  .tabs-toggle svg { width: 1.1rem; height: 1.1rem; margin-left: auto; flex: 0 0 auto; transition: transform .15s; }
  .tabs-wrap.open .tabs-toggle svg { transform: rotate(180deg); }
  .tabs { display: none; margin: 0; border-bottom: 0; }
  .tabs-wrap.open .tabs { display: flex; flex-direction: column; gap: 0; }
  .tabs .tab {
    margin: 0;
    padding: .55rem .7rem;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-weight: 500;
    text-align: left;
  }
  .tabs .tab.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

  .busy-panel { margin-bottom: .6rem; padding: .5rem .6rem; }
  .busy-min { display: none; }
  .tob-grid { width: auto; table-layout: auto; }
  .tob-grid td { min-width: 4.6rem; }
  .busy-grid { border-spacing: 2px; font-size: .72rem; }
  .busy-grid td { min-width: 1.5rem; height: 1.7rem; }
  .busy-grid thead th { padding: 0 0 .1rem; }
  /* The first column scrolls with the rest and wraps, so it can never sit on top of the figures */
  .busy-grid tbody th { position: static; width: 4.4rem; padding-right: .3rem; white-space: normal; line-height: 1.15; }
  .busy-grid thead th.busy-key { width: 4.4rem; white-space: normal; font-size: .62rem; line-height: 1.15; }
  .busy-key span { display: block; }
  /* Room for Log out beside the wordmark */
  .header-logo .logo-text .lt-mendip { display: none; }
  .header-actions { flex: 0 0 auto; }

  /* Filter bar: filters share a row, search gets its own */
  .table-card { padding: .5rem; }
  .sled-filter-bar .filter-btn { flex: 1 1 0; padding: .6rem .3rem; }
  .sled-filter-bar .activity-info { flex: 0 0 100%; margin: 0; }
  .global-search { margin-bottom: .6rem; }
  .searchbox { width: 100%; height: 2.75rem; }
  .searchbox input { font-size: 16px; }
  .search-all-panel .sa-row { flex-wrap: wrap; gap: .35rem .6rem; }

  .day-summary { gap: .75rem; flex-wrap: wrap; }

  /* 16px inputs stop iOS zooming the page when a field is tapped */
  .form-control, .form-control--sm { font-size: 16px; }

  /* The table becomes a list of cards: one booking per card, label on the left */
  .table-responsive { overflow-x: visible; }
  #bookings-table, #bookings-table > tbody { display: block; }
  #bookings-table > thead { display: none; }
  #bookings-table > tbody > tr {
    display: block;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
  }
  #bookings-table > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .2rem .6rem !important;
    border: 0 !important;
    text-align: right;
    white-space: normal;
  }
  #bookings-table > tbody > tr > td:empty { display: none; }
  #bookings-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
  }
  #bookings-table > tbody > tr > td > .cv { min-width: 0; }
  #bookings-table > tbody > tr > td.c-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
  }
  #bookings-table > tbody > tr > td.c-action {
    justify-content: flex-end;
    padding-top: .45rem !important;
  }
  #bookings-table > tbody > tr > td.c-action .btn { padding: .65rem 1.1rem; font-size: .9rem; }
  #bookings-table > tbody > tr > td.no-data { display: block; text-align: center; }

  /* Slot and staff headers */
  #bookings-table > tbody > tr.slot-row,
  #bookings-table > tbody > tr.staff-header { padding: 0; border-bottom: 0; }
  #bookings-table > tbody > tr.slot-row > td,
  #bookings-table > tbody > tr.staff-header > td {
    display: block;
    padding: .6rem !important;
    text-align: left;
    border-bottom: 0 !important;
    border-top: 1px solid #cfd6de !important;
  }
  #bookings-table > tbody > tr.slot-row > td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: .1rem .4rem;
  }
  .slot-meta { margin-left: 0; }
  .slot-arrived { float: none; margin-left: auto; }

  /* Session / lesson rows: time and arrivals on one line, the name on the
     next, then booked / avail / staff together on one line. The snowsports
     Activity repeats the lesson name, so it is left out here. */
  #bookings-table > tbody > tr.ev-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .9rem;
    padding: .5rem .6rem;
  }
  /* Outdoor sessions are a band: colour the whole card once, not each piece of text */
  #bookings-table > tbody > tr.ev-row.tob-slot-header { background: var(--brand-light); border-bottom: 0; border-top: 1px solid #cfd6de; }
  #bookings-table > tbody > tr.ev-row.tob-slot-header > td { background: none !important; border: 0 !important; }
  #bookings-table > tbody > tr.ev-row > td {
    display: inline-flex;
    flex: 0 0 auto;
    order: 4;
    gap: .3rem;
    padding: 0 !important;
    text-align: left;
  }
  #bookings-table > tbody > tr.ev-row > td.c-evtime { order: 1; flex: 1 1 auto; font-size: .95rem; }
  #bookings-table > tbody > tr.ev-row > td.c-evarrived { order: 2; font-weight: 600; }
  #bookings-table > tbody > tr.ev-row > td.c-name { order: 3; flex: 0 0 100%; display: block; }
  #bookings-table > tbody > tr.ev-row > td.c-dup { display: none; }
  #bookings-table > tbody > tr.ev-note-row { padding: 0 0 .35rem; }
  #bookings-table > tbody > tr.ev-note-row > td { display: block; text-align: left; }

  /* A booking inside a session: name with its reference, the note, then status and buttons */
  #bookings-table > tbody > tr.ev-booking {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .8rem;
    padding: .45rem .6rem .3rem;
  }
  #bookings-table > tbody > tr.ev-booking > td { flex: 0 0 auto; padding: 0 !important; text-align: left; }
  #bookings-table > tbody > tr.ev-booking > td.c-name { order: 1; flex: 0 0 100%; }
  #bookings-table > tbody > tr.ev-booking > td[data-label="Notes"] { order: 4; flex: 0 0 100%; }
  #bookings-table > tbody > tr.ev-booking > td[data-label="Notes"]::before { display: none; }
  #bookings-table > tbody > tr.ev-booking > td[data-label="Status"] { order: 5; flex: 1 1 auto; }
  #bookings-table > tbody > tr.ev-booking > td[data-label="Status"]::before { display: none; }
  #bookings-table > tbody > tr.ev-booking > td.c-action { order: 6; padding-top: 0 !important; }

  /* A self-led booking: name with its reference, the figures together on one
     line, the note, then status and buttons. Anything with a box to type in
     keeps a line to itself. */
  #bookings-table > tbody > tr.slot-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .9rem;
    padding: .5rem .6rem;
  }
  #bookings-table > tbody > tr.slot-detail > td {
    display: inline-flex;
    flex: 0 0 auto;
    order: 3;
    gap: .3rem;
    padding: 0 !important;
    text-align: left;
  }
  #bookings-table > tbody > tr.slot-detail > td.c-name { order: 1; flex: 1 1 auto; display: block; }
  #bookings-table > tbody > tr.slot-detail > td.c-ref { order: 2; }
  #bookings-table > tbody > tr.slot-detail > td.c-ref::before { display: none; }
  #bookings-table > tbody > tr.slot-detail > td:has(input) { flex: 0 0 100%; justify-content: space-between; align-items: center; }
  #bookings-table > tbody > tr.slot-detail > td[data-label="Notes"] { order: 4; flex: 0 0 100%; display: block; }
  #bookings-table > tbody > tr.slot-detail > td[data-label="Notes"]::before { display: none; }
  #bookings-table > tbody > tr.slot-detail > td[data-label="Status"] { order: 5; flex: 1 1 auto; display: block; }
  #bookings-table > tbody > tr.slot-detail > td[data-label="Status"]::before { display: none; }
  #bookings-table > tbody > tr.slot-detail > td.c-action { order: 6; }
  #bookings-table > tbody > tr.slot-detail > td:empty,
  #bookings-table > tbody > tr.ev-row > td:empty,
  #bookings-table > tbody > tr.ev-booking > td:empty { display: none; }
  .tob-breakdown { min-width: 0; }

  /* Bookings inside a session sit in from the edge */
  #bookings-table > tbody > tr.ev-detail { margin-left: .6rem; border-left: 3px solid var(--border); }
  #bookings-table > tbody > tr.ev-booking:has(+ .ev-person) { border-bottom: 0; }
  /* A participant: name and age, then their buttons; the note on its own line beneath */
  #bookings-table > tbody > tr.ev-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .6rem;
    padding: .3rem .6rem;
    border-bottom: 0;
    background: var(--card-bg);
  }
  #bookings-table > tbody > tr.ev-person.ev-person-last { border-bottom: 1px solid var(--border); }
  #bookings-table > tbody > tr.ev-person > td, #bookings-table > tbody > tr.ev-person:hover > td { flex: 0 0 auto; padding: 0 !important; background: none; text-align: left; }
  #bookings-table > tbody > tr.ev-booking { background: var(--bg); }
  #bookings-table > tbody > tr.ev-booking > td, #bookings-table > tbody > tr.ev-booking:hover > td { background: none; }
  #bookings-table > tbody > tr.ev-person > td:empty { display: none; }
  #bookings-table > tbody > tr.ev-person > td.c-pname { order: 1; flex: 1 1 auto; min-width: 0; }
  #bookings-table > tbody > tr.ev-person > td.c-pstatus { order: 2; }
  #bookings-table > tbody > tr.ev-person > td.c-action { order: 3; padding-top: 0 !important; }
  #bookings-table .ev-booking .c-action .btn, #bookings-table .ev-person .c-action .btn { height: 2.2rem; }
  #bookings-table .btn-icon-move, .icon-slot { width: 2.4rem; }
  #bookings-table > tbody > tr.ev-person > td.pp-note-cell { order: 4; flex: 0 0 100%; font-size: .85rem; }
  #bookings-table > tbody > tr.ev-person.pp-editing > td { flex: 0 0 100%; }
  #bookings-table > tbody > tr.ev-person.pp-editing > td.c-action .btn { padding: .5rem 1rem; }

  /* Inputs inside cards */
  .deposit-inputs { justify-content: flex-end; }
  .note-cell { min-width: 0; }
  #bookings-table > tbody > tr > td.note-cell:has(.note-edit) { display: block; text-align: left; }
  #bookings-table > tbody > tr > td:has(.note-edit) { display: block; text-align: left; }
  div.note-cell { min-width: 0; }

  /* Create Booking: the voucher box sits between the price and the payment method (app.js moves it) */
  .bk-main .bk-voucher { margin: 1rem 0; }
  .bk-layout { grid-template-columns: 1fr; gap: 1rem; }
  .bk-line { gap: .6rem; }
  .bk-line .form-group { flex: 1 1 calc(50% - .3rem); min-width: 0; }
  .bk-line .form-group.wide, .bk-line .cust-search { flex-basis: 100%; }
  #wk-ad, #wk-ch, #wk-time { width: 100%; }
  /* Add Booking form: two fields per row */
  #walkin-fields { gap: .6rem; }
  #walkin-fields .form-group { flex: 1 1 calc(50% - .3rem); min-width: 0; }
  #walkin-fields .form-group.wide { flex-basis: 100%; }
  #walkin-fields .cust-search, .cust-chosen { max-width: none; }
  .wk-break { margin-top: -.6rem; }
  .cust-row { padding: .75rem .8rem; }
  .booking-actions .btn { flex: 1 1 0; }
  .price-breakdown { max-width: none; }

  /* Modals rise from the bottom and use the full width */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box, .modal-box--wide { max-width: none; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .modal-body { overflow-x: auto; }
  .modal-actions .btn { flex: 1 1 0; }
  .edit-fields .form-group, #edit-ski-fields .form-group { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   2026-10-04 styling pass
   ═══════════════════════════════════════════════════════════════ */

/* Arrived: a green edge and a quieter name, so who is still to come stands out */
#bookings-table tr.is-arrived .bk-name,
#bookings-table tr.slot-detail.is-arrived > td.c-name,
#bookings-table tr.is-arrived > td.c-pname { color: var(--text-muted); }

/* Where an open session starts and ends: a blue rule above its heading and above
   the heading that follows it. Closed sessions in a run keep the thin grey rule. */
#bookings-table > tbody > tr.tob-slot-header:has(+ tr:not(.tob-slot-header):not([style*="none"])) > td,
#bookings-table > tbody > tr:not(.tob-slot-header):not([style*="none"]) + tr.tob-slot-header > td { border-top: 2px solid var(--brand); }
#bookings-table > tbody > tr:last-child:not(.tob-slot-header):not([style*="none"]) > td:not(.no-data) { border-bottom: 2px solid var(--brand); }

/* The day in three tiles; on the self-led tabs they are buttons that filter the list */
.day-summary { display: flex; gap: .6rem; margin-bottom: .75rem; padding: 0; background: none; }
.stat-tile {
  display: flex;
  flex: 0 1 9.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
}
button.stat-tile { cursor: pointer; transition: border-color .12s; }
button.stat-tile:hover { border-color: #b9c1cc; }
button.stat-tile.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.stat-num { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .75rem; color: var(--text-muted); }
.stat-arrived .stat-num { color: var(--success, #1a8c4e); }

/* View switch (By Lesson / By Staff): one joined pill, as in the Projects app */
/* Corners match the tiles above (10px), the buttons inside sit 3px in so theirs are 7px */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.seg .filter-btn {
  padding: .3rem .95rem;
  border: 0 !important;
  border-radius: 7px;
  background: none;
  box-shadow: none;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
}
.seg .filter-btn:hover { color: var(--brand); }
.seg .filter-btn.active { background: var(--brand); color: #fff; }

/* Move and Edit are bare symbols: no box until the pointer is on them.
   A person's Check In has a thinner outline than the booking's solid button. */
#bookings-table .btn-icon-move { border-color: transparent; background: none; box-shadow: none; }
#bookings-table .btn-icon-move:hover { border-color: var(--brand); background: none; color: var(--brand); }
#bookings-table .btn-person-checkin, #bookings-table .btn-person-uncheck { border-width: 1px; }
/* Self-led rows: Check In, then the Edit pencil beside it, on one line */
#bookings-table .slot-detail > td.c-action > .cv { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
#bookings-table .slot-detail .btn-icon-move { display: inline-flex; align-items: center; justify-content: center; height: 2rem; }
/* Check In, Uncheck and Return are all one width */
#bookings-table .slot-detail .c-action .btn:not(.btn-icon-move) { min-width: 5.6rem; text-align: center; }

/* "Show N empty sessions" is a pill of the same kind */
#btn-toggle-empty {
  padding: calc(.3rem + 3px) .95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: none;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
}
#btn-toggle-empty:hover { background: var(--card-bg); color: var(--brand); border-color: #b9c1cc; }

/* A booking has just been moved here: the session and the booking glow green, then settle */
@keyframes moved-here { 0%, 55% { background-color: #cfeeda; } 100% { background-color: transparent; } }
#bookings-table > tbody > tr.just-moved > td { animation: moved-here 4s ease-out; }
@media (max-width: 900px) { #bookings-table > tbody > tr.just-moved { animation: moved-here 4s ease-out; } }

/* By Staff headings: the name, then how many sessions, lighter */
.staff-count { font-weight: 500; }
.staff-sep { margin: 0 .5rem; opacity: .6; } /* the same space either side of the bar */

/* A person with no note: a small symbol to add one */
.note-icon { display: inline-flex; vertical-align: middle; color: var(--text-muted); opacity: .6; }
.note-icon svg { width: 1rem; height: 1rem; display: block; }
.pp-note-cell:hover .note-icon { opacity: 1; color: var(--brand); }

/* One padding and one title style for every card */
.busy-panel, .table-card, #walkin-section { padding: 1rem 1.1rem; }
.busy-panel .section-title, .table-card .section-title, #walkin-section .section-title { margin-bottom: .75rem; padding-bottom: 0; border-bottom: 0; }

/* The feedback line in the footer is for phones; the corner pill is for desktops */
.foot-feedback { display: none; margin-top: .35rem; }
.cfx-foot .foot-feedback a { color: #fff; text-decoration: underline; }

@media (min-width: 901px) {
  /* Drawn as a background strip: a shadow on a cell of a collapsed table smears along its border */
  #bookings-table > tbody > tr.is-arrived > td:first-child {
    background-image: linear-gradient(var(--success, #1a8c4e), var(--success, #1a8c4e)) !important;
    background-size: 3px 100% !important;
    background-repeat: no-repeat !important;
  }

  /* A grid inside an open session: a firm line where each booking starts, a
     faint one between its people, and faint lines between the columns */
  #bookings-table > tbody > tr.ev-booking > td { border-top: 1px solid #b4bfcc; }
  #bookings-table > tbody > tr.tob-slot-header + tr.ev-booking > td,
  #bookings-table > tbody > tr.ev-note-row + tr.ev-booking > td { border-top-color: var(--border); }
  #bookings-table > tbody > tr.ev-person > td { border-top: 1px solid #e3e7ec; }
  #bookings-table > tbody > tr.ev-person.ev-person-last > td { border-bottom: 0; }
  #bookings-table > tbody > tr.ev-booking > td + td,
  #bookings-table > tbody > tr.ev-person > td + td { border-left: 1px solid #e3e7ec; }

  /* The tabs stay under the header as the page scrolls, on the page's own grey */
  .tabs-wrap { position: sticky; top: var(--header-h); z-index: 90; margin: -.6rem 0 1rem; padding-top: .6rem; background: var(--bg); }
  .tabs-wrap .tabs { margin-bottom: 0; }
  #bookings-table .slot-row, #bookings-table .ev-row { scroll-margin-top: 7.5rem; }
}

@media (max-width: 900px) {
  /* Arrived: the green edge runs down the card */
  #bookings-table > tbody > tr.is-arrived { box-shadow: inset 3px 0 0 var(--success, #1a8c4e); }
  #bookings-table > tbody > tr.ev-detail.is-arrived { border-left-color: var(--success, #1a8c4e); box-shadow: none; }

  /* The top of the page, kept quiet: one date line that says the day in words
     (so the heading above it is not needed), and the timeline folded away
     until its title is tapped */
  .date-label { display: none; }
  .date-nav-inner { padding-top: 0; }
  .date-pick { position: relative; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); cursor: pointer; }
  .date-short { display: block; color: var(--brand); font-weight: 700; font-size: 1rem; white-space: nowrap; }
  .date-pick #inp-date { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; }
  #busy-title { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
  #busy-title::after { content: ''; width: .5rem; height: .5rem; margin-right: .25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform .15s; }
  .busy-panel.tl-closed #busy-title { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .busy-panel.tl-closed #busy-title::after { transform: rotate(45deg); margin-top: -.25rem; }
  .busy-panel.tl-closed #busy-body { display: none; }

  /* The activity menu is a card like Timeline and Check In, and its name is set as their titles are */
  .tabs-wrap { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
  .tabs-toggle { padding: .6rem .7rem; color: var(--brand); font-size: 1.05rem; font-weight: 700; }
  .tabs-toggle svg { width: 1.15rem; height: 1.15rem; margin-right: .1rem; }
  .tabs .tab { padding: .6rem .7rem; font-size: .95rem; }

  /* Phone, By Staff: the staff menu, in the activity menu's clothes */
  .pick-wrap { margin-bottom: .6rem; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow); overflow: hidden; }
  .pick-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .6rem .7rem; border: 0; background: none; font: inherit; font-size: 1rem; font-weight: 700; color: var(--brand); text-align: left; cursor: pointer; }
  .pick-toggle svg { width: 1.15rem; height: 1.15rem; margin-left: auto; margin-right: .1rem; flex: 0 0 auto; transition: transform .15s; }
  .pick-wrap.open .pick-toggle svg { transform: rotate(180deg); }
  .pick-list { display: none; }
  .pick-wrap.open .pick-list { display: flex; flex-direction: column; }
  .pick-item { padding: .6rem .7rem; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; font-size: .95rem; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
  .pick-item.active { background: var(--brand); color: #fff; font-weight: 700; }

  /* The same blue rules around an open session on a phone */
  #bookings-table > tbody > tr.slot-row:has(+ tr:not(.tob-slot-header):not([style*="none"])) > td,
  #bookings-table > tbody > tr:not(.tob-slot-header):not([style*="none"]) + tr.slot-row > td,
  #bookings-table > tbody > tr.staff-header:has(+ tr:not(.tob-slot-header):not([style*="none"])) > td { border-top: 2px solid var(--brand) !important; }
  #bookings-table > tbody > tr.ev-row.tob-slot-header:has(+ tr:not(.tob-slot-header):not([style*="none"])),
  #bookings-table > tbody > tr:not(.tob-slot-header):not([style*="none"]) + tr.ev-row.tob-slot-header { border-top: 2px solid var(--brand); }
  #bookings-table > tbody > tr:last-child:not(.tob-slot-header):not([style*="none"]):not(:has(> .no-data)) { border-bottom: 2px solid var(--brand); }
  /* A firm line where each booking starts */
  #bookings-table > tbody > tr.ev-booking { border-top: 1px solid #b4bfcc; }
  /* An outdoor session: the location has a line to itself, then booked / avail / instructor together */
  #bookings-table > tbody > tr.ev-row > td[data-label="Location"] { flex: 0 0 100%; justify-content: flex-start; }

  .day-summary { gap: .4rem; margin-bottom: .6rem; }
  .stat-tile { flex: 1 1 0; min-width: 0; padding: .45rem .6rem; }
  .seg { display: flex; width: 100%; }
  .seg .filter-btn { flex: 1 1 0; padding: .55rem .3rem; font-size: .9rem; }

  /* Timelines: every half hour gets a readable width and the grid scrolls sideways,
     with the row names staying put on the left */
  .tob-grid { table-layout: fixed; width: calc(3.4rem + var(--cols, 8) * 4.6rem); }
  .tob-grid.sched-grid { width: calc(5.4rem + var(--cols, 8) * 4.4rem); }
  .tob-grid td { min-width: 0; }
  .sched-grid thead th:first-child, .sched-grid tbody th { width: 5.4rem; }
  .tob-grid tbody th { z-index: 1; }

  /* A participant: name, then note (and Arrived) stacked on the left; the buttons
     on the right, centred against them. Two columns, so nothing wraps under the
     buttons and every row is the same shape. Editing keeps the stacked layout. */
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .6rem;
    row-gap: 0;
    align-items: center;
    padding: .35rem .6rem;
  }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-pname { grid-column: 1; grid-row: 1; font-size: .9rem; line-height: 1.25; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.pp-note-cell { grid-column: 1; grid-row: 2; font-size: .8rem; line-height: 1.25; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-pstatus { grid-column: 1; grid-row: 3; margin-top: .15rem; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-action { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  /* Sizes: the booking's Check In is the big one, a person's a step smaller; the symbols match each */
  #bookings-table .ev-booking .c-action .btn { height: 2.3rem; }
  #bookings-table .ev-person .c-action .btn { height: 2rem; }
  #bookings-table .ev-booking .c-action .btn:not(.btn-icon-move),
  #bookings-table .ev-person .c-action .btn:not(.btn-icon-move) { min-width: 5.6rem; font-size: .85rem; }
  #bookings-table .ev-booking > td.c-action > .cv, #bookings-table .ev-person > td.c-action > .cv { gap: .2rem; }
  #bookings-table .btn-icon-move, .icon-slot { width: 2.2rem; }
  /* The booking has no Edit symbol: leave its space, so its Check In sits over the people's */
  #bookings-table .ev-booking > td.c-action > .cv { padding-right: 2.4rem; }
  /* A booking: a little air above the name, the status and buttons snug beneath the note */
  #bookings-table > tbody > tr.ev-booking { gap: .1rem .8rem; padding: .5rem .6rem .45rem; }
  #bookings-table > tbody > tr.ev-booking .add-note-hint, #bookings-table > tbody > tr.ev-person .add-note-hint { font-size: .8rem; }
  #bookings-table > tbody > tr.ev-booking > td[data-label="Status"] { margin-top: .25rem; }
  #bookings-table > tbody > tr.ev-booking > td.c-action { margin-top: .25rem; }
  /* No note yet: the symbol sits on the line with the name, not on a line of its own */
  #bookings-table > tbody > tr.ev-person > td.pp-note-cell:has(.note-icon) { order: 2; flex: 0 0 auto; }
  .note-icon svg { width: 1.2rem; height: 1.2rem; }

  .busy-panel, .table-card, #walkin-section { padding: .6rem .7rem; }

  .beta-badge { display: none; }
  .foot-feedback { display: block; }
}

@media print {
  .btn-logout, .btn-person-save, .btn-person-cancel, .booked-by, .cfx-foot, .beta-badge { display: none !important; }
}

/* ── Phone: Create Booking's session finder and pickers (George, 2026-10-08) ── */
@media (max-width: 900px) {
  /* The session finder and the Date box each take a line of their own */
  #walkin-fields .form-group.wk-find, #walkin-fields .form-group.wk-date-group { flex: 0 0 100%; }
  .wk-date-step { display: flex; width: 100%; }
  .wk-date-step #wk-date { flex: 1 1 0; min-width: 0; width: 100%; }
  .wk-picker { flex: 0 0 100%; max-width: 100%; min-width: 0; }
  /* Each session (snowsports, outdoor) or toboggan slot is a card: tapping anywhere on it picks it */
  .wk-pick-table table, .wk-pick-table tbody, .wk-pick-table tr, .wk-pick-table td { display: block; }
  .wk-pick-table thead { display: none; }
  .wk-pick-table tr { position: relative; margin-bottom: .5rem; padding: .55rem .7rem .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
  .wk-pick-table tr.is-picked { border-color: var(--brand); background: var(--brand-light); }
  .wk-pick-table tr.is-picked > td, .wk-pick-table tr > td { padding: 0 !important; border: 0 !important; background: none !important; text-align: left; }
  /* Sessions: the radio top right, the date or activity as the title, the time, then the figures in a row */
  .wk-pick-row > td:first-child { position: absolute; top: .55rem; right: .7rem; }
  .wk-pick-row > td.wk-pick-title { padding-right: 2rem !important; font-weight: 700; font-size: 1rem; }
  .wk-pick-row > td.wk-pick-time { margin: .1rem 0 .35rem; color: var(--text); }
  .wk-pick-row > td[data-label] { display: inline-block; margin-right: 1rem; font-size: .9rem; }
  .wk-pick-row > td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
  .wk-pick-row > td.wk-pick-price { font-weight: 700; } /* in the row with the figures */
  /* Toboggan slot: the time and type on the first line, the three ways of booking as lines beneath */
  .wk-tob-table td.c-time { display: inline-block; margin-right: .6rem; font-size: 1.05rem; }
  .wk-tob-table td.c-time + td { display: inline-block; color: var(--text-muted); }
  .wk-tob-table td.c-time + td .wk-tob-note { display: block; }
  .wk-tob-table td.wk-tob-cell { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .35rem; padding: .4rem 0 0 !important; border-top: 1px solid var(--border) !important; white-space: normal; }
  .wk-tob-table td.wk-tob-cell::before { content: attr(data-label); flex: 1 1 auto; font-size: .82rem; font-weight: 600; color: var(--text-muted); }
  .wk-tob-table td.wk-tob-cell .wk-tob-pick { display: flex; align-items: center; gap: .4rem; }
  .wk-tob-table td.wk-tob-cell .wk-tob-note { display: inline; order: -1; margin: 0 .5rem 0 0; } /* "16 spaces left" before the radio and price */
  .wk-tob-table td.wk-tob-cell.is-off { color: var(--text-muted); }
  /* A person under a booking: the name (with age) on a line of its own, then the note
     on the left with the status and buttons on the right, so long names never wrap
     round the buttons (George, 2026-10-08) */
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-pname { grid-column: 1 / span 2; grid-row: 1; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-pname .pp-age { white-space: nowrap; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.pp-note-cell { grid-column: 1; grid-row: 2; align-self: center; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-pstatus { grid-column: 1; grid-row: 3; }
  #bookings-table > tbody > tr.ev-person:not(.pp-editing) > td.c-action { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  /* A booking's status and its buttons stay on one line */
  #bookings-table > tbody > tr.ev-booking > td[data-label="Status"] { flex: 1 1 0; min-width: 0; }
  #bookings-table .ev-booking .c-action .btn:not(.btn-icon-move), #bookings-table .ev-person .c-action .btn:not(.btn-icon-move) { padding: .5rem .85rem; }
}