UI Phase 2 (L7): tighten Reports chart grid layout

Reduce dead whitespace and align the Reports charts to the cyber card language.
Layout only — charts, data and PDF export untouched.

- report_card_wrapper.dart: flat tonal fill + hairline outline + token radius
  (was surfaceContainerLow + hard 16 radius, no border); uppercase telemetry
  card title to match section headers.
- status_charts.dart / request_distribution_charts.dart: donut charts now use a
  fixed 150px donut with an Expanded legend beside it (was an Expanded donut +
  cramped right legend, leaving a large central gap); card height 220 -> 180.

Verified: flutter analyze lib clean; flutter build web green; visual QA (Reports)
in dark.

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

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(),
                 ),
+              ),
             ],
           ),
         );