/*
 * s385: the event details editor (.saf-ed), the ONE shared picker (.saf-pick, assets/js/saf-picker.js) and the
 * range field (.saf-range). Moved VERBATIM from assets/css/events.css (s338) so the dashboard's Events grid --
 * whose filters are the same picker -- and the public event page load one sheet (handle saf-event-editor).
 * Public-page rules: classes are doubled where the Elementor kit styles bare a/button (css-cascade rule 3) and
 * every element that ships `hidden` restates it in THIS file (saf-hidden-display-sweep).
 */
.saf-ed { display: flex; flex-direction: column; gap: var(--saf-gap-5, 24px); }
.saf-ed__section {
  padding: var(--saf-gap-4, 16px);
  border: 1px solid var(--saf-border, #ddd6cc);
  border-radius: var(--saf-radius, 8px);
  background: var(--saf-bg, #fff);
}
.saf-ed__h { margin: 0 0 var(--saf-gap-2, 8px); font-size: 1.125rem; }
.saf-ed__section > .saf-ed__help { margin: 0 0 var(--saf-gap-3, 12px); }
.saf-ed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--saf-gap-3, 12px) var(--saf-gap-4, 16px);
}
@media (min-width: 720px) {
  .saf-ed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saf-ed__field--wide { grid-column: 1 / -1; }
}
.saf-ed__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saf-ed__field > label, .saf-pick__label, .saf-range__cell label, .saf-ed__ro-label {
  font-weight: 600;
  font-size: var(--saf-text-sm, 0.875rem);
}
.saf-ed__help, .saf-pick__help, .saf-pick__hint, .saf-range__summary {
  margin: 0;
  font-size: var(--saf-text-sm, 0.875rem);
  color: var(--saf-fg-muted, #6b6560);
}
.saf-ed__field input, .saf-ed__field textarea, .saf-ed__field select,
.saf-pick__input, .saf-range__cell input, .saf-pick__new input {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--saf-border, #ddd6cc);
  border-radius: var(--saf-radius, 8px);
  background: #fff;
  color: var(--saf-fg, #1c1710);
  font: inherit;
  box-sizing: border-box;
  width: 100%;
}
.saf-ed__field input[aria-invalid="true"], .saf-range__cell input[aria-invalid="true"], .saf-pick__new input[aria-invalid="true"] {
  border-color: var(--saf-brick-red, #be2727);
  box-shadow: 0 0 0 1px var(--saf-brick-red, #be2727);
}
.saf-ed__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.saf-ed__check input { flex: none; width: 22px; height: 22px; min-height: 0; accent-color: var(--saf-brick-red, #be2727); }
.saf-ed__readonly { padding: 10px 12px; border-radius: var(--saf-radius, 8px); background: var(--saf-linen, #faf6f0); }
.saf-ed__ro-value { font-size: 1rem; }
.saf-ed__metrics > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.saf-ed__metrics > .saf-ed__grid { margin-top: var(--saf-gap-3, 12px); }

/* Sticky save bar: stays in reach while scrolling a long form. */
.saf-ed__savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--saf-gap-3, 12px);
  padding: var(--saf-gap-3, 12px) var(--saf-gap-4, 16px);
  border: 1px solid var(--saf-border, #ddd6cc);
  border-radius: var(--saf-radius, 8px);
  background: var(--saf-linen, #faf6f0);
  box-shadow: 0 -4px 16px rgba(28, 23, 16, 0.08);
}
.saf-ed__savebar.is-dirty { border-color: var(--saf-brick-red, #be2727); }
.saf-ed__count { margin: 0 auto 0 0; font-weight: 600; }
.saf-ed__savebar .saf-btn.saf-btn { min-height: 44px; }
.saf-ed__savebar .saf-btn.saf-btn[hidden] { display: none; }

/* Picker */
.saf-pick { position: relative; display: flex; flex-direction: column; gap: 6px; }
.saf-pick__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.saf-pick__chips[hidden] { display: none; }
.saf-pick__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  background: var(--saf-linen, #faf6f0);
  border: 1px solid var(--saf-border, #ddd6cc);
}
.saf-pick__chip--gone, .saf-pick__chip--hidden { font-style: italic; color: var(--saf-fg-muted, #6b6560); }
.saf-pick__chip-name { overflow-wrap: anywhere; }
.saf-pick__logo { width: 24px; height: 24px; object-fit: contain; flex: none; }
button.saf-pick__chip-x.saf-pick__chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-height: 0; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--saf-fg, #1c1710); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
button.saf-pick__chip-x.saf-pick__chip-x:hover, button.saf-pick__chip-x.saf-pick__chip-x:focus-visible {
  background: var(--saf-border, #ddd6cc); color: var(--saf-fg, #1c1710);
}
.saf-pick__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--saf-border, #ddd6cc);
  border-radius: var(--saf-radius, 8px);
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 23, 16, 0.14);
}
.saf-pick__list[hidden] { display: none; }
button.saf-pick__option.saf-pick__option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--saf-fg, #1c1710); font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
button.saf-pick__option.saf-pick__option .saf-pick__hint { margin-left: auto; }
button.saf-pick__option.saf-pick__option:hover, button.saf-pick__option.saf-pick__option:focus-visible {
  background: var(--saf-linen, #faf6f0); color: var(--saf-fg, #1c1710); outline: none;
}
button.saf-pick__option.saf-pick__option:disabled { opacity: 0.6; cursor: default; }
button.saf-pick__option--add.saf-pick__option--add { color: var(--saf-brick-red, #be2727); font-weight: 600; border-top: 1px solid var(--saf-border, #ddd6cc); }
.saf-pick__empty { margin: 0; padding: 10px; color: var(--saf-fg-muted, #6b6560); }
button.saf-pick__add.saf-pick__add {
  align-self: flex-start; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--saf-brick-red, #be2727);
  font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}
button.saf-pick__add.saf-pick__add:hover, button.saf-pick__add.saf-pick__add:focus-visible { background: none; color: var(--saf-burgundy, #7b181a); }
.saf-pick__new {
  display: grid; grid-template-columns: 1fr; gap: var(--saf-gap-2, 8px);
  margin: 0; padding: var(--saf-gap-3, 12px);
  border: 1px dashed var(--saf-brick-red, #be2727); border-radius: var(--saf-radius, 8px);
  background: var(--saf-linen, #faf6f0);
}
@media (min-width: 720px) { .saf-pick__new { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* s341: at 375px the editor's sticky save bar sat ON TOP of an open create
 * dialog (fields + Create/Cancel hidden under it). The dialog has its own
 * actions, so while one is open the bar stops sticking, and scrollIntoView
 * keeps a margin for it either way. */
.saf-pick__new { scroll-margin: var(--saf-gap-4, 16px) 0 120px; }
.saf-ed:has(.saf-pick__new) .saf-ed__savebar { position: static; }
.saf-pick__new legend { font-weight: 700; padding: 0 4px; }
.saf-pick__new-field { display: flex; flex-direction: column; gap: 4px; }
.saf-pick__new-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--saf-gap-2, 8px); }
.saf-pick__error, .saf-range__error { margin: 0; color: var(--saf-brick-red, #be2727); font-weight: 600; }
.saf-pick__error:empty, .saf-range__error:empty, .saf-pick__status:empty { display: none; }
/* The picker's live region speaks to screen readers only; the chip already shows the choice. */
.saf-pick__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Range field: one row on desktop, start/end pairs on phones. */
.saf-range { margin: 0; padding: 0; border: 0; min-width: 0; }
.saf-range__legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.saf-range__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--saf-gap-2, 8px) var(--saf-gap-3, 12px); align-items: end; }
/* s338: a phone's native date box needs the room, or the year clips ("07/10/203"). */
.saf-range__cell input[type="date"], .saf-range__cell input[type="time"] { padding-left: 8px; padding-right: 4px; }
.saf-range__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saf-range__arrow { display: none; }
@media (min-width: 900px) {
  .saf-range__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(0, 1.2fr) minmax(0, 1fr); }
  .saf-range__arrow { display: block; padding-bottom: 12px; color: var(--saf-fg-muted, #6b6560); }
}
.saf-range__cell input:disabled { background: var(--saf-linen, #faf6f0); color: var(--saf-fg-muted, #6b6560); }
.saf-range__tbd { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; font-weight: 600; }
.saf-range__tbd input { width: 22px; height: 22px; accent-color: var(--saf-brick-red, #be2727); }
.saf-range__summary { margin-top: 2px; }