/*
  Be Relentless Fitness Center — mobile-only stylesheet.
  Loaded by every page via <link rel="stylesheet" href="/css/mobile.css"
  media="(max-width: 640px)"> right after style.css, so the browser only
  downloads and applies it on small screens — everything else stays in the
  main, mobile-first style.css (which already defaults to single-column
  layouts and only adds desktop enhancements via min-width queries). This
  file is just for phone-specific refinements that don't fit that pattern:
  tighter spacing so pages don't feel like an endless scroll on a small
  screen, plus full-width touch targets where a hover-sized button is too
  small to tap comfortably.
*/

section {
  padding: 3rem 0;
}

/* .admin-section is a <section> too, but it already carries its own
   margin-top: 3rem (style.css) — stacking the generic rule above on top
   left 6rem of dead space between every dashboard section on a phone.
   Tighter spacing here keeps the dashboard scannable instead of sparse. */
.admin-section {
  padding: 0;
  margin-top: 2rem;
}

.admin-topbar + .admin-section {
  margin-top: 0;
}

/* margin-left: auto (style.css) pins this next to the title on desktop;
   on a phone it just floats oddly once the topbar wraps — let it sit as
   a normal full-width line under the title instead. */
.admin-role-note {
  margin-left: 0;
  margin-top: 0.5rem;
  width: 100%;
}

/* Overview stat cards on a phone: two per row reads better than a tall
   single column of thin cards for a quick-glance number grid, and the
   sparkline is decorative — dropping it here keeps each card short so
   more of them fit on screen at once, closer to a banking-app summary
   view than a scrolling wall of cards. */
.admin-month-grid,
.admin-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.stat-card {
  padding: 0.85rem 0.9rem;
}

.stat-value {
  font-size: 1.4rem;
}

.admin-month-grid .stat-value {
  font-size: 1.6rem;
}

.stat-sparkline {
  display: none;
}

/* Quick action buttons (admin-overview.html / admin-today.html) — .btn's
   desktop-sized padding (0.95rem 2rem, style.css) makes every button
   nearly as wide as the screen on a phone, so flex-wrap stacked them one
   per row instead of reading as a compact 2x2 grid. Same 2-per-row grid as
   the stat cards above; padding/letter-spacing trimmed on the buttons
   themselves so two fit per row without their label wrapping mid-word. */
.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.admin-quick-actions .btn {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

/* admin-today.html has three actions, not four — without this the odd one
   out sits alone in the second row at half width instead of centered. */
.admin-quick-actions .btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.hero-inner {
  padding: 4rem 1.25rem;
  min-height: 60svh;
}

.hero-tag {
  font-size: 1.05rem;
}

/* Full-width, easier to tap than the inline layout used on wider screens. */
.session-action {
  width: 100%;
}

.trainer-card.with-photo {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.admin-search-input {
  min-width: 0;
  width: 100%;
}

/* "Add a row" forms (Weekly/Extra hours on admin-personal-training.html,
   Assign a membership on admin-members.html) — on desktop these flex-wrap
   two-or-so fields per row (see .admin-inline-form-row in style.css), but
   on a phone that still means a Trainer <select>, a Day <select> and an
   hour:minute pair all squeezed to ~half-width. One full-width field per
   row is slower to scan but much easier to tap and read here. */
.admin-inline-form-row .field {
  flex-basis: 100%;
}

.admin-inline-form-row > button,
.admin-product-form-actions {
  width: 100%;
}

.admin-product-form-actions .btn {
  flex: 1;
}

.session-action .btn {
  width: 100%;
}

/* On a phone js/main.js renders a swipeable strip here instead of the
   3D wheel (see renderMobileGallery / initGymGallery) — reset the fixed
   height + clipping style.css gives #gym-gallery for the desktop wheel
   so the strip and its photos can size themselves naturally. */
#gym-gallery {
  height: auto;
  overflow: visible;
}

/* Each photo takes most of the screen with a sliver of the next one
   peeking in, signalling there's more to swipe — a standard native
   scroll-snap strip, no custom drag handling needed. */
.gallery-mobile-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.gallery-mobile-track::-webkit-scrollbar {
  display: none;
}

.gallery-mobile-item {
  flex: 0 0 82%;
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.gallery-mobile-item img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* Smaller, edge-anchored controls so they fit around a photo that's
   most of the screen width on a phone, instead of the desktop sizing
   pushing them out past the image (or over its middle). They still sit
   partly on top of the photo here — see the translucent background on
   .carousel-lightbox-nav in style.css. */
.carousel-lightbox-img {
  max-width: 92vw;
}

.carousel-lightbox-nav {
  width: 38px;
  height: 38px;
  font-size: 1.5rem;
}

.carousel-lightbox-prev {
  left: 0.5rem;
}

.carousel-lightbox-next {
  right: 0.5rem;
}

.carousel-lightbox-close {
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
}

/* Every card grid site-wide (feature cards, programs, plans, products)
   reads as a 2-up grid on a phone instead of a long single-column list.
   This is a class added per grid in the HTML, not a blanket change to
   .grid-3 / .grid-4 (those are shared with other pages/contexts). */
.grid-mobile-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-mobile-2 .card h3 {
  font-size: 1rem;
}

.grid-mobile-2 .card p {
  font-size: 0.82rem;
}

.grid-mobile-2 .card-icon {
  width: 36px;
  height: 36px;
}

.grid-mobile-2 .card-icon svg {
  width: 16px;
  height: 16px;
}

/* Membership plan cards: price/name/perks are the widest content on the
   card, so they need to shrink to fit a half-width phone column. */
.grid-mobile-2 .plan {
  padding: 1rem;
}

.grid-mobile-2 .plan-name {
  font-size: 0.85rem;
}

.grid-mobile-2 .plan-price {
  font-size: 1.9rem;
}

.grid-mobile-2 .plan-perks li {
  font-size: 0.75rem;
  padding: 0.25rem 0;
}

.grid-mobile-2 .plan-badge {
  font-size: 0.5rem;
  padding: 0.2rem 0.45rem;
}

.grid-mobile-2 .plan .btn {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 0.65rem;
}

/* Plain feature cards (e.g. Why Relentless) — product-card has its own
   padding:0 + .product-body pattern below, so it's excluded here. */
.grid-mobile-2 .card:not(.product-card) {
  padding: 1rem;
}

/* Product cards: price + "Add to cart" side-by-side doesn't fit a half-width
   phone column, so stack them and shrink the inner padding/price size. */
.grid-mobile-2 .product-body {
  padding: 0.85rem;
}

.grid-mobile-2 .product-card .product-price {
  font-size: 1.15rem;
}

.grid-mobile-2 .product-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.grid-mobile-2 .product-actions {
  flex-direction: column;
}

.grid-mobile-2 .product-footer .btn {
  width: 100%;
  text-align: center;
}

/* The plan/store/card grids already stack to one column by default in
   style.css — this just tightens the gap between them on a phone. */
.grid {
  gap: 1rem;
}

/* Admin dashboard tables (Products, Members, Bookings, Orders, Weekly/Extra
   hours) — a horizontally-scrolling table is cramped and hard to read on a
   phone, so each row becomes its own card instead: thead is hidden, and
   every <td> that carries a data-label (set in the render*/loadX functions
   in js/main.js) shows that label above its value via ::before. Cells with
   no data-label (thumbnails, Edit/Delete/Cancel action buttons) just render
   as-is, reading as a plain action row at the bottom of the card. */
.table-scroll {
  overflow-x: visible;
}

.data-table {
  min-width: 0;
}

.data-table thead {
  display: none;
}

.data-table,
.data-table tbody,
.data-table tr {
  display: block;
  width: 100%;
}

.data-table tr {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.25rem 1rem;
}

.data-table tr:last-child {
  margin-bottom: 0;
}

.data-table td {
  display: block;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.data-table td:last-child {
  border-bottom: none;
}

.data-table td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.data-table td:has(img) {
  text-align: center;
  padding-top: 0.85rem;
}

.data-table .product-thumb {
  width: 72px;
  height: 72px;
}

.data-table select {
  width: 100%;
}

/* Members table (admin-members.html) — the generic .data-table pattern
   above (every cell shown, always) got too tall here: Name, Email,
   Membership, Role select, Trainer select and Edit all stacked full-width
   made each member six repetitive sections deep. Collapsed by default to
   just name + role badge + chevron (the Name cell's .member-row-toggle
   button — style.css resets it back to plain text on desktop); tapping
   reveals the rest. See the data-toggle-member-row wiring in loadMembers(),
   js/main.js. */
#members-table-body tr {
  padding: 0;
}

#members-table-body td[data-label="Name"] {
  padding: 0;
  border-bottom: none;
}

#members-table-body td[data-label="Name"]::before {
  content: none;
}

#members-table-body td:not([data-label="Name"]) {
  display: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

#members-table-body tr.is-expanded td:not([data-label="Name"]) {
  display: block;
}

#members-table-body tr.is-expanded td:last-child {
  padding-bottom: 0.85rem;
}

.member-row-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.member-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-row-role-badge {
  display: inline-flex;
  flex-shrink: 0;
}

.member-row-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}

#members-table-body tr.is-expanded .member-row-chevron {
  transform: rotate(180deg);
}

/* Bookings table (admin-personal-training.html's main Bookings card AND the
   calendar's day-detail panel — both rendered by the one renderBookingsTable()
   in js/main.js, hence the two tbody ids below) — same collapse-by-default
   treatment as Members: Class/Date/Trainer/Time/Status/actions were six more
   stacked sections per booking on top of the Member cell. Name+email stay
   visible (cheap, and they belong together); status badge + chevron ride
   along in the same row for an at-a-glance read without opening it. */
#bookings-table-body tr,
#bcal-day-bookings-body tr {
  padding: 0;
}

#bookings-table-body td[data-label="Member"],
#bcal-day-bookings-body td[data-label="Member"] {
  padding: 0;
  border-bottom: none;
}

#bookings-table-body td[data-label="Member"]::before,
#bcal-day-bookings-body td[data-label="Member"]::before {
  content: none;
}

#bookings-table-body td:not([data-label="Member"]),
#bcal-day-bookings-body td:not([data-label="Member"]) {
  display: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

#bookings-table-body tr.is-expanded td:not([data-label="Member"]),
#bcal-day-bookings-body tr.is-expanded td:not([data-label="Member"]) {
  display: block;
}

#bookings-table-body tr.is-expanded td:last-child,
#bcal-day-bookings-body tr.is-expanded td:last-child {
  padding-bottom: 0.85rem;
}

.booking-row-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.booking-row-identity {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.booking-row-name {
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-row-email {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-row-status-badge {
  display: inline-flex;
  flex-shrink: 0;
}

.booking-row-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}

#bookings-table-body tr.is-expanded .booking-row-chevron,
#bcal-day-bookings-body tr.is-expanded .booking-row-chevron {
  transform: rotate(180deg);
}

/* Homepage previews only (index.html) — the full memberships.html/store.html
   pages still show everything. A phone screen is tight, so the teaser stays
   a teaser here: 2 plans instead of 4, 2 products instead of 3. "See all
   plans" / "Visit the store" is right below either grid for the rest.
   Capped at 2 (not 3) specifically because grid-mobile-2 is a 2-column
   grid — a 3rd card would sit alone on its own half-empty row instead of
   pairing up like these two do. */
#home-plans-grid > *:nth-child(3),
#home-plans-grid > *:nth-child(4) {
  display: none;
}

#home-store-grid > *:nth-child(3) {
  display: none;
}