/** MUAADH FILTER — Filter UI (modal panels + chip filters). Single source. */


/* ============================================================================
 * APPENDED (Phase 13 Wave 17 — 2026-05-13): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-filter-toggle.muaadh-filter-toggle--active {
    border-color: var(--action-primary);
    background-color: var(--action-primary);
    color: var(--text-inverse);
}

.muaadh-filter-toggle.muaadh-filter-toggle--active:hover {
    background-color: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--text-inverse);
}

.muaadh-filter-toggle .filter-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-control-xxs);
    height: var(--size-control-xxs);
    padding: 0 6px;
    border-radius: var(--radius-xl);
    background-color: var(--action-primary);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
}

.muaadh-filter-toggle.muaadh-filter-toggle--active .filter-tag {
    background-color: var(--surface-card);
    color: var(--action-primary);
}

.muaadh-filter-toggle.is-applying {
    opacity: 0.7;
    pointer-events: none;
}

.muaadh-filter-toggle.is-applying::after {
    content: '';
    width: 14px;
    height: 14px;
    border: var(--chassis-border-normal) solid currentColor;
    border-top-color: transparent;
    border-radius: var(--chassis-radius-circle);
    animation: m-spinner-border 0.6s linear infinite;
    margin-left: var(--space-1-5);
}

.muaadh-filter-drop {
    position: relative;
    flex-shrink: 0;
    min-width: 160px;
}

.muaadh-filter-drop__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
}

.muaadh-filter-drop__arrow {
    transition: transform var(--chassis-duration-quick) ease;
    flex-shrink: 0;
    opacity: 0.6;
}

.muaadh-filter-drop.is-open .muaadh-filter-drop__arrow {
    transform: rotate(180deg);
}

.muaadh-filter-drop__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--theme-card-bg);
    border: var(--chassis-border-thin) solid var(--border-color);
    border-radius: var(--chassis-radius);
    box-shadow: var(--chassis-shadow-card-elevated);
    z-index: 100;
    padding: var(--space-1) 0;
    margin: 0;
    list-style: none;
}

.muaadh-filter-drop.is-open .muaadh-filter-drop__menu {
    display: block;
}

.muaadh-filter-drop__item {
    padding: var(--space-2) 14px;
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background var(--chassis-duration-fast) ease;
}

.muaadh-filter-drop__item:hover {
    background: var(--surface-elevated);
}

.muaadh-filter-drop__item.muaadh-is-active {
    color: var(--action-primary);
    font-weight: var(--theme-font-semibold);
}