/* ─────────────────────────────────────────────────────────────────
   Filter bar: the row of chips that sits above a grid.

   Usage:
       <div class="filter-bar d-flex flex-wrap align-items-center gap-2 mb-2">
           <span class="filter-chip chip-status">
               <span class="chip-key">Status</span>Active
               <a class="chip-x" href="..."><i class="ti ti-x"></i></a>
           </span>
           ... chips ...
           <div class="ms-auto"> Add filter dropdown </div>
       </div>

   Deliberately borderless: the bar should read as "what you are looking
   at", not as a form parked above the grid. Every control inside is a
   plain link carrying the filter in the query string.
   ───────────────────────────────────────────────────────────────── */

.filter-bar { min-height: 32px; }

/* ── Chips ────────────────────────────────────────────────────── */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .4rem .22rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
}

/* The key ("Status") is context, the value is the point - so the key
   recedes and the value keeps the chip's weight. */
.filter-chip .chip-key { font-weight: 400; opacity: .7; }

.filter-chip .chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: inherit;
    opacity: .6;
    text-decoration: none;
}
.filter-chip .chip-x:hover { opacity: 1; background: rgba(0, 0, 0, .09); }
.filter-chip .chip-x i { font-size: .8rem; }

/* One tint per filter kind, so a glance at the colour says which
   dimension is narrowed without reading the key. */
.chip-status   { background: rgba( 32, 107, 196, .10); color: #206bc4; }
.chip-modules  { background: rgba(165,  89, 210, .12); color: #a559d2; }
.chip-plan     { background: rgba( 12, 166, 120, .12); color: #0ca678; }
.chip-date     { background: rgba( 15,  23,  42, .07); color: #4b5563; }
.chip-mode     { background: rgba(165,  89, 210, .12); color: #a559d2; }
.chip-env      { background: rgba(247, 103,   7, .12); color: #f76707; }
.chip-gst      { background: rgba( 12, 166, 120, .12); color: #0ca678; }
.chip-invoice  { background: rgba( 32, 107, 196, .10); color: #206bc4; }
.chip-key-text { background: rgba( 15,  23,  42, .07); color: #4b5563; }

/* ── "Add filter" menu ────────────────────────────────────────── */
/* The check-mark slot is always rendered so labels line up whether or
   not the value is the active one. */
.filter-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.filter-menu .dropdown-item i { width: 14px; font-size: .8rem; }

/* Wide variant: groups laid out in columns so a long filter set stays
   one popover instead of a menu you have to scroll. */
.filter-menu-wide {
    min-width: 470px;
    padding: .75rem .25rem .5rem;
}
/* Two columns rather than a free-wrapping row: groups pair up predictably
   (Date | Status, Environment | GST) instead of stacking into one tall
   column when the popover runs out of width. */
.filter-menu-wide .filter-menu-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1.5rem;
    padding: 0 .75rem;
}
.filter-menu-wide .filter-menu-col { min-width: 140px; }
.filter-menu-wide .dropdown-header { padding-left: .5rem; padding-right: .5rem; }
.filter-menu-wide .dropdown-item { border-radius: 6px; }

/* Free-text / date inputs live under a divider at the foot of the menu. */
.filter-menu-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .5rem;
    padding: .75rem .75rem 0;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}
.filter-menu-forms .form-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--tblr-secondary, #6c7a91);
    margin-bottom: .25rem;
}

@media (max-width: 640px) {
    .filter-menu-wide { min-width: 280px; }
    .filter-menu-wide .filter-menu-cols { grid-template-columns: 1fr; }
}