/**
 * Front-end styles for the Residency Programs Afform (afsearchResidencyPrograms).
 * Loaded via the crmCNSCivi Angular module, which the Afform requires.
 */

/*
 * Filter row responsiveness.
 *
 * Core's .af-layout-cols sets each field to `flex: 1` (flex-basis: 0), so the three filters
 * always split the row into equal thirds - even on a phone, where each third is far too narrow.
 * Give them a real flex-basis instead: each field wants ~220px and is allowed to grow, so with
 * flex-wrap they sit 3-up on wide screens, wrap to 2-up / 1-up as width shrinks, and go full
 * width on a portrait phone. min-width:0 lets a field shrink below its content width so the
 * Select2 text can ellipsize instead of pushing the field wider (and overflowing the card).
 */
.af-container.af-layout-cols.residency-programs-filters > * {
  flex: 1 1 220px;
  min-width: 0;
}

/*
 * Gap + edge spacing on the filter block.
 *
 * Core applies the flex gap via `gap: var(--crm-flex-gap, 0.5rem)` on a higher-specificity
 * selector (.crm-container .af-container.af-layout-cols), so a plain `gap` here would lose to it.
 * Override the VARIABLE instead - that's the intended, specificity-proof hook and it drives both
 * the column gap and the row gap between wrapped rows.
 *
 * `gap` only separates fields from each OTHER, never from the container's own edge, so when a
 * field wraps onto the last row it sits flush against the block's bottom. Add matching padding so
 * the fields never touch the block edge/border (symmetric, so a bordered/tinted filter box also
 * looks right - drop to `padding-bottom` alone if you don't want side/top padding).
 * align-items:flex-start keeps every field top-aligned so labels line up regardless of control
 * height (Select2 controls are a touch taller than the plain text input).
 */
.af-container.af-layout-cols.residency-programs-filters {
  --crm-flex-gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
}

/*
 * Make Select2 fluid instead of fixed-width.
 *
 * Select2's default `width: 'resolve'` measures the field at init and bakes a pixel width onto
 * .select2-container as an inline style. That px value never recomputes, so rotating the device
 * (or a portrait first-load with a different width) leaves the control either overflowing the
 * card or too narrow (forcing the dropdown text to wrap). Forcing width:100% makes the control
 * follow its flex item, which IS responsive, so orientation changes just reflow. The stylesheet
 * !important overrides Select2's non-important inline width.
 */
.residency-programs-filters .select2-container {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Truncate the rendered selection with an ellipsis rather than letting a long option name
   stretch/overflow the (now fluid) single-select control. (CiviCRM ships Select2 v3.5.4, so the
   chosen-value element is `.select2-choice > .select2-chosen`, NOT the v4 `.select2-selection`.) */
.residency-programs-filters .select2-container .select2-choice > .select2-chosen {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Multi-select overflow on orientation change (Program Type, State).
 *
 * Select2 v3's resizeSearch() writes an inline pixel width onto the multi-select search <input>
 * (select2.js: `this.search.width(...)`, derived from the choices width at init/focus/keyup) and
 * never recomputes it on window resize. Rotate the device and that stale px width overflows the
 * new container; because v3 floats the choice <li>s, the oversized input just spills out the side.
 *
 * Fix: lay the choices out as a wrapping flex row and let the search field flex WITHIN it. The
 * search <li> becomes a flex item (min-width:0 so it can shrink) and its <input> is forced to
 * width:100% (!important beats Select2's inline px), so it can never exceed the current container
 * and simply reflows on rotation. Chips keep their natural width and wrap onto new lines.
 */
.residency-programs-filters .select2-container-multi .select2-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}
.residency-programs-filters .select2-container-multi .select2-choices > li.select2-search-field {
  flex: 1 1 4rem;
  min-width: 0;
}
.residency-programs-filters .select2-container-multi .select2-choices > li.select2-search-field input.select2-input {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * Floating "Back to top" button.
 *
 * Fixed to the bottom-right, hidden by default and revealed by the rpBackToTop directive (which
 * adds .is-visible once the user has scrolled ~one screen down). Hidden state uses opacity +
 * pointer-events (not display:none) so the fade transition works and it can't be clicked while
 * invisible. #bootstrap-theme prefix lifts specificity over CiviCRM's bootstrap button resets.
 */
#bootstrap-theme .rp-back-to-top,
.rp-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: var(--cns-color-community-blue); /* CNS brand blue (matches the PDF/title styling) */
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
#bootstrap-theme .rp-back-to-top:hover,
.rp-back-to-top:hover {
  background-color: #244a80;
  color: #fff;
}
#bootstrap-theme .rp-back-to-top:focus-visible,
.rp-back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Must carry the #bootstrap-theme prefix too: the hidden base rule above is
   `#bootstrap-theme .rp-back-to-top` (specificity 1,1,0), so a bare `.rp-back-to-top.is-visible`
   (0,2,0) would LOSE to it and the button would stay hidden even with the class applied. */
#bootstrap-theme .rp-back-to-top.is-visible,
.rp-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rp-back-to-top .rp-back-to-top-icon {
  font-size: 1.5rem;
  line-height: 1;
}
/* Respect users who prefer reduced motion: no slide/fade transition. */
@media (prefers-reduced-motion: reduce) {
  .rp-back-to-top {
    transition: none;
    transform: none;
  }
}