/* Add this near the top of your CSS */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* OR, more targeted (if you can't do global) */
.responsive-table table,
.responsive-table th,
.responsive-table td {
    box-sizing: border-box;
}


@media (max-width: 768px) {

    .responsive-table thead {
        display: none;
    }

    .responsive-table table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block; /* Stack elements */
        width: 100%;   /* Take full available width */
    }

    .responsive-table tr {
        border: 1px solid #ccc;
        margin-bottom: 15px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgb(0, 0, 0);
        overflow: hidden; /* Add this to contain floated/absolute children */
    }

    .responsive-table td {
        position: relative; /* For the ::before pseudo-element */
        padding: 10px 15px 10px 50%; /* Adjust padding: Top/Bottom, Right, Left */
                                     /* Left padding makes space FOR the label */
        min-height: 40px; /* Ensure minimum height, adjust as needed */
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Vertically center content */
        text-align: right; /* Align text content to the right */
        border-bottom: 1px dashed #eee; /* Lighter separator inside the card */
    }

    .responsive-table tr td:last-child {
        border-bottom: 0; /* No border on the last "cell" within the card */
    }

    .responsive-table td::before {
        content: attr(data-label); /* Get the label */
        position: absolute;
        left: 15px; /* Position label from the left edge of the TD */
        top: 50%; /* Start positioning from vertical center */
        transform: translateY(-50%); /* Fine-tune vertical centering */
        width: 45%; /* Give the label a specific width */
        padding-right: 10px; /* Space between label and content area start */
        font-weight: bold;
        text-align: left; /* Align label text left */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

     /* Allow specific cells' content (like notes) to wrap */
    .responsive-table .payment-notes-cell,
    .responsive-table .payment-notes-cell span { /* Target both TD and SPAN for safety */
        white-space: normal;
        word-break: break-word; /* More robust word breaking */
        overflow-wrap: break-word; /* Alternative property */
        text-align: left; /* Notes often look better left-aligned on mobile */
        padding-left: 50%; /* Maintain padding consistency */
        /* display: block; Optional: force span to block if needed */
        /* width: 100%; Optional: if span needs explicit width */
    }

    /* Special handling for Notes Label positioning if text-align changed */
     .responsive-table .payment-notes-cell::before {
        /* Vertically align label with start of text if notes wrap */
        top: 10px;
        transform: translateY(0%);
     }


    /* Actions Cell Adjustments */
    .responsive-table .payment-actions-cell {
        padding: 10px 15px; /* Reset padding for actions, no large left padding needed */
        text-align: left; /* Align button wrapper left */
        background-color: #f9f9f9;
        border-top: 1px solid #eee;
        border-radius: 0 0 4px 4px; /* Match bottom corners of the 'card' */
    }

    /* Hide the "Actions:" label if buttons are self-explanatory */
    .responsive-table .payment-actions-cell::before {
       display: none;
    }

    .responsive-table .action-buttons-wrapper {
        display: flex;
        flex-wrap: wrap; /* Allow buttons to wrap onto next line */
        gap: 8px; /* Spacing between buttons */
        justify-content: flex-start; /* Align buttons to the left */
    }

    .responsive-table .btn {
        /* Optional: make buttons slightly larger on mobile? */
        /* padding: 8px 14px; */
    }
}