Fix RequestRowDetails styling to use foreground colors only for status indicators

- Replace getTotalResponseTimeColor() inline styles with getTotalResponseTimeClass() CSS classes
- Add CSS overrides in RequestRowDetails.module.css to remove background colors from status classes
- Ensure danger, warning, and success indicators only affect text color, not background
- Maintain consistent component background styling throughout expanded details
- Use \!important declarations to override inherited status class background properties
- Preserve semantic color meanings (green=success, orange=warning, red=danger) for text only

Technical changes:
- Import getTotalResponseTimeClass instead of getTotalResponseTimeColor in RequestRowDetails.tsx
- Add CSS rules targeting .detailListItem and .timingHighlighted with status classes
- Set background-color: transparent \!important for all status class combinations
- Apply color variables (--color-success, --color-warning, --color-danger) to text only

🤖 Generated with [Claude Code](https://claude.ai/code)

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

src/components/httprequestviewer/RequestRowDetails.module.css

@@ -110,4 +110,30 @@ div.fullWidth {
     text-overflow: ellipsis;
     cursor: help;
     word-break: break-all;
+}
+
+/* Override status classes to only use foreground colors, not background colors */
+.detailListItem.success,
+.detailListItem.warning, 
+.detailListItem.danger,
+.timingHighlighted.success,
+.timingHighlighted.warning,
+.timingHighlighted.danger {
+    background-color: transparent !important;
+}
+
+/* Ensure status colors are applied only to text */
+.detailListItem.success,
+.timingHighlighted.success {
+    color: var(--color-success) !important;
+}
+
+.detailListItem.warning,
+.timingHighlighted.warning {
+    color: var(--color-warning) !important;
+}
+
+.detailListItem.danger,
+.timingHighlighted.danger {
+    color: var(--color-danger) !important;
 }

src/components/httprequestviewer/RequestRowDetails.tsx

@@ -5,7 +5,7 @@ import styles from './RequestRowDetails.module.css'
 // Import utility functions
 import { formatDuration, formatSize } from './lib/formatUtils'
 import {
-  getTotalResponseTimeColor,
+  getTotalResponseTimeClass,
   getQueueAnalysisIcon,
   getCDNIcon,
   getCDNDisplayName,
@@ -59,7 +59,7 @@ const RequestRowDetails: React.FC<RequestRowDetailsProps> = ({ request, visibleC
               </div>
               <div className={styles.detailListItem}><strong>Server Latency:</strong> {formatDuration(request.timing.serverLatency)}</div>
               <div className={styles.detailListItem}><strong>Network Duration:</strong> {formatDuration(request.timing.duration)}</div>
-              <div className={`${styles.detailListItem} ${styles.timingHighlighted}`} style={{ ...getTotalResponseTimeColor(request.timing.totalResponseTime) }}>
+              <div className={`${styles.detailListItem} ${styles.timingHighlighted} ${getTotalResponseTimeClass(request.timing.totalResponseTime)}`}>
                 <strong>Total Response Time:</strong> {formatDuration(request.timing.totalResponseTime)}
               </div>
               <div className={styles.detailListItem}><strong>Network Duration Only:</strong> {formatDuration(request.timing.networkDuration)}</div>