/* ========================================================= */
/* BASE STYLES FOR PHONES (MOBILE-FIRST) */
/* ========================================================= */


.table-scroll-wrapper {
    max-width: 100vw; 
    overflow-x: auto; 
    position: relative;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box; /* Good practice for robustness */
}

.table-scroll-wrapper table {
    min-width: fit-content; 
    border-collapse: separate; /* Required for sticky positioning on cells */
    border-spacing: 0;
}



/* Apply the sticky positioning to the last three columns */
.sticky-column {
    position: sticky;
    z-index: 10;
    background-color: #f8f9fa;
}

/* THIS IS THE CRUCIAL MISSING PIECE.
  The 'right' property tells the sticky element where to stick.
  You need to set a specific value for each of the last three columns.
*/
.sticky-column:nth-last-child(1) {
  right: 0;
}

.sticky-column:nth-last-child(2) {
  /* You will need to adjust this value to match the width of your last column. */
  /* Example: If the last column is 100px wide, this would be: */
  right: 95px;
}

.sticky-column:nth-last-child(3) {
  /* You will need to adjust this value to match the combined width of the last two columns. */
  /* Example: If the last two columns are 100px and 120px, this would be: */
  right: 160px;
}

/* ========================================================= */
/* MEDIA QUERY FOR LARGER SCREENS (TABLETS AND PCs) */
/* ========================================================= */

@media (min-width: 600px) {
  
  .table-scroll-wrapper  {
    overflow-x: visible;
  }
  
  .table-scroll-wrapper table {
    /* For desktops, we want the table to fill the available width */
    min-width: 100%;
    /* We can revert to the standard table border behavior */
    border-collapse: collapse;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
  }
  
  /* Reset the sticky columns to their normal state */
  .sticky-column {
    position: static;
    z-index: auto;
    right: auto;
  }
}

.data-table tr:nth-child(even) {
    background-color: #f8fafc;
}


.table.data-table tbody tr:hover {
    background-color: #1a1a2e;
}




.data-table {
    width: 100%;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
}


.data-table th {
    background: linear-gradient(135deg, #115817, #0bc51b);
    color: white;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 25px;
}

.data-table td {
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    font-size: 16px;
    border: 1px solid black;
    border-collapse: collapse;
}