/*
 * filter-panel.css — consistent filter/search panel action buttons across all
 * admin listing pages (CRM server-side panels, the new client-side panels, and
 * the restyled legacy panels).
 *
 * The theme renders form-control-sm / form-select-sm ~36px tall, but btn-sm
 * ~30px, so filter buttons looked short and uneven next to the inputs. These
 * rules give every filter-panel button one uniform height/size that matches the
 * inputs — regardless of whether the markup uses btn-sm (CRM pages) or a regular
 * btn (legacy pages) — and standardise the two-button action group (Tìm / Xóa)
 * as equal-width, side-by-side, 20px apart.
 */

/* Uniform filter-panel action buttons, matched to the height of the inputs. */
form[method="get"].row .btn,
.row [data-list-apply],
.row #btnSearch,
.row #btnReset {
    min-height: 38px;
    padding: 0 0.9rem;
    font-size: 0.82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
 * Flex filter panels (crm-filter-form): an alternative to the Bootstrap grid for
 * GET filter forms whose field count doesn't divide evenly into 12 columns
 * (e.g. the Tickets panel: 6 fields + an action button). Fields flex to an even
 * width and wrap cleanly; the action button stays inline at its natural size.
 * This avoids the col-md-2 × 7 = 14-unit overflow that pushed the button onto a
 * crowded second line.
 */
.crm-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.crm-filter-form .crm-filter-field {
    flex: 1 1 170px;
    min-width: 150px;
    max-width: 240px;
}

/*
 * Select filters are enhanced by Select2 (crm-select.js), which replaces the
 * native <select> with a sibling .select2-container that defaults to the full
 * parent width. That full-width box is the actual flex item, so without this it
 * forces every field onto its own row. Size the container like the other fields
 * (width:auto beats Select2's inline pixel width; max-width then caps it).
 */
.crm-filter-form .select2-container {
    flex: 1 1 170px;
    min-width: 150px;
    max-width: 240px;
    width: auto !important;
}

.crm-filter-form .btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 1.1rem;
}

/* Phones: fields take the full row, the action button spans full-width. */
@media (max-width: 575.98px) {
    .crm-filter-form .crm-filter-field {
        max-width: none;
        flex-basis: 100%;
    }

    .crm-filter-form .btn {
        width: 100%;
    }
}

/* Two-button action group: side by side, equal size, 20px apart. */
.crm-filter-actions {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.crm-filter-actions .btn {
    flex: 1 1 0;
    width: auto;
    white-space: nowrap;
}

/*
 * Phones: keep the whole filter panel inside the device screen. Stack the two
 * action buttons full-width (instead of squeezing them side-by-side), tighten
 * the gap, and add a little top spacing since the action group has no label to
 * align with the inputs above it.
 */
@media (max-width: 575.98px) {
    .crm-filter-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 0.25rem;
    }

    .crm-filter-actions .btn {
        flex: 0 0 auto;
        width: 100%;
    }
}