/* =========================================================
   1. CORE TABLE SCROLL CONTAINER (Horizontal & Vertical)
   ========================================================= */
.table-scroll {
    overflow-x: auto; /* Automatic horizontal scrolling when table width > container */
    overflow-y: auto; /* Vertical scrolling */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
}

    /* =========================================================
   2. TABLE LAYOUT & SIZING INSIDE SCROLL CONTAINERS
   ========================================================= */
    .table-scroll > table,
    .table-scroll > #tabledetail,
    .table-scroll-fill > table,
    .table-scroll-fill > #tabledetail {
        width: max-content; /* Expands to full required width of columns */
        min-width: 100%; /* If columns are few, stretches across full width */
        margin-bottom: 0;
    }

/* Reusable Fixed Table Layout */
.table-fixed,
table.table-fixed {
    table-layout: fixed !important;
}

/* Text Wrapping / No-Wrap in table cells */
.table-scroll th,
.table-scroll td,
.table-scroll-fill th,
.table-scroll-fill td {
    white-space: nowrap; /* Prevents columns from getting crushed/wrapped */
    vertical-align: middle;
}

    /* Allow specific columns to wrap if needed */
    .table-scroll th.text-wrap,
    .table-scroll td.text-wrap,
    .table-scroll-fill th.text-wrap,
    .table-scroll-fill td.text-wrap {
        white-space: normal !important;
    }

/* =========================================================
   3. STICKY HEADERS & FOOTERS
   ========================================================= */
.table-scroll thead th,
.table-scroll-fill thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: lightcyan;
}

.table-scroll tfoot,
.table-scroll-fill tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: lightcyan;
}

.table-scroll tfoot td,
.table-scroll-fill tfoot td {
    background: lightcyan;
}

/* =========================================================
   4. FULL-VIEWPORT TABLE LAYOUT (Height = Remaining Screen Area)
   Buttons stick to bottom, table fills remaining space
   ========================================================= */
/* Outer page wrapper that fits inside .main-content without outer scroll */
.page-viewport-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--navbar-height) - (var(--spacing, 1rem) * 2));
    min-height: 0;
    overflow: hidden; /* Prevents dual scrollbar on page */
}

/* Top non-table content (Notifications, Search bar, Filters) */
.page-viewport-top {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

/* Card containing the table: Expands to fill 100% of remaining vertical screen area */
.card-fill-viewport {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Required for nested scrolling in Flexbox */
    margin-bottom: 0 !important;
    overflow: hidden;
}

    .card-fill-viewport > .card-header {
        flex-shrink: 0;
    }

/* Table scroll area inside the full-viewport card */
.table-scroll-fill {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
}

/* Sticky Footer Strip - ALWAYS STICKS TO BOTTOM of the card/screen */
.card-fill-viewport > .card-footer,
.page-footer-sticky {
    flex-shrink: 0;
    margin-top: auto; /* Guarantees buttons stick firmly to the bottom */
}

/* Sticky Footer Strip for Report Page & other viewports (always visible at bottom) */
.rpage-footer-sticky {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    flex-shrink: 0;
    margin-top: auto;
    background-color: #ffffff !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Flexible table scroll height for Report Page:
   Calculates height to fit remaining viewport area so sticky buttons sit naturally at bottom */
.report-card .scroll-500,
.scroll-report-flexible,
.table-scroll-report {
    height: calc(100vh - var(--navbar-height, 61px) - 410px);
    max-height: calc(100vh - var(--navbar-height, 61px) - 410px);
    min-height: 200px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: height 0.3s ease, max-height 0.3s ease;
}

/* When filters are collapsed, table expands into the freed vertical space */
.report-card:has(#collapseFilters:not(.show)) .scroll-500,
.report-card:has(#collapseFilters:not(.show)) .scroll-report-flexible,
.report-card:has(#collapseFilters:not(.show)) .table-scroll-report {
    height: calc(100vh - var(--navbar-height, 61px) - 200px);
    max-height: calc(100vh - var(--navbar-height, 61px) - 200px);
}

/* Report Page Filter Collapse Chevron Indicator */
.collapse-icon {
    transition: transform 0.25s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-icon,
[data-bs-toggle="collapse"][aria-expanded="true"] #filterCollapseIcon {
    transform: rotate(0deg);
}

[data-bs-toggle="collapse"][aria-expanded="false"] .collapse-icon,
[data-bs-toggle="collapse"][aria-expanded="false"] #filterCollapseIcon {
    transform: rotate(180deg);
}

/* =========================================================
   5. STANDALONE CALC-BASED SCROLL HEIGHTS (Drop-in Classes)
   ========================================================= */
/* Fills remaining screen area on Dashboard */
.scroll-fill-dashboard {
    height: calc(100vh - var(--navbar-height) - 230px);
    max-height: calc(100vh - var(--navbar-height) - 230px);
    overflow: auto;
}

/* Fills remaining screen area on Master/Detail list pages */
.scroll-fill-master {
    height: calc(100vh - var(--navbar-height) - 175px);
    max-height: calc(100vh - var(--navbar-height) - 175px);
    overflow: auto;
}

/* Legacy & Specific Height Utilities */
.scroll-100 {
    height: 100px;
    max-height: 100px;
    overflow: auto;
}

.scroll-260 {
    height: 260px;
    max-height: 260px;
    overflow: auto;
}

.scroll-300 {
    height: 300px;
    max-height: 300px;
    overflow: auto;
}

.scroll-400 {
    height: 400px;
    max-height: 400px;
    overflow: auto;
}

.scroll-500 {
    height: 500px;
    max-height: 500px;
    overflow: auto;
}

.scroll-550 {
    height: 550px;
    max-height: 550px;
    overflow: auto;
}

.scroll-590 {
    height: 590px;
    max-height: 590px;
    overflow: auto;
}

.scroll-650 {
    height: 650px;
    max-height: 650px;
    overflow: auto;
}

.scroll-700 {
    height: 700px;
    max-height: 700px;
    overflow: auto;
}

/* Standard 14-16" Laptops / Scaled Displays */
@media (max-height: 860px), (max-width: 1440px) {
    .scroll-700 {
        height: 560px;
        max-height: 560px;
    }

    .scroll-650 {
        height: 510px;
        max-height: 510px;
    }

    .scroll-590 {
        height: 450px;
        max-height: 450px;
    }

    .scroll-550 {
        height: 410px;
        max-height: 410px;
    }

    .scroll-500 {
        height: 360px;
        max-height: 360px;
    }
}

/* Stronger selector to override Bootstrap styles */
tr.selectedrow {
    background-color: #ffe7a3 !important; /* Soft yellow highlight */
}

.selectedrow td {
    background-color: darkkhaki !important; /* Soft yellow highlight */
}

/* =========================================================
   6. COMMISSION REPORT PAGE FLEXIBLE TABLE SCROLL
   ========================================================= */
.scroll-commission,
.table-scroll-commission {
    height: calc(100vh - var(--navbar-height, 61px) - 370px);
    max-height: calc(100vh - var(--navbar-height, 61px) - 370px);
    min-height: 200px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: height 0.3s ease, max-height 0.3s ease;
}

/* When Commission filters are collapsed, table expands into freed vertical space */
body:has(#collapseCommissionFilters:not(.show)) .scroll-commission,
body:has(#collapseCommissionFilters:not(.show)) .table-scroll-commission {
    height: calc(100vh - var(--navbar-height, 61px) - 210px);
    max-height: calc(100vh - var(--navbar-height, 61px) - 210px);
}

@media (min-width: 768px) {
    .btn-comm-action {
        min-width: 140px;
    }
}