Update various color/style improvements, primarily for error/warn/info bubbles and boxes

docs/README.CONTENT_FORMATTING.md

@@ -0,0 +1,129 @@
+# Content Formatting Usage Guide
+
+The `contentFormatter` utility (`src/utils/contentFormatter.tsx`) provides markdown-style formatting for various UI content throughout the application.
+
+## Supported Formatting
+
+- **Bold:** `**text**` → **text**
+- **Italic:** `*text*` → *text*
+- **Bold + Italic:** `***text***` → ***text***
+- **Underline:** `__text__` → <u>text</u>
+- **Line breaks:** `\n` (use `\\n` in translation strings)
+- **Links:** `[text](url)` → clickable link with yellow underline
+
+## Current Usage
+
+### 1. Tooltips (✅ Already Implemented)
+
+All tooltips in `settings.tsx` use `formatContent()`:
+
+```tsx
+import { formatContent } from '../utils/contentFormatter';
+
+<TooltipContent>
+  <p className="text-xs max-w-xs">
+    {formatContent(t('myTooltip'))}
+  </p>
+</TooltipContent>
+```
+
+**Example translation:**
+```typescript
+myTooltip: "This is a tooltip.\\n\\n**Important:** Some key info.\\n\\n***Default:*** 11h."
+```
+
+## Potential Future Usage
+
+### 2. Error/Warning Messages in Form Fields
+
+The formatter can be applied to `errorMessage` and `warningMessage` props in form components:
+
+**Current implementation** (plain text):
+```tsx
+<FormNumericInput
+  errorMessage="Value must be between 5 and 50"
+  warningMessage="Value is outside typical range"
+/>
+```
+
+**With formatting** (enhanced):
+```tsx
+import { formatContent } from '../utils/contentFormatter';
+
+// In FormNumericInput component (form-numeric-input.tsx):
+{hasError && isFocused && errorMessage && (
+  <div className="absolute top-full left-0 w-full mt-1 p-2 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-700 rounded text-xs text-red-800 dark:text-red-200 z-50">
+    {formatContent(errorMessage)}
+  </div>
+)}
+```
+
+**Example with formatting:**
+```typescript
+errorMessage={t('errorEliminationHalfLife')}
+
+// In translations:
+errorEliminationHalfLife: "**Invalid value.**\\n\\nHalf-life must be between **5h** and **50h**.\\n\\nSee [reference ranges](https://example.com)."
+```
+
+### 3. Info Boxes
+
+Static info boxes (like `advancedSettingsWarning`) could support formatting:
+
+**Current:**
+```tsx
+<p className="text-yellow-800 dark:text-yellow-200">
+  {t('advancedSettingsWarning')}
+</p>
+```
+
+**With formatting:**
+```tsx
+<div className="text-yellow-800 dark:text-yellow-200">
+  {formatContent(t('advancedSettingsWarning'))}
+</div>
+```
+
+**Example translation:**
+```typescript
+advancedSettingsWarning: "⚠️ **Warning:**\\n\\nThese parameters affect simulation accuracy.\\n\\nOnly adjust if you have ***specific clinical data*** or research references."
+```
+
+### 4. Modal Content
+
+Dialog/modal descriptions could use formatting for better readability:
+
+```tsx
+<DialogDescription>
+  {formatContent(t('deleteConfirmation'))}
+</DialogDescription>
+
+// Translation:
+deleteConfirmation: "Are you sure you want to delete this data?\\n\\n**This action cannot be undone.**\\n\\nConsider [exporting a backup](export) first."
+```
+
+## Implementation Checklist
+
+To add formatting support to a component:
+
+1. ✅ Import the formatter: `import { formatContent } from '../utils/contentFormatter'`
+2. ✅ Wrap the content: `{formatContent(text)}`
+3. ✅ Update translations to use `\\n`, `**bold**`, `*italic*`, etc.
+4. ✅ Test in both light and dark themes
+5. ✅ Ensure links open in new tabs (already handled by formatter)
+
+## Notes
+
+- The formatter returns React nodes, so it should replace the content, not be nested inside `{}`
+- Links automatically get `target="_blank"` and `rel="noopener noreferrer"`
+- Link color is yellow (`text-yellow-300`) to maintain visibility in dark themes
+- Line breaks use `\\n` in translation files (double backslash for escaping)
+- The formatter is safe for user-generated content (doesn't execute scripts)
+
+## Benefits
+
+- **Improved readability:** Structure complex information with line breaks and emphasis
+- **Consistency:** Unified formatting across tooltips, errors, warnings, and info boxes
+- **Accessibility:** Links and emphasis improve screen reader experience
+- **Maintainability:** Simple markdown-style syntax in translation files
+- **I18n friendly:** All formatting stays in translation strings, easy to translate