table {
    text-align: center;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.dataTables_scrollHead .dataTables_scrollHeadInner .dataTable thead tr th {
    text-align: center;
}

.dataTables_scrollHead .dataTables_scrollHeadInner .dataTable thead tr th::after, .dataTables_scrollHead .dataTables_scrollHeadInner .dataTable thead tr th::before {
    right: 2px;
}

input, select {
    margin-bottom: 1.5rem !important;
}

i {
    pointer-events: none;
}

.table_container {
    width: 85%;
    margin: 0 auto;
    overflow-x: auto; /* Enable horizontal scrolling if needed */
}


/* Center text in the header of the main setup table */
#setup_table thead th {
    text-align: center;
    vertical-align: middle;
    /* optional: ensure consistent padding */
    padding: 0.6rem 0.75rem;
}

#setup_table thead tr th.sorting:before {
    right: 2px !important; /* adjust as needed to position sort icon */
}

#setup_table thead tr th.sorting:after {
    right: 2px !important; /* adjust as needed to position sort icon */
}

/* Vertically center main table cells */
#setup_table th,
#setup_table td {
    vertical-align: middle;
}

/* Replace existing nested-table rules with this (Option A) */
/* Makes nested table narrower and scrollable if needed */
.nested-table {
    max-width: 100%;        /* total visible width for the nested table */
    margin: 0 auto;
    overflow-x: auto;        /* allow horizontal scroll if content overflows */
    white-space: nowrap;
    
    border-collapse: separate !important;
    border-spacing: 0 1rem;  /* horizontal gap: 0, vertical gap: 1rem */
}

.nested-table tr { 
    margin-bottom: 0.5rem !important;
}

.nested-table td:first-child {
    border-left: 0.8rem solid transparent !important;
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.nested-table td:last-child {
    border-right: 0.8rem solid transparent !important;
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* .nested-table td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.nested-table td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
} */

.nested-table tr.Orange td:first-child {
    border-left-color: var(--orange) !important;
}

.nested-table tr.Orange td:last-child {
    border-right-color: var(--orange) !important;
}

.nested-table tr.Green td:first-child {
    border-left-color: var(--green) !important;
}

.nested-table tr.Green td:last-child {
    border-right-color: var(--green) !important;
}

.nested-table tr.Red td:first-child {
    border-left-color: var(--red) !important;
}

.nested-table tr.Red td:last-child {
    border-right-color: var(--red) !important;
}

.nested-table tr.Black td:first-child {
    border-left-color: var(--black) !important;
}

.nested-table tr.Black td:last-child {
    border-right-color: var(--black) !important;
}

.nested-table tr.Pink td:first-child {
    border-left-color: var(--pink) !important;
}

.nested-table tr.Pink td:last-child {
    border-right-color: var(--pink) !important;
}

.nested-table tr.Yellow td:first-child {
    border-left-color: var(--yellow) !important;
}

.nested-table tr.Yellow td:last-child {
    border-right-color: var(--yellow) !important;
}

.nested-table tr.Purple td:first-child {
    border-left-color: var(--purple) !important;
}

.nested-table tr.Purple td:last-child {
    border-right-color: var(--purple) !important;
}

.nested-table tr.Brown td:first-child {
    border-left-color: var(--brown) !important;
}

.nested-table tr.Brown td:last-child {
    border-right-color: var(--brown) !important;
}

.nested-table tr.Blue td:first-child {
    border-left-color: var(--blue) !important;
}

.nested-table tr.Blue td:last-child {
    border-right-color: var(--blue) !important;
}

.nested-table tbody {
    /* display: block;          keep tbody as block for scrolling */
    width: 100%;
}

.nested-table td {
    width: 90px;             /* smaller per-column width; adjust to taste */
    vertical-align: middle;
    padding: 0.2rem 0.4rem;
    overflow: hidden;
    word-break: break-word;
}

.sum-cell {
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    width: 100px;            /* ensure sum column is slightly wider, still aligned */
}

.nested-total {
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 0;
}

.no-reports {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 0.25rem 0;
}