/*
 * Responsive viewport for the ApexCharts hourly histogram.
 * Tabler owns the card, spacing and colors; this file only controls the
 * time-domain chart viewport and its mobile overflow behavior.
 */
.jl-hourly-chart__scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0 0.5rem;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.jl-hourly-chart__scroll:focus-visible {
    border-radius: var(--tblr-border-radius-sm);
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

.jl-hourly-chart__canvas {
    width: 100%;
    min-width: 46rem;
    height: 20rem;
}

.jl-hourly-chart__canvas .apexcharts-canvas {
    margin-inline: auto;
}

.jl-hourly-chart__canvas .apexcharts-text,
.jl-hourly-chart__canvas .apexcharts-datalabel {
    font-family: inherit !important;
}

@media (min-width: 768px) {
    .jl-hourly-chart__canvas {
        height: 25rem;
    }
}

@media (min-width: 1100px) {
    .jl-hourly-chart__scroll {
        overflow-x: hidden;
    }

    .jl-hourly-chart__canvas {
        min-width: 0;
    }

    .jl-hourly-chart__scroll-hint {
        display: none;
    }
}