/* css/table/line-selector.css */

:root {
  /* ... Keep other variables ... */
  --table-highlight-color-light: rgba(26, 188, 156, 0.2); /* Lighter teal highlight */
}

body.dark-theme {
  /* ... Keep other dark variables ... */
  --table-highlight-color-dark: rgba(32, 201, 151, 0.3); /* Slightly stronger dark highlight */
}


.table-hover.vertical-line {
  position: relative;
}

/* Remove Default Hover */
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent; /* Override Bootstrap hover */
}

/* Clear pseudo-elements */
.table-hover.vertical-line td::before,
.table-hover.vertical-line td::after,
.table-hover.vertical-line th::before,
.table-hover.vertical-line th::after {
  content: none;
}

/* --- Crosshair using Box Shadow (Approximation) --- 
.table-hover.vertical-line td {
  position: relative;
  cursor: default;
  transition: box-shadow 0.1s ease-out;
}
*/

.table-hover.vertical-line tbody td:hover {
  /* Use large inset box-shadows to simulate lines/highlight */
  /* Use specific highlight color variable */
  box-shadow:
      /* Vertical highlight (simulating column) */
      inset 0px 100vh 0px 0px var(--table-highlight-color-light),
      inset 0px -100vh 0px 0px var(--table-highlight-color-light),
      /* Horizontal highlight (simulating row) */
      inset 100vw 0px 0px 0px var(--table-highlight-color-light),
      inset -100vw 0px 0px 0px var(--table-highlight-color-light);
  opacity: 1; /* Let the color's alpha control transparency */
  z-index: 0; /* Keep behind text */
}

body.dark-theme .table-hover.vertical-line tbody td:hover {
   box-shadow:
      inset 0px 100vh 0px 0px var(--table-highlight-color-dark),
      inset 0px -100vh 0px 0px var(--table-highlight-color-dark),
      inset 100vw 0px 0px 0px var(--table-highlight-color-dark),
      inset -100vw 0px 0px 0px var(--table-highlight-color-dark);
  opacity: 1;
}


/* Ensure consistent table cell styling */
.table td, .table th {
  min-width: 80px;
  text-align: center;
  vertical-align: middle;
  position: relative; /* Needed for z-index */
  z-index: 2;
  /* background: transparent !important; <-- Make sure this is REMOVED or commented */
  white-space: nowrap; /* Add this to prevent wrapping */
}
.table thead th {
  background-color: var(--table-header-bg) !important;
  z-index: 10; /* Adjust z-index as needed */
}
.table tbody th[scope="row"] {
   background-color: var(--table-header-bg) !important;
   z-index: 5; /* Adjust z-index as needed */
}

/* Top-left specific styling if needed */
.table thead th:first-child {
    z-index: 15 !important; /* Should be highest */
    background-color: var(--table-header-bg) !important;
}
Use code with caution.