/* Filter bar — nút bộ lọc, panel filter, grid select (dùng chung mọi trang admin) */
:root {
    --toolbar-btn-bg: #9f9f9f;
    --toolbar-btn-bg-hover: rgb(114, 184, 253);
    --toolbar-btn-color: #f3f3f3;
    --toolbar-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --toolbar-btn-shadow-hover: 0 2px 5px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    --toolbar-btn-font-weight: 500;
    --toolbar-btn-font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --filter-transition: 0.2s ease;
}

.btn-filter {
    position: relative;
    width: 38px;
    height: 30px;
    padding: .25rem .6rem;
    border: none;
    border-radius: var(--toolbar-btn-radius, .3rem);
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
    background-color: var(--toolbar-btn-bg);
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: var(--toolbar-btn-shadow);
    transition: background-color var(--filter-transition), box-shadow var(--filter-transition);
}

.btn-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../../images/admin/ic-filter.svg) center / 18px no-repeat;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.btn-filter:hover {
    background-color: var(--toolbar-btn-bg-hover);
    box-shadow: var(--toolbar-btn-shadow-hover);
}

/* Hàng toolbar cạnh filter — đồng bộ màu + box-shadow mọi nút */
label.btn-filter + div.row .btn:not(.display-none),
label.btn-filter + div.row .label,
label.btn-filter + div.row p.label {
    box-shadow: var(--toolbar-btn-shadow);
    font-family: var(--toolbar-btn-font-family) !important;
    font-weight: var(--toolbar-btn-font-weight);
    transition: background-color var(--filter-transition), box-shadow var(--filter-transition), filter var(--filter-transition);
}

label.btn-filter + div.row .btn.left,
label.btn-filter + div.row a.label,
label.btn-filter + div.row p.label {
    background-color: var(--toolbar-btn-bg);
    color: var(--toolbar-btn-color);
    border: none;
}

label.btn-filter + div.row .btn.btn-add-on-list {
    box-shadow: var(--toolbar-btn-shadow);
}

label.btn-filter + div.row .btn.left:hover,
label.btn-filter + div.row a.label:hover {
    background-color: var(--toolbar-btn-bg-hover);
    box-shadow: var(--toolbar-btn-shadow-hover);
}

label.btn-filter + div.row .btn.btn-add-on-list:hover {
    box-shadow: var(--toolbar-btn-shadow-hover);
    filter: brightness(1.07);
    transform: none;
}

.filter {
    width: 100%;
    display: none;
}

.grid-group-filter {
    width: 100%;
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    grid-template-columns: calc(20% - 12px) calc(20% - 12px) calc(20% - 12px) calc(20% - 12px) calc(20% - 12px);
}

@media only screen and (min-width: 601px) and (max-width: 860px) {
    .grid-group-filter {
        grid-column-gap: 15px;
        grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
    }
}

@media only screen and (max-width: 600px) {
    .grid-group-filter {
        grid-column-gap: 10px;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    }

    .btn-filter {
        width: min(calc(38 * 100vw / 400), 38px);
        height: min(calc(30 * 100vw / 400), 30px);
        padding: min(calc(4 * 100vw / 400), 4px) min(calc(9.6 * 100vw / 400), 9.6px);
        font-size: 0;
        line-height: 0;
        margin-right: min(calc(10 * 100vw / 400), 10px);
        margin-bottom: min(calc(10 * 100vw / 400), 10px);
    }

    .btn-filter::before {
        background-size: min(calc(18 * 100vw / 400), 18px);
    }

    input#cb-filter + label.btn-filter,
    label.btn-filter + div.row .btn {
        height: min(calc(29.6 * 100vw / 400), 29.6px);
        min-height: min(calc(29.6 * 100vw / 400), 29.6px);
        line-height: 1;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    input#cb-filter + label.btn-filter {
        width: min(calc(38 * 100vw / 400), 38px);
        padding: min(calc(4 * 100vw / 400), 4px) min(calc(9.6 * 100vw / 400), 9.6px);
        font-size: 0;
        margin-right: min(calc(10 * 100vw / 400), 10px);
        margin-bottom: min(calc(10 * 100vw / 400), 10px);
    }

    label.btn-filter + div.row .btn:not(.display-none),
    label.btn-filter + div.row p.label,
    label.btn-filter + div.row a.label {
        font-size: min(calc(12 * 100vw / 400), 12px) !important;
        font-weight: var(--toolbar-btn-font-weight);
    }

    label.btn-filter + div.row p.label {
        line-height: 1;
        padding: min(calc(4 * 100vw / 400), 4px) min(calc(9.6 * 100vw / 400), 9.6px);
        min-height: min(calc(29.6 * 100vw / 400), 29.6px);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 380px) {
    .btn-filter {
        width: min(calc(38 * 0.90 * 100vw / 400), 34.2px);
        height: min(calc(30 * 0.90 * 100vw / 400), 27px);
        padding: min(calc(4 * 0.90 * 100vw / 400), 3.6px) min(calc(9.6 * 0.90 * 100vw / 400), 8.64px);
        font-size: 0;
        line-height: 0;
        margin-right: min(calc(10 * 0.90 * 100vw / 400), 9px);
        margin-bottom: min(calc(10 * 0.90 * 100vw / 400), 9px);
    }

    .btn-filter::before {
        background-size: min(calc(18 * 0.90 * 100vw / 400), 16.2px);
    }

    input#cb-filter + label.btn-filter,
    label.btn-filter + div.row .btn {
        height: min(calc(25.16 * 100vw / 400), 25.16px);
        min-height: min(calc(25.16 * 100vw / 400), 25.16px);
        line-height: 1;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    input#cb-filter + label.btn-filter {
        width: min(calc(38 * 0.90 * 100vw / 400), 34.2px);
        padding: min(calc(4 * 0.90 * 100vw / 400), 3.6px) min(calc(9.6 * 0.90 * 100vw / 400), 8.64px);
        font-size: 0;
        margin-right: min(calc(10 * 0.90 * 100vw / 400), 9px);
        margin-bottom: min(calc(10 * 0.90 * 100vw / 400), 9px);
    }

    input#cb-filter + label.btn-filter::before {
        background-size: min(calc(18 * 0.90 * 100vw / 400), 16.2px);
    }

    label.btn-filter + div.row .btn:not(.display-none),
    label.btn-filter + div.row p.label,
    label.btn-filter + div.row a.label {
        font-size: min(calc(12 * 0.90 * 100vw / 400), 10.8px) !important;
        font-weight: var(--toolbar-btn-font-weight);
    }

    label.btn-filter + div.row p.label {
        font-size: min(calc(12 * 0.90 * 100vw / 400), 10.8px) !important;
        line-height: 1;
        padding: min(calc(4 * 0.90 * 100vw / 400), 3.6px) min(calc(9.6 * 0.90 * 100vw / 400), 8.64px);
        min-height: min(calc(25.16 * 100vw / 400), 25.16px);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .info-filter {
        font-size: clamp(0.75rem, 3.2vw, 0.875rem);
        padding-top: min(calc(6 * 100vw / 400), 5.3px);
    }
}

#cb-filter:checked ~ .filter {
    display: block;
}

.info-filter {
    display: grid;
    grid-column-gap: clamp(12px, min(2.5vw, 2.5svw, 2.5dvw), 20px);
    grid-row-gap: clamp(3px, min(0.85vw, 0.85svw, 0.85dvw), 6px);
    grid-template-columns: 1fr 1fr;
    font-size: clamp(0.75rem, 3.2vw, 0.875rem);
}

@media only screen and (min-width: 861px) {
    .info-filter .column-2 { text-align: right; }
}

@media only screen and (max-width: 860px) {
    .info-filter { grid-template-columns: 100%; }
}

.info-filter li { list-style: none; }