/* Filter bar shared by the submission-history surfaces:
   /contribution-history, /submissions (All submissions) and the profile Submissions tab.
   Holds the status toggles row and the live band-name filter. */

.filters {
    margin-block-end: 1.5rem;
    color: var(--header-text, #f2f2f2);
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.status-filters {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.status-filters label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    cursor: pointer;
}

/* ── Live band-name filter ──────────────────────────────────────────── */

.band-name-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--header-text, #f2f2f2);
    transition: color 0.15s ease;
}

/* Trailing field of the status row (submissions page, profile tab). */
.filters > .band-name-filter {
    flex: 1 1 17rem;
    max-width: 24rem;
}

@media (min-width: 760px) {
    .filters > .band-name-filter {
        margin-inline-start: auto;
    }
}

/* On contribution history it joins the author/reviewer field row instead. */
.user-filters > .band-name-filter {
    flex: 0 1 20rem;
}

.band-name-filter__label {
    white-space: nowrap;
    cursor: pointer;
}

.band-name-filter__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.band-name-filter__icon {
    position: absolute;
    inset-inline-start: 0.55rem;
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.5;
    filter: invert(1);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.band-name-filter input[type="search"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.4rem 1.75rem 0.4rem 1.95rem;
    background: var(--bg-even, #343434);
    color: var(--header-text, #f2f2f2);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 0.25rem;
    font-family: 'EBGaramond-VariableFont_wght', "EB Garamond", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.band-name-filter input[type="search"]::placeholder {
    color: rgba(249, 249, 249, 0.42);
    font-style: italic;
}

.band-name-filter input[type="search"]:hover {
    border-color: rgba(249, 249, 249, 0.28);
}

.band-name-filter input[type="search"]:focus {
    outline: none;
    border-color: rgba(193, 88, 155, 0.75);
    box-shadow: 0 0 0 2px rgba(193, 88, 155, 0.2);
}

.band-name-filter__field:focus-within .band-name-filter__icon {
    opacity: 0.85;
}

/* A custom clear affordance: the native WebKit one is invisible on dark chrome
   and absent in Firefox. */
.band-name-filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.band-name-filter__clear {
    position: absolute;
    inset-inline-end: 0.3rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--header-text, #f2f2f2);
    font-family: 'EBGaramond-VariableFont_wght', "EB Garamond", Georgia, serif;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.band-name-filter__clear:hover,
.band-name-filter__clear:focus-visible {
    opacity: 1;
    color: var(--hover-page, #c1589b);
    background: rgba(193, 88, 155, 0.14);
}

/* An applied filter should read as a deliberate state, not stray text. */
.band-name-filter__field:has(input[type="search"]:not(:placeholder-shown)) .band-name-filter__clear {
    display: inline-flex;
}

.band-name-filter:has(input[type="search"]:not(:placeholder-shown)) {
    color: var(--hover-page, #c1589b);
}

.band-name-filter input[type="search"]:not(:placeholder-shown) {
    border-color: rgba(193, 88, 155, 0.45);
}

/* In-field progress hint while the debounced request is in flight — the table
   itself is swapped, so the spinner inside it never covers this wait. */
.band-name-filter__pulse {
    position: absolute;
    inset-inline: 1px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--hover-page, #c1589b), transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.band-name-filter input[type="search"].htmx-request ~ .band-name-filter__pulse {
    opacity: 0.9;
    animation: bandNameFilterSweep 0.9s linear infinite;
}

@keyframes bandNameFilterSweep {
    from {
        background-position: -50% 0;
    }

    to {
        background-position: 150% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .band-name-filter input[type="search"].htmx-request ~ .band-name-filter__pulse {
        animation: none;
        background: var(--hover-page, #c1589b);
        opacity: 0.65;
    }
}

@media (max-width: 640px) {
    .filters {
        gap: 0.85rem;
    }

    .filters > .band-name-filter {
        flex-basis: 100%;
        max-width: none;
    }

    /* Roomier tap target for clearing the filter on touch. */
    .band-name-filter__clear {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.15rem;
    }

    .band-name-filter input[type="search"] {
        padding-inline-end: 2.1rem;
    }
}