/* The public list filter bar (app/templates/partials/list_filter_bar.html).

   Every control sits in a cell of one width, so the grid wraps between cells
   at widths set by the screen alone — never mid-control, and never somewhere
   else because a label is longer in another language. auto-fit rather than
   auto-fill: the columns nothing fills collapse, so the cells stretch to fill
   the row. The widths stay equal within a row; a last row with fewer cells
   than the rows above it has wider cells than they do. */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem .75rem;
    align-items: end;
}

/* A grid item's minimum width is its content's by default, which would let a
   long select option or label push the cell wider than its track. */
.filter-cell {
    min-width: 0;
}

/* A label longer than its cell is cut short rather than wrapped; the template
   puts the whole of it in the title. */
.filter-grid .form-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A range puts two number inputs in one cell, and at the narrowest the
   browser's spinner arrows would take most of each, clipping a year. Without
   them a year fits; the arrow keys still step the value. */
.filter-grid .input-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.filter-grid .input-group input[type="number"]::-webkit-outer-spin-button,
.filter-grid .input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* The tag pills: a vocabulary, not one control, so it takes a row of its own
   — and the last one, after the sort, so the one-width cells above it keep
   their grid. */
.filter-cell-wide {
    grid-column: 1 / -1;
    order: 1;
}

/* The tag filter: the badges tag_list.html shows on a card, each over a
   visually hidden checkbox. Ticked, a badge takes the primary colour; the
   checkbox keeps the keyboard, so focus is drawn on the badge. Tabler's
   .bg-secondary-lt sets both colours !important, so the states that replace
   them have to as well. */
.tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.tag-filter-item {
    cursor: pointer;
    margin: 0;
}
.tag-filter-item:hover .badge {
    background-color: color-mix(in srgb, var(--tblr-secondary) 24%, transparent) !important;
}
.tag-filter-input:checked + .badge {
    background-color: var(--tblr-primary) !important;
    color: var(--tblr-primary-fg, #fff) !important;
}
.tag-filter-input:focus-visible + .badge {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 1px;
}