/* ===== MAIN CONTAINER ===== */
#main_dash_csa_table_div {
    background-color: var(--bg);
    box-shadow: var(--shadow-l);
    border-radius: 10px;
    
    display: flex;
    flex-direction: column;
    justify-items: center ;
    
    backdrop-filter: blur(10px);
}



#csa_table_div {
    overflow-y: scroll;
}

#csa_table_scroll_fade {
    mask-image: linear-gradient(to bottom, black 90%, transparent);
    backdrop-filter: blur(10px);
    border-radius: 10px;
}


/* ===== TABLE HEADERS ===== */
#spring_to_spring_header,
#baseline_to_spring_header,
#custom_header{
    color: var(--text-main);
    margin-bottom: 5px;
    text-align: center;
    background-color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
    padding:2px
}





/* ===== TABLE STYLES ===== */
/* Shared header styles for both tables */
.custom-spr-table-wrapper .dash-header,
.custom-base-table-wrapper .dash-header {
    background-color: var(--primary) !important;
    color: var(--button-icon) !important;
    font-size: 1rem !important;
    text-align: center;
 
}

#spr_spr_card .column-header-name,
#base_spr_card .column-header-name, 
#custom_card .column-header-name {
    color: var(--text-main) !important;
} 


/* Shared cell styles */
.custom-spr-table-wrapper .dash-cell,
.custom-base-table-wrapper .dash-cell {
    text-align: center;
    font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;


}

/* ===== CARD LAYOUT ===== */
#csa_table_row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;  /* Modern way to space flex children */
    margin: 0px !important;
    width: 100%;
    margin-bottom: 10px !important;

}

/* Shared card styles */
#spr_spr_card,
#base_spr_card, 
#custom_card {
    width: 100%;
    box-shadow: var(--shadow-l);
    margin: 0px !important;
}


@media screen and (max-width:950px) {
    #csa_table_div {
        padding: 10px
    }
}


/* Column spacing */
#spr_spr_col,
#base_spr_col {
    margin:0px !important;
    padding:10px !important;
}

.table-title {
    color: var(--button-icon);
}

#base_spr_card_body,
#spr_spr_card_body {
    background-color: var(--bg-light);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media screen and (max-width: 950px) {
    #spr_spr_card,
    #base_spr_card {
        width: 100%;  /* Slightly shrink on small screens */
    }

}