feat: Update typography styles and improve layout in coverage components

apps/mobile/packages/design_system/lib/src/ui_typography.dart

@@ -322,7 +322,7 @@ class UiTypography {
 
   /// Body 1 Medium - Font: Instrument Sans, Size: 16, Height: 1.5 (#121826)
   static final TextStyle body1m = _primaryBase.copyWith(
-    fontWeight: FontWeight.w500,
+    fontWeight: FontWeight.w600,
     fontSize: 16,
     height: 1.5,
     letterSpacing: -0.025,

apps/mobile/packages/features/client/client_coverage/lib/src/presentation/pages/coverage_page.dart

@@ -59,7 +59,8 @@ class _CoveragePageState extends State<CoveragePage> {
       child: Scaffold(
         body: BlocConsumer<CoverageBloc, CoverageState>(
           listener: (BuildContext context, CoverageState state) {
-            if (state.status == CoverageStatus.failure && state.errorMessage != null) {
+            if (state.status == CoverageStatus.failure &&
+                state.errorMessage != null) {
               UiSnackbar.show(
                 context,
                 message: translateErrorKey(state.errorMessage!),
@@ -251,8 +252,8 @@ class _CoveragePageState extends State<CoveragePage> {
                 UiButton.secondary(
                   text: 'Retry',
                   onPressed: () => BlocProvider.of<CoverageBloc>(context).add(
-                        const CoverageRefreshRequested(),
+                    const CoverageRefreshRequested(),
-                      ),
+                  ),
                 ),
               ],
             ),
@@ -265,22 +266,25 @@ class _CoveragePageState extends State<CoveragePage> {
       padding: const EdgeInsets.all(UiConstants.space5),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
+        spacing: UiConstants.space6,
         children: <Widget>[
-          if (state.stats != null) ...<Widget>[
+          Column(
-            CoverageQuickStats(stats: state.stats!),
+            spacing: UiConstants.space2,
-            const SizedBox(height: UiConstants.space5),
+            children: [
-          ],
+              if (state.stats != null && state.stats!.late > 0) ...<Widget>[
-          if (state.stats != null && state.stats!.late > 0) ...<Widget>[
+                LateWorkersAlert(lateCount: state.stats!.late),
-            LateWorkersAlert(lateCount: state.stats!.late),
+              ],
-            const SizedBox(height: UiConstants.space5),
+              if (state.stats != null) ...<Widget>[
-          ],
+                CoverageQuickStats(stats: state.stats!),
+              ],
+            ],
+          ),
           Text(
             'Shifts (${state.shifts.length})',
             style: UiTypography.title2b.copyWith(
               color: UiColors.textPrimary,
             ),
           ),
-          const SizedBox(height: UiConstants.space3),
           CoverageShiftList(shifts: state.shifts),
           const SizedBox(
             height: UiConstants.space24,

apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/coverage_quick_stats.dart

@@ -18,6 +18,7 @@ class CoverageQuickStats extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
+      spacing: UiConstants.space2,
       children: <Widget>[
         Expanded(
           child: _StatCard(
@@ -27,7 +28,6 @@ class CoverageQuickStats extends StatelessWidget {
             color: UiColors.iconSuccess,
           ),
         ),
-        const SizedBox(width: UiConstants.space3),
         Expanded(
           child: _StatCard(
             icon: UiIcons.clock,
@@ -36,15 +36,6 @@ class CoverageQuickStats extends StatelessWidget {
             color: UiColors.textWarning,
           ),
         ),
-        const SizedBox(width: UiConstants.space3),
-        Expanded(
-          child: _StatCard(
-            icon: UiIcons.warning,
-            label: 'Late',
-            value: stats.late.toString(),
-            color: UiColors.destructive,
-          ),
-        ),
       ],
     );
   }
@@ -84,27 +75,30 @@ class _StatCard extends StatelessWidget {
           width: 0.75,
         ),
       ),
-      child: Column(
+      child: Row(
+        spacing: UiConstants.space2,
         children: <Widget>[
           Icon(
             icon,
             color: color,
             size: UiConstants.space6,
           ),
-          const SizedBox(height: UiConstants.space2),
+          Row(
-          Text(
+            spacing: UiConstants.space1,
-            value,
+            children: [
-            style: UiTypography.title1m.copyWith(
+              Text(
-              color: UiColors.textPrimary,
+                value,
-            ),
+                style: UiTypography.title1b.copyWith(
-          ),
+                  color: color,
-          const SizedBox(height: UiConstants.space1),
+                ),
-          Text(
+              ),
-            label,
+              Text(
-            style: UiTypography.body3r.copyWith(
+                label,
-              color: UiColors.mutedForeground,
+                style: UiTypography.body3r.copyWith(
-            ),
+                  color: color,
-            textAlign: TextAlign.center,
+                ),
+              ),
+            ],
           ),
         ],
       ),

apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/late_workers_alert.dart

@@ -22,32 +22,29 @@ class LateWorkersAlert extends StatelessWidget {
         color: UiColors.destructive.withValues(alpha: 0.1),
         borderRadius: UiConstants.radiusLg,
         border: Border.all(
-          color: UiColors.destructive.withValues(alpha: 0.3),
+          color: UiColors.destructive,
+          width: 0.5,
         ),
       ),
       child: Row(
+        spacing: UiConstants.space4,
         children: <Widget>[
           const Icon(
             UiIcons.warning,
             color: UiColors.destructive,
-            size: UiConstants.space5,
           ),
-          const SizedBox(width: UiConstants.space3),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
-                Text(
-                  'Late Workers Alert',
-                  style: UiTypography.body1b.copyWith(
-                    color: UiColors.destructive,
-                  ),
-                ),
-                const SizedBox(height: UiConstants.space1),
                 Text(
                   '$lateCount ${lateCount == 1 ? 'worker is' : 'workers are'} running late',
+                  style: UiTypography.body1b.textError,
+                ),
+                Text(
+                  'Auto-backup system system is searching for replacements.',
                   style: UiTypography.body3r.copyWith(
-                    color: UiColors.destructiveForeground,
+                    color: UiColors.textError.withValues(alpha: 0.7),
                   ),
                 ),
               ],