/**
 * Pivot Table Scroll Fix CSS
 *
 * ALL styles are scoped within .freeze-headers class.
 * When freeze toggle is OFF, none of these styles apply.
 * When freeze toggle is ON, scrolling and sticky headers are enabled.
 *
 * Usage:
 * 1. Add class "freeze-headers" to your .pivot-table-wrapper when toggle is ON
 * 2. Remove class "freeze-headers" when toggle is OFF
 */

/* ==========================================================================
   FREEZE HEADERS MODE - ALL styles scoped within .freeze-headers
   Only applies when the freeze toggle is ON
   ========================================================================== */
.pivot-table-wrapper.freeze-headers {
    /* Ensure the wrapper doesn't create unwanted overflow contexts */
    overflow: visible !important;
}

.pivot-table-wrapper.freeze-headers .pivot-output {
    overflow: visible !important;
}

/* ==========================================================================
   1. UNUSED FIELDS AREA - Scrollable with max-height
   ========================================================================== */
.pivot-table-wrapper .pvtAxisContainer.pvtUnused.pvtVertList {
    max-height: calc(90vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    scrollbar-width: thin;
}

/* Webkit scrollbar styling for unused fields */
.pivot-table-wrapper .pvtAxisContainer.pvtUnused.pvtVertList::-webkit-scrollbar {
    width: 6px;
}

.pivot-table-wrapper.freeze-headers .pvtAxisContainer.pvtUnused.pvtVertList::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.pivot-table-wrapper.freeze-headers .pvtAxisContainer.pvtUnused.pvtVertList::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.pivot-table-wrapper.freeze-headers .pvtAxisContainer.pvtUnused.pvtVertList::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ==========================================================================
   2. PIVOT TABLE RENDERER AREA - Scrollable container
   ========================================================================== */
.pivot-table-wrapper td.pvtRendererArea {
    max-height: calc(90vh - 200px) !important;
    /*max-width: calc(100vw - 350px) !important;*/
    width: 63vw;
    overflow: auto !important;
    position: relative !important;
    display: block !important;
    scrollbar-width: thin;
}

.pivot-table-wrapper table.pvtUi td.pvtRendererArea {
    vertical-align: top;
}

/* ==========================================================================
   3. STICKY HEADERS
   ========================================================================== */

/* Ensure proper stacking context for the table */
.pivot-table-wrapper.freeze-headers .pvtTable {
    position: relative;
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Column headers - sticky at top */
.pivot-table-wrapper.freeze-headers .pvtTable thead tr th {
    position: sticky !important;
    z-index: 100;
    background-color: #e6EEEE !important;
    box-shadow: 0 1px 0 0 #c8d4d4;
}

/* Row headers - sticky at left */
.pivot-table-wrapper.freeze-headers .pvtTable tbody tr th {
    position: sticky !important;
    /*z-index: 50;*/
    z-index: 100;
    box-shadow: 1px 0 0 0 #c8d4d4;
}

.pivot-table-wrapper.freeze-headers .pvtTable tbody tr th.pvtRowLabel {
    background-color: #fff !important;
}

.pivot-table-wrapper.freeze-headers .pvtTable tbody tr th.pvtTotalLabel {
    background-color: #e6EEEE !important;
}

/* Corner cells - highest z-index (intersection of row and column headers) */
.pivot-table-wrapper.freeze-headers .pvtTable thead tr th.pvtAxisLabel {
    z-index: 150 !important;
}

#pivot-body > div > div > div.el-card__body > div:nth-child(3) > div:nth-child(1) > div > div > div > div > div > table > tr:nth-child(2) > td.pvtRendererArea > table > thead > tr:nth-child(1) > th:nth-child(1) {
    z-index: 1600 !important;
}

.pvtUi td.pvtRendererArea {
    padding: 0px !important;
    margin: 8px !important;
}

/* ==========================================================================
   4. ENSURE PARENT CONTAINERS DON'T BREAK STICKY
   ========================================================================== */
.pivot-table-wrapper.freeze-headers table.pvtUi {
    overflow: visible !important;
}

/* ==========================================================================
   DEFAULT MODE (freeze headers OFF) - Force normal behavior
   Ensures no sticky positioning when freeze is disabled
   ========================================================================== */
.pivot-table-wrapper:not(.freeze-headers) .pvtTable thead tr th,
.pivot-table-wrapper:not(.freeze-headers) .pvtTable tbody tr th {
    position: static !important;
    z-index: auto !important;
}

.pivot-table-wrapper:not(.freeze-headers) td.pvtRendererArea {
    overflow: visible;
    max-height: none;
    max-width: none;
    display: table-cell;
}

.pivot-table-wrapper:not(.freeze-headers) .pvtAxisContainer.pvtUnused.pvtVertList {
    max-height: none;
    overflow: visible;
    display: block;
}