:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  --modal-surface: #ffffff;
  --modal-surface-soft: #f8fafc;
  --modal-border: #d8dbe2;
  --modal-divider: #e7eaf0;
  --modal-text: #1f2937;
  --modal-text-muted: #4b5563;
  --modal-radius: 12px;
  --modal-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  --modal-title-size: 1.05rem;
  --modal-body-size: 0.9rem;
  --modal-help-size: 0.88rem;
  --modal-header-pad-y: 0.8rem;
  --modal-header-pad-x: 1rem;
  --modal-section-radius: 10px;
  --modal-section-border: #e2e8f0;
  --modal-section-bg: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f6f8fb;
  color: #1a1a1a;
}

/* Sits after the schedule in normal page flow — scroll down to reach it. */
.app-status-bar {
  width: 100%;
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding: 0.55rem 1rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  min-height: 3rem;
  background: #fff;
  border: 1px solid #d8dbe2;
  border-radius: 12px;
}

.app-status-bar-side--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem 0;
  text-align: left;
  min-width: 0;
}

.app-status-bar-brand {
  color: #0f2942;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.app-status-bar-tagline {
  color: #b8c0cc;
  font-size: 0.8rem;
  font-weight: 500;
}

.app-status-bar-side {
  min-width: 0;
}

.app-status-bar-side--right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.app-status-bar-btn {
  font-size: 0.9rem;
  flex-shrink: 0;
}

#settingsBtn,
#coachBtn,
#registrationStatusBtn,
#feesBtn,
#productsBtn {
  padding: calc(0.25rem * 1.25) calc(0.375rem * 1.25);
  font-size: calc(0.95rem / 2 * 1.25);
  line-height: 1.2;
  border-radius: 5px;
}

/* Toggleable “what this window does” copy (Settings → Display). */
body.app-hide-modal-help .app-modal-help {
  display: none !important;
}

.app-modal-help {
  margin: 0 1rem 0.75rem;
}

.app-modal-help--bleed {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.app-modal-help--inline {
  margin: 0;
  display: block;
}

.modal-header + .app-modal-help {
  margin-top: -0.25rem;
}

.modal-help-text {
  margin: 0;
  font-size: var(--modal-help-size);
  line-height: 1.45;
  color: var(--modal-text-muted);
}

.modal-content-settings {
  width: min(420px, 96vw);
}

.modal-content-products-catalog {
  width: min(720px, 96vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
}

.modal-content-products-catalog .modal-header {
  flex-shrink: 0;
}

.modal-content-products-catalog .app-modal-help {
  flex-shrink: 0;
}

.products-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0 1rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.products-catalog-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.products-edit-status {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
  max-width: 26rem;
  line-height: 1.35;
}

.products-catalog-body {
  padding: 0.85rem 1rem 1.1rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.products-catalog-root {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.products-catalog-section {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
}

.products-catalog-section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.products-catalog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem;
  gap: 0.35rem 0.65rem;
  align-items: center;
  max-width: 42rem;
}

.products-catalog-grid--head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 0.15rem;
}

.products-catalog-grid--head span:last-child {
  text-align: right;
}

.products-per-class {
  font-size: 0.86rem;
  color: #334155;
  text-align: right;
  white-space: nowrap;
}

input.products-per-class-input {
  width: 100%;
  text-align: right;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 0.9rem;
}

input.products-per-class-input:disabled,
input.products-per-class-input[readonly] {
  background: #f1f5f9;
  color: #334155;
}

.products-catalog-grid label {
  font-size: 0.88rem;
  color: #1e293b;
}

.products-catalog-grid input[type="number"] {
  width: 100%;
  text-align: right;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 0.9rem;
}

.products-catalog-grid input[type="number"]:disabled,
.products-catalog-grid input[type="number"][readonly] {
  background: #f1f5f9;
  color: #334155;
}

.modal-content-settings .settings-modal-body {
  padding: 0 1rem 1.1rem;
}

.settings-modal-lede {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #374151;
}

.settings-section {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.settings-section-hint {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: #64748b;
}

.settings-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1f2937;
  cursor: pointer;
}

.settings-checkbox-label input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.settings-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-status-bar-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 2.1rem;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #64748b;
  text-decoration: none;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.app-status-bar-exit:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.modal-content-backup {
  max-width: 34rem;
}

.backup-modal-body {
  padding: 0 1rem 1rem;
}

.backup-import-status {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #b91c1c;
}

.backup-import-status.hidden {
  display: none;
}

.modal-content-update-data-pin {
  width: min(400px, 96vw);
}

.update-data-pin-body {
  padding: 0 1rem 1rem;
}

.update-data-pin-body > .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

.update-data-pin-intro {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #4a5568;
}

.update-data-pin-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  margin-bottom: 0.65rem;
}

.update-data-pin-input {
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  max-width: 14rem;
}

.update-data-pin-error {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: #9f1239;
}

.update-data-pin-error.hidden {
  display: none !important;
}

#coachAssignConflictMessage {
  white-space: pre-line;
}

.coach-assign-conflict-summary {
  margin: 0.65rem 1rem 0.8rem;
  border: 1px solid #d9dfeb;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.55rem 0.65rem;
}

.coach-assign-conflict-progress {
  margin: 0 0 0.45rem;
  font-size: 0.84rem;
  color: #4b5563;
  font-weight: 600;
}

.coach-assign-conflict-list {
  display: grid;
  gap: 0.32rem;
  max-height: 11rem;
  overflow: auto;
}

.coach-assign-conflict-item {
  border: 1px solid #d9dfeb;
  border-radius: 8px;
  background: #fff;
  padding: 0.4rem 0.5rem;
  font-size: 0.83rem;
  line-height: 1.35;
  color: #1f2937;
}

.coach-assign-conflict-item--active {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 1px #2563eb;
}

.coach-assign-conflict-item--overwrite {
  border-color: #16a34a;
  background: #f0fdf4;
}

.coach-assign-conflict-item--skip {
  border-color: #f59e0b;
  background: #fffbeb;
}

.coach-assign-conflict-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.update-data-pin-actions {
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

/* Keep coach-rate PIN gate compact and place actions under PIN input. */
#coachPaymentPinModal .modal-content-update-data-pin {
  width: min(360px, 92vw);
}

#coachPaymentPinModal .update-data-pin-body {
  padding: 0 1rem 0.85rem;
}

#coachPaymentPinModal .update-data-pin-input {
  max-width: 100%;
}

#coachPaymentPinModal .update-data-pin-actions {
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

/* Compact PIN gate for Products pricing (no help blurb; buttons sit under the PIN field). */
#feeCatalogPinModal .modal-content-update-data-pin {
  width: min(300px, 92vw);
}

#feeCatalogPinModal .modal-header {
  padding: 0.55rem 0.65rem 0.45rem;
}

#feeCatalogPinModal .modal-header h2 {
  font-size: 1.05rem;
}

#feeCatalogPinModal .update-data-pin-body {
  padding: 0 0.85rem 0.75rem;
}

#feeCatalogPinModal .update-data-pin-label {
  margin-bottom: 0.35rem;
}

#feeCatalogPinModal .update-data-pin-input {
  max-width: 100%;
}

#feeCatalogPinModal .update-data-pin-error {
  margin: 0 0 0.45rem;
}

#feeCatalogPinModal .update-data-pin-actions {
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0;
}

.login-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  padding-bottom: 1rem;
  background: linear-gradient(180deg, #f0f4ff 0%, #f7f9fc 100%);
}

.login-card {
  width: min(430px, 96vw);
  background: #fff;
  border: 1px solid #d8dbe2;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(28, 41, 77, 0.12);
  padding: 1rem 1rem 1.1rem;
}

.login-title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.login-subtitle {
  margin: 0 0 0.9rem;
  color: #4b5565;
  font-size: 0.93rem;
}

.login-form {
  display: grid;
  gap: 0.7rem;
}

.login-label {
  font-size: 0.9rem;
  display: grid;
  gap: 0.35rem;
}

.login-input {
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  font: inherit;
}

.login-error {
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #9f1239;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-size: 0.88rem;
}

.login-success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-size: 0.88rem;
}

.login-help {
  margin: 0;
  color: #5f6978;
  font-size: 0.82rem;
}

.login-separator {
  text-align: center;
  color: #637084;
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

.google-btn {
  width: 100%;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid #d8dbe2;
}

.app-header-brand {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.app-header-logo {
  display: block;
  height: auto;
  max-height: 28.9px;
  width: auto;
  max-width: min(238px, 44.2vw);
}

.app-header-version {
  font-size: 0.7rem;
  font-weight: 600;
  color: #7c8494;
  letter-spacing: 0.02em;
  padding-bottom: 0.12rem;
}

.login-header-brand {
  justify-content: center;
}

.login-card .login-header-brand {
  margin-bottom: 0.45rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-display .date-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-picker-anchor {
  position: relative;
}

.date-picker-popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  min-width: 17.5rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0;
  background: #fff;
  border: 1px solid #d8dbe2;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.date-picker-popover-inner {
  padding: 0.65rem 0.75rem 0.75rem;
}

.date-picker-month-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.date-picker-month-label {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1c3172;
}

.date-picker-nav-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #d8e0ff;
  border-radius: 8px;
  background: #eef2ff;
  color: #1c3172;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.date-picker-nav-btn:hover {
  background: #e0e7ff;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
  margin-bottom: 0.25rem;
}

.date-picker-weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #5b6470;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.date-picker-days-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.date-picker-day-pad {
  min-height: 2.15rem;
}

.date-picker-day {
  min-height: 2.15rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fafc;
  color: #1c3172;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}

.date-picker-day:hover {
  background: #eef2ff;
  border-color: #d8e0ff;
}

.date-picker-day.is-today {
  font-weight: 700;
  border-color: #2f64f5;
  color: #1c3172;
}

.date-picker-day.is-selected {
  background: #2f64f5;
  color: #fff;
  font-weight: 700;
  border-color: #2f64f5;
}

.date-picker-day.is-selected.is-today {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.date-picker-footer-separator {
  height: 1px;
  background: #d8dbe2;
  margin: 0.55rem 0 0.45rem;
  border: 0;
}

.date-picker-today-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1c3172;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
}

.date-picker-today-btn:hover {
  background: #eef2ff;
  color: #2f64f5;
}

.date-picker-today-btn:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .date-picker-popover {
    left: auto;
    right: 0;
    transform: none;
  }
}

.date-label {
  font-weight: 700;
}

.weekday-label {
  font-size: 0.85rem;
  color: #5b6470;
}

.btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-primary {
  background: #2f64f5;
  color: #fff;
}

.btn-success {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}

.btn-success:hover:not(:disabled) {
  background: #15803d;
}

.btn-danger {
  background: #b91c1c;
  color: #fff;
  border-color: #991b1b;
}

.btn-danger:hover:not(:disabled) {
  background: #991b1b;
}

.btn-secondary {
  background: #eef2ff;
  color: #1c3172;
  border-color: #d8e0ff;
}

.calendar-btn {
  font-size: 1.1rem;
  line-height: 1;
}

.calendar-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85px;
  min-width: 0;
  min-height: 0;
  border-radius: 8.5px;
  cursor: pointer;
  background: #fff;
  border-color: #d8dbe2;
}

.calendar-picker-btn:hover:not(:disabled) {
  background: #fff;
  border-color: #b8c0cc;
}

.calendar-picker-btn:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 1.7px;
}

.date-picker-calendar-icon {
  display: block;
  width: 3.575rem;
  height: 3.575rem;
  max-width: min(3.575rem, 19.8vw);
  max-height: min(3.575rem, 19.8vw);
  object-fit: contain;
  pointer-events: none;
}

@media (min-width: 900px) {
  .date-picker-calendar-icon {
    width: 4.125rem;
    height: 4.125rem;
    max-width: 4.125rem;
    max-height: 4.125rem;
  }

}

.invisible-date-input,
.hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.schedule-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

.schedule-container {
  display: grid;
  gap: 1rem;
}

.class-card {
  border: 1px solid #d8dbe2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  /* Keeps auto-scroll from hiding the card under the sticky header */
  scroll-margin-top: 7rem;
}

.class-header {
  display: grid;
  /* Col1 = class name + count only; col2 = coach + notes (mid). Keep first two tracks in sync with .student-row. */
  grid-template-columns: minmax(15rem, 1.35fr) minmax(0, calc(45ch + 0.75rem + 85px)) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  background: #f0f4ff;
  border-bottom: 1px solid #d8dbe2;
}

.class-header--day-cancelled {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  border-bottom-color: #fecaca;
}

.class-title {
  margin: 0;
  font-size: 1rem;
  min-width: 0;
}

.class-title-main {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: context-menu;
}

.class-header-mid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem 1rem;
  min-width: 0;
}

.class-header-mid .class-header-notes-type {
  flex: 1 1 auto;
  min-width: 0;
}

.class-header-coach {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.class-header-coach-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px dashed #c8cfdb;
  background: #fff;
  border-radius: 8px;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  font: inherit;
  color: #415069;
}

.class-header-coach-add:hover {
  border-color: #2f64f5;
  background: #f5f7ff;
  color: #1c3172;
}

.class-header-coach-plus {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

.class-header-coach-label {
  font-size: 0.88rem;
  font-weight: 600;
}

.class-header-coach-assigned {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.class-header-substitute-btn,
.class-header-remove-substitute-btn {
  font-size: 0.72rem;
  padding: 0.18rem 0.45rem;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
}

.class-header-coach-assigned input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
}

.class-header-coach-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(100%, 16rem);
  border: 1px solid #d8dbe2;
  background: #fff;
  border-radius: 8px;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.class-header-coach-profile-btn:hover {
  border-color: #2f64f5;
  background: #f8faff;
}

.class-header-coach-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.class-header-coach-thumb-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, #f0f2f7 0%, #e4e8f0 100%);
  border: 1px solid #d8dbe2;
  box-sizing: border-box;
}

.class-header-coach-text {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 0.88rem;
  color: #1a2233;
  min-width: 0;
}

.class-header-coach-word {
  color: #5f6978;
  font-weight: 600;
  flex-shrink: 0;
}

.class-header-coach-name {
  font-weight: 700;
  color: #1a2233;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.class-coach-pick-hint {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.class-coach-pick-actions {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e8ecf2;
}

.class-coach-pick-actions .hidden {
  display: none !important;
}

.class-attendee-count {
  color: #2f64f5;
}

.class-header-notes-type {
  display: grid;
  grid-template-columns: minmax(0, 45ch) 85px;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.class-header-notes {
  font-size: 9pt;
  font-weight: 700;
  color: #5f6978;
  text-align: right;
  min-width: 0;
}

.class-header-notes--editable {
  cursor: pointer;
}

.class-header-notes--editable:hover,
.class-header-notes--editable:focus-visible {
  color: #1e3a8a;
  outline: none;
}

.class-header-notes--has-text {
  font-weight: 600;
  color: #1e293b;
  text-align: right;
  white-space: nowrap;
  line-height: 1.25;
  overflow: hidden;
  max-width: 100%;
}

.class-header-type-spacer {
  display: block;
  width: 85px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.class-time {
  color: #415069;
  font-size: 0.9rem;
}

.student-list {
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
}

.student-row {
  display: grid;
  grid-template-columns: minmax(15rem, 1.35fr) minmax(0, calc(45ch + 0.75rem + 85px)) auto;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
}

.student-notes-type-wrap {
  display: grid;
  grid-template-columns: minmax(0, 45ch) minmax(85px, 7.5rem);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.student-notes-slot {
  min-width: 0;
}

.student-row > .student-notes-type-wrap,
.student-row > .student-registration-dot {
  align-self: center;
}

.student-notes-type-wrap .student-type-cell {
  justify-self: start;
}

.student-row + .student-row {
  border-top: 1px solid #edf0f5;
}

.student-name-cell {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 0;
}

.student-name-cell input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  align-self: center;
  flex-shrink: 0;
}

.student-profile-slot {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-self: stretch;
  width: 44px;
  flex-shrink: 0;
  /* Pull into row vertical padding so the photo reaches the horizontal divider lines */
  margin: -0.5rem 0;
  padding: 0;
  box-sizing: border-box;
}

.student-profile-placeholder {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0;
  background: linear-gradient(145deg, #f0f2f7 0%, #e4e8f0 100%);
  border-left: 1px dashed #bcc4d4;
  border-right: 1px dashed #bcc4d4;
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
}

.student-profile-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.student-name-with-sibling {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.student-name-with-sibling .student-sibling-icon {
  margin-top: 0.2em;
}

.student-name-with-sibling .student-name-btn {
  min-width: 0;
  text-align: left;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.35;
}

.student-sibling-icon {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 16px;
}

.student-notes-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0.15rem 0;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 9pt;
  background: transparent;
  color: #1a2233;
  cursor: pointer;
}

.student-notes-trigger:hover {
  background: rgba(47, 100, 245, 0.06);
}

.student-notes-trigger:focus {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
}

.student-notes-trigger--has-note .student-notes-trigger__preview {
  flex: 1 1 auto;
  min-width: 0;
}

.student-notes-trigger__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* When a note exists, JS sets [hidden] but display:block above would override it — hide the icon for sure. */
.student-notes-trigger--has-note .student-notes-trigger__icon {
  display: none;
}

.student-notes-trigger--empty .student-notes-trigger__preview {
  display: none;
}

.student-notes-trigger__preview {
  display: block;
  max-width: 100%;
  font-size: 9pt;
  line-height: 1.25;
  color: #1a2233;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-content-attendance-note {
  max-width: 28rem;
  width: calc(100% - 2rem);
}

.attendance-note-modal-body {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.attendance-note-modal-body label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #415069;
}

.attendance-note-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #c8cfdb;
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.attendance-note-textarea:focus {
  outline: none;
  border-color: #2f64f5;
}

.attendance-note-modal-actions {
  margin-top: 0.25rem;
  justify-content: flex-end;
}

.attendance-note-tooltip {
  position: fixed;
  z-index: 10050;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.5rem 0.65rem;
  background: #1a2233;
  color: #f4f6fa;
  font-size: 0.85rem;
  line-height: 1.35;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.student-type-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  font-size: 9pt;
  color: #5f6978;
  text-align: left;
  line-height: 1.25;
  cursor: context-menu;
}

.student-type-cell-label {
  display: block;
  min-width: 0;
}

.student-dropin-pay {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.student-dropin-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border: 1px solid #c8cfdb;
  border-radius: 6px;
  background: #fff;
  color: #5f6978;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}

.student-dropin-pay-btn:hover {
  border-color: #2f64f5;
  color: #1a3d8a;
}

.student-dropin-pay-btn--active {
  border-color: #1e8f4a;
  background: #e8f7ee;
  color: #146a36;
  font-weight: 700;
  cursor: default;
}

.student-dropin-pay-btn--unpaid-option.student-dropin-pay-btn--active {
  border-color: #c45c12;
  background: #fff4e8;
  color: #8a420d;
}

.student-list-unpaid-modal-body {
  padding: 0 1rem 1rem;
  max-height: min(70vh, 520px);
  overflow: auto;
}

.student-list-dropin-unpaid-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.student-list-dropin-unpaid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.student-list-dropin-unpaid-table th,
.student-list-dropin-unpaid-table td {
  border: 1px solid #e2e6ef;
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.student-list-dropin-unpaid-table th {
  background: #f0f3f9;
  color: #334155;
  font-weight: 600;
}

.student-list-dropin-unpaid-empty {
  color: #5f6978;
  font-style: italic;
  text-align: center;
}

.student-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.student-list-header > h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.student-list-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
}

.student-list-unpaid-btn {
  font-size: 0.88rem;
  white-space: nowrap;
}

.student-list-empty {
  list-style: none;
  color: #5f6978;
  padding: 0.8rem 0.25rem;
}

.student-add-row {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  padding: 0.3375rem 0.25rem;
  border-top: 1px solid #edf0f5;
}

.student-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30ch;
  max-width: 100%;
  padding: 0.3375rem 0.35rem;
  border: 1px dashed #c8cfdb;
  border-radius: 6px;
  background: transparent;
  font-size: 1.03125rem;
  line-height: 1;
  color: #5f6978;
  cursor: pointer;
}

.student-add-btn:hover {
  background: #f0f4ff;
  border-color: #2f64f5;
  color: #2f64f5;
}

.student-sparse-block {
  list-style: none;
  border-top: 1px solid #edf0f5;
  padding: 0;
}

.student-sparse-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.26rem 0.25rem;
  border: 0;
  border-radius: 6px;
  background: #f0f2f8;
  color: #1a1a1a;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.student-sparse-toggle:hover {
  background: #e6e9f2;
}

.student-sparse-toggle:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
}

.student-sparse-toggle-chevron {
  flex-shrink: 0;
  width: 1.35rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1;
  color: #dc2626;
}

.student-sparse-toggle-text {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.student-sparse-toggle-line {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #243044;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-sparse-nested-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.35rem 0;
  background: #fafbfd;
  border-top: 1px solid #edf0f5;
}

.student-sparse-nested-list .student-row {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.student-name-btn {
  border: 0;
  background: transparent;
  color: #1d4fd8;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
}

.student-name-btn.student-name--coach,
.all-students-name.student-name--coach,
.all-students-name-btn.student-name--coach,
.student-list-suggestion-item.student-name--coach {
  font-weight: 700;
}

.empty-message {
  color: #5f6978;
  padding: 0.8rem 1rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Registration status: circle same size as attendance checkbox (see .student-name-cell input[type="checkbox"]). */
.student-registration-dot {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: help;
}

.student-row > .student-registration-dot {
  /* Pull close to class type (grid column-gap is 0.75rem). */
  margin-left: -0.65rem;
}

.student-registration-dot--paid {
  background-color: rgba(22, 101, 52, 0.35);
}

.student-registration-dot--paid-no-date {
  background-color: rgba(249, 115, 22, 0.7);
}

.student-registration-dot--unpaid {
  background-color: rgba(159, 18, 57, 0.35);
}

@media (max-width: 900px) {
  .class-header,
  .student-row {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 1fr) auto;
  }

  .class-header-mid {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.45rem;
  }

  .class-header-notes-type,
  .student-notes-type-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 85px);
  }
}

.status-paid {
  background: #dcfce7;
  color: #166534;
}

.status-unpaid {
  background: #ffe4e6;
  color: #9f1239;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.55);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 100;
}

/* PIN gate opened from Products (or other modals): same default z-index stacks by DOM order, so this must sit above #productsModal. */
#feeCatalogPinModal {
  z-index: 120;
}

/* Weekly Schedule edit PIN must always appear above Weekly Schedule modal. */
#updateDataPinModal.modal {
  z-index: 160;
}

/* Keep the main PIN gate compact like other app PIN popups. */
#updateDataPinModal .modal-content-update-data-pin {
  width: min(300px, 92vw);
}

#updateDataPinModal .modal-header {
  padding: 0.55rem 0.65rem 0.45rem;
}

#updateDataPinModal .modal-header h2 {
  font-size: 1.05rem;
}

#updateDataPinModal .update-data-pin-body {
  padding: 0 0.85rem 0.75rem;
}

#updateDataPinModal .update-data-pin-label {
  margin-bottom: 0.35rem;
}

#updateDataPinModal .update-data-pin-input {
  max-width: 100%;
}

#updateDataPinModal .update-data-pin-error {
  margin: 0 0 0.45rem;
}

#updateDataPinModal .update-data-pin-actions {
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0;
}

#productsPricingCalculatorModal {
  z-index: 125;
}

.modal-content.modal-content-pricing-calculator {
  max-width: min(1400px, 99vw);
  width: min(1400px, 99vw);
  max-height: min(98vh, 1100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content-pricing-calculator .app-modal-help {
  flex-shrink: 0;
}

.schedule-calc-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(120px, 1fr);
  align-items: start;
  flex-shrink: 0;
  padding: 0 1.25rem 0.75rem;
  gap: 0.75rem 1rem;
}

.schedule-calc-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.schedule-calc-toolbar-col {
  min-width: 0;
}

.schedule-calc-toolbar-col--student {
  flex: 1 1 200px;
  max-width: 240px;
  min-width: 0;
}

.schedule-calc-toolbar-col--month {
  flex: 0 1 190px;
  max-width: 210px;
  min-width: 0;
}

.schedule-calc-month-picker {
  padding: 0.45rem 0.55rem 0.35rem;
}

.schedule-calc-month-picker-year-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #3d4a5c;
}

.schedule-calc-month-year-select {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #c9d1e0;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
}

.schedule-calc-month-choices {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
}

.schedule-calc-month-choices .student-list-suggestion-item.schedule-calc-month-choice--today {
  background: #eceef2;
}

.schedule-calc-month-choices .student-list-suggestion-item.schedule-calc-month-choice--today:hover,
.schedule-calc-month-choices .student-list-suggestion-item.schedule-calc-month-choice--today.is-active {
  background: #e8efff;
}

.schedule-calc-month-picker-field .student-list-search-input[readonly] {
  cursor: pointer;
  background: #fff;
}

.schedule-calc-toolbar .student-list-search-input {
  padding: 0.42rem 0.65rem;
  font-size: 0.88rem;
}

.schedule-calc-toolbar .student-list-search-field:has(.student-list-search-clear) .student-list-search-input {
  padding-right: 2rem;
}

.schedule-calc-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-top: 0;
  justify-content: flex-start;
}

.schedule-calc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.schedule-calc-toolbar-status {
  flex: 1 1 100%;
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #3d4a5c;
}

.schedule-calc-toolbar-status--success {
  color: #166534;
}

.schedule-calc-toolbar-status--error {
  color: #b91c1c;
}

.schedule-calc-saved-month-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.schedule-calc-saved-month-btn {
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
}

.schedule-calc-saved-month-btn--active {
  border-color: #2f64f5;
  background: #e8efff;
}

/* Header miniature month grid (matches main calendar cell positions; colors mirror class types). */
.schedule-calc-mini-cal {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: start;
  padding-right: 0.4rem;
}

.schedule-calc-mini-cal-inner {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  width: min(158px, 100%);
  max-width: 100%;
  padding: 0.25rem 0 0;
}

.schedule-calc-mini-cal-wd {
  font-size: 0.52rem;
  font-weight: 800;
  color: #64748b;
  text-align: center;
  line-height: 1;
  padding: 0 0 1px;
  letter-spacing: -0.02em;
}

.schedule-calc-mini-cal-cell {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 4px;
  border: 1px solid #d8dfea;
  background: #fff;
  box-sizing: border-box;
}

.schedule-calc-mini-cal-cell--blank {
  border-style: dashed;
  border-color: #e5e9f2;
  background: transparent;
  opacity: 0.85;
}

.schedule-calc-mini-cal-cell--miss {
  box-shadow: inset 0 0 0 1px #f87171;
}

.schedule-calc-mini-cal-cell--package {
  background: #dbe4f2;
  border-color: #c8d4e7;
}

.schedule-calc-mini-cal-cell--makeup {
  background: #cfe9d8;
  border-color: #9ecab0;
}

.schedule-calc-mini-cal-cell--additional {
  background: #f6deb0;
  border-color: #e4bf72;
}

.schedule-calc-mini-cal-cell--combo {
  background: linear-gradient(135deg, #cfe9d8 0 48%, #f6deb0 52% 100%);
  border-color: #d8c08f;
}

.schedule-calc-mini-cal-cell--combo-package-additional {
  background: linear-gradient(135deg, #f6deb0 0 48%, #dbe4f2 52% 100%);
  border-color: #d0c39f;
}

.schedule-calc-mini-cal-cell--combo-package-makeup {
  background: linear-gradient(135deg, #cfe9d8 0 48%, #dbe4f2 52% 100%);
  border-color: #b8cdbf;
}

.schedule-calc-mini-cal-cell--split {
  background: linear-gradient(135deg, var(--mini-split-top-left, #dbe4f2) 0 48%, var(--mini-split-bottom-right, #f6deb0) 52% 100%);
  border-color: #d0c39f;
}

.weekly-schedule-class-item.schedule-calc-weekly-class-item--selected {
  background: #c7ddff !important;
  border-color: #2f64f5 !important;
  box-shadow: inset 0 0 0 1px rgba(47, 100, 245, 0.18);
}

.schedule-calc-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 170px);
  /* One row fills remaining modal height so the calendar panel can shrink and scroll internally. */
  grid-template-rows: minmax(0, 1fr);
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}

.schedule-calc-calendar-panel {
  min-height: 0;
  border: 1px solid var(--modal-section-border);
  border-radius: var(--modal-section-radius);
  background: var(--modal-section-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.schedule-calc-calendar-tabs {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #e3e8f3;
  flex-shrink: 0;
}

.schedule-calc-tab {
  border: 1px solid var(--border, #d7deea);
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
}

.schedule-calc-tab--active {
  background: #e8f0ff;
  border-color: #2f64f5;
  color: #153c99;
}

.schedule-calc-calendar-root {
  padding: 0.75rem 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.schedule-calc-section-title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.schedule-calc-section-title--weekly {
  text-align: center;
  font-size: 1.45rem;
  font-weight: 800;
}

.schedule-calc-weekly-wrap {
  margin-bottom: 1rem;
}

.schedule-calc-weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.schedule-calc-weekday-col {
  border: 1px solid var(--modal-section-border);
  border-radius: var(--modal-section-radius);
  background: var(--modal-section-bg);
  padding: 0.35rem;
  min-height: 200px;
}

.schedule-calc-weekday-head {
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
  text-align: center;
}

.schedule-calc-weekday-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
}

.schedule-calc-slot-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--modal-section-border);
  border-radius: 8px;
  background: var(--modal-surface-soft);
  padding: 0.32rem 0.35rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}

.schedule-calc-slot-card--readonly {
  cursor: default;
  border-width: 3px;
}

.schedule-calc-slot-card--active {
  border-color: #2f64f5;
  background: #e8f0ff;
}

.schedule-calc-slot-time {
  font-size: 0.65rem;
  color: #475569;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.schedule-calc-slot-name {
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

.schedule-calc-slot-coach {
  font-size: 0.68rem;
  color: #475569;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0.12rem;
}

.weekly-schedule-edit-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.weekly-schedule-edit-btn {
  width: auto;
  padding: 0.2rem 0.45rem;
  font-size: 0.7rem;
}

.weekly-schedule-inline-edit {
  margin-top: 0.2rem;
  padding: 0.35rem;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.weekly-schedule-inline-input {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  padding: 0.28rem 0.4rem;
}

.weekly-schedule-inline-input:first-child {
  margin-top: 0;
}

.weekly-schedule-add-btn {
  margin-top: 0.35rem;
  width: 100%;
  padding: 0.3rem 0.45rem;
  font-size: 0.74rem;
}

.weekly-schedule-legend {
  margin: 1rem 0 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e7eaf0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.weekly-schedule-legend-title {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a1a;
}

.weekly-schedule-legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.55rem 0.75rem;
}

.weekly-schedule-legend-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.25;
}

.weekly-schedule-legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  margin-top: 2px;
}

.weekly-schedule-modal--editing .app-modal-help--bleed {
  display: none;
}

.weekly-schedule-edit-bar {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
}

.weekly-schedule-edit-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.weekly-schedule-edit-head-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1e3a8a;
}

.weekly-schedule-edit-detail-panel {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(99, 102, 241, 0.2);
}

.weekly-schedule-detail-title {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.weekly-schedule-detail-times {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e40af;
}

.weekly-schedule-detail-note,
.weekly-schedule-detail-attendance {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #475569;
}

.weekly-schedule-detail-attendance {
  color: #9a3412;
}

.weekly-schedule-detail-grid {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 2fr);
  gap: 0.35rem 0.55rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.weekly-schedule-detail-field {
  display: contents;
}

.weekly-schedule-detail-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748b;
}

.weekly-schedule-detail-readonly {
  font-size: 0.84rem;
  color: #0f172a;
  padding: 0.2rem 0;
}

.weekly-schedule-detail-input,
.weekly-schedule-detail-input:disabled {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
}

.weekly-schedule-detail-input:disabled {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.weekly-schedule-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.weekly-schedule-detail-remove-box {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(99, 102, 241, 0.35);
}

.weekly-schedule-edit-status {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: #1e3a8a;
  font-weight: 600;
}

.weekly-schedule-edit-status.hidden {
  display: none;
}

.weekly-schedule-edit-locked-summary {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  color: #9a3412;
  line-height: 1.35;
}

.weekly-schedule-edit-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.weekly-schedule-edit-mode-btn--active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 700;
}

.weekly-schedule-edit-mode-btn--done {
  margin-left: auto;
}

.weekly-schedule-edit-options {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(99, 102, 241, 0.2);
}

.weekly-schedule-edit-options-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.weekly-schedule-edit-options-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
}

.weekly-schedule-edit-options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.weekly-schedule-edit-scope-select,
.weekly-schedule-edit-input {
  font-size: 0.82rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.weekly-schedule-edit-form-grid {
  display: grid;
  grid-template-columns: 1fr repeat(2, minmax(5.5rem, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.weekly-schedule-add-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.weekly-schedule-add-field {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 2fr);
  gap: 0.35rem 0.55rem;
  align-items: center;
  font-size: 0.82rem;
}

.weekly-schedule-add-field--times {
  align-items: start;
}

.weekly-schedule-add-label {
  font-weight: 600;
  color: #475569;
}

.weekly-schedule-add-time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.weekly-schedule-add-weeks-input {
  max-width: 5rem;
}

.weekly-schedule-add-field--hidden {
  display: none;
}

.weekly-schedule-add-range-summary {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.78rem;
  color: #1e40af;
  line-height: 1.35;
}

.weekly-schedule-add-range-summary--hidden {
  display: none;
}

.weekly-schedule-add-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.35rem 0;
}

.weekly-schedule-add-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e3a8a;
}

.weekly-schedule-inactive-section {
  margin: 0.55rem 0 0.75rem;
  padding: 0.55rem 0.65rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.weekly-schedule-inactive-title {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.weekly-schedule-inactive-hint {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

.weekly-schedule-inactive-empty {
  margin: 0;
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
}

.weekly-schedule-inactive-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: start;
}

.weekly-schedule-inactive-day-head {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #475569;
  padding: 0.2rem 0.15rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 0.25rem;
}

.weekly-schedule-inactive-class-list {
  list-style: none;
  margin: 0;
  padding: 0 0.1rem 0.2rem;
  min-height: 1.5rem;
}

.weekly-schedule-inactive-class-item {
  margin-bottom: 0.22rem;
  border: 2px solid #bfdbfe;
  border-radius: 7px;
  background: #fff;
  font-size: 0.62rem;
}

.weekly-schedule-inactive-class-item--selected {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.weekly-schedule-inactive-class-btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.22rem 0.28rem;
  text-align: left;
  cursor: pointer;
}

.weekly-schedule-inactive-class-btn:hover {
  background: rgba(239, 246, 255, 0.85);
}

.weekly-schedule-inactive-class-time {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}

.weekly-schedule-inactive-class-name {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
}

.weekly-schedule-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.weekly-schedule-color-picker-btn {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.weekly-schedule-color-picker-btn:hover {
  transform: scale(1.08);
}

.weekly-schedule-color-picker-btn--selected {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
  outline: none;
}

.weekly-schedule-color-picker-btn.weekly-schedule-swatch--strength {
  background: #fecdd3;
}

.weekly-schedule-color-picker-btn.weekly-schedule-swatch--flexibility {
  background: #bbf7d0;
}

.weekly-schedule-color-picker-btn.weekly-schedule-swatch--spatial {
  background: #bfdbfe;
}

.weekly-schedule-color-picker-btn.weekly-schedule-swatch--upper {
  background: #ddd6fe;
}

.weekly-schedule-color-picker-btn.weekly-schedule-swatch--coordination {
  background: #fef08a;
}

@media (max-width: 900px) {
  .weekly-schedule-inactive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.weekly-schedule-add-library-title {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.weekly-schedule-add-library-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  max-height: 9rem;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.weekly-schedule-add-library-item {
  border-bottom: 1px solid #f1f5f9;
}

.weekly-schedule-add-library-item:last-child {
  border-bottom: none;
}

.weekly-schedule-add-library-pick {
  display: block;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.8rem;
  cursor: pointer;
}

.weekly-schedule-add-library-pick:hover {
  background: #eff6ff;
}

.weekly-schedule-edit-stored-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.weekly-schedule-day-add-btn {
  display: block;
  width: 100%;
  margin: 0.2rem 0 0.35rem;
  padding: 0.2rem;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.weekly-schedule-day-add-btn:hover {
  background: #dbeafe;
}

.weekly-schedule-class-item--selectable {
  padding: 0;
  list-style: none;
}

.weekly-schedule-class-select-btn {
  display: block;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.35rem 0.45rem;
  background: inherit;
  text-align: left;
  cursor: pointer;
}

.weekly-schedule-class-select-btn:hover:not(:disabled) {
  border-color: #93c5fd;
}

.weekly-schedule-class-item--selected .weekly-schedule-class-select-btn {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.weekly-schedule-class-select-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.weekly-schedule-class-lock-tag {
  display: block;
  font-size: 0.68rem;
  color: #b45309;
  margin-top: 0.15rem;
}

.weekly-schedule-edit-wrap {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-start;
}

.weekly-schedule-edit-btn {
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
}

.btn-sm {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
}

.btn-xs {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  line-height: 1.2;
}

.modal-content-schedule-edit {
  width: min(720px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.schedule-edit-body {
  padding: 0 1rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.schedule-edit-mount {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 0.5rem;
}

.schedule-edit-intro {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
}

.schedule-edit-locked-note {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.78rem;
  line-height: 1.35;
}

.schedule-edit-scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.schedule-edit-scope-label,
.schedule-edit-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #334155;
}

.schedule-edit-scope-select,
.schedule-edit-weeks-input,
.schedule-edit-until-input,
.schedule-edit-single-date-input,
.schedule-edit-name-input,
.schedule-edit-day-select,
.schedule-edit-start-input,
.schedule-edit-end-input {
  font-size: 0.82rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid #d8dfea;
  border-radius: 8px;
}

.schedule-edit-scope-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.schedule-edit-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.schedule-edit-timeline-week {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  cursor: pointer;
  padding: 0;
}

.schedule-edit-timeline-week--active {
  border-color: #2563eb;
  background: #dbeafe;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.schedule-edit-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

.schedule-edit-empty {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

.schedule-edit-class-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.schedule-edit-class-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.schedule-edit-class-item > .schedule-edit-class-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.schedule-edit-class-item > .schedule-edit-class-item-row > .schedule-edit-class-main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.schedule-edit-class-item > .schedule-edit-class-item-row > .schedule-edit-class-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.schedule-edit-delete-panel {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.schedule-edit-delete-title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #991b1b;
}

.schedule-edit-delete-hint {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  color: #9a3412;
  line-height: 1.35;
}

.schedule-edit-delete-scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.35rem;
}

.schedule-edit-delete-scope-select,
.schedule-edit-delete-date-input,
.schedule-edit-delete-weeks-input {
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  background: #fff;
}

.schedule-edit-delete-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.schedule-edit-delete-range {
  margin: 0 0 0.45rem;
  font-size: 0.74rem;
  color: #7f1d1d;
}

.schedule-edit-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.schedule-edit-class-item--locked {
  background: #f8fafc;
  opacity: 0.85;
}

.schedule-edit-class-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.schedule-edit-class-day {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.schedule-edit-class-time {
  font-size: 0.78rem;
  color: #334155;
}

.schedule-edit-class-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
}

.schedule-edit-class-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.schedule-edit-delete-btn {
  color: #b91c1c;
}

.schedule-edit-locked-tag {
  font-size: 0.72rem;
  color: #9a3412;
}

.schedule-edit-form-section {
  margin-top: 0.15rem;
}

.schedule-edit-library-section {
  padding: 0.65rem 0.75rem;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.schedule-edit-library-lede {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.schedule-edit-library-list {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.schedule-edit-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.schedule-edit-library-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.schedule-edit-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex-shrink: 0;
}

.schedule-edit-library-store-title {
  margin: 0.35rem 0 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
}

.schedule-edit-library-store-grid label:first-child {
  grid-column: 1 / -1;
}

.schedule-edit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
}

.schedule-edit-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #475569;
}

.schedule-edit-form-grid label:first-child {
  grid-column: 1 / -1;
}

.schedule-edit-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.schedule-edit-status {
  margin: 0 1rem;
  font-size: 0.8rem;
  color: #475569;
}

.schedule-edit-status.hidden {
  display: none;
}

.schedule-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #e7eaf0;
}

.schedule-calc-slot-duration {
  font-size: 0.64rem;
  color: #64748b;
}

.schedule-calc-month-wrap {
  margin-top: 0.3rem;
}

.schedule-calc-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.35rem;
}

.schedule-calc-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}

.schedule-calc-month-cell {
  border: 1px solid #c9d4e5;
  border-radius: 8px;
  min-height: 90px;
  padding: 0.35rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3eaf5;
}

.schedule-calc-month-cell--blank {
  background: transparent;
  border-style: dashed;
}

.schedule-calc-month-day {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #1f2a44;
}

.schedule-calc-month-day-head {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.schedule-calc-month-weekday-inline {
  display: none;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}

.schedule-calc-month-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.schedule-calc-month-item {
  font-size: 0.72rem;
  line-height: 1.2;
  color: #1f2937;
  border: 1px solid #e4e8f1;
  border-radius: 6px;
  padding: 0.2rem 0.24rem;
  background: #f8fafc;
}

.schedule-calc-month-item--package {
  background: #e8f0ff;
  border-color: #93b9ff;
}

.schedule-calc-month-item--absent {
  opacity: 0.55;
  position: relative;
  filter: saturate(0.8);
}

.schedule-calc-month-item--absent::after {
  content: "×";
  position: absolute;
  top: 2px;
  right: 4px;
  color: #c81e1e;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}

.schedule-calc-month-item--makeup {
  background: #dff6e6;
  border-color: #dff6e6;
  box-shadow: none;
}

.schedule-calc-month-item--makeup-candidate {
  opacity: 0.42;
  cursor: default;
  background: #dff6e6;
  border-color: #bde8cc;
  box-shadow: inset 0 0 0 1px #bde8cc;
}

.schedule-calc-month-item--makeup-candidate-active {
  opacity: 1;
  cursor: pointer;
  background: #dff6e6;
  border-color: #bde8cc;
  box-shadow: inset 0 0 0 1px #bde8cc;
}

.schedule-calc-month-item--makeup-candidate-active:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 2px #63b07f;
  background: #cff0da;
  border-color: #63b07f;
}

.schedule-calc-month-item--makeup-selected {
  border-color: #2e8f52;
  box-shadow: inset 0 0 0 1px #2e8f52;
  background: #d6f0df;
}

.schedule-calc-month-item--additional-candidate {
  opacity: 0.45;
  cursor: default;
  background: #fff3df;
  border-color: #f5d4a1;
}

.schedule-calc-month-item--additional-candidate:hover {
  opacity: 0.7;
  background: #ffeccc;
  border-color: #efc27f;
}

.schedule-calc-month-item--additional-selected {
  opacity: 1;
  cursor: pointer;
  background: #ffdca8;
  border-color: #e6901a;
  box-shadow: inset 0 0 0 1px #d87c00;
}

.schedule-calc-month-item--miss-eligible {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(47, 100, 245, 0.2);
}

.schedule-calc-month-item--miss-eligible:hover {
  box-shadow: inset 0 0 0 2px rgba(47, 100, 245, 0.38);
}

.schedule-calc-month-item-title {
  font-size: 0.68rem;
  line-height: 1.2;
}

.schedule-calc-month-item-name {
  margin-top: 0.05rem;
}

.schedule-calc-month-item-actions {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.schedule-calc-mini-btn {
  border: 1px solid #d5dcea;
  background: #fff;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.05rem 0.28rem;
  cursor: pointer;
}

.schedule-calc-mini-btn--active {
  border-color: #2f64f5;
  background: #e8f0ff;
  color: #153c99;
}

.schedule-calc-mini-tag {
  font-size: 0.58rem;
  font-weight: 700;
  color: #0f4a74;
  background: #dbefff;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 0.05rem 0.3rem;
}

.schedule-calc-mini-tag--absent {
  color: #7a1a1a;
  background: #ffe8e8;
  border-color: #f3a5a5;
}

.schedule-calc-mode-btn--active {
  background: #2f64f5 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(47, 100, 245, 0.2) inset;
}

#scheduleCalcMissingModeBtn {
  font-size: 0.72rem;
  padding: 0.24rem 0.5rem;
  line-height: 1.15;
}

.schedule-calc-placeholder {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.95rem;
  line-height: 1.45;
}

.schedule-calc-quote-panel {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #f7fbfe;
  padding: 0.75rem 0.75rem 0.85rem;
  font-size: 0.74rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  overflow: auto;
}

.schedule-calc-quote-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  color: #1f2937;
}

.schedule-calc-quote-intro,
.schedule-calc-rules-title,
.schedule-calc-rules-list,
.schedule-calc-checkbox {
  display: block;
}

.schedule-calc-rules-title,
.schedule-calc-rules-list,
.schedule-calc-checkbox {
  display: none;
}

.schedule-calc-quote-intro {
  font-size: 0.74rem;
  line-height: 1.35;
  color: #64748b;
}

.schedule-calc-quote-intro p {
  margin: 0 0 0.25rem;
}

.schedule-calc-quote-line--package {
  color: #1d4ed8;
  font-weight: 700;
}

.schedule-calc-quote-line--additional {
  color: #b45309;
}

.schedule-calc-quote-line--miss {
  color: #b91c1c;
  font-weight: 700;
}

.schedule-calc-quote-line--makeup {
  color: #166534;
  font-weight: 700;
}

.schedule-calc-monthly-tools {
  margin-top: 0.9rem;
  border-top: 1px solid #e3e8f3;
  padding-top: 0.4rem;
}

.schedule-calc-monthly-tools-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
}

.schedule-calc-mode-btn {
  font-size: 0.78rem !important;
  padding: 0.44rem 0.7rem !important;
  line-height: 1.2;
  width: 100%;
  margin: 0.28rem 0 0.52rem;
}

.schedule-calc-monthly-tools-metric {
  font-size: 0.66rem;
  line-height: 1.25;
  margin: 0 0 0.45rem;
  color: #334155;
}

#scheduleCalcMissedCountLine {
  color: #b91c1c;
  font-weight: 700;
}

#scheduleCalcMakeupCountLine {
  color: #166534;
  font-weight: 700;
}

#scheduleCalcAdditionalCountLine {
  color: #b45309;
  font-weight: 700;
}

.schedule-calc-monthly-tools-hint {
  margin: 0 0 0.35rem;
  font-size: 0.64rem;
  color: #475569;
  line-height: 1.25;
  display: none;
}

.schedule-calc-saved-months {
  margin-top: 0.45rem;
  border-top: 1px solid #e3e8f3;
  padding-top: 0.4rem;
}

.schedule-calc-saved-months .schedule-calc-rules-title {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.74rem;
  color: #1f2937;
  font-weight: 800;
}

.schedule-calc-saved-months-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.schedule-calc-saved-month-btn {
  font-size: 0.68rem !important;
  padding: 0.24rem 0.5rem !important;
  line-height: 1.2;
}

.schedule-calc-saved-month-btn--active {
  border-color: #2f64f5 !important;
  background: #e8f0ff !important;
  color: #1e3a8a !important;
}


.schedule-calc-quote-dl {
  margin: 0;
}

.schedule-calc-quote-row {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.22rem 0;
  font-size: 0.74rem;
}

.schedule-calc-quote-row dt {
  margin: 0;
  font-weight: 500;
  color: #64748b;
}

.schedule-calc-quote-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #111827;
}

.schedule-calc-quote-row--total {
  border-top: 1px solid var(--border, #e2e8f0);
  padding-top: 0.5rem;
  margin-top: 0.15rem;
  font-weight: 600;
  font-size: 0.74rem;
}

.schedule-calc-rules-title {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
}

.schedule-calc-rules-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted, #475569);
}

.schedule-calc-checkbox {
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .schedule-calc-toolbar {
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: start;
  }

  .schedule-calc-mini-cal {
    justify-content: flex-end;
    width: auto;
    min-width: 158px;
  }

  .schedule-calc-mini-cal-inner {
    width: 158px;
    max-width: 158px;
  }

  .schedule-calc-main {
    grid-template-columns: 1fr;
    /* Calendar fills remaining modal height; quote sits below without stealing scroll space. */
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .schedule-calc-weekly-grid,
  .schedule-calc-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-calc-calendar-root {
    padding: 0.55rem 0.65rem;
  }

  .schedule-calc-section-title--weekly {
    font-size: 1.12rem;
  }

  .schedule-calc-weekday-col {
    min-height: 160px;
    padding: 0.28rem;
  }

  .schedule-calc-weekday-head {
    font-size: 0.72rem;
    margin-bottom: 0.28rem;
  }

  .schedule-calc-slot-card {
    padding: 0.26rem 0.3rem;
    margin-bottom: 0.28rem;
  }

  .schedule-calc-slot-time {
    font-size: 0.58rem;
  }

  .schedule-calc-slot-name {
    font-size: 0.66rem;
  }

  .schedule-calc-slot-coach {
    font-size: 0.62rem;
  }

  .schedule-calc-slot-duration {
    font-size: 0.58rem;
  }

  .schedule-calc-month-cell {
    min-height: 76px;
    padding: 0.28rem;
    font-size: 0.78rem;
  }

  .schedule-calc-month-weekdays {
    display: none;
  }

  .schedule-calc-month-weekday-inline {
    display: inline-block;
  }

  .schedule-calc-month-day {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .schedule-calc-tab {
    font-size: 0.78rem;
    padding: 0.32rem 0.65rem;
  }

  .schedule-calc-weekday-head {
    font-size: 0.66rem;
  }

  .schedule-calc-slot-time {
    font-size: 0.54rem;
  }

  .schedule-calc-slot-name {
    font-size: 0.62rem;
  }

  .schedule-calc-slot-coach {
    font-size: 0.58rem;
  }

  .schedule-calc-section-title--weekly {
    font-size: 1rem;
  }

  .schedule-calc-mini-cal-inner {
    gap: 2px;
    width: min(142px, 100%);
  }

  .schedule-calc-mini-cal-wd {
    font-size: 0.48rem;
  }
}

/* All Students stays open under Edit Student; lower this overlay so other modals (photo, stats, etc.) stay on top. */
.modal.modal--stack-behind {
  z-index: 90;
}

.hidden {
  display: none !important;
}

.modal-content {
  width: min(750px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: var(--modal-radius);
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  box-shadow: var(--modal-shadow);
  color: var(--modal-text);
}

/* Phase 2: internal modal card/table/chart consistency */
.modal-content :where(.update-data-section, .clear-data-body, .student-import-review-body, .fees-body, .products-modal-body) {
  color: var(--modal-text);
  font-size: var(--modal-body-size);
}

.modal-content :where(.attendance-grid-example-wrap, .schedule-calc-calendar-panel, .schedule-calc-weekday-col, .weekly-schedule-legend) {
  border-color: var(--modal-section-border);
  border-radius: var(--modal-section-radius);
  background: var(--modal-section-bg);
}

.modal-content :where(.attendance-grid-example-table, .student-import-review-table) {
  font-size: 0.86rem;
  color: var(--modal-text);
}

.modal-content :where(.attendance-grid-example-table th, .student-import-review-table th) {
  background: #f1f5f9;
  color: var(--modal-text);
  font-weight: 600;
}

.modal-content :where(.attendance-grid-example-table td, .student-import-review-table td) {
  color: var(--modal-text);
  background: #ffffff;
}

.modal-content :where(.attendance-grid-class-names-hint, .student-import-review-meta, .clear-data-intro, .update-data-section-desc) {
  color: var(--modal-text-muted);
}

.modal-content-clear-data {
  width: min(420px, 96vw);
}

.modal-content-update-data {
  width: min(560px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.update-data-hub {
  padding: 0 1rem 1rem;
}

.update-data-hub > .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

.update-data-lede {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.45;
}

.update-data-section {
  padding: 0.85rem 0;
  border-top: 1px solid var(--modal-divider);
}

.update-data-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.update-data-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.update-data-section-desc {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #4a5568;
}

.update-data-section-desc code {
  font-size: 0.8rem;
  background: #f1f5f9;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
}

.update-data-row {
  margin-bottom: 0.5rem;
}

.update-data-template-row {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #4a5568;
}

.update-data-template-link {
  font-weight: 600;
  color: #2f64f5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.update-data-template-link:hover {
  color: #1d4ed8;
}

.attendance-grid-example-caption {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: #4a5568;
  font-weight: 600;
}

.attendance-grid-example-wrap {
  margin: 0 0 0.75rem;
  overflow-x: auto;
  border: 1px solid var(--modal-section-border);
  border-radius: var(--modal-section-radius);
  background: var(--modal-section-bg);
}

.attendance-grid-example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.attendance-grid-example-table th,
.attendance-grid-example-table td {
  border: 1px solid var(--modal-section-border);
  padding: 0.4rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}

.attendance-grid-example-table thead th {
  background: #f1f5f9;
  font-weight: 600;
  color: var(--modal-text);
}

.attendance-grid-example-table tbody td {
  background: #ffffff;
}

.attendance-grid-import-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.attendance-grid-file-name {
  font-size: 0.88rem;
  color: #334155;
  word-break: break-word;
  max-width: min(100%, 280px);
}

.attendance-grid-import-status {
  margin: 0.15rem 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.attendance-grid-import-status.hidden {
  display: none;
}

.attendance-grid-import-status--success {
  color: #15803d;
  font-weight: 600;
  white-space: pre-line;
}

.attendance-grid-import-status--info {
  color: #334155;
  font-weight: 500;
  white-space: pre-line;
}

.attendance-grid-import-status--error {
  color: #b91c1c;
  white-space: pre-line;
}

.attendance-grid-class-names-download {
  margin-top: 0.35rem;
}

.attendance-grid-class-names-hint {
  display: inline;
  color: #4a5568;
  font-size: 0.85rem;
  line-height: 1.45;
}

.attendance-grid-class-names-hint code {
  font-size: 0.78rem;
  background: #f1f5f9;
  padding: 0.05rem 0.2rem;
  border-radius: 4px;
}

.update-data-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  margin-bottom: 0.65rem;
}

.update-data-field input[type="date"] {
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.45rem;
  max-width: 12rem;
}

.update-data-schedule-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.update-data-checkbox {
  margin: 0.5rem 0;
  font-size: 0.88rem;
}

.update-data-clear-panel {
  padding: 0 1rem 1rem;
}

.update-data-clear-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e7eaf0;
  margin: 0 -1rem 0.75rem;
}

.update-data-clear-heading {
  margin: 0;
  font-size: 1rem;
}

.weekly-schedule-hint {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: var(--modal-help-size);
  color: var(--modal-text-muted);
  background: var(--modal-surface-soft);
  border-bottom: 1px solid var(--modal-divider);
}

.modal-content-student-import-review {
  width: min(720px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.student-import-review-body {
  padding: 0 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.student-import-review-body > .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

.student-import-review-intro {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #374151;
}

.student-import-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.student-import-review-table th,
.student-import-review-table td {
  border: 1px solid var(--modal-section-border);
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.student-import-review-table th {
  background: #f1f5f9;
  font-weight: 600;
}

.student-import-review-table .col-file,
.student-import-review-table .col-existing {
  width: 28%;
}

.student-import-review-meta {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.student-import-review-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}

.attendance-grid-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.84rem;
  line-height: 1.35;
  margin: 0.35rem 0;
  cursor: pointer;
}

.attendance-grid-radio-label input[type="radio"] {
  margin-top: 0.12rem;
  flex-shrink: 0;
}

.attendance-grid-similar-line {
  margin-top: 0.5rem;
}

.student-import-review-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--modal-divider);
  flex-shrink: 0;
  justify-content: flex-end;
}

.clear-data-body {
  padding: 1rem;
}

.clear-data-intro {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.45;
}

.clear-data-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.clear-data-option {
  font-size: 0.95rem;
}

.clear-data-actions {
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.clear-data-success-text {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.clear-data-cascade-banner {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #3730a3;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
}

.clear-data-cascade-banner.hidden {
  display: none !important;
}

label.clear-data-option.clear-data-included {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  margin: 0 -0.15rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  border-bottom: 1px solid var(--modal-divider);
  background: var(--modal-surface);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--modal-title-size);
  color: var(--modal-text);
}

.student-list-header {
  flex-wrap: wrap;
}

.student-list-delete-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.student-list-delete-actions.hidden {
  display: none !important;
}

.close-btn {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #475569;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0.8rem;
  padding: 1rem;
}

.form-profile-block {
  grid-column: 1 / -1;
}

.student-form-avatar-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border: 1px dashed #c8cfdb;
  border-radius: 10px;
  background: #fafbfc;
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
}

.student-form-avatar-btn:hover {
  border-color: #2f64f5;
  background: #f5f7ff;
}

.student-form-avatar-btn:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
}

.student-form-avatar-frame {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, #f0f2f7 0%, #e4e8f0 100%);
  border: 2px solid #d8dbe2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-form-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.student-form-avatar-placeholder {
  font-size: 1.75rem;
  font-weight: 600;
  color: #9ca3af;
  line-height: 1;
}

.student-form-avatar-caption {
  font-size: 0.88rem;
  color: #4b5565;
  line-height: 1.35;
}

.edit-student-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  grid-column: 1 / -1;
}

.edit-student-avatar-compact {
  flex: 1 1 90px;
  min-width: 70px;
  max-width: min(140px, 24vw);
  align-self: stretch;
  display: flex;
}

#editStudentModal .student-form-avatar-btn--compact {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  flex: 1;
  min-height: 0;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  box-sizing: border-box;
}

#editStudentModal .student-form-avatar-frame--compact {
  width: 100%;
  max-width: min(120px, 100%);
  aspect-ratio: 1;
  height: auto;
  flex-shrink: 0;
}

#editStudentModal .student-form-avatar-frame--compact .student-form-avatar-placeholder {
  font-size: clamp(0.9rem, 6vw, 1.5rem);
}

.edit-student-top-fields {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.edit-student-reg-membership-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  width: 100%;
  max-width: 22rem;
}

.edit-student-field-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 0.85rem;
  width: 100%;
}

.edit-student-field-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  text-align: right;
  flex: 0 0 auto;
}

.registration-paid-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem 0.65rem;
}

.registration-paid-inline {
  margin: 0;
}

.registration-paid-date-input {
  border: 1px solid #c8cfdb;
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
  font: inherit;
}

.registration-date-picker-anchor .date-picker-popover {
  left: auto;
  right: 0;
  transform: none;
}

.registration-date-picker-btn {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1;
}

.registration-paid-status {
  margin: 0;
  width: 100%;
  font-size: 0.82rem;
  color: #64748b;
}

.registration-paid-status--edit {
  text-align: right;
}

.registration-paid-status-line {
  display: block;
}

.registration-paid-emphasis {
  color: #111827;
  font-weight: 700;
}

.registration-paid-label--ok {
  color: #15803d;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: inherit;
}

.registration-paid-label--warning {
  color: #ea580c;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: inherit;
}

.edit-student-checkbox-label {
  display: flex;
  align-items: center;
  margin: 0;
  flex: 0 0 auto;
}

.edit-student-checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.edit-student-field-row--membership select {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #c8cfdb;
  min-width: 9.5rem;
  max-width: 100%;
  cursor: pointer;
}

.edit-membership-none-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.35;
  text-align: right;
  width: 100%;
  max-width: 22rem;
}

.modal-content-photo-crop {
  max-width: min(520px, 96vw);
  padding: 0.75rem 1rem 1rem;
  box-sizing: border-box;
}

.modal-content-photo-crop .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

.photo-crop-intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #4b5565;
  line-height: 1.4;
}

.photo-crop-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.photo-crop-drop-zone {
  margin-top: 1rem;
  padding: 1.25rem 1rem;
  border: 2px dashed #b8c0d0;
  border-radius: 10px;
  background: #f5f7fb;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.photo-crop-drop-zone:hover,
.photo-crop-drop-zone:focus-visible {
  border-color: #2f64f5;
  background: #eef2ff;
  outline: none;
}

.photo-crop-drop-zone.photo-crop-drop-active {
  border-color: #2f64f5;
  background: #e0e7ff;
  border-style: solid;
}

.photo-crop-drop-zone.photo-crop-preparing {
  pointer-events: none;
  opacity: 0.85;
}

.photo-crop-drop-zone .photo-crop-drop-main,
.photo-crop-drop-zone .photo-crop-drop-sub,
.photo-crop-drop-zone .photo-crop-preparing-label {
  display: block;
  pointer-events: none;
}

.photo-crop-drop-main {
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
}

.photo-crop-drop-sub {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: #64748b;
}

.photo-crop-preparing-label {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2f64f5;
}

.photo-crop-wrap {
  max-height: min(52vh, 420px);
  background: #1a1d24;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.photo-crop-image {
  display: block;
  max-width: 100%;
}

.photo-crop-hint {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: #5f6978;
  line-height: 1.35;
}

.photo-crop-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-row-triple {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 0.8rem;
}

.form-row-triple label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.form-grid label,
.form-grid fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.5rem;
  font: inherit;
}

.form-grid input[readonly] {
  background: #f0f4f8;
  color: #5f6978;
}

.form-grid textarea {
  resize: vertical;
}

.full-width {
  grid-column: 1 / -1;
}

.checkbox-inline {
  flex-direction: row !important;
  align-items: center;
}

.class-checklist {
  display: grid;
  gap: 0.4rem;
}

.class-checklist label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#historyBody,
#trainingHistoryBody,
#studentStatsBody {
  padding: 1rem;
}

#studentStatsBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal-content-stats {
  width: min(820px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content-stats .modal-header {
  flex-shrink: 0;
}

.student-stats-intro {
  margin-bottom: 1.25rem;
}

.student-stats-top-day {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #475569;
}

.student-stats-section {
  margin-bottom: 1.75rem;
}

.student-stats-section:last-of-type {
  margin-bottom: 0.5rem;
}

.student-stats-section-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.student-stats-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}

.student-stats-weekday-chart {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfd;
}

.student-stats-weekday-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
}

.student-stats-weekday-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.student-stats-weekday-track {
  height: 10px;
  background: #e8ecf4;
  border-radius: 6px;
  overflow: hidden;
}

.student-stats-weekday-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #7aa3f0, #2f64f5);
  min-width: 0;
  transition: width 0.2s ease;
}

.student-stats-weekday-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  text-align: right;
}

.student-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0.5rem 0 0.75rem;
}

.student-stats-table th,
.student-stats-table td {
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.student-stats-table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
}

.student-stats-table tr:nth-child(even) td {
  background: #fafbfd;
}

.student-stats-note-cell {
  color: #475569;
  line-height: 1.35;
  max-width: 14rem;
}

.student-stats-na {
  color: #94a3b8;
}

.student-stats-tier {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.student-stats-tier-high {
  background: #dcfce7;
  color: #166534;
}

.student-stats-tier-moderate {
  background: #fef9c3;
  color: #854d0e;
}

.student-stats-tier-low {
  background: #fee2e2;
  color: #991b1b;
}

.student-stats-method {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
}

.student-stats-summary {
  margin: 0 0 1rem;
  font-weight: 600;
  color: #2f64f5;
}

.student-stats-chart {
  margin: 0.5rem 0 1rem;
}

.student-stats-bars {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 200px;
  padding: 0.5rem 0.25rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfd;
}

.student-stats-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 0.25rem;
}

.student-stats-bar-wrap {
  flex: 1;
  width: 100%;
  max-width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  min-height: 140px;
}

.student-stats-bar {
  width: 100%;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #6b9af0, #2f64f5);
  min-height: 3px;
  transition: height 0.2s ease;
}

.student-stats-bar-empty {
  min-height: 0;
  height: 0 !important;
  background: transparent;
}

.student-stats-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.2;
}

.student-stats-label {
  font-size: 0.68rem;
  color: #64748b;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
}

.student-stats-hint {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

#trainingHistoryBody .training-history-month {
  color: darkred;
}

#trainingHistoryBody .training-history-month-total {
  color: #4169e1;
}

#trainingHistoryBody .history-summary {
  color: #4169e1;
}

.training-history-year-select {
  margin-left: 0.5rem;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.95rem;
}

.training-history-week {
  font-size: 0.9rem;
  color: #5f6978;
  margin: 0.5rem 0 0.2rem;
}

.modal-content-wide {
  width: min(700px, 96vw);
}

.modal-content-schedule-weekly {
  width: min(1100px, 98vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content-year-glance {
  width: min(1100px, 98vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.year-at-glance-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.year-at-glance-header h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.year-at-glance-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.year-at-glance-year-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d8dfea;
  border-radius: 8px;
  padding: 0.2rem 0.35rem;
  background: #f8fafc;
}

.year-at-glance-year-btn {
  border: 0;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
}

.year-at-glance-year-label {
  min-width: 3.25rem;
  text-align: center;
  font-weight: 700;
  color: #0f172a;
}

.year-at-glance-body {
  padding: 0 1rem 1rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.year-at-glance-intro {
  margin: 0 0 0.85rem;
}

.year-at-glance-summary {
  margin: 0;
  font-weight: 600;
  color: #2f64f5;
}

.year-at-glance-busiest {
  margin: 0.35rem 0 0;
  color: #334155;
  font-size: 0.9rem;
}

.year-at-glance-section {
  margin-bottom: 1rem;
}

.year-at-glance-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.year-at-glance-chart {
  margin: 0.25rem 0 0.5rem;
}

.year-at-glance-bars {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 160px;
  padding: 0.5rem 0.25rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfd;
}

.year-at-glance-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 0.25rem;
}

.year-at-glance-bar-wrap {
  flex: 1;
  width: 100%;
  max-width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  min-height: 110px;
}

.year-at-glance-bar {
  width: 100%;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #6b9af0, #2f64f5);
  min-height: 3px;
}

.year-at-glance-bar-empty {
  min-height: 0;
  height: 0 !important;
  background: transparent;
}

.year-at-glance-bar-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}

.year-at-glance-bar-label {
  font-size: 0.68rem;
  color: #64748b;
  text-align: center;
}

.year-at-glance-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.year-at-glance-month-block {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 0.45rem 0.5rem 0.55rem;
}

.year-at-glance-month-title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: #0f172a;
}

.year-at-glance-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.year-at-glance-month-wd {
  font-size: 0.52rem;
  font-weight: 800;
  color: #64748b;
  text-align: center;
  line-height: 1;
}

.year-at-glance-day {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 4px;
  border: 1px solid #e5e9f2;
  background: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.year-at-glance-day--blank {
  border-style: dashed;
  border-color: #edf1f7;
  background: transparent;
  opacity: 0.85;
}

.year-at-glance-day--future {
  background: #f8fafc;
  border-color: #eef2f7;
}

.year-at-glance-day--scheduled {
  background: #f1f5f9;
  border-color: #dbe3ee;
}

.year-at-glance-day--has-checkins {
  color: #fff;
  border-color: rgba(15, 23, 42, 0.12);
}

.year-at-glance-day--active {
  cursor: help;
  position: relative;
}

.year-at-glance-day-count {
  line-height: 1;
}

.year-at-glance-day-markers {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  pointer-events: none;
}

.year-at-glance-day-marker {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  flex: 0 0 auto;
}

.year-at-glance-filters {
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.year-at-glance-filters[open] {
  padding: 0.65rem 0.75rem;
}

.year-at-glance-filters-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.year-at-glance-filters-summary::-webkit-details-marker {
  display: none;
}

.year-at-glance-filters-summary::marker {
  content: "";
}

.year-at-glance-filters-summary::before {
  content: "▸";
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.year-at-glance-filters[open] > .year-at-glance-filters-summary::before {
  transform: rotate(90deg);
}

.year-at-glance-filters-summary-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.year-at-glance-filters-summary-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.year-at-glance-filters-panel {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e2e8f0;
}

.year-at-glance-filter-field {
  display: grid;
  gap: 0.35rem;
}

.year-at-glance-filter-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}

.year-at-glance-filter-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.year-at-glance-class-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.25rem 0.65rem;
  max-height: 8rem;
  overflow: auto;
}

.year-at-glance-class-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #334155;
}

.year-at-glance-sport-select,
.year-at-glance-student-search {
  width: 100%;
  max-width: 320px;
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.year-at-glance-student-suggestions {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  max-width: 320px;
  max-height: 10rem;
  overflow: auto;
}

.year-at-glance-student-suggestion-btn {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.4rem 0.55rem;
  font: inherit;
  cursor: pointer;
}

.year-at-glance-student-suggestion-btn:hover {
  background: #eef2ff;
}

.year-at-glance-student-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.year-at-glance-student-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  border: 1px solid #dbe3ee;
  background: #fff;
  font-size: 0.78rem;
  color: #0f172a;
}

.year-at-glance-student-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.year-at-glance-student-chip-remove {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.year-at-glance-clear-filters-btn {
  justify-self: start;
}

.year-at-glance-month-note {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.year-at-glance-month-note-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
}

.year-at-glance-month-note-input {
  width: 100%;
  min-height: 2.6rem;
  resize: vertical;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #fff;
}

.year-at-glance-tooltip {
  position: fixed;
  z-index: 1200;
  max-width: min(360px, 92vw);
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-wrap;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
}

.schedule-weekly-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.schedule-weekly-header h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.schedule-weekly-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.weekly-schedule-session-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.25rem 0.45rem;
}

.weekly-schedule-session-tab {
  width: auto;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  min-width: 108px;
}

.weekly-schedule-session-tab-name {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1;
  text-transform: uppercase;
}

.weekly-schedule-session-tab-range {
  font-size: 0.78rem;
  line-height: 1.05;
}

.weekly-schedule-session-year-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid #c9d1e0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 86px;
}

.weekly-schedule-session-year-label {
  min-width: 3.1rem;
  text-align: center;
  font-weight: 700;
  color: #334155;
}

.weekly-schedule-session-year-btn {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid #c9d1e0;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  line-height: 1;
}

.weekly-schedule-session-year-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.weekly-schedule-session-tab--active {
  border-color: #2f64f5;
  color: #1c4fd8;
  background: #e8f0ff;
}

.weekly-schedule-session-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.2rem 0 0.55rem;
  box-sizing: border-box;
  overflow: visible;
  min-height: 24px;
}

.weekly-schedule-timeline-strip {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 0 2px;
  box-sizing: border-box;
}

.weekly-schedule-timeline-week-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.weekly-schedule-timeline-week-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.weekly-schedule-timeline-week-dot--active {
  background: #dc2626;
}

.weekly-schedule-timeline-week-dot--empty {
  visibility: hidden;
}

.weekly-schedule-timeline-week {
  width: 10px;
  height: 10px;
  border: 1px solid #94a3b8;
  border-radius: 2px;
  background: #ffffff;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.weekly-schedule-timeline-week--selected {
  background: #cfe2ff;
  border-color: #2f64f5;
}

.weekly-schedule-timeline-week--current {
  background: #86efac;
  border-color: #16a34a;
}

.weekly-schedule-body {
  padding: 0 1rem 1rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.weekly-schedule-range {
  margin: 0 0 0.75rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: #111827;
  text-align: center;
}

.weekly-schedule-week-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.2rem 0 0.55rem;
  padding: 0.35rem 0 0.45rem;
}

.weekly-schedule-week-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.weekly-schedule-week-picker-select {
  min-width: 0;
  width: 190px;
  border: 1px solid #c9d1e0;
  border-radius: 8px;
  padding: 0.24rem 1.6rem 0.24rem 0.45rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}

.weekly-schedule-week-picker-dash {
  font-size: 1.35rem;
  line-height: 1;
  color: #334155;
  font-weight: 700;
}

.weekly-schedule-week-picker-session {
  font-size: 1.45rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1;
}

.weekly-schedule-week-picker-session--winter {
  color: #2563eb;
}

.weekly-schedule-week-picker-session--spring {
  color: #16a34a;
}

.weekly-schedule-week-picker-session--summer {
  color: #ea580c;
}

.weekly-schedule-week-picker-session--fall_winter {
  color: #b45309;
}

.weekly-schedule-week-picker-session--holiday {
  color: #dc2626;
}

.weekly-schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: start;
}

/* Narrow screens: readable text + 2-column week (matches Schedule Calculator weekly grid). */
@media (max-width: 900px) {
  .weekly-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .weekly-schedule-range {
    font-size: 1.15rem;
  }

  .weekly-schedule-week-picker-session {
    font-size: 1.15rem;
  }

  .weekly-schedule-week-picker-dash {
    font-size: 1.1rem;
  }

  .weekly-schedule-week-picker-label {
    font-size: 0.82rem;
  }

  .weekly-schedule-week-picker-select {
    font-size: 0.85rem;
    width: min(100%, 240px);
  }

  .weekly-schedule-day-head {
    font-size: 0.72rem;
    padding: 0.3rem 0.35rem;
  }

  .weekly-schedule-day-head strong {
    font-size: 0.78rem;
  }

  .weekly-schedule-date {
    font-size: 0.72rem;
  }

  .weekly-schedule-class-list {
    padding: 0.28rem 0.2rem 0.38rem;
  }

  .weekly-schedule-class-item {
    font-size: 0.68rem;
    padding: 0.25rem 0.3rem;
    margin-bottom: 0.25rem;
  }

  .weekly-schedule-class-time {
    font-size: 0.65rem;
  }

  .weekly-schedule-class-name {
    font-size: 0.72rem;
  }

  .weekly-schedule-coach-line {
    font-size: 0.68rem;
  }

  .weekly-schedule-empty {
    font-size: 0.78rem;
  }

  .weekly-schedule-session-tab {
    min-width: 92px;
    padding: 0.28rem 0.45rem;
    font-size: 0.72rem;
  }

  .weekly-schedule-session-tab-name {
    font-size: 0.55rem;
  }

  .weekly-schedule-session-tab-range {
    font-size: 0.68rem;
  }

  .weekly-schedule-session-year-tab {
    font-size: 0.72rem;
    min-width: 78px;
  }

  .weekly-schedule-legend-title {
    font-size: 0.9rem;
  }

  .weekly-schedule-legend-item {
    font-size: 0.72rem;
    line-height: 1.22;
  }

  .weekly-schedule-legend-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .weekly-schedule-grid {
    gap: 0.35rem;
  }

  .weekly-schedule-range {
    font-size: 1rem;
  }

  .weekly-schedule-week-picker-session {
    font-size: 1rem;
  }

  .weekly-schedule-class-item {
    font-size: 0.62rem;
    padding: 0.22rem 0.26rem;
  }

  .weekly-schedule-class-time {
    font-size: 0.6rem;
  }

  .weekly-schedule-class-name {
    font-size: 0.66rem;
  }

  .weekly-schedule-coach-line {
    font-size: 0.62rem;
  }

  .weekly-schedule-day-head strong {
    font-size: 0.72rem;
  }

  .weekly-schedule-session-tab {
    min-width: 82px;
  }
}

.weekly-schedule-day {
  border: 1px solid #dfe6f2;
  border-radius: 12px;
  background: #ffffff;
  min-width: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.weekly-schedule-day--today {
  border: 2px solid #d1d5db;
  box-shadow: 0 0 0 1px rgba(209, 213, 219, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
}

.weekly-schedule-day-head {
  padding: 0.35rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid #e7eaf0;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  font-size: 0.8rem;
}

.weekly-schedule-day-head strong {
  display: block;
  font-size: 0.9rem;
}

.weekly-schedule-date {
  font-size: 0.8rem;
  color: #5f6978;
  margin-top: 0.15rem;
}

.weekly-schedule-date--today {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}

.weekly-schedule-day--outside-session {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
}

.weekly-schedule-day--outside-session .weekly-schedule-day-head {
  background: #f1f5f9;
  color: #64748b;
}

.weekly-schedule-session-boundary {
  margin-top: 0.35rem;
  padding: 0.22rem 0.35rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.weekly-schedule-session-boundary--start {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.weekly-schedule-session-boundary--end {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.weekly-schedule-session-boundary--winter.weekly-schedule-session-boundary--start {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.weekly-schedule-session-boundary--spring.weekly-schedule-session-boundary--start {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.weekly-schedule-session-boundary--summer.weekly-schedule-session-boundary--start {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}

.weekly-schedule-session-boundary--fall_winter.weekly-schedule-session-boundary--start {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.weekly-schedule-session-boundary--holiday.weekly-schedule-session-boundary--start {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.weekly-schedule-session-boundary--winter.weekly-schedule-session-boundary--end,
.weekly-schedule-session-boundary--spring.weekly-schedule-session-boundary--end,
.weekly-schedule-session-boundary--summer.weekly-schedule-session-boundary--end,
.weekly-schedule-session-boundary--fall_winter.weekly-schedule-session-boundary--end,
.weekly-schedule-session-boundary--holiday.weekly-schedule-session-boundary--end {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.weekly-schedule-outside-session {
  padding: 0.45rem 0.35rem;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
  list-style: none;
}

.weekly-schedule-class-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.25rem 0.45rem;
}

.weekly-schedule-class-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.3rem 0.35rem;
  border: 2px solid #bfdbfe;
  border-radius: 10px;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
  background-color: #f8f8f9;
  background-image: none;
  position: relative;
}

.weekly-schedule-class-item--removed {
  opacity: 0.42;
}

.weekly-schedule-class-change-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
  pointer-events: none;
}

.weekly-schedule-class-item--changed {
  padding-top: 0.45rem;
}

.weekly-schedule-class-main {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.weekly-schedule-class-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.weekly-schedule-coach-line {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 700;
  line-height: 1.25;
}

.weekly-schedule-class-item:last-child {
  margin-bottom: 0;
}

.weekly-schedule-class-time {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.74rem;
}

.weekly-schedule-class-name {
  color: #1a1a1a;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}

.weekly-schedule-empty {
  padding: 0.5rem 0.25rem;
  color: #94a3b8;
  font-size: 0.92rem;
  text-align: center;
}

.weekly-schedule-class-item--strength {
  border-color: #fecdd3;
}

.weekly-schedule-class-item--flexibility {
  border-color: #bbf7d0;
}

.weekly-schedule-class-item--spatial {
  border-color: #bfdbfe;
}

.weekly-schedule-class-item--upper {
  border-color: #ddd6fe;
}

.weekly-schedule-class-item--coordination {
  border-color: #fef08a;
}

.weekly-schedule-swatch--strength {
  background: #fecdd3;
}

.weekly-schedule-swatch--flexibility {
  background: #bbf7d0;
}

.weekly-schedule-swatch--spatial {
  background: #bfdbfe;
}

.weekly-schedule-swatch--upper {
  background: #ddd6fe;
}

.weekly-schedule-swatch--coordination {
  background: #fef08a;
}

.student-list-add-search {
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid #e7eaf0;
  background: #f8faff;
}

.student-list-add-search-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3d4a5c;
  margin-bottom: 0.35rem;
}

.student-list-search-field {
  position: relative;
}

.student-list-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 2.35rem 0.55rem 0.75rem;
  border: 1px solid #c9d1e0;
  border-radius: 8px;
  font-size: 1rem;
}

.student-list-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: #e8ecf4;
  color: #3d4a5c;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-list-search-clear:hover {
  background: #dde3ef;
  color: #1e293b;
}

.student-list-search-clear:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
}

.student-list-search-input:focus {
  outline: 2px solid #2f64f5;
  outline-offset: 1px;
  border-color: #2f64f5;
}

.student-list-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #c9d1e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 2;
}

.student-list-suggestion-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.student-list-suggestion-item:hover,
.student-list-suggestion-item.is-active {
  background: #e8efff;
}

.student-list-suggestion-empty {
  padding: 0.5rem 0.75rem;
  color: #64748b;
  font-size: 0.85rem;
}

.student-list-add-hint {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.student-list-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e7eaf0;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.student-list-sort .btn {
  font-size: 0.85rem;
}

.student-list-sort .sort-btn.active {
  background: #2f64f5;
  color: #fff;
  border-color: #2f64f5;
}

.student-list-sort #addStudentFromListBtn {
  margin-left: auto;
}

.student-list-body {
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

.registration-status-body {
  padding: 1rem;
  max-height: 70vh;
  overflow: auto;
}

.modal-content-coach-report {
  position: relative;
  width: min(920px, 70vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.coach-modal-schedule {
  flex-shrink: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.coach-modal-schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem 0.35rem;
  flex-shrink: 0;
}

.coach-modal-schedule-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.coach-modal-schedule-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.coach-modal-schedule-toolbar .btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

.coach-modal-schedule-hint {
  margin: 0;
  padding: 0 1rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #64748b;
  flex-shrink: 0;
}

.modal-content-coaches-manage {
  width: min(560px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content-coach-add {
  width: min(520px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content-coach-detail {
  width: min(520px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.coach-detail-modal-body {
  padding: 0 1rem 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.coach-add-form {
  padding: 0 1rem 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.coaches-manage-body {
  padding: 0 1rem 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.coaches-manage-body > .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

.coaches-manage-lede {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}

.coaches-manage-hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #64748b;
}

.coaches-manage-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.45rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.coaches-manage-list-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
  padding: 0.5rem;
  grid-column: 1 / -1;
}

.coach-manage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.25rem 0.5rem;
  border: 1px solid #d8dbe2;
  border-radius: 10px;
  background: #fff;
  list-style: none;
}

.coach-manage-card--clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.coach-manage-card--clickable:hover {
  background: #f1f5ff;
  border-color: #94a3b8;
  box-shadow: 0 1px 4px rgba(47, 100, 245, 0.12);
}

.coach-manage-card--clickable:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
}

.coach-manage-card-photo {
  padding: 0;
  margin: 0;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 8px;
  overflow: hidden;
  background: #e8ecf4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coach-manage-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coach-manage-card-placeholder {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  line-height: 1.2;
  padding: 0.2rem;
}

.coach-manage-card-name {
  margin: 0;
  padding: 0.15rem 0.2rem;
  width: 100%;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1e3a8a;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}

.coach-detail-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e7eaf0;
}

.coach-detail-modal-actions-spacer {
  flex: 1;
  min-width: 0.5rem;
}

.coach-detail-avatar-row,
.coach-add-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.coach-detail-photo-btn {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 8px;
  border: 1px dashed #c8cfdb;
  padding: 0;
  background: #f1f5f9;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coach-detail-photo-btn:hover {
  border-color: #2f64f5;
  background: #eef2ff;
}

.coach-detail-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coach-detail-photo-placeholder {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  padding: 0.35rem;
  line-height: 1.2;
}

.coach-detail-photo-hint {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.coaches-manage-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.2rem;
}

.coaches-manage-field-hint {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.35;
}

.coaches-manage-field > .coaches-manage-field-label + .coach-class-checklist-section-label {
  margin-top: 0.35rem;
}

#coachAddModal .coach-add-assign-classes-field,
#coachDetailModal .coach-detail-assign-classes-field {
  gap: 0.45rem;
}

#coachAddModal .coach-add-assign-classes-title,
#coachDetailModal .coach-detail-assign-classes-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#coachDetailModal .coach-detail-current-assignments {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

#coachDetailModal .coach-detail-current-assignments-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

#coachDetailModal .coach-detail-current-assignments-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #1e293b;
  line-height: 1.45;
}

#coachDetailModal .coach-detail-current-assignments-empty {
  list-style: none;
  margin-left: -1.15rem;
  color: #64748b;
  font-style: italic;
}

#coachDetailModal .coach-detail-current-assignments--empty .coach-detail-current-assignments-list {
  padding-left: 0;
}

.coach-class-checklist-section-label {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.coach-class-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 9rem;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.coach-class-checklist-weekly {
  max-height: 14rem;
}

.coach-weekly-day-block {
  margin-top: 0.45rem;
}

.coach-weekly-day-block:first-child {
  margin-top: 0.15rem;
}

.coach-weekly-day-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.coach-weekly-day-classes {
  margin: 0.2rem 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.coach-assign-session-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e7eaf0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.coach-assign-session-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.coach-assign-session-range {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
}

.coach-assign-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.coach-assign-date-field {
  min-width: 10rem;
  flex: 1;
}

.coach-assign-substitute {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #334155;
  cursor: pointer;
}

@keyframes coach-save-success {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.35);
    transform: scale(1.03);
    background: #22c55e !important;
    border-color: #16a34a !important;
    color: #fff !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
}

.btn.coach-save-success-flash {
  animation: coach-save-success 0.75s ease-out;
}

.coach-class-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: #1e293b;
  cursor: pointer;
}

.coaches-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid #e7eaf0;
}

.coaches-manage-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.coaches-manage-field input,
.coaches-manage-field textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.4rem 0.5rem;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
}

.coaches-manage-form-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.class-header-coach-assigned input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Coach modal title — ~15px at default 16px root */
#coachModal .modal-header h2 {
  font-size: 0.9375rem;
}

.coach-report-toolbar {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e7eaf0;
  background: #f8faff;
  flex-shrink: 0;
}

.coach-report-panel-head {
  padding: 0.45rem 1rem 0.35rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
}

.coach-report-panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.coach-report-coach-strip-wrap {
  padding: 0.45rem 1rem 0.35rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  flex-shrink: 0;
}

.coach-report-coach-strip-hint {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #64748b;
}

.coach-report-coach-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
}

.coach-report-strip-btn {
  border: none;
  background: transparent;
  padding: 0.2rem;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 4.5rem;
  text-align: center;
  color: inherit;
  font: inherit;
}

.coach-report-strip-btn:hover,
.coach-report-strip-btn:focus-visible {
  background: #eef2ff;
  outline: none;
}

.coach-report-strip-btn:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f64f5;
}

.coach-report-strip-face {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  background: #fff;
  display: grid;
  place-items: center;
}

.coach-report-strip-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coach-report-strip-placeholder {
  font-size: 1.1rem;
  font-weight: 800;
  color: #334155;
}

.coach-report-strip-caption {
  font-size: 0.68rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.15;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fixed to the viewport so the wide stats dialog is not clipped by
   .modal-content-coach-report { overflow: hidden; width: ~920px }. */
.coach-report-coach-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 0.65rem;
  box-sizing: border-box;
}

.coach-report-coach-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.coach-report-coach-overlay-dialog {
  position: relative;
  z-index: 1;
  width: min(1200px, 85vw);
  max-height: min(92vh, 100%);
  min-height: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.coach-report-coach-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.coach-report-coach-overlay-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.coach-report-overlay-view-all-btn {
  font-size: 0.78rem;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
}

.coach-report-coach-overlay-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}

.coach-report-overlay-month-scope-hint {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #475569;
}

.coach-report-coach-overlay-body {
  padding: 0.55rem 0.85rem 0.75rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-height: min(82vh, 2000px);
}

.coach-report-print-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0.45rem 0.85rem 0.7rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.coach-report-month-meta {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0.15rem 0 0.45rem;
}

.coach-report-coach-year-meta {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #475569;
}

.coach-report-year-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* ~12.8px if root 16px */
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0;
}

.coach-report-year-label select {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid #c8cfdb;
}

.coach-report-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.55rem 1.25rem 1.1rem;
}

.coach-report-scroll > .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

/* ~11.5px — explainer under year */
.coach-report-intro {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #475569;
  background: #f1f5f9;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.coach-report-body {
  padding: 0;
  font-size: 0.8125rem;
}

.coach-report-placeholder {
  margin: 0.35rem 0 0;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}

.coach-report-coach-block {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #e2e8f0;
}

.coach-report-coach-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ~13px — coach name */
.coach-report-coach-name {
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f172a;
}

.coach-report-month-block {
  margin-bottom: 0.65rem;
  padding-left: 0.45rem;
  margin-left: 0.1rem;
  border-left: 2px solid #94a3b8;
}

.coach-report-month-block:last-child {
  margin-bottom: 0;
}

/* ~12px — month label */
.coach-report-month-title {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #334155;
}

.coach-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

/* Payment estimate under coach report tables — match table body font size and colors */
.coach-report-pay-status {
  margin-top: 0.45rem;
}

.coach-report-pay-breakdown {
  padding: 0.46rem 0.58rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #1e293b;
}

.coach-report-pay-breakdown--plain {
  font-weight: 400;
}

.coach-report-pay-breakdown__block + .coach-report-pay-breakdown__block {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e2e8f0;
}

.coach-report-pay-breakdown__heading {
  margin: 0 0 0.28rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}

.coach-report-pay-breakdown__period {
  margin: 0 0 0.38rem;
  font-size: 0.82rem;
  color: #475569;
}

.coach-report-pay-breakdown__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.85rem;
  align-items: baseline;
  padding: 0.16rem 0;
  font-size: 0.82rem;
}

.coach-report-pay-breakdown__label {
  color: #334155;
}

.coach-report-pay-breakdown__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  text-align: right;
}

.coach-report-pay-breakdown__row--total {
  margin-top: 0.12rem;
  padding-top: 0.32rem;
  border-top: 1px solid #cbd5e1;
}

.coach-report-pay-breakdown__row--total .coach-report-pay-breakdown__label,
.coach-report-pay-breakdown__row--total .coach-report-pay-breakdown__value {
  font-weight: 700;
  color: #0f172a;
}

.coach-report-pay-range-wrap {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.coach-report-table--detail {
  table-layout: fixed;
}

.coach-report-table th,
.coach-report-table td {
  border: 1px solid #e2e8f0;
  padding: 0.46rem 0.58rem;
  text-align: left;
  vertical-align: middle;
}

.coach-report-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.65);
}

.coach-report-table tbody tr.coach-report-tr--coach-absent {
  background: rgba(254, 226, 226, 0.45);
}

.coach-report-table tbody tr.coach-report-tr--coach-absent:nth-child(even) {
  background: rgba(254, 215, 215, 0.5);
}

.coach-report-table th {
  background: #e8eef5;
  font-weight: 700;
  color: #1e293b;
}

.coach-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.coach-report-table--detail th:nth-child(1) {
  width: 22%;
}
.coach-report-table--detail th:nth-child(2) {
  width: 10%;
}
.coach-report-table--detail th:nth-child(3) {
  width: 12%;
}
.coach-report-table--detail th:nth-child(4) {
  width: 10%;
}
.coach-report-table--detail th:nth-child(5) {
  width: 10%;
}
.coach-report-table--detail th:nth-child(6) {
  width: 30%;
}

.coach-report-table--detail th:nth-child(4),
.coach-report-table--detail th:nth-child(5) {
  text-align: center;
}

/* Beat `.coach-report-table td { text-align: left }` for numeric columns */
.coach-report-td-class,
.coach-report-td-day,
.coach-report-td-total {
  vertical-align: top;
}

.coach-report-td-class,
.coach-report-td-day {
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
}

.coach-report-table.coach-report-table--detail td.coach-report-td-present {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
}

.coach-report-table--detail tfoot .coach-report-month-totals-row td {
  background: rgba(37, 99, 235, 0.14);
  color: #1e3a8a;
  font-weight: 700;
  font-size: 0.82rem;
  border-color: rgba(37, 99, 235, 0.22);
  border-top: 1px solid rgba(37, 99, 235, 0.35);
}

.coach-report-table--detail tfoot .coach-report-month-absent-row td {
  background: rgba(254, 226, 226, 0.55);
  color: #7f1d1d;
  font-weight: 600;
  font-size: 0.78rem;
  border-color: rgba(185, 28, 28, 0.2);
}

.coach-report-table--detail tfoot .coach-report-month-absent-label {
  text-align: right;
  padding-right: 0.65rem;
  letter-spacing: 0.02em;
}

.coach-report-table--detail tfoot .coach-report-month-absent-val {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.coach-report-table--detail tfoot .coach-report-month-absent-row--zero td {
  background: rgba(241, 245, 249, 0.9);
  color: #475569;
  font-weight: 600;
  border-color: #e2e8f0;
}

.coach-report-table--detail tfoot .coach-report-month-totals-row td:first-child,
.coach-report-table--detail tfoot .coach-report-month-totals-row .coach-report-month-totals-label {
  text-align: right;
  letter-spacing: 0.02em;
  padding-right: 0.65rem;
}

.coach-report-table--detail tfoot .coach-report-month-totals-row td:nth-child(2),
.coach-report-table--detail tfoot .coach-report-month-totals-row td:nth-child(3) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.coach-report-table--detail tfoot .coach-report-month-totals-row .coach-report-td-notes {
  color: #475569;
  font-weight: 600;
}

.coach-report-td-notes {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #334155;
  word-break: break-word;
  vertical-align: top;
  white-space: pre-wrap;
}

.coach-report-td-notes--interactive {
  cursor: pointer;
}

.coach-report-td-notes--interactive:hover,
.coach-report-td-notes--interactive:focus-visible {
  background: #eef2ff;
  outline: none;
}

.coach-session-note-field-label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.coach-session-note-readonly {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.55rem;
  min-height: 2.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

#coachSessionPrivateNoteModal.modal {
  z-index: 130;
}

/* Opens on top of Coach profile (same .modal z-index; coach detail is later in DOM). */
#coachPaymentPinModal.modal {
  z-index: 140;
}

.coach-report-table.coach-report-table--detail td.coach-report-td-total {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
  background: #e8eef5;
}

@media print {
  body.coach-report-print-active .app-header,
  body.coach-report-print-active .app-status-bar,
  body.coach-report-print-active #scheduleRoot,
  body.coach-report-print-active #updateDataPinModal,
  body.coach-report-print-active #addStudentModal,
  body.coach-report-print-active #historyModal,
  body.coach-report-print-active #attendanceNoteModal,
  body.coach-report-print-active #editStudentModal,
  body.coach-report-print-active #trainingHistoryModal,
  body.coach-report-print-active #studentStatsModal,
  body.coach-report-print-active #updateDataModal,
  body.coach-report-print-active #backupModal,
  body.coach-report-print-active #attendanceGridReviewModal,
  body.coach-report-print-active #studentImportReviewModal,
  body.coach-report-print-active #weeklyScheduleModal,
  body.coach-report-print-active #studentListModal,
  body.coach-report-print-active #registrationStatusModal,
  body.coach-report-print-active #mergeStudentSelectModal,
  body.coach-report-print-active #mergeStudentPickModal,
  body.coach-report-print-active #referralPickModal,
  body.coach-report-print-active #siblingPickModal,
  body.coach-report-print-active #classCoachPickModal,
  body.coach-report-print-active #siblingConflictModal,
  body.coach-report-print-active #photoCropModal,
  body.coach-report-print-active #coachDetailModal,
  body.coach-report-print-active #coachesManageModal,
  body.coach-report-print-active #coachAddModal,
  body.coach-report-print-active #feesModal {
    display: none !important;
  }

  body.coach-report-print-active #coachModal {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
  }

  body.coach-report-print-active #coachModal .modal-content-coach-report {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.coach-report-print-active #coachModal .modal-header,
  body.coach-report-print-active #coachModal .coach-modal-schedule,
  body.coach-report-print-active #coachModal .coach-report-toolbar,
  body.coach-report-print-active #coachModal .coach-report-panel-head,
  body.coach-report-print-active #coachModal .coach-report-coach-strip-wrap,
  body.coach-report-print-active #coachModal .coach-report-scroll {
    display: none !important;
  }

  body.coach-report-print-active #coachReportCoachOverlay {
    position: static !important;
    inset: auto !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.coach-report-print-active #coachReportCoachOverlayBackdrop {
    display: none !important;
  }

  body.coach-report-print-active #coachReportCoachOverlay .coach-report-coach-overlay-dialog {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  body.coach-report-print-active .coach-report-coach-overlay-header {
    padding: 0 0 0.08in !important;
    border-bottom: 1px solid #000 !important;
    background: transparent !important;
  }

  body.coach-report-print-active .coach-report-coach-overlay-header-actions,
  body.coach-report-print-active .coach-report-print-actions {
    display: none !important;
  }

  body.coach-report-print-active .coach-report-coach-overlay-body {
    padding: 0.08in 0 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  body.coach-report-print-active .coach-report-table thead th {
    position: static !important;
  }
}

.coach-report-empty {
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.4;
}

.modal-content-registration-status {
  width: min(980px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.modal-content-fees {
  width: min(980px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.fees-toolbar {
  padding: 0.75rem 1rem 0.85rem;
  border-bottom: 1px solid #e7eaf0;
  background: #f8faff;
  display: grid;
  gap: 0.75rem;
}

.fees-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.fees-tab {
  flex: 1 1 260px;
  padding: 0.65rem 0.9rem;
  margin: 0;
  border: 1px solid transparent;
  background: #f1f5f9;
  font: inherit;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  border-radius: 10px;
  min-height: 2.75rem;
}

.fees-tab:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.fees-tab--active {
  color: #1e3a5f;
  background: #fff;
  border-color: #e2e8f0;
}

.fees-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.fees-controls-common {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.fees-checkbox-inline-cell {
  grid-column: span 1 !important;
  margin: 0;
  white-space: nowrap;
  align-self: end;
  justify-self: start;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2;
}

.fees-controls-common .fees-checkbox-inline-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.fees-controls-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.fees-controls-panel.hidden {
  display: none !important;
}

.fees-controls #feesAutoCalculateBtn,
.fees-controls #feesCalculateBtn {
  width: 100%;
}

.fees-month-label,
.fees-plan-label,
.fees-hours-label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
}

.fees-month-label input,
.fees-plan-label select,
.fees-hours-label select,
.fees-hours-label input {
  font: inherit;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  background: #fff;
}

.fees-month-label input[type="month"] {
  min-height: 2.1rem;
  border: 1px solid #d8e0ff;
  border-radius: 8px;
  background: #eef2ff;
  color: #1c3172;
  padding: 0.35rem 0.55rem;
}

.fees-month-label input[type="month"]:hover {
  background: #e0e7ff;
  border-color: #c7d2fe;
}

.fees-month-label input[type="month"]:focus-visible {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
  background: #fff;
}

.fees-month-label input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.fees-checkbox {
  grid-column: span 2;
  font-weight: 400;
  font-size: 1rem;
  color: inherit;
}

.fees-body {
  padding: 0.85rem 1rem 1rem;
}

.fees-body > .app-modal-help {
  margin-left: 0;
  margin-right: 0;
}

.fees-note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #475569;
}

.fees-result {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem;
  background: #fff;
  min-height: 3.25rem;
}

.fees-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.fees-result-table td {
  padding: 0.35rem 0;
}

.fees-result-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.fees-total-row td {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.55rem;
}

.fees-post-class-table {
  margin-top: 0.6rem;
  margin-bottom: 1.25rem;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  table-layout: fixed;
}

.fees-post-class-table th,
.fees-post-class-table td {
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.4rem;
  vertical-align: top;
  text-align: left;
}

.fees-post-class-table th {
  background: #f1f5f9;
  font-weight: 700;
  color: #334155;
}

.fees-post-class-table td:last-child {
  font-weight: 700;
}

.fees-post-month-total-row td {
  border-top: 2px solid #cbd5e1;
  font-weight: 700;
  background: #f8fafc;
}

.fees-post-month-title {
  margin-top: 1rem;
}

.fees-col-class {
  width: 34%;
}

.fees-col-days {
  width: 34%;
}

.fees-col-weeks {
  width: 18%;
}

.fees-col-pricing {
  width: 14%;
}

.fees-print-actions {
  margin-top: 0.75rem;
}

@media (max-width: 780px) {
  .fees-controls {
    grid-template-columns: 1fr 1fr;
  }
  .fees-checkbox {
    grid-column: span 2;
  }

  .fees-controls-common {
    grid-template-columns: 1fr 1fr;
  }

  .fees-controls-panel {
    grid-template-columns: 1fr 1fr;
  }
}

@media print {
  @page {
    size: Letter portrait;
    margin: 0.45in;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-header,
  .app-status-bar,
  #scheduleRoot,
  #updateDataPinModal,
  #addStudentModal,
  #historyModal,
  #attendanceNoteModal,
  #editStudentModal,
  #trainingHistoryModal,
  #studentStatsModal,
  #updateDataModal,
  #backupModal,
  #attendanceGridReviewModal,
  #studentImportReviewModal,
  #weeklyScheduleModal,
  #studentListModal,
  #coachModal,
  #registrationStatusModal,
  #mergeStudentSelectModal,
  #mergeStudentPickModal,
  #referralPickModal,
  #siblingPickModal,
  #classCoachPickModal,
  #siblingConflictModal,
  #photoCropModal,
  #coachDetailModal,
  #membershipTypeContextMenu,
  #studentContextMenu,
  .fees-print-actions {
    display: none !important;
  }

  #feesModal {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
  }

  #feesModal.hidden {
    display: none !important;
  }

  #feesModal .modal-content-fees {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #feesModal .modal-header {
    padding: 0 !important;
    border-bottom: 1px solid #000 !important;
    margin: 0 0 0.06in !important;
  }

  #feesModal .modal-header .close-btn {
    display: none !important;
  }

  #feesModal .modal-header h2 {
    margin: 0 !important;
    font-size: 13pt !important;
    line-height: 1.2 !important;
  }

  #feesModal .fees-toolbar {
    display: none !important;
  }

  #feesModal .fees-body {
    padding: 0 !important;
    margin-top: 0 !important;
  }

  #feesModal .fees-note {
    margin: 0 0 0.05in !important;
    color: #000 !important;
    font-size: 10pt !important;
  }

  /* Root results container: no box — avoids huge blank pages from break-inside: avoid on large blocks */
  #feesModal #feesResult.fees-result {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Per-student blocks: no outer border; allow natural page breaks */
  #feesModal .fees-result {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 0.14in !important;
    min-height: 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  #feesModal .fees-result-table,
  #feesModal .fees-post-class-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    font-size: 10pt !important;
  }

  #feesModal .fees-result-table td,
  #feesModal .fees-post-class-table th,
  #feesModal .fees-post-class-table td {
    border: 1px solid #000 !important;
    color: #000 !important;
    padding: 0.045in 0.05in !important;
    vertical-align: top !important;
    background: #fff !important;
  }

  #feesModal .fees-post-class-table th {
    font-weight: 700 !important;
  }

  #feesModal .fees-post-month-title {
    margin-top: 0.08in !important;
    margin-bottom: 0.04in !important;
    font-size: 10.5pt !important;
    font-weight: 700 !important;
    color: #000 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  #feesModal .fees-post-class-table {
    margin-top: 0.03in !important;
    margin-bottom: 0.08in !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  #feesModal .fees-post-month-total-row td {
    font-weight: 700 !important;
    background: #fff !important;
  }
}

.registration-status-search {
  padding: 0.75rem 1rem 0.25rem;
  border-bottom: 1px solid #e7eaf0;
  background: #f8faff;
}

.registration-status-search .student-list-search-field {
  max-width: 50%;
}

.registration-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  table-layout: fixed;
}

.registration-status-table th,
.registration-status-table td {
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: middle;
}

.registration-status-table th:nth-child(1),
.registration-status-table td:nth-child(1) {
  width: 24%;
}

.registration-status-table th:nth-child(2),
.registration-status-table td:nth-child(2) {
  width: 6%;
  text-align: center;
}

.registration-status-table th:nth-child(3),
.registration-status-table td:nth-child(3) {
  width: 21%;
}

.registration-status-table th:nth-child(4),
.registration-status-table td:nth-child(4) {
  width: 16%;
}

.registration-status-table th:nth-child(5),
.registration-status-table td:nth-child(5) {
  width: 21%;
}

.registration-status-table th:nth-child(6),
.registration-status-table td:nth-child(6) {
  width: 12%;
  text-align: center;
}

.registration-status-table th {
  background: #f1f5f9;
  font-weight: 700;
}

.registration-status-table input[type="date"] {
  font: inherit;
  font-size: 0.82rem;
  border: 1px solid #c8cfdb;
  border-radius: 6px;
  padding: 0.2rem 0.3rem;
}

.registration-status-table input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
}

.registration-status-start-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.registration-status-start-value {
  font-size: 0.8rem;
  color: #334155;
  min-width: 5.8rem;
}

.registration-status-date-btn {
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.9rem;
}

.registration-status-nowrap {
  white-space: nowrap;
}

.registration-days-left-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.2rem;
}

.registration-days-meter {
  position: relative;
  width: 100%;
  min-width: 9rem;
  height: 0.62rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #bbf7d0;
  background: #22c55e; /* remaining time */
}

.registration-days-meter-used {
  position: absolute;
  inset: 0 auto 0 0;
  background: #dcfce7; /* used days */
}

.registration-days-meter-last-month-marker {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: rgba(185, 28, 28, 0.75);
  transform: translateX(-1px);
}

.registration-days-meter.is-low {
  border-color: #fca5a5;
  background: #ef4444; /* low tank = red remaining section */
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) inset;
}

.all-students-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.all-students-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 1px solid #edf0f5;
}

.all-students-item:hover {
  background: #f0f4ff;
}

.all-students-item-delete-mode {
  cursor: default;
}

.all-students-item-focused {
  background: #e0e7ff;
  animation: focusFade 2s ease-out forwards;
}

@keyframes focusFade {
  to {
    background: transparent;
  }
}

.all-students-name {
  font-weight: 500;
}

.all-students-name-btn {
  border: 0;
  background: transparent;
  color: #1d4fd8;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  text-align: left;
}

.all-students-name-btn:hover {
  color: #1539a8;
}

.all-students-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.all-students-item .all-students-delete-checkbox {
  cursor: pointer;
  flex-shrink: 0;
}

.all-students-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.all-students-age {
  font-size: 0.9rem;
  color: #5f6978;
}

.all-students-reg {
  font-size: 0.78rem;
  font-weight: 600;
}

.merge-student-select-modal {
  z-index: 108;
}

.modal-content-merge-select {
  width: min(520px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.merge-student-select-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.merge-student-select-titles {
  flex: 1;
  min-width: 0;
}

.merge-student-select-titles h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.merge-student-select-first-name {
  color: #b91c1c;
  font-weight: 700;
}

.merge-student-select-line2 {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #415069;
  line-height: 1.35;
}

.merge-student-select-line2.merge-student-select-line2--step2-hint {
  font-weight: 500;
  font-size: 0.88rem;
  color: #64748b;
}

.merge-student-select-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.merge-student-select-body {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
}

.coach-rate-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.coach-rate-reveal-btn {
  align-self: flex-start;
  font-size: 0.82rem;
  padding: 0.28rem 0.55rem;
}

.coach-rate-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.coach-rate-editor.hidden {
  display: none !important;
}

.coach-rate-editor-field {
  margin: 0;
}

@media (max-width: 700px) {
  .coach-rate-editor {
    grid-template-columns: 1fr;
  }
}

.merge-student-select-search-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #415069;
}

.merge-student-select-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.merge-student-select-list {
  max-height: 45vh;
  overflow-y: auto;
  margin-top: 0.25rem;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: #fafbfc;
}

.merge-student-select-section {
  margin-bottom: 1rem;
}

.merge-student-select-section:last-child {
  margin-bottom: 0;
}

.merge-student-select-section--similar {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #dce3f0;
}

.merge-student-select-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #415069;
  letter-spacing: 0.01em;
}

.merge-student-select-section--similar .merge-student-select-section-title {
  color: #1d4fd8;
}

.merge-student-pick-modal {
  z-index: 110;
}

.modal-content-merge-pick {
  width: min(420px, 96vw);
}

.merge-student-pick-intro {
  margin: 0 1rem 0.75rem;
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.45;
}

.merge-student-pick-options {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.merge-student-pick-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #e2e6ef;
  cursor: pointer;
}

.merge-student-pick-option:hover {
  background: #f5f7ff;
}

.merge-student-pick-option input {
  flex-shrink: 0;
}

.merge-student-pick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid #e7eaf0;
  padding-top: 0.85rem;
}

#historyStudentName,
#trainingHistoryStudentName,
#studentStatsStudentName {
  font-weight: bold;
  color: #4169e1;
}

.history-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.history-left,
.history-right {
  min-width: 0;
}

.history-left > *:first-child {
  margin-top: 0;
}

.history-right {
  border-left: 1px solid #e2e8f0;
  padding-left: 2rem;
}

@media (max-width: 600px) {
  .history-columns {
    grid-template-columns: 1fr;
  }

  .history-right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
  }
}

.history-summary {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.history-week-label {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem;
  color: #2c3e50;
}

.history-week-label:first-of-type {
  margin-top: 0.5rem;
}

.history-list,
.totals-list {
  margin: 0.3rem 0 1rem;
  padding-left: 1.2rem;
}

.history-record-note {
  color: #5f6978;
  font-size: 0.9em;
}

.context-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  border: 1px solid #cfd6e2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(6, 18, 58, 0.2);
  padding: 0.3rem;
}

.context-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.context-menu button[hidden] {
  display: none !important;
}

.context-menu button:hover {
  background: #eef2ff;
}

@media (max-width: 760px) {
  .app-header {
    flex-wrap: wrap;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Edit student — siblings */
.edit-sibling-block {
  display: grid;
  gap: 0.45rem;
  padding: 0.5rem 0;
  border-top: 1px solid #e8ecf2;
  margin-top: 0.25rem;
}

.edit-sibling-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.6rem;
}

.edit-sibling-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  flex: 1;
  min-width: min(100%, 12rem);
}

.edit-referral-header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  justify-content: flex-end;
  margin-left: auto;
}

.edit-referral-inline-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.edit-referral-label-btn {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4b5563;
  background: none;
  border: none;
  padding: 0.15rem 0.1rem;
  margin: 0;
  cursor: context-menu;
  text-align: right;
  white-space: nowrap;
  max-width: min(22rem, 52vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-referral-label-btn:focus-visible {
  outline: 2px solid #166534;
  outline-offset: 2px;
  border-radius: 3px;
}

.edit-sibling-hint--below {
  position: static;
  opacity: 1;
  visibility: visible;
  max-width: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 0.82rem;
  color: #5f6978;
}

.edit-sibling-hint--below::before {
  display: none;
}

.referral-pick-nonmember {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

.referral-pick-nonmember-label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #415069;
}

.referral-pick-add-nonmember-btn {
  justify-self: start;
}

.referral-pick-footer {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e8ecf2;
}

.referral-pick-modal-header {
  align-items: flex-start;
}

.referral-pick-modal-header .close-btn {
  flex-shrink: 0;
  margin-left: auto;
}

.referral-pick-modal-header-titles {
  flex: 1;
  min-width: 0;
}

.referral-pick-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.3;
}

.referral-pick-by-nonmember {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e8ecf2;
  display: grid;
  gap: 0;
}

.referral-pick-by-nonmember .referral-pick-by-apply-btn {
  margin-top: 5px;
}

.referral-pick-out-current {
  margin: 0 0 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e8ecf2;
}

.referral-pick-out-current-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.referral-pick-out-current-empty {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
  padding: 0.25rem 0;
}

.referral-pick-out-current-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.4rem 0.5rem;
  background: #f5f7fb;
  border-radius: 6px;
  border: 1px solid #e2e8f3;
}

.referral-pick-out-kind--member,
.referral-pick-out-kind--guest {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.referral-pick-out-kind--member {
  background: #dbeafe;
  color: #1d4ed8;
}

.referral-pick-out-kind--guest {
  background: #ede9fe;
  color: #6d28d9;
}

.referral-pick-out-current-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
}

.referral-pick-out-remove-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  margin-left: auto;
}

.referral-detail-tooltip {
  pointer-events: none;
  z-index: 10060;
}

.referral-tooltip-referred-out {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.35rem;
  align-items: flex-start;
}

.referral-tooltip-col {
  flex: 1 1 10.5rem;
  min-width: min(100%, 9.5rem);
}

.referral-tooltip-col-title {
  font-weight: 700;
  font-size: 0.8rem;
  margin: 0 0 0.3rem;
  line-height: 1.2;
}

.referral-tooltip-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
  font-size: 0.82rem;
  line-height: 1.35;
}

.referral-tooltip-list li {
  margin: 0.08rem 0;
}

.edit-sibling-label-wrap {
  position: relative;
  display: inline-block;
  cursor: help;
}

.edit-sibling-label-wrap:focus-visible {
  outline: 2px solid #d4a84b;
  outline-offset: 2px;
  border-radius: 2px;
}

.edit-sibling-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.edit-sibling-names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.25rem;
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.4;
}

.edit-sibling-names-empty {
  color: #6b7280;
}

.edit-sibling-name-link {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #b8860b;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.edit-sibling-name-link:hover {
  color: #9a7209;
}

.edit-sibling-name-link:focus-visible {
  outline: 2px solid #d4a84b;
  outline-offset: 2px;
  border-radius: 2px;
}

.edit-sibling-plus-btn {
  flex-shrink: 0;
  min-width: 2.5rem;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.35rem 0.65rem;
}

.edit-sibling-hint-line {
  display: block;
}

.edit-sibling-hint-line + .edit-sibling-hint-line {
  margin-top: 0.35em;
}

.edit-sibling-hint {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  margin-top: 0.25rem;
  padding: 0.5rem 0.65rem;
  /* Without a set width, this box shrink-wraps to the narrow “Sibling / Parent” label. */
  width: min(22rem, calc(100vw - 2rem));
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.35;
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.12s ease,
    visibility 0.12s ease;
}

/* Bridge the gap so hover doesn’t drop while moving to the tooltip */
.edit-sibling-hint::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.5rem;
}

.edit-sibling-label-wrap:hover .edit-sibling-hint,
.edit-sibling-label-wrap:focus-within .edit-sibling-hint {
  opacity: 1;
  visibility: visible;
}

.modal-content-sibling-pick {
  max-width: 420px;
  padding: 20px;
  box-sizing: border-box;
}

.sibling-pick-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Referral / sibling pick modal: keep "Students … referred:" on one line */
.sibling-pick-title.referral-pick-h2 {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  /* Spaces in adjacent text nodes collapse between flex items; gap is reliable */
  gap: 0.35em;
  max-width: 100%;
}

.referral-pick-title-student-name {
  color: #b91c1c;
  font-weight: 700;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sibling-pick-title-lead {
  font-weight: 600;
  color: #1f2937;
}

.sibling-pick-for-name {
  font-weight: 600;
  color: #2563eb;
  font-size: 1.12rem;
  line-height: 1.25;
}

.sibling-pick-search-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}

.sibling-pick-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font: inherit;
}

.sibling-pick-search:focus {
  outline: 2px solid #2f64f5;
  outline-offset: 2px;
  border-color: #2f64f5;
}

.sibling-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(55vh, 360px);
  overflow-y: auto;
  padding-bottom: 0.25rem;
}

.sibling-pick-item {
  text-align: left;
  border: 1px solid #d8dbe2;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.sibling-pick-item:hover {
  border-color: #2f64f5;
  background: #f5f7ff;
}

.sibling-pick-empty {
  margin: 0;
  color: #5f6978;
  font-size: 0.9rem;
}

.modal-content-sibling-conflict {
  max-width: 440px;
}

.sibling-conflict-lede {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.45;
}

.sibling-conflict-fields {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.sibling-conflict-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.sibling-conflict-select {
  font: inherit;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #c8cfdb;
}

.sibling-conflict-actions {
  margin-top: 0.25rem;
}

/* Student edit modal — family fee ledger (matches /payments table layout) */
.modal-content-fee-ledger {
  width: min(1100px, 98vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content-fee-ledger .modal-header {
  flex-shrink: 0;
}

/* Scrollable body: intro, add form, message, and ledger table (short viewports). */
.student-fee-ledger-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.student-fee-ledger-help {
  padding: 0 1rem;
  flex-shrink: 0;
}

.student-fee-ledger-account-line {
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 0.88rem;
}

.student-fee-ledger-add-card {
  flex-shrink: 0;
  margin: 0 1rem 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfd;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.student-fee-ledger-add-toggle {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.student-fee-ledger-add-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.35rem;
}

.student-fee-ledger-add-panel.hidden {
  display: none;
}

.student-fee-ledger-form-section {
  padding: 0.65rem 0.75rem;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  background: #fff;
}

.student-fee-ledger-section-title {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

.student-fee-ledger-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem 0.75rem;
  align-items: end;
}

.student-fee-ledger-add-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .student-fee-ledger-add-grid--pair {
    grid-template-columns: 1fr;
  }
}

.student-fee-ledger-consolidated-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.85rem;
}

.student-fee-ledger-field--amount {
  flex: 0 1 7.5rem;
  min-width: 5.25rem;
}

.student-fee-ledger-field--pm {
  flex: 0 1 9rem;
  min-width: 6.5rem;
}

.student-fee-ledger-field--invoice {
  flex: 1 1 14rem;
  min-width: 10rem;
}

.student-fee-ledger-tax-check-label {
  display: inline-flex;
  flex-direction: column !important;
  flex: 0 0 6rem;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: #334155;
  margin-bottom: 0.05rem;
  text-align: left;
}

.student-fee-ledger-tax-check-text {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  text-align: left;
}

#studentFeeLedgerAmountIncludesTax {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  align-self: flex-start;
}

.student-fee-ledger-tax-help {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.student-fee-ledger-product-class-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.55fr);
  gap: 0.65rem 0.75rem;
  align-items: start;
}

#studentFeeLedgerClassesPerWeekWrap {
  min-width: 9.5rem;
}

.student-fee-ledger-product-col-stack {
  gap: 0.35rem;
}

#studentFeeLedgerClassesPerWeek {
  width: 5.5rem;
  max-width: 100%;
}

@media (max-width: 720px) {
  .student-fee-ledger-product-class-cols {
    grid-template-columns: 1fr;
  }
}

.student-fee-ledger-field--checklist {
  min-height: 0;
}

.student-fee-ledger-checklist-label {
  font-size: 0.95rem;
  color: #334155;
  margin-bottom: 0.3rem;
  display: block;
}

.student-fee-ledger-selection-summary {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: #64748b;
  min-height: 1rem;
}

.student-fee-ledger-class-checklist {
  max-height: 14rem;
  overflow: auto;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.student-fee-ledger-class-check-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  column-gap: 0.45rem;
  padding: 0.34rem 0.2rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #1e293b;
  cursor: pointer;
  border-radius: 6px;
}

.student-fee-ledger-class-check-row:hover {
  background: #f1f5f9;
}

.student-fee-ledger-class-check-row input {
  margin-top: 0.12rem;
  width: 0.88rem !important;
  height: 0.88rem !important;
  min-width: 0.88rem !important;
  max-width: 0.88rem !important;
  min-height: 0.88rem !important;
  max-height: 0.88rem !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box;
  justify-self: start;
  align-self: start;
}

.student-fee-ledger-class-check-row span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: #1e293b;
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.student-fee-ledger-class-list-empty {
  margin: 0.35rem 0;
  font-size: 0.9rem;
  color: #64748b;
}

.student-fee-ledger-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.95rem;
  color: #334155;
  min-width: 0;
}

.student-fee-ledger-field--wide {
  grid-column: 1 / -1;
}

.student-fee-ledger-field input,
.student-fee-ledger-field select,
.student-fee-ledger-field textarea {
  font: inherit;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #c8cfdb;
  width: 100%;
  box-sizing: border-box;
}

.student-fee-ledger-class-hint {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.35;
}

.student-fee-ledger-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.student-fee-ledger-message {
  min-height: 1.1rem;
  margin: 0 1rem 0.5rem;
  font-size: 0.82rem;
}

.student-fee-ledger-message--ok {
  color: #0a7b32;
}

.student-fee-ledger-message--err {
  color: #b01212;
}

.student-fee-ledger-table-wrap {
  flex-shrink: 0;
  margin: 0 1rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow-x: auto;
}

.student-fee-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.student-fee-ledger-table th,
.student-fee-ledger-table td {
  border-bottom: 1px solid #eef2f7;
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.student-fee-ledger-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.student-fee-ledger-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.student-fee-ledger-edit-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.5rem;
}

.student-fee-ledger-del-x {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  color: #b01212;
  background: transparent;
  border: 1px solid #e5bcbc;
  border-radius: 4px;
  cursor: pointer;
}

.student-fee-ledger-del-x:hover {
  background: #fdeaea;
}

.student-fee-ledger-inline-row td {
  background: #f4f7ff;
  vertical-align: top;
}

.student-fee-ledger-inline-head {
  font-size: 0.8rem;
  margin-bottom: 0.45rem;
  color: #64748b;
}

.student-fee-ledger-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem 0.6rem;
  margin-top: 0.35rem;
}

.student-fee-ledger-inline-grid label {
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #334155;
}

.student-fee-ledger-inline-grid input,
.student-fee-ledger-inline-grid select,
.student-fee-ledger-inline-grid textarea {
  font: inherit;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid #c8cfdb;
  width: 100%;
  box-sizing: border-box;
}

.student-fee-ledger-inline-product-class {
  grid-column: 1 / -1;
}

.student-fee-ledger-inline-product-class .student-fee-ledger-product-class-cols {
  margin-top: 0.25rem;
}

.student-fee-ledger-inline-class-hint {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

.student-fee-ledger-inline-grid .student-fee-ledger-class-checklist {
  max-height: 11rem;
}

.student-fee-ledger-inline-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.student-fee-ledger-inline-actions .btn {
  font-size: 0.78rem;
}

.student-fee-ledger-inline-err {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #b01212;
}

/* Post-training monthly table: paid-in amounts read as credits */
.fees-ledger-payment-accent {
  color: #15803d;
  font-weight: 600;
}

/* —— Products (fee catalog) modal —— */
.modal-content-products {
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.products-modal-body {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.products-catalog-status {
  font-size: 0.85rem;
  color: #475569;
}

.products-unlock-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.products-unlock-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.products-unlock-input {
  min-width: 10rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}

.products-unlock-error {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8rem;
  color: #b91c1c;
}

.products-catalog-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  max-height: min(52vh, 640px);
  padding-right: 0.25rem;
  padding-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
}

.products-catalog-mount {
  flex-shrink: 0;
}

.products-catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.75rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  text-transform: uppercase;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 0.35rem;
}

.products-catalog-head span:nth-child(2) {
  text-align: center;
}

.products-catalog-head span:nth-child(3) {
  text-align: right;
}

.products-row-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #334155;
}

.products-section {
  margin-bottom: 1.1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.products-section-title {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.products-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  border-bottom: 1px solid #f1f5f9;
}

.products-row:last-child {
  border-bottom: none;
}

.products-row-label {
  line-height: 1.35;
  color: #1e293b;
}

.products-row input.products-field,
.products-row-price input.products-field {
  width: 100%;
  text-align: center;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 0.85rem;
}

.products-row .products-computed {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #334155;
  font-size: 0.82rem;
}

.products-row.products-row--single {
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
}

.products-pricing-rules {
  margin: 0.75rem 0 0;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.products-pricing-rules-title {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-transform: uppercase;
}

.products-pricing-rules-list {
  list-style: disc;
  margin: 0;
  padding: 0.6rem 0.75rem 0.7rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #1e293b;
}

.products-pricing-rules-list li strong {
  color: #0f172a;
}

.products-modal-actions .products-edit-prices-btn {
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.25;
  border-radius: 6px;
}

.products-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.35rem;
  border-top: 1px solid #e7eaf0;
  margin-top: 0.25rem;
}

@media (max-width: 560px) {
  .products-row,
  .products-catalog-head {
    grid-template-columns: minmax(0, 1fr) 4.5rem 4.2rem;
    font-size: 0.78rem;
  }
}

/* Attendance grid import review: name column actions */
.attendance-grid-name-cell {
  vertical-align: top;
}

.attendance-grid-name-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.attendance-grid-name-action-btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.25;
}

.attendance-grid-review-row--skipped {
  opacity: 0.72;
  background: #f8fafc;
}