UI: Cyber/IT design overhaul with semantic status tokens (Material 3)

Re-theme TasQ with a refined enterprise "Cyber/IT" identity on Material 3.
Functionality is unchanged — only color/shape tokens and a few state widgets.

Foundation:
- Hand-tuned light + dark ColorSchemes (deep-slate surfaces, azure/teal/violet
  accents), tightened 12-16dp shape language, flat hairline-outlined cards.
- New AppStatusColors theme extension (success/warning/danger/info/neutral,
  per-brightness) replacing scattered raw Colors.green/orange/red/grey so status
  color is consistent and legible in dark mode.
- New TechChip mono primitive; StatusPill.kind; M3Card hairline variants;
  tightened AppSurfaces radii.

Per-screen:
- Tokenized status colors + radii across dashboard, tickets, tasks, IT service
  requests, attendance, whereabouts, network map, reports charts, auth, and
  shared/admin screens. Added _ticketStatusKind/_taskStatusKind/_isrStatusKind
  mappers so status carries meaning consistently.
- Fixed white pie-slice borders for dark mode; dropped ad-hoc dialog radius
  overrides in favor of the theme default. Categorical palettes (leave-type
  icons, team color picker, distribution charts) intentionally preserved.

Verified: flutter analyze lib clean; flutter build web green; visual QA in
light and dark (dashboard, tickets, attendance).

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

lib/widgets/status_pill.dart

@@ -1,32 +1,60 @@
 import 'package:flutter/material.dart';
 
-/// M3 Expressive status pill — uses tonal container colors with a
-/// smooth, spring-physics-inspired animation.
+import '../theme/app_status_colors.dart';
+import '../theme/app_surfaces.dart';
+
+/// Cyber/IT status pill — a compact, uppercase, mono-friendly badge whose color
+/// carries meaning via [AppStatusColors].
+///
+/// Two constructors:
+/// * [StatusPill.kind] (preferred) — pass a semantic [StatusKind] and it pulls
+///   the correct tonal container/foreground from the theme, consistent in both
+///   light and dark.
+/// * The default constructor keeps the older `isEmphasized` behaviour for
+///   back-compat (primaryContainer vs. tertiaryContainer).
 class StatusPill extends StatelessWidget {
-  const StatusPill({super.key, required this.label, this.isEmphasized = false});
+  const StatusPill({super.key, required this.label, this.isEmphasized = false})
+    : kind = null;
+
+  /// Semantic variant — the recommended way to build a status pill.
+  const StatusPill.kind(
+    this.kind, {
+    super.key,
+    required this.label,
+  }) : isEmphasized = false;
 
   final String label;
   final bool isEmphasized;
+  final StatusKind? kind;
 
   @override
   Widget build(BuildContext context) {
     final scheme = Theme.of(context).colorScheme;
-    // isEmphasized uses primaryContainer (higher tonal weight) to visually
-    // distinguish high-priority statuses from routine ones.
-    final background = isEmphasized
-        ? scheme.primaryContainer
-        : scheme.tertiaryContainer;
-    final foreground = isEmphasized
-        ? scheme.onPrimaryContainer
-        : scheme.onTertiaryContainer;
+    final radius = AppSurfaces.of(context).chipRadius;
+
+    late final Color background;
+    late final Color foreground;
+    if (kind != null) {
+      final swatch = AppStatusColors.of(context).byKind(kind!);
+      background = swatch.container;
+      foreground = swatch.onContainer;
+    } else {
+      // Legacy path: emphasis maps to primary vs. tertiary containers.
+      background = isEmphasized
+          ? scheme.primaryContainer
+          : scheme.tertiaryContainer;
+      foreground = isEmphasized
+          ? scheme.onPrimaryContainer
+          : scheme.onTertiaryContainer;
+    }
 
     return AnimatedContainer(
       duration: const Duration(milliseconds: 400),
       curve: Curves.easeOutCubic,
-      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
       decoration: BoxDecoration(
         color: background,
-        borderRadius: BorderRadius.circular(28),
+        borderRadius: BorderRadius.circular(radius),
       ),
       child: Text(
         label.toUpperCase(),