diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx
index 33dce13..cf20a6b 100644
--- a/frontend/src/components/ui/date-picker.tsx
+++ b/frontend/src/components/ui/date-picker.tsx
@@ -464,7 +464,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
               disabled={disabled}
               onMouseDown={(e) => e.preventDefault()}
               onClick={togglePopup}
-              className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-accent/10 transition-colors disabled:opacity-50"
+              className="absolute right-px top-px bottom-px w-9 flex items-center justify-center rounded-r-md bg-background hover:bg-accent/10 transition-colors disabled:opacity-50"
               tabIndex={-1}
               aria-label="Open calendar"
             >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 622024b..8718d43 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -205,14 +205,9 @@ input[type="datetime-local"]::-webkit-calendar-picker-indicator {
 .datepicker-wrapper input::-webkit-calendar-picker-indicator {
   display: none;
 }
-/* Firefox: -moz-appearance: textfield strips all native chrome including the calendar icon.
-   This is safe because the DatePicker component provides its own custom popup. */
-@-moz-document url-prefix() {
-  .datepicker-wrapper input[type="date"],
-  .datepicker-wrapper input[type="datetime-local"] {
-    -moz-appearance: textfield;
-  }
-}
+/* Firefox: No CSS pseudo-element exists to hide the native calendar icon.
+   The custom button covers the native icon zone with a solid background so
+   only one icon is visible regardless of browser. */
 
 /* ── Form validation — red outline only after submit attempt ── */
 form[data-submitted] input:invalid,