/*
  Shared design tokens, copied from the pershorecoworking.com marketing site
  (Astro). Every layout in this app (public booking, member dashboard, and
  staff admin) loads this file alongside its own stylesheet, so the whole
  app reads as one brand rather than a public site with a bolted-on admin
  tool. If a future location trades under a different name, this is the one
  file to swap: everything downstream reads these variables, nothing else
  hardcodes a color or typeface.
*/
:root {
  --ink: #1D221C;
  --cream: #F6F2EA;
  --sage: #7C9A80;
  --moss: #536A56;
  --moss-hover: #435847;
  --moss-rgb: 83, 106, 86;
  --copper: #A86D47;
  --danger: #A3433F;
  --danger-bg: #F3E2E0;
  --warning: #C28A32;
  --warning-bg: #F5E8D3;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-lg: 10px;
}

/* Shared status-pill vocabulary, used by both admin.css and
   public_booking.css, kept here (rather than duplicated in each) so a new
   enum value only needs one edit, not two kept manually in sync. */
.status-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 3px; font-size: 0.8125rem; background: rgba(29, 34, 28, 0.08); }
.status-requested, .status-pending, .status-waiting { background: rgba(168, 109, 71, 0.15); color: var(--copper); }
.status-confirmed, .status-active, .status-scheduled, .status-offered { background: rgba(124, 154, 128, 0.2); color: var(--moss); }
.status-completed, .status-paid, .status-converted { background: rgba(124, 154, 128, 0.35); color: var(--moss); }
.status-cancelled, .status-overdue, .status-expired { background: rgba(168, 50, 50, 0.1); color: var(--danger); }
.status-no_show, .status-notice_given { background: rgba(29, 34, 28, 0.1); }
.status-ended, .status-void { background: rgba(29, 34, 28, 0.08); }

/* Flash messages (notice/alert), shared with admin.css and
   public_booking.css, kept here for the same reason as .status-badge above.
   Dismissible via flash_controller.js, which toggles .is-dismissing. */
.notice, .alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  transition: opacity 0.2s ease;
}
.notice { background: rgba(124, 154, 128, 0.15); color: var(--moss); }
.alert { background: rgba(168, 50, 50, 0.08); color: var(--danger); }
.notice.is-dismissing, .alert.is-dismissing { opacity: 0; }

.flash-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.flash-dismiss:hover { opacity: 1; }

/* Selectable option grid (booking time/day-part slots, live-availability
   pickers), shared with admin.css and public_booking.css, kept here for the
   same reason as .status-badge above. */
.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* For longer labels (e.g. full dates) that the default short-label grid
   squashes into narrow columns — one option per row instead. */
.time-slots-stacked {
  grid-template-columns: 1fr;
}

.time-slots-stacked .time-slot {
  justify-content: flex-start;
}

.time-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid rgba(29, 34, 28, 0.2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.time-slot:has(input:checked) {
  border-color: var(--sage);
  background: rgba(124, 154, 128, 0.12);
}

.time-slot-unavailable {
  position: relative;
  color: rgba(29, 34, 28, 0.4);
  border-color: rgba(29, 34, 28, 0.08);
  background: rgba(29, 34, 28, 0.03);
  cursor: not-allowed;
}

.time-slot-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--ink);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.time-slot-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
}

.time-slot-unavailable:hover .time-slot-tooltip,
.time-slot-tooltip.is-visible {
  opacity: 1;
}

/* Inline availability feedback (e.g. the admin meeting-room form's live
   conflict check), same shared-location reasoning as .status-badge above. */
.field-hint-success { color: var(--moss); }
.field-hint-error { color: var(--danger); }