:root {
  color-scheme: light;
  --bg: #f3f7f5;
  --panel: #ffffff;
  --ink: #14292c;
  --muted: #60757a;
  --line: #dce8e4;
  --brand: #3e6f6b;
  --brand-dark: #2d5c58;
  --accent: #2f8f46;
  --accent-soft: #e7f4ec;
  --soft: #edf5f2;
  --warning: #d88a1f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
a { color: inherit; }
button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 16px;
}
.dashboard-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 44px;
}
.dashboard-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20, 41, 44, .06);
  margin-bottom: 18px;
  overflow: hidden;
}
.dashboard-header {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  padding: 20px;
}
.dashboard-header form button {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  gap: 8px;
  justify-content: center;
  min-height: 45px;
  padding: 10px 18px;
  width: 100%;
}
.dashboard-header form button span {
  font-size: 18px;
  line-height: 1;
}
.eyebrow {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1, h2 { margin: 0; }
h1 { font-size: 34px; line-height: 1.12; }
h2 { font-size: 20px; }
.muted { color: var(--muted); margin: 7px 0 0; }
.dashboard-summary .eyebrow {
  color: var(--brand);
}
.dashboard-summary h1 {
  color: var(--ink);
  font-size: 30px;
}
.dashboard-summary .muted {
  color: var(--muted);
  font-weight: 700;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.metric-card {
  background: #fbfdfc;
  border-right: 1px solid var(--line);
  min-height: 104px;
  padding: 18px 20px;
}
.metric-card span,
.metric-card small {
  color: var(--muted);
  display: block;
  font-weight: 800;
}
.metric-card span {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.metric-card strong {
  color: var(--ink);
  display: block;
  font-size: 31px;
  line-height: 1;
  margin: 7px 0 4px;
}
.metric-card small {
  font-size: 14px;
}
.metric-card:last-child {
  border-right: 0;
}
.metric-alert strong {
  color: var(--warning);
}
.metric-alert strong:before {
  color: #f5a623;
  content: "•";
  font-size: 23px;
  margin-right: 4px;
}
.period-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(20, 41, 44, .04);
  margin-top: 18px;
  padding: 18px;
}
.period-panel h2 {
  color: var(--ink);
  font-size: 20px;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.period-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}
.period-card {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-top: 3px solid #8c9a95;
  border-radius: 10px;
  min-height: 104px;
  padding: 13px 15px;
}
.period-card span,
.period-card small {
  color: var(--muted);
  display: block;
  font-weight: 800;
}
.period-card span {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.period-card strong {
  color: var(--ink);
  display: block;
  font-size: 28px;
  line-height: 1;
  margin: 11px 0 5px;
}
.period-card small {
  font-size: 14px;
}
.period-today { border-top-color: #8c9a95; }
.period-wtd { border-top-color: #2f7fc1; }
.period-mtd { border-top-color: #2f8f46; }
.period-ytd { border-top-color: #7b61c9; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(20, 41, 44, .04);
  margin-top: 18px;
  overflow: hidden;
}
.panel-heading {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}
.sort-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sort-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 7px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
.sort-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.sort-chip:after { content: " ↕"; opacity: .7; }
.sort-chip.up:after { content: " ↑"; opacity: 1; }
.sort-chip.down:after { content: " ↓"; opacity: 1; }
.category-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
}
.category-card {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  padding: 15px;
}
.category-card span {
  color: var(--ink);
  display: block;
  font-weight: 800;
  line-height: 1.25;
}
.category-card strong {
  color: var(--ink);
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-top: 14px;
}
.category-card small {
  color: var(--muted);
  display: block;
  font-weight: 800;
  margin-top: 3px;
  text-transform: uppercase;
}
.category-card p {
  color: var(--muted);
  font-weight: 800;
  margin: 12px 0 0;
}
.category-tone-0 { border-left-color: #2f8f46; }
.category-tone-1 { border-left-color: #2f7fc1; }
.category-tone-2 { border-left-color: #8a6bd1; }
.category-tone-3 { border-left-color: #d88a1f; }
.category-tone-4 { border-left-color: #4c8d8a; }
.category-tone-5 { border-left-color: #c85f5f; }
.table-wrap { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background: #edf5f2;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
}
td { background: #fff; }
tr:nth-child(even) td { background: #f8faf9; }
.numeric { text-align: right; white-space: nowrap; }
.service-card-mobile { display: none; }
.sort-link {
  display: inline-block;
  text-decoration: none;
}
.sort-link:after { content: " ↕"; opacity: .7; }
.sort-link.up:after { content: " ↑"; opacity: 1; }
.sort-link.down:after { content: " ↓"; opacity: 1; }
.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}
.login-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(24, 40, 45, .08);
  max-width: 430px;
  padding: 28px;
  width: 100%;
}
.login-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
label {
  color: var(--muted);
  font-weight: 700;
}
input[type="password"] {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 18px;
  padding: 12px;
  width: 100%;
}
input[type="date"],
input[type="email"],
input[type="text"],
textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  padding: 10px 11px;
  width: 100%;
}
textarea {
  line-height: 1.45;
  resize: vertical;
}
.error {
  background: #fff0f0;
  border: 1px solid #f0b8b8;
  border-radius: 6px;
  color: #9f2f2f;
  padding: 10px 12px;
}
.notice-action {
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 6px;
  display: inline-block;
  font-weight: 900;
  margin-top: 8px;
  padding: 8px 10px;
  text-decoration: none;
}
.fill-0 .service-card-progress span { width: 0%; }
.fill-5 .service-card-progress span { width: 5%; }
.fill-10 .service-card-progress span { width: 10%; }
.fill-15 .service-card-progress span { width: 15%; }
.fill-20 .service-card-progress span { width: 20%; }
.fill-25 .service-card-progress span { width: 25%; }
.fill-30 .service-card-progress span { width: 30%; }
.fill-35 .service-card-progress span { width: 35%; }
.fill-40 .service-card-progress span { width: 40%; }
.fill-45 .service-card-progress span { width: 45%; }
.fill-50 .service-card-progress span { width: 50%; }
.fill-55 .service-card-progress span { width: 55%; }
.fill-60 .service-card-progress span { width: 60%; }
.fill-65 .service-card-progress span { width: 65%; }
.fill-70 .service-card-progress span { width: 70%; }
.fill-75 .service-card-progress span { width: 75%; }
.fill-80 .service-card-progress span { width: 80%; }
.fill-85 .service-card-progress span { width: 85%; }
.fill-90 .service-card-progress span { width: 90%; }
.fill-95 .service-card-progress span { width: 95%; }
.fill-100 .service-card-progress span { width: 100%; }
.tab-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.tab-link {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  text-decoration: none;
}
.tab-link.tab-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.roster-filter-panel {
  padding: 16px;
}
.lesson-filter-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto;
}
.filter-field {
  display: grid;
  gap: 6px;
}
.filter-field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-size: 15px;
  min-height: 43px;
  padding: 9px 10px;
  width: 100%;
}
.filter-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.export-button {
  align-items: center;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 7px;
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 800;
  justify-content: center;
  min-height: 43px;
  padding: 10px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.export-button:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.export-disabled {
  background: #dfe7e3;
  border-color: #dfe7e3;
  color: var(--muted);
}
.roster-heading {
  align-items: center;
}
.level-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}
.level-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  padding: 6px 10px;
}
.level-chip b {
  color: var(--ink);
}
.roster-table th,
.roster-table td {
  font-size: 14px;
}
.roster-table td {
  vertical-align: top;
}
.roster-table td:nth-child(6) {
  max-width: 270px;
}
.contact-cell span {
  color: var(--brand-dark);
  display: block;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.empty-state {
  color: var(--muted);
  font-weight: 700;
  padding: 22px 16px;
}
.empty-state p {
  margin: 0;
}
.notice {
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  margin-top: 18px;
  padding: 13px 15px;
}
.notice p {
  margin: 0;
}
.notice ul {
  margin: 8px 0 0;
  padding-left: 19px;
}
.notice-success {
  background: #e7f4ec;
  border-color: #b9ddc7;
  color: #145f30;
}
.notice-error {
  background: #fff0f0;
  border-color: #f0b8b8;
  color: #9f2f2f;
}
.cancellation-filter-panel {
  padding: 16px;
}
.cancellation-filter-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(130px, 160px) minmax(150px, 190px) minmax(150px, 180px) auto;
}
.cancellation-date-form {
  grid-template-columns: minmax(160px, 220px) auto;
}
.timeslot-checklist-field {
  border: 0;
  grid-column: 1 / -1;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.timeslot-checklist-field legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 10px;
  justify-content: space-between;
  letter-spacing: .06em;
  margin-bottom: 9px;
  text-transform: uppercase;
  width: 100%;
}
.timeslot-checklist-field legend strong {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
  padding: 4px 9px;
  text-transform: none;
}
.timeslot-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 10px;
}
.timeslot-bulk-actions .secondary-button {
  font-size: 13px;
  min-height: 36px;
  padding: 8px 12px;
}
.timeslot-checklist {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-height: 430px;
  overflow: auto;
  padding: 2px;
}
.selection-submit-actions {
  display: none;
  margin-top: 12px;
}
.timeslot-checklist-field:has(input:checked) .selection-submit-actions,
.timeslot-checklist-field.has-selection .selection-submit-actions {
  display: grid;
}
.selection-submit-actions button {
  min-height: 48px;
  width: 100%;
}
.timeslot-choice {
  --sport-color: #61706d;
  --sport-bg: #f7faf9;
  align-items: center;
  background: var(--sport-bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sport-color);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 78px;
  padding: 11px 12px;
}
.timeslot-choice.sport-swim,
.selected-timeslot-pill.sport-swim {
  --sport-color: #317ca7;
  --sport-bg: #eef8fc;
}
.timeslot-choice.sport-tennis,
.selected-timeslot-pill.sport-tennis {
  --sport-color: #2f8a55;
  --sport-bg: #edf8f0;
}
.timeslot-choice:has(input:checked) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sport-color) 24%, transparent);
}
.timeslot-choice input {
  height: 18px;
  margin: 0;
  width: 18px;
}
.timeslot-choice-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.timeslot-choice-top {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.timeslot-choice-top strong {
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.timeslot-choice-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.timeslot-choice-count {
  align-self: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  min-width: 28px;
  padding: 4px 7px;
  text-align: center;
}
.sport-chip {
  background: color-mix(in srgb, var(--sport-color) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--sport-color) 28%, #fff);
  border-radius: 999px;
  color: var(--sport-color);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 8px;
  text-transform: uppercase;
}
.sport-chip.sport-swim {
  --sport-color: #317ca7;
}
.sport-chip.sport-tennis {
  --sport-color: #2f8a55;
}
.cancellation-heading {
  align-items: center;
}
.session-badge {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
}
.session-badge-soft {
  background: #e8f0fb;
  border-color: #c8dbf5;
  color: #1d3f96;
}
.selection-stale-banner {
  background: #fff8e7;
  border-top: 1px solid #f0d896;
  color: #5d4300;
  font-weight: 800;
  padding: 10px 14px;
}
.timeslot-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}
.selected-timeslot-strip {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 0;
}
.selected-timeslot-pill {
  --sport-color: #61706d;
  --sport-bg: #f7faf9;
  align-items: center;
  background: var(--sport-bg);
  border: 1px solid color-mix(in srgb, var(--sport-color) 24%, var(--line));
  border-radius: 8px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  padding: 7px 9px;
}
.selected-timeslot-pill strong,
.selected-timeslot-pill span:last-child {
  overflow-wrap: anywhere;
}
.selected-timeslot-pill strong {
  color: var(--ink);
}
.selected-timeslot-pill span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.summary-tile {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 84px;
  padding: 12px;
}
.summary-tile span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.summary-tile strong {
  color: var(--ink);
  display: block;
  font-size: 17px;
  line-height: 1.25;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.cancellation-compose-grid {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}
.copy-panel,
.cancel-timeslot-form {
  padding: 16px;
}
.copy-panel {
  border-right: 1px solid var(--line);
}
.compact-copy-panel summary {
  align-items: center;
  color: var(--brand);
  cursor: pointer;
  display: flex;
  font-weight: 900;
  gap: 10px;
  justify-content: space-between;
}
.compact-copy-panel summary strong {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 8px;
}
.compact-copy-panel[open] summary {
  margin-bottom: 10px;
}
.cancellation-emails {
  font-family: monospace;
  font-size: 12px;
  min-height: 78px;
}
.empty-copy {
  color: var(--muted);
  font-weight: 700;
  margin: 12px 0 0;
}
.cancellation-roster {
  margin-top: 14px;
}
.cancellation-roster summary {
  color: var(--brand);
  cursor: pointer;
  font-weight: 800;
  padding: 4px 0;
}
.cancellation-roster ul {
  border: 1px solid var(--line);
  border-radius: 8px;
  list-style: none;
  margin: 8px 0 0;
  max-height: 330px;
  overflow: auto;
  padding: 0;
}
.cancellation-roster li {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 2px 10px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding: 10px 12px;
}
.cancellation-roster li:last-child {
  border-bottom: 0;
}
.cancellation-roster strong {
  color: var(--ink);
}
.cancellation-roster span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.cancel-timeslot-form {
  display: grid;
  gap: 11px;
}
.test-email-box {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}
.test-email-box p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}
.test-email-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.secondary-button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
  white-space: nowrap;
}
.secondary-button:hover {
  background: var(--soft);
}
.message-title-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.message-title-row label {
  margin: 0;
}
.message-textarea {
  min-height: 156px;
}
.checkbox-row {
  align-items: flex-start;
  color: var(--ink);
  display: grid;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.35;
}
.checkbox-row input {
  margin-top: 3px;
}
.danger-box {
  background: #fff8e7;
  border: 1px solid #f0d896;
  border-radius: 8px;
  color: #5d4300;
  display: grid;
  gap: 8px;
  padding: 12px;
}
.danger-box p {
  margin: 0;
}
.info-box {
  background: #e8f0fb;
  border: 1px solid #c8dbf5;
  border-radius: 8px;
  color: #1d3f96;
  display: grid;
  gap: 8px;
  padding: 12px;
}
.info-box p {
  margin: 0;
}
.danger-box label {
  color: #5d4300;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.danger-button {
  background: #b33b32;
}
.danger-button:hover {
  background: #992f28;
}
.danger-button:disabled {
  background: #d7dfdb;
  color: #6a7975;
  cursor: not-allowed;
}
.event-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  padding: 16px;
}
.event-card {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.event-card-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.event-badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-workday { background: #e7f4ec; color: #1d6636; }
.badge-event   { background: #e8f0fb; color: #1d3f96; }
.badge-other   { background: #f5f0fb; color: #5c3d96; }
.event-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.event-card-counts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.count-chip {
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
}
.count-signups { background: #e7f4ec; color: #1d6636; }
.count-logged  { background: #fff8e7; color: #7a5500; }
.copy-emails-details {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}
.copy-emails-summary {
  background: var(--accent-soft);
  border: 1px solid #cfe4d7;
  border-radius: 6px;
  color: var(--brand-dark);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  padding: 5px 10px;
  user-select: none;
}
.copy-emails-summary::-webkit-details-marker { display: none; }
.copy-emails-body { margin-top: 8px; }
.emails-textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: monospace;
  font-size: 12px;
  min-height: 56px;
  padding: 6px 8px;
  resize: vertical;
  width: 100%;
}
.copy-emails-hint {
  color: var(--muted);
  font-size: 11px;
  margin: 4px 0 0;
}
.event-detail summary {
  color: var(--brand);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 0;
  user-select: none;
}
.event-detail summary::-webkit-details-marker { color: var(--brand); }
.event-people { margin-top: 10px; }
.people-section-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 10px 0 6px;
  text-transform: uppercase;
}
.people-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
.person-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 1fr 1fr;
  padding: 10px 12px;
}
.person-row:last-child { border-bottom: 0; }
.person-name  { color: var(--ink); font-weight: 700; grid-column: 1; }
.person-phone { color: var(--muted); font-size: 13px; grid-column: 2; text-align: right; }
.person-email { color: var(--brand-dark); font-size: 13px; grid-column: 1; }
.person-date  { color: var(--muted); font-size: 12px; grid-column: 2; text-align: right; }
.person-comments {
  background: #fafafa;
  border-radius: 4px;
  color: var(--ink);
  font-size: 13px;
  font-style: italic;
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 4px 6px;
}
.dl-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  margin-left: 5px;
  padding: 2px 5px;
  text-decoration: none;
  vertical-align: middle;
}
.dl-btn:hover {
  background: var(--soft);
  border-color: var(--brand);
  color: var(--brand);
}
.count-badge {
  background: var(--brand);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
  padding: 2px 8px;
  vertical-align: middle;
}
.needs-marketing-panel .panel-heading {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.panel-sub {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.marketing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
}
.marketing-chip {
  background: #fff8e7;
  border: 1px solid #f0d896;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
}
.marketing-chip-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.marketing-chip-date {
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}
.past-panel > summary,
.event-signups-panel > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.past-panel > summary::-webkit-details-marker,
.event-signups-panel > summary::-webkit-details-marker { display: none; }
.past-summary-left {
  align-items: center;
  display: flex;
}
.past-toggle-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.past-panel > summary .past-toggle-hint::before { content: '▼ Expand'; }
.past-panel[open] > summary .past-toggle-hint::before { content: '▲ Collapse'; }
.event-signups-panel > summary .section-toggle-hint::before { content: '▲ Collapse'; }
.event-signups-panel:not([open]) > summary .section-toggle-hint::before { content: '▼ Expand'; }
.event-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.event-card-compact .event-title { font-size: 14px; }
.badge-past { background: #efefef; color: #777; }
@media (max-width: 820px) {
  .dashboard-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 18px;
  }
  .dashboard-header {
    align-items: flex-start;
  }
  .dashboard-header form button {
    width: 100%;
  }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: 17px 20px;
  }
  .metric-card:nth-child(2n) {
    border-right: 0;
  }
  .metric-card:nth-child(n+3) {
    border-bottom: 0;
  }
  .period-panel {
    padding: 16px;
  }
  .period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .sort-actions {
    width: 100%;
  }
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  h1 { font-size: 30px; }
  .table-wrap { overflow-x: visible; }
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
  }
  thead { display: none; }
  tbody {
    display: grid;
    gap: 10px;
    padding: 12px;
  }
  tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  th,
  td {
    border-bottom: 1px solid var(--line);
  }
  td {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
  }
  td:before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  td.numeric {
    text-align: left;
    white-space: normal;
  }
  .service-panel {
    background: var(--panel);
    border-color: var(--line);
  }
  .service-panel .panel-heading {
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
  }
  .service-panel .panel-heading h2 {
    color: var(--ink);
    font-size: 22px;
  }
  .service-panel .table-wrap {
    background: var(--panel);
  }
  .service-table tbody {
    background: var(--panel);
    gap: 10px;
    padding: 8px 10px 14px;
  }
  .service-table tr {
    background: #fbfdfc;
    border-color: var(--line);
    border-radius: 10px;
  }
  .service-table tr > td:not(.service-card-mobile) {
    display: none;
  }
  .service-table .service-card-mobile {
    background: #fbfdfc;
    border: 0;
    color: var(--ink);
    display: block;
    padding: 12px;
  }
  .service-table .service-card-mobile:before {
    content: none;
  }
  .service-card-head {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .service-card-head b {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .service-card-head strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .service-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
  }
  .service-pill {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
  }
  .service-category {
    background: var(--accent-soft);
    border: 1px solid #cfe4d7;
    color: var(--brand-dark);
  }
  .service-pill.status-open {
    background: #dffbf0;
    color: #0b684d;
  }
  .service-pill.status-full {
    background: #fff0e8;
    color: #a33d24;
  }
  .service-card-bottom {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 14px;
  }
  .service-card-progress {
    background: #e0e8e4;
    border-radius: 999px;
    display: block;
    height: 5px;
    overflow: hidden;
  }
  .service-card-progress span {
    background: #29bd88;
    border-radius: inherit;
    display: block;
    height: 100%;
  }
  .service-table tr.status-full .service-card-progress span {
    background: #ff6338;
  }
  .service-card-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }
  tr td:last-child { border-bottom: 0; }
  /* Event signups tab */
  .tab-nav { gap: 8px; }
  .tab-link { flex: 1; text-align: center; }
  .event-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .event-grid-compact { grid-template-columns: 1fr; }
  .copy-emails-details { width: 100%; }
  .copy-emails-summary { display: block; text-align: center; width: 100%; }
  .dl-btn { font-size: 14px; padding: 5px 9px; }
  .person-row { grid-template-columns: 1fr; }
  .person-phone,
  .person-date { text-align: left; }
  .marketing-chip { flex: 1 1 calc(50% - 5px); }
  /* Lesson rosters tab */
  .lesson-filter-form {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .filter-actions button,
  .export-button {
    width: 100%;
  }
  .roster-heading {
    align-items: flex-start;
  }
  .level-summary {
    justify-content: flex-start;
  }
  .roster-table-wrap {
    overflow-x: visible;
  }
  .roster-table tbody {
    gap: 10px;
    padding: 12px;
  }
  .roster-table tr {
    background: #fbfdfc;
    border-color: var(--line);
    border-radius: 10px;
  }
  .roster-table td:nth-child(6) {
    max-width: none;
  }
  /* Cancellations tab */
  .cancellation-filter-form {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .timeslot-checklist {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .timeslot-choice {
    border-left-width: 3px;
    gap: 7px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 42px;
    padding: 6px 8px;
  }
  .timeslot-choice input {
    height: 16px;
    width: 16px;
  }
  .timeslot-choice-body {
    align-items: center;
    display: flex;
    gap: 6px;
    overflow: hidden;
  }
  .timeslot-choice-top {
    display: contents;
  }
  .timeslot-choice-top strong {
    flex: 0 0 auto;
    font-size: 13px;
    white-space: nowrap;
  }
  .timeslot-choice-title {
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .timeslot-choice-count {
    font-size: 11px;
    min-width: 24px;
    padding: 3px 6px;
  }
  .sport-chip {
    font-size: 9px;
    padding: 3px 6px;
  }
  .cancellation-heading {
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
  }
  .cancellation-heading h2 {
    font-size: 20px;
    line-height: 1.15;
  }
  .cancellation-heading .panel-sub {
    display: -webkit-box;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .session-badge {
    font-size: 12px;
    padding: 5px 8px;
  }
  .selected-timeslot-strip,
  .timeslot-summary-grid {
    display: none;
  }
  .cancellation-compose-grid {
    grid-template-columns: 1fr;
  }
  .copy-panel {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }
  .cancellation-roster li {
    grid-template-columns: 1fr;
  }
  .compact-copy-panel {
    padding: 10px 14px;
  }
  .test-email-row {
    grid-template-columns: 1fr;
  }
  .secondary-button {
    width: 100%;
  }
  .timeslot-bulk-actions .secondary-button {
    flex: 1 1 calc(50% - 4px);
    width: auto;
  }
  .cancel-timeslot-form .danger-button {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .dashboard-summary {
    border-radius: 18px;
  }
  .dashboard-header {
    padding: 18px 20px;
  }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card {
    min-height: 107px;
    padding: 16px;
  }
  .metric-card strong { font-size: 28px; }
  .metric-card span {
    font-size: 12px;
    letter-spacing: .05em;
  }
  .category-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .category-card {
    padding: 14px;
  }
  .category-card strong {
    font-size: 28px;
  }
  .period-panel h2 { font-size: 16px; }
  .period-card {
    min-height: 96px;
    padding: 12px 14px;
  }
  .period-card strong { font-size: 26px; }
  th, td { padding: 9px 10px; }
  .service-panel .panel-heading h2 { font-size: 20px; }
  .service-table tbody { padding: 8px; }
  .service-card-head b,
  .service-card-head strong { font-size: 15px; }
  /* Event signups tab */
  .tab-link { font-size: 13px; padding: 9px 12px; }
  .event-grid { padding: 10px; }
  .marketing-chip { flex: 1 1 100%; }
  .event-card { padding: 14px; }
  .filter-actions {
    grid-template-columns: 1fr;
  }
  .timeslot-summary-grid {
    grid-template-columns: 1fr;
  }
  .copy-panel,
  .cancel-timeslot-form {
    padding: 14px;
  }
  .summary-tile {
    min-height: 74px;
  }
  .message-textarea {
    min-height: 180px;
  }
}