/* Mobile responsiveness for DataTee Analytics */

/* Make all stat card grids responsive */
[class*="stats-grid"] {
    display: grid !important;
}

/* Tablet and smaller screens (iPad, etc.) */
@media (max-width: 1024px) {
    /* 5-column grid becomes 3 columns on tablets */
    [style*="gridTemplateColumns: repeat(5, 1fr)"],
    .stats-grid-5col {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* 4-column grid becomes 2 columns on tablets */
    [style*="gridTemplateColumns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet portrait and smaller screens */
@media (max-width: 768px) {
    /* 5-column grid becomes 2 columns */
    [style*="gridTemplateColumns: repeat(5, 1fr)"],
    .stats-grid-5col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* 4-column grid becomes 2 columns */
    [style*="gridTemplateColumns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Auto-fit grids with smaller min width */
    [style*="gridTemplateColumns: repeat(auto-fit, minmax(250px, 1fr))"] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
    
    /* Make Plotly graphs responsive */
    .js-plotly-plot {
        width: 100% !important;
    }
    
    /* Adjust stat card containers */
    .stat-card-container {
        max-width: 100% !important;
    }
    
    /* Reduce padding on mobile */
    .main-content {
        padding: 10px !important;
    }
}

/* Mobile phones and smaller */
@media (max-width: 480px) {
    /* All grids become single column on mobile */
    [style*="gridTemplateColumns: repeat(5, 1fr)"],
    [style*="gridTemplateColumns: repeat(4, 1fr)"],
    .stats-grid-5col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Auto-fit grids also go single column */
    [style*="gridTemplateColumns: repeat(auto-fit, minmax(250px, 1fr))"],
    [style*="gridTemplateColumns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Scale down Plotly text elements */
    .js-plotly-plot .gtitle {
        font-size: 14px !important;
    }
    
    /* Make indicator values smaller on mobile */
    .js-plotly-plot .number {
        font-size: 32px !important;
    }
    
    /* Reduce margins for stat cards */
    .stat-card-container {
        margin-bottom: 12px !important;
    }
    
    /* Adjust tooltip positioning for mobile */
    .tooltip-text {
        width: 200px !important;
        font-size: 11px !important;
        padding: 10px !important;
    }
    
    /* Reduce card heights slightly on mobile */
    .js-plotly-plot .plot-container {
        min-height: 180px !important;
    }
}