fix(question): show both language fields for MCQ options

Options editor used a single toggle-based bilingual field (BilingualInput)
that swapped English/Amharic in place via a tiny, easy-to-miss button.
Authors were filling English only and never noticing Amharic was empty.

- QuestionOptionsEditor: show separate always-visible English/Amharic
  TextInputs per option instead of the toggle field.
- BilingualInput (shared): for other callers still using the toggle,
  add a tooltip and a red dot indicator when the hidden language is
  empty, so the gap is visible without switching.

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

apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
-import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text } from '@mantine/core';
+import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { IconGripVertical, IconInfoCircle, IconPlus, IconTrash } from '@tabler/icons-react';
-import { BilingualInput, notify, useErrorHandler } from '@ema-platform/ui';
+import { notify, useErrorHandler } from '@ema-platform/ui';
 import type { BilingualValue } from '@ema-platform/ui';
 import {
   useGetQuestionWithOptionsQuery,
@@ -48,8 +48,10 @@ export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
     // pretending to know what they were.
   }, [question]);
 
-  const updateText = (index: number, text: BilingualValue) => {
-    setDraft((prev) => prev.map((o, i) => (i === index ? { ...o, text } : o)));
+  const updateField = (index: number, lang: keyof BilingualValue, value: string) => {
+    setDraft((prev) =>
+      prev.map((o, i) => (i === index ? { ...o, text: { ...o.text, [lang]: value } } : o)),
+    );
   };
 
   const toggleCorrect = (index: number) => {
@@ -93,26 +95,33 @@ export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
         {t('question.options.hint')}
       </Alert>
       {draft.map((option, index) => (
-        <Group key={index} gap="xs" wrap="nowrap" align="flex-end">
-          <IconGripVertical size={16} style={{ opacity: 0.4, marginBottom: 8 }} />
-          <BilingualInput
-            label={t('question.options.optionLabel', { number: index + 1 })}
-            value={option.text}
-            onChange={(v) => updateText(index, v)}
-            size="sm"
-            style={{ flex: 1 }}
-          />
+        <Group key={index} gap="xs" wrap="nowrap" align="center">
+          <IconGripVertical size={16} style={{ opacity: 0.4 }} />
+          <Stack gap={6} style={{ flex: 1 }}>
+            <TextInput
+              label={t('question.options.optionEn', { number: index + 1 })}
+              value={option.text.en}
+              onChange={(e) => updateField(index, 'en', e.currentTarget.value)}
+              size="sm"
+              required
+            />
+            <TextInput
+              label={t('question.options.optionAm', { number: index + 1 })}
+              value={option.text.am}
+              onChange={(e) => updateField(index, 'am', e.currentTarget.value)}
+              size="sm"
+              required
+            />
+          </Stack>
           <Checkbox
             label={t('question.options.correct')}
             checked={option.isCorrect}
             onChange={() => toggleCorrect(index)}
-            mb={4}
           />
           <ActionIcon
             variant="subtle"
             color="red"
             size="sm"
-            mb={4}
             disabled={draft.length <= 2}
             onClick={() => removeOption(index)}
           >