refine: Reminder Manager — align to premium design

Replace SaaS-generic KPI icon boxes with flat inline layout.
Replace MUI color-prop status chips with design-system colors
matching the rest of the supply workspace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/supply/ReminderKpiBar.tsx

@@ -21,41 +21,26 @@ function KpiCard({ icon, label, value, color, active, onClick }: KpiCardProps) {
       onClick={onClick}
       sx={{
         flex: 1,
-        p: 1.5,
+        px: 1.5,
+        py: 1.125,
         display: 'flex',
         alignItems: 'center',
-        gap: 1.5,
+        gap: 1,
-        border: active ? `2px solid ${color}` : '1px solid #e2e8f0',
+        border: active ? `1.5px solid ${color}` : '1px solid #e8e7e4',
         borderRadius: 1.5,
-        bgcolor: active ? `${color}10` : 'white',
+        bgcolor: active ? `${color}08` : 'white',
         cursor: 'pointer',
-        transition: 'all 0.15s',
+        transition: 'border-color 0.15s, background 0.15s',
         minWidth: 0,
-        '&:hover': {
+        '&:hover': { bgcolor: `${color}06`, borderColor: color },
-          bgcolor: `${color}0d`,
-          borderColor: color,
-        },
       }}
     >
-      <Box
+      <Box sx={{ opacity: active ? 1 : 0.55, flexShrink: 0 }}>{icon}</Box>
-        sx={{
-          width: 34,
-          height: 34,
-          borderRadius: 1,
-          bgcolor: `${color}18`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexShrink: 0,
-        }}
-      >
-        {icon}
-      </Box>
       <Box sx={{ minWidth: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700, color, lineHeight: 1.2, fontSize: '1.25rem' }}>
+        <Typography sx={{ fontWeight: 700, color, lineHeight: 1.1, fontSize: '1.1rem' }}>
           {value}
         </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap', fontSize: '0.7rem' }}>
+        <Typography variant="caption" sx={{ color: '#64748b', whiteSpace: 'nowrap', fontSize: '0.68rem' }}>
           {label}
         </Typography>
       </Box>

src/components/supply/ReminderListRow.tsx

@@ -16,13 +16,6 @@ const PRIORITY_BORDER: Record<string, string> = {
   [ReminderPriority.LOW]: 'transparent',
 }
 
-const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
-  ACTIVE: 'info',
-  SNOOZED: 'warning',
-  COMPLETED: 'success',
-  DISMISSED: 'default',
-}
-
 const STATUS_LABEL: Record<string, string> = {
   ACTIVE:    'Aktiv',
   SNOOZED:   'Schlummernd',
@@ -30,6 +23,13 @@ const STATUS_LABEL: Record<string, string> = {
   DISMISSED: 'Verworfen',
 }
 
+const STATUS_STYLE: Record<string, { bg: string; color: string; border: string }> = {
+  ACTIVE:    { bg: '#f0fdf4', color: '#15803d', border: '#bbf7d0' },
+  SNOOZED:   { bg: '#fefce8', color: '#92400e', border: '#fde68a' },
+  COMPLETED: { bg: '#f8fafc', color: '#475569', border: '#e2e8f0' },
+  DISMISSED: { bg: '#f8fafc', color: '#94a3b8', border: '#e8e7e4' },
+}
+
 interface Props {
   reminder: Reminder
 }
@@ -121,9 +121,15 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
       <Box>
         <Chip
           label={STATUS_LABEL[reminder.status]}
-          color={STATUS_CHIP_COLOR[reminder.status]}
           size="small"
-          sx={{ height: 20, fontSize: '0.7rem' }}
+          sx={{
+            height: 20,
+            fontSize: '0.7rem',
+            fontWeight: 500,
+            bgcolor: STATUS_STYLE[reminder.status]?.bg ?? '#f8fafc',
+            color: STATUS_STYLE[reminder.status]?.color ?? '#64748b',
+            border: `1px solid ${STATUS_STYLE[reminder.status]?.border ?? '#e2e8f0'}`,
+          }}
         />
       </Box>