/* Filter toolbar + custom listbox dropdowns (dark surfaces) */

.filter-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
}

.filter-field {
  position: relative;
  display: flex;
  align-self: flex-start;
  min-height: var(--filter-control-height, var(--space-10-0));
}

.filter-select {
  position: relative;
  display: flex;
  min-width: 148px;
}

.filter-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);

  width: 100%;
  min-height: var(--space-10-0);
  padding: var(--space-2-5) var(--space-4-5);
  padding-right: var(--space-10-0);

  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  text-align: left;

  color: var(--text-inverse);
  background-color: var(--control-surface-dark);
  border: none;
  border-radius: var(--radius-pill);

  cursor: pointer;

  transition:
    background-color var(--transition-base),
    opacity var(--transition-base);
}

.filter-select__trigger:focus-visible,
.filter-select.is-open .filter-select__trigger {
  background-color: var(--control-surface-dark-hover);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .filter-select__trigger:hover {
    background-color: var(--control-surface-dark-hover);
    outline: none;
  }
}

.filter-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-select.is-placeholder .filter-select__value {
  opacity: 0.58;
}

.filter-select__chevron {
  position: absolute;
  right: var(--space-3-5);
  top: 50%;

  width: var(--space-3);
  height: var(--space-3);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='rgba(255,255,255,0.72)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--space-3);

  transform: translateY(-50%);

  transition: transform var(--transition-base);
}

.filter-select.is-open .filter-select__chevron {
  transform: translateY(-50%) rotate(180deg);
}

.filter-select__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-overlay);

  display: none;
  min-width: 100%;
  max-height: 280px;
  margin: 0;
  padding: var(--space-1) 0;

  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;

  color: var(--text-inverse);
  background-color: var(--obsidian-soft);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(var(--space-1) * -1));

  transition:
    opacity var(--transition-fast),
    transform var(--transition-base);

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.filter-select:not(.filter-select--picker).is-open .filter-select__menu {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Year picker — pill morphs to rounded panel on open */

.filter-select--picker {
  --filter-picker-row: var(--space-10-0);
  --filter-picker-visible-rows: 3.5;

  position: relative;
  display: block;
  align-self: flex-start;
  min-width: 0;
  width: max-content;

  overflow: visible;

  background-color: var(--control-surface-dark);
  border-radius: var(--radius-pill);

  -webkit-tap-highlight-color: transparent;

  transition: border-radius var(--transition-base);
}

.filter-select--picker.is-width-locked {
  width: var(--filter-picker-width);
  min-width: var(--filter-picker-width);
}

@media (hover: hover) and (pointer: fine) {
  .filter-select--picker:hover:not(.is-open) {
    background-color: var(--control-surface-dark-hover);
  }
}

.filter-select--picker.is-open {
  z-index: var(--z-overlay);
  background-color: transparent;
  border-radius: 0;
}

.filter-select--picker .filter-select__trigger {
  position: relative;
  z-index: 1;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  padding-left: var(--space-4-5);
  padding-right: var(--space-9-0);

  background-color: transparent;
  border-radius: 0;

  -webkit-tap-highlight-color: transparent;
}

.filter-select--picker .filter-select__trigger:focus,
.filter-select--picker .filter-select__trigger:focus-visible,
.filter-select--picker .filter-select__trigger:active,
.filter-select--picker.is-open .filter-select__trigger {
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .filter-select--picker .filter-select__trigger:hover {
    background-color: transparent;
    outline: none;
    box-shadow: none;
  }
}

.filter-select--picker .filter-select__menu-shell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;

  display: block;
  min-width: 0;
  width: 100%;
  max-height: var(--filter-picker-row);
  padding-top: var(--filter-picker-row);
  overflow: hidden;

  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: none;

  opacity: 0;
  pointer-events: none;
  transform: none;

  transition:
    max-height var(--transition-base),
    opacity var(--transition-fast);
}

.filter-select--picker.is-open .filter-select__menu-shell {
  max-height: calc(
    var(--filter-picker-row) * (1 + var(--filter-picker-visible-rows)) + var(--space-2) * 2
  );
  background-color: var(--obsidian-soft);
  opacity: 1;
  pointer-events: auto;
}

.filter-select--picker .filter-select__menu {
  position: static;
  top: auto;
  left: auto;

  display: block;
  max-height: calc(var(--filter-picker-row) * var(--filter-picker-visible-rows) + var(--space-2) * 2);
  margin: 0;
  padding: var(--space-2) 0;

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  opacity: 1;
  pointer-events: auto;
  transform: none;

  scrollbar-width: none;
}

.filter-select--picker .filter-select__menu::-webkit-scrollbar {
  display: none;
}

.filter-select__menu::-webkit-scrollbar {
  width: var(--space-1-5);
}

.filter-select__menu::-webkit-scrollbar-track {
  background: transparent;
}

.filter-select__menu::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.18);
}

.filter-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  padding: var(--space-2-5) var(--space-4);

  font-size: var(--text-sm);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);

  cursor: pointer;

  transition:
    background-color var(--transition-fast),
    opacity var(--transition-fast);
}

.filter-select__option-label {
  flex: 1;
  min-width: 0;
}

.filter-select__option-count {
  flex-shrink: 0;
  min-width: 1.5em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  opacity: 0.52;
}

.filter-select__option.is-disabled,
.filter-select__option[aria-disabled="true"] {
  opacity: 0.34;
  cursor: not-allowed;
}

.filter-select:not(.filter-select--picker) .filter-select__option.is-focused {
  background-color: var(--control-surface-dark);
}

@media (hover: hover) and (pointer: fine) {
  .filter-select:not(.filter-select--picker) .filter-select__option:hover {
    background-color: var(--control-surface-dark);
  }
}

.filter-select--picker .filter-select__option {
  padding-left: var(--space-4-5);
  padding-right: var(--space-4);

  color: var(--text-inverse);
  background-color: transparent;
  transition: none;
}

.filter-select--picker .filter-select__option-label {
  flex: none;
  min-width: auto;
  white-space: nowrap;
}

.filter-select--picker .filter-select__option.is-focused,
.filter-select--picker .filter-select__option[aria-selected="true"]:not([data-value=""]) {
  background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .filter-select--picker .filter-select__option:hover {
    background-color: transparent;
  }
}

.filter-select:not(.filter-select--picker) .filter-select__option[aria-selected="true"]:not([data-value=""]) {
  background-color: rgba(255, 255, 255, 0.06);
}

.filter-select--picker .filter-select__option[aria-selected="true"]:not([data-value=""])::before {
  display: none;
}

.filter-select__option[aria-selected="true"]:not([data-value=""])::before {
  content: "";
  display: inline-block;
  width: var(--space-1);
  height: var(--space-1);
  margin-right: var(--space-2);
  margin-bottom: var(--space-0-5);
  border-radius: var(--radius-pill);
  background-color: currentColor;
  vertical-align: middle;
  opacity: var(--opacity-interactive-subtle);
}

.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  min-height: var(--space-10-0);
  padding: var(--space-2-5) var(--space-4-5);

  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);

  color: rgba(255, 255, 255, 0.82);
  background-color: var(--control-surface-dark);
  border: none;
  border-radius: var(--radius-pill);

  cursor: pointer;

  transition:
    background-color var(--transition-base),
    opacity var(--transition-base);
}

.filter-clear__icon {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
  opacity: var(--opacity-interactive-subtle);
}

.filter-clear:focus-visible:not(:disabled) {
  background-color: var(--control-surface-dark-hover);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .filter-clear:hover:not(:disabled) {
    background-color: var(--control-surface-dark-hover);
    outline: none;
  }
}

.filter-clear:disabled {
  opacity: 0.32;
  cursor: default;
}

.filter-clear[hidden] {
  display: none;
}

.filter-field--search {
  flex: 1 1 19rem;
  min-width: 19rem;
  max-width: 28rem;
  margin-left: auto;
}

.filter-search-shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 19rem;
  border: var(--border-inverse);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: border-color var(--transition-fast);
}

.filter-search-shell:focus-within {
  border: var(--border-interactive);
}

.filter-search {
  width: 100%;
  min-height: var(--filter-control-height, var(--space-10-0));
  padding: 0 var(--space-10-0) 0 var(--space-4-5);

  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);

  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;

  -webkit-appearance: none;
  appearance: none;
}

.filter-search::placeholder {
  color: inherit;
  opacity: 0.58;
}

.filter-search::-webkit-search-decoration,
.filter-search::-webkit-search-cancel-button,
.filter-search::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.filter-search__icon,
.filter-search__clear {
  position: absolute;
  top: 50%;
  color: currentColor;
  opacity: 0.55;
  transform: translateY(-50%);
}

.filter-search__icon {
  right: var(--space-4);
  width: var(--space-4);
  height: var(--space-4);
  pointer-events: none;
}

.filter-search__icon[hidden] {
  display: none;
}

.filter-search__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.filter-search__clear {
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  min-height: var(--space-6);
  padding: 0;

  color: currentColor;
  background: transparent;
  border: none;
  border-radius: 0;
  opacity: 0.55;
  cursor: pointer;

  transition: opacity var(--transition-fast);
}

.filter-search__clear .filter-clear__icon {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .filter-search__clear:hover {
    opacity: 0.9;
  }
}

.filter-search__clear:focus-visible {
  opacity: 0.9;
  outline: none;
}

.filter-search__clear[hidden] {
  display: none;
}

@media (min-width: 981px) {
  .filter-field--search {
    flex: 0 1 28rem;
    max-width: 28rem;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .filter-toolbar {
    flex-wrap: wrap;
  }

  .filter-field--search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }

  .filter-field--search .filter-search-shell {
    min-width: 0;
    width: 100%;
  }

  .filter-clear {
    flex-shrink: 0;
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .filter-toolbar {
    flex-wrap: wrap;
  }

  .filter-field--search {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: none;
    margin-left: auto;
  }

  .filter-field--search .filter-search-shell {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .filter-toolbar {
    width: 100%;
  }

  .filter-field {
    width: 100%;
  }

  .filter-select {
    width: 100%;
    min-width: 0;
  }

  .filter-select--picker {
    width: 100%;
  }

  .filter-select--picker.is-width-locked {
    width: 100%;
    min-width: 0;
  }

  .filter-clear {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-select__trigger,
  .filter-select__chevron,
  .filter-select__menu,
  .filter-select--picker,
  .filter-select--picker .filter-select__menu-shell,
  .filter-select__option {
    transition-duration: 0.01ms;
  }

  .filter-select.is-open .filter-select__menu {
    transform: none;
  }
}