Fix minor dark mode issues and language/theme selection alignement

src/App.tsx

@@ -144,6 +144,8 @@ const MedPlanAssistant = () => {
           onAccept={handleAcceptDisclaimer}
           currentLanguage={currentLanguage}
           onLanguageChange={changeLanguage}
+          currentTheme={uiSettings.theme || 'system'}
+          onThemeChange={(theme: 'light' | 'dark' | 'system') => updateUiSetting('theme', theme)}
           t={t}
         />
 
@@ -166,10 +168,10 @@ const MedPlanAssistant = () => {
         <div className="max-w-7xl mx-auto">
           <header className="mb-8">
             <div className="flex justify-between items-start gap-4">
-            <div>
+              <div className="">
                 <h1 className="text-3xl md:text-4xl font-bold tracking-tight">{t('appTitle')}</h1>
               </div>
-            <div className="flex flex-wrap gap-2 justify-end">
+              <div className="flex flex-wrap-reverse gap-2 justify-end">
                 <ThemeSelector
                   currentTheme={uiSettings.theme || 'system'}
                   onThemeChange={(theme: 'light' | 'dark' | 'system') => updateUiSetting('theme', theme)}

src/components/day-schedule.tsx

@@ -152,7 +152,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                   >
                     <Badge
                       variant="outline"
-                      className={`text-xs ${doseCountDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
+                      className={`text-xs ${doseCountDiff > 0 ? 'bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200' : 'bg-orange-100 dark:bg-orange-900/40 dark:text-orange-200'}`}
                     >
                       {doseCountDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
                       {day.doses.length} {day.doses.length === 1 ? t('dose') : t('doses')}
@@ -179,7 +179,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                   >
                     <Badge
                       variant="outline"
-                      className={`text-xs ${totalMgDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
+                      className={`text-xs ${totalMgDiff > 0 ? 'bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200' : 'bg-orange-100 dark:bg-orange-900/40 dark:text-orange-200'}`}
                     >
                       {totalMgDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
                       {day.doses.reduce((sum, dose) => sum + (parseFloat(dose.ldx) || 0), 0).toFixed(1)} mg

src/components/disclaimer-modal.tsx

@@ -13,6 +13,7 @@ import React, { useState } from 'react';
 import { Button } from './ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import LanguageSelector from './language-selector';
+import ThemeSelector from './theme-selector';
 import { PROJECT_REPOSITORY_URL } from '../constants/defaults';
 
 interface DisclaimerModalProps {
@@ -20,6 +21,8 @@ interface DisclaimerModalProps {
   onAccept: () => void;
   currentLanguage: string;
   onLanguageChange: (lang: string) => void;
+  currentTheme?: 'light' | 'dark' | 'system';
+  onThemeChange?: (theme: 'light' | 'dark' | 'system') => void;
   t: (key: string) => string;
 }
 
@@ -28,6 +31,8 @@ const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
   onAccept,
   currentLanguage,
   onLanguageChange,
+  currentTheme = 'system',
+  onThemeChange,
   t
 }) => {
   const [sourcesExpanded, setSourcesExpanded] = useState(false);
@@ -44,16 +49,25 @@ const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
                 <CardTitle className="text-2xl font-bold">
                   {t('disclaimerModalTitle')}
                 </CardTitle>
-                <p className="text-center text-muted-foreground mt-2">
+                <p className="text-left text-muted-foreground mt-2">
                   {t('disclaimerModalSubtitle')}
                 </p>
               </div>
+              <div className="flex flex-wrap-reverse gap-2 justify-end">
+                {onThemeChange && (
+                  <ThemeSelector
+                    currentTheme={currentTheme}
+                    onThemeChange={onThemeChange}
+                    t={t}
+                  />
+                )}
                 <LanguageSelector
                   currentLanguage={currentLanguage}
                   onLanguageChange={onLanguageChange}
                   t={t}
                 />
               </div>
+            </div>
           </CardHeader>
           <CardContent className="space-y-6 pt-6">
             {/* Purpose */}

src/components/simulation-chart.tsx

@@ -327,12 +327,12 @@ const chartDomain = React.useMemo(() => {
               <UiTooltip>
                 <UiTooltipTrigger asChild>
                   <span
-                    className="px-1 py-0.5 rounded-sm bg-white text-black shadow-sm border border-muted truncate inline-block max-w-[100px]"
+                    className="px-1 py-0.5 rounded-sm bg-background text-foreground shadow-sm border border-border truncate inline-block max-w-[100px]"
                   >
                     {labelInfo.display}
                   </span>
                 </UiTooltipTrigger>
-                <UiTooltipContent className="bg-white text-black shadow-md border max-w-xs">
+                <UiTooltipContent className="bg-background text-foreground shadow-md border border-border max-w-xs">
                   <span className="font-medium">{labelInfo.full}</span>
                 </UiTooltipContent>
               </UiTooltip>
@@ -481,9 +481,9 @@ const chartDomain = React.useMemo(() => {
                 }
 
                 return (
-                  <div className="recharts-default-tooltip" style={{ margin: 0, padding: 10, backgroundColor: 'rgb(255, 255, 255)', border: '1px solid rgb(204, 204, 204)', whiteSpace: 'nowrap' }}>
+                  <div className="bg-background border border-border rounded shadow-lg" style={{ margin: 0, padding: 10, whiteSpace: 'nowrap' }}>
-                    <p className="recharts-tooltip-label" style={{ margin: 0 }}>{t('time')}: {timeLabel}</p>
+                    <p className="text-foreground font-medium" style={{ margin: 0 }}>{t('time')}: {timeLabel}</p>
-                    <ul className="recharts-tooltip-item-list" style={{ padding: 0, margin: 0 }}>
+                    <ul style={{ padding: 0, margin: 0 }}>
                       {payload.map((entry: any, index: number) => {
                         const labelInfo = seriesLabels[entry.dataKey] || { display: entry.name, full: entry.name };
                         const isTemplate = entry.dataKey?.toString().includes('template');
@@ -493,12 +493,12 @@ const chartDomain = React.useMemo(() => {
                         return (
                           <li
                             key={`item-${index}`}
-                            className="recharts-tooltip-item"
+                            className="text-foreground"
                             style={{ display: 'block', paddingTop: 4, paddingBottom: 4, color: entry.color, opacity }}
                           >
-                            <span className="recharts-tooltip-item-name" title={labelInfo.full}>{labelInfo.display}</span>
+                            <span title={labelInfo.full}>{labelInfo.display}</span>
-                            <span className="recharts-tooltip-item-separator">: </span>
+                            <span>: </span>
-                            <span className="recharts-tooltip-item-value">{value} {t('unitNgml')}</span>
+                            <span>{value} {t('unitNgml')}</span>
                           </li>
                         );
                       })}