/* Custom CSS for fixing sticky table column issues */

/* Ensure the table container has proper positioning */
.card.shadow-md {
    position: relative;
}

/* Fix sticky header column */
.table-auto thead th.sticky {
    position: sticky !important;
    left: 0 !important;
    background-color: #1e293b !important;
    z-index: 30 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Fix sticky body column */
.table-auto tbody td.sticky {
    position: sticky !important;
    left: 0 !important;
    background-color: #1e293b !important;
    z-index: 20 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Hover effect for sticky column */
.table-auto tbody tr:hover td.sticky {
    background-color: #334155 !important;
}

/* Ensure proper layering */
.table-auto {
    position: relative;
}

.table-auto thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Additional fixes for scroll behavior */
.overflow-x-auto {
    position: relative;
}

/* Force background on sticky elements */
[class*="sticky"] {
    background-color: #1e293b !important;
}

/* Specific override for the coin column */
.table-auto th:first-child,
.table-auto td:first-child {
    background-color: #1e293b !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 25 !important;
}

/* Hover state for first column */
.table-auto tbody tr:hover td:first-child {
    background-color: #334155 !important;
}