.ca-filter {
    margin: 1rem 0;
}

    .ca-filter .filter-grid {
        display: grid;
        gap: .5rem;
    }

    .ca-filter .labels,
    .ca-filter .inputs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: .75rem;
        align-items: end;
    }

    .ca-filter .labels label {
        font-size: 0.85rem;
        font-weight: 600;
    }

    .ca-filter .inputs .field {
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    .ca-filter .inputs .label-compact {
        display: none;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .ca-filter .actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: .75rem;
        gap: .75rem;
        flex-wrap: wrap;
    }

    .ca-filter .pager {
        margin-left: .75rem;
        white-space: nowrap;
    }

.pager-buttons {
    display: flex;
    gap: .5rem;
    margin: .75rem 0 1rem;
    flex-wrap: wrap;
}

.actions-cell {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ca-filter .labels {
        display: none;
    }

    .ca-filter .inputs {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .ca-filter .inputs .label-compact {
        display: block;
    }
}