/* Filter bar: pill groups, the name search and the power range.
   Pills follow DIM's Organizer buttons — dark pill, subtle border, a clearly
   highlighted selected state. */

.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    /* Bleeds through .app-main's 16px padding so this sits full-width and
       flush against the tab bar above (merged header, no gap, no top edge) —
       see layout.css .tab-bar for the seam line itself. */
    margin: -16px -16px 0 -16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 3px 3px;
    position: sticky;
    top: var(--tab-bar-height);
    z-index: 9;
}

/* Four rows, not one wrapping container: Row 4's search input and summary
   stay aligned to their own ends however far the pill-group rows above wrap. */
.filter-row {
    display: flex;
    align-items: flex-start;
}

.filter-row-1,
.filter-row-2,
.filter-row-3 {
    flex-wrap: wrap;
    gap: 8px 18px;
}

.filter-row-4 {
    align-items: center;
    gap: 12px;
}

.filter-row-4-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Separates the Settings Filters block's Synced/Custom mode toggle from the
   Inventory/Collections/Wishlist page tabs sharing the same .filter-pills row
   (08 addendum) — two different button groups, not one continuous set. */
.filter-pill-divider {
    align-self: stretch;
    width: 1px;
    margin: 0 2px;
    background: var(--border);
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 5px;
    /* Fixed regardless of Pill Display mode — icon-only content is shorter
       than icon+text's, and would otherwise shrink the pill. */
    min-height: 24px;
    font-size: 13px;
    color: var(--text-dim);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
}

.filter-pill:hover {
    color: var(--text);
    border-color: var(--accent);
}

.filter-pill.is-selected {
    color: var(--text);
    background: #2c3a4c;
    border-color: var(--accent);
}

/* Rendered as-is, never recoloured. */
.filter-pill-icon {
    display: block;
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1;
    flex: none;
}

/* Damage Type pill glyph, sized up from the shared 18px .filter-pill-icon:
   real coloured SVG reads smaller than the raster icons at the same box, and
   22px is the largest that still clears .filter-pill's 24px min-height
   against its 1px vertical padding without growing the pill. */
.filter-pill-icon-damage {
    display: block;
    width: 22px;
    height: 22px;
    flex: none;
}

/* Enhancement pill glyph (Craftable/Heat, all three pages): real inline SVG
   with its own shipped colour, same rendering as .filter-pill-icon-damage but
   square art (viewBox 0 0 24 24 / 0 0 32 32), so it takes the plain 18px
   shared by most glyph pills rather than that class's up-sized 22px. */
.filter-pill-icon-enhancement {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
}

/* Craftable only — 1px smaller than the shared 18px enhancement glyphs. */
.filter-pill-icon-craftable {
    display: block;
    width: 17px;
    height: 17px;
    flex: none;
}

/* Dupes pills (Single/Multiple) — currentColor like the tag glyphs, so they
   follow the pill's own selected/unselected colour rather than a fixed tint. */
.filter-pill-icon-dupes {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}

.filter-pill-icon-dupes.is-single {
    color: var(--dupes-single);
}

.filter-pill-icon-dupes.is-multiple {
    color: var(--dupes-multiple);
}

/* Slot pill glyph: Roman numeral text stands in for a raster icon (I/II/III
   already reads as a ranked sequence). */
.filter-pill-icon-slot {
    display: block;
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Monochrome SVG mask glyphs. Painted as a mask over a background colour,
   which is the only way CSS can tint them; an <img> cannot be recoloured.
   .mask-glyph (grid.css) carries the shared masking mechanics; this class is
   just the pill's own size. Ammo pills set an explicit colour, weapon type
   pills inherit currentColor. */
.filter-pill-glyph {
    width: 20px;
    height: 18px;
    flex: none;
}

/* Ammo Type pill glyph, sized up from the shared 20x18 .filter-pill-glyph
   (rarity/champion keep the smaller size) — 22px is the tallest that still
   clears .filter-pill's 24px min-height against its 1px vertical padding
   without growing the pill. */
.filter-pill-glyph-ammo {
    width: 24px;
    height: 22px;
    flex: none;
}

/* Tier Level pill glyph: a small grid of diamonds (1-3 per row, up to 2 rows —
   FilterBar.js TIER_DIAMOND_LAYOUT), stacked instead of a single icon. Two
   rows of 8px diamonds plus a 1px row gap is 17px tall, clearing
   .filter-pill's 24px min-height (now unpadded top/bottom) without growing
   the pill. */
.filter-pill-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex: none;
}

.filter-pill-tier-row {
    display: flex;
    gap: 1px;
}

.filter-pill-tier-diamond {
    width: 8px;
    height: 8px;
    flex: none;
}

/* Tags pill glyph: same SVG glyph and colours as the tile's own tag badge
   (grid.css .tile-tag) and the popup's tag buttons (popup.css .popup-btn-icon)
   — one Keep/Trash glyph everywhere. Sized to match the other glyph pills
   (.filter-pill-glyph) rather than the plain 16px it shipped at, which read
   noticeably smaller/thinner next to its neighbours. */
.filter-pill-tag {
    flex: none;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.filter-pill-tag.is-keep {
    color: var(--tag-keep);
}

.filter-pill-tag.is-trash {
    color: var(--tag-trash);
}

.filter-pill-tag.is-none {
    color: var(--tag-none);
}

/* Weapon Type glyphs run at a lower visual weight than the ammo bricks at the
   same box size, so they get their own, bigger one. Source SVGs range from
   ~1.8:1 to ~3.8:1 (viewBox aspect) — fixing both dimensions either clipped
   or shrunk most of them, so height and per-icon aspect ratio (set inline,
   FilterBar.js/icons.js) drive sizing instead. max-width caps the widest
   icons (Sniper Rifle, Sword, Glaive, ...) at 50px — those render shorter
   than 18px tall as a result, since mask-size:contain keeps their aspect
   ratio intact within the narrower box. */
.filter-pill-glyph-weapon {
    height: 18px;
    max-width: 50px;
    flex: none;
}

/* --- power range --- */

.filter-power {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-number {
    width: 74px;
    max-height: 24px;
    padding: 3px 6px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
}

/* type="number" is kept for the numeric keyboard and validation; only the
   spinner is hidden. */
.filter-number::-webkit-inner-spin-button,
.filter-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-number[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- wishlist count range --- */

.filter-wishlist-count {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-wishlist-count-slider {
    position: relative;
    width: 100px;
    height: 12px;
}

/* Full-width white base rail, same look as the native icon-size slider in
   Settings (white background, blue filled portion, circular handles) —
   without this the track was invisible outside the min/max handles. */
.filter-wishlist-count-slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: #fff;
    border-radius: 1.5px;
    transform: translateY(-50%);
}

.filter-wishlist-count-track {
    position: absolute;
    top: 50%;
    height: 3px;
    background: var(--accent);
    border-radius: 1.5px;
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-wishlist-count-min,
.filter-wishlist-count-max {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Only the thumb accepts pointer events — the track stays click-through so
   the two stacked inputs don't fight over drags. Chrome/Edge only, per
   project convention, so no -moz- fallback. */
.filter-wishlist-count-min::-webkit-slider-runnable-track,
.filter-wishlist-count-max::-webkit-slider-runnable-track {
    background: transparent;
    height: 3px;
}

.filter-wishlist-count-min::-webkit-slider-thumb,
.filter-wishlist-count-max::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.filter-wishlist-count-max {
    z-index: 1;
}

/* --- search --- */

.filter-search {
    width: 260px;
    padding: 4px 8px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.filter-search:focus {
    border-color: var(--accent);
    outline: none;
}

/* debug_user-only Weapon ID search, FilterBar.js — narrower than the name
   search since a manifest hash is a fixed-width number, not free text. */
.filter-search-id {
    width: 160px;
}

/* Fireteam player/friend picker (plan_fireteam 06/07) — same surface as the name
   search. The base select rule (base.css) sets no background, which leaves a
   light native control on the dark theme. */
.fireteam-select {
    min-width: 220px;
    padding: 4px 8px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.fireteam-select:focus {
    border-color: var(--accent);
    outline: none;
}

.fireteam-select:disabled {
    opacity: 0.5;
}

.fireteam-select option {
    background: var(--surface-raised);
}

/* --- perk search --- */

.filter-perk {
    position: relative;
    width: 180px;
}

.filter-perk-input {
    width: 100%;
    max-height: 24px;
    padding: 4px 24px 4px 8px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
}

.filter-perk-input:focus {
    border-color: var(--accent);
    outline: none;
}

.filter-perk-input.is-invalid {
    border-color: var(--status-error);
}

.filter-perk-clear {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    line-height: 1;
}

.filter-perk-clear:hover {
    color: var(--text);
}

.filter-perk-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Above every filter row, not just its own — 08 makes Perk Search
       row-placeable, so from Row 1/2 this dropdown now needs to clear the
       rows rendered below it too, not only sit above the weapon grid as it
       did fixed to the last row. */
    z-index: 12;
    margin: 2px 0 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 3px;
    list-style: none;
}

.filter-perk-option {
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
}

.filter-perk-option.is-active,
.filter-perk-option:hover {
    background: var(--surface);
    color: var(--text);
}

.filter-perk-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-perk-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-pill.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- summary --- */

.filter-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 12px;
}