/* Shared list filters, matching the vendor packages toolbar. */
.vf-filters {
    overflow: hidden;
    margin-block: 16px;
    border: 1px solid #e7ebf2;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(30, 41, 59, .04);
}

.vf-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.vf-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(520px, 100%);
    min-width: 0;
}

.vf-search > .bi {
    position: absolute;
    inset-inline-start: 15px;
    color: #8792a5;
    pointer-events: none;
}

.vf-search input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding-inline: 43px 40px;
    border: 1px solid #dce2eb;
    border-radius: 11px;
    background: #fbfcfe;
    color: #1f2b43;
    outline: none;
}

.vf-search input:focus,
.vf-field :is(input, select):focus {
    border-color: #786ff7;
    box-shadow: 0 0 0 3px rgba(88, 76, 244, .11);
}

.vf-clear-search {
    position: absolute;
    inset-inline-end: 9px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #818ca0;
    font-size: 1.15rem;
    cursor: pointer;
}

.vf-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-inline-start: auto;
    padding: 0 16px;
    border: 1px solid #dce2eb;
    border-radius: 11px;
    background: #fff;
    color: #344158;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.vf-toggle.active {
    border-color: #c9c5ff;
    background: #f2f0ff;
    color: #4d43d6;
}

.vf-count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #5b4df2;
    color: #fff;
    font-size: .68rem;
}

.vf-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    padding: 15px 16px;
    border-top: 1px solid #edf0f5;
    background: #f8f9fc;
}

.vf-field {
    flex: 1 1 165px;
    min-width: 145px;
}

.vf-field label {
    display: block;
    margin-bottom: 6px;
    color: #667389;
    font-size: .7rem;
    font-weight: 800;
}

.vf-field :is(input, select) {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 11px;
    border: 1px solid #dce2eb;
    border-radius: 10px;
    background: #fff;
    color: #344158;
    outline: none;
}

.vf-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    margin-inline-start: auto;
}

.vf-actions button {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 10px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.vf-reset {
    border: 1px solid #dce2eb;
    background: #fff;
    color: #344158;
}

.vf-apply {
    border: 1px solid #5b4df2;
    background: #5b4df2;
    color: #fff;
}

.vf-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 11px 16px;
    border-top: 1px solid #edf0f5;
}

.vf-chips-label {
    margin-inline-end: 3px;
    color: #7f8a9c;
    font-size: .69rem;
    font-weight: 800;
}

.vf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid #d9d5ff;
    border-radius: 999px;
    background: #f4f2ff;
    color: #5147ce;
    font-size: .75rem;
    font-weight: 750;
    cursor: pointer;
}

.vf-clear-all {
    margin-inline-start: auto;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #6d7788;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 620px) {
    .vf-toolbar { flex-wrap: wrap; }
    .vf-search { width: 100%; }
    .vf-toggle { margin-inline-start: 0; }
    .vf-field { flex-basis: 100%; }
    .vf-actions { width: 100%; }
    .vf-actions button { flex: 1; }
}