/* ==================== FILAMENT TABLE SCROLLING & STICKY HEADERS (OPT-IN) ==================== */
/* To enable sticky headers, call: static::enableStickyHeaders($table) */
/* The class 'hx-sticky-table' is applied to the main .fi-ta wrapper div */

/* Only apply to tables with the hx-sticky-table class on the main wrapper */
.fi-ta.hx-sticky-table .fi-ta-content-ctn {
    display: block;
    max-height: var(--hx-table-max-height, calc(100vh - 250px));
    overflow: auto;
    position: relative;
}

/* The actual table needs to be display table for sticky to work properly */
.fi-ta.hx-sticky-table .fi-ta-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Sticky table headers */
.fi-ta.hx-sticky-table .fi-ta-table thead {
    position: sticky;
    top: 0;
    z-index:2;
}

.fi-ta.hx-sticky-table .fi-ta-table thead th {
    background-color: white;
    color: rgb(55 65 81); /* gray-700 */
    border-bottom: 1px solid rgb(229 231 235); /* gray-200 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
}

.dark .fi-ta.hx-sticky-table .fi-ta-table thead th {
    background-color: rgb(17 24 39); /* gray-900 */
    color: rgb(229 231 235); /* gray-200 */
    border-bottom-color: rgb(55 65 81); /* gray-700 */
}

/* Sticky table footers (pagination area) */
.fi-ta.hx-sticky-table .fi-ta-table tfoot {
    position: sticky;
    bottom: 0;
}

.fi-ta.hx-sticky-table .fi-ta-table tfoot td,
.fi-ta.hx-sticky-table .fi-ta-table tfoot th {
    background-color: white;
    border-top: 1px solid rgb(229 231 235); /* gray-200 */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.dark .fi-ta.hx-sticky-table .fi-ta-table tfoot td,
.dark .fi-ta.hx-sticky-table .fi-ta-table tfoot th {
    background-color: rgb(17 24 39); /* gray-900 */
    border-top-color: rgb(55 65 81); /* gray-700 */
}

/* For relation managers - slightly smaller */
.fi-relation-manager .fi-ta.hx-sticky-table .fi-ta-content-ctn {
    max-height: var(--hx-table-max-height, calc(100vh - 350px));
}

/* Tables in modals */
.fi-modal .fi-ta.hx-sticky-table .fi-ta-content-ctn {
    max-height: var(--hx-table-max-height, calc(70vh - 100px));
}

/* Tables in tabs */
.fi-tabs .fi-ta.hx-sticky-table .fi-ta-content-ctn {
    max-height: var(--hx-table-max-height, calc(100vh - 300px));
}

/* Responsive adjustments for smaller screens */
@media (max-height: 800px) {
    .fi-ta.hx-sticky-table .fi-ta-content-ctn {
        max-height: var(--hx-table-max-height, calc(100vh - 200px));
    }
    
    .fi-relation-manager .fi-ta.hx-sticky-table .fi-ta-content-ctn {
        max-height: var(--hx-table-max-height, calc(100vh - 300px));
    }
}

/* Smooth scrolling */
.fi-ta.hx-sticky-table .fi-ta-content-ctn {
    scroll-behavior: smooth;
}

/* Custom scrollbar styling */
.fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar {
    width: 10px; 
    height: 10px;
}

.fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar-track {
    background-color: rgb(243 244 246); /* gray-100 */
    border-radius: 5px;
}

.dark .fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar-track {
    background-color: rgb(31 41 55); /* gray-800 */
}

.fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar-thumb {
    background-color: rgb(209 213 219); /* gray-300 */
    border-radius: 5px;
}

.dark .fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99); /* gray-600 */
}

.fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar-thumb:hover {
    background-color: rgb(156 163 175); /* gray-400 */
}

.dark .fi-ta.hx-sticky-table .fi-ta-content-ctn::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107 114 128); /* gray-500 */
}

/* Firefox scrollbar */
.fi-ta.hx-sticky-table .fi-ta-content-ctn {
    scrollbar-width: thin;
    scrollbar-color: rgb(209 213 219) rgb(243 244 246);
}

.dark .fi-ta.hx-sticky-table .fi-ta-content-ctn {
    scrollbar-color: rgb(75 85 99) rgb(31 41 55);
}