/* ==========================================================
   1. CONTAINER (SCROLL AREA)
   ========================================================== */
#tblContainer1 {
    width: 100%;
    height: 1780px;
    overflow-y: auto;
    background: white;
    border: 1px solid #dddddd;
    position: relative;
    /* Smooth out scrolling jitters */
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================
   2. TABLE BASE
   ========================================================== */
.table-ui {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    background-color: white !important;
    color: black !important;
}

    /* ==========================================================
   3. STICKY HEADER FIX (PREVENTS SHRINKING)
   ========================================================== */
    .table-ui thead tr:nth-child(1) th {
        position: sticky !important;
        top: 0 !important;
        /* Increased z-index to stay above body borders */
        z-index: 100 !important;
        background-color: white !important;
        color: black;
        /* FIX: Set explicit height/line-height to stop the shrinking effect */
        height: 45px !important;
        line-height: 1.5;
        padding: 12px 8px !important;
        /* Visual separation that doesn't disappear */
        border-bottom: 2px solid #dddddd !important;
        /* This shadow prevents 'see-through' lines during scrolling */
        box-shadow: inset 0 -1px 0 #dddddd;
    }

    /* ==========================================================
   4. CELLS & BORDERS
   ========================================================== */
    .table-ui th,
    .table-ui td {
        padding: 12px 8px;
        text-align: left;
        border-bottom: 1px solid #dddddd;
    }

        /* Far left/right borders */
        .table-ui th:first-child, .table-ui td:first-child {
            border-left: 1px solid #dddddd;
        }

        .table-ui th:last-child, .table-ui td:last-child {
            border-right: 1px solid #dddddd;
        }

    /* ==========================================================
   5. ROW STYLING
   ========================================================== */
    .table-ui tr:nth-child(even) td {
        background-color: #f2f2f2;
    }

    .table-ui.white-odd tr:nth-child(odd) td {
        background-color: white !important;
    }

    .table-ui.hover-rows tr:hover td {
        background-color: #eeeeee !important;
    }

/* ==========================================================
   6. UI FIXES (DATEPICKER)
   ========================================================== */
.ui-datepicker, .datepicker-dropdown, .datepicker {
    z-index: 9999 !important;
}

.ui-front {
    z-index: 10000 !important;
}