/* ── swimtest.css — Roster > Swim tests inner tab ────────────────────────── */

.swt-card {
  background: var(--surface); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px;
}
.swt-card-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.swt-card-date { font-size: 14px; font-weight: 600; color: var(--text); }
.swt-card-loc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* Slot grid (upcoming card) */
.swt-slots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.swt-slot {
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); padding: 8px 10px;
}
.swt-slot-time { font-size: 12px; font-weight: 600; color: var(--text); }
.swt-slot-cap { font-size: 11px; color: var(--text-tertiary); margin: 1px 0 4px; }
.swt-slot-names { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* Reminder email card */
.swt-reminder-card { background: var(--bg); }
.swt-reminder-preview {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  white-space: pre-wrap; background: var(--surface);
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; max-height: 160px; overflow-y: auto;
}

/* Single club-wide "send automatic reminders" toggle under the shared
   wording — replaced the per-event toggle list on 5 September 2026. */
.swt-reminder-autorow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 0.5px solid var(--border);
}
.swt-reminder-autorow-text { min-width: 0; }
.swt-reminder-autorow-title { font-size: 13px; color: var(--text); }
.swt-reminder-autorow-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* Past-test signup list */
.swt-signup-list { display: flex; flex-direction: column; }
.swt-signup-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--border);
  font-size: 13px;
}
.swt-signup-row:last-child { border-bottom: none; }
.swt-signup-name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swt-result-btns { display: flex; gap: 6px; flex-shrink: 0; }
.swt-result-btn {
  font-size: 11px; font-weight: 600; border-radius: 4px; padding: 3px 10px;
  cursor: pointer; font-family: inherit; border: 0.5px solid var(--border-strong);
  background: none; white-space: nowrap;
}
.swt-pass-btn { color: #15803d; border-color: #86efac; }
.swt-pass-btn:hover { background: #dcfce7; }
.swt-fail-btn { color: #b91c1c; border-color: #fca5a5; }
.swt-fail-btn:hover { background: #fee2e2; }
[data-theme="dark"] .swt-pass-btn { color: #86efac; border-color: rgba(22,163,74,0.5); }
[data-theme="dark"] .swt-pass-btn:hover { background: rgba(22,163,74,0.18); }
[data-theme="dark"] .swt-fail-btn { color: #fca5a5; border-color: rgba(220,38,38,0.5); }
[data-theme="dark"] .swt-fail-btn:hover { background: rgba(220,38,38,0.2); }

@media (max-width: 640px) {
  .swt-slots-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Slot row editor (New/Edit swim test panel's "Slot configuration" section) —
   one row per swim_test_slots row: a time field (two selects — hour, and
   minute limited to :00/:15/:30/:45), a capacity field with an up/down
   stepper, and a remove control. Laid out on a grid so the three keep their
   alignment at any width instead of a flex row wrapping unpredictably. */
.swt-slotrow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-areas: "time cap remove";
  align-items: end; column-gap: 10px; row-gap: 8px;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.swt-slotrow:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.swt-slot-area-time { grid-area: time; }
.swt-slot-area-cap { grid-area: cap; }
.swt-slot-area-remove { grid-area: remove; }
.swt-slotrow-field { min-width: 0; }
.swt-time-selects { display: flex; align-items: center; gap: 5px; }
.swt-time-selects .rp-select {
  flex: 1; min-width: 0; padding-left: 8px; padding-right: 4px; text-align: center;
}
.swt-time-colon { flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
.swt-stepper-input { display: flex; align-items: stretch; gap: 4px; }
.swt-stepper-input .rp-input { flex: 1; min-width: 0; }
.swt-stepper-btns { display: flex; flex-direction: column; flex-shrink: 0; }
.swt-stepper-btn {
  width: 22px; height: 15px; border: 0.5px solid var(--border-strong);
  background: var(--surface); color: var(--text-secondary); cursor: pointer;
  font-size: 8px; line-height: 1; padding: 0; font-family: inherit;
}
.swt-stepper-btn:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: none; }
.swt-stepper-btn:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.swt-stepper-btn:hover:not(:disabled) { background: var(--bg); }
.swt-stepper-btn:disabled { opacity: 0.4; cursor: default; }
.swt-slotrow-remove {
  flex-shrink: 0; width: 28px; height: 28px; margin-bottom: 1px; border-radius: 50%;
  border: 0.5px solid var(--border-strong); background: var(--surface);
  color: var(--text-tertiary); cursor: pointer; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.swt-slotrow-remove:hover:not(:disabled) { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.swt-slotrow-remove:disabled { opacity: 0.35; cursor: default; }
[data-theme="dark"] .swt-slotrow-remove:hover:not(:disabled) { background: rgba(220,38,38,0.2); color: #fca5a5; }

/* Very narrow (small phones): stack time above capacity with the remove
   control spanning both on the right, so neither field gets crushed. */
@media (max-width: 400px) {
  .swt-slotrow {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time remove"
      "cap  remove";
  }
  .swt-slot-area-remove { align-self: center; }
}

/* Preview email modal */
.swt-preview-subject {
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--bg); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.swt-preview-body {
  font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap;
  background: var(--bg); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.swt-preview-placeholder { color: var(--nav-navy); font-weight: 600; }
[data-theme="dark"] .swt-preview-placeholder { color: #93c5fd; }

/* ── Member-facing booking banner (Sessions page) ────────────────────────────
   js/swimtest.js's renderSwimTestMemberBanner, rendered into app/index.html's
   #swt-member-banner. Same amber "needs action" language already used for
   other attention banners on this page (.river-banner.amber, .sbadge-nov,
   .sv-hidepast-badge, .pending-dup-warning all share this exact palette) —
   deliberately not the blue .avail-banner tokens, which are a squad colour
   (--m1) rather than a real warning token. */
.swtb-banner {
  background: #fef9c3; border: 0.5px solid #fde047; border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 20px;
}
[data-theme="dark"] .swtb-banner { background: rgba(202,138,4,0.14); border-color: rgba(202,138,4,0.4); }

.swtb-banner-hdr { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.swtb-banner-icon { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.swtb-banner-title { font-size: 14px; font-weight: 700; color: #713f12; }
.swtb-banner-sub { font-size: 12px; color: #8a5a10; margin-top: 2px; line-height: 1.4; }
[data-theme="dark"] .swtb-banner-title { color: #fde047; }
[data-theme="dark"] .swtb-banner-sub { color: #fef08a; }

/* "More info" disclosure — one per banner, above the event cards, collapsed
   by default (js/swimtest.js's swtbToggleMoreInfo). */
.swtb-moreinfo { margin-bottom: 12px; }
.swtb-moreinfo-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #713f12;
}
[data-theme="dark"] .swtb-moreinfo-toggle { color: #fde047; }
.swtb-moreinfo-chev { font-size: 9px; line-height: 1; }
.swtb-moreinfo-body { margin-top: 8px; }

.swtb-event {
  background: var(--surface); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.swtb-event + .swtb-event { margin-top: 10px; }
.swtb-event-hdr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.swtb-event-date { font-size: 13px; font-weight: 600; color: var(--text); }
.swtb-event-loc { font-size: 12px; color: var(--text-secondary); }

/* Slot grid — same auto-fill technique (and 640px break) as .swt-slots-grid
   above rather than a new breakpoint scheme; forced to a single column below
   640px (rather than just narrowing minmax, as the captain view does) since
   each card here carries names + action buttons and reads better full-width
   on a phone. */
.swtb-slots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin-top: 10px;
}
@media (max-width: 640px) {
  .swtb-slots-grid { grid-template-columns: 1fr; }
}

.swtb-slot {
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
/* Viewer's own booked slot — same navy "this one's mine" language as
   .session-card-set-crew elsewhere on the Sessions page. */
.swtb-slot-mine { border: 1.5px solid var(--nav-navy); background: var(--navy-light); }
.swtb-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swtb-slot-time { font-size: 13px; font-weight: 600; color: var(--text); }
.swtb-slot-cap { font-size: 11px; color: var(--text-tertiary); }
.swtb-slot-cap.full { color: #991b1b; font-weight: 600; }
[data-theme="dark"] .swtb-slot-cap.full { color: #fca5a5; }
/* Everyone signed up to the slot, as a numbered list (js/swimtest.js's
   _swtbRenderSlot) — the viewer, if booked here, appears as "You" in this
   same list rather than a separate label. */
.swtb-slot-names {
  font-size: 12px; color: var(--text-secondary); line-height: 1.4;
  list-style: decimal; margin: 2px 0 0; padding-left: 20px;
}
.swtb-slot-names li { margin: 1px 0; }
/* Shown in place of Book when the viewer already holds a booking on another
   open test — same muted tone as an empty-slot hint, not a red error. */
.swtb-slot-elsewhere { font-size: 11px; color: var(--text-tertiary); line-height: 1.4; font-style: italic; }
/* Cancel + Add to calendar stay on ONE row (nowrap) even at the narrowest
   supported width — below 360px the calendar button collapses to its icon
   (.swtb-ics-label hidden) rather than the row wrapping. */
.swtb-slot-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; margin-top: 4px; }
/* .btn-signup (Book) is reused verbatim from css/sessions.css — same visual
   language as the sign-up cards this banner sits above. */
.swtb-cancel-btn {
  font-size: 11px; font-weight: 500; border-radius: 5px; padding: 3px 10px;
  cursor: pointer; font-family: inherit; border: 0.5px solid var(--border-strong);
  background: none; color: #991b1b; border-color: #fca5a5; white-space: nowrap;
  flex-shrink: 0;
}
.swtb-cancel-btn:hover { background: #fee2e2; }
[data-theme="dark"] .swtb-cancel-btn { color: #fca5a5; border-color: rgba(220,38,38,0.5); }
[data-theme="dark"] .swtb-cancel-btn:hover { background: rgba(220,38,38,0.2); }
.swtb-ics-btn {
  font-size: 11px; font-weight: 500; border-radius: 5px; padding: 3px 10px;
  cursor: pointer; font-family: inherit; border: 0.5px solid var(--border-strong);
  background: var(--surface); color: var(--text-secondary);
  white-space: nowrap; transition: all 0.12s;
}
.swtb-ics-btn:hover { background: var(--navy-light); color: var(--navy-dark); border-color: var(--navy-mid); }
@media (max-width: 360px) {
  .swtb-ics-label { display: none; }
}
.swtb-msg { font-size: 12px; color: #991b1b; margin-top: 8px; }
[data-theme="dark"] .swtb-msg { color: #fca5a5; }

/* Boot-time loading placeholder (js/swimtest.js's _swtbSkeletonHtml) — shown
   only for the genuinely-first-load case, before the boot-time prefetch
   (swtPrefetchMemberBannerData(), kicked off from js/init.js's bootApp()) has
   resolved, so it isn't yet known whether a real "needs action" banner will
   even be shown. Neutral grey rather than the amber .swtb-banner palette
   above, deliberately — reserves the space without implying a warning that
   may not exist. */
.swtb-skeleton { background: var(--surface); border-color: var(--border); }
.swtb-skel-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--border-strong); animation: swtb-skel-pulse 1.4s ease-in-out infinite;
}
.swtb-skel-bar {
  background: var(--border-strong); border-radius: 4px;
  animation: swtb-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes swtb-skel-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}