/* ============================================
   MOBILE OVERFLOW FIXES
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

.app-container,
.main-content,
.section,
.stat-card,
.product-item,
.table-item,
.activity-item-new,
.alert-item {
    overflow: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.stat-label,
.product-name,
.table-header h4,
.activity-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.grid-2,
.stats-grid,
.health-grid {
    max-width: 100%;
    overflow: visible;
}

/* Mobile specific */
@media (max-width: 768px) {
    .main-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100vw;
    }
    
    .section {
        margin-left: 0;
        margin-right: 0;
    }
    
    .stat-value {
        font-size: 1.75rem;
        word-break: break-word;
    }
    
    .product-name,
    .table-header h4 {
        font-size: 0.95rem;
    }
    
    h3 {
        font-size: 1rem;
        word-break: break-word;
    }
}