/* 1. Force the grid to stack vertically on mobile */
        @media (max-width: 992px) {
            .grid-4, 
            .grid-3, 
            .grid-2 {
                grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
            }
        }

        @media (max-width: 768px) {
            /* 2. Container & Layout fixes */
            .main-content {
                width: 100%;
                padding-top: 60px; /* Space for fixed header */
                overflow-x: hidden; /* Prevent horizontal scroll */
            }

            .container {
                padding: 0 15px; /* Smaller padding on sides */
                max-width: 100vw;
            }

            /* 3. Mobile: Stack everything in 1 column */
            .grid,
            .grid-4, 
            .grid-3, 
            .grid-2,
            .quick-actions {
                grid-template-columns: 1fr !important; /* Force 1 column */
                gap: 16px;
            }

            /* 4. Fix Chart Sizing */
            .card-body {
                padding: 15px;
                position: relative; /* Essential for Chart.js resizing */
                width: 100%;
                overflow: hidden;
            }

            
            canvas {
                max-width: 100% !important;
                height: auto !important;
            }

            /* 5. Adjust Font Sizes */
            .page-title {
                font-size: 20px;
            }
            
            .kpi-value {
                font-size: 24px;
            }
            
            /* 6. Hide Sidebar (Assuming sidebar logic handles this, but ensures width is correct) */
            .admin-wrapper {
                display: block; /* Stack sidebar and content */
            }

            .btn{
                font-size: 70%;
                padding: 5px;
            }
        }