/* AhSelect — shared dropdown (assets/js/ah-select.js). The baseline is the
   campaign log scenario picker: frosted field, chevron caret, frosted list
   with rounded rows and an accent ring on the active row. */

.ah-select {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.ah-select.is-open { z-index: 60; }

.ah-select > select.ah-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.ah-select-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 6px 34px 6px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(28, 28, 30, 0.3);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  color: #eaf2f8;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ah-select-trigger:hover:not(:disabled) {
  background: rgba(28, 28, 30, 0.45);
  border-color: rgba(255, 255, 255, 0.24);
}
.ah-select-trigger:focus-visible,
.ah-select.is-open .ah-select-trigger {
  outline: none;
  border-color: rgba(var(--accent-rgb, 100, 180, 255), 0.45);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 100, 180, 255), 0.2);
}
.ah-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ah-select--multi.has-value .ah-select-trigger {
  border-color: rgba(var(--accent-rgb, 100, 180, 255), 0.4);
  color: var(--accent-readable, #eaf2f8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ah-select-trigger { background: rgba(28, 28, 30, 0.85); }
}

.ah-select-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ah-select-caret {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  pointer-events: none;
  transition: transform 0.18s ease, margin-top 0.18s ease;
}
.ah-select.is-open .ah-select-caret {
  margin-top: -2px;
  transform: rotate(225deg);
}

.ah-select-list {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 100%;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  max-height: min(320px, 55vh);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  background: rgba(17, 26, 34, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  color: #fff;
  text-align: left;
  overscroll-behavior: contain;
  touch-action: manipulation;
  z-index: 61;
}
.ah-select.is-up .ah-select-list {
  top: auto;
  bottom: calc(100% + 4px);
}
.ah-select.is-open .ah-select-list { display: block; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ah-select-list { background: rgba(17, 26, 34, 0.97); }
}
/* Press bridge across the gap between the trigger and the list. */
.ah-select.is-open::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 6px;
}
.ah-select.is-open.is-up::after {
  top: auto;
  bottom: 100%;
}

.ah-select-option,
.ah-select-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ah-select-empty {
  cursor: default;
  color: rgba(255, 255, 255, 0.65);
}
.ah-select-option:hover,
.ah-select-option:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
}
.ah-select-option:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
}
.ah-select-option.is-active {
  background: var(--accent-soft, rgba(100, 180, 255, 0.18));
  border-color: var(--accent-border, rgba(100, 180, 255, 0.4));
  color: #fff;
}
.ah-select:not(.ah-select--multi) .ah-select-option.is-active {
  box-shadow: 0 0 0 2px var(--accent, #64b4ff), 0 0 14px var(--accent-glow, rgba(100, 180, 255, 0.25));
}
.ah-select-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ah-select-group {
  display: block;
  margin: 4px 0 2px;
  padding: 6px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.ah-select-group:first-child {
  margin-top: 0;
  border-top: 0;
}

/* Multi-select rows: a checkbox square that fills with the accent and a
   dark tick, the same recipe as the site's checkboxes. */
.ah-select-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}
.ah-select-option.is-active .ah-select-check {
  border-color: var(--accent, #64b4ff);
  background-color: var(--accent, #64b4ff);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.ah-select-option.is-partial .ah-select-check {
  border-color: var(--accent, #64b4ff);
  background-color: rgba(var(--accent-rgb, 100, 180, 255), 0.35);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4 8h8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.ah-select-text {
  min-width: 0;
}
/* Multi-select rows are flat: the checkbox carries the checked state, so
   checked rows get no fill or border (stacked, those read as one joined
   block), and rows sit edge to edge with no dead gaps between them. */
.ah-select--multi .ah-select-option {
  white-space: normal;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: 6px;
}
.ah-select--multi .ah-select-option.is-active {
  background: transparent;
}
.ah-select--multi .ah-select-option:hover,
.ah-select--multi .ah-select-option:focus {
  background: rgba(255, 255, 255, 0.08);
}
.ah-select--multi .ah-select-option:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
/* Cycle header in a multi select: a full checkbox row that toggles the
   whole cycle. The divider sits inside its padding so it stays clickable. */
.ah-select-option--group {
  position: relative;
  padding-top: 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ah-select-option--group::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.ah-select-option--group ~ .ah-select-option:not(.ah-select-option--group) {
  padding-left: 22px;
}
.ah-select-option--all {
  position: relative;
}
.ah-select-option--all::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.ah-select-option--all + .ah-select-option--group {
  padding-top: 8px;
}
.ah-select-option--all + .ah-select-option--group::before {
  display: none;
}

@media (max-width: 932px) {
  .ah-select-trigger {
    min-height: 44px;
    font-size: 16px;
  }
  .ah-select-list {
    background: rgb(17, 26, 34);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .ah-select-option {
    min-height: 44px;
    font-size: 15px;
  }
}