/* --- Professional Compact Table Styling with Borders & Shadow --- */
.table-responsive {
    overflow-x: auto;
}

#tblData {
    width: 100%;
    border-collapse: collapse; /* remove double borders */
    border: 1px solid #dee2e6; /* subtle outer border */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* subtle shadow */
    border-radius: 4px;
    overflow: hidden; /* for rounded corners to work */
}

    #tblData th,
    #tblData td {
        padding: 0.5rem 0.75rem; /* compact padding */
        vertical-align: middle;
        white-space: nowrap; /* prevent unwanted wrapping */
    }

    #tblData thead th {
        background-color: #343a40; /* dark header */
        color: #ffffff;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #495057;
    }

    #tblData tbody td {
        font-size: 0.85rem;
        color: #495057;
        border-bottom: 1px solid #dee2e6; /* row borders */
        border-right: 1px solid #dee2e6; /* cell borders */
    }

        #tblData tbody td:last-child {
            border-right: none; /* remove right border for last column */
        }

    #tblData tbody tr {
        transition: background-color 0.2s ease;
    }

        #tblData tbody tr:hover {
            background-color: #f1f3f5; /* subtle hover effect */
        }

/* Striping for odd rows */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f8f9fa; /* lighter striping */
}

/* Hover effect for rows */
.table-hover tbody tr:hover {
    background-color: #e9ecef;
}

/* Centered columns */
#tblData th.text-center,
#tblData td.text-center {
    text-align: center;
}

/* Action buttons */
#tblData .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    #tblData .btn:hover {
        transform: translateY(-1px);
    }

/* Optional: sticky header */
#tblData thead.sticky-top {
    position: sticky;
    top: 0;
    z-index: 2;
}