/**
 * Mobile / tablet nhỏ: nút + bố cục toolbar (lưới 2 cột như list-key).
 * .no-mobile-compact: giữ kích thước đặc biệt.
 */

/* --- Lưới 2 cột cho hàng nút (≤767px, giống ảnh list-key) --- */
@media (max-width: 767.98px) {
    /* Hàng nút chính: trái → phải, hết chỗ thì xuống dòng (không ép cột dọc) */
    .table-toolbar .toolbar-row-primary {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }

    .table-toolbar .toolbar-row-primary .toolbar-left:not(.toolbar-primary-row) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .table-toolbar .toolbar-row-primary .toolbar-left:not(.toolbar-primary-row) > .btn,
    .table-toolbar .toolbar-row-primary .toolbar-left:not(.toolbar-primary-row) > .dropdown {
        width: 100%;
        min-width: 0;
    }

    /* Một nút lẻ cuối (1,3,5…) trải full hàng */
    .table-toolbar .toolbar-row-primary .toolbar-left:not(.toolbar-primary-row) > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Hàng nút gọn (toolbar-primary-row): không lưới full width */
    .table-toolbar .toolbar-row-primary .toolbar-left.toolbar-primary-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .table-toolbar .toolbar-row-primary .toolbar-left.toolbar-primary-row > .btn,
    .table-toolbar .toolbar-row-primary .toolbar-left.toolbar-primary-row > .dropdown {
        width: auto !important;
        flex: 0 1 auto;
        min-width: 0;
    }

    .table-toolbar .toolbar-row-primary .toolbar-right {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .table-toolbar .toolbar-row-primary .toolbar-right .btn,
    .table-toolbar .toolbar-row-primary .toolbar-right .dropdown {
        width: auto !important;
        max-width: 100%;
    }

    /* Admin: toolbar-main — cùng logic: ngang + wrap */
    .table-toolbar .toolbar-main {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }

    .table-toolbar .toolbar-main .toolbar-left:not(.toolbar-primary-row) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .table-toolbar .toolbar-main .toolbar-left:not(.toolbar-primary-row) > .btn,
    .table-toolbar .toolbar-main .toolbar-left:not(.toolbar-primary-row) > .dropdown {
        width: 100%;
        min-width: 0;
    }

    .table-toolbar .toolbar-main .toolbar-left:not(.toolbar-primary-row) > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .table-toolbar .toolbar-main .toolbar-left.toolbar-primary-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .table-toolbar .toolbar-main .toolbar-left.toolbar-primary-row > .btn,
    .table-toolbar .toolbar-main .toolbar-left.toolbar-primary-row > .dropdown {
        width: auto !important;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* list-device — toolbar-primary-row: flex gọn; không dùng lưới 2 cột full width */
    .table-toolbar .toolbar-row-device-actions:not(.toolbar-primary-row) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    .table-toolbar .toolbar-row-device-actions:not(.toolbar-primary-row) > .btn,
    .table-toolbar .toolbar-row-device-actions:not(.toolbar-primary-row) > .dropdown {
        width: 100%;
        min-width: 0;
    }

    .table-toolbar .toolbar-row-device-actions:not(.toolbar-primary-row) > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .table-toolbar .toolbar-row-device-actions.toolbar-primary-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .table-toolbar .toolbar-row-device-actions.toolbar-primary-row > .btn {
        width: auto !important;
        flex: 0 1 auto;
        min-width: 0;
    }

    /*
     * Hàng nút trực tiếp trong table-toolbar (vd: list-package: Tạo + Dọn dẹp)
     * Không áp: toolbar-row-filters, toolbar-row-primary, toolbar-row-device-actions, toolbar-primary-line
     */
    .table-toolbar > .d-flex.flex-wrap.gap-2:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line),
    .table-toolbar > .d-flex.flex-wrap.gap-3:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line),
    .table-toolbar > .d-flex.flex-wrap.gap-2.gap-md-3:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .table-toolbar > .d-flex.flex-wrap.gap-2:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line) > *,
    .table-toolbar > .d-flex.flex-wrap.gap-3:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line) > *,
    .table-toolbar > .d-flex.flex-wrap.gap-2.gap-md-3:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line) > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .table-toolbar > .d-flex.flex-wrap:not(.toolbar-row-filters):not(.toolbar-row-primary):not(.toolbar-row-device-actions):not(.toolbar-primary-line) > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Hàng filter: trái → phải + wrap; khối end (lọc + search) cũng wrap ngang */
    .table-toolbar .toolbar-row-filters {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0.65rem !important;
    }

    .table-toolbar .toolbar-row-filters .toolbar-end-wrap,
    .table-toolbar .toolbar-row-filters .toolbar-inline-filters {
        width: 100% !important;
        margin-left: 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .table-toolbar .nap-history-toolbar .toolbar-row-filters {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    /* Modal (không áp cho #premiumUiModal — thông báo/xác nhận dạng chữ) */
    .modal:not(#premiumUiModal) .modal-footer {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: stretch !important;
        padding: 0.75rem 1rem 1rem;
    }

    .modal:not(#premiumUiModal) .modal-footer .btn:not(.no-mobile-compact):not(.btn-icon) {
        width: 100%;
        margin: 0 !important;
    }

    /* Modal chỉ 2 nút (Hủy + Xác nhận): giữ một hàng, chia đều — dễ nhìn hơn xếp dọc */
    .modal:not(#premiumUiModal) .modal-footer.modal-footer--split {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: stretch !important;
    }

    .modal:not(#premiumUiModal) .modal-footer.modal-footer--split .btn:not(.btn-icon):not(.btn-close) {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
    }

    /* Card header: nhiều nút → 2 cột */
    .card-header .d-flex.flex-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    .card-header .d-flex.flex-wrap > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* --- Nút gọn hơn trên điện thoại nhỏ (≤576px) --- */
@media (max-width: 575.98px) {
    body .btn:not(.btn-lg):not(.no-mobile-compact):not(.btn-close):not(.btn-icon):not(.btn-link) {
        padding: 0.45rem 0.85rem;
        font-size: 0.8125rem;
        line-height: 1.4;
        border-radius: 0.55rem;
        min-height: 2.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }

    body .btn-sm:not(.no-mobile-compact):not(.btn-icon) {
        padding: 0.38rem 0.65rem;
        font-size: 0.78rem;
        min-height: 2.3rem;
        border-radius: 0.5rem;
    }

    body .btn.btn-icon:not(.no-mobile-compact) {
        padding: 0;
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
        font-size: 1.05rem;
        line-height: 1;
        border-radius: 0.5rem;
    }

    body .btn-group .btn:not(.no-mobile-compact):not(.btn-icon) {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        min-height: 2.35rem;
    }

    body .modal:not(#premiumUiModal) .modal-body .btn:not(.btn-lg):not(.no-mobile-compact):not(.btn-icon) {
        padding: 0.45rem 0.9rem;
        font-size: 0.8125rem;
        min-height: 2.5rem;
    }

    body .table-toolbar .btn:not(.no-mobile-compact):not(.btn-icon),
    body .card-header .btn:not(.no-mobile-compact):not(.btn-icon) {
        padding: 0.48rem 0.75rem;
        font-size: 0.78rem;
        min-height: 2.5rem;
        white-space: normal;
        text-align: center;
    }

    body .table-toolbar .btn i,
    body .card-header .btn i {
        font-size: 1.05rem;
        vertical-align: middle;
    }

    body .auth-wrapper .btn:not(.no-mobile-compact) {
        width: 100%;
        max-width: 100%;
    }

    .content-wrapper .card-body > .d-flex.flex-wrap.gap-2,
    .content-wrapper .card-body > .d-flex.flex-wrap.gap-3 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .content-wrapper .card-body > .d-flex.flex-wrap.gap-2 > .btn,
    .content-wrapper .card-body > .d-flex.flex-wrap.gap-3 > .btn {
        width: 100%;
    }

    .content-wrapper .card-body > .d-flex.flex-wrap > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/*
 * Modal footer 2 nút — áp dụng thêm class modal-footer--split trên <div class="modal-footer">
 * (toàn viewport; phần @media phía trên chỉ ghi đè mobile column → row)
 */
.modal:not(#premiumUiModal) .modal-footer.modal-footer--split {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal:not(#premiumUiModal) .modal-footer.modal-footer--split .btn:not(.btn-icon):not(.btn-close) {
    flex: 1 1 0;
    min-width: 0;
}