/* ============================================================================
   VRYNO FILTERS
   ============================================================================
   Styling for the four things vryno-filters.js adds to every filter panel: the
   pin, the chip bar, the chip's remove cross, and the Create filter row.

   The chip itself is NOT restyled. style.css already carries .pinned-filter,
   .pinned-filter-btn and .pinned-filter-remove from the page this pattern was
   designed on, so the chips keep that geometry and only gain what was missing:
   a colour per filter, and a cross that appears on hover.
============================================================================ */

/* ---------------------------------------------------------------------------
   THE PIN
   No page had CSS for .pin-filter-btn -- the 38 pages that shipped one
   positioned it with an inline style attribute, one page at a time. This does
   it once, for every pin, and gives it a hit area a finger can find.
   --------------------------------------------------------------------------- */
.filter-set-content-head a {
    /* room for the pin, so a long filter name cannot run under it */
    padding-right: 26px;
}

.pin-filter-btn.vf-pin {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.pin-filter-btn.vf-pin:hover {
    background: var(--primary-transparent);
}

.pin-filter-btn.vf-pin:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pin-filter-btn.vf-pin i {
    font-size: 15px;
    /* --gray-500 rather than --gray-400: measured, #a0a0a0 on white is 2.3:1
       and this glyph is the only thing telling you the control exists. */
    color: var(--gray-500);
    transition: transform .15s ease;
}

.pin-filter-btn.vf-pin:hover i {
    color: var(--primary);
    /* A pin that tilts on hover reads as "this does something" before the
       tooltip has appeared. */
    transform: rotate(-25deg);
}

.pin-filter-btn.vf-pin.is-pinned i {
    color: var(--primary);
    transform: none;
}

/* The pin is a 22px target inside a header row that is only ~34px tall, so on
   touch it gets the 44px the WCAG target-size guidance asks for without
   changing the row's height. */
@media (hover: none) {
    .pin-filter-btn.vf-pin::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* No hover state on touch, so the pin must be legible unhovered. */
    .pin-filter-btn.vf-pin i {
        color: var(--gray-600);
    }
}

/* ---------------------------------------------------------------------------
   THE CHIP BAR
   Sits immediately after the filter button in the toolbar, which is where the
   design put it. It wraps rather than scrolls: a row of chips that scrolls
   sideways hides the ones you pinned most recently.
   --------------------------------------------------------------------------- */
.vf-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* Nothing pinned: no gap left behind in the toolbar.
   Written twice, and the second is not redundant. style.css already styles
   #pinnedFiltersContainer -- display:flex, the gap, the wrap, even the chip
   dropdown's shadow -- which is how we know this container was designed and
   only its markup was missing. The first bar on a page takes that id so
   anything still looking for it finds the real one, and an id selector beats a
   class, so `.vf-bar-empty` alone loses to `#pinnedFiltersContainer{display:
   flex}`. Measured in the browser, not assumed. Matching the id here wins on
   specificity without reaching for !important. */
.vf-bar-empty,
#pinnedFiltersContainer.vf-bar-empty {
    display: none;
}

/* --vf-chip-bg and --vf-chip-ink are set per chip by the script, from a
   palette of eight. Both themes read from the same two variables, so a chip's
   colour is decided in one place. */
.vf-chip .vf-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 11px;
    font-size: 13px;
    background: var(--vf-chip-bg, var(--primary-transparent));
    color: var(--vf-chip-ink, var(--primary));
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}

.vf-chip .vf-chip-btn:hover {
    filter: brightness(.97);
}

.vf-chip .vf-chip-btn:focus-visible {
    outline: 2px solid var(--vf-chip-ink, var(--primary));
    outline-offset: 1px;
}

.vf-chip .vf-chip-icon {
    font-size: 15px;
}

.vf-chip .vf-chip-chev {
    font-size: 13px;
    opacity: .8;
    transition: transform .15s ease;
}

.vf-chip .vf-chip-btn[aria-expanded="true"] .vf-chip-chev {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   THE REMOVE CROSS
   Hidden until the chip is hovered, or something inside it has focus -- but
   its space is reserved at all times. Revealing a button that also widened the
   chip would shove every chip to its right along on every hover, which is the
   kind of movement that makes a toolbar feel unstable.
   --------------------------------------------------------------------------- */
.vf-chip .vf-chip-x {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-500);
    /* space kept, glyph withheld */
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
    transition: opacity .13s ease, transform .13s ease, color .13s ease,
        background-color .13s ease;
}

.vf-chip:hover .vf-chip-x,
.vf-chip:focus-within .vf-chip-x {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.vf-chip .vf-chip-x:hover {
    color: var(--danger);
    background: var(--danger-transparent);
}

.vf-chip .vf-chip-x:focus-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    outline: 2px solid var(--danger);
    outline-offset: 1px;
}

.vf-chip .vf-chip-x i {
    font-size: 12px;
}

/* Touch has no hover, so there the cross is simply always there. */
@media (hover: none) {
    .vf-chip .vf-chip-x {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}

/* Someone who has asked for less motion gets the cross without the fade. */
@media (prefers-reduced-motion: reduce) {

    .vf-chip .vf-chip-x,
    .vf-chip .vf-chip-chev,
    .pin-filter-btn.vf-pin i {
        transition: none;
    }

    .pin-filter-btn.vf-pin:hover i {
        transform: none;
    }
}

.vf-chip-menu {
    min-width: 240px;
}

/* ---------------------------------------------------------------------------
   CREATE FILTER
   --------------------------------------------------------------------------- */
.vf-create {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
    border-radius: 10px;
    /* background: var(--primary-transparent); */
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.vf-create:hover {
    border-style: solid;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.vf-create:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.vf-create-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

.vf-create-note {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    /* On --primary-transparent, --gray-600 measures 4.9:1. */
    color: var(--gray-600);
    white-space: nowrap;
}

/* A filter the user built, marked as theirs so it is obvious which of the
   groups in the panel can be edited and deleted. */
.vf-custom-badge {
    margin-left: 6px;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--primary-transparent);
    /* #4a35b8 on --primary-transparent measures 5.1:1; --primary itself is
       4.4:1 there, just under. */
    color: #4a35b8;
}

@media (max-width: 575.98px) {
    .vf-create-note {
        display: none;
    }

    .vf-bar {
        /* On a phone the toolbar is already two rows; chips take their own. */
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   DARK
   Only the surfaces and the two inks that were tuned for a light tint. The
   chip colours come from the same variables, swapped per chip by the script.
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] .vf-chip .vf-chip-btn {
    background: var(--vf-chip-dbg, rgba(255, 255, 255, .08));
    color: var(--vf-chip-dink, var(--dtf-heading, #e8eaff));
}

[data-bs-theme="dark"] .vf-chip .vf-chip-x {
    color: var(--dtf-text, #a9b1c7);
}

[data-bs-theme="dark"] .vf-chip .vf-chip-x:hover {
    color: #f13939;
    background: #2c0b0e;
}

[data-bs-theme="dark"] .pin-filter-btn.vf-pin i {
    color: var(--dtf-text, #a9b1c7);
}

[data-bs-theme="dark"] .pin-filter-btn.vf-pin:hover i,
[data-bs-theme="dark"] .pin-filter-btn.vf-pin.is-pinned i {
    color: #a99bff;
}

[data-bs-theme="dark"] .vf-create {
    background: rgba(103, 76, 226, .18);
    color: #a99bff;
    border-color: rgba(103, 76, 226, .5);
}

[data-bs-theme="dark"] .vf-create:hover {
    background: rgba(103, 76, 226, .28);
    color: #a99bff;
}

[data-bs-theme="dark"] .vf-create-plus {
    background: #674ce2;
    color: #fff;
}

[data-bs-theme="dark"] .vf-create-note {
    color: var(--dtf-text, #a9b1c7);
}

[data-bs-theme="dark"] .vf-custom-badge {
    background: rgba(103, 76, 226, .26);
    color: #a99bff;
}

/* ============================================================================
   THE FILTER PANEL'S OWN ACTIONS
   ============================================================================
   The Reset / Filter row at the foot of the panel was inside the part that
   scrolls.

   style.css gives .filter-set-view a 300px max-height and overflow:auto, and
   the two buttons are the last thing inside it -- after the search box and
   the whole accordion of filter groups. Two consequences, both visible:

     * the buttons are below the fold. On a panel with more than three or four
       groups you have to scroll past every filter to reach Reset, and on the
       Contacts list they sat at 362px inside a box that ends at 394px, right
       against the panel's rounded edge;
     * they were being crushed. As a flex item in a scrolling column with no
       shrink floor, the row measured 16px tall against a button's own 30-odd
       -- which is why the pair read as one clipped strip rather than two
       controls.

   Pinning the row to the bottom of the scroller fixes both without touching
   the markup on the 200-odd pages that carry this panel: the filter groups
   scroll behind it, the actions stay where they can be reached, and the row
   keeps its full height.
============================================================================ */

.filter-set-view {
    /* A flex column so the row below can refuse to shrink. */
    display: flex;
    flex-direction: column;
}

/* The action row: the panel's last block, the one holding Reset. */
.filter-set-view > .d-flex:last-child {
    position: sticky;
    bottom: -1rem;
    /* Cancels .filter-set-view's own p-3, so the bar spans the full width and
       the list does not appear to run out from under it. */
    margin: 6px -1rem -1rem;
    padding: 8px 1rem;
    flex-shrink: 0;
    background: var(--white);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    z-index: 2;
}

/* Sized to the product's own control height rather than Bootstrap's default.
   A filter panel is a small, frequent thing -- the same 28px the toolbar
   above the list uses, not the 38px a stock .btn draws. !important because
   vryno-toolbar.css hands menu buttons back to Bootstrap's metrics, and this
   pair is the one place that wants to be smaller than that. */
.filter-set-view > .d-flex:last-child > .btn.w-100,
.filter-set-view > .d-flex:last-child > .btn.btn-sm,
.dropdown-menu .d-flex > .btn.w-100.btn-sm,
.dropdown-menu .d-flex > .btn.w-100.btn-primary,
.dropdown-menu .d-flex > .btn.w-100.btn-outline-light {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
}

[data-bs-theme="dark"] .filter-set-view > .d-flex:last-child {
    background: var(--dtf-card, #1b1c31);
    border-top-color: var(--dtf-border, #33344a);
}