table.dataTable tbody th, table.dataTable tbody td {
    padding: 2px 6px;
}
td.heat { 
    border: 1pt solid windowtext;
    text-align: center;
    mix-blend-mode: normal;
}
table tr { height: 25px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px;
    line-height: 25px;
}
table.dataTable thead .sorting {
    width: 100px; 
    text-align: center;
}
.dataTables_info { width: 60%;}
   .table td.gene {
     font-size: 0.95em;
     font-style: italic;
     font-weight: bold;
     text-align: left;
     max-width: 350px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
.dataTables_wrapper .dataTables_filter input {
    height: 20px;
}
.btn-70 {
    width: 74px;
}    
.btn-80 {
    width: 80px;
}    
.btn-130 {
    width: 130px;
}    
.btn-200 {
    width: 200px;
}    

:root { --dt-arrow-gap: 0.7em; } /* make smaller/larger to taste */

/* Remove the little white slab at upper right corner of the table header area */
.dtfc-top-blocker { 
  background-color: var(--card-bg) !important;
}

/* Make the whole fixed header area match the card color, otherwise it will give the headers a gray shadow*/
#table_id thead th, div.dt-scroll-head,
div.dt-scroll-head .dt-scroll-headInner,
div.dt-scroll-head table,
div.dt-scroll-head thead th {
  background-color: unset !important;
/*  box-shadow: none !important;*/
}

/* Anchor DT sort pseudo-arrows to bottom-right (never mid-cell) */
div.dt-scroll-head thead > tr > th span.dt-column-order::before,
div.dt-scroll-head thead > tr > th span.dt-column-order::after {
  top: auto !important;
  bottom: 0 !important;
  line-height: 1 !important;
}

/* ▲ is always just above; ▼ is always at bottom (unsorted + sorted) */
div.dt-scroll-head thead > tr > th.dt-orderable-asc  span.dt-column-order::before,
div.dt-scroll-head thead > tr > th.dt-ordering-asc   span.dt-column-order::before,
div.dt-scroll-head thead > tr > th.dt-orderable-desc span.dt-column-order::before,
div.dt-scroll-head thead > tr > th.dt-ordering-desc  span.dt-column-order::before {
  bottom: var(--dt-arrow-gap) !important; /* ▲ */
}
div.dt-scroll-head thead > tr > th.dt-orderable-asc  span.dt-column-order::after,
div.dt-scroll-head thead > tr > th.dt-ordering-asc   span.dt-column-order::after,
div.dt-scroll-head thead > tr > th.dt-orderable-desc span.dt-column-order::after,
div.dt-scroll-head thead > tr > th.dt-ordering-desc  span.dt-column-order::after {
  bottom: 0 !important;                      /* ▼ */
}

/* Rotated label: pivot from bottom-left, then nudge right */
/* table.dataTable thead th.rot-header .rot-label {*/
thead th.rot-header .rot-label {
  display: inline-block;
  position: relative;
  transform-origin: left bottom;    /* <-- changed */
  transform: translateX(45px) rotate(305deg);  /* <-- nudge + rotate */
  z-index: 1;
}

/* Skewed “parallelogram” outline per header — no gap */
/* Targets th.rot-header within the original table header */
/*#GEPTable.datatables-active div.dt-scroll-head thead th.rot-header::before,
#results.datatables-active div.dt-scroll-head thead th.rot-header::before { */
#GEP .dt-scroll-head thead th.rot-header::before,
#results .dt-scroll-head thead th.rot-header::before,
#GEP table:not(.dataTable) thead th.rot-header::before,
#results table:not(.dataTable) thead th.rot-header::before {    
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ccc;
  transform: skewX(-35deg);
  transform-origin: left bottom;
  pointer-events: none;
  /* You might need background-color and z-index here if they were needed for the fixed header specifically */
  /* background-color: rgb(248, 249, 250); */
  /* z-index: 3; */
}

/* Target th.rot-header within the original table when DataTables is not active */
#GEPTable:not(.datatables-active) #table_id thead th.rot-header,
#results:not(.datatables-active) #table_id thead th.rot-header {
   position: relative; /* Add position relative for the original th */
}

/* Target the pseudo-element on th.rot-header within the original table when DataTables is not active */
#GEPTable:not(.datatables-active) #table_id thead th.rot-header::before,
#results:not(.datatables-active) #table_id thead th.rot-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ccc;
  transform: skewX(-35deg);
  transform-origin: left bottom;
  pointer-events: none;
}

/* Prevent doubled borders where headers meet */
div.dt-scroll-head thead th.rot-header + th.rot-header::before { border-left: 0; }
div.dt-scroll-head thead th.rot-header:first-child::before    { border-left-width: 1px; }
div.dt-scroll-head thead th.rot-header:last-child::before     { border-right-width: 1px; }

/* Targets th.col-narrow and td.col-narrow in DataTables structure AND original table and set data column width to 75px*/
table.dataTable th.col-narrow,
table.dataTable td.col-narrow,
#results:not(.datatables-active) #table_id thead th.col-narrow, /* Non-DT header cells */
#results:not(.datatables-active) #table_id tbody td.col-narrow /* Non-DT body cells */
{
  max-width: 75px;
  line-height: 2; /* original 0.8 */
} 
#results table.dataTable th.col-narrow {
  font-size: 13px;
}
table.dataTable td.col-narrow {
  text-align: center;
}
/* Targets the last three td elements in a tr within a dataTable tbody */
table.dataTable tbody tr td:nth-last-child(-n+3) {
  text-align: center;
  vertical-align: middle;
}

/* Let columns control total width (needed for 75px to stick) */
div.dt-scroll-head table.dataTable,
div.dt-scroll-body table.dataTable,
#results:not(.datatables-active) #table_id /* Target the original table in non-DT state */
{
  width: max-content !important;
  table-layout: fixed; /* you already had this */
}

/* Target the fixed left header cell within the DataTables header and make it opaque so scroll overflow doesn't clobber '*/
/* For Run CSx */
#GEP table.dataTable thead th.dtfc-fixed-left {
/*      background-color: rgb(248, 249, 250) !important; /* Or the light gray color */
    --bs-bg-opacity: 1;
      background-color: #eeeeee !important; /* Or the light gray color */    
/*    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; */
/*      background-color: transparent; /* Or the light gray color */
}

/* Target the fixed left header cell within the DataTables header and make it opaque so scroll overflow doesn't clobber '*/
/* For jobs */
#results table.dataTable thead th.dtfc-fixed-left  {
    background-color: rgb(248, 249, 250) !important; /* Or the light gray color */
    --bs-bg-opacity: 1;
/*    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; */
/*      background-color: transparent; /* Or the light gray color */
}



/* Target the fixed left body cells within the DataTables body and make it opaque so scroll overflow doesn't clobber */
table.dataTable tbody td.dtfc-fixed-left {
    background-color: #fff !important; /* Use the same background color */
    vertical-align: middle;
}

/* Changes for CSx jobs page */
/* Below - NOT EFFECTIVE */
/* Ensure the fixed-left clone visually replaces the original */
.dataTables_wrapper .dtfc-fixed-left,
.dataTables_wrapper .dtfc-fixed-left .dtfc-fixed-header,
.dataTables_wrapper .dtfc-fixed-left .dtfc-fixed-body {
  z-index: 3;           /* above the original table */
  background: #fff;     /* or your table background color */
}

/* Help with width calc and avoid wrapping inside fixed columns */
table.dataTable tbody th,
table.dataTable tbody td,
th.col-narrow {
  white-space: nowrap;
}

/* Prevent word wrapping on column headers */
#table_jobs_wrapper thead th.col-narrow {
  white-space: nowrap !important; /* Keep text on a single line */
  overflow: hidden;    /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis (...) for hidden text */
}