/**
 * Create Wraparound – standalone modular CSS
 * Scoped under .page-create-wraparound for the Create/Edit School Club page.
 * Day picker + sessions-per-day UX. Use with base styles (bootstrap, styles, isams-theme).
 */

/* ========== Page wrapper ========== */
.page-create-wraparound {
  --wr-day-inactive: #f0f0f0;
  --wr-day-active: #1a3a5f;
  --wr-day-active-bg: #e8eef5;
  --wr-session-card: #f8f9fa;
  --wr-border: #dee2e6;
  --wr-error: #dc3545;
  --wr-success: #198754;
  font-family: "Overpass", sans-serif;
}

/* ========== Section: Choose days ========== */
.page-create-wraparound .wr-section {
  margin-bottom: 1.75rem;
}

.page-create-wraparound .wr-section-title {
  font-weight: 700;
  color: #1a3a5f;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.page-create-wraparound .wr-days-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.page-create-wraparound .wr-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--wr-border);
  border-radius: 0.375rem;
  background: var(--wr-day-inactive);
  color: #495057;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.page-create-wraparound .wr-day-pill:hover {
  border-color: #1a3a5f;
  background: #e8eef5;
  color: #1a3a5f;
}

.page-create-wraparound .wr-day-pill.wr-day-selected {
  border-color: var(--wr-day-active);
  background: var(--wr-day-active-bg);
  color: var(--wr-day-active);
}

/* Day has 1+ booking: cannot untick or edit sessions */
.page-create-wraparound .wr-day-pill.wr-day-locked,
.page-create-wraparound .wr-day-pill[data-has-bookings="true"] {
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: auto;
}

.page-create-wraparound .wr-day-block.wr-day-locked,
.page-create-wraparound .wr-day-block[data-has-bookings="true"] {
  background: #e9ecef;
  border-color: #adb5bd;
}

.page-create-wraparound .wr-day-locked-notice {
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0 0 0.75rem 0;
  padding: 0.35rem 0;
}

.page-create-wraparound .wr-day-block.wr-day-locked .wr-session-start,
.page-create-wraparound .wr-day-block.wr-day-locked .wr-session-end,
.page-create-wraparound .wr-day-block.wr-day-locked .wr-session-cost,
.page-create-wraparound .wr-day-block[data-has-bookings="true"] .wr-session-start,
.page-create-wraparound .wr-day-block[data-has-bookings="true"] .wr-session-end,
.page-create-wraparound .wr-day-block[data-has-bookings="true"] .wr-session-cost {
  background: #e9ecef !important;
  cursor: not-allowed;
  opacity: 0.9;
}

.page-create-wraparound .wr-hidden-locked {
  display: none !important;
}

.page-create-wraparound .wr-days-hint {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* ========== Sessions per day (only for selected days) ========== */
.page-create-wraparound .wr-sessions-container {
  display: none;
  margin-top: 1rem;
}

.page-create-wraparound .wr-sessions-container.wr-has-selected-days {
  display: block;
}

.page-create-wraparound .wr-day-block {
  display: none;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--wr-session-card);
  border: 1px solid var(--wr-border);
  border-radius: 0.375rem;
}

.page-create-wraparound .wr-day-block.wr-day-block-visible {
  display: block;
}

.page-create-wraparound .wr-day-block-title {
  font-weight: 700;
  color: #1a3a5f;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wr-border);
}

.page-create-wraparound .wr-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-create-wraparound .wr-session-list > li {
  display: grid;
}

.page-create-wraparound .wr-session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(7rem, 140px) auto;
  gap: 0.75rem 1rem;
  align-items: end;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--wr-border);
  border-radius: 0.25rem;
}

.page-create-wraparound .wr-session-row > div {
  min-width: 0;
}

.page-create-wraparound .wr-session-remove-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .page-create-wraparound .wr-session-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .page-create-wraparound .wr-session-row .wr-session-cost-wrap {
    grid-column: 1;
    grid-row: 2;
  }
  .page-create-wraparound .wr-session-row .wr-session-remove-wrap {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }
}

.page-create-wraparound .wr-session-row:last-child {
  margin-bottom: 0;
}

.page-create-wraparound .wr-session-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.25rem;
}

.page-create-wraparound .wr-session-start,
.page-create-wraparound .wr-session-end,
.page-create-wraparound .wr-session-cost {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--wr-border);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  background: #fff;
  box-sizing: border-box;
}

/* Time inputs: Safari/iPhone native time picker; 16px prevents iOS zoom on focus */
.page-create-wraparound .wr-session-start,
.page-create-wraparound .wr-session-end {
  font-size: 16px;
  min-height: 2.5rem;
}

/* Date inputs: Safari/iPhone native date picker; 16px prevents iOS zoom on focus */
.page-create-wraparound .wr-club-date {
  font-size: 16px;
  min-height: 2.5rem;
  box-sizing: border-box;
}

/* Full-field clickable date/time: wrapper receives all clicks and opens picker */
.page-create-wraparound .wr-picker-wrap {
  position: relative;
  cursor: pointer;
  min-height: 2.5rem;
}

.page-create-wraparound .wr-picker-wrap input {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  cursor: pointer;
  pointer-events: none; /* whole wrapper opens picker on click */
}

.page-create-wraparound .wr-session-cost-wrap {
  min-width: 0;
}

.page-create-wraparound .wr-session-cost-hint {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 0.15rem;
}

.page-create-wraparound .wr-session-remove {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  color: #6c757d;
  background: transparent;
  border: 1px solid var(--wr-border);
  border-radius: 0.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.page-create-wraparound .wr-session-remove:hover {
  background: #f8d7da;
  color: var(--wr-error);
  border-color: #f5c2c7;
}

.page-create-wraparound .wr-add-session {
  margin-top: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #395ea3;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.page-create-wraparound .wr-add-session:hover {
  color: #2d4a7a;
  text-decoration: underline;
}

/* ========== Validation ========== */
.page-create-wraparound .wr-session-row.wr-error,
.page-create-wraparound .wr-day-block.wr-day-block-error {
  border-color: var(--wr-error);
  background: #fff5f5;
}

.page-create-wraparound .wr-session-start.wr-input-error,
.page-create-wraparound .wr-session-end.wr-input-error {
  border-color: var(--wr-error);
}

.page-create-wraparound .wr-form-error {
  font-size: 0.85rem;
  color: var(--wr-error);
  margin-top: 0.5rem;
}

.page-create-wraparound .wr-form-success {
  font-size: 0.85rem;
  color: var(--wr-success);
  margin-top: 0.5rem;
}