/* Affiliate universal custom dropdown.
   Replaces native <select> popups (OS-drawn, width uncontrollable, cross-platform
   inconsistent) with a DOM listbox that aligns exactly to its trigger control.
   Root cause doc: native select popup overflowed control by ~26px on macOS. */

.aff-dd { position: relative; display: inline-flex; max-width: 100%; }
/* Width rules written for bare <select> (e.g. .field select { width:100% }) now
   target the hidden native element; mirror them onto the visible trigger so
   enhanced dropdowns keep identical sizing across every form context. */
.aff-dd-trigger { width: 100%; box-sizing: border-box; }
.field:has(> .aff-dd) select,
.deep-link-fields .aff-dd select,
.report-filter-grid .aff-dd select,
.login-panel .aff-dd select,
.sim-section .aff-dd select { width: auto !important; min-width: 0 !important; }
.aff-dd-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: 0; }
/* Focus ring for a11y: same soft halo as the open state (a solid outline would
   flash one dark-blue frame between focus and aria-expanded applying).
   The native select keeps focusability for form validation flow. */
.aff-dd:focus-within .aff-dd-trigger {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(0, 91, 255, 0.22), 0 1px 2px rgba(15, 34, 58, 0.04);
}
.aff-dd:focus-within .aff-dd-trigger[aria-expanded="true"] { outline: none; }

.aff-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 30px 0 10px;
  /* Resting state: soft blue-grey ring + gentle lift, softer than flat grey */
  border: 1px solid #d6dee8;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color: var(--text);
  font-size: inherit;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 34, 58, 0.04);
  /* Transition border/background only. Box-shadow must NOT transition: Chrome
     interpolates structurally different shadows (1px grey lift -> 3px brand halo)
     through muddy dark-blue intermediate frames = the "dark flash". */
  transition: border-color 0.15s ease, background 0.15s ease;
}
.aff-dd-trigger:hover {
  border-color: #b9c7d6;
  background: #fff;
}
/* Chrome paints its own :active press styling on buttons (bluish border/shadow
   flash on click). Kill every native flash path so the click lands directly on
   the soft halo. */
.aff-dd-trigger:focus,
.aff-dd-trigger:active {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* Open state: hide the solid border line — a single soft brand halo carries the indication. */
.aff-dd-trigger[aria-expanded="true"] {
  border-color: transparent;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 91, 255, 0.22), 0 1px 2px rgba(15, 34, 58, 0.04);
  background: #fff;
}
.aff-dd:focus-within .aff-dd-trigger[aria-expanded="true"] {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 91, 255, 0.22), 0 1px 2px rgba(15, 34, 58, 0.04);
}
.aff-dd-trigger[aria-expanded="true"]::after {
  border-right-color: var(--brand);
  border-bottom-color: var(--brand);
}
/* Context mirroring: rules that styled bare selects now target the trigger. */
.field .aff-dd-trigger { min-height: 32px; }
.login-panel .aff-dd-trigger { min-height: 42px; padding-left: 11px; }
.report-page .aff-dd-trigger { min-height: 32px; font-size: 13px; }
.campaign-data-period .aff-dd-trigger { min-height: 32px; font-size: 13px; }
.sim-section .aff-dd-trigger { min-height: 32px; font-size: 13px; }
.client-quick-field .aff-dd-trigger { min-height: 34px; font-size: 12px; }
/* Quick-filter labels draw their own chevron via ::after — suppress ours to avoid doubles. */
.client-quick-field .aff-dd-trigger::after { display: none; }
.aff-dd-trigger::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.aff-dd-trigger[aria-expanded="true"]::after { transform: translateY(-30%) rotate(225deg); }
.aff-dd-trigger > span { overflow: hidden; text-overflow: ellipsis; }
.aff-dd-trigger[disabled] { color: var(--muted); background: var(--surface-soft, #f7f9fc); cursor: not-allowed; }

.aff-dd-list {
  position: fixed;
  z-index: 940;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--control-border, var(--border));
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 34, 58, 0.12);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.aff-dd-list[hidden] { display: none; }
.aff-dd-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.aff-dd-option small { color: var(--muted); font-size: 11px; }
.aff-dd-option:hover, .aff-dd-option.active { background: #f0f6ff; }
.aff-dd-option[aria-selected="true"] { color: var(--brand); font-weight: 500; }
.aff-dd-empty { padding: 8px 10px; color: var(--muted); font-size: 12px; cursor: default; }
.aff-dd-option, .aff-dd-empty { background: transparent; border: 0; width: 100%; font-family: inherit; text-align: left; }

@media (max-width: 720px) {
  .aff-dd-trigger { min-height: 38px; }
}