/* Filter Archiv — SD-54
 * Row of labelled dropdowns above the archive list.
 * Native <select> with a custom chevron; Figma 6393-53311 / 8291-4882.
 */

.filter-archiv {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dk-space-04);
}

.filter-archiv__field {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-01);
  min-inline-size: 0;
}

.filter-archiv__label {
  color: var(--dk-color-black);
}

/* --- Control: native select + chevron overlay --- */

.filter-archiv__control {
  position: relative;
  display: block;
}

.filter-archiv__select {
  inline-size: 100%;
  block-size: 3rem; /* 48px */
  padding-inline: var(--dk-space-04) var(--dk-space-08);
  border: 1px solid var(--dk-color-black);
  border-radius: 1000px;
  background-color: var(--dk-color-white);
  color: var(--dk-color-black);
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

/* Aktiver Filter — die Pille kehrt sich um (Figma 8291-4882). Nur die
   Eingrenzung faerbt sich, „Alle" und die Grundsortierung bleiben weiss. */
.filter-archiv__control--active .filter-archiv__select {
  background-color: var(--dk-color-black);
  color: var(--dk-color-white);
}

/* Das Options-Menue erbt in Chrome die Farben des Selects — dort wieder
   schwarz auf weiss, sonst steht die aufgeklappte Liste weiss auf weiss. */
.filter-archiv__control--active .filter-archiv__select option {
  background-color: var(--dk-color-white);
  color: var(--dk-color-black);
}

.filter-archiv__control--active .filter-archiv__chevron svg {
  color: var(--dk-color-white);
}

.filter-archiv__select:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 6px var(--dk-color-focus);
}

/* Chevron is decorative — the select itself stays the interactive target. */
.filter-archiv__chevron {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--dk-space-04);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.filter-archiv__chevron svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* M — two columns (aligned to the standard 1024–1279px breakpoint) */
@media (max-width: 79.9375rem) {
  .filter-archiv {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* S — stacked from 1023px down */
@media (max-width: 63.9375rem) {
  .filter-archiv {
    grid-template-columns: 1fr;
  }
}