@media (max-width: 1100px) {
    /* Hides the table header on mobile */
    .table-leads thead {
        display: none !important;
    }

    /* Card styling for table rows */
    .table-leads tr {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 20px !important;
        padding: 20px !important;
        background-color: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        position: relative !important;
        transition: all 0.3s ease-in-out !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Hover effect for cards */
    .table-leads tr:hover {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12) !important;
        transform: translateY(-2px) !important;
    }

    /* Table cell styling */
    .table-leads td {
        display: block !important;
        border-top: none !important;
        text-align: right !important;
        position: relative !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        line-height: 1.4 !important;
        word-wrap: break-word;
        white-space: normal !important;
    }
    
    /* Remove border from the last cell in each card */
    .table-leads td:last-of-type {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Default label styling with data-th */
    .table-leads td::before {
        content: attr(data-th) !important;
        position: absolute !important;
        left: 15px !important;
        width: 45% !important;
        font-weight: bold !important;
        text-align: left !important;
        color: #555 !important;
    }
    
    /* Hides the labels for the checkbox column */
    .table-leads tbody tr td:has(input[type="checkbox"])::before {
        content: none !important;
    }
    
    /* Hides fields that have no value */
    .table-leads td.hide-empty-field {
        display: none !important;
    }

    /* 'Update' ফিল্ডের জন্য উন্নত ফ্লেক্সবক্স স্টাইলিং */
    .table-leads td[data-th="Update"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 12px 15px !important;
    }
    
    /* 'Update' ফিল্ডের লেবেল স্টাইল করা */
    .table-leads td[data-th="Update"]::before {
        position: static !important; /* লেবেলটিকে normal flow-তে ফিরিয়ে আনে */
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 5px !important;
        padding-left: 0 !important;
    }
    
    /* 'Update' ফিল্ডের ভ্যালু স্টাইল করা (বক্স) */
    .table-leads td[data-th="Update"] > span {
        width: 100% !important;
        word-wrap: break-word;
        white-space: normal !important;
        text-align: left !important;
        
        /* বক্স স্টাইল */
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f8f9fa;
        padding: 10px;
        margin-top: 5px;
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Manually hide fields based on their name (data-th attribute)
    .table-leads td[data-th="Name"],
    .table-leads td[data-th="Assigned"] {
        display: none !important;
    } */
}

/* Global table border color override */
table.table,
table.table-bordered,
table.dataTable,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-top-color: #000000 !important;
    border-bottom-color: #000000 !important;
}