/* ==================================================================
    Data Table Layout (Sticky Headers + Frozen Column + Fixed Title)
    ================================================================== */

:root {
    --table-title-height: 2.6rem;
    --table-header-bg: #f8f9fa;
    --table-title-bg: #f8f9fa;
    --table-border: #dee2e6;
    --table-shadow: rgba(0, 0, 0, 0.1);
}

/* --- Base table styles --- */
#dataTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    background-color: #fff;
}

/* --- Shared cell defaults --- */
#dataTable th,
#dataTable td {
    border: 1px solid var(--table-border);
    padding: 0.35rem 0.5rem;
    background-clip: padding-box;
}

#dataTable td {
    vertical-align: middle;
}

/* --- Sticky first (left) column --- */
#dataTable th:first-child,
#dataTable td:first-child {
    position: sticky;
    left: 0;
    z-index: 6;
    background: #fff;
    text-align: left !important;
    white-space: nowrap;
    min-width: 180px;
    padding-right: 15px;
    /* REMOVED: box-shadow to ensure borders match consistently */
}

/* --- Sticky header rows (top) --- */
#dataTable thead tr.sticky-top th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg);
    z-index: 7;
}

/* * FIX: Enforce 1px solid border on all header cells to ensure visual consistency
 * with the table body cells, even when headers are sticky.
 */
#dataTable thead th {
    border: 1px solid var(--table-border);
}


/* --- Top-left intersection cell --- */
#dataTable thead tr.sticky-top th:first-child {
    z-index: 8;
}

/* --- Column headers (state) --- */
#dataTable thead th:not(:first-child) {
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    line-height: 1.2;
    max-width: 14ch;
    padding: 0.4rem 0.6rem;
    vertical-align: bottom;
}

#dataTable thead th:first-child {
    vertical-align: bottom;
 }

/* --- Numeric cells --- */
#dataTable td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
    width: 12ch;
}

/* --- Visual hierarchy --- */
.state-text {
    background-color: var(--table-header-bg);
    font-weight: 600;
}

.smaller-text {
    font-size: 0.8rem;
    line-height: 1.3;
}

#dataTable th.us-total,
#dataTable td.us-total {
    background-color: #fafafa;
    font-weight: 600;
}

/* ===============================================================
    Fixed Separate Title Table (always visible, same background)
    =============================================================== */

#dataTableTitleTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background-color: var(--table-title-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 0;
}

/* Title cell styling */
#dataTableTitleTable th {
    font-weight: 700;
    font-size: 1rem;
    background-color: var(--table-title-bg);
    /* Remove redundant border-bottom and rely on the inherited border rule */
    border: 1px solid var(--table-border);
    text-align: left;
    padding: 0.5rem 0.75rem;
    height: var(--table-title-height);
}

/* Make the title and data tables appear continuous */
.table-responsive {
    margin-top: 0;
}


/* ===============================================================
    Custom Footer Styles (from previous request)
    =============================================================== */

.footer-custom-style {
    /* Set background to fully transparent (0 alpha) */
    background-color: rgba(0, 0, 0, 0); 
    
    /* Fixed Height: ~100px as requested */
    height: 100px; 
    min-height: 100px;
    
    /* MODIFIED: Align content to the bottom */
    display: flex;
    align-items: flex-end; /* Aligns content (the .container) to the bottom */
    justify-content: center;

    /* ADDED: 15px padding at the bottom */
    padding-bottom: 15px;
    /* Reset other padding to ensure only the bottom padding is applied */
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;

    /* Ensure text color is still visible and not transparent */
    color: #6c757d !important; /* Uses a shade of gray similar to Bootstrap's text-muted */

    /* Remove default Bootstrap footer styles like border-top */
    border-top: none !important; 
}

/* Apply the required font size (0.4rem) to the content container inside the footer */
.footer-custom-style .container {
    font-size: 0.4rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}