Refine admin PWA dark theme controls

resources/js/admin/mobile/EventsPage.tsx

@@ -20,7 +20,7 @@ import { getApiErrorMessage } from '../lib/apiError';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { buildEventStatusCounts, filterEventsByStatus, resolveEventStatusKey, type EventStatusKey } from './lib/eventFilters';
 import { buildEventListStats } from './lib/eventListStats';
-import { useAdminTheme } from './theme';
+import { useAdminTheme, withAlpha } from './theme';
 import { useAuth } from '../auth/context';
 
 export default function MobileEventsPage() {
@@ -235,7 +235,9 @@ function EventsList({
   onEdit?: (slug: string) => void;
 }) {
   const { t } = useTranslation('management');
-  const { text, muted, subtle, border, primary, surface, surfaceMuted, shadow } = useAdminTheme();
+  const { text, muted, subtle, border, primary, surface, surfaceMuted, shadow, accentSoft } = useAdminTheme();
+  const activePillBg = accentSoft ?? withAlpha(primary, 0.18);
+  const activePillBorder = withAlpha(primary, 0.45);
 
   const statusCounts = React.useMemo(() => buildEventStatusCounts(events), [events]);
   const filteredByStatus = React.useMemo(
@@ -329,7 +331,8 @@ function EventsList({
                     value={filter.key}
                     borderRadius="$4"
                     borderWidth={1}
-                    borderColor={border}
+                    borderColor={active ? activePillBorder : border}
+                    backgroundColor={active ? activePillBg : 'transparent'}
                     paddingVertical="$2"
                     paddingHorizontal="$3"
                     width="auto"
@@ -337,7 +340,7 @@ function EventsList({
                     flexShrink={0}
                     hoverStyle={{ backgroundColor: '$backgroundHover' }}
                     pressStyle={{ backgroundColor: '$backgroundPress' }}
-                    activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
+                    activeStyle={{ backgroundColor: activePillBg, borderColor: activePillBorder }}
                   >
                       <XStack alignItems="center" gap="$2">
                         <Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>