.chart-group button {
    padding: 0 2rem !important;
}

table.charts-css > caption {
    color: #4a4a4a;
}
.charts-css tr td {
    color: #ffffff;
    font-weight: 900;
}

.charts-css tr th {
    color: #556774;
}

/* .chart-wrap {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 35px 1fr;
    grid-template-rows: 1fr 35px;
    grid-template-areas: "data-axis chart"
        ". primary-axis";
    margin: 3rem 0 1rem;
}

.chart-wrap > table {
    grid-area: chart;
}
.chart-wrap > .primary-axis {
    grid-area: primary-axis;
}
.chart-wrap > .data-axis {
    grid-area: data-axis;
    writing-mode: tb-rl;
    transform: rotateZ(180deg);
}

.charts-css th[scope="row"] {
    font-size: .75rem;
}

.charts-css.column tbody tr th {
    top: 102%;
}

.charts-css.show-heading caption {
    margin: 0 auto 1rem;
}

.charts-css.area.show-labels, .charts-css.column.show-labels, .charts-css.line.show-labels {
    --labels-size: 4rem;
}

.charts-css.column:not(.reverse) tbody tr {
    margin-block-end: 0px;
}

.charts-css {
    --primary-axis-color: #3c4b71;
    --primary-axis-width: 4.5rem;
    color: #fff;
}

.charts-css caption {
    color: #1b2836;
}

.charts-css.column:not(.reverse-datasets):not(.stacked) tbody tr {
    max-width: 25%;
} */

.chart-wrap {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 35px 1fr;
    grid-template-rows: 1fr 40px;
    grid-template-areas: "data-axis chart"
        ". primary-axis";
    margin: 3rem 0 1rem;
    background: #f3f6f9;
    padding: .5rem;
    grid-gap: 0px;
}

.chart-wrap > table {
    grid-area: chart;
}


.chart-wrap > .primary-axis {
    grid-area: primary-axis;
}
.chart-wrap.bar > .data-axis {
    grid-area: data-axis;
    writing-mode: tb-rl;
    transform: rotateZ(180deg);
}

.charts-css.area.show-labels.reverse.reverse-labels tbody tr th, .charts-css.area.show-labels:not(.reverse):not(.reverse-labels) tbody tr th, .charts-css.column.show-labels.reverse.reverse-labels tbody tr th, .charts-css.column.show-labels:not(.reverse):not(.reverse-labels) tbody tr th, .charts-css.line.show-labels.reverse.reverse-labels tbody tr th, .charts-css.line.show-labels:not(.reverse):not(.reverse-labels) tbody tr th {
    -webkit-box-pack: var(--labels-align-block,flex-start);
    -ms-flex-pack: var(--labels-align-block,flex-start);
    justify-content: var(--labels-align-block,flex-start);
    font-size: .75rem;
}

.charts-css.show-heading caption {
    margin: 0 auto 1rem;
}

.charts-css.area, .charts-css.column, .charts-css.line {
    --labels-size: 5rem;
}

.charts-css.area.reverse:not(.reverse-data) tbody tr td .data, .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td .data, .charts-css.line.reverse:not(.reverse-data) tbody tr td .data, .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td .data {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.charts-css.show-labels .data {
    font-size: .75rem;
    line-height: .75rem;
    position: absolute;
    bottom: 5%;
}

.charts-css.bar tbody tr td {
    min-height: 2.5rem !important;
}

.charts-css.bar.show-labels tbody tr th {
    align-items: center;
    line-height: normal;
}

.chart-wrap {
    min-height: 500px;
    background: #dae0ea;
    position: relative;
}

.chart-group {
    margin: 1rem 0 5rem;
}

.chart-wrap.bar {
    max-height: 500px !important;
    overflow-y: auto !important;
}

input[type="date"] {
    background-color: #fff !important;
}

.flex-form {
    display: flex;
    gap: 1rem;
}

.chart-loading{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Rotate labels for column charts */



.chart-wrap.column {
    width: 100%;          /* Never exceed parent width */
    max-width: 100%;      /* Prevent overflow beyond container */
    overflow-x: auto;     /* Enable horizontal scrolling */
    overflow-y: hidden;   /* Avoid vertical scrollbars */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    display: block;       /* Ensures wrapper behaves predictably */
    padding-bottom: 10rem; /* Optional: space for scrollbar */
}

.chart-wrap.column table.charts-css.column {
    width: max-content;   /* Allow table to expand as wide as needed */
    min-width: 100%;      /* Prevent table from shrinking smaller than wrapper */
}

table.charts-css.column {
    --aspect-ratio: 21/ 5;
}

table.charts-css.column th {
    transform: rotate(
-90deg);
    margin-left: -105px !important;
    margin-bottom: -125px !important;
    width: 300px !important;
}

.chart-wrap.column .data-axis {
    position: absolute;
    bottom: 1rem;
}

.charts-css.bar tbody tr, .charts-css.column tbody tr, .charts-css.area tbody tr, .charts-css.line tbody tr {
    overflow-wrap: break-word;
}

.charts-css.column tbody tr {
    flex: 0 0 40px;
}

.charts-css.column tbody, .charts-css.area tbody, .charts-css.line tbody {
    justify-content: center;
}



/* Responsive Styles */

@media screen and (max-width: 1080px) {
    #graph_reports {
        display: block;
        max-width: 700px;
        margin: auto;
    }
}