### BEFORE (Current Implementation)

Company | Type | Users | Status | Actions
--- | --- | --- | --- | ---
Acme Corp acme-corp | Company | 25 users | Active | View Edit

### AFTER (Consolidated Implementation)

Company | Type | Users | Status | Actions
--- | --- | --- | --- | ---
Acme Corp acme-corp | Company | 25 users | Active | View Edit

### Mobile-Optimized Version

Company | Type | Users | Status | Actions
--- | --- | --- | --- | ---
Acme Corp acme-corp | Company | 25 users | Active | View Edit

### Key Improvements with Consolidated Tables:

- Consistent Styling: All tables use the same base .table class
- Modular Modifiers: Add features with modifier classes (--hover, --striped, --compact)
- Mobile Responsive: Built-in mobile stacking with data-label attributes
- Semantic Badges: Unified badge system with color variants
- CSS Variables: Easy theming and dark mode support
- Reduced CSS: No duplicate styles across different table types
- Better Accessibility: Proper semantic markup and ARIA support

### CSS Classes Comparison

Old Class | New Class | Purpose
--- | --- | ---
`data-table` | `table table--hover` | Basic data table with hover
`users-table` | `table table--hover table--admin` | Admin user management table
`entries-table` | `table table--hover table--time-entries` | Time tracking entries
`status-badge status-active` | `table-badge table-badge--success` | Status indicators
`badge badge-company` | `table-badge table-badge--info` | Type badges