/*
 * Filter Bar Styles
 * Uses existing popover.css position-try fallbacks
 */

/* Filters container */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--inline-space-half);
  padding-block-start: 2px; /* prevents input focus-ring clipping */

  &:has(dialog:popover-open) {
    z-index: calc(var(--z-nav, 100) + 1);
  }
}

/* Search input */
.filter__search {
  max-inline-size: 20em;
  min-inline-size: 12em;
}

/* Quick filter dropdowns */
.quick-filter {
  position: relative;
  anchor-name: var(--anchor-name); /* Allow inline anchor-name override */

  .input--select {
    background: var(--color-bg);
    border: 1px solid var(--color-gray);
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  /* Active state - has non-default selection */
  &.quick-filter--active:not(.quick-filter--with-default) .input--select {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    font-weight: 500;
  }
}

/* Select button with dropdown arrow */
.input--select {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-space-half);
  max-inline-size: 20ch;

  &::after {
    content: "";
    border: 4px solid transparent;
    border-top-color: currentColor;
    margin-block-start: 2px;
    flex-shrink: 0;
  }
}

/* Clear button - hidden until filters are active */
.filters__manage {
  display: none;
}

.filters--has-filters-set .filters__manage {
  display: flex;
}

/* Popup dropdown - reuses popover.css position-try fallbacks */
.popup {
  inset: auto;
  margin: 0;
  margin-block-start: var(--block-space-half);
  padding: var(--block-space-half);

  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);

  min-inline-size: 15ch;
  max-inline-size: 40ch;
  max-block-size: 50vh;
  overflow-y: auto;

  /* Anchor positioning - reuse fallbacks from popover.css */
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: --below-right, --below-left, --above-left, --above-right;

  /* Fade transition */
  opacity: 0;
  transition: opacity 0.15s ease, display 0.15s ease;
  transition-behavior: allow-discrete;

  &:popover-open {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}

/* Popup title */
.popup__title {
  display: block;
  font-weight: 600;
  padding: var(--block-space-half) var(--inline-space-half);
  border-block-end: var(--border);
  margin-block-end: var(--block-space-half);
}

/* Transparent input for in-popup search */
.form__input--transparent {
  background: transparent;
  border: none;
  border-block-end: var(--border);
  border-radius: 0;
  padding-inline: 0;

  &:focus {
    outline: none;
    border-color: var(--color-blue);
  }
}

/* Popup list - reset list styling */
.popup__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Popup item with checkbox semantics */
.popup__item {
  border-radius: calc(var(--border-radius) / 2);

  &:hover {
    background: var(--color-gray-lightest);
  }

  .checked {
    visibility: hidden;
    flex-shrink: 0;
  }

  &[aria-checked="true"] {
    background: var(--color-blue-light);

    .checked {
      visibility: visible;
    }
  }
}

/* Full-width button inside popup item */
.popup__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--inline-space);
  inline-size: 100%;
  padding: var(--block-space-half) var(--inline-space-half);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
}

/* Date filter - allow calendar overflow */
.popup--date {
  min-inline-size: 20ch;
  overflow: visible;
}

.popup__date-inputs {
  .form-group {
    margin: 0;
  }
}