UI Phase 2 (L4): ISR status-pill consistency + shared status-kind mapper

The IT Service Requests list tile still used the legacy StatusPill (violet
"DRAFT"); make it semantic like the detail header. Extract the ISR status ->
StatusKind mapping into a shared helper so list and detail stay in sync.

- New isr_status_kind.dart (public isrStatusKind); removed the private duplicate
  from the detail screen.
- _RequestTile now uses StatusPill.kind(isrStatusKind(status), ...).

(The request cards were already content-dense; no layout change needed.)
Verified: flutter analyze lib clean; flutter build web green.

Co-Authored-By: claude-flow <ruv@ruv.net>

lib/screens/it_service_requests/isr_status_kind.dart

@@ -0,0 +1,16 @@
+import '../../models/it_service_request.model.dart';
+import '../../theme/app_status_colors.dart';
+
+/// Maps an IT service request status to a semantic [StatusKind] so its color
+/// carries meaning consistently across the list and detail screens
+/// (amber=pending approval, grey=scheduled, blue=in progress, green=completed,
+/// grey=cancelled).
+StatusKind isrStatusKind(String status) => switch (status) {
+  ItServiceRequestStatus.pendingApproval => StatusKind.warning,
+  ItServiceRequestStatus.scheduled => StatusKind.neutral,
+  ItServiceRequestStatus.inProgress => StatusKind.info,
+  ItServiceRequestStatus.inProgressDryRun => StatusKind.info,
+  ItServiceRequestStatus.completed => StatusKind.success,
+  ItServiceRequestStatus.cancelled => StatusKind.neutral,
+  _ => StatusKind.neutral,
+};

lib/screens/it_service_requests/it_service_request_detail_screen.dart

@@ -31,6 +31,7 @@ import '../../widgets/mono_text.dart';
 import '../../widgets/responsive_body.dart';
 import '../../theme/app_status_colors.dart';
 import '../../widgets/status_pill.dart';
+import 'isr_status_kind.dart';
 import 'it_service_request_pdf.dart';
 
 class ItServiceRequestDetailScreen extends ConsumerStatefulWidget {
@@ -557,7 +558,7 @@ class _ItServiceRequestDetailScreenState
                   MonoText(request.requestNumber!),
                 const SizedBox(width: 12),
                 StatusPill.kind(
-                  _isrStatusKind(request.status),
+                  isrStatusKind(request.status),
                   label: ItServiceRequestStatus.label(request.status),
                 ),
                 const Spacer(),
@@ -2246,15 +2247,3 @@ class _EvidenceSectionState extends ConsumerState<_EvidenceSection> {
   }
 }
 
-/// Maps an IT service request status to a semantic [StatusKind]
-/// (amber=pending approval, blue=scheduled/in-progress, green=completed,
-/// grey=cancelled).
-StatusKind _isrStatusKind(String status) => switch (status) {
-  ItServiceRequestStatus.pendingApproval => StatusKind.warning,
-  ItServiceRequestStatus.scheduled => StatusKind.info,
-  ItServiceRequestStatus.inProgress => StatusKind.info,
-  ItServiceRequestStatus.inProgressDryRun => StatusKind.info,
-  ItServiceRequestStatus.completed => StatusKind.success,
-  ItServiceRequestStatus.cancelled => StatusKind.neutral,
-  _ => StatusKind.neutral,
-};

lib/screens/it_service_requests/it_service_requests_list_screen.dart

@@ -19,6 +19,7 @@ import '../../utils/app_time.dart';
 import '../../utils/snackbar.dart';
 import '../../theme/app_status_colors.dart';
 import '../../widgets/app_status_summary.dart';
+import 'isr_status_kind.dart';
 import '../../widgets/m3_card.dart';
 import '../../widgets/mono_text.dart';
 import '../../widgets/reconnect_overlay.dart';
@@ -669,7 +670,10 @@ class _RequestTile extends StatelessWidget {
                 if (request.requestNumber != null)
                   MonoText(request.requestNumber!),
                 const Spacer(),
-                StatusPill(label: ItServiceRequestStatus.label(request.status)),
+                StatusPill.kind(
+                  isrStatusKind(request.status),
+                  label: ItServiceRequestStatus.label(request.status),
+                ),
               ],
             ),
             const SizedBox(height: 8),

lib/screens/reports/widgets/report_card_wrapper.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 
+import '../../../theme/app_surfaces.dart';
+
 /// Wraps each report chart widget in a themed Card with a title, loading
 /// skeleton and error state handling. Exposes a [GlobalKey] on the inner
 /// [RepaintBoundary] so the PDF exporter can capture the rendered chart
@@ -74,15 +76,25 @@ class ReportCardWrapper extends StatelessWidget {
       body = child;
     }
 
+    final radius = AppSurfaces.of(context).cardRadius;
+    final isDark = colors.brightness == Brightness.dark;
+
     final cardContent = Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.min,
       children: [
         Padding(
-          padding: const EdgeInsets.fromLTRB(16, 14, 16, 4),
+          padding: const EdgeInsets.fromLTRB(16, 12, 16, 10),
-          child: Text(title, style: text.titleSmall),
+          child: Text(
+            title.toUpperCase(),
+            style: text.labelMedium?.copyWith(
+              fontWeight: FontWeight.w700,
+              letterSpacing: 0.6,
+              color: colors.onSurfaceVariant,
             ),
-        const Divider(height: 1),
+          ),
+        ),
+        Divider(height: 1, color: colors.outlineVariant),
         Padding(
           padding: const EdgeInsets.all(16),
           child: height != null ? SizedBox(height: height, child: body) : body,
@@ -93,8 +105,12 @@ class ReportCardWrapper extends StatelessWidget {
     final card = Card(
       elevation: 0,
       shadowColor: Colors.transparent,
-      color: colors.surfaceContainerLow,
+      surfaceTintColor: Colors.transparent,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      color: isDark ? colors.surfaceContainer : colors.surfaceContainerLowest,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(radius),
+        side: BorderSide(color: colors.outlineVariant),
+      ),
       child: cardContent,
     );
 

lib/screens/reports/widgets/request_distribution_charts.dart

@@ -77,10 +77,11 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
     return ReportCardWrapper(
       title: 'Request Type Distribution',
       repaintBoundaryKey: widget.repaintKey,
-      height: 220,
+      height: 180,
       child: Row(
         children: [
-          Expanded(
+          SizedBox(
+            width: 150,
             child: PieChart(
               PieChartData(
                 pieTouchData: PieTouchData(
@@ -116,8 +117,9 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
               ),
             ),
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 16),
-          Column(
+          Expanded(
+            child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: data.asMap().entries.map((entry) {
@@ -133,6 +135,7 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
                 );
               }).toList(),
             ),
+          ),
         ],
       ),
     );
@@ -208,10 +211,11 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
     return ReportCardWrapper(
       title: 'Request Category Distribution',
       repaintBoundaryKey: widget.repaintKey,
-      height: 220,
+      height: 180,
       child: Row(
         children: [
-          Expanded(
+          SizedBox(
+            width: 150,
             child: PieChart(
               PieChartData(
                 pieTouchData: PieTouchData(
@@ -247,8 +251,9 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
               ),
             ),
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 16),
-          Column(
+          Expanded(
+            child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: data.asMap().entries.map((entry) {
@@ -264,6 +269,7 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
                 );
               }).toList(),
             ),
+          ),
         ],
       ),
     );

lib/screens/reports/widgets/status_charts.dart

@@ -52,10 +52,11 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
         return ReportCardWrapper(
           title: 'Tickets by Status',
           repaintBoundaryKey: widget.repaintKey,
-          height: 220,
+          height: 180,
           child: Row(
             children: [
-              Expanded(
+              SizedBox(
+                width: 150,
                 child: PieChart(
                   PieChartData(
                     pieTouchData: PieTouchData(
@@ -92,8 +93,9 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
                   ),
                 ),
               ),
-              const SizedBox(width: 12),
+              const SizedBox(width: 16),
-              Column(
+              Expanded(
+                child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: data.asMap().entries.map((entry) {
@@ -109,6 +111,7 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
                     );
                   }).toList(),
                 ),
+              ),
             ],
           ),
         );
@@ -178,10 +181,11 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
         return ReportCardWrapper(
           title: 'Tasks by Status',
           repaintBoundaryKey: widget.repaintKey,
-          height: 220,
+          height: 180,
           child: Row(
             children: [
-              Expanded(
+              SizedBox(
+                width: 150,
                 child: PieChart(
                   PieChartData(
                     pieTouchData: PieTouchData(
@@ -218,8 +222,9 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
                   ),
                 ),
               ),
-              const SizedBox(width: 12),
+              const SizedBox(width: 16),
-              Column(
+              Expanded(
+                child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: data.asMap().entries.map((entry) {
@@ -235,6 +240,7 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
                     );
                   }).toList(),
                 ),
+              ),
             ],
           ),
         );