/* Gym Management and Fitness System — the few styles of its admin screens (the rest is the Kit's theme). */
.gym-day { align-items: center; }
.gym-day > .label { min-width: 6.5rem; }
.gym-time { width: 5.5rem; text-align: center; }
.gym-reason { width: 11rem; max-width: 100%; }
@media (max-width: 420px) {
  .gym-day > .label { min-width: 100%; }
  .gym-time { width: 4.75rem; }
}
/* Members (phase 2) */
.gym-filters .input { width: auto; flex: 1 1 10rem; }
.gym-photo { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2, #f1f5f9); }
.gym-photo-empty .icon { width: 40px; height: 40px; }
.gym-jump { gap: .75rem; font-size: .9rem; }
.gym-dups { border-left: 4px solid var(--warning, #d97706); }
.gym-notice { white-space: normal; font-size: .9rem; padding: .75rem; border-radius: 8px; background: var(--surface-2, #f1f5f9); }
.gym-sign canvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 10 / 3; border: 1px dashed var(--border, #cbd5e1); border-radius: 8px; touch-action: none; background: #fff; }
.gym-q { border: 0; padding: 0; margin: 0 0 .5rem; }
.gym-q legend { font-weight: 600; margin-bottom: .25rem; }
.gym-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.gym-timeline li { overflow-wrap: anywhere; }
.gym-terms-body { max-height: 16rem; overflow: auto; font-size: .9rem; }
.gym-private { border-left: 3px solid var(--danger, #dc2626); padding-left: .75rem; }
@media (max-width: 420px) {
  .gym-member-head .cluster { flex-wrap: wrap; }
  .gym-filters .input, .gym-filters .btn { flex: 1 1 100%; }
}
/* Plans (phase 3) */
.gym-tabs { gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.gym-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .35rem 1rem; margin: 0; }
.gym-dl dt { font-weight: 600; }
.gym-dl dd { margin: 0; overflow-wrap: anywhere; }
[data-gym-plan-form] fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
[data-gym-plan-form] legend { margin-bottom: .5rem; }
@media (max-width: 420px) {
  .gym-dl { grid-template-columns: 1fr; }
  .gym-dl dd { margin-bottom: .5rem; }
  .gym-tabs .btn { flex: 1 1 45%; }
}
/* Memberships (phase 5) */
[data-gym-sale-form] fieldset, [data-gym-change-form] fieldset, [data-gym-transfer-form] fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
[data-sale-addons] .cluster { gap: .5rem 1rem; flex-wrap: wrap; }
[data-gym-freezes] form { margin: .25rem 0; flex-wrap: nowrap; }
[data-gym-freezes] form .input { width: 9.5rem; }
[data-gym-calls] { list-style: none; padding: 0; margin: 0; }
[data-gym-calls] li, [data-gym-credit-rows] li { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .admin-form-actions.cluster .btn { flex: 1 1 100%; }
  [data-gym-freezes] form { flex-wrap: wrap; }
  [data-gym-freezes] form .input, [data-gym-freezes] form .btn { flex: 1 1 100%; width: auto; }
  [data-gym-renewals] td.cluster .btn { flex: 1 1 100%; }
}

/* Phase 7 — the door (Admin → Gym → Door), the kiosk page and the member's pass page. One column at 390 px. */
.gym-door-grid { display: grid; gap: var(--space-4, 1rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .gym-door-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.gym-door-member { display: flex; gap: var(--space-3, .75rem); align-items: flex-start; flex-wrap: wrap; }
.gym-door-photo { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md, 8px); flex: none; }
.gym-door-allow { border-inline-start: 6px solid var(--color-success, #15803d); }
.gym-door-deny { border-inline-start: 6px solid var(--color-danger, #b91c1c); }
.gym-kiosk main, .gym-pass main { max-width: 40rem; margin-inline: auto; padding: var(--space-4, 1rem); }
.gym-kiosk-answer { text-align: center; }
.gym-kiosk-answer img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin-inline: auto; }
.gym-kiosk-text { font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 700; }
.gym-kiosk-answer.gym-door-allow { background: color-mix(in srgb, var(--color-success, #15803d) 12%, transparent); }
.gym-kiosk-answer.gym-door-deny { background: color-mix(in srgb, var(--color-danger, #b91c1c) 12%, transparent); }
.gym-pass-box { width: min(80vw, 340px); aspect-ratio: 1; margin-inline: auto; background: #fff; }
.gym-pass-box svg { width: 100%; height: 100%; display: block; }
.gym-pass-qr progress { width: 100%; }
/* phase 9: the PT calendar (one column at 390 px, seven from 1100 px) */
.gym-pt-week { display: grid; gap: var(--space-3, .75rem); grid-template-columns: minmax(0, 1fr); margin-block: var(--space-4, 1rem); }
@media (min-width: 700px) { .gym-pt-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gym-pt-week { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.gym-pt-today { outline: 2px solid var(--color-primary, #2563eb); }
.gym-pt-session { border-inline-start: 4px solid var(--color-primary, #2563eb); padding: var(--space-2, .5rem); background: var(--color-surface-2, #f8fafc); border-radius: var(--radius-sm, 4px); }
.gym-pt-session[draggable="true"] { cursor: grab; }
.gym-pt-done { border-inline-start-color: var(--color-success, #15803d); }
.gym-pt-no_show, .gym-pt-late_cancel { border-inline-start-color: var(--color-danger, #b91c1c); }
.gym-pt-cancelled { opacity: .6; }
.gym-pt-session .input { max-width: 10rem; }
.gym-big { font-size: 1.75rem; font-weight: 700; }
/* phase 10: the class timetable */
a.gym-pt-session { display: block; color: inherit; text-decoration: none; }
a.gym-pt-session:hover, a.gym-pt-session:focus-visible { background: var(--color-surface-3, #eef2ff); }
.gym-class-cancelled { opacity: .6; text-decoration: line-through; }
.gym-dot { width: .7rem; height: .7rem; display: inline-block; vertical-align: middle; }
/* phase 11 — fitness: plan editors scroll sideways inside .table-wrap at 390 px; photo grid and compare */
.gym-fit-editor input.input { min-width: 4.5rem; }
.gym-fit-editor input.gym-fit-ex { min-width: 13rem; }
.gym-fit-photos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gym-fit-photos figure, .gym-fit-compare figure { margin: 0; }
.gym-fit-photos img, .gym-fit-compare img { width: 100%; height: auto; border-radius: var(--radius, 8px); display: block; }
.gym-fit-compare { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gym-fit-charts { display: grid; gap: var(--space-4, 1rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .gym-fit-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gym-fit-bar { height: .5rem; background: var(--surface-2, #e5e7eb); border-radius: 999px; overflow: hidden; }
.gym-fit-bar > span { display: block; height: 100%; background: var(--primary, #2563eb); }

/* phase 16b (R19.1): the member app — one column at 390 px, the tabs scroll sideways, the brand's accent on top */
.gym-app { --gym-app-accent: #059669; }
.gym-app-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3, .75rem); padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border-block-start: 4px solid var(--gym-app-accent); }
.gym-app-head .input { inline-size: auto; }
.gym-app-tabs { display: flex; gap: var(--space-2, .5rem); overflow-x: auto; padding-block: var(--space-2, .5rem); }
.gym-app-tabs .btn { flex: none; }
.gym-app-tabs .btn[aria-current="page"] { border-color: var(--gym-app-accent); box-shadow: inset 0 -3px 0 var(--gym-app-accent); }
.gym-app .card ul { padding-inline-start: 1.1rem; }
.gym-app .card li { overflow-wrap: anywhere; }
.gym-app .cluster .input { min-inline-size: 0; flex: 1 1 6rem; }

/* phase 17b (R23.2): the help link of every Admin → Gym screen and the in-app guide page */
.gym-help { margin: 0 0 .5rem; text-align: right; }
.gym-help .icon-sm { vertical-align: -2px; }
.gym-help-page h1 { font-size: 1.35rem; } .gym-help-page h2 { font-size: 1.1rem; margin-top: 1rem; }
.gym-help-page pre { overflow-x: auto; max-width: 100%; } .gym-help-page code { overflow-wrap: anywhere; }
.gym-help-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem 1.5rem; }
.gym-help-index ul { margin: 0; padding-left: 1.1rem; } .gym-help-index a[aria-current] { font-weight: 600; }