﻿/* ==========================================================================
   SafeFixedTableHeader.css
   - Desktop: Window vertical scroll + Natural table handoff + Only Stock Name pinned
   - Mobile: 70vh viewport + Touch momentum scroll + Only Stock Name pinned
   ========================================================================== */

/* 1. Neutralize tab container clipping across all screen sizes */
.tab-content,
.tab-content > .tab-pane {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

    /* 2. Table structure & border integrity */
    .tab-content > .tab-pane > .table-responsive > .table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

/* ==========================================================================
   3. HORIZONTAL & VERTICAL WRAPPER MANAGEMENT
   ========================================================================== */

/* Desktop: Allow horizontal scroll for wide columns while letting vertical stick to window */
@media (min-width: 768px) {
    .tab-content > .tab-pane > .table-responsive,
    .tab-content > .tab-pane > .table-responsive.slick-table {
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile: Contained box with smooth touch scroll */
@media (max-width: 767px) {
    .tab-content > .tab-pane > .table-responsive,
    .tab-content > .tab-pane > .table-responsive.slick-table {
        max-height: 70vh !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================================================================
   4. VERTICAL STICKY HEADER ROW (Top Pinned)
   ========================================================================== */
.tab-content > .tab-pane > .table-responsive th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    background-color: #304A6B !important;
    color: #fff !important;
    z-index: 10 !important;
    border-bottom: 2px solid #ddd !important;
}

/* Preserve Bottom Losers maroon header */
.tab-content > .tab-pane > .table-responsive > .table tr[style*="800000"] th,
.tab-content > .tab-pane > .table-responsive > .table thead tr[style*="800000"] th {
    background-color: #800000 !important;
}

/* ==========================================================================
   5. UNFREEZE COLUMNS 1 TO 4 (Icon, Rank, StockID, Group)
   ========================================================================== */
.tab-content > .tab-pane > .table-responsive th.freeze-col:nth-child(-n+4),
.tab-content > .tab-pane > .table-responsive td.freeze-col:nth-child(-n+4) {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
}

/* Restore top-sticky behavior for the first 4 headers when scrolling vertically */
.tab-content > .tab-pane > .table-responsive th.freeze-col:nth-child(-n+4) {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* ==========================================================================
   6. FREEZE ONLY COLUMN 5 (Stock Name) AT LEFT: 0
   ========================================================================== */

/* Header cell for Stock Name (Top-Left intersection) */
.tab-content > .tab-pane > .table-responsive th.freeze-col:nth-child(5) {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    background-color: #304A6B !important;
    border-right: 2px solid #bbb !important;
}

/* Bottom Losers table header for Stock Name */
.tab-content > .tab-pane > .table-responsive > .table tr[style*="800000"] th.freeze-col:nth-child(5),
.tab-content > .tab-pane > .table-responsive > .table thead tr[style*="800000"] th.freeze-col:nth-child(5) {
    background-color: #800000 !important;
}

/* Data cell for Stock Name */
.tab-content > .tab-pane > .table-responsive td.freeze-col:nth-child(5) {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: #fff !important;
    border-right: 2px solid #bbb !important;
}

/* Preserve alternating row color on pinned Stock Name cell */
.tab-content > .tab-pane > .table-responsive tr:nth-of-type(even) td.freeze-col:nth-child(5) {
    background-color: #f5f5f5 !important;
}
