/* Event-style filters shared by list views and embedded pickers. */
html body.mds-ui :is(.mds-filter-panel, .user-filter-bar, .user-filter-field, .bible-reader__filterbar, .bible-book-search, .chat-filter-tabs) {
    --mds-radius-control: 12px;
}

html body.mds-ui .mds-filter-panel {
    min-width: 0;
    margin-bottom: 20px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mds-border-soft);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--mds-bg-soft), var(--mds-surface));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    text-align: start;
}

html body.mds-ui .mds-filter-panel .campaign-filter-summary {
    padding: 14px 18px;
    color: var(--mds-ink);
    background: transparent;
    text-align: start;
}

html body.mds-ui .mds-filter-panel .campaign-filter-summary:hover {
    background: var(--mds-surface-soft);
}

html body.mds-ui .mds-filter-panel :is(.campaign-filter-summary__icon, .campaign-filter-summary__meta) {
    flex-shrink: 0;
    border-color: var(--mds-border);
    background: var(--mds-surface);
    color: var(--mds-link);
}

html body.mds-ui .mds-filter-panel .campaign-filter-summary__title {
    color: var(--mds-link);
}

html body.mds-ui .mds-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: start;
    gap: 12px;
    margin: 0;
    padding: 16px 18px 18px;
    border: 0;
    border-top: 1px solid var(--mds-border-soft);
    border-radius: 0;
    background: var(--mds-surface-soft);
    box-shadow: none;
    text-align: start;
}

html body.mds-ui .mds-filter-grid > :is(label, .user-filter-field, .filters__group) {
    display: grid;
    flex: 1 1 150px;
    min-width: 0;
    gap: 6px;
    margin: 0;
}

html body.mds-ui .mds-filter-grid > :is(.user-filter-field--grow, .filters__group--grow, .campaign-filter-field--search) {
    flex: 2 1 240px;
}

html body.mds-ui :is(.user-filter-field > label, .mds-filter-grid label > span, .mds-filter-grid .filters__group > label, .bible-book-search > label) {
    margin: 0;
    color: var(--mds-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
}

html body.mds-ui :is(.user-filter-bar, .bible-reader__filterbar, .bible-book-search) {
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--mds-border-soft);
    border-radius: 18px;
    background: var(--mds-surface-soft);
}

/* A list form already has the shared panel surrounding it. */
html body.mds-ui .mds-filter-panel > .user-filter-bar {
    padding: 16px 18px 18px;
    border-width: 1px 0 0;
    border-radius: 0;
}

html body.mds-ui :is(.user-filter-field, .bible-book-search) {
    min-width: 0;
}

html body.mds-ui :is(.mds-filter-grid, .user-filter-field, .bible-reader__filterbar, .bible-book-search) :is(input[type="search"], input[type="date"], select) {
    height: 48px;
}

html body.mds-ui .user-filter-field :is(input[type="search"], select) {
    width: 100%;
}

html body.mds-ui :is(.mds-filter-grid, .user-filter-field, .bible-reader__filterbar, .bible-book-search) :is(input, select):focus {
    border-color: var(--mds-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    outline: none;
}

html body.mds-ui .mds-filter-grid :is(.user-filter-actions, .filters__actions, .campaign-filter-actions, .campaign-submission-filter-actions) {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 10px;
    margin: 0;
    padding: 0;
}

html body.mds-ui .mds-filter-grid button[type="submit"] {
    min-height: 44px;
    padding: 10px 14px;
    background: var(--mds-action);
    border-color: transparent;
    color: var(--mds-on-action);
    box-shadow: none;
}

html body.mds-ui .mds-filter-grid button[type="submit"]:hover {
    background: var(--mds-action-hover);
}

html body.mds-ui .mds-filter-grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--mds-muted);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

html body.mds-ui .mds-filter-grid a:hover {
    color: var(--mds-link);
    background: transparent;
    text-decoration: underline;
}

html body.mds-ui .chat-filter-tabs a {
    min-height: 44px;
    border: 1px solid var(--mds-border);
    border-radius: 12px;
    background: var(--mds-surface);
    color: var(--mds-muted);
    box-shadow: none;
}

html body.mds-ui .chat-filter-tabs a.is-active {
    border-color: var(--mds-action);
    background: var(--mds-action);
    color: var(--mds-on-action);
}