@media (max-width: 768px) {
        .stats-categories-grid {
            display: block;
        }

        :root {
            --grid-size: 70px;
            --category-size: 29px;
            --block-gap: 5px;
        } 
        
        
        .category-square:not(.add-button) {
            width: var(--category-size);
            padding: 0;
        }
        
        /* Prevent expansion on mobile - keep squares fixed */
        .category-square.expanded:not(.add-button) {
            width: fit-content !important;
            padding-right: 8px !important;
            overflow: visible !important;
            padding: 0 8px !important; 
        }
        
        /* Hide category content by default on mobile, show on expand */
        .category-square .category-content {
            display: none !important;
        }

        .category-square.expanded .category-content {
            display: flex !important;
        }

        body {
            padding: 10px;
        }
        .container {
            width: 95%;
            margin: 0 auto;
        }
        .grid {
            width: 355px;
        }
        
        .block-number {
				opacity: 1 !important; /* Always visible on mobile */
			}

        .category-indicator {
            display: none !important;   
        }
            .grid-container {
            width: 355px;
        }
        
        /* .categories-section {
             display: none !important;
        } */
        .categories-grid {
            width: 355px;
        }
        
        .grid.weekly-view {
            grid-template-columns: repeat(12, 20px);
            grid-template-rows: repeat(20px);
        }
        
        .stats-container {
            width: 295px !important;
            max-width: 355px !important;
            float: none !important;  /* Remove desktop float */
            margin: 0 !important;  /* Center it */
            padding: 20px;  /* Keep existing padding */
            position: relative !important;   
        }
        
        .stats-header h2 {
            font-size: 22px;
        }
        
        .stats-period {
            font-size: 14px;
        }
        
        .category-stat {
            margin-bottom: 25px;
        }
        
        .category-stat-name {
            font-size: 14px;
        }
        
        .category-stat-percentage {
            font-size: 14px;
        }
        
        .category-stat-bar-container {
            height: 40px;
        }
        
        .category-stat-hours {
            font-size: 13px;
            padding-right: 15px;
        }
        .grid.weekly-view .block-number {
            display: none;
        }

        /* .weekly-grid-container {
                display: none !important;
            } */
        .grid-container .view-toggle {
            display: flex !important;
        }
    }

@media (max-width: 768px) {
    .grid.weekly-view {
        display: block !important;
        width: 355px !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }
    
    .weekly-day-grid {
        border-radius: 6px;
        padding: 4px;
        background: var(--card-bg);
        margin-bottom: 8px;
        display: inline-block;
        width: 76px;  /* 66px grid + 8px padding */
        margin-right: 8px;
        vertical-align: top;
        box-sizing: border-box;
    }
    
    .weekly-day-grid:nth-child(4n) {
        margin-right: 0;
    }
    
    .weekly-mini-grid {
        display: grid;
        grid-template-columns: repeat(4, 17px);
        grid-template-rows: repeat(6, 17px);
        gap: 2px;
    }
    
    .weekly-mini-block {
        width: 17px !important;
        height: 17px !important;
        border-radius: 1px;
        cursor: pointer;
    }
}