/* 
 * CSS for Bootstrap Table Fixed Columns lite extension
 * @author Ermal Xhaka
 * @version 1.2.0
 */

.fixed-column {
  position: sticky;
  z-index: 10; /* Ensures fixed columns stay above other table content */
  transform: translateZ(0); /* Promotes the element to a new stacking context */
}

/* 
 * Set a default background for fixed body cells. 
 * This prevents transparency issues when scrolling.
 */
.table > tbody > tr > td.fixed-column {
    background-color: #fff;
}

/* 
 * For striped tables, the fixed column should inherit the row's color.
 * This preserves the striped pattern.
 */
.table-striped > tbody > tr:nth-of-type(odd) > td.fixed-column {
    background-color: inherit;
}

/*
 * For dark tables, the fixed header should inherit the dark background.
 */
.table-dark > thead > tr > th.fixed-column {
    background-color: inherit;
}

/*
 * Ensure the loading message appears above the fixed columns.
 */
.fixed-table-loading {
  z-index: 11; /* Must be higher than .fixed-column's z-index */
}

/*
 * Add padding to the container to ensure the loading message is visible.
 * This addresses the issue where the loading message is obscured by the container's height.
 */
.fixed-table-body {
  padding-bottom: 50px !important; /* Adjust as needed based on loading message height */
}