@media (max-width: 1024px) {
    /* Hide header */
    .responsive-grid .k-table-thead {
        display: none !important;
    }

    /* Each row as card */
    .responsive-grid .k-table-tbody tr,
    .responsive-grid .k-grid-content .k-table-tbody tr {
        display: block;
        border: 1px solid #e5e7eb; /* gray-200 */
        border-radius: 0.5rem; /* rounded-lg */
        margin-bottom: 0.75rem; /* mb-3 */
        background: #fff;
        overflow: hidden;
    }

    /* Neutralize fixed widths (prevents 50px squish) */
    .responsive-grid .k-table colgroup,
    .responsive-grid .k-table colgroup col {
        display: none !important;
    }

    .responsive-grid .k-table {
        table-layout: auto !important;
        width: 100% !important;
    }

    .responsive-grid .k-grid-content,
    .responsive-grid .k-grid-content .k-table,
    .responsive-grid .k-grid-content .k-table-tbody {
        width: 100% !important;
        overflow-x: visible !important;
    }

        /* Cells block & full width */
        .responsive-grid .k-table-tbody td,
        .responsive-grid .k-grid-content .k-table-tbody td {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
            padding: 0.5rem 0.75rem; /* py-2 px-3 */
            border: 0;
            border-top: 1px solid #f3f4f6; /* gray-100 */
        }

            .responsive-grid .k-table-tbody td:first-child,
            .responsive-grid .k-grid-content .k-table-tbody td:first-child {
                border-top: 0;
            }

            /* Inner wrapper now stacks items vertically (label then value) */
            .responsive-grid .k-table-tbody td > [data-title],
            .responsive-grid .k-grid-content .k-table-tbody td > [data-title] {
                display: block; /* stacked */
                padding: 0; /* td handles padding */
            }

                /* Label line (from data-title) */
                .responsive-grid .k-table-tbody td > [data-title]::before,
                .responsive-grid .k-grid-content .k-table-tbody td > [data-title]::before {
                    content: attr(data-title);
                    display: block; /* its own line */
                    font-weight: 600; /* semibold */
                    color: #374151; /* gray-700 */
                    margin: 0 0 0.25rem 0; /* a little gap below the label */
                    text-align: left;
                }

                /* Value line */
                .responsive-grid .k-table-tbody td > [data-title] > :not(template):not(style) {
                    display: block; /* new line under label */
                    text-align: left; /* left align value; change to right if preferred */
                    word-break: break-word;
                    overflow-wrap: anywhere;
                }

            /* Fallback: no wrapper present → keep content visible */
            .responsive-grid .k-table-tbody td:not(:has([data-title])),
            .responsive-grid .k-grid-content .k-table-tbody td:not(:has([data-title])) {
                display: block;
            }

            /* Icons/buttons: left align under label by default; center/right if you prefer */
            .responsive-grid .k-table-tbody td > [data-title] .k-icon,
            .responsive-grid .k-table-tbody td > [data-title] .k-svg-icon,
            .responsive-grid .k-table-tbody td > [data-title] .k-button,
            .responsive-grid .k-table-tbody td > [data-title] .k-button-group {
                display: inline-flex;
                vertical-align: middle;
            }

    /* Optional: compact pager on mobile */
    .responsive-grid .k-pager,
    .responsive-grid .k-pager-wrap {
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Optional dark mode adjustments */
@media (max-width: 1024px) {
    .dark .responsive-grid .k-table-tbody tr,
    .k-theme-dark .responsive-grid .k-table-tbody tr {
        background: #111827; /* gray-900 */
        border-color: #1f2937; /* gray-800 */
    }

    .dark .responsive-grid .k-table-tbody td,
    .k-theme-dark .responsive-grid .k-table-tbody td {
        border-top-color: #1f2937;
    }

        .dark .responsive-grid .k-table-tbody td > [data-title]::before,
        .k-theme-dark .responsive-grid .k-table-tbody td > [data-title]::before {
            color: #d1d5db; /* gray-300 */
        }
}

``
/* ===== Fix narrow td on small screens - neutralize colgroup and widths ===== */
@media (max-width: 1024px) {
    /* 1) Kill column fixed widths from colgroup */
    .responsive-grid .k-table colgroup,
    .responsive-grid .k-table colgroup col {
        display: none !important;
    }
    /* 2) Let the table auto-size content (we're stacking anyway) */
    .responsive-grid .k-table {
        table-layout: auto !important;
        width: 100% !important;
    }
    /* 3) Make the grid content area not clamp width */
    .responsive-grid .k-grid-content,
    .responsive-grid .k-grid-content .k-table,
    .responsive-grid .k-grid-content .k-table-tbody {
        width: 100% !important;
        overflow-x: visible !important; /* avoid narrow scroll container */
    }
    /* 4) Core: each cell is a full-width block */
    .responsive-grid .k-table-tbody tr {
        display: block; /* already in your Version B CSS, included here for clarity */
    }

    .responsive-grid .k-table-tbody td,
    .responsive-grid .k-grid-content .k-table-tbody td {
        display: block;
        width: 100% !important; /* <-- critical */
        max-width: 100% !important; /* belt & braces */
        box-sizing: border-box;
    }
        /* 5) If you have any columns with explicit Width=... in markup, the theme may emit inline widths.
        This neutralizes inline width on TDs (without affecting other inline styles). */
        .responsive-grid .k-table-tbody td[style*="width"] {
            width: 100% !important;
        }
        /* 6) Keep our inner wrapper doing the label/value layout */
        .responsive-grid .k-table-tbody td > [data-title] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .75rem;
        }
}