/*
 * Matrix Hover Override Styles
 * These styles provide enhanced hover effects for the matrix table
 * with specific improvements for visibility on both dark and light backgrounds
 */

/* TABLE STRUCTURE AND CONTAINMENT */
/* Make the table container responsible for overflow clipping */
.table-scroll {
    position: relative;
    overflow: auto;
    /* Use contain to create a new stacking context and prevent overflow effects */
    contain: layout paint;
}

/* Add specific containment for highlighting effects */
.mud-card-content .table-scroll {
    /* Ensure highlights don't leak outside the table-scroll container */
    isolation: isolate;
}

/* Table positioning for absolute reference */
.matrix-hover {
    position: relative;
    /* Contain the table effects */
    contain: layout paint;
}

/* Z-INDEX HIERARCHY FOR STICKY POSITIONING */
/* Ensure tbody cells stay below sticky thead when scrolling */
.table-scroll tbody .mud-table-cell,
.table-scroll tbody th,
.table-scroll tbody td {
    z-index: 1 !important;
}

/* Sticky first column in tbody should be higher than other body cells */
.table-scroll tbody th:first-child,
.table-scroll tbody .mud-table-cell:first-child {
    z-index: 5 !important;
    background-color: #594ae2ff !important;
}

/* Maintain opaque background on hover for sticky first column in tbody */
.table-scroll tbody th:first-child:hover,
.table-scroll tbody .mud-table-cell:first-child:hover {
    background-color: #6b5ce7 !important; /* Slightly lighter on hover but still opaque */
}

/* Sticky thead cells should be on top */
.table-scroll thead .mud-table-cell,
.table-scroll thead th {
    z-index: 10 !important;
    /* Ensure sticky headers always have opaque background */
    background-color: #594ae2ff !important;
}

/* Sticky thead first column should be highest */
.table-scroll thead th:first-child,
.table-scroll thead .mud-table-cell:first-child {
    z-index: 15 !important;
    background-color: #594ae2ff !important;
}

/* Maintain opaque background on hover for sticky headers */ 
.table-scroll thead th:hover,
.table-scroll thead .mud-table-cell:hover {
    background-color: #6b5ce7 !important; /* Slightly lighter on hover but still opaque */
}

/* Specific CSS for column highlight elements */
.column-highlight {
    position: absolute;
    pointer-events: none;
    /* Keep column highlights strictly contained */
    overflow: hidden;
    isolation: isolate;
    background-color: rgba(0, 0, 0, 0.08); /* Default light theme */
    z-index: 1; /* Keep below sticky headers (thead has z-index 10+) */
}

/* DARK THEME STYLES - Light hover effects for dark backgrounds */

/* Row hover effect - all cells in the row (tbody only) */
.mud-theme-dark .matrix-hover tbody tr:hover td,
.mud-theme-dark .matrix-hover tbody tr:hover th:not(:first-child),
body[data-theme="dark"] .matrix-hover tbody tr:hover td,
body[data-theme="dark"] .matrix-hover tbody tr:hover th:not(:first-child) {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Individual cell hover highlighting (tbody only, excluding first column) */
.mud-theme-dark .matrix-hover tbody td:hover,
.mud-theme-dark .matrix-hover tbody th:not(:first-child):hover,
body[data-theme="dark"] .matrix-hover tbody td:hover,
body[data-theme="dark"] .matrix-hover tbody th:not(:first-child):hover {
    background-color: rgba(255, 255, 255, 0.35);
    position: relative;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Sticky thead headers - maintain opaque background on hover (dark theme) */
.mud-theme-dark .matrix-hover thead th:hover,
body[data-theme="dark"] .matrix-hover thead th:hover {
    background-color: #6b5ce7 !important;
    box-shadow: none !important;
}

/* First column hover effect (tbody sticky column) */
.mud-theme-dark .matrix-hover tbody tr:hover th:first-child,
body[data-theme="dark"] .matrix-hover tbody tr:hover th:first-child {
    background-color: #6b5ce7 !important;
}

.mud-theme-dark .matrix-hover tbody tr:hover th:first-child .white-text,
body[data-theme="dark"] .matrix-hover tbody tr:hover th:first-child .white-text {
    text-shadow: 0 0 5px rgba(255, 255, 255, 1);
    font-weight: 500;
}

/* Column highlight styling for JavaScript-generated elements */
.mud-theme-dark .column-highlight,
body[data-theme="dark"] .column-highlight,
[data-mud-theme="dark"] .column-highlight {
    background-color: rgba(255, 255, 255, 0.25);
}

/*
 * LIGHT THEME STYLES - Dark hover effects for light backgrounds
 */

/* Row hover effect (tbody only) */
body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover tbody tr:hover td,
body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover tbody tr:hover th:not(:first-child) {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Individual cell hover (tbody only, excluding first column) */
body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover tbody td:hover,
body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover tbody th:not(:first-child):hover {
    background-color: rgba(89, 74, 226, 0.25);
    position: relative;
    box-shadow: inset 0 0 0 3px rgba(89, 74, 226, 0.4), 0 0 8px rgba(89, 74, 226, 0.2);
}

/* Sticky thead headers - maintain opaque background on hover (light theme) */
body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover thead th:hover {
    background-color: #6b5ce7 !important;
    box-shadow: none !important;
}

/* First column hover (tbody sticky column - light theme) */
body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover tbody tr:hover th:first-child {
    background-color: #6b5ce7 !important;
}

body:not(.mud-theme-dark)[data-theme="light"] .matrix-hover tbody tr:hover th:first-child .white-text {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
    font-weight: 500;
}