/* table-freeze.css */

/* Outer container to hold both the wrapper and the floating buttons */
.freeze-table-container {
    position: relative;
    width: 100%;
}

.freeze-table-wrapper {
    max-height: 70vh; /* Maximum scrollable height */
    overflow: auto;
    position: relative;
}

/* Make table header cells sticky without overriding design colors or borders */
.freeze-table-wrapper table.freeze-table thead th,
.freeze-table-wrapper table.freeze-table thead td {
    position: sticky;
    z-index: 10;
}

/* Background colors for sticky columns to prevent content bleed-through */
.freeze-table-wrapper table.freeze-table tbody tr td.freeze-col {
    background-color: var(--bs-body-bg, #ffffff);
    z-index: 5;
}

/* For striped tables, ensure alternating rows keep a solid background */
.freeze-table-wrapper table.freeze-table.table-striped tbody tr:nth-of-type(odd) td.freeze-col {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Ensure table headers in frozen columns stay on top and maintain background */
.freeze-table-wrapper table.freeze-table thead th.freeze-col,
.freeze-table-wrapper table.freeze-table thead td.freeze-col {
    background-color: var(--bs-primary, #24447f);
    z-index: 15; /* Corner cells must be on top of both vertical and horizontal scroll */
}

/* Scroll helper buttons container */
.freeze-scroll-buttons {
    position: absolute;
    right: 8px; /* Closer to the right edge */
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Shown dynamically via JS when table overflows */
    flex-direction: column;
    gap: 6px; /* Slightly tighter gap */
    z-index: 20;
}

/* Individual scroll buttons */
.freeze-scroll-btn {
    width: 28px; /* Smaller width */
    height: 28px; /* Smaller height */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05); /* Extremely transparent background */
    backdrop-filter: blur(1px); /* Very soft blur effect */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very muted border */
    color: rgba(0, 0, 0, 0.3); /* Softer transparent arrow icon */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none; /* Removed shadow to make it flatter and less obtrusive */
    outline: none;
    padding: 0;
}

.freeze-scroll-btn i {
    font-size: 11px; /* Smaller arrow icon */
}

.freeze-scroll-btn:hover {
    background-color: var(--bs-primary, #24447f); /* Primary theme color on hover */
    color: #ffffff;
    border-color: var(--bs-primary, #24447f);
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Overrides for printing */
@media print {
    .freeze-table-container {
        position: static !important;
    }
    
    .freeze-table-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }
    
    .freeze-table-wrapper table.freeze-table thead th,
    .freeze-table-wrapper table.freeze-table thead td {
        position: static !important;
    }
    
    .freeze-scroll-buttons {
        display: none !important;
    }
    
    .freeze-table-wrapper table.freeze-table tbody tr td.freeze-col,
    .freeze-table-wrapper table.freeze-table thead th.freeze-col,
    .freeze-table-wrapper table.freeze-table thead td.freeze-col {
        position: static !important;
        background-color: transparent !important;
    }
}