/* ============================================================
   AdminEventBookingsPage
   ============================================================ */

/* Booking bulk action buttons */
.bookingBulkEmailBtn,
.bookingBulkStatusBtn {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: #007aff;
  color: #ffffff;
  border: 1px solid #007aff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.bookingBulkEmailBtn.is-visible,
.bookingBulkStatusBtn.is-visible {
  display: inline-flex;
}
.bookingBulkEmailBtn:hover,
.bookingBulkStatusBtn:hover {
  background: #005ecb;
  border-color: #005ecb;
}

/* Sort button (booking list table header) */
.booking-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.booking-sort-button--center {
  justify-content: center;
  width: 100%;
}

/* CSV import modal */
.importCsvInfoBox {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  background: #f5f5f7;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  color: #6e6e73;
  font-size: 0.88rem;
  line-height: 1.6;
}
.importCsvForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.importCsvFileBox {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  background: #ffffff;
}
.importCsvFileInput {
  display: none;
}
.importCsvFileRow {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.importCsvSelectBtn {
  min-height: 40px;
  padding: 0 14px;
  background: #1d1d1f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.importCsvFileName {
  flex: 1;
  min-width: 0;
  color: #6e6e73;
  font-size: 0.9rem;
}
.importCsvFileHint {
  font-size: 0.82rem;
  color: #6e6e73;
}

/* Event header */
.bookingEventHeader { margin-bottom: 2rem; }
.bookingEventTitle { color: #1d1d1f; font-weight: 600; margin-bottom: 0.5rem; }
.bookingEventMeta { display: flex; gap: 2rem; flex-wrap: wrap; color: #6e6e73; font-size: 0.95rem; }
.bookingEventMetaIcon { margin-right: 6px; }

/* Panel header */
.bookingListHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem; }
.bookingListTitle { margin: 0 0 0.25rem; color: #1d1d1f; font-weight: 600; }
.bookingListAttended { font-size: 0.9rem; color: #6e6e73; }
.bookingListAttendedIcon { margin-right: 4px; }
.bookingListActions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bookingImportBtn,
.bookingAddUserBtn,
.bookingExportLink {
  min-height: 40px;
  padding: 0 14px;
  background: #ffffff;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
}
.bookingAddUserBtn {
  background: #1d1d1f;
  color: #ffffff;
  border-color: #1d1d1f;
}
.bookingImportBtn:hover,
.bookingExportLink:hover {
  background: #f5f5f7;
  border-color: #b8b8bd;
}
.bookingAddUserBtn:hover {
  background: #2c2c2e;
  border-color: #2c2c2e;
}
.bookingImportNote {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  background: #f5f5f7;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  color: #6e6e73;
  font-size: 0.88rem;
}

/* Empty state */
.bookingEmptyState { padding: 2rem; text-align: center; color: #6e6e73; }
.bookingEmptyIcon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.3; }
.bookingEmptyText { font-size: 1.1rem; }

/* Search wrapper */
.bookingSearchWrapper { margin-bottom: 1.5rem; }

.bookingUserSearchForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bookingUserSearchGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.bookingUserResultActions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.bookingUserSearchMessage {
  min-height: 1.5rem;
  margin-bottom: 1rem;
  color: #6e6e73;
  font-size: 0.9rem;
}
.bookingUserSearchMessage--error {
  color: #ff3b30;
}
.bookingUserSearchResults {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 320px;
  overflow-y: auto;
}
.bookingUserSearchResult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  background: #ffffff;
}
.bookingUserSearchResultInfo {
  min-width: 0;
}
.bookingUserSearchResultName {
  color: #1d1d1f;
  font-weight: 600;
}
.bookingUserSearchResultMeta {
  margin-top: 0.25rem;
  color: #6e6e73;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.bookingUserSearchSelectBtn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: #1d1d1f;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.86rem;
}

/* Table cells */
.bookingNumberCell {
  padding: 12px;
  font-family: monospace;
  font-size: 0.85rem;
  color: #6e6e73;
  display: inline-block;
}

.bookingUserCell { padding: 12px; min-width: 180px; }
.bookingUserName { font-weight: 600; margin-bottom: 2px; color: #1d1d1f; }
.bookingUserKana { font-size: 0.85rem; color: #6e6e73; }

.bookingGradeCell {
  padding: 12px;
  font-size: 0.9rem;
  color: #1d1d1f;
  display: inline-block;
}

.bookingStatusCell { padding: 12px; text-align: center; }

/* Status buttons — base has fallback color for unknown status */
.bookingStatusBtn {
  padding: 6px 12px;
  background: #8e8e93;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bookingStatusBtn--lottery   { background: #ff9500; }
.bookingStatusBtn--confirmed { background: #34c759; }
.bookingStatusBtn--attended  { background: #007aff; }
.bookingStatusBtn--rejected  { background: #ff3b30; }
.bookingStatusBtn--cancelled { background: #8e8e93; }
.bookingStatusBtn--pending   { background: #ff9500; }

/* Form response cell */
.bookingResponseCell { padding: 12px; text-align: center; }
.bookingResponseBtn {
  padding: 6px 12px;
  background: #34c759;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bookingResponseEmpty { color: #8e8e93; font-size: 0.85rem; }

/* User detail cell */
.bookingUserDetailCell { padding: 12px; text-align: center; }
.bookingUserDetailBtn {
  padding: 6px 12px;
  background: #f5f5f7;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Modal info boxes */
.bookingModalSection { margin-bottom: 1.5rem; }
.bookingModalInfoBox {
  background: #fff8e1;
  padding: 1rem;
  border-radius: 10px;
}
.bookingModalInfoBox--withMargin {
  background: #fff8e1;
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.bookingModalInfoLabel { font-size: 0.85rem; color: #6e6e73; margin-bottom: 0.25rem; }
.bookingModalInfoValue { font-weight: 600; color: #1d1d1f; }
.bookingModalInfoValueMono { font-weight: 600; color: #1d1d1f; font-family: monospace; }
.bookingResponseContent { display: flex; flex-direction: column; gap: 1.25rem; }

/* Status change form */
.bookingStatusLabel { display: block; margin-bottom: 0.75rem; font-weight: 600; color: #1d1d1f; }
.bookingStatusOptions { display: flex; flex-direction: column; gap: 0.75rem; }
.bookingStatusOptionLabel {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 2px solid #d2d2d7;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

/* Per-status radio accent colors */
.statusRadio--lottery   { width: 20px; height: 20px; margin-right: 12px; accent-color: #ff9500; cursor: pointer; }
.statusRadio--confirmed { width: 20px; height: 20px; margin-right: 12px; accent-color: #34c759; cursor: pointer; }
.statusRadio--attended  { width: 20px; height: 20px; margin-right: 12px; accent-color: #007aff; cursor: pointer; }
.statusRadio--rejected  { width: 20px; height: 20px; margin-right: 12px; accent-color: #ff3b30; cursor: pointer; }
.statusRadio--cancelled { width: 20px; height: 20px; margin-right: 12px; accent-color: #8e8e93; cursor: pointer; }

.bookingStatusOptionContent { flex: 1; }
.bookingStatusOptionTitle { font-weight: 600; color: #1d1d1f; margin-bottom: 2px; }
.bookingStatusOptionDesc { font-size: 0.85rem; color: #6e6e73; }

/* Status option hover/selected states (replaces JS-driven inline styles) */
.bookingStatusOptionLabel[data-hover-border="#ff9500"]:hover,
.bookingStatusOptionLabel[data-hover-border="#ff9500"]:has(input:checked) { border-color: #ff9500; background: #fff8e1; }
.bookingStatusOptionLabel[data-hover-border="#34c759"]:hover,
.bookingStatusOptionLabel[data-hover-border="#34c759"]:has(input:checked) { border-color: #34c759; background: #f0fdf4; }
.bookingStatusOptionLabel[data-hover-border="#007aff"]:hover,
.bookingStatusOptionLabel[data-hover-border="#007aff"]:has(input:checked) { border-color: #007aff; background: #eff6ff; }
.bookingStatusOptionLabel[data-hover-border="#ff3b30"]:hover,
.bookingStatusOptionLabel[data-hover-border="#ff3b30"]:has(input:checked) { border-color: #ff3b30; background: #fef2f2; }
.bookingStatusOptionLabel[data-hover-border="#8e8e93"]:hover,
.bookingStatusOptionLabel[data-hover-border="#8e8e93"]:has(input:checked) { border-color: #8e8e93; background: #f5f5f7; }

/* Form response modal content */
.bookingResponseItem {
  background: #fff8e1;
  padding: 1rem;
  border-radius: 10px;
}
.bookingResponseLabel {
  font-size: 0.85rem;
  color: #6e6e73;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.bookingResponseAnswer {
  color: #1d1d1f;
  font-size: 0.95rem;
}
.bookingResponseAnswer--empty {
  color: #8e8e93;
}

/* Modal action buttons */
.bookingModalActions { display: flex; gap: 0.75rem; justify-content: center; }
.bookingModalCancelBtn {
  padding: 0.75rem 1.5rem;
  background: #f5f5f7;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.bookingModalSubmitBtn {
  padding: 0.75rem 1.5rem;
  background: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}

/* Session status columns */
.bookingSessionHeader {
  text-align: center;
  line-height: 1.3;
}
.bookingSessionHeaderName {
  font-weight: 700;
  font-size: 0.85rem;
  color: #1d1d1f;
}
.bookingSessionHeaderDate {
  font-size: 0.78rem;
  color: #6e6e73;
}

.bookingSessionCell {
  padding: 8px;
  text-align: center;
}

.bookingSessionBtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d2d2d7;
  border-radius: 50%;
  background: #ffffff;
  color: #c7c7cc;
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bookingSessionBtn:hover {
  border-color: #34c759;
  color: #34c759;
}
.bookingSessionBtn--attended {
  border-color: #34c759;
  background: #34c759;
  color: #ffffff;
}
.bookingSessionBtn--attended:hover {
  border-color: #28a745;
  background: #28a745;
}
.bookingSessionBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bulk session select modal */
.bulkSessionSelectList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.bulkSessionSelectOption {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.bulkSessionSelectOption:hover {
  border-color: #007aff;
  background: #f0f7ff;
}
.bulkSessionSelectOptionIcon {
  color: #007aff;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.bulkSessionSelectOptionName {
  font-weight: 600;
  color: #1d1d1f;
}
.bulkSessionSelectOptionDate {
  margin-top: 2px;
  font-size: 0.85rem;
  color: #6e6e73;
}