/*
 * moBooking front-end grid.
 * Colours render from the live --mclb-* custom properties emitted by
 * MCLB_Plugin::output_css_tokens(); the hex fallbacks here are CCWA's sampled
 * palette (defaults only, never the source of truth). Fonts follow --mclb-font
 * (inherit by default, the plugin stack when the admin picks "override").
 *
 * The widget paints its OWN surface + text colours (the --mclb-surface / -ink /
 * -ink-muted / -line tokens below) rather than inheriting them, so it stays
 * legible in any container — a plain page or, e.g., the theme's dark booking
 * drawer. Surface is a flush background fill only (no border/radius/extra
 * padding), so on a light page it's visually identical to sitting on the page.
 */

.mclb-grid-wrap {
  font-family: var(--mclb-font, inherit);

  /* Grid-scoped surface/ink tokens (same --mclb-* system as the palette;
     can graduate to settings-emitted tokens later with no CSS change). */
  --mclb-surface: #ffffff;
  --mclb-ink: #1a1a1a;
  --mclb-ink-muted: rgba(0, 0, 0, 0.6);
  --mclb-line: rgba(0, 0, 0, 0.14);

  --mclb-time-col: 76px;
  --mclb-cell-h: 40px;
  --mclb-col-min: 90px;

  max-width: 100%;
  margin: 0 0 1.5rem;
  /* Inner padding so the card's contents aren't jammed to its edge — gives it
     breathing room inside a container like the drawer. Invisible on a white
     page (white padding on white), since the surface is #fff. */
  padding: 16px;
  background: var(--mclb-surface);
  color: var(--mclb-ink);
}

/* Toolbar / date nav */
.mclb-grid__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mclb-nav {
  border: 1px solid var(--mclb-line);
  background: var(--mclb-surface);
  color: var(--mclb-ink);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mclb-nav[disabled] { opacity: 0.4; cursor: default; }
.mclb-grid__date {
  padding: 7px 10px;
  border: 1px solid var(--mclb-line);
  background: var(--mclb-surface);
  color: var(--mclb-ink);
  border-radius: 6px;
  font: inherit;
}

/* Grid shell — fits the container; horizontal scroll only when the per-column
   floors genuinely can't fit (many lanes), with a sticky time gutter. */
.mclb-grid { overflow-x: auto; }
.mclb-grid__inner { min-width: 100%; }

.mclb-grid__head,
.mclb-grid__row {
  display: grid;
  grid-template-columns: var(--mclb-time-col) repeat(var(--mclb-cols), minmax(var(--mclb-col-min), 1fr));
}

.mclb-grid__corner,
.mclb-grid__time {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--mclb-surface);
}

.mclb-grid__lane-head {
  padding: 8px 6px;
  font-weight: 600;
  text-align: center;
  color: var(--mclb-ink);
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 2px solid var(--mclb-line);
}
.mclb-grid__corner { border-bottom: 2px solid var(--mclb-line); }

.mclb-grid__time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 0.8rem;
  color: var(--mclb-ink-muted);
  height: var(--mclb-cell-h);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Cells */
.mclb-cell {
  height: var(--mclb-cell-h);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top-width: 0;
  border-left-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  text-align: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.mclb-cell--available {
  background: var(--mclb-available, #ffffff);
  cursor: pointer;
}
.mclb-cell--available:hover { box-shadow: inset 0 0 0 2px var(--mclb-accent, #f4c430); }
.mclb-cell--booked {
  background: var(--mclb-booked, #c94a55);
  color: #fff;
  cursor: not-allowed;
}
.mclb-cell--closed {
  background: var(--mclb-closed, #85c9c2);
  color: rgba(0, 0, 0, 0.65);
  cursor: not-allowed;
}
.mclb-cell--na {
  background: repeating-linear-gradient(45deg, #f3f3f3, #f3f3f3 6px, #ececec 6px, #ececec 12px);
  cursor: default;
}

/* Selection states (client-side only) */
.mclb-cell--selecting { background: var(--mclb-unfinished, #fce588); }
.mclb-cell--selected {
  background: var(--mclb-accent, #f4c430);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.mclb-cell--available:focus-visible { outline: 2px solid var(--mclb-accent, #f4c430); outline-offset: -2px; }

.mclb-grid__empty { padding: 1rem; color: var(--mclb-ink-muted); }

/* Demo / read-only mode banner (shown when the licence gate is closed). */
.mclb-demo-notice {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--mclb-line);
  border-left: 4px solid var(--mclb-booked, #c94a55);
  border-radius: 6px;
  background: var(--mclb-surface);
  color: var(--mclb-ink);
  font-size: 0.9em;
}

/* Legend */
.mclb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0;
  font-size: 0.82rem;
  color: var(--mclb-ink);
}
.mclb-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.mclb-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--mclb-line); }
.mclb-swatch--available { background: var(--mclb-available, #ffffff); }
.mclb-swatch--booked { background: var(--mclb-booked, #c94a55); }
.mclb-swatch--closed { background: var(--mclb-closed, #85c9c2); }

/* Selection summary */
.mclb-selection {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--mclb-line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  color: var(--mclb-ink);
}
.mclb-selection__title { margin: 0 0 10px; font-size: 1rem; }
.mclb-selection__list { list-style: none; margin: 0 0 10px; padding: 0; }
.mclb-selection__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
}
.mclb-selection__remove {
  border: 0;
  background: transparent;
  color: var(--mclb-booked, #c94a55);
  cursor: pointer;
  font-size: 0.85rem;
}
.mclb-selection__total { font-weight: 700; margin: 8px 0; }
.mclb-coach { display: block; margin: 8px 0; }
.mclb-coach__note { width: 100%; margin: 6px 0; font: inherit; }
.mclb-add-to-cart {
  background: var(--mclb-accent, #f4c430);
  color: #1a1a1a;
  border: 0;
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}
.mclb-add-to-cart[disabled] { opacity: 0.5; cursor: default; }
.mclb-selection__msg { margin: 8px 0 0; font-size: 0.85rem; min-height: 1em; }
.mclb-selection__msg--ok { color: #1a7f37; }
.mclb-selection__msg--err { color: var(--mclb-booked, #c94a55); }

/* Narrow viewports: shrink the column floor + gutter and tighten label type so
   realistic lane counts (CCWA: 5 nets / 4 machines) fit without horizontal
   scroll; genuinely many lanes (e.g. a combined 9) still scroll by design. */
@media (max-width: 600px) {
  .mclb-grid-wrap {
    --mclb-col-min: 48px;
    --mclb-time-col: 48px;
    padding: 12px;
  }
  .mclb-grid__lane-head { font-size: 0.72rem; padding: 6px 2px; }
  .mclb-grid__time { font-size: 0.66rem; padding-right: 4px; }
  .mclb-cell { font-size: 0.62rem; }
}