fix: improve dropdown text readability in dark theme on usage page (#997)

- Add global CSS rules for select elements in dark mode
- Use color-scheme property to signal dark mode to browser
- Explicitly style option elements with dark theme colors
- Fix UsageStats dropdown to use correct CSS variables (bg-surface, text-text-main)

Fixes dropdown text being unreadable in dark theme on usage page:
- Provider filter dropdown
- Table view selector (Model/Account/API Key/Endpoint)
- Pagination page size selector

Tested in Chrome and Firefox with both light and dark themes.

src/shared/components/Pagination.js

@@ -63,6 +63,7 @@ export default function Pagination({
                 "text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20",
                 "cursor-pointer"
               )}
+              style={{ colorScheme: 'auto' }}
             >
               {[10, 20, 50].map((size) => (
                 <option key={size} value={size}>

src/shared/components/UsageStats.js

@@ -455,7 +455,8 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
           <select
             value={tableView}
             onChange={(e) => setTableView(e.target.value)}
-            className="w-full rounded-lg border border-border bg-bg-subtle px-3 py-1.5 text-sm font-medium text-text focus:outline-none focus:ring-2 focus:ring-primary/50 sm:w-auto"
+            className="w-full rounded-lg border border-border bg-surface px-3 py-1.5 text-sm font-medium text-text-main focus:outline-none focus:ring-2 focus:ring-primary/50 sm:w-auto"
+            style={{ colorScheme: 'auto' }}
           >
             {TABLE_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>{opt.label}</option>