/* Mobile optimization for meter graphs and usage charts */

/* Limit meter graph container height on mobile devices */
.meter-graph-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile-specific styling for meter graphs */
@media (max-width: 768px) {
    .meter-graph-mobile-limit {
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        margin-bottom: 1rem;
    }
    
    /* Ensure graphs are responsive on mobile */
    .meter-graph-mobile-limit .dx-chart,
    .meter-graph-mobile-limit .dxc-chart {
        max-width: 100%;
        height: auto;
        min-height: 250px;
    }
    
    /* Adjust graph text for mobile readability */
    .meter-graph-mobile-limit .dx-chart-axis text,
    .meter-graph-mobile-limit .dx-axis-label text {
        font-size: 12px;
    }
    
    /* Stack elements vertically on mobile */
    .meter-graph-mobile-limit .chart-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
    .meter-graph-mobile-limit {
        max-height: 250px;
        padding: 0.5rem;
    }
    
    /* Further reduce chart height on very small screens */
    .meter-graph-mobile-limit .dx-chart,
    .meter-graph-mobile-limit .dxc-chart {
        min-height: 200px;
    }
    
    /* Smaller text for tiny screens */
    .meter-graph-mobile-limit .dx-chart-axis text,
    .meter-graph-mobile-limit .dx-axis-label text {
        font-size: 10px;
    }
}

/* Ensure scrollable content doesn't interfere with page scroll */
.meter-graph-mobile-limit {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for webkit browsers */
.meter-graph-mobile-limit::-webkit-scrollbar {
    width: 6px;
}

.meter-graph-mobile-limit::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.meter-graph-mobile-limit::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.meter-graph-mobile-limit::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}