/* =============================================
   UNIVERSAL KENDO RESPONSIVE GRID & TREELIST VIEW
   (Fixed: Removes Inner Box + Centers Buttons + No Overflow)
   ============================================= */
/* --- 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;
    }

      
    .k-grid,
    .k-treelist {
        border: 1px solid #d0e4ea !important;  
        border-radius: 6px !important;
        background-color: #fff !important;
        padding: 8px !important;
        overflow: hidden !important;  
    }

         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;
            }
        .k-grid td[data-title]:not([data-title=""])::before {
            content: attr(data-title) ":" !important;
            display: inline-block !important;
        }
    

             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;
            }
}

 
@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;
    }
}

/* =====================================================
   KENDO CARD VIEW – MOBILE/TABLET ONLY (SAFE VERSION)
   ===================================================== */

@media only screen and (max-width: 768px) {

    .k-grid-header,
    .k-grid-header-wrap,
    .k-treelist .k-grid-header
    {
    display: none !important;
    }
    /* Main widgets */
    .k-grid,
    .k-treelist {
        width: 90% !important;
        padding: 10px !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }
        /* Force Kendo grid rows to block ONLY in scrolling content */
        .k-grid .k-grid-content tr[role="row"],
        .k-grid .k-grid-content table tr {
            display: block !important;
            width: 100% !important;
            margin-bottom: 14px !important;
            box-shadow: none !important;
            border: 1px solid #d0e4ea !important;
            border-radius: 12px !important;
            background-color: #00446e !important;
        }
        .k-grid .k-grid-content td,
        .k-treelist table td {
            display: flex !important;
            width: 100% !important;
            white-space: normal !important;
            word-break: break-word !important;
            text-align: left !important;
        }
        .k-grid td[data-title=""]::before {
            content: "" !important;
            display: none !important;
        }
        .k-grid td[data-title]:not([data-title=""])::before {
            content: attr(data-title) ":" !important;
            display: inline-block !important;
            font-weight: 600;
            margin-right: 6px;
            color: #00446e !important;
        }
        .k-grid .k-button,
        .k-treelist .k-button {
            margin-left: auto !important;
            margin-right: auto !important;
        }
}
/* =====================================================
   APPLICATION CARDS – OVERRIDE GLOBAL RESPONSIVE RULES
   ===================================================== */
@media only screen and (max-width: 768px) {

    /* 🔑 Application grids only */
    .k-grid tbody tr.mobile-app-card {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 8px 6px !important;
        padding: 12px 14px 12px 18px !important;
        border-radius: 14px !important;
        border: 1px solid #cfe3f1 !important;
        background: #00446e !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.12) !important;
        overflow: hidden !important;
    }

        /* FULL HEIGHT ACCENT BAR */
        .k-grid tbody tr.mobile-app-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: #4E9CAF;
            border-radius: 6px 0 0 6px;
        }

        /* OVERRIDE flex layout from global rules */
        .k-grid tbody tr.mobile-app-card td {
            display: block !important;
            width: 100% !important;
            padding: 6px 0 !important;
            border: none !important;
            background: transparent !important;
        }

            /* KEEP LABELS INLINE & CLEAN */
            .k-grid tbody tr.mobile-app-card td::before {
                display: inline-block !important;
                font-weight: 600;
                margin-right: 6px;
                color: #003f59;
                min-width: 110px;
            }

        /* BUTTONS FULL WIDTH INSIDE APP CARDS */
        .k-grid tbody tr.mobile-app-card .k-button {
            width: 100% !important;
            margin-top: 10px !important;
        }
}

@media (max-width: 768px) {
    .k-grid tbody tr.mobile-app-card

{
    position: relative !important;
    display: block !important;
    background: #fff !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 14px !important;
    margin: 6px !important;
    padding: 12px 14px 12px 18px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.12) !important;
}

.k-grid tbody tr.mobile-app-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #4E9CAF;
    border-radius: 6px 0 0 6px;
}

.k-grid tbody tr.mobile-app-card td {
    border-bottom: 1px solid #e3f2f7 !important;
    padding: 8px 0 !important;
}

    .k-grid tbody tr.mobile-app-card td:last-child {
        border-bottom: none !important;
    }
}