/* =============================================
   UNIVERSAL KENDO RESPONSIVE GRID & TREELIST VIEW
   (Fixed: Removes Inner Box + Centers Buttons + No Overflow)
   ============================================= */

/* Tablet view (≤1024px) */
@media only screen and (max-width: 1024px) {
    .k-grid, .k-treelist {
        font-size: 13px !important;
    }

        .k-grid th.k-header,
        .k-grid td,
        .k-treelist th.k-header,
        .k-treelist td {
            padding: 6px 8px !important;
            white-space: normal !important;
            word-break: break-word;
        }

        .k-grid .k-button,
        .k-treelist .k-button {
            font-size: 12px !important;
            padding: 4px 6px !important;
        }
}

/* --- Card Layout for Mobile (≤768px) --- */
@media only screen and (max-width: 768px) {
    /* Hide headers */
    .k-grid-header,
    .k-treelist .k-grid-header {
        display: none !important;
    }

    /* Outer clean container (instead of inner overflow border) */
    .k-grid,
    .k-treelist {
        border: 1px solid #d0e4ea !important; /* main outer border */
        border-radius: 6px !important;
        background-color: #fff !important;
        padding: 8px !important;
        overflow: hidden !important; /* prevent visual overflow */
    }

        /* Remove inner borders per row */
        .k-grid .k-grid-content tr,
        .k-treelist table tr {
            display: block;
            margin-bottom: 14px;
            border: none !important;
            border-radius: 0 !important;
            background-color: #fff !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

        /* Cell layout */
        .k-grid .k-grid-content td,
        .k-treelist table td {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            border: none !important;
            border-bottom: 1px solid #e3f2f7;
            padding: 6px 8px !important;
            font-size: 13px;
            color: inherit;
            background: #fff !important;
            line-height: 1.4;
        }

            /* Label before value */
            .k-grid .k-grid-content td:before,
            .k-treelist table td:before {
                content: attr(data-title) ":";
                font-weight: 600;
                color: #003f59;
                flex-shrink: 0;
                margin-right: 6px;
                min-width: 110px;
            }

            /* Inline values next to labels */
            .k-grid .k-grid-content td > *,
            .k-treelist table td > * {
                display: inline !important;
                flex: 1;
                white-space: normal !important;
                word-break: break-word !important;
                overflow-wrap: anywhere;
            }

        /* Center “Details” button */
        .k-grid .k-button,
        .k-treelist .k-button {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            font-size: 12px !important;
            padding: 8px 14px !important;
            margin: 6px auto 0 auto;
            text-align: center;
            width: auto !important;
        }

        /* Remove double inner boxes */
        .k-grid .k-grid-content table,
        .k-treelist .k-grid-content table {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            display: block !important;
            width: 100% !important;
            table-layout: auto !important;
        }

            /* Remove any nested tables */
            .k-grid .k-grid-content table table,
            .k-treelist .k-grid-content table table {
                display: contents !important;
                border: none !important;
                background: none !important;
                box-shadow: none !important;
            }

        /* Remove last border */
        .k-grid .k-grid-content td:last-child,
        .k-treelist table td:last-child {
            border-bottom: none;
        }
}

/* Extra small phones (≤480px) */
@media only screen and (max-width: 480px) {
    .k-grid .k-grid-content td,
    .k-treelist table td {
        flex-direction: column;
        align-items: flex-start;
    }

        .k-grid .k-grid-content td:before,
        .k-treelist table td:before {
            margin-bottom: 3px;
        }

    .k-grid .k-button,
    .k-treelist .k-button {
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }
}