/* MOBILE KPI CARD OPTIMIZATION */
/* Universal mobile styles for all KPI cards across all pages */

@media (max-width: 768px) {
    /* TARGET ALL DMC CARDS - Make super compact on mobile */
    .mantine-Card-root {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }
    
    /* KPI Card specific optimizations */
    .mantine-Card-root .mantine-Stack-root {
        gap: 4px !important;
    }
    
    /* Compact card content */
    .mantine-Card-root .mantine-Group-root {
        gap: 8px !important;
        margin: 0 !important;
        flex-wrap: wrap !important;  /* Allow buttons to wrap in cards */
    }
    
    /* Make KPI values more compact */
    .mantine-Card-root .mantine-Text-root[style*="fontSize: 2rem"] {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    /* Reduce border padding on mobile */
    .mantine-Card-root .mantine-Box-root[style*="borderLeft"] {
        padding-left: 8px !important;
    }
    
    /* Compact titles */
    .mantine-Card-root .mantine-Text-root[style*="textTransform: uppercase"] {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }
    
    /* Home page project cards - ensure buttons don't overflow */
    .project-cards-container .mantine-Card-root {
        height: auto !important;
        max-height: none !important;
    }
    
    /* Buttons in cards should be smaller on mobile */
    .mantine-Card-root .mantine-Button-root {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        min-width: auto !important;
    }
    
    /* Remove excessive margins from containers */
    .mantine-Container-root {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Make SimpleGrid more compact on mobile */
    .mantine-SimpleGrid-root {
        gap: 8px !important;
    }
    
    /* Page content container - remove padding on mobile */
    #page-content {
        padding: 8px !important;
    }
    
    /* Section headers more compact */
    .mantine-Title-root {
        margin-bottom: 8px !important;
    }
    
    /* Reduce Grid spacing */
    .mantine-Grid-root {
        margin: 0 !important;
    }
    
    .mantine-GridCol-root {
        padding: 4px !important;
    }
}

@media (max-width: 480px) {
    /* EXTRA SMALL MOBILE - Even more compact */
    .mantine-Card-root {
        padding: 6px !important;
        margin-bottom: 6px !important;
    }
    
    /* Ultra compact for tiny screens */
    .mantine-Card-root .mantine-Text-root[style*="fontSize: 2rem"] {
        font-size: 1.3rem !important;
    }
    
    .mantine-Card-root .mantine-Box-root[style*="borderLeft"] {
        padding-left: 6px !important;
    }
    
    #page-content {
        padding: 4px !important;
    }
    
    .mantine-Container-root {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    .mantine-SimpleGrid-root {
        gap: 4px !important;
    }
    
    .mantine-GridCol-root {
        padding: 2px !important;
    }
}