/* Client Table Layout - Two Row Grid */
.client-table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Top row: title and filters */
.client-table-header {
    flex-shrink: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.client-table-title {
    float: left;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937; /* text-gray-800 */
    margin: 0;
    line-height: 1.5;
}

.client-table-filters {
    float: right;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    margin-top: 7px;
}

/* Hidden inputs should not take up flex space */
.client-table-filters input[type="hidden"] {
    display: none;
}

.client-table-header::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive breakpoint: stack filters below title on smaller screens */
@media (max-width: 1440px) {
    .client-table-header {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .client-table-title {
        float: none;
        width: 100%;
    }
    
    .client-table-filters {
        float: none;
        width: 100%;
        justify-content: flex-start;
        margin: 0 0 10px 0;
    }
    
    .client-table-header::after {
        display: none;
    }
}

/* Bottom row: table container */
.client-table-body {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.client-table-wrapper {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Preserve the block > binner > bwrap chain */
.client-table-wrapper .block {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.client-table-wrapper .block .binner {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.client-table-wrapper .block .bwrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* Toolbar styling */
.client-table-wrapper .toolbar {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Table container from build_table - preserve chain */
.client-table-wrapper .block .bwrap .bd {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    box-sizing: border-box !important;
    position: relative;
}

.client-table-wrapper .block .bwrap .bd.keep_in_window {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure table can be wider than container for horizontal scroll */
.client-table-wrapper .block .bwrap .bd table {
    width: auto !important;
    min-width: 100% !important;
    table-layout: auto;
    box-sizing: border-box;
}

/* Ensure table takes full width */
.client-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

/* Keep pagination visible */
.client-table-pagination {
    flex-shrink: 0;
    padding: 1rem 0;
}

/* Leads table specific styles - for tables without client-table-wrapper */
/* Ensure main content area doesn't overflow */
.main:has(.client-table-header) {
    overflow-x: hidden;
    max-width: 100%;
}

/* Make the block container use flexbox to constrain height */
/* Tabs are now between client-table-header and block, so we need to account for that */
/* Main is now flexbox, so blocks can grow to fill available space */
.client-table-header + .tabs + .block,
.client-table-header ~ .block {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 450px; /* Ensure enough space for table (250px) + pagination (60px) + toolbar (50px) + margins/padding */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Override for blocks that should not take full height (e.g., reports with multiple blocks) */
.block-static {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.block-static .binner,
.block-static .bwrap {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.block-static .bwrap .bd {
    min-height: 0 !important;
}

/* For reports (which extend reports/index.html), all blocks should be static by default */
/* This prevents multiple blocks from each trying to take full height */
.reports-select ~ .main .block,
.main:has([class*="reports-"]) .block {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.reports-select ~ .main .block .binner,
.main:has([class*="reports-"]) .block .binner,
.reports-select ~ .main .block .bwrap,
.main:has([class*="reports-"]) .block .bwrap {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.client-table-header + .tabs + .block .binner,
.client-table-header ~ .block .binner {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 450px; /* Ensure enough space for table (250px) + pagination (60px) + toolbar (50px) + margins/padding */
    min-width: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.client-table-header + .tabs + .block .bwrap,
.client-table-header ~ .block .bwrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 450px; /* Ensure enough space for table (250px) + pagination (60px) + toolbar (50px) + margins/padding */
    min-width: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Table container with horizontal and vertical scroll */
.client-table-header + .tabs + .block .bwrap .bd,
.client-table-header ~ .block .bwrap .bd {
    flex: 1 1 auto; /* Changed from 1 1 0 to allow natural growth but prevent excessive shrinking */
    min-height: 250px;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    box-sizing: border-box;
    /* Ensure horizontal scrollbar is always visible when content overflows */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #cbd5e0 #f7fafc; /* Firefox */
}

/* Remove min-height for block-static */
.block-static .bwrap .bd {
    min-height: 0 !important;
}

/* Webkit scrollbar styling for better visibility */
.client-table-header + .tabs + .block .bwrap .bd::-webkit-scrollbar,
.client-table-header ~ .block .bwrap .bd::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.client-table-header + .tabs + .block .bwrap .bd::-webkit-scrollbar-track,
.client-table-header ~ .block .bwrap .bd::-webkit-scrollbar-track {
    background: #f7fafc;
}

.client-table-header + .tabs + .block .bwrap .bd::-webkit-scrollbar-thumb,
.client-table-header ~ .block .bwrap .bd::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 6px;
}

.client-table-header + .tabs + .block .bwrap .bd::-webkit-scrollbar-thumb:hover,
.client-table-header ~ .block .bwrap .bd::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Ensure table can be wider than container for horizontal scroll */
.client-table-header + .tabs + .block .bwrap .bd table,
.client-table-header ~ .block .bwrap .bd table {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse;
    box-sizing: border-box;
}

/* Ensure table cells don't wrap and maintain their natural width */
.client-table-header + .tabs + .block .bwrap .bd table td,
.client-table-header + .tabs + .block .bwrap .bd table th,
.client-table-header ~ .block .bwrap .bd table td,
.client-table-header ~ .block .bwrap .bd table th {
    white-space: nowrap;
}

/* Toolbar should not shrink */
.client-table-header + .tabs + .block .bwrap .toolbar,
.client-table-header ~ .block .bwrap .toolbar {
    flex-shrink: 0;
}

/* Pagination should not shrink and should be visible */
.client-table-header + .tabs + .block .bwrap .pagination,
.client-table-header ~ .block .bwrap .pagination {
    flex-shrink: 0;
    height: auto;
    overflow: visible;
}