/* Final mobile checkout layout: always keep invoice rows readable and visible. */
@media (max-width: 680px) {
    html body #tsports-court-checkout-overlay .tsports-court-checkout-dialog,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-body,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-body,
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table-wrap {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Do not use the runtime-generated mobile cards; show the source data directly. */
    html body #tsports-court-checkout-overlay .tsports-checkout-mobile-cards,
    html body #tsports-social-close-outstanding-overlay .tsports-checkout-mobile-cards {
        display: none !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-section.tsports-mobile-cardified .tsports-court-checkout-table-wrap,
    html body #tsports-court-checkout-overlay .tsports-court-checkout-table-wrap {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Rebuild every invoice row as a vertical field card. */
    html body #tsports-court-checkout-overlay .tsports-court-checkout-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-table thead {
        display: none !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-table tbody {
        display: grid !important;
        width: 100% !important;
        gap: 10px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-table tr {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 4px 10px !important;
        box-sizing: border-box !important;
        border: 1px solid #e1e8ef !important;
        border-radius: 11px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-table td {
        display: grid !important;
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 8px 0 !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #eef2f6 !important;
        color: #17324d !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.45 !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-table td:last-child {
        border-bottom: 0 !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-table td::before {
        display: block !important;
        color: #607489 !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(1) .tsports-court-checkout-table td:nth-child(1)::before { content: "Khoản" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(1) .tsports-court-checkout-table td:nth-child(2)::before { content: "Trạng thái" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(1) .tsports-court-checkout-table td:nth-child(3)::before { content: "Số lượng" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(1) .tsports-court-checkout-table td:nth-child(4)::before { content: "Thành tiền" !important; }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(2) .tsports-court-checkout-table td:nth-child(1)::before { content: "Người chơi" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(2) .tsports-court-checkout-table td:nth-child(2)::before { content: "Giờ vào" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(2) .tsports-court-checkout-table td:nth-child(3)::before { content: "Đã thu" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(2) .tsports-court-checkout-table td:nth-child(4)::before { content: "Chưa thu" !important; }
    html body #tsports-court-checkout-overlay .tsports-court-checkout-section:nth-of-type(2) .tsports-court-checkout-table td:nth-child(5)::before { content: "Phí dịch vụ" !important; }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-empty {
        display: block !important;
        width: 100% !important;
        padding: 14px 8px !important;
        text-align: center !important;
        color: #708397 !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-empty::before {
        content: none !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-section-title {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.4 !important;
    }

    /* Social close dialog: keep both columns inside the viewport. */
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-dialog.tsports-mobile-cardified .tsports-social-close-table-wrap,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table-wrap {
        display: block !important;
        overflow-x: hidden !important;
    }

    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table th,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table td {
        display: table-cell !important;
        min-width: 0 !important;
        padding: 11px 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table th:first-child,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table td:first-child {
        width: 58% !important;
    }

    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table th:last-child,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table td:last-child {
        width: 42% !important;
        text-align: right !important;
    }

    html body #tsports-court-checkout-overlay .tsports-court-checkout-foot,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-foot {
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
    }
}

@media (max-width: 390px) {
    html body #tsports-court-checkout-overlay .tsports-court-checkout-table td {
        grid-template-columns: minmax(82px, 35%) minmax(0, 1fr) !important;
        gap: 8px !important;
        font-size: .8rem !important;
    }

    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table th,
    html body #tsports-social-close-outstanding-overlay .tsports-social-close-table td {
        padding: 10px 8px !important;
        font-size: .8rem !important;
    }
}