/* @cascade-order: 4 — do not reorder. Split 5/10 of the former
   monolithic style.css (see docs/ui-pattern-audit.md and ADR-0095-style-css-split-into-ten-contiguous-files).
   Originally a contiguous slice of style.css in @cascade-order. That
   ordering is still enforced (tests/unit/css-split-structure.test.js);
   byte-for-byte reconstruction is NOT enforced and must not be relied on
   — the split files have been edited independently since. Earlier headers
   cited tests/unit/css-split-equality.test.js, which does not exist.
   Contains: Schedule sections, the two-panel check-in layout, the mini-schedule popup, notes preview popup, and the daily check-ins tab.
   Original line range: 8482-10688. */
/* ==========================================================================
   SCHEDULE SECTIONS (New Combo-Based Layout)
   ========================================================================== */

/* No bottom margin on .schedule-section: it pushed down whatever followed the
   section (the schedule's footnote sat 24px below the sheet). */

.schedule-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.schedule-section-header h4 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

/* Actions cluster wraps + flexes so the filter selects + Add button
   don't push past the viewport edge on mobile. Each child can shrink
   below its content width if needed. */
.schedule-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.schedule-header-actions .schedule-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.schedule-header-actions .schedule-filter {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 600px) {
  .schedule-section-header {
    /* Stack on mobile so the title sits above the filter row instead
       of fighting it for horizontal space. */
    flex-direction: column;
    align-items: stretch;
  }
  .schedule-header-actions {
    justify-content: flex-start;
  }
}

/* Schedule Config Grid (Class types + Age groups: Settings -> Class types & age groups) */
/* `minmax(0, 1fr)`, not `1fr`: a track's minimum is its content's, and an
   archived row (chip, fact, three controls) would otherwise stretch the column
   past the phone's edge. */
.schedule-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .schedule-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The disciplines and age-groups lists are `.type-list` > `.type-item` since
   D6 (ADR-0130) — the same row every other Settings list uses. `.config-list`,
   `.config-item` and its five children are deleted: they declared the same flex
   row with different trim (`--radius-md` against `--radius-sm`, an
   always-visible action cluster against a hover-revealed one), and none of that
   was a decision anyone had made twice. The row now lives in
   `50-history-admin-camps.css` beside `.type-item`.

   The colour dot the class type row leads with survives as `.type-item-dot`,
   and its facts as `.type-item-meta` > `.settings-row-fact`. */

/* Coach Add Row */
.coach-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.coach-add-row .form-input {
  flex: 1;
  min-width: 0;
}

.coach-add-row .btn {
  flex-shrink: 0;
}

.coach-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.coach-item-name {
  flex: 1;
  font-weight: 500;
}

/* Coach list (assign modal) */
.coach-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-y: auto;
  max-height: 60vh;
}

.coach-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
  border-bottom: 1px solid var(--color-border-subtle);
}

.coach-list-item:last-child {
  border-bottom: none;
}

.coach-list-item:hover {
  background: var(--hover-row);
}

.coach-list-item .coach-list-check {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1;
}

.coach-list-item .coach-list-name {
  font-size: var(--text-sm);
}

.coach-list-item.selected {
  background: var(--color-accent-tint);
}

.coach-list-item.selected .coach-list-check {
  color: var(--color-accent);
}

.coach-list-item.selected .coach-list-name {
  font-weight: var(--font-medium);
}

/* Combos List */
.combos-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.combo-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.combo-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.combo-label {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

.combo-access-badge {
  font-size: 0.7857rem;
  padding: 2px 8px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.combo-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.combo-color-input {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.combo-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.combo-color-input::-webkit-color-swatch {
  border: 2px solid var(--color-border);
  border-radius: 50%;
}

.combo-color-input::-moz-color-swatch {
  border: 2px solid var(--color-border);
  border-radius: 50%;
}

.combo-color-input:hover {
  transform: scale(1.1);
}

/* Hex color input row */
.hex-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hex-preview {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

/* Database setup needed */
.setup-needed {
  padding: var(--space-4);
  text-align: center;
}

.combo-count {
  font-size: var(--text-sm);
  font-weight: normal;
}

/* Combo Preview (in modals) */
.combo-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.combo-preview-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.combo-preview-text {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

/* Button size helpers */
/* ==========================================================================
   TWO-PANEL CHECK-IN LAYOUT
   ========================================================================== */

/* Main Layout Container */
.checkin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-4);
  min-height: calc(100vh - 150px);
}

/* ==========================================================================
   LEFT PANEL: Schedule Sidebar
   ========================================================================== */

.checkin-schedule-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.schedule-panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.schedule-panel-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* Schedule Class List */
.schedule-class-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Time Group Header */
/* No margin: .schedule-list's gap (v3.css:385) separates the groups. */

/* The hour is a LOCATOR, not a fact you read, so it stays on the muted token
   and small. Tabular figures keep 7:00 and 11:30 the same width. */
/* `.schedule-time-header` is authored in v3.css (1072). The copy that stood
   here declared the same seven properties with the same values -- a second
   owner with nothing to say. The past-group variant that followed it is dead
   besides: the sidebar's finished stretch has one period label and no hour
   headers at all now, and the mobile sheet scopes its own. */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ==========================================================================
   RIGHT PANEL: Check-in Workspace
   ========================================================================== */

.checkin-workspace-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* `.checkin-search-bar` removed (ADR-0128) — two rules, zero emitters. */

/* Clickable Pass/Membership Badges */
.pass-badge-clickable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.pass-badge-clickable:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pass-badge-clickable.opengym {
  background: var(--color-opengym);
  color: #fff;
}

.pass-badge-clickable.classes {
  background: var(--color-classes);
  color: #fff;
}

.pass-badge-clickable.athletic {
  background: var(--color-athletic);
  color: #333;
}

.pass-badge-clickable.private {
  background: var(--color-private);
  color: #fff;
}

.pass-badge-clickable.membership {
  border: 1px solid currentColor;
}

/* Class Info (inside section header) */
.class-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.class-info-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.class-info-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* `.checkin-section-count` is owned by v3.css: a plain tabular number in the
   pane head. The pre-V3 rule here made it a filled green pill, and v3.css only
   redeclares font properties — so the green background and the pill sizing
   survived by not conflicting, and the count read as a success badge even when
   it said 0. Same leak mechanism as .attendance-toolbar and .date-picker-footer:
   load order cannot override a property the new rule never mentions. */

/* ==========================================================================
   MINI-SCHEDULE POPUP (Pass Usage)
   Matches schedule sidebar card design
   ========================================================================== */

/* Arrow pointing left (popup is to the right of badge) */

/* Arrow pointing right (popup is to the left of badge) */

/* Card design matching schedule-class-item */

/* Next-up highlight (stronger color) */

/* Past classes - greyed out but still clickable (for late arrivals) */

/* 3-column layout: [Name] [Age] [Time] */

/* Square event picker popup - wider to fit room/time details */

/* Name column stacked: saved name bold + parent/booking name smaller */

/* Room + Time stacked in 2 rows */

/* Open Gym option - visually separated from class list */

/* "or select a class" label after Open Gym */

/* ==========================================================================
   NOTES PREVIEW POPUP (hover on notes badge)
   ========================================================================== */

/* The pointer is the shared `.anchored.arrow-*` family in v3.css (ADR-0120):
   this element carries `anchored`, which also makes its overflow visible so the
   pointer can sit outside the box — the card's own corners move onto its first
   and last child, the way the check-in popover's always did.
   The tinted header means the anchored edge is NOT the card's elevated
   surface, so it overrides the fill and nothing else. Its hand-written pair
   pointed only UP; it never flipped, so a badge low on a long members table
   opened a card that ran off the bottom of the screen. */
.notes-preview-popup {
  position: fixed;
  z-index: var(--z-anchored, 1000);
  width: 280px;
  max-width: 90vw;
  overflow: hidden;
  --anchor-arrow-fill: var(--color-bg-subtle);
}

.notes-preview-popup.hidden {
  display: none;
}

.notes-preview-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
}

.notes-preview-content {
  padding: var(--space-3);
  max-height: 200px;
  overflow-y: auto;
}

.notes-preview-item {
  padding: var(--space-2);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-2);
}

.notes-preview-item:last-child {
  margin-bottom: 0;
}

.notes-preview-item.important {
  background: var(--color-warning-tint, #fef3c7);
}

.notes-preview-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  text-align: center;
}

/* Interactive badges (hover/click) */
.notes-badge-interactive {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.notes-badge-interactive:hover {
  opacity: 0.8;
}

/* ==========================================================================
   DAILY CHECK-INS TAB (Activity Log)
   ========================================================================== */

.daily-checkins-layout {
  display: flex;
  gap: var(--space-4);
  min-height: 400px;
}

.daily-checkins-list {
  flex: 1;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  box-shadow: var(--shadow-sm);
}

.daily-checkins-sidebar {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.daily-checkins-info {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

/* Daily Check-in Entry */
.dailyCheckin-entry {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
}

.dailyCheckin-entry:last-child {
  border-bottom: none;
}

.dailyCheckin-entry:hover {
  background: var(--color-bg-subtle);
}

.oldToNewSticker {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Change indicator colors for history displays */
.additive-update {
  background-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}

.subtractive-update {
  background-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Pass type colors */
.opengympasses-color { background: #FFE082; color: #5D4037; }
.classpasses-color { background: #C5E1A5; color: #33691E; }
.privatekidpasses-color { background: #B3E5FC; color: #01579B; }
.privateadultpasses-color { background: #D1C4E9; color: #4527A0; }
.aerialsilkspasses-color { background: #F8BBD9; color: #880E4F; }