/*
 * RD-2560 — Full-screen filter picker for Performance Delivery and Project Financials.
 *
 * The toolbar's "Filters" dropdown stays as the quick path; this modal is the
 * comfortable one for large catalogs (574 active repos on Macropay, 509 on
 * Puntored, 329 on Pomelo — picking 62 of them inside a 300px dropdown is not
 * workable). Layout: a sidebar listing every filter applicable to the page with
 * a selected/total counter, and a searchable, sortable table of that filter's
 * options on the right.
 *
 * The modal is only a VIEW over the dropdown's existing <select multiple>
 * elements — they remain the source of truth (see dashboard-filters-modal.js),
 * so nothing here touches persistence or the metrics payload.
 *
 * Visual language follows the Leanmote design system (same as edit-tables.css):
 * Metronic light surfaces, slate neutrals, celeste accent (--lm-primary-light
 * #419FFF), 12px radii, ultra-diffuse shadows. Every selector is scoped to
 * `.lm-filtpick`, so the file is inert outside this modal.
 */

.lm-filtpick {
    --lm-filtpick-accent: var(--lm-primary-light, #419FFF);
    --lm-filtpick-accent-soft: #eaf3ff;
    --lm-filtpick-line: #eaecef;
    --lm-filtpick-line-strong: #e0e3e8;
    --lm-filtpick-ink: #0f1320;
    --lm-filtpick-muted: #8a92a6;
    --lm-filtpick-surface: #f7f9fc;

    /* Sidebar + options pane. Fixed sidebar width keeps the counters aligned
       across filters instead of reflowing with the longest label. */
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ─────────────────────────── Sidebar ─────────────────────────── */

.lm-filtpick-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 12px;
    background: var(--lm-filtpick-surface);
    max-height: 56vh;
    overflow: hidden auto;
}

.lm-filtpick-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lm-filtpick-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-nav-item:hover {
        background: #fff;
    }
}

.lm-filtpick-nav-item:active {
    transform: scale(0.99);
}

.lm-filtpick-nav-item.is-active {
    background: #fff;
    color: var(--lm-filtpick-accent);
    box-shadow: 0 1px 2px rgba(15, 19, 32, .05);
}

.lm-filtpick-nav-item:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 1px;
}

.lm-filtpick-nav-label {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Counters are data: never let them wrap or the "62/329" splits mid-token. */
.lm-filtpick-nav-count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 6px;
    background: #eef1f5;
    color: var(--lm-filtpick-muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

.lm-filtpick-nav-badges {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 6px;
}

/* Persisted conditions narrow the list before anything is touched, so the
   sidebar has to say so without opening a column menu. */
.lm-filtpick-nav-cond {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--lm-filtpick-accent-soft);
    color: var(--lm-filtpick-accent);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lm-filtpick-nav-item.is-active .lm-filtpick-nav-count,
.lm-filtpick-nav-count.has-selection {
    background: var(--lm-filtpick-accent-soft);
    color: var(--lm-filtpick-accent);
}

/* ─────────────────────────── Options pane ─────────────────────────── */

.lm-filtpick-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Operator picker inside a column's filter menu. */
.lm-filtpick-select {
    flex: 0 0 auto;
    height: 36px;
    max-width: 148px;
    padding: 0 8px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--lm-filtpick-ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lm-filtpick-select:focus {
    border-color: var(--lm-filtpick-accent);
    box-shadow: 0 0 0 3px var(--lm-filtpick-accent-soft);
    outline: none;
}

/* Pinned conditions (AND-combined). */
.lm-filtpick-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.lm-filtpick-chips-label {
    color: var(--lm-filtpick-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lm-filtpick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid #cfe3ff;
    border-radius: 8px;
    background: var(--lm-filtpick-accent-soft);
    color: #1f6c9f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.lm-filtpick-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #1f6c9f;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-chip-remove:hover { background: #cfe3ff; }
}

.lm-filtpick-chip-remove:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 1px;
}

.lm-filtpick-chip-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.lm-filtpick-chip-clear:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 2px;
}

/* Bulk-action bar: scope-aware selection toggle, the "only selected" switch, the
   count, and the copy/paste tools pinned to the right. */
.lm-filtpick-bulkbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.lm-filtpick-switch {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.lm-filtpick-switch .form-check-input { cursor: pointer; }

.lm-filtpick-switch .form-check-input:disabled {
    cursor: default;
    opacity: .5;
}

.lm-filtpick-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.lm-filtpick-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--lm-filtpick-muted);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-iconbtn:hover {
        background: var(--lm-filtpick-surface);
        border-color: #cfd5de;
        color: var(--lm-filtpick-ink);
    }
}

.lm-filtpick-iconbtn:active { transform: scale(0.97); }

.lm-filtpick-iconbtn:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 1px;
}

.lm-filtpick-iconbtn[disabled] {
    opacity: .5;
    cursor: default;
    transform: none;
}

.lm-filtpick-search {
    flex: 1 1 220px;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--lm-filtpick-ink);
    font-size: 13px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lm-filtpick-search::placeholder { color: var(--lm-filtpick-muted); }

.lm-filtpick-search:focus {
    border-color: var(--lm-filtpick-accent);
    box-shadow: 0 0 0 3px var(--lm-filtpick-accent-soft);
    outline: none;
}

.lm-filtpick-bulk {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--lm-filtpick-ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-bulk:hover {
        background: var(--lm-filtpick-surface);
        border-color: #cfd5de;
    }
}

.lm-filtpick-bulk:active { transform: scale(0.97); }

.lm-filtpick-bulk:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 1px;
}

.lm-filtpick-bulk[disabled] {
    opacity: .5;
    cursor: default;
    transform: none;
}

/* --- Incluir sub-equipos (RD-2617) ----------------------------------------
   Encima de la tabla y no dentro, porque no es una opcion mas de la lista: no
   elige equipos, cambia que significan los que ya estan elegidos. Va sobre la
   superficie hundida del picker para leerse como parte del mismo control que la
   tabla de abajo, con la que comparte el borde y el radio. */
.lm-filtpick-subteams {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    margin-bottom: .6rem;
    padding: .7rem .9rem;
    border: 1px solid var(--lm-filtpick-line);
    border-radius: 12px;
    background: var(--lm-filtpick-surface);
}

.lm-filtpick-subteams .form-check {
    margin: 0;
    flex: 0 0 auto;
}

.lm-filtpick-subteams .form-check-label {
    color: var(--lm-filtpick-ink);
    font-size: .8rem;
    cursor: pointer;
}

.lm-filtpick-subteams-hint {
    /* Debajo del interruptor, no al lado: en una sola linea el texto empuja al
       control contra el borde y las dos cosas se leen como una sola frase larga. */
    padding-left: 2.75rem;
    color: var(--lm-filtpick-muted);
    font-size: .74rem;
    line-height: 1.45;
}

.lm-filtpick-table-box {
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 19, 32, .04);
    max-height: 48vh;
    overflow: hidden auto;
}

.lm-filtpick-table-box::-webkit-scrollbar { width: 10px; }
.lm-filtpick-table-box::-webkit-scrollbar-thumb {
    background: #d7dbe2;
    border-radius: 8px;
    border: 3px solid #fff;
}

.lm-filtpick-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.lm-filtpick-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: var(--lm-filtpick-surface);
    border-bottom: 1px solid var(--lm-filtpick-line-strong);
    color: var(--lm-filtpick-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.lm-filtpick-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-th-sortable:hover { color: var(--lm-filtpick-ink); }
}

.lm-filtpick-th-sortable:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: -2px;
}

.lm-filtpick-sort-caret {
    display: inline-block;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.lm-filtpick-th-sortable.is-sorted .lm-filtpick-sort-caret { opacity: 1; }

.lm-filtpick-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--lm-filtpick-line);
    color: var(--lm-filtpick-ink);
    vertical-align: middle;
}

.lm-filtpick-table tbody tr:last-child td { border-bottom: 0; }

.lm-filtpick-table tbody tr {
    transition: background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-table tbody tr:hover { background: #fbfcfe; }
}

.lm-filtpick-table tbody tr.is-selected { background: var(--lm-filtpick-accent-soft); }

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-table tbody tr.is-selected:hover { background: #e2eefe; }
}

.lm-filtpick-cell-check { width: 44px; }

.lm-filtpick-check {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--lm-filtpick-accent);
    cursor: pointer;
}

.lm-filtpick-check:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 2px;
}

/* Option names can be long (`pomelo-la/transaction-orchestrator-iaac`): truncate
   with the full value exposed through title= rather than wrapping the row. */
.lm-filtpick-cell-name {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.lm-filtpick-cell-meta {
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    white-space: nowrap;
}

.lm-filtpick-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.lm-filtpick-logo {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Select-all as the first row: tinted so it reads as a control, not an option. */
.lm-filtpick-selectall-row td {
    background: var(--lm-filtpick-surface);
    border-bottom: 1px solid var(--lm-filtpick-line-strong) !important;
}

.lm-filtpick-selectall-check {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--lm-filtpick-accent);
    cursor: pointer;
}

.lm-filtpick-selectall-check:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 2px;
}

.lm-filtpick-selectall-label {
    margin: 0;
    color: var(--lm-filtpick-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
}

/* ─────────────────────── Per-column filter (funnel) ─────────────────────── */

.lm-filtpick-th-inner {
    /* inline-flex + flex-start keeps the funnel glued to the label instead of
       drifting to the far edge of a wide column. */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.lm-filtpick-th-check { width: 44px; }

.lm-filtpick-th-label {
    cursor: pointer;
    user-select: none;
    transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-th-label:hover { color: var(--lm-filtpick-ink); }
}

.lm-filtpick-th-label:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 2px;
}

.lm-filtpick-th-label.is-sorted { color: var(--lm-filtpick-ink); }

.lm-filtpick-funnel {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #b5bcc9;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-funnel:hover {
        background: #fff;
        color: var(--lm-filtpick-ink);
    }
}

.lm-filtpick-funnel:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 1px;
}

.lm-filtpick-funnel.is-active {
    background: var(--lm-filtpick-accent-soft);
    color: var(--lm-filtpick-accent);
}

/* Count badge only when a column carries more than one condition. */
.lm-filtpick-funnel-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--lm-filtpick-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    font-variant-numeric: tabular-nums;
}

/* Single floating card, repositioned next to whichever funnel is open.
   It lives INSIDE .modal-content on purpose: Bootstrap sets
   `pointer-events: none` on .modal-dialog and only re-enables it on
   .modal-content, so a sibling of .modal-content would be click-through — every
   click would fall to the modal root and Bootstrap would read it as a backdrop
   click and dismiss the whole modal. `pointer-events: auto` is belt and braces
   in case this ever gets reparented. */
.lm-filtpick-colmenu {
    position: fixed;
    z-index: 1;
    pointer-events: auto;
    width: 360px;
    padding: 14px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 19, 32, .12);
}

.lm-filtpick-colmenu-title {
    margin-bottom: 10px;
    color: var(--lm-filtpick-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lm-filtpick-colmenu-row { margin-bottom: 8px; }

.lm-filtpick-colmenu-sublabel {
    display: block;
    margin-bottom: 4px;
    color: var(--lm-filtpick-muted);
    font-size: 11px;
    font-weight: 600;
}

.lm-filtpick-colmenu-row .lm-filtpick-select,
.lm-filtpick-colmenu-row .lm-filtpick-search {
    width: 100%;
    max-width: none;
}

/* Group builder: each card is a set of AND-ed conditions; the cards are OR-ed.
   Drawn literally — accent rail, numbered badge, indented condition rows and a
   labelled OR pill between cards — so the precedence is readable without
   knowing the rules. */
.lm-filtpick-colmenu-groups {
    max-height: 340px;
    overflow: hidden auto;
    margin-bottom: 10px;
    padding: 10px;
    /* Its own frame: without it the cards floated in the menu and the whole thing
       read as one flat list of lines. */
    border: 1px solid var(--lm-filtpick-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.lm-filtpick-group {
    position: relative;
    padding: 10px 10px 10px 14px;
    border: 1px solid #d7dbe2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 19, 32, .04);
}

/* Accent rail: makes each card read as one unit at a glance. */
.lm-filtpick-group::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: #cfd5de;
    transition: background-color 150ms ease;
}

.lm-filtpick-group.is-active {
    border-color: #cfe3ff;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 19, 32, .06);
}

.lm-filtpick-group.is-active::before {
    background: var(--lm-filtpick-accent);
}

.lm-filtpick-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lm-filtpick-line);
}

.lm-filtpick-group-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lm-filtpick-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lm-filtpick-group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 5px;
    background: #eef1f5;
    color: var(--lm-filtpick-muted);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lm-filtpick-group.is-active .lm-filtpick-group-badge {
    background: var(--lm-filtpick-accent-soft);
    color: var(--lm-filtpick-accent);
}

.lm-filtpick-group.is-active .lm-filtpick-group-name {
    color: var(--lm-filtpick-accent);
}

.lm-filtpick-cond-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--lm-filtpick-line);
    border-radius: 8px;
    background: #fff;
}

.lm-filtpick-cond-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lm-filtpick-ink);
    font-size: 12px;
    font-weight: 600;
}

/* The little "and" between conditions of the same group, on its own rail. */
.lm-filtpick-join-word {
    padding: 4px 0 4px 10px;
    color: var(--lm-filtpick-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lm-filtpick-cond-input {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    padding: 6px;
    border: 1px dashed #cfe3ff;
    border-radius: 8px;
    background: var(--lm-filtpick-accent-soft);
}

.lm-filtpick-cond-input .lm-filtpick-select {
    flex: 0 0 auto;
    max-width: 112px;
    height: 32px;
    font-size: 11.5px;
}

.lm-filtpick-cond-input .lm-filtpick-search {
    flex: 1 1 80px;
    min-width: 0;
    height: 32px;
    font-size: 12px;
}

.lm-filtpick-cond-input .lm-filtpick-bulk {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px;
    border-color: var(--lm-filtpick-accent);
    color: var(--lm-filtpick-accent);
    font-weight: 700;
}

.lm-filtpick-addcond,
.lm-filtpick-addgroup {
    padding: 6px 10px;
    border: 1px dashed var(--lm-filtpick-line-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.lm-filtpick-addcond { width: 100%; text-align: left; }
.lm-filtpick-addgroup { width: 100%; }

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-addcond:hover,
    .lm-filtpick-addgroup:hover {
        border-color: var(--lm-filtpick-accent);
        background: var(--lm-filtpick-accent-soft);
        color: var(--lm-filtpick-accent);
    }
}

.lm-filtpick-addcond:focus-visible,
.lm-filtpick-addgroup:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 1px;
}

/* The OR between groups: a pill on a hairline, so it reads as a boundary and not
   as one more condition. */
.lm-filtpick-or-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.lm-filtpick-or-sep::before,
.lm-filtpick-or-sep::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--lm-filtpick-line-strong);
}

.lm-filtpick-or-sep span {
    flex: 0 0 auto;
    padding: 2px 10px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 9999px;
    background: #fff;
    color: var(--lm-filtpick-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lm-filtpick-colmenu-values {
    max-height: 190px;
    overflow: hidden auto;
    margin-bottom: 8px;
    border: 1px solid var(--lm-filtpick-line);
    border-radius: 8px;
}

.lm-filtpick-colmenu-values::-webkit-scrollbar { width: 8px; }
.lm-filtpick-colmenu-values::-webkit-scrollbar-thumb {
    background: #d7dbe2;
    border-radius: 8px;
    border: 2px solid #fff;
}

.lm-filtpick-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid var(--lm-filtpick-line);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.lm-filtpick-value-row:last-child { border-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-value-row:hover { background: var(--lm-filtpick-surface); }
}

.lm-filtpick-value-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--lm-filtpick-ink);
}

/* Counts are data: tabular and never wrapped. */
.lm-filtpick-value-count {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 6px;
    background: #eef1f5;
    color: var(--lm-filtpick-muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lm-filtpick-colmenu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.lm-filtpick-colmenu-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ─────────────────────── Paste-a-list dialog ─────────────────────── */

/* Full-viewport overlay so it reads as its own modal, even though the node lives
   inside .modal-content (see the markup comment: focus trap). Above the filters
   modal (1055) and its stacked diff (1065); toasts stay on top at 1080. */
.lm-filtpick-paste-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 19, 32, .45);
}

.lm-filtpick-paste-overlay.d-none { display: none !important; }

.lm-filtpick-paste-card {
    width: 100%;
    max-width: 560px;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 19, 32, .22);
}

.lm-filtpick-paste-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lm-filtpick-paste-title {
    margin-bottom: 4px;
    color: var(--lm-filtpick-ink);
    font-size: 14px;
    font-weight: 700;
}

.lm-filtpick-paste-help {
    margin: 0 0 10px;
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    max-width: 62ch;
}

.lm-filtpick-paste-input {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--lm-filtpick-ink);
    font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lm-filtpick-paste-input:focus {
    border-color: var(--lm-filtpick-accent);
    box-shadow: 0 0 0 3px var(--lm-filtpick-accent-soft);
    outline: none;
}

.lm-filtpick-paste-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ─────────────────────────── States ─────────────────────────── */

.lm-filtpick-empty {
    padding: 28px 16px;
    color: var(--lm-filtpick-muted);
    font-size: 13px;
    text-align: center;
}

.lm-filtpick-footnote {
    display: block;
    margin-top: 10px;
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.lm-filtpick-summary {
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.lm-filtpick-summary strong {
    color: var(--lm-filtpick-ink);
    font-weight: 600;
}

.lm-filtpick-difflink {
    color: var(--lm-filtpick-accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lm-filtpick-difflink:hover { border-bottom-color: currentColor; }
}

.lm-filtpick-difflink:focus-visible {
    outline: 2px solid var(--lm-filtpick-accent);
    outline-offset: 2px;
}

/* ─────────────────────── Stacked diff modal ─────────────────────── */

/* Opened with `backdrop: false`: a second Bootstrap backdrop lands on the same
   z-index as the first and ends up under the parent modal, so the dim is painted
   by this element itself (it already covers the viewport). */
.lm-filtpick-diff-modal {
    z-index: 1065;
    background: rgba(15, 19, 32, .35);
}

/* ─────────────────────────── Diff body ─────────────────────────── */

.lm-filtpick-diff-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lm-filtpick-diff-title {
    color: var(--lm-filtpick-ink);
    font-size: 13px;
    font-weight: 700;
}

.lm-filtpick-diff-body {
    max-height: 52vh;
    overflow: hidden auto;
    border: 1px solid var(--lm-filtpick-line-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 19, 32, .04);
}

.lm-filtpick-diff-body::-webkit-scrollbar { width: 10px; }
.lm-filtpick-diff-body::-webkit-scrollbar-thumb {
    background: #d7dbe2;
    border-radius: 8px;
    border: 3px solid #fff;
}

.lm-filtpick-diff-block {
    padding: 12px 14px;
    border-bottom: 1px solid var(--lm-filtpick-line);
}

.lm-filtpick-diff-block:last-child { border-bottom: 0; }

.lm-filtpick-diff-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.lm-filtpick-diff-filter {
    color: var(--lm-filtpick-ink);
    font-size: 13px;
    font-weight: 700;
}

.lm-filtpick-diff-count {
    color: var(--lm-filtpick-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lm-filtpick-diff-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.lm-filtpick-diff-kind {
    flex: 0 0 96px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lm-filtpick-diff-added .lm-filtpick-diff-kind { color: #346538; }
.lm-filtpick-diff-removed .lm-filtpick-diff-kind { color: #9f2f2d; }

.lm-filtpick-diff-values {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.lm-filtpick-diff-value {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.lm-filtpick-diff-added .lm-filtpick-diff-value {
    background: #edf3ec;
    color: #346538;
}

.lm-filtpick-diff-removed .lm-filtpick-diff-value {
    background: #fdebec;
    color: #9f2f2d;
    text-decoration: line-through;
}

/* ─────────────────────────── Narrow screens ─────────────────────────── */

@media (max-width: 767.98px) {
    .lm-filtpick {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    /* The sidebar becomes a horizontal chip rail so the options table keeps the
       full width — a 232px column would leave nothing usable next to it. */
    .lm-filtpick-nav {
        flex-direction: row;
        max-height: none;
        overflow: auto hidden;
    }

    .lm-filtpick-nav-item { width: auto; }

    .lm-filtpick-table-box { max-height: 40vh; }
}

/* ─────────────────────────── Reduced motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lm-filtpick-nav-item,
    .lm-filtpick-nav-count,
    .lm-filtpick-bulk,
    .lm-filtpick-iconbtn,
    .lm-filtpick-search,
    .lm-filtpick-addcond,
    .lm-filtpick-addgroup,
    .lm-filtpick-group::before,
    .lm-filtpick-paste-input,
    .lm-filtpick-select,
    .lm-filtpick-chip-remove,
    .lm-filtpick-difflink,
    .lm-filtpick-table tbody tr,
    .lm-filtpick-sort-caret,
    .lm-filtpick-th-sortable {
        transition-duration: 0ms;
    }

    .lm-filtpick-nav-item:active,
    .lm-filtpick-bulk:active {
        transform: none;
    }
}

/* Dynamic selection (rules): the switch lives at the end of the chips row. */
.lm-filtpick-rule-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px dashed var(--lm-filtpick-border);
    color: var(--lm-filtpick-muted);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.lm-filtpick-rule-toggle.is-on {
    border-style: solid;
    border-color: var(--lm-filtpick-accent);
    background: var(--lm-filtpick-accent-soft);
    color: var(--lm-filtpick-accent);
}

.lm-filtpick-rule-toggle input {
    accent-color: var(--lm-filtpick-accent);
    margin: 0;
}

.lm-filtpick-rule-toggle.is-disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.lm-filtpick-rule-hint {
    font-weight: 400;
    color: var(--lm-filtpick-muted);
}

/* A rule-locked row still shows its state but reads as not hand-editable. */
tr.is-rule-locked .lm-filtpick-check,
tr.is-rule-locked .lm-filtpick-row-label {
    cursor: not-allowed;
}

tr.is-rule-locked .lm-filtpick-check {
    opacity: 0.55;
}

.lm-filtpick-nav-rule {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--lm-filtpick-accent);
    color: #fff;
}

/* Rule badge on the quick dropdown's label: the select is locked, this says why. */
.lm-filtpick-label-rule {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--lm-filtpick-accent);
    color: #fff;
    vertical-align: middle;
}

/* Per-team repo lens on PF's Team Allocation rows. */
.pf-team-lens-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    /* Concrete colors: the --lm-filtpick-* variables are scoped to the modal
       container and these controls live in the table. */
    color: #99a1b7;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.12s ease;
}

tr:hover .pf-team-lens-btn,
.pf-team-lens-btn:focus-visible {
    opacity: 1;
}

.pf-team-lens-btn:hover {
    background: #eaf3ff;
    color: #419FFF;
}

.pf-team-lens-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #eaf3ff;
    color: #419FFF;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

/* Cuando lo elegido no tiene nada colgando, el interruptor no puede cambiar un
   numero. Se apaga y se atenua en vez de desaparecer: que se mueva la caja al
   elegir equipos es peor que un control en gris. */
.lm-subteams--idle {
    opacity: .5;
}