.bo-general-filters {
    display: grid;
    width: 100%;
    gap: 8px;
    padding: 12px;
    box-sizing: border-box;
    align-items: end;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    grid-template-columns: repeat(var(--filter-cols, 8), minmax(0, 1fr));
}

    .bo-general-filters label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .bo-general-filters .bo-date-range {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 4px;
        align-items: end;
        min-width: 0;
    }

    .bo-general-filters label > span {
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
    }

    .bo-general-filters .bo-date-range > span {
        grid-column: span 2;
        width: 100%;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
    }

    .bo-general-filters .text-input,
    .bo-general-filters select.text-input,
    .bo-general-filters input.text-input,
    .bo-general-filters .bo-date-range-text {
        min-height: 46px;
        color: #0f172a;
        font-size: 15px;
        font-weight: 400;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding-inline: 8px;
    }

    .bo-general-filters .bo-date-range-text {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: #f8f9fa;
    }

    /* --- UTILITY CLASSES: ĐIỀU KHIỂN ĐỘ RỘNG Ô (SPAN) --- */

    .bo-general-filters .col-span-2 {
        grid-column: span 2;
    }

    /* --- ĐỊNH DẠNG KHU VỰC NÚT NHẤN HÀNH ĐỘNG --- */
    .bo-general-filters .filter-actions {
        grid-column: span 1;
        display: flex;
        width: 100%;
        min-width: max-content;
    }

        .bo-general-filters .filter-actions .primary-button,
        .bo-general-filters .filter-actions .secondary-button {
            width: 100%;
            min-height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding-inline: 16px;
        }

/* --- HỆ THỐNG RESPONSIVE ĐA THIẾT BỊ DÙNG CHUNG --- */
@media (max-width: 1180px) {
    .bo-general-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

        .bo-general-filters .col-span-2 {
            grid-column: span 1 !important;
        }

        .bo-general-filters .bo-date-range {
            grid-template-columns: 1fr auto !important;
        }

            .bo-general-filters .bo-date-range > span {
                grid-column: span 2 !important;
            }
}

@media (max-width: 780px) {
    .bo-general-filters {
        grid-template-columns: 1fr !important;
    }

        .bo-general-filters .bo-date-range {
            grid-template-columns: 1fr auto !important;
        }

            .bo-general-filters .bo-date-range > span {
                grid-column: span 2 !important;
            }
}

/* --- INDEX PAGE STANDARD: FILTER + RESULT HEADER + GRID --- */
.bo-index-filter {
    display: grid;
    width: 100%;
    gap: 8px;
    padding: 12px;
    box-sizing: border-box;
    align-items: end;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    grid-template-columns: repeat(var(--filter-cols, 8), minmax(0, 1fr));
}

    .bo-index-filter label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .bo-index-filter label > span,
    .bo-index-filter .bo-date-range > span {
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
    }

    .bo-index-filter .bo-date-range {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 4px;
        align-items: end;
        min-width: 0;
    }

        .bo-index-filter .bo-date-range > span {
            grid-column: span 2;
            width: 100%;
        }

    .bo-index-filter .text-input,
    .bo-index-filter select.text-input,
    .bo-index-filter input.text-input,
    .bo-index-filter .bo-date-range-text {
        min-height: 46px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        color: #0f172a;
        font-size: 15px;
        font-weight: 400;
        padding-inline: 8px;
    }

    .bo-index-filter .bo-date-range-text {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: #f8f9fa;
    }

    .bo-index-filter .col-span-2 {
        grid-column: span 2;
    }

    .bo-index-filter .filter-actions {
        display: flex;
        width: 100%;
        min-width: 0;
    }

        .bo-index-filter .filter-actions .primary-button,
        .bo-index-filter .filter-actions .secondary-button {
            width: 100%;
            min-height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding-inline: 16px;
            box-sizing: border-box;
        }

.bo-index-result-card {
    width: 100%;
    margin-top: 18px;
}

.bo-sales-order-context {
    margin-bottom: 10px;
}

.bo-sales-order-tabs {
    display: contents;
}

.bo-sales-order-tabs .secondary-button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.bo-sales-order-tabs .secondary-button.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.bo-sales-order-layout {
    margin-top: 18px;
}

.bo-index-result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .bo-index-result-head h2 {
        margin: 0;
        color: #003b5c;
        font-size: 22px;
        font-weight: 400;
    }

    .bo-index-result-head span {
        color: #64748b;
        font-size: 14px;
        font-weight: 400;
        text-align: right;
    }

.bo-index-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bo-index-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
}

    .bo-index-table th,
    .bo-index-table td {
        border-bottom: 1px solid var(--line, #d8e0ea);
        padding: 10px;
        vertical-align: middle;
    }

    .bo-index-table thead th {
        background: #e7f6fb;
        color: #183b56;
        font-size: 13px;
        font-weight: 800;
    }

    .bo-index-table .bo-code {
        text-align: left;
        white-space: nowrap;
    }

    .bo-index-table .bo-center {
        text-align: center;
        white-space: nowrap;
    }

    .bo-index-table .bo-name {
        text-align: left;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .bo-index-table .bo-num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .bo-index-table .bo-note {
        min-width: 140px;
        max-width: 260px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bo-index-table .bo-actions {
        text-align: left;
        white-space: nowrap;
    }

.bo-index-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}

    .bo-index-row-actions .primary-button,
    .bo-index-row-actions .secondary-button {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-sizing: border-box;
    }

.bo-sortable-header {
    cursor: pointer;
    user-select: none;
}

    .bo-sortable-header::after {
        content: "";
        display: inline-block;
        width: .8em;
        margin-left: 5px;
        color: #0ea5e9;
    }

    .bo-sortable-header[data-sort-direction="asc"]::after {
        content: "▲";
    }

    .bo-sortable-header[data-sort-direction="desc"]::after {
        content: "▼";
    }

@media (max-width: 1180px) {
    .bo-index-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

        .bo-index-filter .col-span-2 {
            grid-column: span 1 !important;
        }
}

@media (max-width: 780px) {
    .bo-index-filter {
        grid-template-columns: 1fr !important;
    }

    .bo-index-result-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

        .bo-index-result-head span {
            text-align: left;
        }
}