/*
 * JMBTicket — v2 form components (components.js): select, date, time.
 *
 * Standalone, not part of the Tailwind build, so the organizer and admin
 * dashboards can load it as well as the public site. It reads the public
 * site's token names (--color-*, --radius-*); the dashboards map their own
 * --org-* tokens onto those names in organizer.css.
 */
/* ── Form components (components.js) ─────────────────────────────────
 * The native control stays in the DOM (.cs-native / type=hidden) as the
 * value the form submits; these style the themed trigger and popover. */
.cs, .cd, .ct { position: relative; }
.cs-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none;
  clip: rect(0 0 0 0); overflow: hidden;
}
.cs-trigger, .cd-trigger, .ct-trigger {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: start;
  cursor: pointer;
  background-image: none !important;
}
.cs-trigger {
  padding-inline-end: 2.5rem !important;
  /* .cs-value is min-width:0 so long labels can ellipsize. That also drops the
     trigger's intrinsic width to nothing, so inside a shrink-to-fit parent
     (an inline-block card title, a table cell) it would collapse under the
     chevron. This floor keeps it readable there without affecting the usual
     full-width case. */
  min-width: 8rem;
}
.cs-trigger:disabled { cursor: not-allowed; opacity: 0.6; }
.cs-value, .cd-value, .ct-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-value.is-placeholder, .cd-value.is-placeholder, .ct-value.is-placeholder { color: var(--color-ink-muted); }
.cs-chevron {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  width: 1.125rem; height: 1.125rem;
  margin-top: -0.5625rem;
  color: var(--color-ink-muted);
  transition: transform 0.25s var(--ease-out-expo);
  pointer-events: none;
}
.cs.is-open .cs-chevron { transform: rotate(180deg); }
.cs.is-open .cs-trigger, .cd.is-open .cd-trigger, .ct.is-open .ct-trigger { border-color: var(--color-ink); }
.cd-icon, .ct-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-ink-muted); }

.cs-pop, .cd-pop, .ct-pop {
  /* Fixed, not absolute, and positioned from JS against the trigger's
     viewport rect. An absolutely positioned popover is a child of the field,
     so it is trapped by every ancestor that creates a stacking context and
     clipped by every ancestor with overflow:hidden — which in the dashboards
     is most cards, table wrappers and the sticky page header. Taking it out
     of flow is the only fix that holds everywhere it is used.

     9999 clears the admin sidebar (1040), the sticky bars (1020-1030),
     Bootstrap modals (~1055) and the skinned plugin popovers (1060), while
     staying under the full-screen request loader (10000). */
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  inset-inline-start: auto;
  background: var(--color-paper);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-over);
  overflow: auto;
  overscroll-behavior: contain;
  animation: pop-in 0.18s var(--ease-out-expo);
}
/* JS owns the coordinates now; .is-above survives only as a styling hook
   (it still rotates the chevron and flips the pop-in animation). */
.is-above > .cs-pop, .is-above > .cd-pop, .is-above > .ct-pop { bottom: auto; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }

.cs-search {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 0.9375rem;
  outline: none;
}
.cs-list { list-style: none; margin: 0; padding: 0.375rem; }
.cs-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  cursor: pointer;
  white-space: nowrap;
}
.cs-option.is-active { background: var(--color-paper-alt); color: var(--color-ink); }
.cs-option[aria-selected="true"] { color: var(--color-ink); font-weight: 600; }
.cs-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.cs-check { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-accent); visibility: hidden; }
.cs-option[aria-selected="true"] .cs-check { visibility: visible; }

.cd-pop { width: 18.5rem; min-width: 0; padding: 0.875rem; }
.cd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.cd-title { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.cd-navs { display: flex; gap: 0.125rem; }
.cd-nav {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
}
.cd-nav svg { width: 1rem; height: 1rem; }
.cd-nav:hover { background: var(--color-paper-alt); color: var(--color-ink); }
.cd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; }
.cd-dow {
  padding-block: 0.375rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.cd-day {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.cd-day:hover:not(:disabled) { background: var(--color-paper-alt); color: var(--color-ink); }
.cd-day.is-today { box-shadow: inset 0 0 0 1px var(--color-line-strong); color: var(--color-ink); font-weight: 600; }
.cd-day.is-selected { background: var(--color-amber); color: var(--color-amber-fg); font-weight: 700; box-shadow: none; }
.cd-day:disabled { opacity: 0.3; cursor: not-allowed; }
.cd-day:focus-visible, .cd-nav:focus-visible, .cs-trigger:focus-visible, .cd-trigger:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}
.cd-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-line);
}
.cd-link { font-size: 0.8125rem; font-weight: 600; color: var(--color-accent); }
.cd-link:hover { color: var(--color-accent-hover); }


/* ── Time picker ─────────────────────────────────────────────────────── */
.ct { position: relative; }
.ct-pop { width: 11rem; min-width: 0; padding: 0.375rem; }
.ct-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-align: start;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}
.ct-option:hover, .ct-option.is-active { background: var(--color-paper-alt); color: var(--color-ink); }
.ct-option[aria-selected="true"] { background: var(--color-amber); color: var(--color-amber-fg); font-weight: 700; }

/* Buttons inside the popovers start from nothing: the dashboards load
   Bootstrap/Atlantis, whose default <button> borders and bevels would
   otherwise show on every day, time and arrow. */
.cs-pop button, .cd-pop button, .ct-pop button,
.cd-trigger, .ct-trigger, .cs-trigger {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  box-shadow: none;
}
.cd-pop button, .ct-pop button { border: 0; background: transparent; margin: 0; line-height: 1.2; cursor: pointer; }
.cd-day.is-selected, .ct-option[aria-selected="true"] { background: var(--color-amber) !important; }
.cd-day.is-today { box-shadow: inset 0 0 0 1px var(--color-line-strong); }

/* ── Lightbox (components.js) ─────────────────────────────────────────
 * Opened by any <a data-lightbox="group" href="full-size.jpg">. No plugin:
 * the v1 theme's gallery needed magnific-popup, which v2 does not load. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 10, 9, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.lb.is-open { opacity: 1; visibility: visible; }
/* Full-bleed: the picture covers the whole viewport edge-to-edge, so wide
   (flyer-style) shots never leave bars on the left and right. Controls
   float over the picture. */
.lb-figure {
  position: relative;
  width: 100%;
  height: 100%;
}
.lb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  border-radius: 0;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 0.06s linear;
  transform-origin: 0 0;
}
.lb-count {
  position: absolute;
  inset-inline: 0;
  bottom: 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 10, 9, 0.45);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.15s ease;
}
.lb-btn:hover { background: rgba(10, 10, 9, 0.62); }
.lb-prev { inset-inline-start: 0.75rem; }
.lb-next { inset-inline-end: 0.75rem; }
.lb-close {
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  transform: none;
  background: rgba(10, 10, 9, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Zoom toolbar: zoom out / live percentage / zoom in, bottom corner. */
.lb-controls {
  position: absolute;
  inset-inline-start: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(10, 10, 9, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lb-tool {
  position: static;
  top: auto;
  transform: none;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
}
.lb-tool:hover { background: rgba(255, 255, 255, 0.18); }
.lb-zoom-label {
  min-width: 3.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.9);
}
.lb[data-single="1"] .lb-prev,
.lb[data-single="1"] .lb-next,
.lb[data-single="1"] .lb-count { display: none; }
@media (max-width: 600px) {
  .lb-controls { inset-inline-start: 0.5rem; bottom: 0.5rem; }
  .lb-close { top: 0.5rem; inset-inline-end: 0.5rem; }
  .lb-prev { inset-inline-start: 0.5rem; }
  .lb-next { inset-inline-end: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
}