/* ===== MAIN CONTAINER ===== */
#main_dash_csa_tables {
    margin: 10px 0 10px 0;  /* top | right | bottom | left */
}



/* ===== TABLE HEADERS ===== */
#spring_to_spring_header,
#baseline_to_spring_header {
    color: white;
    margin-bottom: 5px;
    text-align: center;
    background-color: #0d4eb8;
    font-family: Calibri, sans-serif;
}

.dark-mode #spring_to_spring_header,
.dark-mode #baseline_to_spring_header {
    background-color: black;  /* Dark mode override */
}

/* ===== TABLE STYLES ===== */
/* Shared header styles for both tables */
.custom-spr-table-wrapper .dash-header,
.custom-base-table-wrapper .dash-header {
    background-color: #0d4eb8 !important;
    color: white !important;
    font-size: 14px !important;
    font-family: Calibri, sans-serif !important;
    text-align: center;
}

.dark-mode .custom-spr-table-wrapper .dash-header,
.dark-mode .custom-base-table-wrapper .dash-header {
    background-color: black !important;  /* Dark mode override */
}

/* Shared cell styles */
.custom-spr-table-wrapper .dash-cell,
.custom-base-table-wrapper .dash-cell {
    font-family: Calibri, sans-serif;
    text-align: center;
}

/* ===== CARD LAYOUT ===== */
#csa_table_row {
    display: flex;
    justify-content: space-between;
    gap: 15px;  /* Modern way to space flex children */
    margin-right: 0px;
}

/* Shared card styles */
#spr_spr_card,
#base_spr_card {
    border-radius: 10px;
    width: 100%;
    border: 1px solid #ccc;
}

/* Card body widths */
#spr_spr_card_body,
#base_spr_card_body {
    width: 100%;
}

/* Column spacing */
#spr_spr_col {
    margin-right: 0px;  /* Space between tables */
}

#base_spr_col {
    margin-right: 0;
}

/* ===== THEME MODES ===== */
/* Title text (applies to both modes) */
.table-title {
    color: white !important;
    font-weight: bold;
    font-family: Calibri;
}

/* Light mode card backgrounds */
.light-mode #base_spr_card_body,
.light-mode #spr_spr_card_body {
    background-color: white;
}

/* Dark mode card backgrounds */
.dark-mode #spr_spr_card_body,
.dark-mode #base_spr_card_body {
    background-color: black;
}

/* Card shadows */
.light-mode #spr_spr_card,
.light-mode #base_spr_card {
    box-shadow: 5px 5px 5px lightblue;
}

.dark-mode #spr_spr_card,
.dark-mode #base_spr_card {
    box-shadow: 5px 5px 5px black;
}

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

    #base_spr_col,
    #spr_spr_col {
        margin: 10px;  /* Add breathing room on mobile */
    }
}